Refactor finance and inventory components to enhance modal handling and state management

- Integrated useEffect hooks in InvoiceInfo, PaymentInfo, and other components to utilize ActionsContext for managing modal states.
- Removed unused modal states and related code to streamline component logic.
- Added setCurrentObject prop to various components for improved object handling during state changes.
- Enhanced overall code maintainability and readability by consolidating modal logic and reducing redundancy.

src/App.jsx

@@ -18,6 +18,7 @@ import {
   ElectronSpotlightContentPage
 } from './components/Dashboard/context/SpotlightContext.jsx'
 import { ActionsModalProvider } from './components/Dashboard/context/ActionsModalContext.jsx'
+import { ActionsProvider } from './components/Dashboard/context/ActionsContext.jsx'
 import MissingPlaceholder from './components/Dashboard/common/MissingPlaceholder.jsx'
 
 import {
@@ -46,7 +47,8 @@ import {
   FinanceRoutes,
   SalesRoutes,
   ManagementRoutes,
-  DeveloperRoutes
+  DeveloperRoutes,
+  ModelRoutes
 } from './routes'
 
 const getRouter = () => {
@@ -83,86 +85,89 @@ const AppContent = () => {
               <PrintServerProvider>
                 <ApiServerProvider>
                   <MessageProvider>
-                    <AppUpdateProvider>
+                    <TableStateProvider>
-                      <NotificationProvider>
+                      <AppUpdateProvider>
-                        <SpotlightProvider>
+                        <NotificationProvider>
-                          <ActionsModalProvider>
+                          <SpotlightProvider>
-                            <TableStateProvider>
+                            <ActionsModalProvider>
-                              <Routes>
+                              <ActionsProvider>
-                                <Route
+                                <Routes>
-                                  path='/applaunch'
+                                  <Route
-                                  element={<AuthLaunch />}
+                                    path='/applaunch'
-                                />
+                                    element={<AuthLaunch />}
-                                <Route
+                                  />
-                                  path='/dashboard/electron/spotlightcontent'
+                                  <Route
-                                  element={
+                                    path='/dashboard/electron/spotlightcontent'
-                                    <PrivateRoute
+                                    element={
-                                      component={() => (
+                                      <PrivateRoute
-                                        <ElectronSpotlightContentPage />
+                                        component={() => (
-                                      )}
+                                          <ElectronSpotlightContentPage />
-                                    />
+                                        )}
-                                  }
+                                      />
-                                />
+                                    }
-                                <Route
+                                  />
-                                  path='/'
+                                  <Route
-                                  element={
+                                    path='/'
-                                    <PrivateRoute
+                                    element={
-                                      component={() => (
+                                      <PrivateRoute
-                                        <Navigate
+                                        component={() => (
-                                          to='/dashboard/production/overview'
+                                          <Navigate
-                                          replace
+                                            to='/dashboard/production/overview'
-                                        />
+                                            replace
-                                      )}
+                                          />
-                                    />
+                                        )}
-                                  }
+                                      />
-                                />
+                                    }
-                                <Route
+                                  />
-                                  path='/auth/callback'
+                                  <Route
-                                  element={<AuthCallback />}
+                                    path='/auth/callback'
-                                />
+                                    element={<AuthCallback />}
-                                <Route
+                                  />
-                                  path='/auth/marketplace/callback'
+                                  <Route
-                                  element={<MarketplaceAuthCallback />}
+                                    path='/auth/marketplace/callback'
-                                />
+                                    element={<MarketplaceAuthCallback />}
-                                <Route
+                                  />
-                                  path='/email/notification'
+                                  <Route
-                                  element={<EmailNotificationTemplate />}
+                                    path='/email/notification'
-                                />
+                                    element={<EmailNotificationTemplate />}
-                                <Route
+                                  />
-                                  path='/slicer'
+                                  <Route
-                                  element={<SlicerIntegration />}
+                                    path='/slicer'
-                                />
+                                    element={<SlicerIntegration />}
+                                  />
 
-                                <Route
+                                  <Route
-                                  path='/dashboard'
+                                    path='/dashboard'
-                                  element={
+                                    element={
-                                    <PrivateRoute
+                                      <PrivateRoute
-                                      component={() => <Dashboard />}
+                                        component={() => <Dashboard />}
-                                    />
+                                      />
-                                  }
+                                    }
-                                >
+                                  >
-                                  {ProductionRoutes}
+                                    {ProductionRoutes}
-                                  {InventoryRoutes}
+                                    {InventoryRoutes}
-                                  {FinanceRoutes}
+                                    {FinanceRoutes}
-                                  {SalesRoutes}
+                                    {SalesRoutes}
-                                  {ManagementRoutes}
+                                    {ManagementRoutes}
-                                  {DeveloperRoutes}
+                                    {ModelRoutes}
-                                </Route>
+                                    {DeveloperRoutes}
-                                <Route
+                                  </Route>
-                                  path='*'
+                                  <Route
-                                  element={
+                                    path='*'
-                                    <AppError
+                                    element={
-                                      message='Error 404. Page not found.'
+                                      <AppError
-                                      showRefresh={false}
+                                        message='Error 404. Page not found.'
-                                    />
+                                        showRefresh={false}
-                                  }
+                                      />
-                                />
+                                    }
-                              </Routes>
+                                  />
-                            </TableStateProvider>
+                                </Routes>
-                          </ActionsModalProvider>
+                              </ActionsProvider>
-                        </SpotlightProvider>
+                            </ActionsModalProvider>
-                      </NotificationProvider>
+                          </SpotlightProvider>
-                    </AppUpdateProvider>
+                        </NotificationProvider>
+                      </AppUpdateProvider>
+                    </TableStateProvider>
                   </MessageProvider>
                 </ApiServerProvider>
               </PrintServerProvider>

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -19,6 +19,7 @@ import EditButtons from '../../common/EditButtons.jsx'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -31,9 +32,6 @@ import {
 } from '../../../../database/ObjectModels.js'
 import OrderItemIcon from '../../../Icons/OrderItemIcon.jsx'
 import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
-import PostInvoice from './PostInvoice.jsx'
-import AcknowledgeInvoice from './AcknowledgeInvoice.jsx'
-import NewPayment from '../Payments/NewPayment.jsx'
 
 const log = loglevel.getLogger('InvoiceInfo')
 log.setLevel(config.logLevel)
@@ -42,6 +40,15 @@ const InvoiceInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const invoiceId = new URLSearchParams(location.search).get('invoiceId')
   const [collapseState, updateCollapseState] = useCollapseState('InvoiceInfo', {
     info: true,
@@ -60,9 +67,6 @@ const InvoiceInfo = () => {
     loading: false,
     objectData: {}
   })
-  const [postInvoiceOpen, setPostInvoiceOpen] = useState(false)
-  const [acknowledgeInvoiceOpen, setAcknowledgeInvoiceOpen] = useState(false)
-  const [newPaymentOpen, setNewPaymentOpen] = useState(false)
 
   const actions = {
     edit: () => {
@@ -81,18 +85,6 @@ const InvoiceInfo = () => {
       objectFormRef?.current?.handleDelete?.()
       return true
     },
-    post: () => {
-      setPostInvoiceOpen(true)
-      return true
-    },
-    acknowledge: () => {
-      setAcknowledgeInvoiceOpen(true)
-      return true
-    },
-    newPayment: () => {
-      setNewPaymentOpen(true)
-      return true
-    }
   }
 
   const editDisabled =
@@ -101,7 +93,6 @@ const InvoiceInfo = () => {
       ?.disabled(objectFormState.objectData) ?? false
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -190,6 +181,7 @@ const InvoiceInfo = () => {
                 type='invoice'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}
@@ -306,65 +298,6 @@ const InvoiceInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={postInvoiceOpen}
-        onCancel={() => {
-          setPostInvoiceOpen(false)
-        }}
-        width={500}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <PostInvoice
-          onOk={() => {
-            setPostInvoiceOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={acknowledgeInvoiceOpen}
-        onCancel={() => {
-          setAcknowledgeInvoiceOpen(false)
-        }}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <AcknowledgeInvoice
-          onOk={() => {
-            setAcknowledgeInvoiceOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={newPaymentOpen}
-        styles={{ content: { paddingBottom: '24px' } }}
-        footer={null}
-        width={800}
-        onCancel={() => {
-          setNewPaymentOpen(false)
-        }}
-        destroyOnHidden={true}
-      >
-        <NewPayment
-          onOk={() => {
-            setNewPaymentOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          reset={newPaymentOpen}
-          defaultValues={{
-            invoice: { ...objectFormState.objectData },
-            amount: objectFormState.objectData?.grandTotalAmount
-          }}
-        />
-      </Modal>
-    </>
   )
 }
 

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -17,6 +17,7 @@ import EditButtons from '../../common/EditButtons.jsx'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -24,10 +25,6 @@ import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import { getModelByName } from '../../../../database/ObjectModels.js'
-import PostPayment from './PostPayment.jsx'
-import AuthorisePayment from './AuthorisePayment.jsx'
-import DeclinePayment from './DeclinePayment.jsx'
-import CancelPayment from './CancelPayment.jsx'
 
 const log = loglevel.getLogger('PaymentInfo')
 log.setLevel(config.logLevel)
@@ -36,6 +33,15 @@ const PaymentInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const paymentId = new URLSearchParams(location.search).get('paymentId')
   const [collapseState, updateCollapseState] = useCollapseState('PaymentInfo', {
     info: true,
@@ -51,10 +57,6 @@ const PaymentInfo = () => {
     loading: false,
     objectData: {}
   })
-  const [postPaymentOpen, setPostPaymentOpen] = useState(false)
-  const [authorisePaymentOpen, setAuthorisePaymentOpen] = useState(false)
-  const [declinePaymentOpen, setDeclinePaymentOpen] = useState(false)
-  const [cancelPaymentOpen, setCancelPaymentOpen] = useState(false)
 
   const actions = {
     edit: () => {
@@ -73,22 +75,6 @@ const PaymentInfo = () => {
       objectFormRef?.current?.handleDelete?.()
       return true
     },
-    post: () => {
-      setPostPaymentOpen(true)
-      return true
-    },
-    authorise: () => {
-      setAuthorisePaymentOpen(true)
-      return true
-    },
-    decline: () => {
-      setDeclinePaymentOpen(true)
-      return true
-    },
-    cancel: () => {
-      setCancelPaymentOpen(true)
-      return true
-    }
   }
 
   const editDisabled =
@@ -97,7 +83,6 @@ const PaymentInfo = () => {
       ?.disabled(objectFormState.objectData) ?? false
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -183,6 +168,7 @@ const PaymentInfo = () => {
                 type='payment'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}
@@ -244,79 +230,6 @@ const PaymentInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={postPaymentOpen}
-        onCancel={() => {
-          setPostPaymentOpen(false)
-        }}
-        width={500}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <PostPayment
-          onOk={() => {
-            setPostPaymentOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={authorisePaymentOpen}
-        onCancel={() => {
-          setAuthorisePaymentOpen(false)
-        }}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <AuthorisePayment
-          onOk={() => {
-            setAuthorisePaymentOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={declinePaymentOpen}
-        onCancel={() => {
-          setDeclinePaymentOpen(false)
-        }}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <DeclinePayment
-          onOk={() => {
-            setDeclinePaymentOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={cancelPaymentOpen}
-        onCancel={() => {
-          setCancelPaymentOpen(false)
-        }}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <CancelPayment
-          onOk={() => {
-            setCancelPaymentOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-    </>
   )
 }
 

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

@@ -155,6 +155,7 @@ const TaxRecordInfo = () => {
                   type='taxRecord'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -153,6 +153,7 @@ const FilamentStockInfo = () => {
                   type='filamentStock'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -215,6 +215,7 @@ const LoadFilamentStock = ({
               showBed={false}
               showMoreInfo={false}
               id={loadFilamentStockFormValues.printer._id}
+              offline={!connected}
             />
           ) : null}
         </Flex>

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

@@ -175,6 +175,7 @@ const UnloadFilamentStock = ({ onOk, reset, printer = null }) => {
               showBed={false}
               showMoreInfo={false}
               id={unloadFilamentStockFormValues.printer._id}
+              offline={!connected}
             />
           ) : null}
         </Flex>

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

@@ -148,6 +148,7 @@ const OrderItemInfo = () => {
                 type='orderItem'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}

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

@@ -164,6 +164,7 @@ const PartStockInfo = () => {
                   type='partStock'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -14,7 +14,6 @@ import {
   getModelProperty,
   getModelByName
 } from '../../../../database/ObjectModels.js'
-import PostProductStock from './PostProductStock.jsx'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
@@ -26,6 +25,7 @@ import EditButtons from '../../common/EditButtons.jsx'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -41,10 +41,18 @@ const ProductStockInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const productStockId = new URLSearchParams(location.search).get(
     'productStockId'
   )
-  const [postProductStockOpen, setPostProductStockOpen] = useState(false)
   const [collapseState, updateCollapseState] = useCollapseState(
     'ProductStockInfo',
     {
@@ -83,10 +91,6 @@ const ProductStockInfo = () => {
       objectFormRef?.current.handleDelete?.()
       return true
     },
-    post: () => {
-      setPostProductStockOpen(true)
-      return true
-    }
   }
 
   const editDisabled =
@@ -95,7 +99,6 @@ const ProductStockInfo = () => {
       ?.disabled(objectFormState.objectData) ?? false
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -184,6 +187,7 @@ const ProductStockInfo = () => {
                 type='productStock'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}
@@ -302,25 +306,6 @@ const ProductStockInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={postProductStockOpen}
-        onCancel={() => {
-          setPostProductStockOpen(false)
-        }}
-        width={500}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <PostProductStock
-          onOk={() => {
-            setPostProductStockOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-    </>
   )
 }
 

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -17,6 +17,7 @@ import EditButtons from '../../common/EditButtons.jsx'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -24,16 +25,10 @@ import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import OrderItemsIcon from '../../../Icons/OrderItemIcon.jsx'
-import NewOrderItem from '../OrderItems/NewOrderItem.jsx'
-import NewShipment from '../Shipments/NewShipment.jsx'
-import PostPurchaseOrder from './PostPurchaseOrder.jsx'
-import AcknowledgePurchaseOrder from './AcknowledgePurchaseOrder.jsx'
-import CancelPurchaseOrder from './CancelPurchaseOrder.jsx'
 import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
 import InvoiceIcon from '../../../Icons/InvoiceIcon.jsx'
 import StockEventIcon from '../../../Icons/StockEventIcon.jsx'
 import { getModelByName } from '../../../../database/ObjectModels.js'
-import NewInvoice from '../../Finance/Invoices/NewInvoice.jsx'
 
 const log = loglevel.getLogger('PurchaseOrderInfo')
 log.setLevel(config.logLevel)
@@ -44,13 +39,15 @@ const PurchaseOrderInfo = () => {
   const orderItemsTableRef = useRef(null)
   const shipmentsTableRef = useRef(null)
   const actionHandlerRef = useRef(null)
-  const [newOrderItemOpen, setNewOrderItemOpen] = useState(false)
+
-  const [newShipmentOpen, setNewShipmentOpen] = useState(false)
+
-  const [postPurchaseOrderOpen, setPostPurchaseOrderOpen] = useState(false)
+  const { setOnModalOk } = useActions()
-  const [acknowledgePurchaseOrderOpen, setAcknowledgePurchaseOrderOpen] =
+  useEffect(() => {
-    useState(false)
+    setOnModalOk(() => () => {
-  const [cancelPurchaseOrderOpen, setCancelPurchaseOrderOpen] = useState(false)
+      objectFormRef.current?.handleFetchObject?.()
-  const [newInvoiceOpen, setNewInvoiceOpen] = useState(false)
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const purchaseOrderId = new URLSearchParams(location.search).get(
     'purchaseOrderId'
   )
@@ -96,30 +93,6 @@ const PurchaseOrderInfo = () => {
       objectFormRef?.current?.handleDelete?.()
       return true
     },
-    newOrderItem: () => {
-      setNewOrderItemOpen(true)
-      return true
-    },
-    newShipment: () => {
-      setNewShipmentOpen(true)
-      return true
-    },
-    newInvoice: () => {
-      setNewInvoiceOpen(true)
-      return true
-    },
-    post: () => {
-      setPostPurchaseOrderOpen(true)
-      return true
-    },
-    acknowledge: () => {
-      setAcknowledgePurchaseOrderOpen(true)
-      return true
-    },
-    cancel: () => {
-      setCancelPurchaseOrderOpen(true)
-      return true
-    }
   }
 
   const editDisabled = getModelByName('purchaseOrder')
@@ -127,7 +100,6 @@ const PurchaseOrderInfo = () => {
     .disabled(objectFormState.objectData)
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -217,6 +189,7 @@ const PurchaseOrderInfo = () => {
                 type='purchaseOrder'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}
@@ -361,122 +334,6 @@ const PurchaseOrderInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={newOrderItemOpen}
-        onCancel={() => {
-          setNewOrderItemOpen(false)
-        }}
-        width={800}
-        footer={null}
-        destroyOnHidden={true}
-      >
-        <NewOrderItem
-          onOk={() => {
-            setNewOrderItemOpen(false)
-          }}
-          reset={newOrderItemOpen}
-          defaultValues={{
-            order: { _id: purchaseOrderId },
-            orderType: 'purchaseOrder',
-            syncAmount: 'itemCost'
-          }}
-        />
-      </Modal>
-      <Modal
-        open={newShipmentOpen}
-        onCancel={() => {
-          setNewShipmentOpen(false)
-        }}
-        width={800}
-        footer={null}
-        destroyOnHidden={true}
-      >
-        <NewShipment
-          onOk={() => {
-            setNewShipmentOpen(false)
-          }}
-          reset={newShipmentOpen}
-          defaultValues={{
-            orderType: 'purchaseOrder',
-            order: { _id: purchaseOrderId }
-          }}
-        />
-      </Modal>
-      <Modal
-        open={newInvoiceOpen}
-        onCancel={() => {
-          setNewInvoiceOpen(false)
-        }}
-        width={800}
-        footer={null}
-        destroyOnHidden={true}
-      >
-        <NewInvoice
-          onOk={() => {
-            setNewInvoiceOpen(false)
-          }}
-          reset={newInvoiceOpen}
-          defaultValues={{
-            orderType: 'purchaseOrder',
-            order: { ...objectFormState.objectData }
-          }}
-        />
-      </Modal>
-      <Modal
-        open={postPurchaseOrderOpen}
-        onCancel={() => {
-          setPostPurchaseOrderOpen(false)
-        }}
-        width={500}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <PostPurchaseOrder
-          onOk={() => {
-            setPostPurchaseOrderOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={acknowledgePurchaseOrderOpen}
-        onCancel={() => {
-          setAcknowledgePurchaseOrderOpen(false)
-        }}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <AcknowledgePurchaseOrder
-          onOk={() => {
-            setAcknowledgePurchaseOrderOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={cancelPurchaseOrderOpen}
-        onCancel={() => {
-          setCancelPurchaseOrderOpen(false)
-        }}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <CancelPurchaseOrder
-          onOk={() => {
-            setCancelPurchaseOrderOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-    </>
   )
 }
 

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

@@ -184,6 +184,7 @@ const PurchaseOrderInfo = () => {
                 type='purchaseOrder'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -17,6 +17,7 @@ import EditButtons from '../../common/EditButtons.jsx'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -24,9 +25,6 @@ import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import OrderItemIcon from '../../../Icons/OrderItemIcon.jsx'
-import ShipShipment from './ShipShipment.jsx'
-import ReceiveShipment from './ReceiveShipment.jsx'
-import CancelShipment from './CancelShipment.jsx'
 
 const log = loglevel.getLogger('ShipmentInfo')
 log.setLevel(config.logLevel)
@@ -35,6 +33,15 @@ const ShipmentInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const shipmentId = new URLSearchParams(location.search).get('shipmentId')
   const [collapseState, updateCollapseState] = useCollapseState(
     'ShipmentInfo',
@@ -53,10 +60,6 @@ const ShipmentInfo = () => {
     loading: false,
     objectData: {}
   })
-
-  const [shipShipmentOpen, setShipShipmentOpen] = useState(false)
-  const [receiveShipmentOpen, setReceiveShipmentOpen] = useState(false)
-  const [cancelShipmentOpen, setCancelShipmentOpen] = useState(false)
   const actions = {
     edit: () => {
       objectFormRef?.current?.startEditing?.()
@@ -74,22 +77,9 @@ const ShipmentInfo = () => {
       objectFormRef?.current?.handleDelete?.()
       return true
     },
-    ship: () => {
-      setShipShipmentOpen(true)
-      return true
-    },
-    receive: () => {
-      setReceiveShipmentOpen(true)
-      return true
-    },
-    cancel: () => {
-      setCancelShipmentOpen(true)
-      return true
-    }
   }
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -173,6 +163,7 @@ const ShipmentInfo = () => {
                 type='shipment'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}
@@ -256,61 +247,6 @@ const ShipmentInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={shipShipmentOpen}
-        onCancel={() => {
-          setShipShipmentOpen(false)
-        }}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <ShipShipment
-          onOk={() => {
-            setShipShipmentOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={receiveShipmentOpen}
-        onCancel={() => {
-          setReceiveShipmentOpen(false)
-        }}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <ReceiveShipment
-          onOk={() => {
-            setReceiveShipmentOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={cancelShipmentOpen}
-        onCancel={() => {
-          setCancelShipmentOpen(false)
-        }}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <CancelShipment
-          onOk={() => {
-            setCancelShipmentOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-    </>
   )
 }
 

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

@@ -158,6 +158,7 @@ const StockAuditInfo = () => {
                   type='stockAudit'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -159,6 +159,7 @@ const StockLocationInfo = () => {
                   type='stockLocation'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
 import NotesPanel from '../../common/NotesPanel.jsx'
@@ -12,7 +12,6 @@ import {
   getModelProperty,
   getModelByName
 } from '../../../../database/ObjectModels.js'
-import PostStockTransfer from './PostStockTransfer.jsx'
 import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
@@ -22,6 +21,7 @@ import EditButtons from '../../common/EditButtons.jsx'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -33,10 +33,18 @@ const StockTransferInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const stockTransferId = new URLSearchParams(location.search).get(
     'stockTransferId'
   )
-  const [postOpen, setPostOpen] = useState(false)
   const [collapseState, updateCollapseState] = useCollapseState(
     'StockTransferInfo',
     {
@@ -73,10 +81,6 @@ const StockTransferInfo = () => {
       objectFormRef?.current.handleDelete?.()
       return true
     },
-    post: () => {
-      setPostOpen(true)
-      return true
-    }
   }
 
   const editDisabled =
@@ -85,7 +89,6 @@ const StockTransferInfo = () => {
       ?.disabled(objectFormState.objectData) ?? false
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -172,6 +175,7 @@ const StockTransferInfo = () => {
                 type='stockTransfer'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}
@@ -253,25 +257,6 @@ const StockTransferInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={postOpen}
-        onCancel={() => {
-          setPostOpen(false)
-        }}
-        width={520}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <PostStockTransfer
-          onOk={() => {
-            setPostOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-    </>
   )
 }
 

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

@@ -1,6 +1,6 @@
-import { useRef, useState, useContext } from 'react'
+import { useRef, useState, useEffect, useContext } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Flex, Modal, Space } from 'antd'
+import { Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -13,13 +13,13 @@ import EditButtons from '../../common/EditButtons'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import RegenerateAppPasswordSecret from './RegenerateAppPasswordSecret.jsx'
 import { getModelByName } from '../../../../database/ObjectModels.js'
 import { AuthContext } from '../../context/AuthContext.jsx'
 
@@ -27,11 +27,19 @@ const AppPasswordInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const { userProfile } = useContext(AuthContext)
   const appPasswordId = new URLSearchParams(location.search).get(
     'appPasswordId'
   )
-  const [regenerateSecretOpen, setRegenerateSecretOpen] = useState(false)
   const [collapseState, updateCollapseState] = useCollapseState(
     'AppPasswordInfo',
     {
@@ -49,10 +57,6 @@ const AppPasswordInfo = () => {
   })
 
   const actions = {
-    regenerateSecret: () => {
-      setRegenerateSecretOpen(true)
-      return false
-    },
     edit: () => {
       objectFormRef?.current?.startEditing?.()
       return false
@@ -72,7 +76,6 @@ const AppPasswordInfo = () => {
     .disabled({ ...objectFormState.objectData, _user: userProfile })
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -160,6 +163,7 @@ const AppPasswordInfo = () => {
                   type='appPassword'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}
@@ -198,20 +202,6 @@ const AppPasswordInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-
-      <Modal
-        open={regenerateSecretOpen}
-        destroyOnHidden={true}
-        width={650}
-        onCancel={() => {
-          actionHandlerRef.current?.clearAction?.()
-          setRegenerateSecretOpen(false)
-        }}
-        footer={null}
-      >
-        <RegenerateAppPasswordSecret id={appPasswordId} />
-      </Modal>
-    </>
   )
 }
 

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

@@ -157,6 +157,7 @@ const CourierServiceInfo = () => {
                   type='courierService'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -153,6 +153,7 @@ const CourierInfo = () => {
                   type='courier'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -154,6 +154,7 @@ const DocumentJobInfo = () => {
                   type='documentJob'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -163,6 +163,7 @@ const DocumentPrinterInfo = () => {
                   type='documentPrinter'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -154,6 +154,7 @@ const DocumentSizeInfo = () => {
                   type='documentSize'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -160,6 +160,7 @@ const DocumentTemplateInfo = () => {
                   type='documentTemplate'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -152,6 +152,7 @@ const FilamentSkuInfo = () => {
                   type='filamentSku'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -15,6 +15,7 @@ const NewFilamentSku = ({ onOk, reset, defaultValues }) => {
       }}
     >
       {({ handleSubmit, submitLoading, objectData, formValid }) => {
+        console.log('objectData', objectData)
         const steps = [
           {
             title: 'Required',

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
@@ -17,6 +17,7 @@ import EditButtons from '../../common/EditButtons'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -25,7 +26,6 @@ import FilamentSkuIcon from '../../../Icons/FilamentSkuIcon.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
-import NewFilamentSku from '../FilamentSkus/NewFilamentSku'
 
 const log = loglevel.getLogger('FilamentInfo')
 log.setLevel(config.logLevel)
@@ -35,8 +35,15 @@ const FilamentInfo = () => {
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
   const filamentId = new URLSearchParams(location.search).get('filamentId')
-  const [newFilamentSkuOpen, setNewFilamentSkuOpen] = useState(false)
   const filamentSkusTableRef = useRef()
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      filamentSkusTableRef.current?.reload?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const [collapseState, updateCollapseState] = useCollapseState(
     'FilamentInfo',
     {
@@ -58,10 +65,6 @@ const FilamentInfo = () => {
   })
 
   const actions = {
-    newFilamentSku: () => {
-      setNewFilamentSkuOpen(true)
-      return true
-    },
     edit: () => {
       objectFormRef?.current?.startEditing?.()
       return false
@@ -81,215 +84,192 @@ const FilamentInfo = () => {
   }
 
   return (
-    <>
+    <Flex
-      <Flex
+      gap='large'
-        gap='large'
+      vertical='true'
-        vertical='true'
+      style={{
-        style={{
+        maxHeight: '100%',
-          maxHeight: '100%',
+        minHeight: 0
-          minHeight: 0
+      }}
-        }}
+    >
-      >
+      <Flex justify={'space-between'}>
-        <Flex justify={'space-between'}>
+        <Space size='small'>
           <Space size='small'>
-            <Space size='small'>
+            <ObjectActions
-              <ObjectActions
+              type='filament'
-                type='filament'
+              id={filamentId}
-                id={filamentId}
+              disabled={objectFormState.loading}
-                disabled={objectFormState.loading}
+              objectData={objectFormState.objectData}
-                objectData={objectFormState.objectData}
+            />
-              />
+            <ViewButton
-              <ViewButton
+              disabled={objectFormState.loading}
-                disabled={objectFormState.loading}
+              items={[
-                items={[
+                { key: 'info', label: 'Filament Information' },
-                  { key: 'info', label: 'Filament Information' },
+                { key: 'filamentSkus', label: 'Filament SKUs' },
-                  { key: 'filamentSkus', label: 'Filament SKUs' },
+                { key: 'stocks', label: 'Filament Stocks' },
-                  { key: 'stocks', label: 'Filament Stocks' },
+                { key: 'notes', label: 'Notes' },
-                  { key: 'notes', label: 'Notes' },
+                { key: 'auditLogs', label: 'Audit Logs' }
-                  { key: 'auditLogs', label: 'Audit Logs' }
+              ]}
-                ]}
+              visibleState={collapseState}
-                visibleState={collapseState}
+              updateVisibleState={updateCollapseState}
-                updateVisibleState={updateCollapseState}
+            />
-              />
+            <UserNotifierToggle
-              <UserNotifierToggle
+              type='filament'
-                type='filament'
+              objectData={objectFormState.objectData}
-                objectData={objectFormState.objectData}
+              disabled={objectFormState.loading}
-                disabled={objectFormState.loading}
+            />
-              />
+            <DocumentPrintButton
-              <DocumentPrintButton
+              type='filament'
-                type='filament'
+              objectData={objectFormState.objectData}
-                objectData={objectFormState.objectData}
+              disabled={objectFormState.loading}
-                disabled={objectFormState.loading}
-              />
-            </Space>
-            <ActivityIndicator
-              activities={objectFormState.activities}
-              showStartingDivider={true}
             />
           </Space>
-          <Space>
+          <ActivityIndicator
-            <EditButtons
+            activities={objectFormState.activities}
-              isEditing={objectFormState.isEditing}
+            showStartingDivider={true}
-              handleUpdate={() => {
+          />
-                actionHandlerRef.current.callAction('finishEdit')
+        </Space>
-              }}
+        <Space>
-              cancelEditing={() => {
+          <EditButtons
-                actionHandlerRef.current.callAction('cancelEdit')
+            isEditing={objectFormState.isEditing}
-              }}
+            handleUpdate={() => {
-              startEditing={() => {
+              actionHandlerRef.current.callAction('finishEdit')
-                actionHandlerRef.current.callAction('edit')
+            }}
-              }}
+            cancelEditing={() => {
-              editLoading={objectFormState.editLoading}
+              actionHandlerRef.current.callAction('cancelEdit')
-              formValid={objectFormState.formValid}
+            }}
-              disabled={
+            startEditing={() => {
-                objectFormState.beingEditedByOther || objectFormState.loading
+              actionHandlerRef.current.callAction('edit')
-              }
+            }}
-              loading={objectFormState.editLoading}
+            editLoading={objectFormState.editLoading}
-            />
+            formValid={objectFormState.formValid}
-            <ObjectTableNavigationButtons
+            disabled={
-              disabled={objectFormState.loading || objectFormState.isEditing}
+              objectFormState.beingEditedByOther || objectFormState.loading
-              _id={filamentId}
+            }
-              objectType='filament'
+            loading={objectFormState.editLoading}
-              showEndingDivider={true}
+          />
-            />
+          <ObjectTableNavigationButtons
-          </Space>
+            disabled={objectFormState.loading || objectFormState.isEditing}
-        </Flex>
+            _id={filamentId}
-
+            objectType='filament'
-        <ScrollBox>
+            showEndingDivider={true}
-          <Flex vertical gap={'large'}>
+          />
-            <ActionHandler
+        </Space>
-              actions={actions}
-              loading={objectFormState.loading}
-              ref={actionHandlerRef}
-            >
-              <InfoCollapse
-                title='Filament Information'
-                icon={<InfoCircleIcon />}
-                active={collapseState.info}
-                onToggle={(expanded) => updateCollapseState('info', expanded)}
-                collapseKey='info'
-              >
-                <ObjectForm
-                  id={filamentId}
-                  type='filament'
-                  style={{ height: '100%' }}
-                  ref={objectFormRef}
-                  onStateChange={(state) => {
-                    setEditFormState((prev) => ({ ...prev, ...state }))
-                  }}
-                >
-                  {({ loading, isEditing, objectData }) => {
-                    return (
-                      <ObjectInfo
-                        loading={loading}
-                        indicator={<LoadingOutlined />}
-                        isEditing={isEditing}
-                        type='filament'
-                        objectData={objectData}
-                      />
-                    )
-                  }}
-                </ObjectForm>
-              </InfoCollapse>
-            </ActionHandler>
-
-            <InfoCollapse
-              title='Filament SKUs'
-              icon={<FilamentSkuIcon />}
-              active={collapseState.filamentSkus}
-              onToggle={(expanded) =>
-                updateCollapseState('filamentSkus', expanded)
-              }
-              collapseKey='filamentSkus'
-            >
-              {objectFormState.loading ? (
-                <InfoCollapsePlaceholder />
-              ) : (
-                <ObjectTable
-                  ref={filamentSkusTableRef}
-                  type='filamentSku'
-                  masterFilter={{ filament: filamentId }}
-                  visibleColumns={{ filament: false }}
-                />
-              )}
-            </InfoCollapse>
-
-            <InfoCollapse
-              title='Filament Stocks'
-              icon={<FilamentIcon />}
-              active={collapseState.stocks}
-              onToggle={(expanded) => updateCollapseState('stocks', expanded)}
-              collapseKey='stocks'
-            >
-              {objectFormState.loading ? (
-                <InfoCollapsePlaceholder />
-              ) : (
-                <ObjectTable
-                  type='filamentStock'
-                  masterFilter={{ filament: filamentId }}
-                  visibleColumns={{
-                    filament: false,
-                    startingWeight: false
-                  }}
-                />
-              )}
-            </InfoCollapse>
-
-            <Modal
-              open={newFilamentSkuOpen}
-              styles={{ content: { paddingBottom: '24px' } }}
-              footer={null}
-              width={700}
-              onCancel={() => setNewFilamentSkuOpen(false)}
-              destroyOnHidden={true}
-            >
-              <NewFilamentSku
-                onOk={() => {
-                  setNewFilamentSkuOpen(false)
-                  filamentSkusTableRef.current?.reload?.()
-                }}
-                reset={newFilamentSkuOpen}
-                defaultValues={{
-                  filament: objectFormState?.objectData || undefined
-                }}
-              />
-            </Modal>
-
-            <InfoCollapse
-              title='Notes'
-              icon={<NoteIcon />}
-              active={collapseState.notes}
-              onToggle={(expanded) => updateCollapseState('notes', expanded)}
-              collapseKey='notes'
-            >
-              <Card>
-                <NotesPanel _id={filamentId} type='filament' />
-              </Card>
-            </InfoCollapse>
-
-            <InfoCollapse
-              title='Audit Logs'
-              icon={<AuditLogIcon />}
-              active={collapseState.auditLogs}
-              onToggle={(expanded) =>
-                updateCollapseState('auditLogs', expanded)
-              }
-              collapseKey='auditLogs'
-            >
-              {objectFormState.loading ? (
-                <InfoCollapsePlaceholder />
-              ) : (
-                <ObjectTable
-                  type='auditLog'
-                  masterFilter={{ 'parent._id': filamentId }}
-                  visibleColumns={{ _id: false, 'parent._id': false }}
-                />
-              )}
-            </InfoCollapse>
-          </Flex>
-        </ScrollBox>
       </Flex>
-    </>
+
+      <ScrollBox>
+        <Flex vertical gap={'large'}>
+          <ActionHandler
+            actions={actions}
+            loading={objectFormState.loading}
+            ref={actionHandlerRef}
+          >
+            <InfoCollapse
+              title='Filament Information'
+              icon={<InfoCircleIcon />}
+              active={collapseState.info}
+              onToggle={(expanded) => updateCollapseState('info', expanded)}
+              collapseKey='info'
+            >
+              <ObjectForm
+                id={filamentId}
+                type='filament'
+                style={{ height: '100%' }}
+                ref={objectFormRef}
+                setCurrentObject={true}
+                onStateChange={(state) => {
+                  setEditFormState((prev) => ({ ...prev, ...state }))
+                }}
+              >
+                {({ loading, isEditing, objectData }) => {
+                  return (
+                    <ObjectInfo
+                      loading={loading}
+                      indicator={<LoadingOutlined />}
+                      isEditing={isEditing}
+                      type='filament'
+                      objectData={objectData}
+                    />
+                  )
+                }}
+              </ObjectForm>
+            </InfoCollapse>
+          </ActionHandler>
+
+          <InfoCollapse
+            title='Filament SKUs'
+            icon={<FilamentSkuIcon />}
+            active={collapseState.filamentSkus}
+            onToggle={(expanded) =>
+              updateCollapseState('filamentSkus', expanded)
+            }
+            collapseKey='filamentSkus'
+          >
+            {objectFormState.loading ? (
+              <InfoCollapsePlaceholder />
+            ) : (
+              <ObjectTable
+                ref={filamentSkusTableRef}
+                type='filamentSku'
+                masterFilter={{ filament: filamentId }}
+                visibleColumns={{ filament: false }}
+              />
+            )}
+          </InfoCollapse>
+
+          <InfoCollapse
+            title='Filament Stocks'
+            icon={<FilamentIcon />}
+            active={collapseState.stocks}
+            onToggle={(expanded) => updateCollapseState('stocks', expanded)}
+            collapseKey='stocks'
+          >
+            {objectFormState.loading ? (
+              <InfoCollapsePlaceholder />
+            ) : (
+              <ObjectTable
+                type='filamentStock'
+                masterFilter={{ filament: filamentId }}
+                visibleColumns={{
+                  filament: false,
+                  startingWeight: false
+                }}
+              />
+            )}
+          </InfoCollapse>
+
+          <InfoCollapse
+            title='Notes'
+            icon={<NoteIcon />}
+            active={collapseState.notes}
+            onToggle={(expanded) => updateCollapseState('notes', expanded)}
+            collapseKey='notes'
+          >
+            <Card>
+              <NotesPanel _id={filamentId} type='filament' />
+            </Card>
+          </InfoCollapse>
+
+          <InfoCollapse
+            title='Audit Logs'
+            icon={<AuditLogIcon />}
+            active={collapseState.auditLogs}
+            onToggle={(expanded) => updateCollapseState('auditLogs', expanded)}
+            collapseKey='auditLogs'
+          >
+            {objectFormState.loading ? (
+              <InfoCollapsePlaceholder />
+            ) : (
+              <ObjectTable
+                type='auditLog'
+                masterFilter={{ 'parent._id': filamentId }}
+                visibleColumns={{ _id: false, 'parent._id': false }}
+              />
+            )}
+          </InfoCollapse>
+        </Flex>
+      </ScrollBox>
+    </Flex>
   )
 }
 

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

@@ -168,6 +168,7 @@ const FileInfo = () => {
                   type='file'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -17,10 +17,10 @@ import EditButtons from '../../common/EditButtons.jsx'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
-import HostOTP from './HostOtp.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import PrinterIcon from '../../../Icons/PrinterIcon.jsx'
@@ -34,6 +34,15 @@ const HostInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const hostId = new URLSearchParams(location.search).get('hostId')
   const [collapseState, updateCollapseState] = useCollapseState('HostInfo', {
     info: true,
@@ -42,8 +51,6 @@ const HostInfo = () => {
     notes: true,
     auditLogs: false
   })
-
-  const [hostOTPOpen, setHostOTPOpen] = useState(false)
   const [objectFormState, setEditFormState] = useState({
     isEditing: false,
     editLoading: false,
@@ -54,10 +61,6 @@ const HostInfo = () => {
   })
 
   const actions = {
-    hostOTP: () => {
-      setHostOTPOpen(true)
-      return false
-    },
     edit: () => {
       objectFormRef?.current.startEditing()
       return false
@@ -77,7 +80,6 @@ const HostInfo = () => {
   }
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -170,6 +172,7 @@ const HostInfo = () => {
                   type='host'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}
@@ -267,20 +270,6 @@ const HostInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-
-      <Modal
-        open={hostOTPOpen}
-        destroyOnHidden={true}
-        width={650}
-        onCancel={() => {
-          actionHandlerRef.current.clearAction()
-          setHostOTPOpen(false)
-        }}
-        footer={false}
-      >
-        <HostOTP id={hostId} />
-      </Modal>
-    </>
   )
 }
 

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

@@ -155,6 +155,7 @@ const MaterialInfo = () => {
                   type='material'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -143,6 +143,7 @@ const NoteTypeInfo = () => {
                   type='noteType'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -151,6 +151,7 @@ const NoteInfo = () => {
                 type='note'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}

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

@@ -147,6 +147,7 @@ const PartSkuInfo = () => {
                   type='partSku'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -14,6 +14,7 @@ import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
 import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -21,15 +22,22 @@ import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import PartSkuIcon from '../../../Icons/PartSkuIcon.jsx'
-import NewPartSku from '../PartSkus/NewPartSku'
 
 const PartInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
   const partId = new URLSearchParams(location.search).get('partId')
-  const [newPartSkuOpen, setNewPartSkuOpen] = useState(false)
   const partSkusTableRef = useRef()
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      partSkusTableRef.current?.reload?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const [collapseState, updateCollapseState] = useCollapseState('PartInfo', {
     info: true,
     partSkus: true,
@@ -46,10 +54,6 @@ const PartInfo = () => {
   })
 
   const actions = {
-    newPartSku: () => {
-      setNewPartSkuOpen(true)
-      return true
-    },
     edit: () => {
       objectFormRef?.current?.startEditing?.()
       return false
@@ -65,7 +69,6 @@ const PartInfo = () => {
   }
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -146,6 +149,7 @@ const PartInfo = () => {
                 type='part'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}
@@ -190,25 +194,6 @@ const PartInfo = () => {
                 )}
               </InfoCollapse>
             </ActionHandler>
-            <Modal
-              open={newPartSkuOpen}
-              styles={{ content: { paddingBottom: '24px' } }}
-              footer={null}
-              width={700}
-              onCancel={() => setNewPartSkuOpen(false)}
-              destroyOnHidden={true}
-            >
-              <NewPartSku
-                onOk={() => {
-                  setNewPartSkuOpen(false)
-                  partSkusTableRef.current?.reload?.()
-                }}
-                reset={newPartSkuOpen}
-                defaultValues={{
-                  part: objectFormState?.objectData || undefined
-                }}
-              />
-            </Modal>
             <InfoCollapse
               title='Notes'
               icon={<NoteIcon />}
@@ -242,7 +227,6 @@ const PartInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-    </>
   )
 }
 

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

@@ -152,6 +152,7 @@ const ProductCategoryInfo = () => {
                   type='productCategory'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -148,6 +148,7 @@ const ProductSkuInfo = () => {
                 type='productSku'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -15,13 +15,13 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import ProductSkuIcon from '../../../Icons/ProductSkuIcon.jsx'
-import NewProductSku from '../ProductSkus/NewProductSku'
 
 const ProductInfo = () => {
   const location = useLocation()
@@ -34,8 +34,16 @@ const ProductInfo = () => {
     notes: true,
     auditLogs: false
   })
-  const [newProductSkuOpen, setNewProductSkuOpen] = useState(false)
   const productSkusTableRef = useRef()
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      productSkusTableRef.current?.reload?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const [objectFormState, setEditFormState] = useState({
     isEditing: false,
     editLoading: false,
@@ -46,10 +54,6 @@ const ProductInfo = () => {
   })
 
   const actions = {
-    newProductSku: () => {
-      setNewProductSkuOpen(true)
-      return true
-    },
     edit: () => {
       objectFormRef?.current?.startEditing?.()
       return false
@@ -65,7 +69,6 @@ const ProductInfo = () => {
   }
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -146,6 +149,7 @@ const ProductInfo = () => {
                 type='product'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}
@@ -193,26 +197,6 @@ const ProductInfo = () => {
               </ObjectForm>
             </ActionHandler>
 
-            <Modal
-              open={newProductSkuOpen}
-              styles={{ content: { paddingBottom: '24px' } }}
-              footer={null}
-              width={700}
-              onCancel={() => setNewProductSkuOpen(false)}
-              destroyOnHidden={true}
-            >
-              <NewProductSku
-                onOk={() => {
-                  setNewProductSkuOpen(false)
-                  productSkusTableRef.current?.reload?.()
-                }}
-                reset={newProductSkuOpen}
-                defaultValues={{
-                  product: objectFormState?.objectData || undefined
-                }}
-              />
-            </Modal>
-
             <InfoCollapse
               title='Notes'
               icon={<NoteIcon />}
@@ -246,7 +230,6 @@ const ProductInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-    </>
   )
 }
 

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

@@ -152,6 +152,7 @@ const TaxRateInfo = () => {
                   type='taxRate'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
@@ -22,7 +22,6 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import NewAppPassword from '../AppPasswords/NewAppPassword.jsx'
 import ObjectProperty from '../../common/ObjectProperty.jsx'
 import { getModelProperty } from '../../../../database/ObjectModels.js'
 import { useMediaQuery } from 'react-responsive'
@@ -33,7 +32,6 @@ const UserInfo = () => {
   const appPasswordsTableRef = useRef(null)
   const actionHandlerRef = useRef(null)
   const userId = new URLSearchParams(location.search).get('userId')
-  const [newAppPasswordOpen, setNewAppPasswordOpen] = useState(false)
   const [collapseState, updateCollapseState] = useCollapseState('UserInfo', {
     info: true,
     appPasswords: true,
@@ -51,10 +49,6 @@ const UserInfo = () => {
   const isMobile = useMediaQuery({ maxWidth: 768 })
 
   const actions = {
-    newAppPassword: () => {
-      setNewAppPasswordOpen(true)
-      return false
-    },
     edit: () => {
       objectFormRef?.current?.startEditing?.()
       return false
@@ -70,205 +64,184 @@ const UserInfo = () => {
   }
 
   return (
-    <>
+    <Flex
-      <Flex
+      gap='large'
-        gap='large'
+      vertical='true'
-        vertical='true'
+      style={{ maxHeight: '100%', minHeight: 0 }}
-        style={{ maxHeight: '100%', minHeight: 0 }}
+    >
-      >
+      <Flex justify={'space-between'}>
-        <Flex justify={'space-between'}>
+        <Space size='small'>
           <Space size='small'>
-            <Space size='small'>
+            <ObjectActions
-              <ObjectActions
+              type='user'
-                type='user'
+              id={userId}
-                id={userId}
+              disabled={objectFormState.loading}
-                disabled={objectFormState.loading}
+              objectData={objectFormState.objectData}
-                objectData={objectFormState.objectData}
+            />
-              />
+            <ViewButton
-              <ViewButton
+              disabled={objectFormState.loading}
-                disabled={objectFormState.loading}
+              items={[
-                items={[
+                { key: 'info', label: 'User Information' },
-                  { key: 'info', label: 'User Information' },
+                { key: 'appPasswords', label: 'App Passwords' },
-                  { key: 'appPasswords', label: 'App Passwords' },
+                { key: 'notes', label: 'Notes' },
-                  { key: 'notes', label: 'Notes' },
+                { key: 'auditLogs', label: 'Audit Logs' }
-                  { key: 'auditLogs', label: 'Audit Logs' }
+              ]}
-                ]}
+              visibleState={collapseState}
-                visibleState={collapseState}
+              updateVisibleState={updateCollapseState}
-                updateVisibleState={updateCollapseState}
+            />
-              />
+            <UserNotifierToggle
-              <UserNotifierToggle
+              type='user'
-                type='user'
+              objectData={objectFormState.objectData}
-                objectData={objectFormState.objectData}
+              disabled={objectFormState.loading}
-                disabled={objectFormState.loading}
+            />
-              />
+            <DocumentPrintButton
-              <DocumentPrintButton
+              type='user'
-                type='user'
+              objectData={objectFormState.objectData}
-                objectData={objectFormState.objectData}
+              disabled={objectFormState.loading}
-                disabled={objectFormState.loading}
-              />
-            </Space>
-            <ActivityIndicator
-              activities={objectFormState.activities}
-              showStartingDivider={true}
             />
           </Space>
-          <Space>
+          <ActivityIndicator
-            <EditButtons
+            activities={objectFormState.activities}
-              isEditing={objectFormState.isEditing}
+            showStartingDivider={true}
-              handleUpdate={() => {
+          />
-                actionHandlerRef.current.callAction('finishEdit')
+        </Space>
-              }}
+        <Space>
-              cancelEditing={() => {
+          <EditButtons
-                actionHandlerRef.current.callAction('cancelEdit')
+            isEditing={objectFormState.isEditing}
-              }}
+            handleUpdate={() => {
-              startEditing={() => {
+              actionHandlerRef.current.callAction('finishEdit')
-                actionHandlerRef.current.callAction('edit')
+            }}
-              }}
+            cancelEditing={() => {
-              editLoading={objectFormState.editLoading}
+              actionHandlerRef.current.callAction('cancelEdit')
-              formValid={objectFormState.formValid}
+            }}
-              disabled={
+            startEditing={() => {
-                objectFormState.beingEditedByOther || objectFormState.loading
+              actionHandlerRef.current.callAction('edit')
-              }
+            }}
-              loading={objectFormState.editLoading}
+            editLoading={objectFormState.editLoading}
-            />
+            formValid={objectFormState.formValid}
-            <ObjectTableNavigationButtons
+            disabled={
-              disabled={objectFormState.loading || objectFormState.isEditing}
+              objectFormState.beingEditedByOther || objectFormState.loading
-              _id={userId}
+            }
-              objectType='user'
+            loading={objectFormState.editLoading}
-              showEndingDivider={true}
+          />
-            />
+          <ObjectTableNavigationButtons
-          </Space>
+            disabled={objectFormState.loading || objectFormState.isEditing}
-        </Flex>
+            _id={userId}
-        <ScrollBox>
+            objectType='user'
-          <Flex vertical gap={'large'}>
+            showEndingDivider={true}
-            <ActionHandler
+          />
-              actions={actions}
+        </Space>
-              loading={objectFormState.loading}
-              ref={actionHandlerRef}
-            >
-              <InfoCollapse
-                title='User Information'
-                icon={<InfoCircleIcon />}
-                active={collapseState.info}
-                onToggle={(expanded) => updateCollapseState('info', expanded)}
-                collapseKey='info'
-              >
-                <ObjectForm
-                  id={userId}
-                  type='user'
-                  style={{ height: '100%' }}
-                  ref={objectFormRef}
-                  onStateChange={(state) => {
-                    setEditFormState((prev) => ({ ...prev, ...state }))
-                  }}
-                >
-                  {({ loading, isEditing, objectData }) => (
-                    <Flex gap='large' vertical={isMobile}>
-                      <div
-                        style={
-                          isMobile
-                            ? { width: '100%' }
-                            : { width: '20%', maxWidth: '238px' }
-                        }
-                      >
-                        <Card styles={{ body: { padding: 18 } }}>
-                          <ObjectProperty
-                            {...getModelProperty('user', 'profileImage')}
-                            isEditing={isEditing}
-                            objectData={objectData}
-                            loading={loading}
-                          />
-                        </Card>
-                      </div>
-                      <ObjectInfo
-                        loading={loading}
-                        indicator={<LoadingOutlined />}
-                        isEditing={isEditing}
-                        type='user'
-                        objectData={objectData}
-                        visibleProperties={{
-                          profileImage: false
-                        }}
-                      />
-                    </Flex>
-                  )}
-                </ObjectForm>
-              </InfoCollapse>
-            </ActionHandler>
-            <InfoCollapse
-              title='App Passwords'
-              icon={<AppPasswordIcon />}
-              active={collapseState.appPasswords}
-              onToggle={(expanded) =>
-                updateCollapseState('appPasswords', expanded)
-              }
-              collapseKey='appPasswords'
-            >
-              {!userId ? (
-                <InfoCollapsePlaceholder />
-              ) : (
-                <ObjectTable
-                  type='appPassword'
-                  masterFilter={{ user: userId }}
-                  visibleColumns={{ user: false }}
-                  ref={appPasswordsTableRef}
-                />
-              )}
-            </InfoCollapse>
-            <InfoCollapse
-              title='Notes'
-              icon={<NoteIcon />}
-              active={collapseState.notes}
-              onToggle={(expanded) => updateCollapseState('notes', expanded)}
-              collapseKey='notes'
-            >
-              <Card>
-                <NotesPanel _id={userId} type='user' />
-              </Card>
-            </InfoCollapse>
-            <InfoCollapse
-              title='Audit Logs'
-              icon={<AuditLogIcon />}
-              active={collapseState.auditLogs}
-              onToggle={(expanded) =>
-                updateCollapseState('auditLogs', expanded)
-              }
-              collapseKey='auditLogs'
-            >
-              {objectFormState.loading ? (
-                <InfoCollapsePlaceholder />
-              ) : (
-                <ObjectTable
-                  type='auditLog'
-                  masterFilter={{ 'parent._id': userId }}
-                  visibleColumns={{ _id: false, 'parent._id': false }}
-                />
-              )}
-            </InfoCollapse>
-          </Flex>
-        </ScrollBox>
       </Flex>
-
+      <ScrollBox>
-      <Modal
+        <Flex vertical gap={'large'}>
-        open={newAppPasswordOpen}
+          <ActionHandler
-        destroyOnHidden={true}
+            actions={actions}
-        width={700}
+            loading={objectFormState.loading}
-        onCancel={() => {
+            ref={actionHandlerRef}
-          actionHandlerRef.current?.clearAction?.()
+          >
-          setNewAppPasswordOpen(false)
+            <InfoCollapse
-        }}
+              title='User Information'
-        footer={null}
+              icon={<InfoCircleIcon />}
-      >
+              active={collapseState.info}
-        <NewAppPassword
+              onToggle={(expanded) => updateCollapseState('info', expanded)}
-          onOk={() => {
+              collapseKey='info'
-            setNewAppPasswordOpen(false)
+            >
-            appPasswordsTableRef.current?.reload?.()
+              <ObjectForm
-          }}
+                id={userId}
-          reset={newAppPasswordOpen}
+                type='user'
-          defaultValues={{ user: { ...objectFormState.objectData } }}
+                style={{ height: '100%' }}
-        />
+                ref={objectFormRef}
-      </Modal>
+                setCurrentObject={true}
-    </>
+                onStateChange={(state) => {
+                  setEditFormState((prev) => ({ ...prev, ...state }))
+                }}
+              >
+                {({ loading, isEditing, objectData }) => (
+                  <Flex gap='large' vertical={isMobile}>
+                    <div
+                      style={
+                        isMobile
+                          ? { width: '100%' }
+                          : { width: '20%', maxWidth: '238px' }
+                      }
+                    >
+                      <Card styles={{ body: { padding: 18 } }}>
+                        <ObjectProperty
+                          {...getModelProperty('user', 'profileImage')}
+                          isEditing={isEditing}
+                          objectData={objectData}
+                          loading={loading}
+                        />
+                      </Card>
+                    </div>
+                    <ObjectInfo
+                      loading={loading}
+                      indicator={<LoadingOutlined />}
+                      isEditing={isEditing}
+                      type='user'
+                      objectData={objectData}
+                      visibleProperties={{
+                        profileImage: false
+                      }}
+                    />
+                  </Flex>
+                )}
+              </ObjectForm>
+            </InfoCollapse>
+          </ActionHandler>
+          <InfoCollapse
+            title='App Passwords'
+            icon={<AppPasswordIcon />}
+            active={collapseState.appPasswords}
+            onToggle={(expanded) =>
+              updateCollapseState('appPasswords', expanded)
+            }
+            collapseKey='appPasswords'
+          >
+            {!userId ? (
+              <InfoCollapsePlaceholder />
+            ) : (
+              <ObjectTable
+                type='appPassword'
+                masterFilter={{ user: userId }}
+                visibleColumns={{ user: false }}
+                ref={appPasswordsTableRef}
+              />
+            )}
+          </InfoCollapse>
+          <InfoCollapse
+            title='Notes'
+            icon={<NoteIcon />}
+            active={collapseState.notes}
+            onToggle={(expanded) => updateCollapseState('notes', expanded)}
+            collapseKey='notes'
+          >
+            <Card>
+              <NotesPanel _id={userId} type='user' />
+            </Card>
+          </InfoCollapse>
+          <InfoCollapse
+            title='Audit Logs'
+            icon={<AuditLogIcon />}
+            active={collapseState.auditLogs}
+            onToggle={(expanded) =>
+              updateCollapseState('auditLogs', expanded)
+            }
+            collapseKey='auditLogs'
+          >
+            {objectFormState.loading ? (
+              <InfoCollapsePlaceholder />
+            ) : (
+              <ObjectTable
+                type='auditLog'
+                masterFilter={{ 'parent._id': userId }}
+                visibleColumns={{ _id: false, 'parent._id': false }}
+              />
+            )}
+          </InfoCollapse>
+        </Flex>
+      </ScrollBox>
+    </Flex>
   )
 }
 

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

@@ -152,6 +152,7 @@ const VendorInfo = () => {
                   type='vendor'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -189,6 +189,7 @@ const FilamentProfileInfo = () => {
               id={filamentProfileId}
               type='filamentProfile'
               ref={objectFormRef}
+              setCurrentObject={true}
               onStateChange={(state) =>
                 setObjectFormState((current) => ({ ...current, ...state }))
               }

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

@@ -155,6 +155,7 @@ const GCodeFileInfo = () => {
                 type='gcodeFile'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -17,13 +17,13 @@ import EditButtons from '../../common/EditButtons.jsx'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import JobIcon from '../../../Icons/JobIcon.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
-import DeployJob from './DeployJob.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import { getModelByName } from '../../../../database/ObjectModels.js'
 
@@ -34,9 +34,16 @@ const JobInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
-  const jobId = new URLSearchParams(location.search).get('jobId')
 
-  const [deployJobOpen, setDeployJobOpen] = useState(false)
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
+  const jobId = new URLSearchParams(location.search).get('jobId')
   const [collapseState, updateCollapseState] = useCollapseState('JobInfo', {
     info: true,
     subJobs: true,
@@ -73,14 +80,9 @@ const JobInfo = () => {
       objectFormRef?.current.handleUpdate()
       return true
     },
-    deploy: () => {
-      setDeployJobOpen(true)
-      return false
-    }
   }
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -174,6 +176,7 @@ const JobInfo = () => {
                   type='job'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}
@@ -239,25 +242,6 @@ const JobInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        destroyOnHidden
-        footer={null}
-        open={deployJobOpen}
-        width={700}
-        onCancel={() => {
-          actionHandlerRef.current.clearAction()
-          setDeployJobOpen(false)
-        }}
-      >
-        <DeployJob
-          objectData={{ ...objectFormState.objectData }}
-          onOk={() => {
-            actionHandlerRef.current.clearAction()
-            setDeployJobOpen(false)
-          }}
-        />
-      </Modal>
-    </>
   )
 }
 

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

@@ -162,6 +162,7 @@ const PrinterProfileInfo = () => {
               id={printerProfileId}
               type='printerProfile'
               ref={objectFormRef}
+              setCurrentObject={true}
               onStateChange={(state) =>
                 setObjectFormState((current) => ({ ...current, ...state }))
               }

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

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useContext } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card, Splitter, Divider, Modal } from 'antd'
+import { Space, Flex, Card, Splitter, Divider } from 'antd'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
@@ -11,6 +11,7 @@ import NoteIcon from '../../../Icons/NoteIcon.jsx'
 import ObjectForm from '../../common/ObjectForm.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import { useActions } from '../../context/ActionsContext'
 import PropTypes from 'prop-types'
 
 import ObjectInfo from '../../common/ObjectInfo.jsx'
@@ -29,8 +30,6 @@ import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
 import { useMediaQuery } from 'react-responsive'
 import AlertsDisplay from '../../common/AlertsDisplay.jsx'
 import { ApiServerContext } from '../../context/ApiServerContext.jsx'
-import LoadFilamentStock from '../../Inventory/FilamentStocks/LoadFilamentStock.jsx'
-import UnloadFilamentStock from '../../Inventory/FilamentStocks/UnloadFilamentStock.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import PrinterControlButtons from '../../common/PrinterControlButtons.jsx'
@@ -59,6 +58,7 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
   )
 
   const { connected, sendObjectAction } = useContext(ApiServerContext)
+  const { setCurrentObject, setCurrentObjectType, setOnModalOk } = useActions()
   const [sideBarVisible, setSideBarVisible] = useState(
     collapseState.temperature ||
       collapseState.position ||
@@ -66,8 +66,14 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
       collapseState.misc
   )
 
-  const [loadFilamentStockOpen, setLoadFilamentStockOpen] = useState(false)
+  const [objectFormState, setEditFormState] = useState({
-  const [unloadFilamentStockOpen, setUnloadFilamentStockOpen] = useState(false)
+    isEditing: false,
+    editLoading: false,
+    formValid: false,
+    activities: [],
+    loading: false,
+    objectData: {}
+  })
 
   useEffect(() => {
     setSideBarVisible(
@@ -78,14 +84,26 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
     )
   }, [collapseState])
 
-  const [objectFormState, setEditFormState] = useState({
+  useEffect(() => {
-    isEditing: false,
+    setCurrentObjectType('printer')
-    editLoading: false,
+    return () => {
-    formValid: false,
+      setCurrentObject(null)
-    activities: [],
+      setCurrentObjectType(null)
-    loading: false,
+    }
-    objectData: {}
+  }, [setCurrentObject, setCurrentObjectType])
-  })
+
+  useEffect(() => {
+    if (objectFormState.objectData?._id) {
+      setCurrentObject(objectFormState.objectData)
+    }
+  }, [objectFormState.objectData, setCurrentObject])
+
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
 
   const actions = {
     edit: () => {
@@ -156,14 +174,6 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
         })
       }
       return true
-    },
-    loadFilamentStock: () => {
-      setLoadFilamentStockOpen(true)
-      return true
-    },
-    unloadFilamentStock: () => {
-      setUnloadFilamentStockOpen(true)
-      return true
     }
   }
 
@@ -373,6 +383,7 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
                           id={printerId}
                           type='printer'
                           ref={objectFormRef}
+                          setCurrentObject={true}
                           onStateChange={(state) => {
                             setEditFormState((prev) => ({ ...prev, ...state }))
                           }}
@@ -595,34 +606,6 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={loadFilamentStockOpen}
-        onCancel={() => setLoadFilamentStockOpen(false)}
-        footer={null}
-        width='700px'
-        destroyOnHidden={true}
-      >
-        <LoadFilamentStock
-          printer={objectFormState.objectData}
-          onOk={() => setLoadFilamentStockOpen(false)}
-          reset={false}
-          filamentStockLoaded={false}
-        />
-      </Modal>
-      <Modal
-        open={unloadFilamentStockOpen}
-        onCancel={() => setUnloadFilamentStockOpen(false)}
-        footer={null}
-        width='700px'
-        destroyOnHidden={true}
-      >
-        <UnloadFilamentStock
-          printer={objectFormState.objectData}
-          onOk={() => setUnloadFilamentStockOpen(false)}
-          reset={false}
-          filamentStockLoaded={false}
-        />
-      </Modal>
     </>
   )
 }

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

@@ -1,7 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
-import NewPrinterProfile from '../PrinterProfiles/NewPrinterProfile'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -17,6 +16,7 @@ import ObjectForm from '../../common/ObjectForm.jsx'
 import EditButtons from '../../common/EditButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -33,6 +33,9 @@ const PrinterInfo = () => {
   const objectFormRef = useRef(null)
   const profilesTableRef = useRef(null)
   const actionHandlerRef = useRef(null)
+
+
+  const { setOnModalOk } = useActions()
   const printerId = new URLSearchParams(location.search).get('printerId')
   const [collapseState, updateCollapseState] = useCollapseState('PrinterInfo', {
     info: true,
@@ -50,7 +53,14 @@ const PrinterInfo = () => {
     loading: false,
     objectData: {}
   })
-  const [newPrinterProfileOpen, setNewPrinterProfileOpen] = useState(false)
+
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      profilesTableRef.current?.reload?.()
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
 
   const actions = {
     edit: () => {
@@ -65,14 +75,9 @@ const PrinterInfo = () => {
       objectFormRef?.current.handleUpdate()
       return true
     },
-    newPrinterProfile: () => {
-      setNewPrinterProfileOpen(true)
-      return true
-    }
   }
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -164,6 +169,7 @@ const PrinterInfo = () => {
                   type='printer'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}
@@ -248,28 +254,6 @@ const PrinterInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={newPrinterProfileOpen}
-        styles={{ content: { paddingBottom: '24px' } }}
-        footer={null}
-        width={800}
-        onCancel={() => {
-          setNewPrinterProfileOpen(false)
-        }}
-        destroyOnHidden={true}
-      >
-        <NewPrinterProfile
-          onOk={() => {
-            setNewPrinterProfileOpen(false)
-            profilesTableRef.current?.reload()
-          }}
-          reset={newPrinterProfileOpen}
-          defaultValues={{
-            printer: { ...objectFormState.objectData }
-          }}
-        />
-      </Modal>
-    </>
   )
 }
 

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

@@ -143,6 +143,7 @@ const SubJobInfo = () => {
                   type='subJob'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -152,6 +152,7 @@ const ClientInfo = () => {
                   type='client'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -16,14 +16,13 @@ import EditButtons from '../../common/EditButtons'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import PublishListingVarient from './PublishListingVarient.jsx'
-import UnpublishListingVarient from './UnpublishListingVarient.jsx'
 
 const log = loglevel.getLogger('ListingVarientInfo')
 log.setLevel(config.logLevel)
@@ -32,11 +31,18 @@ const ListingVarientInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const listingVarientId = new URLSearchParams(location.search).get(
     'listingVarientId'
   )
-  const [publishOpen, setPublishOpen] = useState(false)
-  const [unpublishOpen, setUnpublishOpen] = useState(false)
   const [collapseState, updateCollapseState] = useCollapseState(
     'ListingVarientInfo',
     {
@@ -71,18 +77,9 @@ const ListingVarientInfo = () => {
       objectFormRef?.current?.handleDelete?.()
       return true
     },
-    publish: () => {
-      setPublishOpen(true)
-      return true
-    },
-    unpublish: () => {
-      setUnpublishOpen(true)
-      return true
-    }
   }
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -162,6 +159,7 @@ const ListingVarientInfo = () => {
                 type='listingVarient'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}
@@ -221,39 +219,6 @@ const ListingVarientInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={publishOpen}
-        onCancel={() => setPublishOpen(false)}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <PublishListingVarient
-          objectData={objectFormState.objectData}
-          onOk={() => {
-            setPublishOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-        />
-      </Modal>
-      <Modal
-        open={unpublishOpen}
-        onCancel={() => setUnpublishOpen(false)}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <UnpublishListingVarient
-          objectData={objectFormState.objectData}
-          onOk={() => {
-            setUnpublishOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-        />
-      </Modal>
-    </>
   )
 }
 

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Space } from 'antd'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -17,15 +17,13 @@ import EditButtons from '../../common/EditButtons'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import NewListingVarient from '../ListingVarients/NewListingVarient.jsx'
-import PublishListing from './PublishListing.jsx'
-import UnpublishListing from './UnpublishListing.jsx'
 
 const log = loglevel.getLogger('ListingInfo')
 log.setLevel(config.logLevel)
@@ -35,10 +33,16 @@ const ListingInfo = () => {
   const objectFormRef = useRef(null)
   const listingVarientsTableRef = useRef(null)
   const actionHandlerRef = useRef(null)
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      listingVarientsTableRef.current?.reload?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const listingId = new URLSearchParams(location.search).get('listingId')
-  const [newListingVarientOpen, setNewListingVarientOpen] = useState(false)
-  const [publishListingOpen, setPublishListingOpen] = useState(false)
-  const [unpublishListingOpen, setUnpublishListingOpen] = useState(false)
   const [collapseState, updateCollapseState] = useCollapseState('ListingInfo', {
     info: true,
     listingVarients: true,
@@ -71,22 +75,9 @@ const ListingInfo = () => {
       objectFormRef?.current?.handleDelete?.()
       return true
     },
-    newListingVarient: () => {
-      setNewListingVarientOpen(true)
-      return true
-    },
-    publish: () => {
-      setPublishListingOpen(true)
-      return true
-    },
-    unpublish: () => {
-      setUnpublishListingOpen(true)
-      return true
-    }
   }
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -167,6 +158,7 @@ const ListingInfo = () => {
                 type='listing'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}
@@ -245,61 +237,6 @@ const ListingInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={newListingVarientOpen}
-        onCancel={() => {
-          setNewListingVarientOpen(false)
-        }}
-        width={800}
-        footer={null}
-        destroyOnHidden={true}
-      >
-        <NewListingVarient
-          onOk={() => {
-            setNewListingVarientOpen(false)
-            listingVarientsTableRef.current?.reload()
-          }}
-          reset={newListingVarientOpen}
-          defaultValues={{
-            listing: objectFormState.objectData
-          }}
-        />
-      </Modal>
-      <Modal
-        open={publishListingOpen}
-        onCancel={() => setPublishListingOpen(false)}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <PublishListing
-          objectData={objectFormState.objectData}
-          onOk={() => {
-            setPublishListingOpen(false)
-            objectFormRef?.current.handleFetchObject()
-            listingVarientsTableRef.current?.reload?.()
-          }}
-        />
-      </Modal>
-      <Modal
-        open={unpublishListingOpen}
-        onCancel={() => setUnpublishListingOpen(false)}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <UnpublishListing
-          objectData={objectFormState.objectData}
-          onOk={() => {
-            setUnpublishListingOpen(false)
-            objectFormRef?.current.handleFetchObject()
-            listingVarientsTableRef.current?.reload?.()
-          }}
-        />
-      </Modal>
-    </>
   )
 }
 

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

@@ -1,6 +1,6 @@
-import { useContext, useRef, useState } from 'react'
+import { useContext, useRef, useState , useEffect} from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, message, Modal, Space } from 'antd'
+import { Card, Flex, message, Space } from 'antd'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -16,15 +16,13 @@ import EditButtons from '../../common/EditButtons'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
-import SyncListings from './SyncListings.jsx'
-import SyncOrders from './SyncOrders.jsx'
-import ConfigureMarketplace from './ConfigureMarketplace.jsx'
 import { ApiServerContext } from '../../context/ApiServerContext.jsx'
 import { ElectronContext } from '../../context/ElectronContext.jsx'
 import {
@@ -39,6 +37,15 @@ const MarketplaceInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
+
+
+  const { setOnModalOk } = useActions()
+  useEffect(() => {
+    setOnModalOk(() => () => {
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const { getMarketplaceAuthUrl, refreshMarketplaceAuth } =
     useContext(ApiServerContext)
   const { openExternalUrl } = useContext(ElectronContext)
@@ -61,9 +68,6 @@ const MarketplaceInfo = () => {
     loading: false,
     objectData: {}
   })
-  const [syncListingsOpen, setSyncListingsOpen] = useState(false)
-  const [syncOrdersOpen, setSyncOrdersOpen] = useState(false)
-  const [configureModalOpen, setConfigureModalOpen] = useState(false)
 
   const startAuthorization = async () => {
     const objectData = objectFormState.objectData
@@ -128,18 +132,6 @@ const MarketplaceInfo = () => {
       objectFormRef?.current?.handleDelete?.()
       return true
     },
-    syncListings: () => {
-      setSyncListingsOpen(true)
-      return true
-    },
-    syncOrders: () => {
-      setSyncOrdersOpen(true)
-      return true
-    },
-    configure: () => {
-      setConfigureModalOpen(true)
-      return true
-    },
     connect: () => {
       startAuthorization()
       return true
@@ -155,7 +147,6 @@ const MarketplaceInfo = () => {
   }
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -242,6 +233,7 @@ const MarketplaceInfo = () => {
                   type='marketplace'
                   style={{ height: '100%' }}
                   ref={objectFormRef}
+                  setCurrentObject={true}
                   onStateChange={(state) => {
                     setEditFormState((prev) => ({ ...prev, ...state }))
                   }}
@@ -291,63 +283,6 @@ const MarketplaceInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={syncListingsOpen}
-        onCancel={() => setSyncListingsOpen(false)}
-        width={500}
-        footer={null}
-        destroyOnHidden={true}
-        centered
-      >
-        <SyncListings
-          onOk={() => {
-            setSyncListingsOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={syncOrdersOpen}
-        onCancel={() => setSyncOrdersOpen(false)}
-        width={500}
-        footer={null}
-        destroyOnHidden={true}
-        centered
-      >
-        <SyncOrders
-          onOk={() => {
-            setSyncOrdersOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={configureModalOpen}
-        onCancel={() => setConfigureModalOpen(false)}
-        width={650}
-        footer={null}
-        destroyOnHidden={true}
-        centered
-      >
-        <ConfigureMarketplace
-          onConnect={() => {
-            startAuthorization()
-            setConfigureModalOpen(false)
-          }}
-          isConnected={
-            !!(
-              objectFormState.objectData?.config?.refreshToken ||
-              objectFormState.objectData?.config?.accessToken ||
-              objectFormState.objectData?.config?.shopCipher
-            )
-          }
-          loading={objectFormState.loading}
-          disabled={objectFormState.isEditing}
-        />
-      </Modal>
-    </>
   )
 }
 

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

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card, Modal } from 'antd'
+import { Space, Flex, Card } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -17,6 +17,7 @@ import EditButtons from '../../common/EditButtons.jsx'
 import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
 import ActivityIndicator from '../../common/ActivityIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
+import { useActions } from '../../context/ActionsContext'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
@@ -24,16 +25,10 @@ import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
 import ScrollBox from '../../common/ScrollBox.jsx'
 import OrderItemsIcon from '../../../Icons/OrderItemIcon.jsx'
-import NewOrderItem from '../../Inventory/OrderItems/NewOrderItem.jsx'
-import NewShipment from '../../Inventory/Shipments/NewShipment.jsx'
-import PostSalesOrder from './PostSalesOrder.jsx'
-import ConfirmSalesOrder from './ConfirmSalesOrder.jsx'
-import CancelSalesOrder from './CancelSalesOrder.jsx'
 import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
 import InvoiceIcon from '../../../Icons/InvoiceIcon.jsx'
 import StockEventIcon from '../../../Icons/StockEventIcon.jsx'
 import { getModelByName } from '../../../../database/ObjectModels.js'
-import NewInvoice from '../../Finance/Invoices/NewInvoice.jsx'
 
 const log = loglevel.getLogger('SalesOrderInfo')
 log.setLevel(config.logLevel)
@@ -44,12 +39,15 @@ const SalesOrderInfo = () => {
   const orderItemsTableRef = useRef(null)
   const shipmentsTableRef = useRef(null)
   const actionHandlerRef = useRef(null)
-  const [newOrderItemOpen, setNewOrderItemOpen] = useState(false)
+
-  const [newShipmentOpen, setNewShipmentOpen] = useState(false)
+
-  const [postSalesOrderOpen, setPostSalesOrderOpen] = useState(false)
+  const { setOnModalOk } = useActions()
-  const [confirmSalesOrderOpen, setConfirmSalesOrderOpen] = useState(false)
+  useEffect(() => {
-  const [cancelSalesOrderOpen, setCancelSalesOrderOpen] = useState(false)
+    setOnModalOk(() => () => {
-  const [newInvoiceOpen, setNewInvoiceOpen] = useState(false)
+      objectFormRef.current?.handleFetchObject?.()
+    })
+    return () => setOnModalOk(null)
+  }, [setOnModalOk])
   const salesOrderId = new URLSearchParams(location.search).get('salesOrderId')
   const [collapseState, updateCollapseState] = useCollapseState(
     'SalesOrderInfo',
@@ -93,30 +91,6 @@ const SalesOrderInfo = () => {
       objectFormRef?.current?.handleDelete?.()
       return true
     },
-    newOrderItem: () => {
-      setNewOrderItemOpen(true)
-      return true
-    },
-    newShipment: () => {
-      setNewShipmentOpen(true)
-      return true
-    },
-    newInvoice: () => {
-      setNewInvoiceOpen(true)
-      return true
-    },
-    post: () => {
-      setPostSalesOrderOpen(true)
-      return true
-    },
-    confirm: () => {
-      setConfirmSalesOrderOpen(true)
-      return true
-    },
-    cancel: () => {
-      setCancelSalesOrderOpen(true)
-      return true
-    }
   }
 
   const editDisabled = getModelByName('salesOrder')
@@ -124,7 +98,6 @@ const SalesOrderInfo = () => {
     .disabled(objectFormState.objectData)
 
   return (
-    <>
       <Flex
         gap='large'
         vertical='true'
@@ -214,6 +187,7 @@ const SalesOrderInfo = () => {
                 type='salesOrder'
                 style={{ height: '100%' }}
                 ref={objectFormRef}
+                setCurrentObject={true}
                 onStateChange={(state) => {
                   setEditFormState((prev) => ({ ...prev, ...state }))
                 }}
@@ -358,122 +332,6 @@ const SalesOrderInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
-      <Modal
-        open={newOrderItemOpen}
-        onCancel={() => {
-          setNewOrderItemOpen(false)
-        }}
-        width={800}
-        footer={null}
-        destroyOnHidden={true}
-      >
-        <NewOrderItem
-          onOk={() => {
-            setNewOrderItemOpen(false)
-          }}
-          reset={newOrderItemOpen}
-          defaultValues={{
-            order: { _id: salesOrderId },
-            orderType: 'salesOrder',
-            syncAmount: 'itemPrice'
-          }}
-        />
-      </Modal>
-      <Modal
-        open={newShipmentOpen}
-        onCancel={() => {
-          setNewShipmentOpen(false)
-        }}
-        width={800}
-        footer={null}
-        destroyOnHidden={true}
-      >
-        <NewShipment
-          onOk={() => {
-            setNewShipmentOpen(false)
-          }}
-          reset={newShipmentOpen}
-          defaultValues={{
-            orderType: 'salesOrder',
-            order: { _id: salesOrderId }
-          }}
-        />
-      </Modal>
-      <Modal
-        open={newInvoiceOpen}
-        onCancel={() => {
-          setNewInvoiceOpen(false)
-        }}
-        width={800}
-        footer={null}
-        destroyOnHidden={true}
-      >
-        <NewInvoice
-          onOk={() => {
-            setNewInvoiceOpen(false)
-          }}
-          reset={newInvoiceOpen}
-          defaultValues={{
-            orderType: 'salesOrder',
-            order: { ...objectFormState.objectData }
-          }}
-        />
-      </Modal>
-      <Modal
-        open={postSalesOrderOpen}
-        onCancel={() => {
-          setPostSalesOrderOpen(false)
-        }}
-        width={500}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <PostSalesOrder
-          onOk={() => {
-            setPostSalesOrderOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={confirmSalesOrderOpen}
-        onCancel={() => {
-          setConfirmSalesOrderOpen(false)
-        }}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <ConfirmSalesOrder
-          onOk={() => {
-            setConfirmSalesOrderOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-      <Modal
-        open={cancelSalesOrderOpen}
-        onCancel={() => {
-          setCancelSalesOrderOpen(false)
-        }}
-        width={515}
-        footer={null}
-        destroyOnHidden={true}
-        centered={true}
-      >
-        <CancelSalesOrder
-          onOk={() => {
-            setCancelSalesOrderOpen(false)
-            objectFormRef?.current.handleFetchObject()
-          }}
-          objectData={objectFormState.objectData}
-        />
-      </Modal>
-    </>
   )
 }
 

src/components/Dashboard/common/ActivityIndicator.jsx

@@ -8,6 +8,7 @@ import SpotlightTooltip from './SpotlightTooltip'
 import Thumbnail from './Thumbnail'
 import { useNavigate } from 'react-router-dom'
 import { getModelByName } from '../../../database/ObjectModels'
+import { buildActionUrl } from '../../../utils/modelActions'
 
 const getUserId = (user) => user?._id || user
 
@@ -90,7 +91,13 @@ const UserActivityAvatar = memo(
       model.actions?.filter((action) => action.default == true) || []
 
     if (defaultModelActions.length >= 1 && getUserId(user)) {
-      hyperlink = defaultModelActions[0].url(getUserId(user))
+      hyperlink = buildActionUrl(
+        model,
+        defaultModelActions[0],
+        getUserId(user),
+        '',
+        ''
+      )
     }
 
     return (

src/components/Dashboard/common/AlertsDisplay.jsx

@@ -5,6 +5,7 @@ import ExclamationOctagonIcon from '../../Icons/ExclamationOctagonIcon'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon'
 import XMarkIcon from '../../Icons/XMarkIcon'
 import { getModelByName } from '../../../database/ObjectModels'
+import { buildActionUrl } from '../../../utils/modelActions'
 import { useNavigate } from 'react-router-dom'
 import ActionsIcon from '../../Icons/ActionsIcon'
 import { ApiServerContext } from '../context/ApiServerContext'
@@ -152,8 +153,16 @@ const AlertsDisplay = ({
       onClick: ({ key }) => {
         const action = findActionByKey(filteredActions, key)
 
-        if (action?.url) {
+        if (action) {
-          navigate(action.url(objectId))
+          navigate(
+            buildActionUrl(
+              getModelByName(objectType),
+              action,
+              objectId,
+              '',
+              ''
+            )
+          )
         } else {
           console.warn('No action found for key:', key)
         }

src/components/Dashboard/common/IdDisplay.jsx

@@ -6,6 +6,7 @@ import { useMediaQuery } from 'react-responsive'
 import CopyButton from './CopyButton'
 import SpotlightTooltip from './SpotlightTooltip'
 import { getModelByName } from '../../../database/ObjectModels'
+import { buildActionUrl } from '../../../utils/modelActions'
 
 const { Text, Link } = Typography
 
@@ -31,7 +32,7 @@ const IdDisplay = ({
     model.actions?.filter((action) => action.default == true) || []
 
   if (defaultModelActions.length >= 1) {
-    hyperlink = defaultModelActions[0].url(id)
+    hyperlink = buildActionUrl(model, defaultModelActions[0], id, '', '')
   }
 
   if (!id) {

src/components/Dashboard/common/ModelPage.jsx

@@ -0,0 +1,56 @@
+import { Suspense, useContext, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { Flex, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+import PropTypes from 'prop-types'
+import { getModelByName } from '../../../database/ObjectModels'
+import { getObjectIdFromSearch } from '../../../utils/modelActions'
+import { useActions } from '../context/ActionsContext'
+import { AuthContext } from '../context/AuthContext'
+
+const ModelPage = ({ modelName, pageName }) => {
+  const model = getModelByName(modelName)
+  const page = model.pages?.find((p) => p.name === pageName)
+  const location = useLocation()
+  const { setCurrentObject, setCurrentObjectType } = useActions()
+  const { userProfile } = useContext(AuthContext)
+  const objectId = getObjectIdFromSearch(modelName, location.search)
+
+  useEffect(() => {
+    setCurrentObjectType(modelName)
+    if (objectId) {
+      setCurrentObject({ _id: objectId, _user: userProfile })
+    }
+    return () => {
+      setCurrentObject(null)
+      setCurrentObjectType(null)
+    }
+  }, [modelName, objectId, setCurrentObject, setCurrentObjectType, userProfile])
+
+  if (!page?.content) {
+    return null
+  }
+
+  return (
+    <Suspense
+      fallback={
+        <Flex
+          justify='center'
+          align='center'
+          style={{ width: '100%', height: '100%' }}
+        >
+          <Spin indicator={<LoadingOutlined spin />} />
+        </Flex>
+      }
+    >
+      {page.content()}
+    </Suspense>
+  )
+}
+
+ModelPage.propTypes = {
+  modelName: PropTypes.string.isRequired,
+  pageName: PropTypes.string.isRequired
+}
+
+export default ModelPage

src/components/Dashboard/common/ObjectActions.jsx

@@ -6,6 +6,7 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import { useActionsModal } from '../context/ActionsModalContext'
 import KeyboardShortcut from './KeyboardShortcut'
 import { AuthContext } from '../context/AuthContext'
+import { buildActionUrl, stripPageActionParams } from '../../../utils/modelActions'
 
 // Recursively filter actions based on visibleActions
 function filterActionsByVisibility(actions, visibleActions) {
@@ -69,22 +70,43 @@ function cleanDividers(items) {
   return cleaned
 }
 
+function isSameActionUrl(action, actionUrl, currentUrl, pathname, search) {
+  if (action.type === 'modal') {
+    return actionUrl === currentUrl
+  }
+  return (
+    stripPageActionParams(
+      actionUrl.split('?')[0],
+      actionUrl.includes('?') ? actionUrl.split('?')[1] : ''
+    ) === stripPageActionParams(pathname, search)
+  )
+}
+
 // Recursively map actions to AntD Dropdown items
 function mapActionsToMenuItems(
   actions,
   currentUrlWithActions,
   id,
   objectData,
-  userProfile
+  userProfile,
+  model,
+  pathname,
+  search
 ) {
   return cleanDividers(
     actions.map((action) => {
       if (action.type === 'divider') {
         return { type: 'divider' }
       }
-      const actionUrl = action.url ? action.url(id) : undefined
+      const actionUrl = buildActionUrl(model, action, id, pathname, search)
 
-      var disabled = actionUrl && actionUrl === currentUrlWithActions
+      var disabled = isSameActionUrl(
+        action,
+        actionUrl,
+        currentUrlWithActions,
+        pathname,
+        search
+      )
       var visible = true
 
       if (action.disabled) {
@@ -120,7 +142,10 @@ function mapActionsToMenuItems(
           currentUrlWithActions,
           id,
           objectData,
-          userProfile
+          userProfile,
+          model,
+          pathname,
+          search
         )
       }
       return item
@@ -128,13 +153,6 @@ function mapActionsToMenuItems(
   )
 }
 
-const stripActionParam = (pathname, search) => {
-  const params = new URLSearchParams(search)
-  params.delete('action')
-  const query = params.toString()
-  return pathname + (query ? `?${query}` : '')
-}
-
 const ObjectActions = ({
   type,
   id,
@@ -150,11 +168,6 @@ const ObjectActions = ({
   const location = useLocation()
   const { showActionsModal } = useActionsModal()
   const { userProfile } = useContext(AuthContext)
-  // Get current url without 'action' param
-  const currentUrlWithoutActions = stripActionParam(
-    location.pathname,
-    location.search
-  )
 
   // First filter by visibility, then by current URL
   const visibilityFilteredActions = filterActionsByVisibility(
@@ -163,12 +176,23 @@ const ObjectActions = ({
   )
 
   const filteredActions = cleanDividers(
-    visibilityFilteredActions.filter(
+    visibilityFilteredActions.filter((action) => {
-      (action) =>
+      if (action.type === 'divider') return true
-        action.type === 'divider' ||
+      const actionUrl = buildActionUrl(
-        typeof action.url !== 'function' ||
+        model,
-        action.url(id) !== currentUrlWithoutActions
+        action,
-    )
+        id,
+        location.pathname,
+        location.search
+      )
+      return !isSameActionUrl(
+        action,
+        actionUrl,
+        location.pathname + location.search,
+        location.pathname,
+        location.search
+      )
+    })
   )
 
   const currentUrlWithActions = location.pathname + location.search
@@ -180,7 +204,10 @@ const ObjectActions = ({
       currentUrlWithActions,
       id,
       objectData,
-      userProfile
+      userProfile,
+      model,
+      location.pathname,
+      location.search
     ),
     onClick: (info) => {
       // Find the action by key
@@ -195,8 +222,10 @@ const ObjectActions = ({
         return null
       }
       const action = findAction(filteredActions, info.key)
-      if (action && action.url) {
+      if (action) {
-        navigate(action.url(id))
+        navigate(
+          buildActionUrl(model, action, id, location.pathname, location.search)
+        )
       }
     }
   }

src/components/Dashboard/common/ObjectDisplay.jsx

@@ -4,6 +4,7 @@ import { LoadingOutlined } from '@ant-design/icons'
 import { useState, useEffect, useContext, useCallback, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { getModelByName } from '../../../database/ObjectModels'
+import { buildActionUrl } from '../../../utils/modelActions'
 import { ApiServerContext } from '../context/ApiServerContext'
 import { AuthContext } from '../context/AuthContext'
 import merge from 'lodash/merge'
@@ -182,7 +183,13 @@ const ObjectDisplay = ({
   const objectId = getStringId(objectData)
 
   if (defaultModelActions.length >= 1 && objectId) {
-    hyperlink = defaultModelActions[0].url(objectId)
+    hyperlink = buildActionUrl(
+      model,
+      defaultModelActions[0],
+      objectId,
+      '',
+      ''
+    )
   }
 
   // Render name with hyperlink/spotlight support

src/components/Dashboard/common/ObjectForm.jsx

@@ -18,6 +18,7 @@ import set from 'lodash/set'
 import { getModelByName } from '../../../database/ObjectModels'
 import { useLocation, useNavigate } from 'react-router-dom'
 import PropTypes from 'prop-types'
+import { useActions } from '../context/ActionsContext'
 
 const arrayReplaceCustomizer = (objValue, srcValue) => {
   if (Array.isArray(srcValue)) {
@@ -86,9 +87,13 @@ const buildObjectFromEntries = (entries = []) => {
  * - children: function({
  *     loading, isEditing, startEditing, cancelEditing, handleUpdate, form, formValid, objectData, setIsEditing, setObjectData
  *   }) => ReactNode
+ * - setCurrentObject: boolean (sync object data to ActionsContext)
  */
 const ObjectForm = forwardRef(
-  ({ id, type, style, children, onEdit, onStateChange }, ref) => {
+  (
+    { id, type, style, children, onEdit, onStateChange, setCurrentObject = false },
+    ref
+  ) => {
     const [objectData, setObjectData] = useState(null)
     const serverObjectData = useRef(null)
     const onStateChangeRef = useRef(onStateChange)
@@ -118,6 +123,10 @@ const ObjectForm = forwardRef(
       flushFile
     } = useContext(ApiServerContext)
     const { token, userProfile } = useContext(AuthContext)
+    const {
+      setCurrentObject: setActionsCurrentObject,
+      setCurrentObjectType: setActionsCurrentObjectType
+    } = useActions()
     const location = useLocation()
     const navigate = useNavigate()
 
@@ -588,6 +597,32 @@ const ObjectForm = forwardRef(
       return () => clearTimeout(timeoutId)
     }, [objectData])
 
+    useEffect(() => {
+      if (!setCurrentObject) {
+        return
+      }
+
+      setActionsCurrentObjectType(type)
+
+      return () => {
+        setActionsCurrentObject(null)
+        setActionsCurrentObjectType(null)
+      }
+    }, [
+      setCurrentObject,
+      type,
+      setActionsCurrentObject,
+      setActionsCurrentObjectType
+    ])
+
+    useEffect(() => {
+      if (!setCurrentObject || !objectData?._id || objectData._id !== id) {
+        return
+      }
+
+      setActionsCurrentObject(objectData)
+    }, [setCurrentObject, objectData, id, setActionsCurrentObject])
+
     const startEditing = async () => {
       try {
         const latestActivities = await fetchObjectActivities(id, type)
@@ -814,7 +849,8 @@ ObjectForm.propTypes = {
   children: PropTypes.func.isRequired,
   style: PropTypes.object,
   onEdit: PropTypes.func,
-  onStateChange: PropTypes.func
+  onStateChange: PropTypes.func,
+  setCurrentObject: PropTypes.bool
 }
 
 export default ObjectForm

src/components/Dashboard/common/ObjectTable.jsx

@@ -39,10 +39,11 @@ import ObjectCard from './ObjectCard'
 import FilterSidebar from './FilterSidebar'
 import XMarkIcon from '../../Icons/XMarkIcon'
 import CheckIcon from '../../Icons/CheckIcon'
-import { useNavigate, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import QuestionCircleIcon from '../../Icons/QuestionCircleIcon'
 import { AuthContext } from '../context/AuthContext'
 import { ElectronContext } from '../context/ElectronContext'
+import { useActions } from '../context/ActionsContext'
 import ActionsIcon from '../../Icons/ActionsIcon'
 import FilterIcon from '../../Icons/FilterIcon'
 import ScrollBox from './ScrollBox'
@@ -130,10 +131,10 @@ const ObjectTable = forwardRef(
     },
     ref
   ) => {
-    const { token } = useContext(AuthContext)
+    const { token, userProfile } = useContext(AuthContext)
     const { isElectron } = useContext(ElectronContext)
+    const { callAction } = useActions()
     const onStateChangeRef = useRef(onStateChange)
-    const { userProfile } = useContext(AuthContext)
     useEffect(() => {
       onStateChangeRef.current = onStateChange
     }, [onStateChange])
@@ -147,7 +148,6 @@ const ObjectTable = forwardRef(
       clearObjectActivity
     } = useContext(ApiServerContext)
     const isMobile = useMediaQuery({ maxWidth: 768 })
-    const navigate = useNavigate()
     const location = useLocation()
     const {
       getPersistedFilter,
@@ -292,9 +292,11 @@ const ObjectTable = forwardRef(
                     ) {
                       return
                     }
-                    if (action.url) {
+                    callAction(
-                      navigate(action.url(objectData._id))
+                      action,
-                    }
+                      { ...objectData, _user: userProfile },
+                      type
+                    )
                   }}
                 />
               </Tooltip>

src/components/Dashboard/common/UserProfilePopover.jsx

@@ -6,6 +6,7 @@ import { useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
 import LogoutIcon from '../../Icons/LogoutIcon'
 import { User } from '../../../database/models/User'
+import { buildActionUrl } from '../../../utils/modelActions'
 import { AuthContext } from '../context/AuthContext'
 
 const { Text } = Typography
@@ -29,8 +30,8 @@ const UserProfilePopover = ({ onClose }) => {
   const runAction = (action) => {
     if (action.name === 'logout') {
       logout()
-    } else if (action.url && userProfile?._id) {
+    } else if (userProfile?._id) {
-      const url = action.url(userProfile._id)
+      const url = buildActionUrl(User, action, userProfile._id, '', '')
       navigate(url)
     }
     onClose?.()

src/components/Dashboard/context/ActionsContext.jsx

@@ -0,0 +1,222 @@
+import {
+  createContext,
+  Suspense,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from 'react'
+import PropTypes from 'prop-types'
+import { Modal, Spin, Flex } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { getModelByName } from '../../../database/ObjectModels'
+import {
+  buildActionUrl,
+  findAction,
+  getObjectIdFromSearch,
+  stripModalActionParams
+} from '../../../utils/modelActions'
+import { AuthContext } from './AuthContext'
+
+const ActionsContext = createContext()
+
+const ActionsProvider = ({ children }) => {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { userProfile } = useContext(AuthContext)
+  const [currentObject, setCurrentObject] = useState(null)
+  const [currentObjectType, setCurrentObjectType] = useState(null)
+  const [modalAction, setModalAction] = useState(null)
+  const [onModalOk, setOnModalOk] = useState(null)
+  const lastHandledAction = useRef(null)
+
+  const searchParams = new URLSearchParams(location.search)
+  const actionName = searchParams.get('action')
+  const actionObjectType = searchParams.get('actionObjectType')
+
+  const clearAction = useCallback(() => {
+    const nextUrl = stripModalActionParams(location.pathname, location.search)
+    if (nextUrl !== location.pathname + location.search) {
+      navigate(nextUrl, { replace: true })
+    }
+    setModalAction(null)
+    lastHandledAction.current = null
+  }, [location.pathname, location.search, navigate])
+
+  const handleModalOk = useCallback(() => {
+    onModalOk?.()
+    clearAction()
+  }, [clearAction, onModalOk])
+
+  const callAction = useCallback(
+    (action, objectData, objectType) => {
+      setCurrentObject(objectData)
+      setCurrentObjectType(objectType)
+      const model = getModelByName(objectType)
+      const url = buildActionUrl(
+        model,
+        action,
+        objectData._id,
+        location.pathname,
+        location.search
+      )
+      navigate(url)
+    },
+    [location.pathname, location.search, navigate]
+  )
+
+  useEffect(() => {
+    if (!actionObjectType) return
+
+    const model = getModelByName(actionObjectType)
+    if (!model.pages?.length) return
+
+    const onPage = model.pages.some(
+      (page) => location.pathname === `${model.url}/${page.name}`
+    )
+    if (!onPage) return
+
+    if (actionName) {
+      const action = findAction(model, actionName)
+      if (action?.type === 'modal') return
+    }
+
+    const params = new URLSearchParams(location.search)
+    params.delete('actionObjectType')
+    const query = params.toString()
+    const nextUrl = location.pathname + (query ? `?${query}` : '')
+    if (nextUrl !== location.pathname + location.search) {
+      navigate(nextUrl, { replace: true })
+    }
+  }, [
+    actionName,
+    actionObjectType,
+    location.pathname,
+    location.search,
+    navigate
+  ])
+
+  useEffect(() => {
+    if (!actionName || !actionObjectType) {
+      setModalAction(null)
+      lastHandledAction.current = null
+      return
+    }
+
+    const actionKey = `${actionObjectType}:${actionName}:${location.pathname}${location.search}`
+    if (lastHandledAction.current === actionKey) return
+
+    const model = getModelByName(actionObjectType)
+    const action = findAction(model, actionName)
+    if (!action) return
+
+    if (action.type === 'modal') {
+      lastHandledAction.current = actionKey
+      setModalAction(action)
+      return
+    }
+
+    if (action.type === 'page') {
+      const pageName = action.pageName || action.name
+      const objectId =
+        getObjectIdFromSearch(actionObjectType, location.search) ||
+        currentObject?._id
+      if (!objectId) return
+
+      const expectedPath = `${model.url}/${pageName}`
+      if (location.pathname === expectedPath) {
+        lastHandledAction.current = actionKey
+        return
+      }
+
+      lastHandledAction.current = actionKey
+      const url = buildActionUrl(
+        model,
+        action,
+        objectId,
+        location.pathname,
+        location.search
+      )
+      navigate(url, { replace: true })
+    }
+  }, [
+    actionName,
+    actionObjectType,
+    currentObject,
+    location.pathname,
+    location.search,
+    navigate
+  ])
+
+  const modalObjectData = currentObject
+    ? { ...currentObject, _user: userProfile }
+    : null
+
+  const [modelWidth, setModelWidth] = useState(520)
+  useEffect(() => {
+    if (modalAction?.modalWidth) {
+      setModelWidth(modalAction.modalWidth)
+    }
+  }, [modalAction?.modalWidth])
+
+  const [modalCentered, setModalCentered] = useState(false)
+  useEffect(() => {
+    if (modalAction?.modalCentered !== undefined) {
+      setModalCentered(modalAction.modalCentered)
+    }
+  }, [modalAction?.modalCentered])
+
+  return (
+    <ActionsContext.Provider
+      value={{
+        currentObject,
+        currentObjectType,
+        setCurrentObject,
+        setCurrentObjectType,
+        callAction,
+        clearAction,
+        setOnModalOk
+      }}
+    >
+      <Modal
+        open={modalAction != null}
+        destroyOnHidden={true}
+        width={modelWidth}
+        onCancel={clearAction}
+        footer={null}
+        centered={modalCentered}
+      >
+        <Suspense
+          fallback={
+            <Flex
+              justify='center'
+              align='center'
+              style={{
+                height: modalCentered ? '120px' : '357px',
+                width: '100%'
+              }}
+            >
+              <Spin indicator={<LoadingOutlined spin />} />
+            </Flex>
+          }
+        >
+          {modalAction?.content && modalObjectData
+            ? modalAction.content(modalObjectData, { onOk: handleModalOk })
+            : null}
+        </Suspense>
+      </Modal>
+      {children}
+    </ActionsContext.Provider>
+  )
+}
+
+ActionsProvider.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
+const useActions = () => useContext(ActionsContext)
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { ActionsProvider, ActionsContext, useActions }

src/components/Dashboard/context/ActionsModalContext.jsx

@@ -12,16 +12,15 @@ import { useLocation, useNavigate } from 'react-router-dom'
 
 import { getModelByName } from '../../../database/ObjectModels'
 import { AuthContext } from './AuthContext'
+import {
+  buildActionUrl,
+  stripActionParams
+} from '../../../utils/modelActions'
 
 const ActionsModalContext = createContext()
 
-// Remove the "action" query param from a URL so we don't navigate to the same URL again
+// Remove action query params from a URL so we don't navigate to the same URL again
-const stripActionParam = (pathname, search) => {
+const stripActionParam = stripActionParams
-  const params = new URLSearchParams(search)
-  params.delete('action')
-  const query = params.toString()
-  return pathname + (query ? `?${query}` : '')
-}
 
 // Flatten nested actions (including children) into a single list
 const flattenActions = (actions, parentLabel = '') => {
@@ -34,7 +33,10 @@ const flattenActions = (actions, parentLabel = '') => {
       return
     }
 
-    const hasUrl = typeof action.url === 'function'
+    const hasUrl =
+      typeof action.url === 'function' ||
+      action.type === 'page' ||
+      action.type === 'modal'
     const hasChildren =
       Array.isArray(action.children) && action.children.length > 0
 
@@ -122,7 +124,13 @@ const ActionsModalProvider = ({ children }) => {
     if (!action) return true
 
     let disabled = false
-    const url = action.url ? action.url(id) : undefined
+    const url = buildActionUrl(
+      getModelByName(context.type),
+      action,
+      id,
+      location.pathname,
+      location.search
+    )
 
     // Match ObjectActions default disabling behaviour
     if (url && url === currentUrlWithoutActions) {
@@ -174,11 +182,18 @@ const ActionsModalProvider = ({ children }) => {
   })
 
   const runAction = (action) => {
-    if (!action || typeof action.url !== 'function') return
+    if (!action) return
     if (getActionDisabled(action)) return
 
     const { id } = context
-    const targetUrl = action.url(id)
+    const model = getModelByName(context.type)
+    const targetUrl = buildActionUrl(
+      model,
+      action,
+      id,
+      location.pathname,
+      location.search
+    )
     if (targetUrl && targetUrl !== '#') {
       navigate(targetUrl)
       hideActionsModal()

src/components/Dashboard/context/SpotlightContext.jsx

@@ -33,6 +33,7 @@ import {
   getModelByPrefix,
   searchModelsByLabel
 } from '../../../database/ObjectModels'
+import { buildActionUrl } from '../../../utils/modelActions'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon'
 import MenuIcon from '../../Icons/MenuIcon'
 import { ApiServerContext } from './ApiServerContext'
@@ -283,11 +284,10 @@ const SpotlightContent = ({
   const getDefaultRowAction = (model) =>
     getRowActions(model).find((action) => action.default)
 
-  const triggerRowAction = (action, item) => {
+  const triggerRowAction = (action, item, model) => {
-    if (action && action.url) {
+    if (action) {
-      // Try to get the id (support _id or id)
       const itemId = item._id || item.id
-      const url = action.url(itemId)
+      const url = buildActionUrl(model, action, itemId, '', '')
       if (url && url !== '#') {
         if (isElectron) {
           openInternalUrl(url)
@@ -314,7 +314,7 @@ const SpotlightContent = ({
             ? getDefaultRowAction(model)
             : null
         if (defaultAction) {
-          triggerRowAction(defaultAction, item)
+          triggerRowAction(defaultAction, item, model)
         }
         return
       }
@@ -332,7 +332,7 @@ const SpotlightContent = ({
               ? getDefaultRowAction(model)
               : null
           if (defaultAction) {
-            triggerRowAction(defaultAction, item)
+            triggerRowAction(defaultAction, item, model)
           }
         }
         return
@@ -539,7 +539,7 @@ const SpotlightContent = ({
                               }
                               size={'small'}
                               type={'text'}
-                              onClick={() => triggerRowAction(action, item)}
+                              onClick={() => triggerRowAction(action, item, model)}
                             />
                           ))}
                         {rowActions
@@ -556,7 +556,7 @@ const SpotlightContent = ({
                               }
                               size={'small'}
                               type={'text'}
-                              onClick={() => triggerRowAction(action, item)}
+                              onClick={() => triggerRowAction(action, item, model)}
                             />
                           ))}
                         {shortcutText && <Text keyboard>{shortcutText}</Text>}

src/database/models/AppPassword.js

@@ -1,3 +1,11 @@
+import { createElement, lazy } from 'react'
+
+const AppPasswordInfo = lazy(
+  () => import('../../components/Dashboard/Management/AppPasswords/AppPasswordInfo')
+)
+const RegenerateAppPasswordSecret = lazy(
+  () => import('../../components/Dashboard/Management/AppPasswords/RegenerateAppPasswordSecret')
+)
 import AppPasswordIcon from '../../components/Icons/AppPasswordIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,21 +23,20 @@ export const AppPassword = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/management/apppasswords/info?appPasswordId=${_id}`
     },
-
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/apppasswords/info?appPasswordId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -38,21 +45,21 @@ export const AppPassword = {
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/apppasswords/info?appPasswordId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/apppasswords/info?appPasswordId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -60,17 +67,25 @@ export const AppPassword = {
     { type: 'divider' },
     {
       name: 'regenerateSecret',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Regenerate Secret',
-      type: 'button',
       row: true,
       icon: LockIcon,
-      url: (_id) =>
-        `/dashboard/management/apppasswords/info?appPasswordId=${_id}&action=regenerateSecret`,
       disabled: (objectData) => {
         return objectData?._user?._id != objectData?.user?._id
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(RegenerateAppPasswordSecret, { id: objectData._id, onOk })
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(AppPasswordInfo)
+    }
+  ],
   columns: ['_reference', 'name', 'user', 'active', 'createdAt', 'updatedAt'],
   filters: [
     '_id',

src/database/models/Client.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const ClientInfo = lazy(
+  () => import('../../components/Dashboard/Sales/Clients/ClientInfo')
+)
 import ClientIcon from '../../components/Icons/ClientIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,38 +20,40 @@ export const Client = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/sales/clients/info?clientId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) => `/dashboard/sales/clients/info?clientId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/sales/clients/info?clientId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/sales/clients/info?clientId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -54,11 +61,17 @@ export const Client = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/sales/clients/info?clientId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(ClientInfo)
     }
   ],
   columns: [

src/database/models/Courier.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const CourierInfo = lazy(
+  () => import('../../components/Dashboard/Management/Couriers/CourierInfo')
+)
 import CourierIcon from '../../components/Icons/CourierIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,39 +20,40 @@ export const Courier = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/couriers/info?courierId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/couriers/info?courierId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/couriers/info?courierId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/couriers/info?courierId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -55,11 +61,17 @@ export const Courier = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/management/couriers/info?courierId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(CourierInfo)
     }
   ],
   columns: ['_reference', 'name', 'country', 'email', 'website', 'createdAt'],

src/database/models/CourierService.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const CourierServiceInfo = lazy(
+  () => import('../../components/Dashboard/Management/CourierServices/CourierServiceInfo')
+)
 import CourierServiceIcon from '../../components/Icons/CourierServiceIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,40 +20,40 @@ export const CourierService = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/management/courierservices/info?courierServiceId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/courierservices/info?courierServiceId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/courierservices/info?courierServiceId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/courierservices/info?courierServiceId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -56,11 +61,17 @@ export const CourierService = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/management/courierservices/info?courierServiceId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(CourierServiceInfo)
     }
   ],
   columns: [

src/database/models/DocumentJob.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const DocumentJobInfo = lazy(
+  () => import('../../components/Dashboard/Management/DocumentJobs/DocumentJobInfo')
+)
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
@@ -15,44 +20,49 @@ export const DocumentJob = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/management/documentjobs/info?documentJobId=${_id}`
     },
-
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/documentjobs/info?documentJobId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
+    }
+,    {
+      name: 'cancelEdit',
+      label: 'Cancel Edits',
+      type: 'page',
+      pageName: 'info',
+      icon: XMarkIcon,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
     },
     {
       name: 'finishEdit',
       label: 'Save Edits',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/management/documentjobs/info?documentJobId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
+  ],
+  pages: [
     {
-      name: 'cancelEdit',
+      name: 'info',
-      label: 'Cancel Edits',
+      content: () => createElement(DocumentJobInfo)
-      icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/management/documentjobs/info?documentJobId=${_id}&action=cancelEdit`,
-      visible: (objectData) => {
-        return objectData?._isEditing && objectData?._isEditing == true
-      }
     }
   ],
   columns: ['_reference', 'name', 'state', 'createdAt', 'updatedAt'],

src/database/models/DocumentPrinter.js

@@ -1,8 +1,13 @@
+import { createElement, lazy } from 'react'
+
+const DocumentPrinterInfo = lazy(
+  () => import('../../components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo')
+)
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
-import DocumentPrinterIcon from '../../components/Icons/DocumentPrinterIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
 import XMarkIcon from '../../components/Icons/XMarkIcon'
+import DocumentPrinterIcon from '../../components/Icons/DocumentPrinterIcon'
 
 export const DocumentPrinter = {
   name: 'documentPrinter',
@@ -14,44 +19,49 @@ export const DocumentPrinter = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/management/documentprinters/info?documentPrinterId=${_id}`
     },
-
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/documentprinters/info?documentPrinterId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
+    }
+,    {
+      name: 'cancelEdit',
+      label: 'Cancel Edits',
+      type: 'page',
+      pageName: 'info',
+      icon: XMarkIcon,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
     },
     {
       name: 'finishEdit',
       label: 'Save Edits',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/management/documentprinters/info?documentPrinterId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
+  ],
+  pages: [
     {
-      name: 'cancelEdit',
+      name: 'info',
-      label: 'Cancel Edits',
+      content: () => createElement(DocumentPrinterInfo)
-      icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/management/documentprinters/info?documentPrinterId=${_id}&action=cancelEdit`,
-      visible: (objectData) => {
-        return objectData?._isEditing && objectData?._isEditing == true
-      }
     }
   ],
   columns: [

src/database/models/DocumentSize.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const DocumentSizeInfo = lazy(
+  () => import('../../components/Dashboard/Management/DocumentSizes/DocumentSizeInfo')
+)
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
@@ -14,44 +19,49 @@ export const DocumentSize = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/management/documentsizes/info?documentSizeId=${_id}`
     },
-
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/documentsizes/info?documentSizeId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
+    }
+,    {
+      name: 'cancelEdit',
+      label: 'Cancel Edits',
+      type: 'page',
+      pageName: 'info',
+      icon: XMarkIcon,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
     },
     {
       name: 'finishEdit',
       label: 'Save Edits',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/management/documentsizes/info?documentSizeId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
+  ],
+  pages: [
     {
-      name: 'cancelEdit',
+      name: 'info',
-      label: 'Cancel Edits',
+      content: () => createElement(DocumentSizeInfo)
-      icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/management/documentsizes/info?documentSizeId=${_id}&action=cancelEdit`,
-      visible: (objectData) => {
-        return objectData?._isEditing && objectData?._isEditing == true
-      }
     }
   ],
   columns: [

src/database/models/DocumentTemplate.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const DocumentTemplateInfo = lazy(
+  () => import('../../components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo')
+)
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
@@ -23,44 +28,49 @@ export const DocumentTemplate = {
     },
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/management/documenttemplates/info?documentTemplateId=${_id}`
     },
-
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/documenttemplates/info?documentTemplateId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
+    }
+,    {
+      name: 'cancelEdit',
+      label: 'Cancel Edits',
+      type: 'page',
+      pageName: 'info',
+      icon: XMarkIcon,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
     },
     {
       name: 'finishEdit',
       label: 'Save Edits',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/management/documenttemplates/info?documentTemplateId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
+  ],
+  pages: [
     {
-      name: 'cancelEdit',
+      name: 'info',
-      label: 'Cancel Edits',
+      content: () => createElement(DocumentTemplateInfo)
-      icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/management/documenttemplates/info?documentTemplateId=${_id}&action=cancelEdit`,
-      visible: (objectData) => {
-        return objectData?._isEditing && objectData?._isEditing == true
-      }
     }
   ],
   columns: [

src/database/models/Filament.js

@@ -1,8 +1,16 @@
+import { createElement, lazy } from 'react'
+
+const FilamentInfo = lazy(
+  () => import('../../components/Dashboard/Management/Filaments/FilamentInfo')
+)
+const NewFilamentSku = lazy(
+  () => import('../../components/Dashboard/Management/FilamentSkus/NewFilamentSku')
+)
 import EditIcon from '../../components/Icons/EditIcon'
-import FilamentIcon from '../../components/Icons/FilamentIcon'
-import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
 import XMarkIcon from '../../components/Icons/XMarkIcon'
+import FilamentIcon from '../../components/Icons/FilamentIcon'
+import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import BinIcon from '../../components/Icons/BinIcon'
 
@@ -16,39 +24,40 @@ export const Filament = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/filaments/info?filamentId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/filaments/info?filamentId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/filaments/info?filamentId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/filaments/info?filamentId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -56,28 +65,36 @@ export const Filament = {
     { type: 'divider' },
     {
       name: 'newFilamentSku',
+      type: 'modal',
+      modalWidth: 700,
       label: 'New Filament SKU',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
-        `/dashboard/management/filaments/info?filamentId=${_id}&action=newFilamentSku`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(NewFilamentSku, { defaultValues: { filament: objectData }, onOk, reset: true })
       }
     },
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/management/filaments/info?filamentId=${_id}&action=delete`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(FilamentInfo)
+    }
+  ],
   columns: [
     '_reference',
     'name',

src/database/models/FilamentProfile.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const FilamentProfileInfo = lazy(
+  () => import('../../components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo')
+)
 import FilamentProfileIcon from '../../components/Icons/FilamentProfileIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,47 +20,57 @@ export const FilamentProfile = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/production/filamentprofiles/info?filamentProfileId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/production/filamentprofiles/info?filamentProfileId=${_id}&action=edit`,
       visible: (objectData) => !objectData?._isEditing
     },
-    {
-      name: 'finishEdit',
-      label: 'Save Edits',
-      icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/production/filamentprofiles/info?filamentProfileId=${_id}&action=finishEdit`,
-      visible: (objectData) => objectData?._isEditing === true
-    },
     {
       name: 'cancelEdit',
       label: 'Cancel Edits',
+      type: 'page',
+      pageName: 'info',
       icon: XMarkIcon,
-      url: (_id) =>
+      visible: (objectData) => {
-        `/dashboard/production/filamentprofiles/info?filamentProfileId=${_id}&action=cancelEdit`,
+        return objectData?._isEditing && objectData?._isEditing == true
-      visible: (objectData) => objectData?._isEditing === true
+      }
+    },
+    {
+      name: 'finishEdit',
+      label: 'Save Edits',
+      type: 'page',
+      pageName: 'info',
+      icon: CheckIcon,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
     },
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       row: true,
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/production/filamentprofiles/info?filamentProfileId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(FilamentProfileInfo)
     }
   ],
   columns: ['_reference', 'name', 'filamentType', 'filament', 'updatedAt'],

src/database/models/FilamentSku.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const FilamentSkuInfo = lazy(
+  () => import('../../components/Dashboard/Management/FilamentSkus/FilamentSkuInfo')
+)
 import FilamentSkuIcon from '../../components/Icons/FilamentSkuIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,40 +20,40 @@ export const FilamentSku = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/management/filamentskus/info?filamentSkuId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/filamentskus/info?filamentSkuId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/filamentskus/info?filamentSkuId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/filamentskus/info?filamentSkuId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -56,11 +61,17 @@ export const FilamentSku = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/management/filamentskus/info?filamentSkuId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(FilamentSkuInfo)
     }
   ],
   columns: [

src/database/models/FilamentStock.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const FilamentStockInfo = lazy(
+  () => import('../../components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo')
+)
 import FilamentStockIcon from '../../components/Icons/FilamentStockIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 
@@ -11,12 +16,18 @@ export const FilamentStock = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
+    }
-        `/dashboard/inventory/filamentstocks/info?filamentStockId=${_id}`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(FilamentStockInfo)
     }
   ],
   columns: [

src/database/models/File.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const FileInfo = lazy(
+  () => import('../../components/Dashboard/Management/Files/FileInfo')
+)
 import DownloadIcon from '../../components/Icons/DownloadIcon'
 import FileIcon from '../../components/Icons/FileIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@@ -16,59 +21,66 @@ export const File = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/files/info?fileId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/files/info?fileId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/files/info?fileId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/files/info?fileId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'download',
+      type: 'page',
+      pageName: 'info',
       label: 'Download',
       row: true,
-      icon: DownloadIcon,
+      icon: DownloadIcon
-      url: (_id) =>
-        `/dashboard/management/files/info?fileId=${_id}&action=download`
     },
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/management/files/info?fileId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(FileInfo)
     }
   ],
   columns: [

src/database/models/GCodeFile.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const GCodeFileInfo = lazy(
+  () => import('../../components/Dashboard/Production/GCodeFiles/GCodeFileInfo')
+)
 import DownloadIcon from '../../components/Icons/DownloadIcon'
 import EditIcon from '../../components/Icons/EditIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
@@ -24,50 +29,57 @@ export const GCodeFile = {
     },
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/production/gcodefiles/info?gcodeFileId=${_id}`
     },
     {
       name: 'download',
+      type: 'page',
+      pageName: 'info',
       label: 'Download',
       row: true,
-      icon: DownloadIcon,
+      icon: DownloadIcon
-      url: (_id) =>
-        `/dashboard/production/gcodefiles/info?gcodeFileId=${_id}&action=download`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/production/gcodefiles/info?gcodeFileId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
+    }
+,    {
+      name: 'cancelEdit',
+      label: 'Cancel Edits',
+      type: 'page',
+      pageName: 'info',
+      icon: XMarkIcon,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
     },
     {
       name: 'finishEdit',
       label: 'Save Edits',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/production/gcodefiles/info?gcodeFileId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
+  ],
+  pages: [
     {
-      name: 'cancelEdit',
+      name: 'info',
-      label: 'Cancel Edits',
+      content: () => createElement(GCodeFileInfo)
-      icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/production/gcodefiles/info?gcodeFileId=${_id}&action=cancelEdit`,
-      visible: (objectData) => {
-        return objectData?._isEditing && objectData?._isEditing == true
-      }
     }
   ],
 

src/database/models/Host.js

@@ -1,3 +1,11 @@
+import { createElement, lazy } from 'react'
+
+const HostInfo = lazy(
+  () => import('../../components/Dashboard/Management/Hosts/HostInfo')
+)
+const HostOTP = lazy(
+  () => import('../../components/Dashboard/Management/Hosts/HostOtp')
+)
 import HostIcon from '../../components/Icons/HostIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -16,40 +24,40 @@ export const Host = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/hosts/info?hostId=${_id}`
     },
-
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/hosts/info?hostId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/hosts/info?hostId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/hosts/info?hostId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -59,18 +67,27 @@ export const Host = {
     },
     {
       name: 'connect',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Connect',
       icon: OTPIcon,
-      url: (_id) =>
+      content: (objectData, { onOk } = {}) => {
-        `/dashboard/management/hosts/info?hostId=${_id}&action=hostOTP`
+        return createElement(HostOTP, { id: objectData._id, onOk })
+      }
     },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/management/hosts/info?hostId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(HostInfo)
     }
   ],
   columns: ['_reference', 'name', 'state', 'tags', 'connectedAt'],

src/database/models/Invoice.js

@@ -1,3 +1,17 @@
+import { createElement, lazy } from 'react'
+
+const InvoiceInfo = lazy(
+  () => import('../../components/Dashboard/Finance/Invoices/InvoiceInfo')
+)
+const PostInvoice = lazy(
+  () => import('../../components/Dashboard/Finance/Invoices/PostInvoice')
+)
+const AcknowledgeInvoice = lazy(
+  () => import('../../components/Dashboard/Finance/Invoices/AcknowledgeInvoice')
+)
+const NewPayment = lazy(
+  () => import('../../components/Dashboard/Finance/Payments/NewPayment')
+)
 import InvoiceIcon from '../../components/Icons/InvoiceIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
@@ -16,19 +30,19 @@ export const Invoice = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/finance/invoices/info?invoiceId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
-      type: 'button',
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -38,34 +52,31 @@ export const Invoice = {
     },
     {
       name: 'cancelEdit',
-      label: 'Cancel Edit',
+      label: 'Cancel Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=cancelEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'finishEdit',
-      label: 'Finish Edit',
+      label: 'Save Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
-      type: 'button',
       icon: BinIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=delete`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -76,47 +87,59 @@ export const Invoice = {
     { type: 'divider' },
     {
       name: 'newPayment',
+      type: 'modal',
+      modalWidth: 700,
       label: 'New Payment',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
-        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=newPayment`,
       disabled: (objectData) => {
         const allowedStates = ['acknowledged', 'partiallyPaid', 'overdue']
         return !allowedStates.includes(objectData?.state?.type)
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(NewPayment, {
+          defaultValues: {
+            invoice: objectData,
+            amount: objectData?.grandTotalAmount
+          },
+          onOk,
+          reset: true
+        })
       }
     },
     { type: 'divider' },
     {
       name: 'post',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Post',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=post`,
       visible: (objectData) => {
         return objectData?.state?.type == 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(PostInvoice, { objectData, onOk })
       }
     },
     {
       name: 'acknowledge',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Acknowledge',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=acknowledge`,
       visible: (objectData) => {
         return objectData?.state?.type == 'sent'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(AcknowledgeInvoice, { objectData, onOk })
       }
     },
     {
       name: 'cancel',
+      type: 'page',
+      pageName: 'info',
       label: 'Cancel',
-      type: 'button',
       icon: XMarkIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/finance/invoices/info?invoiceId=${_id}&action=cancel`,
       disabled: (objectData) => {
         const allowedStates = [
           'acknowledged',
@@ -131,6 +154,12 @@ export const Invoice = {
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(InvoiceInfo)
+    }
+  ],
   group: ['orderType'],
   filters: [
     'vendor',

src/database/models/Job.js

@@ -1,3 +1,11 @@
+import { createElement, lazy } from 'react'
+
+const JobInfo = lazy(
+  () => import('../../components/Dashboard/Production/Jobs/JobInfo')
+)
+const DeployJob = lazy(
+  () => import('../../components/Dashboard/Production/Jobs/DeployJob')
+)
 import JobIcon from '../../components/Icons/JobIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
@@ -16,18 +24,19 @@ export const Job = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/production/jobs/info?jobId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
-      type: 'button',
       icon: EditIcon,
-      url: (_id) => `/dashboard/production/jobs/info?jobId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -37,34 +46,31 @@ export const Job = {
     },
     {
       name: 'cancelEdit',
-      label: 'Cancel Edit',
+      label: 'Cancel Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/production/jobs/info?jobId=${_id}&action=cancelEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'finishEdit',
-      label: 'Finish Edit',
+      label: 'Save Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/production/jobs/info?jobId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
-      type: 'button',
       icon: BinIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/production/jobs/info?jobId=${_id}&action=delete`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -75,17 +81,26 @@ export const Job = {
     { type: 'divider' },
     {
       name: 'deploy',
+      type: 'modal',
+      modalWidth: 680,
       label: 'Deploy',
       default: true,
       row: true,
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/production/jobs/info?jobId=${_id}&action=deploy`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeployJob, { objectData, onOk })
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(JobInfo)
+    }
+  ],
   columns: ['_reference', 'quantity', 'state', 'gcodeFile', 'createdAt'],
   filters: [
     'state',
@@ -96,13 +111,7 @@ export const Job = {
     'createdAt',
     'updatedAt'
   ],
-  sorters: [
+  sorters: ['createdAt', 'state', 'quantity', 'gcodeFile', 'updatedAt'],
-    'createdAt',
-    'state',
-    'quantity',
-    'gcodeFile',
-    'updatedAt'
-  ],
   properties: [
     {
       name: '_id',

src/database/models/Listing.js

@@ -1,3 +1,17 @@
+import { createElement, lazy } from 'react'
+
+const ListingInfo = lazy(
+  () => import('../../components/Dashboard/Sales/Listings/ListingInfo')
+)
+const NewListingVarient = lazy(
+  () => import('../../components/Dashboard/Sales/ListingVarients/NewListingVarient')
+)
+const PublishListing = lazy(
+  () => import('../../components/Dashboard/Sales/Listings/PublishListing')
+)
+const UnpublishListing = lazy(
+  () => import('../../components/Dashboard/Sales/Listings/UnpublishListing')
+)
 import ListingIcon from '../../components/Icons/ListingIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -16,39 +30,40 @@ export const Listing = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/sales/listings/info?listingId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/sales/listings/info?listingId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/sales/listings/info?listingId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/sales/listings/info?listingId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -56,44 +71,56 @@ export const Listing = {
     { type: 'divider' },
     {
       name: 'newListingVarient',
+      type: 'modal',
+      modalWidth: 700,
       label: 'New Listing Varient',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
+      content: (objectData, { onOk } = {}) => {
-        `/dashboard/sales/listings/info?listingId=${_id}&action=newListingVarient`
+        return createElement(NewListingVarient, { defaultValues: { listing: objectData }, onOk, reset: true })
+      }
     },
     { type: 'divider' },
     {
       name: 'publish',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Publish',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/sales/listings/info?listingId=${_id}&action=publish`,
       visible: (objectData) =>
         objectData?.state?.type === 'draft' ||
         objectData?.state?.type === 'inactive',
-      disabled: (objectData) => objectData?.state?.type === 'syncing'
+      disabled: (objectData) => objectData?.state?.type === 'syncing',
+      content: (objectData, { onOk } = {}) => {
+        return createElement(PublishListing, { objectData, onOk })
+      }
     },
     {
       name: 'unpublish',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Unpublish',
-      type: 'button',
       icon: XMarkIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/sales/listings/info?listingId=${_id}&action=unpublish`,
       visible: (objectData) => objectData?.state?.type === 'active',
-      disabled: (objectData) => objectData?.state?.type === 'syncing'
+      disabled: (objectData) => objectData?.state?.type === 'syncing',
+      content: (objectData, { onOk } = {}) => {
+        return createElement(UnpublishListing, { objectData, onOk })
+      }
     },
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/sales/listings/info?listingId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(ListingInfo)
     }
   ],
   columns: [

src/database/models/ListingVarient.js

@@ -1,3 +1,14 @@
+import { createElement, lazy } from 'react'
+
+const ListingVarientInfo = lazy(
+  () => import('../../components/Dashboard/Sales/ListingVarients/ListingVarientInfo')
+)
+const PublishListingVarient = lazy(
+  () => import('../../components/Dashboard/Sales/ListingVarients/PublishListingVarient')
+)
+const UnpublishListingVarient = lazy(
+  () => import('../../components/Dashboard/Sales/ListingVarients/UnpublishListingVarient')
+)
 import ListingVarientIcon from '../../components/Icons/ListingVarientIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -7,6 +18,7 @@ import BinIcon from '../../components/Icons/BinIcon'
 
 export const ListingVarient = {
   name: 'listingVarient',
+  url: '/dashboard/sales/listingvarients',
   label: 'Listing Varient',
   labelPlural: 'Listing Varients',
   prefix: 'LVR',
@@ -14,40 +26,40 @@ export const ListingVarient = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/sales/listingvarients/info?listingVarientId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/sales/listingvarients/info?listingVarientId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/sales/listingvarients/info?listingVarientId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/sales/listingvarients/info?listingVarientId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -55,35 +67,45 @@ export const ListingVarient = {
     { type: 'divider' },
     {
       name: 'publish',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Publish',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/sales/listingvarients/info?listingVarientId=${_id}&action=publish`,
       visible: (objectData) =>
         objectData?.state?.type === 'draft' ||
         objectData?.state?.type === 'inactive',
-      disabled: (objectData) => objectData?.state?.type === 'syncing'
+      disabled: (objectData) => objectData?.state?.type === 'syncing',
+      content: (objectData, { onOk } = {}) => {
+        return createElement(PublishListingVarient, { objectData, onOk })
+      }
     },
     {
       name: 'unpublish',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Unpublish',
-      type: 'button',
       icon: XMarkIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/sales/listingvarients/info?listingVarientId=${_id}&action=unpublish`,
       visible: (objectData) => objectData?.state?.type === 'active',
-      disabled: (objectData) => objectData?.state?.type === 'syncing'
+      disabled: (objectData) => objectData?.state?.type === 'syncing',
+      content: (objectData, { onOk } = {}) => {
+        return createElement(UnpublishListingVarient, { objectData, onOk })
+      }
     },
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/sales/listingvarients/info?listingVarientId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(ListingVarientInfo)
     }
   ],
   columns: [

src/database/models/Marketplace.js

@@ -1,3 +1,14 @@
+import { createElement, lazy } from 'react'
+
+const MarketplaceInfo = lazy(
+  () => import('../../components/Dashboard/Sales/Marketplaces/MarketplaceInfo')
+)
+const SyncListings = lazy(
+  () => import('../../components/Dashboard/Sales/Marketplaces/SyncListings')
+)
+const SyncOrders = lazy(
+  () => import('../../components/Dashboard/Sales/Marketplaces/SyncOrders')
+)
 import MarketplaceIcon from '../../components/Icons/MarketplaceIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -17,39 +28,40 @@ export const Marketplace = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/sales/marketplaces/info?marketplaceId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/sales/marketplaces/info?marketplaceId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/sales/marketplaces/info?marketplaceId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/sales/marketplaces/info?marketplaceId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -57,34 +69,37 @@ export const Marketplace = {
     { type: 'divider' },
     {
       name: 'syncListings',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Sync Listings',
-      type: 'button',
       icon: ReloadIcon,
-      url: (_id) =>
-        `/dashboard/sales/marketplaces/info?marketplaceId=${_id}&action=syncListings`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'ready'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(SyncListings, { objectData, onOk })
       }
     },
     {
       name: 'syncOrders',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Sync Orders',
-      type: 'button',
       icon: ReloadIcon,
-      url: (_id) =>
-        `/dashboard/sales/marketplaces/info?marketplaceId=${_id}&action=syncOrders`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'ready'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(SyncOrders, { objectData, onOk })
       }
     },
     { type: 'divider' },
     {
       name: 'connect',
+      type: 'page',
+      pageName: 'info',
       label: 'Connect',
-      type: 'button',
       icon: LinkIcon,
-      url: (_id) =>
-        `/dashboard/sales/marketplaces/info?marketplaceId=${_id}&action=connect`,
       disabled: (objectData) => {
         return (
           objectData?.state?.type == 'ready' ||
@@ -95,22 +110,20 @@ export const Marketplace = {
     },
     {
       name: 'reconnect',
+      type: 'page',
+      pageName: 'info',
       label: 'Reconnect',
-      type: 'button',
       icon: LinkIcon,
-      url: (_id) =>
-        `/dashboard/sales/marketplaces/info?marketplaceId=${_id}&action=reconnect`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'ready'
       }
     },
     {
       name: 'refreshToken',
+      type: 'page',
+      pageName: 'info',
       label: 'Refresh Token',
-      type: 'button',
       icon: ReloadIcon,
-      url: (_id) =>
-        `/dashboard/sales/marketplaces/info?marketplaceId=${_id}&action=refreshToken`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'ready'
       }
@@ -118,11 +131,17 @@ export const Marketplace = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/sales/marketplaces/info?marketplaceId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(MarketplaceInfo)
     }
   ],
   columns: [

src/database/models/Material.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const MaterialInfo = lazy(
+  () => import('../../components/Dashboard/Management/Materials/MaterialInfo')
+)
 import MaterialIcon from '../../components/Icons/MaterialIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,39 +20,40 @@ export const Material = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/materials/info?materialId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/materials/info?materialId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/materials/info?materialId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/materials/info?materialId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -55,11 +61,17 @@ export const Material = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/management/materials/info?materialId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(MaterialInfo)
     }
   ],
   columns: ['_reference', 'name', 'tags', 'createdAt', 'updatedAt'],

src/database/models/NoteType.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const NoteTypeInfo = lazy(
+  () => import('../../components/Dashboard/Management/NoteTypes/NoteTypeInfo')
+)
 import NoteTypeIcon from '../../components/Icons/NoteTypeIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -14,42 +19,49 @@ export const NoteType = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/notetypes/info?noteTypeId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/notetypes/info?noteTypeId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
+    }
+,    {
+      name: 'cancelEdit',
+      label: 'Cancel Edits',
+      type: 'page',
+      pageName: 'info',
+      icon: XMarkIcon,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
     },
     {
       name: 'finishEdit',
       label: 'Save Edits',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/management/notetypes/info?noteTypeId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
+  ],
+  pages: [
     {
-      name: 'cancelEdit',
+      name: 'info',
-      label: 'Cancel Edits',
+      content: () => createElement(NoteTypeInfo)
-      icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/management/notetypes/info?noteTypeId=${_id}&action=cancelEdit`,
-      visible: (objectData) => {
-        return objectData?._isEditing && objectData?._isEditing == true
-      }
     }
   ],
   columns: ['_reference', 'name', 'color', 'active', 'createdAt', 'updatedAt'],

src/database/models/OrderItem.js

@@ -1,9 +1,14 @@
+import { createElement, lazy } from 'react'
+
+const OrderItemInfo = lazy(
+  () => import('../../components/Dashboard/Inventory/OrderItems/OrderItemInfo')
+)
 import OrderItemIcon from '../../components/Icons/OrderItemIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
-import BinIcon from '../../components/Icons/BinIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
 import XMarkIcon from '../../components/Icons/XMarkIcon'
+import BinIcon from '../../components/Icons/BinIcon'
 
 export const OrderItem = {
   name: 'orderItem',
@@ -15,19 +20,19 @@ export const OrderItem = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/inventory/orderitems/info?orderItemId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
-      type: 'button',
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/inventory/orderitems/info?orderItemId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -37,40 +42,31 @@ export const OrderItem = {
     },
     {
       name: 'cancelEdit',
-      label: 'Cancel Edit',
+      label: 'Cancel Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/inventory/orderitems/info?orderItemId=${_id}&action=cancelEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
-      },
-      disabled: (objectData) => {
-        return objectData?.state?.type != 'draft'
       }
     },
     {
       name: 'finishEdit',
-      label: 'Finish Edit',
+      label: 'Save Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/inventory/orderitems/info?orderItemId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
-      },
-      disabled: (objectData) => {
-        return objectData?.state?.type != 'draft'
       }
     },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
-      type: 'button',
       icon: BinIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/inventory/orderitems/info?orderItemId=${_id}&action=delete`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -79,6 +75,12 @@ export const OrderItem = {
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(OrderItemInfo)
+    }
+  ],
   group: [],
   filters: [
     'name',

src/database/models/Part.js

@@ -1,8 +1,16 @@
+import { createElement, lazy } from 'react'
+
+const PartInfo = lazy(
+  () => import('../../components/Dashboard/Management/Parts/PartInfo')
+)
+const NewPartSku = lazy(
+  () => import('../../components/Dashboard/Management/PartSkus/NewPartSku')
+)
 import EditIcon from '../../components/Icons/EditIcon'
-import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
-import PartIcon from '../../components/Icons/PartIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
 import XMarkIcon from '../../components/Icons/XMarkIcon'
+import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
+import PartIcon from '../../components/Icons/PartIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 
 export const Part = {
@@ -15,39 +23,40 @@ export const Part = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/parts/info?partId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/parts/info?partId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/parts/info?partId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/parts/info?partId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -55,16 +64,24 @@ export const Part = {
     { type: 'divider' },
     {
       name: 'newPartSku',
+      type: 'modal',
+      modalWidth: 700,
       label: 'New Part SKU',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
-        `/dashboard/management/parts/info?partId=${_id}&action=newPartSku`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(NewPartSku, { defaultValues: { part: objectData }, onOk, reset: true })
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(PartInfo)
+    }
+  ],
   columns: [
     '_reference',
     'name',

src/database/models/PartSku.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const PartSkuInfo = lazy(
+  () => import('../../components/Dashboard/Management/PartSkus/PartSkuInfo')
+)
 import PartSkuIcon from '../../components/Icons/PartSkuIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,39 +20,40 @@ export const PartSku = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/partskus/info?partSkuId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/partskus/info?partSkuId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/partskus/info?partSkuId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/partskus/info?partSkuId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -55,11 +61,17 @@ export const PartSku = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/management/partskus/info?partSkuId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(PartSkuInfo)
     }
   ],
   columns: [

src/database/models/PartStock.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const PartStockInfo = lazy(
+  () => import('../../components/Dashboard/Inventory/PartStocks/PartStockInfo')
+)
 import PartStockIcon from '../../components/Icons/PartStockIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 
@@ -11,11 +16,18 @@ export const PartStock = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/inventory/partstocks/info?partStockId=${_id}`
+    }
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(PartStockInfo)
     }
   ],
   filters: [

src/database/models/Payment.js

@@ -1,3 +1,20 @@
+import { createElement, lazy } from 'react'
+
+const PaymentInfo = lazy(
+  () => import('../../components/Dashboard/Finance/Payments/PaymentInfo')
+)
+const PostPayment = lazy(
+  () => import('../../components/Dashboard/Finance/Payments/PostPayment')
+)
+const AuthorisePayment = lazy(
+  () => import('../../components/Dashboard/Finance/Payments/AuthorisePayment')
+)
+const DeclinePayment = lazy(
+  () => import('../../components/Dashboard/Finance/Payments/DeclinePayment')
+)
+const CancelPayment = lazy(
+  () => import('../../components/Dashboard/Finance/Payments/CancelPayment')
+)
 import PaymentIcon from '../../components/Icons/PaymentIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
@@ -15,19 +32,19 @@ export const Payment = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/finance/payments/info?paymentId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
-      type: 'button',
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/finance/payments/info?paymentId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -37,34 +54,31 @@ export const Payment = {
     },
     {
       name: 'cancelEdit',
-      label: 'Cancel Edit',
+      label: 'Cancel Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/finance/payments/info?paymentId=${_id}&action=cancelEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'finishEdit',
-      label: 'Finish Edit',
+      label: 'Save Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/finance/payments/info?paymentId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
-      type: 'button',
       icon: BinIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/finance/payments/info?paymentId=${_id}&action=delete`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -75,60 +89,74 @@ export const Payment = {
     { type: 'divider' },
     {
       name: 'post',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Post',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/finance/payments/info?paymentId=${_id}&action=post`,
       visible: (objectData) => {
         return objectData?.state?.type == 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(PostPayment, { objectData, onOk })
       }
     },
     {
       name: 'authorise',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Authorise',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/finance/payments/info?paymentId=${_id}&action=authorise`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'posted'
       },
       visible: (objectData) => {
         return objectData?.state?.type == 'posted'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(AuthorisePayment, { objectData, onOk })
       }
     },
     {
       name: 'decline',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Decline',
-      type: 'button',
       icon: XMarkIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/finance/payments/info?paymentId=${_id}&action=decline`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'posted'
       },
       visible: (objectData) => {
         return objectData?.state?.type == 'posted'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeclinePayment, { objectData, onOk })
       }
     },
     {
       name: 'cancel',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Cancel',
-      type: 'button',
       icon: XMarkIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/finance/payments/info?paymentId=${_id}&action=cancel`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'posted'
       },
       visible: (objectData) => {
         return objectData?.state?.type == 'posted'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(CancelPayment, { objectData, onOk })
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(PaymentInfo)
+    }
+  ],
   group: ['vendor', 'client', 'invoice'],
   filters: [
     'vendor',

src/database/models/Printer.js

@@ -1,3 +1,17 @@
+import { createElement, lazy } from 'react'
+
+const PrinterInfo = lazy(
+  () => import('../../components/Dashboard/Production/Printers/PrinterInfo')
+)
+const NewPrinterProfile = lazy(
+  () => import('../../components/Dashboard/Production/PrinterProfiles/NewPrinterProfile')
+)
+const LoadFilamentStock = lazy(
+  () => import('../../components/Dashboard/Inventory/FilamentStocks/LoadFilamentStock')
+)
+const UnloadFilamentStock = lazy(
+  () => import('../../components/Dashboard/Inventory/FilamentStocks/UnloadFilamentStock')
+)
 import PrinterIcon from '../../components/Icons/PrinterIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import ReloadIcon from '../../components/Icons/ReloadIcon'
@@ -22,13 +36,13 @@ export const Printer = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/production/printers/info?printerId=${_id}`
     },
-
     {
       name: 'control',
       label: 'Control',
@@ -38,31 +52,31 @@ export const Printer = {
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/production/printers/info?printerId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/production/printers/info?printerId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/production/printers/info?printerId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -70,11 +84,13 @@ export const Printer = {
     { type: 'divider' },
     {
       name: 'newPrinterProfile',
+      type: 'modal',
+      modalWidth: 700,
       label: 'New Printer Profile',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
+      content: (objectData, { onOk } = {}) => {
-        `/dashboard/production/printers/info?printerId=${_id}&action=newPrinterProfile`
+        return createElement(NewPrinterProfile, { defaultValues: { printer: objectData }, onOk, reset: true })
+      }
     },
     { type: 'divider' },
     {
@@ -188,35 +204,57 @@ export const Printer = {
       children: [
         {
           name: 'loadFilamentStock',
+          type: 'modal',
+          modalWidth: 700,
           label: 'Load Filament Stock',
           icon: FilamentStockIcon,
-          url: (_id) =>
-            `/dashboard/production/printers/control?printerId=${_id}&action=loadFilamentStock`,
           disabled: (objectData) => {
             return (
               objectData?.state?.type == 'printing' ||
               objectData?.state?.type == 'error' ||
               objectData?.currentFilamentStock != null
             )
+          },
+          content: (objectData, { onOk } = {}) => {
+            return createElement(LoadFilamentStock, {
+              printer: objectData,
+              onOk,
+              reset: false,
+              filamentStockLoaded: false
+            })
           }
         },
         {
           name: 'unloadFilamentStock',
+          type: 'modal',
+          modalWidth: 700,
           label: 'Unload Filament Stock',
           icon: FilamentStockIcon,
-          url: (_id) =>
-            `/dashboard/production/printers/control?printerId=${_id}&action=unloadFilamentStock`,
           disabled: (objectData) => {
             return (
               objectData?.state?.type == 'printing' ||
               objectData?.state?.type == 'error' ||
               objectData?.currentFilamentStock == null
             )
+          },
+          content: (objectData, { onOk } = {}) => {
+            return createElement(UnloadFilamentStock, {
+              printer: objectData,
+              onOk,
+              reset: false,
+              filamentStockLoaded: false
+            })
           }
         }
       ]
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(PrinterInfo)
+    }
+  ],
   columns: [
     '_reference',
     'name',

src/database/models/PrinterProfile.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const PrinterProfileInfo = lazy(
+  () => import('../../components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo')
+)
 import PrinterProfileIcon from '../../components/Icons/PrinterProfileIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -280,47 +285,57 @@ export const PrinterProfile = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/production/printerprofiles/info?printerProfileId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/production/printerprofiles/info?printerProfileId=${_id}&action=edit`,
       visible: (objectData) => !objectData?._isEditing
     },
-    {
-      name: 'finishEdit',
-      label: 'Save Edits',
-      icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/production/printerprofiles/info?printerProfileId=${_id}&action=finishEdit`,
-      visible: (objectData) => objectData?._isEditing === true
-    },
     {
       name: 'cancelEdit',
       label: 'Cancel Edits',
+      type: 'page',
+      pageName: 'info',
       icon: XMarkIcon,
-      url: (_id) =>
+      visible: (objectData) => {
-        `/dashboard/production/printerprofiles/info?printerProfileId=${_id}&action=cancelEdit`,
+        return objectData?._isEditing && objectData?._isEditing == true
-      visible: (objectData) => objectData?._isEditing === true
+      }
+    },
+    {
+      name: 'finishEdit',
+      label: 'Save Edits',
+      type: 'page',
+      pageName: 'info',
+      icon: CheckIcon,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
     },
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       row: true,
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/production/printerprofiles/info?printerProfileId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(PrinterProfileInfo)
     }
   ],
   columns: [

src/database/models/Product.js

@@ -1,3 +1,11 @@
+import { createElement, lazy } from 'react'
+
+const ProductInfo = lazy(
+  () => import('../../components/Dashboard/Management/Products/ProductInfo')
+)
+const NewProductSku = lazy(
+  () => import('../../components/Dashboard/Management/ProductSkus/NewProductSku')
+)
 import ProductIcon from '../../components/Icons/ProductIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,39 +23,40 @@ export const Product = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/products/info?productId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/products/info?productId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/products/info?productId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/products/info?productId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -57,16 +66,24 @@ export const Product = {
     },
     {
       name: 'newProductSku',
+      type: 'modal',
+      modalWidth: 700,
       label: 'New Product SKU',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
-        `/dashboard/management/products/info?productId=${_id}&action=newProductSku`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(NewProductSku, { defaultValues: { product: objectData }, onOk, reset: true })
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(ProductInfo)
+    }
+  ],
   columns: [
     '_reference',
     'name',

src/database/models/ProductCategory.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const ProductCategoryInfo = lazy(
+  () => import('../../components/Dashboard/Management/ProductCategories/ProductCategoryInfo')
+)
 import ProductCategoryIcon from '../../components/Icons/ProductCategoryIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -16,40 +21,40 @@ export const ProductCategory = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/management/productcategories/info?productCategoryId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/productcategories/info?productCategoryId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/productcategories/info?productCategoryId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/productcategories/info?productCategoryId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -57,11 +62,17 @@ export const ProductCategory = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/management/productcategories/info?productCategoryId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(ProductCategoryInfo)
     }
   ],
   columns: ['_reference', 'name', 'createdAt', 'updatedAt'],

src/database/models/ProductSku.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const ProductSkuInfo = lazy(
+  () => import('../../components/Dashboard/Management/ProductSkus/ProductSkuInfo')
+)
 import ProductSkuIcon from '../../components/Icons/ProductSkuIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,39 +20,40 @@ export const ProductSku = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/productskus/info?productSkuId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/productskus/info?productSkuId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       }
     },
     {
-      name: 'finishEdit',
+      name: 'cancelEdit',
-      label: 'Save Edits',
+      label: 'Cancel Edits',
-      icon: CheckIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/productskus/info?productSkuId=${_id}&action=finishEdit`,
+      icon: XMarkIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
-      name: 'cancelEdit',
+      name: 'finishEdit',
-      label: 'Cancel Edits',
+      label: 'Save Edits',
-      icon: XMarkIcon,
+      type: 'page',
-      url: (_id) =>
+      pageName: 'info',
-        `/dashboard/management/productskus/info?productSkuId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -55,11 +61,17 @@ export const ProductSku = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/management/productskus/info?productSkuId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(ProductSkuInfo)
     }
   ],
   columns: [

src/database/models/ProductStock.js

@@ -1,3 +1,11 @@
+import { createElement, lazy } from 'react'
+
+const ProductStockInfo = lazy(
+  () => import('../../components/Dashboard/Inventory/ProductStocks/ProductStockInfo')
+)
+const PostProductStock = lazy(
+  () => import('../../components/Dashboard/Inventory/ProductStocks/PostProductStock')
+)
 import ProductStockIcon from '../../components/Icons/ProductStockIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,20 +23,19 @@ export const ProductStock = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/inventory/productstocks/info?productStockId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
-      type: 'button',
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/inventory/productstocks/info?productStockId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -38,34 +45,31 @@ export const ProductStock = {
     },
     {
       name: 'cancelEdit',
-      label: 'Cancel Edit',
+      label: 'Cancel Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/inventory/productstocks/info?productStockId=${_id}&action=cancelEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'finishEdit',
-      label: 'Finish Edit',
+      label: 'Save Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/inventory/productstocks/info?productStockId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
-      type: 'button',
       icon: BinIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/inventory/productstocks/info?productStockId=${_id}&action=delete`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -76,16 +80,24 @@ export const ProductStock = {
     { type: 'divider' },
     {
       name: 'post',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Post',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/inventory/productstocks/info?productStockId=${_id}&action=post`,
       visible: (objectData) => {
         return objectData?.state?.type == 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(PostProductStock, { objectData, onOk })
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(ProductStockInfo)
+    }
+  ],
   filters: [
     'productSku',
     'state',

src/database/models/PurchaseOrder.js

@@ -1,3 +1,26 @@
+import { createElement, lazy } from 'react'
+
+const PurchaseOrderInfo = lazy(
+  () => import('../../components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo')
+)
+const NewOrderItem = lazy(
+  () => import('../../components/Dashboard/Inventory/OrderItems/NewOrderItem')
+)
+const NewShipment = lazy(
+  () => import('../../components/Dashboard/Inventory/Shipments/NewShipment')
+)
+const NewInvoice = lazy(
+  () => import('../../components/Dashboard/Finance/Invoices/NewInvoice')
+)
+const PostPurchaseOrder = lazy(
+  () => import('../../components/Dashboard/Inventory/PurchaseOrders/PostPurchaseOrder')
+)
+const AcknowledgePurchaseOrder = lazy(
+  () => import('../../components/Dashboard/Inventory/PurchaseOrders/AcknowledgePurchaseOrder')
+)
+const CancelPurchaseOrder = lazy(
+  () => import('../../components/Dashboard/Inventory/PurchaseOrders/CancelPurchaseOrder')
+)
 import PurchaseOrderIcon from '../../components/Icons/PurchaseOrderIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
@@ -16,20 +39,19 @@ export const PurchaseOrder = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
-      type: 'button',
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -39,34 +61,31 @@ export const PurchaseOrder = {
     },
     {
       name: 'cancelEdit',
-      label: 'Cancel Edit',
+      label: 'Cancel Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=cancelEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'finishEdit',
-      label: 'Finish Edit',
+      label: 'Save Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
-      type: 'button',
       icon: BinIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=delete`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -76,34 +95,49 @@ export const PurchaseOrder = {
     },
     { type: 'divider' },
     {
-      name: 'New Order Item',
+      name: 'newOrderItem',
+      type: 'modal',
+      modalWidth: 700,
       label: 'New Order Item',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
-        `/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=newOrderItem`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(NewOrderItem, {
+          defaultValues: {
+            order: { _id: objectData._id },
+            orderType: 'purchaseOrder',
+            syncAmount: 'itemCost'
+          },
+          onOk,
+          reset: true
+        })
       }
     },
     {
-      name: 'New Shipment',
+      name: 'newShipment',
+      type: 'modal',
+      modalWidth: 700,
       label: 'New Shipment',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
-        `/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=newShipment`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(NewShipment, {
+          defaultValues: { orderType: 'purchaseOrder', order: { _id: objectData._id } },
+          onOk,
+          reset: true
+        })
       }
     },
     {
-      name: 'New Invoice',
+      name: 'newInvoice',
+      type: 'modal',
+      modalWidth: 700,
       label: 'New Invoice',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
-        `/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=newInvoice`,
       disabled: (objectData) => {
         const allowedStates = [
           'received',
@@ -112,6 +146,13 @@ export const PurchaseOrder = {
           'partiallyShipped'
         ]
         return !allowedStates.includes(objectData?.state?.type)
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(NewInvoice, {
+          defaultValues: { orderType: 'purchaseOrder', order: objectData },
+          onOk,
+          reset: true
+        })
       }
     },
     {
@@ -119,30 +160,33 @@ export const PurchaseOrder = {
     },
     {
       name: 'post',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Post',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=post`,
       visible: (objectData) => {
         return objectData?.state?.type == 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(PostPurchaseOrder, { objectData, onOk })
       }
     },
     {
       name: 'acknowledge',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Acknowledge',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=acknowledge`,
       visible: (objectData) => {
         return objectData?.state?.type == 'sent'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(AcknowledgePurchaseOrder, { objectData, onOk })
       }
     },
     {
       name: 'complete',
       label: 'Complete',
-      type: 'button',
       icon: CheckIcon,
       url: (_id) =>
         `/dashboard/inventory/shipments/info?shipmentId=${_id}&action=complete`,
@@ -155,12 +199,11 @@ export const PurchaseOrder = {
     },
     {
       name: 'cancel',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Cancel',
-      type: 'button',
       icon: XMarkIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=cancel`,
       disabled: (objectData) => {
         return objectData?.state?.type == 'cancelled'
       },
@@ -170,9 +213,18 @@ export const PurchaseOrder = {
           objectData?.state?.type != 'completed' &&
           objectData?.state?.type != 'received'
         )
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(CancelPurchaseOrder, { objectData, onOk })
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(PurchaseOrderInfo)
+    }
+  ],
   group: ['vendor'],
   filters: [
     'vendor',

src/database/models/SalesOrder.js

@@ -1,3 +1,26 @@
+import { createElement, lazy } from 'react'
+
+const SalesOrderInfo = lazy(
+  () => import('../../components/Dashboard/Sales/SalesOrders/SalesOrderInfo')
+)
+const NewOrderItem = lazy(
+  () => import('../../components/Dashboard/Inventory/OrderItems/NewOrderItem')
+)
+const NewShipment = lazy(
+  () => import('../../components/Dashboard/Inventory/Shipments/NewShipment')
+)
+const NewInvoice = lazy(
+  () => import('../../components/Dashboard/Finance/Invoices/NewInvoice')
+)
+const PostSalesOrder = lazy(
+  () => import('../../components/Dashboard/Sales/SalesOrders/PostSalesOrder')
+)
+const ConfirmSalesOrder = lazy(
+  () => import('../../components/Dashboard/Sales/SalesOrders/ConfirmSalesOrder')
+)
+const CancelSalesOrder = lazy(
+  () => import('../../components/Dashboard/Sales/SalesOrders/CancelSalesOrder')
+)
 import SalesOrderIcon from '../../components/Icons/SalesOrderIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
@@ -16,19 +39,19 @@ export const SalesOrder = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/sales/salesorders/info?salesOrderId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
-      type: 'button',
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/sales/salesorders/info?salesOrderId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -38,34 +61,31 @@ export const SalesOrder = {
     },
     {
       name: 'cancelEdit',
-      label: 'Cancel Edit',
+      label: 'Cancel Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/sales/salesorders/info?salesOrderId=${_id}&action=cancelEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'finishEdit',
-      label: 'Finish Edit',
+      label: 'Save Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/sales/salesorders/info?salesOrderId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
     },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
-      type: 'button',
       icon: BinIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/sales/salesorders/info?salesOrderId=${_id}&action=delete`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -75,34 +95,54 @@ export const SalesOrder = {
     },
     { type: 'divider' },
     {
-      name: 'New Order Item',
+      name: 'newOrderItem',
+      type: 'modal',
+      modalWidth: 700,
       label: 'New Order Item',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
-        `/dashboard/sales/salesorders/info?salesOrderId=${_id}&action=newOrderItem`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(NewOrderItem, {
+          defaultValues: {
+            order: { _id: objectData._id },
+            orderType: 'salesOrder',
+            syncAmount: 'itemPrice'
+          },
+          onOk,
+          reset: true
+        })
       }
     },
     {
-      name: 'New Shipment',
+      name: 'newShipment',
+      type: 'modal',
+      modalWidth: 700,
+      modalCentered: false,
       label: 'New Shipment',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
-        `/dashboard/sales/salesorders/info?salesOrderId=${_id}&action=newShipment`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(NewShipment, {
+          defaultValues: {
+            orderType: 'salesOrder',
+            order: { _id: objectData._id }
+          },
+          onOk,
+          reset: true
+        })
       }
     },
     {
-      name: 'New Invoice',
+      name: 'newInvoice',
+      type: 'modal',
+      modalWidth: 700,
+      modalCentered: false,
       label: 'New Invoice',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
-        `/dashboard/sales/salesorders/info?salesOrderId=${_id}&action=newInvoice`,
       disabled: (objectData) => {
         const allowedStates = [
           'delivered',
@@ -113,38 +153,50 @@ export const SalesOrder = {
           'partiallyShipped'
         ]
         return !allowedStates.includes(objectData?.state?.type)
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(NewInvoice, {
+          defaultValues: { orderType: 'salesOrder', order: objectData },
+          onOk,
+          reset: true
+        })
       }
     },
     { type: 'divider' },
     {
       name: 'post',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
       label: 'Post',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/sales/salesorders/info?salesOrderId=${_id}&action=post`,
       visible: (objectData) => {
         return objectData?.state?.type == 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(PostSalesOrder, { objectData, onOk })
       }
     },
     {
       name: 'confirm',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Confirm',
-      type: 'button',
+      modalCentered: true,
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/sales/salesorders/info?salesOrderId=${_id}&action=confirm`,
       visible: (objectData) => {
         return objectData?.state?.type == 'sent'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(ConfirmSalesOrder, { objectData, onOk })
       }
     },
     {
       name: 'complete',
+      type: 'page',
+      pageName: 'info',
       label: 'Complete',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/sales/salesorders/info?salesOrderId=${_id}&action=complete`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'delivered'
       },
@@ -154,12 +206,11 @@ export const SalesOrder = {
     },
     {
       name: 'cancel',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Cancel',
-      type: 'button',
       icon: XMarkIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/sales/salesorders/info?salesOrderId=${_id}&action=cancel`,
       disabled: (objectData) => {
         return objectData?.state?.type == 'cancelled'
       },
@@ -169,9 +220,18 @@ export const SalesOrder = {
           objectData?.state?.type != 'completed' &&
           objectData?.state?.type != 'delivered'
         )
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(CancelSalesOrder, { objectData, onOk })
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(SalesOrderInfo)
+    }
+  ],
   group: ['client'],
   filters: [
     'client',

src/database/models/Shipment.js

@@ -1,3 +1,17 @@
+import { createElement, lazy } from 'react'
+
+const ShipmentInfo = lazy(
+  () => import('../../components/Dashboard/Inventory/Shipments/ShipmentInfo')
+)
+const ShipShipment = lazy(
+  () => import('../../components/Dashboard/Inventory/Shipments/ShipShipment')
+)
+const ReceiveShipment = lazy(
+  () => import('../../components/Dashboard/Inventory/Shipments/ReceiveShipment')
+)
+const CancelShipment = lazy(
+  () => import('../../components/Dashboard/Inventory/Shipments/CancelShipment')
+)
 import ShipmentIcon from '../../components/Icons/ShipmentIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,19 +29,19 @@ export const Shipment = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/inventory/shipments/info?shipmentId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
-      type: 'button',
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/inventory/shipments/info?shipmentId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -37,40 +51,31 @@ export const Shipment = {
     },
     {
       name: 'cancelEdit',
-      label: 'Cancel Edit',
+      label: 'Cancel Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/inventory/shipments/info?shipmentId=${_id}&action=cancelEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
-      },
-      disabled: (objectData) => {
-        return objectData?.state?.type != 'draft'
       }
     },
     {
       name: 'finishEdit',
-      label: 'Finish Edit',
+      label: 'Save Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/inventory/shipments/info?shipmentId=${_id}&action=finishEdit`,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
-      },
-      disabled: (objectData) => {
-        return objectData?.state?.type != 'draft'
       }
     },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
-      type: 'button',
       icon: BinIcon,
       danger: true,
-      url: (_id) =>
-        `/dashboard/inventory/shipments/info?shipmentId=${_id}&action=delete`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -81,11 +86,10 @@ export const Shipment = {
     { type: 'divider' },
     {
       name: 'ship',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Ship',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/inventory/shipments/info?shipmentId=${_id}&action=ship`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'planned'
       },
@@ -94,15 +98,17 @@ export const Shipment = {
           objectData?.state?.type == 'planned' ||
           objectData?.state?.type == 'draft'
         )
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(ShipShipment, { objectData, onOk })
       }
     },
     {
       name: 'receive',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Receive',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/inventory/shipments/info?shipmentId=${_id}&action=receive`,
       disabled: (objectData) => {
         return objectData?.state?.type != 'shipped'
       },
@@ -111,7 +117,27 @@ export const Shipment = {
           objectData?.state?.type == 'shipped' ||
           objectData?.state?.type == 'delivered'
         )
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(ReceiveShipment, { objectData, onOk })
       }
+    },
+    {
+      name: 'cancel',
+      type: 'modal',
+      modalWidth: 520,
+      label: 'Cancel',
+      icon: CheckIcon,
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(CancelShipment, { objectData, onOk })
+      }
+    }
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(ShipmentInfo)
     }
   ],
   group: [],

src/database/models/StockAudit.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const StockAuditInfo = lazy(
+  () => import('../../components/Dashboard/Inventory/StockAudits/StockAuditInfo')
+)
 import StockAuditIcon from '../../components/Icons/StockAuditIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 
@@ -11,11 +16,18 @@ export const StockAudit = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/inventory/stockaudits/info?stockAuditId=${_id}`
+    }
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(StockAuditInfo)
     }
   ],
   columns: ['_reference', 'state', 'createdAt', 'updatedAt'],