fixed the reordering logic for draggable tabs so that the selected tab remains selected

src/common/DraggableTabs.tsx

@@ -67,16 +67,44 @@ export default function DraggableTabs(props: DraggableTabsProps) {
     }
 
     if (draggedIndex !== dropIndex && draggedIndex >= 0 && dropIndex >= 0 && draggedIndex < tabOrder.length && dropIndex < tabOrder.length) {
+      
+      // console.log("draggedItem: ", draggedItem)
+      // console.log("props value: ", tabsProps.value)
+      // console.log("draggedTabValue: ", draggedTabValue)
+      console.log("dropIndex: ", dropIndex)
+      // console.log("startTabs.length: ", startTabs.length)
+
       const newOrder = [...tabOrder];
       const [draggedItem] = newOrder.splice(draggedIndex, 1);
       newOrder.splice(dropIndex, 0, draggedItem);
+      
       setTabOrder(newOrder);
+
+      const selectedIndex = selectedValue-startTabs.length
+      if (draggedIndex === selectedIndex)
+        setSelectedValue(dropIndex+startTabs.length)
+      else if (draggedIndex > selectedIndex && dropIndex <= selectedIndex) 
+        setSelectedValue(selectedValue+1)
+      else if (draggedIndex < selectedIndex && dropIndex >= selectedIndex)
+        setSelectedValue(selectedValue-1)
     } else {
       console.log("Drop skipped: invalid indices or same position");
     }
     setHoveredIndex(-1); // Reset hovered index
   };
 
+  // useEffect(() => {
+  //   console.log(hoveredIndex)
+  // }, [hoveredIndex])
+
+  // useEffect(() => {
+  //   console.log(props.value)
+  // }, [props.value])
+
+  // useEffect(() => {
+  //   console.log(selectedValue)
+  // }, [selectedValue])
+
   const enhancedChildren = React.Children.map(initialChildren, (child, originalIndex) => {
     if (React.isValidElement(child)) {
       const currentIndex = tabOrder.indexOf(originalIndex);
@@ -94,5 +122,5 @@ export default function DraggableTabs(props: DraggableTabsProps) {
   const orderedChildren = tabOrder.map((index) => enhancedChildren[index]);
   const allTabs = [...startTabs, ...orderedChildren, ...endTabs];
 
-  return <Tabs {...tabsProps}>{allTabs}</Tabs>;
+  return <Tabs {...tabsProps} value={selectedValue} >{allTabs}</Tabs>;
 }

src/common/SmartBreadcrumb.tsx

@@ -313,12 +313,10 @@ export default function SmartBreadcrumb(props: Props) {
         variant={lastPath ? "filled" : "outlined"}
         label={
           <LinkRouter
-            //color={lastPath ? "textPrimary" : "textSecondary"}
+            color={lastPath ? "textPrimary" : "textSecondary"}
             variant="subtitle1"
             to={to}
-            sx={{ '&:hover': { color: getThemeType() === "dark" ? 'white' : "black" }, 
-              color: lastPath ? theme.palette.text.secondary : theme.palette.text.primary
-            }}
+            sx={{ '&:hover': { color: getThemeType() === "dark" ? 'white' : "black" }}}
             className={classes.textOverflow}>
             {label}
           </LinkRouter>