[PUI] part stock (#7179)

* [PUI] Update PartDetail page

- Cleanup details fields
- Add extra badge

* Update StockItem table

- Display items which are not "in stock" as red

src/frontend/src/pages/part/PartDetail.tsx

@@ -188,18 +188,19 @@ export default function PartDetail() {
     ];
 
     let tr: DetailsField[] = [
-      {
-        type: 'string',
-        name: 'unallocated_stock',
-        unit: true,
-        label: t`Available Stock`
-      },
       {
         type: 'string',
         name: 'total_in_stock',
         unit: true,
         label: t`In Stock`
       },
+      {
+        type: 'string',
+        name: 'unallocated_stock',
+        unit: true,
+        label: t`Available Stock`,
+        hidden: part.total_in_stock == part.unallocated_stock
+      },
       {
         type: 'string',
         name: 'minimum_stock',
@@ -220,10 +221,7 @@ export default function PartDetail() {
         total: part.required_for_build_orders,
         progress: part.allocated_to_build_orders,
         label: t`Allocated to Build Orders`,
-        hidden:
+        hidden: !part.component || part.required_for_build_orders <= 0
-          !part.assembly ||
-          (part.allocated_to_build_orders <= 0 &&
-            part.required_for_build_orders <= 0)
       },
       {
         type: 'progressbar',
@@ -231,10 +229,7 @@ export default function PartDetail() {
         total: part.required_for_sales_orders,
         progress: part.allocated_to_sales_orders,
         label: t`Allocated to Sales Orders`,
-        hidden:
+        hidden: !part.salable || part.required_for_sales_orders <= 0
-          !part.salable ||
-          (part.allocated_to_sales_orders <= 0 &&
-            part.required_for_sales_orders <= 0)
       },
       {
         type: 'string',
@@ -306,7 +301,8 @@ export default function PartDetail() {
         name: 'creation_user',
         label: t`Created By`,
         badge: 'user',
-        icon: 'user'
+        icon: 'user',
+        hidden: !part.creation_user
       },
       {
         type: 'string',
@@ -645,11 +641,17 @@ export default function PartDetail() {
 
     return [
       <DetailsBadge
-        label={t`In Stock` + `: ${part.in_stock}`}
+        label={t`In Stock` + `: ${part.total_in_stock}`}
         color={part.in_stock >= part.minimum_stock ? 'green' : 'orange'}
         visible={part.in_stock > 0}
         key="in_stock"
       />,
+      <DetailsBadge
+        label={t`Available` + `: ${part.unallocated_stock}`}
+        color="yellow"
+        key="available_stock"
+        visible={part.unallocated_stock != part.total_in_stock}
+      />,
       <DetailsBadge
         label={t`No Stock`}
         color="red"
@@ -671,7 +673,7 @@ export default function PartDetail() {
       <DetailsBadge
         label={t`Inactive`}
         color="red"
-        visible={!part.active}
+        visible={part.active == false}
         key="inactive"
       />
     ];

src/frontend/src/tables/stock/StockItemTable.tsx

@@ -65,6 +65,18 @@ function stockItemTableColumns(): TableColumn[] {
         let extra: ReactNode[] = [];
         let color = undefined;
 
+        // Determine if a stock item is "in stock"
+        // TODO: Refactor this out into a function
+        let in_stock =
+          !record?.belongs_to &&
+          !record?.consumed_by &&
+          !record?.customer &&
+          !record?.is_building &&
+          !record?.sales_order &&
+          !record?.expired &&
+          record?.quantity &&
+          record?.quantity > 0;
+
         if (record.serial && quantity == 1) {
           text = `# ${record.serial}`;
         }
@@ -166,7 +178,6 @@ function stockItemTableColumns(): TableColumn[] {
         }
 
         if (quantity <= 0) {
-          color = 'red';
           extra.push(
             <Text
               key="depleted"
@@ -175,6 +186,10 @@ function stockItemTableColumns(): TableColumn[] {
           );
         }
 
+        if (!in_stock) {
+          color = 'red';
+        }
+
         return (
           <TableHoverCard
             value={