Add keyboard shortcuts to ObjectTableNavigationButtons for enhanced navigation

- Integrated KeyboardShortcut component to allow navigation using 'ALT + LEFT' and 'ALT + RIGHT' key combinations. - Updated button handlers to trigger navigation actions based on keyboard shortcuts, improving user experience and accessibility. - Ensured that navigation is only triggered when the buttons are not disabled and the relevant neighbors exist.
Refactor KeyboardShortcut component for improved key handling and logging
2026-08-01 14:00:45 +01:00 · 2026-08-01 14:00:40 +01:00 · 2026-08-01 13:36:29 +01:00
46 changed files with 227 additions and 138 deletions
--- a/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
+++ b/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
@ -170,7 +170,7 @@ const InvoiceInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={invoiceId}
              objectType='invoice'
              showEndingDivider={true}
--- a/src/components/Dashboard/Finance/Payments/PaymentInfo.jsx
+++ b/src/components/Dashboard/Finance/Payments/PaymentInfo.jsx
@ -163,7 +163,7 @@ const PaymentInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={paymentId}
              objectType='payment'
              showEndingDivider={true}
--- a/src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx
+++ b/src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx
@ -123,11 +123,13 @@ const TaxRecordInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={taxRecordId}
              objectType='taxRecord'
              showEndingDivider={true}
--- a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
@ -127,7 +127,7 @@ const FilamentStockInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={filamentStockId}
              objectType='filamentStock'
              showEndingDivider={true}
--- a/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
+++ b/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
@ -122,11 +122,13 @@ const OrderItemInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={orderItemId}
              objectType='orderItem'
              showEndingDivider={true}
--- a/src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx
@ -137,7 +137,7 @@ const PartStockInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={partStockId}
              objectType='partStock'
              showEndingDivider={true}
--- a/src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx
@ -164,7 +164,7 @@ const ProductStockInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={productStockId}
              objectType='productStock'
              showEndingDivider={true}
--- a/src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx
+++ b/src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx
@ -197,7 +197,7 @@ const PurchaseOrderInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={purchaseOrderId}
              objectType='purchaseOrder'
              showEndingDivider={true}
--- a/src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx
+++ b/src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx
@ -158,11 +158,13 @@ const PurchaseOrderInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={purchaseOrderId}
              objectType='purchaseOrder'
              showEndingDivider={true}
--- a/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
+++ b/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
@ -147,11 +147,13 @@ const ShipmentInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={shipmentId}
              objectType='shipment'
              showEndingDivider={true}
--- a/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
@ -125,11 +125,13 @@ const StockAuditInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={stockAuditId}
              objectType='stockAudit'
              showEndingDivider={true}
--- a/src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx
@ -126,11 +126,13 @@ const StockLocationInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={stockLocationId}
              objectType='stockLocation'
              showEndingDivider={true}
--- a/src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx
@ -152,7 +152,7 @@ const StockTransferInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={stockTransferId}
              objectType='stockTransfer'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/AppPasswords/AppPasswordInfo.jsx
+++ b/src/components/Dashboard/Management/AppPasswords/AppPasswordInfo.jsx
@ -134,7 +134,7 @@ const AppPasswordInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={appPasswordId}
              objectType='appPassword'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx
+++ b/src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx
@ -125,11 +125,13 @@ const CourierServiceInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={courierServiceId}
              objectType='courierService'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/Couriers/CourierInfo.jsx
+++ b/src/components/Dashboard/Management/Couriers/CourierInfo.jsx
@ -121,11 +121,13 @@ const CourierInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={courierId}
              objectType='courier'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
@ -122,11 +122,13 @@ const DocumentJobInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={documentJobId}
              objectType='documentJob'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
@ -136,7 +136,7 @@ const DocumentPrinterInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={documentPrinterId}
              objectType='documentPrinter'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
@ -128,7 +128,7 @@ const DocumentSizeInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={documentSizeId}
              objectType='documentSize'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
@ -133,7 +133,7 @@ const DocumentTemplateInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={documentTemplateId}
              objectType='documentTemplate'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx
