diff --git a/utils/table.tsx b/utils/table.tsx
new file mode 100644
index 0000000..c5c7a0b
--- /dev/null
+++ b/utils/table.tsx
@@ -0,0 +1,226 @@
+import React, { useState } from 'react';
+import {
+ Pencil,
+ Menu,
+ ShieldCheck,
+ QrCode,
+ Power,
+ Check,
+ Sparkles,
+} from 'lucide-react';
+
+// Data model interface
+interface TableRowData {
+ id: string;
+ block: string;
+ floor: string;
+ zone: string;
+ department: string;
+ location: string;
+ window: string;
+ tat: string;
+ sched: number;
+ approval: boolean;
+ status: 'ACTIVE' | 'INACTIVE';
+}
+
+// Sample data extracted from your screenshot
+const mockData: TableRowData[] = [
+ { id: '1', block: 'Block 1', floor: 'G', zone: 'Z2', department: 'Electrical', location: 'Main lobby', window: '06:00–17:30', tat: '60m', sched: 8, approval: true, status: 'INACTIVE' },
+ { id: '2', block: 'Block 2', floor: '3', zone: 'Z2', department: 'Electrical', location: 'Main lobby', window: '08:00–23:59', tat: '30m', sched: 4, approval: false, status: 'ACTIVE' },
+ { id: '3', block: 'Block 2', floor: '3', zone: 'Z1', department: 'Inspection work', location: 'Cafeteria', window: '06:00–17:30', tat: '20m', sched: 8, approval: true, status: 'ACTIVE' },
+ { id: '4', block: 'Block 1', floor: 'G', zone: 'Z1', department: 'HVAC', location: 'Server room', window: '08:00–18:00', tat: '30m', sched: 4, approval: false, status: 'INACTIVE' },
+ { id: '5', block: 'Block 2', floor: '3', zone: 'N', department: 'Inspection work', location: 'Server room', window: '08:00–18:00', tat: '60m', sched: 8, approval: true, status: 'ACTIVE' },
+ { id: '6', block: 'Block 2', floor: 'G', zone: 'Z1', department: 'Electrical', location: 'Reception', window: '06:00–18:00', tat: '60m', sched: 6, approval: false, status: 'ACTIVE' },
+ { id: '7', block: 'Block 1', floor: 'G', zone: 'Z2', department: 'Electrical', location: 'Food court', window: '06:00–17:30', tat: '60m', sched: 8, approval: true, status: 'ACTIVE' },
+ { id: '8', block: 'Block 2', floor: '3', zone: 'Z2', department: 'Electrical', location: 'Cafeteria', window: '08:00–23:59', tat: '30m', sched: 4, approval: false, status: 'ACTIVE' },
+ { id: '9', block: 'Block 2', floor: '3', zone: 'Z1', department: 'Inspection work', location: 'Gym', window: '06:00–17:30', tat: '20m', sched: 8, approval: true, status: 'INACTIVE' },
+ { id: '10', block: 'Block 1', floor: 'G', zone: 'Z1', department: 'HVAC', location: 'Lobby', window: '08:00–18:00', tat: '30m', sched: 4, approval: false, status: 'ACTIVE' },
+];
+
+export default function LocationTable(){
+ const [selectedIds, setSelectedIds] = useState
(['1']); // Row 1 selected by default (teal indicator bar)
+
+ const toggleSelectAll = () => {
+ if (selectedIds.length === mockData.length) {
+ setSelectedIds([]);
+ } else {
+ setSelectedIds(mockData.map((row) => row.id));
+ }
+ };
+
+ const toggleSelectRow = (id: string) => {
+ setSelectedIds((prev) =>
+ prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+ );
+ };
+
+ return (
+
+
+
+ {/* TABLE HEADER */}
+
+
+ |
+
+ |
+ BLOCK |
+ FLOOR |
+ ZONE |
+ DEPARTMENT |
+ LOCATION |
+ WINDOW |
+ TAT |
+ SCHED. |
+ APPROVAL |
+ STATUS |
+ ACTIONS |
+
+
+
+ {/* TABLE BODY */}
+
+ {mockData.map((row) => {
+ const isSelected = selectedIds.includes(row.id);
+
+ return (
+
+ {/* Left Selection Indicator Bar (for Row 1 / Selected Rows) */}
+ |
+ {isSelected && (
+
+ )}
+ toggleSelectRow(row.id)}
+ className="rounded border-slate-700 bg-slate-900/80 text-teal-400 focus:ring-0 focus:ring-offset-0 cursor-pointer accent-teal-400 h-3.5 w-3.5"
+ />
+ |
+
+ {/* Block */}
+
+ {row.block}
+ |
+
+ {/* Floor */}
+
+ {row.floor}
+ |
+
+ {/* Zone */}
+
+ {row.zone}
+ |
+
+ {/* Department */}
+
+ {row.department}
+ |
+
+ {/* Location */}
+
+ {row.location}
+ |
+
+ {/* Window */}
+
+ {row.window}
+ |
+
+ {/* TAT */}
+
+ {row.tat}
+ |
+
+ {/* Sched */}
+
+ {row.sched}
+ |
+
+ {/* Approval */}
+
+ {row.approval ? (
+
+
+ Yes
+
+ ) : (
+ ——
+ )}
+ |
+
+ {/* Status Badge */}
+
+ {row.status === 'ACTIVE' ? (
+
+
+ ACTIVE
+
+ ) : (
+
+
+ INACTIVE
+
+ )}
+ |
+
+ {/* Action Icon Buttons */}
+
+
+
+
+
+
+
+ |
+
+ );
+ })}
+
+
+
+
+
+
+ {tabs.map((tab) => (
+
+ ))}
+
+ );
+}
\ No newline at end of file