Add ObjectTableNavigationButtons to various components for improved navigation

- Integrated ObjectTableNavigationButtons into multiple components including InvoiceInfo, PaymentInfo, TaxRecordInfo, and others to enhance user navigation. - Each button is configured with appropriate props for object type and ID, ensuring consistent functionality across the dashboard. - This update improves the overall user experience by providing quick access to related object actions.
2026-08-01 13:18:03 +01:00 · 2026-08-01 13:18:03 +01:00 · a2a1c5be5b
commit a2a1c5be5b
parent 55a2ad2c5f
49 changed files with 533 additions and 25 deletions
--- a/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
+++ b/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
@ -16,6 +16,7 @@ import PaymentIcon from '../../../Icons/PaymentIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -168,6 +169,12 @@ const InvoiceInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={invoiceId}
+              objectType='invoice'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Finance/Payments/PaymentInfo.jsx
+++ b/src/components/Dashboard/Finance/Payments/PaymentInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -161,6 +162,12 @@ const PaymentInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={paymentId}
+              objectType='payment'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx
+++ b/src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx
@ -13,6 +13,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -125,6 +126,12 @@ const TaxRecordInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={taxRecordId}
+              objectType='taxRecord'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
@ -8,6 +8,7 @@ import ObjectTable from '../../common/ObjectTable'
 import ObjectActions from '../../common/ObjectActions'
 import ViewButton from '../../common/ViewButton'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActionHandler from '../../common/ActionHandler'
 import InfoCollapse from '../../common/InfoCollapse'
 import NotesPanel from '../../common/NotesPanel'
