@inventreedb/ui 0.0.1

package/src/pages/company/CompanyDetail.tsx

@@ -0,0 +1,352 @@
+import { t } from '@lingui/core/macro';
+import { Grid, Skeleton, Stack } from '@mantine/core';
+import {
+  IconBuildingWarehouse,
+  IconInfoCircle,
+  IconMap2,
+  IconPackageExport,
+  IconPackages,
+  IconShoppingCart,
+  IconTruckDelivery,
+  IconTruckReturn,
+  IconUsersGroup
+} 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 {
+  DeleteItemAction,
+  EditItemAction,
+  OptionsActionDropdown
+} from '../../components/items/ActionDropdown';
+import type { Breadcrumb } from '../../components/nav/BreadcrumbList';
+import InstanceDetail from '../../components/nav/InstanceDetail';
+import { PageDetail } from '../../components/nav/PageDetail';
+import AttachmentPanel from '../../components/panels/AttachmentPanel';
+import NotesPanel from '../../components/panels/NotesPanel';
+import type { PanelType } from '../../components/panels/Panel';
+import { PanelGroup } from '../../components/panels/PanelGroup';
+import { companyFields } from '../../forms/CompanyForms';
+import {
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useInstance } from '../../hooks/UseInstance';
+import { useUserState } from '../../states/UserState';
+import { AddressTable } from '../../tables/company/AddressTable';
+import { ContactTable } from '../../tables/company/ContactTable';
+import { ManufacturerPartTable } from '../../tables/purchasing/ManufacturerPartTable';
+import { PurchaseOrderTable } from '../../tables/purchasing/PurchaseOrderTable';
+import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
+import { ReturnOrderTable } from '../../tables/sales/ReturnOrderTable';
+import { SalesOrderTable } from '../../tables/sales/SalesOrderTable';
+import { StockItemTable } from '../../tables/stock/StockItemTable';
+
+export type CompanyDetailProps = {
+  title: string;
+  breadcrumbs: Breadcrumb[];
+  last_crumb_url: string;
+};
+
+/**
+ * Detail view for a single company instance
+ */
+export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
+  const { id } = useParams();
+
+  const navigate = useNavigate();
+  const user = useUserState();
+
+  const {
+    instance: company,
+    refreshInstance,
+    instanceQuery,
+    requestStatus
+  } = useInstance({
+    endpoint: ApiEndpoints.company_list,
+    pk: id,
+    params: {},
+    refetchOnMount: true
+  });
+
+  const detailsPanel = useMemo(() => {
+    if (instanceQuery.isFetching) {
+      return <Skeleton />;
+    }
+
+    const tl: DetailsField[] = [
+      {
+        type: 'text',
+        name: 'description',
+        label: t`Description`,
+        copy: true
+      },
+      {
+        type: 'link',
+        name: 'website',
+        label: t`Website`,
+        external: true,
+        copy: true,
+        hidden: !company.website
+      },
+      {
+        type: 'text',
+        name: 'phone',
+        label: t`Phone Number`,
+        copy: true,
+        hidden: !company.phone
+      },
+      {
+        type: 'text',
+        name: 'email',
+        label: t`Email Address`,
+        copy: true,
+        hidden: !company.email
+      }
+    ];
+
+    const tr: DetailsField[] = [
+      {
+        type: 'string',
+        name: 'currency',
+        label: t`Default Currency`
+      },
+      {
+        type: 'boolean',
+        name: 'is_supplier',
+        label: t`Supplier`,
+        icon: 'suppliers'
+      },
+      {
+        type: 'boolean',
+        name: 'is_manufacturer',
+        label: t`Manufacturer`,
+        icon: 'manufacturers'
+      },
+      {
+        type: 'boolean',
+        name: 'is_customer',
+        label: t`Customer`,
+        icon: 'customers'
+      }
+    ];
+
+    return (
+      <ItemDetailsGrid>
+        <Grid grow>
+          <DetailsImage
+            appRole={UserRoles.purchase_order}
+            apiPath={apiUrl(ApiEndpoints.company_list, company.pk)}
+            src={company.image}
+            pk={company.pk}
+            refresh={refreshInstance}
+            imageActions={{
+              uploadFile: true,
+              downloadImage: true,
+              deleteFile: true
+            }}
+          />
+          <Grid.Col span={{ base: 12, sm: 8 }}>
+            <DetailsTable item={company} fields={tl} />
+          </Grid.Col>
+        </Grid>
+        <DetailsTable item={company} fields={tr} />
+      </ItemDetailsGrid>
+    );
+  }, [company, instanceQuery]);
+
+  const companyPanels: PanelType[] = useMemo(() => {
+    return [
+      {
+        name: 'details',
+        label: t`Company Details`,
+        icon: <IconInfoCircle />,
+        content: detailsPanel
+      },
+      {
+        name: 'supplied-parts',
+        label: t`Supplied Parts`,
+        icon: <IconPackageExport />,
+        hidden: !company?.is_supplier,
+        content: company?.pk && (
+          <SupplierPartTable params={{ supplier: company.pk }} />
+        )
+      },
+      {
+        name: 'manufactured-parts',
+        label: t`Manufactured Parts`,
+        icon: <IconBuildingWarehouse />,
+        hidden: !company?.is_manufacturer,
+        content: company?.pk && (
+          <ManufacturerPartTable params={{ manufacturer: company.pk }} />
+        )
+      },
+      {
+        name: 'purchase-orders',
+        label: t`Purchase Orders`,
+        icon: <IconShoppingCart />,
+        hidden: !company?.is_supplier,
+        content: company?.pk && <PurchaseOrderTable supplierId={company.pk} />
+      },
+      {
+        name: 'stock-items',
+        label: t`Stock Items`,
+        icon: <IconPackages />,
+        hidden: !company?.is_manufacturer && !company?.is_supplier,
+        content: company?.pk && (
+          <StockItemTable
+            allowAdd={false}
+            tableName='company-stock'
+            params={{ company: company.pk }}
+          />
+        )
+      },
+      {
+        name: 'sales-orders',
+        label: t`Sales Orders`,
+        icon: <IconTruckDelivery />,
+        hidden: !company?.is_customer,
+        content: company?.pk && <SalesOrderTable customerId={company.pk} />
+      },
+      {
+        name: 'return-orders',
+        label: t`Return Orders`,
+        icon: <IconTruckReturn />,
+        hidden: !company?.is_customer,
+        content: company.pk ? (
+          <ReturnOrderTable customerId={company.pk} />
+        ) : (
+          <Skeleton />
+        )
+      },
+      {
+        name: 'assigned-stock',
+        label: t`Assigned Stock`,
+        icon: <IconPackageExport />,
+        hidden: !company?.is_customer,
+        content: company?.pk ? (
+          <StockItemTable
+            allowAdd={false}
+            tableName='assigned-stock'
+            showLocation={false}
+            params={{ customer: company.pk }}
+          />
+        ) : (
+          <Skeleton />
+        )
+      },
+      {
+        name: 'contacts',
+        label: t`Contacts`,
+        icon: <IconUsersGroup />,
+        content: company?.pk && <ContactTable companyId={company.pk} />
+      },
+      {
+        name: 'addresses',
+        label: t`Addresses`,
+        icon: <IconMap2 />,
+        content: company?.pk && <AddressTable companyId={company.pk} />
+      },
+      AttachmentPanel({
+        model_type: ModelType.company,
+        model_id: company.pk
+      }),
+      NotesPanel({
+        model_type: ModelType.company,
+        model_id: company.pk
+      })
+    ];
+  }, [id, company, user]);
+
+  const editCompany = useEditApiFormModal({
+    url: ApiEndpoints.company_list,
+    pk: company?.pk,
+    title: t`Edit Company`,
+    fields: companyFields(),
+    onFormSuccess: refreshInstance
+  });
+
+  const deleteCompany = useDeleteApiFormModal({
+    url: ApiEndpoints.company_list,
+    pk: company?.pk,
+    title: t`Delete Company`,
+    onFormSuccess: () => {
+      navigate('/');
+    }
+  });
+
+  const companyActions = useMemo(() => {
+    return [
+      <AdminButton model={ModelType.company} id={company.pk} />,
+      <OptionsActionDropdown
+        tooltip={t`Company Actions`}
+        actions={[
+          EditItemAction({
+            hidden: !user.hasChangeRole(UserRoles.purchase_order),
+            onClick: () => editCompany.open()
+          }),
+          DeleteItemAction({
+            hidden: !user.hasDeleteRole(UserRoles.purchase_order),
+            onClick: () => deleteCompany.open()
+          })
+        ]}
+      />
+    ];
+  }, [id, company, user]);
+
+  const badges: ReactNode[] = useMemo(() => {
+    return [
+      <DetailsBadge
+        label={t`Inactive`}
+        color='red'
+        visible={company.active == false}
+      />
+    ];
+  }, [company]);
+
+  return (
+    <>
+      {editCompany.modal}
+      {deleteCompany.modal}
+      <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
+        <Stack gap='xs'>
+          <PageDetail
+            title={`${t`Company`}: ${company.name}`}
+            subtitle={company.description}
+            actions={companyActions}
+            imageUrl={company.image}
+            breadcrumbs={props.breadcrumbs}
+            lastCrumb={[
+              {
+                name: company.name,
+                url: `${props.last_crumb_url}/${company.pk}/`
+              }
+            ]}
+            badges={badges}
+            editAction={editCompany.open}
+            editEnabled={user.hasChangePermission(ModelType.company)}
+          />
+          <PanelGroup
+            pageKey='company'
+            panels={companyPanels}
+            instance={company}
+            model={ModelType.company}
+            id={company.pk}
+          />
+        </Stack>
+      </InstanceDetail>
+    </>
+  );
+}

