Enhance Loading State in Dashboard Components

- Added a loading spinner to various components including InvoiceInfo, PaymentInfo, TaxRecordInfo, and others to improve user experience during data fetching.
- Integrated Spin component from Ant Design with a LoadingOutlined icon to visually indicate loading states for notes sections across multiple dashboard components.
- Ensured consistent loading behavior across all relevant components, enhancing overall responsiveness and user feedback.

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -92,10 +92,6 @@ const InvoiceInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -273,9 +269,14 @@ const InvoiceInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={invoiceId} type='invoice' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -85,10 +85,6 @@ const PaymentInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -208,9 +204,14 @@ const PaymentInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={paymentId} type='payment' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -77,10 +78,6 @@ const TaxRecordInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -191,9 +188,14 @@ const TaxRecordInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={taxRecordId} type='taxRecord' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import ObjectForm from '../../common/ObjectForm'
 import ObjectInfo from '../../common/ObjectInfo'
@@ -226,9 +227,14 @@ const FilamentStockInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={filamentStockId} type='filamentStock' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -78,10 +78,6 @@ const OrderItemInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -197,9 +193,14 @@ const OrderItemInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={orderItemId} type='orderItem' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -246,9 +246,14 @@ const PartStockInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={partStockId} type='partStock' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -98,10 +98,6 @@ const ProductStockInfo = () => {
       objectFormRef?.current.handleUpdate()
       return true
     },
