Update frontend/src/pages/History.jsx

frontend/src/pages/History.jsx

@@ -1,12 +1,871 @@
-import React from "react";
+// frontend/src/pages/History.jsx
+
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  FileText,
+  Clock,
+  CheckCircle2,
+  ChevronRight,
+  Download,
+  Eye,
+  Trash2,
+  Search,
+  Filter,
+  Calendar,
+  Upload,
+  Cpu,
+  TableProperties,
+  MonitorPlay,
+  TrendingUp,
+  TrendingDown,
+  Minus,
+  AlertCircle,
+  X,
+  FileSpreadsheet,
+  Table2,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+// minimal “toast”
+const toastSuccess = (msg) => {
+  console.log(msg);
+};
+
+// Mock history data with detailed timing
+const mockHistory = [
+  {
+    id: 1,
+    fileName: "Invoice_Acme_Corp_2024.pdf",
+    fileType: "PDF",
+    fileSize: "2.4 MB",
+    extractedAt: "2024-01-15T14:32:00",
+    status: "completed",
+    confidence: 98.5,
+    fieldsExtracted: 25,
+    totalTime: 2847,
+    stages: {
+      uploading: { time: 342, status: "completed", variation: "normal" },
+      aiAnalysis: { time: 1523, status: "completed", variation: "normal" },
+      dataExtraction: { time: 756, status: "completed", variation: "fast" },
+      outputRendering: { time: 226, status: "completed", variation: "normal" },
+    },
+  },
+  {
+    id: 2,
+    fileName: "Contract_Agreement_v2.docx",
+    fileType: "DOCX",
+    fileSize: "1.8 MB",
+    extractedAt: "2024-01-15T12:15:00",
+    status: "completed",
+    confidence: 96.2,
+    fieldsExtracted: 42,
+    totalTime: 3421,
+    stages: {
+      uploading: { time: 289, status: "completed", variation: "fast" },
+      aiAnalysis: { time: 2134, status: "completed", variation: "slow" },
+      dataExtraction: { time: 812, status: "completed", variation: "normal" },
+      outputRendering: { time: 186, status: "completed", variation: "fast" },
+    },
+  },
+  {
+    id: 3,
+    fileName: "Receipt_Amazon_Jan15.jpg",
+    fileType: "JPG",
+    fileSize: "856 KB",
+    extractedAt: "2024-01-15T10:45:00",
+    status: "completed",
+    confidence: 99.1,
+    fieldsExtracted: 12,
+    totalTime: 1893,
+    stages: {
+      uploading: { time: 156, status: "completed", variation: "fast" },
+      aiAnalysis: { time: 1245, status: "completed", variation: "normal" },
+      dataExtraction: { time: 367, status: "completed", variation: "fast" },
+      outputRendering: { time: 125, status: "completed", variation: "fast" },
+    },
+  },
+  {
+    id: 4,
+    fileName: "Financial_Report_Q4.xlsx",
+    fileType: "XLSX",
+    fileSize: "4.2 MB",
+    extractedAt: "2024-01-14T16:20:00",
+    status: "completed",
+    confidence: 94.8,
+    fieldsExtracted: 156,
+    totalTime: 5632,
+    stages: {
+      uploading: { time: 567, status: "completed", variation: "slow" },
+      aiAnalysis: { time: 3245, status: "completed", variation: "slow" },
+      dataExtraction: { time: 1456, status: "completed", variation: "slow" },
+      outputRendering: { time: 364, status: "completed", variation: "normal" },
+    },
+  },
+  {
+    id: 5,
+    fileName: "Scan_Document_001.png",
+    fileType: "PNG",
+    fileSize: "3.1 MB",
+    extractedAt: "2024-01-14T09:30:00",
+    status: "failed",
+    confidence: 0,
+    fieldsExtracted: 0,
+    totalTime: 2156,
+    stages: {
+      uploading: { time: 423, status: "completed", variation: "normal" },
+      aiAnalysis: { time: 1733, status: "failed", variation: "error" },
+      dataExtraction: { time: 0, status: "skipped", variation: "skipped" },
+      outputRendering: { time: 0, status: "skipped", variation: "skipped" },
+    },
+    errorMessage: "Unable to detect text in image. Image quality too low.",
+  },
+];
+
+const stageConfig = {
+  uploading: { label: "Uploading", icon: Upload, color: "blue" },
+  aiAnalysis: { label: "AI Analysis", icon: Cpu, color: "violet" },
+  dataExtraction: { label: "Data Extraction", icon: TableProperties, color: "emerald" },
+  outputRendering: { label: "Output Rendering", icon: MonitorPlay, color: "amber" },
+};
+
+const variationConfig = {
+  fast: { icon: TrendingDown, color: "text-emerald-500", label: "Faster than avg" },
+  normal: { icon: Minus, color: "text-slate-400", label: "Normal" },
+  slow: { icon: TrendingUp, color: "text-amber-500", label: "Slower than avg" },
+  error: { icon: AlertCircle, color: "text-red-500", label: "Error" },
+  skipped: { icon: Minus, color: "text-slate-300", label: "Skipped" },
+};
 
 export default function History() {
+  const [searchQuery, setSearchQuery] = useState("");
+  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 matchesStatus = selectedStatus === "all" || item.status === selectedStatus;
+    return matchesSearch && matchesStatus;
+  });
+
+  const formatTime = (ms) => {
+    if (ms >= 1000) {
+      return `${(ms / 1000).toFixed(2)}s`;
+    }
+    return `${ms}ms`;
+  };
+
+  const formatTimeForExport = (ms) => {
+    return ms >= 1000 ? `${(ms / 1000).toFixed(2)}s` : `${ms}ms`;
+  };
+
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const formatDateForExport = (dateString) => {
+    const date = new Date(dateString);
+    return date.toISOString().replace("T", " ").slice(0, 19);
+  };
+
+  const generateCSV = (data) => {
+    const headers = [
+      "File Name",
+      "File Type",
+      "File Size",
+      "Extracted At",
+      "Status",
+      "Confidence (%)",
+      "Fields Extracted",
+      "Total Time (ms)",
+      "Upload Time (ms)",
+      "Upload Status",
+      "Upload Variation",
+      "AI Analysis Time (ms)",
+      "AI Analysis Status",
+      "AI Analysis Variation",
+      "Data Extraction Time (ms)",
+      "Data Extraction Status",
+      "Data Extraction Variation",
+      "Output Rendering Time (ms)",
+      "Output Rendering Status",
+      "Output Rendering Variation",
+      "Error Message",
+    ];
+
+    const rows = data.map((item) => [
+      item.fileName,
+      item.fileType,
+      item.fileSize,
+      formatDateForExport(item.extractedAt),
+      item.status,
+      item.confidence,
+      item.fieldsExtracted,
+      item.totalTime,
+      item.stages.uploading.time,
+      item.stages.uploading.status,
+      item.stages.uploading.variation,
+      item.stages.aiAnalysis.time,
+      item.stages.aiAnalysis.status,
+      item.stages.aiAnalysis.variation,
+      item.stages.dataExtraction.time,
+      item.stages.dataExtraction.status,
+      item.stages.dataExtraction.variation,
+      item.stages.outputRendering.time,
+      item.stages.outputRendering.status,
+      item.stages.outputRendering.variation,
+      item.errorMessage || "",
+    ]);
+
+    const csvContent = [
+      headers.join(","),
+      ...rows.map((row) => row.map((cell) => `"${cell}"`).join(",")),
+    ].join("\n");
+
+    return csvContent;
+  };
+
+  const downloadFile = (content, fileName, mimeType) => {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleExportCSV = () => {
+    setIsExporting(true);
+    setTimeout(() => {
+      const csvContent = generateCSV(filteredHistory);
+      downloadFile(
+        csvContent,
+        `extraction_history_${new Date().toISOString().slice(0, 10)}.csv`,
+        "text/csv;charset=utf-8;"
+      );
+      toastSuccess("CSV exported successfully");
+      setIsExporting(false);
+    }, 500);
+  };
+
+  const generateExcelXML = (data) => {
+    const headers = [
+      "File Name",
+      "File Type",
+      "File Size",
+      "Extracted At",
+      "Status",
+      "Confidence (%)",
+      "Fields Extracted",
+      "Total Time (ms)",
+      "Upload Time (ms)",
+      "Upload Status",
+      "Upload Variation",
+      "AI Analysis Time (ms)",
+      "AI Analysis Status",
+      "AI Analysis Variation",
+      "Data Extraction Time (ms)",
+      "Data Extraction Status",
+      "Data Extraction Variation",
+      "Output Rendering Time (ms)",
+      "Output Rendering Status",
+      "Output Rendering Variation",
+      "Error Message",
+    ];
+
+    const rows = data.map((item) => [
+      item.fileName,
+      item.fileType,
+      item.fileSize,
+      formatDateForExport(item.extractedAt),
+      item.status,
+      item.confidence,
+      item.fieldsExtracted,
+      item.totalTime,
+      item.stages.uploading.time,
+      item.stages.uploading.status,
+      item.stages.uploading.variation,
+      item.stages.aiAnalysis.time,
+      item.stages.aiAnalysis.status,
+      item.stages.aiAnalysis.variation,
+      item.stages.dataExtraction.time,
+      item.stages.dataExtraction.status,
+      item.stages.dataExtraction.variation,
+      item.stages.outputRendering.time,
+      item.stages.outputRendering.status,
+      item.stages.outputRendering.variation,
+      item.errorMessage || "",
+    ]);
+
+    let xml = `<?xml version="1.0" encoding="UTF-8"?>
+<?mso-application progid="Excel.Sheet"?>
+<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
+ xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
+<Worksheet ss:Name="Extraction History">
+<Table>
+<Row>`;
+
+    headers.forEach((header) => {
+      xml += `<Cell><Data ss:Type="String">${header}</Data></Cell>`;
+    });
+    xml += `</Row>`;
+
+    rows.forEach((row) => {
+      xml += `<Row>`;
+      row.forEach((cell) => {
+        const type = typeof cell === "number" ? "Number" : "String";
+        xml += `<Cell><Data ss:Type="${type}">${cell}</Data></Cell>`;
+      });
+      xml += `</Row>`;
+    });
+
+    xml += `</Table></Worksheet></Workbook>`;
+    return xml;
+  };
+
+  const handleExportExcel = () => {
+    setIsExporting(true);
+    setTimeout(() => {
+      const excelContent = generateExcelXML(filteredHistory);
+      downloadFile(
+        excelContent,
+        `extraction_history_${new Date().toISOString().slice(0, 10)}.xls`,
+        "application/vnd.ms-excel"
+      );
+      toastSuccess("Excel file exported successfully");
+      setIsExporting(false);
+    }, 500);
+  };
+
+  const handleExportSingleReport = (item, format) => {
+    if (format === "csv") {
+      const csvContent = generateCSV([item]);
+      downloadFile(
+        csvContent,
+        `${item.fileName.replace(/\.[^/.]+$/, "")}_report.csv`,
+        "text/csv;charset=utf-8;"
+      );
+      toastSuccess("Report exported as CSV");
+    } else {
+      const excelContent = generateExcelXML([item]);
+      downloadFile(
+        excelContent,
+        `${item.fileName.replace(/\.[^/.]+$/, "")}_report.xls`,
+        "application/vnd.ms-excel"
+      );
+      toastSuccess("Report exported as Excel");
+    }
+  };
+
   return (
-    <div className="min-h-screen bg-[#FAFAFA] p-8">
-      <h1 className="text-xl font-bold text-slate-900 mb-2">Extraction History</h1>
-      <p className="text-sm text-slate-500">
-        This is a placeholder. Next step, we’ll plug in your full Base44 History UI here.
-      </p>
+    <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">
+          <h1 className="text-xl font-bold text-slate-900 tracking-tight">
+            Extraction History
+          </h1>
+          <p className="text-sm text-slate-500 mt-0.5">
+            View detailed reports and performance metrics for all extractions
+          </p>
+        </div>
+      </header>
+
+      {/* Content */}
+      <div className="p-8">
+        {/* Filters */}
+        <div className="flex items-center gap-4 mb-6">
+          <div className="relative flex-1 max-w-md">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+            <Input
+              placeholder="Search by file name..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10 h-11 rounded-xl border-slate-200"
+            />
+          </div>
+          <Select
+            value={selectedStatus}
+            onValueChange={(value) => setSelectedStatus(value)}
+          >
+            <SelectTrigger className="w-40 h-11 rounded-xl border-slate-200">
+              <Filter className="h-4 w-4 mr-2 text-slate-400" />
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Status</SelectItem>
+              <SelectItem value="completed">Completed</SelectItem>
+              <SelectItem value="failed">Failed</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Export All Button */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                className="h-11 px-4 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 shadow-lg shadow-indigo-500/25"
+                disabled={isExporting || filteredHistory.length === 0}
+              >
+                {isExporting ? (
+                  <motion.div
+                    animate={{ rotate: 360 }}
+                    transition={{
+                      duration: 1,
+                      repeat: Infinity,
+                      ease: "linear",
+                    }}
+                    className="mr-2"
+                  >
+                    <Download className="h-4 w-4" />
+                  </motion.div>
+                ) : (
+                  <Download className="h-4 w-4 mr-2" />
+                )}
+                Export All
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              className="w-48 rounded-xl p-2"
+            >
+              <DropdownMenuItem
+                className="rounded-lg cursor-pointer"
+                onClick={handleExportCSV}
+              >
+                <Table2 className="h-4 w-4 mr-2 text-emerald-600" />
+                Export as CSV
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="rounded-lg cursor-pointer"
+                onClick={handleExportExcel}
+              >
+                <FileSpreadsheet className="h-4 w-4 mr-2 text-green-600" />
+                Export as Excel
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <div className="px-2 py-1.5 text-xs text-slate-500">
+                {filteredHistory.length} records will be exported
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* 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) => (
+            <motion.div
+              key={stat.label}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+              className="bg-white rounded-2xl border border-slate-200 p-5"
+            >
+              <p className="text-sm text-slate-500 mb-1">{stat.label}</p>
+              <p className="text-2xl font-bold text-slate-900">{stat.value}</p>
+              <p className={`text-xs text-${stat.color}-600 mt-1`}>
+                {stat.change}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+
+        {/* History List */}
+        <div className="space-y-4">
+          {filteredHistory.map((item, index) => (
+            <motion.div
+              key={item.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+              className="bg-white rounded-2xl border border-slate-200 overflow-hidden"
+            >
+              {/* Main Row */}
+              <div
+                className="p-5 cursor-pointer hover:bg-slate-50/50 transition-colors"
+                onClick={() =>
+                  setExpandedReport(
+                    expandedReport === item.id ? null : item.id
+                  )
+                }
+              >
+                <div className="flex items-center gap-4">
+                  {/* File Icon */}
+                  <div
+                    className={cn(
+                      "h-12 w-12 rounded-xl flex items-center justify-center",
+                      item.status === "completed" ? "bg-indigo-50" : "bg-red-50"
+                    )}
+                  >
+                    <FileText
+                      className={cn(
+                        "h-6 w-6",
+                        item.status === "completed"
+                          ? "text-indigo-600"
+                          : "text-red-500"
+                      )}
+                    />
+                  </div>
+
+                  {/* File Info */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-semibold text-slate-900 truncate">
+                        {item.fileName}
+                      </h3>
+                      <Badge variant="secondary" className="text-xs">
+                        {item.fileType}
+                      </Badge>
+                    </div>
+                    <div className="flex items-center gap-4 mt-1 text-sm text-slate-500">
+                      <span>{item.fileSize}</span>
+                      <span className="flex items-center gap-1">
+                        <Calendar className="h-3 w-3" />
+                        {formatDate(item.extractedAt)}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Stats */}
+                  <div className="hidden md:flex items-center gap-6">
+                    <div className="text-center">
+                      <p className="text-xs text-slate-400">Time</p>
+                      <p className="font-semibold text-slate-700">
+                        {formatTime(item.totalTime)}
+                      </p>
+                    </div>
+                    <div className="text-center">
+                      <p className="text-xs text-slate-400">Fields</p>
+                      <p className="font-semibold text-slate-700">
+                        {item.fieldsExtracted}
+                      </p>
+                    </div>
+                    <div className="text-center">
+                      <p className="text-xs text-slate-400">Confidence</p>
+                      <p
+                        className={cn(
+                          "font-semibold",
+                          item.confidence >= 95
+                            ? "text-emerald-600"
+                            : item.confidence >= 90
+                            ? "text-amber-600"
+                            : "text-red-600"
+                        )}
+                      >
+                        {item.confidence > 0 ? `${item.confidence}%` : "-"}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Status & Actions */}
+                  <div className="flex items-center gap-3">
+                    <Badge
+                      className={cn(
+                        "capitalize",
+                        item.status === "completed"
+                          ? "bg-emerald-50 text-emerald-700 border-emerald-200"
+                          : "bg-red-50 text-red-700 border-red-200"
+                      )}
+                    >
+                      {item.status === "completed" ? (
+                        <CheckCircle2 className="h-3 w-3 mr-1" />
+                      ) : (
+                        <AlertCircle className="h-3 w-3 mr-1" />
+                      )}
+                      {item.status}
+                    </Badge>
+                    <ChevronRight
+                      className={cn(
+                        "h-5 w-5 text-slate-400 transition-transform",
+                        expandedReport === item.id && "rotate-90"
+                      )}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Expanded Report */}
+              <AnimatePresence>
+                {expandedReport === item.id && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                    className="overflow-hidden"
+                  >
+                    <div className="px-5 pb-5 pt-2 border-t border-slate-100">
+                      {/* Error Message */}
+                      {item.errorMessage && (
+                        <div className="mb-4 p-4 bg-red-50 border border-red-100 rounded-xl">
+                          <div className="flex items-center gap-2 text-red-700">
+                            <AlertCircle className="h-4 w-4" />
+                            <span className="font-medium">Error Details</span>
+                          </div>
+                          <p className="text-sm text-red-600 mt-1">
+                            {item.errorMessage}
+                          </p>
+                        </div>
+                      )}
+
+                      {/* Performance Report Header */}
+                      <div className="flex items-center justify-between mb-4">
+                        <h4 className="font-semibold text-slate-800">
+                          Performance Report
+                        </h4>
+                        <div className="flex items-center gap-2">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 text-xs"
+                          >
+                            <Eye className="h-3 w-3 mr-1" />
+                            View Output
+                          </Button>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                className="h-8 text-xs"
+                              >
+                                <Download className="h-3 w-3 mr-1" />
+                                Export Report
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent
+                              align="end"
+                              className="w-44 rounded-xl p-2"
+                            >
+                              <DropdownMenuItem
+                                className="rounded-lg cursor-pointer text-xs"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleExportSingleReport(item, "csv");
+                                }}
+                              >
+                                <Table2 className="h-3 w-3 mr-2 text-emerald-600" />
+                                Download CSV
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                className="rounded-lg cursor-pointer text-xs"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleExportSingleReport(item, "excel");
+                                }}
+                              >
+                                <FileSpreadsheet className="h-3 w-3 mr-2 text-green-600" />
+                                Download Excel
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                      </div>
+
+                      {/* Stage Timing Cards */}
+                      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                        {Object.entries(item.stages).map(
+                          ([stageKey, stageData]) => {
+                            const config = stageConfig[stageKey];
+                            const variationInfo =
+                              variationConfig[stageData.variation];
+                            const Icon = config.icon;
+                            const VariationIcon = variationInfo.icon;
+
+                            return (
+                              <div
+                                key={stageKey}
+                                className={cn(
+                                  "relative p-4 rounded-xl border",
+                                  stageData.status === "completed"
+                                    ? "bg-slate-50 border-slate-200"
+                                    : stageData.status === "failed"
+                                    ? "bg-red-50 border-red-200"
+                                    : "bg-slate-50/50 border-slate-100"
+                                )}
+                              >
+                                <div className="flex items-center gap-2 mb-3">
+                                  <div
+                                    className={cn(
+                                      "h-8 w-8 rounded-lg flex items-center justify-center",
+                                      `bg-${config.color}-100`
+                                    )}
+                                  >
+                                    <Icon
+                                      className={cn(
+                                        "h-4 w-4",
+                                        `text-${config.color}-600`
+                                      )}
+                                    />
+                                  </div>
+                                  <span className="text-sm font-medium text-slate-700">
+                                    {config.label}
+                                  </span>
+                                </div>
+
+                                <div className="flex items-end justify-between">
+                                  <div>
+                                    <p
+                                      className={cn(
+                                        "text-2xl font-bold",
+                                        stageData.status === "skipped"
+                                          ? "text-slate-300"
+                                          : stageData.status === "failed"
+                                          ? "text-red-600"
+                                          : "text-slate-900"
+                                      )}
+                                    >
+                                      {stageData.status === "skipped"
+                                        ? "-"
+                                        : formatTime(stageData.time)}
+                                    </p>
+                                    {stageData.status !== "skipped" && (
+                                      <div className="flex items-center gap-1 mt-1">
+                                        <VariationIcon
+                                          className={cn(
+                                            "h-3 w-3",
+                                            variationInfo.color
+                                          )}
+                                        />
+                                        <span
+                                          className={cn(
+                                            "text-xs",
+                                            variationInfo.color
+                                          )}
+                                        >
+                                          {variationInfo.label}
+                                        </span>
+                                      </div>
+                                    )}
+                                  </div>
+
+                                  {stageData.status === "completed" && (
+                                    <CheckCircle2 className="h-5 w-5 text-emerald-500" />
+                                  )}
+                                  {stageData.status === "failed" && (
+                                    <X className="h-5 w-5 text-red-500" />
+                                  )}
+                                </div>
+
+                                {/* Progress bar */}
+                                <div className="mt-3 h-1.5 bg-slate-200 rounded-full overflow-hidden">
+                                  <motion.div
+                                    initial={{ width: 0 }}
+                                    animate={{
+                                      width:
+                                        stageData.status === "completed"
+                                          ? "100%"
+                                          : stageData.status === "failed"
+                                          ? "60%"
+                                          : "0%",
+                                    }}
+                                    transition={{ duration: 0.5, delay: 0.2 }}
+                                    className={cn(
+                                      "h-full rounded-full",
+                                      stageData.status === "failed"
+                                        ? "bg-red-500"
+                                        : `bg-${config.color}-500`
+                                    )}
+                                  />
+                                </div>
+                              </div>
+                            );
+                          }
+                        )}
+                      </div>
+
+                      {/* Total Time Summary */}
+                      <div className="mt-4 flex items-center justify-between p-4 bg-gradient-to-r from-indigo-50 to-violet-50 rounded-xl border border-indigo-100">
+                        <div className="flex items-center gap-3">
+                          <Clock className="h-5 w-5 text-indigo-600" />
+                          <div>
+                            <p className="text-sm font-medium text-slate-700">
+                              Total Processing Time
+                            </p>
+                            <p className="text-xs text-slate-500">
+                              From upload to output ready
+                            </p>
+                          </div>
+                        </div>
+                        <div className="text-right">
+                          <p className="text-2xl font-bold text-indigo-600">
+                            {formatTime(item.totalTime)}
+                          </p>
+                          <p className="text-xs text-slate-500">
+                            {item.status === "completed"
+                              ? "Completed successfully"
+                              : "Process failed"}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </motion.div>
+          ))}
+        </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" />
+            </div>
+            <p className="text-slate-500">No extractions found</p>
+          </div>
+        )}
+      </div>
     </div>
   );
 }