From b9c783cee1ea7fc4f8c587915e2999cdfb64edd3 Mon Sep 17 00:00:00 2001
From: bipproduction <bip.production.js@gmail.com>
Date: Tue, 7 Oct 2025 16:51:02 +0800
Subject: [PATCH] ok

---
 package.json                             |   3 +-
 src/pages/dashboard/dashboard_layout.tsx | 252 ++++++++++++-----------
 2 files changed, 137 insertions(+), 118 deletions(-)

diff --git a/package.json b/package.json
index a54a0d5..0d1368b 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "bun --hot src/index.tsx",
     "build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='BUN_PUBLIC_*'",
-    "start": "NODE_ENV=production bun src/index.tsx"
+    "start": "NODE_ENV=production bun src/index.tsx",
+    "seed": "bun prisma/seed.ts"
   },
   "dependencies": {
     "@elysiajs/cors": "^1.4.0",
diff --git a/src/pages/dashboard/dashboard_layout.tsx b/src/pages/dashboard/dashboard_layout.tsx
index c88428e..f043030 100644
--- a/src/pages/dashboard/dashboard_layout.tsx
+++ b/src/pages/dashboard/dashboard_layout.tsx
@@ -4,7 +4,9 @@ import {
     ActionIcon,
     AppShell,
     Avatar,
+    Button,
     Card,
+    Divider,
     Flex,
     Group,
     NavLink,
@@ -22,142 +24,158 @@ import {
     IconDashboard
 } from '@tabler/icons-react'
 import type { User } from 'generated/prisma'
-import { data, Outlet, useLocation, useNavigate } from 'react-router-dom'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 
 import { default as clientRoute, default as clientRoutes } from '@/clientRoutes'
 import apiFetch from '@/lib/apiFetch'
-import { showNotification } from '@mantine/notifications'
+
+
+function Logout() {
+    return <Group>
+        <Button variant='transparent' size='compact-xs' onClick={async () => {
+            await apiFetch.auth.logout.delete()
+            localStorage.removeItem('token')
+            window.location.href = '/login'
+        }}>Logout</Button>
+    </Group>
+}
+
 
 export default function DashboardLayout() {
-  const [opened, setOpened] = useLocalStorage({
-    key: 'nav_open',
-    defaultValue: true,
-  })
+    const [opened, setOpened] = useLocalStorage({
+        key: 'nav_open',
+        defaultValue: true,
+    })
 
-  return (
-    <AppShell
-      padding="md"
-      navbar={{
-        width: 260,
-        breakpoint: 'sm',
-        collapsed: { mobile: !opened, desktop: !opened },
-      }}
-    >
-      <AppShell.Navbar>
-        <AppShell.Section>
-          <Group justify="flex-end" p="xs">
-            <Tooltip
-              label={opened ? 'Collapse navigation' : 'Expand navigation'}
-              withArrow
-            >
-              <ActionIcon
-                variant="light"
-                color="gray"
-                onClick={() => setOpened(v => !v)}
-                aria-label="Toggle navigation"
-                radius="xl"
-              >
-                {opened ? <IconChevronLeft /> : <IconChevronRight />}
-              </ActionIcon>
-            </Tooltip>
-          </Group>
-        </AppShell.Section>
+    return (
+        <AppShell
+            padding="md"
+            navbar={{
+                width: 260,
+                breakpoint: 'sm',
+                collapsed: { mobile: !opened, desktop: !opened },
+            }}
+        >
+            <AppShell.Navbar>
+                <AppShell.Section>
+                    <Group justify="flex-end" p="xs">
+                        <Tooltip
+                            label={opened ? 'Collapse navigation' : 'Expand navigation'}
+                            withArrow
+                        >
+                            <ActionIcon
+                                variant="light"
+                                color="gray"
+                                onClick={() => setOpened(v => !v)}
+                                aria-label="Toggle navigation"
+                                radius="xl"
+                            >
+                                {opened ? <IconChevronLeft /> : <IconChevronRight />}
+                            </ActionIcon>
+                        </Tooltip>
+                    </Group>
+                </AppShell.Section>
 
-        <AppShell.Section grow component={ScrollArea} flex={1}>
-          <NavigationDashboard />
-        </AppShell.Section>
+                <AppShell.Section grow component={ScrollArea} flex={1}>
+                    <NavigationDashboard />
+                </AppShell.Section>
 
-        <AppShell.Section>
-          <HostView />
-        </AppShell.Section>
-      </AppShell.Navbar>
+                <AppShell.Section>
+                    <HostView />
+                </AppShell.Section>
+            </AppShell.Navbar>
 
-      <AppShell.Main>
-        <Stack>
-          <Paper withBorder shadow="md" radius="lg" p="md">
-            <Flex align="center" gap="md">
-              {!opened && (
-                <Tooltip label="Open navigation menu" withArrow>
-                  <ActionIcon
-                    variant="light"
-                    color="gray"
-                    onClick={() => setOpened(true)}
-                    aria-label="Open navigation"
-                    radius="xl"
-                  >
-                    <IconChevronRight />
-                  </ActionIcon>
-                </Tooltip>
-              )}
-              <Title order={3} fw={600}>
-                App Dashboard
-              </Title>
-            </Flex>
-          </Paper>
-          <Outlet />
-        </Stack>
-      </AppShell.Main>
-    </AppShell>
-  )
+            <AppShell.Main>
+                <Stack>
+                    <Paper withBorder shadow="md" radius="lg" p="md">
+                        <Flex align="center" gap="md">
+                            {!opened && (
+                                <Tooltip label="Open navigation menu" withArrow>
+                                    <ActionIcon
+                                        variant="light"
+                                        color="gray"
+                                        onClick={() => setOpened(true)}
+                                        aria-label="Open navigation"
+                                        radius="xl"
+                                    >
+                                        <IconChevronRight />
+                                    </ActionIcon>
+                                </Tooltip>
+                            )}
+                            <Title order={3} fw={600}>
+                                App Dashboard
+                            </Title>
+                        </Flex>
+                    </Paper>
+                    <Outlet />
+                </Stack>
+            </AppShell.Main>
+        </AppShell>
+    )
 }
 
 /* ----------------------- Host Info ----------------------- */
 function HostView() {
-  const [host, setHost] = useState<User | null>(null)
+    const [host, setHost] = useState<User | null>(null)
 
-  useEffect(() => {
-   async function fetchHost() {
-    const {data} = await apiFetch.api.user.find.get()
-    setHost(data?.user ?? null)
-   }
-   fetchHost()
-  }, [])
+    useEffect(() => {
+        async function fetchHost() {
+            const { data } = await apiFetch.api.user.find.get()
+            setHost(data?.user ?? null)
+        }
+        fetchHost()
+    }, [])
 
-  return (
-    <Card radius="lg" withBorder shadow="sm" p="md">
-      {host ? (
-        <Flex gap="md" align="center">
-          <Avatar size="md" radius="xl" color="blue">
-            {host.name?.[0]}
-          </Avatar>
-          <Stack gap={2}>
-            <Text fw={600}>{host.name}</Text>
-            <Text size="sm" c="dimmed">{host.email}</Text>
-          </Stack>
-        </Flex>
-      ) : (
-        <Text size="sm" c="dimmed" ta="center">
-          No host information available
-        </Text>
-      )}
-    </Card>
-  )
+    return (
+        <Card radius="lg" withBorder shadow="sm" p="md">
+            {host ? (
+                <Stack>
+                    <Flex gap="md" align="center">
+                        <Avatar size="md" radius="xl" color="blue">
+                            {host.name?.[0]}
+                        </Avatar>
+                        <Stack gap={2}>
+                            <Text fw={600}>{host.name}</Text>
+                            <Text size="sm" c="dimmed">{host.email}</Text>
+                        </Stack>
+                    </Flex>
+                    <Divider />
+                    <Logout />
+                </Stack>
+            ) : (
+                <Text size="sm" c="dimmed" ta="center">
+                    No host information available
+                </Text>
+            )}
+        </Card>
+    )
 }
 
+
 /* ----------------------- Navigation ----------------------- */
 function NavigationDashboard() {
-  const navigate = useNavigate()
-  const location = useLocation()
+    const navigate = useNavigate()
+    const location = useLocation()
 
-  const isActive = (path: keyof typeof clientRoute) =>
-    location.pathname.startsWith(clientRoute[path])
+    const isActive = (path: keyof typeof clientRoute) =>
+        location.pathname.startsWith(clientRoute[path])
 
-  return (
-    <Stack gap="xs" p="sm">
-      <NavLink
-        active={isActive('/dashboard/landing')}
-        leftSection={<IconDashboard size={20} />}
-        label="Dashboard Overview"
-        description="Quick summary and activity highlights"
-        onClick={() => navigate(clientRoutes['/dashboard/landing'])}
-      />
-      <NavLink
-        active={isActive('/dashboard/apikey')}
-        leftSection={<IconDashboard size={20} />}
-        label="Dashboard Overview"
-        description="Quick summary and activity highlights"
-        onClick={() => navigate(clientRoutes['/dashboard/apikey'])}
-      />
-    </Stack>
-  )
+    return (
+        <Stack gap="xs" p="sm">
+            <NavLink
+                active={isActive('/dashboard/landing')}
+                leftSection={<IconDashboard size={20} />}
+                label="Dashboard Overview"
+                description="Quick summary and activity highlights"
+                onClick={() => navigate(clientRoutes['/dashboard/landing'])}
+            />
+            <NavLink
+                active={isActive('/dashboard/apikey')}
+                leftSection={<IconDashboard size={20} />}
+                label="Dashboard Overview"
+                description="Quick summary and activity highlights"
+                onClick={() => navigate(clientRoutes['/dashboard/apikey'])}
+            />
+        </Stack>
+    )
 }