Add invoices and stock events sections to PurchaseOrderInfo component

- Introduced new icons for invoices and stock events.
- Added collapsible sections for displaying invoices and stock events related to purchase orders.
- Updated state management to handle the visibility of the new sections.

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

@@ -28,6 +28,8 @@ import PostPurchaseOrder from './PostPurchaseOrder.jsx'
 import AcknowledgePurchaseOrder from './AcknowledgePurchaseOrder.jsx'
 import CancelPurchaseOrder from './CancelPurchaseOrder.jsx'
 import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
+import InvoiceIcon from '../../../Icons/InvoiceIcon.jsx'
+import StockEventIcon from '../../../Icons/StockEventIcon.jsx'
 import { getModelByName } from '../../../../database/ObjectModels.js'
 
 const log = loglevel.getLogger('PurchaseOrderInfo')
@@ -53,7 +55,9 @@ const PurchaseOrderInfo = () => {
     {
       info: true,
       notes: true,
-      auditLogs: true
+      auditLogs: true,
+      invoices: true,
+      stockEvents: true
     }
   )
 
@@ -141,6 +145,8 @@ const PurchaseOrderInfo = () => {
                   { key: 'info', label: 'Purchase Order Information' },
                   { key: 'orderItems', label: 'Order Items' },
                   { key: 'shipments', label: 'Shipments' },
+                  { key: 'invoices', label: 'Invoices' },
+                  { key: 'stockEvents', label: 'Stock Events' },
                   { key: 'notes', label: 'Notes' },
                   { key: 'auditLogs', label: 'Audit Logs' }
                 ]}
@@ -256,6 +262,48 @@ const PurchaseOrderInfo = () => {
                         ref={shipmentsTableRef}
                       />
                     </InfoCollapse>
+                    <InfoCollapse
+                      title='Invoices'
+                      icon={<InvoiceIcon />}
+                      active={collapseState.invoices}
+                      onToggle={(expanded) =>
+                        updateCollapseState('invoices', expanded)
+                      }
+                      collapseKey='invoices'
+                    >
+                      {objectFormState.loading ? (
+                        <InfoCollapsePlaceholder />
+                      ) : (
+                        <ObjectTable
+                          type='invoice'
+                          masterFilter={{
+                            'order._id': purchaseOrderId,
+                            orderType: 'purchaseOrder'
+                          }}
+                          visibleColumns={{ order: false }}
+                        />
+                      )}
+                    </InfoCollapse>
+                    <InfoCollapse
+                      title='Stock Events'
+                      icon={<StockEventIcon />}
+                      active={collapseState.stockEvents}
+                      onToggle={(expanded) =>
+                        updateCollapseState('stockEvents', expanded)
+                      }
+                      collapseKey='stockEvents'
+                    >
+                      {objectFormState.loading ? (
+                        <InfoCollapsePlaceholder />
+                      ) : (
+                        <ObjectTable
+                          type='stockEvent'
+                          masterFilter={{
+                            'owner._id': purchaseOrderId
+                          }}
+                        />
+                      )}
+                    </InfoCollapse>
                   </Flex>
                 )}
               </ObjectForm>