@inventreedb/ui 0.0.1

package/src/pages/part/PartPricingPanel.tsx

@@ -0,0 +1,155 @@
+import { t } from '@lingui/core/macro';
+import { Accordion, Alert, LoadingOverlay, Stack, Text } from '@mantine/core';
+import { useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { UserRoles } from '@lib/enums/Roles';
+import { useInstance } from '../../hooks/UseInstance';
+import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useUserState } from '../../states/UserState';
+import BomPricingPanel from './pricing/BomPricingPanel';
+import PriceBreakPanel from './pricing/PriceBreakPanel';
+import PricingOverviewPanel from './pricing/PricingOverviewPanel';
+import PricingPanel from './pricing/PricingPanel';
+import PurchaseHistoryPanel from './pricing/PurchaseHistoryPanel';
+import SaleHistoryPanel from './pricing/SaleHistoryPanel';
+import SupplierPricingPanel from './pricing/SupplierPricingPanel';
+import VariantPricingPanel from './pricing/VariantPricingPanel';
+
+export enum panelOptions {
+  overview = 'overview',
+  purchase = 'purchase',
+  internal = 'internal',
+  supplier = 'supplier',
+  bom = 'bom',
+  variant = 'variant',
+  sale_pricing = 'sale-pricing',
+  sale_history = 'sale-history',
+  override = 'override',
+  overall = 'overall'
+}
+
+export default function PartPricingPanel({ part }: Readonly<{ part: any }>) {
+  const user = useUserState();
+
+  const globalSettings = useGlobalSettingsState();
+
+  const { instance: pricing, instanceQuery } = useInstance({
+    pk: part?.pk,
+    hasPrimaryKey: true,
+    endpoint: ApiEndpoints.part_pricing,
+    defaultValue: {}
+  });
+
+  const internalPricing: boolean = useMemo(() => {
+    return globalSettings.isSet('PART_INTERNAL_PRICE');
+  }, [globalSettings]);
+
+  const purchaseOrderPricing = useMemo(() => {
+    return user.hasViewRole(UserRoles.purchase_order) && part?.purchaseable;
+  }, [user, part]);
+
+  const salesOrderPricing = useMemo(() => {
+    return user.hasViewRole(UserRoles.sales_order) && part?.salable;
+  }, [user, part]);
+
+  const [value, setValue] = useState<string[]>([panelOptions.overview]);
+  function doNavigation(panel: panelOptions) {
+    if (!value.includes(panel)) {
+      setValue([...value, panel]);
+    }
+    const element = document.getElementById(panel);
+    if (element) {
+      element.scrollIntoView();
+    }
+  }
+
+  return (
+    <Stack gap='xs'>
+      <LoadingOverlay visible={instanceQuery.isLoading} />
+      {!pricing && !instanceQuery.isLoading && (
+        <Alert color='ref' title={t`Error`}>
+          <Text>{t`No pricing data found for this part.`}</Text>
+        </Alert>
+      )}
+      {pricing && (
+        <Accordion multiple value={value} onChange={setValue}>
+          <PricingPanel
+            content={
+              <PricingOverviewPanel
+                part={part}
+                pricing={pricing}
+                pricingQuery={instanceQuery}
+                doNavigation={doNavigation}
+              />
+            }
+            label={panelOptions.overview}
+            title={t`Pricing Overview`}
+            visible={true}
+          />
+          <PricingPanel
+            content={<PurchaseHistoryPanel part={part} />}
+            label={panelOptions.purchase}
+            title={t`Purchase History`}
+            visible={purchaseOrderPricing}
+            disabled={
+              !pricing?.purchase_cost_min || !pricing?.purchase_cost_max
+            }
+          />
+          <PricingPanel
+            content={
+              <PriceBreakPanel
+                part={part}
+                endpoint={ApiEndpoints.part_pricing_internal}
+              />
+            }
+            label={panelOptions.internal}
+            title={t`Internal Pricing`}
+            visible={internalPricing}
+          />
+          <PricingPanel
+            content={<SupplierPricingPanel part={part} />}
+            label={panelOptions.supplier}
+            title={t`Supplier Pricing`}
+            visible={purchaseOrderPricing}
+            disabled={
+              !pricing?.supplier_price_min || !pricing?.supplier_price_max
+            }
+          />
+          <PricingPanel
+            content={<BomPricingPanel part={part} pricing={pricing} />}
+            label={panelOptions.bom}
+            title={t`BOM Pricing`}
+            visible={part?.assembly}
+            disabled={!pricing?.bom_cost_min || !pricing?.bom_cost_max}
+          />
+          <PricingPanel
+            content={<VariantPricingPanel part={part} pricing={pricing} />}
+            label={panelOptions.variant}
+            title={t`Variant Pricing`}
+            visible={part?.is_template}
+            disabled={!pricing?.variant_cost_min || !pricing?.variant_cost_max}
+          />
+          <PricingPanel
+            content={
+              <PriceBreakPanel
+                part={part}
+                endpoint={ApiEndpoints.part_pricing_sale}
+              />
+            }
+            label={panelOptions.sale_pricing}
+            title={t`Sale Pricing`}
+            visible={salesOrderPricing}
+          />
+          <PricingPanel
+            content={<SaleHistoryPanel part={part} />}
+            label={panelOptions.sale_history}
+            title={t`Sale History`}
+            visible={salesOrderPricing}
+            disabled={!pricing?.sale_history_min || !pricing?.sale_history_max}
+          />
+        </Accordion>
+      )}
+    </Stack>
+  );
+}

