@inventreedb/ui 0.0.1

package/src/components/dashboard/DashboardWidget.tsx

@@ -0,0 +1,82 @@
+import { t } from '@lingui/core/macro';
+import { ActionIcon, Box, Group, Overlay, Paper, Tooltip } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
+
+import { Boundary } from '../Boundary';
+
+/**
+ * Dashboard widget properties.
+ *
+ * @param title The title of the widget
+ * @param visible A function that returns whether the widget should be visible
+ * @param render A function that renders the widget
+ */
+export interface DashboardWidgetProps {
+  label: string;
+  title: string;
+  description: string;
+  enabled?: boolean;
+  minWidth?: number;
+  minHeight?: number;
+  render: () => JSX.Element;
+  visible?: () => boolean;
+}
+
+/**
+ * Wrapper for a dashboard widget.
+ */
+export default function DashboardWidget({
+  item,
+  editing,
+  removing,
+  onRemove
+}: Readonly<{
+  item: DashboardWidgetProps;
+  editing: boolean;
+  removing: boolean;
+  onRemove: () => void;
+}>) {
+  if (item.enabled == false) {
+    return null;
+  }
+
+  return (
+    <Paper withBorder key={item.label} shadow='sm' p='xs'>
+      <Boundary label={`dashboard-widget-${item.label}`}>
+        <Box
+          key={`dashboard-widget-${item.label}`}
+          style={{
+            width: '100%',
+            height: '100%',
+            padding: '0px',
+            margin: '0px',
+            overflowY: 'hidden'
+          }}
+        >
+          {item.render()}
+        </Box>
+        {removing && (
+          <Overlay color='black' opacity={0.7} zIndex={1000}>
+            {removing && (
+              <Group justify='right'>
+                <Tooltip
+                  label={t`Remove this widget from the dashboard`}
+                  position='bottom'
+                >
+                  <ActionIcon
+                    aria-label={`remove-dashboard-item-${item.label}`}
+                    variant='filled'
+                    color='red'
+                    onClick={onRemove}
+                  >
+                    <IconX />
+                  </ActionIcon>
+                </Tooltip>
+              </Group>
+            )}
+          </Overlay>
+        )}
+      </Boundary>
+    </Paper>
+  );
+}

package/src/components/dashboard/DashboardWidgetDrawer.tsx

