ok

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",

src/pages/dashboard/dashboard_layout.tsx

@@ -4,7 +4,9 @@ import {
     ActionIcon,
     AppShell,
     Avatar,
+    Button,
     Card,
+    Divider,
     Flex,
     Group,
     NavLink,
@@ -22,11 +24,22 @@ 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({
@@ -107,7 +120,7 @@ function HostView() {
 
     useEffect(() => {
         async function fetchHost() {
-    const {data} = await apiFetch.api.user.find.get()
+            const { data } = await apiFetch.api.user.find.get()
             setHost(data?.user ?? null)
         }
         fetchHost()
@@ -116,6 +129,7 @@ function HostView() {
     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]}
@@ -125,6 +139,9 @@ function HostView() {
                             <Text size="sm" c="dimmed">{host.email}</Text>
                         </Stack>
                     </Flex>
+                    <Divider />
+                    <Logout />
+                </Stack>
             ) : (
                 <Text size="sm" c="dimmed" ta="center">
                     No host information available
@@ -134,6 +151,7 @@ function HostView() {
     )
 }
 
+
 /* ----------------------- Navigation ----------------------- */
 function NavigationDashboard() {
     const navigate = useNavigate()