@inventreedb/ui 0.0.1

package/src/tables/sales/SalesOrderShipmentTable.tsx

@@ -0,0 +1,225 @@
+import { t } from '@lingui/core/macro';
+import { IconTruckDelivery } from '@tabler/icons-react';
+import { useCallback, useMemo, useState } from 'react';
+import { useNavigate } 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 type { TableFilter } from '@lib/types/Filters';
+import dayjs from 'dayjs';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { YesNoButton } from '../../components/buttons/YesNoButton';
+import {
+  useSalesOrderShipmentCompleteFields,
+  useSalesOrderShipmentFields
+} from '../../forms/SalesOrderForms';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import type { TableColumn } from '../Column';
+import { DateColumn, LinkColumn } from '../ColumnRenderers';
+import { InvenTreeTable } from '../InvenTreeTable';
+import {
+  type RowAction,
+  RowCancelAction,
+  RowEditAction,
+  RowViewAction
+} from '../RowActions';
+
+export default function SalesOrderShipmentTable({
+  orderId
+}: Readonly<{
+  orderId: number;
+}>) {
+  const user = useUserState();
+  const navigate = useNavigate();
+  const table = useTable('sales-order-shipment');
+
+  const [selectedShipment, setSelectedShipment] = useState<any>({});
+
+  const newShipmentFields = useSalesOrderShipmentFields({});
+
+  const editShipmentFields = useSalesOrderShipmentFields({});
+
+  const completeShipmentFields = useSalesOrderShipmentCompleteFields({});
+
+  const newShipment = useCreateApiFormModal({
+    url: ApiEndpoints.sales_order_shipment_list,
+    fields: newShipmentFields,
+    title: t`Create Shipment`,
+    table: table,
+    initialData: {
+      order: orderId
+    }
+  });
+
+  const deleteShipment = useDeleteApiFormModal({
+    url: ApiEndpoints.sales_order_shipment_list,
+    pk: selectedShipment.pk,
+    title: t`Cancel Shipment`,
+    table: table
+  });
+
+  const editShipment = useEditApiFormModal({
+    url: ApiEndpoints.sales_order_shipment_list,
+    pk: selectedShipment.pk,
+    fields: editShipmentFields,
+    title: t`Edit Shipment`,
+    table: table
+  });
+
+  const completeShipment = useCreateApiFormModal({
+    url: ApiEndpoints.sales_order_shipment_complete,
+    pk: selectedShipment.pk,
+    fields: completeShipmentFields,
+    title: t`Complete Shipment`,
+    table: table,
+    focus: 'tracking_number',
+    initialData: {
+      ...selectedShipment,
+      shipment_date: dayjs().format('YYYY-MM-DD')
+    }
+  });
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'reference',
+        title: t`Shipment Reference`,
+        switchable: false,
+        sortable: true
+      },
+      {
+        accessor: 'allocated_items',
+        sortable: true,
+        switchable: false,
+        title: t`Items`
+      },
+      {
+        accessor: 'shipped',
+        title: t`Shipped`,
+        switchable: true,
+        sortable: false,
+        render: (record: any) => <YesNoButton value={!!record.shipment_date} />
+      },
+      DateColumn({
+        accessor: 'shipment_date',
+        title: t`Shipment Date`
+      }),
+      DateColumn({
+        accessor: 'delivery_date',
+        title: t`Delivery Date`
+      }),
+      {
+        accessor: 'tracking_number'
+      },
+      {
+        accessor: 'invoice_number'
+      },
+      LinkColumn({
+        accessor: 'link'
+      })
+    ];
+  }, []);
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      const shipped: boolean = !!record.shipment_date;
+
+      return [
+        RowViewAction({
+          title: t`View Shipment`,
+          modelType: ModelType.salesordershipment,
+          modelId: record.pk,
+          navigate: navigate
+        }),
+        {
+          hidden: shipped || !user.hasChangeRole(UserRoles.sales_order),
+          title: t`Complete Shipment`,
+          color: 'green',
+          icon: <IconTruckDelivery />,
+          onClick: () => {
+            setSelectedShipment(record);
+            completeShipment.open();
+          }
+        },
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.sales_order),
+          tooltip: t`Edit shipment`,
+          onClick: () => {
+            setSelectedShipment(record);
+            editShipment.open();
+          }
+        }),
+        RowCancelAction({
+          hidden: shipped || !user.hasDeleteRole(UserRoles.sales_order),
+          tooltip: t`Cancel shipment`,
+          onClick: () => {
+            setSelectedShipment(record);
+            deleteShipment.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add-shipment'
+        tooltip={t`Add shipment`}
+        hidden={!user.hasAddRole(UserRoles.sales_order)}
+        onClick={() => {
+          newShipment.open();
+        }}
+      />
+    ];
+  }, [user]);
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    return [
+      {
+        name: 'shipped',
+        label: t`Shipped`,
+        description: t`Show shipments which have been shipped`
+      },
+      {
+        name: 'delivered',
+        label: t`Delivered`,
+        description: t`Show shipments which have been delivered`
+      }
+    ];
+  }, []);
+
+  return (
+    <>
+      {newShipment.modal}
+      {editShipment.modal}
+      {deleteShipment.modal}
+      {completeShipment.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.sales_order_shipment_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          tableActions: tableActions,
+          tableFilters: tableFilters,
+          modelType: ModelType.salesordershipment,
+          enableSelection: true,
+          enableReports: true,
+          rowActions: rowActions,
+          params: {
+            order: orderId
+          }
+        }}
+      />
+    </>
+  );
+}

