@inventreedb/ui 0.0.1

package/src/pages/company/SupplierPartDetail.tsx

@@ -0,0 +1,433 @@
+import { t } from '@lingui/core/macro';
+import { Grid, Skeleton, Stack } from '@mantine/core';
+import {
+  IconCurrencyDollar,
+  IconInfoCircle,
+  IconPackages,
+  IconShoppingCart
+} from '@tabler/icons-react';
+import { type ReactNode, useMemo } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import AdminButton from '../../components/buttons/AdminButton';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
+import DetailsBadge from '../../components/details/DetailsBadge';
+import { DetailsImage } from '../../components/details/DetailsImage';
+import { ItemDetailsGrid } from '../../components/details/ItemDetails';
+import {
+  BarcodeActionDropdown,
+  DeleteItemAction,
+  DuplicateItemAction,
+  EditItemAction,
+  OptionsActionDropdown
+} from '../../components/items/ActionDropdown';
+import InstanceDetail from '../../components/nav/InstanceDetail';
+import { PageDetail } from '../../components/nav/PageDetail';
+import NotesPanel from '../../components/panels/NotesPanel';
+import type { PanelType } from '../../components/panels/Panel';
+import { PanelGroup } from '../../components/panels/PanelGroup';
+import { useSupplierPartFields } from '../../forms/CompanyForms';
+import { getDetailUrl } from '../../functions/urls';
+import {
+  useCreateApiFormModal,
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useInstance } from '../../hooks/UseInstance';
+import { useUserState } from '../../states/UserState';
+import { PurchaseOrderTable } from '../../tables/purchasing/PurchaseOrderTable';
+import SupplierPriceBreakTable from '../../tables/purchasing/SupplierPriceBreakTable';
+import { StockItemTable } from '../../tables/stock/StockItemTable';
+
+export default function SupplierPartDetail() {
+  const { id } = useParams();
+
+  const user = useUserState();
+
+  const navigate = useNavigate();
+
+  const {
+    instance: supplierPart,
+    instanceQuery,
+    refreshInstance,
+    requestStatus
+  } = useInstance({
+    endpoint: ApiEndpoints.supplier_part_list,
+    pk: id,
+    hasPrimaryKey: true,
+    params: {
+      part_detail: true,
+      supplier_detail: true,
+      manufacturer_detail: true
+    }
+  });
+
+  const detailsPanel = useMemo(() => {
+    if (instanceQuery.isFetching) {
+      return <Skeleton />;
+    }
+
+    const data = supplierPart ?? {};
+
+    // Access nested data
+    data.manufacturer = data.manufacturer_detail?.pk;
+    data.MPN = data.manufacturer_part_detail?.MPN;
+    data.manufacturer_part = data.manufacturer_part_detail?.pk;
+
+    const tl: DetailsField[] = [
+      {
+        type: 'link',
+        name: 'part',
+        label: t`Internal Part`,
+        model: ModelType.part,
+        hidden: !supplierPart.part
+      },
+      {
+        type: 'string',
+        name: 'part_detail.IPN',
+        label: t`IPN`,
+        copy: true,
+        hidden: !data.part_detail?.IPN,
+        icon: 'serial'
+      },
+      {
+        type: 'string',
+        name: 'part_detail.description',
+        label: t`Part Description`,
+        copy: true,
+        icon: 'info',
+        hidden: !data.part_detail?.description
+      },
+      {
+        type: 'link',
+        external: true,
+        name: 'link',
+        label: t`External Link`,
+        copy: true,
+        hidden: !supplierPart.link
+      },
+      {
+        type: 'string',
+        name: 'note',
+        label: t`Note`,
+        copy: true,
+        hidden: !supplierPart.note
+      }
+    ];
+
+    const bl: DetailsField[] = [
+      {
+        type: 'link',
+        name: 'supplier',
+        label: t`Supplier`,
+        model: ModelType.company,
+        icon: 'suppliers',
+        hidden: !supplierPart.supplier
+      },
+      {
+        type: 'string',
+        name: 'SKU',
+        label: t`SKU`,
+        copy: true,
+        icon: 'reference'
+      },
+      {
+        type: 'string',
+        name: 'description',
+        label: t`Description`,
+        copy: true,
+        hidden: !data.description
+      },
+      {
+        type: 'link',
+        name: 'manufacturer',
+        label: t`Manufacturer`,
+        model: ModelType.company,
+        icon: 'manufacturers',
+        hidden: !data.manufacturer
+      },
+      {
+        type: 'link',
+        name: 'manufacturer_part',
+        model_field: 'MPN',
+        label: t`Manufacturer Part Number`,
+        model: ModelType.manufacturerpart,
+        copy: true,
+        icon: 'reference',
+        hidden: !data.manufacturer_part
+      }
+    ];
+
+    const br: DetailsField[] = [
+      {
+        type: 'string',
+        name: 'packaging',
+        label: t`Packaging`,
+        copy: true,
+        hidden: !data.packaging
+      },
+      {
+        type: 'string',
+        name: 'pack_quantity',
+        label: t`Pack Quantity`,
+        copy: true,
+        hidden: !data.pack_quantity,
+        icon: 'packages'
+      }
+    ];
+
+    const tr: DetailsField[] = [
+      {
+        type: 'string',
+        name: 'in_stock',
+        label: t`In Stock`,
+        copy: true,
+        icon: 'stock'
+      },
+      {
+        type: 'string',
+        name: 'on_order',
+        label: t`On Order`,
+        copy: true,
+        icon: 'purchase_orders'
+      },
+      {
+        type: 'string',
+        name: 'available',
+        label: t`Supplier Availability`,
+        hidden: !data.availability_updated,
+        copy: true,
+        icon: 'packages'
+      },
+      {
+        type: 'string',
+        name: 'availability_updated',
+        label: t`Availability Updated`,
+        copy: true,
+        hidden: !data.availability_updated,
+        icon: 'calendar'
+      }
+    ];
+
+    return (
+      <ItemDetailsGrid>
+        <Grid grow>
+          <DetailsImage
+            appRole={UserRoles.part}
+            src={supplierPart?.part_detail?.image}
+            apiPath={apiUrl(
+              ApiEndpoints.part_list,
+              supplierPart?.part_detail?.pk
+            )}
+            pk={supplierPart?.part_detail?.pk}
+          />
+          <Grid.Col span={8}>
+            <DetailsTable title={t`Part Details`} fields={tl} item={data} />
+          </Grid.Col>
+        </Grid>
+        <DetailsTable title={t`Supplier`} fields={bl} item={data} />
+        <DetailsTable title={t`Packaging`} fields={br} item={data} />
+        <DetailsTable title={t`Availability`} fields={tr} item={data} />
+      </ItemDetailsGrid>
+    );
+  }, [supplierPart, instanceQuery.isFetching]);
+
+  const panels: PanelType[] = useMemo(() => {
+    return [
+      {
+        name: 'details',
+        label: t`Supplier Part Details`,
+        icon: <IconInfoCircle />,
+        content: detailsPanel
+      },
+      {
+        name: 'stock',
+        label: t`Received Stock`,
+        icon: <IconPackages />,
+        content: supplierPart?.pk ? (
+          <StockItemTable
+            tableName='supplier-stock'
+            allowAdd={false}
+            params={{ supplier_part: supplierPart.pk }}
+          />
+        ) : (
+          <Skeleton />
+        )
+      },
+      {
+        name: 'purchaseorders',
+        label: t`Purchase Orders`,
+        icon: <IconShoppingCart />,
+        content: supplierPart?.pk ? (
+          <PurchaseOrderTable supplierPartId={supplierPart.pk} />
+        ) : (
+          <Skeleton />
+        )
+      },
+      {
+        name: 'pricing',
+        label: t`Supplier Pricing`,
+        icon: <IconCurrencyDollar />,
+        content: supplierPart?.pk ? (
+          <SupplierPriceBreakTable supplierPart={supplierPart} />
+        ) : (
+          <Skeleton />
+        )
+      },
+      NotesPanel({
+        model_type: ModelType.supplierpart,
+        model_id: supplierPart?.pk
+      })
+    ];
+  }, [supplierPart]);
+
+  const supplierPartActions = useMemo(() => {
+    return [
+      <AdminButton model={ModelType.supplierpart} id={supplierPart.pk} />,
+      <BarcodeActionDropdown
+        model={ModelType.supplierpart}
+        pk={supplierPart.pk}
+        hash={supplierPart.barcode_hash}
+        perm={user.hasChangeRole(UserRoles.purchase_order)}
+      />,
+      <OptionsActionDropdown
+        tooltip={t`Supplier Part Actions`}
+        actions={[
+          DuplicateItemAction({
+            hidden: !user.hasAddRole(UserRoles.purchase_order),
+            onClick: () => duplicateSupplierPart.open()
+          }),
+          EditItemAction({
+            hidden: !user.hasChangeRole(UserRoles.purchase_order),
+            onClick: () => editSupplierPart.open()
+          }),
+          DeleteItemAction({
+            hidden: !user.hasDeleteRole(UserRoles.purchase_order),
+            onClick: () => deleteSupplierPart.open()
+          })
+        ]}
+      />
+    ];
+  }, [user, supplierPart]);
+
+  const supplierPartFields = useSupplierPartFields({});
+
+  const editSupplierPart = useEditApiFormModal({
+    url: ApiEndpoints.supplier_part_list,
+    pk: supplierPart?.pk,
+    title: t`Edit Supplier Part`,
+    fields: supplierPartFields,
+    onFormSuccess: refreshInstance
+  });
+
+  const deleteSupplierPart = useDeleteApiFormModal({
+    url: ApiEndpoints.supplier_part_list,
+    pk: supplierPart?.pk,
+    title: t`Delete Supplier Part`,
+    onFormSuccess: () => {
+      navigate(getDetailUrl(ModelType.part, supplierPart.part));
+    }
+  });
+
+  const duplicateSupplierPart = useCreateApiFormModal({
+    url: ApiEndpoints.supplier_part_list,
+    title: t`Add Supplier Part`,
+    fields: supplierPartFields,
+    initialData: {
+      ...supplierPart
+    },
+    follow: true,
+    modelType: ModelType.supplierpart
+  });
+
+  const breadcrumbs = useMemo(() => {
+    return [
+      {
+        name: t`Purchasing`,
+        url: '/purchasing/'
+      },
+      {
+        name: supplierPart?.supplier_detail?.name ?? t`Supplier`,
+        url: `/purchasing/supplier/${supplierPart?.supplier_detail?.pk ?? ''}`
+      }
+    ];
+  }, [supplierPart]);
+
+  const badges: ReactNode[] = useMemo(() => {
+    return [
+      <DetailsBadge
+        label={t`Inactive`}
+        color='red'
+        visible={supplierPart.active == false}
+      />,
+      <DetailsBadge
+        label={`${t`In Stock`}: ${supplierPart.in_stock}`}
+        color={'green'}
+        visible={
+          supplierPart?.active &&
+          supplierPart?.in_stock &&
+          supplierPart?.in_stock > 0
+        }
+        key='in_stock'
+      />,
+      <DetailsBadge
+        label={t`No Stock`}
+        color={'red'}
+        visible={supplierPart.active && supplierPart.in_stock == 0}
+        key='no_stock'
+      />,
+      <DetailsBadge
+        label={`${t`On Order`}: ${supplierPart.on_order}`}
+        color='blue'
+        visible={supplierPart.on_order > 0}
+        key='on_order'
+      />
+    ];
+  }, [supplierPart]);
+
+  return (
+    <>
+      {deleteSupplierPart.modal}
+      {duplicateSupplierPart.modal}
+      {editSupplierPart.modal}
+      <InstanceDetail
+        status={requestStatus}
+        loading={instanceQuery.isFetching}
+        requiredRole={UserRoles.purchase_order}
+      >
+        <Stack gap='xs'>
+          <PageDetail
+            title={t`Supplier Part`}
+            subtitle={`${supplierPart.SKU} - ${supplierPart?.part_detail?.name}`}
+            breadcrumbs={breadcrumbs}
+            lastCrumb={[
+              {
+                name: supplierPart.SKU,
+                url: `/purchasing/supplier-part/${supplierPart.pk}/`
+              }
+            ]}
+            badges={badges}
+            actions={supplierPartActions}
+            imageUrl={supplierPart?.part_detail?.thumbnail}
+            editAction={editSupplierPart.open}
+            editEnabled={user.hasChangePermission(ModelType.supplierpart)}
+          />
+          <PanelGroup
+            pageKey='supplierpart'
+            panels={panels}
+            instance={supplierPart}
+            model={ModelType.supplierpart}
+            id={supplierPart.pk}
+          />
+        </Stack>
+      </InstanceDetail>
+    </>
+  );
+}

