Add Order Items and Shipments components with associated icons and forms

- Introduced OrderItems and Shipments components for managing order items and shipments. - Added NewOrderItem and NewShipment forms for creating new entries. - Implemented ObjectTable for displaying lists in different view modes. - Created SVG icons for OrderItem and Shipment. - Removed deprecated OrderItemsIcon component.
2025-12-07 02:39:45 +00:00 · 2025-12-07 02:39:45 +00:00 · 3673a7a1ec
commit 3673a7a1ec
parent 4995d37aa2
11 changed files with 846 additions and 6 deletions
--- a/assets/icons/orderitemsicon.svg
+++ b/assets/icons/orderitemsicon.svg
--- a/assets/icons/shipmenticon.svg
+++ b/assets/icons/shipmenticon.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.607884,0,0,0.607884,2,6.470704)">
+        <path d="M48.669,64.047L37.295,64.047C35.825,69.222 31.078,73.031 25.453,73.031C19.815,73.031 15.034,69.222 13.552,64.047L10.547,64.047C3.781,64.047 0,60.266 0,53.516L0,11.688C0,4.938 3.781,1.141 10.547,1.141L57.859,1.141C64.609,1.141 68.391,4.938 68.391,11.688L68.391,18.422L76.766,18.422C80.406,18.422 82.859,19.344 85.031,21.781L96.078,34.266C98.109,36.547 98.703,38.266 98.703,41.906L98.703,47.796L90.672,43.432L90.672,42.578C90.672,41.062 90.219,39.797 89.312,38.766L79.844,28.141C78.703,26.859 77.484,26.453 75.859,26.453L68.391,26.453L68.391,41.102L60.359,45.47L60.359,12.328C60.359,10.141 59.281,9.141 57.172,9.141L11.203,9.141C9.078,9.141 8.031,10.141 8.031,12.328L8.031,52.859C8.031,55.063 9.078,56.031 11.203,56.031L13.984,56.031C15.827,51.524 20.28,48.344 25.453,48.344C30.614,48.344 35.037,51.524 36.866,56.031L48.805,56.031C48.713,56.664 48.669,57.335 48.669,58.048L48.669,64.047ZM71.404,39.488C71.395,39.38 71.391,39.269 71.391,39.156L71.391,29.766L75.031,29.766C76.172,29.766 76.938,30.188 77.719,31.062L86.219,40.641C86.421,40.864 86.586,41.062 86.706,41.277L84.098,39.859C80.017,37.638 75.532,37.513 71.404,39.488ZM25.453,66.422C28.609,66.422 31.156,63.828 31.156,60.656C31.156,57.5 28.609,54.906 25.453,54.906C22.281,54.906 19.688,57.5 19.688,60.656C19.688,63.828 22.281,66.422 25.453,66.422Z"/>
+    </g>
+    <path d="M36.262,57.455L47.835,63.705C48.595,64.12 49.484,64.12 50.258,63.705L61.815,57.455C63.32,56.645 64,55.748 64,53.768L64,41.758C64,40.158 63.393,39.124 61.975,38.357L51.928,32.897C50.069,31.885 48.016,31.885 46.157,32.897L36.117,38.357C34.693,39.124 34.085,40.157 34.085,41.757L34.085,53.767C34.085,55.747 34.772,56.644 36.262,57.455M38.295,54.7C37.585,54.313 37.325,53.89 37.325,53.2L37.325,43.393L47.35,48.882L47.35,59.694L38.295,54.7ZM59.79,54.7L50.728,59.694L50.728,48.882L60.76,43.393L60.76,53.201C60.76,53.889 60.5,54.313 59.79,54.701M49.043,45.941L39.177,40.559L42.447,38.751L52.341,44.125L49.043,45.941ZM55.798,42.274L45.918,36.893L47.632,35.939C48.572,35.429 49.498,35.408 50.452,35.939L58.915,40.559L55.798,42.274Z" style="fill-rule:nonzero;"/>
+</svg>
--- a/src/components/Dashboard/Inventory/OrderItems.jsx
+++ b/src/components/Dashboard/Inventory/OrderItems.jsx
@ -0,0 +1,101 @@
+import { useState, useRef } from 'react'
+import { Button, Flex, Space, Modal, Dropdown, message } from 'antd'
+import NewOrderItem from './OrderItems/NewOrderItem'
+import ObjectTable from '../common/ObjectTable'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
+import useColumnVisibility from '../hooks/useColumnVisibility'
+import GridIcon from '../../Icons/GridIcon'
+import ListIcon from '../../Icons/ListIcon'
+import useViewMode from '../hooks/useViewMode'
+import ColumnViewButton from '../common/ColumnViewButton'
+
+const OrderItems = () => {
+  const [messageApi, contextHolder] = message.useMessage()
+  const [newOrderItemOpen, setNewOrderItemOpen] = useState(false)
+  const tableRef = useRef()
+
+  const [viewMode, setViewMode] = useViewMode('orderItems')
+
+  const [columnVisibility, setColumnVisibility] =
+    useColumnVisibility('orderItems')
+
+  const actionItems = {
+    items: [
+      {
+        label: 'New Order Item',
+        key: 'newOrderItem',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newOrderItem') {
+        setNewOrderItemOpen(true)
+      }
+    }
+  }
+
+  return (
+    <>
+      <Flex vertical={'true'} gap='large'>
+        {contextHolder}
+        <Flex justify={'space-between'}>
+          <Space size='small'>
+            <Dropdown menu={actionItems}>
+              <Button>Actions</Button>
+            </Dropdown>
+            <ColumnViewButton
+              type='orderItem'
+              loading={false}
+              visibleState={columnVisibility}
+              updateVisibleState={setColumnVisibility}
+            />
+          </Space>
+          <Space>
+            <Button
+              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              onClick={() =>
+                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+              }
+            />
+          </Space>
+        </Flex>
+        <ObjectTable
+          ref={tableRef}
+          visibleColumns={columnVisibility}
+          type='orderItem'
+          cards={viewMode === 'cards'}
+        />
+      </Flex>
+      <Modal
+        open={newOrderItemOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewOrderItemOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewOrderItem
+          onOk={() => {
+            setNewOrderItemOpen(false)
+            messageApi.success('New order item created successfully.')
+            tableRef.current?.reload()
+          }}
+          reset={newOrderItemOpen}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export default OrderItems
--- a/src/components/Dashboard/Inventory/OrderItems/NewOrderItem.jsx
+++ b/src/components/Dashboard/Inventory/OrderItems/NewOrderItem.jsx
@ -0,0 +1,99 @@
+import PropTypes from 'prop-types'
+import ObjectInfo from '../../common/ObjectInfo'
+import NewObjectForm from '../../common/NewObjectForm'
+import WizardView from '../../common/WizardView'
+
+const NewOrderItem = ({ onOk, reset, defaultValues }) => {
+  return (
+    <NewObjectForm
+      type={'orderItem'}
+      reset={reset}
+      defaultValues={{ syncAmount: null, quantity: 1, ...defaultValues }}
+    >
+      {({ handleSubmit, submitLoading, objectData, formValid }) => {
+        const steps = [
+          {
+            title: 'Required',
+            key: 'required',
+            content: (
+              <ObjectInfo
+                type='orderItem'
+                column={1}
+                bordered={false}
+                isEditing={true}
+                required={true}
+                objectData={objectData}
+                visibleProperties={{
+                  syncAmount: false,
+                  itemAmount: false,
+                  totalAmount: false,
+                  totalAmountWithTax: false,
+                  quantity: false
+                }}
+              />
+            )
+          },
+          {
+            title: 'Pricing',
+            key: 'pricing',
+            content: (
+              <ObjectInfo
+                type='orderItem'
+                column={1}
+                bordered={false}
+                isEditing={true}
+                objectData={objectData}
+                visibleProperties={{
+                  syncAmount: true,
+                  itemAmount: true,
+                  quantity: true,
+                  taxRate: true,
+                  totalAmountWithTax: true,
+                  totalAmount: true
+                }}
+              />
+            )
+          },
+          {
+            title: 'Summary',
+            key: 'summary',
+            content: (
+              <ObjectInfo
+                type='orderItem'
+                column={1}
+                bordered={false}
+                visibleProperties={{
+                  _id: false,
+                  createdAt: false,
+                  updatedAt: false
+                }}
+                isEditing={false}
+                objectData={objectData}
+              />
+            )
+          }
+        ]
+        return (
+          <WizardView
+            steps={steps}
+            loading={submitLoading}
+            formValid={formValid}
+            title='New Order Item'
+            onSubmit={() => {
+              handleSubmit()
+              onOk()
+            }}
+          />
+        )
+      }}
+    </NewObjectForm>
+  )
+}
+
+NewOrderItem.propTypes = {
+  onOk: PropTypes.func.isRequired,
+  reset: PropTypes.bool,
+  defaultValues: PropTypes.object
+}
+
+export default NewOrderItem
--- a/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
+++ b/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
@ -0,0 +1,202 @@
+import { useRef, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { Space, Flex, Card } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+import loglevel from 'loglevel'
+import config from '../../../../config.js'
+import useCollapseState from '../../hooks/useCollapseState.js'
+import NotesPanel from '../../common/NotesPanel.jsx'
+import InfoCollapse from '../../common/InfoCollapse.jsx'
+import ObjectInfo from '../../common/ObjectInfo.jsx'
+import ViewButton from '../../common/ViewButton.jsx'
+import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
+import NoteIcon from '../../../Icons/NoteIcon.jsx'
+import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
+import ObjectForm from '../../common/ObjectForm.jsx'
+import EditButtons from '../../common/EditButtons.jsx'
+import LockIndicator from '../../common/LockIndicator.jsx'
+import ActionHandler from '../../common/ActionHandler.jsx'
+import ObjectActions from '../../common/ObjectActions.jsx'
+import ObjectTable from '../../common/ObjectTable.jsx'
+import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
+
+const log = loglevel.getLogger('OrderItemInfo')
+log.setLevel(config.logLevel)
+
+const OrderItemInfo = () => {
+  const location = useLocation()
+  const objectFormRef = useRef(null)
+  const actionHandlerRef = useRef(null)
+  const orderItemId = new URLSearchParams(location.search).get('orderItemId')
+  const [collapseState, updateCollapseState] = useCollapseState(
+    'OrderItemInfo',
+    {
+      info: true,
+      notes: true,
+      auditLogs: true
+    }
+  )
+
+  const [objectFormState, setEditFormState] = useState({
+    isEditing: false,
+    editLoading: false,
+    formValid: false,
+    lock: null,
+    loading: false,
+    objectData: {}
+  })
+
+  const actions = {
+    reload: () => {
+      objectFormRef?.current?.handleFetchObject?.()
+      return true
+    },
+    edit: () => {
+      objectFormRef?.current?.startEditing?.()
+      return false
+    },
+    cancelEdit: () => {
+      objectFormRef?.current?.cancelEditing?.()
+      return true
+    },
+    finishEdit: () => {
+      objectFormRef?.current?.handleUpdate?.()
+      return true
+    },
+    delete: () => {
+      objectFormRef?.current?.handleDelete?.()
+      return true
+    }
+  }
+
+  return (
+    <>
+      <Flex
+        gap='large'
+        vertical='true'
+        style={{
+          maxHeight: '100%',
+          minHeight: 0
+        }}
+      >
+        <Flex justify={'space-between'}>
+          <Space size='middle'>
+            <Space size='small'>
+              <ObjectActions
+                type='orderItem'
+                id={orderItemId}
+                disabled={objectFormState.loading}
+                objectData={objectFormState.objectData}
+              />
+              <ViewButton
+                disabled={objectFormState.loading}
+                items={[
+                  { key: 'info', label: 'Order Item Information' },
+                  { key: 'notes', label: 'Notes' },
+                  { key: 'auditLogs', label: 'Audit Logs' }
+                ]}
+                visibleState={collapseState}
+                updateVisibleState={updateCollapseState}
+              />
+            </Space>
+            <LockIndicator lock={objectFormState.lock} />
+          </Space>
+          <Space>
+            <EditButtons
+              isEditing={objectFormState.isEditing}
+              handleUpdate={() => {
+                actionHandlerRef.current.callAction('finishEdit')
+              }}
+              cancelEditing={() => {
+                actionHandlerRef.current.callAction('cancelEdit')
+              }}
+              startEditing={() => {
+                actionHandlerRef.current.callAction('edit')
+              }}
+              editLoading={objectFormState.editLoading}
+              formValid={objectFormState.formValid}
+              disabled={objectFormState.lock?.locked || objectFormState.loading}
+              loading={objectFormState.editLoading}
+            />
+          </Space>
+        </Flex>
+
+        <ScrollBox>
+          <Flex vertical gap={'large'}>
+            <ActionHandler
+              actions={actions}
+              loading={objectFormState.loading}
+              ref={actionHandlerRef}
+            >
+              <ObjectForm
+                id={orderItemId}
+                type='orderItem'
+                style={{ height: '100%' }}
+                ref={objectFormRef}
+                onStateChange={(state) => {
+                  setEditFormState((prev) => ({ ...prev, ...state }))
+                }}
+              >
+                {({ loading, isEditing, objectData }) => (
+                  <Flex vertical gap={'large'}>
+                    <InfoCollapse
+                      title='Order Item Information'
+                      icon={<InfoCircleIcon />}
+                      active={collapseState.info}
+                      onToggle={(expanded) =>
+                        updateCollapseState('info', expanded)
+                      }
+                      collapseKey='info'
+                    >
+                      <ObjectInfo
+                        loading={loading}
+                        indicator={<LoadingOutlined />}
+                        isEditing={isEditing}
+                        type='orderItem'
+                        objectData={objectData}
+                        labelWidth='200px'
+                      />
+                    </InfoCollapse>
+                  </Flex>
+                )}
+              </ObjectForm>
+            </ActionHandler>
+            <InfoCollapse
+              title='Notes'
+              icon={<NoteIcon />}
+              active={collapseState.notes}
+              onToggle={(expanded) => updateCollapseState('notes', expanded)}
+              collapseKey='notes'
+            >
+              <Card>
+                <NotesPanel _id={orderItemId} type='orderItem' />
+              </Card>
+            </InfoCollapse>
+            <InfoCollapse
+              title='Audit Logs'
+              icon={<AuditLogIcon />}
+              active={collapseState.auditLogs}
+              onToggle={(expanded) =>
+                updateCollapseState('auditLogs', expanded)
+              }
+              collapseKey='auditLogs'
+            >
+              {objectFormState.loading ? (
+                <InfoCollapsePlaceholder />
+              ) : (
+                <ObjectTable
+                  type='auditLog'
+                  masterFilter={{ 'parent._id': orderItemId }}
+                  visibleColumns={{ _id: false, 'parent._id': false }}
+                />
+              )}
+            </InfoCollapse>
+          </Flex>
+        </ScrollBox>
+      </Flex>
+    </>
+  )
+}
+
+export default OrderItemInfo
--- a/src/components/Dashboard/Inventory/Shipments.jsx
+++ b/src/components/Dashboard/Inventory/Shipments.jsx
@ -0,0 +1,101 @@
+import { useState, useRef } from 'react'
+import { Button, Flex, Space, Modal, Dropdown, message } from 'antd'
+import NewShipment from './Shipments/NewShipment'
+import ObjectTable from '../common/ObjectTable'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
+import useColumnVisibility from '../hooks/useColumnVisibility'
+import GridIcon from '../../Icons/GridIcon'
+import ListIcon from '../../Icons/ListIcon'
+import useViewMode from '../hooks/useViewMode'
+import ColumnViewButton from '../common/ColumnViewButton'
+
+const Shipments = () => {
+  const [messageApi, contextHolder] = message.useMessage()
+  const [newShipmentOpen, setNewShipmentOpen] = useState(false)
+  const tableRef = useRef()
+
+  const [viewMode, setViewMode] = useViewMode('shipments')
+
+  const [columnVisibility, setColumnVisibility] =
+    useColumnVisibility('shipments')
+
+  const actionItems = {
+    items: [
+      {
+        label: 'New Shipment',
+        key: 'newShipment',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newShipment') {
+        setNewShipmentOpen(true)
+      }
+    }
+  }
+
+  return (
+    <>
+      <Flex vertical={'true'} gap='large'>
+        {contextHolder}
+        <Flex justify={'space-between'}>
+          <Space size='small'>
+            <Dropdown menu={actionItems}>
+              <Button>Actions</Button>
+            </Dropdown>
+            <ColumnViewButton
+              type='shipment'
+              loading={false}
+              visibleState={columnVisibility}
+              updateVisibleState={setColumnVisibility}
+            />
+          </Space>
+          <Space>
+            <Button
+              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              onClick={() =>
+                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+              }
+            />
+          </Space>
+        </Flex>
+        <ObjectTable
+          ref={tableRef}
+          visibleColumns={columnVisibility}
+          type='shipment'
+          cards={viewMode === 'cards'}
+        />
+      </Flex>
+      <Modal
+        open={newShipmentOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewShipmentOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewShipment
+          onOk={() => {
+            setNewShipmentOpen(false)
+            messageApi.success('New shipment created successfully.')
+            tableRef.current?.reload()
+          }}
+          reset={newShipmentOpen}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export default Shipments
--- a/src/components/Dashboard/Inventory/Shipments/NewShipment.jsx
+++ b/src/components/Dashboard/Inventory/Shipments/NewShipment.jsx
@ -0,0 +1,94 @@
+import PropTypes from 'prop-types'
+import ObjectInfo from '../../common/ObjectInfo'
+import NewObjectForm from '../../common/NewObjectForm'
+import WizardView from '../../common/WizardView'
+import { getModelProperty } from '../../../../database/ObjectModels.js'
+import ObjectProperty from '../../common/ObjectProperty.jsx'
+
+const NewShipment = ({ onOk, reset, defaultValues }) => {
+  return (
+    <NewObjectForm
+      type={'shipment'}
+      reset={reset}
+      defaultValues={{ state: { type: 'pending' }, ...defaultValues }}
+    >
+      {({ handleSubmit, submitLoading, objectData, formValid }) => {
+        const steps = [
+          {
+            title: 'Required',
+            key: 'required',
+            content: (
+              <ObjectInfo
+                type='shipment'
+                column={1}
+                bordered={false}
+                isEditing={true}
+                required={true}
+                objectData={objectData}
+                visibleProperties={{
+                  items: false,
+                  cost: false,
+                  shippedDate: false,
+                  expectedDeliveryDate: false,
+                  actualDeliveryDate: false,
+                  notes: false
+                }}
+              />
+            )
+          },
+          {
+            title: 'Items',
+            key: 'items',
+            content: (
+              <ObjectProperty
+                {...getModelProperty('shipment', 'items')}
+                isEditing={true}
+                objectData={objectData}
+                loading={submitLoading}
+              />
+            )
+          },
+          {
+            title: 'Summary',
+            key: 'summary',
+            content: (
+              <ObjectInfo
+                type='shipment'
+                column={1}
+                bordered={false}
+                visibleProperties={{
+                  _id: false,
+                  createdAt: false,
+                  updatedAt: false,
+                  items: false
+                }}
+                isEditing={false}
+                objectData={objectData}
+              />
+            )
+          }
+        ]
+        return (
+          <WizardView
+            steps={steps}
+            loading={submitLoading}
+            formValid={formValid}
+            title='New Shipment'
+            onSubmit={() => {
+              handleSubmit()
+              onOk()
+            }}
+          />
+        )
+      }}
+    </NewObjectForm>
+  )
+}
+
+NewShipment.propTypes = {
+  onOk: PropTypes.func.isRequired,
+  reset: PropTypes.bool,
+  defaultValues: PropTypes.object
+}
+
+export default NewShipment
--- a/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
+++ b/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
@ -0,0 +1,229 @@
+import { useRef, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { Space, Flex, Card } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+import loglevel from 'loglevel'
+import config from '../../../../config.js'
+import useCollapseState from '../../hooks/useCollapseState.js'
+import NotesPanel from '../../common/NotesPanel.jsx'
+import InfoCollapse from '../../common/InfoCollapse.jsx'
+import ObjectInfo from '../../common/ObjectInfo.jsx'
+import ViewButton from '../../common/ViewButton.jsx'
+import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
+import NoteIcon from '../../../Icons/NoteIcon.jsx'
+import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
+import ObjectForm from '../../common/ObjectForm.jsx'
+import EditButtons from '../../common/EditButtons.jsx'
+import LockIndicator from '../../common/LockIndicator.jsx'
+import ActionHandler from '../../common/ActionHandler.jsx'
+import ObjectActions from '../../common/ObjectActions.jsx'
+import ObjectTable from '../../common/ObjectTable.jsx'
+import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
+import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
+import { getModelProperty } from '../../../../database/ObjectModels.js'
+import ObjectProperty from '../../common/ObjectProperty.jsx'
+import OrderItemsIcon from '../../../Icons/OrderItemIcon.jsx'
+
+const log = loglevel.getLogger('ShipmentInfo')
+log.setLevel(config.logLevel)
+
+const ShipmentInfo = () => {
+  const location = useLocation()
+  const objectFormRef = useRef(null)
+  const actionHandlerRef = useRef(null)
+  const shipmentId = new URLSearchParams(location.search).get('shipmentId')
+  const [collapseState, updateCollapseState] = useCollapseState(
+    'ShipmentInfo',
+    {
+      info: true,
+      notes: true,
+      auditLogs: true
+    }
+  )
+
+  const [objectFormState, setEditFormState] = useState({
+    isEditing: false,
+    editLoading: false,
+    formValid: false,
+    lock: null,
+    loading: false,
+    objectData: {}
+  })
+
+  const actions = {
+    reload: () => {
+      objectFormRef?.current?.handleFetchObject?.()
+      return true
+    },
+    edit: () => {
+      objectFormRef?.current?.startEditing?.()
+      return false
+    },
+    cancelEdit: () => {
+      objectFormRef?.current?.cancelEditing?.()
+      return true
+    },
+    finishEdit: () => {
+      objectFormRef?.current?.handleUpdate?.()
+      return true
+    },
+    delete: () => {
+      objectFormRef?.current?.handleDelete?.()
+      return true
+    }
+  }
+
+  return (
+    <>
+      <Flex
+        gap='large'
+        vertical='true'
+        style={{
+          maxHeight: '100%',
+          minHeight: 0
+        }}
+      >
+        <Flex justify={'space-between'}>
+          <Space size='middle'>
+            <Space size='small'>
+              <ObjectActions
+                type='shipment'
+                id={shipmentId}
+                disabled={objectFormState.loading}
+                objectData={objectFormState.objectData}
+              />
+              <ViewButton
+                disabled={objectFormState.loading}
+                items={[
+                  { key: 'info', label: 'Shipment Information' },
+                  { key: 'notes', label: 'Notes' },
+                  { key: 'auditLogs', label: 'Audit Logs' }
+                ]}
+                visibleState={collapseState}
+                updateVisibleState={updateCollapseState}
+              />
+              <DocumentPrintButton
+                type='shipment'
+                objectData={objectFormState.objectData}
+                disabled={objectFormState.loading}
+              />
+            </Space>
+            <LockIndicator lock={objectFormState.lock} />
+          </Space>
+          <Space>
+            <EditButtons
+              isEditing={objectFormState.isEditing}
+              handleUpdate={() => {
+                actionHandlerRef.current.callAction('finishEdit')
+              }}
+              cancelEditing={() => {
+                actionHandlerRef.current.callAction('cancelEdit')
+              }}
+              startEditing={() => {
+                actionHandlerRef.current.callAction('edit')
+              }}
+              editLoading={objectFormState.editLoading}
+              formValid={objectFormState.formValid}
+              disabled={objectFormState.lock?.locked || objectFormState.loading}
+              loading={objectFormState.editLoading}
+            />
+          </Space>
+        </Flex>
+
+        <ScrollBox>
+          <Flex vertical gap={'large'}>
+            <ActionHandler
+              actions={actions}
+              loading={objectFormState.loading}
+              ref={actionHandlerRef}
+            >
+              <ObjectForm
+                id={shipmentId}
+                type='shipment'
+                style={{ height: '100%' }}
+                ref={objectFormRef}
+                onStateChange={(state) => {
+                  setEditFormState((prev) => ({ ...prev, ...state }))
+                }}
+              >
+                {({ loading, isEditing, objectData }) => (
+                  <Flex vertical gap={'large'}>
+                    <InfoCollapse
+                      title='Shipment Information'
+                      icon={<InfoCircleIcon />}
+                      active={collapseState.info}
+                      onToggle={(expanded) =>
+                        updateCollapseState('info', expanded)
+                      }
+                      collapseKey='info'
+                    >
+                      <ObjectInfo
+                        loading={loading}
+                        indicator={<LoadingOutlined />}
+                        isEditing={isEditing}
+                        type='shipment'
+                        objectData={objectData}
+                        visibleProperties={{
+                          items: false
+                        }}
+                      />
+                    </InfoCollapse>
+                    <InfoCollapse
+                      title='Shipment Items'
+                      icon={<OrderItemsIcon />}
+                      active={collapseState.info}
+                      onToggle={(expanded) =>
+                        updateCollapseState('info', expanded)
+                      }
+                      collapseKey='info'
+                    >
+                      <ObjectProperty
+                        {...getModelProperty('shipment', 'items')}
+                        isEditing={isEditing}
+                        objectData={objectData}
+                        loading={loading}
+                      />
+                    </InfoCollapse>
+                  </Flex>
+                )}
+              </ObjectForm>
+            </ActionHandler>
+            <InfoCollapse
+              title='Notes'
+              icon={<NoteIcon />}
+              active={collapseState.notes}
+              onToggle={(expanded) => updateCollapseState('notes', expanded)}
+              collapseKey='notes'
+            >
+              <Card>
+                <NotesPanel _id={shipmentId} type='shipment' />
+              </Card>
+            </InfoCollapse>
+            <InfoCollapse
+              title='Audit Logs'
+              icon={<AuditLogIcon />}
+              active={collapseState.auditLogs}
+              onToggle={(expanded) =>
+                updateCollapseState('auditLogs', expanded)
+              }
+              collapseKey='auditLogs'
+            >
+              {objectFormState.loading ? (
+                <InfoCollapsePlaceholder />
+              ) : (
+                <ObjectTable
+                  type='auditLog'
+                  masterFilter={{ 'parent._id': shipmentId }}
+                  visibleColumns={{ _id: false, 'parent._id': false }}
+                />
+              )}
+            </InfoCollapse>
+          </Flex>
+        </ScrollBox>
+      </Flex>
+    </>
+  )
+}
+
+export default ShipmentInfo
--- a/src/components/Icons/OrderItemIcon.jsx
+++ b/src/components/Icons/OrderItemIcon.jsx
@ -0,0 +1,6 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/orderitemicon.svg?react'
+
+const OrderItemIcon = (props) => <Icon component={CustomIconSvg} {...props} />
+
+export default OrderItemIcon
--- a/src/components/Icons/OrderItemsIcon.jsx
+++ b/src/components/Icons/OrderItemsIcon.jsx
@ -1,6 +0,0 @@
-import Icon from '@ant-design/icons'
-import CustomIconSvg from '../../../assets/icons/orderitemsicon.svg?react'
-
-const OrderItemsIcon = (props) => <Icon component={CustomIconSvg} {...props} />
-
-export default OrderItemsIcon
--- a/src/components/Icons/ShipmentIcon.jsx
+++ b/src/components/Icons/ShipmentIcon.jsx
@ -0,0 +1,6 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/shipmenticon.svg?react'
+
+const ShipmentIcon = (props) => <Icon component={CustomIconSvg} {...props} />
+
+export default ShipmentIcon