@inventreedb/ui 0.0.1

package/src/tables/purchasing/PurchaseOrderTable.tsx

@@ -0,0 +1,193 @@
+import { t } from '@lingui/core/macro';
+import { useMemo } from 'react';
+
+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 type { TableFilter } from '@lib/types/Filters';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { Thumbnail } from '../../components/images/Thumbnail';
+import { formatCurrency } from '../../defaults/formatters';
+import { usePurchaseOrderFields } from '../../forms/PurchaseOrderForms';
+import { useCreateApiFormModal } from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import {
+  CompletionDateColumn,
+  CreatedByColumn,
+  CreationDateColumn,
+  DescriptionColumn,
+  LineItemsProgressColumn,
+  ProjectCodeColumn,
+  ReferenceColumn,
+  ResponsibleColumn,
+  StartDateColumn,
+  StatusColumn,
+  TargetDateColumn
+} from '../ColumnRenderers';
+import {
+  AssignedToMeFilter,
+  CompletedAfterFilter,
+  CompletedBeforeFilter,
+  CreatedAfterFilter,
+  CreatedBeforeFilter,
+  CreatedByFilter,
+  HasProjectCodeFilter,
+  MaxDateFilter,
+  MinDateFilter,
+  OrderStatusFilter,
+  OutstandingFilter,
+  OverdueFilter,
+  ProjectCodeFilter,
+  ResponsibleFilter,
+  StartDateAfterFilter,
+  StartDateBeforeFilter,
+  TargetDateAfterFilter,
+  TargetDateBeforeFilter
+} from '../Filter';
+import { InvenTreeTable } from '../InvenTreeTable';
+
+/**
+ * Display a table of purchase orders
+ */
+export function PurchaseOrderTable({
+  supplierId,
+  supplierPartId
+}: Readonly<{
+  supplierId?: number;
+  supplierPartId?: number;
+}>) {
+  const table = useTable('purchase-order');
+  const user = useUserState();
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      OrderStatusFilter({ model: ModelType.purchaseorder }),
+      OutstandingFilter(),
+      OverdueFilter(),
+      AssignedToMeFilter(),
+      MinDateFilter(),
+      MaxDateFilter(),
+      CreatedBeforeFilter(),
+      CreatedAfterFilter(),
+      TargetDateBeforeFilter(),
+      TargetDateAfterFilter(),
+      StartDateBeforeFilter(),
+      StartDateAfterFilter(),
+      {
+        name: 'has_target_date',
+        type: 'boolean',
+        label: t`Has Target Date`,
+        description: t`Show orders with a target date`
+      },
+      {
+        name: 'has_start_date',
+        type: 'boolean',
+        label: t`Has Start Date`,
+        description: t`Show orders with a start date`
+      },
+      CompletedBeforeFilter(),
+      CompletedAfterFilter(),
+      ProjectCodeFilter(),
+      HasProjectCodeFilter(),
+      ResponsibleFilter(),
+      CreatedByFilter()
+    ];
+  }, []);
+
+  const tableColumns = useMemo(() => {
+    return [
+      ReferenceColumn({}),
+      DescriptionColumn({}),
+      {
+        accessor: 'supplier__name',
+        title: t`Supplier`,
+        sortable: true,
+        render: (record: any) => {
+          const supplier = record.supplier_detail ?? {};
+
+          return (
+            <Thumbnail
+              src={supplier?.image}
+              alt={supplier.name}
+              text={supplier.name}
+            />
+          );
+        }
+      },
+      {
+        accessor: 'supplier_reference'
+      },
+      LineItemsProgressColumn(),
+      StatusColumn({ model: ModelType.purchaseorder }),
+      ProjectCodeColumn({}),
+      CreationDateColumn({}),
+      CreatedByColumn({}),
+      StartDateColumn({}),
+      TargetDateColumn({}),
+      CompletionDateColumn({
+        accessor: 'complete_date'
+      }),
+      {
+        accessor: 'total_price',
+        title: t`Total Price`,
+        sortable: true,
+        render: (record: any) => {
+          return formatCurrency(record.total_price, {
+            currency: record.order_currency || record.supplier_detail?.currency
+          });
+        }
+      },
+      ResponsibleColumn({})
+    ];
+  }, []);
+
+  const purchaseOrderFields = usePurchaseOrderFields({});
+
+  const newPurchaseOrder = useCreateApiFormModal({
+    url: ApiEndpoints.purchase_order_list,
+    title: t`Add Purchase Order`,
+    fields: purchaseOrderFields,
+    initialData: {
+      supplier: supplierId
+    },
+    follow: true,
+    modelType: ModelType.purchaseorder
+  });
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add-purchase-order'
+        tooltip={t`Add Purchase Order`}
+        onClick={() => newPurchaseOrder.open()}
+        hidden={!user.hasAddRole(UserRoles.purchase_order)}
+      />
+    ];
+  }, [user]);
+
+  return (
+    <>
+      {newPurchaseOrder.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.purchase_order_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          params: {
+            supplier_detail: true,
+            supplier: supplierId,
+            supplier_part: supplierPartId
+          },
+          tableFilters: tableFilters,
+          tableActions: tableActions,
+          modelType: ModelType.purchaseorder,
+          enableSelection: true,
+          enableDownload: true,
+          enableReports: true
+        }}
+      />
+    </>
+  );
+}

