added analytics

app/analytics/page.tsx

@@ -0,0 +1,168 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import AnalyticsDashboard from "@/components/analytics-dashboard"
+import { Button } from "@/components/ui/button"
+import { Home, Info, Moon, Sun } from "lucide-react"
+import Link from "next/link"
+import { useTheme } from "next-themes"
+
+interface Evaluation {
+  id: string
+  name: string
+  organization: string
+  overallScore: number
+  modality: string[]
+  submittedDate: string
+  categoryEvaluations?: {
+    [categoryId: string]: {
+      benchmarkAnswers?: { [questionId: string]: string }
+      processAnswers?: { [questionId: string]: string }
+    }
+  }
+}
+
+const loadEvaluationData = async (): Promise<Evaluation[]> => {
+  const evaluationFiles = [
+    "/evaluations/gpt-4-turbo.json",
+    "/evaluations/claude-3-sonnet.json", 
+    "/evaluations/gemini-pro.json",
+    "/evaluations/fraud-detector.json",
+  ]
+
+  const additionalFiles = []
+  for (let i = 1; i <= 10; i++) {
+    additionalFiles.push(`/evaluations/eval-${Date.now() - i * 86400000}.json`)
+  }
+
+  const allFiles = [...evaluationFiles, ...additionalFiles]
+  const evaluations: Evaluation[] = []
+
+  for (const file of allFiles) {
+    try {
+      const response = await fetch(file)
+      if (!response.ok) continue
+
+      const data = await response.json()
+
+      // Calculate overall score based on completion percentage
+      let overallScore = 0
+      if (data.categoryEvaluations) {
+        const allCategories = Object.keys(data.categoryEvaluations)
+        const categoryScores = allCategories.map(categoryId => {
+          const categoryData = data.categoryEvaluations[categoryId]
+          if (!categoryData) return 0
+
+          // Count total questions and answered questions
+          const benchmarkAnswers = categoryData.benchmarkAnswers || {}
+          const processAnswers = categoryData.processAnswers || {}
+          
+          const allAnswers = { ...benchmarkAnswers, ...processAnswers }
+          const totalQuestions = Object.keys(allAnswers).length
+          if (totalQuestions === 0) return 0
+
+          // Count answered questions (not N/A, null, undefined, or empty)
+          const answeredQuestions = Object.values(allAnswers).filter(
+            (answer: any) => answer && answer !== "N/A" && String(answer).trim() !== ""
+          ).length
+
+          return (answeredQuestions / totalQuestions) * 100
+        })
+
+        overallScore = categoryScores.length > 0 
+          ? categoryScores.reduce((sum, score) => sum + score, 0) / categoryScores.length 
+          : 0
+      }
+
+      const evaluation: Evaluation = {
+        id: data.id || `eval-${Date.now()}`,
+        name: data.systemName || "Unknown System",
+        organization: data.provider || "Unknown Provider",
+        overallScore,
+        modality: [...(data.inputModalities || ["Text"]), ...(data.outputModalities || ["Text"])],
+        submittedDate: data.evaluationDate || new Date().toISOString().split("T")[0],
+        categoryEvaluations: data.categoryEvaluations
+      }
+
+      evaluations.push(evaluation)
+    } catch (error) {
+      console.error(`Failed to load evaluation from ${file}:`, error)
+    }
+  }
+
+  return evaluations
+}
+
+export default function AnalyticsPage() {
+  const { theme, setTheme } = useTheme()
+  const [evaluations, setEvaluations] = useState<Evaluation[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const data = await loadEvaluationData()
+        setEvaluations(data)
+      } catch (error) {
+        console.error("Failed to load evaluation data:", error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Loading analytics...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900">
+      <header className="border-b bg-card/80 backdrop-blur-sm">
+        <div className="container mx-auto px-4 sm:px-6 py-4">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+            <div>
+              <h1 className="text-xl sm:text-2xl font-bold font-heading text-foreground">Analytics & Leaderboards</h1>
+              <p className="text-sm text-muted-foreground">Explore evaluation completeness across models and categories</p>
+            </div>
+            <div className="flex items-center gap-2 sm:gap-3">
+              <Link href="/">
+                <Button variant="ghost" size="sm" className="gap-2">
+                  <Home className="h-4 w-4" />
+                  <span className="hidden sm:inline">Dashboard</span>
+                </Button>
+              </Link>
+              <Link href="/about">
+                <Button variant="ghost" size="sm" className="gap-2">
+                  <Info className="h-4 w-4" />
+                  <span className="hidden sm:inline">About</span>
+                </Button>
+              </Link>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                className="h-9 w-9 p-0"
+              >
+                <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                <span className="sr-only">Toggle theme</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="container mx-auto px-4 py-8">
+        <AnalyticsDashboard evaluations={evaluations} />
+      </div>
+    </div>
+  )
+}

app/page.tsx

@@ -495,6 +495,12 @@ export default function HomePage() {
               <p className="text-sm text-muted-foreground">Manage and track your AI system evaluations</p>
             </div>
             <div className="flex items-center gap-2 sm:gap-3">
+              <Link href="/analytics">
+                <Button variant="ghost" size="sm" className="gap-2">
+                  <ArrowUpDown className="h-4 w-4" />
+                  <span className="hidden sm:inline">Analytics</span>
+                </Button>
+              </Link>
               <Link href="/about">
                 <Button variant="ghost" size="sm" className="gap-2">
                   <Info className="h-4 w-4" />

components/analytics-dashboard.tsx

@@ -0,0 +1,869 @@
+"use client"
+
+import { useState, useMemo } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Progress } from "@/components/ui/progress"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Trophy, Target, TrendingUp, BarChart3, Grid3X3, List, Filter, Brain, Shield, CheckCircle, ChevronDown } from "lucide-react"
+
+// Category mappings from schema
+const CATEGORY_NAMES: { [key: string]: string } = {
+  'language-communication': 'Language & Communication',
+  'social-intelligence': 'Social Intelligence & Interaction',
+  'problem-solving': 'Problem Solving',
+  'creativity-innovation': 'Creativity & Innovation',
+  'learning-memory': 'Learning & Memory',
+  'perception-vision': 'Perception & Vision',
+  'physical-manipulation': 'Physical Manipulation & Motor Skills',
+  'metacognition': 'Metacognition & Self-Awareness',
+  'robotic-intelligence': 'Robotic Intelligence & Autonomy',
+  'harmful-content': 'Harmful Content Generation',
+  'information-integrity': 'Information Integrity & Misinformation',
+  'privacy-data': 'Privacy & Data Protection',
+  'bias-fairness': 'Bias & Fairness',
+  'security-robustness': 'Security & Robustness',
+  'dangerous-capabilities': 'Dangerous Capabilities & Misuse',
+  'human-ai-interaction': 'Human-AI Interaction Risks',
+  'environmental-impact': 'Environmental & Resource Impact',
+  'economic-displacement': 'Economic & Labor Displacement',
+  'governance-accountability': 'Governance & Accountability',
+  'value-chain': 'Value Chain & Supply Chain Risks'
+}
+
+const CAPABILITY_CATEGORIES = [
+  'language-communication',
+  'social-intelligence', 
+  'problem-solving',
+  'creativity-innovation',
+  'learning-memory',
+  'perception-vision',
+  'physical-manipulation',
+  'metacognition',
+  'robotic-intelligence'
+]
+
+const RISK_CATEGORIES = [
+  'harmful-content',
+  'information-integrity',
+  'privacy-data',
+  'bias-fairness',
+  'security-robustness',
+  'dangerous-capabilities',
+  'human-ai-interaction',
+  'environmental-impact',
+  'economic-displacement',
+  'governance-accountability',
+  'value-chain'
+]
+
+const MODALITIES = [
+  "Text", "Vision", "Audio", "Video", "Code", "Robotics/Action", "Other"
+]
+
+interface Evaluation {
+  id: string
+  name: string
+  organization: string
+  overallScore: number
+  modality: string[]
+  submittedDate: string
+  categoryEvaluations?: {
+    [categoryId: string]: {
+      benchmarkAnswers?: { [questionId: string]: string }
+      processAnswers?: { [questionId: string]: string }
+    }
+  }
+}
+
+interface AnalyticsDashboardProps {
+  evaluations?: Evaluation[]
+}
+
+export default function AnalyticsDashboard({ evaluations = [] }: AnalyticsDashboardProps) {
+  const [loading, setLoading] = useState(false)
+  
+  // Filter states
+  const [modalityFilter, setModalityFilter] = useState("all")
+  const [organizationFilter, setOrganizationFilter] = useState("all")
+  const [sortBy, setSortBy] = useState<"score" | "date" | "name">("score")
+  const [viewMode, setViewMode] = useState<"grid" | "list">("list")
+  
+  // Category selection state
+  const [selectedCategories, setSelectedCategories] = useState<string[]>(Object.keys(CATEGORY_NAMES))
+
+  // Get unique organizations
+  const ORGANIZATIONS = useMemo(() => 
+    Array.from(new Set(evaluations.map(e => e.organization)))
+  , [evaluations])
+
+  // Calculate scores dynamically based on selected categories
+  const recalculatedEvaluations = useMemo(() => {
+    return evaluations.map(evaluation => {
+      if (!evaluation.categoryEvaluations || selectedCategories.length === 0) {
+        return { ...evaluation, overallScore: 0 }
+      }
+
+      const scores = selectedCategories.map(categoryId => {
+        const categoryData = evaluation.categoryEvaluations?.[categoryId]
+        if (!categoryData) return 0
+
+        // Count total questions and answered questions
+        const benchmarkAnswers = categoryData.benchmarkAnswers || {}
+        const processAnswers = categoryData.processAnswers || {}
+        
+        const allAnswers = { ...benchmarkAnswers, ...processAnswers }
+        const totalQuestions = Object.keys(allAnswers).length
+        if (totalQuestions === 0) return 0
+
+        // Count answered questions (not N/A, null, undefined, or empty)
+        const answeredQuestions = Object.values(allAnswers).filter(
+          (answer: any) => answer && answer !== "N/A" && String(answer).trim() !== ""
+        ).length
+
+        return (answeredQuestions / totalQuestions) * 100
+      })
+
+      const overallScore = scores.length > 0 
+        ? scores.reduce((sum, score) => sum + score, 0) / scores.length 
+        : 0
+
+      return { ...evaluation, overallScore }
+    })
+  }, [evaluations, selectedCategories])
+
+  // Apply filters
+  const filteredEvaluations = useMemo(() => {
+    return recalculatedEvaluations
+      .filter(evaluation => {
+        const matchesModality = modalityFilter === "all" || evaluation.modality.includes(modalityFilter)
+        const matchesOrganization = organizationFilter === "all" || evaluation.organization === organizationFilter
+        return matchesModality && matchesOrganization
+      })
+      .sort((a, b) => {
+        switch (sortBy) {
+          case "score":
+            return b.overallScore - a.overallScore
+          case "date":
+            return new Date(b.submittedDate).getTime() - new Date(a.submittedDate).getTime()
+          case "name":
+            return a.name.localeCompare(b.name)
+          default:
+            return 0
+        }
+      })
+  }, [recalculatedEvaluations, modalityFilter, organizationFilter, sortBy])
+
+  // Calculate category data based on selected categories
+  const categoryData = useMemo(() => {
+    return selectedCategories.map(categoryId => {
+      const scores = evaluations.map(evaluation => {
+        const categoryData = evaluation.categoryEvaluations?.[categoryId]
+        if (!categoryData) return 0
+
+        // Count total questions and answered questions
+        const benchmarkAnswers = categoryData.benchmarkAnswers || {}
+        const processAnswers = categoryData.processAnswers || {}
+        
+        const allAnswers = { ...benchmarkAnswers, ...processAnswers }
+        const totalQuestions = Object.keys(allAnswers).length
+        if (totalQuestions === 0) return 0
+
+        // Count answered questions (not N/A, null, undefined, or empty)
+        const answeredQuestions = Object.values(allAnswers).filter(
+          (answer: any) => answer && answer !== "N/A" && String(answer).trim() !== ""
+        ).length
+
+        return (answeredQuestions / totalQuestions) * 100
+      })
+
+      const averageScore = scores.length > 0 
+        ? scores.reduce((sum, score) => sum + score, 0) / scores.length 
+        : 0
+
+      return {
+        id: categoryId,
+        name: CATEGORY_NAMES[categoryId],
+        type: CAPABILITY_CATEGORIES.includes(categoryId) ? "capability" : "risk",
+        averageScore,
+        evaluationCount: evaluations.length
+      }
+    })
+  }, [evaluations, selectedCategories])
+
+  const getScoreBadgeVariant = (score: number) => {
+    if (score >= 80) return "default"
+    if (score >= 60) return "secondary"
+    if (score >= 40) return "outline"
+    return "destructive"
+  }
+
+  const getScoreColor = (score: number) => {
+    if (score >= 80) return "text-green-600 dark:text-green-400"
+    if (score >= 60) return "text-blue-600 dark:text-blue-400"
+    if (score >= 40) return "text-yellow-600 dark:text-yellow-400"
+    return "text-red-600 dark:text-red-400"
+  }
+
+  const handleCategoryToggle = (categoryId: string) => {
+    setSelectedCategories(prev => 
+      prev.includes(categoryId) 
+        ? prev.filter(id => id !== categoryId)
+        : [...prev, categoryId]
+    )
+  }
+
+  const selectAllCategories = () => {
+    setSelectedCategories(Object.keys(CATEGORY_NAMES))
+  }
+
+  const selectOnlyCapabilities = () => {
+    setSelectedCategories(CAPABILITY_CATEGORIES)
+  }
+
+  const selectOnlyRisks = () => {
+    setSelectedCategories(RISK_CATEGORIES)
+  }
+
+  const clearAllCategories = () => {
+    setSelectedCategories([])
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Loading analytics...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Overview Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center space-x-2">
+              <Trophy className="h-5 w-5 text-primary" />
+              <div>
+                <p className="text-2xl font-bold">{evaluations.length}</p>
+                <p className="text-sm text-muted-foreground">Total Evaluations</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center space-x-2">
+              <Target className="h-5 w-5 text-primary" />
+              <div>
+                <p className="text-2xl font-bold">
+                  {filteredEvaluations.length > 0 ? 
+                    Math.round(filteredEvaluations.reduce((sum, evaluation) => sum + evaluation.overallScore, 0) / filteredEvaluations.length) : 0}%
+                </p>
+                <p className="text-sm text-muted-foreground">Average Score</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center space-x-2">
+              <TrendingUp className="h-5 w-5 text-primary" />
+              <div>
+                <p className="text-2xl font-bold">
+                  {filteredEvaluations.length > 0 ? Math.round(Math.max(...filteredEvaluations.map(e => e.overallScore))) : 0}%
+                </p>
+                <p className="text-sm text-muted-foreground">Highest Score</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center space-x-2">
+              <BarChart3 className="h-5 w-5 text-primary" />
+              <div>
+                <p className="text-2xl font-bold">{selectedCategories.length}/{Object.keys(CATEGORY_NAMES).length}</p>
+                <p className="text-sm text-muted-foreground">Selected Categories</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="overall" className="space-y-6">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="overall">Overall Leaderboard</TabsTrigger>
+          <TabsTrigger value="insights">Insights</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overall" className="space-y-6">
+          {/* Filters */}
+          <Card>
+            <CardHeader>
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                <div>
+                  <CardTitle className="flex items-center gap-2">
+                    <Filter className="h-5 w-5" />
+                    Filters & View
+                  </CardTitle>
+                  <CardDescription>Filter and sort evaluation results</CardDescription>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant={viewMode === "grid" ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setViewMode("grid")}
+                  >
+                    <Grid3X3 className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant={viewMode === "list" ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setViewMode("list")}
+                  >
+                    <List className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
+                {/* Category Selection Dropdown */}
+                <div>
+                  <label className="text-sm font-medium mb-2 block">Categories ({selectedCategories.length} selected)</label>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button variant="outline" className="w-full justify-between">
+                        Select Categories
+                        <ChevronDown className="h-4 w-4 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-80 p-0" align="start">
+                      <div className="p-4 space-y-4">
+                        {/* Quick Actions */}
+                        <div className="flex flex-wrap gap-2">
+                          <Button size="sm" variant="outline" onClick={selectAllCategories}>
+                            All
+                          </Button>
+                          <Button size="sm" variant="outline" onClick={selectOnlyCapabilities}>
+                            <Brain className="h-3 w-3 mr-1" />
+                            Capabilities
+                          </Button>
+                          <Button size="sm" variant="outline" onClick={selectOnlyRisks}>
+                            <Shield className="h-3 w-3 mr-1" />
+                            Risks
+                          </Button>
+                          <Button size="sm" variant="outline" onClick={clearAllCategories}>
+                            Clear
+                          </Button>
+                        </div>
+
+                        {/* Capabilities */}
+                        <div className="space-y-2">
+                          <h4 className="font-semibold text-sm flex items-center gap-2">
+                            <Brain className="h-4 w-4 text-blue-500" />
+                            Capabilities
+                          </h4>
+                          <div className="space-y-1 max-h-32 overflow-y-auto">
+                            {CAPABILITY_CATEGORIES.map(categoryId => (
+                              <div key={categoryId} className="flex items-center space-x-2">
+                                <Checkbox
+                                  id={`cap-${categoryId}`}
+                                  checked={selectedCategories.includes(categoryId)}
+                                  onCheckedChange={() => handleCategoryToggle(categoryId)}
+                                />
+                                <label htmlFor={`cap-${categoryId}`} className="text-xs cursor-pointer">
+                                  {CATEGORY_NAMES[categoryId]}
+                                </label>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+
+                        {/* Risks */}
+                        <div className="space-y-2">
+                          <h4 className="font-semibold text-sm flex items-center gap-2">
+                            <Shield className="h-4 w-4 text-red-500" />
+                            Risks
+                          </h4>
+                          <div className="space-y-1 max-h-40 overflow-y-auto">
+                            {RISK_CATEGORIES.map(categoryId => (
+                              <div key={categoryId} className="flex items-center space-x-2">
+                                <Checkbox
+                                  id={`risk-${categoryId}`}
+                                  checked={selectedCategories.includes(categoryId)}
+                                  onCheckedChange={() => handleCategoryToggle(categoryId)}
+                                />
+                                <label htmlFor={`risk-${categoryId}`} className="text-xs cursor-pointer">
+                                  {CATEGORY_NAMES[categoryId]}
+                                </label>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+
+                <div>
+                  <label className="text-sm font-medium mb-2 block">Modality</label>
+                  <Select value={modalityFilter} onValueChange={setModalityFilter}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">All Modalities</SelectItem>
+                      {MODALITIES.map(modality => (
+                        <SelectItem key={modality} value={modality}>{modality}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div>
+                  <label className="text-sm font-medium mb-2 block">Organization</label>
+                  <Select value={organizationFilter} onValueChange={setOrganizationFilter}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">All Organizations</SelectItem>
+                      {ORGANIZATIONS.map(org => (
+                        <SelectItem key={org} value={org}>{org}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div>
+                  <label className="text-sm font-medium mb-2 block">Sort By</label>
+                  <Select value={sortBy} onValueChange={(value: "score" | "date" | "name") => setSortBy(value)}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="score">Completeness Score</SelectItem>
+                      <SelectItem value="date">Submit Date</SelectItem>
+                      <SelectItem value="name">Name</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="flex items-end">
+                  <Button 
+                    variant="outline" 
+                    onClick={() => {
+                      setModalityFilter("all")
+                      setOrganizationFilter("all")
+                      setSortBy("score")
+                    }}
+                    className="w-full"
+                  >
+                    Reset Filters
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Overall Leaderboard */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Overall Completeness Leaderboard</CardTitle>
+              <CardDescription>
+                Ranked by evaluation completeness score ({filteredEvaluations.length} {filteredEvaluations.length === 1 ? 'evaluation' : 'evaluations'})
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {viewMode === "grid" ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {filteredEvaluations.map((evaluation, index) => (
+                    <Card key={evaluation.id} className="relative">
+                      <CardContent className="p-6">
+                        {index < 3 && (
+                          <div className="absolute -top-2 -right-2">
+                            <Badge variant={index === 0 ? "default" : "secondary"} className="rounded-full px-3 py-1">
+                              #{index + 1}
+                            </Badge>
+                          </div>
+                        )}
+                        
+                        <div className="space-y-4">
+                          <div>
+                            <h3 className="font-semibold text-lg">{evaluation.name}</h3>
+                            <p className="text-sm text-muted-foreground">{evaluation.organization}</p>
+                          </div>
+
+                          <div className="space-y-2">
+                            <div className="flex items-center justify-between">
+                              <span className="text-sm font-medium">Completeness Score</span>
+                              <Badge variant={getScoreBadgeVariant(evaluation.overallScore)}>
+                                {Math.round(evaluation.overallScore)}%
+                              </Badge>
+                            </div>
+                            <Progress value={evaluation.overallScore} className="h-2" />
+                          </div>
+
+                          <div className="flex flex-wrap gap-1">
+                            {evaluation.modality.map(mod => (
+                              <Badge key={mod} variant="outline" className="text-xs">
+                                {mod}
+                              </Badge>
+                            ))}
+                          </div>
+
+                          <div className="text-xs text-muted-foreground">
+                            Submitted: {new Date(evaluation.submittedDate).toLocaleDateString()}
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {filteredEvaluations.map((evaluation, index) => (
+                    <div key={evaluation.id} className="group hover:bg-muted/30 transition-colors rounded-lg p-3">
+                      <div className="flex items-center gap-4">
+                        {/* Organization Logo/Icon */}
+                        <div className="flex items-center gap-3 min-w-[200px]">
+                          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-bold text-primary">
+                            {evaluation.organization.charAt(0)}
+                          </div>
+                          <div className="text-left">
+                            <div className="font-medium text-sm">{evaluation.organization}</div>
+                            <div className="font-semibold">{evaluation.name}</div>
+                          </div>
+                        </div>
+
+                        {/* Horizontal Bar Chart */}
+                        <div className="flex-1 relative">
+                          <div className="flex items-center gap-3">
+                            {/* Progress Bar Container */}
+                            <div className="flex-1 relative h-6 bg-muted rounded-full overflow-hidden">
+                              {/* Background bar */}
+                              <div className="absolute inset-0 bg-gray-200 dark:bg-gray-700"></div>
+                              {/* Progress bar */}
+                              <div 
+                                className={`absolute left-0 top-0 h-full transition-all duration-500 ease-out ${
+                                  evaluation.overallScore >= 80 ? 'bg-purple-600' :
+                                  evaluation.overallScore >= 60 ? 'bg-purple-500' :
+                                  evaluation.overallScore >= 40 ? 'bg-purple-400' :
+                                  'bg-purple-300'
+                                }`}
+                                style={{ 
+                                  width: `${Math.max(evaluation.overallScore, 5)}%`,
+                                  animationDelay: `${index * 100}ms`
+                                }}
+                              ></div>
+                            </div>
+                            
+                            {/* Score */}
+                            <div className="min-w-[50px] text-right">
+                              <span className="text-lg font-bold">
+                                {Math.round(evaluation.overallScore)}%
+                              </span>
+                            </div>
+                          </div>
+                          
+                          {/* Modality badges - shown on hover */}
+                          <div className="flex flex-wrap gap-1 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                            {evaluation.modality.slice(0, 3).map(mod => (
+                              <Badge key={mod} variant="outline" className="text-xs">
+                                {mod}
+                              </Badge>
+                            ))}
+                            {evaluation.modality.length > 3 && (
+                              <Badge variant="outline" className="text-xs">
+                                +{evaluation.modality.length - 3}
+                              </Badge>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="insights" className="space-y-6">
+          {/* Key Insights */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Top Performing Categories</CardTitle>
+                <CardDescription>Categories with highest average completeness from selected categories</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {categoryData
+                    .sort((a, b) => b.averageScore - a.averageScore)
+                    .slice(0, 5)
+                    .map((category, index) => (
+                      <div key={category.id} className="flex items-center justify-between">
+                        <div className="flex items-center space-x-3">
+                          <Badge variant="outline" className="w-8 h-8 rounded-full flex items-center justify-center p-0">
+                            {index + 1}
+                          </Badge>
+                          <div>
+                            <p className="font-medium text-sm">{category.name}</p>
+                            <Badge variant={category.type === "capability" ? "secondary" : "destructive"} className="text-xs">
+                              {category.type}
+                            </Badge>
+                          </div>
+                        </div>
+                        <div className="text-right">
+                          <p className={`font-bold ${getScoreColor(category.averageScore)}`}>
+                            {Math.round(category.averageScore)}%
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  {categoryData.length === 0 && (
+                    <p className="text-muted-foreground text-center py-4">
+                      No categories selected. Please select categories from the filters above.
+                    </p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Areas for Improvement</CardTitle>
+                <CardDescription>Categories with lowest average completeness from selected categories</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {categoryData
+                    .sort((a, b) => a.averageScore - b.averageScore)
+                    .slice(0, 5)
+                    .map((category, index) => (
+                      <div key={category.id} className="flex items-center justify-between">
+                        <div className="flex items-center space-x-3">
+                          <Badge variant="outline" className="w-8 h-8 rounded-full flex items-center justify-center p-0">
+                            {index + 1}
+                          </Badge>
+                          <div>
+                            <p className="font-medium text-sm">{category.name}</p>
+                            <Badge variant={category.type === "capability" ? "secondary" : "destructive"} className="text-xs">
+                              {category.type}
+                            </Badge>
+                          </div>
+                        </div>
+                        <div className="text-right">
+                          <p className={`font-bold ${getScoreColor(category.averageScore)}`}>
+                            {Math.round(category.averageScore)}%
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  {categoryData.length === 0 && (
+                    <p className="text-muted-foreground text-center py-4">
+                      No categories selected. Please select categories from the filters above.
+                    </p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Category Performance Breakdown */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Capabilities */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Brain className="h-5 w-5 text-blue-500" />
+                  Capability Categories
+                </CardTitle>
+                <CardDescription>Average completeness by capability category</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  {categoryData
+                    .filter(cat => cat.type === "capability")
+                    .sort((a, b) => b.averageScore - a.averageScore)
+                    .map(category => (
+                      <div key={category.id} className="space-y-2">
+                        <div className="flex items-center justify-between text-sm">
+                          <span className="font-medium truncate pr-2">{category.name}</span>
+                          <Badge variant={getScoreBadgeVariant(category.averageScore)}>
+                            {Math.round(category.averageScore)}%
+                          </Badge>
+                        </div>
+                        <Progress value={category.averageScore} className="h-2" />
+                        <div className="text-xs text-muted-foreground">
+                          {category.evaluationCount} evaluation{category.evaluationCount !== 1 ? 's' : ''}
+                        </div>
+                      </div>
+                    ))}
+                  {categoryData.filter(cat => cat.type === "capability").length === 0 && (
+                    <p className="text-muted-foreground text-center py-4">
+                      No capability categories selected.
+                    </p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Risks */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Shield className="h-5 w-5 text-red-500" />
+                  Risk Categories
+                </CardTitle>
+                <CardDescription>Average completeness by risk category</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  {categoryData
+                    .filter(cat => cat.type === "risk")
+                    .sort((a, b) => b.averageScore - a.averageScore)
+                    .map(category => (
+                      <div key={category.id} className="space-y-2">
+                        <div className="flex items-center justify-between text-sm">
+                          <span className="font-medium truncate pr-2">{category.name}</span>
+                          <Badge variant={getScoreBadgeVariant(category.averageScore)}>
+                            {Math.round(category.averageScore)}%
+                          </Badge>
+                        </div>
+                        <Progress value={category.averageScore} className="h-2" />
+                        <div className="text-xs text-muted-foreground">
+                          {category.evaluationCount} evaluation{category.evaluationCount !== 1 ? 's' : ''}
+                        </div>
+                      </div>
+                    ))}
+                  {categoryData.filter(cat => cat.type === "risk").length === 0 && (
+                    <p className="text-muted-foreground text-center py-4">
+                      No risk categories selected.
+                    </p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Distribution Analysis */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Score Distribution</CardTitle>
+              <CardDescription>Breakdown of evaluation completeness scores based on current filters and selected categories</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                {[
+                  { range: "80-100%", color: "bg-green-500", count: filteredEvaluations.filter(e => e.overallScore >= 80).length },
+                  { range: "60-79%", color: "bg-blue-500", count: filteredEvaluations.filter(e => e.overallScore >= 60 && e.overallScore < 80).length },
+                  { range: "40-59%", color: "bg-yellow-500", count: filteredEvaluations.filter(e => e.overallScore >= 40 && e.overallScore < 60).length },
+                  { range: "0-39%", color: "bg-red-500", count: filteredEvaluations.filter(e => e.overallScore < 40).length }
+                ].map(item => (
+                  <div key={item.range} className="text-center space-y-2">
+                    <div className={`${item.color} rounded-full w-16 h-16 flex items-center justify-center text-white font-bold text-xl mx-auto`}>
+                      {item.count}
+                    </div>
+                    <p className="text-sm font-medium">{item.range}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {filteredEvaluations.length > 0 ? Math.round((item.count / filteredEvaluations.length) * 100) : 0}%
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Additional Insights */}
+          {evaluations.length > 0 && (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Most Common Modalities</CardTitle>
+                  <CardDescription>Frequently evaluated modality combinations</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {Array.from(new Set(evaluations.flatMap(e => e.modality)))
+                      .map(modality => ({
+                        modality,
+                        count: evaluations.filter(e => e.modality.includes(modality)).length
+                      }))
+                      .sort((a, b) => b.count - a.count)
+                      .slice(0, 5)
+                      .map(item => (
+                        <div key={item.modality} className="flex justify-between items-center">
+                          <Badge variant="outline">{item.modality}</Badge>
+                          <span className="text-sm font-medium">{item.count} evaluation{item.count !== 1 ? 's' : ''}</span>
+                        </div>
+                      ))}
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle>Organizations</CardTitle>
+                  <CardDescription>Number of evaluations per organization</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {ORGANIZATIONS
+                      .map(org => ({
+                        organization: org,
+                        count: evaluations.filter(e => e.organization === org).length
+                      }))
+                      .sort((a, b) => b.count - a.count)
+                      .map(item => (
+                        <div key={item.organization} className="flex justify-between items-center">
+                          <span className="text-sm font-medium">{item.organization}</span>
+                          <Badge variant="secondary">{item.count}</Badge>
+                        </div>
+                      ))}
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle>Evaluation Timeline</CardTitle>
+                  <CardDescription>Recent evaluation activity</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {evaluations
+                      .sort((a, b) => new Date(b.submittedDate).getTime() - new Date(a.submittedDate).getTime())
+                      .slice(0, 5)
+                      .map(evaluation => (
+                        <div key={evaluation.id} className="flex justify-between items-center text-sm">
+                          <span className="font-medium">{evaluation.name}</span>
+                          <span className="text-muted-foreground">
+                            {new Date(evaluation.submittedDate).toLocaleDateString()}
+                          </span>
+                        </div>
+                      ))}
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}