tambahan

src/pages/scr/dashboard/dashboard_layout.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useState } from "react";
+
+import {
+  ActionIcon,
+  AppShell,
+  Avatar,
+  Button,
+  Card,
+  Divider,
+  Flex,
+  Group,
+  NavLink,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from "@mantine/core";
+import { useLocalStorage } from "@mantine/hooks";
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconDashboard,
+  IconKey,
+  IconLock,
+} from "@tabler/icons-react";
+import type { User } from "generated/prisma";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+
+import {
+  default as clientRoute,
+  default as clientRoutes,
+} from "@/clientRoutes";
+import apiFetch from "@/lib/apiFetch";
+
+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,
+  });
+
+  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>
+          <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>
+  );
+}
+
+/* ----------------------- Host Info ----------------------- */
+function HostView() {
+  const [host, setHost] = useState<User | null>(null);
+
+  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 ? (
+        <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 isActive = (path: keyof typeof clientRoute) =>
+    location.pathname.startsWith(clientRoute[path]);
+
+  return (
+    <Stack gap="xs" p="sm">
+      <NavLink
+        active={isActive("/scr/dashboard/dashboard-home")}
+        leftSection={<IconDashboard size={20} />}
+        label="Dashboard Overview"
+        description="Quick summary and activity highlights"
+        onClick={() => navigate(clientRoutes["/scr/dashboard/dashboard-home"])}
+      />
+      <NavLink
+        active={isActive("/scr/dashboard/apikey/apikey")}
+        leftSection={<IconKey size={20} />}
+        label="Dashboard Overview"
+        description="Quick summary and activity highlights"
+        onClick={() => navigate(clientRoutes["/scr/dashboard/apikey/apikey"])}
+      />
+      <NavLink
+        active={isActive("/scr/dashboard/credential/credential")}
+        leftSection={<IconLock size={20} />}
+        label="Dashboard Overview"
+        description="Quick summary and activity highlights"
+        onClick={() =>
+          navigate(clientRoutes["/scr/dashboard/credential/credential"])
+        }
+      />
+    </Stack>
+  );
+}