@inventreedb/ui 0.0.1

package/src/router.tsx

@@ -0,0 +1,213 @@
+import { lazy } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+import { Loadable } from './functions/loading';
+
+// Lazy loaded pages
+export const LayoutComponent = Loadable(
+  lazy(() => import('./components/nav/Layout'))
+);
+export const LoginLayoutComponent = Loadable(
+  lazy(() => import('./pages/Auth/Layout'))
+);
+
+export const Home = Loadable(lazy(() => import('./pages/Index/Home')));
+
+export const CompanyDetail = Loadable(
+  lazy(() => import('./pages/company/CompanyDetail'))
+);
+
+export const CustomerDetail = Loadable(
+  lazy(() => import('./pages/company/CustomerDetail'))
+);
+
+export const SupplierDetail = Loadable(
+  lazy(() => import('./pages/company/SupplierDetail'))
+);
+
+export const ManufacturerDetail = Loadable(
+  lazy(() => import('./pages/company/ManufacturerDetail'))
+);
+
+export const SupplierPartDetail = Loadable(
+  lazy(() => import('./pages/company/SupplierPartDetail'))
+);
+
+export const ManufacturerPartDetail = Loadable(
+  lazy(() => import('./pages/company/ManufacturerPartDetail'))
+);
+
+export const CategoryDetail = Loadable(
+  lazy(() => import('./pages/part/CategoryDetail'))
+);
+export const PartDetail = Loadable(
+  lazy(() => import('./pages/part/PartDetail'))
+);
+
+export const LocationDetail = Loadable(
+  lazy(() => import('./pages/stock/LocationDetail'))
+);
+
+export const StockDetail = Loadable(
+  lazy(() => import('./pages/stock/StockDetail'))
+);
+
+export const BuildIndex = Loadable(
+  lazy(() => import('./pages/build/BuildIndex'))
+);
+
+export const BuildDetail = Loadable(
+  lazy(() => import('./pages/build/BuildDetail'))
+);
+
+export const PurchasingIndex = Loadable(
+  lazy(() => import('./pages/purchasing/PurchasingIndex'))
+);
+
+export const PurchaseOrderDetail = Loadable(
+  lazy(() => import('./pages/purchasing/PurchaseOrderDetail'))
+);
+
+export const SalesIndex = Loadable(
+  lazy(() => import('./pages/sales/SalesIndex'))
+);
+
+export const SalesOrderDetail = Loadable(
+  lazy(() => import('./pages/sales/SalesOrderDetail'))
+);
+
+export const SalesOrderShipmentDetail = Loadable(
+  lazy(() => import('./pages/sales/SalesOrderShipmentDetail'))
+);
+
+export const ReturnOrderDetail = Loadable(
+  lazy(() => import('./pages/sales/ReturnOrderDetail'))
+);
+
+export const Scan = Loadable(lazy(() => import('./pages/Index/Scan')));
+
+export const ErrorPage = Loadable(lazy(() => import('./pages/ErrorPage')));
+
+export const Notifications = Loadable(
+  lazy(() => import('./pages/Notifications'))
+);
+
+export const UserSettings = Loadable(
+  lazy(() => import('./pages/Index/Settings/UserSettings'))
+);
+
+export const SystemSettings = Loadable(
+  lazy(() => import('./pages/Index/Settings/SystemSettings'))
+);
+
+export const AdminCenter = Loadable(
+  lazy(() => import('./pages/Index/Settings/AdminCenter/Index'))
+);
+
+// Core object
+export const CoreIndex = Loadable(lazy(() => import('./pages/core/CoreIndex')));
+export const UserDetail = Loadable(
+  lazy(() => import('./pages/core/UserDetail'))
+);
+export const GroupDetail = Loadable(
+  lazy(() => import('./pages/core/GroupDetail'))
+);
+
+export const NotFound = Loadable(
+  lazy(() => import('./components/errors/NotFound'))
+);
+
+// Auth
+export const Login = Loadable(lazy(() => import('./pages/Auth/Login')));
+export const LoggedIn = Loadable(lazy(() => import('./pages/Auth/LoggedIn')));
+export const Logout = Loadable(lazy(() => import('./pages/Auth/Logout')));
+export const Register = Loadable(lazy(() => import('./pages/Auth/Register')));
+export const Mfa = Loadable(lazy(() => import('./pages/Auth/MFA')));
+export const MfaSetup = Loadable(lazy(() => import('./pages/Auth/MFASetup')));
+export const ChangePassword = Loadable(
+  lazy(() => import('./pages/Auth/ChangePassword'))
+);
+export const Reset = Loadable(lazy(() => import('./pages/Auth/Reset')));
+export const ResetPassword = Loadable(
+  lazy(() => import('./pages/Auth/ResetPassword'))
+);
+export const VerifyEmail = Loadable(
+  lazy(() => import('./pages/Auth/VerifyEmail'))
+);
+
+// Routes
+export const routes = (
+  <Routes>
+    <Route path='*' element={<NotFound />} errorElement={<ErrorPage />} />
+    <Route path='/' element={<LayoutComponent />} errorElement={<ErrorPage />}>
+      <Route index element={<Home />} />,
+      <Route path='home/' element={<Home />} />,
+      <Route path='notifications/*' element={<Notifications />} />,
+      <Route path='scan/' element={<Scan />} />,
+      <Route path='settings/'>
+        <Route index element={<Navigate to='admin/' />} />
+        <Route path='admin/*' element={<AdminCenter />} />
+        <Route path='system/*' element={<SystemSettings />} />
+        <Route path='user/*' element={<UserSettings />} />
+      </Route>
+      <Route path='part/'>
+        <Route index element={<Navigate to='category/index/' />} />
+        <Route path='category/:id?/*' element={<CategoryDetail />} />
+        <Route path=':id/*' element={<PartDetail />} />
+      </Route>
+      <Route path='stock/'>
+        <Route index element={<Navigate to='location/index/' />} />
+        <Route path='location/:id?/*' element={<LocationDetail />} />
+        <Route path='item/:id/*' element={<StockDetail />} />
+      </Route>
+      <Route path='manufacturing/'>
+        <Route index element={<Navigate to='index/' />} />
+        <Route path='index/*' element={<BuildIndex />} />
+        <Route path='build-order/:id/*' element={<BuildDetail />} />
+      </Route>
+      <Route path='purchasing/'>
+        <Route index element={<Navigate to='index/' />} />
+        <Route path='index/*' element={<PurchasingIndex />} />
+        <Route path='purchase-order/:id/*' element={<PurchaseOrderDetail />} />
+        <Route path='supplier/:id/*' element={<SupplierDetail />} />
+        <Route path='supplier-part/:id/*' element={<SupplierPartDetail />} />
+        <Route path='manufacturer/:id/*' element={<ManufacturerDetail />} />
+        <Route
+          path='manufacturer-part/:id/*'
+          element={<ManufacturerPartDetail />}
+        />
+      </Route>
+      <Route path='company/:id/*' element={<CompanyDetail />} />
+      <Route path='sales/'>
+        <Route index element={<Navigate to='index/' />} />
+        <Route path='index/*' element={<SalesIndex />} />
+        <Route path='sales-order/:id/*' element={<SalesOrderDetail />} />
+        <Route path='shipment/:id/*' element={<SalesOrderShipmentDetail />} />
+        <Route path='return-order/:id/*' element={<ReturnOrderDetail />} />
+        <Route path='customer/:id/*' element={<CustomerDetail />} />
+      </Route>
+      <Route path='core/'>
+        <Route index element={<Navigate to='index/' />} />
+        <Route path='index/*' element={<CoreIndex />} />
+        <Route path='user/:id/*' element={<UserDetail />} />
+        <Route path='group/:id/*' element={<GroupDetail />} />
+      </Route>
+    </Route>
+    <Route
+      path='/'
+      element={<LoginLayoutComponent />}
+      errorElement={<ErrorPage />}
+    >
+      <Route path='/login' element={<Login />} />,
+      <Route path='/logged-in' element={<LoggedIn />} />
+      <Route path='/logout' element={<Logout />} />,
+      <Route path='/register' element={<Register />} />,
+      <Route path='/mfa' element={<Mfa />} />,
+      <Route path='/mfa-setup' element={<MfaSetup />} />,
+      <Route path='/change-password' element={<ChangePassword />} />
+      <Route path='/reset-password' element={<Reset />} />
+      <Route path='/set-password' element={<ResetPassword />} />
+      <Route path='/verify-email/:key' element={<VerifyEmail />} />
+    </Route>
+  </Routes>
+);

