@inventreedb/ui 0.0.1

package/src/components/render/Order.tsx

@@ -0,0 +1,124 @@
+import { t } from '@lingui/core/macro';
+import type { ReactNode } from 'react';
+
+import { ModelType } from '@lib/enums/ModelType';
+import { getDetailUrl } from '../../functions/urls';
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
+import { StatusRenderer } from './StatusRenderer';
+
+/**
+ * Inline rendering of a single PurchaseOrder instance
+ */
+export function RenderPurchaseOrder(
+  props: Readonly<InstanceRenderInterface>
+): ReactNode {
+  const { instance } = props;
+  const supplier = instance?.supplier_detail || {};
+
+  return (
+    <RenderInlineModel
+      {...props}
+      primary={instance.reference}
+      secondary={instance.description}
+      suffix={StatusRenderer({
+        status: instance.status_custom_key,
+        type: ModelType.purchaseorder
+      })}
+      image={supplier.thumnbnail || supplier.image}
+      url={
+        props.link
+          ? getDetailUrl(ModelType.purchaseorder, instance.pk)
+          : undefined
+      }
+    />
+  );
+}
+
+/**
+ * Inline rendering of a single ReturnOrder instance
+ */
+export function RenderReturnOrder(
+  props: Readonly<InstanceRenderInterface>
+): ReactNode {
+  const { instance } = props;
+  const customer = instance?.customer_detail || {};
+
+  return (
+    <RenderInlineModel
+      {...props}
+      primary={instance.reference}
+      secondary={instance.description}
+      suffix={StatusRenderer({
+        status: instance.status_custom_key,
+        type: ModelType.returnorder
+      })}
+      image={customer.thumnbnail || customer.image}
+      url={
+        props.link
+          ? getDetailUrl(ModelType.returnorder, instance.pk)
+          : undefined
+      }
+    />
+  );
+}
+
+export function RenderReturnOrderLineItem(
+  props: Readonly<InstanceRenderInterface>
+): ReactNode {
+  const { instance } = props;
+
+  return (
+    <RenderInlineModel
+      {...props}
+      primary={instance.reference}
+      suffix={StatusRenderer({
+        status: instance.outcome,
+        type: ModelType.returnorderlineitem
+      })}
+    />
+  );
+}
+
+/**
+ * Inline rendering of a single SalesOrder instance
+ */
+export function RenderSalesOrder(
+  props: Readonly<InstanceRenderInterface>
+): ReactNode {
+  const { instance } = props;
+  const customer = instance?.customer_detail || {};
+
+  return (
+    <RenderInlineModel
+      {...props}
+      primary={instance.reference}
+      secondary={instance.description}
+      suffix={StatusRenderer({
+        status: instance.status_custom_key,
+        type: ModelType.salesorder
+      })}
+      image={customer.thumnbnail || customer.image}
+      url={
+        props.link ? getDetailUrl(ModelType.salesorder, instance.pk) : undefined
+      }
+    />
+  );
+}
+
+/**
+ * Inline rendering of a single SalesOrderAllocation instance
+ */
+export function RenderSalesOrderShipment({
+  instance
+}: Readonly<{
+  instance: any;
+}>): ReactNode {
+  const order = instance.order_detail || {};
+
+  return (
+    <RenderInlineModel
+      primary={order.reference}
+      secondary={`${t`Shipment`} ${instance.reference}`}
+    />
+  );
+}

package/src/components/render/Part.tsx

