@inventreedb/ui 0.0.1

package/src/tables/bom/BomTable.tsx

@@ -0,0 +1,590 @@
+import { t } from '@lingui/core/macro';
+import { Alert, Group, Stack, Text } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import {
+  IconArrowRight,
+  IconCircleCheck,
+  IconFileArrowLeft,
+  IconLock,
+  IconSwitch3
+} from '@tabler/icons-react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+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 type { TableFilter } from '@lib/types/Filters';
+import { ActionButton } from '../../components/buttons/ActionButton';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { YesNoButton } from '../../components/buttons/YesNoButton';
+import { Thumbnail } from '../../components/images/Thumbnail';
+import ImporterDrawer from '../../components/importer/ImporterDrawer';
+import { useApi } from '../../contexts/ApiContext';
+import { formatDecimal, formatPriceRange } from '../../defaults/formatters';
+import { bomItemFields } from '../../forms/BomForms';
+import { dataImporterSessionFields } from '../../forms/ImporterForms';
+import { navigateToLink } from '../../functions/navigation';
+import { notYetImplemented } from '../../functions/notifications';
+import {
+  useApiFormModal,
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import {
+  BooleanColumn,
+  DescriptionColumn,
+  NoteColumn,
+  ReferenceColumn
+} from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { TableHoverCard } from '../TableHoverCard';
+
+// Calculate the total stock quantity available for a given BomItem
+function availableStockQuantity(record: any): number {
+  // Base availability
+  let available: number = record.available_stock;
+
+  // Add in available substitute stock
+  available += record?.available_substitute_stock ?? 0;
+
+  // Add in variant stock
+  if (record.allow_variants) {
+    available += record?.available_variant_stock ?? 0;
+  }
+
+  return available;
+}
+
+export function BomTable({
+  partId,
+  partLocked,
+  params = {}
+}: Readonly<{
+  partId: number;
+  partLocked?: boolean;
+  params?: any;
+}>) {
+  const api = useApi();
+  const user = useUserState();
+  const table = useTable('bom');
+  const navigate = useNavigate();
+
+  const [importOpened, setImportOpened] = useState<boolean>(false);
+
+  const [selectedSession, setSelectedSession] = useState<number | undefined>(
+    undefined
+  );
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'sub_part',
+        switchable: false,
+        sortable: true,
+        render: (record) => {
+          const part = record.sub_part_detail;
+          const extra = [];
+
+          if (record.part != partId) {
+            extra.push(
+              <Text key='different-parent'>{t`This BOM item is defined for a different parent`}</Text>
+            );
+          }
+
+          return (
+            part && (
+              <TableHoverCard
+                value={
+                  <Thumbnail
+                    src={part.thumbnail || part.image}
+                    alt={part.description}
+                    text={part.full_name}
+                  />
+                }
+                extra={extra}
+                title={t`Part Information`}
+              />
+            )
+          );
+        }
+      },
+      {
+        accessor: 'sub_part_detail.IPN',
+        title: t`IPN`,
+        sortable: true
+      },
+      DescriptionColumn({
+        accessor: 'sub_part_detail.description'
+      }),
+      ReferenceColumn({
+        switchable: true
+      }),
+      {
+        accessor: 'quantity',
+        switchable: false,
+        sortable: true,
+        render: (record: any) => {
+          const quantity = formatDecimal(record.quantity);
+          const units = record.sub_part_detail?.units;
+
+          return (
+            <Group justify='space-between' grow>
+              <Text>{quantity}</Text>
+              {record.overage && <Text size='xs'>+{record.overage}</Text>}
+              {units && <Text size='xs'>{units}</Text>}
+            </Group>
+          );
+        }
+      },
+      {
+        accessor: 'substitutes',
+        // TODO: Show hovercard with list of substitutes
+        render: (row) => {
+          const substitutes = row.substitutes ?? [];
+
+          return substitutes.length > 0 ? (
+            row.length
+          ) : (
+            <YesNoButton value={false} />
+          );
+        }
+      },
+      BooleanColumn({
+        accessor: 'optional'
+      }),
+      BooleanColumn({
+        accessor: 'consumable'
+      }),
+      BooleanColumn({
+        accessor: 'allow_variants'
+      }),
+      BooleanColumn({
+        accessor: 'inherited'
+        // TODO: Custom renderer for this column
+        // TODO: See bom.js for existing implementation
+      }),
+      BooleanColumn({
+        accessor: 'validated'
+      }),
+      {
+        accessor: 'price_range',
+        title: t`Unit Price`,
+        ordering: 'pricing_max',
+        sortable: true,
+        switchable: true,
+        render: (record: any) =>
+          formatPriceRange(record.pricing_min, record.pricing_max)
+      },
+      {
+        accessor: 'total_price',
+        title: t`Total Price`,
+        ordering: 'pricing_max_total',
+        sortable: true,
+        switchable: true,
+        render: (record: any) =>
+          formatPriceRange(record.pricing_min_total, record.pricing_max_total)
+      },
+      {
+        accessor: 'available_stock',
+        sortable: true,
+        render: (record) => {
+          const extra: ReactNode[] = [];
+
+          const available_stock: number = availableStockQuantity(record);
+          const on_order: number = record?.on_order ?? 0;
+          const building: number = record?.building ?? 0;
+
+          const text =
+            available_stock <= 0 ? (
+              <Text c='red' style={{ fontStyle: 'italic' }}>{t`No stock`}</Text>
+            ) : (
+              available_stock
+            );
+
+          if (record.external_stock > 0) {
+            extra.push(
+              <Text key='external'>
+                {t`External stock`}: {record.external_stock}
+              </Text>
+            );
+          }
+
+          if (record.available_substitute_stock > 0) {
+            extra.push(
+              <Text key='substitute'>
+                {t`Includes substitute stock`}:{' '}
+                {record.available_substitute_stock}
+              </Text>
+            );
+          }
+
+          if (record.allow_variants && record.available_variant_stock > 0) {
+            extra.push(
+              <Text key='variant'>
+                {t`Includes variant stock`}: {record.available_variant_stock}
+              </Text>
+            );
+          }
+
+          if (on_order > 0) {
+            extra.push(
+              <Text key='on_order'>
+                {t`On order`}: {on_order}
+              </Text>
+            );
+          }
+
+          if (building > 0) {
+            extra.push(
+              <Text key='building'>
+                {t`Building`}: {building}
+              </Text>
+            );
+          }
+
+          return (
+            <TableHoverCard
+              value={text}
+              extra={extra}
+              title={t`Stock Information`}
+            />
+          );
+        }
+      },
+      {
+        accessor: 'can_build',
+        title: t`Can Build`,
+        sortable: true,
+        render: (record: any) => {
+          if (record.can_build === null || record.can_build === undefined) {
+            return '-';
+          }
+
+          if (
+            !Number.isFinite(record.can_build) ||
+            Number.isNaN(record.can_build)
+          ) {
+            return '-';
+          }
+
+          const can_build = Math.trunc(record.can_build);
+          const value = (
+            <Text
+              fs={record.consumable && 'italic'}
+              c={can_build <= 0 && !record.consumable ? 'red' : undefined}
+            >
+              {can_build}
+            </Text>
+          );
+
+          const extra = [];
+
+          if (record.consumable) {
+            extra.push(<Text key='consumable'>{t`Consumable item`}</Text>);
+          } else if (can_build <= 0) {
+            extra.push(
+              <Text key='no-build' c='red'>{t`No available stock`}</Text>
+            );
+          }
+
+          return (
+            <TableHoverCard value={value} extra={extra} title={t`Can Build`} />
+          );
+        }
+      },
+      NoteColumn({})
+    ];
+  }, [partId, params]);
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'sub_part_testable',
+        label: t`Testable Part`,
+        description: t`Show testable items`
+      },
+      {
+        name: 'sub_part_trackable',
+        label: t`Trackable Part`,
+        description: t`Show trackable items`
+      },
+      {
+        name: 'sub_part_assembly',
+        label: t`Assembled Part`,
+        description: t`Show assembled items`
+      },
+      {
+        name: 'available_stock',
+        label: t`Available Stock`,
+        description: t`Show items with available stock`
+      },
+      {
+        name: 'on_order',
+        label: t`On Order`,
+        description: t`Show items on order`
+      },
+      {
+        name: 'validated',
+        label: t`Validated`,
+        description: t`Show validated items`
+      },
+      {
+        name: 'inherited',
+        label: t`Inherited`,
+        description: t`Show inherited items`
+      },
+      {
+        name: 'allow_variants',
+        label: t`Allow Variants`,
+        description: t`Show items which allow variant substitution`
+      },
+      {
+        name: 'optional',
+        label: t`Optional`,
+        description: t`Show optional items`
+      },
+      {
+        name: 'consumable',
+        label: t`Consumable`,
+        description: t`Show consumable items`
+      },
+      {
+        name: 'has_pricing',
+        label: t`Has Pricing`,
+        description: t`Show items with pricing`
+      }
+    ];
+  }, [partId, params]);
+
+  const [selectedBomItem, setSelectedBomItem] = useState<number>(0);
+
+  const importSessionFields = useMemo(() => {
+    const fields = dataImporterSessionFields();
+
+    fields.model_type.hidden = true;
+    fields.model_type.value = 'bomitem';
+
+    fields.field_overrides.value = {
+      part: partId
+    };
+
+    return fields;
+  }, [partId]);
+
+  const importBomItem = useCreateApiFormModal({
+    url: ApiEndpoints.import_session_list,
+    title: t`Import BOM Data`,
+    fields: importSessionFields,
+    onFormSuccess: (response: any) => {
+      setSelectedSession(response.pk);
+      setImportOpened(true);
+    }
+  });
+
+  const newBomItem = useCreateApiFormModal({
+    url: ApiEndpoints.bom_list,
+    title: t`Add BOM Item`,
+    fields: bomItemFields(),
+    initialData: {
+      part: partId
+    },
+    successMessage: t`BOM item created`,
+    table: table
+  });
+
+  const editBomItem = useEditApiFormModal({
+    url: ApiEndpoints.bom_list,
+    pk: selectedBomItem,
+    title: t`Edit BOM Item`,
+    fields: bomItemFields(),
+    successMessage: t`BOM item updated`,
+    table: table
+  });
+
+  const deleteBomItem = useDeleteApiFormModal({
+    url: ApiEndpoints.bom_list,
+    pk: selectedBomItem,
+    title: t`Delete BOM Item`,
+    successMessage: t`BOM item deleted`,
+    table: table
+  });
+
+  const validateBom = useApiFormModal({
+    url: ApiEndpoints.bom_validate,
+    method: 'PUT',
+    fields: {
+      valid: {
+        hidden: true,
+        value: true
+      }
+    },
+    title: t`Validate BOM`,
+    pk: partId,
+    preFormContent: (
+      <Alert color='green' icon={<IconCircleCheck />} title={t`Validate BOM`}>
+        <Text>{t`Do you want to validate the bill of materials for this assembly?`}</Text>
+      </Alert>
+    ),
+    successMessage: t`BOM validated`,
+    onFormSuccess: () => table.refreshTable()
+  });
+
+  const validateBomItem = useCallback((record: any) => {
+    const url = apiUrl(ApiEndpoints.bom_item_validate, record.pk);
+
+    api
+      .patch(url, { valid: true })
+      .then((_response) => {
+        showNotification({
+          title: t`Success`,
+          message: t`BOM item validated`,
+          color: 'green'
+        });
+
+        table.refreshTable();
+      })
+      .catch((_error) => {
+        showNotification({
+          title: t`Error`,
+          message: t`Failed to validate BOM item`,
+          color: 'red'
+        });
+      });
+  }, []);
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      // If this BOM item is defined for a *different* parent, then it cannot be edited
+      if (record.part && record.part != partId) {
+        return [
+          {
+            title: t`View BOM`,
+            onClick: (event: any) => {
+              navigateToLink(`/part/${record.part}/bom/`, navigate, event);
+            },
+            icon: <IconArrowRight />
+          }
+        ];
+      }
+
+      return [
+        {
+          title: t`Validate BOM Line`,
+          color: 'green',
+          hidden:
+            partLocked ||
+            record.validated ||
+            !user.hasChangeRole(UserRoles.part),
+          icon: <IconCircleCheck />,
+          onClick: () => validateBomItem(record)
+        },
+        RowEditAction({
+          hidden: partLocked || !user.hasChangeRole(UserRoles.part),
+          onClick: () => {
+            setSelectedBomItem(record.pk);
+            editBomItem.open();
+          }
+        }),
+        {
+          title: t`Edit Substitutes`,
+          color: 'blue',
+          hidden: partLocked || !user.hasChangeRole(UserRoles.part),
+          icon: <IconSwitch3 />,
+          onClick: notYetImplemented
+        },
+        RowDeleteAction({
+          hidden: partLocked || !user.hasDeleteRole(UserRoles.part),
+          onClick: () => {
+            setSelectedBomItem(record.pk);
+            deleteBomItem.open();
+          }
+        })
+      ];
+    },
+    [partId, partLocked, user]
+  );
+
+  const tableActions = useMemo(() => {
+    return [
+      <ActionButton
+        key='import-bom'
+        hidden={partLocked || !user.hasAddRole(UserRoles.part)}
+        tooltip={t`Import BOM Data`}
+        icon={<IconFileArrowLeft />}
+        onClick={() => importBomItem.open()}
+      />,
+      <ActionButton
+        key='validate-bom'
+        hidden={partLocked || !user.hasChangeRole(UserRoles.part)}
+        tooltip={t`Validate BOM`}
+        icon={<IconCircleCheck />}
+        onClick={() => validateBom.open()}
+      />,
+      <AddItemButton
+        key='add-bom-item'
+        hidden={partLocked || !user.hasAddRole(UserRoles.part)}
+        tooltip={t`Add BOM Item`}
+        onClick={() => newBomItem.open()}
+      />
+    ];
+  }, [partLocked, user]);
+
+  return (
+    <>
+      {importBomItem.modal}
+      {newBomItem.modal}
+      {editBomItem.modal}
+      {validateBom.modal}
+      {deleteBomItem.modal}
+      <Stack gap='xs'>
+        {partLocked && (
+          <Alert
+            title={t`Part is Locked`}
+            color='orange'
+            icon={<IconLock />}
+            p='xs'
+          >
+            <Text>{t`Bill of materials cannot be edited, as the part is locked`}</Text>
+          </Alert>
+        )}
+        <InvenTreeTable
+          url={apiUrl(ApiEndpoints.bom_list)}
+          tableState={table}
+          columns={tableColumns}
+          props={{
+            params: {
+              ...params,
+              part: partId,
+              part_detail: true,
+              sub_part_detail: true
+            },
+            tableActions: tableActions,
+            tableFilters: tableFilters,
+            modelType: ModelType.part,
+            modelField: 'sub_part',
+            rowActions: rowActions,
+            enableSelection: !partLocked,
+            enableBulkDelete: !partLocked && user.hasDeleteRole(UserRoles.part),
+            enableDownload: true
+          }}
+        />
+      </Stack>
+      <ImporterDrawer
+        sessionId={selectedSession ?? -1}
+        opened={selectedSession != undefined && importOpened}
+        onClose={() => {
+          setSelectedSession(undefined);
+          setImportOpened(false);
+          table.refreshTable();
+        }}
+      />
+    </>
+  );
+}

