@inventreedb/ui 0.0.1 → 0.0.2

package/src/pages/part/PartStocktakeDetail.tsx

@@ -1,285 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,269 +0,0 @@
-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>
-  );
-}