+++ b/src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx
@ -120,11 +120,13 @@ const FilamentSkuInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={filamentSkuId}
              objectType='filamentSku'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
+++ b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
@ -141,11 +141,13 @@ const FilamentInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={filamentId}
              objectType='filament'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/Files/FileInfo.jsx
+++ b/src/components/Dashboard/Management/Files/FileInfo.jsx
@ -142,7 +142,7 @@ const FileInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={fileId}
              objectType='file'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/Hosts/HostInfo.jsx
+++ b/src/components/Dashboard/Management/Hosts/HostInfo.jsx
@ -137,11 +137,13 @@ const HostInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={hostId}
              objectType='host'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
+++ b/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
@ -123,11 +123,13 @@ const MaterialInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={materialId}
              objectType='material'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
+++ b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
@ -111,11 +111,13 @@ const NoteTypeInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={noteTypeId}
              objectType='noteType'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/Notes/NoteInfo.jsx
+++ b/src/components/Dashboard/Management/Notes/NoteInfo.jsx
@ -126,11 +126,13 @@ const NoteInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={noteId}
              objectType='note'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx
+++ b/src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx
@ -115,11 +115,13 @@ const PartSkuInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={partSkuId}
              objectType='partSku'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/Parts/PartInfo.jsx
+++ b/src/components/Dashboard/Management/Parts/PartInfo.jsx
@ -121,11 +121,13 @@ const PartInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={partId}
              objectType='part'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx
+++ b/src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx
@ -120,11 +120,13 @@ const ProductCategoryInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={productCategoryId}
              objectType='productCategory'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx
+++ b/src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx
@ -123,11 +123,13 @@ const ProductSkuInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={productSkuId}
              objectType='productSku'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/Products/ProductInfo.jsx
+++ b/src/components/Dashboard/Management/Products/ProductInfo.jsx
@ -121,11 +121,13 @@ const ProductInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={productId}
              objectType='product'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx
+++ b/src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx
@ -120,11 +120,13 @@ const TaxRateInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={taxRateId}
              objectType='taxRate'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/Users/UserInfo.jsx
+++ b/src/components/Dashboard/Management/Users/UserInfo.jsx
@ -126,11 +126,13 @@ const UserInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={userId}
              objectType='user'
              showEndingDivider={true}
--- a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
+++ b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
@ -120,11 +120,13 @@ const VendorInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={vendorId}
              objectType='vendor'
              showEndingDivider={true}
--- a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
+++ b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
@ -129,11 +129,13 @@ const GCodeFileInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={gcodeFileId}
              objectType='gcodeFile'
              showEndingDivider={true}
--- a/src/components/Dashboard/Production/Jobs/JobInfo.jsx
+++ b/src/components/Dashboard/Production/Jobs/JobInfo.jsx
@ -147,7 +147,7 @@ const JobInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={jobId}
              objectType='job'
              showEndingDivider={true}
--- a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
+++ b/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
@ -137,7 +137,7 @@ const PrinterInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={printerId}
              objectType='printer'
              showEndingDivider={true}
--- a/src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx
+++ b/src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx
@ -117,7 +117,7 @@ const SubJobInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={subJobId}
              objectType='subJob'
              showEndingDivider={true}
--- a/src/components/Dashboard/Sales/Clients/ClientInfo.jsx
+++ b/src/components/Dashboard/Sales/Clients/ClientInfo.jsx
@ -120,11 +120,13 @@ const ClientInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={clientId}
              objectType='client'
              showEndingDivider={true}
--- a/src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx
+++ b/src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx
@ -137,11 +137,13 @@ const ListingVarientInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={listingVarientId}
              objectType='listingVarient'
              showEndingDivider={true}
--- a/src/components/Dashboard/Sales/Listings/ListingInfo.jsx
+++ b/src/components/Dashboard/Sales/Listings/ListingInfo.jsx
@ -142,11 +142,13 @@ const ListingInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={listingId}
              objectType='listing'
              showEndingDivider={true}
--- a/src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx
+++ b/src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx
@ -210,11 +210,13 @@ const MarketplaceInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.beingEditedByOther || objectFormState.loading}
+              disabled={
+                objectFormState.beingEditedByOther || objectFormState.loading
+              }
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={marketplaceId}
              objectType='marketplace'
              showEndingDivider={true}
