@inventreedb/ui 0.0.1 → 0.0.3

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

@@ -1,24 +0,0 @@
-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

@@ -1,207 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,251 +0,0 @@
-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 />
-      )}
-    </>
-  );
-}