Constant data is added and resuable tabs added

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>
   );