Refactor Dashboard Components to Utilize Object Tools Context

- Updated multiple dashboard components to integrate the useDashboardObjectTools hook for managing object navigation buttons.
- Replaced direct rendering of ObjectTableNavigationButtons with a memoized version to enhance performance and maintainability.
- Ensured consistent handling of loading and editing states across various components, improving user experience.

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/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>