[PUI] Adjust stock details page (#8196)

* Adjust stock details page

* Remove unused import

* Details rendering fix

* Cleanup

* Handle null / undefined cases

* More cleanup

src/frontend/src/components/details/Details.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { getValueAtPath } from 'mantine-datatable';
-import { useCallback, useMemo } from 'react';
+import { ReactNode, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
@@ -182,37 +182,28 @@ function NameBadge({
 function TableStringValue(props: Readonly<FieldProps>) {
   let value = props?.field_value;
 
-  if (props?.field_data?.value_formatter) {
-    value = props.field_data.value_formatter();
-  }
-
-  if (value === undefined) {
-    return '---';
-  }
+  let renderedValue = null;
 
   if (props.field_data?.badge) {
     return <NameBadge pk={value} type={props.field_data.badge} />;
+  } else if (props?.field_data?.value_formatter) {
+    renderedValue = props.field_data.value_formatter();
+  } else if (value === null || value === undefined) {
+    renderedValue = <Text size="sm">'---'</Text>;
+  } else {
+    renderedValue = <Text size="sm">{value.toString()}</Text>;
   }
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        wordBreak: 'break-word',
-        alignItems: 'flex-start'
-      }}
-    >
-      <Group wrap="nowrap" gap="xs" justify="space-apart">
-        <Group wrap="nowrap" gap="xs" justify="left">
-          {value ? value : props.field_data?.unit && '0'}{' '}
-          {props.field_data.unit == true && props.unit}
-        </Group>
-        {props.field_data.user && (
-          <NameBadge pk={props.field_data?.user} type="user" />
-        )}
+    <Group wrap="nowrap" gap="xs" justify="space-apart">
+      <Group wrap="nowrap" gap="xs" justify="left">
+        {renderedValue}
+        {props.field_data.unit == true && <Text size="xs">{props.unit}</Text>}
       </Group>
-    </div>
+      {props.field_data.user && (
+        <NameBadge pk={props.field_data?.user} type="user" />
+      )}
+    </Group>
   );
 }
 
@@ -306,7 +297,7 @@ function TableAnchorValue(props: Readonly<FieldProps>) {
   }
 
   return (
-    <div>
+    <>
       {make_link ? (
         <Anchor href="#" onClick={handleLinkClick}>
           <Text>{value}</Text>
@@ -314,7 +305,7 @@ function TableAnchorValue(props: Readonly<FieldProps>) {
       ) : (
         <Text>{value}</Text>
       )}
-    </div>
+    </>
   );
 }
 
@@ -347,9 +338,6 @@ export function DetailsTableField({
 }>) {
   function getFieldType(type: string) {
     switch (type) {
-      case 'text':
-      case 'string':
-        return TableStringValue;
       case 'boolean':
         return BooleanValue;
       case 'link':
@@ -358,6 +346,8 @@ export function DetailsTableField({
         return ProgressBarValue;
       case 'status':
         return StatusValue;
+      case 'text':
+      case 'string':
       default:
         return TableStringValue;
     }

src/frontend/src/components/items/ErrorItem.tsx

@@ -1,18 +1,17 @@
-import { Trans } from '@lingui/macro';
+import { t } from '@lingui/macro';
+import { Alert, Text } from '@mantine/core';
 
 export function ErrorItem({
   id,
   error
 }: Readonly<{ id: string; error?: any }>) {
-  const error_message = error?.message || error?.toString() || (
-    <Trans>Unknown error</Trans>
-  );
+  const error_message = error?.message || error?.toString() || t`Unknown error`;
+
   return (
     <>
-      <p>
-        <Trans>An error occurred:</Trans>
-      </p>
-      {error_message}
+      <Alert color="red" title={t`An error occurred`}>
+        <Text>{error_message}</Text>
+      </Alert>
     </>
   );
 }

src/frontend/src/pages/stock/StockDetail.tsx

@@ -94,7 +94,7 @@ export default function StockDetail() {
   });
 
   const detailsPanel = useMemo(() => {
-    let data = stockitem;
+    let data = { ...stockitem };
     let part = stockitem?.part_detail ?? {};
 
     data.available_stock = Math.max(0, data.quantity - data.allocated);
@@ -164,7 +164,14 @@ export default function StockDetail() {
         type: 'text',
         name: 'available_stock',
         label: t`Available`,
-        icon: 'quantity'
+        icon: 'stock'
+      },
+      {
+        type: 'text',
+        name: 'allocated',
+        label: t`Allocated to Orders`,
+        icon: 'tick_off',
+        hidden: !stockitem.allocated
       },
       {
         type: 'text',
@@ -281,12 +288,12 @@ export default function StockDetail() {
             />
           </Grid.Col>
           <Grid.Col span={8}>
-            <DetailsTable fields={tl} item={stockitem} />
+            <DetailsTable fields={tl} item={data} />
           </Grid.Col>
         </Grid>
-        <DetailsTable fields={tr} item={stockitem} />
-        <DetailsTable fields={bl} item={stockitem} />
-        <DetailsTable fields={br} item={stockitem} />
+        <DetailsTable fields={tr} item={data} />
+        <DetailsTable fields={bl} item={data} />
+        <DetailsTable fields={br} item={data} />
       </ItemDetailsGrid>
     );
   }, [stockitem, instanceQuery]);