mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 12:31:14 -05:00
Integrate Data Completeness Dashboard
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
This commit is contained in:
gpt-engineer-app[bot]
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* 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>
|
||||
);
|
||||
}
|
||||
110
src/components/admin/data-completeness/CompletenessFilters.tsx
Normal file
110
src/components/admin/data-completeness/CompletenessFilters.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
/**
|
||||
* Data Completeness Filters Component
|
||||
*
|
||||
* Filter controls for entity type, score range, and missing field categories
|
||||
*/
|
||||
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
import type { CompletenessFilters, EntityType, MissingFieldCategory } from '@/types/data-completeness';
|
||||
|
||||
interface CompletenessFiltersProps {
|
||||
filters: CompletenessFilters;
|
||||
onFiltersChange: (filters: CompletenessFilters) => void;
|
||||
}
|
||||
|
||||
export function CompletenessFilters({ filters, onFiltersChange }: CompletenessFiltersProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="entity-type">Entity Type</Label>
|
||||
<Select
|
||||
value={filters.entityType || 'all'}
|
||||
onValueChange={(value) =>
|
||||
onFiltersChange({
|
||||
...filters,
|
||||
entityType: value === 'all' ? undefined : (value as EntityType),
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="entity-type">
|
||||
<SelectValue placeholder="All entities" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Entities</SelectItem>
|
||||
<SelectItem value="park">Parks</SelectItem>
|
||||
<SelectItem value="ride">Rides</SelectItem>
|
||||
<SelectItem value="company">Companies</SelectItem>
|
||||
<SelectItem value="ride_model">Ride Models</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="missing-category">Missing Category</Label>
|
||||
<Select
|
||||
value={filters.missingCategory || 'all'}
|
||||
onValueChange={(value) =>
|
||||
onFiltersChange({
|
||||
...filters,
|
||||
missingCategory: value === 'all' ? undefined : (value as MissingFieldCategory),
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="missing-category">
|
||||
<SelectValue placeholder="All categories" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Categories</SelectItem>
|
||||
<SelectItem value="critical">Missing Critical</SelectItem>
|
||||
<SelectItem value="important">Missing Important</SelectItem>
|
||||
<SelectItem value="valuable">Missing Valuable</SelectItem>
|
||||
<SelectItem value="supplementary">Missing Supplementary</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="search">Search</Label>
|
||||
<Input
|
||||
id="search"
|
||||
placeholder="Search entities..."
|
||||
value={filters.searchQuery || ''}
|
||||
onChange={(e) =>
|
||||
onFiltersChange({
|
||||
...filters,
|
||||
searchQuery: e.target.value || undefined,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Completeness Score Range</Label>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{filters.minScore || 0}% - {filters.maxScore || 100}%
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
value={[filters.minScore || 0, filters.maxScore || 100]}
|
||||
onValueChange={([min, max]) =>
|
||||
onFiltersChange({
|
||||
...filters,
|
||||
minScore: min === 0 ? undefined : min,
|
||||
maxScore: max === 100 ? undefined : max,
|
||||
})
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
146
src/components/admin/data-completeness/CompletenessTable.tsx
Normal file
146
src/components/admin/data-completeness/CompletenessTable.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* Data Completeness Table Component
|
||||
*
|
||||
* Virtualized table displaying entity completeness data with sorting and actions
|
||||
*/
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ExternalLink, AlertCircle } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import type { EntityCompleteness, CompletenessFilters } from '@/types/data-completeness';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
|
||||
interface CompletenessTableProps {
|
||||
entities: EntityCompleteness[];
|
||||
filters: CompletenessFilters;
|
||||
}
|
||||
|
||||
export function CompletenessTable({ entities, filters }: CompletenessTableProps) {
|
||||
// Filter and sort entities
|
||||
const filteredEntities = useMemo(() => {
|
||||
let filtered = entities;
|
||||
|
||||
// Apply search filter
|
||||
if (filters.searchQuery) {
|
||||
const query = filters.searchQuery.toLowerCase();
|
||||
filtered = filtered.filter((entity) =>
|
||||
entity.name.toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
|
||||
// Sort by completeness score (ascending - most incomplete first)
|
||||
return filtered.sort((a, b) => a.completeness_score - b.completeness_score);
|
||||
}, [entities, filters]);
|
||||
|
||||
const getEntityUrl = (entity: EntityCompleteness) => {
|
||||
switch (entity.entity_type) {
|
||||
case 'park':
|
||||
return `/parks/${entity.slug}`;
|
||||
case 'ride':
|
||||
return `/rides/${entity.slug}`;
|
||||
case 'company':
|
||||
return `/companies/${entity.slug}`;
|
||||
case 'ride_model':
|
||||
return `/ride-models/${entity.slug}`;
|
||||
default:
|
||||
return '#';
|
||||
}
|
||||
};
|
||||
|
||||
const getScoreColor = (score: number) => {
|
||||
if (score >= 80) return 'text-green-600';
|
||||
if (score >= 50) return 'text-yellow-600';
|
||||
return 'text-destructive';
|
||||
};
|
||||
|
||||
const getMissingFieldsCount = (entity: EntityCompleteness) => {
|
||||
return (
|
||||
entity.missing_fields.critical.length +
|
||||
entity.missing_fields.important.length +
|
||||
entity.missing_fields.valuable.length +
|
||||
entity.missing_fields.supplementary.length
|
||||
);
|
||||
};
|
||||
|
||||
if (filteredEntities.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<p className="text-lg font-medium">No entities found</p>
|
||||
<p className="text-sm text-muted-foreground">Try adjusting your filters</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border rounded-lg">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Entity</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Completeness</TableHead>
|
||||
<TableHead>Missing Fields</TableHead>
|
||||
<TableHead>Last Updated</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredEntities.map((entity) => (
|
||||
<TableRow key={entity.id}>
|
||||
<TableCell className="font-medium">{entity.name}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">
|
||||
{entity.entity_type.replace('_', ' ')}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-sm font-medium ${getScoreColor(entity.completeness_score)}`}>
|
||||
{entity.completeness_score.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={entity.completeness_score} className="h-2" />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{entity.missing_fields.critical.length > 0 && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
{entity.missing_fields.critical.length} Critical
|
||||
</Badge>
|
||||
)}
|
||||
{entity.missing_fields.important.length > 0 && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{entity.missing_fields.important.length} Important
|
||||
</Badge>
|
||||
)}
|
||||
{getMissingFieldsCount(entity) === 0 && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
Complete
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">
|
||||
{formatDistanceToNow(new Date(entity.updated_at), { addSuffix: true })}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link to={getEntityUrl(entity)}>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* Data Completeness Dashboard
|
||||
*
|
||||
* Main dashboard component combining summary, filters, and table
|
||||
* Provides comprehensive view of data quality across all entity types
|
||||
*/
|
||||
|
||||
import { useState, useMemo } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useDataCompleteness } from '@/hooks/useDataCompleteness';
|
||||
import { CompletenessSummary } from './CompletenesSummary';
|
||||
import { CompletenessFilters } from './CompletenessFilters';
|
||||
import { CompletenessTable } from './CompletenessTable';
|
||||
import type { CompletenessFilters as Filters, EntityType } from '@/types/data-completeness';
|
||||
|
||||
export function DataCompletenessDashboard() {
|
||||
const [filters, setFilters] = useState<Filters>({});
|
||||
const { data, isLoading, error, refetch, isRefetching } = useDataCompleteness(filters);
|
||||
|
||||
// Combine all entities for the "All" tab
|
||||
const allEntities = useMemo(() => {
|
||||
if (!data) return [];
|
||||
return [
|
||||
...data.entities.parks,
|
||||
...data.entities.rides,
|
||||
...data.entities.companies,
|
||||
...data.entities.ride_models,
|
||||
];
|
||||
}, [data]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
<span className="ml-2 text-muted-foreground">Analyzing data completeness...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Failed to load data completeness analysis. Please try again.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Data Completeness Dashboard</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Monitor and improve data quality across all entities
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => refetch()}
|
||||
disabled={isRefetching}
|
||||
variant="outline"
|
||||
>
|
||||
{isRefetching ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
) : (
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<CompletenessSummary summary={data.summary} />
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Filter Entities</CardTitle>
|
||||
<CardDescription>
|
||||
Filter by entity type, completeness score, and missing field categories
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CompletenessFilters filters={filters} onFiltersChange={setFilters} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Entity Details</CardTitle>
|
||||
<CardDescription>
|
||||
Entities sorted by completeness (most incomplete first)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Tabs defaultValue="all" className="space-y-4">
|
||||
<TabsList>
|
||||
<TabsTrigger value="all">
|
||||
All ({allEntities.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="parks">
|
||||
Parks ({data.entities.parks.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="rides">
|
||||
Rides ({data.entities.rides.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="companies">
|
||||
Companies ({data.entities.companies.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="ride_models">
|
||||
Ride Models ({data.entities.ride_models.length})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="all">
|
||||
<CompletenessTable entities={allEntities} filters={filters} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="parks">
|
||||
<CompletenessTable entities={data.entities.parks} filters={filters} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="rides">
|
||||
<CompletenessTable entities={data.entities.rides} filters={filters} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="companies">
|
||||
<CompletenessTable entities={data.entities.companies} filters={filters} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="ride_models">
|
||||
<CompletenessTable entities={data.entities.ride_models} filters={filters} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user