@inventreedb/ui 0.0.1

package/src/pages/Index/Settings/SystemSettings.tsx

@@ -0,0 +1,339 @@
+import { t } from '@lingui/core/macro';
+import { Alert, Skeleton, Stack, Text } from '@mantine/core';
+import {
+  IconBellCog,
+  IconCategory,
+  IconCurrencyDollar,
+  IconFileAnalytics,
+  IconFingerprint,
+  IconInfoCircle,
+  IconPackages,
+  IconQrcode,
+  IconServerCog,
+  IconShoppingCart,
+  IconTag,
+  IconTools,
+  IconTruckDelivery,
+  IconTruckReturn
+} from '@tabler/icons-react';
+import { useMemo } from 'react';
+
+import PermissionDenied from '../../../components/errors/PermissionDenied';
+import PageTitle from '../../../components/nav/PageTitle';
+import { SettingsHeader } from '../../../components/nav/SettingsHeader';
+import type { PanelType } from '../../../components/panels/Panel';
+import { PanelGroup } from '../../../components/panels/PanelGroup';
+import { GlobalSettingList } from '../../../components/settings/SettingList';
+import { useServerApiState } from '../../../states/ApiState';
+import { useUserState } from '../../../states/UserState';
+
+/**
+ * System settings page
+ */
+export default function SystemSettings() {
+  const systemSettingsPanels: PanelType[] = useMemo(() => {
+    return [
+      {
+        name: 'server',
+        label: t`Server`,
+        icon: <IconServerCog />,
+        content: (
+          <GlobalSettingList
+            keys={[
+              'INVENTREE_BASE_URL',
+              'INVENTREE_COMPANY_NAME',
+              'INVENTREE_INSTANCE_ID',
+              'INVENTREE_ANNOUNCE_ID',
+              'INVENTREE_INSTANCE',
+              'INVENTREE_INSTANCE_TITLE',
+              'INVENTREE_RESTRICT_ABOUT',
+              'DISPLAY_FULL_NAMES',
+              'DISPLAY_PROFILE_INFO',
+              'INVENTREE_UPDATE_CHECK_INTERVAL',
+              'INVENTREE_DOWNLOAD_FROM_URL',
+              'INVENTREE_DOWNLOAD_IMAGE_MAX_SIZE',
+              'INVENTREE_DOWNLOAD_FROM_URL_USER_AGENT',
+              'INVENTREE_STRICT_URLS',
+              'INVENTREE_BACKUP_ENABLE',
+              'INVENTREE_BACKUP_DAYS',
+              'INVENTREE_DELETE_TASKS_DAYS',
+              'INVENTREE_DELETE_ERRORS_DAYS',
+              'INVENTREE_DELETE_NOTIFICATIONS_DAYS'
+            ]}
+          />
+        )
+      },
+      {
+        name: 'authentication',
+        label: t`Authentication`,
+        icon: <IconFingerprint />,
+        content: (
+          <GlobalSettingList
+            keys={[
+              'LOGIN_ENABLE_PWD_FORGOT',
+              'LOGIN_MAIL_REQUIRED',
+              'LOGIN_ENFORCE_MFA',
+              'LOGIN_ENABLE_REG',
+              'LOGIN_SIGNUP_MAIL_TWICE',
+              'LOGIN_SIGNUP_PWD_TWICE',
+              'SIGNUP_GROUP',
+              'LOGIN_SIGNUP_MAIL_RESTRICTION',
+              'LOGIN_ENABLE_SSO',
+              'LOGIN_ENABLE_SSO_REG',
+              'LOGIN_SIGNUP_SSO_AUTO',
+              'LOGIN_ENABLE_SSO_GROUP_SYNC',
+              'SSO_GROUP_MAP',
+              'SSO_GROUP_KEY',
+              'SSO_REMOVE_GROUPS'
+            ]}
+          />
+        )
+      },
+      {
+        name: 'barcode',
+        label: t`Barcodes`,
+        icon: <IconQrcode />,
+        content: (
+          <GlobalSettingList
+            keys={[
+              'BARCODE_ENABLE',
+              'BARCODE_INPUT_DELAY',
+              'BARCODE_WEBCAM_SUPPORT',
+              'BARCODE_SHOW_TEXT',
+              'BARCODE_GENERATION_PLUGIN',
+              'BARCODE_STORE_RESULTS',
+              'BARCODE_RESULTS_MAX_NUM'
+            ]}
+          />
+        )
+      },
+      {
+        name: 'notifications',
+        label: t`Notifications`,
+        icon: <IconBellCog />,
+        content: (
+          <Stack>
+            <Alert
+              color='teal'
+              title={t`This panel is a placeholder.`}
+              icon={<IconInfoCircle />}
+            >
+              <Text c='gray'>This panel has not yet been implemented</Text>
+            </Alert>
+          </Stack>
+        )
+      },
+      {
+        name: 'pricing',
+        label: t`Pricing`,
+        icon: <IconCurrencyDollar />,
+        content: (
+          <>
+            <GlobalSettingList
+              keys={[
+                'INVENTREE_DEFAULT_CURRENCY',
+                'CURRENCY_CODES',
+                'PART_INTERNAL_PRICE',
+                'PART_BOM_USE_INTERNAL_PRICE',
+                'PRICING_DECIMAL_PLACES_MIN',
+                'PRICING_DECIMAL_PLACES',
+                'PRICING_UPDATE_DAYS'
+              ]}
+            />
+            <br />
+            <GlobalSettingList
+              keys={[
+                'PRICING_USE_SUPPLIER_PRICING',
+                'PRICING_PURCHASE_HISTORY_OVERRIDES_SUPPLIER',
+                'PRICING_USE_STOCK_PRICING',
+                'PRICING_STOCK_ITEM_AGE_DAYS',
+                'PRICING_USE_VARIANT_PRICING',
+                'PRICING_ACTIVE_VARIANTS'
+              ]}
+            />
+            <br />
+            <GlobalSettingList
+              keys={['CURRENCY_UPDATE_PLUGIN', 'CURRENCY_UPDATE_INTERVAL']}
+            />
+          </>
+        )
+      },
+      {
+        name: 'labels',
+        label: t`Labels`,
+        icon: <IconTag />,
+        content: <GlobalSettingList keys={['LABEL_ENABLE', 'LABEL_DPI']} />
+      },
+      {
+        name: 'reporting',
+        label: t`Reporting`,
+        icon: <IconFileAnalytics />,
+        content: (
+          <GlobalSettingList
+            keys={[
+              'REPORT_ENABLE',
+              'REPORT_DEFAULT_PAGE_SIZE',
+              'REPORT_DEBUG_MODE',
+              'REPORT_LOG_ERRORS'
+            ]}
+          />
+        )
+      },
+      {
+        name: 'parts',
+        label: t`Parts`,
+        icon: <IconCategory />,
+        content: (
+          <GlobalSettingList
+            keys={[
+              'PART_IPN_REGEX',
+              'PART_ALLOW_DUPLICATE_IPN',
+              'PART_ALLOW_EDIT_IPN',
+              'PART_ALLOW_DELETE_FROM_ASSEMBLY',
+              'PART_ENABLE_REVISION',
+              'PART_REVISION_ASSEMBLY_ONLY',
+              'PART_NAME_FORMAT',
+              'PART_SHOW_RELATED',
+              'PART_CREATE_INITIAL',
+              'PART_CREATE_SUPPLIER',
+              'PART_TEMPLATE',
+              'PART_ASSEMBLY',
+              'PART_COMPONENT',
+              'PART_TRACKABLE',
+              'PART_PURCHASEABLE',
+              'PART_SALABLE',
+              'PART_VIRTUAL',
+              'PART_COPY_BOM',
+              'PART_COPY_PARAMETERS',
+              'PART_COPY_TESTS',
+              'PART_CATEGORY_PARAMETERS',
+              'PART_CATEGORY_DEFAULT_ICON'
+            ]}
+          />
+        )
+      },
+      {
+        name: 'stock',
+        label: t`Stock`,
+        icon: <IconPackages />,
+        content: (
+          <GlobalSettingList
+            keys={[
+              'SERIAL_NUMBER_GLOBALLY_UNIQUE',
+              'SERIAL_NUMBER_AUTOFILL',
+              'STOCK_DELETE_DEPLETED_DEFAULT',
+              'STOCK_BATCH_CODE_TEMPLATE',
+              'STOCK_ENABLE_EXPIRY',
+              'STOCK_STALE_DAYS',
+              'STOCK_ALLOW_EXPIRED_SALE',
+              'STOCK_ALLOW_EXPIRED_BUILD',
+              'STOCK_OWNERSHIP_CONTROL',
+              'STOCK_LOCATION_DEFAULT_ICON',
+              'STOCK_SHOW_INSTALLED_ITEMS',
+              'STOCK_ENFORCE_BOM_INSTALLATION',
+              'STOCK_ALLOW_OUT_OF_STOCK_TRANSFER',
+              'TEST_STATION_DATA',
+              'TEST_UPLOAD_CREATE_TEMPLATE'
+            ]}
+          />
+        )
+      },
+      {
+        name: 'buildorders',
+        label: t`Build Orders`,
+        icon: <IconTools />,
+        content: (
+          <GlobalSettingList
+            keys={[
+              'BUILDORDER_REFERENCE_PATTERN',
+              'BUILDORDER_REQUIRE_RESPONSIBLE',
+              'BUILDORDER_REQUIRE_ACTIVE_PART',
+              'BUILDORDER_REQUIRE_LOCKED_PART',
+              'BUILDORDER_REQUIRE_VALID_BOM',
+              'BUILDORDER_REQUIRE_CLOSED_CHILDS',
+              'PREVENT_BUILD_COMPLETION_HAVING_INCOMPLETED_TESTS'
+            ]}
+          />
+        )
+      },
+      {
+        name: 'purchaseorders',
+        label: t`Purchase Orders`,
+        icon: <IconShoppingCart />,
+        content: (
+          <GlobalSettingList
+            keys={[
+              'PURCHASEORDER_REFERENCE_PATTERN',
+              'PURCHASEORDER_REQUIRE_RESPONSIBLE',
+              'PURCHASEORDER_CONVERT_CURRENCY',
+              'PURCHASEORDER_EDIT_COMPLETED_ORDERS',
+              'PURCHASEORDER_AUTO_COMPLETE'
+            ]}
+          />
+        )
+      },
+      {
+        name: 'salesorders',
+        label: t`Sales Orders`,
+        icon: <IconTruckDelivery />,
+        content: (
+          <GlobalSettingList
+            keys={[
+              'SALESORDER_REFERENCE_PATTERN',
+              'SALESORDER_REQUIRE_RESPONSIBLE',
+              'SALESORDER_DEFAULT_SHIPMENT',
+              'SALESORDER_EDIT_COMPLETED_ORDERS',
+              'SALESORDER_SHIP_COMPLETE'
+            ]}
+          />
+        )
+      },
+      {
+        name: 'returnorders',
+        label: t`Return Orders`,
+        icon: <IconTruckReturn />,
+        content: (
+          <GlobalSettingList
+            keys={[
+              'RETURNORDER_ENABLED',
+              'RETURNORDER_REFERENCE_PATTERN',
+              'RETURNORDER_REQUIRE_RESPONSIBLE',
+              'RETURNORDER_EDIT_COMPLETED_ORDERS'
+            ]}
+          />
+        )
+      }
+    ];
+  }, []);
+
+  const user = useUserState();
+
+  const [server] = useServerApiState((state) => [state.server]);
+
+  if (!user.isLoggedIn()) {
+    return <Skeleton />;
+  }
+
+  return (
+    <>
+      <PageTitle title={t`System Settings`} />
+      {user.isStaff() ? (
+        <Stack gap='xs'>
+          <SettingsHeader
+            label='system'
+            title={t`System Settings`}
+            subtitle={server.instance || ''}
+          />
+          <PanelGroup
+            pageKey='system-settings'
+            panels={systemSettingsPanels}
+            model='systemsettings'
+            id={null}
+          />
+        </Stack>
+      ) : (
+        <PermissionDenied />
+      )}
+    </>
+  );
+}

