@inventreedb/ui 0.7.0 → 0.8.1

package/dist/types/Forms.d.ts

@@ -41,14 +41,19 @@ export type ApiFormFieldHeader = {
  * @param model : The model to use for related fields
  * @param filters : Optional API filters to apply to related fields
  * @param required : Whether the field is required
+ * @param allow_null: Whether the field allows null values
+ * @param allow_blank: Whether the field allows blank values
  * @param hidden : Whether the field is hidden
  * @param disabled : Whether the field is disabled
  * @param error : Optional error message to display
  * @param exclude : Whether to exclude the field from the submitted data
  * @param placeholder : The placeholder text to display
+ * @param placeholderAutofill: Whether to allow auto-filling of the placeholder value
  * @param description : The description to display for the field
  * @param preFieldContent : Content to render before the field
  * @param postFieldContent : Content to render after the field
+ * @param leftSection : Content to render in the left section of the field
+ * @param rightSection : Content to render in the right section of the field
  * @param autoFill: Whether to automatically fill the field with data from the API
  * @param autoFillFilters: Optional filters to apply when auto-filling the field
  * @param onValueChange : Callback function to call when the field value changes
@@ -77,12 +82,19 @@ export type ApiFormFieldType = {
     choices?: ApiFormFieldChoice[];
     hidden?: boolean;
     disabled?: boolean;
+    allow_null?: boolean;
+    allow_blank?: boolean;
     exclude?: boolean;
     read_only?: boolean;
     placeholder?: string;
+    placeholderAutofill?: boolean;
+    placeholderWarningCompare?: string | number;
+    placeholderWarning?: string;
     description?: string;
     preFieldContent?: JSX.Element;
     postFieldContent?: JSX.Element;
+    leftSection?: JSX.Element;
+    rightSection?: JSX.Element;
     autoFill?: boolean;
     autoFillFilters?: any;
     adjustValue?: (value: any) => any;

package/dist/types/Plugins.js

@@ -1,8 +1,8 @@
-const INVENTREE_PLUGIN_VERSION = "0.7.0";
-const INVENTREE_REACT_VERSION = "19.1.1";
+const INVENTREE_PLUGIN_VERSION = "0.8.1";
+const INVENTREE_REACT_VERSION = "19.1.2";
 const INVENTREE_REACT_DOM_VERSION = (
   // @ts-ignore
-  "19.1.1"
+  "19.1.2"
 );
 const INVENTREE_MANTINE_VERSION = "8.2.7";
 export {

package/dist/types/Settings.d.ts

@@ -30,6 +30,8 @@ export interface Setting {
     method?: string;
     required?: boolean;
     read_only?: boolean;
+    confirm?: boolean;
+    confirm_text?: string;
 }
 export interface SettingChoice {
     value: string;

package/dist/types/Tables.d.ts

@@ -60,6 +60,8 @@ export type TableState = {
  * @param cellsStyle - The style of the cells in the column
  * @param extra - Extra data to pass to the render function
  * @param noContext - Disable context menu for this column
+ * @param copyable - Enable copy button on hover (uses accessor to get value, or custom function)
+ * @param copyAccessor - Custom accessor path for copy value (defaults to column accessor)
  */
 export type TableColumnProps<T = any> = {
     accessor?: string;
@@ -84,6 +86,8 @@ export type TableColumnProps<T = any> = {
     extra?: any;
     noContext?: boolean;
     style?: MantineStyleProp;
+    copyable?: boolean | ((record: T) => string);
+    copyAccessor?: string;
 };
 /**
  * Interface for the table column definition
@@ -128,6 +132,7 @@ export type RowViewProps = RowAction & RowModelProps;
  * @param barcodeActions : any[] - List of barcode actions
  * @param tableFilters : TableFilter[] - List of custom filters
  * @param tableActions : any[] - List of custom action groups
+ * @param detailAction: boolean - Enable detail action for each row (default = true)
  * @param dataFormatter : (data: any) => any - Callback function to reformat data returned by server (if not in default format)
  * @param rowActions : (record: any) => RowAction[] - Callback function to generate row actions
  * @param onRowClick : (record: any, index: number, event: any) => void - Callback function when a row is clicked
@@ -159,6 +164,7 @@ export type InvenTreeTableProps<T = any> = {
     rowExpansion?: DataTableRowExpansionProps<T>;
     dataFormatter?: (data: any) => any;
     rowActions?: (record: T) => RowAction[];
+    detailAction?: boolean;
     onRowClick?: (record: T, index: number, event: any) => void;
     onCellClick?: DataTableCellClickHandler<T>;
     modelType?: ModelType;

package/lib/components/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import { Progress, Stack, Text } from '@mantine/core';
+import { Group, Progress, Stack, Text } from '@mantine/core';
 import { useMemo } from 'react';
 import { formatDecimal } from '../functions/Formatting';
 
@@ -9,6 +9,7 @@ export type ProgressBarProps = {
   progressLabel?: boolean;
   animated?: boolean;
   size?: string;
+  units?: string;
 };
 
 /**
@@ -30,9 +31,12 @@ export function ProgressBar(props: Readonly<ProgressBarProps>) {
   return (
     <Stack gap={2} style={{ flexGrow: 1, minWidth: '100px' }}>
       {props.progressLabel && (
-        <Text ta='center' size='xs'>
-          {formatDecimal(props.value)} / {formatDecimal(props.maximum)}
-        </Text>
+        <Group gap='xs' justify='center'>
+          <Text ta='center' size='xs'>
+            {formatDecimal(props.value)} / {formatDecimal(props.maximum)}
+          </Text>
+          {props.units && <Text size='xs'>[{props.units}]</Text>}
+        </Group>
       )}
       <Progress
         value={progress}

package/lib/enums/ApiEndpoints.tsx

@@ -20,6 +20,7 @@ export enum ApiEndpoints {
   user_simple_login = 'email/generate/',
 
   // User auth endpoints
+  auth_base = '/auth/',
   user_reset = 'auth/v1/auth/password/request',
   user_reset_set = 'auth/v1/auth/password/reset',
   auth_pwd_change = 'auth/v1/account/password/change',
@@ -32,6 +33,8 @@ export enum ApiEndpoints {
   auth_mfa_reauthenticate = 'auth/v1/auth/2fa/reauthenticate',
   auth_totp = 'auth/v1/account/authenticators/totp',
   auth_trust = 'auth/v1/auth/2fa/trust',
+  auth_webauthn = 'auth/v1/account/authenticators/webauthn',
+  auth_webauthn_login = 'auth/v1/auth/webauthn/authenticate',
   auth_reauthenticate = 'auth/v1/auth/reauthenticate',
   auth_email = 'auth/v1/account/email',
   auth_email_verify = 'auth/v1/auth/email/verify',
@@ -109,8 +112,6 @@ export enum ApiEndpoints {
 
   // Part API endpoints
   part_list = 'part/',
-  part_parameter_list = 'part/parameter/',
-  part_parameter_template_list = 'part/parameter/template/',
   part_thumbs_list = 'part/thumbs/',
   part_pricing = 'part/:id/pricing/',
   part_requirements = 'part/:id/requirements/',
@@ -119,6 +120,7 @@ export enum ApiEndpoints {
   part_pricing_internal = 'part/internal-price/',
   part_pricing_sale = 'part/sale-price/',
   part_stocktake_list = 'part/stocktake/',
+  part_stocktake_generate = 'part/stocktake/generate/',
   category_list = 'part/category/',
   category_tree = 'part/category/tree/',
   category_parameter_list = 'part/category/parameters/',
@@ -132,7 +134,6 @@ export enum ApiEndpoints {
   supplier_part_list = 'company/part/',
   supplier_part_pricing_list = 'company/price-break/',
   manufacturer_part_list = 'company/part/manufacturer/',
-  manufacturer_part_parameter_list = 'company/part/manufacturer/parameter/',
 
   // Stock location endpoints
   stock_location_list = 'stock/location/',
@@ -220,6 +221,9 @@ export enum ApiEndpoints {
 
   // Special plugin endpoints
   plugin_locate_item = 'locate/',
+  plugin_supplier_list = 'supplier/list/',
+  plugin_supplier_search = 'supplier/search/',
+  plugin_supplier_import = 'supplier/import/',
 
   // Machine API endpoints
   machine_types_list = 'machine/types/',
@@ -238,5 +242,10 @@ export enum ApiEndpoints {
   notes_image_upload = 'notes-image-upload/',
   email_list = 'admin/email/',
   email_test = 'admin/email/test/',
-  config_list = 'admin/config/'
+  config_list = 'admin/config/',
+  parameter_list = 'parameter/',
+  parameter_template_list = 'parameter/template/',
+
+  // Internal system things
+  system_internal_trace_end = 'system-internal/observability/end'
 }

package/lib/enums/ModelInformation.tsx

@@ -10,6 +10,7 @@ export interface ModelInformationInterface {
   url_detail?: string;
   api_endpoint: ApiEndpoints;
   admin_url?: string;
+  supports_barcode?: boolean;
   icon: keyof InvenTreeIconType;
 }
 
@@ -31,15 +32,21 @@ export const ModelInformationDict: ModelDict = {
     url_detail: '/part/:pk/',
     api_endpoint: ApiEndpoints.part_list,
     admin_url: '/part/part/',
+    supports_barcode: true,
     icon: 'part'
   },
-  partparametertemplate: {
-    label: () => t`Part Parameter Template`,
-    label_multiple: () => t`Part Parameter Templates`,
-    url_overview: '/settings/admin/part-parameters',
-    url_detail: '/partparametertemplate/:pk/',
-    api_endpoint: ApiEndpoints.part_parameter_template_list,
-    icon: 'test_templates'
+  parameter: {
+    label: () => t`Parameter`,
+    label_multiple: () => t`Parameters`,
+    api_endpoint: ApiEndpoints.parameter_list,
+    icon: 'list_details'
+  },
+  parametertemplate: {
+    label: () => t`Parameter Template`,
+    label_multiple: () => t`Parameter Templates`,
+    api_endpoint: ApiEndpoints.parameter_template_list,
+    admin_url: '/common/parametertemplate/',
+    icon: 'list'
   },
   parttesttemplate: {
     label: () => t`Part Test Template`,
@@ -55,6 +62,7 @@ export const ModelInformationDict: ModelDict = {
     url_detail: '/purchasing/supplier-part/:pk/',
     api_endpoint: ApiEndpoints.supplier_part_list,
     admin_url: '/company/supplierpart/',
+    supports_barcode: true,
     icon: 'supplier_part'
   },
   manufacturerpart: {
@@ -64,6 +72,7 @@ export const ModelInformationDict: ModelDict = {
     url_detail: '/purchasing/manufacturer-part/:pk/',
     api_endpoint: ApiEndpoints.manufacturer_part_list,
     admin_url: '/company/manufacturerpart/',
+    supports_barcode: true,
     icon: 'manufacturers'
   },
   partcategory: {
@@ -82,6 +91,7 @@ export const ModelInformationDict: ModelDict = {
     url_detail: '/stock/item/:pk/',
     api_endpoint: ApiEndpoints.stock_item_list,
     admin_url: '/stock/stockitem/',
+    supports_barcode: true,
     icon: 'stock'
   },
   stocklocation: {
@@ -91,6 +101,7 @@ export const ModelInformationDict: ModelDict = {
     url_detail: '/stock/location/:pk/',
     api_endpoint: ApiEndpoints.stock_location_list,
     admin_url: '/stock/stocklocation/',
+    supports_barcode: true,
     icon: 'location'
   },
   stocklocationtype: {
@@ -112,6 +123,7 @@ export const ModelInformationDict: ModelDict = {
     url_detail: '/manufacturing/build-order/:pk/',
     api_endpoint: ApiEndpoints.build_order_list,
     admin_url: '/build/build/',
+    supports_barcode: true,
     icon: 'build_order'
   },
   buildline: {
@@ -150,6 +162,7 @@ export const ModelInformationDict: ModelDict = {
     url_detail: '/purchasing/purchase-order/:pk/',
     api_endpoint: ApiEndpoints.purchase_order_list,
     admin_url: '/order/purchaseorder/',
+    supports_barcode: true,
     icon: 'purchase_orders'
   },
   purchaseorderlineitem: {
@@ -165,14 +178,17 @@ export const ModelInformationDict: ModelDict = {
     url_detail: '/sales/sales-order/:pk/',
     api_endpoint: ApiEndpoints.sales_order_list,
     admin_url: '/order/salesorder/',
+    supports_barcode: true,
     icon: 'sales_orders'
   },
   salesordershipment: {
     label: () => t`Sales Order Shipment`,
     label_multiple: () => t`Sales Order Shipments`,
+    url_overview: '/sales/index/shipments',
     url_detail: '/sales/shipment/:pk/',
     api_endpoint: ApiEndpoints.sales_order_shipment_list,
-    icon: 'sales_orders'
+    supports_barcode: true,
+    icon: 'shipment'
   },
   returnorder: {
     label: () => t`Return Order`,
@@ -181,6 +197,7 @@ export const ModelInformationDict: ModelDict = {
     url_detail: '/sales/return-order/:pk/',
     api_endpoint: ApiEndpoints.return_order_list,
     admin_url: '/order/returnorder/',
+    supports_barcode: true,
     icon: 'return_orders'
   },
   returnorderlineitem: {

package/lib/enums/ModelType.tsx

@@ -6,7 +6,6 @@ export enum ModelType {
   supplierpart = 'supplierpart',
   manufacturerpart = 'manufacturerpart',
   partcategory = 'partcategory',
-  partparametertemplate = 'partparametertemplate',
   parttesttemplate = 'parttesttemplate',
   projectcode = 'projectcode',
   stockitem = 'stockitem',
@@ -17,6 +16,8 @@ export enum ModelType {
   buildline = 'buildline',
   builditem = 'builditem',
   company = 'company',
+  parameter = 'parameter',
+  parametertemplate = 'parametertemplate',
   purchaseorder = 'purchaseorder',
   purchaseorderlineitem = 'purchaseorderlineitem',
   salesorder = 'salesorder',

package/lib/functions/Conversion.tsx

@@ -29,6 +29,11 @@ export function isTrue(value: any): boolean {
  * Allows for retrieval of nested items in an object.
  */
 export function resolveItem(obj: any, path: string): any {
+  // Return the top-level object if no path is provided
+  if (path == null || path === '') {
+    return obj;
+  }
+
   const properties = path.split('.');
   return properties.reduce((prev, curr) => prev?.[curr], obj);
 }
@@ -40,3 +45,36 @@ export function identifierString(value: string): string {
 
   return value.toLowerCase().replace(/[^a-z0-9]/g, '-');
 }
+
+export function toNumber(
+  value: any,
+  defaultValue: number | null = 0
+): number | null {
+  // Convert the provided value into a number (if possible)
+
+  if (value == undefined || value == null || value === '') {
+    return defaultValue;
+  }
+
+  // Case 1: numeric already
+  if (typeof value === 'number') return value;
+
+  // Case 2: react-number-format object
+  if (typeof value === 'object') {
+    if ('floatValue' in value && typeof value.floatValue === 'number') {
+      return value.floatValue;
+    }
+    if ('value' in value) {
+      const parsed = Number(value.value);
+      return Number.isNaN(parsed) ? Number.NaN : parsed;
+    }
+  }
+
+  // Case 3: string
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? Number.NaN : parsed;
+  }
+
+  return Number.NaN;
+}

package/lib/functions/Navigation.tsx

@@ -7,6 +7,28 @@ import { cancelEvent } from './Events';
 export const getBaseUrl = (): string =>
   (window as any).INVENTREE_SETTINGS?.base_url || 'web';
 
+/**
+ * Returns the overview URL for a given model type.
+ * This is the UI URL, not the API URL.
+ */
+export function getOverviewUrl(model: ModelType, absolute?: boolean): string {
+  const modelInfo = ModelInformationDict[model];
+
+  if (modelInfo?.url_overview) {
+    const url = modelInfo.url_overview;
+    const base = getBaseUrl();
+
+    if (absolute && base) {
+      return `/${base}${url}`;
+    } else {
+      return url;
+    }
+  }
+
+  console.error(`No overview URL found for model ${model}`);
+  return '';
+}
+
 /**
  * Returns the detail view URL for a given model type.
  * This is the UI URL, not the API URL.

package/lib/hooks/MonitorDataOutput.tsx

@@ -0,0 +1,127 @@
+import { t } from '@lingui/core/macro';
+import { useDocumentVisibility } from '@mantine/hooks';
+import { notifications, showNotification } from '@mantine/notifications';
+import { IconCircleCheck, IconExclamationCircle } from '@tabler/icons-react';
+import { type QueryClient, useQuery } from '@tanstack/react-query';
+import type { AxiosInstance } from 'axios';
+import { useEffect, useState } from 'react';
+import { ProgressBar } from '../components/ProgressBar';
+import { ApiEndpoints } from '../enums/ApiEndpoints';
+import { apiUrl } from '../functions/Api';
+
+/**
+ * Hook for monitoring a data output process running on the server
+ */
+export default function monitorDataOutput({
+  api,
+  queryClient,
+  title,
+  hostname,
+  id
+}: {
+  api: AxiosInstance;
+  queryClient?: QueryClient;
+  title: string;
+  hostname?: string;
+  id?: number;
+}) {
+  const visibility = useDocumentVisibility();
+
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!!id) {
+      setLoading(true);
+      showNotification({
+        id: `data-output-${id}`,
+        title: title,
+        loading: true,
+        autoClose: false,
+        withCloseButton: false,
+        message: <ProgressBar size='lg' value={0} progressLabel />
+      });
+    } else setLoading(false);
+  }, [id, title]);
+
+  useQuery(
+    {
+      enabled: !!id && loading && visibility === 'visible',
+      refetchInterval: 500,
+      queryKey: ['data-output', id, title],
+      queryFn: () =>
+        api
+          .get(apiUrl(ApiEndpoints.data_output, id))
+          .then((response) => {
+            const data = response?.data ?? {};
+
+            if (!!data.errors || !!data.error) {
+              setLoading(false);
+
+              const error: string =
+                data?.error ?? data?.errors?.error ?? t`Process failed`;
+
+              notifications.update({
+                id: `data-output-${id}`,
+                loading: false,
+                icon: <IconExclamationCircle />,
+                autoClose: 2500,
+                title: title,
+                message: error,
+                color: 'red'
+              });
+            } else if (data.complete) {
+              setLoading(false);
+              notifications.update({
+                id: `data-output-${id}`,
+                loading: false,
+                autoClose: 2500,
+                title: title,
+                message: t`Process completed successfully`,
+                color: 'green',
+                icon: <IconCircleCheck />
+              });
+
+              if (data.output) {
+                const url = data.output;
+                const base = hostname ?? window.location.hostname;
+
+                const downloadUrl = new URL(url, base);
+
+                window.open(downloadUrl.toString(), '_blank');
+              }
+            } else {
+              notifications.update({
+                id: `data-output-${id}`,
+                loading: true,
+                autoClose: false,
+                withCloseButton: false,
+                message: (
+                  <ProgressBar
+                    size='lg'
+                    maximum={data.total}
+                    value={data.progress}
+                    progressLabel={data.total > 0}
+                    animated
+                  />
+                )
+              });
+            }
+
+            return data;
+          })
+          .catch(() => {
+            setLoading(false);
+            notifications.update({
+              id: `data-output-${id}`,
+              loading: false,
+              autoClose: 2500,
+              title: title,
+              message: t`Process failed`,
+              color: 'red'
+            });
+            return {};
+          })
+    },
+    queryClient
+  );
+}

package/lib/index.ts

@@ -71,3 +71,6 @@ export {
   RowCancelAction,
   RowActions
 } from './components/RowActions';
+
+// Shared hooks
+export { default as monitorDataOutput } from './hooks/MonitorDataOutput';

package/lib/types/Auth.tsx

@@ -25,7 +25,8 @@ export enum FlowEnum {
   MfaAuthenticate = 'mfa_authenticate',
   Reauthenticate = 'reauthenticate',
   MfaReauthenticate = 'mfa_reauthenticate',
-  MfaTrust = 'mfa_trust'
+  MfaTrust = 'mfa_trust',
+  MfaRegister = 'mfa_register'
 }
 
 export interface Flow {

package/lib/types/Filters.tsx

@@ -39,7 +39,7 @@ export type TableFilterType = 'boolean' | 'choice' | 'date' | 'text' | 'api';
  */
 export type TableFilter = {
   name: string;
-  label: string;
+  label?: string;
   description?: string;
   type?: TableFilterType;
   choices?: TableFilterChoice[];

package/lib/types/Forms.tsx

@@ -48,14 +48,19 @@ export type ApiFormFieldHeader = {
  * @param model : The model to use for related fields
  * @param filters : Optional API filters to apply to related fields
  * @param required : Whether the field is required
+ * @param allow_null: Whether the field allows null values
+ * @param allow_blank: Whether the field allows blank values
  * @param hidden : Whether the field is hidden
  * @param disabled : Whether the field is disabled
  * @param error : Optional error message to display
  * @param exclude : Whether to exclude the field from the submitted data
  * @param placeholder : The placeholder text to display
+ * @param placeholderAutofill: Whether to allow auto-filling of the placeholder value
  * @param description : The description to display for the field
  * @param preFieldContent : Content to render before the field
  * @param postFieldContent : Content to render after the field
+ * @param leftSection : Content to render in the left section of the field
+ * @param rightSection : Content to render in the right section of the field
  * @param autoFill: Whether to automatically fill the field with data from the API
  * @param autoFillFilters: Optional filters to apply when auto-filling the field
  * @param onValueChange : Callback function to call when the field value changes
@@ -100,12 +105,19 @@ export type ApiFormFieldType = {
   choices?: ApiFormFieldChoice[];
   hidden?: boolean;
   disabled?: boolean;
+  allow_null?: boolean;
+  allow_blank?: boolean;
   exclude?: boolean;
   read_only?: boolean;
   placeholder?: string;
+  placeholderAutofill?: boolean;
+  placeholderWarningCompare?: string | number;
+  placeholderWarning?: string;
   description?: string;
   preFieldContent?: JSX.Element;
   postFieldContent?: JSX.Element;
+  leftSection?: JSX.Element;
+  rightSection?: JSX.Element;
   autoFill?: boolean;
   autoFillFilters?: any;
   adjustValue?: (value: any) => any;

package/lib/types/Settings.tsx

@@ -34,6 +34,8 @@ export interface Setting {
   method?: string;
   required?: boolean;
   read_only?: boolean;
+  confirm?: boolean;
+  confirm_text?: string;
 }
 
 export interface SettingChoice {

package/lib/types/Tables.tsx

@@ -99,6 +99,8 @@ export type TableState = {
  * @param cellsStyle - The style of the cells in the column
  * @param extra - Extra data to pass to the render function
  * @param noContext - Disable context menu for this column
+ * @param copyable - Enable copy button on hover (uses accessor to get value, or custom function)
+ * @param copyAccessor - Custom accessor path for copy value (defaults to column accessor)
  */
 export type TableColumnProps<T = any> = {
   accessor?: string;
@@ -123,6 +125,8 @@ export type TableColumnProps<T = any> = {
   extra?: any;
   noContext?: boolean;
   style?: MantineStyleProp;
+  copyable?: boolean | ((record: T) => string);
+  copyAccessor?: string;
 };
 
 /**
@@ -173,6 +177,7 @@ export type RowViewProps = RowAction & RowModelProps;
  * @param barcodeActions : any[] - List of barcode actions
  * @param tableFilters : TableFilter[] - List of custom filters
  * @param tableActions : any[] - List of custom action groups
+ * @param detailAction: boolean - Enable detail action for each row (default = true)
  * @param dataFormatter : (data: any) => any - Callback function to reformat data returned by server (if not in default format)
  * @param rowActions : (record: any) => RowAction[] - Callback function to generate row actions
  * @param onRowClick : (record: any, index: number, event: any) => void - Callback function when a row is clicked
@@ -204,6 +209,7 @@ export type InvenTreeTableProps<T = any> = {
   rowExpansion?: DataTableRowExpansionProps<T>;
   dataFormatter?: (data: any) => any;
   rowActions?: (record: T) => RowAction[];
+  detailAction?: boolean;
   onRowClick?: (record: T, index: number, event: any) => void;
   onCellClick?: DataTableCellClickHandler<T>;
   modelType?: ModelType;