[UI] Fixes (#10697)

* Fix for StockItemTestResultTable

- Fix column alignment

* Update rendering

* Refactor <SupplierPartTable />

- Formalize parameter arguments

src/frontend/src/forms/CompanyForms.tsx

@@ -18,8 +18,12 @@ import { useMemo } from 'react';
  * Field set for SupplierPart instance
  */
 export function useSupplierPartFields({
+  manufacturerId,
+  manufacturerPartId,
   partId
 }: {
+  manufacturerId?: number;
+  manufacturerPartId?: number;
   partId?: number;
 }) {
   return useMemo(() => {
@@ -34,7 +38,9 @@ export function useSupplierPartFields({
         }
       },
       manufacturer_part: {
+        value: manufacturerPartId,
         filters: {
+          manufacturer: manufacturerId,
           part_detail: true,
           manufacturer_detail: true
         },
@@ -69,7 +75,7 @@ export function useSupplierPartFields({
     };
 
     return fields;
-  }, [partId]);
+  }, [manufacturerId, manufacturerPartId, partId]);
 }
 
 export function useManufacturerPartFields() {

src/frontend/src/pages/company/CompanyDetail.tsx

@@ -187,9 +187,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
         label: t`Supplied Parts`,
         icon: <IconPackageExport />,
         hidden: !company?.is_supplier,
-        content: company?.pk && (
+        content: company?.pk && <SupplierPartTable supplierId={company.pk} />
-          <SupplierPartTable params={{ supplier: company.pk }} />
-        )
       },
       {
         name: 'manufactured-parts',

src/frontend/src/pages/company/ManufacturerPartDetail.tsx

@@ -193,9 +193,9 @@ export default function ManufacturerPartDetail() {
         icon: <IconBuildingWarehouse />,
         content: manufacturerPart?.pk ? (
           <SupplierPartTable
-            params={{
+            partId={manufacturerPart.part}
-              manufacturer_part: manufacturerPart.pk
+            manufacturerId={manufacturerPart.manufacturer}
-            }}
+            manufacturerPartId={manufacturerPart.pk}
           />
         ) : (
           <Skeleton />

src/frontend/src/pages/company/SupplierPartDetail.tsx

@@ -198,7 +198,7 @@ export default function SupplierPartDetail() {
         icon: 'purchase_orders'
       },
       {
-        type: 'string',
+        type: 'number',
         name: 'available',
         label: t`Supplier Availability`,
         hidden: !data.availability_updated,
@@ -206,7 +206,7 @@ export default function SupplierPartDetail() {
         icon: 'packages'
       },
       {
-        type: 'string',
+        type: 'date',
         name: 'availability_updated',
         label: t`Availability Updated`,
         copy: true,

src/frontend/src/pages/part/PartSupplierDetail.tsx

@@ -15,7 +15,7 @@ export default function PartSupplierDetail({
           <StylishText size='lg'>{t`Suppliers`}</StylishText>
         </Accordion.Control>
         <Accordion.Panel>
-          <SupplierPartTable params={{ part: partId }} />
+          <SupplierPartTable partId={partId} />
         </Accordion.Panel>
       </Accordion.Item>
       <Accordion.Item value='part-manufacturers'>

src/frontend/src/pages/purchasing/PurchasingIndex.tsx

@@ -91,7 +91,7 @@ export default function PurchasingIndex() {
         name: 'supplier-parts',
         label: t`Supplier Parts`,
         icon: <IconPackageExport />,
-        content: <SupplierPartTable params={{}} />
+        content: <SupplierPartTable />
       },
       {
         name: 'manufacturer',

src/frontend/src/tables/purchasing/SupplierPartTable.tsx

@@ -13,6 +13,7 @@ import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
+import { formatDecimal } from '@lib/functions/Formatting';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
 import { IconPackageImport } from '@tabler/icons-react';
@@ -43,8 +44,16 @@ import { TableHoverCard } from '../TableHoverCard';
  */
 
 export function SupplierPartTable({
-  params
+  manufacturerId,
-}: Readonly<{ params: any }>): ReactNode {
+  manufacturerPartId,
+  partId,
+  supplierId
+}: Readonly<{
+  manufacturerId?: number;
+  manufacturerPartId?: number;
+  partId?: number;
+  supplierId?: number;
+}>): ReactNode {
   const table = useTable('supplierparts');
 
   const user = useUserState();
@@ -53,7 +62,7 @@ export function SupplierPartTable({
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
       PartColumn({
-        switchable: 'part' in params,
+        switchable: !!partId,
         part: 'part_detail'
       }),
       {
@@ -119,7 +128,7 @@ export function SupplierPartTable({
 
           return (
             <TableHoverCard
-              value={record.pack_quantity}
+              value={formatDecimal(record.pack_quantity)}
               extra={extra}
               title={t`Pack Quantity`}
             />
@@ -147,10 +156,10 @@ export function SupplierPartTable({
         }
       }
     ];
-  }, [params]);
+  }, [partId]);
 
   const supplierPartFields = useSupplierPartFields({
-    partId: params?.part
+    partId: partId
   });
 
   const addSupplierPart = useCreateApiFormModal({
@@ -158,8 +167,9 @@ export function SupplierPartTable({
     title: t`Add Supplier Part`,
     fields: supplierPartFields,
     initialData: {
-      part: params?.part,
+      part: partId,
-      supplier: params?.supplier
+      supplier: supplierId,
+      manufacturer_part: manufacturerPartId
     },
     table: table,
     successMessage: t`Supplier part created`
@@ -167,7 +177,7 @@ export function SupplierPartTable({
 
   const supplierPlugins = usePluginsWithMixin('supplier');
   const importPartWizard = ImportPartWizard({
-    partId: params?.part
+    partId: partId
   });
 
   const tableActions = useMemo(() => {
@@ -187,11 +197,11 @@ export function SupplierPartTable({
         hidden={
           supplierPlugins.length === 0 ||
           !user.hasAddRole(UserRoles.part) ||
-          !params?.part
+          !partId
         }
       />
     ];
-  }, [user, supplierPlugins]);
+  }, [user, partId, supplierPlugins]);
 
   const tableFilters: TableFilter[] = useMemo(() => {
     return [
@@ -272,7 +282,10 @@ export function SupplierPartTable({
         columns={tableColumns}
         props={{
           params: {
-            ...params,
+            manufacturer: manufacturerId,
+            manufacturer_part: manufacturerPartId,
+            supplier: supplierId,
+            part: partId,
             part_detail: true,
             supplier_detail: true,
             manufacturer_detail: true

src/frontend/src/tables/stock/StockItemTestResultTable.tsx

@@ -153,19 +153,21 @@ export default function StockItemTestResultTable({
 
             return (
               <Group justify='space-between' wrap='nowrap'>
-                {!child && (
+                <Group gap='xs'>
-                  <RowExpansionIcon
+                  {!child && (
-                    enabled={multipleResults}
+                    <RowExpansionIcon
-                    expanded={table.isRowExpanded(record.pk)}
+                      enabled={multipleResults}
-                  />
+                      expanded={table.isRowExpanded(record.pk)}
-                )}
+                    />
-                <Text
+                  )}
-                  style={{ fontStyle: installed ? 'italic' : undefined }}
+                  <Text
-                  c={enabled ? undefined : 'red'}
+                    style={{ fontStyle: installed ? 'italic' : undefined }}
-                >
+                    c={enabled ? undefined : 'red'}
-                  {!record.templateId && '- '}
+                  >
-                  {record.test_name ?? record.template_detail?.test_name}
+                    {!record.templateId && '- '}
-                </Text>
+                    {record.test_name ?? record.template_detail?.test_name}
+                  </Text>
+                </Group>
                 <Group justify='right'>
                   {record.results && record.results.length > 1 && (
                     <Tooltip label={t`Test Results`}>