Added inventory overview.

src/components/Dashboard/Inventory/InventoryOverview.jsx

@@ -0,0 +1,102 @@
+import { useContext } from 'react'
+import { Flex } from 'antd'
+import useCollapseState from '../hooks/useCollapseState'
+import StatsDisplay from '../common/StatsDisplay'
+import InfoCollapse from '../common/InfoCollapse'
+import ScrollBox from '../common/ScrollBox'
+
+import { ApiServerContext } from '../context/ApiServerContext'
+
+const InventoryOverview = () => {
+  const { connected } = useContext(ApiServerContext)
+
+  const [collapseState, updateCollapseState] = useCollapseState(
+    'InventoryOverview',
+    {
+      inventoryStats: true
+    }
+  )
+
+  if (!connected) {
+    return null
+  }
+
+  return (
+    <Flex
+      gap='large'
+      vertical='true'
+      style={{
+        maxHeight: '100%',
+        minHeight: 0
+      }}
+    >
+      <ScrollBox>
+        <Flex vertical gap={'large'}>
+          <InfoCollapse
+            title='Inventory Statistics'
+            icon={null}
+            active={collapseState.inventoryStats}
+            onToggle={(isActive) =>
+              updateCollapseState('inventoryStats', isActive)
+            }
+            className='no-t-padding-collapse'
+            collapseKey='inventoryStats'
+          >
+            <Flex
+              justify='flex-start'
+              gap='middle'
+              wrap='wrap'
+              align='flex-start'
+            >
+              <Flex gap='middle' wrap='wrap'>
+                <StatsDisplay objectType='partStock' />
+                <StatsDisplay objectType='filamentStock' />
+              </Flex>
+            </Flex>
+          </InfoCollapse>
+
+          <Flex gap='large' wrap='wrap'>
+            <Flex flex={1} vertical style={{ minWidth: '300px' }}>
+              <InfoCollapse
+                title='Part Stock History'
+                icon={null}
+                active={collapseState.partStockHistory}
+                onToggle={(isActive) =>
+                  updateCollapseState('partStockHistory', isActive)
+                }
+                collapseKey='partStockHistory'
+                canCollapse={false}
+              ></InfoCollapse>
+            </Flex>
+            <Flex flex={1} vertical style={{ minWidth: '300px' }}>
+              <InfoCollapse
+                title='Filament Stock History'
+                icon={null}
+                active={collapseState.filamentStockHistory}
+                onToggle={(isActive) =>
+                  updateCollapseState('filamentStockHistory', isActive)
+                }
+                canCollapse={false}
+                collapseKey='filamentStockHistory'
+              ></InfoCollapse>
+            </Flex>
+            <Flex flex={1} vertical style={{ minWidth: '300px' }}>
+              <InfoCollapse
+                title='Stock Event History'
+                icon={null}
+                active={collapseState.stockEventHistory}
+                onToggle={(isActive) =>
+                  updateCollapseState('stockEventHistory', isActive)
+                }
+                canCollapse={false}
+                collapseKey='stockEventHistory'
+              ></InfoCollapse>
+            </Flex>
+          </Flex>
+        </Flex>
+      </ScrollBox>
+    </Flex>
+  )
+}
+
+export default InventoryOverview

src/components/Dashboard/Inventory/InventorySidebar.jsx

@@ -1,6 +1,5 @@
 import { useLocation } from 'react-router-dom'
 import DashboardSidebar from '../common/DashboardSidebar'
-import { DashboardOutlined } from '@ant-design/icons'
 import FilamentStockIcon from '../../Icons/FilamentStockIcon'
 import PartStockIcon from '../../Icons/PartStockIcon'
 import ProductStockIcon from '../../Icons/ProductStockIcon'
@@ -9,12 +8,13 @@ import StockAuditIcon from '../../Icons/StockAuditIcon'
 import PurchaseOrderIcon from '../../Icons/PurchaseOrderIcon'
 import ShipmentIcon from '../../Icons/ShipmentIcon'
 import OrderItemIcon from '../../Icons/OrderItemIcon'
+import InventoryIcon from '../../Icons/InventoryIcon'
 
 const items = [
   {
     key: 'overview',
     label: 'Overview',
-    icon: <DashboardOutlined />,
+    icon: <InventoryIcon />,
     path: '/dashboard/inventory/overview'
   },
   { type: 'divider' },

src/database/models/PartStock.js

@@ -101,5 +101,14 @@ export const PartStock = {
         }
       }
     }
+  ],
+  stats: [
+    {
+      name: 'totalCurrentQuantity.sum',
+      label: 'Total Current Quantity',
+      type: 'number',
+      roundNumber: 2,
+      cardWidth: 200
+    }
   ]
 }

src/database/models/PurchaseOrder.js

@@ -46,13 +46,22 @@ export const PurchaseOrder = {
       type: 'dateTime',
       readOnly: true
     },
-    { name: 'state', label: 'State', type: 'state', readOnly: true },
+    {
+      name: '_reference',
+      label: 'Reference',
+      type: 'reference',
+      required: true,
+      objectType: 'purchaseOrder',
+      showCopy: true,
+      readOnly: true
+    },
     {
       name: 'updatedAt',
       label: 'Updated At',
       type: 'dateTime',
       readOnly: true
     },
+    { name: 'state', label: 'State', type: 'state', readOnly: true },
     {
       name: 'vendor',
       label: 'Vendor',
@@ -65,17 +74,10 @@ export const PurchaseOrder = {
       name: 'cost',
       label: 'Cost',
       type: 'netGross',
-      required: true,
       prefix: '£',
       min: 0,
       step: 0.01,
-      value: (objectData) => {
+      readOnly: true
-        const net = objectData?.items?.reduce(
-          (acc, item) => acc + item.price,
-          0
-        )
-        return { net: net, gross: net }
-      }
     }
   ]
 }

src/routes/InventoryRoutes.jsx

@@ -13,8 +13,14 @@ import OrderItems from '../components/Dashboard/Inventory/OrderItems.jsx'
 import OrderItemInfo from '../components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx'
 import Shipments from '../components/Dashboard/Inventory/Shipments.jsx'
 import ShipmentInfo from '../components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx'
+import InventoryOverview from '../components/Dashboard/Inventory/InventoryOverview.jsx'
 
 const InventoryRoutes = [
+  <Route
+    key='overview'
+    path='inventory/overview'
+    element={<InventoryOverview />}
+  />,
   <Route
     key='filamentstocks'
     path='inventory/filamentstocks'