Building Owner and Property Manager Screens are added

app/dashboard/layout.tsx

@@ -17,7 +17,7 @@ export default function DashboardLayout({
         {/* Shared Navbar */}
         <Navbar />
         
-        {/* The active page content renders here */}
+      
         <main className="flex-1 pl-68 bg-[#071321]">
           {children}
         </main>

app/dashboard/overview/buildingOwner/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+
+
+import BuildingOwnerPortal from "@/components/dashboard/buildingOwner";
+
+
+export default function OverViewDashboardPage() {
+  return (
+    
+
+        <div className="p-6">
+           <BuildingOwnerPortal/>
+        
+        </div>
+   
+  );
+}

app/dashboard/overview/dashboard/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Sidebar from "@/components/dashboard/sidebar";
+
 
 import OperationsDashboard from "@/components/dashboard/dashboard";
 

app/dashboard/overview/engagement/page.tsx

@@ -2,10 +2,6 @@
 
 import EngagementPage from "@/components/dashboard/engagement";
 
-
-
-
-
 export default function EngagementDashboard() {
   return (
     

app/dashboard/overview/propertyManager/page.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import PropertyManagerPortal from "@/components/dashboard/propertyManager";
+
+export default function EngagementDashboard() {
+  return (
+    
+
+        <div className="p-6">
+      <PropertyManagerPortal/>        
+        </div>
+   
+  );
+}

app/page.tsx

@@ -1,7 +1,10 @@
 import Image from "next/image";
+import OverViewDashboardPage from "./dashboard/overview/buildingOwner/page";
 
 export default function Home() {
   return (
-   <div>heelo</div>
+   <div>
+    <OverViewDashboardPage/>
+   </div>
   );
 }

components/auth/loginForm.tsx

@@ -38,13 +38,13 @@ export default function LoginForm({ onSuccess,onForgotPassword }: Props) {
    
   />
 
-  <button
+  <Button
-    type="button"
+   
     onClick={() => setShowPassword(!showPassword)}
     className="absolute right-4 top-[40px] text-slate-500 hover:text-slate-300"
   >
     {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-  </button>
+  </Button>
 </div>
       </div>
 

components/dashboard/buildingOwner.tsx

@@ -0,0 +1,112 @@
+
+import { Building2, ShieldCheck, Database, Leaf, FileSpreadsheet, Sparkles } from "lucide-react";
+import StatCard from "@/utils/dashStatCard"; 
+import {  energyData } from "@/constants/constant";
+import BarChart from "@/utils/barchart";
+import InfoBanner from "@/utils/infoBanner";
+import Button from "@/utils/button";
+import { ProgressBarRow } from "@/utils/progressBarRow";
+
+export default function BuildingOwnerPortal() {
+  // Mock data matching the screenshot chart (Jan - Jun)
+ 
+
+  return (
+    <div className="min-h-screen bg-[#060d18] text-slate-100 p-6 lg:p-10 font-sans antialiased selection:bg-teal-500/30">
+      
+      {/* ---  HEADER SECTION --- */}
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-8">
+        <div>
+          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
+            <span className="text-teal-400">Apple One — HQ Tower</span>
+            <span>•</span>
+            <span>Portal</span>
+            <span>•</span>
+            <span>Building Owner</span>
+          </div>
+          <h1 className="text-3xl font-extrabold text-white tracking-tight mt-2">
+            Building owner portal
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Portfolio-level benchmarking, property performance, energy-cost outlook and ESG standing for asset owners and investors.
+          </p>
+        </div>
+
+        {/* Action Button */}
+        <Button className="flex items-center gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538] rounded-xl text-xs font-semibold text-slate-200 transition-colors duration-200 shadow-sm self-start md:mt-6">
+          <FileSpreadsheet size={14} className="text-slate-400" />
+          Portfolio report
+        </Button>
+      </div>
+
+      {/* --- ROW 1: STATS GRID --- */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <StatCard 
+          variant="icon" title="Managed assets" value="8" icon={Building2} 
+          badgeText="2 sites" badgeClassName="text-slate-500 lowercase font-mono"
+          iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
+        />
+        <StatCard 
+          variant="icon" title="Asset availability" value="38%" icon={ShieldCheck} 
+          badgeText="SLA met" badgeClassName="text-emerald-400 font-sans normal-case"
+          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
+        />
+        <StatCard 
+          variant="icon" title="Energy cost / mo" value="₹11.8 L" icon={Database} 
+          badgeText="↓ vs avg" badgeClassName="text-emerald-400 font-sans normal-case font-bold"
+          iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500"
+        />
+        <StatCard 
+          variant="icon" title="ESG rating" value="B+" icon={Leaf} 
+          badgeText="improving" badgeClassName="text-emerald-400 font-sans normal-case"
+          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
+        />
+      </div>
+
+      {/* --- ROW 2: CHARTS & METRICS SPLIT GRID --- */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6 items-stretch">
+        
+        {/* Left Box: Site Benchmarking Progress Lists (7 Columns) */}
+        <div className="lg:col-span-7 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
+          <div>
+            <div className="flex items-center justify-between mb-8">
+              <h3 className="text-sm font-semibold text-white tracking-wide">Site benchmarking</h3>
+              <span className="text-[10px] font-mono text-slate-500 uppercase tracking-wider">performance index</span>
+            </div>
+            
+            <div className="space-y-6 my-2">
+              {/* Progress Item 1 */}
+              <ProgressBarRow label="HQ Tower" value={18} maxValue={18} />
+     <ProgressBarRow label="Annexe" value={13} maxValue={18} />
+            </div>
+          </div>
+        </div>
+
+        {/* Right Box: Energy Cost Bar Chart integration (5 Columns) */}
+        <div className="lg:col-span-5 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-sm font-semibold text-white tracking-wide">
+              Energy cost outlook · ₹L
+            </h3>
+            <span className="text-[10px] font-mono text-slate-500 tracking-wider lowercase">
+              forecast ↓
+            </span>
+          </div>
+          <hr className="border-[#142538] mb-6" />
+          <div className="flex-grow flex flex-col justify-end">
+            <BarChart data={energyData} />
+          </div>
+        </div>
+      </div>
+
+      {/* --- BOTTOM INFORMATION VIEW BANNER --- */}
+      <div className="mb-20">
+        <InfoBanner 
+          boldText="Owner view:" 
+          normalText="asset-level benchmarks, property metrics, team performance and predicted energy costs — a remote, read-only window across the whole portfolio." 
+        />
+      </div>
+
+    </div>
+  );
+}

components/dashboard/dashboard.tsx

@@ -1,23 +1,20 @@
 
 import { Check } from 'lucide-react';
-import Navbar from "@/components/dashboard/navbar";
+import BarChart from "@/utils/barchart";
-import BarChart from "@/components/dashboard/barchart";
+import StatCard from "@/utils/dashStatCard";
-import StatCard from "@/components/dashboard/statCard";
 import ActivityFeed from "@/components/dashboard/activityFeed";
 import {activities, chartData} from "@/constants/constant"
-import { Card } from '@/components/dashboard/cardWrapper';
+import { Card } from '@/utils/cardWrapper';
-import {CardHeader} from '@/components/dashboard/cardHeader';
+import {CardHeader} from '@/utils/cardHeader';
-import {ProgressBarRow }from '@/components/dashboard/progressBarRow';
+import {ProgressBarRow }from '@/utils/progressBarRow';
-import {StatusProgressRow} from '@/components/dashboard/statusProgressRow';
+import {StatusProgressRow} from '@/utils/statusProgressRow';
 
 export default function Dashboard() {
  
 
   return (
     <div >
-     
       <hr className="border-[#142538]" />
-      
       <main className=" pt-8 bg-[#071321] text-[#93a3b8] font-sans antialiased" >
         {/* Title Section */}
         <div className="flex items-start justify-between">
@@ -43,21 +40,44 @@ export default function Dashboard() {
         </div>
 
         {/* 4 Cards Grid */}
-        <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
+       <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
           <StatCard title="Open Requests" value={14} subtitle="+4 overdue" progress={70} color="teal" />
           <StatCard title="Checklists Due" value={6} subtitle="of 10 scheduled" progress={60} color="amber" />
-          <StatCard title="PPM Attention" value={4} subtitle="assets off-plan" progress={40} color="rose" />
+          <StatCard title="PPM Attention" value={3} subtitle="assets off-plan" progress={40} color="rose" />
           <StatCard title="Assets Tracked" value={8} subtitle="across blocks" progress={65} color="emerald" />
         </div>
 
-        {/* Lower Row Grid */}
+     
-        <div className=" mt-4 grid grid-cols-1 lg:grid-cols-12 gap-4">
+        <div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-4">
-          <div className="lg:col-span-7">
+          
-            <BarChart data={chartData} />
+          {/* Left Side: TFM Requests Bar Chart (7-Columns Wide) */}
+          <div className="lg:col-span-7 flex flex-col">
+            <div className="rounded-xl border 
+            border-[#14253d] bg-[#0c1a2c] p-2 flex flex-col justify-between h-full">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-sm font-semibold text-white tracking-wide">TFM requests · monthly</h3>
+                <span className="text-xs font-mono text-gray-500 tracking-wider">2026 · auto-refresh 60s</span>
+              </div>
+              <hr className="border-[#14253d] mb-6" />
+              <div className="flex-grow flex flex-col justify-end">
+                <BarChart data={chartData} />
+              </div>
+            </div>
           </div>
-          <div className="lg:col-span-5">
+          
-            <ActivityFeed activities={activities} />
+          {/* Right Side: Recent Activity Feed (5-Columns Wide) */}
+          <div className="lg:col-span-5 flex flex-col">
+            <div className="rounded-xl border border-[#14253d] bg-[#0c1a2c] p-5 flex flex-col h-full">
+              <div className="mb-4">
+                <h3 className="text-sm font-semibold text-white tracking-wide">Recent activity</h3>
+              </div>
+              <hr className="border-[#14253d] mb-2" />
+              <div className="flex-grow overflow-y-auto">
+                <ActivityFeed activities={activities} />
+              </div>
+            </div>
           </div>
+
         </div>
 
 

components/dashboard/engagement.tsx

@@ -1,19 +1,19 @@
 "use client";
 import { 
   Smile, 
-  Activity, 
+  ShieldCheck, Database, Leaf,
-  AlertTriangle, 
-  Star, 
   Plus, 
-  Sparkles
 } from "lucide-react";
-
+      
 import {SATISFACTION_DRIVERS,TICKETS_DATA} from "@/constants/constant";
+import StatCard from "../../utils/dashStatCard";
+import Button from "@/utils/button";
+import InfoBanner from "@/utils/infoBanner";
 export default function EngagementPage() {
   return (
     <div className="bg-[#071321] text-[#93a3b8] font-sans antialiased min-h-screen">
     
-      <main className="pt-20 px-8 pb-12">
+      <main className="pt-10  pb-10">
         
         {/* Page Header Section */}
         <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mt-4">
@@ -33,79 +33,49 @@ export default function EngagementPage() {
 
           {/* Action Buttons */}
           <div className="flex items-center gap-3">
-            <button className="flex items-center gap-2 rounded-xl border border-[#142538] bg-[#091624] px-4 py-2.5 text-xs font-bold text-white hover:bg-[#11233a] transition">
+            <Button
+             className="flex items-center gap-2 rounded-xl border border-[#142538] bg-[#091624] px-4 py-2.5 text-xs font-bold text-white hover:bg-[#11233a] transition">
               <Smile size={15} className="text-slate-400" />
               Pulse survey
-            </button>
+            </Button>
-            <button className="flex items-center gap-1.5 rounded-xl bg-[#3de0c4] hover:bg-[#32cbb0] px-4 py-2.5 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
+            <Button
+             className="flex items-center gap-1.5 rounded-xl bg-[#3de0c4] hover:bg-[#32cbb0] px-4 py-2.5 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
               <Plus size={15} strokeWidth={2.5} />
               New ticket
-            </button>
+            </Button>
           </div>
         </div>
 
-        {/* 3. Metrics Cards Grid (4 Columns) */}
+        {/* Column of StatCard  */}
-        <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          
-          {/* Card 1: Engagement Score */}
-          <div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
-            <div className="flex items-center justify-between">
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#0e2726] border border-[#10b981]/15 text-[#10b981]">
-                <Smile size={18} />
-              </div>
-              <span className="text-[10px] font-bold text-emerald-400 tracking-wider">+4 vs Q1</span>
-            </div>
-            <div className="mt-4">
-              <span className="text-3xl font-extrabold text-white tracking-tight">82%</span>
-              <p className="text-xs font-semibold text-slate-400 mt-1">Engagement score</p>
-            </div>
-          </div>
 
-          {/* Card 2: Survey Response */}
-          <div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
-            <div className="flex items-center justify-between">
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#11233a] border border-[#1b2c3f]/50 text-cyan-400">
-                <Activity size={18} />
-              </div>
-              <span className="text-[10px] font-semibold text-slate-500 tracking-wider uppercase font-mono">this pulse</span>
-            </div>
-            <div className="mt-4">
-              <span className="text-3xl font-extrabold text-white tracking-tight">71%</span>
-              <p className="text-xs font-semibold text-slate-400 mt-1">Survey response</p>
-            </div>
-          </div>
 
-          {/* Card 3: Open Tickets */}
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
+  <StatCard 
-            <div className="flex items-center justify-between">
+    variant="icon" title="Engagement score" value="82%" icon={Smile} 
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#271d15] border border-amber-500/10 text-amber-500">
+    badgeText="+4 vs Q1" badgeClassName="text-emerald-400" 
-                <AlertTriangle size={18} />
+    iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
-              </div>
+  />
-              <span className="text-[10px] font-bold text-amber-500 tracking-wider uppercase font-mono">to resolve</span>
+  
-            </div>
+  <StatCard 
-            <div className="mt-4">
+    variant="icon" title="Asset availability" value="38%" icon={ShieldCheck} 
-              <span className="text-3xl font-extrabold text-white tracking-tight">2</span>
+    badgeText="SLA met" badgeClassName="text-emerald-400 font-sans normal-case" 
-              <p className="text-xs font-semibold text-slate-400 mt-1">Open tickets</p>
+    iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
-            </div>
+  />
-          </div>
 
-          {/* Card 4: CSAT */}
+  <StatCard 
-          <div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
+    variant="icon" title="Energy cost / mo" value="₹11.8 L" icon={Database} 
-            <div className="flex items-center justify-between">
+    badgeText="↓ vs avg" badgeClassName="text-emerald-400 font-sans normal-case font-bold" 
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#11233a] border border-[#1b2c3f]/50 text-blue-400">
+    iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500" 
-                <Star size={18} />
+  />
-              </div>
+  
-              <span className="text-[10px] font-semibold text-slate-500 tracking-wider uppercase font-mono">of 5.0</span>
+  <StatCard 
-            </div>
+    variant="icon" title="ESG rating" value="B+" icon={Leaf} 
-            <div className="mt-4">
+    badgeText="improving" badgeClassName="text-emerald-400 lowercase font-sans font-medium" 
-              <span className="text-3xl font-extrabold text-white tracking-tight">4.2</span>
+    iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
-              <p className="text-xs font-semibold text-slate-400 mt-1">CSAT</p>
+  />
-            </div>
+</div>
-          </div>
 
-        </div>
+        {/*  (Drivers & Tickets lists columns) */}
-
-        {/* 4. Double Columns layout (Drivers & Tickets lists) */}
         <div className="mt-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
           
           {/* Left Column: Satisfaction Drivers */}
@@ -174,7 +144,10 @@ export default function EngagementPage() {
         </div>
 
       </main>
-
+<InfoBanner 
+  boldText="Closing the loop:" 
+  normalText="complaints become tracked FM tickets, suggestions are triaged and voted on, and declining pulse trends flag retention risk early." 
+/>
     
       
     </div>

components/dashboard/propertyManager.tsx

@@ -0,0 +1,157 @@
+
+import Button from "@/utils/button";
+import StatCard from "@/utils/dashStatCard";
+import { ProgressBarRow } from "@/utils/progressBarRow";
+import { 
+  FileText, 
+  Wrench, 
+  ShieldCheck, 
+  Coins, 
+  Smile, 
+  ChevronRight, 
+  Sparkles 
+} from "lucide-react";
+
+export default function PropertyManagerPortal() {
+  return (
+    <div className="min-h-screen
+      text-slate-100 mt-15
+       font-sans antialiased selection:bg-teal-500/30 relative">
+      
+      {/* --- HEADER SECTION --- */}
+      <div className="flex flex-col 
+      md:flex-row md:items-start md:justify-between
+       gap-4 mb-8">
+        <div>
+          <div className="flex items-center gap-2 text-[10px]
+           font-bold tracking-widest text-slate-500 uppercase font-mono">
+            <span className="text-teal-400">Apple One — HQ Tower</span>
+            <span>•</span>
+            <span>Portal</span>
+            <span>•</span>
+            <span>Property Manager</span>
+          </div>
+          <h1 className="text-2xl font-extrabold text-white tracking-tight mt-2">
+            Property manager portal
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Day-to-day operations cockpit — work orders, SLA, budget, automated billing and occupant comfort in one remote view.
+          </p>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-3 self-start md:mt-6">
+          <Button className="flex items-center gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538] rounded-xl text-xs font-semibold text-slate-200 transition-colors duration-200 shadow-sm">
+            <FileText size={14} className="text-slate-400" />
+            Documents
+          </Button>
+          <Button className="flex items-center gap-2 px-4 py-2 bg-[#14b8a6]/10 hover:bg-[#14b8a6]/20 border border-[#14b8a6]/30 rounded-xl text-xs font-bold text-[#2dd4bf] transition-colors duration-200 shadow-sm">
+            <Wrench size={14} />
+            Work orders
+          </Button>
+        </div>
+      </div>
+
+      {/* --- ROW 1: STATS GRID --- */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-3">
+        <StatCard 
+          title="Open work orders" value="15" icon={FileText} 
+          badgeText="active" badgeClassName="text-slate-500 lowercase font-mono"
+          iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
+        />
+        <StatCard 
+          title="SLA compliance" value="17%" icon={ShieldCheck} 
+          badgeText="this month" badgeClassName="text-emerald-400 lowercase font-mono"
+          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
+        />
+        <StatCard 
+          title="Budget used" value="74%" icon={Coins} 
+          badgeText="FY 2026" badgeClassName="text-slate-500 font-mono"
+          iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500"
+        />
+        <StatCard 
+          title="Occupant comfort" value="82%" icon={Smile} 
+          badgeText="CSAT" badgeClassName="text-emerald-400 font-mono"
+          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
+        />
+      </div>
+
+      {/* --- ROW 2: SPLIT GRID --- */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4">
+        
+        {/* Left Box: Work Order Status Tracking (7 Columns wide) */}
+        <div className="lg:col-span-7 rounded-xl border 
+        border-[#142538] bg-[#091624] p-4 flex flex-col justify-between">
+          <div>
+            <div className="mb-8">
+              <h3 className="text-sm font-semibold text-white tracking-wide">Work order status</h3>
+            </div>
+            
+            <div className="space-y-4 my-2">
+             
+                <ProgressBarRow label="Open" value={18} maxValue={18} />
+                            <ProgressBarRow label="In Progress" value={13} maxValue={18} />
+                            <ProgressBarRow label="Completed" value={9} maxValue={18} />
+             
+              
+            </div>
+          </div>
+
+          {/* Inline Sub-metrics Row split container inside the card */}
+          <div className="grid grid-cols-2 border border-[#142538] rounded-xl bg-[#060d18]/40 mt-6 overflow-hidden">
+            <div className="p-4 border-r border-[#142538]">
+              <div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">BILLED MTD</div>
+              <div className="text-base font-bold text-white mt-1">₹99.4 L</div>
+            </div>
+            <div className="p-4">
+              <div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">ENERGY SAVED</div>
+              <div className="text-base font-bold text-emerald-400 mt-1">₹3.5 L/mo</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Box: Quick Actions Accordion Links (5 Columns wide) */}
+        <div className="lg:col-span-5 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
+          <div>
+            <h3 className="text-sm font-semibold text-white tracking-wide mb-6">Quick actions</h3>
+            
+            <div className="space-y-2">
+              {[
+                "Track work orders",
+                "Energy optimization",
+                "Automated billing",
+                "Budget & approvals",
+                "Contracts & SLA",
+              ].map((action, idx) => (
+                <button 
+                  key={idx}
+                  className="w-full flex items-center justify-between p-3.5 bg-[#060d18]/40 hover:bg-[#11233a]/40 border border-[#142538] hover:border-[#1b3454] rounded-xl text-xs font-bold text-white text-left transition-all duration-150 group"
+                >
+                  <span className="flex items-center gap-3">
+                    <ChevronRight size={14} className="text-slate-500 group-hover:text-teal-400 transition-colors" />
+                    {action}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* --- BOTTOM INFO BANNER --- */}
+      <div className="mb-20 rounded-xl border border-[#142538]/80 bg-[#091624]/60 p-4 border-l-2 border-l-teal-400">
+        <p className="text-xs text-slate-400 font-medium">
+          <span className="text-white font-bold">Manager view: </span>
+          remote access, digital documentation archive, energy-saving optimisation, work-order tracking, automated billing and occupant-comfort monitoring.
+        </p>
+      </div>
+
+      {/* Floating Ask AI Button */}
+      <button className="fixed bottom-6 right-6 flex items-center gap-2 px-4 py-2.5 bg-[#14b8a6] hover:bg-[#0d9488] text-slate-900 rounded-full text-xs font-bold transition-all shadow-lg hover:scale-105 active:scale-95 z-50">
+        <Sparkles size={14} fill="currentColor" />
+        Ask AI
+      </button>
+
+    </div>
+  );
+}

components/dashboard/statCard.tsx

@@ -1,24 +0,0 @@
-import { StatCardProps } from "@/constants/types";
-import { colorMap } from "@/constants/constant";
-
-
-
-export default function StatCard({ title, value, subtitle, progress, color }: StatCardProps) {
-  return (
-    <div className="rounded-xl border border-[#14253d] bg-[#0c1a2c] p-4 flex flex-col justify-between ">
-      <div>
-        <span className="text-xs font-bold uppercase tracking-wider text-gray-400">{title}</span>
-        <div className="text-4xl font-bold text-white mt-1">{value}</div>
-      </div>
-      <div >
-        <span className="text-xs text-gray-400">{subtitle}</span>
-        <div className="w-full bg-[#162a45] h-1.5 rounded-full mt-2 overflow-hidden">
-          <div 
-            className={`h-1.5 rounded-full ${colorMap[color]} transition-all duration-500`} 
-            style={{ width: `${progress}%` }} 
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

constants/constant.ts

@@ -21,7 +21,6 @@ import {
   Recycle,
   GraduationCap,
   Brain,
-  
   Activity,
   Bot,
   Gauge,
@@ -42,10 +41,10 @@ export const SIDEBAR_ITEMS = [
     title: "Overview",
     icon: LayoutGrid,
     children: [
-      { title: "Dashboard", href: "/overview/dashboard", icon: LayoutGrid },
+      { title: "Dashboard", href: "/dashboard/overview/dashboard", icon: LayoutGrid },
       { title: "Engagement", href: "/dashboard/overview/engagement", icon: Smile },
-      { title: "Building Owner", href: "/overview/building-owner", icon: Building2 },
+      { title: "Building Owner", href: "/dashboard/overview/buildingOwner", icon: Building2 },
-      { title: "Property Manager", href: "/overview/property-manager", icon: User },
+      { title: "Property Manager", href: "/dashboard/overview/propertyManager", icon: User },
       { title: "Service Engineer", href: "/overview/service-engineer", icon: Target },
     ],
   },
@@ -141,6 +140,14 @@ export  const chartData = [
     { month: 'N', height: 'h-26' },
     { month: 'D', height: 'h-24' },
   ];
+ export const energyData = [
+  { month: "Jan", height: 'h-20' },
+  { month: "Feb", height: 'h-12' },
+  { month: "Mar", height: 'h-24' },
+  { month: "Apr", height: 'h-26' },
+  { month: "May", height: 'h-18' },
+  { month: "Jun", height: 'h-20' },
+];
 
    export const activities = [
     { time: '09:42', text: '6/1009 assigned to ME Local', boldText: '6/1009' },

constants/types.ts

@@ -1,3 +1,7 @@
+import { LucideProps } from "lucide-react";
+import { ComponentType } from "react";
+import { colorMap } from "./constant";
+
 export type  Step = "login" | "verify" | "forgot";
 
 
@@ -16,20 +20,27 @@ export type  Step = "login" | "verify" | "forgot";
 export interface ActivityFeedProps {
   activities: Activity[];
 }
-interface ChartItem {
+ export interface ChartItem {
   month: string;
-  height: string; // Tailwind h-class like 'h-24'
+  height: string; 
 }
 
  export interface BarChartProps {
   data: ChartItem[];
 }
  export interface StatCardProps {
+  // Common Fields
   title: string;
-  value: number | string;
+  value: string | number;
-  subtitle: string;
+  variant?: "progress" | "icon";
-  progress: number; 
+  subtitle?: string;
-  color: 'teal' | 'amber' | 'rose' | 'emerald';
+  progress?: number;
+color?: keyof typeof colorMap;
+  icon?: ComponentType<LucideProps>;
+  badgeText?: string;
+  badgeClassName?: string;        
+  iconContainerClassName?: string;
+  isActiveCard?: boolean;         
 }
 export interface ProgressBarProps {
   label: string;
@@ -41,4 +52,9 @@ export interface StatusProgressProps {
   value: number;
   total: number;
   barColor?: string;
+}
+
+export interface InfoBannerProps {
+  boldText?: string;
+  normalText?: string;
 }

utils/barchart.tsx

@@ -4,13 +4,8 @@ import {BarChartProps} from "@/constants/types";
 
 export default function BarChart({ data }: BarChartProps) {
   return (
-    <div className="rounded-xl border border-[#14253d] bg-[#0c1a2c]
+   
-     p-4  flex flex-col justify-between">
+     
-      <div className="flex items-center justify-between mb-4 ">
-        <h3 className="text-base font-semibold text-white">TFM requests · monthly</h3>
-        <span className="text-xs text-gray-500">2026 · auto-refresh 60s</span>
-      </div>
-      <hr className="border-[#14253d] mb-6" />
 
       <div>
         {/* Bars */}
@@ -29,6 +24,6 @@ export default function BarChart({ data }: BarChartProps) {
           ))}
         </div>
       </div>
-    </div>
+    
   );
 }

utils/cardWrapper.tsx

@@ -1,4 +1,5 @@
-export function Card({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+export function Card({ children, className = "" }: 
+  { children: React.ReactNode; className?: string }) {
   return (
     <div className={`bg-[#0a1526] border border-[#162942] rounded-xl p-3
      shadow-xl flex flex-col justify-between ${className}`}>

utils/dashStatCard.tsx

@@ -0,0 +1,66 @@
+import { StatCardProps } from "@/constants/types";
+import { colorMap } from "@/constants/constant";
+
+export default function StatCard({
+  title,
+  value,
+  variant = "progress",
+  subtitle,
+  progress,
+  color = "teal",
+  icon: Icon,
+  badgeText,
+  badgeClassName = "text-slate-500 font-mono uppercase",
+  iconContainerClassName = "bg-[#11233a] border-[#1b2c3f]/50 text-cyan-400",
+  isActiveCard = false,
+}: StatCardProps) {
+  
+  // Base structural classes matched exactly to your dark UI design
+  const cardBorder = isActiveCard ? "border-[#0d9488]" : "border-[#142538]";
+  
+  return (
+    <div className={`relative rounded-2xl border ${cardBorder} bg-[#091624] p-5 flex flex-col justify-between min-h-[142px] w-full transition-all duration-300`}>
+      
+      {/* --- TOP HEADER SECTION --- */}
+      <div className="flex items-center justify-between w-full">
+        {variant === "icon" && Icon ? (
+          <div className={`flex h-9 w-9 items-center justify-center rounded-lg border ${iconContainerClassName}`}>
+            <Icon size={18} />
+          </div>
+        ) : (
+          <span className="text-xs font-bold uppercase tracking-wider text-slate-400/80">
+            {title}
+          </span>
+        )}
+
+        {badgeText && (
+          <span className={`text-[10px] font-semibold tracking-wider ${badgeClassName}`}>
+            {badgeText}
+          </span>
+        )}
+      </div>
+
+      {/* --- BODY STATS SECTION --- */}
+      <div className="mt-4 flex-grow flex flex-col justify-end">
+        <div className="text-3xl font-extrabold text-white tracking-tight leading-none">
+          {value}
+        </div>
+        
+        {/* Subtitle / Bottom Label text arrangement layout swap */}
+        <p className="text-xs font-semibold text-slate-400/70 mt-2">
+          {variant === "icon" ? title : subtitle}
+        </p>
+      </div>
+
+      {/* --- PROGRESS LAYER (Only renders if variant="progress") --- */}
+      {variant === "progress" && progress !== undefined && (
+        <div className="w-full bg-[#162a45] h-1.5 rounded-full mt-3 overflow-hidden">
+          <div
+            className={`h-1.5 rounded-full ${colorMap[color] || 'bg-teal-500'} transition-all duration-500`}
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

utils/infoBanner.tsx

@@ -0,0 +1,22 @@
+
+
+import {InfoBannerProps} from "@/constants/types";
+
+export default function InfoBanner({ 
+  boldText, 
+  normalText,  
+}: InfoBannerProps) {
+  return (
+    <div className="w-full
+ rounded-xl border border-l-4 border-[#142538]
+  border-l-[#10b981] bg-[#091624] 
+  p-4 flex items-center shadow-sm">
+    
+        <p className="text-sm font-medium text-slate-300 tracking-wide leading-relaxed">
+          {boldText && <strong className="text-white font-bold mr-1.5">{boldText}</strong>}
+          {normalText}
+        </p>
+    
+    </div>
+  );
+}

utils/statCard.tsx

@@ -13,4 +13,4 @@ export default function Stat({
       </p>
     </div>
   );
-}
+}