Files
personal-support-ticket-system/frontend/src/App.tsx
2026-03-10 01:15:09 +09:00

74 lines
2.3 KiB
TypeScript

import { useState } from 'react'
import { Layout } from './components/ui/Layout.tsx'
import { Tabs } from './components/ui/Tabs.tsx'
import { UserPage } from './pages/UserPage.tsx'
import { AdminPage } from './pages/AdminPage.tsx'
import { AdminStatsPage } from './pages/AdminStatsPage.tsx'
import { LoginPage } from './pages/LoginPage.tsx'
import { useAuth } from './hooks/useAuth.ts'
import { AuthBar } from './components/ui/AuthBar.tsx'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { NotFound } from './pages/NotFound.tsx'
type TabValue = 'tickets' | 'admin' | 'stats'
function SupportApp() {
const [activeTab, setActiveTab] = useState<TabValue>('tickets')
const [showLogin, setShowLogin] = useState(false)
const { user, authState, logout } = useAuth()
const urlError = new URLSearchParams(window.location.search).get('error')
if (showLogin || urlError) {
return (
<Layout>
<LoginPage
error={urlError}
onBack={() => {
setShowLogin(false)
window.history.replaceState({}, '', window.location.pathname)
}}
/>
</Layout>
)
}
if (authState === 'pending') {
return (
<div className="flex min-h-screen items-center justify-center bg-bg-100">
<p className="text-sm text-fg-300">Loading...</p>
</div>
)
}
const tabs: { value: TabValue; label: string }[] = [
{ value: 'tickets', label: 'My Tickets' },
{ value: 'admin', label: 'Admin' },
{ value: 'stats', label: 'Admin Stats' },
]
return (
<Layout
subHeader={
<AuthBar user={user} onLogin={() => setShowLogin(true)} onLogout={logout} />
}
>
<Tabs tabs={tabs} active={activeTab} onChange={setActiveTab} />
{activeTab === 'tickets' && <UserPage isAuthenticated={authState === 'authenticated'} />}
{activeTab === 'admin' && <AdminPage isAuthenticated={authState === 'authenticated'} user={user} />}
{activeTab === 'stats' && <AdminStatsPage isAuthenticated={authState === 'authenticated'} />}
</Layout>
)
}
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<SupportApp />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
)
}