Implement modal for adding new order items in PurchaseOrderInfo component

- Integrated NewOrderItem component within a modal to facilitate the addition of new order items.
- Managed modal visibility state with useState hook.
- Updated ObjectTable to display order items associated with the purchase order.

src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card } from 'antd'
+import { Space, Flex, Card, Modal } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -21,9 +21,8 @@ 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/OrderItemsIcon.jsx'
+import OrderItemsIcon from '../../../Icons/OrderItemIcon.jsx'
+import NewOrderItem from '../OrderItems/NewOrderItem.jsx'
 
 const log = loglevel.getLogger('PurchaseOrderInfo')
 log.setLevel(config.logLevel)
@@ -32,6 +31,7 @@ const PurchaseOrderInfo = () => {
   const location = useLocation()
   const objectFormRef = useRef(null)
   const actionHandlerRef = useRef(null)
+  const [newOrderItemOpen, setNewOrderItemOpen] = useState(false)
   const purchaseOrderId = new URLSearchParams(location.search).get(
     'purchaseOrderId'
   )
@@ -73,6 +73,10 @@ const PurchaseOrderInfo = () => {
     delete: () => {
       objectFormRef?.current?.handleDelete?.()
       return true
+    },
+    newOrderItem: () => {
+      setNewOrderItemOpen(true)
+      return true
     }
   }
 
@@ -180,11 +184,10 @@ const PurchaseOrderInfo = () => {
                       }
                       collapseKey='info'
                     >
-                      <ObjectProperty
-                        {...getModelProperty('purchaseOrder', 'items')}
-                        isEditing={isEditing}
-                        objectData={objectData}
-                        loading={loading}
+                      <ObjectTable
+                        type='orderItem'
+                        masterFilter={{ 'order._id': purchaseOrderId }}
+                        visibleColumns={{ order: false }}
                       />
                     </InfoCollapse>
                   </Flex>
@@ -224,6 +227,27 @@ const PurchaseOrderInfo = () => {
           </Flex>
         </ScrollBox>
       </Flex>
+      <Modal
+        open={newOrderItemOpen}
+        onCancel={() => {
+          setNewOrderItemOpen(false)
+        }}
+        width={800}
+        footer={null}
+        destroyOnHidden={true}
+      >
+        <NewOrderItem
+          onOk={() => {
+            setNewOrderItemOpen(false)
+          }}
+          reset={newOrderItemOpen}
+          defaultValues={{
+            order: { _id: purchaseOrderId },
+            orderType: 'purchaseOrder',
+            syncAmount: 'itemCost'
+          }}
+        />
+      </Modal>
     </>
   )
 }