first commit

components/ocr/OcrStats.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+import { OcrDocument } from '../../types';
+
+interface OcrStatsProps {
+  documents: OcrDocument[];
+}
+
+const StatCard: React.FC<{ label: string; value: string; icon: string; color: string }> = ({
+  label,
+  value,
+  icon,
+  color,
+}) => (
+  <div className="bg-white p-6 rounded-lg shadow-sm flex items-center space-x-4">
+    <div className={`text-3xl p-4 rounded-full bg-opacity-10 ${color}`}>
+      <i className={`fa-solid ${icon}`}></i>
+    </div>
+    <div>
+      <p className="text-gray-600 font-medium">{label}</p>
+      <p className="text-3xl font-bold text-gray-800">{value}</p>
+    </div>
+  </div>
+);
+
+const OcrStats: React.FC<OcrStatsProps> = ({ documents }) => {
+  const stats = useMemo(() => {
+    const today = new Date();
+    const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+
+    const processedToday = documents.filter((d) => d.uploadedAt >= startOfToday).length;
+    const needsReview = documents.filter((d) => d.status === 'Needs Review').length;
+
+    const completedDocs = documents.filter(
+      (d) => d.status === 'Completed' || d.status === 'Needs Review'
+    );
+    const totalAccuracy = completedDocs.reduce((sum, doc) => sum + doc.accuracy, 0);
+    const avgAccuracy = completedDocs.length > 0 ? totalAccuracy / completedDocs.length : 0;
+
+    return { processedToday, needsReview, avgAccuracy };
+  }, [documents]);
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <StatCard
+        label="Diproses Hari Ini"
+        value={stats.processedToday.toString()}
+        icon="fa-calendar-day"
+        color="text-blue-500 bg-blue-500"
+      />
+      <StatCard
+        label="Akurasi Rata-rata"
+        value={`${stats.avgAccuracy.toFixed(1)}%`}
+        icon="fa-crosshairs"
+        color="text-green-500 bg-green-500"
+      />
+      <StatCard
+        label="Perlu Tinjauan"
+        value={stats.needsReview.toString()}
+        icon="fa-user-check"
+        color="text-yellow-500 bg-yellow-500"
+      />
+    </div>
+  );
+};
+
+export default OcrStats;