table constant data is added and Compliance Safety completed

app/dashboard/compliance-safety/auditAndSurvey/page.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import AuditSurveyPortal from "@/components/dashboard/compliance/auditAndSurvey";
+
+
+
+
+
+
+
+
+
+export default function AuditSurveyPage() {
+  return (
+    
+
+        <div className="p-8 mx-3">
+           <AuditSurveyPortal/>
+        
+        </div>
+   
+  );
+}

app/dashboard/compliance-safety/contracts/page.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import ContractsPortal from "@/components/dashboard/compliance/contracts";
+
+
+
+
+
+
+export default function ContractsPage() {
+  return (
+    
+
+        <div className="p-8 mx-3">
+           <ContractsPortal/>
+        
+        </div>
+   
+  );
+}

app/dashboard/compliance-safety/fireAndSafety/page.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import FireSafetyPortal from "@/components/dashboard/compliance/fireAndSafety";
+
+
+
+
+
+
+
+
+export default function FireSafetyPage() {
+  return (
+    
+
+        <div className="p-8 mx-3">
+           <FireSafetyPortal/>
+        
+        </div>
+   
+  );
+}

app/dashboard/compliance-safety/statutoryCompliance/page.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import StatutoryCompliancePortal from "@/components/dashboard/compliance/statutoryCompliance";
+
+
+
+
+
+export default function ComplianceSafetyPage() {
+  return (
+    
+
+        <div className="p-8 mx-3">
+           <StatutoryCompliancePortal/>
+        
+        </div>
+   
+  );
+}

app/dashboard/compliance-safety/training/page.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import TrainingPortal from "@/components/dashboard/compliance/training";
+
+
+
+
+
+
+
+
+export default function TrainingPage() {
+  return (
+    
+
+        <div className="p-8 mx-3">
+           <TrainingPortal/>
+        
+        </div>
+   
+  );
+}

app/dashboard/compliance-safety/wasteAndEsg/page.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import WasteESGPortal from "@/components/dashboard/compliance/wasteAndEsg";
+
+
+
+
+
+
+
+
+export default function WasteEsGPage() {
+  return (
+    
+
+        <div className="p-8 mx-3">
+           <WasteESGPortal/>
+        
+        </div>
+   
+  );
+}

app/dashboard/intelligence/aiPredictive/page.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import AiPredictivePortal from "@/components/dashboard/intelligence/aiAndPredictive";
+
+
+
+
+
+
+export default function AiPredictivePage() {
+  return (
+    
+
+        <div className="p-8 mx-3">
+           <AiPredictivePortal/>
+        
+        </div>
+   
+  );
+}

app/dashboard/intelligence/assetHealth/page.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+
+import AssetHealthPortal from "@/components/dashboard/intelligence/assetHealth";
+
+
+
+
+
+
+export default function AssetHealthPage() {
+  return (
+    
+
+        <div className="p-8 mx-3">
+           <AssetHealthPortal/>
+        
+        </div>
+   
+  );
+}

app/dashboard/layout.tsx

@@ -9,7 +9,7 @@ export default function DashboardLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="min-h-screen bg-[#071321] text-white flex">
+    <div className=" bg-[#071321] text-white ">
       {/* Shared Sidebar */}
       <Sidebar />
 

components/common/actionButton.tsx

@@ -0,0 +1,35 @@
+import { List, Pencil, Power, QrCode, ShieldCheck } from "lucide-react";
+import Button from "./button";
+
+export default function ActionButtons () 
+ {
+ return(
+ 
+  <div className="flex items-center justify-center gap-1.5">
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <Pencil size={13} />
+    </Button>
+
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <List size={13} />
+    </Button>
+
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <ShieldCheck size={13} />
+    </Button>
+
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <QrCode size={13} />
+    </Button>
+
+    <Button
+      className='flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 hover:bg-slate-800 transition ${
+      
+      '
+    >
+      <Power size={13} />
+    </Button>
+  </div>
+ );
+ }
+  

components/common/infoBanner.tsx

@@ -10,9 +10,9 @@ export default function InfoBanner({
     <div className="w-full
  rounded-xl border border-l-4 border-[#142538]
   border-l-[#10b981] bg-[#091624] 
-  p-4 flex items-center shadow-sm">
+  p-2 flex items-center shadow-sm">
     
-        <p className="text-sm font-medium text-slate-300 tracking-wide leading-relaxed">
+        <p className="text-xs font-medium text-slate-300 tracking-wide leading-relaxed">
           {boldText && <strong className="text-white font-bold mr-1.5">{boldText}</strong>}
           {normalText}
         </p>

components/common/statusBadge.tsx

@@ -0,0 +1,14 @@
+export const StatusBadge = ({
+  text,
+  color,
+}: {
+  text: string;
+  color: string;
+}) => (
+  <span
+    className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
+  >
+    <span className="h-1.5 w-1.5 rounded-full bg-current" />
+    {text}
+  </span>
+);

components/dashboard/compliance/auditAndSurvey.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { 
+  ClipboardCheck, 
+  Clock, 
+  AlertTriangle, 
+  Activity, 
+  CheckSquare, 
+  Plus 
+} from "lucide-react";
+import Button from "@/components/common/button";
+import StatCard from "@/components/common/dashStatCard";
+import InfoBanner from '@/components/common/infoBanner';
+import Table from '@/components/common/dataTable';
+import { auditheaders, auditrows } from '@/constants/tabledata';
+
+
+
+
+export default function AuditSurveyPortal() {
+  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">COMPLIANCE</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">AUDIT & SURVEY</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            Audit & survey management
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Mobile-based paperless audits and surveys with real-time scoring, findings tracking and a corrective-action workflow.
+          </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">
+            <CheckSquare className="w-4 h-4 text-slate-300" />
+            <span>New survey</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>Start audit</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: Audits closed (Emerald/Green Icon) */}
+        <StatCard
+          variant="icon"
+          title="Audits closed"
+          value="4"
+          icon={ClipboardCheck}
+          badgeText="this quarter"
+          badgeClassName="text-emerald-400 lowercase font-mono"
+          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
+        />
+
+        {/* Card 2: In progress (Amber/Yellow Icon) */}
+        <StatCard
+          variant="icon"
+          title="In progress"
+          value="5"
+          icon={Clock}
+          badgeText="open"
+          badgeClassName="text-amber-400 lowercase font-mono"
+          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
+        />
+
+        {/* Card 3: Total findings (Rose/Red Icon) */}
+        <StatCard
+          variant="icon"
+          title="Total findings"
+          value="29"
+          icon={AlertTriangle}
+          badgeText="to action"
+          badgeClassName="text-rose-400 lowercase font-mono"
+          iconContainerClassName="bg-rose-950/40 border-rose-800/30 text-rose-400"
+        />
+
+        {/* Card 4: Avg audit score (Blue Icon) */}
+        <StatCard
+          variant="icon"
+          title="Avg audit score"
+          value="86%"
+          icon={Activity}
+          badgeText="portfolio"
+          badgeClassName="text-slate-400 lowercase font-mono"
+          iconContainerClassName="bg-blue-950/50 border-blue-800/30 text-blue-400"
+        />
+      </div>
+            <Table headers={auditheaders} rows={auditrows}/>
+<div className="mt-5">
+      <InfoBanner 
+        boldText='Paperless:' 
+        normalText='auditors capture findings on mobile (photo + geo-tag), scores compute in real time, and each finding spawns a tracked corrective action with an owner and due date.' 
+      />
+
+</div>
+    
+    </div>
+  );
+}

components/dashboard/compliance/contracts.tsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { 
+  FileText, 
+  AlertTriangle, 
+  Clock, 
+  Star, 
+  BarChart2, 
+  Plus 
+} from "lucide-react";
+import Button from "@/components/common/button";
+import StatCard from "@/components/common/dashStatCard";
+import InfoBanner from "@/components/common/infoBanner";
+import Table from '@/components/common/dataTable';
+import { contractheaders, contractrows } from '@/constants/tabledata';
+
+
+
+export default function ContractsPortal() {
+  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 text-emerald-400 uppercase font-mono">
+            <span>Apple One — HQ Tower</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">COMPLIANCE</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500"> Contracts</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+           Contract management
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Central vendor-contract repository with SLA tracking, renewal alerts, performance scorecards, e-signature and a full audit trail.
+          </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>SLA report</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>Dispatch job</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: Active vendors */}
+        <StatCard
+          variant="icon"
+          title="Active vendors"
+          value="6"
+          icon={FileText}
+          badgeText="in force"
+          badgeClassName="text-slate-400 lowercase font-mono"
+          iconContainerClassName="bg-blue-950/60 border-blue-800/40 text-blue-400"
+        />
+
+        {/* Card 2: Avg SLA adherence */}
+        <StatCard
+          variant="icon"
+          title="Avg SLA adherence"
+          value="93%"
+          icon={AlertTriangle}
+          badgeText="this month"
+          badgeClassName="text-rose-400 lowercase font-mono font-medium"
+          iconContainerClassName="bg-rose-950/50 border-rose-800/30 text-rose-400"
+        />
+
+        {/* Card 3: Open field jobs */}
+        <StatCard
+          variant="icon"
+          title="Open field jobs"
+          value="12"
+          icon={Clock}
+          badgeText="renew"
+          badgeClassName="text-amber-400 lowercase font-mono"
+          iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
+        />
+
+        {/* Card 4: Avg response time */}
+        <StatCard
+          variant="icon"
+          title="Avg response time"
+          value="2.7h"
+          icon={Star}
+          badgeText="of 5.0"
+          badgeClassName="text-emerald-400 lowercase font-mono"
+          iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
+        />
+      </div>
+
+      <Table headers={contractheaders} rows={contractrows}/>
+
+      <div className="mb-10 mt-10">
+        <InfoBanner 
+          boldText="Lifecycle: " 
+          normalText="repository → SLA monitoring with breach alerts → vendor scorecards → renewal reminders at 90 / 30 days → e-signature → immutable audit trail of every change." 
+        />
+      </div>
+    </div>
+  );
+}

components/dashboard/compliance/fireAndSafety.tsx

