@inventreedb/ui 0.0.1 → 0.0.3

package/src/pages/purchasing/PurchaseOrderDetail.tsx

@@ -1,547 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Accordion, Grid, Skeleton, Stack } from '@mantine/core';
-import { IconInfoCircle, IconList, IconPackages } from '@tabler/icons-react';
-import { type ReactNode, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
-
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import { ModelType } from '@lib/enums/ModelType';
-import { UserRoles } from '@lib/enums/Roles';
-import { apiUrl } from '@lib/functions/Api';
-import AdminButton from '../../components/buttons/AdminButton';
-import PrimaryActionButton from '../../components/buttons/PrimaryActionButton';
-import { PrintingActions } from '../../components/buttons/PrintingActions';
-import {
-  type DetailsField,
-  DetailsTable
-} from '../../components/details/Details';
-import { DetailsImage } from '../../components/details/DetailsImage';
-import { ItemDetailsGrid } from '../../components/details/ItemDetails';
-import {
-  BarcodeActionDropdown,
-  CancelItemAction,
-  DuplicateItemAction,
-  EditItemAction,
-  HoldItemAction,
-  OptionsActionDropdown
-} from '../../components/items/ActionDropdown';
-import { StylishText } from '../../components/items/StylishText';
-import InstanceDetail from '../../components/nav/InstanceDetail';
-import { PageDetail } from '../../components/nav/PageDetail';
-import AttachmentPanel from '../../components/panels/AttachmentPanel';
-import NotesPanel from '../../components/panels/NotesPanel';
-import type { PanelType } from '../../components/panels/Panel';
-import { PanelGroup } from '../../components/panels/PanelGroup';
-import { StatusRenderer } from '../../components/render/StatusRenderer';
-import { formatCurrency } from '../../defaults/formatters';
-import { usePurchaseOrderFields } from '../../forms/PurchaseOrderForms';
-import {
-  useCreateApiFormModal,
-  useEditApiFormModal
-} from '../../hooks/UseForm';
-import { useInstance } from '../../hooks/UseInstance';
-import useStatusCodes from '../../hooks/UseStatusCodes';
-import { useGlobalSettingsState } from '../../states/SettingsState';
-import { useUserState } from '../../states/UserState';
-import ExtraLineItemTable from '../../tables/general/ExtraLineItemTable';
-import { PurchaseOrderLineItemTable } from '../../tables/purchasing/PurchaseOrderLineItemTable';
-import { StockItemTable } from '../../tables/stock/StockItemTable';
-
-/**
- * Detail page for a single PurchaseOrder
- */
-export default function PurchaseOrderDetail() {
-  const { id } = useParams();
-
-  const user = useUserState();
-  const globalSettings = useGlobalSettingsState();
-
-  const {
-    instance: order,
-    instanceQuery,
-    refreshInstance,
-    requestStatus
-  } = useInstance({
-    endpoint: ApiEndpoints.purchase_order_list,
-    pk: id,
-    params: {
-      supplier_detail: true
-    },
-    refetchOnMount: true
-  });
-
-  const orderCurrency = useMemo(() => {
-    return (
-      order.order_currency ||
-      order.supplier_detail?.currency ||
-      globalSettings.getSetting('INVENTREE_DEFAULT_CURRENCY')
-    );
-  }, [order, globalSettings]);
-
-  const purchaseOrderFields = usePurchaseOrderFields({});
-
-  const duplicatePurchaseOrderFields = usePurchaseOrderFields({
-    duplicateOrderId: order.pk
-  });
-
-  const editPurchaseOrder = useEditApiFormModal({
-    url: ApiEndpoints.purchase_order_list,
-    pk: id,
-    title: t`Edit Purchase Order`,
-    fields: purchaseOrderFields,
-    onFormSuccess: () => {
-      refreshInstance();
-    }
-  });
-
-  const duplicatePurchaseOrderInitialData = useMemo(() => {
-    const data = { ...order };
-    // if we set the reference to null/undefined, it will be left blank in the form
-    // if we omit the reference altogether, it will be auto-generated via reference pattern
-    // from the OPTIONS response
-    delete data.reference;
-    return data;
-  }, [order]);
-
-  const duplicatePurchaseOrder = useCreateApiFormModal({
-    url: ApiEndpoints.purchase_order_list,
-    title: t`Add Purchase Order`,
-    fields: duplicatePurchaseOrderFields,
-    initialData: duplicatePurchaseOrderInitialData,
-    follow: true,
-    modelType: ModelType.purchaseorder
-  });
-
-  const detailsPanel = useMemo(() => {
-    if (instanceQuery.isFetching) {
-      return <Skeleton />;
-    }
-
-    const tl: DetailsField[] = [
-      {
-        type: 'text',
-        name: 'reference',
-        label: t`Reference`,
-        copy: true
-      },
-      {
-        type: 'text',
-        name: 'supplier_reference',
-        label: t`Supplier Reference`,
-        icon: 'reference',
-        hidden: !order.supplier_reference,
-        copy: true
-      },
-      {
-        type: 'link',
-        name: 'supplier',
-        icon: 'suppliers',
-        label: t`Supplier`,
-        model: ModelType.company
-      },
-      {
-        type: 'text',
-        name: 'description',
-        label: t`Description`,
-        copy: true
-      },
-      {
-        type: 'status',
-        name: 'status',
-        label: t`Status`,
-        model: ModelType.purchaseorder
-      },
-      {
-        type: 'status',
-        name: 'status_custom_key',
-        label: t`Custom Status`,
-        model: ModelType.purchaseorder,
-        icon: 'status',
-        hidden:
-          !order.status_custom_key || order.status_custom_key == order.status
-      }
-    ];
-
-    const tr: DetailsField[] = [
-      {
-        type: 'progressbar',
-        name: 'completed',
-        icon: 'progress',
-        label: t`Completed Line Items`,
-        total: order.line_items,
-        progress: order.completed_lines
-      },
-      {
-        type: 'link',
-        model: ModelType.stocklocation,
-        link: true,
-        name: 'destination',
-        label: t`Destination`,
-        hidden: !order.destination
-      },
-      {
-        type: 'text',
-        name: 'currency',
-        label: t`Order Currency`,
-        value_formatter: () => orderCurrency
-      },
-      {
-        type: 'text',
-        name: 'total_price',
-        label: t`Total Cost`,
-        value_formatter: () => {
-          return formatCurrency(order?.total_price, {
-            currency: order?.order_currency || order?.supplier_detail?.currency
-          });
-        }
-      }
-    ];
-
-    const bl: DetailsField[] = [
-      {
-        type: 'link',
-        external: true,
-        name: 'link',
-        label: t`Link`,
-        copy: true,
-        hidden: !order.link
-      },
-      {
-        type: 'text',
-        name: 'contact_detail.name',
-        label: t`Contact`,
-        icon: 'user',
-        copy: true,
-        hidden: !order.contact
-      },
-      {
-        type: 'text',
-        name: 'contact_detail.email',
-        label: t`Contact Email`,
-        icon: 'email',
-        copy: true,
-        hidden: !order.contact_detail?.email
-      },
-      {
-        type: 'text',
-        name: 'contact_detail.phone',
-        label: t`Contact Phone`,
-        icon: 'phone',
-        copy: true,
-        hidden: !order.contact_detail?.phone
-      },
-      {
-        type: 'text',
-        name: 'project_code_label',
-        label: t`Project Code`,
-        icon: 'reference',
-        copy: true,
-        hidden: !order.project_code
-      },
-      {
-        type: 'text',
-        name: 'responsible',
-        label: t`Responsible`,
-        badge: 'owner',
-        hidden: !order.responsible
-      }
-    ];
-
-    const br: DetailsField[] = [
-      {
-        type: 'date',
-        name: 'creation_date',
-        label: t`Creation Date`,
-        copy: true,
-        icon: 'calendar'
-      },
-      {
-        type: 'date',
-        name: 'issue_date',
-        label: t`Issue Date`,
-        icon: 'calendar',
-        copy: true,
-        hidden: !order.issue_date
-      },
-      {
-        type: 'date',
-        name: 'start_date',
-        label: t`Start Date`,
-        icon: 'calendar',
-        copy: true,
-        hidden: !order.start_date
-      },
-      {
-        type: 'date',
-        name: 'target_date',
-        label: t`Target Date`,
-        icon: 'calendar',
-        copy: true,
-        hidden: !order.target_date
-      },
-      {
-        type: 'date',
-        name: 'complete_date',
-        icon: 'calendar_check',
-        label: t`Completion Date`,
-        copy: true,
-        hidden: !order.complete_date
-      }
-    ];
-
-    return (
-      <ItemDetailsGrid>
-        <Grid grow>
-          <DetailsImage
-            appRole={UserRoles.purchase_order}
-            apiPath={ApiEndpoints.company_list}
-            src={order.supplier_detail?.image}
-            pk={order.supplier}
-          />
-          <Grid.Col span={{ base: 12, sm: 8 }}>
-            <DetailsTable fields={tl} item={order} />
-          </Grid.Col>
-        </Grid>
-        <DetailsTable fields={tr} item={order} />
-        <DetailsTable fields={bl} item={order} />
-        <DetailsTable fields={br} item={order} />
-      </ItemDetailsGrid>
-    );
-  }, [order, orderCurrency, instanceQuery]);
-
-  const orderPanels: PanelType[] = useMemo(() => {
-    return [
-      {
-        name: 'detail',
-        label: t`Order Details`,
-        icon: <IconInfoCircle />,
-        content: detailsPanel
-      },
-      {
-        name: 'line-items',
-        label: t`Line Items`,
-        icon: <IconList />,
-        content: (
-          <Accordion
-            multiple={true}
-            defaultValue={['line-items', 'extra-items']}
-          >
-            <Accordion.Item value='line-items' key='lineitems'>
-              <Accordion.Control>
-                <StylishText size='lg'>{t`Line Items`}</StylishText>
-              </Accordion.Control>
-              <Accordion.Panel>
-                <PurchaseOrderLineItemTable
-                  order={order}
-                  currency={orderCurrency}
-                  orderId={Number(id)}
-                  supplierId={Number(order.supplier)}
-                />
-              </Accordion.Panel>
-            </Accordion.Item>
-            <Accordion.Item value='extra-items' key='extraitems'>
-              <Accordion.Control>
-                <StylishText size='lg'>{t`Extra Line Items`}</StylishText>
-              </Accordion.Control>
-              <Accordion.Panel>
-                <ExtraLineItemTable
-                  endpoint={ApiEndpoints.purchase_order_extra_line_list}
-                  orderId={order.pk}
-                  currency={orderCurrency}
-                  role={UserRoles.purchase_order}
-                />
-              </Accordion.Panel>
-            </Accordion.Item>
-          </Accordion>
-        )
-      },
-      {
-        name: 'received-stock',
-        label: t`Received Stock`,
-        icon: <IconPackages />,
-        content: (
-          <StockItemTable
-            tableName='received-stock'
-            params={{
-              purchase_order: id
-            }}
-          />
-        )
-      },
-      AttachmentPanel({
-        model_type: ModelType.purchaseorder,
-        model_id: order.pk
-      }),
-      NotesPanel({
-        model_type: ModelType.purchaseorder,
-        model_id: order.pk
-      })
-    ];
-  }, [order, id, user]);
-
-  const poStatus = useStatusCodes({ modelType: ModelType.purchaseorder });
-
-  const issueOrder = useCreateApiFormModal({
-    url: apiUrl(ApiEndpoints.purchase_order_issue, order.pk),
-    title: t`Issue Purchase Order`,
-    onFormSuccess: refreshInstance,
-    preFormWarning: t`Issue this order`,
-    successMessage: t`Order issued`
-  });
-
-  const cancelOrder = useCreateApiFormModal({
-    url: apiUrl(ApiEndpoints.purchase_order_cancel, order.pk),
-    title: t`Cancel Purchase Order`,
-    onFormSuccess: refreshInstance,
-    preFormWarning: t`Cancel this order`,
-    successMessage: t`Order cancelled`
-  });
-
-  const holdOrder = useCreateApiFormModal({
-    url: apiUrl(ApiEndpoints.purchase_order_hold, order.pk),
-    title: t`Hold Purchase Order`,
-    onFormSuccess: refreshInstance,
-    preFormWarning: t`Place this order on hold`,
-    successMessage: t`Order placed on hold`
-  });
-
-  const completeOrder = useCreateApiFormModal({
-    url: apiUrl(ApiEndpoints.purchase_order_complete, order.pk),
-    title: t`Complete Purchase Order`,
-    successMessage: t`Order completed`,
-    timeout: 10000,
-    fields: {
-      accept_incomplete: {}
-    },
-    onFormSuccess: refreshInstance,
-    preFormWarning: t`Mark this order as complete`
-  });
-
-  const poActions = useMemo(() => {
-    const canEdit: boolean = user.hasChangeRole(UserRoles.purchase_order);
-
-    const canIssue: boolean =
-      canEdit &&
-      (order.status == poStatus.PENDING || order.status == poStatus.ON_HOLD);
-
-    const canHold: boolean =
-      canEdit &&
-      (order.status == poStatus.PENDING || order.status == poStatus.PLACED);
-
-    const canComplete: boolean = canEdit && order.status == poStatus.PLACED;
-
-    const canCancel: boolean =
-      canEdit &&
-      order.status != poStatus.CANCELLED &&
-      order.status != poStatus.COMPLETE;
-
-    return [
-      <PrimaryActionButton
-        title={t`Issue Order`}
-        icon='issue'
-        hidden={!canIssue}
-        color='blue'
-        onClick={issueOrder.open}
-      />,
-      <PrimaryActionButton
-        title={t`Complete Order`}
-        icon='complete'
-        hidden={!canComplete}
-        color='green'
-        onClick={completeOrder.open}
-      />,
-      <AdminButton model={ModelType.purchaseorder} id={order.pk} />,
-      <BarcodeActionDropdown
-        model={ModelType.purchaseorder}
-        pk={order.pk}
-        hash={order?.barcode_hash}
-      />,
-      <PrintingActions
-        modelType={ModelType.purchaseorder}
-        items={[order.pk]}
-        enableReports
-      />,
-      <OptionsActionDropdown
-        tooltip={t`Order Actions`}
-        actions={[
-          EditItemAction({
-            hidden: !canEdit,
-            tooltip: t`Edit order`,
-            onClick: () => {
-              editPurchaseOrder.open();
-            }
-          }),
-          DuplicateItemAction({
-            hidden: !user.hasAddRole(UserRoles.purchase_order),
-            onClick: () => duplicatePurchaseOrder.open(),
-            tooltip: t`Duplicate order`
-          }),
-          HoldItemAction({
-            tooltip: t`Hold order`,
-            hidden: !canHold,
-            onClick: holdOrder.open
-          }),
-          CancelItemAction({
-            tooltip: t`Cancel order`,
-            hidden: !canCancel,
-            onClick: cancelOrder.open
-          })
-        ]}
-      />
-    ];
-  }, [id, order, user, poStatus]);
-
-  const orderBadges: ReactNode[] = useMemo(() => {
-    return instanceQuery.isLoading
-      ? []
-      : [
-          <StatusRenderer
-            status={order.status_custom_key}
-            type={ModelType.purchaseorder}
-            options={{ size: 'lg' }}
-          />
-        ];
-  }, [order, instanceQuery]);
-
-  return (
-    <>
-      {issueOrder.modal}
-      {holdOrder.modal}
-      {cancelOrder.modal}
-      {completeOrder.modal}
-      {editPurchaseOrder.modal}
-      {duplicatePurchaseOrder.modal}
-      <InstanceDetail
-        status={requestStatus}
-        loading={instanceQuery.isFetching}
-        requiredRole={UserRoles.purchase_order}
-      >
-        <Stack gap='xs'>
-          <PageDetail
-            title={`${t`Purchase Order`}: ${order.reference}`}
-            subtitle={order.description}
-            imageUrl={order.supplier_detail?.image}
-            breadcrumbs={[{ name: t`Purchasing`, url: '/purchasing/' }]}
-            lastCrumb={[
-              {
-                name: order.reference,
-                url: `/purchasing/purchase-order/${order.pk}`
-              }
-            ]}
-            actions={poActions}
-            badges={orderBadges}
-            editAction={editPurchaseOrder.open}
-            editEnabled={user.hasChangePermission(ModelType.purchaseorder)}
-          />
-          <PanelGroup
-            pageKey='purchaseorder'
-            panels={orderPanels}
-            model={ModelType.purchaseorder}
-            instance={order}
-            id={order.pk}
-          />
-        </Stack>
-      </InstanceDetail>
-    </>
-  );
-}

package/src/pages/purchasing/PurchasingIndex.tsx

@@ -1,131 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Stack } from '@mantine/core';
-import {
-  IconBuildingFactory2,
-  IconBuildingStore,
-  IconBuildingWarehouse,
-  IconCalendar,
-  IconPackageExport,
-  IconShoppingCart,
-  IconTable
-} from '@tabler/icons-react';
-import { useMemo } from 'react';
-
-import { ModelType } from '@lib/enums/ModelType';
-import { UserRoles } from '@lib/enums/Roles';
-import { useLocalStorage } from '@mantine/hooks';
-import SegmentedIconControl from '../../components/buttons/SegmentedIconControl';
-import OrderCalendar from '../../components/calendar/OrderCalendar';
-import PermissionDenied from '../../components/errors/PermissionDenied';
-import { PageDetail } from '../../components/nav/PageDetail';
-import { PanelGroup } from '../../components/panels/PanelGroup';
-import { useUserState } from '../../states/UserState';
-import { CompanyTable } from '../../tables/company/CompanyTable';
-import { ManufacturerPartTable } from '../../tables/purchasing/ManufacturerPartTable';
-import { PurchaseOrderTable } from '../../tables/purchasing/PurchaseOrderTable';
-import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
-
-function PurchaseOrderOverview({
-  view
-}: {
-  view: string;
-}) {
-  switch (view) {
-    case 'calendar':
-      return (
-        <OrderCalendar
-          model={ModelType.purchaseorder}
-          role={UserRoles.purchase_order}
-          params={{ outstanding: true }}
-        />
-      );
-    case 'table':
-    default:
-      return <PurchaseOrderTable />;
-  }
-}
-
-export default function PurchasingIndex() {
-  const user = useUserState();
-
-  const [purchaseOrderView, setpurchaseOrderView] = useLocalStorage<string>({
-    key: 'purchaseOrderView',
-    defaultValue: 'table'
-  });
-
-  const panels = useMemo(() => {
-    return [
-      {
-        name: 'purchaseorders',
-        label: t`Purchase Orders`,
-        icon: <IconShoppingCart />,
-        hidden: !user.hasViewRole(UserRoles.purchase_order),
-        content: <PurchaseOrderOverview view={purchaseOrderView} />,
-        controls: (
-          <SegmentedIconControl
-            value={purchaseOrderView}
-            onChange={setpurchaseOrderView}
-            data={[
-              { value: 'table', label: t`Table View`, icon: <IconTable /> },
-              {
-                value: 'calendar',
-                label: t`Calendar View`,
-                icon: <IconCalendar />
-              }
-            ]}
-          />
-        )
-      },
-      {
-        name: 'suppliers',
-        label: t`Suppliers`,
-        icon: <IconBuildingStore />,
-        content: (
-          <CompanyTable
-            path='purchasing/supplier'
-            params={{ is_supplier: true }}
-          />
-        )
-      },
-      {
-        name: 'supplier-parts',
-        label: t`Supplier Parts`,
-        icon: <IconPackageExport />,
-        content: <SupplierPartTable params={{}} />
-      },
-      {
-        name: 'manufacturer',
-        label: t`Manufacturers`,
-        icon: <IconBuildingFactory2 />,
-        content: (
-          <CompanyTable
-            path='purchasing/manufacturer'
-            params={{ is_manufacturer: true }}
-          />
-        )
-      },
-      {
-        name: 'manufacturer-parts',
-        label: t`Manufacturer Parts`,
-        icon: <IconBuildingWarehouse />,
-        content: <ManufacturerPartTable params={{}} />
-      }
-    ];
-  }, [user, purchaseOrderView]);
-
-  if (!user.isLoggedIn() || !user.hasViewRole(UserRoles.purchase_order)) {
-    return <PermissionDenied />;
-  }
-
-  return (
-    <Stack>
-      <PageDetail title={t`Purchasing`} />
-      <PanelGroup
-        pageKey='purchasing-index'
-        panels={panels}
-        model={'purchasing'}
-        id={null}
-      />
-    </Stack>
-  );
-}