Update frontend/src/pages/History.jsx

frontend/src/pages/History.jsx

@@ -1,6 +1,6 @@
 // frontend/src/pages/History.jsx
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import {
   FileText,
@@ -43,14 +43,14 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import { getHistory } from "@/services/api";
 
-// minimal “toast”
+// minimal "toast"
 const toastSuccess = (msg) => {
   console.log(msg);
 };
 
-// Mock history data with detailed timing
-const mockHistory = [
+const stageConfig = {
   {
     id: 1,
     fileName: "Invoice_Acme_Corp_2024.pdf",
@@ -137,9 +137,7 @@ const mockHistory = [
     },
     errorMessage: "Unable to detect text in image. Image quality too low.",
   },
-];
-
-const stageConfig = {
+]; // Keep for fallback/initial state
   uploading: { label: "Uploading", icon: Upload, color: "blue" },
   aiAnalysis: { label: "AI Analysis", icon: Cpu, color: "violet" },
   dataExtraction: { label: "Data Extraction", icon: TableProperties, color: "emerald" },
@@ -159,9 +157,32 @@ export default function History() {
   const [selectedStatus, setSelectedStatus] = useState("all");
   const [expandedReport, setExpandedReport] = useState(null);
   const [isExporting, setIsExporting] = useState(false);
-
-  const filteredHistory = mockHistory.filter((item) => {
-    const matchesSearch = item.fileName.toLowerCase().includes(searchQuery.toLowerCase());
+  const [history, setHistory] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Fetch history on component mount
+  useEffect(() => {
+    const fetchHistory = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const data = await getHistory();
+        setHistory(data);
+      } catch (err) {
+        console.error("Failed to fetch history:", err);
+        setError(err.message || "Failed to load history");
+        setHistory([]); // Fallback to empty array
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchHistory();
+  }, []);
+
+  const filteredHistory = history.filter((item) => {
+    const matchesSearch = item.fileName?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false;
     const matchesStatus = selectedStatus === "all" || item.status === selectedStatus;
     return matchesSearch && matchesStatus;
   });
@@ -479,32 +500,41 @@ export default function History() {
 
         {/* Stats Overview */}
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-          {[
-            {
-              label: "Total Extractions",
-              value: "247",
-              change: "+12 today",
-              color: "indigo",
-            },
-            {
-              label: "Success Rate",
-              value: "98.5%",
-              change: "+0.3%",
-              color: "emerald",
-            },
-            {
-              label: "Avg. Processing Time",
-              value: "2.8s",
-              change: "-0.2s",
-              color: "violet",
-            },
-            {
-              label: "Fields Extracted",
-              value: "4,521",
-              change: "+156 today",
-              color: "amber",
-            },
-          ].map((stat, index) => (
+          {(() => {
+            const total = history.length;
+            const completed = history.filter((h) => h.status === "completed").length;
+            const successRate = total > 0 ? ((completed / total) * 100).toFixed(1) : 0;
+            const avgTime = history.length > 0
+              ? history.reduce((sum, h) => sum + (h.totalTime || 0), 0) / history.length
+              : 0;
+            const totalFields = history.reduce((sum, h) => sum + (h.fieldsExtracted || 0), 0);
+
+            return [
+              {
+                label: "Total Extractions",
+                value: total.toString(),
+                change: "",
+                color: "indigo",
+              },
+              {
+                label: "Success Rate",
+                value: `${successRate}%`,
+                change: total > 0 ? `${completed}/${total} successful` : "No data",
+                color: "emerald",
+              },
+              {
+                label: "Avg. Processing Time",
+                value: avgTime >= 1000 ? `${(avgTime / 1000).toFixed(1)}s` : `${Math.round(avgTime)}ms`,
+                change: "",
+                color: "violet",
+              },
+              {
+                label: "Fields Extracted",
+                value: totalFields.toLocaleString(),
+                change: "",
+                color: "amber",
+              },
+            ].map((stat, index) => (
             <motion.div
               key={stat.label}
               initial={{ opacity: 0, y: 20 }}
@@ -518,11 +548,27 @@ export default function History() {
                 {stat.change}
               </p>
             </motion.div>
-          ))}
+            ));
+          })()}
         </div>
 
+        {/* Loading State */}
+        {isLoading && (
+          <div className="text-center py-16">
+            <motion.div
+              animate={{ rotate: 360 }}
+              transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+              className="h-16 w-16 mx-auto rounded-2xl bg-indigo-100 flex items-center justify-center mb-4"
+            >
+              <Cpu className="h-8 w-8 text-indigo-600" />
+            </motion.div>
+            <p className="text-slate-500">Loading extraction history...</p>
+          </div>
+        )}
+
         {/* History List */}
-        <div className="space-y-4">
+        {!isLoading && (
+          <div className="space-y-4">
           {filteredHistory.map((item, index) => (
             <motion.div
               key={item.id}
@@ -857,12 +903,23 @@ export default function History() {
           ))}
         </div>
 
-        {filteredHistory.length === 0 && (
-          <div className="text-center py-16">
-            <div className="h-20 w-20 mx-auto rounded-2xl bg-slate-100 flex items-center justify-center mb-4">
-              <FileText className="h-10 w-10 text-slate-300" />
+          {filteredHistory.length === 0 && !error && (
+            <div className="text-center py-16">
+              <div className="h-20 w-20 mx-auto rounded-2xl bg-slate-100 flex items-center justify-center mb-4">
+                <FileText className="h-10 w-10 text-slate-300" />
+              </div>
+              <p className="text-slate-500 mb-2">
+                {history.length === 0
+                  ? "No extraction history yet"
+                  : "No extractions match your filters"}
+              </p>
+              {history.length === 0 && (
+                <p className="text-sm text-slate-400">
+                  Upload a document to get started
+                </p>
+              )}
             </div>
-            <p className="text-slate-500">No extractions found</p>
+          )}
           </div>
         )}
       </div>