@inventreedb/ui 0.0.1 → 0.0.3

package/src/pages/part/pricing/PriceBreakPanel.tsx

@@ -1,182 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { BarChart } from '@mantine/charts';
-import { SimpleGrid } from '@mantine/core';
-import { useCallback, useMemo, useState } from 'react';
-
-import type { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-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 { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
-import { formatCurrency } from '../../../defaults/formatters';
-import {
-  useCreateApiFormModal,
-  useDeleteApiFormModal,
-  useEditApiFormModal
-} from '../../../hooks/UseForm';
-import { useTable } from '../../../hooks/UseTable';
-import { useUserState } from '../../../states/UserState';
-import type { TableColumn } from '../../../tables/Column';
-import { InvenTreeTable } from '../../../tables/InvenTreeTable';
-import {
-  type RowAction,
-  RowDeleteAction,
-  RowEditAction
-} from '../../../tables/RowActions';
-import { NoPricingData } from './PricingPanel';
-
-export default function PriceBreakPanel({
-  part,
-  endpoint
-}: Readonly<{
-  part: any;
-  endpoint: ApiEndpoints;
-}>) {
-  const user = useUserState();
-  const table = useTable('pricinginternal');
-
-  const priceBreakFields: ApiFormFieldSet = useMemo(() => {
-    return {
-      part: {
-        disabled: true
-      },
-      quantity: {},
-      price: {},
-      price_currency: {}
-    };
-  }, []);
-
-  const tableUrl = useMemo(() => {
-    return apiUrl(endpoint);
-  }, [endpoint]);
-
-  const [selectedPriceBreak, setSelectedPriceBreak] = useState<number>(0);
-
-  const newPriceBreak = useCreateApiFormModal({
-    url: tableUrl,
-    title: t`Add Price Break`,
-    fields: priceBreakFields,
-    initialData: {
-      part: part.pk
-    },
-    onFormSuccess: (data: any) => {
-      table.updateRecord(data);
-    }
-  });
-
-  const editPriceBreak = useEditApiFormModal({
-    url: tableUrl,
-    pk: selectedPriceBreak,
-    title: t`Edit Price Break`,
-    fields: priceBreakFields,
-    onFormSuccess: (data: any) => {
-      table.updateRecord(data);
-    }
-  });
-
-  const deletePriceBreak = useDeleteApiFormModal({
-    url: tableUrl,
-    pk: selectedPriceBreak,
-    title: t`Delete Price Break`,
-    table: table
-  });
-
-  const columns: TableColumn[] = useMemo(() => {
-    return [
-      {
-        accessor: 'quantity',
-        title: t`Quantity`,
-        sortable: true,
-        switchable: false
-      },
-      {
-        accessor: 'price',
-        title: t`Price Break`,
-        sortable: true,
-        switchable: false,
-        render: (record: any) => {
-          return formatCurrency(record.price, {
-            currency: record.price_currency
-          });
-        }
-      }
-    ];
-  }, []);
-
-  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.part),
-          onClick: () => {
-            setSelectedPriceBreak(record.pk);
-            editPriceBreak.open();
-          }
-        }),
-        RowDeleteAction({
-          hidden: !user.hasDeleteRole(UserRoles.part),
-          onClick: () => {
-            setSelectedPriceBreak(record.pk);
-            deletePriceBreak.open();
-          }
-        })
-      ];
-    },
-    [user]
-  );
-
-  const currency: string = useMemo(() => {
-    if (table.records.length === 0) {
-      return '';
-    }
-    return table.records[0].currency;
-  }, [table.records]);
-
-  return (
-    <>
-      {newPriceBreak.modal}
-      {editPriceBreak.modal}
-      {deletePriceBreak.modal}
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <InvenTreeTable
-          tableState={table}
-          url={tableUrl}
-          columns={columns}
-          props={{
-            params: {
-              part: part.pk
-            },
-            tableActions: tableActions,
-            rowActions: rowActions
-          }}
-        />
-        {table.records.length > 0 ? (
-          <BarChart
-            dataKey='quantity'
-            data={table.records}
-            series={[{ name: 'price', label: t`Price`, color: 'blue.6' }]}
-            xAxisLabel={t`Quantity`}
-            yAxisLabel={t`Unit Price`}
-            valueFormatter={(value) => tooltipFormatter(value, currency)}
-          />
-        ) : (
-          <NoPricingData />
-        )}
-      </SimpleGrid>
-    </>
-  );
-}

