From 51f13caa64991add4a2c7ade28277fb737e0c421 Mon Sep 17 00:00:00 2001
From: Satyam Rastogi <satyamrastogi302@gmail.com>
Date: Fri, 29 May 2026 19:05:08 +0530
Subject: [PATCH] feat(dashboard): add grounded company-wide Financial Overview
 cards + drill-down to admin dashboard

---
 src/pages/Dashboard.jsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 790d868..c161287 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -9,6 +9,8 @@ import {
 import { SpotlightCard } from '../components/SpotlightCard';
 import { config } from '../config/env';
 import { pipelineValue, pipelineFunnel, winRate, revenueSummary, stormAttribution } from '../data/selectors';
+import FinancialKPICards from '../components/owner/FinancialKPICards';
+import FinancialDetailsModal from '../components/owner/FinancialDetailsModal';
 
 // New Widget Imports
 import { RoofConditionChart } from '../components/dashboard/RoofConditionChart';
@@ -25,6 +27,7 @@ const Dashboard = () => {
     const { properties, meetings, projects, kanbanLeads, resolvePerson } = useMockStore();
     const { user } = useAuth();
     const [isLoading, setIsLoading] = useState(true);
+    const [financialModal, setFinancialModal] = useState(null);
 
     // Company-wide analytics (admin sees ALL projects + ALL kanbanLeads — no owner scoping)
     const analytics = useMemo(() => ({
@@ -208,6 +211,10 @@ const Dashboard = () => {
                             <span className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-white/5 px-2.5 py-1 rounded-full border border-zinc-200 dark:border-white/10">Admin View</span>
                         </div>
 
+                        {/* Financial Overview — grounded company-wide cards, click to drill into the real records */}
+                        <FinancialKPICards onCardClick={(id) => setFinancialModal(id)} />
+                        <FinancialDetailsModal isOpen={!!financialModal} onClose={() => setFinancialModal(null)} type={financialModal} />
+
                         {/* Row 1: Pipeline + Win Rate + Storm */}
                         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">