@inventreedb/ui 0.0.1

package/src/components/wizards/OrderPartsWizard.tsx

@@ -0,0 +1,473 @@
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import type { ApiFormFieldSet } from '@lib/types/Forms';
+import { t } from '@lingui/core/macro';
+import { Alert, Group, Paper, Tooltip } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { IconShoppingCart } from '@tabler/icons-react';
+import { DataTable } from 'mantine-datatable';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSupplierPartFields } from '../../forms/CompanyForms';
+import { usePurchaseOrderFields } from '../../forms/PurchaseOrderForms';
+import { useCreateApiFormModal } from '../../hooks/UseForm';
+import useWizard from '../../hooks/UseWizard';
+import { PartColumn } from '../../tables/ColumnRenderers';
+import { ActionButton } from '../buttons/ActionButton';
+import { AddItemButton } from '../buttons/AddItemButton';
+import RemoveRowButton from '../buttons/RemoveRowButton';
+import { StandaloneField } from '../forms/StandaloneField';
+import Expand from '../items/Expand';
+
+/**
+ * Attributes for each selected part
+ * - part: The part instance
+ * - supplier_part: The selected supplier part instance
+ * - purchase_order: The selected purchase order instance
+ * - quantity: The quantity of the part to order
+ * - errors: Error messages for each attribute
+ */
+interface PartOrderRecord {
+  part: any;
+  supplier_part: any;
+  purchase_order: any;
+  quantity: number;
+  errors: any;
+}
+
+function SelectPartsStep({
+  records,
+  onRemovePart,
+  onSelectQuantity,
+  onSelectSupplierPart,
+  onSelectPurchaseOrder
+}: {
+  records: PartOrderRecord[];
+  onRemovePart: (part: any) => void;
+  onSelectQuantity: (partId: number, quantity: number) => void;
+  onSelectSupplierPart: (partId: number, supplierPart: any) => void;
+  onSelectPurchaseOrder: (partId: number, purchaseOrder: any) => void;
+}) {
+  const [selectedRecord, setSelectedRecord] = useState<PartOrderRecord | null>(
+    null
+  );
+
+  const purchaseOrderFields = usePurchaseOrderFields({
+    supplierId: selectedRecord?.supplier_part?.supplier
+  });
+
+  const newPurchaseOrder = useCreateApiFormModal({
+    url: apiUrl(ApiEndpoints.purchase_order_list),
+    title: t`New Purchase Order`,
+    fields: purchaseOrderFields,
+    successMessage: t`Purchase order created`,
+    onFormSuccess: (response: any) => {
+      onSelectPurchaseOrder(selectedRecord?.part.pk, response);
+    }
+  });
+
+  const supplierPartFields = useSupplierPartFields({
+    partId: selectedRecord?.part.pk
+  });
+
+  const newSupplierPart = useCreateApiFormModal({
+    url: apiUrl(ApiEndpoints.supplier_part_list),
+    title: t`New Supplier Part`,
+    fields: supplierPartFields,
+    successMessage: t`Supplier part created`,
+    onFormSuccess: (response: any) => {
+      onSelectSupplierPart(selectedRecord?.part.pk, response);
+    }
+  });
+
+  const addToOrderFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      order: {
+        value: selectedRecord?.purchase_order?.pk,
+        disabled: true
+      },
+      part: {
+        value: selectedRecord?.supplier_part?.pk,
+        disabled: true
+      },
+      reference: {},
+      quantity: {
+        // TODO: Auto-fill with the desired quantity
+      },
+      merge_items: {}
+    };
+  }, [selectedRecord]);
+
+  const addToOrder = useCreateApiFormModal({
+    url: apiUrl(ApiEndpoints.purchase_order_line_list),
+    title: t`Add to Purchase Order`,
+    fields: addToOrderFields,
+    focus: 'quantity',
+    initialData: {
+      order: selectedRecord?.purchase_order?.pk,
+      part: selectedRecord?.supplier_part?.pk,
+      quantity: selectedRecord?.quantity
+    },
+    onFormSuccess: (response: any) => {
+      // Remove the row from the list
+      onRemovePart(selectedRecord?.part);
+    },
+    successMessage: t`Part added to purchase order`
+  });
+
+  const columns: any[] = useMemo(() => {
+    return [
+      {
+        accessor: 'left_actions',
+        title: ' ',
+        width: '1%',
+        render: (record: PartOrderRecord) => (
+          <Group gap='xs' wrap='nowrap' justify='left'>
+            <RemoveRowButton onClick={() => onRemovePart(record.part)} />
+          </Group>
+        )
+      },
+      {
+        accessor: 'part',
+        title: t`Part`,
+        render: (record: PartOrderRecord) => (
+          <Tooltip label={record.part?.description}>
+            <Paper p='xs'>
+              <PartColumn part={record.part} />
+            </Paper>
+          </Tooltip>
+        )
+      },
+      {
+        accessor: 'supplier_part',
+        title: t`Supplier Part`,
+        width: '40%',
+        render: (record: PartOrderRecord) => (
+          <Group gap='xs' wrap='nowrap' justify='left'>
+            <Expand>
+              <StandaloneField
+                fieldName='supplier_part'
+                hideLabels={true}
+                error={record.errors?.supplier_part}
+                fieldDefinition={{
+                  field_type: 'related field',
+                  api_url: apiUrl(ApiEndpoints.supplier_part_list),
+                  model: ModelType.supplierpart,
+                  placeholder: t`Select supplier part`,
+                  required: true,
+                  value: record.supplier_part?.pk,
+                  onValueChange: (value, instance) => {
+                    onSelectSupplierPart(record.part.pk, instance);
+                  },
+                  filters: {
+                    part: record.part.pk,
+                    active: true,
+                    supplier_detail: true
+                  }
+                }}
+              />
+            </Expand>
+            <AddItemButton
+              tooltip={t`New supplier part`}
+              tooltipAlignment='top'
+              onClick={() => {
+                setSelectedRecord(record);
+                newSupplierPart.open();
+              }}
+            />
+          </Group>
+        )
+      },
+      {
+        accessor: 'purchase_order',
+        title: t`Purchase Order`,
+        width: '40%',
+        render: (record: PartOrderRecord) => (
+          <Group gap='xs' wrap='nowrap' justify='left'>
+            <Expand>
+              <StandaloneField
+                fieldName='purchase_order'
+                hideLabels={true}
+                fieldDefinition={{
+                  field_type: 'related field',
+                  api_url: apiUrl(ApiEndpoints.purchase_order_list),
+                  model: ModelType.purchaseorder,
+                  placeholder: t`Select purchase order`,
+                  disabled: !record.supplier_part?.supplier,
+                  value: record.purchase_order?.pk,
+                  filters: {
+                    supplier: record.supplier_part?.supplier,
+                    outstanding: true
+                  },
+                  onValueChange: (value, instance) => {
+                    onSelectPurchaseOrder(record.part.pk, instance);
+                  }
+                }}
+              />
+            </Expand>
+            <AddItemButton
+              tooltip={t`New purchase order`}
+              tooltipAlignment='top'
+              disabled={!record.supplier_part?.pk}
+              onClick={() => {
+                setSelectedRecord(record);
+                newPurchaseOrder.open();
+              }}
+            />
+          </Group>
+        )
+      },
+      {
+        accessor: 'quantity',
+        title: t`Quantity`,
+        width: 125,
+        render: (record: PartOrderRecord) => (
+          <StandaloneField
+            fieldName='quantity'
+            hideLabels={true}
+            error={record.errors?.quantity}
+            fieldDefinition={{
+              field_type: 'number',
+              required: true,
+              value: record.quantity,
+              onValueChange: (value) => {
+                onSelectQuantity(record.part.pk, value);
+              }
+            }}
+          />
+        )
+      },
+      {
+        accessor: 'right_actions',
+        title: ' ',
+        width: '1%',
+        render: (record: PartOrderRecord) => (
+          <Group grow gap='xs' wrap='nowrap' justify='right'>
+            <ActionButton
+              onClick={() => {
+                setSelectedRecord(record);
+                addToOrder.open();
+              }}
+              disabled={
+                !record.supplier_part?.pk ||
+                !record.quantity ||
+                !record.purchase_order?.pk
+              }
+              icon={<IconShoppingCart />}
+              tooltip={t`Add to selected purchase order`}
+              tooltipAlignment='top'
+              color='blue'
+            />
+          </Group>
+        )
+      }
+    ];
+  }, [onRemovePart]);
+
+  if (records.length === 0) {
+    return (
+      <Alert color='red' title={t`No parts selected`}>
+        {t`No purchaseable parts selected`}
+      </Alert>
+    );
+  }
+
+  return (
+    <>
+      <DataTable idAccessor='part.pk' columns={columns} records={records} />
+      {newPurchaseOrder.modal}
+      {newSupplierPart.modal}
+      {addToOrder.modal}
+    </>
+  );
+}
+
+export default function OrderPartsWizard({
+  parts
+}: {
+  parts: any[];
+}) {
+  // Track a list of selected parts
+  const [selectedParts, setSelectedParts] = useState<PartOrderRecord[]>([]);
+
+  // Remove a part from the selected parts list
+  const removePart = useCallback(
+    (part: any) => {
+      const records = selectedParts.filter(
+        (record: PartOrderRecord) => record.part?.pk !== part.pk
+      );
+
+      setSelectedParts(records);
+
+      // If no parts remain, close the wizard
+      if (records.length === 0) {
+        wizard.closeWizard();
+        showNotification({
+          title: t`Parts Added`,
+          message: t`All selected parts added to a purchase order`,
+          color: 'green'
+        });
+      }
+    },
+    [selectedParts]
+  );
+
+  // Select a quantity to order
+  const selectQuantity = useCallback(
+    (partId: number, quantity: number) => {
+      const records = [...selectedParts];
+
+      records.forEach((record: PartOrderRecord, index: number) => {
+        if (record.part.pk === partId) {
+          records[index].quantity = quantity;
+        }
+      });
+
+      setSelectedParts(records);
+    },
+    [selectedParts]
+  );
+
+  // Select a supplier part for a part
+  const selectSupplierPart = useCallback(
+    (partId: number, supplierPart: any) => {
+      const records = [...selectedParts];
+
+      records.forEach((record: PartOrderRecord, index: number) => {
+        if (record.part.pk === partId) {
+          records[index].supplier_part = supplierPart;
+        }
+      });
+
+      setSelectedParts(records);
+    },
+    [selectedParts]
+  );
+
+  // Select purchase order for a part
+  const selectPurchaseOrder = useCallback(
+    (partId: number, purchaseOrder: any) => {
+      const records = [...selectedParts];
+
+      records.forEach((record: PartOrderRecord, index: number) => {
+        if (record.part.pk === partId) {
+          records[index].purchase_order = purchaseOrder;
+        }
+      });
+
+      setSelectedParts(records);
+    },
+    [selectedParts]
+  );
+
+  // Render the select wizard step
+  const renderStep = useCallback(
+    (step: number) => {
+      return (
+        <SelectPartsStep
+          records={selectedParts}
+          onRemovePart={removePart}
+          onSelectQuantity={selectQuantity}
+          onSelectSupplierPart={selectSupplierPart}
+          onSelectPurchaseOrder={selectPurchaseOrder}
+        />
+      );
+    },
+    [selectedParts]
+  );
+
+  const canStepForward = useCallback(
+    (step: number): boolean => {
+      if (!selectedParts?.length) {
+        wizard.setError(t`No parts selected`);
+        wizard.setErrorDetail(t`You must select at least one part to order`);
+        return false;
+      }
+
+      let result = true;
+      const records = [...selectedParts];
+
+      // Check for errors in each part
+      selectedParts.forEach((record: PartOrderRecord, index: number) => {
+        records[index].errors = {
+          supplier_part: !record.supplier_part
+            ? t`Supplier part is required`
+            : null,
+          quantity:
+            !record.quantity || record.quantity <= 0
+              ? t`Quantity is required`
+              : null
+        };
+
+        // If any errors are found, set the result to false
+        if (Object.values(records[index].errors).some((error) => error)) {
+          result = false;
+        }
+      });
+
+      setSelectedParts(records);
+
+      if (!result) {
+        wizard.setError(t`Invalid part selection`);
+        wizard.setErrorDetail(
+          t`Please correct the errors in the selected parts`
+        );
+      }
+
+      return result;
+    },
+    [selectedParts]
+  );
+
+  // Create the wizard manager
+  const wizard = useWizard({
+    title: t`Order Parts`,
+    steps: [],
+    renderStep: renderStep,
+    canStepForward: canStepForward
+  });
+
+  // Reset the wizard to a known state when opened
+  useEffect(() => {
+    const records: PartOrderRecord[] = [];
+
+    if (wizard.opened) {
+      parts
+        .filter((part) => part.purchaseable && part.active)
+        .forEach((part) => {
+          // Prevent duplicate entries based on pk
+          if (
+            !records.find(
+              (record: PartOrderRecord) => record.part?.pk === part.pk
+            )
+          ) {
+            // TODO: Make this calculation generic and reusable
+            // Calculate the "to order" quantity
+            const required =
+              (part.minimum_stock ?? 0) +
+              (part.required_for_build_orders ?? 0) +
+              (part.required_for_sales_orders ?? 0);
+            const on_hand = part.total_in_stock ?? 0;
+            const on_order = part.ordering ?? 0;
+            const in_production = part.building ?? 0;
+
+            const to_order = required - on_hand - on_order - in_production;
+
+            records.push({
+              part: part,
+              supplier_part: undefined,
+              purchase_order: undefined,
+              quantity: Math.max(to_order, 0),
+              errors: {}
+            });
+          }
+        });
+
+      setSelectedParts(records);
+    } else {
+      setSelectedParts([]);
+    }
+  }, [wizard.opened]);
+
+  return wizard;
+}