package/src/pages/part/pricing/PricingOverviewPanel.tsx

@@ -1,338 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { BarChart } from '@mantine/charts';
-import {
-  Alert,
-  Anchor,
-  Group,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text
-} from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-import {
-  IconBuildingWarehouse,
-  IconChartDonut,
-  IconCircleCheck,
-  IconExclamationCircle,
-  IconList,
-  IconReportAnalytics,
-  IconShoppingCart,
-  IconTriangleSquareCircle
-} from '@tabler/icons-react';
-import type { UseQueryResult } from '@tanstack/react-query';
-import { DataTable } from 'mantine-datatable';
-import { type ReactNode, useCallback, useMemo } from 'react';
-
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import { apiUrl } from '@lib/functions/Api';
-import type { ApiFormFieldSet } from '@lib/types/Forms';
-import { api } from '../../../App';
-import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
-import {
-  EditItemAction,
-  OptionsActionDropdown
-} from '../../../components/items/ActionDropdown';
-import { formatCurrency, formatDate } from '../../../defaults/formatters';
-import { InvenTreeIcon } from '../../../functions/icons';
-import { useEditApiFormModal } from '../../../hooks/UseForm';
-import { useGlobalSettingsState } from '../../../states/SettingsState';
-import { panelOptions } from '../PartPricingPanel';
-
-interface PricingOverviewEntry {
-  icon: ReactNode;
-  name: panelOptions;
-  title: string;
-  valid: boolean;
-  min_value: number | null | undefined;
-  max_value: number | null | undefined;
-  visible?: boolean;
-  currency?: string | null | undefined;
-}
-
-export default function PricingOverviewPanel({
-  part,
-  pricing,
-  pricingQuery,
-  doNavigation
-}: Readonly<{
-  part: any;
-  pricing: any;
-  pricingQuery: UseQueryResult;
-  doNavigation: (panel: panelOptions) => void;
-}>): ReactNode {
-  const globalSettings = useGlobalSettingsState();
-
-  const refreshPricing = useCallback(() => {
-    const url = apiUrl(ApiEndpoints.part_pricing, part.pk);
-
-    notifications.hide('pricing-refresh');
-
-    notifications.show({
-      message: t`Refreshing pricing data`,
-      color: 'green',
-      id: 'pricing-refresh',
-      loading: true,
-      autoClose: false
-    });
-
-    let success = false;
-
-    api
-      .patch(url, { update: true })
-      .then((response) => {
-        success = response.status === 200;
-      })
-      .catch(() => {})
-      .finally(() => {
-        notifications.hide('pricing-refresh');
-
-        if (success) {
-          notifications.show({
-            message: t`Pricing data updated`,
-            color: 'green',
-            icon: <IconCircleCheck />
-          });
-          pricingQuery.refetch();
-        } else {
-          notifications.show({
-            message: t`Failed to update pricing data`,
-            color: 'red',
-            icon: <IconExclamationCircle />
-          });
-        }
-      });
-  }, [part]);
-
-  const pricingFields: ApiFormFieldSet = useMemo(() => {
-    return {
-      override_min: {},
-      override_min_currency: {
-        default:
-          globalSettings.getSetting('INVENTREE_DEFAULT_CURRENCY') ?? 'USD'
-      },
-      override_max: {},
-      override_max_currency: {
-        default:
-          globalSettings.getSetting('INVENTREE_DEFAULT_CURRENCY') ?? 'USD'
-      },
-      update: {
-        hidden: true,
-        value: true
-      }
-    };
-  }, [globalSettings]);
-
-  const editPricing = useEditApiFormModal({
-    title: t`Edit Pricing`,
-    url: apiUrl(ApiEndpoints.part_pricing, part.pk),
-    fields: pricingFields,
-    onFormSuccess: () => {
-      pricingQuery.refetch();
-    }
-  });
-
-  const columns: any[] = useMemo(() => {
-    return [
-      {
-        accessor: 'title',
-        title: t`Pricing Category`,
-        render: (record: PricingOverviewEntry) => {
-          const is_link = record.name !== panelOptions.overall;
-          return (
-            <Group justify='left' gap='xs'>
-              {record.icon}
-              {is_link ? (
-                <Anchor fw={700} onClick={() => doNavigation(record.name)}>
-                  {record.title}
-                </Anchor>
-              ) : (
-                <Text fw={700}>{record.title}</Text>
-              )}
-            </Group>
-          );
-        }
-      },
-      {
-        accessor: 'min_value',
-        title: t`Minimum`,
-        render: (record: PricingOverviewEntry) => {
-          if (record?.min_value === null || record?.min_value === undefined) {
-            return '-';
-          }
-          return formatCurrency(record?.min_value, {
-            currency: record.currency ?? pricing?.currency
-          });
-        }
-      },
-      {
-        accessor: 'max_value',
-        title: t`Maximum`,
-        render: (record: PricingOverviewEntry) => {
-          if (record?.max_value === null || record?.max_value === undefined) {
-            return '-';
-          }
-
-          return formatCurrency(record?.max_value, {
-            currency: record.currency ?? pricing?.currency
-          });
-        }
-      }
-    ];
-  }, [part, pricing]);
-
-  const overviewData: PricingOverviewEntry[] = useMemo(() => {
-    return [
-      {
-        name: panelOptions.override,
-        title: t`Override Pricing`,
-        icon: <IconExclamationCircle />,
-        min_value: Number.parseFloat(pricing?.override_min),
-        max_value: Number.parseFloat(pricing?.override_max),
-        valid: pricing?.override_min != null && pricing?.override_max != null
-      },
-      {
-        name: panelOptions.overall,
-        title: t`Overall Pricing`,
-        icon: <IconReportAnalytics />,
-        min_value: Number.parseFloat(pricing?.overall_min),
-        max_value: Number.parseFloat(pricing?.overall_max),
-        valid: pricing?.overall_min != null && pricing?.overall_max != null
-      },
-      {
-        name: panelOptions.internal,
-        title: t`Internal Pricing`,
-        icon: <IconList />,
-        min_value: Number.parseFloat(pricing?.internal_cost_min),
-        max_value: Number.parseFloat(pricing?.internal_cost_max),
-        valid:
-          pricing?.internal_cost_min != null &&
-          pricing?.internal_cost_max != null
-      },
-      {
-        name: panelOptions.bom,
-        title: t`BOM Pricing`,
-        icon: <IconChartDonut />,
-        min_value: Number.parseFloat(pricing?.bom_cost_min),
-        max_value: Number.parseFloat(pricing?.bom_cost_max),
-        valid: pricing?.bom_cost_min != null && pricing?.bom_cost_max != null
-      },
-      {
-        name: panelOptions.purchase,
-        title: t`Purchase Pricing`,
-        icon: <IconShoppingCart />,
-        min_value: Number.parseFloat(pricing?.purchase_cost_min),
-        max_value: Number.parseFloat(pricing?.purchase_cost_max),
-        valid:
-          pricing?.purchase_cost_min != null &&
-          pricing?.purchase_cost_max != null
-      },
-      {
-        name: panelOptions.supplier,
-        title: t`Supplier Pricing`,
-        icon: <IconBuildingWarehouse />,
-        min_value: Number.parseFloat(pricing?.supplier_price_min),
-        max_value: Number.parseFloat(pricing?.supplier_price_max),
-        valid:
-          pricing?.supplier_price_min != null &&
-          pricing?.supplier_price_max != null
-      },
-      {
-        name: panelOptions.variant,
-        title: t`Variant Pricing`,
-        icon: <IconTriangleSquareCircle />,
-        min_value: Number.parseFloat(pricing?.variant_cost_min),
-        max_value: Number.parseFloat(pricing?.variant_cost_max),
-        valid:
-          pricing?.variant_cost_min != null && pricing?.variant_cost_max != null
-      },
-      {
-        name: panelOptions.sale_pricing,
-        title: t`Sale Pricing`,
-        icon: <IconTriangleSquareCircle />,
-        min_value: Number.parseFloat(pricing?.sale_price_min),
-        max_value: Number.parseFloat(pricing?.sale_price_max),
-        valid:
-          pricing?.sale_price_min != null && pricing?.sale_price_max != null
-      },
-      {
-        name: panelOptions.sale_history,
-        title: t`Sale History`,
-        icon: <IconTriangleSquareCircle />,
-        min_value: Number.parseFloat(pricing?.sale_history_min),
-        max_value: Number.parseFloat(pricing?.sale_history_max),
-        valid:
-          pricing?.sale_history_min != null && pricing?.sale_history_max != null
-      }
-    ].filter((entry) => {
-      return entry.valid;
-    });
-  }, [part, pricing]);
-
-  return (
-    <>
-      {editPricing.modal}
-      <Stack gap='xs'>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Stack gap='xs'>
-            <Paper p='xs'>
-              <Group justify='space-between' wrap='nowrap'>
-                {pricing?.updated ? (
-                  <Alert color='blue' title={t`Last Updated`} flex={1}>
-                    <Text>{formatDate(pricing.updated)}</Text>
-                  </Alert>
-                ) : (
-                  <Alert color='orange' title={t`Pricing Not Set`} flex={1}>
-                    <Text>{t`Pricing data has not been calculated for this part`}</Text>
-                  </Alert>
-                )}
-                <OptionsActionDropdown
-                  tooltip={t`Pricing Actions`}
-                  actions={[
-                    {
-                      name: t`Refresh`,
-                      tooltip: t`Refresh pricing data`,
-                      icon: (
-                        <InvenTreeIcon
-                          icon='refresh'
-                          iconProps={{ color: 'green' }}
-                        />
-                      ),
-                      onClick: () => {
-                        refreshPricing();
-                      }
-                    },
-                    EditItemAction({
-                      onClick: () => {
-                        editPricing.open();
-                      },
-                      tooltip: t`Edit pricing data`
-                    })
-                  ]}
-                />
-              </Group>
-            </Paper>
-            <DataTable
-              idAccessor='name'
-              records={overviewData}
-              columns={columns}
-            />
-          </Stack>
-          <BarChart
-            aria-label='pricing-overview-chart'
-            dataKey='title'
-            data={overviewData}
-            title={t`Pricing Overview`}
-            series={[
-              { name: 'min_value', label: t`Minimum Value`, color: 'blue.6' },
-              { name: 'max_value', label: t`Maximum Value`, color: 'teal.6' }
-            ]}
-            valueFormatter={(value) =>
-              tooltipFormatter(value, pricing?.currency)
-            }
-          />
-        </SimpleGrid>
-      </Stack>
-    </>
-  );
-}

