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 */}