Add info badge to part renderer (#10409)

- Show extra information about ordering and building
- Closes https://github.com/inventree/InvenTree/issues/10380

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

@@ -34,18 +34,53 @@ export function RenderPart(
     badgeColor = instance.minimum_stock > stock ? 'yellow' : 'green';
   }
 
-  const badge = !!badgeText ? (
+  const extra: ReactNode[] = [];
-    <Badge size='xs' color={badgeColor}>
+
-      {badgeText}
+  // For active parts, we can display some extra information here
-    </Badge>
+  if (instance.active) {
-  ) : null;
+    if (instance.ordering) {
+      extra.push(
+        <Text size='xs'>
+          {t`On Order`}: {formatDecimal(instance.ordering)}{' '}
+        </Text>
+      );
+    }
+
+    if (instance.building) {
+      extra.push(
+        <Text size='xs'>
+          {t`In Production`}: {formatDecimal(instance.building)}{' '}
+        </Text>
+      );
+    }
+  }
+
+  const suffix: ReactNode = (
+    <Group gap='xs' wrap='nowrap'>
+      {badgeText && (
+        <Badge size='xs' color={badgeColor}>
+          {badgeText}
+        </Badge>
+      )}
+      {extra && (
+        <TableHoverCard
+          value=''
+          position='bottom-end'
+          zIndex={10000}
+          icon='info'
+          title={t`Details`}
+          extra={extra}
+        />
+      )}
+    </Group>
+  );
 
   return (
     <RenderInlineModel
       {...props}
       primary={instance.full_name ?? instance.name}
       secondary={instance.description}
-      suffix={badge}
+      suffix={suffix}
       image={instance.thumbnail || instance.image}
       url={props.link ? getDetailUrl(ModelType.part, instance.pk) : undefined}
     />

src/frontend/src/components/render/Stock.tsx

@@ -130,7 +130,7 @@ export function RenderStockItem(
           zIndex={10000}
           icon='sitemap'
           title={t`Location`}
-          extra={[<Text>{location.pathstring}</Text>]}
+          extra={[<Text size='xs'>{location.pathstring}</Text>]}
         />
       )}
     </Group>