wibu/bun-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tambahan

Browse Source
This commit is contained in:
bipproduction
2025-11-23 17:35:59 +08:00
parent 73c281d2b1
commit 51c9c4f126
19 changed files with 1168 additions and 766 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/App.tsx
View File

@@ -1,17 +1,17 @@
import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
import { Notifications } from '@mantine/notifications';
import { ModalsProvider } from '@mantine/modals';
import { MantineProvider } from '@mantine/core';
import AppRoutes from './AppRoutes';
import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import { Notifications } from "@mantine/notifications";
import { ModalsProvider } from "@mantine/modals";
import { MantineProvider } from "@mantine/core";
import AppRoutes from "./AppRoutes";
export function App() {
return <MantineProvider>
<Notifications />
<ModalsProvider>
<AppRoutes />
</ModalsProvider>
</MantineProvider>;
return (
<MantineProvider>
<Notifications />
<ModalsProvider>
<AppRoutes />
</ModalsProvider>
</MantineProvider>
);
}

43
src/AppRoutes.tsx
View File

@@ -1,32 +1,25 @@
// ⚡ Auto-generated by generateRoutes.ts — DO NOT EDIT MANUALLY
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import Login from "./pages/Login";
import ProtectedRoute from "./components/ProtectedRoute";
import Dashboard from "./pages/dashboard/dashboard_page";
import Home from "./pages/Home";
import ApikeyPage from "./pages/dashboard/apikey/apikey_page";
import DashboardPage from "./pages/dashboard/dashboard_page";
import DashboardLayout from "./pages/dashboard/dashboard_layout";
import ApiKeyPage from "./pages/dashboard/apikey/apikey_page";
import NotFound from "./pages/NotFound";
export default function AppRoutes() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route element={<ProtectedRoute />}>
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<Dashboard />} />
<Route path="landing" element={<Dashboard />} />
<Route path="apikey" element={<ApiKeyPage />} />
</Route>
</Route>
return (
<BrowserRouter>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/" element={<Home />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
<Route path="/dashboard" element={<DashboardLayout />}>
<Route path="/dashboard/apikey/apikey" element={<ApikeyPage />} />
<Route path="/dashboard/dashboard" element={<DashboardPage />} />
</Route>
<Route path="/*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}

6
src/clientRoutes.ts
View File

@@ -1,10 +1,10 @@
// AUTO-GENERATED FILE
const clientRoutes = {
"/": "/",
"/login": "/login",
"/": "/",
"/dashboard": "/dashboard",
"/dashboard/landing": "/dashboard/landing",
"/dashboard/apikey": "/dashboard/apikey",
"/dashboard/apikey/apikey": "/dashboard/apikey/apikey",
"/dashboard/dashboard": "/dashboard/dashboard",
"/*": "/*"
} as const;

26
src/components/ProtectedRoute.tsx
View File

@@ -1,25 +1,25 @@
import { useEffect, useState } from 'react'
import { Navigate, Outlet } from 'react-router-dom'
import clientRoutes from '@/clientRoutes'
import apiFetch from '@/lib/apiFetch'
import { useEffect, useState } from "react";
import { Navigate, Outlet } from "react-router-dom";
import clientRoutes from "@/clientRoutes";
import apiFetch from "@/lib/apiFetch";
export default function ProtectedRoute() {
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null)
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
useEffect(() => {
async function checkSession() {
try {
// backend otomatis baca cookie JWT dari request
const res = await apiFetch.api.user.find.get()
setIsAuthenticated(res.status === 200)
const res = await apiFetch.api.user.find.get();
setIsAuthenticated(res.status === 200);
} catch {
setIsAuthenticated(false)
setIsAuthenticated(false);
}
}
checkSession()
}, [])
checkSession();
}, []);
if (isAuthenticated === null) return null // or loading spinner
if (!isAuthenticated) return <Navigate to={clientRoutes['/login']} replace />
return <Outlet />
if (isAuthenticated === null) return null; // or loading spinner
if (!isAuthenticated) return <Navigate to={clientRoutes["/login"]} replace />;
return <Outlet />;
}

27
src/index.tsx
View File

