Implement admin database stats dashboard

Add admin-only database statistics dashboard
- Introduces types for database statistics and recent additions
- Implements hooks to fetch statistics and recent additions via RPCs
- Adds UI components for stats cards and a recent additions table
- Integrates new AdminDatabaseStats page and routing under /admin/database-stats
- Updates admin sidebar and app routes to expose the new dashboard
- Enables real-time updates and export capabilities for recent additions
This commit is contained in:
gpt-engineer-app[bot]
2025-11-11 16:54:02 +00:00
parent 69db3c7743
commit f036776dce
11 changed files with 906 additions and 1 deletions

View File

@@ -0,0 +1,45 @@
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
interface DatabaseStatsCardProps {
title: string;
icon: LucideIcon;
stats: Array<{
label: string;
value: number | string;
trend?: {
value: number;
period: string;
};
}>;
iconClassName?: string;
}
export function DatabaseStatsCard({ title, icon: Icon, stats, iconClassName }: DatabaseStatsCardProps) {
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">{title}</CardTitle>
<Icon className={cn("h-4 w-4 text-muted-foreground", iconClassName)} />
</CardHeader>
<CardContent>
<div className="space-y-2">
{stats.map((stat, index) => (
<div key={index} className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">{stat.label}</span>
<div className="flex items-center gap-2">
<span className="text-sm font-semibold">{stat.value.toLocaleString()}</span>
{stat.trend && (
<span className="text-xs text-muted-foreground">
+{stat.trend.value} ({stat.trend.period})
</span>
)}
</div>
</div>
))}
</div>
</CardContent>
</Card>
);
}