first commit

components/ocr/OcrReviewModal.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { OcrDocument } from '../../types';
+
+interface OcrReviewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  document: OcrDocument;
+  onSave: (updatedDocument: OcrDocument) => void;
+}
+
+const OcrReviewModal: React.FC<OcrReviewModalProps> = ({ isOpen, onClose, document, onSave }) => {
+  const [extractedText, setExtractedText] = useState(document.extractedText);
+
+  const handleSave = () => {
+    onSave({ ...document, extractedText, status: 'Completed' });
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  const accuracyColor =
+    document.accuracy > 95
+      ? 'text-green-600'
+      : document.accuracy > 80
+        ? 'text-yellow-600'
+        : 'text-red-600';
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-60 flex justify-center items-center z-50 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white rounded-xl shadow-2xl w-full max-w-5xl h-[90vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="p-4 border-b">
+          <div className="flex justify-between items-center">
+            <div>
+              <h2 className="text-xl font-bold text-gray-800">Tinjau Dokumen OCR</h2>
+              <p className="text-sm text-gray-500">{document.fileName}</p>
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 text-2xl"
+            >
+              &times;
+            </button>
+          </div>
+        </div>
+
+        <div className="flex-grow p-4 grid grid-cols-1 md:grid-cols-2 gap-4 overflow-hidden">
+          {/* Image Viewer */}
+          <div className="bg-gray-100 rounded-lg flex items-center justify-center overflow-auto p-2">
+            <img
+              src={document.imageUrl}
+              alt="Document Scan"
+              className="max-w-full max-h-full object-contain"
+            />
+          </div>
+
+          {/* Extracted Text Editor */}
+          <div className="flex flex-col">
+            <div className="flex justify-between items-center mb-2">
+              <h3 className="font-semibold">Teks Hasil Ekstraksi</h3>
+              <div className="text-sm">
+                Akurasi:{' '}
+                <span className={`font-bold ${accuracyColor}`}>
+                  {document.accuracy.toFixed(1)}%
+                </span>
+              </div>
+            </div>
+            <textarea
+              value={extractedText}
+              onChange={(e) => setExtractedText(e.target.value)}
+              className="w-full flex-grow p-3 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 font-mono text-sm"
+              placeholder="Teks yang diekstrak akan muncul di sini..."
+            />
+          </div>
+        </div>
+
+        <div className="bg-gray-100 px-6 py-3 rounded-b-xl flex justify-end space-x-3">
+          <button
+            onClick={onClose}
+            className="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 font-medium"
+          >
+            Tutup
+          </button>
+          <button
+            onClick={handleSave}
+            className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 font-medium shadow-sm"
+          >
+            <i className="fa-solid fa-check mr-2"></i> Validasi & Simpan
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OcrReviewModal;