Show warning for insufficient stock (#7916)

src/frontend/src/functions/icons.tsx

@@ -27,6 +27,7 @@ import {
   IconCornerUpRightDouble,
   IconCurrencyDollar,
   IconDots,
+  IconExclamationCircle,
   IconExternalLink,
   IconFileUpload,
   IconFlag,
@@ -109,6 +110,7 @@ const icons = {
   keywords: IconTag,
   status: IconInfoCircle,
   info: IconInfoCircle,
+  exclamation: IconExclamationCircle,
   details: IconInfoCircle,
   parameters: IconList,
   list: IconList,

src/frontend/src/tables/TableHoverCard.tsx

@@ -3,6 +3,8 @@ import { Divider, Group, HoverCard, Stack, Text } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { ReactNode } from 'react';
 
+import { InvenTreeIcon, InvenTreeIconType } from '../functions/icons';
+
 /*
  * A custom hovercard element for displaying extra information in a table cell.
  * If a table cell has extra information available,
@@ -11,11 +13,15 @@ import { ReactNode } from 'react';
 export function TableHoverCard({
   value, // The value of the cell
   extra, // The extra information to display
-  title // The title of the hovercard
+  title, // The title of the hovercard
+  icon, // The icon to display
+  iconColor // The icon color
 }: {
   value: any;
   extra?: ReactNode;
   title?: string;
+  icon?: InvenTreeIconType;
+  iconColor?: string;
 }) {
   // If no extra information presented, just return the raw value
   if (!extra) {
@@ -31,7 +37,10 @@ export function TableHoverCard({
       <HoverCard.Target>
         <Group gap="xs" justify="space-between" wrap="nowrap">
           {value}
-          <IconInfoCircle size="16" color="blue" />
+          <InvenTreeIcon
+            icon={icon ?? 'info'}
+            iconProps={{ size: 16, color: iconColor ?? 'blue' }}
+          />
         </Group>
       </HoverCard.Target>
       <HoverCard.Dropdown>

src/frontend/src/tables/build/BuildLineTable.tsx

@@ -126,8 +126,20 @@ export default function BuildLineTable({
       );
     }
 
+    const sufficient = available >= record.quantity - record.allocated;
+
+    if (!sufficient) {
+      extra.push(
+        <Text key="insufficient" c="orange" size="sm">
+          {t`Insufficient stock`}
+        </Text>
+      );
+    }
+
     return (
       <TableHoverCard
+        icon={sufficient ? 'info' : 'exclamation'}
+        iconColor={sufficient ? 'blue' : 'orange'}
         value={
           available > 0 ? (
             available