Update frontend/src/pages/Dashboard.jsx

frontend/src/pages/Dashboard.jsx

@@ -1,12 +1,222 @@
-import React from "react";
+// frontend/src/pages/Dashboard.jsx
+
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { Sparkles, Zap, FileText, TrendingUp, Clock } 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";
 
 export default function Dashboard() {
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+
+  const handleFileSelect = (file) => {
+    setSelectedFile(file);
+    setIsComplete(false);
+  };
+
+  const handleClear = () => {
+    setSelectedFile(null);
+    setIsProcessing(false);
+    setIsComplete(false);
+  };
+
+  const handleExtract = () => {
+    setIsProcessing(true);
+    // For now we simulate processing. Later we'll call FastAPI.
+    setTimeout(() => {
+      setIsProcessing(false);
+      setIsComplete(true);
+    }, 3000);
+  };
+
   return (
-    <div className="min-h-screen bg-[#FAFAFA] p-8">
-      <h1 className="text-xl font-bold text-slate-900 mb-2">Document Extraction</h1>
-      <p className="text-sm text-slate-500">
-        This is a placeholder. Next step, we’ll plug in your full Base44 Dashboard 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 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">
+                  247 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">
+                  98.5% Accuracy
+                </span>
+              </div>
+            </div>
+
+            <ExportButtons isComplete={isComplete} />
+          </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-8"
+        >
+          <UploadZone
+            onFileSelect={handleFileSelect}
+            selectedFile={selectedFile}
+            onClear={handleClear}
+          />
+
+          {/* Extract Button */}
+          {selectedFile && !isProcessing && !isComplete && (
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="mt-6 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 AI Extraction
+                <Zap className="h-4 w-4 ml-2 opacity-70" />
+              </Button>
+            </motion.div>
+          )}
+        </motion.div>
+
+        {/* Processing Status */}
+        {(isProcessing || isComplete) && (
+          <div className="max-w-4xl mx-auto mb-8">
+            <ProcessingStatus
+              isProcessing={isProcessing}
+              isComplete={isComplete}
+            />
+          </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-6"
+            style={{ height: "calc(100vh - 420px)", minHeight: "500px" }}
+          >
+            <DocumentPreview file={selectedFile} isProcessing={isProcessing} />
+            <ExtractionOutput
+              hasFile={!!selectedFile}
+              isProcessing={isProcessing}
+              isComplete={isComplete}
+            />
+          </motion.div>
+        )}
+
+        {/* Empty State Features */}
+        {!selectedFile && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.3 }}
+            className="max-w-5xl mx-auto mt-12"
+          >
+            <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 in seconds
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {[
+                {
+                  icon: Zap,
+                  title: "Lightning Fast",
+                  description:
+                    "Process documents in under 3 seconds with our optimized AI pipeline",
+                  color: "amber",
+                },
+                {
+                  icon: Sparkles,
+                  title: "98.5% Accuracy",
+                  description:
+                    "Industry-leading extraction accuracy powered by GPT-4 Vision",
+                  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`}
+                    />
+                  </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>
+
+            {/* 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>
+            </div>
+          </motion.div>
+        )}
+      </div>
     </div>
   );
 }