Constant data is added and resuable tabs added

components/dashboard/equipment.tsx

@@ -13,19 +13,13 @@ import {
 import Button from "@/utils/button";
 import StatCard from "@/utils/dashStatCard";
 import LocationTable from '../../utils/table';
+import NavigationTabs from '@/utils/tabs';
+import { equipmentTabs } from '@/constants/constant';
 
 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">
@@ -49,23 +43,14 @@ export default function EquipmentPortal() {
         </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">
+ {/* Navigation Tabs */}
-        {tabs.map((tab) => (
+      <NavigationTabs
-          <button
+        tabs={equipmentTabs}
-            key={tab}
+        activeTab={activeTab}
-            onClick={() => setActiveTab(tab)}
+        onTabChange={setActiveTab}
-            className={`pb-3 relative transition-colors whitespace-nowrap ${
+        className="mb-6"
-              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 */}

components/dashboard/helpDesk.tsx

@@ -14,12 +14,13 @@ import Button from "@/utils/button";
 import StatCard from "@/utils/dashStatCard";
 import LocationTable from '../../utils/table';
 import NavigationTabs from '@/utils/tabs';
+import { helpdeskTtabs } from '@/constants/constant';
 
 
 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">
@@ -45,7 +46,7 @@ export default function HelpDeskPortal() {
     <div>
       {/* Reusable Navigation Tabs */}
       <NavigationTabs
-        tabs={tabs}
+        tabs={helpdeskTtabs}
         activeTab={activeTab}
         onTabChange={setActiveTab}
         className="mb-6"

components/dashboard/propertyManager.tsx

@@ -13,7 +13,9 @@ import {
 
 // Import your custom Card components
 import { Card } from "@/utils/cardWrapper"; 
-import { CardHeader } from "@/utils/cardHeader"; 
+import { CardHeader } from "@/utils/cardHeader";
+
+
 export default function PropertyManagerPortal() {
   return (
     <div className=" text-slate-100 mt-15 

components/dashboard/request.tsx

@@ -3,7 +3,8 @@ 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';
+import { Reqeusttabs,statusFilters } from '@/constants/constant';
+import FilterTabs from '@/utils/roundedFilters';
 
 export default function ServiceRequestsPortal() {
   const [activeTab, setActiveTab] = useState<string>('TFM Requests');
@@ -11,14 +12,7 @@ export default function ServiceRequestsPortal() {
 
 
 
-  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">
@@ -65,31 +59,11 @@ export default function ServiceRequestsPortal() {
       </div>
 
       {/* --- STATUS PILL FILTERS --- */}
-      <div className="flex items-center gap-2.5 overflow-x-auto no-scrollbar py-1">
+      <FilterTabs
-        {statusFilters.map((filter) => {
+        options={statusFilters}
-          const isActive = activeFilter === filter.label;
+        activeFilter={activeFilter}
-          return (
+        onChange={setActiveFilter}
-            <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>
   );

constants/constant.ts

@@ -1,3 +1,5 @@
+
+  import { TableRowData } from '@/constants/types';
 import {
    LayoutGrid,
   Smile,
@@ -202,4 +204,32 @@ export const Reqeusttabs: string[] = [
     'TFM Requests', 
     'Engineering', 
     'Schedule Complaints'
+  ];
+
+   export 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 },
+  ];
+
+
+  
+  // Data model interface
+  
+  
+  // Sample data extracted from your screenshot
+ export 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' },
   ];

constants/types.ts

@@ -17,6 +17,12 @@ export interface AuthLayoutProps {
   onForgotPassword?:()=>void;
   item?: any;
 }
+export interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+}
+
 export interface FormProps {
   label: string;
   value?: string;
@@ -71,6 +77,26 @@ export interface StatusProgressProps {
   barColor?: string;
 }
 
+
+export interface NavigationTabsProps {
+  tabs: string[];
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+  className?: string;
+}
+
+
+export interface FilterItem {
+  label: string;
+  count?: number | string;
+}
+
+export interface FilterTabsProps {
+  options: FilterItem[];
+  activeFilter: string;
+  onChange: (label: string) => void;
+  className?: string;
+}
 // For footer banner
 export interface InfoBannerProps {
   boldText?: string;

utils/button.tsx

@@ -1,14 +1,11 @@
-interface Props {
+import { ButtonProps } from "@/constants/types";
-  children: React.ReactNode;
+
-  onClick?: () => void;
-  className?: string;
-}
 
 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 { NavigationTabsProps } from "@/constants/types";
-import React from 'react';
+
+
 
-interface NavigationTabsProps {
-  tabs: string[];
-  activeTab: string;
-  onTabChange: (tab: string) => void;
-  className?: string;
-}
 
 export default function NavigationTabs({
   tabs,