102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
import {
|
|
Users,
|
|
UserCheck,
|
|
UserMinus,
|
|
Clock,
|
|
BarChart3,
|
|
TrendingUp,
|
|
} from 'lucide-react';
|
|
import { getTranslations } from 'next-intl/server';
|
|
|
|
import { createMemberServices } from '@kit/member-management/services';
|
|
import { getSupabaseServerClient } from '@kit/supabase/server-client';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
|
|
|
|
import { AccountNotFound } from '~/components/account-not-found';
|
|
import { CmsPageShell } from '~/components/cms-page-shell';
|
|
import { StatsCard } from '~/components/stats-card';
|
|
import { StatsBarChart, StatsPieChart } from '~/components/stats-charts';
|
|
|
|
interface PageProps {
|
|
params: Promise<{ account: string }>;
|
|
}
|
|
|
|
export default async function MemberStatisticsPage({ params }: PageProps) {
|
|
const { account } = await params;
|
|
const client = getSupabaseServerClient();
|
|
const t = await getTranslations('members');
|
|
|
|
const { data: acct } = await client
|
|
.from('accounts')
|
|
.select('id')
|
|
.eq('slug', account)
|
|
.single();
|
|
|
|
if (!acct) return <AccountNotFound />;
|
|
|
|
const { query } = createMemberServices(client);
|
|
const stats = await query.getStatistics(acct.id);
|
|
|
|
const statusChartData = [
|
|
{ name: t('status.active'), value: stats.active ?? 0 },
|
|
{ name: t('status.inactive'), value: stats.inactive ?? 0 },
|
|
{ name: t('status.pending'), value: stats.pending ?? 0 },
|
|
{ name: t('status.resigned'), value: stats.resigned ?? 0 },
|
|
];
|
|
|
|
return (
|
|
<CmsPageShell account={account} title={t('statistics.title')}>
|
|
<div className="flex w-full flex-col gap-6">
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<StatsCard
|
|
title={t('statistics.totalMembers')}
|
|
value={stats.total ?? 0}
|
|
icon={<Users className="h-5 w-5" />}
|
|
/>
|
|
<StatsCard
|
|
title={t('status.active')}
|
|
value={stats.active ?? 0}
|
|
icon={<UserCheck className="h-5 w-5" />}
|
|
/>
|
|
<StatsCard
|
|
title={t('status.inactive')}
|
|
value={stats.inactive ?? 0}
|
|
icon={<UserMinus className="h-5 w-5" />}
|
|
/>
|
|
<StatsCard
|
|
title={t('status.pending')}
|
|
value={stats.pending ?? 0}
|
|
icon={<Clock className="h-5 w-5" />}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<BarChart3 className="h-5 w-5" />
|
|
{t('statistics.title')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<StatsBarChart data={statusChartData} />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<TrendingUp className="h-5 w-5" />
|
|
{t('statistics.totalMembers')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<StatsPieChart data={statusChartData} />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</CmsPageShell>
|
|
);
|
|
}
|