package/src/pages/Index/Settings/UserSettings.tsx

@@ -0,0 +1,143 @@
+import { t } from '@lingui/core/macro';
+import { Skeleton, Stack } from '@mantine/core';
+import {
+  IconBellCog,
+  IconDeviceDesktop,
+  IconFileAnalytics,
+  IconLock,
+  IconSearch,
+  IconUserCircle
+} from '@tabler/icons-react';
+import { useMemo } from 'react';
+
+import PageTitle from '../../../components/nav/PageTitle';
+import { SettingsHeader } from '../../../components/nav/SettingsHeader';
+import type { PanelType } from '../../../components/panels/Panel';
+import { PanelGroup } from '../../../components/panels/PanelGroup';
+import { UserSettingList } from '../../../components/settings/SettingList';
+import { useUserState } from '../../../states/UserState';
+import { SecurityContent } from './AccountSettings/SecurityContent';
+import { AccountContent } from './AccountSettings/UserPanel';
+
+/**
+ * User settings page
+ */
+export default function UserSettings() {
+  const [user, isLoggedIn] = useUserState((state) => [
+    state.user,
+    state.isLoggedIn
+  ]);
+
+  const userSettingsPanels: PanelType[] = useMemo(() => {
+    return [
+      {
+        name: 'account',
+        label: t`Account`,
+        icon: <IconUserCircle />,
+        content: <AccountContent />
+      },
+      {
+        name: 'security',
+        label: t`Security`,
+        icon: <IconLock />,
+        content: <SecurityContent />
+      },
+      {
+        name: 'display',
+        label: t`Display Options`,
+        icon: <IconDeviceDesktop />,
+        content: (
+          <UserSettingList
+            keys={[
+              'ICONS_IN_NAVBAR',
+              'STICKY_HEADER',
+              'DATE_DISPLAY_FORMAT',
+              'FORMS_CLOSE_USING_ESCAPE',
+              'PART_SHOW_QUANTITY_IN_FORMS',
+              'DISPLAY_SCHEDULE_TAB',
+              'DISPLAY_STOCKTAKE_TAB',
+              'TABLE_STRING_MAX_LENGTH',
+              'ENABLE_LAST_BREADCRUMB'
+            ]}
+          />
+        )
+      },
+      {
+        name: 'search',
+        label: t`Search`,
+        icon: <IconSearch />,
+        content: (
+          <UserSettingList
+            keys={[
+              'SEARCH_WHOLE',
+              'SEARCH_REGEX',
+              'SEARCH_NOTES',
+              'SEARCH_PREVIEW_RESULTS',
+              'SEARCH_PREVIEW_SHOW_PARTS',
+              'SEARCH_HIDE_INACTIVE_PARTS',
+              'SEARCH_PREVIEW_SHOW_SUPPLIER_PARTS',
+              'SEARCH_PREVIEW_SHOW_MANUFACTURER_PARTS',
+              'SEARCH_PREVIEW_SHOW_CATEGORIES',
+              'SEARCH_PREVIEW_SHOW_STOCK',
+              'SEARCH_PREVIEW_HIDE_UNAVAILABLE_STOCK',
+              'SEARCH_PREVIEW_SHOW_LOCATIONS',
+              'SEARCH_PREVIEW_SHOW_COMPANIES',
+              'SEARCH_PREVIEW_SHOW_BUILD_ORDERS',
+              'SEARCH_PREVIEW_SHOW_PURCHASE_ORDERS',
+              'SEARCH_PREVIEW_EXCLUDE_INACTIVE_PURCHASE_ORDERS',
+              'SEARCH_PREVIEW_SHOW_SALES_ORDERS',
+              'SEARCH_PREVIEW_EXCLUDE_INACTIVE_SALES_ORDERS',
+              'SEARCH_PREVIEW_SHOW_SALES_ORDER_SHIPMENTS',
+              'SEARCH_PREVIEW_SHOW_RETURN_ORDERS',
+              'SEARCH_PREVIEW_EXCLUDE_INACTIVE_RETURN_ORDERS'
+            ]}
+          />
+        )
+      },
+      {
+        name: 'notifications',
+        label: t`Notifications`,
+        icon: <IconBellCog />,
+        content: <UserSettingList keys={['NOTIFICATION_ERROR_REPORT']} />
+      },
+      {
+        name: 'reporting',
+        label: t`Reporting`,
+        icon: <IconFileAnalytics />,
+        content: (
+          <UserSettingList
+            keys={['REPORT_INLINE', 'LABEL_INLINE', 'LABEL_DEFAULT_PRINTER']}
+          />
+        )
+      }
+    ];
+  }, []);
+
+  if (!isLoggedIn()) {
+    return <Skeleton />;
+  }
+
+  return (
+    <>
+      <PageTitle title={t`User Settings`} />
+      <Stack gap='xs'>
+        <SettingsHeader
+          label='user'
+          title={t`Account Settings`}
+          subtitle={
+            user?.first_name && user?.last_name
+              ? `${user?.first_name} ${user?.last_name}`
+              : null
+          }
+          shorthand={user?.username || ''}
+        />
+        <PanelGroup
+          pageKey='user-settings'
+          panels={userSettingsPanels}
+          model='usersettings'
+          id={null}
+        />
+      </Stack>
+    </>
+  );
+}

