@inventreedb/ui 0.0.1

package/src/pages/Index/Scan.tsx

@@ -0,0 +1,258 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  ActionIcon,
+  Alert,
+  Divider,
+  Grid,
+  Group,
+  Paper,
+  Space,
+  Stack,
+  Text
+} from '@mantine/core';
+import { randomId, useListState, useLocalStorage } from '@mantine/hooks';
+import {
+  IconAlertCircle,
+  IconNumber,
+  IconQuestionMark
+} from '@tabler/icons-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import type { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import { hideNotification, showNotification } from '@mantine/notifications';
+import dayjs from 'dayjs';
+import { api } from '../../App';
+import { BarcodeInput } from '../../components/barcodes/BarcodeInput';
+import type { BarcodeScanItem } from '../../components/barcodes/BarcodeScanItem';
+import { StylishText } from '../../components/items/StylishText';
+import PageTitle from '../../components/nav/PageTitle';
+import { ModelInformationDict } from '../../components/render/ModelType';
+import {
+  notYetImplemented,
+  showApiErrorMessage
+} from '../../functions/notifications';
+import BarcodeScanTable from '../../tables/general/BarcodeScanTable';
+
+export default function Scan() {
+  const [history, historyHandlers] = useListState<BarcodeScanItem>([]);
+
+  const [historyStorage, setHistoryStorage] = useLocalStorage<
+    BarcodeScanItem[]
+  >({
+    key: 'scan-history',
+    defaultValue: []
+  });
+
+  const [selection, setSelection] = useState<string[]>([]);
+
+  // Fetch model instance based on scan item
+  const fetchInstance = useCallback(
+    (item: BarcodeScanItem) => {
+      if (!item.model || !item.pk) {
+        return;
+      }
+
+      // Prevent duplicates
+      if (history.find((i) => i.model == item.model && i.pk == item.pk)) {
+        hideNotification('duplicate-barcode');
+
+        showNotification({
+          id: 'duplicate-barcode',
+          title: t`Duplicate`,
+          message: t`Item already scanned`,
+          color: 'orange'
+        });
+        return;
+      }
+
+      const model_info = ModelInformationDict[item.model];
+
+      api
+        .get(apiUrl(model_info.api_endpoint, item.pk))
+        .then((response) => {
+          item.instance = response.data;
+          historyHandlers.append(item);
+        })
+        .catch((error) => {
+          showApiErrorMessage({
+            error: error,
+            title: t`API Error`,
+            message: t`Failed to fetch instance data`
+          });
+        });
+    },
+    [api, history]
+  );
+
+  // Barcode scanning callback function
+  const scanBarcode = useCallback(
+    (barcode: string) => {
+      api
+        .post(apiUrl(ApiEndpoints.barcode), { barcode: barcode })
+        .then((response) => {
+          const data = response?.data ?? {};
+
+          let match = false;
+
+          for (const model_type of Object.keys(ModelInformationDict)) {
+            if (data[model_type]?.pk) {
+              match = true;
+              fetchInstance({
+                id: randomId(),
+                barcode: barcode,
+                data: data,
+                timestamp: dayjs().toDate(),
+                source: 'scan',
+                model: model_type as ModelType,
+                pk: data[model_type]?.pk
+              });
+            }
+          }
+
+          // If no match is found, add an empty result
+          if (!match) {
+            historyHandlers.append({
+              id: randomId(),
+              barcode: barcode,
+              data: data,
+              timestamp: dayjs().toDate(),
+              source: 'scan'
+            });
+          }
+        })
+        .catch((error) => {
+          showApiErrorMessage({
+            error: error,
+            message: t`Failed to scan barcode`,
+            title: t`Scan Error`,
+            field: 'error'
+          });
+        });
+    },
+    [fetchInstance]
+  );
+
+  // save history data to session storage
+  useEffect(() => {
+    if (history.length === 0) return;
+    setHistoryStorage(history);
+  }, [history]);
+
+  // load data from session storage on mount
+  useEffect(() => {
+    historyHandlers.setState(historyStorage);
+  }, [historyStorage]);
+
+  // Items selected for action
+  const selectedItems: BarcodeScanItem[] = useMemo(() => {
+    return history.filter((item) => selection.includes(item.id));
+  }, [selection, history]);
+
+  // selected actions component
+  const SelectedActions = useMemo(() => {
+    const uniqueObjectTypes = new Set(selectedItems.map((item) => item.model));
+
+    if (uniqueObjectTypes.size === 0) {
+      return (
+        <Group gap={0}>
+          <IconQuestionMark color='orange' />
+          <Trans>Selected elements are not known</Trans>
+        </Group>
+      );
+    } else if (uniqueObjectTypes.size > 1) {
+      return (
+        <Group gap={0}>
+          <IconAlertCircle color='orange' />
+          <Trans>Multiple object types selected</Trans>
+        </Group>
+      );
+    }
+
+    return (
+      <>
+        <Text fz='sm' c='dimmed'>
+          <Trans>Actions ... </Trans>
+        </Text>
+        <Group>
+          <ActionIcon
+            onClick={notYetImplemented}
+            title={t`Count`}
+            variant='default'
+          >
+            <IconNumber />
+          </ActionIcon>
+        </Group>
+      </>
+    );
+  }, [selectedItems]);
+
+  return (
+    <>
+      <PageTitle title={t`Barcode Scanning`} />
+      <Group justify='space-between'>
+        <Group justify='left'>
+          <StylishText size='xl'>
+            <Trans>Barcode Scanning</Trans>
+          </StylishText>
+        </Group>
+      </Group>
+      <Space h={'md'} />
+      <Grid maw={'100%'}>
+        <Grid.Col span={4}>
+          <Paper p='sm' shadow='xs'>
+            <Stack gap='xs'>
+              <StylishText size='lg'>{t`Barcode Input`}</StylishText>
+              <Divider />
+              <BarcodeInput onScan={scanBarcode} />
+            </Stack>
+          </Paper>
+          <Paper p='sm' shadow='xs'>
+            <Stack gap='xs'>
+              <StylishText size='lg'>{t`Action`}</StylishText>
+              <Divider />
+              {selection.length === 0 ? (
+                <Alert title={t`No Items Selected`} color='blue'>
+                  <Trans>Scan and select items to perform actions</Trans>
+                </Alert>
+              ) : (
+                <>
+                  <Text>
+                    <Trans>{selection.length} items selected</Trans>
+                  </Text>
+                  {SelectedActions}
+                </>
+              )}
+            </Stack>
+          </Paper>
+        </Grid.Col>
+        <Grid.Col span={8}>
+          <Paper p='sm' shadow='xs'>
+            <Stack gap='xs'>
+              <Group justify='space-between'>
+                <StylishText size='lg'>{t`Scanned Items`}</StylishText>
+              </Group>
+              <Divider />
+              <BarcodeScanTable
+                records={history}
+                onItemsSelected={(ids: string[]) => {
+                  setSelection(ids);
+                }}
+                onItemsDeleted={(ids: string[]) => {
+                  const newHistory = history.filter(
+                    (item) => !ids.includes(item.id)
+                  );
+
+                  historyHandlers.setState(newHistory);
+                  setHistoryStorage(newHistory);
+                }}
+              />
+            </Stack>
+          </Paper>
+        </Grid.Col>
+      </Grid>
+    </>
+  );
+}

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

