Project structure changes ad new files added in dashboard folders

components/dashboard/overview/activityFeed.tsx

@@ -0,0 +1,28 @@
+import { ActivityFeedProps } from "@/types/types"
+
+
+
+export default function ActivityFeed({ activities }: ActivityFeedProps) {
+  return (
+    <div className="rounded-xl border border-[#14253d] bg-[#0c1a2c] p-6 flex flex-col">
+      <h3 className="text-base font-semibold text-white mb-4">Recent activity</h3>
+       <hr className="border-[#14253d] mb-6" />
+      <div className="divide-y divide-[#14253d] flex-1 flex flex-col justify-between">
+        {activities.map((activity, index) => {
+          const parts = activity.text.split(activity.boldText);
+          
+          return (
+            <div key={index} className="py-3.5 flex items-start text-sm gap-4 first:pt-0 last:pb-0">
+              <span className="text-gray-500 font-medium tabular-nums shrink-0">{activity.time}</span>
+              <p className="text-gray-300">
+                {parts[0]}
+                <span className="font-semibold text-white">{activity.boldText}</span>
+                {parts[1]}
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/dashboard/overview/buildingOwner.tsx

@@ -0,0 +1,109 @@
+import { Building2, ShieldCheck, Database, Leaf, FileSpreadsheet } from "lucide-react";
+import StatCard from "@/components/common/dashStatCard"; 
+import { energyData } from "@/constants/constant";
+import BarChart from "@/components/charts/barchart";
+import InfoBanner from "@/components/common/infoBanner";
+import Button from "@/components/common/button";
+import { ProgressBarRow } from "@/components/charts/progressBarRow";
+
+// Import your custom Card components
+import { Card } from "@/components/common/cardWrapper"; 
+import { CardHeader } from "@/components/common/cardHeader"; 
+
+export default function BuildingOwnerPortal() {
+  return (
+    <div className="mt-20 font-sans antialiased">
+      
+      {/* --- HEADER SECTION --- */}
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4">
+        <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-15">
+          <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="50%" 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">
+          <Card className="p-5">
+            <CardHeader title="Site benchmarking" subtitle="performance index" />
+            
+            <div className="space-y-6 my-4">
+              {/* Progress Item 1 */}
+              <ProgressBarRow label="HQ Tower" value={18} maxValue={18} />
+              {/* Progress Item 2 */}
+              <ProgressBarRow label="Annexe" value={13} maxValue={18} />
+            </div>
+          </Card>
+        </div>
+
+        {/* Right Box: Energy Cost Bar Chart integration (5 Columns) */}
+        <div className="lg:col-span-5">
+          <Card className="p-5 h-full">
+            <CardHeader title="Energy cost outlook · ₹L" subtitle="forecast ↓" />
+            <hr className="border-[#142538] mb-6" />
+            <div className="flex-grow flex flex-col justify-end">
+              <BarChart data={energyData} />
+            </div>
+          </Card>
+        </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/overview/dashboard.tsx

@@ -0,0 +1,210 @@
+
+import { Check } from 'lucide-react';
+import BarChart from "@/components/charts/barchart";
+import StatCard from "@/components/common/dashStatCard";
+import ActivityFeed from "@/components/dashboard/overview/activityFeed";
+import {activities, chartData} from "@/constants/constant"
+import { Card } from '@/components/common/cardWrapper';
+import {CardHeader} from '@/components/common/cardHeader';
+import {ProgressBarRow }from '@/components/charts/progressBarRow';
+import {StatusProgressRow} from '@/components/charts/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">
+          <div>
+            <div className="flex items-center gap-2 
+            text-xs font-bold uppercase tracking-widest text-teal-500 mt-8">
+              <span>Apple One — HQ Tower</span>
+              <span className="text-gray-600">·</span>
+              <span className="text-gray-400">Tenant</span>
+              <span className="text-gray-600">·</span>
+              <span className="text-gray-400">Apple One</span>
+            </div>
+            <h1 className="text-2xl font-bold text-white tracking-tight">Operations dashboard</h1>
+            <p className="mt-2 text-sm text-gray-400 max-w-xl leading-relaxed">
+              Live snapshot scoped to Apple One. The layout below is the dashboard published for this tenant in Administration.
+            </p>
+          </div>
+          
+          <div className="mt-20 flex items-center gap-1 rounded-full border border-teal-500/30 bg-teal-500/10 px-2 py-1 text-xs font-medium text-teal-400">
+            <Check className="h-3.5 w-3.5 " />
+            <span>Published layout</span>
+          </div>
+        </div>
+
+        {/* 4 Cards Grid */}
+       <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={3} subtitle="assets off-plan" progress={40} color="rose" />
+          <StatCard title="Assets Tracked" value={8} subtitle="across blocks" progress={65} color="emerald" />
+        </div>
+
+     
+        <div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-4">
+          
+          {/* 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>
+          
+          {/* 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>
+
+
+        <div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-6">
+          
+          {/* Schedule Performance MMR */}
+          <div className="lg:col-span-7">
+            <Card>
+              <CardHeader title="Schedule performance • MMR" subtitle="ppm & amc" />
+              <div className="overflow-x-auto mt-2">
+                <table className=" text-left border-collapse">
+                  <thead>
+                    <tr className="text-[#4b5f7a] text-xs font-bold uppercase tracking-wider border-b border-[#1b2b41]/40 pb-3">
+                      <th className="pb-3">Schedule</th>
+                      <th className="pb-3 text-right">Total</th>
+                      <th className="pb-3 text-right">Done</th>
+                      <th className="pb-3 text-right">On Time</th>
+                      <th className="pb-3 text-right">Delayed</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-[#1b2b41]/30 text-sm font-semibold">
+                    <tr className="hover:bg-[#11233a]/25 transition-colors">
+                      <td className="py-4 text-white">PPM</td>
+                      <td className="py-4 text-right text-slate-300">24</td>
+                      <td className="py-4 text-right text-slate-300">19</td>
+                      <td className="py-4 text-right text-slate-300">17</td>
+                      <td className="py-4 text-right text-red-500">2</td>
+                    </tr>
+                    <tr className="hover:bg-[#11233a]/25 transition-colors">
+                      <td className="py-4 text-white">AMC</td>
+                      <td className="py-4 text-right text-slate-300">8</td>
+                      <td className="py-4 text-right text-slate-300">6</td>
+                      <td className="py-4 text-right text-slate-300">6</td>
+                      <td className="py-4 text-right text-slate-400">0</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </Card>
+          </div>
+
+          {/* Energy Today */}
+          <div className="lg:col-span-5 ">
+            <Card>
+              <CardHeader title="Energy • today"
+               subtitle="day-wise" />
+              <div className="space-y-2
+               text-sm mt-2 font-mono">
+                <div className="flex justify-between items-baseline">
+                  <span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Electricity</span>
+                  <span className="text-white text-base font-bold">1,284 <span className="text-xs font-normal text-slate-400 font-sans">kwh</span></span>
+                </div>
+                <div className="flex justify-between items-baseline">
+                  <span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Water</span>
+                  <span className="text-white text-base font-bold">312 <span className="text-xs font-normal text-slate-400 font-sans">kL</span></span>
+                </div>
+                <div className="flex justify-between items-baseline">
+                  <span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Diesel</span>
+                  <span className="text-white text-base font-bold">48 <span className="text-xs font-normal text-slate-400 font-sans">L</span></span>
+                </div>
+                
+                <div className="flex justify-between items-center pt-4 border-t border-[#1b2b41]/40">
+                  <span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Vs Avg</span>
+                  <div className="flex items-center space-x-3">
+                    <span className="bg-[#0b2723] text-[#17cbb5] border border-[#17cbb5]/20 text-[10px] font-bold px-3 py-1 rounded-full flex items-center gap-1.5 uppercase">
+                      <span className="w-1.5 h-1.5 rounded-full bg-[#17cbb5] inline-block animate-pulse"></span>
+                      Completed
+                    </span>
+                    <span className="text-[#17cbb5] font-bold text-sm">-6%</span>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </div>
+
+        </div>
+
+        {/* ROW 2: Sub-metrics and Tracking widgets */}
+        <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+
+          {/* Top 5 Requester */}
+          <Card>
+            <CardHeader title="Top 5 requester" subtitle="this month" />
+            <div className="space-y-3 mt-1">
+              <ProgressBarRow label="Academic Block" value={18} maxValue={18} />
+              <ProgressBarRow label="Hostel Block" value={13} maxValue={18} />
+              <ProgressBarRow label="HVAC Plant" value={9} maxValue={18} />
+              <ProgressBarRow label="Pump Room" value={6} maxValue={18} />
+              <ProgressBarRow label="Lobby" value={4} maxValue={18} />
+            </div>
+          </Card>
+
+          {/* Asset Register */}
+          <Card>
+            <CardHeader title="Asset register" subtitle="live" />
+            <div className="flex items-baseline space-x-3 my-4">
+              <span className="text-5xl font-light text-[#17cbb5]">8</span>
+              <span className="text-[#5b7391] text-xs font-semibold uppercase tracking-wider">assets tracked</span>
+            </div>
+            <div className="space-y-3 text-sm font-semibold border-t border-[#1b2b41]/40 pt-4">
+              <div className="flex justify-between py-1">
+                <span className="text-[#4b5f7a] text-xs uppercase tracking-wider">On Plan</span>
+                <span className="text-white">3</span>
+              </div>
+              <div className="flex justify-between py-1">
+                <span className="text-[#4b5f7a] text-xs uppercase tracking-wider">Attention</span>
+                <span className="text-red-500">5</span>
+              </div>
+              <div className="flex justify-between py-1">
+                <span className="text-[#4b5f7a] text-xs uppercase tracking-wider">Groups</span>
+                <span className="text-white">4</span>
+              </div>
+            </div>
+          </Card>
+
+          {/* PM Plan vs Started */}
+          <Card>
+            <CardHeader title="PM plan vs started" subtitle="this month" />
+            <div className="space-y-4 mt-1">
+              <StatusProgressRow label="Planned" value={24} total={24} barColor="bg-[#52647c]" />
+              <StatusProgressRow label="Started" value={19} total={24} barColor="bg-[#17cbb5]" />
+              <StatusProgressRow label="Completed" value={17} total={24} barColor="bg-[#10b981]" />
+            </div>
+          </Card>
+
+        </div>
+      </main>
+    </div>
+  );
+}

components/dashboard/overview/engagement.tsx

@@ -0,0 +1,165 @@
+"use client";
+import { 
+  Smile, 
+  ShieldCheck, 
+  Database, 
+  Leaf,
+  Plus, 
+} from "lucide-react";
+      
+import { SATISFACTION_DRIVERS, TICKETS_DATA } from "@/constants/constant";
+import StatCard from "../../common/dashStatCard";
+import Button from "@/components/common/button";
+import InfoBanner from "@/components/common/infoBanner";
+
+// Import your custom Card components
+import { Card } from "@/components/common/cardWrapper"; 
+import { CardHeader } from "@/components/common/cardHeader"; 
+
+export default function EngagementPage() {
+  return (
+    <div className=" text-[#93a3b8] font-sans  ">
+    
+      <main className="mt-20">
+        
+        {/* Page Header Section */}
+        <div className="flex flex-col md:flex-row md:items-center 
+        justify-between gap-4 mt-4">
+          <div>
+            <div className="flex items-center gap-2 text-xs
+             font-bold uppercase tracking-widest text-teal-500">
+              <span>Apple One — HQ Tower</span>
+              <span className="text-gray-600">·</span>
+              <span className="text-gray-400">Intelligence</span>
+              <span className="text-gray-600">·</span>
+              <span className="text-gray-400">Engagement</span>
+            </div>
+            <h1 className="text-2xl font-bold text-white tracking-tight mt-1">Employee engagement</h1>
+            <p className="mt-2 text-sm text-gray-400 max-w-2xl leading-relaxed">
+              Pulse satisfaction surveys, complaint tickets and a suggestion system — boosting morale, transparency and retention.
+            </p>
+          </div>
+
+          {/* 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-4 text-xs font-bold text-white
+              hover:bg-[#11233a] transition">
+              <Smile size={15} className="text-slate-400" />
+              Pulse survey
+            </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">
+              <Plus size={15} strokeWidth={2.5} />
+              New ticket
+            </Button>
+          </div>
+        </div>
+
+        {/* --- STAT CARD GRID --- */}
+        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <StatCard 
+            variant="icon" title="Engagement score" value="82%" icon={Smile} 
+            badgeText="+4 vs Q1" badgeClassName="text-emerald-400" 
+            iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
+          />
+          
+          <StatCard 
+            variant="icon" title="Asset availability" value="50%" 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 lowercase font-sans font-medium" 
+            iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
+          />
+        </div>
+
+        {/* --- TWO COLUMNS (DRIVERS & TICKETS LISTS) --- */}
+        <div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-6">
+          
+          {/* Left Column: Satisfaction Drivers */}
+          <div className="lg:col-span-7">
+            <Card className="p-4">
+              <CardHeader title="Satisfaction drivers" subtitle="latest pulse" />
+
+              <div className="mt-6 space-y-5">
+                {SATISFACTION_DRIVERS.map((driver) => (
+                  <div key={driver.label} className="space-y-2">
+                    <div className="flex items-center justify-between text-xs font-medium">
+                      <span className="text-slate-300">{driver.label}</span>
+                      <span className="font-bold text-white">{driver.score}</span>
+                    </div>
+                    
+                    {/* Track line background */}
+                    <div className="h-2 w-full rounded-full bg-[#101c2a]">
+                      {/* Filled bar width */}
+                      <div 
+                        className={`h-2 rounded-full ${driver.color} transition-all duration-500`}
+                        style={{ width: `${driver.score}%` }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          </div>
+
+          {/* Right Column: Tickets & Suggestions */}
+          <div className="lg:col-span-5">
+            <Card className="p-6 h-full">
+              <CardHeader title="Tickets & suggestions" />
+
+              <div className="mt-2 divide-y divide-[#142538]/30">
+                {TICKETS_DATA.map((ticket, index) => (
+                  <div key={index} className="flex items-center justify-between py-4 first:pt-2 last:pb-2">
+                    <div className="min-w-0">
+                      <h4 className="font-bold text-xs text-white truncate pr-2">{ticket.title}</h4>
+                      <span className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider block mt-0.5">
+                        {ticket.type}
+                      </span>
+                    </div>
+
+                    {/* Status Indicator Badges */}
+                    <div>
+                      {ticket.status === "OPEN" ? (
+                        <span className="inline-flex items-center gap-1.5 rounded-full bg-[#3b2a1a] border border-amber-500/25 px-2.5 py-0.5 text-[9px] font-bold text-amber-500">
+                          <span className="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
+                          OPEN
+                        </span>
+                      ) : (
+                        <span className="inline-flex items-center gap-1.5 rounded-full bg-[#152332] border border-[#1e344e]/50 px-2.5 py-0.5 text-[9px] font-bold text-slate-400">
+                          <span className="h-1.5 w-1.5 rounded-full bg-slate-500"></span>
+                          CLOSED
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          </div>
+
+        </div>
+
+      </main>
+
+      <div className="mb-10 mt-10">
+        <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>
+      
+    </div>
+  );
+}

components/dashboard/overview/propertyManager.tsx

@@ -0,0 +1,168 @@
+import Button from "@/components/common/button";
+import StatCard from "@/components/common/dashStatCard";
+import InfoBanner from "@/components/common/infoBanner";
+import { ProgressBarRow } from "@/components/charts/progressBarRow";
+import { 
+  FileText, 
+  Wrench, 
+  ShieldCheck,  
+  Smile, 
+  ChevronRight, 
+  Database,
+} from "lucide-react";
+
+// Import your custom Card components
+import { Card } from "@/components/common/cardWrapper"; 
+import { CardHeader } from "@/components/common/cardHeader";
+
+
+export default function PropertyManagerPortal() {
+  return (
+    <div className=" text-slate-100 mt-15 
+    ">
+      
+      {/* --- HEADER SECTION --- */}
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4">
+        <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-bold 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-15">
+          <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">
+        <StatCard 
+          variant="icon" 
+          title="Open work orders" 
+          value="16" 
+          icon={FileText} 
+          badgeText="active" 
+          badgeClassName="text-slate-500 lowercase font-mono" 
+          iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400" 
+        />
+        
+        <StatCard 
+          variant="icon" 
+          title="SLA compliance" 
+          value="11%" 
+          icon={ShieldCheck} 
+          badgeText="this month" 
+          badgeClassName="text-emerald-400 font-mono lowercase" 
+          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
+        />
+
+        <StatCard 
+          variant="icon" 
+          title="Budget used" 
+          value="74%" 
+          icon={Database} 
+          badgeText="FY 2026" 
+          badgeClassName="text-slate-500 font-mono" 
+          iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500" 
+        />
+         
+        <StatCard 
+          variant="icon" 
+          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 mt-5 items-stretch">
+        
+        {/* Left Box: Work Order Status Tracking (7 Columns wide) */}
+        <div className="lg:col-span-7">
+          <Card className="p-4 h-full">
+            <div>
+              <CardHeader title="Work order status" />
+              
+              <div className="space-y-4 my-4">
+                <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>
+          </Card>
+        </div>
+
+        {/* Right Box: Quick Actions Accordion Links (5 Columns wide) */}
+        <div className="lg:col-span-5">
+          <Card className="p-5 ">
+            <div>
+              <CardHeader title="Quick actions" />
+              
+              <div className="space-y-2 mt-4">
+                {[
+                  "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>
+          </Card>
+        </div>
+      </div>
+
+      {/* --- BOTTOM INFO BANNER --- */}
+      <div className="mb-20">
+        <InfoBanner 
+          boldText="Manager view:" 
+          normalText="remote access, digital documentation archive, energy-saving optimisation, work-order tracking, automated billing and occupant-comfort monitoring." 
+        />
+      </div>
+
+    </div>
+  );
+}

components/dashboard/overview/serviceEngineer.tsx

@@ -0,0 +1,244 @@
+import Button from "@/components/common/button";
+import StatCard from "@/components/common/dashStatCard";
+import InfoBanner from "@/components/common/infoBanner";
+import { 
+  FileText, 
+  Wrench, 
+  Target, 
+  Calendar,   
+  Brain,
+  Check,
+} from "lucide-react";
+
+// Import your custom Card components
+import { Card } from "@/components/common/cardWrapper"; 
+import { CardHeader } from "@/components/common/cardHeader"; 
+
+export default function ServiceEngineerPortal() {
+  return (
+    <div className="my-15 text-slate-100 ">
+      
+      {/* --- HEADER SECTION --- */}
+      <div className=" flex flex-col
+       md:flex-row md:items-start md:justify-between gap-4 mb-4">
+        <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>Service Engineer</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            Service engineer portal
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Field cockpit — real-time asset metrics, actionable alerts, the PM schedule for today and verified task completion.
+          </p>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-3 self-start md:mt-15">
+          <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" />
+            Scan Qr
+          </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} />
+            My Jobs
+          </Button>
+        </div>
+      </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="My Assigned Jobs" 
+          value="6" 
+          icon={Target} 
+          badgeText="active" 
+          badgeClassName="text-slate-500 lowercase font-mono"
+          iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
+        />
+        
+        <StatCard 
+          variant="icon" 
+          title="Predictive Alerts" 
+          value="2" 
+          icon={Brain} 
+          badgeText="action" 
+          badgeClassName="text-red-400/90 lowercase font-mono"
+          iconContainerClassName="bg-[#2a171c] border-red-500/10 text-red-400"
+        />
+      
+        <StatCard 
+          variant="icon" 
+          title="PM due today" 
+          value="3" 
+          icon={Calendar} 
+          badgeText="scheduled" 
+          badgeClassName="text-slate-500 lowercase font-mono"
+          iconContainerClassName="bg-[#272115] border-amber-500/10 text-amber-400"
+        />
+         
+        <StatCard 
+          variant="icon" 
+          title="Verifies this WK" 
+          value="12" 
+          icon={Check} 
+          badgeText="closed" 
+          badgeClassName="text-emerald-400 lowercase font-mono"
+          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-emerald-400"
+        />
+      </div>
+
+      {/* --- ROW 2: SPLIT GRID (METRICS & TIMELINE) --- */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4 items-stretch">
+        
+        {/* Left Section (8 Columns): Real-time Asset Metrics */}
+        <div className="lg:col-span-8">
+          <Card className="p-5 ">
+            <CardHeader title="Real-time asset metrics" subtitle="IoT / BMS" />
+
+            <div className="overflow-x-auto mt-4">
+              <table className=" text-left text-xs">
+                <thead>
+                  <tr className="border-b border-[#142538] text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">
+                    <th className="pb-3">Asset · Parameter</th>
+                    <th className="pb-3">Reading</th>
+                    <th className="pb-3">State</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-[#142538]/50">
+                  <tr className="hover:bg-[#0d1f33]/30">
+                    <td className="py-3.5 font-semibold text-slate-200">Chiller-02 · supply temp</td>
+                    <td className="py-3.5 font-mono text-slate-300">6.8 °C</td>
+                    <td className="py-3.5">
+                      <span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
+                        <span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
+                      </span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-[#0d1f33]/30">
+                    <td className="py-3.5 font-semibold text-slate-200">AHU-07 · vibration</td>
+                    <td className="py-3.5 font-mono text-slate-300">4.1 mm/s</td>
+                    <td className="py-3.5">
+                      <span className="inline-flex items-center gap-2 text-amber-500 font-semibold">
+                        <span className="h-1.5 w-1.5 rounded-full bg-amber-500"></span> Watch
+                      </span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-[#0d1f33]/30">
+                    <td className="py-3.5 font-semibold text-slate-200">DG-01 · fuel level</td>
+                    <td className="py-3.5 font-mono text-slate-300">62%</td>
+                    <td className="py-3.5">
+                      <span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
+                        <span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
+                      </span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-[#0d1f33]/30">
+                    <td className="py-3.5 font-semibold text-slate-200">Pump-03 · pressure</td>
+                    <td className="py-3.5 font-mono text-slate-300">3.2 bar</td>
+                    <td className="py-3.5">
+                      <span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
+                        <span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </Card>
+        </div>
+
+        {/* Right Section (4 Columns): Today's Schedule Timeline */}
+        <div className="lg:col-span-4">
+          <Card className="p-5 h-full">
+            <CardHeader title="Today’s schedule" subtitle="runtime + condition based" />
+
+            {/* Timeline Node Flow */}
+            <div className="relative pl-6 space-y-8 mt-6 before:absolute before:left-[7px] before:top-2 before:bottom-2 before:w-[1px] before:bg-[#142538]">
+              
+              {/* Timeline Task 1 */}
+              <div className="relative">
+                <span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
+                <div>
+                  <h4 className="text-xs font-bold text-slate-200">Cooling tower cleaning</h4>
+                  <p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">09:00 · PPM</p>
+                </div>
+              </div>
+
+              {/* Timeline Task 2 */}
+              <div className="relative">
+                <span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
+                <div>
+                  <h4 className="text-xs font-bold text-slate-200">AHU filter check</h4>
+                  <p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">11:30 · PPM</p>
+                </div>
+              </div>
+
+              {/* Timeline Task 3 */}
+              <div className="relative">
+                <span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
+                <div>
+                  <h4 className="text-xs font-bold text-slate-200">Lift quarterly service</h4>
+                  <p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">14:00 · AMC</p>
+                </div>
+              </div>
+
+            </div>
+          </Card>
+        </div>
+
+      </div>
+
+      {/* --- ROW 3: FULL WIDTH ACTIONABLE ALERTS --- */}
+      <div className="mb-6">
+        <Card className="p-5">
+          <CardHeader title="Actionable alerts" />
+          
+          <div className="divide-y divide-[#142538]/60 mt-4">
+            {/* Alert 1 */}
+            <div className="flex items-center justify-between py-3.5">
+              <div className="flex items-start gap-3">
+                <span className="h-2 w-2 rounded-full bg-red-400 mt-1.5 shrink-0" />
+                <div>
+                  <h4 className="text-xs font-bold text-slate-200">Chiller-02 bearing wear</h4>
+                  <p className="text-[11px] text-slate-400 mt-0.5">Raise condition-based PM</p>
+                </div>
+              </div>
+              <button className="px-3.5 py-1 bg-[#11233a] hover:bg-[#1b3454] border border-[#1b3454] rounded-lg text-[11px] font-bold text-slate-200 transition-colors">
+                Act
+              </button>
+            </div>
+
+            {/* Alert 2 */}
+            <div className="flex items-center justify-between py-3.5">
+              <div className="flex items-start gap-3">
+                <span className="h-2 w-2 rounded-full bg-amber-400 mt-1.5 shrink-0" />
+                <div>
+                  <h4 className="text-xs font-bold text-slate-200">AHU-07 belt vibration</h4>
+                  <p className="text-[11px] text-slate-400 mt-0.5">Inspect within 10 days</p>
+                </div>
+              </div>
+              <button className="px-3.5 py-1 bg-[#11233a] hover:bg-[#1b3454] border border-[#1b3454] rounded-lg text-[11px] font-bold text-slate-200 transition-colors">
+                Act
+              </button>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* --- BOTTOM INFO BANNER --- */}
+      <div className="mb-20">
+        <InfoBanner 
+          boldText="Engineer view:" 
+          normalText="real-time asset metrics, actionable alerts from fault detection, runtime- and condition-based preventive maintenance, and verified task completion from the field." 
+        />
+      </div>
+
+    </div>
+  );
+}