@inventreedb/ui 0.0.1

package/src/pages/Index/Settings/AccountSettings/UserPanel.tsx

@@ -0,0 +1,24 @@
+import { Container, Grid, SimpleGrid } from '@mantine/core';
+
+import { AccountDetailPanel } from './AccountDetailPanel';
+import { UserTheme } from './UserThemePanel';
+
+export function AccountContent() {
+  const PRIMARY_COL_HEIGHT = 300;
+  const SECONDARY_COL_HEIGHT = PRIMARY_COL_HEIGHT / 2 - 8;
+
+  return (
+    <div>
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing='md'>
+        <Container w='100%'>
+          <AccountDetailPanel />
+        </Container>
+        <Grid gutter='md'>
+          <Grid.Col>
+            <UserTheme height={SECONDARY_COL_HEIGHT} />
+          </Grid.Col>
+        </Grid>
+      </SimpleGrid>
+    </div>
+  );
+}

package/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx

@@ -0,0 +1,207 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  ActionIcon,
+  Button,
+  ColorInput,
+  ColorPicker,
+  Container,
+  DEFAULT_THEME,
+  Group,
+  Loader,
+  Select,
+  Slider,
+  Table,
+  useMantineTheme
+} from '@mantine/core';
+import { IconRestore } from '@tabler/icons-react';
+import { useState } from 'react';
+
+import { ColorToggle } from '../../../../components/items/ColorToggle';
+import { LanguageSelect } from '../../../../components/items/LanguageSelect';
+import { StylishText } from '../../../../components/items/StylishText';
+import { SizeMarks } from '../../../../defaults/defaults';
+import { IS_DEV } from '../../../../main';
+import { useLocalState } from '../../../../states/LocalState';
+
+function getLkp(color: string) {
+  return { [DEFAULT_THEME.colors[color][6]]: color };
+}
+const LOOKUP = Object.assign(
+  {},
+  ...Object.keys(DEFAULT_THEME.colors).map((clr) => getLkp(clr))
+);
+
+export function UserTheme({ height }: Readonly<{ height: number }>) {
+  const theme = useMantineTheme();
+  const [userTheme, setTheme, setLanguage] = useLocalState((state) => [
+    state.userTheme,
+    state.setTheme,
+    state.setLanguage
+  ]);
+
+  // radius
+  function getMark(value: number) {
+    const obj = SizeMarks.find((mark) => mark.value === value);
+    if (obj) return obj;
+    return SizeMarks[0];
+  }
+  function getDefaultRadius() {
+    const value = Number.parseInt(userTheme.radius.toString());
+    return SizeMarks.some((mark) => mark.value === value) ? value : 50;
+  }
+  const [radius, setRadius] = useState(getDefaultRadius());
+  function changeRadius(value: number) {
+    setRadius(value);
+    setTheme([{ key: 'radius', value: value.toString() }]);
+  }
+
+  return (
+    <Container w='100%' mih={height} p={0}>
+      <StylishText size='lg'>
+        <Trans>Display Settings</Trans>
+      </StylishText>
+      <Table>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Language</Trans>
+            </Table.Td>
+            <Table.Td>
+              <LanguageSelect width={200} />
+            </Table.Td>
+            <Table.Td>
+              {IS_DEV && (
+                <Button
+                  onClick={() => setLanguage('pseudo-LOCALE', true)}
+                  variant='light'
+                >
+                  <Trans>Use pseudo language</Trans>
+                </Button>
+              )}
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Color Mode</Trans>
+            </Table.Td>
+            <Table.Td>
+              <Group justify='left'>
+                <ColorToggle />
+              </Group>
+            </Table.Td>
+            <Table.Td />
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Highlight color</Trans>
+            </Table.Td>
+            <Table.Td>
+              <ColorPicker
+                format='hex'
+                onChange={(v) =>
+                  setTheme([{ key: 'primaryColor', value: LOOKUP[v] }])
+                }
+                withPicker={false}
+                swatches={Object.keys(LOOKUP)}
+              />
+            </Table.Td>
+            <Table.Td>
+              <Button color={theme.primaryColor} variant='light'>
+                <Trans>Example</Trans>
+              </Button>
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>White color</Trans>
+            </Table.Td>
+            <Table.Td>
+              <ColorInput
+                aria-label='Color Picker White'
+                value={userTheme.whiteColor}
+                onChange={(v) => setTheme([{ key: 'whiteColor', value: v }])}
+              />
+            </Table.Td>
+            <Table.Td>
+              <ActionIcon
+                variant='default'
+                aria-label='Reset White Color'
+                onClick={() =>
+                  setTheme([{ key: 'whiteColor', value: '#FFFFFF' }])
+                }
+              >
+                <IconRestore />
+              </ActionIcon>
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Black color</Trans>
+            </Table.Td>
+            <Table.Td>
+              <ColorInput
+                aria-label='Color Picker Black'
+                value={userTheme.blackColor}
+                onChange={(v) => setTheme([{ key: 'blackColor', value: v }])}
+              />
+            </Table.Td>
+            <Table.Td>
+              <ActionIcon
+                variant='default'
+                aria-label='Reset Black Color'
+                onClick={() =>
+                  setTheme([{ key: 'blackColor', value: '#000000' }])
+                }
+              >
+                <IconRestore />
+              </ActionIcon>
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Border Radius</Trans>
+            </Table.Td>
+            <Table.Td>
+              <Slider
+                label={(val) => getMark(val).label}
+                defaultValue={50}
+                step={25}
+                marks={SizeMarks}
+                value={radius}
+                onChange={changeRadius}
+                mb={18}
+              />
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Loader</Trans>
+            </Table.Td>
+            <Table.Td>
+              <Group justify='left'>
+                <Select
+                  aria-label='Loader Type Selector'
+                  data={[
+                    { value: 'bars', label: t`Bars` },
+                    { value: 'oval', label: t`Oval` },
+                    { value: 'dots', label: t`Dots` }
+                  ]}
+                  value={userTheme.loader}
+                  onChange={(v) => {
+                    if (v != null) setTheme([{ key: 'loader', value: v }]);
+                  }}
+                />
+              </Group>
+            </Table.Td>
+            <Table.Td>
+              <Group justify='left'>
+                <Loader type={userTheme.loader} mah={16} size='sm' />
+              </Group>
+            </Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>
+    </Container>
+  );
+}