@@ -0,0 +1,130 @@
+import { t } from '@lingui/core/macro';
+import {
+  ActionIcon,
+  Alert,
+  Divider,
+  Drawer,
+  Group,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+  Tooltip
+} from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import { IconBackspace, IconLayoutGridAdd } from '@tabler/icons-react';
+import { useMemo, useState } from 'react';
+
+import { useDashboardItems } from '../../hooks/UseDashboardItems';
+import { StylishText } from '../items/StylishText';
+
+/**
+ * Drawer allowing the user to add new widgets to the dashboard.
+ */
+export default function DashboardWidgetDrawer({
+  opened,
+  onClose,
+  onAddWidget,
+  currentWidgets
+}: Readonly<{
+  opened: boolean;
+  onClose: () => void;
+  onAddWidget: (widget: string) => void;
+  currentWidgets: string[];
+}>) {
+  // Load available widgets
+  const availableWidgets = useDashboardItems();
+
+  const [filter, setFilter] = useState<string>('');
+  const [filterText] = useDebouncedValue(filter, 500);
+
+  // Memoize available (not currently used) widgets
+  const unusedWidgets = useMemo(() => {
+    return (
+      availableWidgets.items.filter(
+        (widget) => !currentWidgets.includes(widget.label)
+      ) ?? []
+    );
+  }, [availableWidgets.items, currentWidgets]);
+
+  // Filter widgets based on search text
+  const filteredWidgets = useMemo(() => {
+    const words = filterText.trim().toLowerCase().split(' ');
+
+    return unusedWidgets.filter((widget) => {
+      return words.every((word) =>
+        widget.title.toLowerCase().includes(word.trim())
+      );
+    });
+  }, [unusedWidgets, filterText]);
+
+  return (
+    <Drawer
+      position='right'
+      size='50%'
+      opened={opened}
+      onClose={onClose}
+      title={
+        <Group justify='space-between' wrap='nowrap'>
+          <StylishText size='lg'>Add Dashboard Widgets</StylishText>
+        </Group>
+      }
+    >
+      <Stack gap='xs'>
+        <Divider />
+        <TextInput
+          aria-label='dashboard-widgets-filter-input'
+          placeholder={t`Filter dashboard widgets`}
+          value={filter}
+          onChange={(event) => setFilter(event.currentTarget.value)}
+          rightSection={
+            filter && (
+              <IconBackspace
+                aria-label='dashboard-widgets-filter-clear'
+                color='red'
+                onClick={() => setFilter('')}
+              />
+            )
+          }
+          styles={{ root: { width: '100%' } }}
+        />
+        <Table>
+          <Table.Tbody>
+            {filteredWidgets.map((widget) => (
+              <Table.Tr key={widget.label}>
+                <Table.Td>
+                  <Tooltip
+                    position='left'
+                    label={t`Add this widget to the dashboard`}
+                  >
+                    <ActionIcon
+                      aria-label={`add-widget-${widget.label}`}
+                      variant='transparent'
+                      color='green'
+                      onClick={() => {
+                        onAddWidget(widget.label);
+                      }}
+                    >
+                      <IconLayoutGridAdd />
+                    </ActionIcon>
+                  </Tooltip>
+                </Table.Td>
+                <Table.Td>
+                  <Text>{widget.title}</Text>
+                </Table.Td>
+                <Table.Td>
+                  <Text size='sm'>{widget.description}</Text>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+        {unusedWidgets.length === 0 && (
+          <Alert color='blue' title={t`No Widgets Available`}>
+            <Text>{t`There are no more widgets available for the dashboard`}</Text>
+          </Alert>
+        )}
+      </Stack>
+    </Drawer>
+  );
+}

package/src/components/dashboard/DashboardWidgetLibrary.tsx

@@ -0,0 +1,189 @@
+import { t } from '@lingui/core/macro';
+
+import { ModelType } from '@lib/enums/ModelType';
+import { useGlobalSettingsState } from '../../states/SettingsState';
+import type { DashboardWidgetProps } from './DashboardWidget';
+import ColorToggleDashboardWidget from './widgets/ColorToggleWidget';
+import GetStartedWidget from './widgets/GetStartedWidget';
+import LanguageSelectDashboardWidget from './widgets/LanguageSelectWidget';
+import NewsWidget from './widgets/NewsWidget';
+import QueryCountDashboardWidget from './widgets/QueryCountDashboardWidget';
+
+/**
+ *
+ * @returns A list of built-in dashboard widgets which display the number of results for a particular query
+ */
+export function BuiltinQueryCountWidgets(): DashboardWidgetProps[] {
+  const globalSettings = useGlobalSettingsState.getState();
+
+  return [
+    QueryCountDashboardWidget({
+      label: 'sub-prt',
+      title: t`Subscribed Parts`,
+      description: t`Show the number of parts which you have subscribed to`,
+      modelType: ModelType.part,
+      params: { starred: true }
+    }),
+    QueryCountDashboardWidget({
+      label: 'sub-cat',
+      title: t`Subscribed Categories`,
+      description: t`Show the number of part categories which you have subscribed to`,
+      modelType: ModelType.partcategory,
+      params: { starred: true }
+    }),
+    // TODO: 'latest parts'
+    // TODO: 'BOM waiting validation'
+    // TODO: 'recently updated stock'
+    QueryCountDashboardWidget({
+      title: t`Low Stock`,
+      label: 'low-stk',
+      description: t`Show the number of parts which are low on stock`,
+      modelType: ModelType.part,
+      params: { low_stock: true, active: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Required for Build Orders`,
+      label: 'bld-req',
+      description: t`Show parts which are required for active build orders`,
+      modelType: ModelType.part,
+      params: { stock_to_build: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Expired Stock Items`,
+      label: 'exp-stk',
+      description: t`Show the number of stock items which have expired`,
+      modelType: ModelType.stockitem,
+      params: { expired: true },
+      enabled: globalSettings.isSet('STOCK_ENABLE_EXPIRY')
+    }),
+    QueryCountDashboardWidget({
+      title: t`Stale Stock Items`,
+      label: 'stl-stk',
+      description: t`Show the number of stock items which are stale`,
+      modelType: ModelType.stockitem,
+      params: { stale: true },
+      enabled: globalSettings.isSet('STOCK_ENABLE_EXPIRY')
+    }),
+    QueryCountDashboardWidget({
+      title: t`Active Build Orders`,
+      label: 'act-bo',
+      description: t`Show the number of build orders which are currently active`,
+      modelType: ModelType.build,
+      params: { outstanding: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Overdue Build Orders`,
+      label: 'ovr-bo',
+      description: t`Show the number of build orders which are overdue`,
+      modelType: ModelType.build,
+      params: { overdue: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Assigned Build Orders`,
+      label: 'asn-bo',
+      description: t`Show the number of build orders which are assigned to you`,
+      modelType: ModelType.build,
+      params: { assigned_to_me: true, outstanding: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Active Sales Orders`,
+      label: 'act-so',
+      description: t`Show the number of sales orders which are currently active`,
+      modelType: ModelType.salesorder,
+      params: { outstanding: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Overdue Sales Orders`,
+      label: 'ovr-so',
+      description: t`Show the number of sales orders which are overdue`,
+      modelType: ModelType.salesorder,
+      params: { overdue: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Assigned Sales Orders`,
+      label: 'asn-so',
+      description: t`Show the number of sales orders which are assigned to you`,
+      modelType: ModelType.salesorder,
+      params: { assigned_to_me: true, outstanding: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Active Purchase Orders`,
+      label: 'act-po',
+      description: t`Show the number of purchase orders which are currently active`,
+      modelType: ModelType.purchaseorder,
+      params: { outstanding: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Overdue Purchase Orders`,
+      label: 'ovr-po',
+      description: t`Show the number of purchase orders which are overdue`,
+      modelType: ModelType.purchaseorder,
+      params: { overdue: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Assigned Purchase Orders`,
+      label: 'asn-po',
+      description: t`Show the number of purchase orders which are assigned to you`,
+      modelType: ModelType.purchaseorder,
+      params: { assigned_to_me: true, outstanding: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Active Return Orders`,
+      label: 'act-ro',
+      description: t`Show the number of return orders which are currently active`,
+      modelType: ModelType.returnorder,
+      params: { outstanding: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Overdue Return Orders`,
+      label: 'ovr-ro',
+      description: t`Show the number of return orders which are overdue`,
+      modelType: ModelType.returnorder,
+      params: { overdue: true }
+    }),
+    QueryCountDashboardWidget({
+      title: t`Assigned Return Orders`,
+      label: 'asn-ro',
+      description: t`Show the number of return orders which are assigned to you`,
+      modelType: ModelType.returnorder,
+      params: { assigned_to_me: true, outstanding: true }
+    })
+  ];
+}
+
+export function BuiltinGettingStartedWidgets(): DashboardWidgetProps[] {
+  return [
+    {
+      label: 'gstart',
+      title: t`Getting Started`,
+      description: t`Getting started with InvenTree`,
+      minWidth: 5,
+      minHeight: 4,
+      render: () => <GetStartedWidget />
+    },
+    {
+      label: 'news',
+      title: t`News Updates`,
+      description: t`The latest news from InvenTree`,
+      minWidth: 5,
+      minHeight: 4,
+      render: () => <NewsWidget />
+    }
+  ];
+}
+
+export function BuiltinSettingsWidgets(): DashboardWidgetProps[] {
+  return [ColorToggleDashboardWidget(), LanguageSelectDashboardWidget()];
+}
+
+/**
+ *
+ * @returns A list of built-in dashboard widgets
+ */
+export default function DashboardWidgetLibrary(): DashboardWidgetProps[] {
+  return [
+    ...BuiltinQueryCountWidgets(),
+    ...BuiltinGettingStartedWidgets(),
+    ...BuiltinSettingsWidgets()
+  ];
+}

package/src/components/dashboard/widgets/ColorToggleWidget.tsx

@@ -0,0 +1,28 @@
+import { t } from '@lingui/core/macro';
+import { Group } from '@mantine/core';
+
+import { ColorToggle } from '../../items/ColorToggle';
+import { StylishText } from '../../items/StylishText';
+import type { DashboardWidgetProps } from '../DashboardWidget';
+
+function ColorToggleWidget(title: string) {
+  return (
+    <Group justify='space-between' wrap='nowrap'>
+      <StylishText size='lg'>{title}</StylishText>
+      <ColorToggle />
+    </Group>
+  );
+}
+
+export default function ColorToggleDashboardWidget(): DashboardWidgetProps {
+  const title = t`Change Color Mode`;
+
+  return {
+    label: 'clr',
+    title: title,
+    description: t`Change the color mode of the user interface`,
+    minHeight: 1,
+    minWidth: 2,
+    render: () => ColorToggleWidget(title)
+  };
+}

package/src/components/dashboard/widgets/GetStartedWidget.tsx

@@ -0,0 +1,19 @@
+import { t } from '@lingui/core/macro';
+import { Stack } from '@mantine/core';
+import { useMemo } from 'react';
+
+import { DocumentationLinks } from '../../../defaults/links';
+import { GettingStartedCarousel } from '../../items/GettingStartedCarousel';
+import type { MenuLinkItem } from '../../items/MenuLinks';
+import { StylishText } from '../../items/StylishText';
+
+export default function GetStartedWidget() {
+  const docLinks: MenuLinkItem[] = useMemo(() => DocumentationLinks(), []);
+
+  return (
+    <Stack>
+      <StylishText size='xl'>{t`Getting Started`}</StylishText>
+      <GettingStartedCarousel items={docLinks} />
+    </Stack>
+  );
+}

package/src/components/dashboard/widgets/LanguageSelectWidget.tsx

@@ -0,0 +1,28 @@
+import { t } from '@lingui/core/macro';
+import { Stack } from '@mantine/core';
+
+import { LanguageSelect } from '../../items/LanguageSelect';
+import { StylishText } from '../../items/StylishText';
+import type { DashboardWidgetProps } from '../DashboardWidget';
+
+function LanguageSelectWidget(title: string) {
+  return (
+    <Stack gap='xs'>
+      <StylishText size='lg'>{title}</StylishText>
+      <LanguageSelect width={140} />
+    </Stack>
+  );
+}
+
+export default function LanguageSelectDashboardWidget(): DashboardWidgetProps {
+  const title = t`Change Language`;
+
+  return {
+    label: 'lngsel',
+    title: title,
+    description: t`Change the language of the user interface`,
+    minHeight: 1,
+    minWidth: 2,
+    render: () => LanguageSelectWidget(title)
+  };
+}

package/src/components/dashboard/widgets/NewsWidget.tsx

@@ -0,0 +1,143 @@
+import { t } from '@lingui/core/macro';
+import {
+  ActionIcon,
+  Alert,
+  Anchor,
+  Container,
+  ScrollArea,
+  Stack,
+  Table,
+  Text,
+  Tooltip
+} from '@mantine/core';
+import { IconMailCheck } from '@tabler/icons-react';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useMemo } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { api } from '../../../App';
+import { formatDate } from '../../../defaults/formatters';
+import { useUserState } from '../../../states/UserState';
+import { StylishText } from '../../items/StylishText';
+
+/**
+ * Render a link to an external news item
+ */
+function NewsLink({ item }: Readonly<{ item: any }>) {
+  let link: string = item.link;
+
+  if (link?.startsWith('/')) {
+    link = `https://inventree.org${link}`;
+  }
+
+  if (link) {
+    return (
+      <Anchor href={link} target='_blank'>
+        {item.title}
+      </Anchor>
+    );
+  } else {
+    return <Text>{item.title}</Text>;
+  }
+}
+
+function NewsItem({
+  item,
+  onMarkRead
+}: Readonly<{
+  item: any;
+  onMarkRead: (id: number) => void;
+}>) {
+  const date: string = item.published?.split(' ')[0] ?? '';
+  return (
+    <Table.Tr>
+      <Table.Td>{formatDate(date)}</Table.Td>
+      <Table.Td>
+        <NewsLink item={item} />
+      </Table.Td>
+      <Table.Td>
+        <Tooltip label={t`Mark as read`}>
+          <ActionIcon
+            size='sm'
+            color='green'
+            variant='transparent'
+            onClick={() => onMarkRead(item.pk)}
+          >
+            <IconMailCheck />
+          </ActionIcon>
+        </Tooltip>
+      </Table.Td>
+    </Table.Tr>
+  );
+}
+
+/**
+ * A widget which displays a list of news items on the dashboard
+ */
+export default function NewsWidget() {
+  const user = useUserState();
+
+  const newsItems = useQuery({
+    queryKey: ['news-items'],
+    queryFn: () =>
+      api
+        .get(apiUrl(ApiEndpoints.news), {
+          params: {
+            read: false
+          }
+        })
+        .then((response: any) => response.data)
+        .catch(() => [])
+  });
+
+  const markRead = useCallback(
+    (id: number) => {
+      api
+        .patch(apiUrl(ApiEndpoints.news, id), {
+          read: true
+        })
+        .then(() => {
+          newsItems.refetch();
+        })
+        .catch(() => {});
+    },
+    [newsItems]
+  );
+
+  const hasNews = useMemo(
+    () => (newsItems.data?.length ?? 0) > 0,
+    [newsItems.data]
+  );
+
+  if (!user.isSuperuser()) {
+    return (
+      <Alert color='red' title={t`Requires Superuser`}>
+        <Text>{t`This widget requires superuser permissions`}</Text>
+      </Alert>
+    );
+  }
+
+  return (
+    <Stack>
+      <StylishText size='xl'>{t`News Updates`}</StylishText>
+      <ScrollArea h={400}>
+        <Container>
+          <Table>
+            <Table.Tbody>
+              {hasNews ? (
+                newsItems.data?.map((item: any) => (
+                  <NewsItem key={item.pk} item={item} onMarkRead={markRead} />
+                ))
+              ) : (
+                <Alert color='green' title={t`No News`}>
+                  <Text>{t`There are no unread news items`}</Text>
+                </Alert>
+              )}
+            </Table.Tbody>
+          </Table>
+        </Container>
+      </ScrollArea>
+    </Stack>
+  );
+}