package/src/states/ApiState.tsx

@@ -0,0 +1,85 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import type { AuthConfig, AuthContext } from '@lib/types/Auth';
+import { api } from '../App';
+import { emptyServerAPI } from '../defaults/defaults';
+import type { ServerAPIProps } from './states';
+
+interface ServerApiStateProps {
+  server: ServerAPIProps;
+  setServer: (newServer: ServerAPIProps) => void;
+  fetchServerApiState: () => void;
+  auth_config?: AuthConfig;
+  auth_context?: AuthContext;
+  setAuthContext: (auth_context: AuthContext) => void;
+  sso_enabled: () => boolean;
+  registration_enabled: () => boolean;
+  sso_registration_enabled: () => boolean;
+  password_forgotten_enabled: () => boolean;
+}
+
+function get_server_setting(val: any) {
+  if (val === null || val === undefined) {
+    return false;
+  }
+  return val;
+}
+
+export const useServerApiState = create<ServerApiStateProps>()(
+  persist(
+    (set, get) => ({
+      server: emptyServerAPI,
+      setServer: (newServer: ServerAPIProps) => set({ server: newServer }),
+      fetchServerApiState: async () => {
+        // Fetch server data
+        await api
+          .get(apiUrl(ApiEndpoints.api_server_info))
+          .then((response) => {
+            set({ server: response.data });
+          })
+          .catch(() => {
+            console.error('ERR: Error fetching server info');
+          });
+
+        // Fetch login/SSO behaviour
+        await api
+          .get(apiUrl(ApiEndpoints.auth_config), {
+            headers: { Authorization: '' }
+          })
+          .then((response) => {
+            set({ auth_config: response.data.data });
+          })
+          .catch(() => {
+            console.error('ERR: Error fetching SSO information');
+          });
+      },
+      auth_config: undefined,
+      auth_context: undefined,
+      setAuthContext(auth_context) {
+        set({ auth_context });
+      },
+      sso_enabled: () => {
+        const data = get().auth_config?.socialaccount.providers;
+        return !(data === undefined || data.length == 0);
+      },
+      registration_enabled: () => {
+        return get_server_setting(get().server?.settings?.registration_enabled);
+      },
+      sso_registration_enabled: () => {
+        return get_server_setting(get().server?.settings?.sso_registration);
+      },
+      password_forgotten_enabled: () => {
+        return get_server_setting(
+          get().server?.settings?.password_forgotten_enabled
+        );
+      }
+    }),
+    {
+      name: 'server-api-state',
+      storage: createJSONStorage(() => sessionStorage)
+    }
+  )
+);

