@inventreedb/ui 0.0.1

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

@@ -0,0 +1,134 @@
+import { t } from '@lingui/core/macro';
+import { BarChart } from '@mantine/charts';
+import { Group, SimpleGrid, Text } from '@mantine/core';
+import { type ReactNode, useCallback, useMemo } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { formatCurrency, formatDate } from '../../../defaults/formatters';
+import { useTable } from '../../../hooks/UseTable';
+import type { TableColumn } from '../../../tables/Column';
+import { InvenTreeTable } from '../../../tables/InvenTreeTable';
+import { NoPricingData } from './PricingPanel';
+
+export default function PurchaseHistoryPanel({
+  part
+}: Readonly<{
+  part: any;
+}>): ReactNode {
+  const table = useTable('pricingpurchasehistory');
+
+  const calculateUnitPrice = useCallback((record: any) => {
+    const pack_quantity =
+      record?.supplier_part_detail?.pack_quantity_native ?? 1;
+    const unit_price = Number.parseFloat(record.purchase_price) / pack_quantity;
+
+    return unit_price;
+  }, []);
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'order',
+        title: t`Purchase Order`,
+        render: (record: any) => record?.order_detail?.reference,
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'order_detail.complete_date',
+        ordering: 'complete_date',
+        title: t`Date`,
+        sortable: true,
+        switchable: true,
+        render: (record: any) => formatDate(record.order_detail.complete_date)
+      },
+      {
+        accessor: 'purchase_price',
+        title: t`Purchase Price`,
+        sortable: true,
+        switchable: false,
+        render: (record: any) => {
+          const price = formatCurrency(record.purchase_price, {
+            currency: record.purchase_price_currency
+          });
+
+          const packQuatity = record.supplier_part_detail?.pack_quantity;
+          const hasPackQuantity =
+            !!packQuatity &&
+            record.supplier_part_detail?.pack_quantity_native != 1;
+
+          return (
+            <Group justify='space-between' gap='xs'>
+              <Text>{price}</Text>
+              {hasPackQuantity && <Text size='xs'>[{packQuatity}]</Text>}
+            </Group>
+          );
+        }
+      },
+      {
+        accessor: 'unit_price',
+        title: t`Unit Price`,
+        ordering: 'purchase_price',
+        sortable: true,
+        switchable: false,
+        render: (record: any) => {
+          const price = formatCurrency(calculateUnitPrice(record), {
+            currency: record.purchase_price_currency
+          });
+
+          const units = record.part_detail?.units;
+          const hasUnits = !!units && units !== 1;
+
+          return (
+            <Group justify='space-between' gap='xs'>
+              <Text>{price}</Text>
+              {hasUnits && <Text size='xs'>[{units}]</Text>}
+            </Group>
+          );
+        }
+      }
+    ];
+  }, []);
+
+  const purchaseHistoryData = useMemo(() => {
+    return table.records.map((record: any) => {
+      return {
+        quantity: record.quantity,
+        purchase_price: Number.parseFloat(record.purchase_price),
+        unit_price: calculateUnitPrice(record),
+        name: record.order_detail.reference
+      };
+    });
+  }, [table.records]);
+
+  return (
+    <SimpleGrid cols={{ base: 1, md: 2 }}>
+      <InvenTreeTable
+        tableState={table}
+        url={apiUrl(ApiEndpoints.purchase_order_line_list)}
+        columns={columns}
+        props={{
+          params: {
+            base_part: part.pk,
+            part_detail: true,
+            order_detail: true,
+            has_pricing: true,
+            order_complete: true
+          }
+        }}
+      />
+      {purchaseHistoryData.length > 0 ? (
+        <BarChart
+          data={purchaseHistoryData}
+          dataKey='name'
+          series={[
+            { name: 'unit_price', label: t`Unit Price`, color: 'blue.5' }
+          ]}
+        />
+      ) : (
+        <NoPricingData />
+      )}
+    </SimpleGrid>
+  );
+}

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

