@inventreedb/ui 0.0.1

package/src/components/modals/LicenseModal.tsx

@@ -0,0 +1,116 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  Accordion,
+  Alert,
+  Divider,
+  Group,
+  LoadingOverlay,
+  Space,
+  Stack,
+  Tabs,
+  Text
+} from '@mantine/core';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { api } from '../../App';
+
+export function LicenceView(entries: Readonly<any[]>) {
+  return (
+    <Stack gap='xs'>
+      <Divider />
+      {entries?.length > 0 ? (
+        <Accordion variant='contained' defaultValue='-'>
+          {entries?.map((entry: any, index: number) => (
+            <Accordion.Item
+              key={entry.name + entry.license + entry.version}
+              value={`entry-${index}`}
+            >
+              <Accordion.Control>
+                <Group justify='space-between' grow>
+                  <Text>{entry.name}</Text>
+                  <Text>{entry.license}</Text>
+                  <Space />
+                  <Text>{entry.version}</Text>
+                </Group>
+              </Accordion.Control>
+              <Accordion.Panel style={{ whiteSpace: 'pre-line' }}>
+                {entry.licensetext || t`No license text available`}
+              </Accordion.Panel>
+            </Accordion.Item>
+          ))}
+        </Accordion>
+      ) : (
+        <Text>
+          <Trans>No Information provided - this is likely a server issue</Trans>
+        </Text>
+      )}
+    </Stack>
+  );
+}
+
+export function LicenseModal() {
+  const { data, isFetching, isError } = useQuery({
+    queryKey: ['license'],
+    refetchOnMount: true,
+    queryFn: () =>
+      api
+        .get(apiUrl(ApiEndpoints.license))
+        .then((res) => res.data ?? {})
+        .catch(() => {})
+  });
+
+  const packageKeys = useMemo(() => {
+    return !!data ? Object.keys(data ?? {}) : [];
+  }, [data]);
+
+  const [selectedKey, setSelectedKey] = useState<string | null>('');
+
+  useEffect(() => {
+    if (packageKeys.length > 0) {
+      setSelectedKey(packageKeys[0]);
+    }
+  }, [packageKeys]);
+
+  return (
+    <Stack gap='xs'>
+      <Divider />
+      <LoadingOverlay visible={isFetching} />
+      {isFetching && (
+        <Text>
+          <Trans>Loading license information</Trans>
+        </Text>
+      )}
+      {isError ? (
+        <Alert color='red' title={t`Error`}>
+          <Text>
+            <Trans>Failed to fetch license information</Trans>
+          </Text>
+        </Alert>
+      ) : (
+        <Tabs
+          defaultValue={packageKeys[0] ?? ''}
+          value={selectedKey}
+          onChange={setSelectedKey}
+        >
+          <Tabs.List>
+            {packageKeys.map((key) => (
+              <Tabs.Tab key={key} value={key}>
+                <Trans>{key} Packages</Trans>
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+
+          {packageKeys.map((key) => (
+            <Tabs.Panel key={key} value={key}>
+              {LicenceView(data[key] ?? [])}
+            </Tabs.Panel>
+          ))}
+        </Tabs>
+      )}
+    </Stack>
+  );
+}

package/src/components/modals/QrModal.tsx

@@ -0,0 +1,21 @@
+import {} from '@mantine/core';
+import type { ContextModalProps } from '@mantine/modals';
+import type { NavigateFunction } from 'react-router-dom';
+import { ScanInputHandler } from '../barcodes/BarcodeScanDialog';
+
+export function QrModal({
+  context,
+  id,
+  innerProps
+}: Readonly<
+  ContextModalProps<{ modalBody: string; navigate: NavigateFunction }>
+>) {
+  function close() {
+    context.closeModal(id);
+  }
+  function navigate() {
+    context.closeModal(id);
+  }
+
+  return <ScanInputHandler navigate={innerProps.navigate} onClose={close} />;
+}

package/src/components/modals/ServerInfoModal.tsx

@@ -0,0 +1,136 @@
+import { Trans } from '@lingui/react/macro';
+import { Badge, Button, Divider, Group, Stack, Table } from '@mantine/core';
+import type { ContextModalProps } from '@mantine/modals';
+
+import { useServerApiState } from '../../states/ApiState';
+import { OnlyStaff } from '../items/OnlyStaff';
+import { StylishText } from '../items/StylishText';
+
+export function ServerInfoModal({
+  context,
+  id
+}: ContextModalProps<{ modalBody: string }>) {
+  const [server] = useServerApiState((state) => [state.server]);
+
+  return (
+    <Stack>
+      <Divider />
+      <StylishText size='lg'>
+        <Trans>Server</Trans>
+      </StylishText>
+      <Table striped>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Instance Name</Trans>
+            </Table.Td>
+            <Table.Td>{server.instance}</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Server Version</Trans>
+            </Table.Td>
+            <Table.Td>{server.version}</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>API Version</Trans>
+            </Table.Td>
+            <Table.Td>{server.apiVersion}</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Database</Trans>
+            </Table.Td>
+            <Table.Td>
+              <OnlyStaff>{server.database}</OnlyStaff>
+            </Table.Td>
+          </Table.Tr>
+          {server.debug_mode && (
+            <Table.Tr>
+              <Table.Td>
+                <Trans>Debug Mode</Trans>
+              </Table.Td>
+              <Table.Td>
+                <Badge color='red'>INVE-W4</Badge>
+                <Trans>Server is running in debug mode</Trans>
+              </Table.Td>
+            </Table.Tr>
+          )}
+          {server.docker_mode && (
+            <Table.Tr>
+              <Table.Td>
+                <Trans>Docker Mode</Trans>
+              </Table.Td>
+              <Table.Td>
+                <Trans>Server is deployed using docker</Trans>
+              </Table.Td>
+            </Table.Tr>
+          )}
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Plugin Support</Trans>
+            </Table.Td>
+            <Table.Td>
+              <Badge color={server.plugins_enabled ? 'green' : 'red'}>
+                {server.plugins_enabled ? (
+                  <Trans>Plugin support enabled</Trans>
+                ) : (
+                  <Trans>Plugin support disabled</Trans>
+                )}
+              </Badge>
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Server status</Trans>
+            </Table.Td>
+            <Table.Td>
+              <OnlyStaff>
+                <Badge color={server.system_health ? 'green' : 'yellow'}>
+                  {server.system_health ? (
+                    <Trans>Healthy</Trans>
+                  ) : (
+                    <Trans>Issues detected</Trans>
+                  )}
+                </Badge>
+              </OnlyStaff>
+            </Table.Td>
+          </Table.Tr>
+          {server?.worker_running == false && (
+            <Table.Tr>
+              <Table.Td>
+                <Trans>Background Worker</Trans>
+              </Table.Td>
+              <Table.Td>
+                <Badge color='red'>INVE-W5</Badge>
+                <Trans>The Background worker process is not running.</Trans>
+              </Table.Td>
+            </Table.Tr>
+          )}
+          {!server?.email_configured && (
+            <Table.Tr>
+              <Table.Td>
+                <Trans>Email Settings</Trans>
+              </Table.Td>
+              <Table.Td>
+                <Badge color='red'>INVE-W7</Badge>
+                <Trans>Email settings not configured.</Trans>
+              </Table.Td>
+            </Table.Tr>
+          )}
+        </Table.Tbody>
+      </Table>
+      <Divider />
+      <Group justify='right'>
+        <Button
+          onClick={() => {
+            context.closeModal(id);
+          }}
+        >
+          <Trans>Close</Trans>
+        </Button>
+      </Group>
+    </Stack>
+  );
+}

package/src/components/nav/Alerts.tsx

@@ -0,0 +1,130 @@
+import { ActionIcon, Alert, Menu, Tooltip } from '@mantine/core';
+import { IconExclamationCircle } from '@tabler/icons-react';
+import { useMemo, useState } from 'react';
+
+import { t } from '@lingui/core/macro';
+import { docLinks } from '../../defaults/links';
+import { useServerApiState } from '../../states/ApiState';
+import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useUserState } from '../../states/UserState';
+
+interface AlertInfo {
+  key: string;
+  title: string;
+  code?: string;
+  message: string;
+}
+
+/**
+ * The `Alerts` component displays a menu of alerts for staff users based on the server state
+ * and global settings. Alerts are shown as a dropdown menu with actionable items that can be dismissed.
+ *
+ * Dismissed alerts are filtered out and will not reappear in the current session.
+ *
+ * @returns A dropdown menu of alerts for staff users or `null` if there are no alerts or the user is not a staff member.
+ */
+export function Alerts() {
+  const user = useUserState();
+  const [server] = useServerApiState((state) => [state.server]);
+  const globalSettings = useGlobalSettingsState();
+
+  const [dismissed, setDismissed] = useState<string[]>([]);
+
+  const alerts: AlertInfo[] = useMemo(() => {
+    const _alerts: AlertInfo[] = [];
+
+    if (server?.debug_mode) {
+      _alerts.push({
+        key: 'debug',
+        title: t`Debug Mode`,
+        code: 'INVE-W4',
+        message: t`The server is running in debug mode.`
+      });
+    }
+
+    if (!server?.worker_running) {
+      _alerts.push({
+        key: 'worker',
+        title: t`Background Worker`,
+        code: 'INVE-W5',
+        message: t`The background worker process is not running.`
+      });
+    }
+
+    if (!server?.email_configured) {
+      _alerts.push({
+        key: 'email',
+        title: t`Email settings`,
+        code: 'INVE-W7',
+        message: t`Email settings not configured.`
+      });
+    }
+
+    if (globalSettings.isSet('SERVER_RESTART_REQUIRED')) {
+      _alerts.push({
+        key: 'restart',
+        title: t`Server Restart`,
+        code: 'INVE-W6',
+        message: t`The server requires a restart to apply changes.`
+      });
+    }
+
+    const n_migrations =
+      Number.parseInt(globalSettings.getSetting('_PENDING_MIGRATIONS')) ?? 0;
+
+    if (n_migrations > 0) {
+      _alerts.push({
+        key: 'migrations',
+        title: t`Database Migrations`,
+        code: 'INVE-W8',
+        message: t`There are pending database migrations.`
+      });
+    }
+
+    return _alerts.filter((alert) => !dismissed.includes(alert.key));
+  }, [server, dismissed, globalSettings]);
+
+  if (user.isStaff() && alerts.length > 0)
+    return (
+      <Menu withinPortal={true} position='bottom-end'>
+        <Menu.Target>
+          <Tooltip position='bottom-end' label={t`Alerts`}>
+            <ActionIcon
+              variant='transparent'
+              aria-label='open-alerts'
+              color='red'
+            >
+              <IconExclamationCircle />
+            </ActionIcon>
+          </Tooltip>
+        </Menu.Target>
+        <Menu.Dropdown>
+          {alerts.map((alert) => (
+            <Menu.Item key={`alert-item-${alert.key}`}>
+              <Alert
+                withCloseButton
+                color='red'
+                title={alert.title}
+                onClose={() => setDismissed([...dismissed, alert.key])}
+              >
+                {alert.message}
+                {alert.code && errorCodeLink(alert.code)}
+              </Alert>
+            </Menu.Item>
+          ))}
+        </Menu.Dropdown>
+      </Menu>
+    );
+  return null;
+}
+export function errorCodeLink(code: string) {
+  return (
+    <a
+      href={`${docLinks.errorcodes}#${code.toLowerCase()}`}
+      target='_blank'
+      rel='noreferrer'
+    >
+      {t`Learn more about ${code}`}
+    </a>
+  );
+}

package/src/components/nav/BreadcrumbList.tsx

@@ -0,0 +1,84 @@
+import {
+  ActionIcon,
+  Anchor,
+  Breadcrumbs,
+  Group,
+  Paper,
+  Text
+} from '@mantine/core';
+import { IconMenu2 } from '@tabler/icons-react';
+import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { identifierString } from '../../functions/conversion';
+import { navigateToLink } from '../../functions/navigation';
+
+export type Breadcrumb = {
+  icon?: React.ReactNode;
+  name: string;
+  url: string;
+};
+
+/**
+ * Construct a breadcrumb list, with integrated navigation.
+ */
+export function BreadcrumbList({
+  breadcrumbs,
+  navCallback
+}: Readonly<{
+  breadcrumbs: Breadcrumb[];
+  navCallback?: () => void;
+}>) {
+  const navigate = useNavigate();
+
+  const elements = useMemo(() => {
+    // Limit to 7 active elements
+    if (breadcrumbs.length > 7) {
+      return [
+        ...breadcrumbs.slice(0, 3),
+        { name: '...', url: '#' },
+        ...breadcrumbs.slice(-3)
+      ];
+    } else {
+      return breadcrumbs;
+    }
+  }, [breadcrumbs]);
+
+  return (
+    <Paper p='7' radius='xs' shadow='xs'>
+      <Group gap='xs'>
+        {navCallback && (
+          <ActionIcon
+            key='nav-breadcrumb-action'
+            aria-label='nav-breadcrumb-action'
+            onClick={navCallback}
+            variant='transparent'
+          >
+            <IconMenu2 />
+          </ActionIcon>
+        )}
+        <Breadcrumbs key='breadcrumbs' separator='>'>
+          {elements.map((breadcrumb, index) => {
+            return (
+              <Anchor
+                key={`${index}-${breadcrumb.name}`}
+                aria-label={`breadcrumb-${index}-${identifierString(
+                  breadcrumb.name
+                )}`}
+                onClick={(event: any) =>
+                  breadcrumb.url &&
+                  navigateToLink(breadcrumb.url, navigate, event)
+                }
+              >
+                <Group gap={4}>
+                  {breadcrumb.icon}
+                  <Text size='sm'>{breadcrumb.name}</Text>
+                </Group>
+              </Anchor>
+            );
+          })}
+        </Breadcrumbs>
+      </Group>
+    </Paper>
+  );
+}

package/src/components/nav/DetailDrawer.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const flex = style({
+  display: 'flex',
+  flex: 1
+});

package/src/components/nav/DetailDrawer.tsx

@@ -0,0 +1,105 @@
+import { ActionIcon, Divider, Drawer, Group, Stack, Text } from '@mantine/core';
+import { IconChevronLeft } from '@tabler/icons-react';
+import { useCallback, useMemo } from 'react';
+import { Link, Route, Routes, useNavigate, useParams } from 'react-router-dom';
+import type { To } from 'react-router-dom';
+
+import type { UiSizeType } from '@lib/types/Core';
+import { useLocalState } from '../../states/LocalState';
+import { StylishText } from '../items/StylishText';
+import * as classes from './DetailDrawer.css';
+
+/**
+ * @param title - drawer title
+ * @param position - drawer position
+ * @param renderContent - function used to render the drawer content
+ * @param urlPrefix - set an additional url segment, useful when multiple drawers are rendered on one page (e.g. "user/")
+ */
+export interface DrawerProps {
+  title: string;
+  position?: 'right' | 'left';
+  renderContent: (id?: string) => React.ReactNode;
+  urlPrefix?: string;
+  size?: UiSizeType;
+  closeOnEscape?: boolean;
+}
+
+function DetailDrawerComponent({
+  title,
+  position = 'right',
+  size,
+  closeOnEscape = true,
+  renderContent
+}: Readonly<DrawerProps>) {
+  const navigate = useNavigate();
+  const { id } = useParams();
+
+  const content = renderContent(id);
+  const opened = useMemo(() => !!id && !!content, [id, content]);
+
+  const [detailDrawerStack, addDetailDrawer] = useLocalState((state) => [
+    state.detailDrawerStack,
+    state.addDetailDrawer
+  ]);
+
+  return (
+    <Drawer
+      opened={opened}
+      onClose={() => {
+        navigate('../');
+        addDetailDrawer(false);
+      }}
+      position={position}
+      closeOnEscape={closeOnEscape}
+      size={size}
+      classNames={{ root: classes.flex, body: classes.flex }}
+      scrollAreaComponent={Stack}
+      title={
+        <Group>
+          {detailDrawerStack > 0 && (
+            <ActionIcon
+              variant='outline'
+              onClick={() => {
+                navigate(-1);
+                addDetailDrawer(-1);
+              }}
+            >
+              <IconChevronLeft />
+            </ActionIcon>
+          )}
+          <StylishText size='xl'>{title}</StylishText>
+        </Group>
+      }
+    >
+      <Stack gap={'xs'} className={classes.flex}>
+        <Divider />
+        {content}
+      </Stack>
+    </Drawer>
+  );
+}
+
+export function DetailDrawer(props: Readonly<DrawerProps>) {
+  return (
+    <Routes>
+      <Route path=':id?/' element={<DetailDrawerComponent {...props} />} />
+    </Routes>
+  );
+}
+
+export function DetailDrawerLink({
+  to,
+  text
+}: Readonly<{ to: To; text: string }>) {
+  const addDetailDrawer = useLocalState((state) => state.addDetailDrawer);
+
+  const onNavigate = useCallback(() => {
+    addDetailDrawer(1);
+  }, [addDetailDrawer]);
+
+  return (
+    <Link to={to} onClick={onNavigate}>
+      <Text>{text}</Text>
+    </Link>
+  );
+}

package/src/components/nav/Footer.tsx

@@ -0,0 +1,11 @@
+import * as classes from '../../main.css';
+
+export function Footer() {
+  return (
+    <div className={classes.layoutFooter}>
+      {
+        // Placeholder for footer links
+      }
+    </div>
+  );
+}