59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@kit/ui/card';
|
|
|
|
import { loadAdminDashboard } from '../lib/server/loaders/admin-dashboard.loader';
|
|
|
|
export async function AdminDashboard() {
|
|
const data = await loadAdminDashboard();
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
'grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3' +
|
|
' xl:grid-cols-4'
|
|
}
|
|
>
|
|
<Card className="flex flex-col">
|
|
<CardHeader className="flex-1">
|
|
<CardTitle>Users</CardTitle>
|
|
|
|
<CardDescription>
|
|
The number of personal accounts that have been created.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<div className={'flex justify-between'}>
|
|
<Figure>{data.accounts}</Figure>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="flex flex-col">
|
|
<CardHeader className="flex-1">
|
|
<CardTitle>Company Accounts</CardTitle>
|
|
|
|
<CardDescription>
|
|
The number of company accounts that have been created.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<div className={'flex justify-between'}>
|
|
<Figure>{data.teamAccounts}</Figure>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Figure(props: React.PropsWithChildren) {
|
|
return <div className={'text-3xl font-bold'}>{props.children}</div>;
|
|
}
|