package/src/tables/sales/SalesOrderTable.tsx

@@ -0,0 +1,212 @@
+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 { ProgressBar } from '../../components/items/ProgressBar';
+import { formatCurrency } from '../../defaults/formatters';
+import { useSalesOrderFields } from '../../forms/SalesOrderForms';
+import { useCreateApiFormModal } from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
+import {
+  CreatedByColumn,
+  CreationDateColumn,
+  DescriptionColumn,
+  LineItemsProgressColumn,
+  ProjectCodeColumn,
+  ReferenceColumn,
+  ResponsibleColumn,
+  ShipmentDateColumn,
+  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';
+
+export function SalesOrderTable({
+  partId,
+  customerId
+}: Readonly<{
+  partId?: number;
+  customerId?: number;
+}>) {
+  const table = useTable(!!partId ? 'salesorder-part' : 'salesorder-index');
+  const user = useUserState();
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    const filters: TableFilter[] = [
+      OrderStatusFilter({ model: ModelType.salesorder }),
+      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(),
+      HasProjectCodeFilter(),
+      ProjectCodeFilter(),
+      ResponsibleFilter(),
+      CreatedByFilter()
+    ];
+
+    if (!!partId) {
+      filters.push({
+        name: 'include_variants',
+        type: 'boolean',
+        label: t`Include Variants`,
+        description: t`Include orders for part variants`
+      });
+    }
+
+    return filters;
+  }, [partId]);
+
+  const salesOrderFields = useSalesOrderFields({});
+
+  const newSalesOrder = useCreateApiFormModal({
+    url: ApiEndpoints.sales_order_list,
+    title: t`Add Sales Order`,
+    fields: salesOrderFields,
+    initialData: {
+      customer: customerId
+    },
+    follow: true,
+    modelType: ModelType.salesorder
+  });
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add-sales-order'
+        tooltip={t`Add Sales Order`}
+        onClick={() => newSalesOrder.open()}
+        hidden={!user.hasAddRole(UserRoles.sales_order)}
+      />
+    ];
+  }, [user]);
+
+  const tableColumns = useMemo(() => {
+    return [
+      ReferenceColumn({}),
+      {
+        accessor: 'customer__name',
+        title: t`Customer`,
+        sortable: true,
+        render: (record: any) => {
+          const customer = record.customer_detail ?? {};
+
+          return (
+            <Thumbnail
+              src={customer?.image}
+              alt={customer.name}
+              text={customer.name}
+            />
+          );
+        }
+      },
+      {
+        accessor: 'customer_reference',
+        title: t`Customer Reference`
+      },
+      DescriptionColumn({}),
+      LineItemsProgressColumn(),
+      {
+        accessor: 'shipments_count',
+        title: t`Shipments`,
+        render: (record: any) => (
+          <ProgressBar
+            progressLabel
+            value={record.completed_shipments_count}
+            maximum={record.shipments_count}
+          />
+        )
+      },
+      StatusColumn({ model: ModelType.salesorder }),
+      ProjectCodeColumn({}),
+      CreationDateColumn({}),
+      CreatedByColumn({}),
+      StartDateColumn({}),
+      TargetDateColumn({}),
+      ShipmentDateColumn({}),
+      ResponsibleColumn({}),
+      {
+        accessor: 'total_price',
+        title: t`Total Price`,
+        sortable: true,
+        render: (record: any) => {
+          return formatCurrency(record.total_price, {
+            currency: record.order_currency || record.customer_detail?.currency
+          });
+        }
+      }
+    ];
+  }, []);
+
+  return (
+    <>
+      {newSalesOrder.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.sales_order_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          params: {
+            customer_detail: true,
+            part: partId,
+            customer: customerId
+          },
+          tableFilters: tableFilters,
+          tableActions: tableActions,
+          modelType: ModelType.salesorder,
+          enableSelection: true,
+          enableDownload: true,
+          enableReports: true
+        }}
+      />
+    </>
+  );
+}

package/src/tables/settings/ApiTokenTable.tsx