@@ -0,0 +1,205 @@
+import { useState } from 'react';
+import { 
+  ShieldCheck, 
+  Clock, 
+  AlertTriangle, 
+  Calendar, 
+  Layers, 
+  Plus 
+} from "lucide-react";
+import Button from "@/components/common/button";
+import StatCard from "@/components/common/dashStatCard";
+import Table from '@/components/common/dataTable';
+import { firesafetyheaders, firesafetyrows } from '@/constants/tabledata';
+import { StatusBadge } from '@/components/common/statusBadge';
+
+
+
+
+
+export default function FireSafetyPortal() {
+  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">COMPLIANCE</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500"> FIRE & SAFETY</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            Fire & safety management
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Safety-equipment inspections, drill scheduling, evacuation plans and incident reporting with regulatory compliance tracking.
+          </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">
+            <Layers className="w-4 h-4 text-slate-300" />
+            <span>Evac plans</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>Schedule drill</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: Equipment compliant */}
+        <StatCard
+          variant="icon"
+          title="Equipment compliant"
+          value="4/6"
+          icon={ShieldCheck}
+          badgeText="inspected"
+          badgeClassName="text-emerald-400 lowercase font-mono font-medium"
+          iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
+        />
+
+        {/* Card 2: Inspections due */}
+        <StatCard
+          variant="icon"
+          title="Inspections due"
+          value="2"
+          icon={Clock}
+          badgeText="this week"
+          badgeClassName="text-amber-400 lowercase font-mono"
+          iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
+        />
+
+        {/* Card 3: Open incidents */}
+        <StatCard
+          variant="icon"
+          title="Open incidents"
+          value="1"
+          icon={AlertTriangle}
+          badgeText="action"
+          badgeClassName="text-rose-400 lowercase font-mono"
+          iconContainerClassName="bg-rose-950/50 border-rose-800/30 text-rose-400"
+        />
+
+        {/* Card 4: Next drill */}
+        <StatCard
+          variant="icon"
+          title="Next drill"
+          value="Jul 12"
+          icon={Calendar}
+          badgeText="Q3 evacuation"
+          badgeClassName="text-slate-400 lowercase font-mono"
+          iconContainerClassName="bg-blue-950/60 border-blue-800/40 text-blue-400"
+        />
+      </div>
+
+      {/* --- MAIN CONTENT LAYOUT --- */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        {/* Left Column: Safety equipment inspection Table */}
+        <div className="lg:col-span-2 rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-base font-bold text-slate-100">
+              Safety equipment inspection
+            </h2>
+            <span className="text-xs font-mono text-slate-500">
+              6 asset classes
+            </span>
+          </div>
+          <Table headers={firesafetyheaders} rows={firesafetyrows} />
+        </div>
+
+        {/* Right Column: Drill schedule & Incidents */}
+        <div className="flex flex-col gap-4">
+          {/* Drill schedule Card */}
+          <div className="rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5">
+            <h2 className="text-base font-bold text-slate-100 mb-6">
+              Drill schedule
+            </h2>
+
+            <div className="relative pl-6 space-y-6 before:absolute before:left-2 before:top-2 before:bottom-2 before:w-[1px] before:bg-slate-800">
+              {/* Timeline Item 1 */}
+              <div className="relative">
+                <span className="absolute -left-[23px] top-1.5 h-3 w-3 rounded-full border-2 border-teal-400 bg-[#071321]" />
+                <h3 className="text-sm font-bold text-slate-100">
+                  Q3 full evacuation drill
+                </h3>
+                <p className="text-xs font-mono text-slate-500 mt-1">
+                  Jul 12, 2026 <span className="mx-1">•</span> reserved
+                </p>
+              </div>
+
+              {/* Timeline Item 2 */}
+              <div className="relative">
+                <span className="absolute -left-[23px] top-1.5 h-3 w-3 rounded-full border-2 border-teal-400 bg-[#071321]" />
+                <h3 className="text-sm font-bold text-slate-100">
+                  Wardens refresher
+                </h3>
+                <p className="text-xs font-mono text-slate-500 mt-1">
+                  Jun 30, 2026 <span className="mx-1">•</span> reserved
+                </p>
+              </div>
+
+              {/* Timeline Item 3 */}
+              <div className="relative">
+                <span className="absolute -left-[23px] top-1.5 h-3 w-3 rounded-full border-2 border-teal-400 bg-[#071321]" />
+                <h3 className="text-sm font-bold text-slate-100">
+                  Q2 drill · 92% turnout
+                </h3>
+                <p className="text-xs font-mono text-slate-500 mt-1">
+                  Apr 14, 2026 <span className="mx-1">•</span> completed
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Incidents Card */}
+          <div className="rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5">
+            <h2 className="text-base font-bold text-slate-100 mb-4">
+              Incidents
+            </h2>
+
+            <div className="space-y-4">
+              {/* Incident 1 */}
+              <div className="flex items-center justify-between py-2 border-b border-slate-800/60 last:border-0">
+                <div>
+                  <h3 className="text-sm font-bold text-slate-100">
+                    Minor smoke · pantry
+                  </h3>
+                  <p className="text-xs font-mono text-slate-500 mt-1">
+                    INC-21 <span className="mx-1">•</span> Jun 18
+                  </p>
+                </div>
+                <StatusBadge
+                  text="CLOSED"
+                  color="bg-slate-800/80 text-slate-400"
+                />
+              </div>
+
+              {/* Incident 2 */}
+              <div className="flex items-center justify-between py-2">
+                <div>
+                  <h3 className="text-sm font-bold text-slate-100">
+                    Extinguisher low pressure
+                  </h3>
+                  <p className="text-xs font-mono text-slate-500 mt-1">
+                    INC-22 <span className="mx-1">•</span> Jun 24
+                  </p>
+                </div>
+                <StatusBadge
+                  text="OPEN"
+                  color="bg-amber-500/15 text-amber-400"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/dashboard/compliance/statutoryCompliance.tsx

@@ -0,0 +1,166 @@
+import { useState } from 'react';
+import { 
+  Layers, 
+  ShieldCheck, 
+  CheckSquare, 
+  Clock, 
+  Search, 
+  QrCode,
+  Power,
+  Sparkles,
+  List,
+  Pencil,
+  Plus, 
+} from 'lucide-react';
+import Button from "@/components/common/button";
+import StatCard from "@/components/common/dashStatCard";
+import Table from "@/components/common/dataTable";
+import InfoBanner from '@/components/common/infoBanner';
+import { statutoryheaders, statutoryrows } from '@/constants/tabledata';
+
+
+
+
+
+
+
+export default function StatutoryCompliancePortal() {
+  return (
+    /* Increased container padding and max-width auto alignment */
+   <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 text-slate-500 uppercase font-mono">
+            <span className="text-teal-400">Apple One — HQ Tower</span>
+            <span>•</span>
+            <span>Compliance</span>
+            <span>•</span>
+            <span>Statutory</span>
+          </div>
+          <h1 className="text-2xl font-extrabold text-white tracking-tight mt-1.5">
+            Statutory compliance tracker
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
+            Centralized register of statutory, regulatory, legal, safety and environmental obligations — with expiry tracking, reminders, document vault and audit trail.
+          </p>
+        </div>
+
+        {/* --- HEADER BUTTONS --- */}
+        <div className="flex items-center gap-2.5 self-start md:mt-6">
+          <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">
+            <Sparkles className="w-4 h-4 text-slate-300" />
+            <span>Reminders</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">
+            <Plus className="w-4 h-4 stroke-[3]" />
+            <span>New Obligation</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* --- STAT CARDS GRID --- */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <StatCard 
+          variant="icon" 
+          title="Total checklists" 
+          value="10" 
+          icon={Layers} 
+          badgeText="Location set" 
+          badgeClassName="text-slate-400 lowercase font-mono"
+          iconContainerClassName="bg-blue-950/60 border border-blue-800/40 text-blue-400"
+        />
+        
+        <StatCard 
+          variant="icon" 
+          title="Active" 
+          value="7" 
+          icon={ShieldCheck} 
+          badgeText="of 10" 
+          badgeClassName="text-emerald-400 font-mono font-medium"
+          iconContainerClassName="bg-emerald-950/60 border border-emerald-800/40 text-emerald-400"
+        />
+
+        <StatCard 
+          variant="icon" 
+          title="Approval set" 
+          value="5" 
+          icon={CheckSquare} 
+          badgeText="workflow" 
+          badgeClassName="text-amber-400 lowercase font-mono"
+          iconContainerClassName="bg-amber-950/50 border border-amber-800/30 text-amber-400"
+        />
+          
+        <StatCard 
+          variant="icon" 
+          title="Avg TAT" 
+          value="40m" 
+          icon={Clock} 
+          badgeText="target" 
+          badgeClassName="text-rose-400 lowercase font-mono"
+          iconContainerClassName="bg-rose-950/50 border border-rose-800/30 text-rose-400"
+        />
+      </div>
+
+      {/* --- SEARCH, FILTERS & ACTION BUTTONS --- */}
+      <div className="flex flex-col md:flex-row items-center justify-between gap-3 mb-6">
+        {/* Search & Select Filters */}
+        <div className="flex flex-1 flex-wrap items-center gap-2.5 w-full md:w-auto">
+          {/* Search Bar */}
+          <div className="relative flex-1 min-w-[220px] max-w-md">
+            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Search obligation, authority, site..."
+              className="w-full bg-[#0b1727] border border-slate-800 rounded-lg pl-9 pr-3 py-2 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:border-teal-500/50 transition-colors"
+            />
+          </div>
+
+          {/* Category Dropdown */}
+          <select className="bg-[#081321] border border-slate-800/80 rounded-lg px-3 py-2 text-xs font-semibold text-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-[#2dd4bf] transition-all">
+            <option value="all">All Categories</option>
+            <option value="fire">Statutory · Fire</option>
+            <option value="lifts">Statutory · Lifts</option>
+            <option value="pressure">Statutory · Pressure</option>
+            <option value="environmental">Environmental</option>
+            <option value="electrical">Statutory · Electrical Legal</option>
+            <option value="health">Health & Safety</option>
+          </select>
+
+          {/* Status Dropdown */}
+          <select className="bg-[#081321] border border-slate-800/80 rounded-lg px-3 py-2 text-xs font-semibold text-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-[#2dd4bf] transition-all">
+            <option value="all">All status</option>
+            <option value="valid">Valid</option>
+            <option value="due">Due</option>
+            <option value="expired">Expired</option>
+          </select>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-2 w-full md:w-auto justify-end">
+          <Button className="flex items-center gap-1.5 bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors">
+            <span>Download</span>
+          </Button>
+
+          <Button className="flex items-center gap-1.5 bg-teal-400 hover:bg-teal-300 text-slate-950 font-bold rounded-lg px-3.5 py-2 text-xs transition-colors">
+            <Plus size={15} className="stroke-[3]" />
+            <span>New Obligation</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* --- TABLE CONTAINER --- */}
+      <div className="mt-5">
+        <Table headers={statutoryheaders} rows={statutoryrows} />
+      </div>
+       <div className="mb-10 mt-5">
+              <InfoBanner 
+                boldText="Automated governance: " 
+                normalText="each obligation carries a hard expiry; reminders fire at 90 / 30 / 7 days and escalate on breach. Click any row to view its audit history; attach certificates in the document vault; renewals reset the cycle and log to the trail." 
+              />
+            </div>
+    </div>
+  );
+}

components/dashboard/compliance/training.tsx

@@ -0,0 +1,123 @@
+import { useState } from 'react';
+import { 
+  ShieldCheck, 
+  Clock, 
+  AlertTriangle, 
+  Calendar, 
+  Layers, 
+  Plus, 
+  GraduationCap,
+  Star,
+  Activity,
+  LayoutGrid
+} 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 { trainingtabs } from '@/constants/constant';
+import InfoBanner from '@/components/common/infoBanner';
+import { trainingheaders, trainingrows } from '@/constants/tabledata';
+
+
+
+export default function TrainingPortal() {
+      const [activeTab, setActiveTab] = useState<string>('Courses');
+  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">COMPLIANCE</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">TRAINING</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            Training & onboarding
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Onboarding checklists, course management, mandatory compliance training and certification tracking with expiry alerts.
+          </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">
+            <LayoutGrid className="w-4 h-4 text-slate-300" />
+            <span>LMS sync</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>Assign course</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: Active courses */}
+        <StatCard
+          variant="icon"
+          title="Active courses"
+          value="6"
+          icon={GraduationCap}
+          badgeText="132 enrolments"
+          badgeClassName="text-slate-400 lowercase font-mono"
+          iconContainerClassName="bg-blue-950/60 border-blue-800/40 text-blue-400"
+        />
+
+        {/* Card 2: Completion rate */}
+        <StatCard
+          variant="icon"
+          title="Completion rate"
+          value="78%"
+          icon={Activity}
+          badgeText="overall"
+          badgeClassName="text-teal-400 lowercase font-mono"
+          iconContainerClassName="bg-teal-950/60 border-teal-800/40 text-teal-400"
+        />
+
+        {/* Card 3: Mandatory pending */}
+        <StatCard
+          variant="icon"
+          title="Mandatory pending"
+          value="2"
+          icon={AlertTriangle}
+          badgeText="chase up"
+          badgeClassName="text-rose-400 lowercase font-mono"
+          iconContainerClassName="bg-rose-950/50 border-rose-800/30 text-rose-400"
+        />
+
+        {/* Card 4: Certs expiring */}
+        <StatCard
+          variant="icon"
+          title="Certs expiring"
+          value="3"
+          icon={Star}
+          badgeText="≤ 60 days"
+          badgeClassName="text-amber-400 lowercase font-mono"
+          iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
+        />
+      </div>
+      <NavigationTabs
+                tabs={trainingtabs}
+                activeTab={activeTab}
+                onTabChange={setActiveTab}
+                className="mb-4"
+              />
+<Table headers={trainingheaders} rows={trainingrows}/>
+<div className="mb-5 mt-5">
+        <InfoBanner 
+          boldText="Compliance:  " 
+          normalText="mandatory safety courses (fire, height, LOTO) carry renewal cycles — the platform auto-reminds before certification lapses and blocks permit issuance for un-certified staff." 
+        />
+      </div>
+    
+    </div>
+  );
+}

components/dashboard/compliance/wasteAndEsg.tsx

