Enhance DashboardTabs Interaction and Scrolling Behavior

- Added unique IDs to dashboard tab items for improved accessibility and interaction.
- Implemented handleSelectTab function to manage tab selection and ensure proper scrolling behavior when tabs are selected, enhancing user experience.

src/components/Dashboard/common/DashboardTabs.jsx

@@ -142,6 +142,7 @@ const DashboardTabItem = memo(function DashboardTabItem({
       draggable
       onDragStart={(event) => onDragStart(event, tab.id)}
       onDragEnd={onDragEnd}
+      id={`dashboard-tab-item-${tab.id}`}
       onClick={() => onClick(tab.id)}
       onKeyDown={(event) => onKeyDown(event, tabIndex)}
       onDragOver={(event) => onDragOver(event, tab)}
@@ -730,10 +731,39 @@ const DashboardTabs = () => {
     ? tabs.findIndex((tab) => tab.id === activeTabId)
     : 0
 
+  const handleSelectTab = (tabId) => {
+    selectTab(tabId)
+
+    const scrollEl = rootRef.current?.querySelector(
+      '.simplebar-content-wrapper'
+    )
+
+    if (!scrollEl) return
+
+    const tabItem = document.getElementById(`dashboard-tab-item-${tabId}`)
+
+    if (!tabItem) return
+
+    const tabItemRect = tabItem.getBoundingClientRect()
+    const scrollRect = scrollEl.getBoundingClientRect()
+
+    const offset = 50
+
+    // Tab is off-screen to the left
+    if (tabItemRect.left < scrollRect.left) {
+      scrollEl.scrollLeft -= scrollRect.left - tabItemRect.left + offset
+    }
+
+    // Tab is off-screen to the right
+    else if (tabItemRect.right > scrollRect.right) {
+      scrollEl.scrollLeft += tabItemRect.right - scrollRect.right + offset
+    }
+  }
+
   const tabItemProps = {
     onDragStart: handleItemDragStart,
     onDragEnd: handleItemDragEnd,
-    onClick: selectTab,
+    onClick: handleSelectTab,
     onKeyDown: handleKeyDown,
     onDragOver: handleItemDragOver,
     onDrop: handleItemDrop,