@@ -0,0 +1,95 @@
+import { t } from '@lingui/core/macro';
+import { BarChart } from '@mantine/charts';
+import { SimpleGrid } from '@mantine/core';
+import { type ReactNode, useMemo } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { formatCurrency } from '../../../defaults/formatters';
+import { useTable } from '../../../hooks/UseTable';
+import type { TableColumn } from '../../../tables/Column';
+import { DateColumn } from '../../../tables/ColumnRenderers';
+import { InvenTreeTable } from '../../../tables/InvenTreeTable';
+import { NoPricingData } from './PricingPanel';
+
+export default function SaleHistoryPanel({
+  part
+}: Readonly<{ part: any }>): ReactNode {
+  const table = useTable('pricingsalehistory');
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'order',
+        title: t`Sales Order`,
+        render: (record: any) => record?.order_detail?.reference,
+        sortable: true,
+        switchable: false
+      },
+      {
+        accessor: 'customer',
+        title: t`Customer`,
+        sortable: true,
+        switchable: true,
+        render: (record: any) => record?.customer_detail?.name
+      },
+      DateColumn({
+        accessor: 'order_detail.shipment_date',
+        title: t`Date`,
+        sortable: false,
+        switchable: true
+      }),
+      {
+        accessor: 'sale_price',
+        title: t`Sale Price`,
+        sortable: true,
+        switchable: false,
+        render: (record: any) => {
+          return formatCurrency(record.sale_price, {
+            currency: record.sale_price_currency
+          });
+        }
+      }
+    ];
+  }, []);
+
+  const saleHistoryData = useMemo(() => {
+    return table.records.map((record: any) => {
+      return {
+        name: record.order_detail.reference,
+        sale_price: Number.parseFloat(record.sale_price)
+      };
+    });
+  }, [table.records]);
+
+  return (
+    <SimpleGrid cols={{ base: 1, md: 2 }}>
+      <InvenTreeTable
+        tableState={table}
+        url={apiUrl(ApiEndpoints.sales_order_line_list)}
+        columns={columns}
+        props={{
+          params: {
+            part: part.pk,
+            part_detail: true,
+            order_detail: true,
+            customer_detail: true,
+            has_pricing: true,
+            order_complete: true
+          }
+        }}
+      />
+      {saleHistoryData.length > 0 ? (
+        <BarChart
+          data={saleHistoryData}
+          dataKey='name'
+          series={[
+            { name: 'sale_price', label: t`Sale Price`, color: 'blue.6' }
+          ]}
+        />
+      ) : (
+        <NoPricingData />
+      )}
+    </SimpleGrid>
+  );
+}

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

@@ -0,0 +1,80 @@
+import { t } from '@lingui/core/macro';
+import { BarChart } from '@mantine/charts';
+import { SimpleGrid } from '@mantine/core';
+import { useMemo } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
+import { useTable } from '../../../hooks/UseTable';
+import type { TableColumn } from '../../../tables/Column';
+import { InvenTreeTable } from '../../../tables/InvenTreeTable';
+import {
+  SupplierPriceBreakColumns,
+  calculateSupplierPartUnitPrice
+} from '../../../tables/purchasing/SupplierPriceBreakTable';
+import { NoPricingData } from './PricingPanel';
+
+export default function SupplierPricingPanel({
+  part
+}: Readonly<{ part: any }>) {
+  const table = useTable('pricingsupplier');
+
+  const columns: TableColumn[] = useMemo(() => {
+    return SupplierPriceBreakColumns();
+  }, []);
+
+  const currency: string = useMemo(() => {
+    if (table.records.length === 0) {
+      return '';
+    }
+    return table.records[0].currency;
+  }, [table.records]);
+
+  const supplierPricingData = useMemo(() => {
+    return (
+      table.records?.map((record: any) => {
+        return {
+          quantity: record.quantity,
+          supplier_price: Number.parseFloat(record.price),
+          unit_price: calculateSupplierPartUnitPrice(record),
+          name: record.part_detail?.SKU
+        };
+      }) ?? []
+    );
+  }, [table.records]);
+
+  return (
+    <SimpleGrid cols={{ base: 1, md: 2 }}>
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.supplier_part_pricing_list)}
+        columns={columns}
+        tableState={table}
+        props={{
+          params: {
+            base_part: part.pk,
+            supplier_detail: true,
+            part_detail: true
+          }
+        }}
+      />
+      {supplierPricingData.length > 0 ? (
+        <BarChart
+          data={supplierPricingData}
+          dataKey='name'
+          series={[
+            { name: 'unit_price', label: t`Unit Price`, color: 'blue.6' },
+            {
+              name: 'supplier_price',
+              label: t`Supplier Price`,
+              color: 'teal.6'
+            }
+          ]}
+          valueFormatter={(value) => tooltipFormatter(value, currency)}
+        />
+      ) : (
+        <NoPricingData />
+      )}
+    </SimpleGrid>
+  );
+}

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

