Operations dashboard screens are added

components/dashboard/buildingOwner.tsx

@@ -15,7 +15,7 @@ export default function BuildingOwnerPortal() {
     <div className="mt-20 font-sans antialiased">
       
       {/* --- HEADER SECTION --- */}
-      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-8">
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4">
         <div>
           <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
             <span className="text-teal-400">Apple One — HQ Tower</span>
@@ -33,7 +33,10 @@ export default function BuildingOwnerPortal() {
         </div>
 
         {/* Action Button */}
-        <Button className="flex items-center gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538] rounded-xl text-xs font-semibold text-slate-200 transition-colors duration-200 shadow-sm self-start md:mt-6">
+        <Button className="flex items-center
+         gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538]
+          rounded-xl text-xs font-semibold text-slate-200 transition-colors
+           duration-200 shadow-sm self-start md:mt-15">
           <FileSpreadsheet size={14} className="text-slate-400" />
           Portfolio report
         </Button>

components/dashboard/engagement.tsx

@@ -18,14 +18,16 @@ import { CardHeader } from "@/utils/cardHeader";
 
 export default function EngagementPage() {
   return (
-    <div className=" text-[#93a3b8] font-sans antialiased ">
+    <div className=" text-[#93a3b8] font-sans  ">
     
       <main className="mt-20">
         
         {/* Page Header Section */}
-        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mt-4">
+        <div className="flex flex-col md:flex-row md:items-center 
+        justify-between gap-4 mt-4">
           <div>
-            <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-teal-500">
+            <div className="flex items-center gap-2 text-xs
+             font-bold uppercase tracking-widest text-teal-500">
               <span>Apple One — HQ Tower</span>
               <span className="text-gray-600">·</span>
               <span className="text-gray-400">Intelligence</span>
@@ -41,7 +43,9 @@ export default function EngagementPage() {
           {/* Action Buttons */}
           <div className="flex items-center gap-3">
             <Button
-             className="flex items-center gap-2 rounded-xl border border-[#142538] bg-[#091624] px-4 py-2.5 text-xs font-bold text-white hover:bg-[#11233a] transition">
+             className="flex items-center gap-2 rounded-xl border 
+             border-[#142538] bg-[#091624] px-4 py-4 text-xs font-bold text-white
+              hover:bg-[#11233a] transition">
               <Smile size={15} className="text-slate-400" />
               Pulse survey
             </Button>

components/dashboard/equipment.tsx

@@ -0,0 +1,168 @@
+import { useState } from 'react';
+import { 
+  Target, 
+  AlertTriangle, 
+  Clock, 
+  ShieldCheck, 
+  Search, 
+  QrCode, 
+  Plus, 
+  Download, 
+  Upload 
+} from 'lucide-react';
+import Button from "@/utils/button";
+import StatCard from "@/utils/dashStatCard";
+import LocationTable from '../../utils/table';
+
+export default function EquipmentPortal() {
+  const [activeTab, setActiveTab] = useState<string>('Site-Wise Equipment');
+
+  const tabs: string[] = [
+    'Equipment Groups', 
+    'Site-Wise Equipment', 
+    'PPM Checklist', 
+    'AMC Checklist', 
+    'PPM Schedule', 
+    'AMC Schedule', 
+    'Maintenance Calendar'
+  ];
+
+  return (
+    <div className="my-15 text-slate-100 max-w-7xl mx-auto 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>Operations</span>
+            <span>•</span>
+            <span>Equipment</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            Equipment & maintenance
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Asset register, preventive (PPM) and contract (AMC) maintenance, scoped to the active tenant.
+          </p>
+        </div>
+      </div>
+
+      {/* --- NAVIGATION TABS --- */}
+      <div className="flex items-center gap-8 border-b border-slate-800/80 mb-6 text-sm font-semibold overflow-x-auto no-scrollbar">
+        {tabs.map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`pb-3 relative transition-colors whitespace-nowrap ${
+              activeTab === tab
+                ? 'text-teal-400 border-b-2 border-teal-400 font-bold'
+                : 'text-slate-400 hover:text-slate-200'
+            }`}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {/* --- STAT CARDS --- */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        {/* Total Equipment */}
+        <StatCard 
+          variant="icon" 
+          title="Total equipment" 
+          value="8" 
+          icon={Target} 
+          badgeText="4 groups" 
+          badgeClassName="text-slate-400 lowercase font-mono"
+          iconContainerClassName="bg-cyan-950/40 border-cyan-800/30 text-cyan-400"
+        />
+        
+        {/* Critical Assets */}
+        <StatCard 
+          variant="icon" 
+          title="Critical assets" 
+          value="3" 
+          icon={AlertTriangle} 
+          badgeText="priority" 
+          badgeClassName="text-rose-400 lowercase font-mono"
+          iconContainerClassName="bg-rose-950/40 border-rose-800/30 text-rose-400"
+        />
+
+        {/* PPM Attention */}
+        <StatCard 
+          variant="icon" 
+          title="PPM attention" 
+          value="5" 
+          icon={Clock} 
+          badgeText="due / overdue" 
+          badgeClassName="text-amber-400 lowercase font-mono"
+          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
+        />
+          
+        {/* On Plan */}
+        <StatCard 
+          variant="icon" 
+          title="On plan" 
+          value="3" 
+          icon={ShieldCheck} 
+          badgeText="healthy" 
+          badgeClassName="text-emerald-400 lowercase font-mono"
+          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
+        />
+      </div>
+
+      {/* --- ROW 2: SEARCH, FILTERS & ACTION BUTTONS --- */}
+      <div className="flex flex-col md:flex-row items-center justify-between gap-4 mb-8">
+        {/* Search & Select Filters */}
+        <div className="flex flex-1 flex-wrap items-center gap-3 w-full md:w-auto">
+          {/* Search Bar */}
+          <div className="relative flex-1 min-w-[240px] max-w-md">
+            <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Search code, name, block, provider..."
+              className="w-full bg-[#0b1727] border border-slate-800 rounded-lg pl-9 pr-4 py-2 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:border-teal-500/50 transition-colors"
+            />
+          </div>
+
+          {/* Groups Dropdown */}
+          <select className="bg-[#0b1727] border border-slate-800 rounded-lg px-4 py-2 text-xs font-semibold text-slate-200 cursor-pointer focus:outline-none focus:border-teal-500/50 transition-all">
+            <option value="all">All groups</option>
+            <option value="group 1">HVAC</option>
+           
+             <option value="group 1">Electrical</option>
+              <option value="group 3">Plumbing</option>
+            <option value="group 4">Fire</option>
+          </select>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-3 w-full md:w-auto justify-end">
+          <Button className="flex items-center gap-2 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">
+            <QrCode size={15} />
+            <span>All QR</span>
+          </Button>
+
+          <Button className="flex items-center gap-2 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">
+            <Download size={15} />
+            <span>Download</span>
+          </Button>
+
+          <Button className="flex items-center gap-2 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">
+            <Upload size={15} />
+            <span>Bulk upload</span>
+          </Button>
+
+          <Button className="flex items-center gap-2 bg-teal-400 hover:bg-teal-300 text-slate-950 font-bold rounded-lg px-4 py-2 text-xs transition-colors">
+            <Plus size={16} className="stroke-[3]" />
+            <span>Add equipment</span>
+          </Button>
+        </div>
+      </div>
+
+      <LocationTable />
+    </div>
+  );
+}

components/dashboard/helpDesk.tsx

@@ -0,0 +1,155 @@
+
+
+import  { useState } from 'react';
+import { 
+  Layers, 
+  ShieldCheck, 
+  CheckSquare, 
+  Clock, 
+  Search, 
+  QrCode, 
+  Plus, 
+} from 'lucide-react';
+import Button from "@/utils/button";
+import StatCard from "@/utils/dashStatCard";
+import LocationTable from '../../utils/table';
+import NavigationTabs from '@/utils/tabs';
+
+
+export default function HelpDeskPortal() {
+  const [activeTab, setActiveTab] = useState<string>('Location');
+
+  const tabs: string[] = ['Location', 'Technical', 'Missed', 'Departments', 'HSQE'];
+
+  return (
+    <div className="my-15 text-slate-100 max-w-7xl mx-auto 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>Operations</span>
+            <span>•</span>
+            <span>Help Desk</span>
+          </div>
+          <h1 className="text-2xl font-extrabold text-white tracking-tight mt-2">
+            Help Desk & checklists
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Scheduled location and equipment inspections, missed-checklist recovery, and HSQE incident management.
+          </p>
+        </div>
+      </div>
+
+    <div>
+      {/* Reusable Navigation Tabs */}
+      <NavigationTabs
+        tabs={tabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        className="mb-6"
+      />
+      
+      {/* Rest of your page content */}
+    </div>
+     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+  {/* Total Checklists */}
+  <StatCard 
+    variant="icon" 
+    title="Total checklists" 
+    value="10" 
+    icon={Layers} 
+    badgeText="Location set" 
+    badgeClassName="text-slate-500 lowercase font-mono"
+    iconContainerClassName="bg-slate-800/60 border-slate-700/50 text-slate-300"
+  />
+  
+  {/* Active */}
+  <StatCard 
+    variant="icon" 
+    title="Active" 
+    value="7" 
+    icon={ShieldCheck} 
+    badgeText="of 10" 
+    badgeClassName="text-teal-400 font-mono font-medium"
+    iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
+  />
+
+  {/* Approval Set */}
+  <StatCard 
+    variant="icon" 
+    title="Approval set" 
+    value="5" 
+    icon={CheckSquare} 
+    badgeText="workflow" 
+    badgeClassName="text-slate-500 lowercase font-mono"
+    iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-500"
+  />
+    
+  {/* Avg TAT */}
+  <StatCard 
+    variant="icon" 
+    title="Avg TAT" 
+    value="40m" 
+    icon={Clock} 
+    badgeText="target" 
+    badgeClassName="text-slate-500 lowercase font-mono"
+    iconContainerClassName="bg-blue-950/50 border-blue-800/30 text-blue-400"
+  />
+</div>
+
+     
+
+      {/* --- ROW 2: SEARCH, FILTERS & ACTION BUTTONS --- */}
+      <div className="flex flex-col md:flex-row items-center justify-between gap-4 mb-8">
+        {/* Search & Select Filters */}
+        <div className="flex flex-1 flex-wrap items-center gap-3 w-full md:w-auto">
+          {/* Search Bar */}
+          <div className="relative flex-1 min-w-[240px] max-w-md">
+            <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Search location, block, department..."
+              className="w-full bg-[#0b1727] border border-slate-800 rounded-lg pl-9 pr-4 py-2 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:border-teal-500/50 transition-colors"
+            />
+          </div>
+
+          {/* Block Dropdown */}
+        <select className="bg-[#081321] border border-slate-800/80 rounded-xl px-4 py-2 text-xs font-semibold text-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-[#2dd4bf] focus:ring-offset-2 focus:ring-offset-[#081321] transition-all">
+  <option value="all">All blocks</option>
+  <option value="block 1">Block 1</option>
+  <option value="block 2">Block 2</option>
+</select>
+
+{/* Status Dropdown (Active State matching the screenshot) */}
+<select className="bg-[#081321] border border-transparent ring-2 ring-[#2dd4bf] ring-offset-2 ring-offset-[#081321] rounded-xl px-4 py-2 text-xs font-semibold text-slate-200 cursor-pointer focus:outline-none transition-all">
+  <option value="all">All status</option>
+  <option value="active">Active</option>
+  <option value="inactive">InActive</option>
+</select>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-3 w-full md:w-auto justify-end">
+          <Button className="flex items-center gap-2 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">
+            <QrCode size={15} />
+            <span>All QR</span>
+          </Button>
+
+          <Button className="flex items-center gap-2 bg-teal-400 hover:bg-teal-300 text-slate-950 font-bold rounded-lg px-4 py-2 text-xs transition-colors">
+            <Plus size={16} className="stroke-[3]" />
+            <span>New Location Checklist</span>
+          </Button>
+        </div>
+      </div>
+
+     
+<LocationTable/>
+    
+
+    
+    </div>
+  );
+}
+

components/dashboard/navbar.tsx

@@ -1,83 +0,0 @@
-import { Search, HelpCircle, Globe, Sun, Bell, ChevronDown, MapPin } from 'lucide-react';
-
-export default function Navbar() {
-  return (
-    /* 
-      - 'fixed top-0 right-0 left-64' anchors the navbar to the top of the screen,
-        leaving room exactly for your 64-width sidebar.
-      - 'bg-[#071321]' matches your master UI background.
-      - 'h-16' gives it a consistent height.
-    */
-    <header className="fixed top-0 right-0 left-64 z-30 flex h-16 items-center justify-between border-b border-[#142538]/50 bg-[#071321] px-8">
-      
-      {/* Left Group */}
-      <div className="flex items-center gap-2">
-        {/* Company Selector */}
-        <div className="flex items-center gap-2 rounded-full bg-[#0a1826] px-3 py-1.5 text-sm font-semibold text-[#10b981] border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap">
-          <span className="h-2 w-2 rounded-full bg-[#10b981] shrink-0"></span>
-          <span className="font-semibold">Apple One</span>
-          <ChevronDown className="h-3.5 w-3.5 text-[#10b981]" />
-        </div>
-
-        {/* Location Selector */}
-        <div className="flex items-center gap-2 rounded-full bg-[#0a1826] px-4 py-2 text-sm font-medium text-[#cbd5e1] border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap">
-          <MapPin className="h-4 w-4 text-gray-500 shrink-0" />
-          <span className="whitespace-nowrap">
-            Apple One — <span className="text-[#cbd5e1] font-semibold">HQ Tower</span>
-          </span>
-          <ChevronDown className="h-4 w-4 text-gray-500 shrink-0" />
-        </div>
-
-        {/* Search Bar */}
-        <div className="relative w-60">
-          <Search className="absolute left-4 top-2.5 h-4 w-4 text-gray-500" />
-          <input
-            type="text"
-            placeholder="Search requests, equipment, met"
-            className="w-full rounded-xl bg-[#0a1826] pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500 border border-[#132338] focus:outline-none focus:border-[#3de0c4]/50"
-          />
-        </div>
-      </div>
-
-      {/* Right Utilities */}
-      <div className="flex items-center gap-3">
-        {/* Tour */}
-        <button className="flex items-center gap-2 rounded-xl border border-[#132338] bg-[#0a1826] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#14253d]">
-          <HelpCircle className="h-4 w-4 text-gray-400" />
-          <span>Tour</span>
-        </button>
-        
-        {/* Language */}
-        <div className="flex items-center gap-1.5 rounded-xl border border-[#132338] bg-[#0a1826] px-4 py-2 text-sm font-semibold text-[#cbd5e1] cursor-pointer hover:bg-[#14253d]">
-          <Globe className="h-4 w-4 text-gray-400" />
-          <span>English</span>
-          <ChevronDown className="h-4 w-4 text-gray-500" />
-        </div>
-
-        {/* Live Indicator */}
-        <div className="flex items-center gap-2 px-1 text-sm font-bold text-[#10b981] tracking-wider">
-          <span className="h-1.5 w-1.5 rounded-full bg-[#10b981]"></span>
-          <span className="text-xs font-bold text-gray-400">LIVE</span>
-        </div>
-
-        {/* Theme Toggle */}
-        <button className="flex h-9 w-9 items-center justify-center rounded-xl border border-[#132338] bg-[#0a1826] text-gray-400 hover:text-white transition">
-          <Sun className="h-4 w-4" />
-        </button>
-
-        {/* Notifications */}
-        <div className="relative flex h-9 w-9 items-center justify-center rounded-xl border border-[#132338] bg-[#0a1826] cursor-pointer hover:bg-[#14253d] transition">
-          <Bell className="h-4 w-4 text-gray-400" />
-          <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-[#ef4444] text-[9px] font-bold text-white">
-            8
-          </span>
-        </div>
-
-        {/* Profile Avatar */}
-        <div className="flex h-9 w-9 items-center justify-center rounded-full bg-[#1b3454] text-xs font-bold text-white cursor-pointer hover:opacity-90 transition">
-          DH
-        </div>
-      </div>
-    </header>
-  );
-}

components/dashboard/propertyManager.tsx

@@ -16,11 +16,11 @@ import { Card } from "@/utils/cardWrapper";
 import { CardHeader } from "@/utils/cardHeader"; 
 export default function PropertyManagerPortal() {
   return (
-    <div className=" text-slate-100 mt-15 font-sans antialiased
+    <div className=" text-slate-100 mt-15 
     ">
       
       {/* --- HEADER SECTION --- */}
-      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-8">
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4">
         <div>
           <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
             <span className="text-teal-400">Apple One — HQ Tower</span>
@@ -29,7 +29,7 @@ export default function PropertyManagerPortal() {
             <span>•</span>
             <span>Property Manager</span>
           </div>
-          <h1 className="text-2xl font-extrabold text-white tracking-tight mt-2">
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
             Property manager portal
           </h1>
           <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
@@ -38,7 +38,7 @@ export default function PropertyManagerPortal() {
         </div>
 
         {/* Action Buttons */}
-        <div className="flex items-center gap-3 self-start md:mt-6">
+        <div className="flex items-center gap-3 self-start md:mt-15">
           <Button className="flex items-center gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538] rounded-xl text-xs font-semibold text-slate-200 transition-colors duration-200 shadow-sm">
             <FileText size={14} className="text-slate-400" />
             Documents

components/dashboard/request.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+import Button from "@/utils/button";
+import LocationTable from '@/utils/table';
+import NavigationTabs from '@/utils/tabs';
+import { Reqeusttabs } from '@/constants/constant';
+
+export default function ServiceRequestsPortal() {
+  const [activeTab, setActiveTab] = useState<string>('TFM Requests');
+  const [activeFilter, setActiveFilter] = useState<string>('All');
+
+
+
+  const statusFilters = [
+    { label: 'All', count: 18 },
+    { label: 'Registered', count: 4 },
+    { label: 'Assigned', count: 3 },
+    { label: 'Working', count: 4 },
+    { label: 'Completed', count: 3 },
+    { label: 'Overdue', count: 4 },
+  ];
+
+  return (
+    <div className="my-15 text-slate-100 max-w-7xl mx-auto 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>Operations</span>
+            <span>•</span>
+            <span>Requests</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            Service requests
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            TFM helpdesk tickets, engineering breakdowns, and auto-generated recurring complaints — one request lifecycle.
+          </p>
+        </div>
+      </div>
+
+      {/* --- NAVIGATION TABS & TOP ACTION BUTTONS --- */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between border-b border-slate-800/80 mb-6 gap-4">
+        {/* Navigation Tabs */}
+        <NavigationTabs
+                tabs={Reqeusttabs}
+                activeTab={activeTab}
+                onTabChange={setActiveTab}
+                className="mb-6"
+              />
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-3 pb-3 md:pb-0">
+          <Button className="flex items-center gap-2 bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 rounded-lg px-4 py-2 text-xs font-semibold transition-colors">
+            <span>Export</span>
+          </Button>
+
+          <Button className="flex items-center gap-2 bg-teal-400 hover:bg-teal-300 text-slate-950 font-bold rounded-lg px-4 py-2 text-xs transition-colors">
+            <Plus size={16} className="stroke-[3]" />
+            <span>New request</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* --- STATUS PILL FILTERS --- */}
+      <div className="flex items-center gap-2.5 overflow-x-auto no-scrollbar py-1">
+        {statusFilters.map((filter) => {
+          const isActive = activeFilter === filter.label;
+          return (
+            <button
+              key={filter.label}
+              onClick={() => setActiveFilter(filter.label)}
+              className={`flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-medium transition-all ${
+                isActive
+                  ? 'bg-teal-950/40 text-teal-400 border border-teal-500/50'
+                  : 'bg-[#0b1727] text-slate-400 border border-slate-800/80 hover:text-slate-200'
+              }`}
+            >
+              <span>{filter.label}</span>
+              <span
+                className={`font-mono text-[11px] ${
+                  isActive ? 'text-teal-400 font-bold' : 'text-slate-400'
+                }`}
+              >
+                {filter.count}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+      <LocationTable/>
+    </div>
+  );
+}

components/dashboard/serviceEngineer.tsx

@@ -16,10 +16,11 @@ import { CardHeader } from "@/utils/cardHeader";
 
 export default function ServiceEngineerPortal() {
   return (
-    <div className="text-slate-100 font-sans antialiased">
+    <div className="my-15 text-slate-100 ">
       
       {/* --- HEADER SECTION --- */}
-      <div className="pt-20 flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-8">
+      <div className=" flex flex-col
+       md:flex-row md:items-start md:justify-between gap-4 mb-4">
         <div>
           <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
             <span className="text-teal-400">Apple One — HQ Tower</span>
@@ -28,7 +29,7 @@ export default function ServiceEngineerPortal() {
             <span>•</span>
             <span>Service Engineer</span>
           </div>
-          <h1 className="text-2xl font-extrabold text-white tracking-tight mt-2">
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
             Service engineer portal
           </h1>
           <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
@@ -37,7 +38,7 @@ export default function ServiceEngineerPortal() {
         </div>
 
         {/* Action Buttons */}
-        <div className="flex items-center gap-3 self-start md:mt-6">
+        <div className="flex items-center gap-3 self-start md:mt-15">
           <Button className="flex items-center gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538] rounded-xl text-xs font-semibold text-slate-200 transition-colors duration-200 shadow-sm">
             <FileText size={14} className="text-slate-400" />
             Scan Qr

components/dashboard/sideBarItem.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useState } from "react";
-import { ChevronDown } from "lucide-react";
-import {Props} from "@/constants/types";
-import Button  from "@/utils/button";
-
-export default function SidebarItem({ item }: Props) {
-  const [open, setOpen] = useState(item.title === "Overview");
-
-  return (
-    <div className=" border-b border-slate-800 ">
-      <Button
-        onClick={() => setOpen(!open)}
-        className="flex w-full items-center justify-between px-5 py-4 hover:bg-slate-900"
-      >
-        <div className="flex items-center gap-3">
-          <item.icon size={20} />
-
-          <span className="font-medium">{item.title}</span>
-        </div>
-
-        <ChevronDown
-          size={18}
-          className={`transition-transform ${
-            open ? "rotate-180" : ""
-          }`}
-        />
-      </Button>
-
-      {open && item.children.length > 0 && (
-        <div className="ml-6 border-l border-slate-700 pl-4 pb-2">
-          {item.children.map((child: any) => (
-            <Link
-              key={child.title}
-              href={child.href}
-              className="group mt-2 flex items-center gap-3 rounded-lg px-3 py-2 text-slate-300 hover:bg-teal-500/20 hover:text-teal-400"
-            >
-              <child.icon size={18} />
-
-              <span>{child.title}</span>
-            </Link>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

components/dashboard/sidebar.tsx

@@ -1,82 +0,0 @@
-import { SIDEBAR_ITEMS } from "@/constants/constant";
-import SidebarItem from "./sideBarItem";
-import {
-  ShieldCheck,  
-  Activity,
-  ChevronDown,
-  ChevronsLeft,
-} from "lucide-react";
-import { useSession, signOut } from "next-auth/react";
-export default function Sidebar() {
-  const { data: session } = useSession();
-  console.log("Session data ",session?.user?.name)
-console.log("Session data ",session?.user?.email)
-  return (
-    <aside className="fixed bg-[#071321] text-white h-screen overflow-y-auto">
-        <div className="flex items-center gap-2 px-2 pt-2 pb-3">
-        <div className="flex h-9 w-9 items-center justify-center rounded-lg 
-        bg-[#3de0c4] font-bold text-[#05111d] text-sm">
-          K
-        </div>
-        <span className="text-sm font-bold tracking-tight text-white">
-          KA<span className="text-[#3de0c4]">FM</span>
-        </span>
-      </div>
-      <hr className="border-[#142538]" />
-      <div className="mx-4 my-4 flex rounded-xl
-       bg-[#091624] p-2 border border-[#142538]">
-        <button className="flex flex-1 
-        items-center justify-center gap-1 rounded-lg bg-[#3de0c4] py-1.5 text-xs 
-        text-black font-bold shadow-sm">
-          <Activity size={14} />
-          Operations
-        </button>
-        <button className="flex flex-1 items-center justify-center gap-1
-         rounded-lg py-1 text-xs text-slate-400 font-medium hover:text-white transition-colors">
-          <ShieldCheck size={14} />
-          Admin
-        </button>
-      </div>
-
-      <p className="px-4 pt-2 pb-1 text-xs font-semibold uppercase 
-      tracking-wider text-slate-500">
-        Tenant runtime
-      </p>
-      <div className="py-3">
-        {SIDEBAR_ITEMS.map((item) => (
-          <SidebarItem
-            key={item.title}
-            item={item}
-          
-          />
-        ))}
-      </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">
-          <ChevronsLeft size={16} />
-          Minimise menu
-        </button>
-      </div>
-
-      {/* Profile Card Section */}
-      <div className="m-3 mt-0 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">
-              DT
-            </div>
-            <div className="min-w-0 leading-tight">
-              <h4 className="font-semibold text-xs text-white truncate">{session?.user?.name}</h4>
-              <p className="text-[11px] text-slate-500 truncate">
-                {session?.user?.email}
-              </p>
-            </div>
-          </div>
-          <ChevronDown className="-rotate-90 text-slate-500 shrink-0" size={14}
-           onClick={() => signOut({ callbackUrl: "/login" })} />
-        </div>
-        </div>
-    </aside>
-  );
-}