package/src/pages/company/CustomerDetail.tsx

@@ -0,0 +1,13 @@
+import { t } from '@lingui/core/macro';
+
+import CompanyDetail from './CompanyDetail';
+
+export default function CustomerDetail() {
+  return (
+    <CompanyDetail
+      title={t`Customer`}
+      breadcrumbs={[{ name: t`Sales`, url: '/sales/' }]}
+      last_crumb_url='/sales/customer'
+    />
+  );
+}

package/src/pages/company/ManufacturerDetail.tsx

@@ -0,0 +1,13 @@
+import { t } from '@lingui/core/macro';
+
+import CompanyDetail from './CompanyDetail';
+
+export default function ManufacturerDetail() {
+  return (
+    <CompanyDetail
+      title={t`Manufacturer`}
+      breadcrumbs={[{ name: t`Purchasing`, url: '/purchasing/' }]}
+      last_crumb_url='/purchasing/manufacturer'
+    />
+  );
+}

package/src/pages/company/ManufacturerPartDetail.tsx

@@ -0,0 +1,307 @@
+import { t } from '@lingui/core/macro';
+import { Grid, Skeleton, Stack } from '@mantine/core';
+import {
+  IconBuildingWarehouse,
+  IconInfoCircle,
+  IconList
+} from '@tabler/icons-react';
+import { 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 { DetailsImage } from '../../components/details/DetailsImage';
+import { ItemDetailsGrid } from '../../components/details/ItemDetails';
+import {
+  DeleteItemAction,
+  DuplicateItemAction,
+  EditItemAction,
+  OptionsActionDropdown
+} from '../../components/items/ActionDropdown';
+import InstanceDetail from '../../components/nav/InstanceDetail';
+import { PageDetail } from '../../components/nav/PageDetail';
+import AttachmentPanel from '../../components/panels/AttachmentPanel';
+import NotesPanel from '../../components/panels/NotesPanel';
+import type { PanelType } from '../../components/panels/Panel';
+import { PanelGroup } from '../../components/panels/PanelGroup';
+import { useManufacturerPartFields } 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 ManufacturerPartParameterTable from '../../tables/purchasing/ManufacturerPartParameterTable';
+import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
+
+export default function ManufacturerPartDetail() {
+  const { id } = useParams();
+  const user = useUserState();
+  const navigate = useNavigate();
+
+  const {
+    instance: manufacturerPart,
+    instanceQuery,
+    refreshInstance,
+    requestStatus
+  } = useInstance({
+    endpoint: ApiEndpoints.manufacturer_part_list,
+    pk: id,
+    hasPrimaryKey: true,
+    params: {
+      part_detail: true,
+      manufacturer_detail: true
+    }
+  });
+
+  const detailsPanel = useMemo(() => {
+    if (instanceQuery.isFetching) {
+      return <Skeleton />;
+    }
+
+    const data = manufacturerPart ?? {};
+
+    const tl: DetailsField[] = [
+      {
+        type: 'link',
+        name: 'part',
+        label: t`Internal Part`,
+        model: ModelType.part,
+        hidden: !manufacturerPart.part
+      },
+      {
+        type: 'string',
+        name: 'part_detail.IPN',
+        label: t`IPN`,
+        copy: true,
+        icon: 'serial',
+        hidden: !data.part_detail?.IPN
+      },
+      {
+        type: 'string',
+        name: 'part_detail.description',
+        label: t`Description`,
+        copy: true,
+        icon: 'info',
+        hidden: !manufacturerPart.description
+      }
+    ];
+
+    const tr: DetailsField[] = [
+      {
+        type: 'link',
+        name: 'manufacturer',
+        label: t`Manufacturer`,
+        icon: 'manufacturers',
+        model: ModelType.company,
+        hidden: !manufacturerPart.manufacturer
+      },
+      {
+        type: 'string',
+        name: 'MPN',
+        label: t`Manufacturer Part Number`,
+        copy: true,
+        hidden: !manufacturerPart.MPN,
+        icon: 'reference'
+      },
+      {
+        type: 'string',
+        name: 'description',
+        label: t`Description`,
+        copy: true,
+        hidden: !manufacturerPart.description,
+        icon: 'info'
+      },
+      {
+        type: 'link',
+        external: true,
+        name: 'link',
+        label: t`External Link`,
+        copy: true,
+        hidden: !manufacturerPart.link
+      }
+    ];
+
+    return (
+      <ItemDetailsGrid>
+        <Grid grow>
+          <DetailsImage
+            appRole={UserRoles.part}
+            src={manufacturerPart?.part_detail?.image}
+            apiPath={apiUrl(
+              ApiEndpoints.part_list,
+              manufacturerPart?.part_detail?.pk
+            )}
+            pk={manufacturerPart?.part_detail?.pk}
+          />
+          <Grid.Col span={{ base: 12, sm: 8 }}>
+            <DetailsTable title={t`Part Details`} fields={tl} item={data} />
+          </Grid.Col>
+        </Grid>
+        <DetailsTable title={t`Manufacturer Details`} fields={tr} item={data} />
+      </ItemDetailsGrid>
+    );
+  }, [manufacturerPart, instanceQuery]);
+
+  const panels: PanelType[] = useMemo(() => {
+    return [
+      {
+        name: 'details',
+        label: t`Manufacturer Part Details`,
+        icon: <IconInfoCircle />,
+        content: detailsPanel
+      },
+      {
+        name: 'parameters',
+        label: t`Parameters`,
+        icon: <IconList />,
+        content: manufacturerPart?.pk ? (
+          <ManufacturerPartParameterTable
+            params={{ manufacturer_part: manufacturerPart.pk }}
+          />
+        ) : (
+          <Skeleton />
+        )
+      },
+      {
+        name: 'suppliers',
+        label: t`Suppliers`,
+        icon: <IconBuildingWarehouse />,
+        content: manufacturerPart?.pk ? (
+          <SupplierPartTable
+            params={{
+              manufacturer_part: manufacturerPart.pk
+            }}
+          />
+        ) : (
+          <Skeleton />
+        )
+      },
+      AttachmentPanel({
+        model_type: ModelType.manufacturerpart,
+        model_id: manufacturerPart?.pk
+      }),
+      NotesPanel({
+        model_type: ModelType.manufacturerpart,
+        model_id: manufacturerPart?.pk
+      })
+    ];
+  }, [manufacturerPart]);
+
+  const editManufacturerPartFields = useManufacturerPartFields();
+
+  const editManufacturerPart = useEditApiFormModal({
+    url: ApiEndpoints.manufacturer_part_list,
+    pk: manufacturerPart?.pk,
+    title: t`Edit Manufacturer Part`,
+    fields: editManufacturerPartFields,
+    onFormSuccess: refreshInstance
+  });
+
+  const duplicateManufacturerPart = useCreateApiFormModal({
+    url: ApiEndpoints.manufacturer_part_list,
+    title: t`Add Manufacturer Part`,
+    fields: editManufacturerPartFields,
+    initialData: {
+      ...manufacturerPart
+    },
+    follow: true,
+    modelType: ModelType.manufacturerpart
+  });
+
+  const deleteManufacturerPart = useDeleteApiFormModal({
+    url: ApiEndpoints.manufacturer_part_list,
+    pk: manufacturerPart?.pk,
+    title: t`Delete Manufacturer Part`,
+    onFormSuccess: () => {
+      navigate(getDetailUrl(ModelType.part, manufacturerPart.part));
+    }
+  });
+
+  const manufacturerPartActions = useMemo(() => {
+    return [
+      <AdminButton
+        key='admin'
+        model={ModelType.manufacturerpart}
+        id={manufacturerPart.pk}
+      />,
+      <OptionsActionDropdown
+        key='options'
+        tooltip={t`Manufacturer Part Actions`}
+        actions={[
+          DuplicateItemAction({
+            hidden: !user.hasAddRole(UserRoles.purchase_order),
+            onClick: () => duplicateManufacturerPart.open()
+          }),
+          EditItemAction({
+            hidden: !user.hasChangeRole(UserRoles.purchase_order),
+            onClick: () => editManufacturerPart.open()
+          }),
+          DeleteItemAction({
+            hidden: !user.hasDeleteRole(UserRoles.purchase_order),
+            onClick: () => deleteManufacturerPart.open()
+          })
+        ]}
+      />
+    ];
+  }, [user, manufacturerPart]);
+
+  const breadcrumbs = useMemo(() => {
+    return [
+      {
+        name: t`Purchasing`,
+        url: '/purchasing/'
+      },
+      {
+        name: manufacturerPart?.manufacturer_detail?.name ?? t`Manufacturer`,
+        url: `/purchasing/manufacturer/${manufacturerPart?.manufacturer_detail?.pk}/`
+      }
+    ];
+  }, [manufacturerPart]);
+
+  return (
+    <>
+      {deleteManufacturerPart.modal}
+      {duplicateManufacturerPart.modal}
+      {editManufacturerPart.modal}
+      <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
+        <Stack gap='xs'>
+          <PageDetail
+            title={t`ManufacturerPart`}
+            subtitle={`${manufacturerPart.MPN} - ${manufacturerPart.part_detail?.name}`}
+            breadcrumbs={breadcrumbs}
+            lastCrumb={[
+              {
+                name: manufacturerPart.MPN,
+                url: getDetailUrl(
+                  ModelType.manufacturerpart,
+                  manufacturerPart.pk
+                )
+              }
+            ]}
+            actions={manufacturerPartActions}
+            imageUrl={manufacturerPart?.part_detail?.thumbnail}
+            editAction={editManufacturerPart.open}
+            editEnabled={user.hasChangePermission(ModelType.manufacturerpart)}
+          />
+          <PanelGroup
+            pageKey='manufacturerpart'
+            panels={panels}
+            instance={manufacturerPart}
+            model={ModelType.manufacturerpart}
+            id={manufacturerPart.pk}
+          />
+        </Stack>
+      </InstanceDetail>
+    </>
+  );
+}

package/src/pages/company/SupplierDetail.tsx

@@ -0,0 +1,13 @@
+import { t } from '@lingui/core/macro';
+
+import CompanyDetail from './CompanyDetail';
+
+export default function SupplierDetail() {
+  return (
+    <CompanyDetail
+      title={t`Supplier`}
+      breadcrumbs={[{ name: t`Purchasing`, url: '/purchasing/' }]}
+      last_crumb_url='/purchasing/supplier'
+    />
+  );
+}