Configure Completed is added

components/dashboard/intelligence/aiHelpDesk.tsx

@@ -0,0 +1,228 @@
+import {
+  Clock,
+  ShieldCheck,
+  Bot,
+  Settings,
+  ReceiptIndianRupee,
+} from "lucide-react";
+
+import InfoBanner from "@/components/common/infoBanner";
+import Button from "@/components/common/button";
+import NavigationTabs from "@/components/common/tabs";
+
+import { useState } from "react";
+
+import StatCard from "@/components/common/dashStatCard";
+import { Card } from "@/components/common/cardWrapper";
+import { CardHeader } from "@/components/common/cardHeader";
+import { aiHelpdeskTabs, HANDLES_DATA, LIVE_ACTIVITIES } from "@/constants/constant";
+
+// Sample mock data for Agent Activity
+
+export default function AiHelpdeskPortal() {
+  const [activeTab, setActiveTab] = useState<string>("Desk Booking");
+
+  return (
+    <div className="my-15 text-slate-100 font-sans">
+      {/* --- HEADER SECTION WITH BUTTONS --- */}
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
+        <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 className="text-slate-500">INTELLIGENCE</span>
+            <span>•</span>
+            <span className="text-slate-500">AI HELPDESK</span>
+          </div>
+
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            AI Helpdesk & automation
+          </h1>
+
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            A 24/7 agent that triages service requests, resolves routine issues, verifies vendor invoices against work orders, and enforces SLAs — with every action auditable.
+          </p>
+        </div>
+
+        {/* --- ACTION BUTTONS --- */}
+        <div className="flex items-center gap-2.5 self-start mt-10">
+          <Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-3.5 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
+            <Settings className="w-4 h-4 text-slate-300" />
+            <span>Agent settings</span>
+          </Button>
+
+          <Button className="bg-teal-400 hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-1.5 transition-colors">
+            <Bot className="w-4 h-4 stroke-[3]" />
+            <span>Ask AI</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* Navigation Tabs (Not changed) */}
+      <NavigationTabs
+        tabs={aiHelpdeskTabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        className="mb-6"
+      />
+
+      {/* --- STAT CARDS --- */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        {/* Auto-resolved */}
+        <StatCard
+          variant="icon"
+          title="Auto-resolved"
+          value="68%"
+          icon={Bot}
+          badgeText="routine requests"
+          badgeClassName="text-emerald-400 font-mono"
+          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
+        />
+
+        {/* Median first response */}
+        <StatCard
+          variant="icon"
+          title="Median first response"
+          value="41 s"
+          icon={Clock}
+          badgeText="24/7 coverage"
+          badgeClassName="text-emerald-400 font-mono"
+          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
+        />
+
+        {/* Invoices auto-verified */}
+        <StatCard
+          variant="icon"
+          title="Invoices auto-verified"
+          value="₹4.2 L"
+          icon={ReceiptIndianRupee}
+          badgeText="this month"
+          badgeClassName="text-slate-400 font-mono"
+          iconContainerClassName="bg-sky-950/40 border-sky-800/30 text-sky-400"
+        />
+
+        {/* Breaches prevented */}
+        <StatCard
+          variant="icon"
+          title="Breaches prevented"
+          value="12"
+          icon={ShieldCheck}
+          badgeText="SLA enforcement • 30 d"
+          badgeClassName="text-emerald-400 font-mono"
+          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
+        />
+      </div>
+
+      {/* --- AGENT ACTIVITY & DEFLECTION / HANDLES SECTION --- */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-8">
+        
+        {/* Left Column: Agent activity · live (8 Cols) */}
+        <Card className="lg:col-span-7  justify-start">
+          <CardHeader
+            title="Agent activity · live"
+            subtitle="auto · routed · escalated"
+          />
+
+          <div className="mt-4 divide-y divide-[#132235]/60">
+            {LIVE_ACTIVITIES.map((act, index) => (
+              <div key={index} className="py-3.5 first:pt-1 last:pb-1 flex items-start justify-between gap-4">
+                <div className="flex items-start gap-3 min-w-0">
+                  <span className="text-[11px] font-mono text-slate-500 whitespace-nowrap mt-0.5">
+                    {act.time}
+                  </span>
+                  <div className="min-w-0">
+                    <h4 className="text-xs font-bold text-white truncate">
+                      {act.title}
+                    </h4>
+                    <p className="text-[11px] text-slate-400 mt-0.5 leading-snug">
+                      {act.detail}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex flex-col items-end gap-1 shrink-0">
+                  <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold border ${act.statusColor}`}>
+                    <span className={`w-1.5 h-1.5 rounded-full ${act.dotColor}`} />
+                    {act.status}
+                  </span>
+                  <span className="text-[10px] font-mono text-slate-500">
+                    {act.conf}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+
+        {/* Right Column: Deflection & What the agent handles (5 Cols) */}
+        <div className="lg:col-span-5 flex flex-col gap-6">
+          
+          {/* Top Card: Deflection · last 7 days */}
+          <Card className=" border-[#132235] p-5 rounded-xl">
+            <CardHeader title="Deflection · last 7 days" />
+
+            <div className="mt-5 space-y-3.5">
+              {/* Item 1 */}
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-slate-400 w-28">Auto-resolved</span>
+                <div className="flex-1 mx-3 h-2 rounded-full bg-[#101e30]">
+                  <div className="h-2 rounded-full bg-teal-400" style={{ width: "68%" }} />
+                </div>
+                <span className="font-bold text-white w-8 text-right">68%</span>
+              </div>
+
+              {/* Item 2 */}
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-slate-400 w-28">Routed to team</span>
+                <div className="flex-1 mx-3 h-2 rounded-full bg-[#101e30]">
+                  <div className="h-2 rounded-full bg-blue-500" style={{ width: "24%" }} />
+                </div>
+                <span className="font-bold text-white w-8 text-right">24%</span>
+              </div>
+
+              {/* Item 3 */}
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-slate-400 w-28">Escalated to human</span>
+                <div className="flex-1 mx-3 h-2 rounded-full bg-[#101e30]">
+                  <div className="h-2 rounded-full bg-rose-400" style={{ width: "8%" }} />
+                </div>
+                <span className="font-bold text-white w-8 text-right">8%</span>
+              </div>
+            </div>
+
+            <p className="text-[11px] text-slate-400 mt-5 pt-3 border-t border-[#132235]/60 leading-relaxed">
+              80% less manual data entry — requests are captured, classified and logged by the agent.
+            </p>
+          </Card>
+
+          {/* Bottom Card: What the agent handles */}
+          <Card className=" border-[#132235] p-5 rounded-xl flex-1 justify-between">
+            <CardHeader title="What the agent handles" />
+
+            <div className="mt-4 space-y-4">
+              {HANDLES_DATA.map((item, idx) => (
+                <div key={idx} className="flex items-center justify-between">
+                  <div>
+                    <h5 className="text-xs font-bold text-white">
+                      {item.title}
+                    </h5>
+                    <p className="text-[11px] text-slate-400">
+                      {item.subtitle}
+                    </p>
+                  </div>
+                  <span className="inline-flex items-center gap-1 bg-emerald-950/60 border border-emerald-800/40 text-emerald-400 text-[9px] font-bold px-2 py-0.5 rounded-full">
+                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+                    ACTIVE
+                  </span>
+                </div>
+              ))}
+            </div>
+          </Card>
+
+        </div>
+      </div>
+
+     
+    </div>
+  );
+}

components/dashboard/intelligence/assetHealth.tsx

@@ -13,8 +13,10 @@ import {
 import Button from "@/components/common/button";
 import StatCard from "@/components/common/dashStatCard";
 import InfoBanner from '@/components/common/infoBanner';
-import {Card} from '@/components/common/cardWrapper'; // Assuming Card wrapper location
+import { Card } from '@/components/common/cardWrapper'; // Assuming Card wrapper location
 import { CardHeader } from '@/components/common/cardHeader'; // Assuming CardHeader location
+import Table from '@/components/common/dataTable';
+import { assetHealthheaders, assetHealthrows } from '@/constants/tabledata';
 
 export default function AssetHealthPortal() {
   return (
@@ -23,13 +25,13 @@ export default function AssetHealthPortal() {
       <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
         <div>
           <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono">
-          <span className="text-teal-400">Apple One — HQ Tower</span>
+            <span className="text-teal-400">Apple One — HQ Tower</span>
             <span className="text-slate-500">•</span>
             <span className="text-slate-500">INTELLIGENCE</span>
             <span className="text-slate-500">•</span>
             <span className="text-slate-500">ASSET HEALTH</span>
           </div>
-         <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
             Asset health & reliability
           </h1>
           <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
@@ -54,7 +56,7 @@ export default function AssetHealthPortal() {
       {/* --- STAT CARDS --- */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
         {/* Card 1: Predicted failures */}
-      <StatCard
+        <StatCard
           variant="icon"
           title="Fleet health index"
           value="69"
@@ -95,10 +97,84 @@ export default function AssetHealthPortal() {
         />
       </div>
 
-     
+      {/* --- MAIN CONTENT GRID (TABLE + RIGHT SIDE CARDS) --- */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        {/* Left Section: Asset Health Register Table Container */}
+        <div className="lg:col-span-2 bg-[#0b1727] border 
+        border-slate-800/80 rounded-xl p-4 flex flex-col justify-between">
+          <div>
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-base font-bold text-white tracking-tight">Asset health register</h2>
+              <span className="text-xs font-mono text-slate-500 lowercase">condition-based</span>
+            </div>
+            <Table headers={assetHealthheaders} rows={assetHealthrows}/>
+          </div>
+        </div>
 
+        {/* Right Section: Reliability & Condition Mix Side Panel */}
+        <div className="flex flex-col gap-4">
+          {/* Card 1: Reliability by group */}
+          <div className="bg-[#0b1727] border border-slate-800/80 rounded-xl p-5">
+            <h3 className="text-base font-bold text-white mb-6">Reliability by group</h3>
+            <div className="space-y-4 text-sm font-medium">
+              {/* Electrical */}
+              <div className="flex items-center justify-between gap-4">
+                <span className="text-slate-300 w-24">Electrical</span>
+                <div className="flex-1 bg-slate-800/80 h-2 rounded-full overflow-hidden">
+                  <div className="bg-amber-400 h-full rounded-full" style={{ width: '75%' }}></div>
+                </div>
+                <span className="text-amber-400 font-bold font-mono text-xs w-6 text-right">75</span>
+              </div>
+
+              {/* Plumbing */}
+              <div className="flex items-center justify-between gap-4">
+                <span className="text-slate-300 w-24">Plumbing</span>
+                <div className="flex-1 bg-slate-800/80 h-2 rounded-full overflow-hidden">
+                  <div className="bg-emerald-400 h-full rounded-full" style={{ width: '86%' }}></div>
+                </div>
+                <span className="text-emerald-400 font-bold font-mono text-xs w-6 text-right">86</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Card 2: Condition mix */}
+          <div className="bg-[#0b1727] border border-slate-800/80 rounded-xl p-5 ">
+            <h3 className="text-base font-bold text-white mb-6">Condition mix</h3>
+            <div className="space-y-4 text-sm font-medium">
+              {/* Healthy */}
+              <div className="flex items-center justify-between gap-4">
+                <span className="text-slate-300 w-24">Healthy</span>
+                <div className="flex-1 bg-slate-800/80 h-2 rounded-full overflow-hidden">
+                  <div className="bg-emerald-400 h-full rounded-full" style={{ width: '50%' }}></div>
+                </div>
+                <span className="text-slate-300 font-bold font-mono text-xs w-6 text-right">4</span>
+              </div>
+
+              {/* Watch */}
+              <div className="flex items-center justify-between gap-4">
+                <span className="text-slate-300 w-24">Watch</span>
+                <div className="flex-1 bg-slate-800/80 h-2 rounded-full overflow-hidden">
+                  <div className="bg-amber-400 h-full rounded-full" style={{ width: '50%' }}></div>
+                </div>
+                <span className="text-slate-300 font-bold font-mono text-xs w-6 text-right">4</span>
+              </div>
+
+              {/* At risk */}
+              <div className="flex items-center justify-between gap-4">
+                <span className="text-slate-300 w-24">At risk</span>
+                <div className="flex-1 bg-slate-800/80 h-2 rounded-full overflow-hidden">
+                  <div className="bg-rose-500 h-full rounded-full" style={{ width: '0%' }}></div>
+                </div>
+                <span className="text-slate-300 font-bold font-mono text-xs w-6 text-right">0</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* --- INFO BANNER --- */}
       <div className="mt-5">
-      <InfoBanner 
+        <InfoBanner 
           boldText="How it works:" 
           normalText="reliability signals (runtime, faults, vibration, PPM history) roll into a 0–100 health index. Assets that drop below threshold auto-surface here and can raise a condition-based PM in one click — replacing fixed-calendar servicing on healthy assets."
         />

components/dashboard/intelligence/connectedAssets.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { 
+  Snowflake, 
+  AlertTriangle, 
+  Zap, 
+  Check, 
+  FileCheck2,
+  Sparkles
+} from "lucide-react";
+import Button from "@/components/common/button";
+import StatCard from "@/components/common/dashStatCard";
+import Table from '@/components/common/dataTable';
+import NavigationTabs from '@/components/common/tabs';
+
+import InfoBanner from '@/components/common/infoBanner';
+import { connectedassettabs } from '@/constants/constant';
+import { connectedassetheaders, connectedassetrows } from '@/constants/tabledata';
+
+export default function ConnectedAssetPortal() {
+  const [activeTab, setActiveTab] = useState<string>('Asset Fleet');
+
+  return (
+    <div className="my-15 text-slate-100 font-sans">
+      {/* --- HEADER SECTION --- */}
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
+        <div>
+          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono">
+            <span className="text-teal-400">Apple One — HQ Tower</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">INTELLIGENCE</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">CONNECTED ASSETS</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            Connected refrigeration & HVAC
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            A vertical solution for temperature-critical assets — live setpoint monitoring, excursion response and AI-driven energy optimisation across every store and plant room.
+          </p>
+        </div>
+
+        {/* --- HEADER BUTTONS --- */}
+        <div className="flex items-center gap-3 self-start md:mt-10">
+          <Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-4 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
+            <FileCheck2 className="w-4 h-4 text-slate-300" />
+            <span>HACCP log</span>
+          </Button>
+
+          <Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
+            <Sparkles className="w-4 h-4 fill-slate-950" />
+            <span>Apply optimisation</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* --- STAT CARDS --- */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        {/* Card 1: Connected assets */}
+        <StatCard
+          variant="icon"
+          title="Connected assets"
+          value="42"
+          icon={Snowflake}
+          badgeText="cases · chillers · AHUs"
+          badgeClassName="text-slate-400 lowercase font-mono"
+          iconContainerClassName="bg-sky-950/60 border-sky-800/40 text-sky-400"
+        />
+
+        {/* Card 2: Open excursions */}
+        <StatCard
+          variant="icon"
+          title="Open excursions"
+          value="2"
+          icon={AlertTriangle}
+          badgeText="auto-responded"
+          badgeClassName="text-amber-400 lowercase font-mono"
+          iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
+        />
+
+        {/* Card 3: Energy saved */}
+        <StatCard
+          variant="icon"
+          title="Energy saved"
+          value="₹2.1 L"
+          icon={Zap}
+          badgeText="this month · AI setpoints"
+          badgeClassName="text-teal-400 lowercase font-mono"
+          iconContainerClassName="bg-teal-950/60 border-teal-800/40 text-teal-400"
+        />
+
+        {/* Card 4: Cold-chain uptime */}
+        <StatCard
+          variant="icon"
+          title="Cold-chain uptime"
+          value="99.2%"
+          icon={Check}
+          badgeText="90-day rolling"
+          badgeClassName="text-teal-400 lowercase font-mono"
+          iconContainerClassName="bg-emerald-950/50 border-emerald-800/30 text-emerald-400"
+        />
+      </div>
+
+      {/* --- NAVIGATION TABS (UNCHANGED) --- */}
+      <NavigationTabs
+        tabs={connectedassettabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        className="mb-4"
+      />
+
+      {/* --- TABLE (UNCHANGED) --- */}
+      <Table headers={connectedassetheaders} rows={connectedassetrows} />
+    </div>
+  );
+}

components/dashboard/intelligence/connectedOps.tsx

@@ -0,0 +1,265 @@
+"use client";
+import { 
+  BarChart2, 
+  Globe
+} from "lucide-react";
+      
+import { SATISFACTION_DRIVERS, TICKETS_DATA } from "@/constants/constant";
+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"; 
+import Table from "@/components/common/dataTable";
+import { connectedheaders, connectedrows } from "@/constants/tabledata";
+
+// Custom Stat Card Data matching the UI image exactly
+const STAT_CARDS_DATA = [
+  {
+    title: "SLA ADHERENCE",
+    value: "90%",
+    subtext: "target 90% · automated tracking",
+    progress: 90,
+    color: "bg-[#00c985]", // Vibrant emerald green
+    valueColor: "text-[#00c985]",
+  },
+  {
+    title: "AVG WO RESOLUTION",
+    value: "22.4 h",
+    subtext: "target < 24 h · portfolio median",
+    progress: 93,
+    color: "bg-[#2dd4bf]", // Mint / Teal
+    valueColor: "text-white",
+  },
+  {
+    title: "MANUAL DATA ENTRY",
+    value: "-80%",
+    subtext: "agent-captured requests & readings",
+    progress: 80,
+    color: "bg-[#2dd4bf]", // Mint / Teal
+    valueColor: "text-[#2dd4bf]",
+  },
+  {
+    title: "REPORTING EFFORT",
+    value: "-75%",
+    subtext: "metrics ready for review — no compiling",
+    progress: 75,
+    color: "bg-[#2dd4bf]", // Mint / Teal
+    valueColor: "text-[#2dd4bf]",
+  },
+];
+
+// Data for Risk Radar
+const RISK_RADAR_ITEMS = [
+  {
+    title: "Coastal One · vendor gap",
+    desc: "HVAC vendor completion rate fell to 61% — 8 PPMs at risk of slipping this month. Backup vendor suggested.",
+    tag: "Escalates in ~6 days",
+    tagColor: "text-rose-400",
+    dotColor: "bg-rose-500",
+    action: "Assign backup",
+  },
+  {
+    title: "Lakeside · SLA drift",
+    desc: "P2 response times trending +18% over 3 weeks; correlated with night-shift staffing.",
+    tag: "Breach risk · next week",
+    tagColor: "text-amber-400",
+    dotColor: "bg-amber-400",
+    action: "Adjust roster",
+  },
+  {
+    title: "Monsoon readiness",
+    desc: "4 of 11 waterproofing checks pending across portfolio with rains forecast in 10 days.",
+    tag: "Window closing",
+    tagColor: "text-amber-400",
+    dotColor: "bg-amber-400",
+    action: "Schedule now",
+  },
+  {
+    title: "Spares shortfall",
+    desc: "AHU belt stock below reorder level at 2 sites; next PPM cycle consumes remaining stock.",
+    tag: "3 weeks of stock left",
+    tagColor: "text-sky-400",
+    dotColor: "bg-sky-400",
+    action: "Raise PO",
+  },
+];
+
+// Data for Vendor Performance
+const VENDOR_PERFORMANCE = [
+  { name: "CoolServ HVAC", score: 94, barColor: "bg-emerald-400" },
+  { name: "Apex Elevators", score: 91, barColor: "bg-emerald-400" },
+  { name: "SecureWatch", score: 86, barColor: "bg-emerald-400" },
+  { name: "AquaPure", score: 82, barColor: "bg-amber-400" },
+  { name: "GreenScape", score: 61, barColor: "bg-rose-400" },
+];
+
+// Data for Live Context Feed
+const LIVE_FEED = [
+  { time: "now", text: "Vendor CoolServ acknowledged P1 · Chiller-02 — tenant portal updated" },
+  { time: "4 min", text: "Energy spike at Lakeside auto-linked to AHU-07 alert" },
+  { time: "11 min", text: "Coastal One WO-1221 completed · SLA met · invoice draft created" },
+  { time: "26 min", text: "Tenant satisfaction pulse: 4.4 ★ this week (+0.2)" },
+];
+
+export default function ConnectedOpsPortal() {
+  return (
+    <div className="text-[#8e9bae] font-sans my-15">
+        
+        {/* Page Header Section */}
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <div>
+            <div className="flex items-center gap-2 text-[11px] font-medium tracking-wider text-[#3de0c4]">
+              <span>APPLE ONE — HQ TOWER</span>
+              <span className="text-[#3a495e]">•</span>
+              <span className="text-[#596980]">INTELLIGENCE</span>
+              <span className="text-[#3a495e]">•</span>
+              <span className="text-[#596980]">CONNECTED OPS</span>
+            </div>
+            <h1 className="text-3xl font-bold text-white tracking-tight mt-1.5">Connected operations</h1>
+            <p className="mt-2 text-sm text-[#7e8c9f] max-w-2xl leading-relaxed">
+              Every team, vendor and system on the same live context — portfolio-wide work orders, costs, SLAs and vendor performance in one place, with risks flagged before they escalate.
+            </p>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex items-center gap-3">
+            <Button
+              className="flex items-center gap-2 rounded-lg border border-[#1b2a3d] bg-[#0c1626] px-4 py-2 text-xs font-semibold text-white hover:bg-[#132238] transition">
+              <BarChart2 size={14} className="text-[#3de0c4]" />
+              Review pack
+            </Button>
+            <Button
+              className="flex items-center gap-1.5 rounded-lg bg-[#3de0c4] hover:bg-[#34ceb3] px-4 py-2 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
+              <Globe size={14} strokeWidth={2.5} />
+              Share live board
+            </Button>
+          </div>
+        </div>
+
+        {/* --- STAT CARD GRID (REPLACED WITH UI MATCHING CARDS) --- */}
+        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {STAT_CARDS_DATA.map((card, idx) => (
+            <div
+              key={idx}
+              className="bg-[#0b1726] border border-[#16273b] rounded-xl p-5 flex flex-col justify-between h-[155px]"
+            >
+              <div>
+                <p className="text-[10px] font-bold tracking-wider text-[#63758e] uppercase">
+                  {card.title}
+                </p>
+                <h2 className={`text-3xl font-bold mt-1.5 tracking-tight ${card.valueColor}`}>
+                  {card.value}
+                </h2>
+              </div>
+
+              <div>
+                <p className="text-[11px] text-[#63758e] mb-3">
+                  {card.subtext}
+                </p>
+                {/* Progress Bar */}
+                <div className="w-full bg-[#132338] h-[3px] rounded-full overflow-hidden">
+                  <div
+                    className={`h-full rounded-full ${card.color}`}
+                    style={{ width: `${card.progress}%` }}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* --- TABLE SECTION --- */}
+        <div className="mt-6">
+          <Card>
+            <CardHeader title="Portfolio pulse" subtitle="live · all sites · one context" />
+            <div className="mt-4">
+              <Table headers={connectedheaders} rows={connectedrows} />
+            </div>
+          </Card>
+        </div>
+
+        {/* --- BELOW TABLE SECTION (RISK RADAR, VENDOR PERFORMANCE & LIVE FEED) --- */}
+        <div className="mt-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
+          {/* Left Column: Risk Radar (7 Cols) */}
+          <div className="lg:col-span-7">
+            <Card >
+              <CardHeader title="Risk radar · before it escalates" subtitle="predictive · ops data" />
+              <div className="mt-5 divide-y divide-[#132235]/60">
+                {RISK_RADAR_ITEMS.map((item, index) => (
+                  <div key={index} className="py-3.5 first:pt-0 last:pb-0 flex items-start justify-between gap-4">
+                    <div className="flex items-start gap-3">
+                      <span className={`w-2 h-2 rounded-full mt-1.5 shrink-0 ${item.dotColor}`} />
+                      <div>
+                        <h4 className="text-xs font-bold text-white tracking-wide">
+                          {item.title}
+                        </h4>
+                        <p className="text-[11px] text-[#7e8c9f] mt-1 leading-relaxed max-w-lg">
+                          {item.desc}
+                        </p>
+                        <p className={`text-[10px] font-mono mt-1.5 ${item.tagColor}`}>
+                          ⏱ {item.tag}
+                        </p>
+                      </div>
+                    </div>
+                    <Button className="shrink-0 bg-[#0c1827] hover:bg-[#142337] border border-[#182a40] text-slate-200 text-[11px] px-3 py-1 rounded-md transition font-medium">
+                      {item.action}
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          </div>
+
+          {/* Right Column: Vendor Performance & Live Context Feed (5 Cols) */}
+          <div className="lg:col-span-5 flex flex-col gap-6">
+            {/* Top Right: Vendor Performance */}
+            <Card >
+              <CardHeader title="Vendor performance" subtitle="completion × SLA × rating" />
+              <div className="mt-5 space-y-3.5">
+                {VENDOR_PERFORMANCE.map((vendor, idx) => (
+                  <div key={idx} className="flex items-center justify-between text-xs gap-3">
+                    <span className="text-[#8e9bae] w-28 truncate font-medium">{vendor.name}</span>
+                    <div className="flex-1 h-2 rounded-full bg-[#101e30] overflow-hidden">
+                      <div className={`h-2 rounded-full ${vendor.barColor}`} style={{ width: `${vendor.score}%` }} />
+                    </div>
+                    <span className="font-mono font-bold text-white w-6 text-right">{vendor.score}</span>
+                  </div>
+                ))}
+              </div>
+              <p className="text-[11px] text-[#596980] mt-5 pt-3 border-t border-[#132235]/60">
+                GreenScape flagged — also holds the disputed invoice in AI Helpdesk.
+              </p>
+            </Card>
+
+            {/* Bottom Right: Live Context Feed */}
+            <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl flex-1">
+              <CardHeader title="Live context feed" />
+              <div className="mt-5 divide-y divide-[#132235]/60">
+                {LIVE_FEED.map((feed, idx) => (
+                  <div key={idx} className="py-3 first:pt-0 last:pb-0 flex items-start gap-4">
+                    <span className="text-[10px] font-mono text-[#596980] w-10 shrink-0 pt-0.5">
+                      {feed.time}
+                    </span>
+                    <p className="text-xs text-slate-200 font-medium leading-snug">
+                      {feed.text}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          </div>
+        </div>
+
+      {/* --- INFO BANNER --- */}
+      <div className="mt-8 relative">
+        <InfoBanner 
+          boldText="How it works:" 
+          normalText="connected ops unifies maintenance logs, invoice verification, and operational KPIs across sites to eliminate manual reporting and surface SLA risks early." 
+        />
+      </div>
+      
+    </div>
+  );
+}

components/dashboard/intelligence/energybenchmarking.tsx

@@ -0,0 +1,203 @@
+"use client";
+import { 
+  Zap, 
+  Leaf, 
+  AlertTriangle, 
+  Database,
+  Sliders, 
+  Download,
+  Sparkles
+} 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 EnergyBenchmarkingPortal() {
+  return (
+    <div className="text-[#8e9bae] font-sans my-15">
+    
+
+        
+        {/* Page Header Section */}
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <div>
+            <div className="flex items-center gap-2 text-[11px] font-medium tracking-wider text-[#3de0c4]">
+              <span>APPLE ONE — HQ TOWER</span>
+              <span className="text-[#3a495e]">•</span>
+              <span className="text-[#596980]">INTELLIGENCE</span>
+              <span className="text-[#3a495e]">•</span>
+              <span className="text-[#596980]">BENCHMARKING</span>
+            </div>
+            <h1 className="text-3xl font-bold text-white tracking-tight mt-1.5">Portfolio energy benchmarking</h1>
+            <p className="mt-2 text-sm text-[#7e8c9f] max-w-2xl leading-relaxed">
+              Rank every site against a common baseline (EUI, kWh/m²/yr), spotlight the best performer, and quantify the savings if the rest caught up.
+            </p>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex items-center gap-3">
+            <Button
+              className="flex items-center gap-2 rounded-lg border border-[#1b2a3d] bg-[#0c1626] px-4 py-2 text-xs font-semibold text-white hover:bg-[#132238] transition">
+              <Sliders size={14} className="text-[#3de0c4]" />
+              Set baseline
+            </Button>
+            <Button
+              className="flex items-center gap-1.5 rounded-lg bg-[#3de0c4] hover:bg-[#34ceb3] px-4 py-2 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
+              <Download size={14} strokeWidth={2.5} />
+              Export
+            </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="Portfolio EUI" value="144" icon={Zap} 
+            badgeText="kWh/m²/yr" badgeClassName="text-[#596980] lowercase text-[11px]" 
+            iconContainerClassName="bg-[#0d2136] border-[#183350] text-[#3b82f6]" 
+          />
+          
+          <StatCard 
+            variant="icon" title="Best performer" value="Annexe" icon={Leaf} 
+            badgeText="124 EUI" badgeClassName="text-[#3de0c4] font-semibold text-[11px]" 
+            iconContainerClassName="bg-[#0b2823] border-[#13423a] text-[#3de0c4]" 
+          />
+
+          <StatCard 
+            variant="icon" title="Highest intensity" value="HQ Tower" icon={AlertTriangle} 
+            badgeText="163 EUI" badgeClassName="text-[#f87171] font-semibold text-[11px]" 
+            iconContainerClassName="bg-[#2a1318] border-[#481c24] text-[#f87171]" 
+          />
+          
+          <StatCard 
+            variant="icon" title="Savings if matched" value="₹125k" icon={Database} 
+            badgeText="best performer" badgeClassName="text-[#3de0c4] font-semibold text-[11px]" 
+            iconContainerClassName="bg-[#0b2823] border-[#13423a] text-[#3de0c4]" 
+          />
+        </div>
+
+        {/* --- TWO COLUMNS (SITE BENCHMARK & END-USE BREAKDOWN) --- */}
+        <div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-6">
+          
+          {/* Left Column: Site Benchmark */}
+          <div className="lg:col-span-7">
+            <Card className="p-5 bg-[#0a121e] border-[#172538] rounded-xl">
+              <CardHeader title="Site benchmark" subtitle="vs 150 baseline" />
+
+              <div className="mt-6 space-y-6">
+                {/* Annexe Bar */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-xs font-semibold">
+                    <div className="flex items-center gap-2">
+                      <span className="text-white">Annexe</span>
+                      <span className="bg-[#0b2823] text-[#3de0c4] text-[9px] font-bold px-1.5 py-0.5 rounded border border-[#13423a]">BEST</span>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <span className="font-bold text-[#f59e0b]">124</span>
+                      <span className="text-[#3de0c4] text-[11px]">-17%</span>
+                    </div>
+                  </div>
+                  <div className="h-2.5 w-full rounded-full bg-[#111e30]">
+                    <div className="h-2.5 rounded-full bg-[#f59e0b] transition-all duration-500" style={{ width: "70%" }} />
+                  </div>
+                </div>
+
+                {/* HQ Tower Bar */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-xs font-semibold">
+                    <span className="text-white">HQ Tower</span>
+                    <div className="flex items-center gap-1.5">
+                      <span className="font-bold text-[#f87171]">163</span>
+                      <span className="text-[#f87171] text-[11px]">+9%</span>
+                    </div>
+                  </div>
+                  <div className="h-2.5 w-full rounded-full bg-[#111e30]">
+                    <div className="h-2.5 rounded-full bg-[#f87171] transition-all duration-500" style={{ width: "90%" }} />
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </div>
+
+          {/* Right Column: End-use Breakdown */}
+          <div className="lg:col-span-5">
+            <Card className="p-5 bg-[#0a121e] border-[#172538] rounded-xl h-full flex flex-col justify-between">
+              <div>
+                <CardHeader title="End-use breakdown" subtitle="portfolio" />
+
+                <div className="mt-4 space-y-3.5">
+                  {/* Item 1 */}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className="text-[#8e9bae] w-24">HVAC</span>
+                    <div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
+                      <div className="h-2 rounded-full bg-[#3de0c4]" style={{ width: "52%" }} />
+                    </div>
+                    <span className="font-bold text-white w-8 text-right">52%</span>
+                  </div>
+
+                  {/* Item 2 */}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className="text-[#8e9bae] w-24">Lighting</span>
+                    <div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
+                      <div className="h-2 rounded-full bg-[#3b82f6]" style={{ width: "18%" }} />
+                    </div>
+                    <span className="font-bold text-white w-8 text-right">18%</span>
+                  </div>
+
+                  {/* Item 3 */}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className="text-[#8e9bae] w-24">Plug loads</span>
+                    <div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
+                      <div className="h-2 rounded-full bg-[#f59e0b]" style={{ width: "14%" }} />
+                    </div>
+                    <span className="font-bold text-white w-8 text-right">14%</span>
+                  </div>
+
+                  {/* Item 4 */}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className="text-[#8e9bae] w-24">Lifts & pumps</span>
+                    <div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
+                      <div className="h-2 rounded-full bg-[#10b981]" style={{ width: "11%" }} />
+                    </div>
+                    <span className="font-bold text-white w-8 text-right">11%</span>
+                  </div>
+
+                  {/* Item 5 */}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className="text-[#8e9bae] w-24">Other</span>
+                    <div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
+                      <div className="h-2 rounded-full bg-[#475569]" style={{ width: "5%" }} />
+                    </div>
+                    <span className="font-bold text-white w-8 text-right">5%</span>
+                  </div>
+                </div>
+              </div>
+
+              <p className="text-[11px] text-[#7e8c9f] mt-4 pt-3 border-t border-[#172538]/60 leading-relaxed">
+                HVAC dominates intensity — the fastest lever for closing the gap to <span className="font-bold text-white">Annexe</span>.
+              </p>
+            </Card>
+          </div>
+
+        </div>
+
+      
+
+      {/* Footer / Ask AI Floating Banner */}
+      <div className="mt-8 relative">
+        <InfoBanner 
+          boldText="How it works:" 
+          normalText="normalised EUI puts every site on one scale regardless of size. Deviation from baseline flags outliers; replicating the best performer's operating strategy across the portfolio is the quick win." 
+        />
+
+      </div>
+      
+    </div>
+  );
+}

components/dashboard/intelligence/gpsTracking.tsx

@@ -0,0 +1,220 @@
+import { useState } from 'react';
+import { 
+  ShieldCheck,
+  MapPin,
+  Check,
+  Clock,
+  BarChart2, 
+  Map
+} from "lucide-react";
+import Button from "@/components/common/button";
+import StatCard from "@/components/common/dashStatCard";
+import NavigationTabs from '@/components/common/tabs';
+
+// Card Components
+import { Card } from "@/components/common/cardWrapper"; 
+import { CardHeader } from "@/components/common/cardHeader"; 
+
+import InfoBanner from '@/components/common/infoBanner';
+import { gpsTrackingtabs } from '@/constants/constant';
+
+// Staff Table Data
+const STAFF_DATA = [
+  { name: "Ravi Kumar", role: "M&E Technician", zone: "Chiller plant", inTime: "08:02", hrs: "6.4", status: "ON-SITE", statusType: "success" },
+  { name: "Sana Iqbal", role: "HVAC Engineer", zone: "AHU room L7", inTime: "08:15", hrs: "6.1", status: "ON-SITE", statusType: "success" },
+  { name: "Mohan D.", role: "Electrician", zone: "En route", inTime: "—", hrs: "0", status: "EN-ROUTE", statusType: "warning" },
+  { name: "Lakshmi N.", role: "Housekeeping Lead", zone: "Lobby + L2", inTime: "07:48", hrs: "6.7", status: "ON-SITE", statusType: "success" },
+  { name: "Arjun P.", role: "Plumber", zone: "Off-site", inTime: "—", hrs: "0", status: "OFF-SITE", statusType: "neutral" },
+  { name: "Fatima R.", role: "BMS Operator", zone: "Control room", inTime: "06:55", hrs: "7.6", status: "ON-SITE", statusType: "success" },
+];
+
+export default function GpsTrackingPortal() {
+  const [activeTab, setActiveTab] = useState<string>('Live tracking');
+
+  return (
+    <div className="my-15 text-slate-100 font-sans">
+      {/* --- HEADER SECTION --- */}
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
+        <div>
+          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono">
+            <span className="text-teal-400">Apple One — HQ Tower</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">INTELLIGENCE</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">GPS TRACKING</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            GPS staff tracking & geo-fencing
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Live geo-tagged locations, geo-fence attendance validation, route history and site entry / exit logs — battery-optimised with cell-tower fallback and mobile-app capture.
+          </p>
+        </div>
+
+        {/* --- HEADER BUTTONS --- */}
+        <div className="flex items-center gap-3 self-start md:mt-10">
+          <Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-4 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
+            <Map className="w-4 h-4 text-slate-300" />
+            <span>Geo-fences</span>
+          </Button>
+
+          <Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
+            <BarChart2 className="w-4 h-4 stroke-[2.5]" />
+            <span>Export</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* --- STAT CARDS --- */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <StatCard
+          variant="icon"
+          title="On-site now"
+          value="4"
+          icon={ShieldCheck}
+          badgeText=""
+          badgeClassName="text-emerald-400 lowercase font-mono text-xs"
+          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
+          subtitle=""
+        />
+
+        <StatCard
+          variant="icon"
+          title="En route"
+          value="1"
+          icon={MapPin}
+          badgeText=""
+          badgeClassName="text-slate-400 lowercase font-mono text-xs"
+          iconContainerClassName="bg-sky-950/40 border-sky-800/30 text-sky-400"
+          subtitle=""
+        />
+
+        <StatCard
+          variant="icon"
+          title="Auto check-ins"
+          value="4"
+          icon={Check}
+          badgeText=""
+          badgeClassName="text-teal-400 lowercase font-mono text-xs"
+          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
+          subtitle=""
+        />
+
+        <StatCard
+          variant="icon"
+          title="Avg on-site"
+          value="6.7 h"
+          icon={Clock}
+          badgeText=""
+          badgeClassName="text-slate-400 lowercase font-mono text-xs"
+          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
+          subtitle=""
+        />
+      </div>
+
+      {/* --- NAVIGATION TABS --- */}
+      <NavigationTabs
+        tabs={gpsTrackingtabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        className="mb-4"
+      />
+
+      {/* --- MAP & STAFF STATUS SECTION BELOW TABS --- */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6">
+        {/* Left: Live Staff Map */}
+        <div className="lg:col-span-7">
+          <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between min-h-[380px]">
+            <CardHeader title="Live staff map · Apple One — HQ Tower" subtitle="GPS · 1s refresh" />
+            
+            {/* Map Canvas Visual */}
+            <div className="relative flex-1 mt-4 rounded-lg border border-teal-500/20 bg-[#060e17] overflow-hidden p-4 flex items-center justify-center">
+              {/* Grid Background Lines */}
+              <div 
+                className="absolute inset-0 opacity-15"
+                style={{
+                  backgroundImage: `radial-gradient(#2dd4bf 1px, transparent 1px)`,
+                  backgroundSize: '20px 20px'
+                }}
+              />
+
+              {/* Geo-Fence Boundary Box */}
+              <div className="relative w-[85%] h-[70%] border-2 border-dashed border-teal-400/60 rounded-xl p-2">
+                <span className="absolute -top-3 left-4 bg-[#060e17] px-2 text-[10px] font-mono text-teal-400 tracking-wider">
+                  GEO-FENCE · SITE BOUNDARY
+                </span>
+
+                {/* On-Site Staff Dots */}
+                <div className="absolute top-[35%] left-[25%] w-3 h-3 bg-teal-400 rounded-full shadow-[0_0_10px_#2dd4bf]" />
+                <div className="absolute top-[50%] left-[45%] w-3 h-3 bg-teal-400 rounded-full shadow-[0_0_10px_#2dd4bf]" />
+                <div className="absolute top-[70%] left-[65%] w-3 h-3 bg-teal-400 rounded-full shadow-[0_0_10px_#2dd4bf]" />
+                <div className="absolute top-[30%] left-[80%] w-3 h-3 bg-teal-400 rounded-full shadow-[0_0_10px_#2dd4bf]" />
+              </div>
+
+              {/* En-Route Staff Dot (Outside Fence) */}
+              <div className="absolute left-6 top-1/2 -translate-y-1/2 w-3.5 h-3.5 bg-amber-400 rounded-full shadow-[0_0_10px_#fbbf24]" />
+            </div>
+          </Card>
+        </div>
+
+        {/* Right: Staff Status Table */}
+        <div className="lg:col-span-5">
+          <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between">
+            <CardHeader title="Staff status" subtitle="6 tracked" />
+            
+            <div className="mt-4 overflow-x-auto">
+              <table className="w-full text-left text-xs">
+                <thead>
+                  <tr className="border-b border-[#132235] text-[10px] font-mono text-slate-500 uppercase tracking-wider">
+                    <th className="pb-2 font-medium">NAME</th>
+                    <th className="pb-2 font-medium">ROLE</th>
+                    <th className="pb-2 font-medium">ZONE</th>
+                    <th className="pb-2 font-medium">IN</th>
+                    <th className="pb-2 font-medium">HRS</th>
+                    <th className="pb-2 font-medium text-right">STATUS</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-[#132235]/60">
+                  {STAFF_DATA.map((staff, idx) => (
+                    <tr key={idx} className="hover:bg-slate-800/20 transition-colors">
+                      <td className="py-2.5 font-semibold text-slate-200 pr-2">{staff.name}</td>
+                      <td className="py-2.5 text-slate-400 max-w-[90px] truncate pr-2">{staff.role}</td>
+                      <td className="py-2.5 text-slate-300 pr-2">{staff.zone}</td>
+                      <td className="py-2.5 font-mono text-slate-400">{staff.inTime}</td>
+                      <td className="py-2.5 font-mono text-slate-300">{staff.hrs}</td>
+                      <td className="py-2.5 text-right">
+                        <span 
+                          className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-mono font-semibold uppercase ${
+                            staff.statusType === 'success' 
+                              ? 'bg-emerald-950/80 text-emerald-400 border border-emerald-800/50' 
+                              : staff.statusType === 'warning'
+                              ? 'bg-amber-950/80 text-amber-400 border border-amber-800/50'
+                              : 'bg-slate-800/80 text-slate-400 border border-slate-700/50'
+                          }`}
+                        >
+                          <span className={`w-1 h-1 rounded-full ${
+                            staff.statusType === 'success' ? 'bg-emerald-400' :
+                            staff.statusType === 'warning' ? 'bg-amber-400' : 'bg-slate-400'
+                          }`} />
+                          {staff.status}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </Card>
+        </div>
+      </div>
+
+      <div className="mt-5">
+        <InfoBanner 
+          boldText='Geo-fencing:' 
+          normalText='crossing a site boundary auto-marks check-in / check-out; GPS sampling adapts to battery and signal, with a cell-tower fallback when satellite accuracy drops. Click a technician to view their route.'
+        />
+      </div>
+      
+    </div>
+  );
+}

components/dashboard/intelligence/sustainability.tsx

@@ -0,0 +1,291 @@
+import { useState } from 'react';
+import { 
+  Leaf, 
+  Activity, 
+  ClipboardCheck, 
+  Star, 
+  BarChart2, 
+  Plus, 
+  ShieldCheck,
+  Clock
+} from "lucide-react";
+import Button from "@/components/common/button";
+import StatCard from "@/components/common/dashStatCard";
+import NavigationTabs from '@/components/common/tabs';
+
+// Card Components
+import { Card } from "@/components/common/cardWrapper"; 
+import { CardHeader } from "@/components/common/cardHeader"; 
+
+// Custom BarChart Import
+import BarChart from "@/components/charts/barchart";
+
+import InfoBanner from '@/components/common/infoBanner';
+import { sustainabilitytabs } from '@/constants/constant';
+
+// Sample Bar Chart Data for Carbon Emissions
+const CARBON_EMISSIONS_DATA = [
+  { month: 'Jan', height: 'h-32' },
+  { month: 'Feb', height: 'h-32' },
+  { month: 'Mar', height: 'h-32' },
+  { month: 'Apr', height: 'h-32' },
+  { month: 'May', height: 'h-32' },
+  { month: 'Jun', height: 'h-28' },
+];
+
+// Emission Sources Progress Data
+const EMISSION_SOURCES = [
+  { name: "Purchased electricity", percentage: "58%", width: "w-[58%]", color: "bg-sky-400" },
+  { name: "DG / fuel combustion", percentage: "21%", width: "w-[21%]", color: "bg-amber-400" },
+  { name: "Refrigerants (fugitive)", percentage: "12%", width: "w-[12%]", color: "bg-rose-400" },
+  { name: "Water & waste", percentage: "9%", width: "w-[9%]", color: "bg-slate-400" },
+];
+
+export default function SustainabilityPortal() {
+  const [activeTab, setActiveTab] = useState<string>('ESG Data Hub');
+
+  return (
+    <div className="my-15 text-slate-100 font-sans">
+      {/* --- HEADER SECTION --- */}
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
+        <div>
+          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono">
+            <span className="text-teal-400">Apple One — HQ Tower</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">INTELLIGENCE</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">SUSTAINABILITY</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            ESG One — sustainability platform
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Every environmental, social and governance metric — carbon, energy, water, waste, safety, DEI, compliance — consolidated on one live platform with framework-ready reporting.
+          </p>
+        </div>
+
+        {/* --- HEADER BUTTONS --- */}
+        <div className="flex items-center gap-3 self-start md:mt-10">
+          <Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-4 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
+            <BarChart2 className="w-4 h-4 text-slate-300" />
+            <span>Framework reports</span>
+          </Button>
+
+          <Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
+            <Plus className="w-4 h-4 stroke-[3]" />
+            <span>New target</span>
+          </Button>
+        </div>
+      </div>
+
+     {/* --- STAT CARDS --- */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        {/* Card 1: 118 t */}
+        <StatCard
+          variant="icon"
+          title=""
+          value="118 t"
+          icon={Leaf}
+          badgeText="-6% vs avg"
+          badgeClassName="text-emerald-400 font-mono text-xs"
+          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
+          subtitle="CO₂e this month · Scope 1+2"
+        />
+
+        {/* Card 2: 214 */}
+        <StatCard
+          variant="icon"
+          title=""
+          value="214"
+          icon={Activity}
+          badgeText="live"
+          badgeClassName="text-slate-400 lowercase font-mono text-xs"
+          iconContainerClassName="bg-sky-950/40 border-sky-800/30 text-sky-400"
+          subtitle="Live data streams · meters + IoT"
+        />
+
+        {/* Card 3: 5 */}
+        <StatCard
+          variant="icon"
+          title=""
+          value="5"
+          icon={ClipboardCheck}
+          badgeText="ready"
+          badgeClassName="text-teal-400 lowercase font-mono text-xs"
+          iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
+          subtitle="Frameworks ready · GRI, BRSR, CSRD..."
+        />
+
+        {/* Card 4: B+ */}
+        <StatCard
+          variant="icon"
+          title=""
+          value="B+"
+          icon={Star}
+          badgeText="improving"
+          badgeClassName="text-amber-400 lowercase font-mono text-xs"
+          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
+          subtitle="ESG rating · on track to A-"
+        />
+      </div>
+
+      {/* --- NAVIGATION TABS --- */}
+      <NavigationTabs
+        tabs={sustainabilitytabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        className="mb-4"
+      />
+
+      {/* --- ESG CARDS SECTION BELOW TABS --- */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+        {/* Environmental Card */}
+        <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
+          <CardHeader title="Environmental" subtitle="metered · live" />
+          <div className="mt-4 space-y-3.5 text-xs">
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Energy</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">1.42 GWh</span>
+                <span className="text-emerald-400">-4.2%</span>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Water</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">18,400 kL</span>
+                <span className="text-emerald-400">-2.8%</span>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Waste diverted</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">61%</span>
+                <span className="text-emerald-400">+5.0%</span>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Refrigerant leaks</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">2 events</span>
+                <span className="text-amber-400">+1</span>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Social Card */}
+        <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
+          <CardHeader title="Social" subtitle="people & occupants" />
+          <div className="mt-4 space-y-3.5 text-xs">
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Safety · LTIFR</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">0.42</span>
+                <span className="text-emerald-400">-0.11</span>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Training hours</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">1,240</span>
+                <span className="text-emerald-400">+180</span>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Tenant satisfaction</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">4.4 / 5</span>
+                <span className="text-emerald-400">+0.2</span>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Workforce diversity</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">34%</span>
+                <span className="text-emerald-400">+2%</span>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Governance Card */}
+        <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
+          <CardHeader title="Governance" subtitle="compliance & ethics" />
+          <div className="mt-4 space-y-3.5 text-xs">
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Statutory compliance</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">98%</span>
+                <span className="text-teal-400">2 open</span>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Audit findings closed</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">91%</span>
+                <span className="text-teal-400">on time</span>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Vendor code-of-conduct</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">87%</span>
+                <span className="text-amber-400">signed</span>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-slate-300 font-medium">Data-privacy incidents</span>
+              <div className="flex items-center gap-3 font-mono">
+                <span className="text-white font-bold">0</span>
+                <span className="text-emerald-400">90 days</span>
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* --- CARBON EMISSIONS BAR CHART & EMISSION SOURCES SECTION --- */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6">
+        {/* Left: Carbon Emissions BarChart */}
+        <div className="lg:col-span-7">
+          <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between">
+            <CardHeader title="Carbon emissions · tCO₂e" subtitle="2026 · trending down" />
+            <div className="mt-6">
+              <BarChart data={CARBON_EMISSIONS_DATA} />
+            </div>
+          </Card>
+        </div>
+
+        {/* Right: Emission Sources */}
+        <div className="lg:col-span-5">
+          <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between">
+            <CardHeader title="Emission sources" subtitle="drill down by site / meter" />
+            <div className="mt-5 space-y-4">
+              {EMISSION_SOURCES.map((source, idx) => (
+                <div key={idx} className="flex items-center justify-between text-xs gap-3">
+                  <span className="text-slate-300 w-36 leading-snug font-medium">{source.name}</span>
+                  <div className="flex-1 h-2 rounded-full bg-[#101e30] overflow-hidden">
+                    <div className={`h-2 rounded-full ${source.color} ${source.width}`} />
+                  </div>
+                  <span className="font-mono font-bold text-white w-10 text-right">{source.percentage}</span>
+                </div>
+              ))}
+            </div>
+            <p className="text-[11px] text-[#596980] mt-6 pt-3 border-t border-[#132235]/60 leading-relaxed">
+              Every figure traces back to a meter, sensor or signed record — audit-ready by construction.
+            </p>
+          </Card>
+        </div>
+      </div>
+
+      <div className="mt-5">
+        <InfoBanner 
+          boldText='One platform:' 
+          normalText='E, S and G metrics share the same live data spine as operations — a chiller repair updates energy, refrigerant and compliance records in the same thread.'
+        />
+      </div>
+      
+    </div>
+  );
+}