first commit

components/ocr/OcrDocumentsTable.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { OcrDocument, OcrDocumentStatus } from '../../types';
+
+interface OcrDocumentsTableProps {
+  documents: OcrDocument[];
+  onReview: (doc: OcrDocument) => void;
+}
+
+const statusConfig: { [key in OcrDocumentStatus]: { text: string; color: string; icon: string } } =
+  {
+    Processing: {
+      text: 'Memproses',
+      color: 'bg-blue-100 text-blue-700',
+      icon: 'fa-spin fa-spinner',
+    },
+    'Needs Review': {
+      text: 'Perlu Tinjauan',
+      color: 'bg-yellow-100 text-yellow-700',
+      icon: 'fa-user-check',
+    },
+    Completed: { text: 'Selesai', color: 'bg-green-100 text-green-700', icon: 'fa-check-circle' },
+    Failed: { text: 'Gagal', color: 'bg-red-100 text-red-700', icon: 'fa-times-circle' },
+  };
+
+const OcrDocumentsTable: React.FC<OcrDocumentsTableProps> = ({ documents, onReview }) => {
+  const sortedDocs = [...documents].sort((a, b) => b.uploadedAt.getTime() - a.uploadedAt.getTime());
+
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-sm">
+      <h2 className="text-xl font-bold mb-4">Dokumen Terproses</h2>
+      <div className="overflow-x-auto">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-100 text-left text-gray-600">
+            <tr>
+              <th className="p-3 font-semibold">Nama File</th>
+              <th className="p-3 font-semibold">Waktu Unggah</th>
+              <th className="p-3 font-semibold">Jenis Dokumen</th>
+              <th className="p-3 font-semibold">Akurasi</th>
+              <th className="p-3 font-semibold">Status</th>
+              <th className="p-3 font-semibold text-right">Aksi</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {sortedDocs.map((doc) => {
+              const config = statusConfig[doc.status];
+              const accuracyColor =
+                doc.accuracy > 95
+                  ? 'text-green-600'
+                  : doc.accuracy > 80
+                    ? 'text-yellow-600'
+                    : 'text-red-600';
+              return (
+                <tr key={doc.id} className="hover:bg-gray-50">
+                  <td className="p-3 font-semibold text-gray-800 truncate" title={doc.fileName}>
+                    {doc.fileName}
+                  </td>
+                  <td className="p-3 text-gray-600">{doc.uploadedAt.toLocaleString('id-ID')}</td>
+                  <td className="p-3 text-gray-600">{doc.documentType}</td>
+                  <td className={`p-3 font-bold ${accuracyColor}`}>
+                    {doc.accuracy > 0 ? `${doc.accuracy}%` : '-'}
+                  </td>
+                  <td className="p-3">
+                    <span
+                      className={`inline-flex items-center space-x-1.5 px-2 py-0.5 rounded-full text-xs font-medium ${config.color}`}
+                    >
+                      <i className={`fa-solid ${config.icon}`}></i>
+                      <span>{config.text}</span>
+                    </span>
+                  </td>
+                  <td className="p-3 text-right">
+                    {(doc.status === 'Needs Review' || doc.status === 'Completed') && (
+                      <button
+                        onClick={() => onReview(doc)}
+                        className="text-blue-600 hover:text-blue-800 font-semibold"
+                      >
+                        <i className="fa-solid fa-search mr-1"></i> Tinjau
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default OcrDocumentsTable;