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

src/components/admin/data-completeness/CompletenesSummary.tsx

@@ -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>
+  );
+}

src/components/admin/data-completeness/CompletenessFilters.tsx

@@ -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>
+  );
+}

src/components/admin/data-completeness/CompletenessTable.tsx

@@ -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>
+  );
+}

src/components/admin/data-completeness/DataCompletenessDashboard.tsx

@@ -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>
+  );
+}

src/hooks/useDataCompleteness.ts

@@ -0,0 +1,106 @@
+/**
+ * Data Completeness Hook
+ * 
+ * React Query hook for fetching and caching data completeness analysis
+ * with real-time updates via Supabase subscriptions
+ */
+
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { supabase } from '@/integrations/supabase/client';
+import { useEffect } from 'react';
+import type { CompletenessAnalysis, CompletenessFilters } from '@/types/data-completeness';
+import { handleError } from '@/lib/errorHandler';
+
+export function useDataCompleteness(filters: CompletenessFilters = {}) {
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
+    queryKey: ['data-completeness', filters],
+    queryFn: async (): Promise<CompletenessAnalysis> => {
+      try {
+        const { data, error } = await supabase.rpc('analyze_data_completeness', {
+          p_entity_type: filters.entityType ?? undefined,
+          p_min_score: filters.minScore ?? undefined,
+          p_max_score: filters.maxScore ?? undefined,
+          p_missing_category: filters.missingCategory ?? undefined,
+          p_limit: 1000,
+          p_offset: 0,
+        });
+
+        if (error) throw error;
+        
+        return data as unknown as CompletenessAnalysis;
+      } catch (error) {
+        handleError(error, {
+          action: 'fetch_data_completeness',
+          metadata: {
+            filters,
+          },
+        });
+        throw error;
+      }
+    },
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    refetchOnWindowFocus: false,
+  });
+
+  // Real-time subscriptions for data updates
+  useEffect(() => {
+    // Subscribe to parks changes
+    const parksChannel = supabase
+      .channel('parks-completeness-updates')
+      .on(
+        'postgres_changes',
+        { event: '*', schema: 'public', table: 'parks' },
+        () => {
+          queryClient.invalidateQueries({ queryKey: ['data-completeness'] });
+        }
+      )
+      .subscribe();
+
+    // Subscribe to rides changes
+    const ridesChannel = supabase
+      .channel('rides-completeness-updates')
+      .on(
+        'postgres_changes',
+        { event: '*', schema: 'public', table: 'rides' },
+        () => {
+          queryClient.invalidateQueries({ queryKey: ['data-completeness'] });
+        }
+      )
+      .subscribe();
+
+    // Subscribe to companies changes
+    const companiesChannel = supabase
+      .channel('companies-completeness-updates')
+      .on(
+        'postgres_changes',
+        { event: '*', schema: 'public', table: 'companies' },
+        () => {
+          queryClient.invalidateQueries({ queryKey: ['data-completeness'] });
+        }
+      )
+      .subscribe();
+
+    // Subscribe to ride_models changes
+    const modelsChannel = supabase
+      .channel('ride-models-completeness-updates')
+      .on(
+        'postgres_changes',
+        { event: '*', schema: 'public', table: 'ride_models' },
+        () => {
+          queryClient.invalidateQueries({ queryKey: ['data-completeness'] });
+        }
+      )
+      .subscribe();
+
+    return () => {
+      supabase.removeChannel(parksChannel);
+      supabase.removeChannel(ridesChannel);
+      supabase.removeChannel(companiesChannel);
+      supabase.removeChannel(modelsChannel);
+    };
+  }, [queryClient]);
+
+  return query;
+}

src/pages/AdminSettings.tsx

@@ -17,7 +17,8 @@ import { IntegrationTestRunner } from '@/components/admin/IntegrationTestRunner'
 import { ParkLocationBackfill } from '@/components/admin/ParkLocationBackfill';
 import { RideDataBackfill } from '@/components/admin/RideDataBackfill';
 import { CompanyDataBackfill } from '@/components/admin/CompanyDataBackfill';
-import { Loader2, Save, Clock, Users, Bell, Shield, Settings, Trash2, Plug, AlertTriangle, Lock, TestTube, RefreshCw, Info, AlertCircle, Database } from 'lucide-react';
+import { DataCompletenessDashboard } from '@/components/admin/data-completeness/DataCompletenessDashboard';
+import { Loader2, Save, Clock, Users, Bell, Shield, Settings, Trash2, Plug, AlertTriangle, Lock, TestTube, RefreshCw, Info, AlertCircle, Database, BarChart3 } from 'lucide-react';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 
 export default function AdminSettings() {
@@ -749,7 +750,7 @@ export default function AdminSettings() {
         </div>
 
         <Tabs defaultValue="moderation" className="space-y-6">
-          <TabsList className="grid w-full grid-cols-7">
+          <TabsList className="grid w-full grid-cols-8">
             <TabsTrigger value="moderation" className="flex items-center gap-2">
               <Shield className="w-4 h-4" />
               <span className="hidden sm:inline">Moderation</span>
@@ -774,6 +775,10 @@ export default function AdminSettings() {
               <Plug className="w-4 h-4" />
               <span className="hidden sm:inline">Integrations</span>
             </TabsTrigger>
+            <TabsTrigger value="data-quality" className="flex items-center gap-2">
+              <BarChart3 className="w-4 h-4" />
+              <span className="hidden sm:inline">Data Quality</span>
+            </TabsTrigger>
             <TabsTrigger value="testing" className="flex items-center gap-2">
               <TestTube className="w-4 h-4" />
               <span className="hidden sm:inline">Testing</span>
@@ -973,6 +978,10 @@ export default function AdminSettings() {
             </Card>
           </TabsContent>
 
+          <TabsContent value="data-quality">
+            <DataCompletenessDashboard />
+          </TabsContent>
+
           <TabsContent value="testing">
             <div className="space-y-6">
               {/* Test Data Generator Section */}

src/types/data-completeness.ts

@@ -0,0 +1,58 @@
+/**
+ * Data Completeness Types
+ * 
+ * TypeScript interfaces for the comprehensive data completeness analysis system
+ */
+
+export type EntityType = 'park' | 'ride' | 'company' | 'ride_model';
+
+export type MissingFieldCategory = 'critical' | 'important' | 'valuable' | 'supplementary';
+
+export interface MissingFields {
+  critical: string[];
+  important: string[];
+  valuable: string[];
+  supplementary: string[];
+}
+
+export interface EntityCompleteness {
+  id: string;
+  name: string;
+  slug: string;
+  entity_type: EntityType;
+  updated_at: string;
+  completeness_score: number;
+  missing_fields: MissingFields;
+}
+
+export interface CompletenessSummary {
+  total_entities: number;
+  avg_completeness_score: number;
+  entities_below_50: number;
+  entities_100_complete: number;
+  by_entity_type: {
+    parks: number;
+    rides: number;
+    companies: number;
+    ride_models: number;
+  };
+}
+
+export interface CompletenessAnalysis {
+  summary: CompletenessSummary;
+  entities: {
+    parks: EntityCompleteness[];
+    rides: EntityCompleteness[];
+    companies: EntityCompleteness[];
+    ride_models: EntityCompleteness[];
+  };
+  generated_at: string;
+}
+
+export interface CompletenessFilters {
+  entityType?: EntityType;
+  minScore?: number;
+  maxScore?: number;
+  missingCategory?: MissingFieldCategory;
+  searchQuery?: string;
+}