@inventreedb/ui 0.0.1 → 0.0.2

package/src/components/dashboard/DashboardWidgetLibrary.tsx

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

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

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

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

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

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

@@ -1,134 +0,0 @@
-import { ActionIcon, Group, Loader } from '@mantine/core';
-import { IconExternalLink } from '@tabler/icons-react';
-import { useQuery } from '@tanstack/react-query';
-import { type ReactNode, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import type { ModelType } from '@lib/enums/ModelType';
-import { apiUrl } from '@lib/functions/Api';
-import { useApi } from '../../../contexts/ApiContext';
-import {
-  InvenTreeIcon,
-  type InvenTreeIconType
-} from '../../../functions/icons';
-import { navigateToLink } from '../../../functions/navigation';
-import { useUserState } from '../../../states/UserState';
-import { StylishText } from '../../items/StylishText';
-import { ModelInformationDict } from '../../render/ModelType';
-import type { DashboardWidgetProps } from '../DashboardWidget';
-
-/**
- * A simple dashboard widget for displaying the number of results for a particular query
- */
-function QueryCountWidget({
-  modelType,
-  title,
-  icon,
-  params
-}: Readonly<{
-  modelType: ModelType;
-  title: string;
-  icon?: InvenTreeIconType;
-  params: any;
-}>): ReactNode {
-  const api = useApi();
-  const user = useUserState();
-  const navigate = useNavigate();
-
-  const modelProperties = ModelInformationDict[modelType];
-
-  const query = useQuery({
-    queryKey: ['dashboard-query-count', modelType, params],
-    enabled: user.hasViewPermission(modelType),
-    refetchOnMount: true,
-    queryFn: () => {
-      return api
-        .get(apiUrl(modelProperties.api_endpoint), {
-          params: {
-            ...params,
-            limit: 1
-          }
-        })
-        .then((res) => res.data)
-        .catch(() => {});
-    }
-  });
-
-  const onFollowLink = useCallback(
-    (event: any) => {
-      if (modelProperties.url_overview) {
-        let url = modelProperties.url_overview;
-
-        if (params) {
-          url += '?';
-          for (const key in params) {
-            url += `${key}=${params[key]}&`;
-          }
-        }
-
-        navigateToLink(url, navigate, event);
-      }
-    },
-    [modelProperties, params]
-  );
-
-  return (
-    <Group
-      gap='xs'
-      wrap='nowrap'
-      justify='space-between'
-      align='center'
-      style={{ height: '100%' }}
-    >
-      <Group gap='xs'>
-        <InvenTreeIcon icon={icon ?? modelProperties.icon} />
-        <StylishText size='md'>{title}</StylishText>
-      </Group>
-      <Group gap='xs' wrap='nowrap' justify='space-apart'>
-        <Group gap='xs' wrap='nowrap' justify='right'>
-          {query.isFetching ? (
-            <Loader size='sm' />
-          ) : (
-            <StylishText size='md'>{query.data?.count ?? '-'}</StylishText>
-          )}
-          {modelProperties?.url_overview && (
-            <ActionIcon size='sm' variant='transparent' onClick={onFollowLink}>
-              <IconExternalLink />
-            </ActionIcon>
-          )}
-        </Group>
-      </Group>
-    </Group>
-  );
-}
-
-/**
- * Construct a dashboard widget descriptor, which displays the number of results for a particular query
- */
-export default function QueryCountDashboardWidget({
-  label,
-  title,
-  description,
-  modelType,
-  enabled = true,
-  params
-}: {
-  label: string;
-  title: string;
-  description: string;
-  modelType: ModelType;
-  enabled?: boolean;
-  params: any;
-}): DashboardWidgetProps {
-  return {
-    label: label,
-    title: title,
-    description: description,
-    enabled: enabled,
-    minWidth: 2,
-    minHeight: 1,
-    render: () => (
-      <QueryCountWidget modelType={modelType} title={title} params={params} />
-    )
-  };
-}