package/src/tables/purchasing/SupplierPartTable.tsx

@@ -0,0 +1,281 @@
+import { t } from '@lingui/core/macro';
+import { Text } from '@mantine/core';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
+
+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 type { TableFilter } from '@lib/types/Filters';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { Thumbnail } from '../../components/images/Thumbnail';
+import { useSupplierPartFields } from '../../forms/CompanyForms';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import {
+  BooleanColumn,
+  DescriptionColumn,
+  LinkColumn,
+  NoteColumn,
+  PartColumn
+} from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { TableHoverCard } from '../TableHoverCard';
+
+/*
+ * Construct a table listing supplier parts
+ */
+
+export function SupplierPartTable({
+  params
+}: Readonly<{ params: any }>): ReactNode {
+  const table = useTable('supplierparts');
+
+  const user = useUserState();
+
+  // Construct table columns for this table
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'part',
+        switchable: 'part' in params,
+        sortable: true,
+        render: (record: any) =>
+          PartColumn({ part: record?.part_detail, full_name: true })
+      },
+      {
+        accessor: 'supplier',
+        sortable: true,
+        render: (record: any) => {
+          const supplier = record?.supplier_detail ?? {};
+
+          return supplier?.pk ? (
+            <Thumbnail
+              src={supplier?.thumbnail ?? supplier.image}
+              text={supplier.name}
+            />
+          ) : (
+            '-'
+          );
+        }
+      },
+      {
+        accessor: 'SKU',
+        title: t`Supplier Part`,
+        sortable: true
+      },
+      DescriptionColumn({}),
+      {
+        accessor: 'manufacturer',
+        title: t`Manufacturer`,
+        sortable: true,
+        render: (record: any) => {
+          const manufacturer = record?.manufacturer_detail ?? {};
+
+          return manufacturer?.pk ? (
+            <Thumbnail
+              src={manufacturer?.thumbnail ?? manufacturer.image}
+              text={manufacturer.name}
+            />
+          ) : (
+            '-'
+          );
+        }
+      },
+      {
+        accessor: 'MPN',
+
+        sortable: true,
+        title: t`MPN`,
+        render: (record: any) => record?.manufacturer_part_detail?.MPN
+      },
+      BooleanColumn({
+        accessor: 'active',
+        title: t`Active`,
+        sortable: true,
+        switchable: true
+      }),
+      {
+        accessor: 'in_stock',
+        sortable: true
+      },
+      {
+        accessor: 'packaging',
+        sortable: true
+      },
+      {
+        accessor: 'pack_quantity',
+        sortable: true,
+
+        render: (record: any) => {
+          const part = record?.part_detail ?? {};
+
+          const extra = [];
+
+          if (part.units) {
+            extra.push(
+              <Text key='base'>
+                {t`Base units`} : {part.units}
+              </Text>
+            );
+          }
+
+          return (
+            <TableHoverCard
+              value={record.pack_quantity}
+              extra={extra}
+              title={t`Pack Quantity`}
+            />
+          );
+        }
+      },
+      LinkColumn({}),
+      NoteColumn({}),
+      {
+        accessor: 'available',
+        sortable: true,
+
+        render: (record: any) => {
+          const extra = [];
+
+          if (record.availablility_updated) {
+            extra.push(
+              <Text>
+                {t`Updated`} : {record.availablility_updated}
+              </Text>
+            );
+          }
+
+          return <TableHoverCard value={record.available} extra={extra} />;
+        }
+      }
+    ];
+  }, [params]);
+
+  const supplierPartFields = useSupplierPartFields({
+    partId: params?.part
+  });
+
+  const addSupplierPart = useCreateApiFormModal({
+    url: ApiEndpoints.supplier_part_list,
+    title: t`Add Supplier Part`,
+    fields: supplierPartFields,
+    initialData: {
+      part: params?.part,
+      supplier: params?.supplier
+    },
+    table: table,
+    successMessage: t`Supplier part created`
+  });
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add-supplier-part'
+        tooltip={t`Add supplier part`}
+        onClick={() => addSupplierPart.open()}
+        hidden={!user.hasAddRole(UserRoles.purchase_order)}
+      />
+    ];
+  }, [user]);
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'active',
+        label: t`Active`,
+        description: t`Show active supplier parts`
+      },
+      {
+        name: 'part_active',
+        label: t`Active Part`,
+        description: t`Show active internal parts`
+      },
+      {
+        name: 'supplier_active',
+        label: t`Active Supplier`,
+        description: t`Show active suppliers`
+      },
+      {
+        name: 'has_stock',
+        label: t`In Stock`,
+        description: t`Show supplier parts with stock`
+      }
+    ];
+  }, []);
+
+  const editSupplierPartFields = useSupplierPartFields({});
+
+  const [selectedSupplierPart, setSelectedSupplierPart] = useState<number>(0);
+
+  const editSupplierPart = useEditApiFormModal({
+    url: ApiEndpoints.supplier_part_list,
+    pk: selectedSupplierPart,
+    title: t`Edit Supplier Part`,
+    fields: editSupplierPartFields,
+    table: table
+  });
+
+  const deleteSupplierPart = useDeleteApiFormModal({
+    url: ApiEndpoints.supplier_part_list,
+    pk: selectedSupplierPart,
+    title: t`Delete Supplier Part`,
+    table: table
+  });
+
+  // Row action callback
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.purchase_order),
+          onClick: () => {
+            setSelectedSupplierPart(record.pk);
+            editSupplierPart.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.purchase_order),
+          onClick: () => {
+            setSelectedSupplierPart(record.pk);
+            deleteSupplierPart.open();
+          }
+        })
+      ];
+    },
+    [user, editSupplierPartFields]
+  );
+
+  return (
+    <>
+      {addSupplierPart.modal}
+      {editSupplierPart.modal}
+      {deleteSupplierPart.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.supplier_part_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          params: {
+            ...params,
+            part_detail: true,
+            supplier_detail: true,
+            manufacturer_detail: true
+          },
+          rowActions: rowActions,
+          enableDownload: true,
+          tableActions: tableActions,
+          tableFilters: tableFilters,
+          modelType: ModelType.supplierpart
+        }}
+      />
+    </>
+  );
+}