-    delete: () => {
-      objectFormRef?.current.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -280,9 +276,14 @@ const ProductStockInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={productStockId} type='productStock' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -103,10 +103,6 @@ const PurchaseOrderInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -313,9 +309,14 @@ const PurchaseOrderInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={purchaseOrderId} type='purchaseOrder' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Modal, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -96,10 +96,6 @@ const PurchaseOrderInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    },
     newOrderItem: () => {
       setNewOrderItemOpen(true)
       return true
@@ -274,9 +270,14 @@ const PurchaseOrderInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={purchaseOrderId} type='purchaseOrder' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -88,10 +88,6 @@ const ShipmentInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -233,9 +229,14 @@ const ShipmentInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={shipmentId} type='shipment' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -202,9 +202,14 @@ const StockAuditInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={stockAuditId} type='stockAudit' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -200,9 +200,14 @@ const StockLocationInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={stockLocationId} type='stockLocation' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
 import NotesPanel from '../../common/NotesPanel.jsx'
@@ -88,10 +88,6 @@ const StockTransferInfo = () => {
       objectFormRef?.current.handleUpdate()
       return true
     },
-    delete: () => {
-      objectFormRef?.current.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -231,9 +227,14 @@ const StockTransferInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={stockTransferId} type='stockTransfer' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -79,10 +80,6 @@ const CourierServiceInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -193,9 +190,14 @@ const CourierServiceInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={courierServiceId} type='courierService' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -75,10 +76,6 @@ const CourierInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -210,9 +207,14 @@ const CourierInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={courierId} type='courier' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -191,9 +191,14 @@ const DocumentJobInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={documentJobId} type='documentJob' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -99,7 +99,7 @@ const DocumentPrinterInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='documentPrinter'
-              pageName='info'
+                pageName='info'
                 id={documentPrinterId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}
@@ -204,9 +204,14 @@ const DocumentPrinterInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
-                <NotesPanel _id={documentPrinterId} type='documentPrinter' />
+                spinning={objectFormState.loading}
-              </Card>
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
+                  <NotesPanel _id={documentPrinterId} type='documentPrinter' />
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse
@@ -224,10 +229,10 @@ const DocumentPrinterInfo = () => {
                 <ObjectTable
                   type='auditLog'
                   masterFilter={{
-                      parent:
+                    parent:
-                        getModelByName('documentPrinter').prefix +
+                      getModelByName('documentPrinter').prefix +
-                        ':' +
+                      ':' +
-                        documentPrinterId
+                      documentPrinterId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -192,9 +192,14 @@ const DocumentSizeInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={documentSizeId} type='documentSize' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useState, useRef, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card } from 'antd'
+import { Space, Flex, Card, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
@@ -173,9 +174,14 @@ const DocumentTemplateDesign = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={documentTemplateId} type='documentTemplate' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
         </Flex>
       </ScrollBox>

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -205,9 +205,14 @@ const DocumentTemplateInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={documentTemplateId} type='documentTemplate' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -74,10 +75,6 @@ const FilamentSkuInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -188,9 +185,14 @@ const FilamentSkuInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={filamentSkuId} type='filamentSku' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
@@ -93,10 +93,6 @@ const FilamentInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -258,9 +254,14 @@ const FilamentInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={filamentId} type='filament' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

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

@@ -1,6 +1,7 @@
 import { useContext, useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
@@ -87,10 +88,6 @@ const FileInfo = () => {
       fetchFileContent(objectFormState?.objectData, true)
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -241,9 +238,14 @@ const FileInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={fileId} type='file' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -88,10 +88,6 @@ const HostInfo = () => {
       objectFormRef?.current.handleUpdate()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -253,9 +249,14 @@ const HostInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={hostId} type='host' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -77,10 +78,6 @@ const MaterialInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -191,9 +188,14 @@ const MaterialInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={materialId} type='material' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -78,10 +78,6 @@ const NoteInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -219,9 +215,14 @@ const NoteInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={noteId} type='note' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -69,10 +70,6 @@ const PartSkuInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -183,9 +180,14 @@ const PartSkuInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={partSkuId} type='partSku' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -209,9 +210,14 @@ const PartInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={partId} type='part' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

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

@@ -81,10 +81,6 @@ const PermissionSettingInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -226,12 +222,17 @@ const PermissionSettingInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel
                   _id={permissionSettingId}
                   type='permissionSetting'
                 />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -74,10 +75,6 @@ const ProductCategoryInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -188,9 +185,14 @@ const ProductCategoryInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={productCategoryId} type='productCategory' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -75,10 +76,6 @@ const ProductSkuInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -215,9 +212,14 @@ const ProductSkuInfo = () => {
                 onToggle={(expanded) => updateCollapseState('notes', expanded)}
                 collapseKey='notes'
               >
-                <Card>
+                <Spin
+                  spinning={objectFormState.loading}
+                  indicator={<LoadingOutlined />}
+                >
+                  <Card>
                   <NotesPanel _id={productSkuId} type='productSku' />
-                </Card>
+                  </Card>
+                </Spin>
               </InfoCollapse>
               <InfoCollapse
                 title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -216,9 +217,14 @@ const ProductInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={productId} type='product' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -74,10 +75,6 @@ const TaxRateInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -188,9 +185,14 @@ const TaxRateInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={taxRateId} type='taxRate' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -81,10 +81,6 @@ const UserGroupInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -242,9 +238,14 @@ const UserGroupInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={userGroupId} type='userGroup' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

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

@@ -259,9 +259,14 @@ const UserInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={userId} type='user' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -74,10 +75,6 @@ const VendorInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -188,9 +185,14 @@ const VendorInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={vendorId} type='vendor' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import ActionHandler from '../../common/ActionHandler'
 import AuditLogIcon from '../../../Icons/AuditLogIcon'
@@ -112,10 +112,6 @@ const FilamentProfileInfo = () => {
       objectFormRef.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -528,9 +524,14 @@ const FilamentProfileInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={filamentProfileId} type='filamentProfile' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -225,9 +225,14 @@ const GCodeFileInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={gcodeFileId} type='gcodeFile' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card } from 'antd'
+import { Space, Flex, Card, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
@@ -143,9 +144,14 @@ const GCodeFilePreview = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={gcodeFileId} type='gcodeFile' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
         </Flex>
       </ScrollBox>

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -219,9 +219,14 @@ const JobInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={jobId} type='job' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import ActionHandler from '../../common/ActionHandler'
 import AuditLogIcon from '../../../Icons/AuditLogIcon'
@@ -90,10 +90,6 @@ const PrinterProfileInfo = () => {
       objectFormRef.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -379,9 +375,14 @@ const PrinterProfileInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={printerProfileId} type='printerProfile' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

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

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useContext, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card, Splitter, Divider } from 'antd'
+import { Space, Flex, Card, Splitter, Divider, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
@@ -620,9 +621,14 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={printerId} type='printer' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
           </Flex>
         </ScrollBox>

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -239,9 +239,14 @@ const PrinterInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={printerId} type='printer' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
@@ -198,9 +198,14 @@ const SubJobInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={subJobId} type='subJob' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -74,10 +75,6 @@ const ClientInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -188,9 +185,14 @@ const ClientInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={clientId} type='client' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -88,10 +89,6 @@ const ListingVarientInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -205,9 +202,14 @@ const ListingVarientInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={listingVarientId} type='listingVarient' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -86,10 +87,6 @@ const ListingInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -223,9 +220,14 @@ const ListingInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={listingId} type='listing' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

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

@@ -1,6 +1,7 @@
 import { useContext, useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, message, Space } from 'antd'
+import { Card, Flex, message, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -143,10 +144,6 @@ const MarketplaceInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    },
     connect: () => {
       startAuthorization()
       return true
@@ -269,9 +266,14 @@ const MarketplaceInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={marketplaceId} type='marketplace' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

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

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card } from 'antd'
+import { Space, Flex, Card, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -101,10 +101,6 @@ const SalesOrderInfo = () => {
       objectFormRef?.current?.handleUpdate?.()
       return true
     },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
   }
 
   return (
@@ -311,9 +307,14 @@ const SalesOrderInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={salesOrderId} type='salesOrder' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/common/ActionHandler.jsx

@@ -16,7 +16,9 @@ const ActionHandler = forwardRef(
   ) => {
     const location = useLocation()
     const navigate = useNavigate()
-    const action = new URLSearchParams(location.search).get(actionParam)
+    const searchParams = new URLSearchParams(location.search)
+    const action = searchParams.get(actionParam)
+    const actionObjectType = searchParams.get('actionObjectType')
 
     // Ref to track last executed action
     const lastExecutedAction = useRef(null)
@@ -44,6 +46,7 @@ const ActionHandler = forwardRef(
       if (
         loading == false &&
         action &&
+        !actionObjectType &&
         actions[action] &&
         lastExecutedAction.current !== action
       ) {
@@ -71,6 +74,7 @@ const ActionHandler = forwardRef(
     }, [
       loading,
       action,
+      actionObjectType,
       actions,
       actionParam,
       clearAfterExecute,

src/components/Dashboard/common/DeleteObject.jsx

@@ -0,0 +1,76 @@
+import { useState, useContext } from 'react'
+import PropTypes from 'prop-types'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { ApiServerContext } from '../context/ApiServerContext'
+import { useMessageContext } from '../context/MessageContext'
+import { useActions } from '../context/ActionsContext'
+import { getModelByName } from '../../../database/ObjectModels'
+import MessageDialogView from './MessageDialogView.jsx'
+import BinIcon from '../../Icons/BinIcon'
+
+const capitalizeFirstLetter = (value) => {
+  return String(value).charAt(0).toUpperCase() + String(value).slice(1)
+}
+
+const DeleteObject = ({ onOk, objectData, objectType: objectTypeProp }) => {
+  const [deleteLoading, setDeleteLoading] = useState(false)
+  const { deleteObject } = useContext(ApiServerContext)
+  const { showSuccess, showError } = useMessageContext()
+  const { currentObjectType } = useActions()
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  const objectType =
+    objectTypeProp ||
+    new URLSearchParams(location.search).get('actionObjectType') ||
+    currentObjectType
+
+  const model = objectType ? getModelByName(objectType) : null
+  const modelLabel = model?.label || 'object'
+  const objectName =
+    objectData?.name || objectData?._reference || objectData?._id
+
+  const handleDelete = async () => {
+    if (!objectData?._id || !objectType) return
+    setDeleteLoading(true)
+    try {
+      await deleteObject(objectData._id, objectType)
+      showSuccess(
+        `${capitalizeFirstLetter(modelLabel.toLowerCase())} deleted successfully!`
+      )
+      const onInfoPage = model?.url && location.pathname === `${model.url}/info`
+      if (onInfoPage) {
+        navigate(model.url)
+      } else {
+        onOk()
+      }
+    } catch (error) {
+      console.error('Error deleting object:', error)
+      showError(`Failed to delete ${modelLabel.toLowerCase()}.`)
+    } finally {
+      setDeleteLoading(false)
+    }
+  }
+
+  return (
+    <MessageDialogView
+      icon={<BinIcon />}
+      title={`Are you sure you want to delete this ${modelLabel.toLowerCase()}?`}
+      description={
+        objectName ? `This will permanently delete ${objectName}.` : undefined
+      }
+      onOk={handleDelete}
+      okText='Delete'
+      okLoading={deleteLoading}
+      danger
+    />
+  )
+}
+
+DeleteObject.propTypes = {
+  onOk: PropTypes.func.isRequired,
+  objectData: PropTypes.object,
+  objectType: PropTypes.string
+}
+
+export default DeleteObject

src/components/Dashboard/common/DeleteObjectModal.jsx

@@ -1,58 +0,0 @@
-import PropTypes from 'prop-types'
-import { Modal, Button, Space, Typography } from 'antd'
-import { getModelByName } from '../../../database/ObjectModels'
-import BinIcon from '../../Icons/BinIcon'
-
-const { Text } = Typography
-
-const DeleteObjectModal = ({ open, onOk, onCancel, loading, objectType }) => {
-  const model = getModelByName(objectType)
-  return (
-    <Modal
-      open={open}
-      title={
-        <Space size={'middle'}>
-          <BinIcon />
-          {`Confirm Delete ${model.label}`}
-        </Space>
-      }
-      onOk={onOk}
-      onCancel={onCancel}
-      okText='Delete'
-      cancelText='Cancel'
-      okType='danger'
-      closable={false}
-      centered
-      maskClosable={false}
-      footer={[
-        <Button key='cancel' onClick={onCancel} disabled={loading}>
-          Cancel
-        </Button>,
-        <Button
-          key='delete'
-          type='primary'
-          danger
-          onClick={onOk}
-          loading={loading}
-          disabled={loading}
-        >
-          Delete
-        </Button>
-      ]}
-    >
-      <Text>
-        Are you sure you want to delete this {model.label.toLowerCase()}?
-      </Text>
-    </Modal>
-  )
-}
-
-DeleteObjectModal.propTypes = {
-  open: PropTypes.bool.isRequired,
-  onOk: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  loading: PropTypes.bool,
-  objectType: PropTypes.string.isRequired
-}
-
-export default DeleteObjectModal

src/components/Dashboard/common/MessageDialogView.jsx

@@ -10,7 +10,8 @@ const MessageDialogView = ({
   description,
   onOk,
   okText,
-  okLoading
+  okLoading,
+  danger = false
 }) => {
   return (
     <Flex vertical gap={'middle'}>
@@ -20,7 +21,12 @@ const MessageDialogView = ({
       </Flex>
       {description && <Text>{description}</Text>}
       <Flex justify={'end'}>
-        <Button type='primary' onClick={onOk} loading={okLoading}>
+        <Button
+          type='primary'
+          danger={danger}
+          onClick={onOk}
+          loading={okLoading}
+        >
           {okText || 'OK'}
         </Button>
       </Flex>
@@ -34,7 +40,8 @@ MessageDialogView.propTypes = {
   description: PropTypes.node,
   onOk: PropTypes.func.isRequired,
   okText: PropTypes.string,
-  okLoading: PropTypes.bool
+  okLoading: PropTypes.bool,
+  danger: PropTypes.bool
 }
 
 export default MessageDialogView

src/components/Dashboard/common/NewObjectForm.jsx

@@ -3,6 +3,7 @@ import { Form } from 'antd'
 import { ApiServerContext } from '../context/ApiServerContext'
 import { useMessageContext } from '../context/MessageContext'
 import PropTypes from 'prop-types'
+import merge from 'lodash/merge'
 import mergeWith from 'lodash/mergeWith'
 import set from 'lodash/set'
 import { getModelByName } from '../../../database/ObjectModels'
@@ -18,6 +19,16 @@ const buildObjectFromEntries = (entries = []) => {
   }, {})
 }
 
+const applyComputedEntries = (base, entries = []) => {
+  const result = merge({}, base || {})
+  entries.forEach((entry) => {
+    const { namePath, value } = entry || {}
+    if (!Array.isArray(namePath) || value === undefined) return
+    set(result, namePath, value)
+  })
+  return result
+}
+
 const arrayReplaceCustomizer = (objValue, srcValue, key) => {
   if (Array.isArray(srcValue)) {
     return srcValue
@@ -172,12 +183,9 @@ const NewObjectForm = ({ type, style, defaultValues = {}, children }) => {
     if (Object.keys(defaultValues).length > 0) {
       // Calculate computed values for initial data
       const computedEntries = calculateComputedValues(defaultValues, model)
-      const computedValuesObject = buildObjectFromEntries(computedEntries)
+      const initialFormData = applyComputedEntries(
-      const initialFormData = mergeWith(
-        {},
         defaultValues,
-        computedValuesObject,
+        computedEntries
-        arrayReplaceCustomizer
       )
       form.setFieldsValue(initialFormData)
       setObjectData((prev) =>
@@ -196,12 +204,9 @@ const NewObjectForm = ({ type, style, defaultValues = {}, children }) => {
     try {
       setSubmitLoading(true)
       const computedEntries = calculateComputedValues(objectData, model)
-      const computedValuesObject = buildObjectFromEntries(computedEntries)
+      const computedObjectData = applyComputedEntries(
-      const computedObjectData = mergeWith(
-        {},
         objectData,
-        computedValuesObject,
+        computedEntries
-        arrayReplaceCustomizer
       )
       const newObject = await createObject(type, computedObjectData)
       showSuccess('Object created successfully')
@@ -253,14 +258,7 @@ const NewObjectForm = ({ type, style, defaultValues = {}, children }) => {
           })
         }
 
-        // Merge all values (user input + computed values)
+        const allValues = applyComputedEntries(allFormValues, computedEntries)
-        const computedValuesObject = buildObjectFromEntries(computedEntries)
-        const allValues = mergeWith(
-          {},
-          allFormValues,
-          computedValuesObject,
-          arrayReplaceCustomizer
-        )
         setObjectData((prev) => {
           return mergeWith({}, prev, allValues, arrayReplaceCustomizer)
         })

src/components/Dashboard/common/ObjectChildTable.jsx

@@ -64,7 +64,7 @@ const ObjectChildTable = ({
   additionalColumns = [],
   emptyText = 'No items',
   isEditing = false,
-  value = [],
+  value,
   rollups = [],
   onChange,
   hiddenPropertyWidth = '300px',
@@ -159,10 +159,13 @@ const ObjectChildTable = ({
     )
   }, [columns, properties])
 
-  // When used inside antd Form.Item without Form.List, `value` will be the controlled array.
+  // Form.Item may not have hydrated yet; fall back to objectData the same way
+  // rollups already do.
   const itemsSource = useMemo(() => {
-    return value ?? []
+    if (Array.isArray(value)) return value
-  }, [value])
+    if (name && Array.isArray(objectData?.[name])) return objectData[name]
+    return []
+  }, [value, name, objectData])
 
   const handleRemoveItem = useCallback(
     (record, index) => {
@@ -265,12 +268,11 @@ const ObjectChildTable = ({
           <ObjectProperty
             {...property}
             longId={false}
+            inTable={true}
             objectData={record}
             parentData={objectData}
             isEditing={isEditing}
             useFormItem={false}
-            name={undefined}
-            value={record[property.name]}
             onChange={handleCellChange}
           />
         )
@@ -384,10 +386,7 @@ const ObjectChildTable = ({
   const rollupDataSource = useMemo(() => {
     if (!rollups || rollups.length === 0) return []
 
-    // Use value from form/props, or fall back to objectData when entering edit mode
+    const itemsForRollup = itemsSource
-    // (form may not have populated the field yet)
-    const itemsForRollup =
-      value ?? (name && objectData ? objectData[name] : null) ?? []
 
     // Build parent object with children array for rollup functions (e.g. objectData.parts)
     const updatedObjectData = { ...objectData }
@@ -420,7 +419,7 @@ const ObjectChildTable = ({
     })
 
     return [summaryRow]
-  }, [properties, rollups, objectData, value, name])
+  }, [properties, rollups, objectData, itemsSource, name])
 
   const rollupColumns = useMemo(() => {
     const propertyColumns = resolvedProperties.map((property, index) => {
@@ -634,7 +633,8 @@ const ObjectChildTable = ({
             setMinimalModelOpen(true)
           }}
         >
-          {value?.length || 0} {value?.length == 1 ? 'item' : 'items'}
+          {itemsSource?.length || 0}{' '}
+          {itemsSource?.length == 1 ? 'item' : 'items'}
         </Link>
         <Modal
           open={minimalModelOpen}

src/components/Dashboard/common/ObjectForm.jsx

@@ -11,7 +11,6 @@ import { Form } from 'antd'
 import { ApiServerContext } from '../context/ApiServerContext'
 import { AuthContext } from '../context/AuthContext'
 import { useMessageContext } from '../context/MessageContext'
-import DeleteObjectModal from './DeleteObjectModal'
 import merge from 'lodash/merge'
 import mergeWith from 'lodash/mergeWith'
 import set from 'lodash/set'
@@ -79,6 +78,19 @@ const buildObjectFromEntries = (entries = []) => {
   }, {})
 }
 
+// Patch computed fields onto a full object. Building them as a sparse tree and
+// merge-replacing arrays would wipe stored child-row fields (shipment, amount,
+// etc.) while leaving calculated columns intact.
+const applyComputedEntries = (base, entries = []) => {
+  const result = merge({}, base || {})
+  entries.forEach((entry) => {
+    const { namePath, value } = entry || {}
+    if (!Array.isArray(namePath) || value === undefined) return
+    set(result, namePath, value)
+  })
+  return result
+}
+
 const getEditDisabled = (model, objectData, userProfile) => {
   if (model?.readOnly === true) {
     return true
@@ -144,12 +156,9 @@ const ObjectForm = forwardRef(
     const [form] = Form.useForm()
     const formUpdateValues = Form.useWatch([], form)
     const { showSuccess, showError } = useMessageContext()
-    const [deleteModalOpen, setDeleteModalOpen] = useState(false)
-    const [deleteLoading, setDeleteLoading] = useState(false)
     const {
       fetchObject,
       updateObject,
-      deleteObject,
       setObjectActivity,
       clearObjectActivity,
       fetchObjectActivities,
@@ -356,12 +365,9 @@ const ObjectForm = forwardRef(
             serverObjectData.current,
             model
           )
-          const computedValuesObject = buildObjectFromEntries(computedEntries)
+          const resetFormData = applyComputedEntries(
-          const resetFormData = mergeWith(
-            {},
             serverObjectData.current,
-            computedValuesObject,
+            computedEntries
-            arrayReplaceCustomizer
           )
           setIsEditing(false)
           isEditingRef.current = false
@@ -498,13 +504,7 @@ const ObjectForm = forwardRef(
 
         // Calculate and set computed values on initial load
         const computedEntries = calculateComputedValues(data, model)
-        const computedValuesObject = buildObjectFromEntries(computedEntries)
+        const initialFormData = applyComputedEntries(data, computedEntries)
-        const initialFormData = mergeWith(
-          {},
-          data,
-          computedValuesObject,
-          arrayReplaceCustomizer
-        )
         setObjectData({ ...initialFormData, _isEditing: isEditingRef.current })
         form.setFieldsValue(initialFormData)
         setFetchLoading(false)
@@ -703,17 +703,11 @@ const ObjectForm = forwardRef(
         setIsEditing(true)
 
         const computedEntries = calculateComputedValues(objectData, model)
-        const computedValuesObject = buildObjectFromEntries(computedEntries)
-        setObjectData((prev) => ({
-          ...prev,
-          ...computedValuesObject,
-          _isEditing: true
-        }))
         const nextObjectData = {
-          ...objectData,
+          ...applyComputedEntries(objectData, computedEntries),
-          ...computedValuesObject,
           _isEditing: true
         }
+        setObjectData(nextObjectData)
         onStateChangeRef.current({
           isEditing: true,
           objectData: nextObjectData,
@@ -779,34 +773,10 @@ const ObjectForm = forwardRef(
       onStateChangeRef.current({ editLoading: false })
     }
 
-    const handleDelete = () => {
-      setDeleteModalOpen(true)
-    }
-
-    const confirmDelete = async () => {
-      setDeleteLoading(true)
-      try {
-        await deleteObject(id, type)
-        setDeleteModalOpen(false)
-        showSuccess(`${getModelMessageLabel(type)} deleted successfully!`)
-        navigate(-2)
-        // Optionally: trigger a callback to parent to remove this object from view
-      } catch (err) {
-        console.error(err)
-        showError(
-          `Failed to delete ${getModelMessageLabel(type).toLowerCase()}.`
-        )
-      } finally {
-        setDeleteLoading(false)
-      }
-    }
-
     useImperativeHandle(ref, () => ({
       startEditing,
       cancelEditing,
       handleUpdate,
-      handleDelete,
-      confirmDelete,
       handleFetchObject,
       editLoading,
       fetchLoading,
@@ -817,14 +787,6 @@ const ObjectForm = forwardRef(
 
     return (
       <>
-        <DeleteObjectModal
-          open={deleteModalOpen}
-          onOk={confirmDelete}
-          onCancel={() => setDeleteModalOpen(false)}
-          loading={deleteLoading}
-          objectType={type}
-          objectName={objectData?.name || objectData?.label || ''}
-        />
         <Form
           form={form}
           layout='vertical'
@@ -868,12 +830,9 @@ const ObjectForm = forwardRef(
               })
             }
 
-            const computedValuesObject = buildObjectFromEntries(computedEntries)
+            const mergedFormValues = applyComputedEntries(
-            const mergedFormValues = mergeWith(
-              {},
               allFormValues,
-              computedValuesObject,
+              computedEntries
-              arrayReplaceCustomizer
             )
 
             mergedFormValues._isEditing = isEditingRef.current
@@ -902,8 +861,7 @@ const ObjectForm = forwardRef(
             editLoading,
             editDisabled: getEditDisabled(model, objectData, userProfile),
             activities,
-            handleFetchObject,
+            handleFetchObject
-            handleDelete
           })}
         </Form>
       </>

src/components/Dashboard/common/ObjectTable.jsx

@@ -460,6 +460,7 @@ const ObjectTable = forwardRef(
                   disabled={disabled || objectData?.isSkeleton}
                   type={'text'}
                   size={'small'}
+                  danger={action?.danger || false}
                   onClick={() => {
                     if (denied) return
                     if (

src/components/Dashboard/context/ActionsContext.jsx

@@ -174,10 +174,9 @@ const ActionsProvider = ({ children }) => {
 
   const [modalCentered, setModalCentered] = useState(false)
   useEffect(() => {
-    if (resolvedModalAction?.modalCentered !== undefined) {
+    if (!resolvedModalAction) return
-      setModalCentered(resolvedModalAction.modalCentered)
+    setModalCentered(resolvedModalAction.modalCentered === true)
-    }
+  }, [resolvedModalAction])
-  }, [resolvedModalAction?.modalCentered])
 
   const modalContentData =
     modalAction?.type === 'alias'

src/database/models/Client.js

@@ -6,6 +6,9 @@ const ClientInfo = lazy(
 const NewClient = lazy(
   () => import('../../components/Dashboard/Sales/Clients/NewClient')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ClientIcon from '../../components/Icons/ClientIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -84,11 +87,15 @@ export const Client = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/Courier.js

@@ -6,6 +6,9 @@ const CourierInfo = lazy(
 const NewCourier = lazy(
   () => import('../../components/Dashboard/Management/Couriers/NewCourier')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import CourierIcon from '../../components/Icons/CourierIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -84,11 +87,15 @@ export const Courier = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/CourierService.js

@@ -6,6 +6,9 @@ const CourierServiceInfo = lazy(
 const NewCourierService = lazy(
   () => import('../../components/Dashboard/Management/CourierServices/NewCourierService')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import CourierServiceIcon from '../../components/Icons/CourierServiceIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -84,11 +87,15 @@ export const CourierService = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/Filament.js

@@ -6,6 +6,9 @@ const FilamentInfo = lazy(
 const NewFilament = lazy(
   () => import('../../components/Dashboard/Management/Filaments/NewFilament')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import EditIcon from '../../components/Icons/EditIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
@@ -95,13 +98,17 @@ export const Filament = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
       danger: true,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
       }
     }
   ],

src/database/models/FilamentProfile.js

@@ -7,6 +7,9 @@ const FilamentProfileInfo = lazy(
 const NewFilamentProfile = lazy(
   () => import('../../components/Dashboard/Production/FilamentProfiles/NewFilamentProfile')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import FilamentProfileIcon from '../../components/Icons/FilamentProfileIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -85,12 +88,16 @@ export const FilamentProfile = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       row: true,
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/FilamentSku.js

@@ -6,6 +6,9 @@ const FilamentSkuInfo = lazy(
 const NewFilamentSku = lazy(
   () => import('../../components/Dashboard/Management/FilamentSkus/NewFilamentSku')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import FilamentSkuIcon from '../../components/Icons/FilamentSkuIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -84,11 +87,15 @@ export const FilamentSku = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/File.js

@@ -3,6 +3,9 @@ import { createElement, lazy } from 'react'
 const FileInfo = lazy(
   () => import('../../components/Dashboard/Management/Files/FileInfo')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import DownloadIcon from '../../components/Icons/DownloadIcon'
 import FileIcon from '../../components/Icons/FileIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -78,11 +81,15 @@ export const File = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/Host.js

@@ -9,6 +9,9 @@ const NewHost = lazy(
 const HostOTP = lazy(
   () => import('../../components/Dashboard/Management/Hosts/HostOtp')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import HostIcon from '../../components/Icons/HostIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -100,11 +103,15 @@ export const Host = {
     },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/Invoice.js

@@ -12,6 +12,9 @@ const PostInvoice = lazy(
 const AcknowledgeInvoice = lazy(
   () => import('../../components/Dashboard/Finance/Invoices/AcknowledgeInvoice')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import InvoiceIcon from '../../components/Icons/InvoiceIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -92,8 +95,9 @@ export const Invoice = {
     },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
       danger: true,
@@ -102,6 +106,9 @@ export const Invoice = {
       },
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
       }
     },
     { type: 'divider' },

src/database/models/Job.js

@@ -9,6 +9,9 @@ const NewJob = lazy(
 const DeployJob = lazy(
   () => import('../../components/Dashboard/Production/Jobs/DeployJob')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import JobIcon from '../../components/Icons/JobIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -90,8 +93,9 @@ export const Job = {
     },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
       danger: true,
@@ -100,6 +104,9 @@ export const Job = {
       },
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
       }
     },
     { type: 'divider' },

src/database/models/Listing.js

@@ -12,6 +12,9 @@ const PublishListing = lazy(
 const UnpublishListing = lazy(
   () => import('../../components/Dashboard/Sales/Listings/UnpublishListing')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ListingIcon from '../../components/Icons/ListingIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -126,11 +129,15 @@ export const Listing = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/ListingVarient.js

@@ -12,6 +12,9 @@ const PublishListingVarient = lazy(
 const UnpublishListingVarient = lazy(
   () => import('../../components/Dashboard/Sales/ListingVarients/UnpublishListingVarient')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ListingVarientIcon from '../../components/Icons/ListingVarientIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -118,11 +121,15 @@ export const ListingVarient = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/Marketplace.js

@@ -12,6 +12,9 @@ const SyncListings = lazy(
 const SyncOrders = lazy(
   () => import('../../components/Dashboard/Sales/Marketplaces/SyncOrders')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import MarketplaceIcon from '../../components/Icons/MarketplaceIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -154,11 +157,15 @@ export const Marketplace = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/Material.js

@@ -6,6 +6,9 @@ const MaterialInfo = lazy(
 const NewMaterial = lazy(
   () => import('../../components/Dashboard/Management/Materials/NewMaterial')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import MaterialIcon from '../../components/Icons/MaterialIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -84,11 +87,15 @@ export const Material = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/OrderItem.js

@@ -6,6 +6,9 @@ const OrderItemInfo = lazy(
 const NewOrderItem = lazy(
   () => import('../../components/Dashboard/Inventory/OrderItems/NewOrderItem')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import OrderItemIcon from '../../components/Icons/OrderItemIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -31,7 +34,11 @@ export const OrderItem = {
       label: 'New Order Item',
       icon: PlusIcon,
       content: (objectData, { onOk } = {}) => {
-        return createElement(NewOrderItem, { defaultValues: objectData, onOk, reset: true })
+        return createElement(NewOrderItem, {
+          defaultValues: objectData,
+          onOk,
+          reset: true
+        })
       }
     },
     {
@@ -86,9 +93,11 @@ export const OrderItem = {
     },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
+      row: true,
       icon: BinIcon,
       danger: true,
       visible: (objectData) => {
@@ -96,6 +105,9 @@ export const OrderItem = {
       },
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
       }
     }
   ],

src/database/models/PartSku.js

@@ -6,6 +6,9 @@ const PartSkuInfo = lazy(
 const NewPartSku = lazy(
   () => import('../../components/Dashboard/Management/PartSkus/NewPartSku')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PartSkuIcon from '../../components/Icons/PartSkuIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -84,11 +87,15 @@ export const PartSku = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/Payment.js

@@ -18,6 +18,9 @@ const DeclinePayment = lazy(
 const CancelPayment = lazy(
   () => import('../../components/Dashboard/Finance/Payments/CancelPayment')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PaymentIcon from '../../components/Icons/PaymentIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -98,8 +101,9 @@ export const Payment = {
     },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
       danger: true,
@@ -108,6 +112,9 @@ export const Payment = {
       },
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
       }
     },
     { type: 'divider' },

src/database/models/PermissionSetting.js

@@ -7,6 +7,9 @@ const PermissionSettingInfo = lazy(
 const NewPermissionSetting = lazy(
   () => import('../../components/Dashboard/Management/PermissionSettings/NewPermissionSetting')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PermissionSettingIcon from '../../components/Icons/PermissionSettingIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -86,11 +89,15 @@ export const PermissionSetting = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/PrinterProfile.js

@@ -6,6 +6,9 @@ const PrinterProfileInfo = lazy(
 const NewPrinterProfile = lazy(
   () => import('../../components/Dashboard/Production/PrinterProfiles/NewPrinterProfile')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PrinterProfileIcon from '../../components/Icons/PrinterProfileIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -349,12 +352,16 @@ export const PrinterProfile = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       row: true,
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/ProductCategory.js

@@ -6,6 +6,9 @@ const ProductCategoryInfo = lazy(
 const NewProductCategory = lazy(
   () => import('../../components/Dashboard/Management/ProductCategories/NewProductCategory')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ProductCategoryIcon from '../../components/Icons/ProductCategoryIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -85,11 +88,15 @@ export const ProductCategory = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/ProductSku.js

@@ -6,6 +6,9 @@ const ProductSkuInfo = lazy(
 const NewProductSku = lazy(
   () => import('../../components/Dashboard/Management/ProductSkus/NewProductSku')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ProductSkuIcon from '../../components/Icons/ProductSkuIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -84,11 +87,15 @@ export const ProductSku = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/ProductStock.js

@@ -9,6 +9,9 @@ const NewProductStock = lazy(
 const PostProductStock = lazy(
   () => import('../../components/Dashboard/Inventory/ProductStocks/PostProductStock')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ProductStockIcon from '../../components/Icons/ProductStockIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import { getModelByName } from '../ObjectModels.js'
@@ -90,8 +93,9 @@ export const ProductStock = {
     },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
       danger: true,
@@ -100,6 +104,9 @@ export const ProductStock = {
       },
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
       }
     },
     { type: 'divider' },

src/database/models/PurchaseOrder.js

@@ -15,6 +15,9 @@ const AcknowledgePurchaseOrder = lazy(
 const CancelPurchaseOrder = lazy(
   () => import('../../components/Dashboard/Inventory/PurchaseOrders/CancelPurchaseOrder')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PurchaseOrderIcon from '../../components/Icons/PurchaseOrderIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -95,8 +98,9 @@ export const PurchaseOrder = {
     },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
       danger: true,
@@ -105,6 +109,9 @@ export const PurchaseOrder = {
       },
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
       }
     },
     { type: 'divider' },

src/database/models/SalesOrder.js

@@ -15,6 +15,9 @@ const ConfirmSalesOrder = lazy(
 const CancelSalesOrder = lazy(
   () => import('../../components/Dashboard/Sales/SalesOrders/CancelSalesOrder')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import SalesOrderIcon from '../../components/Icons/SalesOrderIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -95,8 +98,9 @@ export const SalesOrder = {
     },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
       danger: true,
@@ -105,6 +109,9 @@ export const SalesOrder = {
       },
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
       }
     },
     { type: 'divider' },

src/database/models/Shipment.js

@@ -15,6 +15,9 @@ const ReceiveShipment = lazy(
 const CancelShipment = lazy(
   () => import('../../components/Dashboard/Inventory/Shipments/CancelShipment')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ShipmentIcon from '../../components/Icons/ShipmentIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -95,8 +98,9 @@ export const Shipment = {
     },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
       danger: true,
@@ -105,6 +109,9 @@ export const Shipment = {
       },
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
       }
     },
     { type: 'divider' },

src/database/models/StockTransfer.js

@@ -9,6 +9,9 @@ const NewStockTransfer = lazy(
 const PostStockTransfer = lazy(
   () => import('../../components/Dashboard/Inventory/StockTransfers/PostStockTransfer')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import StockTransferIcon from '../../components/Icons/StockTransferIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -89,8 +92,9 @@ export const StockTransfer = {
     },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
       danger: true,
@@ -99,6 +103,9 @@ export const StockTransfer = {
       },
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
       }
     },
     { type: 'divider' },

src/database/models/TaxRate.js

@@ -6,6 +6,9 @@ const TaxRateInfo = lazy(
 const NewTaxRate = lazy(
   () => import('../../components/Dashboard/Management/TaxRates/NewTaxRate')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import TaxRateIcon from '../../components/Icons/TaxRateIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -84,11 +87,15 @@ export const TaxRate = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/TaxRecord.js

@@ -6,6 +6,9 @@ const TaxRecordInfo = lazy(
 const NewTaxRecord = lazy(
   () => import('../../components/Dashboard/Finance/TaxRecords/NewTaxRecord')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import TaxRecordIcon from '../../components/Icons/TaxRecordIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -84,11 +87,15 @@ export const TaxRecord = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/UserGroup.js

@@ -6,6 +6,9 @@ const UserGroupInfo = lazy(
 const NewUserGroup = lazy(
   () => import('../../components/Dashboard/Management/UserGroups/NewUserGroup')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PersonGroupIcon from '../../components/Icons/PersonGroupIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -85,11 +88,15 @@ export const UserGroup = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [

src/database/models/Vendor.js

@@ -6,6 +6,9 @@ const VendorInfo = lazy(
 const NewVendor = lazy(
   () => import('../../components/Dashboard/Management/Vendors/NewVendor')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import VendorIcon from '../../components/Icons/VendorIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -84,11 +87,15 @@ export const Vendor = {
     { type: 'divider' },
     {
       name: 'delete',
-      type: 'page',
+      type: 'modal',
-      pageName: 'info',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Delete',
       icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
     }
   ],
   pages: [