Update frontend/src/components/ocr/UploadZone.jsx

frontend/src/components/ocr/UploadZone.jsx

@@ -1,334 +1,169 @@
-// frontend/src/pages/Dashboard.jsx
-
-import React, { useState, useEffect } from "react";
-import { motion } from "framer-motion";
-import { Sparkles, Zap, FileText, TrendingUp, Clock, AlertCircle } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import UploadZone from "@/components/ocr/UploadZone";
-import DocumentPreview from "@/components/ocr/DocumentPreview";
-import ExtractionOutput from "@/components/ocr/ExtractionOutput";
-import ExportButtons from "@/components/ExportButtons";
-import ProcessingStatus from "@/components/ocr/ProcessingStatus";
-import { extractDocument, getHistory } from "@/services/api";
-
-export default function Dashboard() {
-  const [selectedFile, setSelectedFile] = useState(null);
-  const [keyFields, setKeyFields] = useState("");
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [isComplete, setIsComplete] = useState(false);
-  const [extractionResult, setExtractionResult] = useState(null);
-  const [error, setError] = useState(null);
-  const [processingStage, setProcessingStage] = useState("received"); // received, analysis, extraction, done
-  const [stats, setStats] = useState({ totalExtracted: 0, averageAccuracy: 0 });
-
-  const handleFileSelect = (file) => {
-    setSelectedFile(file);
-    setIsComplete(false);
-    setExtractionResult(null);
-    setError(null);
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Upload, FileText, Image, FileSpreadsheet, X, Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+
+export default function UploadZone({ onFileSelect, selectedFile, onClear, keyFields = "", onKeyFieldsChange = () => {} }) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
   };
 
-  const handleClear = () => {
-    setSelectedFile(null);
-    setKeyFields("");
-    setIsProcessing(false);
-    setIsComplete(false);
-    setExtractionResult(null);
-    setError(null);
-    setProcessingStage("received");
+  const handleDragLeave = () => {
+    setIsDragging(false);
   };
 
-  // Fetch and calculate stats from history
-  useEffect(() => {
-    const fetchStats = async () => {
-      try {
-        const history = await getHistory();
-        
-        // Calculate total extracted (only completed extractions)
-        const completedExtractions = history.filter(item => item.status === "completed");
-        const totalExtracted = completedExtractions.length;
-        
-        // Calculate average accuracy from completed extractions
-        const accuracies = completedExtractions
-          .map(item => item.confidence || 0)
-          .filter(acc => acc > 0);
-        
-        const averageAccuracy = accuracies.length > 0
-          ? accuracies.reduce((sum, acc) => sum + acc, 0) / accuracies.length
-          : 0;
-        
-        setStats({
-          totalExtracted,
-          averageAccuracy: Math.round(averageAccuracy * 10) / 10 // Round to 1 decimal place
-        });
-      } catch (err) {
-        console.error("Failed to fetch stats:", err);
-        // Keep default values on error
-      }
-    };
-
-    fetchStats();
-    
-    // Refresh stats after extraction completes
-    if (isComplete) {
-      fetchStats();
-    }
-  }, [isComplete]);
-
-  const handleExtract = async () => {
-    if (!selectedFile) return;
-
-    setIsProcessing(true);
-    setIsComplete(false);
-    setError(null);
-    setExtractionResult(null);
-    setProcessingStage("received");
-
-    // Move to Analysis stage immediately after starting
-    setTimeout(() => {
-      setProcessingStage("analysis");
-    }, 100);
-
-    // Move to Extraction stage after analysis phase (2.5 seconds)
-    let extractionTimer = setTimeout(() => {
-      setProcessingStage("extraction");
-    }, 2500);
-
-    try {
-      const result = await extractDocument(selectedFile, keyFields);
-      
-      // Clear the extraction timer
-      clearTimeout(extractionTimer);
-      
-      // Move to extraction stage if not already there, then to done
-      setProcessingStage("extraction");
-      
-      // Small delay to show extraction stage, then move to done when results are rendered
-      setTimeout(() => {
-        setProcessingStage("done");
-        setExtractionResult(result);
-        setIsComplete(true);
-        setIsProcessing(false);
-      }, 500); // Give time to see extraction stage
-    } catch (err) {
-      clearTimeout(extractionTimer);
-      console.error("Extraction error:", err);
-      setError(err.message || "Failed to extract document. Please try again.");
-      setIsComplete(false);
-      setProcessingStage("received");
-      setIsProcessing(false);
-    }
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files[0];
+    if (file) onFileSelect(file);
   };
 
-  return (
-    <div className="min-h-screen bg-[#FAFAFA]">
-      {/* Header */}
-      <header className="bg-white border-b border-slate-200/80 sticky top-0 z-40">
-        <div className="px-8 py-4 flex items-center justify-between">
-          <div>
-            <h1 className="text-xl font-bold text-slate-900 tracking-tight">
-              Document Extraction
-            </h1>
-            <p className="text-sm text-slate-500 mt-0.5">
-              Upload any document and extract structured data with AI
-            </p>
-          </div>
-          <div className="flex items-center gap-3">
-            {/* Stats Pills */}
-            <div className="hidden lg:flex items-center gap-2">
-              <div className="flex items-center gap-2 px-3 py-1.5 bg-slate-100 rounded-lg">
-                <FileText className="h-4 w-4 text-slate-500" />
-                <span className="text-sm font-medium text-slate-700">
-                  {stats.totalExtracted} Extracted
-                </span>
-              </div>
-              <div className="flex items-center gap-2 px-3 py-1.5 bg-emerald-50 rounded-lg">
-                <TrendingUp className="h-4 w-4 text-emerald-600" />
-                <span className="text-sm font-medium text-emerald-700">
-                  {stats.averageAccuracy > 0 ? `${stats.averageAccuracy}%` : "0%"} Accuracy
-                </span>
-              </div>
-            </div>
-
-            <ExportButtons isComplete={isComplete} extractionResult={extractionResult} />
-          </div>
-        </div>
-      </header>
-
-      {/* Main Content */}
-      <div className="p-8">
-        {/* Upload Section */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="max-w-3xl mx-auto mb-4"
-        >
-          <UploadZone
-            onFileSelect={handleFileSelect}
-            selectedFile={selectedFile}
-            onClear={handleClear}
-            keyFields={keyFields}
-            onKeyFieldsChange={setKeyFields}
-          />
+  const getFileIcon = (type) => {
+    if (type?.includes("image")) return Image;
+    if (type?.includes("spreadsheet") || type?.includes("excel")) return FileSpreadsheet;
+    return FileText;
+  };
 
-          {/* Extract Button */}
-          {selectedFile && !isProcessing && !isComplete && (
-            <motion.div
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="mt-4 flex justify-center"
-            >
-              <Button
-                onClick={handleExtract}
-                size="lg"
-                className="h-14 px-8 rounded-2xl font-semibold text-base bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 shadow-xl shadow-indigo-500/25 hover:shadow-2xl hover:shadow-indigo-500/30 transition-all duration-300 hover:-translate-y-0.5"
-              >
-                <Sparkles className="h-5 w-5 mr-2" />
-                Start Extraction
-                <Zap className="h-4 w-4 ml-2 opacity-70" />
-              </Button>
-            </motion.div>
-          )}
-        </motion.div>
+  const FileIcon = selectedFile ? getFileIcon(selectedFile.type) : FileText;
 
-        {/* Error Message */}
-        {error && (
+  return (
+    <div className="w-full">
+      <AnimatePresence mode="wait">
+        {!selectedFile ? (
           <motion.div
-            initial={{ opacity: 0, y: -10 }}
+            key="upload"
+            initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
-            className="max-w-3xl mx-auto mb-6"
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            className={cn(
+              "relative group cursor-pointer",
+              "border-2 border-dashed rounded-2xl",
+              "transition-all duration-300 ease-out",
+              isDragging
+                ? "border-indigo-400 bg-indigo-50/50"
+                : "border-slate-200 hover:border-indigo-300 hover:bg-slate-50/50"
+            )}
           >
-            <div className="bg-red-50 border border-red-200 rounded-2xl p-4 flex items-start gap-3">
-              <AlertCircle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
-              <div className="flex-1">
-                <h3 className="font-semibold text-red-900 mb-1">Extraction Failed</h3>
-                <p className="text-sm text-red-700">{error}</p>
-              </div>
-              <button
-                onClick={() => setError(null)}
-                className="text-red-400 hover:text-red-600 transition-colors"
+            <label className="flex flex-col items-center justify-center py-16 px-8 cursor-pointer">
+              <motion.div
+                animate={isDragging ? { scale: 1.1, y: -5 } : { scale: 1, y: 0 }}
+                className={cn(
+                  "h-16 w-16 rounded-2xl flex items-center justify-center mb-6 transition-colors duration-300",
+                  isDragging
+                    ? "bg-indigo-100"
+                    : "bg-gradient-to-br from-slate-100 to-slate-50 group-hover:from-indigo-100 group-hover:to-violet-50"
+                )}
               >
-                ×
-              </button>
-            </div>
-          </motion.div>
-        )}
+                <Upload
+                  className={cn(
+                    "h-7 w-7 transition-colors duration-300",
+                    isDragging ? "text-indigo-600" : "text-slate-400 group-hover:text-indigo-500"
+                  )}
+                />
+              </motion.div>
+
+              <div className="text-center">
+                <p className="text-lg font-semibold text-slate-700 mb-1">
+                  {isDragging ? "Drop your file here" : "Drop your file here, or browse"}
+                </p>
+                <p className="text-sm text-slate-400">
+                  Supports PDF, PNG, JPG, TIFF, DOCX up to 50MB
+                </p>
+              </div>
 
-        {/* Processing Status */}
-        {(isProcessing || isComplete) && (
-          <div className="max-w-3xl mx-auto mb-4">
-            <ProcessingStatus
-              isProcessing={isProcessing}
-              isComplete={isComplete}
-              currentStage={processingStage}
-            />
-          </div>
-        )}
+              <div className="flex items-center gap-2 mt-6">
+                <div className="flex -space-x-1">
+                  {[
+                    "bg-red-100 text-red-600",
+                    "bg-blue-100 text-blue-600",
+                    "bg-green-100 text-green-600",
+                    "bg-amber-100 text-amber-600",
+                  ].map((color, i) => (
+                    <div
+                      key={i}
+                      className={`h-8 w-8 rounded-lg ${color.split(" ")[0]} flex items-center justify-center border-2 border-white`}
+                    >
+                      <FileText className={`h-4 w-4 ${color.split(" ")[1]}`} />
+                    </div>
+                  ))}
+                </div>
+                <span className="text-xs text-slate-400 ml-2">Multiple formats supported</span>
+              </div>
 
-        {/* Split View */}
-        {selectedFile && (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2 }}
-            className="grid grid-cols-1 lg:grid-cols-2 gap-4"
-            style={{ height: "calc(100vh - 320px)", minHeight: "450px" }}
-          >
-            <DocumentPreview file={selectedFile} isProcessing={isProcessing} />
-            <ExtractionOutput
-              hasFile={!!selectedFile}
-              isProcessing={isProcessing}
-              isComplete={isComplete}
-              extractionResult={extractionResult}
-            />
-          </motion.div>
-        )}
+              <input
+                type="file"
+                className="hidden"
+                accept=".pdf,.png,.jpg,.jpeg,.tiff,.docx,.xlsx"
+                onChange={(e) => e.target.files[0] && onFileSelect(e.target.files[0])}
+              />
+            </label>
 
-        {/* Empty State Features */}
-        {!selectedFile && (
+            {/* Decorative gradient border on hover */}
+            <div className="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-r from-indigo-500 via-violet-500 to-purple-500 opacity-0 group-hover:opacity-10 blur-xl transition-opacity duration-500" />
+          </motion.div>
+        ) : (
           <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ delay: 0.3 }}
-            className="max-w-5xl mx-auto mt-12"
+            key="selected"
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            className="grid grid-cols-1 lg:grid-cols-2 gap-3"
           >
-            <div className="text-center mb-10">
-              <h2 className="text-2xl font-bold text-slate-900 mb-2">
-                Powered by Advanced AI
-              </h2>
-              <p className="text-slate-500">
-                Extract structured data from any document
-              </p>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              {[
-                {
-                  icon: Zap,
-                  title: "Lightning Fast",
-                  description:
-                    "Process documents faster with our optimized AI pipeline",
-                  color: "amber",
-                },
-                {
-                  icon: Sparkles,
-                  title: `${stats.averageAccuracy > 0 ? stats.averageAccuracy : "98.5"}% Accuracy`,
-                  description:
-                    "Industry-leading extraction accuracy",
-                  color: "indigo",
-                },
-                {
-                  icon: Clock,
-                  title: "Any Format",
-                  description:
-                    "Support for PDF, images, spreadsheets, and scanned documents",
-                  color: "emerald",
-                },
-              ].map((feature, index) => (
-                <motion.div
-                  key={feature.title}
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.4 + index * 0.1 }}
-                  className="group bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-xl hover:shadow-slate-200/50 transition-all duration-300 hover:-translate-y-1"
-                >
-                  <div
-                    className={`h-12 w-12 rounded-xl bg-${feature.color}-50 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}
-                  >
-                    <feature.icon
-                      className={`h-6 w-6 text-${feature.color}-600`}
-                    />
+            {/* File Info Box */}
+            <div className="relative bg-gradient-to-br from-indigo-50 to-violet-50 rounded-xl p-3 border border-indigo-100">
+              <div className="flex items-center gap-3">
+                <div className="h-10 w-10 rounded-lg bg-white shadow-sm flex items-center justify-center flex-shrink-0">
+                  <FileIcon className="h-5 w-5 text-indigo-600" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium text-slate-800 truncate text-sm">{selectedFile.name}</p>
+                  <div className="flex items-center gap-2 text-xs text-slate-500">
+                    <span>{(selectedFile.size / 1024 / 1024).toFixed(2)} MB</span>
+                    <span className="text-indigo-500">•</span>
+                    <span className="text-indigo-600 flex items-center gap-1">
+                      <Sparkles className="h-3 w-3" />
+                      Ready for extraction
+                    </span>
                   </div>
-                  <h3 className="font-semibold text-slate-900 mb-2">
-                    {feature.title}
-                  </h3>
-                  <p className="text-sm text-slate-500 leading-relaxed">
-                    {feature.description}
-                  </p>
-                </motion.div>
-              ))}
+                </div>
+                <button
+                  onClick={onClear}
+                  className="h-8 w-8 rounded-lg bg-white hover:bg-red-50 border border-slate-200 hover:border-red-200 flex items-center justify-center text-slate-400 hover:text-red-500 transition-colors"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
             </div>
 
-            {/* Supported Formats */}
-            <div className="mt-12 text-center">
-              <p className="text-xs text-slate-400 uppercase tracking-wider mb-4 font-medium">
-                Supported Formats
-              </p>
-              <div className="flex items-center justify-center gap-6 flex-wrap">
-                {["PDF", "PNG", "JPG", "TIFF", "DOCX", "XLSX"].map((format) => (
-                  <div
-                    key={format}
-                    className="flex items-center gap-2 text-slate-400"
-                  >
-                    <FileText className="h-4 w-4" />
-                    <span className="text-sm font-medium">{format}</span>
-                  </div>
-                ))}
-              </div>
+            {/* Key Fields Box */}
+            <div className="relative bg-white rounded-xl p-3 border border-slate-200">
+              <label className="block text-xs font-medium text-slate-600 mb-1.5">
+                Key fields if required
+              </label>
+              <Input
+                type="text"
+                value={keyFields || ""}
+                onChange={(e) => {
+                  if (onKeyFieldsChange) {
+                    onKeyFieldsChange(e.target.value);
+                  }
+                }}
+                placeholder="Invoice Number, Invoice Date, PO Number, Supplier Name, Total Amount, Payment terms, Additional Notes"
+                className="h-8 text-xs border-slate-200 focus:border-indigo-300 focus:ring-indigo-200"
+              />
             </div>
           </motion.div>
         )}
-      </div>
+      </AnimatePresence>
     </div>
   );
 }