[UI] Allocation content (#9377)

* Refactor variable name

* Add part information when allocating serial numbers

- Easier identification of which part is being allocated

* Fix for part stock rendering

src/frontend/src/components/render/Part.tsx

@@ -18,24 +18,24 @@ export function RenderPart(
   let badgeText = '';
   let badgeColor = '';
 
-  const stock = instance.total_in_stock;
+  const stock: number | null = instance.total_in_stock ?? null;
 
   if (instance.active == false) {
     badgeColor = 'red';
     badgeText = t`Inactive`;
-  } else if (stock <= 0) {
+  } else if (stock != null && stock <= 0) {
     badgeColor = 'orange';
     badgeText = t`No stock`;
-  } else {
+  } else if (stock != null) {
     badgeText = `${t`Stock`}: ${stock}`;
     badgeColor = instance.minimum_stock > stock ? 'yellow' : 'green';
   }
 
-  const badge = (
+  const badge = !!badgeText ? (
     <Badge size='xs' color={badgeColor}>
       {badgeText}
     </Badge>
-  );
+  ) : null;
 
   return (
     <RenderInlineModel

src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { Group, Text } from '@mantine/core';
+import { Group, Paper, Text } from '@mantine/core';
 import {
   IconArrowRight,
   IconHash,
@@ -14,6 +14,7 @@ import { useNavigate } from 'react-router-dom';
 import { ActionButton } from '../../components/buttons/ActionButton';
 import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { ProgressBar } from '../../components/items/ProgressBar';
+import { RenderPart } from '../../components/render/Part';
 import OrderPartsWizard from '../../components/wizards/OrderPartsWizard';
 import { formatCurrency } from '../../defaults/formatters';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
@@ -207,7 +208,9 @@ export default function SalesOrderLineItemTable({
     ];
   }, [table.isRowExpanded]);
 
-  const [selectedLine, setSelectedLine] = useState<number>(0);
+  const [selectedLineId, setSelectedLineId] = useState<number>(0);
+
+  const [selectedSupplierPart, setSelectedSupplierPart] = useState<any>(null);
 
   const [initialData, setInitialData] = useState({});
 
@@ -236,7 +239,7 @@ export default function SalesOrderLineItemTable({
 
   const editLine = useEditApiFormModal({
     url: ApiEndpoints.sales_order_line_list,
-    pk: selectedLine,
+    pk: selectedLineId,
     title: t`Edit Line Item`,
     fields: editLineFields,
     table: table
@@ -244,13 +247,13 @@ export default function SalesOrderLineItemTable({
 
   const deleteLine = useDeleteApiFormModal({
     url: ApiEndpoints.sales_order_line_list,
-    pk: selectedLine,
+    pk: selectedLineId,
     title: t`Delete Line Item`,
     table: table
   });
 
   const allocateSerialFields = useSalesOrderAllocateSerialsFields({
-    itemId: selectedLine,
+    itemId: selectedLineId,
     orderId: orderId
   });
 
@@ -258,6 +261,11 @@ export default function SalesOrderLineItemTable({
     url: ApiEndpoints.sales_order_allocate_serials,
     pk: orderId,
     title: t`Allocate Serial Numbers`,
+    preFormContent: selectedSupplierPart ? (
+      <Paper withBorder p='sm'>
+        <RenderPart instance={selectedSupplierPart} />
+      </Paper>
+    ) : undefined,
     initialData: initialData,
     fields: allocateSerialFields,
     table: table
@@ -382,7 +390,8 @@ export default function SalesOrderLineItemTable({
           icon: <IconHash />,
           color: 'green',
           onClick: () => {
-            setSelectedLine(record.pk);
+            setSelectedLineId(record.pk);
+            setSelectedSupplierPart(record?.part_detail ?? null);
             setInitialData({
               quantity: record.quantity - record.allocated
             });
@@ -422,7 +431,7 @@ export default function SalesOrderLineItemTable({
         RowEditAction({
           hidden: !editable || !user.hasChangeRole(UserRoles.sales_order),
           onClick: () => {
-            setSelectedLine(record.pk);
+            setSelectedLineId(record.pk);
             editLine.open();
           }
         }),
@@ -436,7 +445,7 @@ export default function SalesOrderLineItemTable({
         RowDeleteAction({
           hidden: !editable || !user.hasDeleteRole(UserRoles.sales_order),
           onClick: () => {
-            setSelectedLine(record.pk);
+            setSelectedLineId(record.pk);
             deleteLine.open();
           }
         })