@@ -0,0 +1,109 @@
+import { t } from '@lingui/core/macro';
+import { Badge } from '@mantine/core';
+import type { ReactNode } from 'react';
+
+import { ModelType } from '@lib/enums/ModelType';
+import { getDetailUrl } from '../../functions/urls';
+import { ApiIcon } from '../items/ApiIcon';
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
+
+/**
+ * Inline rendering of a single Part instance
+ */
+export function RenderPart(
+  props: Readonly<InstanceRenderInterface>
+): ReactNode {
+  const { instance } = props;
+
+  let badgeText = '';
+  let badgeColor = '';
+
+  const stock: number | null = instance.total_in_stock ?? null;
+
+  if (instance.active == false) {
+    badgeColor = 'red';
+    badgeText = t`Inactive`;
+  } else if (stock != null && stock <= 0) {
+    badgeColor = 'orange';
+    badgeText = t`No stock`;
+  } else if (stock != null) {
+    badgeText = `${t`Stock`}: ${stock}`;
+    badgeColor = instance.minimum_stock > stock ? 'yellow' : 'green';
+  }
+
+  const badge = !!badgeText ? (
+    <Badge size='xs' color={badgeColor}>
+      {badgeText}
+    </Badge>
+  ) : null;
+
+  return (
+    <RenderInlineModel
+      {...props}
+      primary={instance.full_name ?? instance.name}
+      secondary={instance.description}
+      suffix={badge}
+      image={instance.thumnbnail || instance.image}
+      url={props.link ? getDetailUrl(ModelType.part, instance.pk) : undefined}
+    />
+  );
+}
+
+/**
+ * Inline rendering of a PartCategory instance
+ */
+export function RenderPartCategory(
+  props: Readonly<InstanceRenderInterface>
+): ReactNode {
+  const { instance } = props;
+
+  return (
+    <RenderInlineModel
+      {...props}
+      tooltip={instance.pathstring}
+      prefix={
+        <>
+          {instance.level > 0 && `${'- '.repeat(instance.level)}`}
+          {instance.icon && <ApiIcon name={instance.icon} />}
+        </>
+      }
+      primary={instance.pathstring}
+      secondary={instance.description}
+      url={
+        props.link
+          ? getDetailUrl(ModelType.partcategory, instance.pk)
+          : undefined
+      }
+    />
+  );
+}
+
+/**
+ * Inline rendering of a PartParameterTemplate instance
+ */
+export function RenderPartParameterTemplate({
+  instance
+}: Readonly<{
+  instance: any;
+}>): ReactNode {
+  return (
+    <RenderInlineModel
+      primary={instance.name}
+      secondary={instance.description}
+      suffix={instance.units}
+    />
+  );
+}
+
+export function RenderPartTestTemplate({
+  instance
+}: Readonly<{
+  instance: any;
+}>): ReactNode {
+  return (
+    <RenderInlineModel
+      primary={instance.test_name}
+      secondary={instance.description}
+    />
+  );
+}

package/src/components/render/Plugin.tsx

@@ -0,0 +1,21 @@
+import { t } from '@lingui/core/macro';
+import { Badge } from '@mantine/core';
+import type { ReactNode } from 'react';
+
+import { RenderInlineModel } from './Instance';
+
+export function RenderPlugin({
+  instance
+}: Readonly<{
+  instance: Readonly<any>;
+}>): ReactNode {
+  return (
+    <RenderInlineModel
+      primary={instance.name}
+      secondary={instance.meta?.description}
+      suffix={
+        !instance.active && <Badge size='sm' color='red'>{t`Inactive`}</Badge>
+      }
+    />
+  );
+}

package/src/components/render/Report.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+
+import { RenderInlineModel } from './Instance';
+
+export function RenderReportTemplate({
+  instance
+}: Readonly<{
+  instance: any;
+}>): ReactNode {
+  return (
+    <RenderInlineModel
+      primary={instance.name}
+      secondary={instance.description}
+    />
+  );
+}
+
+export function RenderLabelTemplate({
+  instance
+}: Readonly<{
+  instance: any;
+}>): ReactNode {
+  return (
+    <RenderInlineModel
+      primary={instance.name}
+      secondary={instance.description}
+    />
+  );
+}

package/src/components/render/StatusRenderer.tsx