package/src/tables/purchasing/SupplierPriceBreakTable.tsx

@@ -0,0 +1,222 @@
+import { t } from '@lingui/core/macro';
+import { Anchor, Group, Text } from '@mantine/core';
+import { useCallback, useMemo, useState } from 'react';
+
+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 type { ApiFormFieldSet } from '@lib/types/Forms';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { Thumbnail } from '../../components/images/Thumbnail';
+import { formatCurrency } from '../../defaults/formatters';
+import { getDetailUrl } from '../../functions/urls';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { InvenTreeTable } from '../InvenTreeTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+
+export function calculateSupplierPartUnitPrice(record: any) {
+  const pack_quantity = record?.part_detail?.pack_quantity_native ?? 1;
+  const unit_price = Number.parseFloat(record.price) / pack_quantity;
+
+  return unit_price;
+}
+
+export function SupplierPriceBreakColumns(): TableColumn[] {
+  return [
+    {
+      accessor: 'supplier',
+      title: t`Supplier`,
+      sortable: true,
+      switchable: true,
+      render: (record: any) => {
+        return (
+          <Group gap='xs' wrap='nowrap'>
+            <Thumbnail
+              src={
+                record?.supplier_detail?.thumbnail ??
+                record?.supplier_detail?.image
+              }
+              alt={record?.supplier_detail?.name}
+              size={24}
+            />
+            <Text>{record.supplier_detail?.name}</Text>
+          </Group>
+        );
+      }
+    },
+    {
+      accessor: 'part_detail.SKU',
+      title: t`SKU`,
+      ordering: 'SKU',
+      sortable: true,
+      switchable: false,
+      render: (record: any) => {
+        return (
+          <Anchor
+            href={getDetailUrl(
+              ModelType.supplierpart,
+              record.part_detail.pk,
+              true
+            )}
+          >
+            {record.part_detail.SKU}
+          </Anchor>
+        );
+      }
+    },
+    {
+      accessor: 'quantity',
+      title: t`Quantity`,
+      sortable: true,
+      switchable: false
+    },
+    {
+      accessor: 'price',
+      title: t`Supplier Price`,
+      render: (record: any) =>
+        formatCurrency(record.price, { currency: record.price_currency }),
+      sortable: true,
+      switchable: false
+    },
+    {
+      accessor: 'unit_price',
+      ordering: 'price',
+      title: t`Unit Price`,
+      sortable: true,
+      switchable: true,
+      render: (record: any) => {
+        const units = record.part_detail?.pack_quantity;
+
+        const price = formatCurrency(calculateSupplierPartUnitPrice(record), {
+          currency: record.price_currency
+        });
+
+        return (
+          <Group justify='space-between' gap='xs' grow>
+            <Text>{price}</Text>
+            {units && <Text size='xs'>[{units}]</Text>}
+          </Group>
+        );
+      }
+    }
+  ];
+}
+
+export default function SupplierPriceBreakTable({
+  supplierPart
+}: Readonly<{
+  supplierPart: any;
+}>) {
+  const table = useTable('supplierpricebreaks');
+
+  const user = useUserState();
+
+  const columns: TableColumn[] = useMemo(() => {
+    return SupplierPriceBreakColumns();
+  }, []);
+
+  const supplierPriceBreakFields: ApiFormFieldSet = useMemo(() => {
+    return {
+      part: {
+        hidden: false,
+        disabled: true
+      },
+      quantity: {},
+      price: {},
+      price_currency: {}
+    };
+  }, []);
+
+  const [selectedPriceBreak, setSelectedPriceBreak] = useState<number>(0);
+
+  const newPriceBreak = useCreateApiFormModal({
+    url: apiUrl(ApiEndpoints.supplier_part_pricing_list),
+    title: t`Add Price Break`,
+    fields: supplierPriceBreakFields,
+    initialData: {
+      part: supplierPart.pk,
+      price_currency: supplierPart.supplier_detail.currency
+    },
+    table: table
+  });
+
+  const editPriceBreak = useEditApiFormModal({
+    url: apiUrl(ApiEndpoints.supplier_part_pricing_list),
+    pk: selectedPriceBreak,
+    title: t`Edit Price Break`,
+    fields: supplierPriceBreakFields,
+    table: table
+  });
+
+  const deletePriceBreak = useDeleteApiFormModal({
+    url: apiUrl(ApiEndpoints.supplier_part_pricing_list),
+    pk: selectedPriceBreak,
+    title: t`Delete Price Break`,
+    table: table
+  });
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add-price-break'
+        tooltip={t`Add Price Break`}
+        onClick={() => {
+          newPriceBreak.open();
+        }}
+        hidden={!user.hasAddRole(UserRoles.part)}
+      />
+    ];
+  }, [user]);
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.purchase_order),
+          onClick: () => {
+            setSelectedPriceBreak(record.pk);
+            editPriceBreak.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.purchase_order),
+          onClick: () => {
+            setSelectedPriceBreak(record.pk);
+            deletePriceBreak.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  return (
+    <>
+      {newPriceBreak.modal}
+      {editPriceBreak.modal}
+      {deletePriceBreak.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.supplier_part_pricing_list)}
+        columns={columns}
+        tableState={table}
+        props={{
+          params: {
+            part: supplierPart.pk,
+            part_detail: true,
+            supplier_detail: true
+          },
+          tableActions: tableActions,
+          rowActions: rowActions
+        }}
+      />
+    </>
+  );
+}