Improve PartDetail

- Add more data
- Add icons

src/frontend/src/functions/icons.tsx

@@ -108,6 +108,7 @@ const icons: { [key: string]: (props: TablerIconsProps) => React.JSX.Element } =
     delete: IconTrash,
 
     // Part Icons
+    active: IconCheck,
     template: IconCopy,
     assembly: IconTool,
     component: IconGridDots,

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

@@ -60,7 +60,7 @@ import { useEditApiFormModal } from '../../hooks/UseForm';
 import { useInstance } from '../../hooks/UseInstance';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
+import { DetailsField, DetailsTable, PartIcons } from '../../tables/Details';
 import { BomTable } from '../../tables/bom/BomTable';
 import { UsedInTable } from '../../tables/bom/UsedInTable';
 import { BuildOrderTable } from '../../tables/build/BuildOrderTable';
@@ -116,6 +116,55 @@ export default function PartDetail() {
         label: t`Variant of`,
         model: ModelType.part,
         hidden: !part.variant_of
+      },
+      {
+        type: 'link',
+        name: 'category',
+        label: t`Category`,
+        model: ModelType.partcategory
+      },
+      {
+        type: 'link',
+        name: 'default_location',
+        label: t`Default Location`,
+        model: ModelType.stocklocation,
+        hidden: !part.default_location
+      },
+      {
+        type: 'string',
+        name: 'IPN',
+        label: t`IPN`,
+        copy: true,
+        hidden: !part.IPN
+      },
+      {
+        type: 'string',
+        name: 'revision',
+        label: t`Revision`,
+        copy: true,
+        hidden: !part.revision
+      },
+      {
+        type: 'string',
+        name: 'units',
+        label: t`Units`,
+        copy: true,
+        hidden: !part.units
+      },
+      {
+        type: 'string',
+        name: 'keywords',
+        label: t`Keywords`,
+        copy: true,
+        hidden: !part.keywords
+      },
+      {
+        type: 'link',
+        name: 'link',
+        label: t`Link`,
+        external: true,
+        copy: true,
+        hidden: !part.link
       }
     ];
 
@@ -186,53 +235,44 @@ export default function PartDetail() {
 
     let bl: DetailsField[] = [
       {
-        type: 'link',
-        name: 'category',
-        label: t`Category`,
-        model: ModelType.partcategory
+        type: 'boolean',
+        name: 'active',
+        label: t`Active`
       },
       {
-        type: 'link',
-        name: 'default_location',
-        label: t`Default Location`,
-        model: ModelType.stocklocation,
-        hidden: !part.default_location
+        type: 'boolean',
+        name: 'template',
+        label: t`Template Part`
       },
       {
-        type: 'string',
-        name: 'IPN',
-        label: t`IPN`,
-        copy: true,
-        hidden: !part.IPN
+        type: 'boolean',
+        name: 'assembly',
+        label: t`Assembled Part`
       },
       {
-        type: 'string',
-        name: 'revision',
-        label: t`Revision`,
-        copy: true,
-        hidden: !part.revision
+        type: 'boolean',
+        name: 'component',
+        label: t`Component Part`
       },
       {
-        type: 'string',
-        name: 'units',
-        label: t`Units`,
-        copy: true,
-        hidden: !part.units
+        type: 'boolean',
+        name: 'trackable',
+        label: t`Trackable Part`
       },
       {
-        type: 'string',
-        name: 'keywords',
-        label: t`Keywords`,
-        copy: true,
-        hidden: !part.keywords
+        type: 'boolean',
+        name: 'purchaseable',
+        label: t`Purchaseable Part`
       },
       {
-        type: 'link',
-        name: 'link',
-        label: t`Link`,
-        external: true,
-        copy: true,
-        hidden: !part.link
+        type: 'boolean',
+        name: 'saleable',
+        label: t`Saleable Part`
+      },
+      {
+        type: 'boolean',
+        name: 'virtual',
+        label: t`Virtual Part`
       }
     ];
 
@@ -387,7 +427,10 @@ export default function PartDetail() {
             />
           </Grid.Col>
           <Grid.Col span={8}>
-            <DetailsTable fields={tl} item={part} />
+            <Stack spacing="xs">
+              <PartIcons part={part} />
+              <DetailsTable fields={tl} item={part} />
+            </Stack>
           </Grid.Col>
         </Grid>
         <DetailsTable fields={tr} item={part} />

src/frontend/src/tables/Details.tsx

@@ -118,20 +118,11 @@ function PartIcon(icon: string) {
  * Generates a table cell with Part icons.
  * Only used for Part Model Details
  */
-function PartIcons({
-  assembly,
-  template,
-  component,
-  trackable,
-  purchaseable,
-  saleable,
-  virtual,
-  active
-}: PartIconsType) {
+export function PartIcons({ part }: { part: any }) {
   return (
     <td colSpan={2}>
       <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-        {!active && (
+        {!part.active && (
           <Tooltip label={t`Part is not active`}>
             <Badge color="red" variant="filled">
               <div
@@ -143,43 +134,43 @@ function PartIcons({
             </Badge>
           </Tooltip>
         )}
-        {template && (
+        {part.template && (
           <Tooltip
             label={t`Part is a template part (variants can be made from this part)`}
             children={PartIcon('template')}
           />
         )}
-        {assembly && (
+        {part.assembly && (
           <Tooltip
             label={t`Part can be assembled from other parts`}
             children={PartIcon('assembly')}
           />
         )}
-        {component && (
+        {part.component && (
           <Tooltip
             label={t`Part can be used in assemblies`}
             children={PartIcon('component')}
           />
         )}
-        {trackable && (
+        {part.trackable && (
           <Tooltip
             label={t`Part stock is tracked by serial number`}
             children={PartIcon('trackable')}
           />
         )}
-        {purchaseable && (
+        {part.purchaseable && (
           <Tooltip
             label={t`Part can be purchased from external suppliers`}
             children={PartIcon('purchaseable')}
           />
         )}
-        {saleable && (
+        {part.saleable && (
           <Tooltip
             label={t`Part can be sold to customers`}
             children={PartIcon('saleable')}
           />
         )}
-        {virtual && (
+        {part.virtual && (
           <Tooltip label={t`Part is virtual (not a physical part)`}>
             <Badge color="yellow" variant="filled">
               <div