diff --git a/src/components/Dashboard/Inventory/Shipments/CancelShipment.jsx b/src/components/Dashboard/Inventory/Shipments/CancelShipment.jsx
new file mode 100644
index 0000000..352292e
--- /dev/null
+++ b/src/components/Dashboard/Inventory/Shipments/CancelShipment.jsx
@@ -0,0 +1,46 @@
+import { useState, useContext } from 'react'
+import PropTypes from 'prop-types'
+import { ApiServerContext } from '../../context/ApiServerContext'
+import { message } from 'antd'
+import MessageDialogView from '../../common/MessageDialogView.jsx'
+
+const CancelShipment = ({ onOk, objectData }) => {
+  const [cancelLoading, setCancelLoading] = useState(false)
+  const { sendObjectFunction } = useContext(ApiServerContext)
+
+  const handleCancel = async () => {
+    setCancelLoading(true)
+    try {
+      const result = await sendObjectFunction(
+        objectData._id,
+        'Shipment',
+        'cancel'
+      )
+      if (result) {
+        message.success('Shipment cancelled successfully')
+        onOk(result)
+      }
+    } catch (error) {
+      console.error('Error cancelling shipment:', error)
+    } finally {
+      setCancelLoading(false)
+    }
+  }
+
+  return (
+    <MessageDialogView
+      title={'Are you sure you want to cancel this shipment?'}
+      description={`Cancelling shipment ${objectData?.name || objectData?._reference || objectData?._id} will update its status to cancelled.`}
+      onOk={handleCancel}
+      okText='Cancel'
+      okLoading={cancelLoading}
+    />
+  )
+}
+
+CancelShipment.propTypes = {
+  onOk: PropTypes.func.isRequired,
+  objectData: PropTypes.object
+}
+
+export default CancelShipment
diff --git a/src/components/Dashboard/Inventory/Shipments/ReceiveShipment.jsx b/src/components/Dashboard/Inventory/Shipments/ReceiveShipment.jsx
new file mode 100644
index 0000000..3da9924
--- /dev/null
+++ b/src/components/Dashboard/Inventory/Shipments/ReceiveShipment.jsx
@@ -0,0 +1,46 @@
+import { useState, useContext } from 'react'
+import PropTypes from 'prop-types'
+import { ApiServerContext } from '../../context/ApiServerContext'
+import { message } from 'antd'
+import MessageDialogView from '../../common/MessageDialogView.jsx'
+
+const ReceiveShipment = ({ onOk, objectData }) => {
+  const [receiveLoading, setReceiveLoading] = useState(false)
+  const { sendObjectFunction } = useContext(ApiServerContext)
+
+  const handleReceive = async () => {
+    setReceiveLoading(true)
+    try {
+      const result = await sendObjectFunction(
+        objectData._id,
+        'Shipment',
+        'receive'
+      )
+      if (result) {
+        message.success('Shipment received successfully')
+        onOk(result)
+      }
+    } catch (error) {
+      console.error('Error receiving shipment:', error)
+    } finally {
+      setReceiveLoading(false)
+    }
+  }
+
+  return (
+    <MessageDialogView
+      title={'Are you sure you want to receive this shipment?'}
+      description={`Receiving shipment ${objectData?.name || objectData?._reference || objectData?._id} will update its status to delivered.`}
+      onOk={handleReceive}
+      okText='Receive'
+      okLoading={receiveLoading}
+    />
+  )
+}
+
+ReceiveShipment.propTypes = {
+  onOk: PropTypes.func.isRequired,
+  objectData: PropTypes.object
+}
+
+export default ReceiveShipment
diff --git a/src/components/Dashboard/Inventory/Shipments/ShipShipment.jsx b/src/components/Dashboard/Inventory/Shipments/ShipShipment.jsx
new file mode 100644
index 0000000..27a2635
--- /dev/null
+++ b/src/components/Dashboard/Inventory/Shipments/ShipShipment.jsx
@@ -0,0 +1,46 @@
+import { useState, useContext } from 'react'
+import PropTypes from 'prop-types'
+import { ApiServerContext } from '../../context/ApiServerContext'
+import { message } from 'antd'
+import MessageDialogView from '../../common/MessageDialogView.jsx'
+
+const ShipShipment = ({ onOk, objectData }) => {
+  const [shipLoading, setShipLoading] = useState(false)
+  const { sendObjectFunction } = useContext(ApiServerContext)
+
+  const handleShip = async () => {
+    setShipLoading(true)
+    try {
+      const result = await sendObjectFunction(
+        objectData._id,
+        'Shipment',
+        'ship'
+      )
+      if (result) {
+        message.success('Shipment shipped successfully')
+        onOk(result)
+      }
+    } catch (error) {
+      console.error('Error shipping shipment:', error)
+    } finally {
+      setShipLoading(false)
+    }
+  }
+
+  return (
+    <MessageDialogView
+      title={'Are you sure you want to ship this shipment?'}
+      description={`Shipping shipment ${objectData?.name || objectData?._reference || objectData?._id} will update its status to shipped.`}
+      onOk={handleShip}
+      okText='Ship'
+      okLoading={shipLoading}
+    />
+  )
+}
+
+ShipShipment.propTypes = {
+  onOk: PropTypes.func.isRequired,
+  objectData: PropTypes.object
+}
+
+export default ShipShipment