@@ -0,0 +1,178 @@
+import { Badge, Center, type MantineSize } from '@mantine/core';
+
+import type { ModelType } from '@lib/enums/ModelType';
+import { statusColorMap } from '../../defaults/backendMappings';
+import { resolveItem } from '../../functions/conversion';
+import { useGlobalStatusState } from '../../states/StatusState';
+
+export interface StatusCodeInterface {
+  key: number;
+  label: string;
+  name: string;
+  color: string;
+}
+
+export interface StatusCodeListInterface {
+  status_class: string;
+  values: {
+    [key: string]: StatusCodeInterface;
+  };
+}
+
+interface RenderStatusLabelOptionsInterface {
+  size?: MantineSize;
+  hidden?: boolean;
+}
+
+/*
+ * Generic function to render a status label
+ */
+function renderStatusLabel(
+  key: string | number,
+  codes: StatusCodeListInterface,
+  options: RenderStatusLabelOptionsInterface = {}
+) {
+  let text = null;
+  let color = null;
+
+  // Find the entry which matches the provided key
+  for (const name in codes.values) {
+    const entry: StatusCodeInterface = codes.values[name];
+
+    if (entry?.key == key) {
+      text = entry.label;
+      color = entry.color;
+      break;
+    }
+  }
+
+  if (!text) {
+    console.error(
+      `ERR: renderStatusLabel could not find match for code ${key}`
+    );
+  }
+
+  // Fallbacks
+  if (color == null) color = 'default';
+  color = statusColorMap[color] || statusColorMap['default'];
+  const size = options.size || 'xs';
+
+  if (!text) {
+    text = key;
+  }
+
+  return (
+    <Badge color={color} variant='filled' size={size}>
+      {text}
+    </Badge>
+  );
+}
+
+export function getStatusCodes(
+  type: ModelType | string
+): StatusCodeListInterface | null {
+  const statusCodeList = useGlobalStatusState.getState().status;
+
+  if (statusCodeList === undefined) {
+    console.log('StatusRenderer: statusCodeList is undefined');
+    return null;
+  }
+
+  const statusCodes = statusCodeList[type];
+
+  if (statusCodes === undefined) {
+    console.log('StatusRenderer: statusCodes is undefined');
+    return null;
+  }
+
+  return statusCodes;
+}
+
+/**
+ * Return a list of status codes select options for a given model type
+ * returns an array of objects with keys "value" and "display_name"
+ *
+ */
+export function getStatusCodeOptions(type: ModelType | string): any[] {
+  const statusCodes = getStatusCodes(type);
+
+  if (!statusCodes) {
+    return [];
+  }
+
+  return Object.values(statusCodes?.values ?? []).map((entry) => {
+    return {
+      value: entry.key,
+      display_name: entry.label
+    };
+  });
+}
+
+/*
+ * Return the name of a status code, based on the key
+ */
+export function getStatusCodeName(
+  type: ModelType | string,
+  key: string | number
+) {
+  const statusCodes = getStatusCodes(type);
+
+  if (!statusCodes) {
+    return null;
+  }
+
+  for (const name in statusCodes) {
+    const entry: StatusCodeInterface = statusCodes.values[name];
+
+    if (entry.key == key) {
+      return entry.name;
+    }
+  }
+
+  return null;
+}
+
+/*
+ * Render the status for a object.
+ * Uses the values specified in "status_codes.py"
+ */
+export const StatusRenderer = ({
+  status,
+  type,
+  options
+}: {
+  status: string | number;
+  type: ModelType | string;
+  options?: RenderStatusLabelOptionsInterface;
+}) => {
+  const statusCodes = getStatusCodes(type);
+
+  if (options?.hidden) {
+    return null;
+  }
+
+  if (statusCodes === undefined || statusCodes === null) {
+    console.warn('StatusRenderer: statusCodes is undefined');
+    return null;
+  }
+
+  return renderStatusLabel(status, statusCodes, options);
+};
+
+/*
+ * Render the status badge in a table
+ */
+export function TableStatusRenderer(
+  type: ModelType,
+  accessor?: string
+): ((record: any) => any) | undefined {
+  return (record: any) => {
+    const status = resolveItem(record, accessor ?? 'status');
+
+    return (
+      status && (
+        <Center>{StatusRenderer({ status: status, type: type })}</Center>
+      )
+    );
+  };
+}

package/src/components/render/Stock.tsx

