HelpDesk — Support Ticketing

/* @component-map * App — Main container, handles auth, view switching, layout * Sidebar — Navigation sidebar with user info * Topbar — Top bar with page title and new ticket button * Dashboard — Dashboard view with stats and recent tickets * TicketList — All tickets view with filters and search * MyTickets — Current user's tickets view * ManageTickets — Admin ticket management view * TicketDetail — Ticket detail view with comments * NewTicketModal — Modal for creating new tickets * Toast — Toast notification component * @end-component-map */ import { useCollection, useAuth, useUpload, useNotifications } from '@deplixo/sdk'; import { Sidebar } from './components/Sidebar.jsx'; import { Topbar } from './components/Topbar.jsx'; import { Dashboard } from './components/Dashboard.jsx'; import { TicketList } from './components/TicketList.jsx'; import { MyTickets } from './components/MyTickets.jsx'; import { ManageTickets } from './components/ManageTickets.jsx'; import { TicketDetail } from './components/TicketDetail.jsx'; import { NewTicketModal } from './components/NewTicketModal.jsx'; import { Toast } from './components/Toast.jsx'; import { createContext, useCallback, useContext, useEffect, useState } from 'react'; import { AppProvider, useAppContext } from './components/AppContext.jsx'; function AppInner() { const context = useContext(AppProvider); return (

{context?.view === 'dashboard' && } {context?.view === 'tickets' && } {context?.view === 'my-tickets' && } {context?.view === 'manage' && } {context?.view === 'detail' && }

{context?.showModal && }

); } function App() { const { user, loading } = useAuth(); useEffect(() => { if (!user) { window.location.href = '/login'; } }, [user]); if (loading || !user) { return (

Loading HelpDesk...

); } return ( ); } ReactDOM.createRoot(document.getElementById("root")).render();