--- a/src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx
+++ b/src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx
@ -194,7 +194,7 @@ const SalesOrderInfo = () => {
              loading={objectFormState.editLoading}
            />
            <ObjectTableNavigationButtons
-              disabled={objectFormState.loading}
+              disabled={objectFormState.loading || objectFormState.isEditing}
              _id={salesOrderId}
              objectType='salesOrder'
              showEndingDivider={true}
--- a/src/components/Dashboard/common/KeyboardShortcut.jsx
+++ b/src/components/Dashboard/common/KeyboardShortcut.jsx
@ -1,62 +1,76 @@
-import { useEffect, useRef, cloneElement, useCallback } from 'react'
+import { useEffect, useRef, cloneElement, useMemo, useState } from 'react'
 import PropTypes from 'prop-types'
 import { Popover, Typography } from 'antd'

-// Utility to parse shortcut string like 'cmd+shift+p' or 'ctrl+s'
+const MODIFIER_ALIASES = {
+  cmd: 'meta',
+  meta: 'meta',
+  ctrl: 'control',
+  control: 'control',
+  alt: 'alt',
+  option: 'alt',
+  shift: 'shift'
+}
+
 function parseShortcut(shortcut) {
-  const parts = shortcut.toLowerCase().split('+')
-  return {
-    meta: parts.includes('cmd') || parts.includes('meta') || false,
-    ctrl: parts.includes('ctrl') || parts.includes('control') || false,
-    alt: parts.includes('alt') || parts.includes('option') || false,
-    shift: parts.includes('shift') || false,
-    key: parts.find(
-      (p) =>
-        !['cmd', 'meta', 'ctrl', 'control', 'alt', 'option', 'shift'].includes(
-          p
-        )
-    )[0]
+  return shortcut
+    .toLowerCase()
+    .split('+')
+    .map((part) => MODIFIER_ALIASES[part] ?? part)
+}
+
+function getPressedKey(event) {
+  if (
+    event.key === 'Meta' ||
+    event.key === 'Control' ||
+    event.key === 'Alt' ||
+    event.key === 'Shift'
+  ) {
+    return event.key.toLowerCase()
  }
+  if (event.code) {
+    const code = event.code.toLowerCase()
+    if (code.startsWith('key')) {
+      return code.slice(3)
+    }
+    return code
+  }
+  return null
 }

 const { Text } = Typography

-const KeyboardShortcut = ({ shortcut, children, hint, onTrigger }) => {
+const KeyboardShortcut = ({
+  shortcut,
+  children,
+  hint,
+  onTrigger,
+  log = false
+}) => {
  const childRef = useRef()
-  const shortcutObj = parseShortcut(shortcut)
-
-  // Helper to get the set of keys required for the shortcut
-  const getShortcutKeySet = useCallback((shortcutObj) => {
-    const keys = []
-    if (shortcutObj.meta) keys.push('Meta')
-    if (shortcutObj.ctrl) keys.push('Control')
-    if (shortcutObj.alt) keys.push('Alt')
-    if (shortcutObj.shift) keys.push('Shift')
-    // shortcutObj.code is like 'keyp', so extract the last char
-    if (shortcutObj.key) {
-      keys.push('Key' + shortcutObj.key.toUpperCase())
-    }
-    return new Set(keys)
-  }, [])
-
-  const shortcutKeySet = getShortcutKeySet(shortcutObj)
+  const pressedKeysRef = useRef(new Set())
+  const shortcutKeys = useMemo(() => parseShortcut(shortcut), [shortcut])
+  const [pressedKeys, setPressedKeys] = useState([])

  useEffect(() => {
-    const pressedKeys = new Set()
+    const syncPressedKeys = () => {
+      setPressedKeys([...pressedKeysRef.current])
+    }
+
    const handleKeyDown = (event) => {
-      if (
-        event.key === 'Meta' ||
-        event.key === 'Control' ||
-        event.key === 'Alt' ||
-        event.key === 'Shift'
-      ) {
-        pressedKeys.add(event.key)
-      } else if (event.code && event.code.startsWith('Key')) {
-        pressedKeys.add(event.code)
+      const key = getPressedKey(event)
+      if (key) {
+        pressedKeysRef.current.add(key)
+        syncPressedKeys()
      }
+
+      if (log) {
+        console.log('Key Down:', key, 'Pressed Keys:', [...pressedKeysRef.current])
+      }
+
      if (
-        shortcutKeySet.size &&
-        [...shortcutKeySet].every((k) => pressedKeys.has(k))
+        shortcutKeys.length &&
+        shortcutKeys.every((k) => pressedKeysRef.current.has(k))
      ) {
        if (typeof onTrigger === 'function') {
          onTrigger(event)
@ -64,27 +78,24 @@ const KeyboardShortcut = ({ shortcut, children, hint, onTrigger }) => {
        event.preventDefault()
      }
    }
+
    const handleKeyUp = (event) => {
-      if (
-        event.key === 'Meta' ||
-        event.key === 'Control' ||
-        event.key === 'Alt' ||
-        event.key === 'Shift'
-      ) {
-        pressedKeys.delete(event.key)
-      } else if (event.code && event.code.startsWith('Key')) {
-        pressedKeys.delete(event.key.toUpperCase())
+      const key = getPressedKey(event)
+      if (key) {
+        pressedKeysRef.current.delete(key)
+        syncPressedKeys()
      }
    }
+
    window.addEventListener('keydown', handleKeyDown)
    window.addEventListener('keyup', handleKeyUp)
+
    return () => {
      window.removeEventListener('keydown', handleKeyDown)
      window.removeEventListener('keyup', handleKeyUp)
    }
-  }, [shortcut, shortcutObj, onTrigger, shortcutKeySet])
+  }, [shortcutKeys, onTrigger, log])

-  // Clone the child to attach a ref
  const element = cloneElement(children, { ref: childRef })

  if (hint) {
@ -108,7 +119,8 @@ KeyboardShortcut.propTypes = {
  shortcut: PropTypes.string.isRequired, // e.g. 'cmd+shift+p'
  onTrigger: PropTypes.func.isRequired,
  children: PropTypes.element.isRequired,
-  hint: PropTypes.string // Optional, e.g. '⌘ ⇧ P'
+  hint: PropTypes.string, // Optional, e.g. '⌘ ⇧ P'
+  log: PropTypes.bool // Optional, e.g. true
 }

 export default KeyboardShortcut
--- a/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx
+++ b/src/components/Dashboard/common/ObjectTableNavigationButtons.jsx
@ -7,6 +7,7 @@ import PropTypes from 'prop-types'
 import { ApiServerContext } from '../context/ApiServerContext'
 import { AuthContext } from '../context/AuthContext'
 import { useTableStatePersistence } from '../context/TableStateContext'
+import KeyboardShortcut from './KeyboardShortcut.jsx'

 const ObjectTableNavigationButtons = ({
  disabled,
@ -95,16 +96,36 @@ const ObjectTableNavigationButtons = ({
        <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}
-        />
+        <KeyboardShortcut
+          shortcut='alt+arrowleft'
+          hint='ALT LEFT'
+          onTrigger={useCallback(() => {
+            if (!disabled && !loading && neighbors.previous?._id) {
+              handlePrevious()
+            }
+          }, [disabled, loading, neighbors.previous?._id])}
+        >
+          <Button
+            icon={<ArrowLeftIcon />}
+            onClick={handlePrevious}
+            disabled={disabled || loading || !neighbors.previous?._id}
+          />
+        </KeyboardShortcut>
+        <KeyboardShortcut
+          shortcut='alt+arrowright'
+          hint='ALT RIGHT'
+          onTrigger={useCallback(() => {
+            if (!disabled && !loading && neighbors.next?._id) {
+              handleNext()
+            }
+          }, [disabled, loading, neighbors.next?._id])}
+        >
+          <Button
+            icon={<ArrowRightIcon />}
+            onClick={handleNext}
+            disabled={disabled || loading || !neighbors.next?._id}
+          />
+        </KeyboardShortcut>
      </Space>
    </Flex>
  )