@@ -0,0 +1,84 @@
+import { t } from '@lingui/core/macro';
+import { Text } from '@mantine/core';
+import type { ReactNode } from 'react';
+
+import { ModelType } from '@lib/enums/ModelType';
+import { getDetailUrl } from '../../functions/urls';
+import { ApiIcon } from '../items/ApiIcon';
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
+
+/**
+ * Inline rendering of a single StockLocation instance
+ */
+export function RenderStockLocation(
+  props: Readonly<InstanceRenderInterface>
+): ReactNode {
+  const { instance } = props;
+
+  return (
+    <RenderInlineModel
+      {...props}
+      tooltip={instance.pathstring}
+      prefix={
+        <>
+          {instance.level > 0 && `${'- '.repeat(instance.level)}`}
+          {instance.icon && <ApiIcon name={instance.icon} />}
+        </>
+      }
+      primary={instance.pathstring}
+      secondary={instance.description}
+      url={
+        props.link
+          ? getDetailUrl(ModelType.stocklocation, instance.pk)
+          : undefined
+      }
+    />
+  );
+}
+
+/**
+ * Inline rendering of a single StockLocationType instance
+ */
+export function RenderStockLocationType({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
+  return (
+    <RenderInlineModel
+      primary={instance.name}
+      prefix={instance.icon && <ApiIcon name={instance.icon} />}
+      secondary={`${instance.description} (${instance.location_count})`}
+    />
+  );
+}
+
+export function RenderStockItem(
+  props: Readonly<InstanceRenderInterface>
+): ReactNode {
+  const { instance } = props;
+  let quantity_string = '';
+
+  if (instance?.serial !== null && instance?.serial !== undefined) {
+    quantity_string += `${t`Serial Number`}: ${instance.serial}`;
+  } else if (instance?.quantity) {
+    quantity_string = `${t`Quantity`}: ${instance.quantity}`;
+  }
+
+  let batch_string = '';
+
+  if (!!instance.batch) {
+    batch_string = `${t`Batch`}: ${instance.batch}`;
+  }
+
+  return (
+    <RenderInlineModel
+      {...props}
+      primary={instance.part_detail?.full_name}
+      secondary={batch_string}
+      suffix={<Text size='xs'>{quantity_string}</Text>}
+      image={instance.part_detail?.thumbnail || instance.part_detail?.image}
+      url={
+        props.link ? getDetailUrl(ModelType.stockitem, instance.pk) : undefined
+      }
+    />
+  );
+}

package/src/components/render/User.tsx

@@ -0,0 +1,42 @@
+import { IconUser, IconUsersGroup } from '@tabler/icons-react';
+import type { ReactNode } from 'react';
+
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
+
+export function RenderOwner({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
+  return (
+    instance && (
+      <RenderInlineModel
+        primary={instance.name}
+        suffix={
+          instance.label == 'group' ? (
+            <IconUsersGroup size={16} />
+          ) : (
+            <IconUser size={16} />
+          )
+        }
+      />
+    )
+  );
+}
+
+export function RenderUser({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
+  return (
+    instance && (
+      <RenderInlineModel
+        primary={instance.username}
+        secondary={`${instance.first_name} ${instance.last_name}`}
+      />
+    )
+  );
+}
+
+export function RenderGroup({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
+  return instance && <RenderInlineModel primary={instance.name} />;
+}

package/src/components/settings/FactCollection.tsx

@@ -0,0 +1,31 @@
+import { SimpleGrid } from '@mantine/core';
+
+import { FactItem } from './FactItem';
+
+export function FactCollection({
+  items,
+  minItems = 3
+}: Readonly<{
+  items: { title: string; value: any }[];
+  minItems?: number;
+}>) {
+  return (
+    <SimpleGrid
+      cols={{
+        base: 1,
+        sm: Math.min(2, minItems),
+        md: Math.min(3, minItems),
+        lg: minItems
+      }}
+      spacing='xs'
+    >
+      {items.map((item, index) => (
+        <FactItem
+          key={`${index}-${item.value}`}
+          title={item.title}
+          value={item.value}
+        />
+      ))}
+    </SimpleGrid>
+  );
+}

package/src/components/settings/FactItem.tsx

@@ -0,0 +1,17 @@
+import { Paper, Stack, Text } from '@mantine/core';
+
+import { StylishText } from '../items/StylishText';
+
+export function FactItem({
+  title,
+  value
+}: Readonly<{ title: string; value: number }>) {
+  return (
+    <Paper p='md' shadow='xs'>
+      <Stack gap='xs'>
+        <StylishText size='md'>{title}</StylishText>
+        <Text>{value}</Text>
+      </Stack>
+    </Paper>
+  );
+}