Add src/pages/Dashboard.jsx
This commit is contained in:
parent
e9dab789b8
commit
3d7f4d12d2
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue