Add z-index for Spotlight Tooltip in Popover

- Introduced a new CSS rule to set the z-index for popovers containing spotlight tooltips, ensuring proper layering in the user interface.
- This change enhances the visibility and interaction of tooltips within the application, improving overall user experience.

assets/icons/chevronlefticon.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-1.001515,0,0,1.001515,62.999788,3.331628)">
+        <path d="M32.953,57.25C34.312,57.25 35.438,56.766 36.406,55.828L60.047,32.719C61.312,31.438 61.906,30.172 61.906,28.625C61.891,27.047 61.297,25.766 60.047,24.531L36.406,1.422C35.438,0.469 34.328,0 32.953,0C30.172,0 27.906,2.234 27.906,4.984C27.906,6.328 28.484,7.609 29.531,8.641L51.438,29.859L51.438,27.312L29.531,48.609C28.5,49.625 27.906,50.906 27.906,52.281C27.906,55.016 30.172,57.25 32.953,57.25Z" style="fill-rule:nonzero;"/>
+        <path d="M5.016,57.25C6.375,57.25 7.5,56.766 8.484,55.828L32.125,32.719C33.406,31.438 33.984,30.172 33.984,28.625C33.953,27.047 33.391,25.766 32.125,24.531L8.469,1.422C7.531,0.469 6.391,0 5.016,0C2.234,0 0,2.234 0,4.984C0,6.328 0.562,7.609 1.594,8.641L23.516,29.859L23.516,27.312L1.594,48.609C0.578,49.625 0,50.906 0,52.281C0,55.016 2.234,57.25 5.016,57.25Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

assets/stylesheets/App.css

@@ -75,15 +75,6 @@
   vertical-align: top !important;
 }
 
-.object-display-tag .ant-typography-ellipsis-single-line > code {
-  background-color: transparent !important;
-  border: 1px solid transparent !important;
-  max-width: calc(100%);
-  padding: 0;
-  margin: 0;
-  font-size: 95%;
-}
-
 .ant-select-selection-item .country-display {
   margin-left: 1px !important;
 }
@@ -234,7 +225,8 @@ html.macos-vibrancy .dark-mode .ant-layout.main-content-layout .ant-card {
   line-height: 40px;
 }
 
-.electron-sidebar.ant-menu-inline .ant-menu-item {
+.electron-sidebar.ant-menu-inline .ant-menu-item,
+.electron-sidebar.ant-menu-inline.ant-menu-root .ant-menu-submenu-title {
   padding-left: 20px !important;
 }
 
@@ -357,6 +349,10 @@ code {
   padding: 0 !important;
 }
 
+.ant-popover:has(.spotlight-tooltip) {
+  z-index: 1051;
+}
+
 :root,
 .light-mode,
 html:has(.light-mode) {
@@ -365,7 +361,7 @@ html:has(.light-mode) {
   --kbd-inset: #e8e8e8;
   --kbd-edge: #c3c3c3;
   --kbd-ridge: #c9c9c9;
-  --kbd-drop-shadow: #333333;
+  --kbd-drop-shadow: rgb(51 51 51 / 40%);
   --kbd-text-shadow: #f6f6f6;
 }
 
@@ -376,7 +372,7 @@ html:has(.dark-mode) {
   --kbd-inset: #323232;
   --kbd-edge: #1c1c1c;
   --kbd-ridge: #141414;
-  --kbd-drop-shadow: #000000;
+  --kbd-drop-shadow: rgb(0 0 0 / 45%);
   --kbd-text-shadow: #111111;
 }
 
@@ -389,11 +385,12 @@ html:has(.dark-mode) {
   padding: 3px 7px;
   margin: 5px 3px;
   border-radius: 4px;
+  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
   box-shadow:
     inset 0 0 25px var(--kbd-inset),
     0 1px 0 var(--kbd-edge),
-    0 2px 0 var(--kbd-ridge),
+    0 3px 0 var(--kbd-ridge),
-    0 2px 3px var(--kbd-drop-shadow);
+    0 4px 8px var(--kbd-drop-shadow);
   text-shadow: 0 1px 0 var(--kbd-text-shadow);
 }
 
@@ -401,12 +398,12 @@ html:has(.dark-mode) {
   padding: 4.5px 10.5px;
   margin: 7.5px 3.5px;
   font-size: 110%;
-  border-radius: 6px;
+  border-radius: 10px;
   box-shadow:
     inset 0 0 37.5px var(--kbd-inset),
     0 1.5px 0 var(--kbd-edge),
-    0 3px 0 var(--kbd-ridge),
+    0 4.5px 0 var(--kbd-ridge),
-    0 3px 4.5px var(--kbd-drop-shadow);
+    0 6px 12px var(--kbd-drop-shadow);
   text-shadow: 0 1.5px 0 var(--kbd-text-shadow);
 }
 
@@ -418,8 +415,8 @@ html:has(.dark-mode) {
   box-shadow:
     inset 0 0 50px var(--kbd-inset),
     0 2px 0 var(--kbd-edge),
-    0 4px 0 var(--kbd-ridge),
+    0 6px 0 var(--kbd-ridge),
-    0 4px 6px var(--kbd-drop-shadow);
+    0 8px 16px var(--kbd-drop-shadow);
   text-shadow: 0 2px 0 var(--kbd-text-shadow);
 }
 
@@ -431,8 +428,8 @@ html:has(.dark-mode) {
   box-shadow:
     inset 0 0 75px var(--kbd-inset),
     0 3px 0 var(--kbd-edge),
-    0 6px 0 var(--kbd-ridge),
+    0 9px 0 var(--kbd-ridge),
-    0 6px 9px var(--kbd-drop-shadow);
+    0 12px 24px var(--kbd-drop-shadow);
   text-shadow: 0 3px 0 var(--kbd-text-shadow);
 }
 
@@ -1325,6 +1322,8 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 .elipsis-text-wrapper.ant-typography code.elipsis-text-truncated {
   margin: 0;
   box-sizing: border-box;
+  padding-inline: 0.5em;
+  padding-block: 0.1em 0.1em;
 }
 
 .elipsis-text-measure {
@@ -1666,3 +1665,18 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   min-width: var(--dashboard-splitter-sidebar-size) !important;
   max-width: var(--dashboard-splitter-sidebar-size) !important;
 }
+
+.object-display-tag
+  .elipsis-text-wrapper.ant-typography
+  code.elipsis-text-measure,
+.object-display-tag .elipsis-text-wrapper.ant-typography code.elipsis-text-full,
+.object-display-tag
+  .elipsis-text-wrapper.ant-typography
+  code.elipsis-text-truncated {
+  background-color: transparent !important;
+  border: 1px solid transparent !important;
+  max-width: calc(100%);
+  padding: 0;
+  margin: 0;
+  font-size: 95%;
+}

src/App.jsx

@@ -19,6 +19,7 @@ import {
 } from './components/Dashboard/context/SpotlightContext.jsx'
 import { ActionsModalProvider } from './components/Dashboard/context/ActionsModalContext.jsx'
 import { ActionsProvider } from './components/Dashboard/context/ActionsContext.jsx'
+import { DashboardObjectToolsProvider } from './components/Dashboard/context/DashboardObjectToolsContext.jsx'
 import MissingPlaceholder from './components/Dashboard/common/MissingPlaceholder.jsx'
 
 import {
@@ -93,6 +94,7 @@ const AppContent = () => {
                             <SpotlightProvider>
                               <ActionsModalProvider>
                                 <ActionsProvider>
+                                  <DashboardObjectToolsProvider>
                                   <Routes>
                                   <Route
                                     path='/applaunch'
@@ -164,6 +166,7 @@ const AppContent = () => {
                                     }
                                   />
                                 </Routes>
+                                  </DashboardObjectToolsProvider>
                                 </ActionsProvider>
                               </ActionsModalProvider>
                             </SpotlightProvider>

src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -20,6 +20,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -65,6 +66,19 @@ const InvoiceInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={invoiceId}
+        objectType='invoice'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, invoiceId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -153,12 +167,6 @@ const InvoiceInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={invoiceId}
-            objectType='invoice'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/Finance/Payments/PaymentInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -58,6 +59,19 @@ const PaymentInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={paymentId}
+        objectType='payment'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, paymentId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -143,12 +157,6 @@ const PaymentInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={paymentId}
-            objectType='payment'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 
@@ -217,10 +225,7 @@ const PaymentInfo = () => {
               <ObjectTable
                 type='auditLog'
                 masterFilter={{
-                    parent:
+                  parent: getModelByName('payment').prefix + ':' + paymentId
-                      getModelByName('payment').prefix +
-                      ':' +
-                      paymentId
                 }}
                 visibleColumns={{ _id: false, parent: false }}
               />

src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
@@ -17,6 +17,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -50,6 +51,19 @@ const TaxRecordInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={taxRecordId}
+        objectType='taxRecord'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, taxRecordId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -133,12 +147,6 @@ const TaxRecordInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={taxRecordId}
-              objectType='taxRecord'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -6,6 +6,7 @@ import ObjectForm from '../../common/ObjectForm'
 import ObjectInfo from '../../common/ObjectInfo'
 import ObjectTable from '../../common/ObjectTable'
 import ObjectActions from '../../common/ObjectActions'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ViewButton from '../../common/ViewButton'
 import EditButtons from '../../common/EditButtons'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
@@ -52,6 +53,19 @@ const FilamentStockInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={filamentStockId}
+        objectType='filamentStock'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, filamentStockId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -133,12 +147,6 @@ const FilamentStockInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={filamentStockId}
-              objectType='filamentStock'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
@@ -51,6 +52,19 @@ const OrderItemInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={orderItemId}
+        objectType='orderItem'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, orderItemId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -132,12 +146,6 @@ const OrderItemInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={orderItemId}
-              objectType='orderItem'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
 

src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -19,6 +19,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -57,6 +58,19 @@ const PartStockInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={partStockId}
+        objectType='partStock'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, partStockId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -141,12 +155,6 @@ const PartStockInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={partStockId}
-              objectType='partStock'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
 

src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -23,6 +23,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -71,6 +72,19 @@ const ProductStockInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={productStockId}
+        objectType='productStock'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, productStockId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -159,12 +173,6 @@ const ProductStockInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={productStockId}
-            objectType='productStock'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -73,6 +74,19 @@ const PurchaseOrderInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={purchaseOrderId}
+        objectType='purchaseOrder'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, purchaseOrderId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       orderItemsTableRef?.current?.startEditing?.()
@@ -165,12 +179,6 @@ const PurchaseOrderInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={purchaseOrderId}
-            objectType='purchaseOrder'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Modal, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -66,6 +67,19 @@ const PurchaseOrderInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={purchaseOrderId}
+        objectType='purchaseOrder'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, purchaseOrderId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       orderItemsTableRef?.current?.startEditing?.()
@@ -168,12 +182,6 @@ const PurchaseOrderInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={purchaseOrderId}
-              objectType='purchaseOrder'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
 

src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -61,6 +62,19 @@ const ShipmentInfo = () => {
     editDisabled: false,
     objectData: {}
   })
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={shipmentId}
+        objectType='shipment'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, shipmentId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -146,12 +160,6 @@ const ShipmentInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={shipmentId}
-            objectType='shipment'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -53,6 +54,19 @@ const StockAuditInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={stockAuditId}
+        objectType='stockAudit'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, stockAuditId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -135,12 +149,6 @@ const StockAuditInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={stockAuditId}
-              objectType='stockAudit'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
 

src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -54,6 +55,19 @@ const StockLocationInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={stockLocationId}
+        objectType='stockLocation'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, stockLocationId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -136,12 +150,6 @@ const StockLocationInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={stockLocationId}
-              objectType='stockLocation'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
 

src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -19,6 +19,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -61,6 +62,19 @@ const StockTransferInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={stockTransferId}
+        objectType='stockTransfer'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, stockTransferId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -147,12 +161,6 @@ const StockTransferInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={stockTransferId}
-            objectType='stockTransfer'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/Layout.jsx

@@ -13,6 +13,7 @@ import DeveloperSidebar from './Developer/DeveloperSidebar'
 import DashboardSidebarSplitter from './common/DashboardSidebarSplitter'
 import { useThemeContext } from './context/ThemeContext'
 import { MessageProvider } from './context/MessageContext'
+import { useDashboardObjectToolsContext } from './context/DashboardObjectToolsContext'
 
 const { Content } = Layout
 
@@ -26,6 +27,7 @@ const DashboardLayout = ({ children }) => {
   const isDeveloper = location.pathname.startsWith('/dashboard/developer')
 
   const { isDarkMode } = useThemeContext()
+  const { currentObjectTools } = useDashboardObjectToolsContext()
 
   const sidebar = isProduction ? (
     <ProductionSidebar />
@@ -57,8 +59,9 @@ const DashboardLayout = ({ children }) => {
           >
             <Content>
               <Flex vertical style={{ height: '100%' }} gap='20px'>
-                <Flex justify='space-between'>
+                <Flex justify='space-between' align='center'>
                   <DashboardBreadcrumb style={{ margin: '16px 0' }} />
+                  {currentObjectTools}
                 </Flex>
                 {children}
               </Flex>

src/components/Dashboard/Management/AppPasswords/AppPasswordInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -14,6 +14,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -54,6 +55,19 @@ const AppPasswordInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={appPasswordId}
+        objectType='appPassword'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, appPasswordId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -131,12 +145,6 @@ const AppPasswordInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={appPasswordId}
-            objectType='appPassword'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
       <ScrollBox>

src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
@@ -17,6 +17,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -52,6 +53,19 @@ const CourierServiceInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={courierServiceId}
+        objectType='courierService'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, courierServiceId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -135,12 +149,6 @@ const CourierServiceInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={courierServiceId}
-              objectType='courierService'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/Couriers/CourierInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
@@ -17,6 +17,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -48,6 +49,19 @@ const CourierInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={courierId}
+        objectType='courier'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, courierId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -131,12 +145,6 @@ const CourierInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={courierId}
-              objectType='courier'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -53,6 +54,19 @@ const DocumentJobInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={documentJobId}
+        objectType='documentJob'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, documentJobId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -132,12 +146,6 @@ const DocumentJobInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={documentJobId}
-              objectType='documentJob'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -55,6 +56,19 @@ const DocumentPrinterInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={documentPrinterId}
+        objectType='documentPrinter'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, documentPrinterId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -140,12 +154,6 @@ const DocumentPrinterInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={documentPrinterId}
-              objectType='documentPrinter'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
 

src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -53,6 +54,19 @@ const DocumentSizeInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={documentSizeId}
+        objectType='documentSize'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, documentSizeId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -132,12 +146,6 @@ const DocumentSizeInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={documentSizeId}
-              objectType='documentSize'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react'
+import { useState, useRef, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Space, Flex, Card } from 'antd'
 import loglevel from 'loglevel'
@@ -10,9 +10,11 @@ import ViewButton from '../../common/ViewButton.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import ObjectForm from '../../common/ObjectForm.jsx'
 import EditButtons from '../../common/EditButtons.jsx'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ScrollBox from '../../common/ScrollBox.jsx'
 
 import TemplateEditor from '../../common/TemplateEditor.jsx'
@@ -46,6 +48,19 @@ const DocumentTemplateDesign = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={documentTemplateId}
+        objectType='documentTemplate'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, documentTemplateId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()

src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -55,6 +56,19 @@ const DocumentTemplateInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={documentTemplateId}
+        objectType='documentTemplate'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, documentTemplateId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -137,12 +151,6 @@ const DocumentTemplateInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={documentTemplateId}
-              objectType='documentTemplate'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
 

src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -15,6 +15,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -47,6 +48,19 @@ const FilamentSkuInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={filamentSkuId}
+        objectType='filamentSku'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, filamentSkuId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -130,12 +144,6 @@ const FilamentSkuInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={filamentSkuId}
-              objectType='filamentSku'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/Filaments/FilamentInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -66,6 +67,19 @@ const FilamentInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={filamentId}
+        objectType='filament'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, filamentId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -153,12 +167,6 @@ const FilamentInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={filamentId}
-            objectType='filament'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/Management/Files/FileInfo.jsx

@@ -1,4 +1,4 @@
-import { useContext, useRef, useState } from 'react'
+import { useContext, useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
@@ -17,6 +17,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -56,6 +57,19 @@ const FileInfo = () => {
   })
   const { fetchFileContent } = useContext(ApiServerContext)
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={fileId}
+        objectType='file'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, fileId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -145,12 +159,6 @@ const FileInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={fileId}
-              objectType='file'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/Hosts/HostInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -61,6 +62,19 @@ const HostInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={hostId}
+        objectType='host'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, hostId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -148,12 +162,6 @@ const HostInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={hostId}
-            objectType='host'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/Management/Materials/MaterialInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
@@ -17,6 +17,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -50,6 +51,19 @@ const MaterialInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={materialId}
+        objectType='material'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, materialId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -133,12 +147,6 @@ const MaterialInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={materialId}
-              objectType='material'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -14,6 +14,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -43,6 +44,19 @@ const NoteTypeInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={noteTypeId}
+        objectType='noteType'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, noteTypeId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -121,12 +135,6 @@ const NoteTypeInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={noteTypeId}
-              objectType='noteType'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/Notes/NoteInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -20,6 +20,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -51,6 +52,19 @@ const NoteInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={noteId}
+        objectType='note'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, noteId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -135,12 +149,6 @@ const NoteInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={noteId}
-              objectType='note'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -15,6 +15,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -42,6 +43,19 @@ const PartSkuInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={partSkuId}
+        objectType='partSku'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, partSkuId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -125,12 +139,6 @@ const PartSkuInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={partSkuId}
-              objectType='partSku'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/Parts/PartInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -15,6 +15,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -54,6 +55,19 @@ const PartInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={partId}
+        objectType='part'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, partId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -133,12 +147,6 @@ const PartInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={partId}
-            objectType='part'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
       <ScrollBox>

src/components/Dashboard/Management/PermissionSettings/PermissionSettingInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -16,6 +16,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -54,6 +55,19 @@ const PermissionSettingInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={permissionSettingId}
+        objectType='permissionSetting'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, permissionSettingId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -137,12 +151,6 @@ const PermissionSettingInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={permissionSettingId}
-              objectType='permissionSetting'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -15,6 +15,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -47,6 +48,19 @@ const ProductCategoryInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={productCategoryId}
+        objectType='productCategory'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, productCategoryId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -130,12 +144,6 @@ const ProductCategoryInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={productCategoryId}
-              objectType='productCategory'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -15,6 +15,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -48,6 +49,19 @@ const ProductSkuInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={productSkuId}
+        objectType='productSku'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, productSkuId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -132,12 +146,6 @@ const ProductSkuInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={productSkuId}
-              objectType='productSku'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/Products/ProductInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -16,6 +16,7 @@ import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -54,6 +55,19 @@ const ProductInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={productId}
+        objectType='product'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, productId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -133,12 +147,6 @@ const ProductInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={productId}
-            objectType='product'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
       <ScrollBox>

src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
@@ -17,6 +17,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -47,6 +48,19 @@ const TaxRateInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={taxRateId}
+        objectType='taxRate'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, taxRateId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -130,12 +144,6 @@ const TaxRateInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={taxRateId}
-              objectType='taxRate'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -16,6 +16,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -54,6 +55,19 @@ const UserGroupInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={userGroupId}
+        objectType='userGroup'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, userGroupId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -137,12 +151,6 @@ const UserGroupInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={userGroupId}
-            objectType='userGroup'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
       <ScrollBox>

src/components/Dashboard/Management/Users/UserInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -17,6 +17,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -53,6 +54,19 @@ const UserInfo = () => {
   })
   const isMobile = useMediaQuery({ maxWidth: 768 })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={userId}
+        objectType='user'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, userId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -132,12 +146,6 @@ const UserInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={userId}
-            objectType='user'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
       <ScrollBox>

src/components/Dashboard/Management/Vendors/VendorInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
@@ -17,6 +17,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -47,6 +48,19 @@ const VendorInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={vendorId}
+        objectType='vendor'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, vendorId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -130,12 +144,6 @@ const VendorInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={vendorId}
-              objectType='vendor'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import MultiMotionIcon from '../../../Icons/MultiMotionIcon'
 import NoteIcon from '../../../Icons/NoteIcon'
 import NotesPanel from '../../common/NotesPanel'
 import ObjectActions from '../../common/ObjectActions'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectForm from '../../common/ObjectForm'
 import ObjectInfo from '../../common/ObjectInfo'
 import ObjectTable from '../../common/ObjectTable'
@@ -85,6 +86,19 @@ const FilamentProfileInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading}
+        _id={filamentProfileId}
+        objectType='filamentProfile'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, filamentProfileId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef.current?.startEditing?.()
@@ -178,12 +192,6 @@ const FilamentProfileInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading}
-            _id={filamentProfileId}
-            objectType='filamentProfile'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -19,6 +19,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -55,6 +56,19 @@ const GCodeFileInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={gcodeFileId}
+        objectType='gcodeFile'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, gcodeFileId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -138,12 +152,6 @@ const GCodeFileInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={gcodeFileId}
-              objectType='gcodeFile'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
 

src/components/Dashboard/Production/GCodeFiles/GCodeFilePreview.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Space, Flex, Card } from 'antd'
 import loglevel from 'loglevel'
@@ -12,6 +12,8 @@ import EyeIcon from '../../../Icons/EyeIcon.jsx'
 import ObjectForm from '../../common/ObjectForm.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import FilePreview from '../../common/FilePreview.jsx'
 import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
@@ -40,6 +42,19 @@ const GCodeFilePreview = () => {
     lock: null
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading}
+        _id={gcodeFileId}
+        objectType='gcodeFile'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, gcodeFileId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   return (
     <Flex
       gap='large'

src/components/Dashboard/Production/Jobs/JobInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -62,6 +63,19 @@ const JobInfo = () => {
     }
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={jobId}
+        objectType='job'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, jobId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -144,12 +158,6 @@ const JobInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={jobId}
-            objectType='job'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ActivityIndicator from '../../common/ActivityIndicator'
 import NoteIcon from '../../../Icons/NoteIcon'
 import NotesPanel from '../../common/NotesPanel'
 import ObjectActions from '../../common/ObjectActions'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectForm from '../../common/ObjectForm'
 import ObjectInfo from '../../common/ObjectInfo'
 import ObjectTable from '../../common/ObjectTable'
@@ -63,6 +64,19 @@ const PrinterProfileInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading}
+        _id={printerProfileId}
+        objectType='printerProfile'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, printerProfileId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef.current?.startEditing?.()
@@ -150,12 +164,6 @@ const PrinterProfileInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading}
-            _id={printerProfileId}
-            objectType='printerProfile'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/Production/Printers/ControlPrinter.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useContext } from 'react'
+import { useState, useRef, useEffect, useContext, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Space, Flex, Card, Splitter, Divider } from 'antd'
 import loglevel from 'loglevel'
@@ -12,6 +12,7 @@ import ObjectForm from '../../common/ObjectForm.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import PropTypes from 'prop-types'
 
 import ObjectInfo from '../../common/ObjectInfo.jsx'
@@ -105,6 +106,20 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
     return () => setOnModalOk(null)
   }, [setOnModalOk])
 
+  const currentObjectTools = useMemo(
+    () =>
+      !slicerIntegration ? (
+        <ObjectTableNavigationButtons
+          disabled={objectFormState.loading}
+          _id={printerId}
+          objectType='printer'
+          showEndingDivider={false}
+        />
+      ) : null,
+    [objectFormState.loading, printerId, slicerIntegration]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -320,14 +335,6 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
               }
               loading={objectFormState.loading}
             />
-            {!slicerIntegration && (
-              <ObjectTableNavigationButtons
-                showEndingDivider={true}
-                disabled={objectFormState.loading}
-                _id={printerId}
-                objectType='printer'
-              />
-            )}
           </Flex>
         </Flex>
 

src/components/Dashboard/Production/Printers/PrinterInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -17,6 +17,7 @@ import EditButtons from '../../common/EditButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -63,6 +64,19 @@ const PrinterInfo = () => {
     return () => setOnModalOk(null)
   }, [setOnModalOk])
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={printerId}
+        objectType='printer'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, printerId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -145,12 +159,6 @@ const PrinterInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={printerId}
-            objectType='printer'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -16,6 +16,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -43,6 +44,19 @@ const SubJobInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={subJobId}
+        objectType='subJob'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, subJobId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current.startEditing()
@@ -118,12 +132,6 @@ const SubJobInfo = () => {
               disabled={true}
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={subJobId}
-              objectType='subJob'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Sales/Clients/ClientInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
@@ -17,6 +17,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
@@ -47,6 +48,19 @@ const ClientInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={clientId}
+        objectType='client'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, clientId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -130,12 +144,6 @@ const ClientInfo = () => {
               }
               loading={objectFormState.editLoading}
             />
-            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading || objectFormState.isEditing}
-              _id={clientId}
-              objectType='client'
-              showEndingDivider={true}
-            />
           </Space>
         </Flex>
         <ScrollBox>

src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
@@ -17,6 +17,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -61,6 +62,19 @@ const ListingVarientInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={listingVarientId}
+        objectType='listingVarient'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, listingVarientId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -143,12 +157,6 @@ const ListingVarientInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={listingVarientId}
-            objectType='listingVarient'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
       <ScrollBox>

src/components/Dashboard/Sales/Listings/ListingInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -59,6 +60,19 @@ const ListingInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={listingId}
+        objectType='listing'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, listingId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -142,12 +156,6 @@ const ListingInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={listingId}
-            objectType='listing'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
       <ScrollBox>

src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx

@@ -1,4 +1,4 @@
-import { useContext, useRef, useState, useEffect } from 'react'
+import { useContext, useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Card, Flex, message, Space } from 'antd'
 import loglevel from 'loglevel'
@@ -17,6 +17,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -116,6 +117,19 @@ const MarketplaceInfo = () => {
     objectFormRef?.current?.handleFetchObject?.()
   }
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={marketplaceId}
+        objectType='marketplace'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, marketplaceId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -210,12 +224,6 @@ const MarketplaceInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={marketplaceId}
-            objectType='marketplace'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
       <ScrollBox>

src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Space, Flex, Card } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -18,6 +18,7 @@ import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButt
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import { useActions } from '../../context/ActionsContext'
+import { useDashboardObjectTools } from '../../context/DashboardObjectToolsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -71,6 +72,19 @@ const SalesOrderInfo = () => {
     objectData: {}
   })
 
