table constant data is added and Compliance Safety completed

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>
+  );
+}