@@ -0,0 +1,112 @@
+import { t } from '@lingui/core/macro';
+import { BarChart } from '@mantine/charts';
+import { SimpleGrid, Stack } from '@mantine/core';
+import { type ReactNode, useMemo } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
+import { formatCurrency } 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 { NoPricingData } from './PricingPanel';
+
+export default function VariantPricingPanel({
+  part,
+  pricing
+}: Readonly<{
+  part: any;
+  pricing: any;
+}>): ReactNode {
+  const table = useTable('pricingvariants');
+
+  const columns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'name',
+        title: t`Variant Part`,
+        sortable: true,
+        switchable: false,
+        render: (record: any) => PartColumn({ part: record, full_name: true })
+      },
+      {
+        accessor: 'pricing_min',
+        title: t`Minimum Price`,
+        sortable: true,
+        switchable: false,
+        render: (record: any) =>
+          formatCurrency(record.pricing_min, { currency: pricing?.currency })
+      },
+      {
+        accessor: 'pricing_max',
+        title: t`Maximum Price`,
+        sortable: true,
+        switchable: false,
+        render: (record: any) =>
+          formatCurrency(record.pricing_max, { currency: pricing?.currency })
+      },
+      DateColumn({
+        accessor: 'pricing_updated',
+        title: t`Updated`,
+        sortable: true,
+        switchable: true
+      })
+    ];
+  }, []);
+
+  // Calculate pricing data for the part variants
+  const variantPricingData: any[] = useMemo(() => {
+    const pricing = table.records.map((variant: any) => {
+      return {
+        part: variant,
+        name: variant.full_name,
+        pmin: Number.parseFloat(
+          variant.pricing_min ?? variant.pricing_max ?? 0
+        ),
+        pmax: Number.parseFloat(variant.pricing_max ?? variant.pricing_min ?? 0)
+      };
+    });
+
+    return pricing;
+  }, [table.records]);
+
+  return (
+    <Stack gap='xs'>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <InvenTreeTable
+          tableState={table}
+          url={apiUrl(ApiEndpoints.part_list)}
+          columns={columns}
+          props={{
+            params: {
+              ancestor: part?.pk,
+              has_pricing: true
+            },
+            enablePagination: true,
+            modelType: ModelType.part
+          }}
+        />
+        {variantPricingData.length > 0 ? (
+          <BarChart
+            dataKey='name'
+            data={variantPricingData}
+            xAxisLabel={t`Variant Part`}
+            yAxisLabel={t`Price Range`}
+            series={[
+              { name: 'pmin', label: t`Minimum Price`, color: 'blue.6' },
+              { name: 'pmax', label: t`Maximum Price`, color: 'teal.6' }
+            ]}
+            valueFormatter={(value) =>
+              tooltipFormatter(value, pricing?.currency)
+            }
+          />
+        ) : (
+          <NoPricingData />
+        )}
+      </SimpleGrid>
+    </Stack>
+  );
+}