mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-25 15:11:15 -05:00
69db3c7743
Adds comprehensive data completeness dashboard UI and hooks: - Introduces data completeness types and hook (useDataCompleteness) to fetch and subscribe to updates - Builds dashboard components (summary, filters, table) and integrates into Admin Settings - Wireframes for real-time updates and filtering across parks, rides, companies, and ride models - Integrates into AdminSettings with a new Data Quality tab and route - Adds data types and scaffolding for analytics, including completeness analysis structure
75 lines
2.9 KiB
TypeScript
75 lines
2.9 KiB
TypeScript
/**
|
|
* Data Completeness Summary Component
|
|
*
|
|
* Displays high-level overview cards for data completeness metrics
|
|
*/
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { Database, AlertCircle, CheckCircle2, TrendingUp } from 'lucide-react';
|
|
import type { CompletenessSummary } from '@/types/data-completeness';
|
|
|
|
interface CompletenessSummaryProps {
|
|
summary: CompletenessSummary;
|
|
}
|
|
|
|
export function CompletenessSummary({ summary }: CompletenessSummaryProps) {
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Entities</CardTitle>
|
|
<Database className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{summary.total_entities.toLocaleString()}</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Parks: {summary.by_entity_type.parks} | Rides: {summary.by_entity_type.rides}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Avg Completeness</CardTitle>
|
|
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{summary.avg_completeness_score?.toFixed(1) || 0}%</div>
|
|
<Progress value={summary.avg_completeness_score || 0} className="mt-2" />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Below 50%</CardTitle>
|
|
<AlertCircle className="h-4 w-4 text-destructive" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-destructive">
|
|
{summary.entities_below_50}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{((summary.entities_below_50 / summary.total_entities) * 100).toFixed(1)}% of total
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">100% Complete</CardTitle>
|
|
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-green-600">
|
|
{summary.entities_100_complete}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{((summary.entities_100_complete / summary.total_entities) * 100).toFixed(1)}% of total
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|