@@ -0,0 +1,173 @@
+import { useState } from 'react';
+import { 
+  Recycle, 
+  Leaf, 
+  Activity, 
+  Check, 
+  BarChart2, 
+  Plus 
+} from "lucide-react";
+import Button from "@/components/common/button";
+import StatCard from "@/components/common/dashStatCard";
+import InfoBanner from '@/components/common/infoBanner';
+import { scheduleItems, wasteStreams } from '@/constants/constant';
+
+
+
+export default function WasteESGPortal() {
+  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">SUSTAINABILITY</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">WASTE</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            Waste management
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Waste tracked by stream, recycling rates, collection scheduling and ESG reporting with vendor compliance.
+          </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>ESG report</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>Log entry</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: Total waste */}
+        <StatCard
+          variant="icon"
+          title="Total this month"
+          value="2824 kg"
+          icon={Recycle}
+          badgeText="5 streams"
+          badgeClassName="text-slate-400 lowercase font-mono"
+          iconContainerClassName="bg-blue-950/60 border-blue-800/40 text-blue-400"
+        />
+
+        {/* Card 2: Diverted rate */}
+        <StatCard
+          variant="icon"
+          title="Diverted from landfill"
+          value="54%"
+          icon={Leaf}
+          badgeText="recycled"
+          badgeClassName="text-emerald-400 lowercase font-mono"
+          iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
+        />
+
+        {/* Card 3: Hazardous waste */}
+        <StatCard
+          variant="icon"
+          title="Hazardous"
+          value="64 kg"
+          icon={Activity}
+          badgeText="manifest"
+          badgeClassName="text-amber-400 lowercase font-mono"
+          iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
+        />
+
+        {/* Card 4: Vendors compliant */}
+        <StatCard
+          variant="icon"
+          title="Vendors compliant"
+          value="4/4"
+          icon={Check}
+          badgeText="SLA met"
+          badgeClassName="text-emerald-400 lowercase font-mono"
+          iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
+        />
+      </div>
+
+      {/* --- MAIN CONTENT SECTION BELOW STAT CARDS --- */}
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 mb-6">
+        {/* Waste by Stream Progress Chart */}
+        <div className="lg:col-span-3 rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5 flex flex-col justify-between">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-base font-bold text-slate-100">
+              Waste by stream · kg
+            </h2>
+            <span className="text-xs font-mono text-slate-500">
+              June 2026
+            </span>
+          </div>
+
+          <div className="space-y-4">
+            {wasteStreams.map((item, index) => (
+              <div key={index} className="flex items-center gap-4 text-sm">
+                <span className="w-44 text-xs font-medium text-slate-300 shrink-0 truncate">
+                  {item.name}
+                </span>
+                <div className="relative flex-1 h-2 rounded-full bg-slate-800/60 overflow-hidden">
+                  <div 
+                    className={`h-full rounded-full ${item.color}`}
+                    style={{ width: `${item.percentage}%` }}
+                  />
+                </div>
+                <span className="w-12 text-right font-mono text-xs font-bold text-slate-100 shrink-0">
+                  {item.amount}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Collection Schedule Table */}
+        <div className="lg:col-span-2 rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5">
+          <h2 className="text-base font-bold text-slate-100 mb-6">
+            Collection schedule
+          </h2>
+
+          <div className="overflow-x-auto">
+            <table className="w-full text-left border-collapse">
+              <thead>
+                <tr className="border-b border-slate-800/80 text-[10px] font-bold tracking-wider uppercase font-mono text-slate-400">
+                  <th className="pb-3 pr-2">FREQUENCY</th>
+                  <th className="pb-3 px-2">STREAM</th>
+                  <th className="pb-3 pl-2">VENDOR</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-800/50 text-xs">
+                {scheduleItems.map((row, idx) => (
+                  <tr key={idx} className="hover:bg-slate-800/30 transition-colors">
+                    <td className="py-3.5 pr-2 font-mono text-slate-300 font-medium whitespace-nowrap">
+                      {row.frequency}
+                    </td>
+                    <td className="py-3.5 px-2 font-semibold text-slate-100 whitespace-nowrap">
+                      {row.stream}
+                    </td>
+                    <td className="py-3.5 pl-2 text-slate-300 font-medium whitespace-nowrap">
+                      {row.vendor}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <InfoBanner 
+        boldText='ESG:' 
+        normalText='waste-reduction and recycling metrics feed the Sustainability dashboard and statutory pollution-board reporting — hazardous streams require manifest tracking to disposal.' 
+      />
+    </div>
+  );
+}

components/dashboard/finance/costInvoice.tsx

@@ -11,193 +11,11 @@ import InfoBanner from "@/components/common/infoBanner";
 import Button from "@/components/common/button";
 import StatCard from "@/components/common/dashStatCard";
 import Table from "@/components/common/dataTable";
+import { costInvoiceheaders, costInvoicerows } from "@/constants/tabledata";
 
-const StatusBadge = ({
-  text,
-  color,
-}: {
-  text: string;
-  color: string;
-}) => (
-  <span
-    className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
-  >
-    <span className="h-1.5 w-1.5 rounded-full bg-current" />
-    {text}
-  </span>
-);
 
-const ActionButton = ({ text }: { text: string }) => (
-  <Button className="rounded-lg border border-slate-700/60 bg-[#16243a] px-3 py-1.5 text-sm font-semibold text-slate-300 hover:bg-slate-700 transition">
-    {text}
-  </Button>
-);
 
-const headers = [
-  "Invoice",
-  "Client",
-  "Period",
-  "Amount",
-  "Raised",
-  "Due",
-  "Status",
-  "",
-];
 
-const rows = [
-  [
-    <span className="font-semibold text-[#2EE6C5]">INV-9040</span>,
-    <span className="font-semibold text-slate-100">Apple One Corp</span>,
-    "Jun 2026",
-    <span className="font-semibold">₹12.4 L</span>,
-    <span className="font-mono">Jun 5, 2026</span>,
-    <span className="font-mono">Jul 5, 2026</span>,
-    <StatusBadge
-      text="Paid"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <span className="text-slate-500">—</span>,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">INV-9041</span>,
-    <span className="font-semibold text-slate-100">Novotel F&B</span>,
-    "Jun 2026",
-    <span className="font-semibold">₹8.6 L</span>,
-    <span className="font-mono">Jun 9, 2026</span>,
-    <span className="font-mono">Jul 9, 2026</span>,
-    <StatusBadge
-      text="Sent"
-      color="bg-amber-500/15 text-amber-400"
-    />,
-    <ActionButton text="Mark paid" />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">INV-9042</span>,
-    <span className="font-semibold text-slate-100">SRM Estates</span>,
-    "Jun 2026",
-    <span className="font-semibold">₹4.3 L</span>,
-    <span className="font-mono">Jun 13, 2026</span>,
-    <span className="font-mono">Jul 13, 2026</span>,
-    <StatusBadge
-      text="Overdue"
-      color="bg-red-500/15 text-red-400"
-    />,
-    <ActionButton text="Mark paid" />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">INV-9043</span>,
-    <span className="font-semibold text-slate-100">Local Mart</span>,
-    "Jun 2026",
-    <span className="font-semibold">₹21.0 L</span>,
-    <span className="font-mono">Jun 17, 2026</span>,
-    <span className="font-mono">Jul 17, 2026</span>,
-    <StatusBadge
-      text="Paid"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <span className="text-slate-500">—</span>,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">INV-9044</span>,
-    <span className="font-semibold text-slate-100">Regus Spaces</span>,
-    "Jun 2026",
-    <span className="font-semibold">₹6.8 L</span>,
-    <span className="font-mono">Jun 21, 2026</span>,
-    <span className="font-mono">Jul 21, 2026</span>,
-    <StatusBadge
-      text="Draft"
-      color="bg-slate-700/60 text-slate-400"
-    />,
-    <ActionButton text="Send" />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">INV-9105</span>,
-    <span className="font-semibold text-slate-100">Apple One Corp</span>,
-    "Jun 2026",
-    <span className="font-semibold">₹12.4 L</span>,
-    <span className="font-mono">Jun 5, 2026</span>,
-    <span className="font-mono">Jul 5, 2026</span>,
-    <StatusBadge
-      text="Sent"
-      color="bg-amber-500/15 text-amber-400"
-    />,
-    <ActionButton text="Mark paid" />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">INV-9106</span>,
-    <span className="font-semibold text-slate-100">Novotel F&B</span>,
-    "Jun 2026",
-    <span className="font-semibold">₹8.6 L</span>,
-    <span className="font-mono">Jun 9, 2026</span>,
-    <span className="font-mono">Jul 9, 2026</span>,
-    <StatusBadge
-      text="Draft"
-      color="bg-slate-700/60 text-slate-400"
-    />,
-    <ActionButton text="Send" />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">INV-9107</span>,
-    <span className="font-semibold text-slate-100">SRM Estates</span>,
-    "Jun 2026",
-    <span className="font-semibold">₹4.3 L</span>,
-    <span className="font-mono">Jun 13, 2026</span>,
-    <span className="font-mono">Jul 13, 2026</span>,
-    <StatusBadge
-      text="Draft"
-      color="bg-slate-700/60 text-slate-400"
-    />,
-    <ActionButton text="Send" />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">INV-9108</span>,
-    <span className="font-semibold text-slate-100">Local Mart</span>,
-    "Jun 2026",
-    <span className="font-semibold">₹21.0 L</span>,
-    <span className="font-mono">Jun 17, 2026</span>,
-    <span className="font-mono">Jul 17, 2026</span>,
-    <StatusBadge
-      text="Paid"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <span className="text-slate-500">—</span>,
-  ],
-   [
-    <span className="font-semibold text-[#2EE6C5]">INV-9107</span>,
-    <span className="font-semibold text-slate-100">SRM Estates</span>,
-    "Jun 2026",
-    <span className="font-semibold">₹4.3 L</span>,
-    <span className="font-mono">Jun 13, 2026</span>,
-    <span className="font-mono">Jul 13, 2026</span>,
-    <StatusBadge
-      text="Draft"
-      color="bg-slate-700/60 text-slate-400"
-    />,
-    <ActionButton text="Send" />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">INV-9108</span>,
-    <span className="font-semibold text-slate-100">Local Mart</span>,
-    "Jun 2026",
-    <span className="font-semibold">₹21.0 L</span>,
-    <span className="font-mono">Jun 17, 2026</span>,
-    <span className="font-mono">Jul 17, 2026</span>,
-    <StatusBadge
-      text="Paid"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <span className="text-slate-500">—</span>,
-  ],
-];
 export default function CostInvoicePortal() {
   return (
     <div className="my-15 text-slate-100 font-sans">
@@ -284,7 +102,7 @@ export default function CostInvoicePortal() {
       </div>
 
 <div className="mt-5">
-    <Table headers={headers} rows={rows}/>
+    <Table headers={costInvoiceheaders} rows={costInvoicerows}/>
 </div>
       {/* Info Banner */}
       <div className="my-8">

components/dashboard/insight/reports.tsx

@@ -5,123 +5,17 @@ import NavigationTabs from '@/components/common/tabs';
 import { reportFilters, reporttabs, Reqeusttabs, statusFilters } from '@/constants/constant';
 import FilterTabs from '@/components/common/roundedFilters';
 import Table from '@/components/common/dataTable';
+import { reportheaders, reportrows } from '@/constants/tabledata';
 
 
-const StatusBadge = ({
-  text,
-  color,
-}: {
-  text: string;
-  color: string;
-}) => (
-  <span
-    className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
-  >
-    <span className="h-1.5 w-1.5 rounded-full bg-current" />
-    {text}
-  </span>
-);
 
-const headers = [
-  "Code",
-  "Equipment",
-  "Group",
-  "Block · Floor",
-  "Service Provider",
-  "Manufacturer",
-  "Model",
-];
 
-const rows = [
-  [
-    <span className="font-semibold text-teal-400 whitespace-nowrap">APP-1100</span>,
-    <span className="font-semibold whitespace-nowrap">Cooling Tower</span>,
-    "Electrical",
-    "Block 1 · 2",
-    "Blue Star",
-    "Kirloskar",
-    <span className="font-mono text-slate-400">M-550</span>,
-  ],
-
-  [
-    <span className="font-semibold text-teal-400 whitespace-nowrap">APP-1103</span>,
-    <span className="font-semibold whitespace-nowrap">Air Handling Unit</span>,
-    "Plumbing",
-    "Tower A · 1",
-    "Blue Star",
-    "Voltas",
-    <span className="font-mono text-slate-400">M-550</span>,
-  ],
-
-  [
-    <span className="font-semibold text-teal-400 whitespace-nowrap">APP-1106</span>,
-    <span className="font-semibold whitespace-nowrap">VRV Outdoor</span>,
-    "Electrical",
-    "Tower A · G",
-    "Voltas",
-    "Daikin",
-    <span className="font-mono text-slate-400">M-320</span>,
-  ],
-
-  [
-    <span className="font-semibold text-teal-400 whitespace-nowrap">APP-1109</span>,
-    <span className="font-semibold whitespace-nowrap">VRV Outdoor</span>,
-    "HVAC",
-    "Tower A · 1",
-    "Voltas",
-    "Blue Star",
-    <span className="font-mono text-slate-400">M-320</span>,
-  ],
-
-  [
-    <span className="font-semibold text-teal-400 whitespace-nowrap">APP-1112</span>,
-    <span className="font-semibold whitespace-nowrap">Air Handling Unit</span>,
-    "HVAC",
-    "Tower A · G",
-    "In-house",
-    "Voltas",
-    <span className="font-mono text-slate-400">M-550</span>,
-  ],
-
-  [
-    <span className="font-semibold text-teal-400 whitespace-nowrap">APP-1115</span>,
-    <span className="font-semibold whitespace-nowrap">Air Handling Unit</span>,
-    "Electrical",
-    "Tower A · 2",
-    "Voltas",
-    "Daikin",
-    <span className="font-mono text-slate-400">M-XR9</span>,
-  ],
-
-  [
-    <span className="font-semibold text-teal-400 whitespace-nowrap">APP-1118</span>,
-    <span className="font-semibold whitespace-nowrap">Chiller</span>,
-    "Electrical",
-    "Block 1 · 1",
-    "In-house",
-    "Blue Star",
-    <span className="font-mono text-slate-400">M-XR9</span>,
-  ],
-
-  [
-    <span className="font-semibold text-teal-400 whitespace-nowrap">APP-1121</span>,
-    <span className="font-semibold whitespace-nowrap">Cooling Tower</span>,
-    "Plumbing",
-    "Tower A · 1",
-    "Blue Star",
-    "Daikin",
-    <span className="font-mono text-slate-400">M-550</span>,
-  ],
-];
 
 export default function ReportPortal() {
   const [activeTab, setActiveTab] = useState<string>('Equipment');
   const [activeFilter, setActiveFilter] = useState<string>('Site All');
 
-  const handleDownload = () => {
+  
-    // Add your export/download logic here
-    console.log("Downloading report...");
-  };
 
   return (
     <div className="my-15 text-slate-100 font-sans">
@@ -166,7 +60,6 @@ export default function ReportPortal() {
         />
 
         <button
-          onClick={handleDownload}
           className="inline-flex items-center gap-2 rounded-xl bg-teal-400 px-5 py-2.5 text-sm font-semibold text-slate-950 hover:bg-teal-300 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-400/50 shrink-0"
         >
           Download
@@ -174,7 +67,7 @@ export default function ReportPortal() {
       </div>
 
       <div className='mt-5'>
-        <Table headers={headers} rows={rows}/>
+        <Table headers={reportheaders} rows={reportrows}/>
       </div>
       
     </div>

components/dashboard/intelligence/aiAndPredictive.tsx

@@ -0,0 +1,210 @@
+import { useState } from 'react';
+import { 
+  Zap, 
+  AlertTriangle, 
+  Activity, 
+  Plus, 
+  Sparkles,
+  ShieldAlert,
+  IndianRupee
+} from "lucide-react";
+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 { CardHeader } from '@/components/common/cardHeader'; // Assuming CardHeader location
+
+export default function AiPredictivePortal() {
+  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">AI</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            AI & predictive intelligence
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Real-time asset metrics, fault detection & diagnosis, predictive maintenance alerts and energy-saving intelligence — continuously learning.
+          </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">
+            <Sparkles className="w-4 h-4 text-slate-300" />
+            <span>Model insights</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>Action alert</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: Predicted failures */}
+        <StatCard
+          variant="icon"
+          title="Predicted failures"
+          value="1"
+          icon={ShieldAlert}
+          badgeText="≤ 30 days"
+          badgeClassName="text-rose-400 lowercase font-mono"
+          iconContainerClassName="bg-rose-950/40 border-rose-800/30 text-rose-400"
+        />
+
+        {/* Card 2: Savings opportunity */}
+        <StatCard
+          variant="icon"
+          title="Savings opportunity"
+          value="₹3.5 L"
+          icon={Zap}
+          badgeText="per month"
+          badgeClassName="text-emerald-400 lowercase font-mono"
+          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
+        />
+
+        {/* Card 3: Active anomalies */}
+        <StatCard
+          variant="icon"
+          title="Active anomalies"
+          value="4"
+          icon={AlertTriangle}
+          badgeText="flagged"
+          badgeClassName="text-amber-400 lowercase font-mono"
+          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
+        />
+
+        {/* Card 4: Model confidence */}
+        <StatCard
+          variant="icon"
+          title="Model confidence"
+          value="87%"
+          icon={Activity}
+          badgeText="average"
+          badgeClassName="text-slate-400 lowercase font-mono"
+          iconContainerClassName="bg-blue-950/50 border-blue-800/30 text-blue-400"
+        />
+      </div>
+
+      {/* --- CARDS SECTION BELOW STATCARDS --- */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-6">
+        {/* Left Card: Predictive maintenance alerts */}
+        <Card className="lg:col-span-7 bg-[#0b1727] border border-slate-800/80 p-5 rounded-xl">
+          <CardHeader 
+            title="Predictive maintenance alerts" 
+            subtitle="ML · condition-based" 
+          />
+          <div className="divide-y divide-slate-800/60 mt-4">
+            <div className="py-3 flex items-start justify-between">
+              <div className="flex items-start gap-3">
+                <span className="w-2 h-2 rounded-full bg-rose-500 mt-2 shrink-0" />
+                <div>
+                  <h4 className="text-sm font-semibold text-slate-100">Chiller-02 compressor</h4>
+                  <p className="text-xs text-slate-400 mt-0.5">Bearing wear — likely failure in ~18 days</p>
+                </div>
+              </div>
+              <div className="text-right">
+                <span className="text-xs font-semibold text-rose-400">91%</span>
+                <p className="text-[10px] text-slate-500">confidence</p>
+              </div>
+            </div>
+
+            <div className="py-3 flex items-start justify-between">
+              <div className="flex items-start gap-3">
+                <span className="w-2 h-2 rounded-full bg-amber-400 mt-2 shrink-0" />
+                <div>
+                  <h4 className="text-sm font-semibold text-slate-100">AHU-07 drive belt</h4>
+                  <p className="text-xs text-slate-400 mt-0.5">Vibration trend rising — inspect within 10 days</p>
+                </div>
+              </div>
+              <div className="text-right">
+                <span className="text-xs font-semibold text-amber-400">78%</span>
+                <p className="text-[10px] text-slate-500">confidence</p>
+              </div>
+            </div>
+
+            <div className="py-3 flex items-start justify-between">
+              <div className="flex items-start gap-3">
+                <span className="w-2 h-2 rounded-full bg-amber-400 mt-2 shrink-0" />
+                <div>
+                  <h4 className="text-sm font-semibold text-slate-100">DG-01 fuel system</h4>
+                  <p className="text-xs text-slate-400 mt-0.5">Efficiency drop 6% — filter service due</p>
+                </div>
+              </div>
+              <div className="text-right">
+                <span className="text-xs font-semibold text-amber-400">84%</span>
+                <p className="text-[10px] text-slate-500">confidence</p>
+              </div>
+            </div>
+
+            <div className="py-3 flex items-start justify-between">
+              <div className="flex items-start gap-3">
+                <span className="w-2 h-2 rounded-full bg-blue-400 mt-2 shrink-0" />
+                <div>
+                  <h4 className="text-sm font-semibold text-slate-100">Lift-03 door motor</h4>
+                  <p className="text-xs text-slate-400 mt-0.5">Cycle-time anomaly — monitor</p>
+                </div>
+              </div>
+              <div className="text-right">
+                <span className="text-xs font-semibold text-blue-400">64%</span>
+                <p className="text-[10px] text-slate-500">confidence</p>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Right Card: Energy intelligence */}
+        <Card className="lg:col-span-5 bg-[#0b1727] border border-slate-800/80 p-5 rounded-xl">
+          <CardHeader 
+            title="Energy intelligence" 
+            subtitle="forecast savings" 
+          />
+          <div className="mt-4">
+            <div className="grid grid-cols-12 text-[11px] font-semibold text-slate-400 uppercase tracking-wider pb-2 border-b border-slate-800/60">
+              <div className="col-span-4">Area</div>
+              <div className="col-span-5">Recommendation</div>
+              <div className="col-span-3 text-right">Saving</div>
+            </div>
+
+            <div className="divide-y divide-slate-800/60 text-xs">
+              <div className="grid grid-cols-12 py-3.5 items-center">
+                <div className="col-span-4 font-semibold text-slate-200">HVAC scheduling</div>
+                <div className="col-span-5 text-slate-400">Shift pre-cooling to off-peak</div>
+                <div className="col-span-3 text-right font-medium text-emerald-400">₹1.8 L/mo</div>
+              </div>
+
+              <div className="grid grid-cols-12 py-3.5 items-center">
+                <div className="col-span-4 font-semibold text-slate-200">Lighting</div>
+                <div className="col-span-5 text-slate-400">Daylight dimming zones L2–L5</div>
+                <div className="col-span-3 text-right font-medium text-emerald-400">₹0.6 L/mo</div>
+              </div>
+
+              <div className="grid grid-cols-12 py-3.5 items-center">
+                <div className="col-span-4 font-semibold text-slate-200">Chiller staging</div>
+                <div className="col-span-5 text-slate-400">Optimise sequencing logic</div>
+                <div className="col-span-3 text-right font-medium text-emerald-400">₹1.1 L/mo</div>
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      <div className="mt-5">
+        <InfoBanner 
+          boldText='How it works:' 
+          normalText='IoT/BMS sensor streams feed fault-detection models → predictions surface as alerts → one click raises a condition-based PM work order → verified completion feeds back to improve the model.'
+        />
+      </div>
+    </div>
+  );
+}

components/dashboard/intelligence/assetHealth.tsx

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { 
+  Zap, 
+  AlertTriangle, 
+  Activity, 
+  Plus, 
+  Sparkles,
+  ShieldAlert,
+  IndianRupee,
+  Clock,
+  ShieldCheck
+} from "lucide-react";
+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 { CardHeader } from '@/components/common/cardHeader'; // Assuming CardHeader location
+
+export default function AssetHealthPortal() {
+  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">ASSET HEALTH</span>
+          </div>
+         <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">
+            A live health index per asset from reliability signals — MTBF, MTTR and criticality drive condition-based PM instead of fixed calendars.
+          </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">
+            <Activity className="w-4 h-4 text-slate-300" />
+            <span>Model insights</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>Raise PM</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: Predicted failures */}
+      <StatCard
+          variant="icon"
+          title="Fleet health index"
+          value="69"
+          icon={ShieldCheck}
+          badgeText="weighted"
+          badgeClassName="text-amber-400 lowercase font-mono"
+          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
+        />
+
+        <StatCard
+          variant="icon"
+          title="Assets at risk"
+          value="1"
+          icon={AlertTriangle}
+          badgeText="health < 58"
+          badgeClassName="text-rose-400 lowercase font-mono"
+          iconContainerClassName="bg-rose-950/40 border-rose-800/30 text-rose-400"
+        />
+
+        <StatCard
+          variant="icon"
+          title="Mean time between failures"
+          value="204d"
+          icon={Clock}
+          badgeText="avg"
+          badgeClassName="text-blue-400 lowercase font-mono"
+          iconContainerClassName="bg-blue-950/50 border-blue-800/30 text-blue-400"
+        />
+
+        <StatCard
+          variant="icon"
+          title="Mean time to repair"
+          value="6.3h"
+          icon={Activity}
+          badgeText="avg"
+          badgeClassName="text-emerald-400 lowercase font-mono"
+          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
+        />
+      </div>
+
+     
+
+      <div className="mt-5">
+      <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."
+        />
+      </div>
+    </div>
+  );
+}

components/dashboard/operations/energy.tsx

@@ -1,92 +1,13 @@
-import { 
+
-  Package, 
-  AlertTriangle, 
-  Activity, 
-  FileText, 
-  LayoutGrid, 
-  Plus 
-} from "lucide-react";
 import Button from "@/components/common/button";
-import StatCard from "@/components/common/dashStatCard";
+
+import Table from "@/components/common/dataTable";
+import { meterHeaders, meterRows, readingHeaders, readingRows } from "@/constants/tabledata";
 
 
 
 export default function EnergyPortal() {
-  const metersList = [
-    {
-      meter: "MTR-1",
-      name: "Electricity main 1",
-      location: "Pump room",
-      type: "Electricity",
-      mf: "1",
-    },
-    {
-      meter: "MTR-2",
-      name: "Water main 2",
-      location: "Main LT panel",
-      type: "Water",
-      mf: "10",
-    },
-    {
-      meter: "MTR-3",
-      name: "Diesel main 3",
-      location: "DG room",
-      type: "Diesel",
-      mf: "100",
-    },
-    {
-      meter: "MTR-4",
-      name: "Electricity main 4",
-      location: "Block riser",
-      type: "Electricity",
-      mf: "1",
-    },
-    {
-      meter: "MTR-5",
-      name: "Water main 5",
-      location: "DG room",
-      type: "Water",
-      mf: "1",
-    },
-  ];
  
-  const latestReadings = [
-    {
-      meter: "MTR-1",
-      prev: "40.00",
-      current: "58.00",
-      cons: "18.0",
-      uom: "kWh",
-    },
-    {
-      meter: "MTR-2",
-      prev: "49.00",
-      current: "69.00",
-      cons: "200.0",
-      uom: "kL",
-    },
-    {
-      meter: "MTR-3",
-      prev: "58.00",
-      current: "80.00",
-      cons: "2200.0",
-      uom: "L",
-    },
-    {
-      meter: "MTR-4",
-      prev: "67.00",
-      current: "91.00",
-      cons: "24.0",
-      uom: "kWh",
-    },
-    {
-      meter: "MTR-5",
-      prev: "76.00",
-      current: "102.00",
-      cons: "26.0",
-      uom: "kL",
-    },
-  ];
 
   return (
     <div className="text-slate-100 mt-15 font-sans">
@@ -126,109 +47,9 @@ export default function EnergyPortal() {
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-2 items-start">
         
         {/* LEFT TABLE: METER MASTER */}
-        <div className="bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-hidden">
+        <Table headers={meterHeaders} rows={meterRows}/>
-          <div className="flex items-center justify-between px-3 py-2 border-b border-slate-800/80">
+        {/* Right table */}
-            <h2 className="text-base font-semibold text-white">Meter master</h2>
+         <Table headers={readingHeaders} rows={readingRows}/>
-            <span className="text-xs font-mono text-slate-500">5 meters</span>
-          </div>
-
-          <div className="">
-            <table className="w-full h-full text-left text-sm">
-              <thead>
-                <tr className="border-b border-slate-800/60 text-[11px] font-bold uppercase tracking-wider text-slate-400">
-                  <th className="py-3 px-4">Meter</th>
-                  <th className="py-3 px-4">Name</th>
-                  <th className="py-3 px-4">Location</th>
-                  <th className="py-3 px-4">Type</th>
-                  <th className="py-3 px-4">MF</th>
-                  <th className="py-3 px-4 text-right"></th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-slate-800/40">
-                {metersList.map((row, index) => {
-                  return (
-                    <tr
-                      key={index}
-                      className="transition-colors hover:bg-slate-800/30"
-                    >
-                      <td className="py-3 px-4 font-mono text-teal-400 font-semibold text-xs whitespace-nowrap">
-                        {row.meter}
-                      </td>
-                      <td className="py-3 px-4 font-semibold text-slate-100 whitespace-nowrap">
-                        {row.name}
-                      </td>
-                      <td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
-                        {row.location}
-                      </td>
-                      <td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
-                        {row.type}
-                      </td>
-                      <td className="py-3 px-4 font-semibold text-slate-200 whitespace-nowrap">
-                        {row.mf}
-                      </td>
-                      <td className="py-3 px-4 text-right">
-                        <div className="flex items-center justify-end gap-1.5">
-                          <button className="px-2.5 py-1 text-xs font-medium text-slate-300 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded transition-colors">
-                            Reading
-                          </button>
-                          <button className="px-2.5 py-1 text-xs font-medium text-slate-300 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded transition-colors">
-                            QR
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        {/* RIGHT TABLE: LATEST READINGS */}
-        <div className="bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-hidden">
-          <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800/80">
-            <h2 className="text-base font-semibold text-white">Latest readings</h2>
-            <span className="text-xs font-mono text-slate-500 lowercase">
-              tap a meter for history
-            </span>
-          </div>
-
-          <div>
-            <table className="w-full h-full text-left text-sm">
-              <thead>
-                <tr className="border-b border-slate-800/60 text-[11px] font-bold uppercase tracking-wider text-slate-400">
-                  <th className="py-3 px-4">Meter</th>
-                  <th className="py-3 px-4">Prev</th>
-                  <th className="py-3 px-4">Current</th>
-                  <th className="py-3 px-4">Cons.</th>
-                  <th className="py-3 px-4">UOM</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-slate-800/40">
-                {latestReadings.map((row, index) => (
-                  <tr key={index} className="hover:bg-slate-800/30 transition-colors">
-                    <td className="py-3 px-4 font-mono text-teal-400 font-medium text-xs whitespace-nowrap">
-                      {row.meter}
-                    </td>
-                    <td className="py-3 px-4 text-slate-300 text-xs font-medium whitespace-nowrap">
-                      {row.prev}
-                    </td>
-                    <td className="py-3 px-4 text-slate-300 text-xs font-medium whitespace-nowrap">
-                      {row.current}
-                    </td>
-                    <td className="py-3 px-4 font-semibold text-teal-400 text-xs whitespace-nowrap">
-                      {row.cons}
-                    </td>
-                    <td className="py-3 px-4 font-semibold text-slate-100 text-xs whitespace-nowrap">
-                      {row.uom}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-
       </div>
 
     

components/dashboard/operations/equipment.tsx

@@ -19,134 +19,14 @@ import NavigationTabs from "@/components/common/tabs";
 import { equipmentTabs } from "@/constants/constant";
 import { useState } from "react";
 import StatCard from "@/components/common/dashStatCard";
+import { equipmentheaders, equipmentrows } from "@/constants/tabledata";
 
-const headers = [
-  "Code",
-  "Equipment",
-  "Group",
-  "Block · Floor",
-  "Service Provider",
-  "Criticality",
-  "PPM Status",
-  "Actions",
-];
 
-const Badge = ({
-  text,
-  color,
-}: {
-  text: string;
-  color: string;
-}) => (
-  <span
-    className={`inline-flex items-center rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-wider ${color}`}
-  >
-    <span className="mr-1.5 h-1.5 w-1.5 rounded-full bg-current"></span>
-    {text}
-  </span>
-);
-
-const ActionButtons = () => (
-  <div className="flex justify-center gap-1.5">
-    <button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
-      <FileText size={14} />
-    </button>
-
-    <button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
-      <Pencil size={14} />
-    </button>
-
-    <button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
-      <LayoutGrid size={14} />
-    </button>
-  </div>
-);
 
 export default function EquipmentPortal() {
   const [activeTab, setActiveTab] = useState<string>("Site-Wise Equipment");
 
-  const rows = [
+ 
-    [
-      <span className="font-semibold text-teal-400">APP-1100</span>,
-      <span className="font-bold text-slate-100">Cooling Tower</span>,
-      "Electrical",
-      "Block 1 · 2",
-      "Blue Star",
-      "Important",
-      <Badge text="Working" color="bg-amber-950/60 text-amber-400 border border-amber-800/30" />,
-      <ActionButtons />,
-    ],
-    [
-      <span className="font-semibold text-teal-400">APP-1103</span>,
-      <span className="font-bold text-slate-100">Air Handling Unit</span>,
-      "Plumbing",
-      "Tower A · 1",
-      "Blue Star",
-      <Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
-      <Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
-      <ActionButtons />,
-    ],
-    [
-      <span className="font-semibold text-teal-400">APP-1106</span>,
-      <span className="font-bold text-slate-100">VRV Outdoor</span>,
-      "Electrical",
-      "Tower A · G",
-      "Voltas",
-      <Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
-      <Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
-      <ActionButtons />,
-    ],
-    [
-      <span className="font-semibold text-teal-400">APP-1109</span>,
-      <span className="font-bold text-slate-100">VRV Outdoor</span>,
-      "HVAC",
-      "Tower A · 1",
-      "Voltas",
-      "Normal",
-      <Badge text="Overdue" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
-      <ActionButtons />,
-    ],
-    [
-      <span className="font-semibold text-teal-400">APP-1112</span>,
-      <span className="font-bold text-slate-100">Air Handling Unit</span>,
-      "HVAC",
-      "Tower A · G",
-      "In-house",
-      <Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
-      <Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
-      <ActionButtons />,
-    ],
-    [
-      <span className="font-semibold text-teal-400">APP-1115</span>,
-      <span className="font-bold text-slate-100">Air Handling Unit</span>,
-      "Electrical",
-      "Tower A · 2",
-      "Voltas",
-      <Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
-      <Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
-      <ActionButtons />,
-    ],
-    [
-      <span className="font-semibold text-teal-400">APP-1118</span>,
-      <span className="font-bold text-slate-100">Chiller</span>,
-      "Electrical",
-      "Block 1 · 1",
-      "In-house",
-      "Important",
-      <Badge text="Overdue" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
-      <ActionButtons />,
-    ],
-    [
-      <span className="font-semibold text-teal-400">APP-1121</span>,
-      <span className="font-bold text-slate-100">Cooling Tower</span>,
-      "Plumbing",
-      "Tower A · 1",
-      "Blue Star",
-      "Normal",
-      <Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
-      <ActionButtons />,
-    ],
-  ];
 
   return (
     <div className="my-15 text-slate-100 font-sans ">
@@ -290,7 +170,7 @@ export default function EquipmentPortal() {
 
       {/* Data Table */}
       <div className="mt-4">
-        <Table headers={headers} rows={rows} />
+        <Table headers={equipmentheaders} rows={equipmentrows} />
       </div>
 
       {/* Info Banner */}

components/dashboard/operations/helpDesk.tsx

@@ -16,289 +16,13 @@ import StatCard from "@/components/common/dashStatCard";
 import Table from "@/components/common/dataTable";
 import NavigationTabs from '@/components/common/tabs';
 import { helpdeskTtabs } from '@/constants/constant';
+import { helpdeskheaders, helpdeskrows } from '@/constants/tabledata';
 
-const StatusBadge = ({
-  text,
-  color,
-}: {
-  text: string;
-  color: string;
-}) => (
-  <span
-    className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
-  >
-    <span className="h-1.5 w-1.5 rounded-full bg-current" />
-    {text}
-  </span>
-);
 
-const ActionButtons = ({ active }: { active: boolean }) => (
-  <div className="flex justify-center items-center gap-1">
-    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
-      <Pencil size={13} />
-    </Button>
 
-    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
-      <List size={13} />
-    </Button>
 
-    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
-      <ShieldCheck size={13} />
-    </Button>
 
-    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
-      <QrCode size={13} />
-    </Button>
 
-    <Button
-      className={`flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 hover:bg-slate-800 transition ${
-        active ? "text-red-400" : "text-emerald-400"
-      }`}
-    >
-      <Power size={13} />
-    </Button>
-  </div>
-);
-
-const headers = [
-  "",
-  "Block",
-  "Floor",
-  "Zone",
-  "Department",
-  "Location",
-  "Window",
-  "TAT",
-  "Sched.",
-  "Approval",
-  "Status",
-  "Actions",
-];
-
-const checkbox = (
-  <input
-    type="checkbox"
-    className="h-4 w-4 appearance-none rounded border border-slate-600 bg-slate-700 checked:bg-slate-500 checked:border-slate-500 cursor-pointer"
-  />
-);
-
-const rows = [
-  [
-    checkbox,
-    "Block 2",
-    "1",
-    "Z2",
-    "HVAC",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Parking P1</span>,
-    <span className="font-mono text-xs whitespace-nowrap">01:56–18:00</span>,
-    "60m",
-    "4",
-    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
-    <StatusBadge
-      text="Inactive"
-      color="bg-slate-700/50 text-slate-400"
-    />,
-    <ActionButtons active={false} />,
-  ],
-
-  [
-    checkbox,
-    "Block 1",
-    "2",
-    "Z1",
-    "Inspection work",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
-    <span className="font-mono text-xs whitespace-nowrap">01:56–23:59</span>,
-    "360m",
-    "6",
-    <span className="text-slate-500">—</span>,
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <ActionButtons active />,
-  ],
-
-  [
-    checkbox,
-    "Block 2",
-    "G",
-    "N",
-    "Inspection work",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Main lobby</span>,
-    <span className="font-mono text-xs whitespace-nowrap">08:00–23:59</span>,
-    "360m",
-    "4",
-    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <ActionButtons active />,
-  ],
-
-  [
-    checkbox,
-    "Block 1",
-    "2",
-    "Z2",
-    "Electrical",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Reception</span>,
-    <span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
-    "360m",
-    "4",
-    <span className="text-slate-500">—</span>,
-    <StatusBadge
-      text="Inactive"
-      color="bg-slate-700/50 text-slate-400"
-    />,
-    <ActionButtons active={false} />,
-  ],
-
-  [
-    checkbox,
-    "Block 2",
-    "3",
-    "Z1",
-    "Housekeeping",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
-    <span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
-    "20m",
-    "8",
-    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <ActionButtons active />,
-  ],
-
-  [
-    checkbox,
-    "Block 1",
-    "3",
-    "Z1",
-    "Electrical",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Food court</span>,
-    <span className="font-mono text-xs whitespace-nowrap">08:00–17:30</span>,
-    "20m",
-    "8",
-    <span className="text-slate-500">—</span>,
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <ActionButtons active />,
-  ],
-
-  [
-    checkbox,
-    "Block 2",
-    "1",
-    "Z2",
-    "HVAC",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Parking P1</span>,
-    <span className="font-mono text-xs whitespace-nowrap">01:56–18:00</span>,
-    "60m",
-    "4",
-    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
-    <StatusBadge
-      text="Inactive"
-      color="bg-slate-700/50 text-slate-400"
-    />,
-    <ActionButtons active={false} />,
-  ],
-
-  [
-    checkbox,
-    "Block 1",
-    "2",
-    "Z1",
-    "Inspection work",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
-    <span className="font-mono text-xs whitespace-nowrap">01:56–23:59</span>,
-    "360m",
-    "6",
-    <span className="text-slate-500">—</span>,
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <ActionButtons active />,
-  ],
-
-  [
-    checkbox,
-    "Block 2",
-    "G",
-    "N",
-    "Inspection work",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Main lobby</span>,
-    <span className="font-mono text-xs whitespace-nowrap">08:00–23:59</span>,
-    "360m",
-    "4",
-    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <ActionButtons active />,
-  ],
-
-  [
-    checkbox,
-    "Block 1",
-    "2",
-    "Z2",
-    "Electrical",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Reception</span>,
-    <span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
-    "360m",
-    "4",
-    <span className="text-slate-500">—</span>,
-    <StatusBadge
-      text="Inactive"
-      color="bg-slate-700/50 text-slate-400"
-    />,
-    <ActionButtons active={false} />,
-  ],
-
-  [
-    checkbox,
-    "Block 2",
-    "3",
-    "Z1",
-    "Housekeeping",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
-    <span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
-    "20m",
-    "8",
-    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <ActionButtons active />,
-  ],
-
-  [
-    checkbox,
-    "Block 1",
-    "3",
-    "Z1",
-    "Electrical",
-    <span className="font-semibold text-slate-100 whitespace-nowrap">Food court</span>,
-    <span className="font-mono text-xs whitespace-nowrap">08:00–17:30</span>,
-    "20m",
-    "8",
-    <span className="text-slate-500">—</span>,
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <ActionButtons active />,
-  ],
-];
 
 export default function HelpDeskPortal() {
   const [activeTab, setActiveTab] = useState<string>('Location');
@@ -425,7 +149,7 @@ export default function HelpDeskPortal() {
 
       {/* --- TABLE CONTAINER --- */}
       <div className="mt-4 overflow-x-auto">
-        <Table headers={headers} rows={rows} />
+        <Table headers={helpdeskheaders} rows={helpdeskrows} />
       </div>
     </div>
   );

components/dashboard/operations/inventory.tsx

@@ -9,214 +9,12 @@ import {
 import Button from "@/components/common/button";
 import StatCard from "@/components/common/dashStatCard";
 import InfoBanner from "@/components/common/infoBanner";
+import { consumptionLedger, stockItems } from "@/constants/constant";
 
 
 
 
 export default function InventoryPortal() {
-  const stockItems = [
-    {
-      item: "Cooling tower fan belt",
-      group: "HVAC",
-      store: "Block Store",
-      min: 5,
-      presentValue: 8,
-      unit: "Gallon",
-      status: "COMPLETED",
-      isHighlighted: false,
-    },
-    {
-      item: "Air filter 24×24",
-      group: "HVAC",
-      store: "Block Store",
-      min: 5,
-      presentValue: 2,
-      unit: "Nos",
-      status: "OVERDUE",
-      isHighlighted: true,
-    },
-    {
-      item: "MCB 32A",
-      group: "Electrical",
-      store: "Block Store",
-      min: 5,
-      presentValue: 8,
-      unit: "Nos",
-      status: "COMPLETED",
-      isHighlighted: false,
-    },
-    {
-      item: "Contactor 40A",
-      group: "Electrical",
-      store: "Block Store",
-      min: 2,
-      presentValue: 2,
-      unit: "Nos",
-      status: "OVERDUE",
-      isHighlighted: false,
-    },
-    {
-      item: "PVC pipe 1\"",
-      group: "Plumbing",
-      store: "Main Store",
-      min: 3,
-      presentValue: 0,
-      unit: "Mtr",
-      status: "OVERDUE",
-      isHighlighted: false,
-    },
-    {
-      item: "Submersible pump seal",
-      group: "Plumbing",
-      store: "Main Store",
-      min: 3,
-      presentValue: 2,
-      unit: "Nos",
-      status: "OVERDUE",
-      isHighlighted: false,
-    },
-    {
-      item: "Refrigerant R410a",
-      group: "HVAC",
-      store: "Block Store",
-      min: 5,
-      presentValue: 0,
-      unit: "Kg",
-      status: "OVERDUE",
-      isHighlighted: false,
-    },
-  ];
-
-  const consumptionLedger = [
-    {
-      txn: "TXN-5200",
-      item: "Cooling tower fan belt",
-      type: "Consume",
-      qty: "2 Gallon",
-      jobCard: "026/1009",
-      date: "Jun 20, 2026",
-    },
-    {
-      txn: "TXN-5201",
-      item: "MCB 32A",
-      type: "Consume",
-      qty: "1 Nos",
-      jobCard: "026/1016",
-      date: "Jun 21, 2026",
-    },
-    {
-      txn: "TXN-5202",
-      item: "Air filter 24×24",
-      type: "Receipt",
-      qty: "10 Nos",
-      jobCard: "—",
-      date: "Jun 22, 2026",
-    },
-    {
-      txn: "TXN-5203",
-      item: "Submersible pump seal",
-      type: "Consume",
-      qty: "1 Nos",
-      jobCard: "026/1023",
-      date: "Jun 23, 2026",
-    },
-    {
-      txn: "TXN-5204",
-      item: "Air filter 24×24",
-      type: "Consume",
-      qty: "3 Nos",
-      jobCard: "026/1030",
-      date: "Jun 24, 2026",
-    },
-    {
-      txn: "TXN-5205",
-      item: "PVC pipe 1\"",
-      type: "Receipt",
-      qty: "20 Mtr",
-      jobCard: "—",
-      date: "Jun 25, 2026",
-    },
-    {
-      txn: "TXN-5406",
-      item: "Cooling tower fan belt",
-      type: "Consume",
-      qty: "2 Gallon",
-      jobCard: "026/1009",
-      date: "Jun 7, 2026",
-    },
-    {
-      txn: "TXN-5407",
-      item: "MCB 32A",
-      type: "Consume",
-      qty: "1 Nos",
-      jobCard: "026/1016",
-      date: "Jun 7, 2026",
-    },
-     {
-      txn: "TXN-5200",
-      item: "Cooling tower fan belt",
-      type: "Consume",
-      qty: "2 Gallon",
-      jobCard: "026/1009",
-      date: "Jun 20, 2026",
-    },
-    {
-      txn: "TXN-5201",
-      item: "MCB 32A",
-      type: "Consume",
-      qty: "1 Nos",
-      jobCard: "026/1016",
-      date: "Jun 21, 2026",
-    },
-    {
-      txn: "TXN-5202",
-      item: "Air filter 24×24",
-      type: "Receipt",
-      qty: "10 Nos",
-      jobCard: "—",
-      date: "Jun 22, 2026",
-    },
-    {
-      txn: "TXN-5203",
-      item: "Submersible pump seal",
-      type: "Consume",
-      qty: "1 Nos",
-      jobCard: "026/1023",
-      date: "Jun 23, 2026",
-    },
-    {
-      txn: "TXN-5204",
-      item: "Air filter 24×24",
-      type: "Consume",
-      qty: "3 Nos",
-      jobCard: "026/1030",
-      date: "Jun 24, 2026",
-    },
-    {
-      txn: "TXN-5205",
-      item: "PVC pipe 1\"",
-      type: "Receipt",
-      qty: "20 Mtr",
-      jobCard: "—",
-      date: "Jun 25, 2026",
-    },
-    {
-      txn: "TXN-5406",
-      item: "Cooling tower fan belt",
-      type: "Consume",
-      qty: "2 Gallon",
-      jobCard: "026/1009",
-      date: "Jun 7, 2026",
-    },
-    {
-      txn: "TXN-5407",
-      item: "MCB 32A",
-      type: "Consume",
-      qty: "1 Nos",
-      jobCard: "026/1016",
-      date: "Jun 7, 2026",
-    },
-  ];
  
   return (
     <div className="my-15 text-slate-100 font-sans">

components/dashboard/operations/request.tsx

@@ -6,189 +6,12 @@ import NavigationTabs from '@/components/common/tabs';
 import { Reqeusttabs,statusFilters } from '@/constants/constant';
 import FilterTabs from '@/components/common/roundedFilters';
 import Table from '@/components/common/dataTable';
+import { requestheaders, requestrows } from '@/constants/tabledata';
 
 
-const StatusBadge = ({
-  text,
-  color,
-}: {
-  text: string;
-  color: string;
-}) => (
-  <span
-    className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
-  >
-    <span className="h-1.5 w-1.5 rounded-full bg-current" />
-    {text}
-  </span>
-);
 
-const headers = [
-  "Request No.",
-  "Department",
-  "Issue",
-  "Location",
-  "Assignee",
-  "Source",
-  "Status",
-];
-const rows = [
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1009</span>,
-    "Electrical",
-    "Lighting out",
-    "Block 1 · G",
-    "ME Local",
-    <span className="font-mono">Line</span>,
-    <StatusBadge
-      text="Overdue"
-      color="bg-red-500/15 text-red-400"
-    />,
-  ],
 
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1016</span>,
-    "HVAC",
-    "AHU not cooling",
-    "Lobby · 1",
-    "Dhananjay T.",
-    <span className="font-mono">Walk-in</span>,
-    <StatusBadge
-      text="Registered"
-      color="bg-blue-500/15 text-blue-400"
-    />,
-  ],
 
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1023</span>,
-    "HVAC",
-    "Thermostat fault",
-    "Block 1 · 1",
-    "ME Local",
-    <span className="font-mono">Mobile app</span>,
-    <StatusBadge
-      text="Assigned"
-      color="bg-blue-500/15 text-blue-400"
-    />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1030</span>,
-    "HVAC",
-    "Thermostat fault",
-    "Block 1 · 1",
-    "Dhananjay T.",
-    <span className="font-mono">Mobile app</span>,
-    <StatusBadge
-      text="Working"
-      color="bg-amber-500/15 text-amber-400"
-    />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1037</span>,
-    "Civil",
-    "Glass break",
-    "Block 1 · 1",
-    "Local Helpdesk",
-    <span className="font-mono">Walk-in</span>,
-    <StatusBadge
-      text="Completed"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1044</span>,
-    "HVAC",
-    "Chiller alarm",
-    "Block 1 · 1",
-    "Dhananjay T.",
-    <span className="font-mono">Mobile app</span>,
-    <StatusBadge
-      text="Overdue"
-      color="bg-red-500/15 text-red-400"
-    />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1051</span>,
-    "Plumbing",
-    "Water leakage",
-    "Lobby · 1",
-    "Local Helpdesk",
-    <span className="font-mono">Walk-in</span>,
-    <StatusBadge
-      text="Registered"
-      color="bg-blue-500/15 text-blue-400"
-    />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1058</span>,
-    "Civil",
-    "Glass break",
-    "Block 2 · 2",
-    "Dhananjay T.",
-    <span className="font-mono">Walk-in</span>,
-    <StatusBadge
-      text="Assigned"
-      color="bg-blue-500/15 text-blue-400"
-    />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1065</span>,
-    "Civil",
-    "Ceiling crack",
-    "Lobby · G",
-    "ME Local",
-    <span className="font-mono">Line</span>,
-    <StatusBadge
-      text="Working"
-      color="bg-amber-500/15 text-amber-400"
-    />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1072</span>,
-    "Plumbing",
-    "Water leakage",
-    "Block 2 · G",
-    "TECH Local",
-    <span className="font-mono">Line</span>,
-    <StatusBadge
-      text="Completed"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1079</span>,
-    "Electrical",
-    "DB switch fault",
-    "Tower A · 1",
-    "TECH Local",
-    <span className="font-mono">Mobile app</span>,
-    <StatusBadge
-      text="Overdue"
-      color="bg-red-500/15 text-red-400"
-    />,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1086</span>,
-    "HVAC",
-    "AHU not cooling",
-    "Lobby · 3",
-    "TECH Local",
-    <span className="font-mono">Walk-in</span>,
-    <StatusBadge
-      text="Registered"
-      color="bg-blue-500/15 text-blue-400"
-    />,
-  ],
-];
 
 export default function ServiceRequestsPortal() {
   const [activeTab, setActiveTab] = useState<string>('TFM Requests');
@@ -251,7 +74,7 @@ export default function ServiceRequestsPortal() {
         onChange={setActiveFilter}
       />
       <div className='mt-5'>
-<Table headers={headers} rows={rows}/>
+<Table headers={requestheaders} rows={requestrows}/>
       </div>
       
     </div>

components/dashboard/operations/vendorService.tsx

@@ -10,121 +10,9 @@ import {
 import Button from "@/components/common/button";
 import StatCard from "@/components/common/dashStatCard";
 import InfoBanner from "@/components/common/infoBanner";
+import { fieldCrewData, vendorData } from '@/constants/constant';
 
 export default function VendorServicePortal() {
-  const vendorData = [
-    {
-      name: "Voltas Ltd",
-      id: "CTR-700",
-      scope: "HVAC AMC & breakdown",
-      rating: "4.6",
-      sla: "95%",
-      slaColor: "text-emerald-400",
-      response: "4.0h",
-      openJobs: "2",
-    },
-    {
-      name: "Blue Star",
-      id: "CTR-701",
-      scope: "Chiller & VRV service",
-      rating: "4.1",
-      sla: "88%",
-      slaColor: "text-amber-400",
-      response: "1.2h",
-      openJobs: "2",
-    },
-    {
-      name: "Sterling FM",
-      id: "CTR-702",
-      scope: "Integrated FM / soft services",
-      rating: "3.4",
-      sla: "94%",
-      slaColor: "text-emerald-400",
-      response: "2.4h",
-      openJobs: "4",
-    },
-    {
-      name: "OTIS Elevators",
-      id: "CTR-704",
-      scope: "Elevator AMC",
-      rating: "4.8",
-      sla: "95%",
-      slaColor: "text-emerald-400",
-      response: "2.8h",
-      openJobs: "—",
-    },
-    {
-      name: "Sodexo",
-      id: "CTR-705",
-      scope: "Soft services & cafeteria",
-      rating: "4.3",
-      sla: "90%",
-      slaColor: "text-amber-400",
-      response: "2.8h",
-      openJobs: "1",
-    },
-    {
-      name: "In-house team",
-      id: "—",
-      scope: "Day-to-day maintenance",
-      rating: "4.0",
-      sla: "93%",
-      slaColor: "text-amber-400",
-      response: "3.2h",
-      openJobs: "3",
-    },
-  ];
-
-  const fieldCrewData = [
-    {
-      initials: "RK",
-      name: "Ravi Kumar",
-      role: "M&E Technician • Chiller plant",
-      status: "ON-SITE",
-      statusType: "onsite",
-      time: "6.4h today",
-    },
-    {
-      initials: "SI",
-      name: "Sana Iqbal",
-      role: "HVAC Engineer • AHU room L7",
-      status: "ON-SITE",
-      statusType: "onsite",
-      time: "6.1h today",
-    },
-    {
-      initials: "MD",
-      name: "Mohan D.",
-      role: "Electrician • En route",
-      status: "EN-ROUTE",
-      statusType: "enroute",
-      time: "—",
-    },
-    {
-      initials: "LN",
-      name: "Lakshmi N.",
-      role: "Housekeeping Lead • Lobby + L2",
-      status: "ON-SITE",
-      statusType: "onsite",
-      time: "6.7h today",
-    },
-    {
-      initials: "AP",
-      name: "Arjun P.",
-      role: "Plumber • Off-site",
-      status: "OFF-SITE",
-      statusType: "offsite",
-      time: "—",
-    },
-    {
-      initials: "FR",
-      name: "Fatima R.",
-      role: "BMS Operator • Control room",
-      status: "ON-SITE",
-      statusType: "onsite",
-      time: "7.6h today",
-    },
-  ];
 
   return (
     <div className="my-15 text-slate-100 font-sans">

components/dashboard/operations/workpermit.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Plus, ShieldCheck, Clock, Check, AlertTriangle, QrCode, FileText, Eye } from 'lucide-react';
 import Button from "@/components/common/button";
-import { workPermitFilters } from '@/constants/constant';
+import { permitsData, workPermitFilters } from '@/constants/constant';
 import FilterTabs from '@/components/common/roundedFilters';
 import StatCard from '@/components/common/dashStatCard';
 import InfoBanner from '@/components/common/infoBanner';
@@ -11,94 +11,9 @@ export default function WorkPermitPortal() {
   const [activeFilter, setActiveFilter] = useState<string>('All');
 
   // Permit Data matching the UI
-  const permitsData = [
-    {
-      permit: "PTW-2663",
-      workingType: "Work at Height",
-      location: "Atrium void",
-      contractor: "Blue Star",
-      validityDate: "Jun 26, 2026",
-      validityTime: "08:30–17:00",
-      crew: 2,
-      status: "ACTIVE",
-      actionText: "Close out",
-      isHighlighted: false,
-    },
-    {
-      permit: "PTW-2664",
-      workingType: "Electrical Isolation",
-      location: "STP wet well",
-      contractor: "Sterling FM",
-      validityDate: "Jun 26, 2026",
-      validityTime: "09:00–13:00",
-      crew: 3,
-      status: "SUBMITTED",
-      actionText: "Approve",
-      isHighlighted: true, // Row with highlight bar
-    },
-    {
-      permit: "PTW-2665",
-      workingType: "Confined Space",
-      location: "DG yard",
-      contractor: "In-house team",
-      validityDate: "Jun 26, 2026",
-      validityTime: "14:00–18:00",
-      crew: 4,
-      status: "APPROVED",
-      actionText: "Activate",
-      isHighlighted: false,
-    },
-    {
-      permit: "PTW-2666",
-      workingType: "Hot Work",
-      location: "Roof terrace",
-      contractor: "Voltas Ltd",
-      validityDate: "Jun 25, 2026",
-      validityTime: "08:00–12:00",
-      crew: 5,
-      status: "EXPIRED",
-      hasViewIconOnly: true,
-      isHighlighted: false,
-    },
-    {
-      permit: "PTW-2667",
-      workingType: "Work at Height",
-      location: "LT panel room",
-      contractor: "Blue Star",
-      validityDate: "Jun 25, 2026",
-      validityTime: "10:00–16:00",
-      crew: 2,
-      status: "CLOSED",
-      hasViewIconOnly: true,
-      isHighlighted: false,
-    },
-    {
-      permit: "PTW-2668",
-      workingType: "Electrical Isolation",
-      location: "Chiller plant",
-      contractor: "Sterling FM",
-      validityDate: "Jun 26, 2026",
-      validityTime: "11:00–15:00",
-      crew: 3,
-      status: "REJECTED",
-      hasViewIconOnly: true,
-      isHighlighted: false,
-    },
-    {
-      permit: "PTW-2726",
-      workingType: "Work at Height",
-      location: "Atrium void",
-      contractor: "Blue Star",
-      validityDate: "Jun 26, 2026",
-      validityTime: "08:30–17:00",
-      crew: 2,
-      status: "DRAFT",
-      actionText: "Submit",
-      isHighlighted: false,
-    },
-  ];
  
-  const renderStatusBadge = (status: string) => {
+
+ const renderStatusBadge = (status: string) => {
     switch (status) {
       case "ACTIVE":
         return (

components/dashboard/overview/buildingOwner.tsx

@@ -24,7 +24,7 @@ export default function BuildingOwnerPortal() {
             <span>•</span>
             <span>Building Owner</span>
           </div>
-          <h1 className="text-3xl font-extrabold text-white tracking-tight mt-2">
+          <h1 className="text-2xl font-bold 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">

components/dashboard/workplace/visitorManagement.tsx

@@ -13,165 +13,9 @@ import InfoBanner from "@/components/common/infoBanner";
 import FilterTabs from '@/components/common/roundedFilters';
 import { visitorFilters } from '@/constants/constant';
 import Table from '@/components/common/dataTable';
+import { visitorheaders, visitorrows } from '@/constants/tabledata';
 
 export default function VistiorManagementPortal() {
-    const headers = [
-  "Pass",
-  "Visitor",
-  "Company",
-  "Host",
-  "Purpose",
-  "Type",
-  "In",
-  "Out",
-  "Status",
-  "",
-];
-const Badge = ({
-  text,
-  color,
-}: {
-  text: string;
-  color: string;
-}) => (
-  <span
-    className={`inline-flex items-center rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-wider ${color}`}
-  >
-    <span className="mr-1.5 h-1.5 w-1.5 rounded-full bg-current"></span>
-    {text}
-  </span>
-);
-
-const rows = [
-  [
-    <span className="font-semibold text-[#2EE6C5]">VIS-4145</span>,
-    <span className="font-semibold text-slate-100">Rahul Mehta</span>,
-    "Voltas Ltd",
-    "Dhananjay T.",
-    "Maintenance visit",
-    <span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Contractor</span>,
-    "09:12",
-    "—",
-    <Badge text="Checked-In" color="bg-emerald-500/15 text-emerald-400" />,
-    <Button className="text-teal-400 font-semibold hover:text-teal-300">Check out</Button>,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">VIS-4146</span>,
-    <span className="font-semibold text-slate-100">Anita Desai</span>,
-    "Siemens",
-    "ME Local",
-    "Interview",
-    <span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Interview</span>,
-    "—",
-    "—",
-    <Badge text="Expected" color="bg-blue-500/15 text-blue-400" />,
-    <Button className="text-emerald-400 font-semibold hover:text-emerald-300">Check in</Button>,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">VIS-4147</span>,
-    <span className="font-semibold text-slate-100">Karthik R.</span>,
-    "Schindler",
-    "Site FM Lead",
-    "Client meeting",
-    <span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Guest</span>,
-    "08:05",
-    "10:40",
-    <Badge text="Checked-Out" color="bg-slate-700 text-slate-400" />,
-    <span className="text-slate-500">—</span>,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">VIS-4148</span>,
-    <span className="font-semibold text-slate-100">Priya Nair</span>,
-    "Amazon Logistics",
-    "Estates Office",
-    "Material delivery",
-    <span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Delivery</span>,
-    "—",
-    "—",
-    <Badge text="Pre-Reg" color="bg-yellow-500/15 text-yellow-400" />,
-    <Button className="text-emerald-400 font-semibold hover:text-emerald-300">Check in</Button>,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">VIS-4149</span>,
-    <span className="font-semibold text-slate-100">Imran Q.</span>,
-    "FreshMenu",
-    "TECH Local",
-    "AMC service",
-    <span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Contractor</span>,
-    "10:30",
-    "—",
-    <Badge text="Checked-In" color="bg-emerald-500/15 text-emerald-400" />,
-    <Button className="text-teal-400 font-semibold hover:text-teal-300">Check out</Button>,
-  ],
-   [
-    <span className="font-semibold text-[#2EE6C5]">VIS-4145</span>,
-    <span className="font-semibold text-slate-100">Rahul Mehta</span>,
-    "Voltas Ltd",
-    "Dhananjay T.",
-    "Maintenance visit",
-    <span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Contractor</span>,
-    "09:12",
-    "—",
-    <Badge text="Checked-In" color="bg-emerald-500/15 text-emerald-400" />,
-    <Button className="text-teal-400 font-semibold hover:text-teal-300">Check out</Button>,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">VIS-4146</span>,
-    <span className="font-semibold text-slate-100">Anita Desai</span>,
-    "Siemens",
-    "ME Local",
-    "Interview",
-    <span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Interview</span>,
-    "—",
-    "—",
-    <Badge text="Expected" color="bg-blue-500/15 text-blue-400" />,
-    <Button className="text-emerald-400 font-semibold hover:text-emerald-300">Check in</Button>,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">VIS-4147</span>,
-    <span className="font-semibold text-slate-100">Karthik R.</span>,
-    "Schindler",
-    "Site FM Lead",
-    "Client meeting",
-    <span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Guest</span>,
-    "08:05",
-    "10:40",
-    <Badge text="Checked-Out" color="bg-slate-700 text-slate-400" />,
-    <span className="text-slate-500">—</span>,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">VIS-4148</span>,
-    <span className="font-semibold text-slate-100">Priya Nair</span>,
-    "Amazon Logistics",
-    "Estates Office",
-    "Material delivery",
-    <span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Delivery</span>,
-    "—",
-    "—",
-    <Badge text="Pre-Reg" color="bg-yellow-500/15 text-yellow-400" />,
-    <Button className="text-emerald-400 font-semibold hover:text-emerald-300">Check in</Button>,
-  ],
-
-  [
-    <span className="font-semibold text-[#2EE6C5]">VIS-4149</span>,
-    <span className="font-semibold text-slate-100">Imran Q.</span>,
-    "FreshMenu",
-    "TECH Local",
-    "AMC service",
-    <span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Contractor</span>,
-    "10:30",
-    "—",
-    <Badge text="Checked-In" color="bg-emerald-500/15 text-emerald-400" />,
-    <Button className="text-teal-400 font-semibold hover:text-teal-300">Check out</Button>,
-  ],
-];
  
 const [activeFilter, setActiveFilter] = useState<string>('All');
   return (
@@ -263,7 +107,7 @@ const [activeFilter, setActiveFilter] = useState<string>('All');
                 onChange={setActiveFilter}
               />
             </div>
-<Table headers={headers} rows={rows}/>
+<Table headers={visitorheaders} rows={visitorrows}/>
              
  <div className="mb-10 mt-10">
               <InfoBanner 

constants/constant.ts

@@ -91,6 +91,7 @@ export const SIDEBAR_ITEMS = [
       { title: "Fire & Safety", href: "/compliance/fire-safety", icon: Flame },
       { title: "Waste & ESG", href: "/compliance/waste-esg", icon: Recycle },
       { title: "Training", href: "/compliance/training", icon: GraduationCap },
+      { title: "Audit & Survey", href: "/compliance/training", icon: GraduationCap },
     ],
   },
   {
@@ -204,6 +205,11 @@ export const Reqeusttabs: string[] = [
     'TFM Requests', 
     'Engineering', 
     'Schedule Complaints'
+  ];
+  export const trainingtabs: string[] = [
+    'Courses', 
+    'Certificates & history', 
+   
   ];
 
    export const statusFilters = [
@@ -460,3 +466,425 @@ export const approvalQueueData = [
     status: "completed"
   }
 ];
+
+
+export const wasteStreams = [
+  { name: "General / landfill", amount: "1240", percentage: 70, color: "bg-slate-500" },
+  { name: "Recyclable (paper/plastic)", amount: "860", percentage: 50, color: "bg-teal-400" },
+  { name: "Organic / compost", amount: "540", percentage: 35, color: "bg-emerald-400" },
+  { name: "E-waste", amount: "120", percentage: 10, color: "bg-blue-500" },
+  { name: "Hazardous", amount: "64", percentage: 5, color: "bg-rose-400" },
+];
+
+export const scheduleItems = [
+  { frequency: "Mon · Wed · Fri", stream: "General + recyclable", vendor: "GreenCycle Pvt" },
+  { frequency: "Tue · Sat", stream: "Organic / compost", vendor: "In-house" },
+  { frequency: "Monthly", stream: "E-waste", vendor: "EcoReco" },
+  { frequency: "On call", stream: "Hazardous", vendor: "Ramky Enviro" },
+];
+
+ export const stockItems = [
+    {
+      item: "Cooling tower fan belt",
+      group: "HVAC",
+      store: "Block Store",
+      min: 5,
+      presentValue: 8,
+      unit: "Gallon",
+      status: "COMPLETED",
+      isHighlighted: false,
+    },
+    {
+      item: "Air filter 24×24",
+      group: "HVAC",
+      store: "Block Store",
+      min: 5,
+      presentValue: 2,
+      unit: "Nos",
+      status: "OVERDUE",
+      isHighlighted: true,
+    },
+    {
+      item: "MCB 32A",
+      group: "Electrical",
+      store: "Block Store",
+      min: 5,
+      presentValue: 8,
+      unit: "Nos",
+      status: "COMPLETED",
+      isHighlighted: false,
+    },
+    {
+      item: "Contactor 40A",
+      group: "Electrical",
+      store: "Block Store",
+      min: 2,
+      presentValue: 2,
+      unit: "Nos",
+      status: "OVERDUE",
+      isHighlighted: false,
+    },
+    {
+      item: "PVC pipe 1\"",
+      group: "Plumbing",
+      store: "Main Store",
+      min: 3,
+      presentValue: 0,
+      unit: "Mtr",
+      status: "OVERDUE",
+      isHighlighted: false,
+    },
+    {
+      item: "Submersible pump seal",
+      group: "Plumbing",
+      store: "Main Store",
+      min: 3,
+      presentValue: 2,
+      unit: "Nos",
+      status: "OVERDUE",
+      isHighlighted: false,
+    },
+    {
+      item: "Refrigerant R410a",
+      group: "HVAC",
+      store: "Block Store",
+      min: 5,
+      presentValue: 0,
+      unit: "Kg",
+      status: "OVERDUE",
+      isHighlighted: false,
+    },
+  ];
+
+  export const consumptionLedger = [
+    {
+      txn: "TXN-5200",
+      item: "Cooling tower fan belt",
+      type: "Consume",
+      qty: "2 Gallon",
+      jobCard: "026/1009",
+      date: "Jun 20, 2026",
+    },
+    {
+      txn: "TXN-5201",
+      item: "MCB 32A",
+      type: "Consume",
+      qty: "1 Nos",
+      jobCard: "026/1016",
+      date: "Jun 21, 2026",
+    },
+    {
+      txn: "TXN-5202",
+      item: "Air filter 24×24",
+      type: "Receipt",
+      qty: "10 Nos",
+      jobCard: "—",
+      date: "Jun 22, 2026",
+    },
+    {
+      txn: "TXN-5203",
+      item: "Submersible pump seal",
+      type: "Consume",
+      qty: "1 Nos",
+      jobCard: "026/1023",
+      date: "Jun 23, 2026",
+    },
+    {
+      txn: "TXN-5204",
+      item: "Air filter 24×24",
+      type: "Consume",
+      qty: "3 Nos",
+      jobCard: "026/1030",
+      date: "Jun 24, 2026",
+    },
+    {
+      txn: "TXN-5205",
+      item: "PVC pipe 1\"",
+      type: "Receipt",
+      qty: "20 Mtr",
+      jobCard: "—",
+      date: "Jun 25, 2026",
+    },
+    {
+      txn: "TXN-5406",
+      item: "Cooling tower fan belt",
+      type: "Consume",
+      qty: "2 Gallon",
+      jobCard: "026/1009",
+      date: "Jun 7, 2026",
+    },
+    {
+      txn: "TXN-5407",
+      item: "MCB 32A",
+      type: "Consume",
+      qty: "1 Nos",
+      jobCard: "026/1016",
+      date: "Jun 7, 2026",
+    },
+     {
+      txn: "TXN-5200",
+      item: "Cooling tower fan belt",
+      type: "Consume",
+      qty: "2 Gallon",
+      jobCard: "026/1009",
+      date: "Jun 20, 2026",
+    },
+    {
+      txn: "TXN-5201",
+      item: "MCB 32A",
+      type: "Consume",
+      qty: "1 Nos",
+      jobCard: "026/1016",
+      date: "Jun 21, 2026",
+    },
+    {
+      txn: "TXN-5202",
+      item: "Air filter 24×24",
+      type: "Receipt",
+      qty: "10 Nos",
+      jobCard: "—",
+      date: "Jun 22, 2026",
+    },
+    {
+      txn: "TXN-5203",
+      item: "Submersible pump seal",
+      type: "Consume",
+      qty: "1 Nos",
+      jobCard: "026/1023",
+      date: "Jun 23, 2026",
+    },
+    {
+      txn: "TXN-5204",
+      item: "Air filter 24×24",
+      type: "Consume",
+      qty: "3 Nos",
+      jobCard: "026/1030",
+      date: "Jun 24, 2026",
+    },
+    {
+      txn: "TXN-5205",
+      item: "PVC pipe 1\"",
+      type: "Receipt",
+      qty: "20 Mtr",
+      jobCard: "—",
+      date: "Jun 25, 2026",
+    },
+    {
+      txn: "TXN-5406",
+      item: "Cooling tower fan belt",
+      type: "Consume",
+      qty: "2 Gallon",
+      jobCard: "026/1009",
+      date: "Jun 7, 2026",
+    },
+    {
+      txn: "TXN-5407",
+      item: "MCB 32A",
+      type: "Consume",
+      qty: "1 Nos",
+      jobCard: "026/1016",
+      date: "Jun 7, 2026",
+    },
+  ];
+
+
+  export   const vendorData = [
+    {
+      name: "Voltas Ltd",
+      id: "CTR-700",
+      scope: "HVAC AMC & breakdown",
+      rating: "4.6",
+      sla: "95%",
+      slaColor: "text-emerald-400",
+      response: "4.0h",
+      openJobs: "2",
+    },
+    {
+      name: "Blue Star",
+      id: "CTR-701",
+      scope: "Chiller & VRV service",
+      rating: "4.1",
+      sla: "88%",
+      slaColor: "text-amber-400",
+      response: "1.2h",
+      openJobs: "2",
+    },
+    {
+      name: "Sterling FM",
+      id: "CTR-702",
+      scope: "Integrated FM / soft services",
+      rating: "3.4",
+      sla: "94%",
+      slaColor: "text-emerald-400",
+      response: "2.4h",
+      openJobs: "4",
+    },
+    {
+      name: "OTIS Elevators",
+      id: "CTR-704",
+      scope: "Elevator AMC",
+      rating: "4.8",
+      sla: "95%",
+      slaColor: "text-emerald-400",
+      response: "2.8h",
+      openJobs: "—",
+    },
+    {
+      name: "Sodexo",
+      id: "CTR-705",
+      scope: "Soft services & cafeteria",
+      rating: "4.3",
+      sla: "90%",
+      slaColor: "text-amber-400",
+      response: "2.8h",
+      openJobs: "1",
+    },
+    {
+      name: "In-house team",
+      id: "—",
+      scope: "Day-to-day maintenance",
+      rating: "4.0",
+      sla: "93%",
+      slaColor: "text-amber-400",
+      response: "3.2h",
+      openJobs: "3",
+    },
+  ];
+
+ export  const fieldCrewData = [
+    {
+      initials: "RK",
+      name: "Ravi Kumar",
+      role: "M&E Technician • Chiller plant",
+      status: "ON-SITE",
+      statusType: "onsite",
+      time: "6.4h today",
+    },
+    {
+      initials: "SI",
+      name: "Sana Iqbal",
+      role: "HVAC Engineer • AHU room L7",
+      status: "ON-SITE",
+      statusType: "onsite",
+      time: "6.1h today",
+    },
+    {
+      initials: "MD",
+      name: "Mohan D.",
+      role: "Electrician • En route",
+      status: "EN-ROUTE",
+      statusType: "enroute",
+      time: "—",
+    },
+    {
+      initials: "LN",
+      name: "Lakshmi N.",
+      role: "Housekeeping Lead • Lobby + L2",
+      status: "ON-SITE",
+      statusType: "onsite",
+      time: "6.7h today",
+    },
+    {
+      initials: "AP",
+      name: "Arjun P.",
+      role: "Plumber • Off-site",
+      status: "OFF-SITE",
+      statusType: "offsite",
+      time: "—",
+    },
+    {
+      initials: "FR",
+      name: "Fatima R.",
+      role: "BMS Operator • Control room",
+      status: "ON-SITE",
+      statusType: "onsite",
+      time: "7.6h today",
+    },
+  ];
+
+  export  const permitsData = [
+    {
+      permit: "PTW-2663",
+      workingType: "Work at Height",
+      location: "Atrium void",
+      contractor: "Blue Star",
+      validityDate: "Jun 26, 2026",
+      validityTime: "08:30–17:00",
+      crew: 2,
+      status: "ACTIVE",
+      actionText: "Close out",
+      isHighlighted: false,
+    },
+    {
+      permit: "PTW-2664",
+      workingType: "Electrical Isolation",
+      location: "STP wet well",
+      contractor: "Sterling FM",
+      validityDate: "Jun 26, 2026",
+      validityTime: "09:00–13:00",
+      crew: 3,
+      status: "SUBMITTED",
+      actionText: "Approve",
+      isHighlighted: true, // Row with highlight bar
+    },
+    {
+      permit: "PTW-2665",
+      workingType: "Confined Space",
+      location: "DG yard",
+      contractor: "In-house team",
+      validityDate: "Jun 26, 2026",
+      validityTime: "14:00–18:00",
+      crew: 4,
+      status: "APPROVED",
+      actionText: "Activate",
+      isHighlighted: false,
+    },
+    {
+      permit: "PTW-2666",
+      workingType: "Hot Work",
+      location: "Roof terrace",
+      contractor: "Voltas Ltd",
+      validityDate: "Jun 25, 2026",
+      validityTime: "08:00–12:00",
+      crew: 5,
+      status: "EXPIRED",
+      hasViewIconOnly: true,
+      isHighlighted: false,
+    },
+    {
+      permit: "PTW-2667",
+      workingType: "Work at Height",
+      location: "LT panel room",
+      contractor: "Blue Star",
+      validityDate: "Jun 25, 2026",
+      validityTime: "10:00–16:00",
+      crew: 2,
+      status: "CLOSED",
+      hasViewIconOnly: true,
+      isHighlighted: false,
+    },
+    {
+      permit: "PTW-2668",
+      workingType: "Electrical Isolation",
+      location: "Chiller plant",
+      contractor: "Sterling FM",
+      validityDate: "Jun 26, 2026",
+      validityTime: "11:00–15:00",
+      crew: 3,
+      status: "REJECTED",
+      hasViewIconOnly: true,
+      isHighlighted: false,
+    },
+    {
+      permit: "PTW-2726",
+      workingType: "Work at Height",
+      location: "Atrium void",
+      contractor: "Blue Star",
+      validityDate: "Jun 26, 2026",
+      validityTime: "08:30–17:00",
+      crew: 2,
+      status: "DRAFT",
+      actionText: "Submit",
+      isHighlighted: false,
+    },
+  ];