Update frontend/src/pages/Dashboard.jsx

frontend/src/pages/Dashboard.jsx

@@ -2,37 +2,56 @@
 
 import React, { useState } from "react";
 import { motion } from "framer-motion";
-import { Sparkles, Zap, FileText, TrendingUp, Clock } from "lucide-react";
+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 } from "@/services/api";
 
 export default function Dashboard() {
   const [selectedFile, setSelectedFile] = useState(null);
   const [isProcessing, setIsProcessing] = useState(false);
   const [isComplete, setIsComplete] = useState(false);
+  const [extractionResult, setExtractionResult] = useState(null);
+  const [error, setError] = useState(null);
 
   const handleFileSelect = (file) => {
     setSelectedFile(file);
     setIsComplete(false);
+    setExtractionResult(null);
+    setError(null);
   };
 
   const handleClear = () => {
     setSelectedFile(null);
     setIsProcessing(false);
     setIsComplete(false);
+    setExtractionResult(null);
+    setError(null);
   };
 
-  const handleExtract = () => {
+  const handleExtract = async () => {
+    if (!selectedFile) return;
+
     setIsProcessing(true);
-    // For now we simulate processing. Later we'll call FastAPI.
-    setTimeout(() => {
-      setIsProcessing(false);
+    setIsComplete(false);
+    setError(null);
+    setExtractionResult(null);
+
+    try {
+      const result = await extractDocument(selectedFile);
+      setExtractionResult(result);
       setIsComplete(true);
-    }, 3000);
+    } catch (err) {
+      console.error("Extraction error:", err);
+      setError(err.message || "Failed to extract document. Please try again.");
+      setIsComplete(false);
+    } finally {
+      setIsProcessing(false);
+    }
   };
 
   return (
@@ -104,6 +123,29 @@ export default function Dashboard() {
           )}
         </motion.div>
 
+        {/* Error Message */}
+        {error && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="max-w-3xl mx-auto mb-6"
+          >
+            <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"
+              >
+                ×
+              </button>
+            </div>
+          </motion.div>
+        )}
+
         {/* Processing Status */}
         {(isProcessing || isComplete) && (
           <div className="max-w-4xl mx-auto mb-8">
@@ -128,6 +170,7 @@ export default function Dashboard() {
               hasFile={!!selectedFile}
               isProcessing={isProcessing}
               isComplete={isComplete}
+              extractionResult={extractionResult}
             />
           </motion.div>
         )}