@@ -0,0 +1,162 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { Badge, Group, Stack, Table } from '@mantine/core';
+import { IconEdit, IconKey, IconUser } from '@tabler/icons-react';
+import { useMemo } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import type { ApiFormFieldSet } from '@lib/types/Forms';
+import { useNavigate } from 'react-router-dom';
+import { ActionButton } from '../../../../components/buttons/ActionButton';
+import { YesNoUndefinedButton } from '../../../../components/buttons/YesNoButton';
+import { ActionDropdown } from '../../../../components/items/ActionDropdown';
+import { StylishText } from '../../../../components/items/StylishText';
+import { useEditApiFormModal } from '../../../../hooks/UseForm';
+import { useUserState } from '../../../../states/UserState';
+
+export function AccountDetailPanel() {
+  const navigate = useNavigate();
+
+  const [user, fetchUserState] = useUserState((state) => [
+    state.user,
+    state.fetchUserState
+  ]);
+
+  const userFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      first_name: {},
+      last_name: {}
+    };
+  }, []);
+
+  const editAccount = useEditApiFormModal({
+    title: t`Edit Account Information`,
+    url: ApiEndpoints.user_me,
+    onFormSuccess: fetchUserState,
+    fields: userFields,
+    successMessage: t`Account details updated`
+  });
+
+  const profileFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      displayname: {},
+      position: {},
+      status: {},
+      location: {},
+      active: {},
+      contact: {},
+      type: {},
+      organisation: {},
+      primary_group: {}
+    };
+  }, []);
+
+  const editProfile = useEditApiFormModal({
+    title: t`Edit Profile Information`,
+    url: ApiEndpoints.user_profile,
+    onFormSuccess: fetchUserState,
+    fields: profileFields,
+    successMessage: t`Profile details updated`
+  });
+
+  const accountDetailFields = useMemo(
+    () => [
+      { label: t`Username`, value: user?.username },
+      { label: t`First Name`, value: user?.first_name },
+      { label: t`Last Name`, value: user?.last_name },
+      {
+        label: t`Staff Access`,
+        value: <YesNoUndefinedButton value={user?.is_staff} />
+      },
+      {
+        label: t`Superuser`,
+        value: <YesNoUndefinedButton value={user?.is_superuser} />
+      }
+    ],
+    [user]
+  );
+
+  const profileDetailFields = useMemo(
+    () => [
+      { label: t`Display Name`, value: user?.profile?.displayname },
+      { label: t`Position`, value: user?.profile?.position },
+      { label: t`Status`, value: user?.profile?.status },
+      { label: t`Location`, value: user?.profile?.location },
+      {
+        label: t`Active`,
+        value: <YesNoUndefinedButton value={user?.profile?.active} />
+      },
+      { label: t`Contact`, value: user?.profile?.contact },
+      { label: t`Type`, value: <Badge>{user?.profile?.type}</Badge> },
+      { label: t`Organisation`, value: user?.profile?.organisation },
+      { label: t`Primary Group`, value: user?.profile?.primary_group }
+    ],
+    [user]
+  );
+
+  return (
+    <>
+      {editAccount.modal}
+      {editProfile.modal}
+      <Stack gap='xs'>
+        <Group justify='space-between'>
+          <StylishText size='lg'>
+            <Trans>Account Details</Trans>
+          </StylishText>
+          <ActionDropdown
+            tooltip={t`Account Actions`}
+            icon={<IconUser />}
+            actions={[
+              {
+                name: t`Edit Account`,
+                icon: <IconEdit />,
+                tooltip: t`Edit Account Information`,
+                onClick: editAccount.open
+              },
+              {
+                name: t`Change Password`,
+                icon: <IconKey />,
+                tooltip: t`Change User Password`,
+                onClick: () => {
+                  navigate('/change-password');
+                }
+              }
+            ]}
+          />
+        </Group>
+        {renderDetailTable(accountDetailFields)}
+
+        <Group justify='space-between'>
+          <StylishText size='lg'>
+            <Trans>Profile Details</Trans>
+          </StylishText>
+          <ActionButton
+            text={t`Edit Profile`}
+            icon={<IconEdit />}
+            tooltip={t`Edit Profile Information`}
+            onClick={editProfile.open}
+            variant='light'
+          />
+        </Group>
+        {renderDetailTable(profileDetailFields)}
+      </Stack>
+    </>
+  );
+
+  function renderDetailTable(data: { label: string; value: any }[]) {
+    return (
+      <Table>
+        <Table.Tbody>
+          {data.map((item) => (
+            <Table.Tr key={item.label}>
+              <Table.Td>
+                <Trans>{item.label}</Trans>
+              </Table.Td>
+              <Table.Td>{item.value}</Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    );
+  }
+}

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

@@ -0,0 +1,38 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { Divider, Text, TextInput } from '@mantine/core';
+import { QRCode } from '../../../../components/barcodes/QRCode';
+
+export function QrRegistrationForm({
+  url,
+  secret,
+  value,
+  error,
+  setValue
+}: Readonly<{
+  url: string;
+  secret: string;
+  value: string;
+  error?: string;
+  setValue: (value: string) => void;
+}>) {
+  return (
+    <>
+      <Divider />
+      <QRCode data={url} />
+      <Text>
+        <Trans>Secret</Trans>
+        <br />
+        {secret}
+      </Text>
+      <TextInput
+        required
+        label={t`One-Time Password`}
+        description={t`Enter the TOTP code to ensure it registered correctly`}
+        value={value}
+        onChange={(event) => setValue(event.currentTarget.value)}
+        error={error}
+      />
+    </>
+  );
+}