@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/calendar/OrderCalendar.tsx

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

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

package/src/components/charts/tooltipFormatter.tsx

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

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

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