From 3d7f4d12d24bbbe8ef93ecb0d96a9101ac66a397 Mon Sep 17 00:00:00 2001
From: Eric Lay <ericlay@noreply.ericlay.online>
Date: Wed, 11 Mar 2026 08:50:40 -0500
Subject: [PATCH] Add src/pages/Dashboard.jsx

---
 src/pages/Dashboard.jsx | 133 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 src/pages/Dashboard.jsx

diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
new file mode 100644
index 0000000..8d50d7c
--- /dev/null
+++ b/src/pages/Dashboard.jsx
@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from "react";
+import { createPageUrl } from "@/utils";
+import ActivationPending from "@/components/onboarding/ActivationPending";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { RefreshCw } from "lucide-react";
+import Sidebar from "@/components/dashboard/Sidebar";
+import TopBar from "@/components/dashboard/TopBar";
+import ActivityCard from "@/components/dashboard/ActivityCard";
+import FinancialCard from "@/components/dashboard/FinancialCard";
+import ComplianceCard from "@/components/dashboard/ComplianceCard";
+import GuidedTour from "@/components/dashboard/GuidedTour";
+
+export default function Dashboard() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const isFirstLogin = urlParams.get("first_login") === "true";
+  const demoUnverified = urlParams.get("demo_unverified") === "true";
+
+  const [showTour, setShowTour] = useState(false);
+  const [userData, setUserData] = useState(null);
+  const [blocked, setBlocked] = useState(false);
+
+  useEffect(() => {
+    // Simulate unverified user for demo testing
+    if (demoUnverified) {
+      setBlocked(true);
+      return;
+    }
+
+    // Load demo user from session
+    const stored = sessionStorage.getItem("demo_user");
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      if (parsed.is_activated === false) {
+        setBlocked(true);
+        return;
+      }
+      setUserData(parsed);
+    } else {
+      // Default demo data
+      setUserData({
+        full_name: "Radoslav Nedyalkov",
+        email: "Eric@rscentral.org",
+        store_id: "AA1112",
+        store_name: "Radi Box N Ship",
+      });
+    }
+
+    if (isFirstLogin) {
+      const timer = setTimeout(() => setShowTour(true), 800);
+      return () => clearTimeout(timer);
+    }
+  }, [isFirstLogin, demoUnverified]);
+
+  const blockedEmail = (() => {
+    const stored = sessionStorage.getItem("demo_user");
+    if (stored) return JSON.parse(stored).email || "your email address";
+    return "Eric@rscentral.org";
+  })();
+
+  if (blocked) {
+    return (
+      <div className="min-h-screen bg-[#f0f2f5] flex flex-col items-center justify-center px-4 gap-4">
+        <ActivationPending
+          email={blockedEmail}
+          autoStart={false}
+          onResend={async () => {
+            await new Promise((r) => setTimeout(r, 800));
+          }}
+        />
+
+      </div>
+    );
+  }
+
+  const handleTourComplete = () => {
+    setShowTour(false);
+    // Mark tour as completed
+    if (userData) {
+      const updated = { ...userData, first_login_completed: true };
+      sessionStorage.setItem("demo_user", JSON.stringify(updated));
+    }
+    // Navigate to Stripe
+    window.location.href = createPageUrl("StripeConnect");
+  };
+
+  return (
+    <div className="flex min-h-screen bg-[#f0f2f5]">
+      <Sidebar activePage="Dashboard" />
+
+      <div className="flex-1 ml-[220px]">
+        <TopBar breadcrumb="Financial Dashboard" userData={userData} />
+
+        <main id="dashboard-main" className="p-6">
+          {/* Title */}
+          <div className="mb-6">
+            <h1 className="text-2xl font-bold text-gray-900">
+              FedEx Easy Returns - Performance Dashboard
+            </h1>
+            <div className="flex items-center gap-3 mt-3">
+              <span className="text-xs font-bold text-gray-700 uppercase tracking-wider">Time Period:</span>
+              <Select defaultValue="this_month">
+                <SelectTrigger className="w-40 h-9 rounded-lg">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="this_month">This Month</SelectItem>
+                  <SelectItem value="last_month">Last Month</SelectItem>
+                  <SelectItem value="this_year">This Year</SelectItem>
+                </SelectContent>
+              </Select>
+              <Button size="sm" className="bg-[#3498db] hover:bg-[#2980b9] rounded-lg h-9 w-9 p-0">
+                <RefreshCw className="w-4 h-4" />
+              </Button>
+            </div>
+            <p className="text-xs text-gray-400 mt-2">Mar 01, 2026 – Mar 07, 2026</p>
+          </div>
+
+          {/* Cards */}
+          <div className="space-y-5">
+            <ActivityCard />
+            <FinancialCard />
+            <ComplianceCard />
+          </div>
+        </main>
+      </div>
+
+      {/* Guided Tour Overlay */}
+      {showTour && <GuidedTour onComplete={handleTourComplete} />}
+
+    </div>
+  );
+}
\ No newline at end of file