Allocate Stock tweaks (#10618)

- Display IPN
- Display part units

src/frontend/lib/components/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import { Progress, Stack, Text } from '@mantine/core';
+import { Group, Progress, Stack, Text } from '@mantine/core';
 import { useMemo } from 'react';
 import { formatDecimal } from '../functions/Formatting';
 
@@ -9,6 +9,7 @@ export type ProgressBarProps = {
   progressLabel?: boolean;
   animated?: boolean;
   size?: string;
+  units?: string;
 };
 
 /**
@@ -30,9 +31,12 @@ export function ProgressBar(props: Readonly<ProgressBarProps>) {
   return (
     <Stack gap={2} style={{ flexGrow: 1, minWidth: '100px' }}>
       {props.progressLabel && (
+        <Group gap='xs' justify='center'>
           <Text ta='center' size='xs'>
             {formatDecimal(props.value)} / {formatDecimal(props.maximum)}
           </Text>
+          {props.units && <Text size='xs'>[{props.units}]</Text>}
+        </Group>
       )}
       <Progress
         value={progress}

src/frontend/src/forms/BuildForms.tsx

@@ -567,11 +567,15 @@ function BuildAllocateLineRow({
       <Table.Td>
         <RenderPartColumn part={record.part_detail} />
       </Table.Td>
+      <Table.Td>
+        <Text size='sm'>{record.part_detail?.IPN}</Text>
+      </Table.Td>
       <Table.Td>
         <ProgressBar
           value={record.allocatedQuantity}
           maximum={record.requiredQuantity - record.consumed}
           progressLabel
+          units={record.part_detail?.units}
         />
       </Table.Td>
       <Table.Td>
@@ -624,6 +628,7 @@ export function useAllocateStockToBuildForm({
         value: [],
         headers: [
           { title: t`Part`, style: { minWidth: '175px' } },
+          { title: t`IPN`, style: { minWidth: '50px' } },
           { title: t`Allocated`, style: { minWidth: '175px' } },
           { title: t`Stock Item`, style: { width: '100%' } },
           { title: t`Quantity`, style: { minWidth: '175px' } },