package/src/components/wizards/WizardDrawer.tsx

@@ -0,0 +1,188 @@
+import { t } from '@lingui/core/macro';
+import {
+  ActionIcon,
+  Card,
+  Divider,
+  Drawer,
+  Group,
+  Paper,
+  Space,
+  Stack,
+  Stepper,
+  Tooltip
+} from '@mantine/core';
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  IconCircleCheck
+} from '@tabler/icons-react';
+import { type ReactNode, useCallback, useMemo } from 'react';
+import { Boundary } from '../Boundary';
+import { StylishText } from '../items/StylishText';
+
+/**
+ * Progress stepper displayed at the top of the wizard drawer.
+ */
+function WizardProgressStepper({
+  currentStep,
+  steps,
+  onSelectStep
+}: {
+  currentStep: number;
+  steps: string[];
+  onSelectStep: (step: number) => void;
+}) {
+  if (!steps || steps.length == 0) {
+    return null;
+  }
+
+  // Determine if the user can select a particular step
+  const canSelectStep = useCallback(
+    (step: number) => {
+      if (!steps || steps.length <= 1) {
+        return false;
+      }
+
+      // Only allow single-step progression
+      return Math.abs(step - currentStep) == 1;
+    },
+    [currentStep, steps]
+  );
+
+  const canStepBackward = currentStep > 0;
+  const canStepForward = currentStep < steps.length - 1;
+
+  return (
+    <Card p='xs' withBorder>
+      <Group justify='space-between' gap='xs' wrap='nowrap'>
+        <Tooltip
+          label={steps[currentStep - 1]}
+          position='top'
+          disabled={!canStepBackward}
+        >
+          <ActionIcon
+            variant='transparent'
+            onClick={() => onSelectStep(currentStep - 1)}
+            disabled={!canStepBackward}
+          >
+            <IconArrowLeft />
+          </ActionIcon>
+        </Tooltip>
+        <Stepper
+          active={currentStep}
+          onStepClick={(stepIndex: number) => onSelectStep(stepIndex)}
+          iconSize={20}
+          size='xs'
+        >
+          {steps.map((step: string, idx: number) => (
+            <Stepper.Step
+              label={step}
+              key={step}
+              aria-label={`wizard-step-${idx}`}
+              allowStepSelect={canSelectStep(idx)}
+            />
+          ))}
+        </Stepper>
+        {canStepForward ? (
+          <Tooltip
+            label={steps[currentStep + 1]}
+            position='top'
+            disabled={!canStepForward}
+          >
+            <ActionIcon
+              variant='transparent'
+              onClick={() => onSelectStep(currentStep + 1)}
+              disabled={!canStepForward}
+            >
+              <IconArrowRight />
+            </ActionIcon>
+          </Tooltip>
+        ) : (
+          <Tooltip label={t`Complete`} position='top'>
+            <ActionIcon color='green' variant='transparent'>
+              <IconCircleCheck />
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </Group>
+    </Card>
+  );
+}
+
+/**
+ * A generic "wizard" drawer, for handling multi-step processes.
+ */
+export default function WizardDrawer({
+  title,
+  currentStep,
+  steps,
+  children,
+  opened,
+  onClose,
+  onNextStep,
+  onPreviousStep
+}: {
+  title: string;
+  currentStep: number;
+  steps: string[];
+  children: ReactNode;
+  opened: boolean;
+  onClose: () => void;
+  onNextStep?: () => void;
+  onPreviousStep?: () => void;
+}) {
+  const titleBlock: ReactNode = useMemo(() => {
+    return (
+      <Stack gap='xs' style={{ width: '100%' }}>
+        <Group
+          gap='xs'
+          wrap='nowrap'
+          justify='space-between'
+          grow
+          preventGrowOverflow={false}
+        >
+          <StylishText size='xl'>{title}</StylishText>
+          <WizardProgressStepper
+            currentStep={currentStep}
+            steps={steps}
+            onSelectStep={(step: number) => {
+              if (step < currentStep) {
+                onPreviousStep?.();
+              } else {
+                onNextStep?.();
+              }
+            }}
+          />
+          <Space />
+        </Group>
+        <Divider />
+      </Stack>
+    );
+  }, [title, currentStep, steps]);
+
+  return (
+    <Drawer
+      position='bottom'
+      size={'75%'}
+      title={titleBlock}
+      withCloseButton={true}
+      closeOnEscape={false}
+      closeOnClickOutside={false}
+      styles={{
+        header: {
+          width: '100%'
+        },
+        title: {
+          width: '100%'
+        }
+      }}
+      opened={opened}
+      onClose={onClose}
+    >
+      <Boundary label='wizard-drawer'>
+        <Paper p='md'>{}</Paper>
+        {children}
+      </Boundary>
+    </Drawer>
+  );
+}

package/src/contexts/ApiContext.tsx

@@ -0,0 +1,31 @@
+import { type QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { AxiosInstance } from 'axios';
+import { createContext, useContext } from 'react';
+
+const ApiContext = createContext<AxiosInstance | null>(null);
+
+export const ApiProvider = ({
+  api,
+  client,
+  children
+}: {
+  api: AxiosInstance;
+  client: QueryClient;
+  children: React.ReactNode;
+}) => {
+  return (
+    <QueryClientProvider client={client}>
+      <ApiContext.Provider value={api}>{children}</ApiContext.Provider>
+    </QueryClientProvider>
+  );
+};
+
+export const useApi = () => {
+  const context = useContext(ApiContext);
+
+  if (!context) {
+    throw new Error('useApi must be used within an ApiProvider');
+  }
+
+  return context;
+};