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-22 10:23:29 +08:00
parent 98257d5f77
commit 1b3031ae3c
30 changed files with 554 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@@ -2,14 +2,16 @@
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 />
<AppRoutes />
<ModalsProvider>
<AppRoutes />
</ModalsProvider>
</MantineProvider>;
}

34
src/pages/Home.tsx
View File

@@ -1,9 +1,35 @@
import clientRoutes from "@/clientRoutes";
import { Button, Card, Container, Group, Stack, Title } from "@mantine/core";
export default function Home() {
return (
<div>
<h1>Home</h1>
</div>
<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>
<Button
size="sm"
component="a"
href={clientRoutes["/login"]}
variant="light"
>
Login
</Button>
</Group>
</Stack>
</Card>
</Container>
);
}

73
src/pages/Login.tsx
View File

@@ -1,46 +1,71 @@
import { Button, Container, Group, Stack, Text, TextInput } 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)
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
localStorage.setItem('token', response.data.token);
window.location.href = '/dashboard';
return;
}
if (response.error) {
alert(JSON.stringify(response.error))
alert(JSON.stringify(response.error));
}
} catch (error) {
console.error(error)
console.error(error);
} finally {
setLoading(false)
setLoading(false);
}
}
};
return (
<Container>
<Stack>
<Text>Login</Text>
<TextInput placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
<TextInput placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
<Group justify="right">
<Button onClick={handleSubmit} disabled={loading}>Login</Button>
</Group>
</Stack>
<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
/>
<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>
)
}
);
}

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

@@ -1,112 +1,224 @@
import { Button, Card, Container, Group, Stack, Table, Text, TextInput } from "@mantine/core";
import {
Button,
Card,
Container,
Group,
Stack,
Table,
Text,
TextInput,
Title,
Divider,
Loader,
} from "@mantine/core";
import { useEffect, useState } from "react";
import apiFetch from "@/lib/apiFetch";
import { showNotification } from "@mantine/notifications";
import useSwr from "swr";
import { modals } from "@mantine/modals";
export default function ApiKeyPage() {
return (
<Container size="md" w={"100%"}>
<Stack>
<Text>API Key</Text>
<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 [name, setName] = useState("");
const [description, setDescription] = useState("");
const [expiredAt, setExpiredAt] = useState("");
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
const res = await apiFetch.api.apikey.create.post({ name, description, expiredAt });
if (res.status === 200) {
setName('');
setDescription('');
setExpiredAt('');
showNotification({
title: 'Success',
message: 'API key created successfully',
color: 'green',
})
}
setLoading(false);
}
return (
<Card >
<Stack>
<Text>API Create</Text>
<TextInput label="Name" placeholder="Name" value={name} onChange={(e) => setName(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)} />
<Group>
<Button variant="outline" onClick={() => { setName(''); setDescription(''); setExpiredAt(''); }}>Cancel</Button>
<Button onClick={handleSubmit} type="submit" loading={loading}>Save</Button>
</Group>
const handleSubmit = async () => {
try {
setLoading(true);
<ListApiKey />
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,
});
if (res.status === 200) {
setName("");
setDescription("");
setExpiredAt("");
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);
}
};
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="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)}
/>
<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>
);
}
function ListApiKey() {
const [apiKeys, setApiKeys] = useState<any[]>([]);
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(() => {
const fetchApiKeys = async () => {
const res = await apiFetch.api.apikey.list.get();
if (res.status === 200) {
setApiKeys(res.data?.apiKeys || []);
}
}
fetchApiKeys();
mutate()
}, []);
if (error) return <Text color="red">Error fetching API keys</Text>
if (isLoading) return <Loader />
return (
<Card>
<Stack>
<Text>API List</Text>
<Table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Expired At</th>
<th>Created At</th>
<th>Updated At</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<Card shadow="sm" radius="md" padding="lg">
<Stack gap="md">
<Title order={4}>API Key List</Title>
<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.Tbody>
{apiKeys.map((apiKey: any, index: number) => (
<tr key={index}>
<td>{apiKey.name}</td>
<td>{apiKey.description}</td>
<td>{apiKey.expiredAt.toISOString().split('T')[0]}</td>
<td>{apiKey.createdAt.toISOString().split('T')[0]}</td>
<td>{apiKey.updatedAt.toISOString().split('T')[0]}</td>
<td>
<Button variant="outline" onClick={() => {
apiFetch.api.apikey.delete.delete({ id: apiKey.id })
setApiKeys(apiKeys.filter((api: any) => api.id !== apiKey.id))
}}>Delete</Button>
<Button variant="outline" onClick={() => {
navigator.clipboard.writeText(apiKey.key)
showNotification({
title: 'Success',
message: 'API key copied to clipboard',
color: 'green',
})
}}>Copy</Button>
</td>
</tr>
<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>
))}
</tbody>
</Table.Tbody>
</Table>
</Stack>
</Card>
);
}
}

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