package/src/pages/Index/Settings/AccountSettings/useConfirm.tsx

@@ -0,0 +1,117 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { Button, Group, Modal, Stack, TextInput } from '@mantine/core';
+import { useState } from 'react';
+
+/* Adapted from https://daveteu.medium.com/react-custom-confirmation-box-458cceba3f7b */
+const createPromise = () => {
+  let resolver: any;
+  return [
+    new Promise((resolve) => {
+      resolver = resolve;
+    }),
+    resolver
+  ];
+};
+
+/* Adapted from https://daveteu.medium.com/react-custom-confirmation-box-458cceba3f7b */
+export const useConfirm = () => {
+  const [open, setOpen] = useState(false);
+  const [resolver, setResolver] = useState<((status: boolean) => void) | null>(
+    null
+  );
+  const [label, setLabel] = useState('');
+
+  const getConfirmation = async (text: string) => {
+    setLabel(text);
+    setOpen(true);
+    const [promise, resolve] = await createPromise();
+
+    setResolver(resolve);
+    return promise;
+  };
+
+  const onClick = async (status: boolean) => {
+    setOpen(false);
+    if (resolver) {
+      resolver(status);
+    }
+  };
+
+  const Confirmation = () => (
+    <Modal opened={open} onClose={() => setOpen(false)}>
+      {label}
+      <Button onClick={() => onClick(false)}> Cancel </Button>
+      <Button onClick={() => onClick(true)}> OK </Button>
+    </Modal>
+  );
+
+  return [getConfirmation, Confirmation];
+};
+
+type InputProps = {
+  label: string;
+  name: string;
+  description: string;
+};
+export const useReauth = (): [
+  (props: InputProps) => Promise<[string, boolean]>,
+  () => JSX.Element
+] => {
+  const [inputProps, setInputProps] = useState<InputProps>({
+    label: '',
+    name: '',
+    description: ''
+  });
+
+  const [value, setValue] = useState('');
+  const [open, setOpen] = useState(false);
+  const [resolver, setResolver] = useState<{
+    resolve: (result: string, positive: boolean) => void;
+  } | null>(null);
+
+  const getReauthText = async (props: InputProps) => {
+    setInputProps(props);
+    setOpen(true);
+    const [promise, resolve] = await createPromise();
+
+    setResolver({ resolve });
+    return promise;
+  };
+
+  const onClick = async (result: string, positive: boolean) => {
+    setOpen(false);
+    if (resolver) {
+      resolver.resolve(result, positive);
+    }
+  };
+
+  const ReauthModal = () => (
+    <Modal
+      opened={open}
+      onClose={() => setOpen(false)}
+      title={t`Reauthentication`}
+    >
+      <Stack>
+        <TextInput
+          required
+          label={inputProps.label}
+          name={inputProps.name}
+          description={inputProps.description}
+          value={value}
+          onChange={(event) => setValue(event.currentTarget.value)}
+        />
+        <Group justify='space-between'>
+          <Button onClick={() => onClick('', false)} color='red'>
+            <Trans>Cancel</Trans>
+          </Button>
+          <Button onClick={() => onClick(value, true)}>
+            <Trans>OK</Trans>
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+
+  return [getReauthText, ReauthModal];
+};

package/src/pages/Index/Settings/AdminCenter/CurrencyManagementPanel.tsx

@@ -0,0 +1,111 @@
+import { t } from '@lingui/core/macro';
+import { Divider, Stack } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { IconReload } from '@tabler/icons-react';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { api } from '../../../../App';
+import { ActionButton } from '../../../../components/buttons/ActionButton';
+import { FactCollection } from '../../../../components/settings/FactCollection';
+import { GlobalSettingList } from '../../../../components/settings/SettingList';
+import { showApiErrorMessage } from '../../../../functions/notifications';
+import { useTable } from '../../../../hooks/UseTable';
+import { InvenTreeTable } from '../../../../tables/InvenTreeTable';
+
+/*
+ * Table for displaying available currencies
+ */
+export function CurrencyTable({
+  setInfo
+}: Readonly<{ setInfo: (info: any) => void }>) {
+  const table = useTable('currency', 'currency');
+  const columns = useMemo(() => {
+    return [
+      {
+        accessor: 'currency',
+        title: t`Currency`,
+        switchable: false
+      },
+      {
+        accessor: 'rate',
+        title: t`Rate`,
+        switchable: false
+      }
+    ];
+  }, []);
+
+  const refreshCurrencies = useCallback(() => {
+    api
+      .post(apiUrl(ApiEndpoints.currency_refresh), {})
+      .then(() => {
+        table.refreshTable();
+        showNotification({
+          title: t`Success`,
+          message: t`Exchange rates updated`,
+          color: 'green'
+        });
+      })
+      .catch((error) => {
+        showApiErrorMessage({
+          error: error,
+          title: t`Exchange rate update error`
+        });
+      });
+  }, []);
+
+  const tableActions = useMemo(() => {
+    return [
+      <ActionButton
+        key='refresh'
+        onClick={refreshCurrencies}
+        tooltip={t`Refresh currency exchange rates`}
+        icon={<IconReload />}
+      />
+    ];
+  }, []);
+
+  return (
+    <InvenTreeTable
+      url={apiUrl(ApiEndpoints.currency_list)}
+      tableState={table}
+      columns={columns}
+      props={{
+        tableActions: tableActions,
+        dataFormatter: (data: any) => {
+          setInfo(data);
+          const rates = data.exchange_rates ?? {};
+
+          return Object.entries(rates).map(([currency, rate]) => {
+            return {
+              currency: currency,
+              rate: rate
+            };
+          });
+        }
+      }}
+    />
+  );
+}
+
+export default function CurrencyManagementPanel() {
+  const [info, setInfo] = useState<any>({});
+
+  return (
+    <Stack gap='xs'>
+      <FactCollection
+        items={[
+          { title: t`Last fetched`, value: info?.updated },
+          { title: t`Base currency`, value: info?.base_currency }
+        ]}
+      />
+      <Divider />
+      <CurrencyTable setInfo={setInfo} />
+      <Divider />
+      <GlobalSettingList
+        keys={['CURRENCY_UPDATE_PLUGIN', 'CURRENCY_UPDATE_INTERVAL']}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,251 @@
+import { t } from '@lingui/core/macro';
+import { Stack } from '@mantine/core';
+import {
+  IconClipboardCheck,
+  IconCoins,
+  IconCpu,
+  IconDevicesPc,
+  IconExclamationCircle,
+  IconFileDownload,
+  IconFileUpload,
+  IconList,
+  IconListDetails,
+  IconPackages,
+  IconPlugConnected,
+  IconQrcode,
+  IconReport,
+  IconScale,
+  IconSitemap,
+  IconTags,
+  IconUsersGroup
+} from '@tabler/icons-react';
+import { lazy, 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 { Loadable } from '../../../../functions/loading';
+import { useUserState } from '../../../../states/UserState';
+
+const ReportTemplatePanel = Loadable(
+  lazy(() => import('./ReportTemplatePanel'))
+);
+
+const LabelTemplatePanel = Loadable(lazy(() => import('./LabelTemplatePanel')));
+
+const UserManagementPanel = Loadable(
+  lazy(() => import('./UserManagementPanel'))
+);
+
+const TaskManagementPanel = Loadable(
+  lazy(() => import('./TaskManagementPanel'))
+);
+
+const CurrencyManagementPanel = Loadable(
+  lazy(() => import('./CurrencyManagementPanel'))
+);
+
+const UnitManagementPanel = Loadable(
+  lazy(() => import('./UnitManagementPanel'))
+);
+
+const PluginManagementPanel = Loadable(
+  lazy(() => import('./PluginManagementPanel'))
+);
+
+const MachineManagementPanel = Loadable(
+  lazy(() => import('./MachineManagementPanel'))
+);
+
+const PartParameterPanel = Loadable(lazy(() => import('./PartParameterPanel')));
+
+const ErrorReportTable = Loadable(
+  lazy(() => import('../../../../tables/settings/ErrorTable'))
+);
+
+const BarcodeScanHistoryTable = Loadable(
+  lazy(() => import('../../../../tables/settings/BarcodeScanHistoryTable'))
+);
+
+const ExportSessionTable = Loadable(
+  lazy(() => import('../../../../tables/settings/ExportSessionTable'))
+);
+
+const ImportSessionTable = Loadable(
+  lazy(() => import('../../../../tables/settings/ImportSessionTable'))
+);
+
+const ProjectCodeTable = Loadable(
+  lazy(() => import('../../../../tables/settings/ProjectCodeTable'))
+);
+
+const CustomStateTable = Loadable(
+  lazy(() => import('../../../../tables/settings/CustomStateTable'))
+);
+
+const CustomUnitsTable = Loadable(
+  lazy(() => import('../../../../tables/settings/CustomUnitsTable'))
+);
+
+const PartParameterTemplateTable = Loadable(
+  lazy(() => import('../../../../tables/part/PartParameterTemplateTable'))
+);
+
+const PartCategoryTemplateTable = Loadable(
+  lazy(() => import('../../../../tables/part/PartCategoryTemplateTable'))
+);
+
+const LocationTypesTable = Loadable(
+  lazy(() => import('../../../../tables/stock/LocationTypesTable'))
+);
+
+const StocktakePanel = Loadable(lazy(() => import('./StocktakePanel')));
+
+export default function AdminCenter() {
+  const user = useUserState();
+
+  const adminCenterPanels: PanelType[] = useMemo(() => {
+    return [
+      {
+        name: 'user',
+        label: t`User Management`,
+        icon: <IconUsersGroup />,
+        content: <UserManagementPanel />
+      },
+      {
+        name: 'import',
+        label: t`Data Import`,
+        icon: <IconFileUpload />,
+        content: <ImportSessionTable />
+      },
+      {
+        name: 'export',
+        label: t`Data Export`,
+        icon: <IconFileDownload />,
+        content: <ExportSessionTable />
+      },
+      {
+        name: 'barcode-history',
+        label: t`Barcode Scans`,
+        icon: <IconQrcode />,
+        content: <BarcodeScanHistoryTable />
+      },
+      {
+        name: 'background',
+        label: t`Background Tasks`,
+        icon: <IconCpu />,
+        content: <TaskManagementPanel />
+      },
+      {
+        name: 'errors',
+        label: t`Error Reports`,
+        icon: <IconExclamationCircle />,
+        content: <ErrorReportTable />
+      },
+      {
+        name: 'currencies',
+        label: t`Currencies`,
+        icon: <IconCoins />,
+        content: <CurrencyManagementPanel />
+      },
+      {
+        name: 'project-codes',
+        label: t`Project Codes`,
+        icon: <IconListDetails />,
+        content: (
+          <Stack gap='xs'>
+            <GlobalSettingList keys={['PROJECT_CODES_ENABLED']} />
+            <ProjectCodeTable />
+          </Stack>
+        )
+      },
+      {
+        name: 'custom-states',
+        label: t`Custom States`,
+        icon: <IconListDetails />,
+        content: <CustomStateTable />
+      },
+      {
+        name: 'custom-units',
+        label: t`Custom Units`,
+        icon: <IconScale />,
+        content: <UnitManagementPanel />
+      },
+      {
+        name: 'part-parameters',
+        label: t`Part Parameters`,
+        icon: <IconList />,
+        content: <PartParameterPanel />
+      },
+      {
+        name: 'category-parameters',
+        label: t`Category Parameters`,
+        icon: <IconSitemap />,
+        content: <PartCategoryTemplateTable />
+      },
+      {
+        name: 'stocktake',
+        label: t`Stocktake`,
+        icon: <IconClipboardCheck />,
+        content: <StocktakePanel />
+      },
+      {
+        name: 'labels',
+        label: t`Label Templates`,
+        icon: <IconTags />,
+        content: <LabelTemplatePanel />
+      },
+      {
+        name: 'reports',
+        label: t`Report Templates`,
+        icon: <IconReport />,
+        content: <ReportTemplatePanel />
+      },
+      {
+        name: 'location-types',
+        label: t`Location Types`,
+        icon: <IconPackages />,
+        content: <LocationTypesTable />
+      },
+      {
+        name: 'plugin',
+        label: t`Plugins`,
+        icon: <IconPlugConnected />,
+        content: <PluginManagementPanel />
+      },
+      {
+        name: 'machine',
+        label: t`Machines`,
+        icon: <IconDevicesPc />,
+        content: <MachineManagementPanel />
+      }
+    ];
+  }, []);
+
+  return (
+    <>
+      <PageTitle title={t`Admin Center`} />
+      {user.isStaff() ? (
+        <Stack gap='xs'>
+          <SettingsHeader
+            label='admin'
+            title={t`Admin Center`}
+            subtitle={t`Advanced Options`}
+          />
+          <PanelGroup
+            pageKey='admin-center'
+            panels={adminCenterPanels}
+            collapsible={true}
+            model='admincenter'
+            id={null}
+          />
+        </Stack>
+      ) : (
+        <PermissionDenied />
+      )}
+    </>
+  );
+}