package/src/pages/part/pricing/PricingPanel.tsx

@@ -1,82 +0,0 @@
-import { t } from '@lingui/core/macro';
-import {
-  Accordion,
-  type AccordionControlProps,
-  Alert,
-  Box,
-  Center,
-  Loader,
-  Space,
-  Stack,
-  Text,
-  Tooltip
-} from '@mantine/core';
-import { IconAlertCircle, IconExclamationCircle } from '@tabler/icons-react';
-import type { ReactNode } from 'react';
-
-import { StylishText } from '../../../components/items/StylishText';
-import type { panelOptions } from '../PartPricingPanel';
-
-function AccordionControl(props: AccordionControlProps) {
-  return (
-    <Box style={{ display: 'flex', alignItems: 'center' }}>
-      {props.disabled && (
-        <Tooltip label={t`No data available`}>
-          <IconAlertCircle size='1rem' color='gray' />
-        </Tooltip>
-      )}
-      <Accordion.Control
-        {...props}
-        pl={props.disabled ? '0.25rem' : '1.25rem'}
-      />
-    </Box>
-  );
-}
-
-export default function PricingPanel({
-  content,
-  label,
-  title,
-  visible,
-  disabled = undefined
-}: {
-  content: ReactNode;
-  label: panelOptions;
-  title: string;
-  visible: boolean;
-  disabled?: boolean;
-}): ReactNode {
-  const is_disabled = disabled ?? false;
-  return (
-    visible && (
-      <Accordion.Item value={label} id={label}>
-        <AccordionControl disabled={is_disabled}>
-          <StylishText size='lg'>{title}</StylishText>
-        </AccordionControl>
-        <Accordion.Panel>{!is_disabled && content}</Accordion.Panel>
-      </Accordion.Item>
-    )
-  );
-}
-
-export function NoPricingData() {
-  return (
-    <Stack gap='xs'>
-      <Alert icon={<IconExclamationCircle />} color='blue' title={t`No Data`}>
-        <Text>{t`No pricing data available`}</Text>
-      </Alert>
-      <Space />
-    </Stack>
-  );
-}
-
-export function LoadingPricingData() {
-  return (
-    <Center>
-      <Stack gap='xs'>
-        <Text>{t`Loading pricing data`}</Text>
-        <Loader />
-      </Stack>
-    </Center>
-  );
-}