@ -125,6 +126,12 @@ const FilamentStockInfo = () => {
              disabled={true}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={filamentStockId}
+              objectType='filamentStock'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
+++ b/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -124,6 +125,12 @@ const OrderItemInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={orderItemId}
+              objectType='orderItem'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx
@ -15,6 +15,7 @@ import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import GraphIcon from '../../../Icons/GraphIcon.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'
@ -135,6 +136,12 @@ const PartStockInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={partStockId}
+              objectType='partStock'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx
@ -23,6 +23,7 @@ import ProductStockIcon from '../../../Icons/ProductStockIcon.jsx'
 import GraphIcon from '../../../Icons/GraphIcon.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'
@ -162,6 +163,12 @@ const ProductStockInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={productStockId}
+              objectType='productStock'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx
+++ b/src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -195,6 +196,12 @@ const PurchaseOrderInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={purchaseOrderId}
+              objectType='purchaseOrder'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx
+++ b/src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -160,6 +161,12 @@ const PurchaseOrderInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={purchaseOrderId}
+              objectType='purchaseOrder'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
+++ b/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -149,6 +150,12 @@ const ShipmentInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={shipmentId}
+              objectType='shipment'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -127,6 +128,12 @@ const StockAuditInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={stockAuditId}
+              objectType='stockAudit'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -128,6 +129,12 @@ const StockLocationInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={stockLocationId}
+              objectType='stockLocation'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx
@ -19,6 +19,7 @@ import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import StockTransferIcon from '../../../Icons/StockTransferIcon.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'
@ -150,6 +151,12 @@ const StockTransferInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={stockTransferId}
+              objectType='stockTransfer'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Management/AppPasswords/AppPasswordInfo.jsx
+++ b/src/components/Dashboard/Management/AppPasswords/AppPasswordInfo.jsx
@ -10,6 +10,7 @@ import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -132,6 +133,12 @@ const AppPasswordInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={appPasswordId}
+              objectType='appPassword'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx
+++ b/src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx
@ -13,6 +13,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -127,6 +128,12 @@ const CourierServiceInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={courierServiceId}
+              objectType='courierService'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/Couriers/CourierInfo.jsx
+++ b/src/components/Dashboard/Management/Couriers/CourierInfo.jsx
@ -13,6 +13,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -123,6 +124,12 @@ const CourierInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={courierId}
+              objectType='courier'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -124,6 +125,12 @@ const DocumentJobInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={documentJobId}
+              objectType='documentJob'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -134,6 +135,12 @@ const DocumentPrinterInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={documentPrinterId}
+              objectType='documentPrinter'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -126,6 +127,12 @@ const DocumentSizeInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={documentSizeId}
+              objectType='documentSize'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -131,6 +132,12 @@ const DocumentTemplateInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={documentTemplateId}
+              objectType='documentTemplate'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx
+++ b/src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx
@ -8,6 +8,7 @@ import ObjectInfo from '../../common/ObjectInfo'
 import ViewButton from '../../common/ViewButton'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
@ -122,6 +123,12 @@ const FilamentSkuInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={filamentSkuId}
+              objectType='filamentSku'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
+++ b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -143,6 +144,12 @@ const FilamentInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={filamentId}
+              objectType='filament'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Management/Files/FileInfo.jsx
+++ b/src/components/Dashboard/Management/Files/FileInfo.jsx
@ -13,6 +13,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -140,6 +141,12 @@ const FileInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={fileId}
+              objectType='file'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/Hosts/HostInfo.jsx
+++ b/src/components/Dashboard/Management/Hosts/HostInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -139,6 +140,12 @@ const HostInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={hostId}
+              objectType='host'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
+++ b/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
@ -13,6 +13,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -125,6 +126,12 @@ const MaterialInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={materialId}
+              objectType='material'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
+++ b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
@ -10,6 +10,7 @@ import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -113,6 +114,12 @@ const NoteTypeInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={noteTypeId}
+              objectType='noteType'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/Notes/NoteInfo.jsx
+++ b/src/components/Dashboard/Management/Notes/NoteInfo.jsx
@ -16,6 +16,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -128,6 +129,12 @@ const NoteInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={noteId}
+              objectType='note'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx
+++ b/src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx
@ -8,6 +8,7 @@ import ObjectInfo from '../../common/ObjectInfo'
 import ViewButton from '../../common/ViewButton'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
@ -117,6 +118,12 @@ const PartSkuInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={partSkuId}
+              objectType='partSku'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/Parts/PartInfo.jsx
+++ b/src/components/Dashboard/Management/Parts/PartInfo.jsx
@ -8,6 +8,7 @@ import ObjectInfo from '../../common/ObjectInfo'
 import ViewButton from '../../common/ViewButton'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
@ -123,6 +124,12 @@ const PartInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={partId}
+              objectType='part'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx
+++ b/src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx
@ -11,6 +11,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -122,6 +123,12 @@ const ProductCategoryInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={productCategoryId}
+              objectType='productCategory'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx
+++ b/src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx
@ -8,6 +8,7 @@ import ObjectInfo from '../../common/ObjectInfo'
 import ViewButton from '../../common/ViewButton'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
@ -125,6 +126,12 @@ const ProductSkuInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={productSkuId}
+              objectType='productSku'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/Products/ProductInfo.jsx
+++ b/src/components/Dashboard/Management/Products/ProductInfo.jsx
@ -8,6 +8,7 @@ import ObjectInfo from '../../common/ObjectInfo'
 import ViewButton from '../../common/ViewButton'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
@ -123,6 +124,12 @@ const ProductInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={productId}
+              objectType='product'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx
+++ b/src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx
@ -13,6 +13,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -122,6 +123,12 @@ const TaxRateInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={taxRateId}
+              objectType='taxRate'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/Users/UserInfo.jsx
+++ b/src/components/Dashboard/Management/Users/UserInfo.jsx
@ -13,6 +13,7 @@ import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import AppPasswordIcon from '../../../Icons/AppPasswordIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -128,6 +129,12 @@ const UserInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={userId}
+              objectType='user'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
+++ b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
@ -13,6 +13,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -122,6 +123,12 @@ const VendorInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={vendorId}
+              objectType='vendor'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx
+++ b/src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx
@ -6,6 +6,7 @@ import ActionHandler from '../../common/ActionHandler'
 import AuditLogIcon from '../../../Icons/AuditLogIcon'
 import DocumentPrintButton from '../../common/DocumentPrintButton'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import FilamentIcon from '../../../Icons/FilamentIcon'
 import GCodeFileIcon from '../../../Icons/GCodeFileIcon'
 import HotEndIcon from '../../../Icons/HotEndIcon'
@ -155,18 +156,26 @@ const FilamentProfileInfo = () => {
            showStartingDivider={true}
          />
        </Space>
-        <EditButtons
-          isEditing={objectFormState.isEditing}
-          handleUpdate={() => actionHandlerRef.current.callAction('finishEdit')}
-          cancelEditing={() =>
-            actionHandlerRef.current.callAction('cancelEdit')
-          }
-          startEditing={() => actionHandlerRef.current.callAction('edit')}
-          editLoading={objectFormState.editLoading}
-          formValid={objectFormState.formValid}
-          disabled={objectFormState.beingEditedByOther || objectFormState.loading}
-          loading={objectFormState.editLoading}
-        />
+        <Space>
+          <EditButtons
+            isEditing={objectFormState.isEditing}
+            handleUpdate={() => actionHandlerRef.current.callAction('finishEdit')}
+            cancelEditing={() =>
+              actionHandlerRef.current.callAction('cancelEdit')
+            }
+            startEditing={() => actionHandlerRef.current.callAction('edit')}
+            editLoading={objectFormState.editLoading}
+            formValid={objectFormState.formValid}
+            disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+            loading={objectFormState.editLoading}
+          />
+          <ObjectTableNavigationButtons
+            disabled={objectFormState.loading}
+            _id={filamentProfileId}
+            objectType='filamentProfile'
+            showEndingDivider={true}
+          />
+        </Space>
      </Flex>

      <ScrollBox>
--- a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
+++ b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
@ -15,6 +15,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -131,6 +132,12 @@ const GCodeFileInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={gcodeFileId}
+              objectType='gcodeFile'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Production/Jobs/JobInfo.jsx
+++ b/src/components/Dashboard/Production/Jobs/JobInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -145,6 +146,12 @@ const JobInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={jobId}
+              objectType='job'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx
+++ b/src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx
@ -6,6 +6,7 @@ import ActionHandler from '../../common/ActionHandler'
 import AuditLogIcon from '../../../Icons/AuditLogIcon'
 import DocumentPrintButton from '../../common/DocumentPrintButton'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import HotEndIcon from '../../../Icons/HotEndIcon'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon'
 import MultiMotionIcon from '../../../Icons/MultiMotionIcon'
@ -128,18 +129,26 @@ const PrinterProfileInfo = () => {
            showStartingDivider={true}
          />
        </Space>
-        <EditButtons
-          isEditing={objectFormState.isEditing}
-          handleUpdate={() => actionHandlerRef.current.callAction('finishEdit')}
-          cancelEditing={() =>
-            actionHandlerRef.current.callAction('cancelEdit')
-          }
-          startEditing={() => actionHandlerRef.current.callAction('edit')}
-          editLoading={objectFormState.editLoading}
-          formValid={objectFormState.formValid}
-          disabled={objectFormState.beingEditedByOther || objectFormState.loading}
-          loading={objectFormState.editLoading}
-        />
+        <Space>
+          <EditButtons
+            isEditing={objectFormState.isEditing}
+            handleUpdate={() => actionHandlerRef.current.callAction('finishEdit')}
+            cancelEditing={() =>
+              actionHandlerRef.current.callAction('cancelEdit')
+            }
+            startEditing={() => actionHandlerRef.current.callAction('edit')}
+            editLoading={objectFormState.editLoading}
+            formValid={objectFormState.formValid}
+            disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+            loading={objectFormState.editLoading}
+          />
+          <ObjectTableNavigationButtons
+            disabled={objectFormState.loading}
+            _id={printerProfileId}
+            objectType='printerProfile'
+            showEndingDivider={true}
+          />
+        </Space>
      </Flex>

      <ScrollBox>
--- a/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
+++ b/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
@ -32,6 +32,7 @@ import { ApiServerContext } from '../../context/ApiServerContext.jsx'
 import LoadFilamentStock from '../../Inventory/FilamentStocks/LoadFilamentStock.jsx'
 import UnloadFilamentStock from '../../Inventory/FilamentStocks/UnloadFilamentStock.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'

 const log = loglevel.getLogger('ControlPrinter')
 log.setLevel(config.logLevel)
@ -317,6 +318,11 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
              />
            </Space>
          </Space>
+          <ObjectTableNavigationButtons
+            disabled={objectFormState.loading}
+            _id={printerId}
+            objectType='printer'
+          />
        </Flex>

        <AlertsDisplay
--- a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
+++ b/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
@ -24,6 +24,7 @@ import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import PrinterProfileIcon from '../../../Icons/PrinterProfileIcon.jsx'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 const log = loglevel.getLogger('PrinterInfo')
 log.setLevel(config.logLevel)

@ -130,9 +131,17 @@ const PrinterInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={printerId}
+              objectType='printer'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx
+++ b/src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx
@ -12,6 +12,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -115,6 +116,12 @@ const SubJobInfo = () => {
              disabled={true}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={subJobId}
+              objectType='subJob'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Sales/Clients/ClientInfo.jsx
+++ b/src/components/Dashboard/Sales/Clients/ClientInfo.jsx
@ -13,6 +13,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -122,6 +123,12 @@ const ClientInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={clientId}
+              objectType='client'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx
+++ b/src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx
@ -13,6 +13,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -139,6 +140,12 @@ const ListingVarientInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={listingVarientId}
+              objectType='listingVarient'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Sales/Listings/ListingInfo.jsx
+++ b/src/components/Dashboard/Sales/Listings/ListingInfo.jsx
@ -14,6 +14,7 @@ import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ListingVarientIcon from '../../../Icons/ListingVarientIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -144,6 +145,12 @@ const ListingInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={listingId}
+              objectType='listing'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx
+++ b/src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx
@ -13,6 +13,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectForm from '../../common/ObjectForm'
 import EditButtons from '../../common/EditButtons'
+import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
@ -212,6 +213,12 @@ const MarketplaceInfo = () => {
              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={marketplaceId}
+              objectType='marketplace'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>
        <ScrollBox>
--- a/src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx
+++ b/src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx
@ -14,6 +14,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.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'
@ -192,6 +193,12 @@ const SalesOrderInfo = () => {
              }
              loading={objectFormState.editLoading}
            />
+            <ObjectTableNavigationButtons
+              disabled={objectFormState.loading}
+              _id={salesOrderId}
+              objectType='salesOrder'
+              showEndingDivider={true}
+            />
          </Space>
        </Flex>

--- a/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx
+++ b/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx
@ -0,0 +1,120 @@
+import { useContext, useEffect, useState, useCallback, useRef } from 'react'
+import { Button, Divider, Flex, Space } from 'antd'
+import { useSearchParams } from 'react-router-dom'
+import ArrowLeftIcon from '../../Icons/ArrowLeftIcon.jsx'
+import ArrowRightIcon from '../../Icons/ArrowRightIcon.jsx'
+import PropTypes from 'prop-types'
+import { ApiServerContext } from '../context/ApiServerContext'
+import { AuthContext } from '../context/AuthContext'
+import { useTableStatePersistence } from '../context/TableStateContext'
+
+const ObjectTableNavigationButtons = ({
+  disabled,
+  _id,
+  objectType,
+  showEndingDivider = false
+}) => {
+  const { getObjectNeighbors } = useContext(ApiServerContext)
+  const { token } = useContext(AuthContext)
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [neighbors, setNeighbors] = useState({ next: null, previous: null })
+  const [loading, setLoading] = useState(false)
+
+  const { getPersistedFilter, getPersistedSorter, getActiveFilterValues } =
+    useTableStatePersistence({
+      scope: objectType,
+      useFilterInSession: true,
+      useSortInSession: true
+    })
+
+  const getObjectNeighborsRef = useRef(getObjectNeighbors)
+  getObjectNeighborsRef.current = getObjectNeighbors
+
+  const getPersistedFilterRef = useRef(getPersistedFilter)
+  getPersistedFilterRef.current = getPersistedFilter
+
+  const getPersistedSorterRef = useRef(getPersistedSorter)
+  getPersistedSorterRef.current = getPersistedSorter
+
+  useEffect(() => {
+    if (!_id || !objectType || !token) {
+      setNeighbors({ next: null, previous: null })
+      setLoading(false)
+      return
+    }
+
+    let cancelled = false
+
+    const loadNeighbors = async () => {
+      setLoading(true)
+      const filter = getActiveFilterValues(getPersistedFilterRef.current())
+      const sorter = getPersistedSorterRef.current()
+      const result = await getObjectNeighborsRef.current(objectType, {
+        id: _id,
+        filter,
+        sorter
+      })
+
+      if (!cancelled) {
+        setNeighbors(result || { next: null, previous: null })
+        setLoading(false)
+      }
+    }
+
+    loadNeighbors()
+
+    return () => {
+      cancelled = true
+    }
+  }, [token, objectType, _id])
+
+  const navigateToNeighbor = useCallback(
+    (neighbor) => {
+      if (!neighbor?._id || !objectType) return
+
+      const nextParams = new URLSearchParams(searchParams)
+      const objectTypeUpper = objectType.toUpperCase()
+
+      for (const [key] of nextParams.entries()) {
+        if (key.toUpperCase().includes(objectTypeUpper)) {
+          nextParams.set(key, neighbor._id)
+        }
+      }
+
+      setSearchParams(nextParams)
+    },
+    [searchParams, setSearchParams, objectType]
+  )
+
+  const handlePrevious = () => navigateToNeighbor(neighbors.previous)
+  const handleNext = () => navigateToNeighbor(neighbors.next)
+
+  return (
+    <Flex gap='small' align='center'>
+      {showEndingDivider && (
+        <Divider type='vertical' style={{ margin: '0 4px', height: '18px' }} />
+      )}
+      <Space size='small'>
+        <Button
+          icon={<ArrowLeftIcon />}
+          onClick={handlePrevious}
+          disabled={disabled || loading || !neighbors.previous?._id}
+        />
+        <Button
+          icon={<ArrowRightIcon />}
+          onClick={handleNext}
+          disabled={disabled || loading || !neighbors.next?._id}
+        />
+      </Space>
+    </Flex>
+  )
+}
+
+ObjectTableNavigationButtons.propTypes = {
+  disabled: PropTypes.bool,
+  _id: PropTypes.string,
+  objectType: PropTypes.string,
+  showEndingDivider: PropTypes.bool
+}
+
+export default ObjectTableNavigationButtons
--- a/src/components/Dashboard/context/ApiServerContext.jsx
+++ b/src/components/Dashboard/context/ApiServerContext.jsx
@ -1136,6 +1136,59 @@ const ApiServerProvider = ({ children }) => {
    }
  }

+  const getObjectNeighbors = async (type, params = {}) => {
+    const { id, filter = {}, sorter = {} } = params
+
+    let newFilter = { ...filter }
+
+    if (filter != null && Object.keys(filter).length > 0) {
+      const model = getModelByName(type)
+
+      if (model.name !== 'unknown') {
+        for (const key of Object.keys(filter)) {
+          const property = model?.properties?.find((p) => p.name === key)
+          if (property && property.type === 'object') {
+            const value = filter[key]
+            newFilter[`${key}._id`] = value?._id ?? value
+            delete newFilter[key]
+          }
+        }
+      }
+    }
+
+    logger.debug('Fetching object neighbors from:', type, {
+      id,
+      newFilter,
+      sorter
+    })
+
+    try {
+      const response = await axios.get(
+        `${config.backendUrl}/${getObjectEndpoint(type)}/neighbors`,
+        {
+          params: {
+            id,
+            ...newFilter,
+            sort: sorter.field,
+            order: sorter.order
+          },
+          headers: {
+            Accept: 'application/json',
+            Authorization: `Bearer ${token}`
+          }
+        }
+      )
+
+      return response.data
+    } catch (err) {
+      console.error(err)
+      showError(err, () => {
+        getObjectNeighbors(type, params)
+      })
+      return { next: null, previous: null }
+    }
+  }
+
  // Fetch table data with pagination, filtering, and sorting
  const fetchObjectsByProperty = async (type, params = {}) => {
    const { filter = {}, properties = [], masterFilter = {} } = params
@ -2177,6 +2230,7 @@ const ApiServerProvider = ({ children }) => {
        subscribeToModelStats,
        fetchObject,
        fetchObjects,
+        getObjectNeighbors,
        fetchObjectsByProperty,
        searchObjects,
        fetchSpotlightData,