+  const currentObjectTools = useMemo(
+    () => (
+      <ObjectTableNavigationButtons
+        disabled={objectFormState.loading || objectFormState.isEditing}
+        _id={salesOrderId}
+        objectType='salesOrder'
+        showEndingDivider={false}
+      />
+    ),
+    [objectFormState.loading, objectFormState.isEditing, salesOrderId]
+  )
+  useDashboardObjectTools(currentObjectTools)
+
   const actions = {
     edit: () => {
       orderItemsTableRef?.current?.startEditing?.()
@@ -163,12 +177,6 @@ const SalesOrderInfo = () => {
             }
             loading={objectFormState.editLoading}
           />
-          <ObjectTableNavigationButtons
-            disabled={objectFormState.loading || objectFormState.isEditing}
-            _id={salesOrderId}
-            objectType='salesOrder'
-            showEndingDivider={true}
-          />
         </Space>
       </Flex>
 

src/components/Dashboard/common/KeyboardShortcut.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, cloneElement, useMemo } from 'react'
+import { useEffect, useRef, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import loglevel from 'loglevel'
 import config from '../../../config'
@@ -50,7 +50,6 @@ const KeyboardShortcut = ({
   onTrigger,
   log = false
 }) => {
-  const childRef = useRef()
   const pressedKeysRef = useRef(new Set())
   const shortcutKeys = useMemo(() => parseShortcut(shortcut), [shortcut])
 
@@ -94,8 +93,6 @@ const KeyboardShortcut = ({
     }
   }, [shortcutKeys, onTrigger, log])
 
-  const element = cloneElement(children, { ref: childRef })
-
   if (hint) {
     var osSpecificHint = hint.replaceAll('ALT', '⌥')
 
@@ -104,11 +101,11 @@ const KeyboardShortcut = ({
         hideBorder
         title={<KeyboardKey size='md'>{osSpecificHint}</KeyboardKey>}
       >
-        {element}
+        {children}
       </Tooltip>
     )
   }
-  return element
+  return children
 }
 
 KeyboardShortcut.propTypes = {

src/components/Dashboard/common/ObjectTable.jsx

@@ -1259,7 +1259,11 @@ const ObjectTable = forwardRef(
           fixed: isMobile ? undefined : fixed,
           key: prop.name,
           filterIcon: () => {
-            return <FilterIcon />
+            return (
+              <Tooltip title='Filter' listenParents={1}>
+                <FilterIcon />
+              </Tooltip>
+            )
           },
           render: (text, record) => {
             if (record?.isSkeleton) {

src/components/Dashboard/common/ObjectTableNavigationButtons.jsx

@@ -1,8 +1,7 @@
 import { useContext, useEffect, useState, useCallback, useRef } from 'react'
 import { Button, Divider, Flex, Space } from 'antd'
 import { useSearchParams } from 'react-router-dom'
-import ArrowLeftIcon from '../../Icons/ArrowLeftIcon.jsx'
+
-import ArrowRightIcon from '../../Icons/ArrowRightIcon.jsx'
 import PropTypes from 'prop-types'
 import { ApiServerContext } from '../context/ApiServerContext'
 import { AuthContext } from '../context/AuthContext'
@@ -11,6 +10,8 @@ import {
   useTableStatePersistence
 } from '../context/TableStateContext'
 import KeyboardShortcut from './KeyboardShortcut.jsx'
+import ChevronLeftIcon from '../../Icons/ChevronLeftIcon.jsx'
+import ChevronRightIcon from '../../Icons/ChevronRightIcon.jsx'
 
 const ObjectTableNavigationButtons = ({
   disabled,
@@ -114,15 +115,21 @@ const ObjectTableNavigationButtons = ({
       {showEndingDivider && (
         <Divider type='vertical' style={{ margin: '0 4px', height: '18px' }} />
       )}
-      <Space size='small'>
+      <Space.Compact size='small' style={{ height: '22px' }}>
         <KeyboardShortcut
           shortcut='alt+arrowleft'
           hint='ALT ←'
           onTrigger={handlePreviousShortcut}
         >
           <Button
-            icon={<ArrowLeftIcon />}
+            type='text'
+            icon={
+              <ChevronLeftIcon
+                style={{ fontSize: '10px', marginBottom: '6px' }}
+              />
+            }
             onClick={handlePrevious}
+            style={{ padding: 0, height: '22px', width: '32px' }}
             disabled={disabled || loading || !neighbors.previous?._id}
           />
         </KeyboardShortcut>
@@ -132,12 +139,18 @@ const ObjectTableNavigationButtons = ({
           onTrigger={handleNextShortcut}
         >
           <Button
-            icon={<ArrowRightIcon />}
+            type='text'
+            icon={
+              <ChevronRightIcon
+                style={{ fontSize: '10px', marginBottom: '6px' }}
+              />
+            }
             onClick={handleNext}
+            style={{ padding: 0, height: '22px', width: '32px' }}
             disabled={disabled || loading || !neighbors.next?._id}
           />
         </KeyboardShortcut>
-      </Space>
+      </Space.Compact>
     </Flex>
   )
 }

src/components/Dashboard/common/Tooltip.jsx

@@ -7,6 +7,16 @@ const mergeHandler = (original, next) => (event) => {
   original?.(event)
 }
 
+const mergeRefs = (...refs) => (node) => {
+  refs.forEach((ref) => {
+    if (typeof ref === 'function') {
+      ref(node)
+    } else if (ref) {
+      ref.current = node
+    }
+  })
+}
+
 const Tooltip = ({
   children,
   title,
@@ -17,7 +27,7 @@ const Tooltip = ({
   const { showTooltip, hideTooltip } = useTooltipContext()
   const id = useId()
   const tooltipContent = title ?? content
-  const spanRef = useRef(null)
+  const childRef = useRef(null)
   const hoveredTargetsRef = useRef(new Set())
   const hoveringRef = useRef(false)
   const tooltipContentRef = useRef(tooltipContent)
@@ -60,8 +70,8 @@ const Tooltip = ({
   onMouseLeaveRef.current = onMouseLeave
 
   useEffect(() => {
-    const span = spanRef.current
+    const child = childRef.current
-    if (!span || listenParents < 1) return
+    if (!child || listenParents < 1) return
 
     const hoveredTargets = hoveredTargetsRef.current
 
@@ -69,7 +79,7 @@ const Tooltip = ({
     const handleLeave = (event) => onMouseLeaveRef.current(event)
 
     const parents = []
-    let current = span.parentElement
+    let current = child.parentElement
     for (let i = 0; i < listenParents && current; i += 1) {
       parents.push(current)
       current = current.parentElement
@@ -89,30 +99,15 @@ const Tooltip = ({
     }
   }, [listenParents])
 
-  const wrapWithSpan = (node) => (
+  if (!isValidElement(children)) {
-    <span ref={spanRef} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+    return children
-      {node}
+  }
-    </span>
-  )
 
-  if (isValidElement(children)) {
+  return cloneElement(children, {
-    const trigger = cloneElement(children, {
+    ref: mergeRefs(children.ref, childRef),
     onMouseEnter: mergeHandler(children.props.onMouseEnter, onMouseEnter),
     onMouseLeave: mergeHandler(children.props.onMouseLeave, onMouseLeave)
   })
-
-    if (listenParents > 0) {
-      return wrapWithSpan(children)
-    }
-
-    if (children.props.disabled) {
-      return wrapWithSpan(trigger)
-    }
-
-    return trigger
-  }
-
-  return wrapWithSpan(children)
 }
 
 Tooltip.propTypes = {

src/components/Dashboard/context/DashboardObjectToolsContext.jsx

@@ -0,0 +1,78 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from 'react'
+import PropTypes from 'prop-types'
+
+const DashboardObjectToolsContext = createContext()
+
+export const DashboardObjectToolsProvider = ({ children }) => {
+  const [currentObjectTools, setCurrentObjectToolsState] = useState(null)
+  const ownerRef = useRef(null)
+
+  const setCurrentObjectTools = useCallback((tools, ownerId) => {
+    ownerRef.current = ownerId
+    setCurrentObjectToolsState(tools)
+  }, [])
+
+  const clearCurrentObjectTools = useCallback((ownerId) => {
+    if (ownerRef.current !== ownerId) {
+      return
+    }
+    ownerRef.current = null
+    setCurrentObjectToolsState(null)
+  }, [])
+
+  return (
+    <DashboardObjectToolsContext.Provider
+      value={{
+        currentObjectTools,
+        setCurrentObjectTools,
+        clearCurrentObjectTools
+      }}
+    >
+      {children}
+    </DashboardObjectToolsContext.Provider>
+  )
+}
+
+DashboardObjectToolsProvider.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useDashboardObjectToolsContext = () => {
+  const context = useContext(DashboardObjectToolsContext)
+  if (!context) {
+    throw new Error(
+      'useDashboardObjectToolsContext must be used within a DashboardObjectToolsProvider'
+    )
+  }
+  return context
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useDashboardObjectTools = (tools) => {
+  const { setCurrentObjectTools, clearCurrentObjectTools } =
+    useDashboardObjectToolsContext()
+  const ownerIdRef = useRef(null)
+
+  if (ownerIdRef.current == null) {
+    ownerIdRef.current = Symbol('dashboardObjectTools')
+  }
+
+  useEffect(() => {
+    setCurrentObjectTools(tools, ownerIdRef.current)
+  }, [tools, setCurrentObjectTools])
+
+  useEffect(() => {
+    const ownerId = ownerIdRef.current
+    return () => clearCurrentObjectTools(ownerId)
+  }, [clearCurrentObjectTools])
+}
+
+export { DashboardObjectToolsContext }

src/components/Icons/ChevronLeftIcon.jsx

@@ -0,0 +1,6 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/chevronlefticon.svg?react'
+
+const ChevronLeftIcon = (props) => <Icon component={CustomIconSvg} {...props} />
+
+export default ChevronLeftIcon