78 lines
1.7 KiB
TypeScript
78 lines
1.7 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
|
|
|
|
interface Data {
|
|
usersCount: number;
|
|
organizationsCount: number;
|
|
activeSubscriptions: number;
|
|
trialSubscriptions: number;
|
|
}
|
|
|
|
function AdminDashboard({
|
|
data,
|
|
}: React.PropsWithChildren<{
|
|
data: Data;
|
|
}>) {
|
|
return (
|
|
<div
|
|
className={
|
|
'grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3' +
|
|
' xl:grid-cols-4'
|
|
}
|
|
>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Users</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<div className={'flex justify-between'}>
|
|
<Figure>{data.usersCount}</Figure>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Organizations</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<div className={'flex justify-between'}>
|
|
<Figure>{data.organizationsCount}</Figure>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Paying Customers</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<div className={'flex justify-between'}>
|
|
<Figure>{data.activeSubscriptions}</Figure>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Trials</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<div className={'flex justify-between'}>
|
|
<Figure>{data.trialSubscriptions}</Figure>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AdminDashboard;
|
|
|
|
function Figure(props: React.PropsWithChildren) {
|
|
return <div className={'text-3xl font-bold'}>{props.children}</div>;
|
|
}
|