@@ -30,17 +30,28 @@ import { default as clientRoute, default as clientRoutes } from '@/clientRoutes'
import apiFetch from '@/lib/apiFetch'
/* ----------------------- Logout ----------------------- */
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>
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',
@@ -56,9 +67,11 @@ export default function DashboardLayout() {
collapsed: { mobile: !opened, desktop: !opened },
}}
>
<AppShell.Navbar>
{/* NAVBAR */}
<AppShell.Navbar p="sm">
{/* Collapse toggle */}
<AppShell.Section>
<Group justify="flex-end" p="xs">
<Group justify="flex-end">
<Tooltip
label={opened ? 'Collapse navigation' : 'Expand navigation'}
withArrow
@@ -67,7 +80,6 @@ export default function DashboardLayout() {
variant="light"
color="gray"
onClick={() => setOpened(v => !v)}
aria-label="Toggle navigation"
radius="xl"
>
{opened ? <IconChevronLeft /> : <IconChevronRight />}
@@ -76,18 +88,25 @@ export default function DashboardLayout() {
</Group>
</AppShell.Section>
<AppShell.Section grow component={ScrollArea} flex={1}>
{/* Navigation */}
<AppShell.Section
grow
component={ScrollArea}
mt="sm"
>
<NavigationDashboard />
</AppShell.Section>
{/* User info */}
<AppShell.Section>
<HostView />
</AppShell.Section>
</AppShell.Navbar>
{/* MAIN CONTENT */}
<AppShell.Main>
<Stack>
<Paper withBorder shadow="md" radius="lg" p="md">
<Paper withBorder radius="lg" p="md" shadow="sm">
<Flex align="center" gap="md">
{!opened && (
<Tooltip label="Open navigation menu" withArrow>
@@ -95,18 +114,19 @@ export default function DashboardLayout() {
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>
@@ -114,6 +134,7 @@ export default function DashboardLayout() {
)
}
/* ----------------------- Host Info ----------------------- */
function HostView() {
const [host, setHost] = useState<User | null>(null)
@@ -127,18 +148,20 @@ function HostView() {
}, [])
return (
<Card radius="lg" withBorder shadow="sm" p="md">
<Card radius="md" withBorder shadow="xs" p="md">
{host ? (
<Stack>
<Stack gap="sm">
<Flex gap="md" align="center">
<Avatar size="md" radius="xl" color="blue">
<Avatar size="lg" 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>
<Text fw={600} size="sm">{host.name}</Text>
<Text size="xs" c="dimmed">{host.email}</Text>
</Stack>
</Flex>
<Divider />
<Logout />
</Stack>
@@ -161,19 +184,20 @@ function NavigationDashboard() {
location.pathname.startsWith(clientRoute[path])
return (
<Stack gap="xs" p="sm">
<Stack gap="xs">
<NavLink
active={isActive('/dashboard/landing')}
leftSection={<IconDashboard size={20} />}
leftSection={<IconDashboard size={18} />}
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"
leftSection={<IconDashboard size={18} />}
label="API Keys"
description="Manage your API credentials"
onClick={() => navigate(clientRoutes['/dashboard/apikey'])}
/>
</Stack>

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

@@ -1,8 +1,120 @@
import {
AppShell,
Group,
Text,
Button,
Card,
SimpleGrid,
Table,
Stack,
Title,
Avatar,
Divider,
Container,
} from "@mantine/core";
export default function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
</div>
<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">
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>
{/* -------- 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>
{/* -------- 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.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>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>
);
}
}