@inventreedb/ui 0.0.1

package/src/components/calendar/OrderCalendar.tsx

@@ -0,0 +1,209 @@
+import type {
+  EventChangeArg,
+  EventClickArg,
+  EventContentArg
+} from '@fullcalendar/core';
+import type { ModelType } from '@lib/enums/ModelType';
+import type { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import { t } from '@lingui/core/macro';
+import { ActionIcon, Group, Text } from '@mantine/core';
+import { hideNotification, showNotification } from '@mantine/notifications';
+import {
+  IconCalendarExclamation,
+  IconCircleCheck,
+  IconExclamationCircle
+} from '@tabler/icons-react';
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../../App';
+import { navigateToLink } from '../../functions/navigation';
+import { getDetailUrl } from '../../functions/urls';
+import useCalendar from '../../hooks/UseCalendar';
+import { useUserState } from '../../states/UserState';
+import {
+  AssignedToMeFilter,
+  HasProjectCodeFilter,
+  OrderStatusFilter,
+  ProjectCodeFilter,
+  ResponsibleFilter
+} from '../../tables/Filter';
+import { ModelInformationDict } from '../render/ModelType';
+import { StatusRenderer } from '../render/StatusRenderer';
+import Calendar from './Calendar';
+
+/**
+ * A generic calendar component for displaying orders
+ * This can be used for the following order types:
+ * - BuildOrder
+ * - PurchaseOrder
+ * - SalesOrder
+ * - ReturnOrder
+ */
+
+export default function OrderCalendar({
+  model,
+  role,
+  params,
+  filters
+}: {
+  model: ModelType;
+  role: UserRoles;
+  params: Record<string, any>;
+  filters?: TableFilter[];
+}) {
+  const navigate = useNavigate();
+  const user = useUserState();
+
+  // These filters apply to all order types
+  const orderFilters: TableFilter[] = useMemo(() => {
+    return [
+      OrderStatusFilter({ model: model }),
+      AssignedToMeFilter(),
+      ProjectCodeFilter(),
+      HasProjectCodeFilter(),
+      ResponsibleFilter()
+    ];
+  }, [model]);
+
+  // Complete set of available filters
+  const calendarFilters: TableFilter[] = useMemo(() => {
+    return [...orderFilters, ...(filters ?? [])];
+  }, [orderFilters, filters]);
+
+  const modelInfo = useMemo(() => {
+    return ModelInformationDict[model];
+  }, [model]);
+
+  const canEdit = useMemo(() => {
+    return user.hasChangeRole(role);
+  }, [user, role]);
+
+  const calendarState = useCalendar({
+    endpoint: modelInfo.api_endpoint,
+    name: model.toString(),
+    queryParams: params
+  });
+
+  // Build the events
+  const events = useMemo(() => {
+    const today = dayjs().format('YYYY-MM-DD');
+
+    return (
+      calendarState.data?.map((order: any) => {
+        const start: string =
+          order.start_date || order.issue_date || order.creation_date || today;
+        const end: string = order.target_date || start;
+
+        return {
+          id: order.pk,
+          title: order.reference,
+          description: order.description,
+          start: start,
+          end: end,
+          startEditable: canEdit,
+          durationEditable: canEdit
+        };
+      }) ?? []
+    );
+  }, [calendarState.data, canEdit]);
+
+  // Callback when Order is edited
+  const onEditOrder = (info: EventChangeArg) => {
+    const orderId = info.event.id;
+    const patch: Record<string, string> = {};
+
+    if (info.event.start && info.event.start != info.oldEvent.start) {
+      patch.start_date = dayjs(info.event.start).format('YYYY-MM-DD');
+    }
+
+    if (info.event.end && info.event.end != info.oldEvent.end) {
+      patch.target_date = dayjs(info.event.end).format('YYYY-MM-DD');
+    }
+
+    if (!!patch) {
+      api
+        .patch(apiUrl(modelInfo.api_endpoint, orderId), patch)
+        .then(() => {
+          hideNotification('calendar-edit-result');
+          showNotification({
+            id: 'calendar-edit-result',
+            message: t`Order Updated`,
+            color: 'green',
+            icon: <IconCircleCheck />
+          });
+        })
+        .catch(() => {
+          info.revert();
+          hideNotification('calendar-edit-result');
+          showNotification({
+            id: 'calendar-edit-result',
+            message: t`Error updating order`,
+            color: 'red',
+            icon: <IconExclamationCircle />
+          });
+        });
+    }
+  };
+
+  // Callback when PurchaseOrder is clicked
+  const onClickOrder = (info: EventClickArg) => {
+    if (!!info.event.id) {
+      navigateToLink(
+        getDetailUrl(model, info.event.id),
+        navigate,
+        info.jsEvent
+      );
+    }
+  };
+
+  const renderOrder = useCallback(
+    (event: EventContentArg) => {
+      const order = calendarState.data?.find(
+        (order: any) => order.pk.toString() == event.event.id.toString()
+      );
+
+      if (!order) {
+        // Fallback to the event title if no order is found
+        return event.event.title;
+      }
+
+      return (
+        <Group gap='xs' wrap='nowrap'>
+          {order.overdue && (
+            <ActionIcon
+              color='orange-7'
+              variant='transparent'
+              title={t`Overdue`}
+            >
+              <IconCalendarExclamation />
+            </ActionIcon>
+          )}
+          <Text size='sm' fw={700}>
+            {order.reference}
+          </Text>
+          <Text size='xs'>{order.description ?? order.title}</Text>
+          <StatusRenderer status={order.status} type={model} />
+        </Group>
+      );
+    },
+    [calendarState.data, model]
+  );
+
+  return (
+    <Calendar
+      enableDownload
+      enableFilters
+      enableSearch
+      events={events}
+      state={calendarState}
+      filters={calendarFilters}
+      editable={true}
+      eventContent={renderOrder}
+      eventClick={onClickOrder}
+      eventChange={onEditOrder}
+    />
+  );
+}

package/src/components/charts/colors.tsx

@@ -0,0 +1,12 @@
+export const CHART_COLORS: string[] = [
+  'blue',
+  'teal',
+  'lime',
+  'yellow',
+  'grape',
+  'red',
+  'orange',
+  'green',
+  'indigo',
+  'pink'
+];

package/src/components/charts/tooltipFormatter.tsx

@@ -0,0 +1,12 @@
+import { formatCurrency } from '../../defaults/formatters';
+
+/*
+ * Render a chart label for a currency graph
+ */
+export function tooltipFormatter(value: any, currency?: string) {
+  return (
+    formatCurrency(value, {
+      currency: currency
+    })?.toString() ?? value.toString()
+  );
+}

package/src/components/dashboard/DashboardLayout.tsx

@@ -0,0 +1,327 @@
+import { t } from '@lingui/core/macro';
+import { Alert, Card, Center, Loader, Text } from '@mantine/core';
+import { useDisclosure, useHotkeys } from '@mantine/hooks';
+import { IconInfoCircle } from '@tabler/icons-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { type Layout, Responsive, WidthProvider } from 'react-grid-layout';
+
+import { useDashboardItems } from '../../hooks/UseDashboardItems';
+import { useUserState } from '../../states/UserState';
+import DashboardMenu from './DashboardMenu';
+import DashboardWidget, { type DashboardWidgetProps } from './DashboardWidget';
+import DashboardWidgetDrawer from './DashboardWidgetDrawer';
+
+const ReactGridLayout = WidthProvider(Responsive);
+
+/**
+ * Save the dashboard layout to local storage
+ */
+function saveDashboardLayout(layouts: any, userId: number | undefined): void {
+  const reducedLayouts: any = {};
+
+  // Reduce the layouts to exclude default attributes from the dataset
+  Object.keys(layouts).forEach((key) => {
+    reducedLayouts[key] = layouts[key].map((item: Layout) => {
+      return {
+        ...item,
+        moved: item.moved ? true : undefined,
+        static: item.static ? true : undefined
+      };
+    });
+  });
+
+  const data = JSON.stringify(reducedLayouts);
+
+  if (userId) {
+    localStorage?.setItem(`dashboard-layout-${userId}`, data);
+  }
+
+  localStorage?.setItem('dashboard-layout', data);
+}
+
+/**
+ * Load the dashboard layout from local storage
+ */
+function loadDashboardLayout(
+  userId: number | undefined
+): Record<string, Layout[]> {
+  let layout = userId && localStorage?.getItem(`dashboard-layout-${userId}`);
+
+  if (!layout) {
+    // Fallback to global layout
+    layout = localStorage?.getItem('dashboard-layout');
+  }
+
+  if (layout) {
+    return JSON.parse(layout);
+  } else {
+    return {};
+  }
+}
+
+/**
+ * Save the list of selected widgets to local storage
+ */
+function saveDashboardWidgets(
+  widgets: string[],
+  userId: number | undefined
+): void {
+  const data = JSON.stringify(widgets);
+
+  if (userId) {
+    localStorage?.setItem(`dashboard-widgets-${userId}`, data);
+  }
+
+  localStorage?.setItem('dashboard-widgets', data);
+}
+
+/**
+ * Load the list of selected widgets from local storage
+ */
+function loadDashboardWidgets(userId: number | undefined): string[] {
+  let widgets = userId && localStorage?.getItem(`dashboard-widgets-${userId}`);
+
+  if (!widgets) {
+    // Fallback to global widget list
+    widgets = localStorage?.getItem('dashboard-widgets');
+  }
+
+  if (widgets) {
+    return JSON.parse(widgets);
+  } else {
+    return [];
+  }
+}
+
+export default function DashboardLayout() {
+  const user = useUserState();
+
+  // Dashboard layout definition
+  const [layouts, setLayouts] = useState({});
+
+  // Dashboard widget selection
+  const [widgets, setWidgets] = useState<DashboardWidgetProps[]>([]);
+
+  const [editing, setEditing] = useDisclosure(false);
+  const [removing, setRemoving] = useDisclosure(false);
+
+  const [
+    widgetDrawerOpened,
+    { open: openWidgetDrawer, close: closeWidgetDrawer }
+  ] = useDisclosure(false);
+
+  const [loaded, setLoaded] = useState(false);
+
+  // Keyboard shortcut for editing the dashboard layout
+  useHotkeys([
+    [
+      'mod+E',
+      () => {
+        setEditing.toggle();
+      }
+    ]
+  ]);
+
+  // Load available widgets
+  const availableWidgets = useDashboardItems();
+
+  const widgetLabels = useMemo(() => {
+    return widgets.map((widget: DashboardWidgetProps) => widget.label);
+  }, [widgets]);
+
+  // Save the selected widgets to local storage when the selection changes
+  useEffect(() => {
+    if (loaded) {
+      saveDashboardWidgets(widgetLabels, user.userId());
+    }
+  }, [widgetLabels]);
+
+  /**
+   * Callback function to add a new widget to the dashboard
+   */
+  const addWidget = useCallback(
+    (widget: string) => {
+      const newWidget = availableWidgets.items.find(
+        (wid) => wid.label === widget
+      );
+
+      if (newWidget) {
+        setWidgets([...widgets, newWidget]);
+      }
+
+      // Update the layouts to include the new widget (and enforce initial size)
+      const _layouts: any = { ...layouts };
+
+      Object.keys(_layouts).forEach((key) => {
+        _layouts[key] = updateLayoutForWidget(_layouts[key], widgets, true);
+      });
+
+      setLayouts(_layouts);
+    },
+    [availableWidgets.items, widgets, layouts]
+  );
+
+  /**
+   * Callback function to remove a widget from the dashboard
+   */
+  const removeWidget = useCallback(
+    (widget: string) => {
+      // Remove the widget from the list
+      setWidgets(widgets.filter((item) => item.label !== widget));
+
+      // Remove the widget from the layout
+      const _layouts: any = { ...layouts };
+
+      Object.keys(_layouts).forEach((key) => {
+        _layouts[key] = _layouts[key].filter(
+          (item: Layout) => item.i !== widget
+        );
+      });
+
+      setLayouts(_layouts);
+    },
+    [widgets, layouts]
+  );
+
+  // When the layout is rendered, ensure that the widget attributes are observed
+  const updateLayoutForWidget = useCallback(
+    (layout: any[], widgets: any[], overrideSize: boolean) => {
+      return layout.map((item: Layout): Layout => {
+        // Find the matching widget
+        const widget = widgets.find(
+          (widget: DashboardWidgetProps) => widget.label === item.i
+        );
+
+        const minH = widget?.minHeight ?? 2;
+        const minW = widget?.minWidth ?? 1;
+
+        let w = Math.max(item.w ?? 1, minW);
+        let h = Math.max(item.h ?? 1, minH);
+
+        if (overrideSize) {
+          w = minW;
+          h = minH;
+        }
+
+        return {
+          ...item,
+          w: w,
+          h: h,
+          minH: minH,
+          minW: minW
+        };
+      });
+    },
+    []
+  );
+
+  // Rebuild layout when the widget list changes
+  useEffect(() => {
+    onLayoutChange({}, layouts);
+  }, [widgets]);
+
+  const onLayoutChange = useCallback(
+    (layout: any, newLayouts: any) => {
+      // Reconstruct layouts based on the widget requirements
+      Object.keys(newLayouts).forEach((key) => {
+        newLayouts[key] = updateLayoutForWidget(
+          newLayouts[key],
+          widgets,
+          false
+        );
+      });
+
+      if (layouts && loaded && availableWidgets.loaded) {
+        saveDashboardLayout(newLayouts, user.userId());
+        setLayouts(newLayouts);
+      }
+    },
+    [loaded, widgets, availableWidgets.loaded]
+  );
+
+  // Load the dashboard layout from local storage
+  useEffect(() => {
+    if (availableWidgets.loaded) {
+      const initialLayouts = loadDashboardLayout(user.userId());
+      const initialWidgetLabels = loadDashboardWidgets(user.userId());
+
+      setLayouts(initialLayouts);
+      setWidgets(
+        availableWidgets.items.filter((widget) =>
+          initialWidgetLabels.includes(widget.label)
+        )
+      );
+
+      setLoaded(true);
+    }
+  }, [availableWidgets.loaded]);
+
+  return (
+    <>
+      <DashboardWidgetDrawer
+        opened={widgetDrawerOpened}
+        onClose={closeWidgetDrawer}
+        onAddWidget={addWidget}
+        currentWidgets={widgetLabels}
+      />
+      <DashboardMenu
+        onAddWidget={openWidgetDrawer}
+        onStartEdit={setEditing.open}
+        onStartRemove={setRemoving.open}
+        onAcceptLayout={() => {
+          setEditing.close();
+          setRemoving.close();
+        }}
+        editing={editing}
+        removing={removing}
+      />
+      {layouts && loaded && availableWidgets.loaded ? (
+        <>
+          {widgetLabels.length == 0 ? (
+            <Center>
+              <Card shadow='xs' padding='xl' style={{ width: '100%' }}>
+                <Alert
+                  color='blue'
+                  title={t`No Widgets Selected`}
+                  icon={<IconInfoCircle />}
+                >
+                  <Text>{t`Use the menu to add widgets to the dashboard`}</Text>
+                </Alert>
+              </Card>
+            </Center>
+          ) : (
+            <ReactGridLayout
+              className='dashboard-layout'
+              breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+              cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+              rowHeight={64}
+              layouts={layouts}
+              onLayoutChange={onLayoutChange}
+              compactType={'vertical'}
+              isDraggable={editing}
+              isResizable={editing}
+              margin={[10, 10]}
+              containerPadding={[0, 0]}
+              resizeHandles={['ne', 'se', 'sw', 'nw']}
+            >
+              {widgets.map((item: DashboardWidgetProps) => {
+                return DashboardWidget({
+                  item: item,
+                  editing: editing,
+                  removing: removing,
+                  onRemove: () => {
+                    removeWidget(item.label);
+                  }
+                });
+              })}
+            </ReactGridLayout>
+          )}
+        </>
+      ) : (
+        <Center>
+          <Loader size='xl' />
+        </Center>
+      )}
+    </>
+  );
+}

package/src/components/dashboard/DashboardMenu.tsx

@@ -0,0 +1,136 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  ActionIcon,
+  Group,
+  Indicator,
+  Menu,
+  Paper,
+  Tooltip
+} from '@mantine/core';
+import {
+  IconCircleCheck,
+  IconDotsVertical,
+  IconLayout2,
+  IconLayoutGridAdd,
+  IconLayoutGridRemove
+} from '@tabler/icons-react';
+import { useMemo } from 'react';
+
+import useInstanceName from '../../hooks/UseInstanceName';
+import { useUserState } from '../../states/UserState';
+import { StylishText } from '../items/StylishText';
+
+/**
+ * A menu for editing the dashboard layout
+ */
+export default function DashboardMenu({
+  editing,
+  removing,
+  onAddWidget,
+  onStartEdit,
+  onStartRemove,
+  onAcceptLayout
+}: Readonly<{
+  editing: boolean;
+  removing: boolean;
+  onAddWidget: () => void;
+  onStartEdit: () => void;
+  onStartRemove: () => void;
+  onAcceptLayout: () => void;
+}>) {
+  const user = useUserState();
+  const instanceName = useInstanceName();
+
+  const title = useMemo(() => {
+    const username = user.username();
+
+    return (
+      <StylishText size='lg'>{`${instanceName} - ${username}`}</StylishText>
+    );
+  }, [user, instanceName]);
+
+  return (
+    <Paper p='sm' pr={0}>
+      <Group justify='space-between' wrap='nowrap'>
+        {title}
+
+        <Group justify='right' wrap='nowrap'>
+          {(editing || removing) && (
+            <Tooltip label={t`Accept Layout`} onClick={onAcceptLayout}>
+              <ActionIcon
+                aria-label={'dashboard-accept-layout'}
+                color='green'
+                variant='transparent'
+              >
+                <IconCircleCheck />
+              </ActionIcon>
+            </Tooltip>
+          )}
+          <Menu
+            shadow='md'
+            width={200}
+            openDelay={100}
+            closeDelay={400}
+            position='bottom-end'
+          >
+            <Menu.Target>
+              <Indicator
+                color='red'
+                position='bottom-center'
+                processing
+                disabled={!editing}
+              >
+                <ActionIcon variant='transparent' aria-label='dashboard-menu'>
+                  <IconDotsVertical />
+                </ActionIcon>
+              </Indicator>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              <Menu.Label>
+                <Trans>Dashboard</Trans>
+              </Menu.Label>
+
+              {!editing && !removing && (
+                <Menu.Item
+                  leftSection={<IconLayout2 color='blue' size={14} />}
+                  onClick={onStartEdit}
+                >
+                  <Trans>Edit Layout</Trans>
+                </Menu.Item>
+              )}
+
+              {!editing && !removing && (
+                <Menu.Item
+                  leftSection={<IconLayoutGridAdd color='green' size={14} />}
+                  onClick={onAddWidget}
+                >
+                  <Trans>Add Widget</Trans>
+                </Menu.Item>
+              )}
+
+              {!editing && !removing && (
+                <Menu.Item
+                  leftSection={<IconLayoutGridRemove color='red' size={14} />}
+                  onClick={onStartRemove}
+                >
+                  <Trans>Remove Widgets</Trans>
+                </Menu.Item>
+              )}
+
+              {(editing || removing) && (
+                <Menu.Item
+                  leftSection={<IconCircleCheck color='green' size={14} />}
+                  onClick={onAcceptLayout}
+                >
+                  <Trans>Accept Layout</Trans>
+                </Menu.Item>
+              )}
+            </Menu.Dropdown>
+          </Menu>
+        </Group>
+      </Group>
+    </Paper>
+  );
+}