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.

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 (

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 (

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 (

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 (

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 (

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 (

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

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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 (

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

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 (

src/components/Dashboard/common/ActionHandler.jsx

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

src/components/Dashboard/common/DeleteObject.jsx

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

src/components/Dashboard/common/DeleteObjectModal.jsx

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

src/components/Dashboard/common/MessageDialogView.jsx

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

src/components/Dashboard/common/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,
+            handleFetchObject
-            handleDelete
           })}
         </Form>
       </>

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 === true)
-      setModalCentered(resolvedModalAction.modalCentered)
-    }
   }, [resolvedModalAction?.modalCentered])
 
   const modalContentData =

src/database/models/Client.js

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

src/database/models/Courier.js

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

src/database/models/CourierService.js

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

src/database/models/Filament.js

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

src/database/models/FilamentProfile.js

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

src/database/models/FilamentSku.js

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

src/database/models/File.js

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

src/database/models/Host.js

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

src/database/models/Invoice.js

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

src/database/models/Job.js

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

src/database/models/Listing.js

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

src/database/models/ListingVarient.js

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

src/database/models/Marketplace.js

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

src/database/models/Material.js

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

src/database/models/OrderItem.js

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

src/database/models/PartSku.js

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

src/database/models/Payment.js

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

src/database/models/PermissionSetting.js

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

src/database/models/PrinterProfile.js

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

src/database/models/ProductCategory.js

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

src/database/models/ProductSku.js

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

src/database/models/ProductStock.js

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

src/database/models/PurchaseOrder.js

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

src/database/models/SalesOrder.js

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

src/database/models/Shipment.js

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

src/database/models/StockTransfer.js

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

src/database/models/TaxRate.js

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

src/database/models/TaxRecord.js

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

src/database/models/UserGroup.js

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

src/database/models/Vendor.js

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