Constant data is added and resuable tabs added

utils/button.tsx

@@ -1,14 +1,11 @@
-interface Props {
-  children: React.ReactNode;
-  onClick?: () => void;
-  className?: string;
-}
+import { ButtonProps } from "@/constants/types";
+
 
 export default function Button({
   children,
   onClick,
   className,
-}: Props) {
+}: ButtonProps) {
   return (
     <button onClick={onClick} className={className}>
       {children}

utils/roundedFilters.tsx

@@ -0,0 +1,44 @@
+import { FilterTabsProps } from "@/constants/types";
+
+export default function FilterTabs({
+  options = [],
+  activeFilter,
+  onChange,
+  className = "",
+}: FilterTabsProps) {
+  if (!Array.isArray(options) || options.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`flex items-center gap-2.5 overflow-x-auto no-scrollbar py-1 ${className}`}>
+      {options.map((filter) => {
+        const isActive = activeFilter === filter.label;
+
+        return (
+          <button
+            key={filter.label}
+            type="button"
+            onClick={() => onChange(filter.label)}
+            className={`flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-medium transition-all whitespace-nowrap cursor-pointer ${
+              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>
+            {filter.count !== undefined && (
+              <span
+                className={`font-mono text-[11px] ${
+                  isActive ? "text-teal-400 font-bold" : "text-slate-400"
+                }`}
+              >
+                {filter.count}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

utils/table.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import  { useState } from 'react';
 import {
   Pencil,
   Menu,
@@ -8,35 +8,8 @@ import {
   Check,
   Sparkles,
 } from 'lucide-react';
+import { mockData } from '@/constants/constant';
 
-// 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<string[]>(['1']); // Row 1 selected by default (teal indicator bar)

utils/tabs.tsx

@@ -1,12 +1,7 @@
-// @/utils/NavigationTabs.tsx
-import React from 'react';
+import { NavigationTabsProps } from "@/constants/types";
+
+
 
-interface NavigationTabsProps {
-  tabs: string[];
-  activeTab: string;
-  onTabChange: (tab: string) => void;
-  className?: string;
-}
 
 export default function NavigationTabs({
   tabs,