Table component is added and visitor management screen is added

components/dashboard/helpDesk.tsx

@@ -1,31 +1,312 @@
-
-
-import  { useState } from 'react';
+import { useState } from 'react';
 import { 
   Layers, 
   ShieldCheck, 
   CheckSquare, 
   Clock, 
   Search, 
-  QrCode, 
+  QrCode,
+  Power,
+  List,
+  Pencil,
   Plus, 
 } from 'lucide-react';
 import Button from "@/utils/button";
 import StatCard from "@/utils/dashStatCard";
-import LocationTable from '@/utils/dataTable';
+import Table from "@/utils/dataTable";
 import NavigationTabs from '@/utils/tabs';
 import { helpdeskTtabs } from '@/constants/constant';
 
+const StatusBadge = ({
+  text,
+  color,
+}: {
+  text: string;
+  color: string;
+}) => (
+  <span
+    className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
+  >
+    <span className="h-1.5 w-1.5 rounded-full bg-current" />
+    {text}
+  </span>
+);
+
+const ActionButtons = ({ active }: { active: boolean }) => (
+  <div className="flex justify-center items-center gap-1">
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <Pencil size={13} />
+    </Button>
+
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <List size={13} />
+    </Button>
+
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <ShieldCheck size={13} />
+    </Button>
+
+    <Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
+      <QrCode size={13} />
+    </Button>
+
+    <Button
+      className={`flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 hover:bg-slate-800 transition ${
+        active ? "text-red-400" : "text-emerald-400"
+      }`}
+    >
+      <Power size={13} />
+    </Button>
+  </div>
+);
+
+const headers = [
+  "",
+  "Block",
+  "Floor",
+  "Zone",
+  "Department",
+  "Location",
+  "Window",
+  "TAT",
+  "Sched.",
+  "Approval",
+  "Status",
+  "Actions",
+];
+
+const checkbox = (
+  <input
+    type="checkbox"
+    className="h-4 w-4 appearance-none rounded border border-slate-600 bg-slate-700 checked:bg-slate-500 checked:border-slate-500 cursor-pointer"
+  />
+);
+
+const rows = [
+  [
+    checkbox,
+    "Block 2",
+    "1",
+    "Z2",
+    "HVAC",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Parking P1</span>,
+    <span className="font-mono text-xs whitespace-nowrap">01:56–18:00</span>,
+    "60m",
+    "4",
+    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
+    <StatusBadge
+      text="Inactive"
+      color="bg-slate-700/50 text-slate-400"
+    />,
+    <ActionButtons active={false} />,
+  ],
+
+  [
+    checkbox,
+    "Block 1",
+    "2",
+    "Z1",
+    "Inspection work",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
+    <span className="font-mono text-xs whitespace-nowrap">01:56–23:59</span>,
+    "360m",
+    "6",
+    <span className="text-slate-500">—</span>,
+    <StatusBadge
+      text="Active"
+      color="bg-emerald-500/15 text-emerald-400"
+    />,
+    <ActionButtons active />,
+  ],
+
+  [
+    checkbox,
+    "Block 2",
+    "G",
+    "N",
+    "Inspection work",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Main lobby</span>,
+    <span className="font-mono text-xs whitespace-nowrap">08:00–23:59</span>,
+    "360m",
+    "4",
+    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
+    <StatusBadge
+      text="Active"
+      color="bg-emerald-500/15 text-emerald-400"
+    />,
+    <ActionButtons active />,
+  ],
+
+  [
+    checkbox,
+    "Block 1",
+    "2",
+    "Z2",
+    "Electrical",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Reception</span>,
+    <span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
+    "360m",
+    "4",
+    <span className="text-slate-500">—</span>,
+    <StatusBadge
+      text="Inactive"
+      color="bg-slate-700/50 text-slate-400"
+    />,
+    <ActionButtons active={false} />,
+  ],
+
+  [
+    checkbox,
+    "Block 2",
+    "3",
+    "Z1",
+    "Housekeeping",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
+    <span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
+    "20m",
+    "8",
+    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
+    <StatusBadge
+      text="Active"
+      color="bg-emerald-500/15 text-emerald-400"
+    />,
+    <ActionButtons active />,
+  ],
+
+  [
+    checkbox,
+    "Block 1",
+    "3",
+    "Z1",
+    "Electrical",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Food court</span>,
+    <span className="font-mono text-xs whitespace-nowrap">08:00–17:30</span>,
+    "20m",
+    "8",
+    <span className="text-slate-500">—</span>,
+    <StatusBadge
+      text="Active"
+      color="bg-emerald-500/15 text-emerald-400"
+    />,
+    <ActionButtons active />,
+  ],
+
+  [
+    checkbox,
+    "Block 2",
+    "1",
+    "Z2",
+    "HVAC",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Parking P1</span>,
+    <span className="font-mono text-xs whitespace-nowrap">01:56–18:00</span>,
+    "60m",
+    "4",
+    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
+    <StatusBadge
+      text="Inactive"
+      color="bg-slate-700/50 text-slate-400"
+    />,
+    <ActionButtons active={false} />,
+  ],
+
+  [
+    checkbox,
+    "Block 1",
+    "2",
+    "Z1",
+    "Inspection work",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
+    <span className="font-mono text-xs whitespace-nowrap">01:56–23:59</span>,
+    "360m",
+    "6",
+    <span className="text-slate-500">—</span>,
+    <StatusBadge
+      text="Active"
+      color="bg-emerald-500/15 text-emerald-400"
+    />,
+    <ActionButtons active />,
+  ],
+
+  [
+    checkbox,
+    "Block 2",
+    "G",
+    "N",
+    "Inspection work",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Main lobby</span>,
+    <span className="font-mono text-xs whitespace-nowrap">08:00–23:59</span>,
+    "360m",
+    "4",
+    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
+    <StatusBadge
+      text="Active"
+      color="bg-emerald-500/15 text-emerald-400"
+    />,
+    <ActionButtons active />,
+  ],
+
+  [
+    checkbox,
+    "Block 1",
+    "2",
+    "Z2",
+    "Electrical",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Reception</span>,
+    <span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
+    "360m",
+    "4",
+    <span className="text-slate-500">—</span>,
+    <StatusBadge
+      text="Inactive"
+      color="bg-slate-700/50 text-slate-400"
+    />,
+    <ActionButtons active={false} />,
+  ],
+
+  [
+    checkbox,
+    "Block 2",
+    "3",
+    "Z1",
+    "Housekeeping",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
+    <span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
+    "20m",
+    "8",
+    <span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
+    <StatusBadge
+      text="Active"
+      color="bg-emerald-500/15 text-emerald-400"
+    />,
+    <ActionButtons active />,
+  ],
+
+  [
+    checkbox,
+    "Block 1",
+    "3",
+    "Z1",
+    "Electrical",
+    <span className="font-semibold text-slate-100 whitespace-nowrap">Food court</span>,
+    <span className="font-mono text-xs whitespace-nowrap">08:00–17:30</span>,
+    "20m",
+    "8",
+    <span className="text-slate-500">—</span>,
+    <StatusBadge
+      text="Active"
+      color="bg-emerald-500/15 text-emerald-400"
+    />,
+    <ActionButtons active />,
+  ],
+];
 
 export default function HelpDeskPortal() {
   const [activeTab, setActiveTab] = useState<string>('Location');
 
- 
-
   return (
-    <div className="my-15 text-slate-100 max-w-7xl mx-auto font-sans">
+    <div className="my-15 px-4 text-slate-100 font-sans">
       {/* --- HEADER SECTION --- */}
-      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-3 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>
@@ -34,123 +315,118 @@ export default function HelpDeskPortal() {
             <span>•</span>
             <span>Help Desk</span>
           </div>
-          <h1 className="text-2xl font-extrabold text-white tracking-tight mt-2">
+          <h1 className="text-2xl font-extrabold text-white tracking-tight mt-1.5">
             Help Desk & checklists
           </h1>
-          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+          <p className="text-sm font-medium text-slate-400 mt-1 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={helpdeskTtabs}
-        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"
-  />
+      <div>
+        {/* Reusable Navigation Tabs */}
+        <NavigationTabs
+          tabs={helpdeskTtabs}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          className="mb-4"
+        />
+      </div>
 
-  {/* 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>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
+        {/* 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">
+      <div className="flex flex-col md:flex-row items-center justify-between gap-3 mb-4">
         {/* Search & Select Filters */}
-        <div className="flex flex-1 flex-wrap items-center gap-3 w-full md:w-auto">
+        <div className="flex flex-1 flex-wrap items-center gap-2.5 w-full md:w-auto">
           {/* Search Bar */}
-          <div className="relative flex-1 min-w-[240px] max-w-md">
-            <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+          <div className="relative flex-1 min-w-[200px] max-w-md">
+            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
             <input
               type="text"
               placeholder="Search 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"
+              className="w-full bg-[#0b1727] border border-slate-800 rounded-lg pl-9 pr-3 py-1.5 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>
+          <select className="bg-[#081321] border border-slate-800/80 rounded-lg px-3 py-1.5 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>
+          {/* Status Dropdown */}
+          <select className="bg-[#081321] border border-transparent ring-2 ring-[#2dd4bf] ring-offset-2 ring-offset-[#081321] rounded-lg px-3 py-1.5 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} />
+        <div className="flex items-center gap-2 w-full md:w-auto justify-end">
+          <Button className="flex items-center gap-1.5 bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors">
+            <QrCode size={14} />
             <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]" />
+          <Button className="flex items-center gap-1.5 bg-teal-400 hover:bg-teal-300 text-slate-950 font-bold rounded-lg px-3.5 py-1.5 text-xs transition-colors">
+            <Plus size={15} className="stroke-[3]" />
             <span>New Location Checklist</span>
           </Button>
         </div>
       </div>
 
-     
-<LocationTable/>
-    
-
-    
+      {/* --- TABLE CONTAINER --- */}
+      <div className="mt-4 overflow-x-auto">
+        <Table headers={headers} rows={rows} />
+      </div>
     </div>
   );
-}
-
+}