import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Progress } from '@/components/ui/progress'; import { Link } from 'react-router-dom'; import { ArrowRight, CheckCircle2, AlertCircle } from 'lucide-react'; import { useDataCompleteness } from '@/hooks/useDataCompleteness'; export function DataQualityOverview() { const { data, isLoading } = useDataCompleteness(); if (isLoading || !data) { return ( Data Quality Loading completeness metrics...
); } const { summary } = data; const avgScore = Math.round(summary.avg_completeness_score); const getScoreColor = (score: number) => { if (score >= 80) return 'text-green-600'; if (score >= 60) return 'text-blue-600'; if (score >= 40) return 'text-yellow-600'; return 'text-red-600'; }; const getProgressColor = (score: number) => { if (score >= 80) return 'bg-green-600'; if (score >= 60) return 'bg-blue-600'; if (score >= 40) return 'bg-yellow-600'; return 'bg-red-600'; }; return (
Data Quality Overall completeness metrics across all entities
View Details
{/* Average Score */}
Average Completeness {avgScore}%
{/* Quick Stats Grid */}
100% Complete
{summary.entities_100_complete}
{((summary.entities_100_complete / summary.total_entities) * 100).toFixed(1)}% of total
Below 50%
{summary.entities_below_50}
{((summary.entities_below_50 / summary.total_entities) * 100).toFixed(1)}% need attention
{/* By Entity Type */}

By Entity Type

{[ { label: 'Parks', value: summary.by_entity_type.parks, total: summary.total_entities }, { label: 'Rides', value: summary.by_entity_type.rides, total: summary.total_entities }, { label: 'Companies', value: summary.by_entity_type.companies, total: summary.total_entities }, { label: 'Models', value: summary.by_entity_type.ride_models, total: summary.total_entities }, ].map((item) => (
{item.label} {item.value}
))}
); }