@inventreedb/ui 1.4.0 → 1.4.1

package/dist/types/Rendering.d.ts

@@ -11,6 +11,7 @@ export interface InstanceRenderInterface {
     link?: boolean;
     navigate?: any;
     showSecondary?: boolean;
+    showHover?: boolean;
     extra?: Record<string, any>;
 }
 type EnumDictionary<T extends string | symbol | number, U> = {

package/dist/types/Tables.d.ts

@@ -48,7 +48,7 @@ export type TableState = {
  * @param editable - Whether the value of this column can be edited
  * @param definition - Optional field definition for the column
  * @param render - A custom render function
- * @param filter - A custom filter function
+ * @param filter - Filter name (string) to look up from tableFilters and attach an inline icon, or a custom render function for the filter popover
  * @param filtering - Whether the column is filterable
  * @param width - The width of the column
  * @param minWidth - The minimum width of the column
@@ -73,7 +73,9 @@ export type TableColumnProps<T = any> = {
     editable?: boolean;
     definition?: ApiFormFieldType;
     render?: (record: T, index?: number) => any;
-    filter?: any;
+    filter?: string | string[] | (({ close }: {
+        close: () => void;
+    }) => ReactNode);
     filtering?: boolean;
     width?: number;
     minWidth?: string | number;

package/lib/components/Boundary.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { Alert, Stack } from '@mantine/core';
+import { Alert, Stack, Text } from '@mantine/core';
 import { ErrorBoundary, type FallbackRender } from '@sentry/react';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { type ReactNode, useCallback } from 'react';
@@ -14,8 +14,12 @@ export function DefaultFallback({
       title={`INVE-E17: ${t`Error rendering component`}: ${title}`}
     >
       <Stack gap='xs'>
-        {t`An error occurred while rendering this component. Refer to the console for more information.`}
-        {t`Try reloading the page, or contact your administrator if the problem persists.`}
+        <Text size='sm'>
+          {t`An error occurred while rendering this component. Refer to the console for more information.`}
+        </Text>
+        <Text size='sm'>
+          {t`Try reloading the page, or contact your administrator if the problem persists.`}
+        </Text>
       </Stack>
     </Alert>
   );

package/lib/components/TableColumnSelect.tsx

@@ -23,7 +23,7 @@ export function TableColumnSelect({
         <Menu.Label>{t`Select Columns`}</Menu.Label>
         <Divider />
         {columns
-          .filter((col) => col.switchable ?? true)
+          .filter((col) => (col.switchable ?? true) && !col.propHidden)
           .map((col) => (
             <Menu.Item key={col.accessor}>
               <Checkbox

package/lib/components/TagsList.tsx

@@ -0,0 +1,27 @@
+import { ActionIcon, Badge, Group, Paper } from '@mantine/core';
+import { IconTag } from '@tabler/icons-react';
+
+export default function TagsList({
+  tags
+}: Readonly<{
+  tags: string[];
+}>) {
+  if (!tags || tags.length === 0) {
+    return null;
+  }
+
+  return (
+    <Paper p='xs' shadow='xs' withBorder>
+      <Group gap='xs'>
+        <ActionIcon size='sm' variant='transparent'>
+          <IconTag />
+        </ActionIcon>
+        {tags.map((tag: string) => (
+          <Badge key={tag} variant='outline' size='sm'>
+            {tag}
+          </Badge>
+        ))}
+      </Group>
+    </Paper>
+  );
+}

package/lib/enums/ApiEndpoints.tsx

@@ -12,12 +12,13 @@ export enum ApiEndpoints {
   // User API endpoints
   user_list = 'user/',
   user_set_password = 'user/:id/set-password/',
-  user_me = 'user/me/',
-  user_profile = 'user/profile/',
-  user_roles = 'user/roles/',
-  user_token = 'user/token/',
   user_tokens = 'user/tokens/',
   user_simple_login = 'email/generate/',
+  // Individual user endpoints
+  user_me_profile = 'user/me/profile/',
+  user_me_roles = 'user/me/roles/',
+  user_me_token = 'user/me/token/',
+  user_me = 'user/me/',
 
   // User auth endpoints
   auth_base = '/auth/',
@@ -181,6 +182,7 @@ export enum ApiEndpoints {
   sales_order_complete = 'order/so/:id/complete/',
   sales_order_allocate = 'order/so/:id/allocate/',
   sales_order_allocate_serials = 'order/so/:id/allocate-serials/',
+  sales_order_auto_allocate = 'order/so/:id/auto-allocate/',
 
   sales_order_line_list = 'order/so-line/',
   sales_order_extra_line_list = 'order/so-extra-line/',
@@ -198,6 +200,17 @@ export enum ApiEndpoints {
   return_order_line_list = 'order/ro-line/',
   return_order_extra_line_list = 'order/ro-extra-line/',
 
+  transfer_order_list = 'order/transfer-order/',
+  transfer_order_issue = 'order/transfer-order/:id/issue/',
+  transfer_order_hold = 'order/transfer-order/:id/hold/',
+  transfer_order_cancel = 'order/transfer-order/:id/cancel/',
+  transfer_order_complete = 'order/transfer-order/:id/complete/',
+  transfer_order_allocate = 'order/transfer-order/:id/allocate/',
+  transfer_order_allocate_serials = 'order/transfer-order/:id/allocate-serials/',
+
+  transfer_order_line_list = 'order/transfer-order-line/',
+  transfer_order_allocation_list = 'order/transfer-order-allocation/',
+
   // Template API endpoints
   label_list = 'label/template/',
   label_print = 'label/print/',
@@ -246,6 +259,7 @@ export enum ApiEndpoints {
   config_list = 'admin/config/',
   parameter_list = 'parameter/',
   parameter_template_list = 'parameter/template/',
+  tag_list = 'tag/',
 
   // 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;
+  pk_field?: string;
   supports_barcode?: boolean;
   icon: keyof InvenTreeIconType;
 }
@@ -117,8 +118,8 @@ export const ModelInformationDict: ModelDict = {
     icon: 'history'
   },
   build: {
-    label: () => t`Build`,
-    label_multiple: () => t`Builds`,
+    label: () => t`Build Order`,
+    label_multiple: () => t`Build Orders`,
     url_overview: '/manufacturing/index/buildorders/',
     url_detail: '/manufacturing/build-order/:pk/',
     api_endpoint: ApiEndpoints.build_order_list,
@@ -207,6 +208,22 @@ export const ModelInformationDict: ModelDict = {
     api_endpoint: ApiEndpoints.return_order_line_list,
     icon: 'return_orders'
   },
+  transferorder: {
+    label: () => t`Transfer Order`,
+    label_multiple: () => t`Transfer Orders`,
+    url_overview: '/stock/location/index/transfer-orders',
+    url_detail: '/stock/transfer-order/:pk/',
+    api_endpoint: ApiEndpoints.transfer_order_list,
+    admin_url: '/order/transferorder/',
+    supports_barcode: true,
+    icon: 'transfer_orders'
+  },
+  transferorderlineitem: {
+    label: () => t`Transfer Order Line Item`,
+    label_multiple: () => t`Transfer Order Line Items`,
+    api_endpoint: ApiEndpoints.transfer_order_line_list,
+    icon: 'transfer-orders'
+  },
   address: {
     label: () => t`Address`,
     label_multiple: () => t`Addresses`,
@@ -302,5 +319,11 @@ export const ModelInformationDict: ModelDict = {
     url_overview: '/settings/admin/errors',
     url_detail: '/settings/admin/errors/:pk/',
     icon: 'exclamation'
+  },
+  tag: {
+    label: () => t`Tag`,
+    label_multiple: () => t`Tags`,
+    api_endpoint: ApiEndpoints.tag_list,
+    icon: 'tag'
   }
 };

package/lib/enums/ModelType.tsx

@@ -24,6 +24,8 @@ export enum ModelType {
   salesordershipment = 'salesordershipment',
   returnorder = 'returnorder',
   returnorderlineitem = 'returnorderlineitem',
+  transferorder = 'transferorder',
+  transferorderlineitem = 'transferorderlineitem',
   importsession = 'importsession',
   address = 'address',
   contact = 'contact',
@@ -36,7 +38,8 @@ export enum ModelType {
   contenttype = 'contenttype',
   selectionlist = 'selectionlist',
   selectionentry = 'selectionentry',
-  error = 'error'
+  error = 'error',
+  tag = 'tag'
 }
 
 export enum PluginPanelKey {

package/lib/enums/Roles.tsx

@@ -11,6 +11,7 @@ export enum UserRoles {
   part_category = 'part_category',
   purchase_order = 'purchase_order',
   return_order = 'return_order',
+  transfer_order = 'transfer_order',
   sales_order = 'sales_order',
   stock = 'stock',
   stock_location = 'stock_location'
@@ -40,6 +41,8 @@ export function userRoleLabel(role: UserRoles): string {
       return t`Purchase Orders`;
     case UserRoles.return_order:
       return t`Return Orders`;
+    case UserRoles.transfer_order:
+      return t`Transfer Orders`;
     case UserRoles.sales_order:
       return t`Sales Orders`;
     case UserRoles.stock:

package/lib/functions/Navigation.tsx

@@ -55,7 +55,7 @@ export function getDetailUrl(
     }
   }
 
-  console.error(`No detail URL found for model ${model} <${pk}>`);
+  console.warn(`No detail URL found for model ${model} <${pk}>`);
   return '';
 }
 

package/lib/hooks/UseFilterSet.tsx

@@ -1,6 +1,10 @@
 import { useLocalStorage } from '@mantine/hooks';
 import { useCallback, useEffect, useMemo } from 'react';
-import type { FilterSetState, TableFilter } from '../types/Filters';
+import type {
+  FilterSetState,
+  NamedFilterSet,
+  TableFilter
+} from '../types/Filters';
 
 export default function useFilterSet(
   filterKey: string,
@@ -16,6 +20,16 @@ export default function useFilterSet(
     getInitialValueInEffect: false
   });
 
+  // Named filter set snapshots (saved to local storage, separate key)
+  const [storedNamedSets, setStoredNamedSets] = useLocalStorage<
+    NamedFilterSet[]
+  >({
+    key: `inventree-filtersets-${filterKey}`,
+    defaultValue: [],
+    sync: false,
+    getInitialValueInEffect: false
+  });
+
   useEffect(() => {
     if (storedFilters == null) {
       setStoredFilters(initialFilters || []);
@@ -26,7 +40,6 @@ export default function useFilterSet(
     return storedFilters ?? initialFilters ?? [];
   }, [storedFilters, initialFilters]);
 
-  // Callback to clear all active filters from the table
   const clearActiveFilters = useCallback(() => {
     setStoredFilters([]);
   }, []);
@@ -38,10 +51,48 @@ export default function useFilterSet(
     [setStoredFilters]
   );
 
+  const saveFilterSet = useCallback(
+    (name: string) => {
+      const snapshot = activeFilters.map(
+        ({ name: n, value, displayValue }) => ({
+          name: n,
+          value,
+          displayValue
+        })
+      );
+      setStoredNamedSets((prev) => {
+        const without = (prev ?? []).filter((s) => s.name !== name);
+        return [...without, { name, filters: snapshot }];
+      });
+    },
+    [activeFilters, setStoredNamedSets]
+  );
+
+  const loadFilterSet = useCallback(
+    (name: string) => {
+      const saved = (storedNamedSets ?? []).find((s) => s.name === name);
+      if (saved) {
+        setStoredFilters(saved.filters as TableFilter[]);
+      }
+    },
+    [storedNamedSets, setStoredFilters]
+  );
+
+  const deleteFilterSet = useCallback(
+    (name: string) => {
+      setStoredNamedSets((prev) => (prev ?? []).filter((s) => s.name !== name));
+    },
+    [setStoredNamedSets]
+  );
+
   return {
     filterKey,
     activeFilters,
     setActiveFilters,
-    clearActiveFilters
+    clearActiveFilters,
+    savedFilterSets: storedNamedSets ?? [],
+    saveFilterSet,
+    loadFilterSet,
+    deleteFilterSet
   };
 }

package/lib/index.ts

@@ -110,6 +110,7 @@ export { ProgressBar } from './components/ProgressBar';
 export { PassFailButton, YesNoButton } from './components/YesNoButton';
 export { SearchInput } from './components/SearchInput';
 export { TableColumnSelect } from './components/TableColumnSelect';
+export { default as TagsList } from './components/TagsList';
 export { default as InvenTreeTable } from './components/InvenTreeTable';
 export {
   RowViewAction,
@@ -152,3 +153,7 @@ export {
   useStoredTableState
 } from './states/StoredTableState';
 export { useLocalLibState } from './states/LocalLibState';
+
+// Plugin development utilities and hooks
+export { default as InventreeHmrPlugin } from './plugin/InventreeHmrPlugin';
+export { default as LocalizedComponent } from './plugin/LocalizedComponent';

package/lib/plugin/InventreeHmrPlugin.tsx

@@ -0,0 +1,40 @@
+import type { Plugin } from 'vite';
+
+/**
+ * Vite plugin which enables hot module replacement (HMR) for InvenTree plugin development.
+ *
+ * This is for use with the InvenTree plugin creator tool,
+ * allowing frontend plugin code to be "live reloaded" during development.
+ */
+export default function InventreeHmrPlugin(): Plugin {
+  const fileRegex = /\.(js|jsx|ts|tsx)(\?|$)/;
+
+  const hmrBlock = [
+    '',
+    '// __inventree_hmr_injected__',
+    'if (import.meta.hot) {',
+    '  import.meta.hot.accept((newModule) => {',
+    '    const key = new URL(import.meta.url).origin + new URL(import.meta.url).pathname;',
+    '    window.__plugin_hmr_callbacks?.[key]?.forEach(callback => {',
+    '      callback(newModule);',
+    '    });',
+    '  })',
+    '}'
+  ];
+
+  return {
+    name: 'inventree-hmr-plugin',
+    enforce: 'post',
+
+    transform(code, id) {
+      if (!fileRegex.test(id)) return;
+      if (id.includes('node_modules')) return;
+      if (code.includes('__inventree_hmr_injected__')) return;
+
+      return {
+        code: code + hmrBlock.join('\n'),
+        map: null
+      };
+    }
+  };
+}

package/lib/plugin/LocalizedComponent.tsx

@@ -0,0 +1,85 @@
+import { i18n } from '@lingui/core';
+import { I18nProvider } from '@lingui/react';
+import { Skeleton } from '@mantine/core';
+import { useEffect, useState } from 'react';
+
+/**
+ * Attempt to load the locale file for the given locale, returning null if it fails
+ */
+async function tryLoadLocale(locale: string): Promise<any> {
+  try {
+    const messages = await import(`./locales/${locale}/messages.ts`);
+    return messages;
+  } catch (error) {
+    console.warn(`Failed to load locale ${locale}`);
+    return null;
+  }
+}
+
+/**
+ * Helper function to dynamically load frontend translations,
+ * based on the provided locale.
+ */
+async function loadPluginLocale(locale: string) {
+  let messages = null;
+
+  // Find the most specific locale file possible, with fallbacks to less specific locales if necessary
+  messages = await tryLoadLocale(locale);
+
+  if (!messages && locale.includes('-')) {
+    const fallbackLocale = locale.split('-')[0];
+    console.debug(
+      `Locale ${locale} not found, trying fallback locale ${fallbackLocale}`
+    );
+    messages = await tryLoadLocale(fallbackLocale);
+  }
+
+  if (!messages && locale.includes('_')) {
+    const fallbackLocale = locale.split('_')[0];
+    console.debug(
+      `Locale ${locale} not found, trying fallback locale ${fallbackLocale}`
+    );
+    messages = await tryLoadLocale(fallbackLocale);
+  }
+
+  if (!messages && locale !== 'en') {
+    console.debug(`Locale ${locale} not found, trying fallback locale en`);
+    messages = await tryLoadLocale('en');
+  }
+
+  if (messages?.messages) {
+    i18n.load(locale, messages.messages);
+    i18n.activate(locale);
+  } else {
+    console.error(`Failed to load any locale for ${locale}`);
+  }
+}
+
+/**
+ * Wrapper function for a plugin-defined component which needs to support dynamic locale loading.
+ *
+ * This is primarily designed for usage by the InvenTree plugin creator tool
+ */
+export default function LocalizedComponent({
+  locale,
+  children
+}: {
+  locale: string;
+  children: React.ReactNode;
+}) {
+  const [loaded, setLoaded] = useState(false);
+
+  // Reload the component when the locale changes
+  useEffect(() => {
+    setLoaded(false);
+    loadPluginLocale(locale).then(() => {
+      setLoaded(true);
+    });
+  }, [locale]);
+
+  return loaded ? (
+    <I18nProvider i18n={i18n}>{children}</I18nProvider>
+  ) : (
+    <Skeleton w='100%' animate />
+  );
+}

package/lib/types/Filters.tsx

@@ -41,6 +41,7 @@ export type TableFilter = {
   name: string;
   label?: string;
   description?: string;
+  placeholder?: string;
   type?: TableFilterType;
   choices?: TableFilterChoice[];
   choiceFunction?: () => TableFilterChoice[];
@@ -52,6 +53,16 @@ export type TableFilter = {
   apiFilter?: Record<string, any>;
   model?: ModelType;
   modelRenderer?: (instance: any) => string;
+  transform?: (item: any) => TableFilterChoice;
+  multi?: boolean;
+};
+
+/*
+ * A named snapshot of a set of active filters, saved to local storage.
+ */
+export type NamedFilterSet = {
+  name: string;
+  filters: Pick<TableFilter, 'name' | 'value' | 'displayValue'>[];
 };
 
 /*
@@ -62,10 +73,18 @@ export type TableFilter = {
  * activeFilters: An array of active filters
  * setActiveFilters: A function to set the active filters
  * clearActiveFilters: A function to clear all active filters
+ * savedFilterSets: Named filter set snapshots persisted to local storage
+ * saveFilterSet: Save the current active filters under a given name
+ * loadFilterSet: Replace active filters with a previously saved named set
+ * deleteFilterSet: Remove a saved named filter set by name
  */
 export type FilterSetState = {
   filterKey: string;
   activeFilters: TableFilter[];
   setActiveFilters: (filters: TableFilter[]) => void;
   clearActiveFilters: () => void;
+  savedFilterSets: NamedFilterSet[];
+  saveFilterSet: (name: string) => void;
+  loadFilterSet: (name: string) => void;
+  deleteFilterSet: (name: string) => void;
 };

package/lib/types/Forms.tsx

@@ -2,6 +2,7 @@ import type { DefaultMantineColor, MantineStyleProp } from '@mantine/core';
 import type { UseFormReturnType } from '@mantine/form';
 import type { JSX, ReactNode } from 'react';
 import type { FieldValues, UseFormReturn } from 'react-hook-form';
+import type { NavigateFunction } from 'react-router-dom';
 import type { ApiEndpoints } from '../enums/ApiEndpoints';
 import type { ModelType } from '../enums/ModelType';
 import type { PathParams, UiSizeType } from './Core';
@@ -98,7 +99,8 @@ export type ApiFormFieldType = {
     | 'file upload'
     | 'nested object'
     | 'dependent field'
-    | 'table';
+    | 'table'
+    | 'tags';
   api_url?: string;
   pk_field?: string;
   model?: ModelType;
@@ -160,6 +162,7 @@ export type ApiFormFieldSet = Record<string, ApiFormFieldType>;
  * @param modelType : Define a model type for this form
  * @param follow : Boolean, follow the result of the form (if possible)
  * @param table : Table to update on success (if provided)
+ * @param navigate : Optional navigate function to use for following results (if follow is true)
  */
 export interface ApiFormProps {
   url: ApiEndpoints | string;
@@ -189,6 +192,7 @@ export interface ApiFormProps {
   follow?: boolean;
   actions?: ApiFormAction[];
   timeout?: number;
+  navigate?: NavigateFunction;
   keepOpenOption?: boolean;
   onKeepOpenChange?: (keepOpen: boolean) => void;
 }

package/lib/types/Rendering.tsx

@@ -15,6 +15,7 @@ export interface InstanceRenderInterface {
   link?: boolean;
   navigate?: any;
   showSecondary?: boolean;
+  showHover?: boolean;
   extra?: Record<string, any>;
 }
 

package/lib/types/Tables.tsx

@@ -84,7 +84,7 @@ export type TableState = {
  * @param editable - Whether the value of this column can be edited
  * @param definition - Optional field definition for the column
  * @param render - A custom render function
- * @param filter - A custom filter function
+ * @param filter - Filter name (string) to look up from tableFilters and attach an inline icon, or a custom render function for the filter popover
  * @param filtering - Whether the column is filterable
  * @param width - The width of the column
  * @param minWidth - The minimum width of the column
@@ -109,7 +109,10 @@ export type TableColumnProps<T = any> = {
   editable?: boolean;
   definition?: ApiFormFieldType;
   render?: (record: T, index?: number) => any;
-  filter?: any;
+  filter?:
+    | string
+    | string[]
+    | (({ close }: { close: () => void }) => ReactNode);
   filtering?: boolean;
   width?: number;
   minWidth?: string | number;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inventreedb/ui",
     "description": "UI components for the InvenTree project",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "private": false,
     "type": "module",
     "license": "MIT",
@@ -115,7 +115,7 @@
         "@lingui/babel-plugin-lingui-macro": "^5.9.2",
         "@lingui/cli": "^5.9.2",
         "@lingui/macro": "^5.9.2",
-        "@playwright/test": "^1.58.2",
+        "@playwright/test": "^1.16.0",
         "@types/node": "^25.5.0",
         "@types/qrcode": "^1.5.5",
         "@types/react": "^19.2.14",