fixed?

src/utils/TabNavigation.ts

 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { openFromOtherPage } from './openFromOtherpAge';
 import { handleScroll } from './handleScroll';
 import { openNestedTab } from './openNestedTab';
@@ -9,14 +9,25 @@ import { openTabInCollapsible } from './opentabincollapsible';
 // Custom Hook for central tab navigation
 export const useTabNavigation = () => {
   const location = useLocation();
+  const navigate = useNavigate(); 
   const [activeTab, setActiveTab] = useState<string | null>(null);
   const [activeSubTab, setActiveSubTab] = useState<string | null>(null);
   
   const [, setActiveCollapsible] = useState<string | null>(null);
 
   // tab change and url update
-  
+  const handleTabChange = (tabId: string, subTabId?: string) => {
+    setActiveTab(tabId);
+    setActiveSubTab(subTabId || null);
+
+    // updatung the url 
+    let newUrl = `${location.pathname}?tab=${tabId}`;
+    if (subTabId) {
+      newUrl += `&subTab=${subTabId}`;
+    }
+    navigate(newUrl, { replace: true });
 
+  }
   useEffect(() => {
     console.log("Use Effect")
     const params = new URLSearchParams(location.search);
@@ -26,7 +37,11 @@ export const useTabNavigation = () => {
     const scrollToId = params.get('scrollTo'); 
     const changeTo = params.get('changeTo');
     const colTab = params.get('colTab');
+  //  const navigate = useNavigate();
     
+     
+
+
      // scrolls to a specific collapsible element
      if (collapseId) {
       setActiveCollapsible(collapseId);
@@ -77,11 +92,13 @@ export const useTabNavigation = () => {
     }
 }
 
+
+
     setActiveTab(tabId);
     setActiveSubTab(subTabId || null);
   }, [location.search]);
 
-  return { activeTab, activeSubTab };
+  return { activeTab, activeSubTab, handleTabChange};
 };