@inventreedb/ui 0.0.1

package/src/pages/part/PartStocktakeDetail.tsx

@@ -0,0 +1,285 @@
+import { t } from '@lingui/core/macro';
+import { type ChartTooltipProps, LineChart } from '@mantine/charts';
+import {
+  Center,
+  Divider,
+  Loader,
+  Paper,
+  SimpleGrid,
+  Text
+} from '@mantine/core';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import dayjs from 'dayjs';
+import { AddItemButton } from '../../components/buttons/AddItemButton';
+import { formatDate, formatPriceRange } from '../../defaults/formatters';
+import {
+  generateStocktakeReportFields,
+  partStocktakeFields
+} from '../../forms/PartForms';
+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 { RowDeleteAction, RowEditAction } from '../../tables/RowActions';
+
+/*
+ * Render a tooltip for the chart, with correct date information
+ */
+function ChartTooltip({ label, payload }: Readonly<ChartTooltipProps>) {
+  const formattedLabel: string = useMemo(() => {
+    if (label && typeof label === 'number') {
+      return formatDate(dayjs().format('YYYY-MM-DD')) ?? label;
+    } else if (!!label) {
+      return label.toString();
+    } else {
+      return '';
+    }
+  }, [label]);
+
+  if (!payload) {
+    return null;
+  }
+
+  const quantity = payload.find((item) => item.name == 'quantity');
+  const value_min = payload.find((item) => item.name == 'value_min');
+  const value_max = payload.find((item) => item.name == 'value_max');
+
+  return (
+    <Paper px='md' py='sm' withBorder shadow='md' radius='md'>
+      <Text key='title'>{formattedLabel}</Text>
+      <Divider />
+      <Text key='quantity' fz='sm'>
+        {t`Quantity`} : {quantity?.value}
+      </Text>
+      <Text key='values' fz='sm'>
+        {t`Value`} : {formatPriceRange(value_min?.value, value_max?.value)}
+      </Text>
+    </Paper>
+  );
+}
+
+export default function PartStocktakeDetail({
+  partId
+}: Readonly<{ partId: number }>) {
+  const user = useUserState();
+  const table = useTable('part-stocktake');
+
+  const stocktakeFields = useMemo(() => partStocktakeFields(), []);
+
+  const [selectedStocktake, setSelectedStocktake] = useState<
+    number | undefined
+  >(undefined);
+
+  const editStocktakeEntry = useEditApiFormModal({
+    pk: selectedStocktake,
+    url: ApiEndpoints.part_stocktake_list,
+    title: t`Edit Stocktake Entry`,
+    fields: stocktakeFields,
+    table: table
+  });
+
+  const deleteStocktakeEntry = useDeleteApiFormModal({
+    pk: selectedStocktake,
+    url: ApiEndpoints.part_stocktake_list,
+    title: t`Delete Stocktake Entry`,
+    table: table
+  });
+
+  const generateReport = useCreateApiFormModal({
+    url: ApiEndpoints.part_stocktake_report_generate,
+    title: t`Generate Stocktake Report`,
+    fields: generateStocktakeReportFields(),
+    initialData: {
+      part: partId
+    },
+    successMessage: t`Stocktake report scheduled`
+  });
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'quantity',
+        sortable: false,
+        switchable: false
+      },
+      {
+        accessor: 'item_count',
+        title: t`Stock Items`,
+        switchable: true,
+        sortable: false
+      },
+      {
+        accessor: 'cost',
+        title: t`Stock Value`,
+        sortable: false,
+        render: (record: any) => {
+          return formatPriceRange(record.cost_min, record.cost_max, {
+            currency: record.cost_min_currency
+          });
+        }
+      },
+      {
+        accessor: 'date',
+        sortable: false
+      },
+      {
+        accessor: 'note',
+        sortable: false
+      }
+    ];
+  }, []);
+
+  const tableActions = useMemo(() => {
+    return [
+      <AddItemButton
+        key='add'
+        tooltip={t`New Stocktake Report`}
+        onClick={() => generateReport.open()}
+        hidden={!user.hasAddRole(UserRoles.stocktake)}
+      />
+    ];
+  }, [user]);
+
+  const rowActions = useCallback(
+    (record: any) => {
+      return [
+        RowEditAction({
+          hidden: !user.hasChangeRole(UserRoles.stocktake),
+          onClick: () => {
+            setSelectedStocktake(record.pk);
+            editStocktakeEntry.open();
+          }
+        }),
+        RowDeleteAction({
+          hidden: !user.hasDeleteRole(UserRoles.stocktake),
+          onClick: () => {
+            setSelectedStocktake(record.pk);
+            deleteStocktakeEntry.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
+  const chartData = useMemo(() => {
+    const records =
+      table.records?.map((record: any) => {
+        return {
+          date: new Date(record.date).valueOf(),
+          quantity: record.quantity,
+          value_min: Number.parseFloat(record.cost_min),
+          value_max: Number.parseFloat(record.cost_max)
+        };
+      }) ?? [];
+
+    // Sort records to ensure correct date order
+    return records.sort((a, b) => {
+      return a < b ? -1 : 1;
+    });
+  }, [table.records]);
+
+  // Calculate the date limits of the chart
+  const chartLimits: number[] = useMemo(() => {
+    let min_date = new Date();
+    let max_date = new Date();
+
+    if (chartData.length > 0) {
+      min_date = new Date(chartData[0].date);
+      max_date = new Date(chartData[chartData.length - 1].date);
+    }
+
+    // Expand limits by one day on either side
+    min_date.setDate(min_date.getDate() - 1);
+    max_date.setDate(max_date.getDate() + 1);
+
+    return [min_date.valueOf(), max_date.valueOf()];
+  }, [chartData]);
+
+  return (
+    <>
+      {generateReport.modal}
+      {editStocktakeEntry.modal}
+      {deleteStocktakeEntry.modal}
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <InvenTreeTable
+          url={apiUrl(ApiEndpoints.part_stocktake_list)}
+          tableState={table}
+          columns={tableColumns}
+          props={{
+            params: {
+              part: partId,
+              ordering: 'date'
+            },
+            rowActions: rowActions,
+            tableActions: tableActions
+          }}
+        />
+        {table.isLoading ? (
+          <Center>
+            <Loader />
+          </Center>
+        ) : (
+          <LineChart
+            data={chartData}
+            mah={'500px'}
+            dataKey='date'
+            withLegend
+            withYAxis
+            withRightYAxis
+            yAxisLabel={t`Quantity`}
+            rightYAxisLabel={t`Stock Value`}
+            tooltipProps={{
+              content: ({ label, payload }) => (
+                <ChartTooltip label={label} payload={payload} />
+              )
+            }}
+            yAxisProps={{
+              allowDataOverflow: false
+            }}
+            rightYAxisProps={{
+              allowDataOverflow: false
+            }}
+            xAxisProps={{
+              scale: 'time',
+              type: 'number',
+              domain: chartLimits,
+              tickFormatter: (value: number) => {
+                return formatDate(dayjs().format('YYYY-MM-DD'));
+              }
+            }}
+            series={[
+              {
+                name: 'quantity',
+                label: t`Quantity`,
+                color: 'blue.6',
+                yAxisId: 'left'
+              },
+              {
+                name: 'value_min',
+                label: t`Minimum Value`,
+                color: 'yellow.6',
+                yAxisId: 'right'
+              },
+              {
+                name: 'value_max',
+                label: t`Maximum Value`,
+                color: 'teal.6',
+                yAxisId: 'right'
+              }
+            ]}
+          />
+        )}
+      </SimpleGrid>
+    </>
+  );
+}

package/src/pages/part/PartSupplierDetail.tsx

@@ -0,0 +1,31 @@
+import { t } from '@lingui/core/macro';
+import { Accordion } from '@mantine/core';
+
+import { StylishText } from '../../components/items/StylishText';
+import { ManufacturerPartTable } from '../../tables/purchasing/ManufacturerPartTable';
+import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
+
+export default function PartSupplierDetail({
+  partId
+}: Readonly<{ partId: number }>) {
+  return (
+    <Accordion multiple defaultValue={['part-suppliers', 'part-manufacturers']}>
+      <Accordion.Item value='part-suppliers'>
+        <Accordion.Control>
+          <StylishText size='lg'>{t`Suppliers`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <SupplierPartTable params={{ part: partId }} />
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value='part-manufacturers'>
+        <Accordion.Control>
+          <StylishText size='lg'>{t`Manufacturers`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <ManufacturerPartTable params={{ part: partId }} />
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+}

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

@@ -0,0 +1,269 @@
+import { t } from '@lingui/core/macro';
+import { BarChart, type ChartTooltipProps, DonutChart } from '@mantine/charts';
+import {
+  Center,
+  Group,
+  Paper,
+  SegmentedControl,
+  SimpleGrid,
+  Stack,
+  Text
+} from '@mantine/core';
+import { type ReactNode, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
+import {
+  formatCurrency,
+  formatDecimal,
+  formatPriceRange
+} from '../../../defaults/formatters';
+import { useTable } from '../../../hooks/UseTable';
+import type { TableColumn } from '../../../tables/Column';
+import { DateColumn, PartColumn } from '../../../tables/ColumnRenderers';
+import { InvenTreeTable } from '../../../tables/InvenTreeTable';
+import { LoadingPricingData, NoPricingData } from './PricingPanel';
+
+/*
+ * Render a tooltip for the chart, with correct date information
+ */
+function ChartTooltip({ label, payload }: ChartTooltipProps) {
+  if (!payload) {
+    return null;
+  }
+
+  const data = payload[0] ?? {};
+
+  return (
+    <Paper px='md' py='sm' withBorder shadow='md' radius='md'>
+      <Group justify='space-between' wrap='nowrap'>
+        <Text key='title' c={data.payload?.color}>
+          {data.name}
+        </Text>
+        <Text key='price' fz='sm'>
+          {formatCurrency(data.payload?.value)}
+        </Text>
+      </Group>
+    </Paper>
+  );
+}
+
+// Display BOM data as a pie chart
+function BomPieChart({
+  data,
+  currency
+}: {
+  readonly data: any[];
+  readonly currency: string;
+}) {
+  // Construct donut data
+  const maxPricing = useMemo(() => {
+    return (
+      data
+        ?.filter((el: any) => !!el.total_price_max)
+        .map((entry, index) => {
+          return {
+            // Note: Replace '.' in name to avoid issues with tooltip
+            name: entry?.name?.replace('.', '') ?? '',
+            value: Number.parseFloat(entry?.total_price_max),
+            color: `${CHART_COLORS[index % CHART_COLORS.length]}.5`
+          };
+        }) ?? []
+    );
+  }, [data]);
+
+  return (
+    <Center>
+      <DonutChart
+        data={maxPricing}
+        size={500}
+        thickness={80}
+        withLabels={false}
+        withLabelsLine={false}
+        tooltipDataSource='segment'
+        chartLabel={t`Total Price`}
+        valueFormatter={(value) => tooltipFormatter(value, currency)}
+        tooltipProps={{
+          content: ({ label, payload }) => (
+            <ChartTooltip label={label} payload={payload} />
+          )
+        }}
+      />
+    </Center>
+  );
+}
+
+// Display BOM data as a bar chart
+function BomBarChart({
+  data,
+  currency
+}: {
+  readonly data: any[];
+  readonly currency: string;
+}) {
+  return (
+    <BarChart
+      h={500}
+      dataKey='name'
+      data={data}
+      xAxisLabel={t`Component`}
+      yAxisLabel={t`Price Range`}
+      series={[
+        { name: 'total_price_min', label: t`Minimum Price`, color: 'yellow.6' },
+        { name: 'total_price_max', label: t`Maximum Price`, color: 'teal.6' }
+      ]}
+      valueFormatter={(value) => tooltipFormatter(value, currency)}
+      tooltipProps={{
+        content: ({ label, payload }) => (
+          <ChartTooltip label={label} payload={payload} />
+        )
+      }}
+    />
+  );
+}
+
+export default function BomPricingPanel({
+  part,
+  pricing
+}: {
+  readonly part: any;
+  readonly pricing: any;
+}): ReactNode {
+  const table = useTable('pricingbom');
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'name',
+        title: t`Component`,
+        sortable: true,
+        switchable: false,
+        render: (record: any) => PartColumn({ part: record.sub_part_detail })
+      },
+      {
+        accessor: 'quantity',
+        title: t`Quantity`,
+        sortable: true,
+        switchable: false,
+        render: (record: any) => {
+          const quantity = formatDecimal(record.quantity);
+          const units = record.sub_part_detail?.units;
+
+          return (
+            <Group justify='space-between' grow>
+              <Text>{quantity}</Text>
+              {units && <Text size='xs'>[{units}]</Text>}
+            </Group>
+          );
+        }
+      },
+      {
+        accessor: 'unit_price',
+        ordering: 'pricing_max',
+        sortable: true,
+        switchable: true,
+        title: t`Unit Price`,
+        render: (record: any) => {
+          return formatPriceRange(record.pricing_min, record.pricing_max, {
+            currency: pricing?.currency
+          });
+        }
+      },
+      {
+        accessor: 'total_price',
+        title: t`Total Price`,
+        ordering: 'pricing_max_total',
+        sortable: true,
+        switchable: false,
+        render: (record: any) => {
+          return formatPriceRange(
+            record.pricing_min_total,
+            record.pricing_max_total,
+            {
+              currency: pricing?.currency
+            }
+          );
+        }
+      },
+      DateColumn({
+        accessor: 'pricing_updated',
+        title: t`Updated`,
+        sortable: true,
+        switchable: true
+      })
+    ];
+  }, [part, pricing]);
+
+  const bomPricingData: any[] = useMemo(() => {
+    const pricing = table.records.map((entry: any) => {
+      return {
+        name: entry.sub_part_detail?.name,
+        unit_price_min: Number.parseFloat(entry.pricing_min ?? 0),
+        unit_price_max: Number.parseFloat(entry.pricing_max ?? 0),
+        total_price_min: Number.parseFloat(entry.pricing_min_total ?? 0),
+        total_price_max: Number.parseFloat(entry.pricing_max_total ?? 0)
+      };
+    });
+
+    return pricing;
+  }, [table.records]);
+
+  const [chartType, setChartType] = useState<string>('pie');
+
+  const hasData: boolean = useMemo(() => {
+    return !table.isLoading && bomPricingData && bomPricingData.length > 0;
+  }, [table.isLoading, bomPricingData]);
+
+  return (
+    <Stack gap='xs'>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <InvenTreeTable
+          tableState={table}
+          url={apiUrl(ApiEndpoints.bom_list)}
+          columns={columns}
+          props={{
+            params: {
+              part: part?.pk,
+              sub_part_detail: true,
+              has_pricing: true
+            },
+            enableSelection: false,
+            modelType: ModelType.part,
+            modelField: 'sub_part'
+          }}
+        />
+        <Stack gap='xs'>
+          {table.isLoading && <LoadingPricingData />}
+          {hasData && (
+            <Stack gap='xs'>
+              {chartType == 'bar' && (
+                <BomBarChart
+                  data={bomPricingData}
+                  currency={pricing?.currency}
+                />
+              )}
+              {chartType == 'pie' && (
+                <BomPieChart
+                  data={bomPricingData}
+                  currency={pricing?.currency}
+                />
+              )}
+              <SegmentedControl
+                value={chartType}
+                onChange={setChartType}
+                data={[
+                  { value: 'pie', label: t`Pie Chart` },
+                  { value: 'bar', label: t`Bar Chart` }
+                ]}
+              />
+            </Stack>
+          )}
+          {!hasData && !table.isLoading && <NoPricingData />}
+        </Stack>
+      </SimpleGrid>
+    </Stack>
+  );
+}