Tab Constant is added

2026-07-29 14:39:55 +05:30
parent 7ce1f2705e
commit f9c3e7968b
28 changed files with 1299 additions and 1093 deletions
--- a/components/dashboard/admin/Configuration/dynamicDashboard.tsx
+++ b/components/dashboard/admin/Configuration/dynamicDashboard.tsx
@@ -1,32 +1,8 @@
-import { ChevronDown, Trash2, X, Plus, Sparkles } from "lucide-react";
+import Button from "@/components/common/button";
+import { initialRows } from "@/constants/constant";
+import { ChevronDown, Trash2, X, Plus,  } from "lucide-react";
+

-const initialRows = [
-  // Row 1 (2 cards)
-  {
-    id: "row-1",
-    widgets: [
-      { id: "w1", title: "TFM Requests · Monthly", type: "report.widget" },
-      { id: "w2", title: "Recent Activity", type: "report.widget" },
-    ],
-  },
-  // Row 2 (2 cards)
-  {
-    id: "row-2",
-    widgets: [
-      { id: "w3", title: "Schedule Performance", type: "report.widget" },
-      { id: "w4", title: "Energy · Today", type: "report.widget" },
-    ],
-  },
-  // Row 3 (3 cards)
-  {
-    id: "row-3",
-    widgets: [
-      { id: "w5", title: "Top 5 Requester", type: "report.widget" },
-      { id: "w6", title: "Asset Register", type: "report.widget" },
-      { id: "w7", title: "PM Plan vs Started", type: "report.widget" },
-    ],
-  },
-];

 // Note the 'export default' keyword here:
 export default function DynamicDashboardPortal() {
@@ -35,10 +11,10 @@ export default function DynamicDashboardPortal() {
      {/* --- HEADER SECTION --- */}
      <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
        <div>
-          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
-            <span>PLATFORM</span>
-            <span>•</span>
-            <span>DYNAMIC DASHBOARD</span>
+          <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
+            <span className="text-gray-400">PLATFORM</span>
+            <span className="text-gray-600">•</span>
+            <span className="text-gray-400">DYNAMIC DASHBOARD</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight">
            Dynamic dashboard
@@ -55,12 +31,12 @@ export default function DynamicDashboardPortal() {
            <span className="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
            PUBLISHED
          </span>
-          <button className="bg-[#0E1A2B] hover:bg-slate-800 text-slate-200 border border-slate-800 px-4 py-2 rounded-lg text-xs font-semibold transition-colors">
+          <Button className="bg-[#0E1A2B] hover:bg-slate-800 text-slate-200 border border-slate-800 px-4 py-2 rounded-lg text-xs font-semibold transition-colors">
            Save draft
-          </button>
-          <button className="bg-[#1DE9B6] hover:bg-[#19d4a5] text-slate-950 font-semibold text-xs px-4 py-2 rounded-lg transition-colors shadow-lg shadow-teal-500/10">
+          </Button>
+          <Button className="bg-[#1DE9B6] hover:bg-[#19d4a5] text-slate-950 font-semibold text-xs px-4 py-2 rounded-lg transition-colors shadow-lg shadow-teal-500/10">
            Publish
-          </button>
+          </Button>
        </div>
      </div>

@@ -152,18 +128,18 @@ export default function DynamicDashboardPortal() {
        <span className="text-xs font-mono text-slate-400 uppercase tracking-wider">
          Add row:
        </span>
-        <button className="flex items-center gap-1.5  hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
+        <Button className="flex items-center gap-1.5  hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
          <Plus className="w-3.5 h-3.5 text-teal-400" />
          <span>1 card</span>
-        </button>
-        <button className="flex items-center gap-1.5  hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
+        </Button>
+        <Button className="flex items-center gap-1.5  hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
          <Plus className="w-3.5 h-3.5 text-teal-400" />
          <span>2 cards</span>
-        </button>
-        <button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
+        </Button>
+        <Button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
          <Plus className="w-3.5 h-3.5 text-teal-400" />
          <span>3 cards</span>
-        </button>
+        </Button>
      </div>

     
--- a/components/dashboard/admin/Configuration/language.tsx
+++ b/components/dashboard/admin/Configuration/language.tsx
@@ -2,36 +2,7 @@

 import { useState } from "react";
 import { Plus, ChevronDown } from "lucide-react";
-
-const initialLanguageValues = [
-  {
-    id: 1,
-    app: "Web Console",
-    menu: "Tenant",
-    screen: "Tenant List",
-    uiKey: "btn.add_tenant",
-    code: "EN",
-    value: "Add Tenant",
-  },
-  {
-    id: 2,
-    app: "Web Console",
-    menu: "Site",
-    screen: "Site List",
-    uiKey: "btn.add_site",
-    code: "EN",
-    value: "Add Site",
-  },
-  {
-    id: 3,
-    app: "Mobile App",
-    menu: "Inspections",
-    screen: "QR Round",
-    uiKey: "lbl.scan_qr",
-    code: "EN",
-    value: "Scan QR to begin round",
-  },
-];
+import { initialLanguageValues } from "@/constants/constant";

 export default function LanguagePortal() {
 
@@ -43,12 +14,12 @@ export default function LanguagePortal() {
    <div className="my-15 text-slate-100  font-sans ">
      {/* --- HEADER SECTION --- */}
      <div className="mb-6">
-        <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
-          <span>PLATFORM</span>
-          <span>•</span>
-          <span>LANGUAGE</span>
+        <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
+          <span className="text-gray-400">PLATFORM</span>
+          <span className="text-gray-600" >•</span>
+          <span className="text-gray-400">LANGUAGE</span>
        </div>
-        <h1 className="text-3xl font-bold text-white tracking-tight">Language</h1>
+        <h1 className="text-2xl font-bold text-white tracking-tight">Language</h1>
        <p className="text-sm font-medium text-slate-400 mt-1 max-w-3xl leading-relaxed">
          Manage translation keys across apps, menus and screens — then resolve their values per tenant.
        </p>
--- a/components/dashboard/admin/Configuration/mobileFlows.tsx
+++ b/components/dashboard/admin/Configuration/mobileFlows.tsx
@@ -1,3 +1,4 @@
+import Button from "@/components/common/button";
 import { Smartphone } from "lucide-react";

 export default function MobileFlowsPortal() {
@@ -7,10 +8,10 @@ export default function MobileFlowsPortal() {
      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-6">
        <div>
          {/* Breadcrumb */}
-          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
-            <span>PLATFORM</span>
-            <span>•</span>
-            <span>MOBILE</span>
+          <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
+            <span className="text-gray-400">PLATFORM</span>
+            <span className="text-gray-600">•</span>
+            <span className="text-gray-400">MOBILE</span>
          </div>

          {/* Title */}
@@ -26,10 +27,10 @@ export default function MobileFlowsPortal() {

        {/* Action Button */}
        <div className="self-start md:self-auto shrink-0">
-          <button className="flex items-center gap-2 bg-[#0A1628] hover:bg-slate-800 text-slate-200 border border-slate-700/80 px-4 py-2 rounded-lg text-xs font-semibold transition-colors shadow-sm cursor-pointer">
+          <Button className="flex items-center gap-2 bg-[#0A1628] hover:bg-slate-800 text-slate-200 border border-slate-700/80 px-4 py-2 rounded-lg text-xs font-semibold transition-colors shadow-sm cursor-pointer">
            <Smartphone className="w-4 h-4 text-slate-300" />
            <span>Open full screen</span>
-          </button>
+          </Button>
        </div>
      </div>

--- a/components/dashboard/admin/Configuration/modules.tsx
+++ b/components/dashboard/admin/Configuration/modules.tsx
@@ -2,78 +2,14 @@

 import { useState } from "react";
 import {
-  LayoutGrid,
-  CheckSquare,
-  Crosshair,
-  FileText,
-  Box,
-  Zap,
-  ClipboardCheck,
-  BarChart2,
+  
  Pencil,
  Plus,
-  Sparkles,
+  
 } from "lucide-react";
+import { initialModules } from "@/constants/constant";
+import Button from "@/components/common/button";

-// Mock Data matching the design
-const initialModules = [
-  {
-    id: "MOD-01",
-    title: "Dashboard",
-    description: "Operational overview & live KPIs",
-    icon: LayoutGrid,
-    menus: [], // Currently empty as per screenshot
-  },
-  {
-    id: "MOD-02",
-    title: "Helpdesk",
-    description: "Tickets, requests & SLA tracking",
-    icon: CheckSquare,
-    menus: ["Tickets", "SLA Settings", "Queues"],
-  },
-  {
-    id: "MOD-03",
-    title: "Equipment",
-    description: "Asset register & equipment groups",
-    icon: Crosshair,
-    menus: ["Asset Register", "Categories"],
-  },
-  {
-    id: "MOD-04",
-    title: "Request",
-    description: "Service requests & approvals",
-    icon: FileText,
-    menus: ["My Requests", "Approvals"],
-  },
-  {
-    id: "MOD-05",
-    title: "Inventory",
-    description: "Stock, spares & consumables",
-    icon: Box,
-    menus: ["Stock Levels", "Suppliers"],
-  },
-  {
-    id: "MOD-06",
-    title: "Energy",
-    description: "Meters, consumption & analytics",
-    icon: Zap,
-    menus: ["Meters", "Analytics"],
-  },
-  {
-    id: "MOD-07",
-    title: "Inspections",
-    description: "QR rounds & checklists",
-    icon: ClipboardCheck,
-    menus: ["Rounds", "Checklists"],
-  },
-  {
-    id: "MOD-08",
-    title: "Reports",
-    description: "Analytics & export tools",
-    icon: BarChart2,
-    menus: ["Scheduled Reports", "Custom Builder"],
-  },
-];

 export default function ModulesPortal() {
  const [selectedModuleId, setSelectedModuleId] = useState("MOD-01");
@@ -84,12 +20,12 @@ export default function ModulesPortal() {
    <div className="my-15 text-slate-100  font-saas">
      {/* Header Section */}
      <div className="mb-6">
-        <div className="flex items-center gap-2 text-[10px] font-semibold tracking-wider text-slate-400 uppercase font-mono mb-1">
-          <span>PLATFORM</span>
-          <span>•</span>
-          <span>MODULES</span>
+        <div className="flex items-center gap-2 text-[12px] font-semibold tracking-wider text-slate-400 uppercase font-mono mb-1">
+          <span className="text-gray-400">PLATFORM</span>
+          <span className="text-gray-600">•</span>
+          <span className="text-gray-400">MODULES</span>
        </div>
-        <h1 className="text-3xl font-bold text-white tracking-tight">Modules</h1>
+        <h1 className="text-2xl font-bold text-white tracking-tight">Modules</h1>
        <p className="text-sm text-slate-400 mt-1 max-w-2xl">
          The catalog of system modules and their menus. These are what you switch on per tenant under feature access.
        </p>
@@ -107,10 +43,10 @@ export default function ModulesPortal() {
                {initialModules.length} available
              </span>
            </div>
-            <button className="flex items-center gap-1.5 text-emerald-400 hover:text-emerald-300 text-xs font-semibold transition-colors">
+            <Button className="flex items-center gap-1.5 text-emerald-400 hover:text-emerald-300 text-xs font-semibold transition-colors">
              <Plus className="w-4 h-4" />
              <span>Add module</span>
-            </button>
+            </Button>
          </div>

          {/* Module Items */}
@@ -181,10 +117,10 @@ export default function ModulesPortal() {
                  Under {activeModule?.title || "Module"}
                </span>
              </div>
-              <button className="flex items-center gap-1.5 text-teal-400 hover:text-teal-300 text-xs font-semibold transition-colors">
+              <Button className="flex items-center gap-1.5 text-teal-400 hover:text-teal-300 text-xs font-semibold transition-colors">
                <Plus className="w-4 h-4" />
                <span>Add menu</span>
-              </button>
+              </Button>
            </div>

            {/* Empty State / Menus List */}
--- a/components/dashboard/admin/Platform/overview.tsx
+++ b/components/dashboard/admin/Platform/overview.tsx
@@ -1,17 +1,14 @@
-import { useState } from 'react';
+
 import { 
-  ClipboardCheck, 
-  Clock, 
-  AlertTriangle, 
-  Activity, 
  Building2, 
  Users, 
  MapPin, 
  Grid,
  ArrowRight,
-  Sparkles
+  
 } from "lucide-react";
 import StatCard from "@/components/common/dashStatCard";
+import Button from "@/components/common/button";

 export default function AdminOverviewPortal() {
  // Sample data for the recent audits table below
@@ -37,10 +34,11 @@ export default function AdminOverviewPortal() {
      {/* --- 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">PLATFORM</span>
-            <span className="text-slate-500">•</span>
-            <span className="text-slate-500">KAFM</span>
+          <div className="flex items-center gap-2 text-[12px]
+           font-bold tracking-widest uppercase font-mono">
+            <span className="text-gray-400">PLATFORM</span>
+            <span className="text-gray-600">•</span>
+            <span className="text-gray-400">KAFM</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-1">
            Platform overview
@@ -52,7 +50,7 @@ export default function AdminOverviewPortal() {

        {/* Top Right Status Badge */}
        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-900/80 border border-teal-500/30 text-teal-400 text-xs font-mono w-fit">
-          <span className="h-2 w-2 rounded-full bg-teal-400 animate-pulse" />
+          <span className="h-2 w-2 text-teal-400 rounded-full animate-pulse" />
          <span>PRODUCTION</span>
          <span className="text-slate-600">•</span>
          <span className="text-teal-300/80">region us-east-1</span>
@@ -117,9 +115,9 @@ export default function AdminOverviewPortal() {
                <h2 className="text-base font-semibold text-white">Recently onboarded tenants</h2>
                <p className="text-xs text-slate-400 font-mono mt-0.5">Newest organizations on the platform</p>
              </div>
-              <button className="text-teal-400 hover:text-teal-300 text-xs font-semibold flex items-center gap-1 transition-colors">
+              <Button className="text-teal-400 hover:text-teal-300 text-xs font-semibold flex items-center gap-1 transition-colors">
                View all <ArrowRight className="w-3.5 h-3.5" />
-              </button>
+              </Button>
            </div>

            {/* Table Header */}
--- a/components/dashboard/admin/Platform/security.tsx
+++ b/components/dashboard/admin/Platform/security.tsx
@@ -5,183 +5,14 @@ import {
  AlertTriangle, 
  ShieldCheck, 
  BarChart3,
-  Sparkles,
-  ChevronDown
+  ChevronDown,
 } 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 { StatusBadge } from "@/components/common/statusBadge";
+import { auditLogHeaders, auditLogRows, trustedDeviceHeaders, trustedDeviceRows } from "@/constants/tabledata";

-export const trustedDeviceHeaders = [
-  "USER",
-  "DEVICE",
-  "IP",
-  "LAST SEEN",
-  "EXPIRES",
-  "STATUS",
-  "ACTIONS",
-];
-
-export const trustedDeviceRows = [
-  [
-    <span className="font-semibold text-white">Dhananjay T.</span>,
-    "Chrome 126 · Windows 11",
-    <span className="font-mono">103.212.14.8</span>,
-    <span className="font-mono">Today, 08:12</span>,
-    <span className="font-mono">Jul 30, 2026</span>,
-    <StatusBadge
-      text="TRUSTED"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
-      Revoke
-    </Button>,
-  ],
-
-  [
-    <span className="font-semibold text-white">Kavya Raghunathan</span>,
-    "Safari 18 · macOS",
-    <span className="font-mono">49.37.201.55</span>,
-    <span className="font-mono">Yesterday, 17:40</span>,
-    <span className="font-mono">Jul 21, 2026</span>,
-    <StatusBadge
-      text="TRUSTED"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
-      Revoke
-    </Button>,
-  ],
-
-  [
-    <span className="font-semibold text-white">Rahul Iyer</span>,
-    "KAFM Mobile · Android 15",
-    <span className="font-mono">152.58.33.104</span>,
-    <span className="font-mono">Today, 06:58</span>,
-    <span className="font-mono">Jul 12, 2026</span>,
-    <StatusBadge
-      text="TRUSTED"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-    <Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
-      Revoke
-    </Button>,
-  ],
-
-  [
-    <span className="font-semibold text-white">Meera Pillai</span>,
-    "Edge 126 · Windows 10",
-    <span className="font-mono">103.212.14.31</span>,
-    <span className="font-mono">Jun 18, 2026</span>,
-    <span className="font-mono text-slate-400">Expired</span>,
-    <StatusBadge
-      text="REVOKED"
-      color="bg-slate-700/50 text-slate-400"
-    />,
-    <span className="text-slate-500 text-center">—</span>,
-  ],
-];
-
-export const auditLogHeaders = [
-  "WHEN",
-  "USER",
-  "EVENT",
-  "IP",
-  "RESULT",
-];
-
-export const auditLogRows = [
-  [
-    <span className="font-mono text-slate-300">Today 08:12</span>,
-    <span className="font-mono text-slate-300">dhananjay@kafm.io</span>,
-    <span className="text-slate-200">Sign-in · password + MFA</span>,
-    <span className="font-mono text-slate-300">103.212.14.8</span>,
-    <StatusBadge
-      text="OK"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-  ],
-
-  [
-    <span className="font-mono text-slate-300">Today 07:56</span>,
-    <span className="font-mono text-slate-300">kavya@kafm.io</span>,
-    <span className="text-slate-200">
-      Role changed · Technician → M&E Supervisor
-    </span>,
-    <span className="font-mono text-slate-300">49.37.201.55</span>,
-    <StatusBadge
-      text="OK"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-  ],
-
-  [
-    <span className="font-mono text-slate-300">Today 07:31</span>,
-    <span className="font-mono text-slate-300">unknown@ext.net</span>,
-    <span className="text-slate-200">
-      Sign-in · wrong password (3rd attempt)
-    </span>,
-    <span className="font-mono text-slate-300">91.240.118.7</span>,
-    <StatusBadge
-      text="FAILED"
-      color="bg-rose-500/15 text-rose-400"
-    />,
-  ],
-
-  [
-    <span className="font-mono text-slate-300">Today 06:58</span>,
-    <span className="font-mono text-slate-300">rahul@kafm.io</span>,
-    <span className="text-slate-200">
-      Device trusted · KAFM Mobile (30 days)
-    </span>,
-    <span className="font-mono text-slate-300">152.58.33.104</span>,
-    <StatusBadge
-      text="OK"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-  ],
-
-  [
-    <span className="font-mono text-slate-300">Yesterday 17:40</span>,
-    <span className="font-mono text-slate-300">kavya@kafm.io</span>,
-    <span className="text-slate-200">
-      Password reset · self-service link
-    </span>,
-    <span className="font-mono text-slate-300">49.37.201.55</span>,
-    <StatusBadge
-      text="OK"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-  ],
-
-  [
-    <span className="font-mono text-slate-300">Yesterday 14:05</span>,
-    <span className="font-mono text-slate-300">meera@kafm.io</span>,
-    <span className="text-slate-200">
-      MFA reset by admin · device revoked
-    </span>,
-    <span className="font-mono text-slate-300">103.212.14.31</span>,
-    <StatusBadge
-      text="PENDING"
-      color="bg-amber-500/15 text-amber-400"
-    />,
-  ],
-
-  [
-    <span className="font-mono text-slate-300">Jun 30 09:12</span>,
-    <span className="font-mono text-slate-300">admin@kafm.io</span>,
-    <span className="text-slate-200">
-      Sign-in policy updated · idle timeout 30 min
-    </span>,
-    <span className="font-mono text-slate-300">103.212.14.8</span>,
-    <StatusBadge
-      text="OK"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-  ],
-];

 export default function SecurityPortal() {
  const [enforceMfa, setEnforceMfa] = useState(true);
@@ -193,12 +24,12 @@ export default function SecurityPortal() {
      {/* --- 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">PLATFORM</span>
-            <span className="text-slate-500">•</span>
-            <span className="text-slate-500">SECURITY</span>
+          <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
+            <span className="text-gray-400">PLATFORM</span>
+            <span className="text-gray-600">•</span>
+            <span className="text-gray-400">SECURITY</span>
          </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight mt-1">
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-1">
            Security & sessions
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
@@ -299,12 +130,12 @@ export default function SecurityPortal() {
                  6-digit code required on every untrusted device
                </p>
              </div>
-              <button 
+              <Button 
                onClick={() => setEnforceMfa(!enforceMfa)}
                className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${enforceMfa ? 'bg-teal-400' : 'bg-slate-800'}`}
              >
                <span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${enforceMfa ? 'translate-x-5' : 'translate-x-0'}`} />
-              </button>
+              </Button>
            </div>

            {/* Select 1: Idle Session Timeout */}
@@ -333,12 +164,12 @@ export default function SecurityPortal() {
                  Pre-checks the persistent-session option at sign-in
                </p>
              </div>
-              <button 
+              <Button 
                onClick={() => setKeepMeSignedIn(!keepMeSignedIn)}
                className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${keepMeSignedIn ? 'bg-teal-400' : 'bg-slate-800'}`}
              >
                <span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${keepMeSignedIn ? 'translate-x-5' : 'translate-x-0'}`} />
-              </button>
+              </Button>
            </div>

            {/* Toggle 3: Re-authenticate */}
@@ -349,12 +180,12 @@ export default function SecurityPortal() {
                  Password prompt before user, role or policy changes
                </p>
              </div>
-              <button 
+              <Button
                onClick={() => setReAuthenticate(!reAuthenticate)}
                className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${reAuthenticate ? 'bg-teal-400' : 'bg-slate-800'}`}
              >
                <span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${reAuthenticate ? 'translate-x-5' : 'translate-x-0'}`} />
-              </button>
+              </Button>
            </div>

            {/* Select 2: Trusted device window */}
--- a/components/dashboard/admin/Platform/site.tsx
+++ b/components/dashboard/admin/Platform/site.tsx
@@ -1,158 +1,18 @@
 import { useState } from 'react';
 import { 
-  Building2, 
-  Users, 
-  MapPin, 
-  Grid, 
+ 
  Plus, 
-  Eye,
-  Settings,
-  Pencil,
-  GitBranch,
+ 
  Search,
  ChevronDown,
-  Sparkles
+  
 } from "lucide-react";
 import Button from "@/components/common/button";

 import Table from '@/components/common/dataTable';
-import { StatusBadge } from '@/components/common/statusBadge';
-import ActionButtons from '@/components/common/actionButton';

-export const siteHeaders = [
-  "Site",
-  "Tenant",
-  "Coordinates",
-  "Radius",
-  "Status",
-  "Actions",
-];
+import { siteHeaders, siteRows } from "@/constants/adminTableDatat";

-export const siteRows = [
-  [
-    <div>
-      <p className="font-semibold text-slate-100">Apple One — HQ Tower</p>
-      <p className="font-mono text-xs text-slate-400">AO-HQ · SIT-3001</p>
-    </div>,
-    "Apple One",
-    <span className="font-mono whitespace-nowrap">19.0760, 72.8777</span>,
-    <span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">200 m</span>,
-    <div className="flex items-center gap-3">
-      <div className="h-7 w-12 rounded-full bg-teal-400 relative">
-        <div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
-      </div>
-      <StatusBadge
-        text="Active"
-        color="bg-emerald-500/15 text-emerald-400"
-      />
-    </div>,
-    <ActionButtons />,
-  ],
-
-  [
-    <div>
-      <p className="font-semibold text-slate-100">Apple One — Annexe</p>
-      <p className="font-mono text-xs text-slate-400">AO-AX · SIT-3002</p>
-    </div>,
-    "Apple One",
-    <span className="font-mono whitespace-nowrap">19.1020, 72.8895</span>,
-    <span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">150 m</span>,
-    <div className="flex items-center gap-3">
-      <div className="h-7 w-12 rounded-full bg-teal-400 relative">
-        <div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
-      </div>
-      <StatusBadge
-        text="Active"
-        color="bg-emerald-500/15 text-emerald-400"
-      />
-    </div>,
-    <ActionButtons />,
-  ],
-
-  [
-    <div>
-      <p className="font-semibold text-slate-100">Novotel Pune — Main</p>
-      <p className="font-mono text-xs text-slate-400">NP-M · SIT-3003</p>
-    </div>,
-    "Novotel Pune",
-    <span className="font-mono whitespace-nowrap">18.5604, 73.9090</span>,
-    <span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">180 m</span>,
-    <div className="flex items-center gap-3">
-      <div className="h-7 w-12 rounded-full bg-teal-400 relative">
-        <div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
-      </div>
-      <StatusBadge
-        text="Active"
-        color="bg-emerald-500/15 text-emerald-400"
-      />
-    </div>,
-    <ActionButtons />,
-  ],
-
-  [
-    <div>
-      <p className="font-semibold text-slate-100">
-        SRM Campus — Academic Block
-      </p>
-      <p className="font-mono text-xs text-slate-400">SRM-AB · SIT-3004</p>
-    </div>,
-    "SRM Campus",
-    <span className="font-mono whitespace-nowrap">12.8230, 80.0444</span>,
-    <span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">400 m</span>,
-    <div className="flex items-center gap-3">
-      <div className="h-7 w-12 rounded-full bg-teal-400 relative">
-        <div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
-      </div>
-      <StatusBadge
-        text="Active"
-        color="bg-emerald-500/15 text-emerald-400"
-      />
-    </div>,
-    <ActionButtons />,
-  ],
-
-  [
-    <div>
-      <p className="font-semibold text-slate-100">
-        SRM Campus — Hostel Block
-      </p>
-      <p className="font-mono text-xs text-slate-400">SRM-HB · SIT-3005</p>
-    </div>,
-    "SRM Campus",
-    <span className="font-mono whitespace-nowrap">12.8255, 80.0478</span>,
-    <span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">350 m</span>,
-    <div className="flex items-center gap-3">
-      <div className="h-7 w-12 rounded-full bg-teal-400 relative">
-        <div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
-      </div>
-      <StatusBadge
-        text="Active"
-        color="bg-emerald-500/15 text-emerald-400"
-      />
-    </div>,
-    <ActionButtons />,
-  ],
-
-  [
-    <div>
-      <p className="font-semibold text-slate-100">Local 1 — Site</p>
-      <p className="font-mono text-xs text-slate-400">L1-S · SIT-3006</p>
-    </div>,
-    "Local 1",
-    <span className="font-mono whitespace-nowrap">19.2183, 72.9781</span>,
-    <span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">120 m</span>,
-    <div className="flex items-center gap-3">
-      <div className="h-7 w-12 rounded-full bg-teal-400 relative">
-        <div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
-      </div>
-      <StatusBadge
-        text="Active"
-        color="bg-emerald-500/15 text-emerald-400"
-      />
-    </div>,
-    <ActionButtons />,
-  ],
-];

 export default function SitePortal() {
  const [searchQuery, setSearchQuery] = useState('');
@@ -162,12 +22,12 @@ export default function SitePortal() {
      {/* --- 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">PLATFORM</span>
-            <span className="text-slate-500">•</span>
-            <span className="text-slate-500">SITES</span>
+          <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
+            <span className="text-gray-400">PLATFORM</span>
+            <span className="text-gray-600">•</span>
+            <span className="text-gray-400">SITES</span>
          </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight mt-1">
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-1">
            Sites
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
--- a/components/dashboard/admin/Platform/tenants.tsx
+++ b/components/dashboard/admin/Platform/tenants.tsx
@@ -1,9 +1,6 @@
-import { useState } from 'react';
+
 import { 
-  Building2, 
-  Users, 
-  MapPin, 
-  Grid, 
+ 
  Plus, 
  Eye,
  Settings,
@@ -13,164 +10,12 @@ import {
  ChevronDown
 } from "lucide-react";
 import Button from "@/components/common/button";
-import StatCard from "@/components/common/dashStatCard";
+
 import Table from '@/components/common/dataTable';
-import { StatusBadge } from '@/components/common/statusBadge';
+import { organizationHeaders, organizationRows } from "@/constants/adminTableDatat";

-export const organizationHeaders = [
-  "Organization",
-  "Tenant ID",
-  "Contact",
-  "Time Zone",
-  "Status",
-  "Actions",
-];

-const ActionButtons = () => (
-  <div className="flex items-center justify-center gap-1">
-    <Button className="flex h-8 w-8 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
-      <Eye size={15} />
-    </Button>

-    <Button className="flex h-8 w-8 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
-      <Settings size={15} />
-    </Button>
-
-    <Button className="flex h-8 w-8 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
-      <GitBranch size={15} />
-    </Button>
-
-    <Button className="flex h-8 w-8 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
-      <Pencil size={15} />
-    </Button>
-  </div>
-);
-
-export const organizationRows = [
-  [
-    <div className="flex items-center gap-3">
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500/15 font-semibold text-emerald-400">
-        AO
-      </div>
-
-      <div>
-        <div className="font-semibold text-slate-100">Apple One</div>
-        <div className="text-slate-400">ops@appleone.com</div>
-      </div>
-    </div>,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      TNT-1001
-    </span>,
-
-    <div>
-      <div className="font-semibold text-slate-100">Dhananjay T.</div>
-      <div className="text-sky-300">+91 98200 10001</div>
-    </div>,
-
-    <span className="font-mono">Asia/Kolkata</span>,
-
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-
-    <ActionButtons />,
-  ],
-
-  [
-    <div className="flex items-center gap-3">
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/15 font-semibold text-blue-400">
-        NP
-      </div>
-
-      <div>
-        <div className="font-semibold text-slate-100">Novotel Pune</div>
-        <div className="text-slate-400">fm@novotelpune.com</div>
-      </div>
-    </div>,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      TNT-1002
-    </span>,
-
-    <div>
-      <div className="font-semibold text-slate-100">Site FM Lead</div>
-      <div className="text-sky-300">+91 98220 20002</div>
-    </div>,
-
-    <span className="font-mono">Asia/Kolkata</span>,
-
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-
-    <ActionButtons />,
-  ],
-
-  [
-    <div className="flex items-center gap-3">
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/15 font-semibold text-blue-400">
-        SC
-      </div>
-
-      <div>
-        <div className="font-semibold text-slate-100">SRM Campus</div>
-        <div className="text-slate-400">estates@srm.edu</div>
-      </div>
-    </div>,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      TNT-1003
-    </span>,
-
-    <div>
-      <div className="font-semibold text-slate-100">Estates Office</div>
-      <div className="text-sky-300">+91 98430 30003</div>
-    </div>,
-
-    <span className="font-mono">Asia/Kolkata</span>,
-
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-
-    <ActionButtons />,
-  ],
-
-  [
-    <div className="flex items-center gap-3">
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/15 font-semibold text-blue-400">
-        L1
-      </div>
-
-      <div>
-        <div className="font-semibold text-slate-100">Local 1</div>
-        <div className="text-slate-400">admin@local1.com</div>
-      </div>
-    </div>,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      TNT-1004
-    </span>,
-
-    <div>
-      <div className="font-semibold text-slate-100">Local Admin</div>
-      <div className="text-sky-300">+91 98000 40004</div>
-    </div>,
-
-    <span className="font-mono">Asia/Kolkata</span>,
-
-    <StatusBadge
-      text="Active"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-
-    <ActionButtons />,
-  ],
-];

 export default function TenantsPortal() {
 
@@ -180,12 +25,12 @@ export default function TenantsPortal() {
      {/* --- 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">PLATFORM</span>
-            <span className="text-slate-500">•</span>
-            <span className="text-slate-500">TENANTS</span>
+          <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
+            <span className="text-gray-400">PLATFORM</span>
+            <span className="text-gray-600">•</span>
+            <span className="text-gray-400">TENANTS</span>
          </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight mt-1">
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-1">
            Tenants
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-1 max-w-xl leading-relaxed">
--- a/components/dashboard/admin/Platform/users.tsx
+++ b/components/dashboard/admin/Platform/users.tsx
@@ -4,245 +4,14 @@ import {
  Eye,
  KeyRound,
  Search,
-  Sparkles
+  
 } from "lucide-react";
 import Button from "@/components/common/button";
 import Table from '@/components/common/dataTable';
-import { StatusBadge } from '@/components/common/statusBadge';
+import { userHeaders, userRows } from '@/constants/adminTableDatat';

-export const userHeaders = [
-  "Name",
-  "Email",
-  "Phone",
-  "Tenants",
-  "MFA",
-  "User ID",
-  "Actions",
-];

-const UserActionButtons = () => (
-  <div className="flex items-center justify-center gap-2">
-    <Button className="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
-      <Eye size={16} />
-    </Button>

-    <Button className="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
-      <KeyRound size={16} />
-    </Button>
-  </div>
-);
-
-export const userRows = [
-  [
-    <div className="flex items-center gap-4">
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-500/15 font-semibold text-amber-400">
-        DT
-      </div>
-
-      <span className="font-semibold text-slate-100">
-        Dhananjay T.
-      </span>
-    </div>,
-
-    <span className="font-semibold text-slate-100">
-      dhananjay@kafm.io
-    </span>,
-
-    <span className="font-mono text-sky-300">
-      +91 98200 10001
-    </span>,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      4 assigned
-    </span>,
-
-    <StatusBadge
-      text="On"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      USR-5001
-    </span>,
-
-    <UserActionButtons />,
-  ],
-
-  [
-    <div className="flex items-center gap-4">
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-500/15 font-semibold text-cyan-400">
-        MS
-      </div>
-
-      <span className="font-semibold text-slate-100">
-        ME Supervisor
-      </span>
-    </div>,
-
-    <span className="font-semibold text-slate-100">
-      me.local@kafm.io
-    </span>,
-
-    <span className="font-mono text-sky-300">
-      +91 98201 10010
-    </span>,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      1 assigned
-    </span>,
-
-    <StatusBadge
-      text="On"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      USR-5002
-    </span>,
-
-    <UserActionButtons />,
-  ],
-
-  [
-    <div className="flex items-center gap-4">
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-500/15 font-semibold text-amber-400">
-        T
-      </div>
-
-      <span className="font-semibold text-slate-100">
-        Technician
-      </span>
-    </div>,
-
-    <span className="font-semibold text-slate-100">
-      tech.local@kafm.io
-    </span>,
-
-    <span className="font-mono text-sky-300">
-      +91 98202 10011
-    </span>,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      2 assigned
-    </span>,
-
-    <StatusBadge
-      text="Off"
-      color="bg-slate-700/50 text-slate-400"
-    />,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      USR-5003
-    </span>,
-
-    <UserActionButtons />,
-  ],
-
-  [
-    <div className="flex items-center gap-4">
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-rose-500/15 font-semibold text-rose-400">
-        TC
-      </div>
-
-      <span className="font-semibold text-slate-100">
-        Tenant Customer
-      </span>
-    </div>,
-
-    <span className="font-semibold text-slate-100">
-      tenant@kafm.io
-    </span>,
-
-    <span className="font-mono text-sky-300">
-      +91 98203 10012
-    </span>,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      1 assigned
-    </span>,
-
-    <StatusBadge
-      text="On"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      USR-5004
-    </span>,
-
-    <UserActionButtons />,
-  ],
-
-  [
-    <div className="flex items-center gap-4">
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-violet-500/15 font-semibold text-violet-400">
-        HA
-      </div>
-
-      <span className="font-semibold text-slate-100">
-        Helpdesk Agent
-      </span>
-    </div>,
-
-    <span className="font-semibold text-slate-100">
-      help@kafm.io
-    </span>,
-
-    <span className="font-mono text-sky-300">
-      +91 98204 10013
-    </span>,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      2 assigned
-    </span>,
-
-    <StatusBadge
-      text="On"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      USR-5005
-    </span>,
-
-    <UserActionButtons />,
-  ],
-
-  [
-    <div className="flex items-center gap-4">
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-orange-500/15 font-semibold text-orange-400">
-        EA
-      </div>
-
-      <span className="font-semibold text-slate-100">
-        Energy Analyst
-      </span>
-    </div>,
-
-    <span className="font-semibold text-slate-100">
-      energy@kafm.io
-    </span>,
-
-    <span className="font-mono text-sky-300">
-      +91 98430 30030
-    </span>,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      1 assigned
-    </span>,
-
-    <StatusBadge
-      text="On"
-      color="bg-emerald-500/15 text-emerald-400"
-    />,
-
-    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
-      USR-5006
-    </span>,
-
-    <UserActionButtons />,
-  ],
-];

 export default function UserPortal() {
  const [searchQuery, setSearchQuery] = useState('');
@@ -252,12 +21,12 @@ export default function UserPortal() {
      {/* --- 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">PLATFORM</span>
-            <span className="text-slate-500">•</span>
-            <span className="text-slate-500">USERS</span>
+          <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
+            <span className="text-gray-400">PLATFORM</span>
+            <span className="text-gray-600">•</span>
+            <span className="text-gray-400">USERS</span>
          </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight mt-1">
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-1">
            Users
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
--- a/components/dashboard/compliance/training.tsx
+++ b/components/dashboard/compliance/training.tsx
@@ -13,7 +13,7 @@ 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 { trainingtabs } from '@/constants/tabConstant';
 import InfoBanner from '@/components/common/infoBanner';
 import { trainingheaders, trainingrows } from '@/constants/tabledata';

--- a/components/dashboard/insight/reports.tsx
+++ b/components/dashboard/insight/reports.tsx
@@ -2,9 +2,10 @@ import { useState } from 'react';

 import Button from "@/components/common/button";
 import NavigationTabs from '@/components/common/tabs';
-import { reportFilters, reporttabs, Reqeusttabs, statusFilters } from '@/constants/constant';
+import { reportFilters,  } from '@/constants/constant';
 import FilterTabs from '@/components/common/roundedFilters';
 import Table from '@/components/common/dataTable';
+import { reporttabs } from '@/constants/tabConstant';
 import { reportheaders, reportrows } from '@/constants/tabledata';


--- a/components/dashboard/intelligence/aiAndPredictive.tsx
+++ b/components/dashboard/intelligence/aiAndPredictive.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+
 import { 
  Zap, 
  AlertTriangle, 
@@ -6,7 +6,7 @@ import {
  Plus, 
  Sparkles,
  ShieldAlert,
-  IndianRupee
+
 } from "lucide-react";
 import Button from "@/components/common/button";
 import StatCard from "@/components/common/dashStatCard";
@@ -20,12 +20,12 @@ export default function AiPredictivePortal() {
      {/* --- 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">
+          <div className="flex items-center gap-2 text-[12px] 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>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">INTELLIGENCE</span>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">AI</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            AI & predictive intelligence
--- a/components/dashboard/intelligence/aiHelpDesk.tsx
+++ b/components/dashboard/intelligence/aiHelpDesk.tsx
@@ -6,7 +6,7 @@ import {
  ReceiptIndianRupee,
 } from "lucide-react";

-import InfoBanner from "@/components/common/infoBanner";
+
 import Button from "@/components/common/button";
 import NavigationTabs from "@/components/common/tabs";

@@ -15,7 +15,8 @@ import { useState } from "react";
 import StatCard from "@/components/common/dashStatCard";
 import { Card } from "@/components/common/cardWrapper";
 import { CardHeader } from "@/components/common/cardHeader";
-import { aiHelpdeskTabs, HANDLES_DATA, LIVE_ACTIVITIES } from "@/constants/constant";
+import {  HANDLES_DATA, LIVE_ACTIVITIES } from "@/constants/constant";
+import { aiHelpdeskTabs } from "@/constants/tabConstant";

 // Sample mock data for Agent Activity

@@ -27,12 +28,12 @@ export default function AiHelpdeskPortal() {
      {/* --- HEADER SECTION WITH BUTTONS --- */}
      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
        <div>
-          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
+          <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest text-slate-500 uppercase font-mono">
            <span className="text-teal-400">Apple One — HQ Tower</span>
-            <span>•</span>
-            <span className="text-slate-500">INTELLIGENCE</span>
-            <span>•</span>
-            <span className="text-slate-500">AI HELPDESK</span>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">INTELLIGENCE</span>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">AI HELPDESK</span>
          </div>

          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
--- a/components/dashboard/intelligence/assetHealth.tsx
+++ b/components/dashboard/intelligence/assetHealth.tsx
@@ -4,17 +4,13 @@ import {
  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
+
 import Table from '@/components/common/dataTable';
 import { assetHealthheaders, assetHealthrows } from '@/constants/tabledata';

@@ -24,12 +20,12 @@ export default function AssetHealthPortal() {
      {/* --- 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">
+          <div className="flex items-center gap-2 text-[12px] 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>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">INTELLIGENCE</span>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">ASSET HEALTH</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            Asset health & reliability
--- a/components/dashboard/intelligence/connectedAssets.tsx
+++ b/components/dashboard/intelligence/connectedAssets.tsx
@@ -12,8 +12,7 @@ import StatCard from "@/components/common/dashStatCard";
 import Table from '@/components/common/dataTable';
 import NavigationTabs from '@/components/common/tabs';

-import InfoBanner from '@/components/common/infoBanner';
-import { connectedassettabs } from '@/constants/constant';
+import { connectedassettabs } from '@/constants/tabConstant';
 import { connectedassetheaders, connectedassetrows } from '@/constants/tabledata';

 export default function ConnectedAssetPortal() {
@@ -24,12 +23,12 @@ export default function ConnectedAssetPortal() {
      {/* --- 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">
+          <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
            <span className="text-teal-400">Apple One — HQ Tower</span>
-            <span className="text-slate-500">•</span>
-            <span className="text-slate-500">INTELLIGENCE</span>
-            <span className="text-slate-500">•</span>
-            <span className="text-slate-500">CONNECTED ASSETS</span>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">INTELLIGENCE</span>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">CONNECTED ASSETS</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            Connected refrigeration & HVAC
--- a/components/dashboard/intelligence/connectedOps.tsx
+++ b/components/dashboard/intelligence/connectedOps.tsx
@@ -4,7 +4,7 @@ import {
  Globe
 } from "lucide-react";
      
-import { SATISFACTION_DRIVERS, TICKETS_DATA } from "@/constants/constant";
+
 import Button from "@/components/common/button";
 import InfoBanner from "@/components/common/infoBanner";

@@ -13,95 +13,10 @@ import { Card } from "@/components/common/cardWrapper";
 import { CardHeader } from "@/components/common/cardHeader"; 
 import Table from "@/components/common/dataTable";
 import { connectedheaders, connectedrows } from "@/constants/tabledata";
+import { LIVE_FEED, RISK_RADAR_ITEMS, STAT_CARDS_DATA, VENDOR_PERFORMANCE } from "@/constants/constant";

-// Custom Stat Card Data matching the UI image exactly
-const STAT_CARDS_DATA = [
-  {
-    title: "SLA ADHERENCE",
-    value: "90%",
-    subtext: "target 90% · automated tracking",
-    progress: 90,
-    color: "bg-[#00c985]", // Vibrant emerald green
-    valueColor: "text-[#00c985]",
-  },
-  {
-    title: "AVG WO RESOLUTION",
-    value: "22.4 h",
-    subtext: "target < 24 h · portfolio median",
-    progress: 93,
-    color: "bg-[#2dd4bf]", // Mint / Teal
-    valueColor: "text-white",
-  },
-  {
-    title: "MANUAL DATA ENTRY",
-    value: "-80%",
-    subtext: "agent-captured requests & readings",
-    progress: 80,
-    color: "bg-[#2dd4bf]", // Mint / Teal
-    valueColor: "text-[#2dd4bf]",
-  },
-  {
-    title: "REPORTING EFFORT",
-    value: "-75%",
-    subtext: "metrics ready for review — no compiling",
-    progress: 75,
-    color: "bg-[#2dd4bf]", // Mint / Teal
-    valueColor: "text-[#2dd4bf]",
-  },
-];

-// Data for Risk Radar
-const RISK_RADAR_ITEMS = [
-  {
-    title: "Coastal One · vendor gap",
-    desc: "HVAC vendor completion rate fell to 61% — 8 PPMs at risk of slipping this month. Backup vendor suggested.",
-    tag: "Escalates in ~6 days",
-    tagColor: "text-rose-400",
-    dotColor: "bg-rose-500",
-    action: "Assign backup",
-  },
-  {
-    title: "Lakeside · SLA drift",
-    desc: "P2 response times trending +18% over 3 weeks; correlated with night-shift staffing.",
-    tag: "Breach risk · next week",
-    tagColor: "text-amber-400",
-    dotColor: "bg-amber-400",
-    action: "Adjust roster",
-  },
-  {
-    title: "Monsoon readiness",
-    desc: "4 of 11 waterproofing checks pending across portfolio with rains forecast in 10 days.",
-    tag: "Window closing",
-    tagColor: "text-amber-400",
-    dotColor: "bg-amber-400",
-    action: "Schedule now",
-  },
-  {
-    title: "Spares shortfall",
-    desc: "AHU belt stock below reorder level at 2 sites; next PPM cycle consumes remaining stock.",
-    tag: "3 weeks of stock left",
-    tagColor: "text-sky-400",
-    dotColor: "bg-sky-400",
-    action: "Raise PO",
-  },
-];

-// Data for Vendor Performance
-const VENDOR_PERFORMANCE = [
-  { name: "CoolServ HVAC", score: 94, barColor: "bg-emerald-400" },
-  { name: "Apex Elevators", score: 91, barColor: "bg-emerald-400" },
-  { name: "SecureWatch", score: 86, barColor: "bg-emerald-400" },
-  { name: "AquaPure", score: 82, barColor: "bg-amber-400" },
-  { name: "GreenScape", score: 61, barColor: "bg-rose-400" },
-];
-
-// Data for Live Context Feed
-const LIVE_FEED = [
-  { time: "now", text: "Vendor CoolServ acknowledged P1 · Chiller-02 — tenant portal updated" },
-  { time: "4 min", text: "Energy spike at Lakeside auto-linked to AHU-07 alert" },
-  { time: "11 min", text: "Coastal One WO-1221 completed · SLA met · invoice draft created" },
-  { time: "26 min", text: "Tenant satisfaction pulse: 4.4 ★ this week (+0.2)" },
-];

 export default function ConnectedOpsPortal() {
  return (
@@ -110,15 +25,15 @@ export default function ConnectedOpsPortal() {
        {/* Page Header Section */}
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
-            <div className="flex items-center gap-2 text-[11px] font-medium tracking-wider text-[#3de0c4]">
+            <div className="flex items-center gap-2 text-[12px] font-medium tracking-wider text-[#3de0c4]">
              <span>APPLE ONE — HQ TOWER</span>
-              <span className="text-[#3a495e]">•</span>
-              <span className="text-[#596980]">INTELLIGENCE</span>
-              <span className="text-[#3a495e]">•</span>
-              <span className="text-[#596980]">CONNECTED OPS</span>
+              <span className="text-gray-600">•</span>
+              <span className="text-gray-400">INTELLIGENCE</span>
+              <span className="text-gray-600">•</span>
+              <span className="text-gray-400">CONNECTED OPS</span>
            </div>
            <h1 className="text-3xl font-bold text-white tracking-tight mt-1.5">Connected operations</h1>
-            <p className="mt-2 text-sm text-[#7e8c9f] max-w-2xl leading-relaxed">
+            <p className="mt-2 text-sm text-[#7e8c9f]  font-medium max-w-2xl leading-relaxed">
              Every team, vendor and system on the same live context — portfolio-wide work orders, costs, SLAs and vendor performance in one place, with risks flagged before they escalate.
            </p>
          </div>
--- a/components/dashboard/intelligence/energybenchmarking.tsx
+++ b/components/dashboard/intelligence/energybenchmarking.tsx
@@ -6,10 +6,8 @@ import {
  Database,
  Sliders, 
  Download,
-  Sparkles
 } from "lucide-react";
      
-import { SATISFACTION_DRIVERS, TICKETS_DATA } from "@/constants/constant";
 import StatCard from "../../common/dashStatCard";
 import Button from "@/components/common/button";
 import InfoBanner from "@/components/common/infoBanner";
@@ -27,12 +25,12 @@ export default function EnergyBenchmarkingPortal() {
        {/* Page Header Section */}
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
-            <div className="flex items-center gap-2 text-[11px] font-medium tracking-wider text-[#3de0c4]">
+            <div className="flex items-center gap-2 text-[12px] font-medium tracking-wider text-[#3de0c4]">
              <span>APPLE ONE — HQ TOWER</span>
-              <span className="text-[#3a495e]">•</span>
-              <span className="text-[#596980]">INTELLIGENCE</span>
-              <span className="text-[#3a495e]">•</span>
-              <span className="text-[#596980]">BENCHMARKING</span>
+              <span className="text-gray-600">•</span>
+              <span className="text-gray-400">INTELLIGENCE</span>
+              <span className="text-gray-600">•</span>
+              <span className="text-gray-400">BENCHMARKING</span>
            </div>
            <h1 className="text-3xl font-bold text-white tracking-tight mt-1.5">Portfolio energy benchmarking</h1>
            <p className="mt-2 text-sm text-[#7e8c9f] max-w-2xl leading-relaxed">
--- a/components/dashboard/intelligence/gpsTracking.tsx
+++ b/components/dashboard/intelligence/gpsTracking.tsx
@@ -16,17 +16,10 @@ import { Card } from "@/components/common/cardWrapper";
 import { CardHeader } from "@/components/common/cardHeader"; 

 import InfoBanner from '@/components/common/infoBanner';
-import { gpsTrackingtabs } from '@/constants/constant';
+import { STAFF_DATA } from '@/constants/constant';
+import { gpsTrackingtabs } from '@/constants/tabConstant';
+

-// Staff Table Data
-const STAFF_DATA = [
-  { name: "Ravi Kumar", role: "M&E Technician", zone: "Chiller plant", inTime: "08:02", hrs: "6.4", status: "ON-SITE", statusType: "success" },
-  { name: "Sana Iqbal", role: "HVAC Engineer", zone: "AHU room L7", inTime: "08:15", hrs: "6.1", status: "ON-SITE", statusType: "success" },
-  { name: "Mohan D.", role: "Electrician", zone: "En route", inTime: "—", hrs: "0", status: "EN-ROUTE", statusType: "warning" },
-  { name: "Lakshmi N.", role: "Housekeeping Lead", zone: "Lobby + L2", inTime: "07:48", hrs: "6.7", status: "ON-SITE", statusType: "success" },
-  { name: "Arjun P.", role: "Plumber", zone: "Off-site", inTime: "—", hrs: "0", status: "OFF-SITE", statusType: "neutral" },
-  { name: "Fatima R.", role: "BMS Operator", zone: "Control room", inTime: "06:55", hrs: "7.6", status: "ON-SITE", statusType: "success" },
-];

 export default function GpsTrackingPortal() {
  const [activeTab, setActiveTab] = useState<string>('Live tracking');
@@ -36,12 +29,12 @@ export default function GpsTrackingPortal() {
      {/* --- 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">
+          <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
            <span className="text-teal-400">Apple One — HQ Tower</span>
-            <span className="text-slate-500">•</span>
-            <span className="text-slate-500">INTELLIGENCE</span>
-            <span className="text-slate-500">•</span>
-            <span className="text-slate-500">GPS TRACKING</span>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">INTELLIGENCE</span>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">GPS TRACKING</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            GPS staff tracking & geo-fencing
--- a/components/dashboard/intelligence/sustainability.tsx
+++ b/components/dashboard/intelligence/sustainability.tsx
@@ -6,8 +6,6 @@ import {
  Star, 
  BarChart2, 
  Plus, 
-  ShieldCheck,
-  Clock
 } from "lucide-react";
 import Button from "@/components/common/button";
 import StatCard from "@/components/common/dashStatCard";
@@ -21,25 +19,11 @@ import { CardHeader } from "@/components/common/cardHeader";
 import BarChart from "@/components/charts/barchart";

 import InfoBanner from '@/components/common/infoBanner';
-import { sustainabilitytabs } from '@/constants/constant';
+import { EMISSION_SOURCES, energyData, } from '@/constants/constant';
+import { sustainabilitytabs } from '@/constants/tabConstant';
+

-// Sample Bar Chart Data for Carbon Emissions
-const CARBON_EMISSIONS_DATA = [
-  { month: 'Jan', height: 'h-32' },
-  { month: 'Feb', height: 'h-32' },
-  { month: 'Mar', height: 'h-32' },
-  { month: 'Apr', height: 'h-32' },
-  { month: 'May', height: 'h-32' },
-  { month: 'Jun', height: 'h-28' },
-];

-// Emission Sources Progress Data
-const EMISSION_SOURCES = [
-  { name: "Purchased electricity", percentage: "58%", width: "w-[58%]", color: "bg-sky-400" },
-  { name: "DG / fuel combustion", percentage: "21%", width: "w-[21%]", color: "bg-amber-400" },
-  { name: "Refrigerants (fugitive)", percentage: "12%", width: "w-[12%]", color: "bg-rose-400" },
-  { name: "Water & waste", percentage: "9%", width: "w-[9%]", color: "bg-slate-400" },
-];

 export default function SustainabilityPortal() {
  const [activeTab, setActiveTab] = useState<string>('ESG Data Hub');
@@ -49,12 +33,12 @@ export default function SustainabilityPortal() {
      {/* --- 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">
+          <div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
            <span className="text-teal-400">Apple One — HQ Tower</span>
-            <span className="text-slate-500">•</span>
-            <span className="text-slate-500">INTELLIGENCE</span>
-            <span className="text-slate-500">•</span>
-            <span className="text-slate-500">SUSTAINABILITY</span>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">INTELLIGENCE</span>
+            <span className="text-slate-600">•</span>
+            <span className="text-slate-400">SUSTAINABILITY</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            ESG One — sustainability platform
@@ -140,7 +124,7 @@ export default function SustainabilityPortal() {
      {/* --- ESG CARDS SECTION BELOW TABS --- */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        {/* Environmental Card */}
-        <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
+        <Card className=" p-5 ">
          <CardHeader title="Environmental" subtitle="metered · live" />
          <div className="mt-4 space-y-3.5 text-xs">
            <div className="flex items-center justify-between">
@@ -175,7 +159,7 @@ export default function SustainabilityPortal() {
        </Card>

        {/* Social Card */}
-        <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
+        <Card className="p-5">
          <CardHeader title="Social" subtitle="people & occupants" />
          <div className="mt-4 space-y-3.5 text-xs">
            <div className="flex items-center justify-between">
@@ -210,7 +194,7 @@ export default function SustainabilityPortal() {
        </Card>

        {/* Governance Card */}
-        <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
+        <Card className=" p-5 ">
          <CardHeader title="Governance" subtitle="compliance & ethics" />
          <div className="mt-4 space-y-3.5 text-xs">
            <div className="flex items-center justify-between">
@@ -249,17 +233,17 @@ export default function SustainabilityPortal() {
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6">
        {/* Left: Carbon Emissions BarChart */}
        <div className="lg:col-span-7">
-          <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between">
+          <Card className="p-5  h-full flex flex-col justify-between">
            <CardHeader title="Carbon emissions · tCO₂e" subtitle="2026 · trending down" />
            <div className="mt-6">
-              <BarChart data={CARBON_EMISSIONS_DATA} />
+              <BarChart data={energyData} />
            </div>
          </Card>
        </div>

        {/* Right: Emission Sources */}
        <div className="lg:col-span-5">
-          <Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between">
+          <Card className="  h-full flex flex-col justify-between">
            <CardHeader title="Emission sources" subtitle="drill down by site / meter" />
            <div className="mt-5 space-y-4">
              {EMISSION_SOURCES.map((source, idx) => (
--- a/components/dashboard/operations/equipment.tsx
+++ b/components/dashboard/operations/equipment.tsx
@@ -14,7 +14,7 @@ import Table from "@/components/common/dataTable";
 import InfoBanner from "@/components/common/infoBanner";
 import Button from "@/components/common/button";
 import NavigationTabs from "@/components/common/tabs";
-import { equipmentTabs } from "@/constants/constant";
+import { equipmentTabs } from "@/constants/tabConstant";
 import { useState } from "react";
 import StatCard from "@/components/common/dashStatCard";
 import { equipmentheaders, equipmentrows } from "@/constants/tabledata";
--- a/components/dashboard/operations/helpDesk.tsx
+++ b/components/dashboard/operations/helpDesk.tsx
@@ -12,7 +12,7 @@ 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 { helpdeskTtabs } from '@/constants/constant';
+import { helpdeskTtabs } from '@/constants/tabConstant';
 import { helpdeskheaders, helpdeskrows } from '@/constants/tabledata';


--- a/components/dashboard/operations/request.tsx
+++ b/components/dashboard/operations/request.tsx
@@ -3,7 +3,8 @@ import { Plus } from 'lucide-react';
 import Button from "@/components/common/button";
 import LocationTable from '@/components/common/dataTable';
 import NavigationTabs from '@/components/common/tabs';
-import { Reqeusttabs,statusFilters } from '@/constants/constant';
+import { statusFilters } from '@/constants/constant';
+import { Reqeusttabs } from '@/constants/tabConstant';
 import FilterTabs from '@/components/common/roundedFilters';
 import Table from '@/components/common/dataTable';
 import { requestheaders, requestrows } from '@/constants/tabledata';
--- a/components/dashboard/workplace/workspace.tsx
+++ b/components/dashboard/workplace/workspace.tsx
@@ -14,10 +14,11 @@ import Button from "@/components/common/button";
 import NavigationTabs from "@/components/common/tabs";

 import { useState } from "react";
-import { workspaceTabs, zoneUtilizationData } from "@/constants/constant";
+import {  zoneUtilizationData } from "@/constants/constant";
 import StatCard from "@/components/common/dashStatCard";
 import { Card } from '@/components/common/cardWrapper';
 import { CardHeader } from '@/components/common/cardHeader';
+import { workspaceTabs } from '@/constants/tabConstant';

 export default function WorkSpacePortal() {
  const [activeTab, setActiveTab] = useState<string>("Desk Booking");
--- a/components/layouts/sidebar.tsx
+++ b/components/layouts/sidebar.tsx
@@ -65,15 +65,15 @@ export default function Sidebar() {
        ))}
      </div>

-      <div className="px-3 pb-2 pt-1 border-t border-[#0f1f30]">
-        <button className="flex w-full items-center gap-2 rounded-xl py-2 px-3 text-xs text-slate-400 hover:bg-[#091624] hover:text-white transition-colors">
+      <div className="m-2 px-2 border border-[#0f1f30] rounded-xl px-4 py-2">
+        <button className="flex w-full items-center gap-2   text-sm text-slate-400 hover:bg-[#091624] hover:text-white transition-colors">
          <ChevronsLeft size={16} />
          Minimise menu
        </button>
      </div>

      {/* Profile Card */}
-      <div className="m-3 mt-0 rounded-xl border border-[#142538] bg-[#071321] p-2.5">
+      <div className="px-2 m-2 rounded-xl border border-[#142538] bg-[#071321] p-2.5">
        <div className="flex items-center justify-between">
          <div className="flex gap-2.5 items-center">
            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-cyan-600/50 bg-[#0d2430] text-cyan-400 text-xs font-bold">