package/src/pages/core/CoreIndex.tsx

@@ -0,0 +1,50 @@
+import { t } from '@lingui/core/macro';
+import { Stack } from '@mantine/core';
+import { IconUser, IconUsersGroup } from '@tabler/icons-react';
+import { useMemo } from 'react';
+
+import PermissionDenied from '../../components/errors/PermissionDenied';
+import { PageDetail } from '../../components/nav/PageDetail';
+import { PanelGroup } from '../../components/panels/PanelGroup';
+import { useUserState } from '../../states/UserState';
+import { ContactTable } from '../../tables/company/ContactTable';
+import { UserTable } from '../../tables/core/UserTable';
+import { GroupTable } from '../../tables/settings/GroupTable';
+
+export default function CoreIndex() {
+  const user = useUserState();
+
+  const panels = useMemo(() => {
+    return [
+      {
+        name: 'users',
+        label: t`Users`,
+        icon: <IconUser />,
+        content: <UserTable />
+      },
+      {
+        name: 'groups',
+        label: t`Groups`,
+        icon: <IconUsersGroup />,
+        content: <GroupTable directLink />
+      },
+      {
+        name: 'contacts',
+        label: t`Contacts`,
+        icon: <IconUsersGroup />,
+        content: <ContactTable />
+      }
+    ];
+  }, []);
+
+  if (!user.isLoggedIn()) {
+    return <PermissionDenied />;
+  }
+
+  return (
+    <Stack>
+      <PageDetail title={t`System Overview`} />
+      <PanelGroup pageKey='core-index' panels={panels} id={null} />
+    </Stack>
+  );
+}