@@ -0,0 +1,203 @@
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { Badge, Code, Flex, Modal, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconCircleX } from '@tabler/icons-react';
+import { useCallback, useMemo, useState } from 'react';
+import { api } from '../../App';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { CopyButton } from '../../components/buttons/CopyButton';
+import { StylishText } from '../../components/items/StylishText';
+import { showApiErrorMessage } from '../../functions/notifications';
+import { useCreateApiFormModal } from '../../hooks/UseForm';
+import { useTable } from '../../hooks/UseTable';
+import type { RowAction } from '../../tables/RowActions';
+import { BooleanColumn } from '../ColumnRenderers';
+import { UserFilter } from '../Filter';
+import { InvenTreeTable } from '../InvenTreeTable';
+
+export function ApiTokenTable({
+  only_myself = true
+}: Readonly<{ only_myself: boolean }>) {
+  const [token, setToken] = useState<string>('');
+  const [opened, { open, close }] = useDisclosure(false);
+
+  const generateToken = useCreateApiFormModal({
+    url: ApiEndpoints.user_tokens,
+    title: t`Generate Token`,
+    fields: { name: {} },
+    successMessage: t`Token generated`,
+    onFormSuccess: (data: any) => {
+      setToken(data.token);
+      open();
+      table.refreshTable();
+    }
+  });
+  const tableActions = useMemo(() => {
+    if (only_myself)
+      return [
+        <AddItemButton
+          key={'generate'}
+          tooltip={t`Generate Token`}
+          onClick={() => generateToken.open()}
+        />
+      ];
+    return [];
+  }, [only_myself]);
+
+  const table = useTable('api-tokens', 'id');
+
+  const tableColumns = useMemo(() => {
+    const cols = [
+      {
+        accessor: 'name',
+        title: t`Name`,
+        sortable: true
+      },
+      BooleanColumn({
+        accessor: 'active',
+        title: t`Active`,
+        sortable: false
+      }),
+      BooleanColumn({
+        accessor: 'revoked',
+        title: t`Revoked`
+      }),
+      {
+        accessor: 'token',
+        title: t`Token`,
+        render: (record: any) => {
+          return (
+            <>
+              {record.token}{' '}
+              {record.in_use ? (
+                <Badge color='green'>
+                  <Trans>In Use</Trans>
+                </Badge>
+              ) : null}
+            </>
+          );
+        }
+      },
+      {
+        accessor: 'last_seen',
+        title: t`Last Seen`,
+        sortable: true
+      },
+      {
+        accessor: 'expiry',
+        title: t`Expiry`,
+        sortable: true
+      },
+      {
+        accessor: 'created',
+        title: t`Created`,
+        sortable: true
+      }
+    ];
+    if (!only_myself) {
+      cols.push({ accessor: 'user', title: t`User`, sortable: true });
+    }
+    return cols;
+  }, [only_myself]);
+
+  const tableFilters: TableFilter[] = useMemo(() => {
+    const filters: TableFilter[] = [
+      {
+        name: 'revoked',
+        label: t`Revoked`,
+        description: t`Show revoked tokens`
+      }
+    ];
+
+    if (!only_myself) {
+      filters.push(
+        UserFilter({
+          name: 'user',
+          label: t`User`,
+          description: t`Filter by user`
+        })
+      );
+    }
+    return filters;
+  }, [only_myself]);
+
+  const rowActions = useCallback((record: any): RowAction[] => {
+    return [
+      {
+        title: t`Revoke`,
+        color: 'red',
+        hidden: !record.active || record.in_use,
+        icon: <IconCircleX />,
+        onClick: () => {
+          revokeToken(record.id);
+        }
+      }
+    ];
+  }, []);
+
+  const revokeToken = async (id: string) => {
+    let targetUrl = apiUrl(ApiEndpoints.user_tokens, id);
+    if (!only_myself) {
+      targetUrl += '?all_users=true';
+    }
+    api
+      .delete(targetUrl)
+      .then(() => {
+        table.refreshTable();
+      })
+      .catch((error) => {
+        showApiErrorMessage({
+          error: error,
+          title: t`Error revoking token`
+        });
+      });
+  };
+
+  const urlParams = useMemo(() => {
+    if (only_myself) return {};
+    return { all_users: true };
+  }, [only_myself]);
+
+  return (
+    <>
+      {only_myself && (
+        <>
+          {generateToken.modal}
+          <Modal
+            opened={opened}
+            onClose={close}
+            title={<StylishText size='xl'>{t`Token`}</StylishText>}
+            centered
+          >
+            <Text c='dimmed'>
+              <Trans>
+                Tokens are only shown once - make sure to note it down.
+              </Trans>
+            </Text>
+            <Flex>
+              <Code>{token}</Code>
+              <CopyButton value={token} />
+            </Flex>
+          </Modal>
+        </>
+      )}
+      <InvenTreeTable
+        tableState={table}
+        url={apiUrl(ApiEndpoints.user_tokens)}
+        columns={tableColumns}
+        props={{
+          params: urlParams,
+          rowActions: rowActions,
+          enableSearch: false,
+          enableColumnSwitching: false,
+          tableActions: tableActions,
+          tableFilters: tableFilters
+        }}
+      />
+    </>
+  );
+}