mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-29 05:27:08 -05:00
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:
45
src/components/admin/database-stats/DatabaseStatsCard.tsx
Normal file
45
src/components/admin/database-stats/DatabaseStatsCard.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user