package/src/pages/Notifications.tsx

@@ -0,0 +1,134 @@
+import { t } from '@lingui/core/macro';
+import { Stack } from '@mantine/core';
+import {
+  IconBellCheck,
+  IconBellExclamation,
+  IconCircleCheck,
+  IconMail,
+  IconMailOpened,
+  IconTrash
+} from '@tabler/icons-react';
+import { useCallback, useMemo } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { ActionButton } from '../components/buttons/ActionButton';
+import { PageDetail } from '../components/nav/PageDetail';
+import { PanelGroup } from '../components/panels/PanelGroup';
+import { useApi } from '../contexts/ApiContext';
+import { useTable } from '../hooks/UseTable';
+import { NotificationTable } from '../tables/notifications/NotificationTable';
+
+export default function NotificationsPage() {
+  const api = useApi();
+  const unreadTable = useTable('unreadnotifications');
+  const readTable = useTable('readnotifications');
+
+  const markAllAsRead = useCallback(() => {
+    api
+      .get(apiUrl(ApiEndpoints.notifications_readall), {
+        params: {
+          read: false
+        }
+      })
+      .then((_response) => {
+        unreadTable.refreshTable();
+        readTable.refreshTable();
+      })
+      .catch((_error) => {});
+  }, []);
+
+  const notificationPanels = useMemo(() => {
+    return [
+      {
+        name: 'unread',
+        label: t`Notifications`,
+        icon: <IconBellExclamation size='18' />,
+        content: (
+          <NotificationTable
+            params={{ read: false }}
+            tableState={unreadTable}
+            actions={(record) => [
+              {
+                title: t`Mark as read`,
+                color: 'green',
+                icon: <IconCircleCheck />,
+                onClick: () => {
+                  const url = apiUrl(
+                    ApiEndpoints.notifications_list,
+                    record.pk
+                  );
+                  api
+                    .patch(url, {
+                      read: true
+                    })
+                    .then((response) => {
+                      unreadTable.refreshTable();
+                    });
+                }
+              }
+            ]}
+            tableActions={[
+              <ActionButton
+                icon={<IconMailOpened />}
+                tooltip={t`Mark all as read`}
+                onClick={markAllAsRead}
+              />
+            ]}
+          />
+        )
+      },
+      {
+        name: 'history',
+        label: t`History`,
+        icon: <IconBellCheck size='18' />,
+        content: (
+          <NotificationTable
+            params={{ read: true }}
+            tableState={readTable}
+            actions={(record) => [
+              {
+                title: t`Mark as unread`,
+                icon: <IconMail />,
+                onClick: () => {
+                  const url = apiUrl(
+                    ApiEndpoints.notifications_list,
+                    record.pk
+                  );
+
+                  api
+                    .patch(url, {
+                      read: false
+                    })
+                    .then((response) => {
+                      readTable.refreshTable();
+                    });
+                }
+              },
+              {
+                title: t`Delete`,
+                color: 'red',
+                icon: <IconTrash />,
+                onClick: () => {
+                  api
+                    .delete(apiUrl(ApiEndpoints.notifications_list, record.pk))
+                    .then((response) => {
+                      readTable.refreshTable();
+                    });
+                }
+              }
+            ]}
+            tableActions={[]}
+          />
+        )
+      }
+    ];
+  }, [unreadTable, readTable]);
+
+  return (
+    <Stack>
+      <PageDetail title={t`Notifications`} />
+      <PanelGroup pageKey='notifications' panels={notificationPanels} />
+    </Stack>
+  );
+}