package/src/tables/bom/UsedInTable.tsx

@@ -0,0 +1,114 @@
+import { t } from '@lingui/core/macro';
+import { Group, Text } from '@mantine/core';
+import { useMemo } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import { formatDecimal } from '../../defaults/formatters';
+import { useTable } from '../../hooks/UseTable';
+import type { TableColumn } from '../Column';
+import { PartColumn, ReferenceColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+
+/*
+ * For a given part, render a table showing all the assemblies the part is used in
+ */
+export function UsedInTable({
+  partId,
+  params = {}
+}: Readonly<{
+  partId: number;
+  params?: any;
+}>) {
+  const table = useTable('usedin');
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'part',
+        switchable: false,
+        sortable: true,
+        title: t`Assembly`,
+        render: (record: any) => PartColumn({ part: record.part_detail })
+      },
+      {
+        accessor: 'part_detail.IPN',
+        sortable: false,
+        title: t`IPN`
+      },
+      {
+        accessor: 'part_detail.description',
+        sortable: false,
+        title: t`Description`
+      },
+      {
+        accessor: 'sub_part',
+        sortable: true,
+        title: t`Component`,
+        render: (record: any) => PartColumn({ part: record.sub_part_detail })
+      },
+      {
+        accessor: 'quantity',
+        switchable: false,
+        render: (record: any) => {
+          const quantity = formatDecimal(record.quantity);
+          const units = record.sub_part_detail?.units;
+
+          return (
+            <Group justify='space-between' grow wrap='nowrap'>
+              <Text>{quantity}</Text>
+              {units && <Text size='xs'>{units}</Text>}
+            </Group>
+          );
+        }
+      },
+      ReferenceColumn({})
+    ];
+  }, [partId]);
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'inherited',
+        label: t`Inherited`,
+        description: t`Show inherited items`
+      },
+      {
+        name: 'optional',
+        label: t`Optional`,
+        description: t`Show optional items`
+      },
+      {
+        name: 'part_active',
+        label: t`Active`,
+        description: t`Show active assemblies`
+      },
+      {
+        name: 'part_trackable',
+        label: t`Trackable`,
+        description: t`Show trackable assemblies`
+      }
+    ];
+  }, [partId]);
+
+  return (
+    <InvenTreeTable
+      url={apiUrl(ApiEndpoints.bom_list)}
+      tableState={table}
+      columns={tableColumns}
+      props={{
+        params: {
+          ...params,
+          uses: partId,
+          part_detail: true,
+          sub_part_detail: true
+        },
+        tableFilters: tableFilters,
+        modelType: ModelType.part,
+        modelField: 'part'
+      }}
+    />
+  );
+}