package/src/pages/core/GroupDetail.tsx

@@ -0,0 +1,97 @@
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { t } from '@lingui/core/macro';
+import { Grid, Skeleton, Stack } from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
+import { type ReactNode, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
+import { ItemDetailsGrid } from '../../components/details/ItemDetails';
+import {} from '../../components/items/ActionDropdown';
+import InstanceDetail from '../../components/nav/InstanceDetail';
+import { PageDetail } from '../../components/nav/PageDetail';
+import type { PanelType } from '../../components/panels/Panel';
+import { PanelGroup } from '../../components/panels/PanelGroup';
+import {} from '../../hooks/UseForm';
+import { useInstance } from '../../hooks/UseInstance';
+
+/**
+ * Detail page for a single group
+ */
+export default function GroupDetail() {
+  const { id } = useParams();
+
+  const { instance, instanceQuery, requestStatus } = useInstance({
+    endpoint: ApiEndpoints.group_list,
+    pk: id
+  });
+
+  const detailsPanel = useMemo(() => {
+    if (instanceQuery.isFetching) {
+      return <Skeleton />;
+    }
+
+    const tl: DetailsField[] = [
+      {
+        type: 'text',
+        name: 'name',
+        label: t`Group Name`,
+        copy: true
+      }
+    ];
+
+    return (
+      <ItemDetailsGrid>
+        <Grid grow>
+          <Grid.Col span={{ base: 12, sm: 8 }}>
+            <DetailsTable fields={tl} item={instance} />
+          </Grid.Col>
+        </Grid>
+      </ItemDetailsGrid>
+    );
+  }, [instance, instanceQuery]);
+
+  const groupPanels: PanelType[] = useMemo(() => {
+    return [
+      {
+        name: 'detail',
+        label: t`Group Details`,
+        icon: <IconInfoCircle />,
+        content: detailsPanel
+      }
+    ];
+  }, [instance, id]);
+
+  const groupBadges: ReactNode[] = useMemo(() => {
+    return instanceQuery.isLoading ? [] : ['group info'];
+  }, [instance, instanceQuery]);
+
+  return (
+    <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
+      <Stack gap='xs'>
+        <PageDetail
+          title={`${t`Group`}: ${instance.name}`}
+          imageUrl={instance?.image}
+          badges={groupBadges}
+          breadcrumbs={[
+            { name: t`System Overview`, url: '/core/' },
+            { name: t`Groups`, url: '/core/index/groups/' }
+          ]}
+          lastCrumb={[
+            { name: instance.name, url: `/core/group/${instance.pk}/` }
+          ]}
+        />
+        <PanelGroup
+          pageKey='group'
+          panels={groupPanels}
+          model={ModelType.group}
+          id={instance.pk}
+          instance={instance}
+        />
+      </Stack>
+    </InstanceDetail>
+  );
+}