@@ -1,27 +1,26 @@
import Elysia, { t } from "elysia";
import Swagger from "@elysiajs/swagger";
import html from "./index.html"
import html from "./index.html";
import Dashboard from "./server/routes/darmasaba";
import { apiAuth } from "./server/middlewares/apiAuth";
import Auth from "./server/routes/auth_route";
import ApiKeyRoute from "./server/routes/apikey_route";
import type { User } from "generated/prisma";
const Docs = new Elysia()
.use(Swagger({
const Docs = new Elysia().use(
Swagger({
path: "/docs",
}))
}),
);
const ApiUser = new Elysia({
prefix: "/user",
})
.get('/find', (ctx) => {
const { user } = ctx as any
return {
user: user as User
}
})
}).get("/find", (ctx) => {
const { user } = ctx as any;
return {
user: user as User,
};
});
const Api = new Elysia({
prefix: "/api",
@@ -29,7 +28,7 @@ const Api = new Elysia({
.use(apiAuth)
.use(ApiKeyRoute)
.use(Dashboard)
.use(ApiUser)
.use(ApiUser);
const app = new Elysia()
.use(Api)
@@ -40,6 +39,4 @@ const app = new Elysia()
console.log("Server running at http://localhost:3000");
});
export type ServerApp = typeof app;

52
src/pages/Home.tsx
View File

@@ -2,34 +2,30 @@ import clientRoutes from "@/clientRoutes";
import { Button, Card, Container, Group, Stack, Title } from "@mantine/core";
export default function Home() {
return (
<Container size={420} py={80}>
<Card shadow="sm" padding="xl" radius="md">
<Stack gap="md">
<Title order={2} ta="center">
Home
</Title>
return (
<Container size={420} py={80}>
<Card shadow="sm" padding="xl" radius="md">
<Stack gap="md">
<Title order={2} ta="center">
Home
</Title>
<Group grow>
<Button
size="sm"
component="a"
href={clientRoutes["/dashboard"]}
>
Dashboard
</Button>
<Group grow>
<Button size="sm" component="a" href={clientRoutes["/dashboard"]}>
Dashboard
</Button>
<Button
size="sm"
component="a"
href={clientRoutes["/login"]}
variant="light"
>
Login
</Button>
</Group>
</Stack>
</Card>
</Container>
);
<Button
size="sm"
component="a"
href={clientRoutes["/login"]}
variant="light"
>
Login
</Button>
</Group>
</Stack>
</Card>
</Container>
);
}

124
src/pages/Login.tsx
View File

@@ -1,71 +1,77 @@
import { Button, Card, Container, Group, PasswordInput, Stack, Text, TextInput, Title } from "@mantine/core";
import {
Button,
Card,
Container,
Group,
PasswordInput,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { useState } from "react";
import apiFetch from "../lib/apiFetch";
export default function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
const handleSubmit = async () => {
setLoading(true);
try {
const response = await apiFetch.auth.login.post({
email,
password,
});
const handleSubmit = async () => {
setLoading(true);
try {
const response = await apiFetch.auth.login.post({
email,
password,
});
if (response.data?.token) {
localStorage.setItem('token', response.data.token);
window.location.href = '/dashboard';
return;
}
if (response.data?.token) {
localStorage.setItem("token", response.data.token);
window.location.href = "/dashboard";
return;
}
if (response.error) {
alert(JSON.stringify(response.error));
}
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
if (response.error) {
alert(JSON.stringify(response.error));
}
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
return (
<Container size={420} py={80}>
<Card shadow="sm" radius="md" padding="xl">
<Stack gap="md">
<Title order={2} ta="center">
Login
</Title>
return (
<Container size={420} py={80}>
<Card shadow="sm" radius="md" padding="xl">
<Stack gap="md">
<Title order={2} ta="center">
Login
</Title>
<TextInput
label="Email"
placeholder="you@example.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<TextInput
label="Email"
placeholder="you@example.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<PasswordInput
label="Password"
placeholder="********"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<PasswordInput
label="Password"
placeholder="********"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<Group justify="flex-end" mt="sm">
<Button
onClick={handleSubmit}
loading={loading}
fullWidth
>
Login
</Button>
</Group>
</Stack>
</Card>
</Container>
);
<Group justify="flex-end" mt="sm">
<Button onClick={handleSubmit} loading={loading} fullWidth>
Login
</Button>
</Group>
</Stack>
</Card>
</Container>
);
}

12
src/pages/NotFound.tsx
View File

@@ -1,9 +1,7 @@
export default function NotFound() {
return (
<div>
<h1>404 Not Found</h1>
</div>
);
return (
<div>
<h1>404 Not Found</h1>
</div>
);
}

384
src/pages/dashboard/apikey/apikey_page.tsx
View File

@@ -1,15 +1,15 @@
import {
Button,
Card,
Container,
Group,
Stack,
Table,
Text,
TextInput,
Title,
Divider,
Loader,
Button,
Card,
Container,
Group,
Stack,
Table,
Text,
TextInput,
Title,
Divider,
Loader,
} from "@mantine/core";
import { useEffect, useState } from "react";
import apiFetch from "@/lib/apiFetch";
@@ -18,207 +18,213 @@ import useSwr from "swr";
import { modals } from "@mantine/modals";
export default function ApiKeyPage() {
return (
<Container size="md" w="100%" py="lg">
<Stack gap="lg">
<Title order={2}>API Key Management</Title>
<CreateApiKey />
<ListApiKey />
</Stack>
</Container>
);
return (
<Container size="md" w="100%" py="lg">
<Stack gap="lg">
<Title order={2}>API Key Management</Title>
<CreateApiKey />
<ListApiKey />
</Stack>
</Container>
);
}
function CreateApiKey() {
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [expiredAt, setExpiredAt] = useState("");
const [loading, setLoading] = useState(false);
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [expiredAt, setExpiredAt] = useState("");
const [loading, setLoading] = useState(false);
const handleSubmit = async () => {
try {
setLoading(true);
const handleSubmit = async () => {
try {
setLoading(true);
if (!name || !description || !expiredAt) {
showNotification({
title: "Error",
message: "All fields are required",
color: "red",
});
return;
}
if (!name || !description || !expiredAt) {
showNotification({
title: "Error",
message: "All fields are required",
color: "red",
});
return;
}
const res = await apiFetch.api.apikey.create.post({
name,
description,
expiredAt,
});
const res = await apiFetch.api.apikey.create.post({
name,
description,
expiredAt,
});
if (res.status === 200) {
setName("");
setDescription("");
setExpiredAt("");
if (res.status === 200) {
setName("");
setDescription("");
setExpiredAt("");
showNotification({
title: "Success",
message: "API key created successfully",
color: "green",
});
}
showNotification({
title: "Success",
message: "API key created successfully",
color: "green",
});
}
setLoading(false);
} catch (error) {
showNotification({
title: "Error",
message: "Failed to create API key " + JSON.stringify(error),
color: "red",
});
setLoading(false);
} finally {
setLoading(false);
}
};
setLoading(false);
} catch (error) {
showNotification({
title: "Error",
message: "Failed to create API key " + JSON.stringify(error),
color: "red",
});
setLoading(false);
} finally {
setLoading(false);
}
};
return (
<Card shadow="sm" radius="md" padding="lg">
<Stack gap="md">
<Title order={4}>Create API Key</Title>
return (
<Card shadow="sm" radius="md" padding="lg">
<Stack gap="md">
<Title order={4}>Create API Key</Title>
<TextInput
label="Name"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<TextInput
label="Name"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<TextInput
label="Description"
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<TextInput
label="Description"
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<TextInput
label="Expired At"
placeholder="Expired At"
type="date"
value={expiredAt}
onChange={(e) => setExpiredAt(e.target.value)}
/>
<TextInput
label="Expired At"
placeholder="Expired At"
type="date"
value={expiredAt}
onChange={(e) => setExpiredAt(e.target.value)}
/>
<Group justify="flex-end" mt="sm">
<Button
variant="outline"
onClick={() => {
setName("");
setDescription("");
setExpiredAt("");
}}
>
Cancel
</Button>
<Group justify="flex-end" mt="sm">
<Button
variant="outline"
onClick={() => {
setName("");
setDescription("");
setExpiredAt("");
}}
>
Cancel
</Button>
<Button onClick={handleSubmit} type="submit" loading={loading}>
Save
</Button>
</Group>
</Stack>
</Card>
);
<Button onClick={handleSubmit} type="submit" loading={loading}>
Save
</Button>
</Group>
</Stack>
</Card>
);
}
function ListApiKey() {
const { data, error, isLoading, mutate } = useSwr("/", () => apiFetch.api.apikey.list.get(), {
revalidateOnFocus: false,
revalidateOnReconnect: false,
revalidateIfStale: false,
refreshInterval: 3000,
})
const apiKeys = data?.data?.apiKeys || []
const { data, error, isLoading, mutate } = useSwr(
"/",
() => apiFetch.api.apikey.list.get(),
{
revalidateOnFocus: false,
revalidateOnReconnect: false,
revalidateIfStale: false,
refreshInterval: 3000,
},
);
const apiKeys = data?.data?.apiKeys || [];
useEffect(() => {
mutate()
}, []);
useEffect(() => {
mutate();
}, []);
if (error) return <Text color="red">Error fetching API keys</Text>
if (isLoading) return <Loader />
if (error) return <Text color="red">Error fetching API keys</Text>;
if (isLoading) return <Loader />;
return (
<Card shadow="sm" radius="md" padding="lg">
<Stack gap="md">
<Title order={4}>API Key List</Title>
return (
<Card shadow="sm" radius="md" padding="lg">
<Stack gap="md">
<Title order={4}>API Key List</Title>
<Divider />
<Divider />
<Table striped highlightOnHover withTableBorder withColumnBorders>
<Table.Thead>
<Table.Tr>
<Table.Th>Name</Table.Th>
<Table.Th>Description</Table.Th>
<Table.Th>Expired At</Table.Th>
<Table.Th>Created At</Table.Th>
<Table.Th style={{ width: 160 }}>Actions</Table.Th>
</Table.Tr>
</Table.Thead>
<Table striped highlightOnHover withTableBorder withColumnBorders>
<Table.Thead>
<Table.Tr>
<Table.Th>Name</Table.Th>
<Table.Th>Description</Table.Th>
<Table.Th>Expired At</Table.Th>
<Table.Th>Created At</Table.Th>
<Table.Th style={{ width: 160 }}>Actions</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{apiKeys.map((apiKey: any, index: number) => (
<Table.Tr key={index}>
<Table.Td>{apiKey.name}</Table.Td>
<Table.Td>{apiKey.description}</Table.Td>
<Table.Td>
{apiKey.expiredAt?.toISOString().split("T")[0]}
</Table.Td>
<Table.Td>
{apiKey.createdAt?.toISOString().split("T")[0]}
</Table.Td>
<Table.Td>
<Group gap="xs">
<Button
variant="light"
size="xs"
onClick={() => {
modals.openConfirmModal({
title: "Delete API Key",
children: (
<Text>
Are you sure you want to delete this API key?
</Text>
),
labels: { confirm: "Delete", cancel: "Cancel" },
onCancel: () => { },
onConfirm: async () => {
await apiFetch.api.apikey.delete.delete({ id: apiKey.id });
mutate()
},
})
}}
>
Delete
</Button>
<Table.Tbody>
{apiKeys.map((apiKey: any, index: number) => (
<Table.Tr key={index}>
<Table.Td>{apiKey.name}</Table.Td>
<Table.Td>{apiKey.description}</Table.Td>
<Table.Td>
{apiKey.expiredAt?.toISOString().split("T")[0]}
</Table.Td>
<Table.Td>
{apiKey.createdAt?.toISOString().split("T")[0]}
</Table.Td>
<Table.Td>
<Group gap="xs">
<Button
variant="light"
size="xs"
onClick={() => {
modals.openConfirmModal({
title: "Delete API Key",
children: (
<Text>
Are you sure you want to delete this API key?
</Text>
),
labels: { confirm: "Delete", cancel: "Cancel" },
onCancel: () => {},
onConfirm: async () => {
await apiFetch.api.apikey.delete.delete({
id: apiKey.id,
});
mutate();
},
});
}}
>
Delete
</Button>
<Button
variant="outline"
size="xs"
onClick={() => {
navigator.clipboard.writeText(apiKey.key);
showNotification({
title: "Copied",
message: "API key copied to clipboard",
color: "green",
});
}}
>
Copy
</Button>
</Group>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
</Stack>
</Card>
);
<Button
variant="outline"
size="xs"
onClick={() => {
navigator.clipboard.writeText(apiKey.key);
showNotification({
title: "Copied",
message: "API key copied to clipboard",
color: "green",
});
}}
>
Copy
</Button>
</Group>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
</Stack>
</Card>
);
}

343
src/pages/dashboard/dashboard_layout.tsx
View File

@@ -1,205 +1,204 @@
import { useEffect, useState } from 'react'
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'
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
} 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'
IconChevronLeft,
IconChevronRight,
IconDashboard,
} 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";
/* ----------------------- Logout ----------------------- */
function Logout() {
return (
<Group justify="flex-end">
<Button
variant="light"
color="red"
size="xs"
onClick={async () => {
await apiFetch.auth.logout.delete()
localStorage.removeItem('token')
window.location.href = '/login'
}}
>
Logout
</Button>
</Group>
)
return (
<Group justify="flex-end">
<Button
variant="light"
color="red"
size="xs"
onClick={async () => {
await apiFetch.auth.logout.delete();
localStorage.removeItem("token");
window.location.href = "/login";
}}
>
Logout
</Button>
</Group>
);
}
/* ----------------------- Layout ----------------------- */
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 },
}}
>
{/* NAVBAR */}
<AppShell.Navbar p="sm">
{/* Collapse toggle */}
<AppShell.Section>
<Group justify="flex-end">
<Tooltip
label={opened ? 'Collapse navigation' : 'Expand navigation'}
withArrow
>
<ActionIcon
variant="light"
color="gray"
onClick={() => setOpened(v => !v)}
radius="xl"
>
{opened ? <IconChevronLeft /> : <IconChevronRight />}
</ActionIcon>
</Tooltip>
</Group>
</AppShell.Section>
return (
<AppShell
padding="md"
navbar={{
width: 260,
breakpoint: "sm",
collapsed: { mobile: !opened, desktop: !opened },
}}
>
{/* NAVBAR */}
<AppShell.Navbar p="sm">
{/* Collapse toggle */}
<AppShell.Section>
<Group justify="flex-end">
<Tooltip
label={opened ? "Collapse navigation" : "Expand navigation"}
withArrow
>
<ActionIcon
variant="light"
color="gray"
onClick={() => setOpened((v) => !v)}
radius="xl"
>
{opened ? <IconChevronLeft /> : <IconChevronRight />}
</ActionIcon>
</Tooltip>
</Group>
</AppShell.Section>
{/* Navigation */}
<AppShell.Section
grow
component={ScrollArea}
mt="sm"
>
<NavigationDashboard />
</AppShell.Section>
{/* Navigation */}
<AppShell.Section grow component={ScrollArea} mt="sm">
<NavigationDashboard />
</AppShell.Section>
{/* User info */}
<AppShell.Section>
<HostView />
</AppShell.Section>
</AppShell.Navbar>
{/* User info */}
<AppShell.Section>
<HostView />
</AppShell.Section>
</AppShell.Navbar>
{/* MAIN CONTENT */}
<AppShell.Main>
<Stack>
<Paper withBorder radius="lg" p="md" shadow="sm">
<Flex align="center" gap="md">
{!opened && (
<Tooltip label="Open navigation menu" withArrow>
<ActionIcon
variant="light"
color="gray"
onClick={() => setOpened(true)}
radius="xl"
>
<IconChevronRight />
</ActionIcon>
</Tooltip>
)}
{/* MAIN CONTENT */}
<AppShell.Main>
<Stack>
<Paper withBorder radius="lg" p="md" shadow="sm">
<Flex align="center" gap="md">
{!opened && (
<Tooltip label="Open navigation menu" withArrow>
<ActionIcon
variant="light"
color="gray"
onClick={() => setOpened(true)}
radius="xl"
>
<IconChevronRight />
</ActionIcon>
</Tooltip>
)}
<Title order={3} fw={600}>
App Dashboard
</Title>
</Flex>
</Paper>
<Title order={3} fw={600}>
App Dashboard
</Title>
</Flex>
</Paper>
<Outlet />
</Stack>
</AppShell.Main>
</AppShell>
)
<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="md" withBorder shadow="xs" p="md">
{host ? (
<Stack gap="sm">
<Flex gap="md" align="center">
<Avatar size="lg" radius="xl" color="blue">
{host.name?.[0]}
</Avatar>
return (
<Card radius="md" withBorder shadow="xs" p="md">
{host ? (
<Stack gap="sm">
<Flex gap="md" align="center">
<Avatar size="lg" radius="xl" color="blue">
{host.name?.[0]}
</Avatar>
<Stack gap={2}>
<Text fw={600} size="sm">{host.name}</Text>
<Text size="xs" c="dimmed">{host.email}</Text>
</Stack>
</Flex>
<Stack gap={2}>
<Text fw={600} size="sm">
{host.name}
</Text>
<Text size="xs" c="dimmed">
{host.email}
</Text>
</Stack>
</Flex>
<Divider />
<Logout />
</Stack>
) : (
<Text size="sm" c="dimmed" ta="center">
No host information available
</Text>
)}
</Card>
)
<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">
<NavLink
active={isActive('/dashboard/landing')}
leftSection={<IconDashboard size={18} />}
label="Dashboard Overview"
description="Quick summary and activity highlights"
onClick={() => navigate(clientRoutes['/dashboard/landing'])}
/>
return (
<Stack gap="xs">
<NavLink
active={isActive("/dashboard/dashboard")}
leftSection={<IconDashboard size={18} />}
label="Dashboard Overview"
description="Quick summary and activity highlights"
onClick={() => navigate(clientRoutes["/dashboard/dashboard"])}
/>
<NavLink
active={isActive('/dashboard/apikey')}
leftSection={<IconDashboard size={18} />}
label="API Keys"
description="Manage your API credentials"
onClick={() => navigate(clientRoutes['/dashboard/apikey'])}
/>
</Stack>
)
<NavLink
active={isActive("/dashboard/apikey/apikey")}
leftSection={<IconDashboard size={18} />}
label="API Keys"
description="Manage your API credentials"
onClick={() => navigate(clientRoutes["/dashboard/apikey/apikey"])}
/>
</Stack>
);
}

211
src/pages/dashboard/dashboard_page.tsx
View File

@@ -1,121 +1,120 @@
import {
AppShell,
Group,
Text,
Button,
Card,
SimpleGrid,
Table,
Stack,
Title,
Avatar,
Divider,
Container,
AppShell,
Group,
Text,
Button,
Card,
SimpleGrid,
Table,
Stack,
Title,
Avatar,
Divider,
Container,
} from "@mantine/core";
export default function Dashboard() {
return (
<Container>
<Stack gap="lg">
{/* -------- STATS SECTION -------- */}
<SimpleGrid cols={{ base: 1, sm: 2, md: 4 }}>
<Card shadow="sm" padding="lg" radius="md">
<Text size="sm" c="dimmed">
Total Users
</Text>
<Title order={3}>1,234</Title>
</Card>
return (
<Container>
<Stack gap="lg">
{/* -------- STATS SECTION -------- */}
<SimpleGrid cols={{ base: 1, sm: 2, md: 4 }}>
<Card shadow="sm" padding="lg" radius="md">
<Text size="sm" c="dimmed">
Total Users
</Text>
<Title order={3}>1,234</Title>
</Card>
<Card shadow="sm" padding="lg" radius="md">
<Text size="sm" c="dimmed">
Active Sessions
</Text>
<Title order={3}>87</Title>
</Card>
<Card shadow="sm" padding="lg" radius="md">
<Text size="sm" c="dimmed">
Active Sessions
</Text>
<Title order={3}>87</Title>
</Card>
<Card shadow="sm" padding="lg" radius="md">
<Text size="sm" c="dimmed">
API Calls today
</Text>
<Title order={3}>12,490</Title>
</Card>
<Card shadow="sm" padding="lg" radius="md">
<Text size="sm" c="dimmed">
API Calls today
</Text>
<Title order={3}>12,490</Title>
</Card>
<Card shadow="sm" padding="lg" radius="md">
<Text size="sm" c="dimmed">
Errors
</Text>
<Title order={3}>5</Title>
</Card>
</SimpleGrid>
<Card shadow="sm" padding="lg" radius="md">
<Text size="sm" c="dimmed">
Errors
</Text>
<Title order={3}>5</Title>
</Card>
</SimpleGrid>
{/* -------- QUICK ACTIONS -------- */}
<Card shadow="sm" radius="md" padding="lg">
<Group justify="space-between" mb="sm">
<Title order={4}>Quick Actions</Title>
</Group>
{/* -------- QUICK ACTIONS -------- */}
<Card shadow="sm" radius="md" padding="lg">
<Group justify="space-between" mb="sm">
<Title order={4}>Quick Actions</Title>
</Group>
<Group>
<Button>Add API Key</Button>
<Button variant="outline">Manage Users</Button>
<Button variant="light">View Logs</Button>
</Group>
</Card>
<Group>
<Button>Add API Key</Button>
<Button variant="outline">Manage Users</Button>
<Button variant="light">View Logs</Button>
</Group>
</Card>
{/* -------- ACTIVITY TABLE -------- */}
<Card shadow="sm" radius="md" padding="lg">
<Stack gap="md">
<Title order={4}>Recent Activity</Title>
<Divider />
{/* -------- ACTIVITY TABLE -------- */}
<Card shadow="sm" radius="md" padding="lg">
<Stack gap="md">
<Title order={4}>Recent Activity</Title>
<Divider />
<Table striped highlightOnHover withTableBorder withColumnBorders>
<Table.Thead>
<Table.Tr>
<Table.Th>User</Table.Th>
<Table.Th>Action</Table.Th>
<Table.Th>Date</Table.Th>
<Table.Th>Status</Table.Th>
</Table.Tr>
</Table.Thead>
<Table striped highlightOnHover withTableBorder withColumnBorders>
<Table.Thead>
<Table.Tr>
<Table.Th>User</Table.Th>
<Table.Th>Action</Table.Th>
<Table.Th>Date</Table.Th>
<Table.Th>Status</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
<Table.Tr>
<Table.Td>John Doe</Table.Td>
<Table.Td>Generated new API key</Table.Td>
<Table.Td>2025-01-21</Table.Td>
<Table.Td>
<Button size="xs" variant="light" color="green">
Success
</Button>
</Table.Td>
</Table.Tr>
<Table.Tbody>
<Table.Tr>
<Table.Td>John Doe</Table.Td>
<Table.Td>Generated new API key</Table.Td>
<Table.Td>2025-01-21</Table.Td>
<Table.Td>
<Button size="xs" variant="light" color="green">
Success
</Button>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>Ana Smith</Table.Td>
<Table.Td>Deleted session</Table.Td>
<Table.Td>2025-01-20</Table.Td>
<Table.Td>
<Button size="xs" variant="light" color="blue">
Info
</Button>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>Ana Smith</Table.Td>
<Table.Td>Deleted session</Table.Td>
<Table.Td>2025-01-20</Table.Td>
<Table.Td>
<Button size="xs" variant="light" color="blue">
Info
</Button>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>Michael</Table.Td>
<Table.Td>Failed login attempt</Table.Td>
<Table.Td>2025-01-19</Table.Td>
<Table.Td>
<Button size="xs" variant="light" color="red">
Error
</Button>
</Table.Td>
</Table.Tr>
</Table.Tbody>
</Table>
</Stack>
</Card>
</Stack>
</Container>
);
<Table.Tr>
<Table.Td>Michael</Table.Td>
<Table.Td>Failed login attempt</Table.Td>
<Table.Td>2025-01-19</Table.Td>
<Table.Td>
<Button size="xs" variant="light" color="red">
Error
</Button>
</Table.Td>
</Table.Tr>
</Table.Tbody>
</Table>
</Stack>
</Card>
</Stack>
</Container>
);
}