package/src/pages/part/PartSchedulingDetail.tsx

@@ -0,0 +1,315 @@
+import { t } from '@lingui/core/macro';
+import { type ChartTooltipProps, LineChart } from '@mantine/charts';
+import {
+  Alert,
+  Center,
+  Divider,
+  Loader,
+  Paper,
+  SimpleGrid,
+  Text
+} from '@mantine/core';
+import { type ReactNode, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import dayjs from 'dayjs';
+import { formatDate } from '../../defaults/formatters';
+import { navigateToLink } from '../../functions/navigation';
+import { getDetailUrl } from '../../functions/urls';
+import { useTable } from '../../hooks/UseTable';
+import type { TableColumn } from '../../tables/Column';
+import { DateColumn, DescriptionColumn } from '../../tables/ColumnRenderers';
+import { InvenTreeTable } from '../../tables/InvenTreeTable';
+import { TableHoverCard } from '../../tables/TableHoverCard';
+
+/*
+ * Render a tooltip for the chart, with correct date information
+ */
+function ChartTooltip({ label, payload }: Readonly<ChartTooltipProps>) {
+  if (!payload) {
+    return null;
+  }
+
+  if (label && typeof label == 'number') {
+    label = formatDate(dayjs().format('YYYY-MM-DD'));
+  }
+
+  const scheduled = payload.find((item) => item.name == 'scheduled');
+  const minimum = payload.find((item) => item.name == 'minimum');
+  const maximum = payload.find((item) => item.name == 'maximum');
+
+  return (
+    <Paper px='md' py='sm' withBorder shadow='md' radius='md'>
+      <Text key='title'>{label}</Text>
+      <Divider />
+      <Text key='maximum' c={maximum?.color} fz='sm'>
+        {t`Maximum`} : {maximum?.value}
+      </Text>
+      <Text key='scheduled' c={scheduled?.color} fz='sm'>
+        {t`Scheduled`} : {scheduled?.value}
+      </Text>
+      <Text key='minimum' c={minimum?.color} fz='sm'>
+        {t`Minimum`} : {minimum?.value}
+      </Text>
+    </Paper>
+  );
+}
+
+export default function PartSchedulingDetail({
+  part
+}: Readonly<{ part: any }>) {
+  const table = useTable('part-scheduling');
+  const navigate = useNavigate();
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'label',
+        switchable: false,
+        title: t`Order`
+      },
+      DescriptionColumn({
+        accessor: 'title',
+        switchable: false
+      }),
+      DateColumn({
+        sortable: false,
+        switchable: false
+      }),
+      {
+        accessor: 'quantity',
+        title: t`Quantity`,
+        switchable: false,
+        render: (record: any) => {
+          let q = record.quantity;
+          const extra: ReactNode[] = [];
+
+          if (record.speculative_quantity != 0) {
+            q = record.speculative_quantity;
+            extra.push(
+              <Text
+                size='sm'
+                key={'speculative'}
+              >{t`Quantity is speculative`}</Text>
+            );
+          }
+
+          if (!record.date) {
+            extra.push(
+              <Text
+                key={'null-date'}
+                size='sm'
+              >{t`No date available for provided quantity`}</Text>
+            );
+          } else if (new Date(record.date) < new Date()) {
+            extra.push(
+              <Text size='sm' key={'past-date'}>{t`Date is in the past`}</Text>
+            );
+          }
+
+          return (
+            <TableHoverCard
+              value={<Text key='quantity'>{q}</Text>}
+              title={t`Scheduled Quantity`}
+              extra={extra}
+            />
+          );
+        }
+      }
+    ];
+  }, []);
+
+  const chartData = useMemo(() => {
+    /* Rebuild chart data whenever the table data changes.
+     * Note: We assume that the data is provided in increasing date order,
+     *       with "null" date entries placed first.
+     */
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    // Date bounds
+    let min_date: Date = new Date();
+    let max_date: Date = new Date();
+
+    // Track stock scheduling throughout time
+    let stock = part.in_stock ?? 0;
+    let stock_min = stock;
+    let stock_max = stock;
+
+    // First, iterate through each entry and find any entries without an associated date, or in the past
+    table.records.forEach((record) => {
+      const q = record.quantity + record.speculative_quantity;
+
+      if (record.date == null || new Date(record.date) < today) {
+        if (q < 0) {
+          stock_min += q;
+        } else {
+          stock_max += q;
+        }
+      }
+    });
+
+    // Construct initial chart entry (for today)
+    const entries: any[] = [
+      {
+        date: today.valueOf(),
+        delta: 0,
+        scheduled: stock,
+        minimum: stock_min,
+        maximum: stock_max,
+        low_stock: part.minimum_stock
+      }
+    ];
+
+    table.records.forEach((record) => {
+      const q = record.quantity + record.speculative_quantity;
+
+      if (!record.date) {
+        return;
+      }
+
+      const date = new Date(record.date);
+
+      // In the past? Ignore this entry
+      if (date < today) {
+        return;
+      }
+
+      // Update date limits
+
+      if (date < min_date) {
+        min_date = date;
+      }
+
+      if (date > max_date) {
+        max_date = date;
+      }
+
+      // Update stock levels
+      stock += record.quantity;
+
+      stock_min += record.quantity;
+      stock_max += record.quantity;
+
+      // Speculative quantities expand the expected stock range
+      if (record.speculative_quantity < 0) {
+        stock_min += record.speculative_quantity;
+      } else if (record.speculative_quantity > 0) {
+        stock_max += record.speculative_quantity;
+      }
+
+      entries.push({
+        ...record,
+        date: new Date(record.date).valueOf(),
+        scheduled: stock,
+        minimum: stock_min,
+        maximum: stock_max,
+        low_stock: part.minimum_stock
+      });
+    });
+
+    return entries;
+  }, [part, 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]);
+
+  const hasSchedulingInfo: boolean = useMemo(
+    () => table.recordCount > 0,
+    [table.recordCount]
+  );
+
+  return (
+    <>
+      {!table.isLoading && !hasSchedulingInfo && (
+        <Alert color='blue' title={t`No information available`}>
+          <Text>{t`There is no scheduling information available for the selected part`}</Text>
+        </Alert>
+      )}
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <InvenTreeTable
+          url={apiUrl(ApiEndpoints.part_scheduling, part.pk)}
+          tableState={table}
+          columns={tableColumns}
+          props={{
+            enableSearch: false,
+            onRowClick: (record: any, index: number, event: any) => {
+              const url = getDetailUrl(record.model, record.model_id);
+
+              if (url) {
+                navigateToLink(url, navigate, event);
+              }
+            }
+          }}
+        />
+        {table.isLoading ? (
+          <Center>
+            <Loader />
+          </Center>
+        ) : (
+          <LineChart
+            data={chartData}
+            mah={'500px'}
+            dataKey='date'
+            withLegend
+            withYAxis
+            tooltipProps={{
+              content: ({ label, payload }) => (
+                <ChartTooltip label={label} payload={payload} />
+              )
+            }}
+            yAxisLabel={t`Expected Quantity`}
+            xAxisLabel={t`Date`}
+            xAxisProps={{
+              domain: chartLimits,
+              scale: 'time',
+              type: 'number',
+              tickFormatter: (value: number) => {
+                return formatDate(dayjs().format('YYYY-MM-DD'));
+              }
+            }}
+            series={[
+              {
+                name: 'scheduled',
+                label: t`Scheduled`,
+                color: 'blue.6'
+              },
+              {
+                name: 'minimum',
+                label: t`Minimum`,
+                color: 'yellow.6'
+              },
+              {
+                name: 'maximum',
+                label: t`Maximum`,
+                color: 'teal.6'
+              },
+              {
+                name: 'low_stock',
+                label: t`Low Stock`,
+                color: 'red.6'
+              }
+            ]}
+          />
+        )}
+      </SimpleGrid>
+    </>
+  );
+}