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">
-        {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>
-
+    
+ {/* Navigation Tabs */}
+      <NavigationTabs
+        tabs={equipmentTabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        className="mb-6"
+      />
       {/* --- 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">
-        {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>
+      <FilterTabs
+        options={statusFilters}
+        activeFilter={activeFilter}
+        onChange={setActiveFilter}
+      />
       <LocationTable/>
     </div>
   );