package/src/states/IconState.tsx

@@ -0,0 +1,94 @@
+import { create } from 'zustand';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { t } from '@lingui/core/macro';
+import { hideNotification, showNotification } from '@mantine/notifications';
+import { api } from '../App';
+import { generateUrl } from '../functions/urls';
+
+type IconPackage = {
+  name: string;
+  prefix: string;
+  fonts: Record<string, string>;
+  icons: Record<
+    string,
+    {
+      name: string;
+      category: string;
+      tags: string[];
+      variants: Record<string, string>;
+    }
+  >;
+};
+
+type IconState = {
+  hasLoaded: boolean;
+  packages: IconPackage[];
+  packagesMap: Record<string, IconPackage>;
+  fetchIcons: () => Promise<void>;
+};
+
+export const useIconState = create<IconState>()((set, get) => ({
+  hasLoaded: false,
+  packages: [],
+  packagesMap: {},
+  fetchIcons: async () => {
+    if (get().hasLoaded) return;
+
+    const packs = await api.get(apiUrl(ApiEndpoints.icons)).catch((_error) => {
+      console.error('ERR: Could not fetch icon packages');
+
+      hideNotification('icon-fetch-error');
+
+      showNotification({
+        id: 'icon-fetch-error',
+        title: t`Error`,
+        message: t`Error loading icon package from server`,
+        color: 'red'
+      });
+    });
+
+    if (!packs) {
+      return;
+    }
+
+    await Promise.all(
+      packs.data.map(async (pack: any) => {
+        if (pack.prefix && pack.fonts) {
+          const fontName = `inventree-icon-font-${pack.prefix}`;
+          const src = Object.entries(pack.fonts as Record<string, string>)
+            .map(
+              ([format, url]) => `url(${generateUrl(url)}) format("${format}")`
+            )
+            .join(',\n');
+          const font = new FontFace(fontName, `${src};`);
+          await font.load();
+          document.fonts.add(font);
+          return font;
+        } else {
+          console.error(
+            "ERR: Icon package is missing 'prefix' or 'fonts' field"
+          );
+          hideNotification('icon-fetch-error');
+          showNotification({
+            id: 'icon-fetch-error',
+            title: t`Error`,
+            message: t`Error loading icon package from server`,
+            color: 'red'
+          });
+
+          return null;
+        }
+      })
+    );
+
+    set({
+      hasLoaded: true,
+      packages: packs.data,
+      packagesMap: Object.fromEntries(
+        packs.data?.map((pack: any) => [pack.prefix, pack])
+      )
+    });
+  }
+}));

