WIP

frontend/src/components/DashboardOverview.tsx

@@ -0,0 +1,148 @@
+import React from 'react'
+import { FileText, CheckCircle, Clock, TrendingUp, Activity } from 'lucide-react'
+import { Button } from './Button'
+import { useDocuments } from '../hooks/useDocuments'
+import { useTraining } from '../hooks/useTraining'
+
+interface DashboardOverviewProps {
+  onNavigate: (view: string) => void
+}
+
+export const DashboardOverview: React.FC<DashboardOverviewProps> = ({ onNavigate }) => {
+  const { total: totalDocs, isLoading: docsLoading } = useDocuments({ limit: 1 })
+  const { models, isLoadingModels } = useTraining()
+
+  const stats = [
+    {
+      label: 'Total Documents',
+      value: docsLoading ? '...' : totalDocs.toString(),
+      icon: FileText,
+      color: 'text-warm-text-primary',
+      bgColor: 'bg-warm-bg',
+    },
+    {
+      label: 'Labeled',
+      value: '0',
+      icon: CheckCircle,
+      color: 'text-warm-state-success',
+      bgColor: 'bg-green-50',
+    },
+    {
+      label: 'Pending',
+      value: '0',
+      icon: Clock,
+      color: 'text-warm-state-warning',
+      bgColor: 'bg-yellow-50',
+    },
+    {
+      label: 'Training Models',
+      value: isLoadingModels ? '...' : models.length.toString(),
+      icon: TrendingUp,
+      color: 'text-warm-state-info',
+      bgColor: 'bg-blue-50',
+    },
+  ]
+
+  return (
+    <div className="p-8 max-w-7xl mx-auto animate-fade-in">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-warm-text-primary tracking-tight">
+          Dashboard
+        </h1>
+        <p className="text-sm text-warm-text-muted mt-1">
+          Overview of your document annotation system
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        {stats.map((stat) => (
+          <div
+            key={stat.label}
+            className="bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow"
+          >
+            <div className="flex items-center justify-between mb-4">
+              <div className={`p-3 rounded-lg ${stat.bgColor}`}>
+                <stat.icon className={stat.color} size={24} />
+              </div>
+            </div>
+            <p className="text-2xl font-bold text-warm-text-primary mb-1">
+              {stat.value}
+            </p>
+            <p className="text-sm text-warm-text-muted">{stat.label}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Quick Actions */}
+      <div className="bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm mb-8">
+        <h2 className="text-lg font-semibold text-warm-text-primary mb-4">
+          Quick Actions
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Button onClick={() => onNavigate('documents')} className="justify-start">
+            <FileText size={18} className="mr-2" />
+            Manage Documents
+          </Button>
+          <Button onClick={() => onNavigate('training')} variant="secondary" className="justify-start">
+            <Activity size={18} className="mr-2" />
+            Start Training
+          </Button>
+          <Button onClick={() => onNavigate('models')} variant="secondary" className="justify-start">
+            <TrendingUp size={18} className="mr-2" />
+            View Models
+          </Button>
+        </div>
+      </div>
+
+      {/* Recent Activity */}
+      <div className="bg-warm-card border border-warm-border rounded-lg shadow-sm overflow-hidden">
+        <div className="p-6 border-b border-warm-border">
+          <h2 className="text-lg font-semibold text-warm-text-primary">
+            Recent Activity
+          </h2>
+        </div>
+        <div className="p-6">
+          <div className="text-center py-8 text-warm-text-muted">
+            <Activity size={48} className="mx-auto mb-3 opacity-20" />
+            <p className="text-sm">No recent activity</p>
+            <p className="text-xs mt-1">
+              Start by uploading documents or creating training jobs
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* System Status */}
+      <div className="mt-8 bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm">
+        <h2 className="text-lg font-semibold text-warm-text-primary mb-4">
+          System Status
+        </h2>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-warm-text-secondary">Backend API</span>
+            <span className="flex items-center text-sm text-warm-state-success">
+              <span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+              Online
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-warm-text-secondary">Database</span>
+            <span className="flex items-center text-sm text-warm-state-success">
+              <span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+              Connected
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-warm-text-secondary">GPU</span>
+            <span className="flex items-center text-sm text-warm-state-success">
+              <span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+              Available
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}