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/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/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'],

src/database/models/StockLocation.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const StockLocationInfo = lazy(
+  () => import('../../components/Dashboard/Inventory/StockLocations/StockLocationInfo')
+)
 import StockLocationIcon from '../../components/Icons/StockLocationIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 
@@ -11,12 +16,18 @@ export const StockLocation = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
+    }
-        `/dashboard/inventory/stocklocations/info?stockLocationId=${_id}`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(StockLocationInfo)
     }
   ],
   filters: ['name','createdAt','updatedAt','_reference'],

src/database/models/StockTransfer.js

@@ -1,3 +1,11 @@
+import { createElement, lazy } from 'react'
+
+const StockTransferInfo = lazy(
+  () => import('../../components/Dashboard/Inventory/StockTransfers/StockTransferInfo')
+)
+const PostStockTransfer = lazy(
+  () => import('../../components/Dashboard/Inventory/StockTransfers/PostStockTransfer')
+)
 import StockTransferIcon from '../../components/Icons/StockTransferIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,20 +23,19 @@ export const StockTransfer = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) =>
-        `/dashboard/inventory/stocktransfers/info?stockTransferId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
-      type: 'button',
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/inventory/stocktransfers/info?stockTransferId=${_id}&action=edit`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -38,34 +45,31 @@ export const StockTransfer = {
     },
     {
       name: 'cancelEdit',
-      label: 'Cancel Edit',
+      label: 'Cancel Edits',
-      type: 'button',
+      type: 'page',
+      pageName: 'info',
       icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/inventory/stocktransfers/info?stockTransferId=${_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/stocktransfers/info?stockTransferId=${_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/stocktransfers/info?stockTransferId=${_id}&action=delete`,
       visible: (objectData) => {
         return !(objectData?._isEditing && objectData?._isEditing == true)
       },
@@ -76,16 +80,24 @@ export const StockTransfer = {
     { type: 'divider' },
     {
       name: 'post',
+      type: 'modal',
+      modalWidth: 520,
       label: 'Post',
-      type: 'button',
       icon: CheckIcon,
-      url: (_id) =>
-        `/dashboard/inventory/stocktransfers/info?stockTransferId=${_id}&action=post`,
       visible: (objectData) => {
         return objectData?.state?.type == 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(PostStockTransfer, { objectData, onOk })
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(StockTransferInfo)
+    }
+  ],
   filters: [
     'state',
     'state.type',

src/database/models/SubJob.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const SubJobInfo = lazy(
+  () => import('../../components/Dashboard/Production/SubJobs/SubJobInfo')
+)
 import SubJobIcon from '../../components/Icons/SubJobIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import XMarkIcon from '../../components/Icons/XMarkIcon'
@@ -13,24 +18,31 @@ export const SubJob = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/production/subjobs/info?subJobId=${_id}`
     },
     {
       name: 'cancel',
+      type: 'page',
+      pageName: 'info',
       label: 'Cancel Sub Job',
       row: true,
       icon: XMarkIcon,
-      url: (_id) =>
-        `/dashboard/production/subjobs/info?subJobId=${_id}&action=cancel`,
       disabled: (objectData) => {
         return objectData?.state?.type !== 'queued'
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(SubJobInfo)
+    }
+  ],
   columns: [
     '_reference',
     'printer',

src/database/models/TaxRate.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const TaxRateInfo = lazy(
+  () => import('../../components/Dashboard/Management/TaxRates/TaxRateInfo')
+)
 import TaxRateIcon from '../../components/Icons/TaxRateIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,39 +20,40 @@ export const TaxRate = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/taxrates/info?taxRateId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/taxrates/info?taxRateId=${_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/taxrates/info?taxRateId=${_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/taxrates/info?taxRateId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -55,11 +61,17 @@ export const TaxRate = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/management/taxrates/info?taxRateId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(TaxRateInfo)
     }
   ],
   columns: [

src/database/models/TaxRecord.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const TaxRecordInfo = lazy(
+  () => import('../../components/Dashboard/Finance/TaxRecords/TaxRecordInfo')
+)
 import TaxRecordIcon from '../../components/Icons/TaxRecordIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,39 +20,40 @@ export const TaxRecord = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/finance/taxrecords/info?taxRecordId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/finance/taxrecords/info?taxRecordId=${_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/finance/taxrecords/info?taxRecordId=${_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/finance/taxrecords/info?taxRecordId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -55,11 +61,17 @@ export const TaxRecord = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/finance/taxrecords/info?taxRecordId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(TaxRecordInfo)
     }
   ],
   columns: [

src/database/models/User.js

@@ -1,6 +1,16 @@
+import { createElement, lazy } from 'react'
+
+const UserInfo = lazy(
+  () => import('../../components/Dashboard/Management/Users/UserInfo')
+)
+const NewAppPassword = lazy(
+  () => import('../../components/Dashboard/Management/AppPasswords/NewAppPassword')
+)
 import PersonIcon from '../../components/Icons/PersonIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
+import CheckIcon from '../../components/Icons/CheckIcon'
+import XMarkIcon from '../../components/Icons/XMarkIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 
 export const User = {
@@ -13,31 +23,64 @@ export const User = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/users/info?userId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) => `/dashboard/management/users/info?userId=${_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,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
     },
     {
       name: 'newAppPassword',
+      type: 'modal',
+      modalWidth: 680,
       label: 'New App Password',
-      type: 'button',
       icon: PlusIcon,
-      url: (_id) =>
-        `/dashboard/management/users/info?userId=${_id}&action=newAppPassword`,
       disabled: (objectData) => {
         return objectData?._user?._id != objectData?._id
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(NewAppPassword, { defaultValues: { user: objectData }, onOk, reset: true })
       }
     }
   ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(UserInfo)
+    }
+  ],
   columns: ['_reference', 'name', 'username', 'email', 'role', 'createdAt'],
   filters: [
     'name',

src/database/models/Vendor.js

@@ -1,3 +1,8 @@
+import { createElement, lazy } from 'react'
+
+const VendorInfo = lazy(
+  () => import('../../components/Dashboard/Management/Vendors/VendorInfo')
+)
 import VendorIcon from '../../components/Icons/VendorIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
@@ -15,39 +20,40 @@ export const Vendor = {
   actions: [
     {
       name: 'info',
+      type: 'page',
+      pageName: 'info',
       label: 'Info',
       default: true,
       row: true,
-      icon: InfoCircleIcon,
+      icon: InfoCircleIcon
-      url: (_id) => `/dashboard/management/vendors/info?vendorId=${_id}`
     },
     {
       name: 'edit',
+      type: 'page',
+      pageName: 'info',
       label: 'Edit',
       row: true,
       icon: EditIcon,
-      url: (_id) =>
-        `/dashboard/management/vendors/info?vendorId=${_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/vendors/info?vendorId=${_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/vendors/info?vendorId=${_id}&action=cancelEdit`,
+      icon: CheckIcon,
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
@@ -55,11 +61,17 @@ export const Vendor = {
     { type: 'divider' },
     {
       name: 'delete',
+      type: 'page',
+      pageName: 'info',
       label: 'Delete',
       icon: BinIcon,
-      danger: true,
+      danger: true
-      url: (_id) =>
+    }
-        `/dashboard/management/vendors/info?vendorId=${_id}&action=delete`
+  ],
+  pages: [
+    {
+      name: 'info',
+      content: () => createElement(VendorInfo)
     }
   ],
   columns: [

src/routes/FinanceRoutes.jsx

@@ -14,24 +14,15 @@ const TaxRecordsInfoRedirect = () => {
 const Invoices = lazy(
   () => import('../components/Dashboard/Finance/Invoices.jsx')
 )
-const InvoiceInfo = lazy(
-  () => import('../components/Dashboard/Finance/Invoices/InvoiceInfo.jsx')
-)
 const Payments = lazy(
   () => import('../components/Dashboard/Finance/Payments.jsx')
 )
-const PaymentInfo = lazy(
-  () => import('../components/Dashboard/Finance/Payments/PaymentInfo.jsx')
-)
 const FinanceOverview = lazy(
   () => import('../components/Dashboard/Finance/FinanceOverview.jsx')
 )
 const TaxRecords = lazy(
   () => import('../components/Dashboard/Finance/TaxRecords.jsx')
 )
-const TaxRecordInfo = lazy(
-  () => import('../components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx')
-)
 
 const FinanceRoutes = [
   <Route
@@ -40,23 +31,8 @@ const FinanceRoutes = [
     element={<FinanceOverview />}
   />,
   <Route key='invoices' path='finance/invoices' element={<Invoices />} />,
-  <Route
-    key='invoices-info'
-    path='finance/invoices/info'
-    element={<InvoiceInfo />}
-  />,
   <Route key='payments' path='finance/payments' element={<Payments />} />,
-  <Route
-    key='payments-info'
-    path='finance/payments/info'
-    element={<PaymentInfo />}
-  />,
   <Route key='taxrecords' path='finance/taxrecords' element={<TaxRecords />} />,
-  <Route
-    key='taxrecords-info'
-    path='finance/taxrecords/info'
-    element={<TaxRecordInfo />}
-  />,
   <Route
     key='taxrecords-redirect'
     path='management/taxrecords'
@@ -70,4 +46,3 @@ const FinanceRoutes = [
 ]
 
 export default FinanceRoutes
-

src/routes/InventoryRoutes.jsx

@@ -4,73 +4,36 @@ import { Route } from 'react-router-dom'
 const FilamentStocks = lazy(
   () => import('../components/Dashboard/Inventory/FilamentStocks.jsx')
 )
-const FilamentStockInfo = lazy(
-  () =>
-    import('../components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx')
-)
 const PartStocks = lazy(
   () => import('../components/Dashboard/Inventory/PartStocks.jsx')
 )
 const ProductStocks = lazy(
   () => import('../components/Dashboard/Inventory/ProductStocks.jsx')
 )
-const ProductStockInfo = lazy(
-  () =>
-    import(
-      '../components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx'
-    )
-)
-const PartStockInfo = lazy(
-  () => import('../components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx')
-)
 const StockEvents = lazy(
   () => import('../components/Dashboard/Inventory/StockEvents.jsx')
 )
 const StockAudits = lazy(
   () => import('../components/Dashboard/Inventory/StockAudits.jsx')
 )
-const StockAuditInfo = lazy(
-  () =>
-    import('../components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx')
-)
 const PurchaseOrders = lazy(
   () => import('../components/Dashboard/Inventory/PurchaseOrders.jsx')
 )
-const PurchaseOrderInfo = lazy(
-  () =>
-    import('../components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx')
-)
 const OrderItems = lazy(
   () => import('../components/Dashboard/Inventory/OrderItems.jsx')
 )
-const OrderItemInfo = lazy(
-  () => import('../components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx')
-)
 const Shipments = lazy(
   () => import('../components/Dashboard/Inventory/Shipments.jsx')
 )
-const ShipmentInfo = lazy(
-  () => import('../components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx')
-)
 const InventoryOverview = lazy(
   () => import('../components/Dashboard/Inventory/InventoryOverview.jsx')
 )
 const StockLocations = lazy(
   () => import('../components/Dashboard/Inventory/StockLocations.jsx')
 )
-const StockLocationInfo = lazy(
-  () =>
-    import('../components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx')
-)
 const StockTransfers = lazy(
   () => import('../components/Dashboard/Inventory/StockTransfers.jsx')
 )
-const StockTransferInfo = lazy(
-  () =>
-    import(
-      '../components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx'
-    )
-)
 
 const InventoryRoutes = [
   <Route
@@ -83,51 +46,26 @@ const InventoryRoutes = [
     path='inventory/filamentstocks'
     element={<FilamentStocks />}
   />,
-  <Route
-    key='filamentstocks-info'
-    path='inventory/filamentstocks/info'
-    element={<FilamentStockInfo />}
-  />,
   <Route
     key='partstocks'
     path='inventory/partstocks'
     element={<PartStocks />}
   />,
-  <Route
-    key='partstocks-info'
-    path='inventory/partstocks/info'
-    element={<PartStockInfo />}
-  />,
   <Route
     key='productstocks'
     path='inventory/productstocks'
     element={<ProductStocks />}
   />,
-  <Route
-    key='productstocks-info'
-    path='inventory/productstocks/info'
-    element={<ProductStockInfo />}
-  />,
   <Route
     key='stocklocations'
     path='inventory/stocklocations'
     element={<StockLocations />}
   />,
-  <Route
-    key='stocklocations-info'
-    path='inventory/stocklocations/info'
-    element={<StockLocationInfo />}
-  />,
   <Route
     key='stocktransfers'
     path='inventory/stocktransfers'
     element={<StockTransfers />}
   />,
-  <Route
-    key='stocktransfers-info'
-    path='inventory/stocktransfers/info'
-    element={<StockTransferInfo />}
-  />,
   <Route
     key='stockevents'
     path='inventory/stockevents'
@@ -138,37 +76,17 @@ const InventoryRoutes = [
     path='inventory/stockaudits'
     element={<StockAudits />}
   />,
-  <Route
-    key='stockaudits-info'
-    path='inventory/stockaudits/info'
-    element={<StockAuditInfo />}
-  />,
   <Route
     key='purchaseorders'
     path='inventory/purchaseorders'
     element={<PurchaseOrders />}
   />,
-  <Route
-    key='purchaseorders-info'
-    path='inventory/purchaseorders/info'
-    element={<PurchaseOrderInfo />}
-  />,
   <Route
     key='orderitems'
     path='inventory/orderitems'
     element={<OrderItems />}
   />,
-  <Route
+  <Route key='shipments' path='inventory/shipments' element={<Shipments />} />
-    key='orderitems-info'
-    path='inventory/orderitems/info'
-    element={<OrderItemInfo />}
-  />,
-  <Route key='shipments' path='inventory/shipments' element={<Shipments />} />,
-  <Route
-    key='shipments-info'
-    path='inventory/shipments/info'
-    element={<ShipmentInfo />}
-  />
 ]
 
 export default InventoryRoutes

src/routes/ManagementRoutes.jsx

@@ -4,69 +4,32 @@ import { Route } from 'react-router-dom'
 const Filaments = lazy(
   () => import('../components/Dashboard/Management/Filaments')
 )
-const FilamentInfo = lazy(
-  () => import('../components/Dashboard/Management/Filaments/FilamentInfo.jsx')
-)
 const FilamentSkus = lazy(
   () => import('../components/Dashboard/Management/FilamentSkus.jsx')
 )
-const FilamentSkuInfo = lazy(
-  () =>
-    import('../components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx')
-)
 const Parts = lazy(() => import('../components/Dashboard/Management/Parts.jsx'))
-const PartInfo = lazy(
-  () => import('../components/Dashboard/Management/Parts/PartInfo.jsx')
-)
 const PartSkus = lazy(
   () => import('../components/Dashboard/Management/PartSkus.jsx')
 )
-const PartSkuInfo = lazy(
-  () => import('../components/Dashboard/Management/PartSkus/PartSkuInfo.jsx')
-)
 const Products = lazy(
   () => import('../components/Dashboard/Management/Products.jsx')
 )
-const ProductInfo = lazy(
-  () => import('../components/Dashboard/Management/Products/ProductInfo.jsx')
-)
 const ProductCategories = lazy(
   () => import('../components/Dashboard/Management/ProductCategories.jsx')
 )
-const ProductCategoryInfo = lazy(
-  () =>
-    import('../components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx')
-)
 const ProductSkus = lazy(
   () => import('../components/Dashboard/Management/ProductSkus.jsx')
 )
-const ProductSkuInfo = lazy(
-  () =>
-    import('../components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx')
-)
 const Vendors = lazy(() => import('../components/Dashboard/Management/Vendors'))
-const VendorInfo = lazy(
-  () => import('../components/Dashboard/Management/Vendors/VendorInfo')
-)
 const Materials = lazy(
   () => import('../components/Dashboard/Management/Materials')
 )
-const MaterialInfo = lazy(
-  () => import('../components/Dashboard/Management/Materials/MaterialInfo.jsx')
-)
 const Couriers = lazy(
   () => import('../components/Dashboard/Management/Couriers')
 )
-const CourierInfo = lazy(
-  () => import('../components/Dashboard/Management/Couriers/CourierInfo.jsx')
-)
 const CourierServices = lazy(
   () => import('../components/Dashboard/Management/CourierServices')
 )
-const CourierServiceInfo = lazy(
-  () =>
-    import('../components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx')
-)
 const Settings = lazy(
   () => import('../components/Dashboard/Management/Settings')
 )
@@ -76,243 +39,103 @@ const AuditLogs = lazy(
 const NoteTypes = lazy(
   () => import('../components/Dashboard/Management/NoteTypes.jsx')
 )
-const NoteTypeInfo = lazy(
-  () => import('../components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx')
-)
 const NoteInfo = lazy(
   () => import('../components/Dashboard/Management/Notes/NoteInfo.jsx')
 )
 const Users = lazy(() => import('../components/Dashboard/Management/Users.jsx'))
-const UserInfo = lazy(
-  () => import('../components/Dashboard/Management/Users/UserInfo.jsx')
-)
 const AppPasswords = lazy(
   () => import('../components/Dashboard/Management/AppPasswords.jsx')
 )
-const AppPasswordInfo = lazy(
-  () =>
-    import('../components/Dashboard/Management/AppPasswords/AppPasswordInfo.jsx')
-)
 const Hosts = lazy(() => import('../components/Dashboard/Management/Hosts.jsx'))
-const HostInfo = lazy(
-  () => import('../components/Dashboard/Management/Hosts/HostInfo.jsx')
-)
 const DocumentSizes = lazy(
   () => import('../components/Dashboard/Management/DocumentSizes.jsx')
 )
-const DocumentSizeInfo = lazy(
-  () =>
-    import('../components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx')
-)
 const DocumentTemplates = lazy(
   () => import('../components/Dashboard/Management/DocumentTemplates.jsx')
 )
-const DocumentTemplateInfo = lazy(
-  () =>
-    import('../components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx')
-)
 const DocumentPrinters = lazy(
   () => import('../components/Dashboard/Management/DocumentPrinters.jsx')
 )
-const DocumentPrinterInfo = lazy(
-  () =>
-    import('../components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx')
-)
 const DocumentJobs = lazy(
   () => import('../components/Dashboard/Management/DocumentJobs.jsx')
 )
-const DocumentJobInfo = lazy(
-  () =>
-    import('../components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx')
-)
 const DocumentTemplateDesign = lazy(
   () =>
     import('../components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx')
 )
 const Files = lazy(() => import('../components/Dashboard/Management/Files.jsx'))
-const FileInfo = lazy(
-  () => import('../components/Dashboard/Management/Files/FileInfo.jsx')
-)
 const TaxRates = lazy(
   () => import('../components/Dashboard/Management/TaxRates.jsx')
 )
-const TaxRateInfo = lazy(
-  () => import('../components/Dashboard/Management/TaxRates/TaxRateInfo.jsx')
-)
 const About = lazy(() => import('../components/Dashboard/Management/About.jsx'))
 
 const ManagementRoutes = [
   <Route key='filaments' path='management/filaments' element={<Filaments />} />,
-  <Route
-    key='filaments-info'
-    path='management/filaments/info'
-    element={<FilamentInfo />}
-  />,
   <Route
     key='filamentskus'
     path='management/filamentskus'
     element={<FilamentSkus />}
   />,
-  <Route
-    key='filamentskus-info'
-    path='management/filamentskus/info'
-    element={<FilamentSkuInfo />}
-  />,
   <Route key='parts' path='management/parts' element={<Parts />} />,
-  <Route
-    key='parts-info'
-    path='management/parts/info'
-    element={<PartInfo />}
-  />,
   <Route key='partskus' path='management/partskus' element={<PartSkus />} />,
-  <Route
-    key='partskus-info'
-    path='management/partskus/info'
-    element={<PartSkuInfo />}
-  />,
   <Route key='products' path='management/products' element={<Products />} />,
-  <Route
-    key='products-info'
-    path='management/products/info'
-    element={<ProductInfo />}
-  />,
   <Route
     key='productcategories'
     path='management/productcategories'
     element={<ProductCategories />}
   />,
-  <Route
-    key='productcategories-info'
-    path='management/productcategories/info'
-    element={<ProductCategoryInfo />}
-  />,
   <Route
     key='productskus'
     path='management/productskus'
     element={<ProductSkus />}
   />,
-  <Route
-    key='productskus-info'
-    path='management/productskus/info'
-    element={<ProductSkuInfo />}
-  />,
   <Route key='vendors' path='management/vendors' element={<Vendors />} />,
   <Route key='hosts' path='management/hosts' element={<Hosts />} />,
-  <Route
+  <Route key='users' path='management/users' element={<Users />} />,
-    key='hosts-info'
-    path='management/hosts/info'
-    element={<HostInfo />}
-  />,
-  <Route
-    key='users-info'
-    path='management/users/info'
-    element={<UserInfo />}
-  />,
-  <Route
-    key='vendors-info'
-    path='management/vendors/info'
-    element={<VendorInfo />}
-  />,
   <Route key='files' path='management/files' element={<Files />} />,
-  <Route
-    key='files-info'
-    path='management/files/info'
-    element={<FileInfo />}
-  />,
   <Route key='materials' path='management/materials' element={<Materials />} />,
-  <Route
-    key='materials-info'
-    path='management/materials/info'
-    element={<MaterialInfo />}
-  />,
   <Route key='couriers' path='management/couriers' element={<Couriers />} />,
-  <Route
-    key='couriers-info'
-    path='management/couriers/info'
-    element={<CourierInfo />}
-  />,
   <Route
     key='courierServices'
     path='management/courierServices'
     element={<CourierServices />}
   />,
-  <Route
-    key='courierServices-info'
-    path='management/courierServices/info'
-    element={<CourierServiceInfo />}
-  />,
   <Route key='notetypes' path='management/notetypes' element={<NoteTypes />} />,
-  <Route
-    key='notetypes-info'
-    path='management/notetypes/info'
-    element={<NoteTypeInfo />}
-  />,
   <Route key='note-info' path='management/notes/info' element={<NoteInfo />} />,
   <Route
     key='documentsizes'
     path='management/documentsizes'
     element={<DocumentSizes />}
   />,
-  <Route
-    key='documentsizes-info'
-    path='management/documentsizes/info'
-    element={<DocumentSizeInfo />}
-  />,
   <Route
     key='documenttemplates'
     path='management/documenttemplates'
     element={<DocumentTemplates />}
   />,
-  <Route
-    key='documenttemplates-info'
-    path='management/documenttemplates/info'
-    element={<DocumentTemplateInfo />}
-  />,
   <Route
     key='documentprinters'
     path='management/documentprinters'
     element={<DocumentPrinters />}
   />,
-  <Route
-    key='documentprinters-info'
-    path='management/documentprinters/info'
-    element={<DocumentPrinterInfo />}
-  />,
   <Route
     key='documentjobs'
     path='management/documentjobs'
     element={<DocumentJobs />}
   />,
-  <Route
-    key='documentjobs-info'
-    path='management/documentjobs/info'
-    element={<DocumentJobInfo />}
-  />,
   <Route
     key='documenttemplates-design'
     path='management/documenttemplates/design'
     element={<DocumentTemplateDesign />}
   />,
-  <Route key='users' path='management/users' element={<Users />} />,
   <Route
     key='apppasswords'
     path='management/apppasswords'
     element={<AppPasswords />}
   />,
-  <Route
-    key='apppasswords-info'
-    path='management/apppasswords/info'
-    element={<AppPasswordInfo />}
-  />,
   <Route key='settings' path='management/settings' element={<Settings />} />,
   <Route key='about' path='management/about' element={<About />} />,
   <Route key='auditlogs' path='management/auditlogs' element={<AuditLogs />} />,
-  <Route key='taxrates' path='management/taxrates' element={<TaxRates />} />,
+  <Route key='taxrates' path='management/taxrates' element={<TaxRates />} />
-  <Route
-    key='taxrates-info'
-    path='management/taxrates/info'
-    element={<TaxRateInfo />}
-  />
 ]
 
 export default ManagementRoutes

src/routes/ProductionRoutes.jsx

@@ -10,40 +10,19 @@ const Printers = lazy(
 const ControlPrinter = lazy(
   () => import('../components/Dashboard/Production/Printers/ControlPrinter.jsx')
 )
-const PrinterInfo = lazy(
-  () => import('../components/Dashboard/Production/Printers/PrinterInfo.jsx')
-)
 const PrinterProfiles = lazy(
   () => import('../components/Dashboard/Production/PrinterProfiles.jsx')
 )
-const PrinterProfileInfo = lazy(
-  () =>
-    import('../components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx')
-)
 const FilamentProfiles = lazy(
   () => import('../components/Dashboard/Production/FilamentProfiles.jsx')
 )
-const FilamentProfileInfo = lazy(
-  () =>
-    import('../components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx')
-)
 const Jobs = lazy(() => import('../components/Dashboard/Production/Jobs.jsx'))
-const JobInfo = lazy(
-  () => import('../components/Dashboard/Production/Jobs/JobInfo.jsx')
-)
 const SubJobs = lazy(
   () => import('../components/Dashboard/Production/SubJobs.jsx')
 )
-const SubJobInfo = lazy(
-  () => import('../components/Dashboard/Production/SubJobs/SubJobInfo.jsx')
-)
 const GCodeFiles = lazy(
   () => import('../components/Dashboard/Production/GCodeFiles')
 )
-const GCodeFileInfo = lazy(
-  () =>
-    import('../components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx')
-)
 const GCodeFilePreview = lazy(
   () =>
     import('../components/Dashboard/Production/GCodeFiles/GCodeFilePreview.jsx')
@@ -61,49 +40,23 @@ const ProductionRoutes = [
     path='production/printers/control'
     element={<ControlPrinter />}
   />,
-  <Route
-    key='printers-info'
-    path='production/printers/info'
-    element={<PrinterInfo />}
-  />,
   <Route
     key='printerprofiles'
     path='production/printerprofiles'
     element={<PrinterProfiles />}
   />,
-  <Route
-    key='printerprofiles-info'
-    path='production/printerprofiles/info'
-    element={<PrinterProfileInfo />}
-  />,
   <Route
     key='filamentprofiles'
     path='production/filamentprofiles'
     element={<FilamentProfiles />}
   />,
-  <Route
-    key='filamentprofiles-info'
-    path='production/filamentprofiles/info'
-    element={<FilamentProfileInfo />}
-  />,
   <Route key='jobs' path='production/jobs' element={<Jobs />} />,
   <Route key='subjobs' path='production/subjobs' element={<SubJobs />} />,
-  <Route
-    key='subjobs-info'
-    path='production/subjobs/info'
-    element={<SubJobInfo />}
-  />,
-  <Route key='jobs-info' path='production/jobs/info' element={<JobInfo />} />,
   <Route
     key='gcodefiles'
     path='production/gcodefiles'
     element={<GCodeFiles />}
   />,
-  <Route
-    key='gcodefiles-info'
-    path='production/gcodefiles/info'
-    element={<GCodeFileInfo />}
-  />,
   <Route
     key='gcodefiles-preview'
     path='production/gcodefiles/preview'

src/routes/SalesRoutes.jsx

@@ -2,74 +2,33 @@ import { lazy } from 'react'
 import { Route } from 'react-router-dom'
 
 const Clients = lazy(() => import('../components/Dashboard/Sales/Clients.jsx'))
-const ClientInfo = lazy(
-  () => import('../components/Dashboard/Sales/Clients/ClientInfo.jsx')
-)
 const SalesOrders = lazy(
   () => import('../components/Dashboard/Sales/SalesOrders.jsx')
 )
-const SalesOrderInfo = lazy(
-  () => import('../components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx')
-)
 const SalesOverview = lazy(
   () => import('../components/Dashboard/Sales/SalesOverview.jsx')
 )
 const Marketplaces = lazy(
   () => import('../components/Dashboard/Sales/Marketplaces.jsx')
 )
-const MarketplaceInfo = lazy(
-  () => import('../components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx')
-)
 const Listings = lazy(
   () => import('../components/Dashboard/Sales/Listings.jsx')
 )
-const ListingInfo = lazy(
-  () => import('../components/Dashboard/Sales/Listings/ListingInfo.jsx')
-)
-const ListingVarientInfo = lazy(
-  () =>
-    import('../components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx')
-)
 
 const SalesRoutes = [
   <Route key='overview' path='sales/overview' element={<SalesOverview />} />,
   <Route key='clients' path='sales/clients' element={<Clients />} />,
-  <Route
-    key='clients-info'
-    path='sales/clients/info'
-    element={<ClientInfo />}
-  />,
   <Route
     key='salesorders'
     path='sales/salesorders'
     element={<SalesOrders />}
   />,
-  <Route
-    key='salesorders-info'
-    path='sales/salesorders/info'
-    element={<SalesOrderInfo />}
-  />,
   <Route
     key='marketplaces'
     path='sales/marketplaces'
     element={<Marketplaces />}
   />,
-  <Route
+  <Route key='listings' path='sales/listings' element={<Listings />} />
-    key='marketplaces-info'
-    path='sales/marketplaces/info'
-    element={<MarketplaceInfo />}
-  />,
-  <Route key='listings' path='sales/listings' element={<Listings />} />,
-  <Route
-    key='listings-info'
-    path='sales/listings/info'
-    element={<ListingInfo />}
-  />,
-  <Route
-    key='listingvarients-info'
-    path='sales/listingvarients/info'
-    element={<ListingVarientInfo />}
-  />
 ]
 
 export default SalesRoutes