package/src/states/LocalState.tsx

@@ -0,0 +1,181 @@
+import type { DataTableSortStatus } from 'mantine-datatable';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import type { UserTheme } from '@lib/types/Core';
+import type { HostList } from '@lib/types/Server';
+import { api } from '../App';
+import { useUserState } from './UserState';
+
+interface LocalStateProps {
+  autoupdate: boolean;
+  toggleAutoupdate: () => void;
+  host: string;
+  getHost: () => string;
+  setHost: (newHost: string, newHostKey: string) => void;
+  hostKey: string;
+  hostList: HostList;
+  setHostList: (newHostList: HostList) => void;
+  language: string;
+  setLanguage: (newLanguage: string, noPatch?: boolean) => void;
+  userTheme: UserTheme;
+  setTheme: (
+    newValues: {
+      key: keyof UserTheme;
+      value: string;
+    }[],
+    noPatch?: boolean
+  ) => void;
+  // panels
+  lastUsedPanels: Record<string, string>;
+  setLastUsedPanel: (panelKey: string) => (value: string) => void;
+  tableColumnNames: Record<string, Record<string, string>>;
+  getTableColumnNames: (tableKey: string) => Record<string, string>;
+  setTableColumnNames: (
+    tableKey: string
+  ) => (names: Record<string, string>) => void;
+  tableSorting: Record<string, any>;
+  getTableSorting: (tableKey: string) => DataTableSortStatus;
+  setTableSorting: (
+    tableKey: string
+  ) => (sorting: DataTableSortStatus<any>) => void;
+  clearTableColumnNames: () => void;
+  detailDrawerStack: number;
+  addDetailDrawer: (value: number | false) => void;
+  navigationOpen: boolean;
+  setNavigationOpen: (value: boolean) => void;
+  allowMobile: boolean;
+  setAllowMobile: (value: boolean) => void;
+}
+
+export const useLocalState = create<LocalStateProps>()(
+  persist(
+    (set, get) => ({
+      autoupdate: false,
+      toggleAutoupdate: () =>
+        set((state) => ({ autoupdate: !state.autoupdate })),
+      host: '',
+      getHost: () => {
+        // Retrieve and validate the API host
+        const state = get();
+
+        let host = state.host;
+
+        // If the server provides an override for the host, use that
+        if (window.INVENTREE_SETTINGS?.api_host) {
+          host = window.INVENTREE_SETTINGS.api_host;
+        }
+
+        // If no host is provided, use the first host in the list
+        if (!host && Object.keys(state.hostList).length) {
+          host = Object.values(state.hostList)[0].host;
+        }
+
+        // If no host is provided, fallback to using the current URL (default)
+        if (!host) {
+          host = window.location.origin;
+        }
+        return host;
+      },
+      setHost: (newHost, newHostKey) =>
+        set({ host: newHost, hostKey: newHostKey }),
+      hostKey: '',
+      hostList: {},
+      setHostList: (newHostList) => set({ hostList: newHostList }),
+      language: 'en',
+      setLanguage: (newLanguage, noPatch = false) => {
+        set({ language: newLanguage });
+        if (!noPatch) patchUser('language', newLanguage);
+      },
+      userTheme: {
+        primaryColor: 'indigo',
+        whiteColor: '#fff',
+        blackColor: '#000',
+        radius: 'xs',
+        loader: 'oval'
+      },
+      setTheme: (newValues, noPatch = false) => {
+        const newTheme = { ...get().userTheme };
+        newValues.forEach((val) => {
+          newTheme[val.key] = val.value;
+        });
+        set({ userTheme: newTheme });
+        if (!noPatch) patchUser('theme', newTheme);
+      },
+      // panels
+      lastUsedPanels: {},
+      setLastUsedPanel: (panelKey) => (value) => {
+        const currentValue = get().lastUsedPanels[panelKey];
+        if (currentValue !== value) {
+          set({
+            lastUsedPanels: { ...get().lastUsedPanels, [panelKey]: value }
+          });
+        }
+      },
+      // tables
+      tableColumnNames: {},
+      getTableColumnNames: (tableKey) => {
+        return get().tableColumnNames[tableKey] || null;
+      },
+      setTableColumnNames: (tableKey) => (names) => {
+        // Update the table column names for the given table
+        set({
+          tableColumnNames: {
+            ...get().tableColumnNames,
+            [tableKey]: names
+          }
+        });
+      },
+      clearTableColumnNames: () => {
+        set({ tableColumnNames: {} });
+      },
+      tableSorting: {},
+      getTableSorting: (tableKey) => {
+        return get().tableSorting[tableKey] || {};
+      },
+      setTableSorting: (tableKey) => (sorting) => {
+        // Update the table sorting for the given table
+        set({
+          tableSorting: {
+            ...get().tableSorting,
+            [tableKey]: sorting
+          }
+        });
+      },
+      // detail drawers
+      detailDrawerStack: 0,
+      addDetailDrawer: (value) => {
+        set({
+          detailDrawerStack:
+            value === false ? 0 : get().detailDrawerStack + value
+        });
+      },
+      // navigation
+      navigationOpen: false,
+      setNavigationOpen: (value) => {
+        set({ navigationOpen: value });
+      },
+      allowMobile: false,
+      setAllowMobile: (value) => {
+        set({ allowMobile: value });
+      }
+    }),
+    {
+      name: 'session-settings'
+    }
+  )
+);
+
+/*
+pushes changes in user profile to backend
+*/
+function patchUser(key: 'language' | 'theme', val: any) {
+  const uid = useUserState.getState().userId();
+  if (uid) {
+    api.patch(apiUrl(ApiEndpoints.user_profile), { [key]: val });
+  } else {
+    console.log('user not logged in, not patching');
+  }
+}