Refactor Delete Functionality Across Multiple Components

- Removed the delete action from various components including InvoiceInfo, PaymentInfo, and others to streamline functionality. - Introduced a new DeleteObject component to handle deletion logic in a centralized manner, enhancing code maintainability. - Updated models to utilize the new DeleteObject component for consistent deletion handling across the application. - Simplified ObjectForm by eliminating the previous delete modal, improving component structure and clarity.
2026-08-22 21:06:32 +01:00 · 2026-08-22 21:06:32 +01:00 · 43464f8054
commit 43464f8054
parent c99227816e
67 changed files with 389 additions and 308 deletions
--- a/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
+++ b/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
@ -92,10 +92,6 @@ const InvoiceInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Finance/Payments/PaymentInfo.jsx
+++ b/src/components/Dashboard/Finance/Payments/PaymentInfo.jsx
@ -85,10 +85,6 @@ const PaymentInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx
+++ b/src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx
@ -77,10 +77,6 @@ const TaxRecordInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
+++ b/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
@ -78,10 +78,6 @@ const OrderItemInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx
@ -98,10 +98,6 @@ const ProductStockInfo = () => {
      objectFormRef?.current.handleUpdate()
      return true
    },
-    delete: () => {
-      objectFormRef?.current.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx
+++ b/src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx
@ -103,10 +103,6 @@ const PurchaseOrderInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx
+++ b/src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx
@ -96,10 +96,6 @@ const PurchaseOrderInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    },
    newOrderItem: () => {
      setNewOrderItemOpen(true)
      return true
--- a/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
+++ b/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
@ -88,10 +88,6 @@ const ShipmentInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx
@ -88,10 +88,6 @@ const StockTransferInfo = () => {
      objectFormRef?.current.handleUpdate()
      return true
    },
-    delete: () => {
-      objectFormRef?.current.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx
+++ b/src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx
@ -79,10 +79,6 @@ const CourierServiceInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/Couriers/CourierInfo.jsx
+++ b/src/components/Dashboard/Management/Couriers/CourierInfo.jsx
@ -75,10 +75,6 @@ const CourierInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx
+++ b/src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx
@ -74,10 +74,6 @@ const FilamentSkuInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
+++ b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
@ -93,10 +93,6 @@ const FilamentInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/Files/FileInfo.jsx
+++ b/src/components/Dashboard/Management/Files/FileInfo.jsx
@ -87,10 +87,6 @@ const FileInfo = () => {
      fetchFileContent(objectFormState?.objectData, true)
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/Hosts/HostInfo.jsx
+++ b/src/components/Dashboard/Management/Hosts/HostInfo.jsx
@ -88,10 +88,6 @@ const HostInfo = () => {
      objectFormRef?.current.handleUpdate()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
+++ b/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
@ -77,10 +77,6 @@ const MaterialInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/Notes/NoteInfo.jsx
+++ b/src/components/Dashboard/Management/Notes/NoteInfo.jsx
@ -78,10 +78,6 @@ const NoteInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx
+++ b/src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx
@ -69,10 +69,6 @@ const PartSkuInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/PermissionSettings/PermissionSettingInfo.jsx
+++ b/src/components/Dashboard/Management/PermissionSettings/PermissionSettingInfo.jsx
@ -81,10 +81,6 @@ const PermissionSettingInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx
+++ b/src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx
@ -74,10 +74,6 @@ const ProductCategoryInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx
+++ b/src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx
@ -75,10 +75,6 @@ const ProductSkuInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx
+++ b/src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx
@ -74,10 +74,6 @@ const TaxRateInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx
+++ b/src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx
@ -81,10 +81,6 @@ const UserGroupInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
+++ b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
@ -74,10 +74,6 @@ const VendorInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx
+++ b/src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx
@ -112,10 +112,6 @@ const FilamentProfileInfo = () => {
      objectFormRef.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx
+++ b/src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx
@ -90,10 +90,6 @@ const PrinterProfileInfo = () => {
      objectFormRef.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Sales/Clients/ClientInfo.jsx
+++ b/src/components/Dashboard/Sales/Clients/ClientInfo.jsx
@ -74,10 +74,6 @@ const ClientInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx
+++ b/src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx
@ -88,10 +88,6 @@ const ListingVarientInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Sales/Listings/ListingInfo.jsx
+++ b/src/components/Dashboard/Sales/Listings/ListingInfo.jsx
@ -86,10 +86,6 @@ const ListingInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx
+++ b/src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx
@ -143,10 +143,6 @@ const MarketplaceInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    },
    connect: () => {
      startAuthorization()
      return true
--- a/src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx
+++ b/src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx
@ -101,10 +101,6 @@ const SalesOrderInfo = () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    },
-    delete: () => {
-      objectFormRef?.current?.handleDelete?.()
-      return true
-    }
  }

  return (
--- a/src/components/Dashboard/common/ActionHandler.jsx
+++ b/src/components/Dashboard/common/ActionHandler.jsx
@ -16,7 +16,9 @@ const ActionHandler = forwardRef(
  ) => {
    const location = useLocation()
    const navigate = useNavigate()
-    const action = new URLSearchParams(location.search).get(actionParam)
+    const searchParams = new URLSearchParams(location.search)
+    const action = searchParams.get(actionParam)
+    const actionObjectType = searchParams.get('actionObjectType')

    // Ref to track last executed action
    const lastExecutedAction = useRef(null)
@ -44,6 +46,7 @@ const ActionHandler = forwardRef(
      if (
        loading == false &&
        action &&
+        !actionObjectType &&
        actions[action] &&
        lastExecutedAction.current !== action
      ) {
@ -71,6 +74,7 @@ const ActionHandler = forwardRef(
    }, [
      loading,
      action,
+      actionObjectType,
      actions,
      actionParam,
      clearAfterExecute,
--- a/src/components/Dashboard/common/DeleteObject.jsx
+++ b/src/components/Dashboard/common/DeleteObject.jsx
@ -0,0 +1,76 @@
+import { useState, useContext } from 'react'
+import PropTypes from 'prop-types'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { ApiServerContext } from '../context/ApiServerContext'
+import { useMessageContext } from '../context/MessageContext'
+import { useActions } from '../context/ActionsContext'
+import { getModelByName } from '../../../database/ObjectModels'
+import MessageDialogView from './MessageDialogView.jsx'
+import BinIcon from '../../Icons/BinIcon'
+
+const capitalizeFirstLetter = (value) => {
+  return String(value).charAt(0).toUpperCase() + String(value).slice(1)
+}
+
+const DeleteObject = ({ onOk, objectData, objectType: objectTypeProp }) => {
+  const [deleteLoading, setDeleteLoading] = useState(false)
+  const { deleteObject } = useContext(ApiServerContext)
+  const { showSuccess, showError } = useMessageContext()
+  const { currentObjectType } = useActions()
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  const objectType =
+    objectTypeProp ||
+    new URLSearchParams(location.search).get('actionObjectType') ||
+    currentObjectType
+
+  const model = objectType ? getModelByName(objectType) : null
+  const modelLabel = model?.label || 'object'
+  const objectName =
+    objectData?.name || objectData?._reference || objectData?._id
+
+  const handleDelete = async () => {
+    if (!objectData?._id || !objectType) return
+    setDeleteLoading(true)
+    try {
+      await deleteObject(objectData._id, objectType)
+      showSuccess(
+        `${capitalizeFirstLetter(modelLabel.toLowerCase())} deleted successfully!`
+      )
+      const onInfoPage = model?.url && location.pathname === `${model.url}/info`
+      if (onInfoPage) {
+        navigate(model.url)
+      } else {
+        onOk()
+      }
+    } catch (error) {
+      console.error('Error deleting object:', error)
+      showError(`Failed to delete ${modelLabel.toLowerCase()}.`)
+    } finally {
+      setDeleteLoading(false)
+    }
+  }
+
+  return (
+    <MessageDialogView
+      icon={<BinIcon />}
+      title={`Are you sure you want to delete this ${modelLabel.toLowerCase()}?`}
+      description={
+        objectName ? `This will permanently delete ${objectName}.` : undefined
+      }
+      onOk={handleDelete}
+      okText='Delete'
+      okLoading={deleteLoading}
+      danger
+    />
+  )
+}
+
+DeleteObject.propTypes = {
+  onOk: PropTypes.func.isRequired,
+  objectData: PropTypes.object,
+  objectType: PropTypes.string
+}
+
+export default DeleteObject
--- a/src/components/Dashboard/common/DeleteObjectModal.jsx
+++ b/src/components/Dashboard/common/DeleteObjectModal.jsx
@ -1,58 +0,0 @@
-import PropTypes from 'prop-types'
-import { Modal, Button, Space, Typography } from 'antd'
-import { getModelByName } from '../../../database/ObjectModels'
-import BinIcon from '../../Icons/BinIcon'
-
-const { Text } = Typography
-
-const DeleteObjectModal = ({ open, onOk, onCancel, loading, objectType }) => {
-  const model = getModelByName(objectType)
-  return (
-    <Modal
-      open={open}
-      title={
-        <Space size={'middle'}>
-          <BinIcon />
-          {`Confirm Delete ${model.label}`}
-        </Space>
-      }
-      onOk={onOk}
-      onCancel={onCancel}
-      okText='Delete'
-      cancelText='Cancel'
-      okType='danger'
-      closable={false}
-      centered
-      maskClosable={false}
-      footer={[
-        <Button key='cancel' onClick={onCancel} disabled={loading}>
-          Cancel
-        </Button>,
-        <Button
-          key='delete'
-          type='primary'
-          danger
-          onClick={onOk}
-          loading={loading}
-          disabled={loading}
-        >
-          Delete
-        </Button>
-      ]}
-    >
-      <Text>
-        Are you sure you want to delete this {model.label.toLowerCase()}?
-      </Text>
-    </Modal>
-  )
-}
-
-DeleteObjectModal.propTypes = {
-  open: PropTypes.bool.isRequired,
-  onOk: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  loading: PropTypes.bool,
-  objectType: PropTypes.string.isRequired
-}
-
-export default DeleteObjectModal
--- a/src/components/Dashboard/common/MessageDialogView.jsx
+++ b/src/components/Dashboard/common/MessageDialogView.jsx
@ -10,7 +10,8 @@ const MessageDialogView = ({
  description,
  onOk,
  okText,
-  okLoading
+  okLoading,
+  danger = false
 }) => {
  return (
    <Flex vertical gap={'middle'}>
@ -20,7 +21,12 @@ const MessageDialogView = ({
      </Flex>
      {description && <Text>{description}</Text>}
      <Flex justify={'end'}>
-        <Button type='primary' onClick={onOk} loading={okLoading}>
+        <Button
+          type='primary'
+          danger={danger}
+          onClick={onOk}
+          loading={okLoading}
+        >
          {okText || 'OK'}
        </Button>
      </Flex>
@ -34,7 +40,8 @@ MessageDialogView.propTypes = {
  description: PropTypes.node,
  onOk: PropTypes.func.isRequired,
  okText: PropTypes.string,
-  okLoading: PropTypes.bool
+  okLoading: PropTypes.bool,
+  danger: PropTypes.bool
 }

 export default MessageDialogView
--- a/src/components/Dashboard/common/ObjectForm.jsx
+++ b/src/components/Dashboard/common/ObjectForm.jsx
@ -11,7 +11,6 @@ import { Form } from 'antd'
 import { ApiServerContext } from '../context/ApiServerContext'
 import { AuthContext } from '../context/AuthContext'
 import { useMessageContext } from '../context/MessageContext'
-import DeleteObjectModal from './DeleteObjectModal'
 import merge from 'lodash/merge'
 import mergeWith from 'lodash/mergeWith'
 import set from 'lodash/set'
@ -157,12 +156,9 @@ const ObjectForm = forwardRef(
    const [form] = Form.useForm()
    const formUpdateValues = Form.useWatch([], form)
    const { showSuccess, showError } = useMessageContext()
-    const [deleteModalOpen, setDeleteModalOpen] = useState(false)
-    const [deleteLoading, setDeleteLoading] = useState(false)
    const {
      fetchObject,
      updateObject,
-      deleteObject,
      setObjectActivity,
      clearObjectActivity,
      fetchObjectActivities,
@ -777,34 +773,10 @@ const ObjectForm = forwardRef(
      onStateChangeRef.current({ editLoading: false })
    }

-    const handleDelete = () => {
-      setDeleteModalOpen(true)
-    }
-
-    const confirmDelete = async () => {
-      setDeleteLoading(true)
-      try {
-        await deleteObject(id, type)
-        setDeleteModalOpen(false)
-        showSuccess(`${getModelMessageLabel(type)} deleted successfully!`)
-        navigate(-2)
-        // Optionally: trigger a callback to parent to remove this object from view
-      } catch (err) {
-        console.error(err)
-        showError(
-          `Failed to delete ${getModelMessageLabel(type).toLowerCase()}.`
-        )
-      } finally {
-        setDeleteLoading(false)
-      }
-    }
-
    useImperativeHandle(ref, () => ({
      startEditing,
      cancelEditing,
      handleUpdate,
-      handleDelete,
-      confirmDelete,
      handleFetchObject,
      editLoading,
      fetchLoading,
@ -815,14 +787,6 @@ const ObjectForm = forwardRef(

    return (
      <>
-        <DeleteObjectModal
-          open={deleteModalOpen}
-          onOk={confirmDelete}
-          onCancel={() => setDeleteModalOpen(false)}
-          loading={deleteLoading}
-          objectType={type}
-          objectName={objectData?.name || objectData?.label || ''}
-        />
        <Form
          form={form}
          layout='vertical'
@ -897,8 +861,7 @@ const ObjectForm = forwardRef(
            editLoading,
            editDisabled: getEditDisabled(model, objectData, userProfile),
            activities,
-            handleFetchObject,
-            handleDelete
+            handleFetchObject
          })}
        </Form>
      </>
--- a/src/components/Dashboard/context/ActionsContext.jsx
+++ b/src/components/Dashboard/context/ActionsContext.jsx
@ -174,9 +174,7 @@ const ActionsProvider = ({ children }) => {

  const [modalCentered, setModalCentered] = useState(false)
  useEffect(() => {
-    if (resolvedModalAction?.modalCentered !== undefined) {
-      setModalCentered(resolvedModalAction.modalCentered)
-    }
+    setModalCentered(resolvedModalAction?.modalCentered === true)
  }, [resolvedModalAction?.modalCentered])

  const modalContentData =
--- a/src/database/models/Client.js
+++ b/src/database/models/Client.js
@ -6,6 +6,9 @@ const ClientInfo = lazy(
 const NewClient = lazy(
  () => import('../../components/Dashboard/Sales/Clients/NewClient')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ClientIcon from '../../components/Icons/ClientIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -84,11 +87,15 @@ export const Client = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/Courier.js
+++ b/src/database/models/Courier.js
@ -6,6 +6,9 @@ const CourierInfo = lazy(
 const NewCourier = lazy(
  () => import('../../components/Dashboard/Management/Couriers/NewCourier')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import CourierIcon from '../../components/Icons/CourierIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -84,11 +87,15 @@ export const Courier = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/CourierService.js
+++ b/src/database/models/CourierService.js
@ -6,6 +6,9 @@ const CourierServiceInfo = lazy(
 const NewCourierService = lazy(
  () => import('../../components/Dashboard/Management/CourierServices/NewCourierService')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import CourierServiceIcon from '../../components/Icons/CourierServiceIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -84,11 +87,15 @@ export const CourierService = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/Filament.js
+++ b/src/database/models/Filament.js
@ -6,6 +6,9 @@ const FilamentInfo = lazy(
 const NewFilament = lazy(
  () => import('../../components/Dashboard/Management/Filaments/NewFilament')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import EditIcon from '../../components/Icons/EditIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import CheckIcon from '../../components/Icons/CheckIcon'
@ -95,13 +98,17 @@ export const Filament = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
      danger: true,
      visible: (objectData) => {
        return !(objectData?._isEditing && objectData?._isEditing == true)
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
      }
    }
  ],
--- a/src/database/models/FilamentProfile.js
+++ b/src/database/models/FilamentProfile.js
@ -7,6 +7,9 @@ const FilamentProfileInfo = lazy(
 const NewFilamentProfile = lazy(
  () => import('../../components/Dashboard/Production/FilamentProfiles/NewFilamentProfile')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import FilamentProfileIcon from '../../components/Icons/FilamentProfileIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -85,12 +88,16 @@ export const FilamentProfile = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      row: true,
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/FilamentSku.js
+++ b/src/database/models/FilamentSku.js
@ -6,6 +6,9 @@ const FilamentSkuInfo = lazy(
 const NewFilamentSku = lazy(
  () => import('../../components/Dashboard/Management/FilamentSkus/NewFilamentSku')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import FilamentSkuIcon from '../../components/Icons/FilamentSkuIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -84,11 +87,15 @@ export const FilamentSku = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/File.js
+++ b/src/database/models/File.js
@ -3,6 +3,9 @@ import { createElement, lazy } from 'react'
 const FileInfo = lazy(
  () => import('../../components/Dashboard/Management/Files/FileInfo')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import DownloadIcon from '../../components/Icons/DownloadIcon'
 import FileIcon from '../../components/Icons/FileIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -78,11 +81,15 @@ export const File = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/Host.js
+++ b/src/database/models/Host.js
@ -9,6 +9,9 @@ const NewHost = lazy(
 const HostOTP = lazy(
  () => import('../../components/Dashboard/Management/Hosts/HostOtp')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import HostIcon from '../../components/Icons/HostIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -100,11 +103,15 @@ export const Host = {
    },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/Invoice.js
+++ b/src/database/models/Invoice.js
@ -12,6 +12,9 @@ const PostInvoice = lazy(
 const AcknowledgeInvoice = lazy(
  () => import('../../components/Dashboard/Finance/Invoices/AcknowledgeInvoice')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import InvoiceIcon from '../../components/Icons/InvoiceIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -92,8 +95,9 @@ export const Invoice = {
    },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
      danger: true,
@ -102,6 +106,9 @@ export const Invoice = {
      },
      disabled: (objectData) => {
        return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
      }
    },
    { type: 'divider' },
--- a/src/database/models/Job.js
+++ b/src/database/models/Job.js
@ -9,6 +9,9 @@ const NewJob = lazy(
 const DeployJob = lazy(
  () => import('../../components/Dashboard/Production/Jobs/DeployJob')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import JobIcon from '../../components/Icons/JobIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -90,8 +93,9 @@ export const Job = {
    },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
      danger: true,
@ -100,6 +104,9 @@ export const Job = {
      },
      disabled: (objectData) => {
        return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
      }
    },
    { type: 'divider' },
--- a/src/database/models/Listing.js
+++ b/src/database/models/Listing.js
@ -12,6 +12,9 @@ const PublishListing = lazy(
 const UnpublishListing = lazy(
  () => import('../../components/Dashboard/Sales/Listings/UnpublishListing')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ListingIcon from '../../components/Icons/ListingIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -126,11 +129,15 @@ export const Listing = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/ListingVarient.js
+++ b/src/database/models/ListingVarient.js
@ -12,6 +12,9 @@ const PublishListingVarient = lazy(
 const UnpublishListingVarient = lazy(
  () => import('../../components/Dashboard/Sales/ListingVarients/UnpublishListingVarient')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ListingVarientIcon from '../../components/Icons/ListingVarientIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -118,11 +121,15 @@ export const ListingVarient = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/Marketplace.js
+++ b/src/database/models/Marketplace.js
@ -12,6 +12,9 @@ const SyncListings = lazy(
 const SyncOrders = lazy(
  () => import('../../components/Dashboard/Sales/Marketplaces/SyncOrders')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import MarketplaceIcon from '../../components/Icons/MarketplaceIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -154,11 +157,15 @@ export const Marketplace = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/Material.js
+++ b/src/database/models/Material.js
@ -6,6 +6,9 @@ const MaterialInfo = lazy(
 const NewMaterial = lazy(
  () => import('../../components/Dashboard/Management/Materials/NewMaterial')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import MaterialIcon from '../../components/Icons/MaterialIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -84,11 +87,15 @@ export const Material = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/OrderItem.js
+++ b/src/database/models/OrderItem.js
@ -6,6 +6,9 @@ const OrderItemInfo = lazy(
 const NewOrderItem = lazy(
  () => import('../../components/Dashboard/Inventory/OrderItems/NewOrderItem')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import OrderItemIcon from '../../components/Icons/OrderItemIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -31,7 +34,11 @@ export const OrderItem = {
      label: 'New Order Item',
      icon: PlusIcon,
      content: (objectData, { onOk } = {}) => {
-        return createElement(NewOrderItem, { defaultValues: objectData, onOk, reset: true })
+        return createElement(NewOrderItem, {
+          defaultValues: objectData,
+          onOk,
+          reset: true
+        })
      }
    },
    {
@ -86,9 +93,11 @@ export const OrderItem = {
    },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
+      row: true,
      icon: BinIcon,
      danger: true,
      visible: (objectData) => {
@ -96,6 +105,9 @@ export const OrderItem = {
      },
      disabled: (objectData) => {
        return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
      }
    }
  ],
--- a/src/database/models/PartSku.js
+++ b/src/database/models/PartSku.js
@ -6,6 +6,9 @@ const PartSkuInfo = lazy(
 const NewPartSku = lazy(
  () => import('../../components/Dashboard/Management/PartSkus/NewPartSku')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PartSkuIcon from '../../components/Icons/PartSkuIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -84,11 +87,15 @@ export const PartSku = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/Payment.js
+++ b/src/database/models/Payment.js
@ -18,6 +18,9 @@ const DeclinePayment = lazy(
 const CancelPayment = lazy(
  () => import('../../components/Dashboard/Finance/Payments/CancelPayment')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PaymentIcon from '../../components/Icons/PaymentIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -98,8 +101,9 @@ export const Payment = {
    },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
      danger: true,
@ -108,6 +112,9 @@ export const Payment = {
      },
      disabled: (objectData) => {
        return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
      }
    },
    { type: 'divider' },
--- a/src/database/models/PermissionSetting.js
+++ b/src/database/models/PermissionSetting.js
@ -7,6 +7,9 @@ const PermissionSettingInfo = lazy(
 const NewPermissionSetting = lazy(
  () => import('../../components/Dashboard/Management/PermissionSettings/NewPermissionSetting')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PermissionSettingIcon from '../../components/Icons/PermissionSettingIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -86,11 +89,15 @@ export const PermissionSetting = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/PrinterProfile.js
+++ b/src/database/models/PrinterProfile.js
@ -6,6 +6,9 @@ const PrinterProfileInfo = lazy(
 const NewPrinterProfile = lazy(
  () => import('../../components/Dashboard/Production/PrinterProfiles/NewPrinterProfile')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PrinterProfileIcon from '../../components/Icons/PrinterProfileIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -349,12 +352,16 @@ export const PrinterProfile = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      row: true,
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/ProductCategory.js
+++ b/src/database/models/ProductCategory.js
@ -6,6 +6,9 @@ const ProductCategoryInfo = lazy(
 const NewProductCategory = lazy(
  () => import('../../components/Dashboard/Management/ProductCategories/NewProductCategory')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ProductCategoryIcon from '../../components/Icons/ProductCategoryIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -85,11 +88,15 @@ export const ProductCategory = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/ProductSku.js
+++ b/src/database/models/ProductSku.js
@ -6,6 +6,9 @@ const ProductSkuInfo = lazy(
 const NewProductSku = lazy(
  () => import('../../components/Dashboard/Management/ProductSkus/NewProductSku')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ProductSkuIcon from '../../components/Icons/ProductSkuIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -84,11 +87,15 @@ export const ProductSku = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/ProductStock.js
+++ b/src/database/models/ProductStock.js
@ -9,6 +9,9 @@ const NewProductStock = lazy(
 const PostProductStock = lazy(
  () => import('../../components/Dashboard/Inventory/ProductStocks/PostProductStock')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ProductStockIcon from '../../components/Icons/ProductStockIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import { getModelByName } from '../ObjectModels.js'
@ -90,8 +93,9 @@ export const ProductStock = {
    },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
      danger: true,
@ -100,6 +104,9 @@ export const ProductStock = {
      },
      disabled: (objectData) => {
        return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
      }
    },
    { type: 'divider' },
--- a/src/database/models/PurchaseOrder.js
+++ b/src/database/models/PurchaseOrder.js
@ -15,6 +15,9 @@ const AcknowledgePurchaseOrder = lazy(
 const CancelPurchaseOrder = lazy(
  () => import('../../components/Dashboard/Inventory/PurchaseOrders/CancelPurchaseOrder')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PurchaseOrderIcon from '../../components/Icons/PurchaseOrderIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -95,8 +98,9 @@ export const PurchaseOrder = {
    },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
      danger: true,
@ -105,6 +109,9 @@ export const PurchaseOrder = {
      },
      disabled: (objectData) => {
        return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
      }
    },
    { type: 'divider' },
--- a/src/database/models/SalesOrder.js
+++ b/src/database/models/SalesOrder.js
@ -15,6 +15,9 @@ const ConfirmSalesOrder = lazy(
 const CancelSalesOrder = lazy(
  () => import('../../components/Dashboard/Sales/SalesOrders/CancelSalesOrder')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import SalesOrderIcon from '../../components/Icons/SalesOrderIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -95,8 +98,9 @@ export const SalesOrder = {
    },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
      danger: true,
@ -105,6 +109,9 @@ export const SalesOrder = {
      },
      disabled: (objectData) => {
        return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
      }
    },
    { type: 'divider' },
--- a/src/database/models/Shipment.js
+++ b/src/database/models/Shipment.js
@ -15,6 +15,9 @@ const ReceiveShipment = lazy(
 const CancelShipment = lazy(
  () => import('../../components/Dashboard/Inventory/Shipments/CancelShipment')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import ShipmentIcon from '../../components/Icons/ShipmentIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -95,8 +98,9 @@ export const Shipment = {
    },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
      danger: true,
@ -105,6 +109,9 @@ export const Shipment = {
      },
      disabled: (objectData) => {
        return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
      }
    },
    { type: 'divider' },
--- a/src/database/models/StockTransfer.js
+++ b/src/database/models/StockTransfer.js
@ -9,6 +9,9 @@ const NewStockTransfer = lazy(
 const PostStockTransfer = lazy(
  () => import('../../components/Dashboard/Inventory/StockTransfers/PostStockTransfer')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import StockTransferIcon from '../../components/Icons/StockTransferIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -89,8 +92,9 @@ export const StockTransfer = {
    },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
      danger: true,
@ -99,6 +103,9 @@ export const StockTransfer = {
      },
      disabled: (objectData) => {
        return objectData?.state?.type != 'draft'
+      },
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
      }
    },
    { type: 'divider' },
--- a/src/database/models/TaxRate.js
+++ b/src/database/models/TaxRate.js
@ -6,6 +6,9 @@ const TaxRateInfo = lazy(
 const NewTaxRate = lazy(
  () => import('../../components/Dashboard/Management/TaxRates/NewTaxRate')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import TaxRateIcon from '../../components/Icons/TaxRateIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -84,11 +87,15 @@ export const TaxRate = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/TaxRecord.js
+++ b/src/database/models/TaxRecord.js
@ -6,6 +6,9 @@ const TaxRecordInfo = lazy(
 const NewTaxRecord = lazy(
  () => import('../../components/Dashboard/Finance/TaxRecords/NewTaxRecord')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import TaxRecordIcon from '../../components/Icons/TaxRecordIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -84,11 +87,15 @@ export const TaxRecord = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/UserGroup.js
+++ b/src/database/models/UserGroup.js
@ -6,6 +6,9 @@ const UserGroupInfo = lazy(
 const NewUserGroup = lazy(
  () => import('../../components/Dashboard/Management/UserGroups/NewUserGroup')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import PersonGroupIcon from '../../components/Icons/PersonGroupIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -85,11 +88,15 @@ export const UserGroup = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [
--- a/src/database/models/Vendor.js
+++ b/src/database/models/Vendor.js
@ -6,6 +6,9 @@ const VendorInfo = lazy(
 const NewVendor = lazy(
  () => import('../../components/Dashboard/Management/Vendors/NewVendor')
 )
+const DeleteObject = lazy(
+  () => import('../../components/Dashboard/common/DeleteObject')
+)
 import VendorIcon from '../../components/Icons/VendorIcon'
 import PlusIcon from '../../components/Icons/PlusIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -84,11 +87,15 @@ export const Vendor = {
    { type: 'divider' },
    {
      name: 'delete',
-      type: 'page',
-      pageName: 'info',
+      type: 'modal',
+      modalWidth: 520,
+      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
-      danger: true
+      danger: true,
+      content: (objectData, { onOk } = {}) => {
+        return createElement(DeleteObject, { objectData, onOk })
+      }
    }
  ],
  pages: [