Add shipment management components

- Introduced CancelShipment, ReceiveShipment, and ShipShipment components for handling shipment actions.
- Each component includes a confirmation dialog and integrates with the ApiServerContext for respective operations.
- Added loading states and success messages for user feedback upon successful actions.
This commit is contained in:
Tom Butcher 2025-12-27 13:51:43 +00:00
parent 57e90e2b6f
commit 1c586daf3b
3 changed files with 138 additions and 0 deletions

View File

@ -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

View File

@ -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

View File

@ -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