@inventreedb/ui 0.0.1

package/src/pages/core/UserDetail.tsx

@@ -0,0 +1,193 @@
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { t } from '@lingui/core/macro';
+import { Badge, 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';
+import { useGlobalSettingsState } from '../../states/SettingsState';
+import { useUserState } from '../../states/UserState';
+
+/**
+ * Detail page for a single user
+ */
+export default function UserDetail() {
+  const { id } = useParams();
+
+  const user = useUserState();
+  const settings = useGlobalSettingsState();
+
+  const { instance, instanceQuery, requestStatus } = useInstance({
+    endpoint: ApiEndpoints.user_list,
+    pk: id
+  });
+
+  const detailsPanel = useMemo(() => {
+    if (instanceQuery.isFetching) {
+      return <Skeleton />;
+    }
+
+    const tl: DetailsField[] = [
+      {
+        type: 'text',
+        name: 'email',
+        label: t`Email`,
+        copy: true
+      },
+      {
+        type: 'text',
+        name: 'username',
+        label: t`Username`,
+        icon: 'info',
+        copy: true
+      },
+      {
+        type: 'text',
+        name: 'first_name',
+        label: t`First Name`,
+        icon: 'info',
+        copy: true
+      },
+      {
+        type: 'text',
+        name: 'last_name',
+        label: t`Last Name`,
+        icon: 'info',
+        copy: true
+      }
+    ];
+
+    const tr: DetailsField[] = [
+      {
+        type: 'text',
+        name: 'displayname',
+        label: t`Display Name`,
+        icon: 'user',
+        copy: true
+      },
+      {
+        type: 'text',
+        name: 'position',
+        label: t`Position`,
+        icon: 'info'
+      },
+      {
+        type: 'boolean',
+        name: 'active',
+        label: t`Active`,
+        icon: 'info'
+      },
+      {
+        type: 'text',
+        name: 'contact',
+        label: t`Contact`,
+        icon: 'email',
+        copy: true
+      },
+      {
+        type: 'text',
+        name: 'organisation',
+        label: t`Organisation`,
+        icon: 'info',
+        copy: true
+      },
+      {
+        type: 'text',
+        name: 'status',
+        label: t`Status`,
+        icon: 'note'
+      },
+      {
+        type: 'text',
+        name: 'location',
+        label: t`Location`,
+        icon: 'location',
+        copy: true
+      }
+    ];
+
+    return (
+      <ItemDetailsGrid>
+        <Grid grow>
+          <Grid.Col span={{ base: 12, sm: 8 }}>
+            <DetailsTable fields={tl} item={instance} />
+          </Grid.Col>
+        </Grid>
+        {settings.isSet('DISPLAY_PROFILE_INFO') && (
+          <DetailsTable fields={tr} item={instance} />
+        )}
+      </ItemDetailsGrid>
+    );
+  }, [instance, instanceQuery]);
+
+  const userPanels: PanelType[] = useMemo(() => {
+    return [
+      {
+        name: 'detail',
+        label: t`User Details`,
+        icon: <IconInfoCircle />,
+        content: detailsPanel
+      }
+    ];
+  }, [instance, id, user]);
+
+  const userBadges: ReactNode[] = useMemo(() => {
+    return instanceQuery.isLoading
+      ? []
+      : [
+          instance.is_staff && (
+            <Badge key='is_staff' color='blue'>{t`Staff`}</Badge>
+          ),
+          instance.is_superuser && (
+            <Badge key='is_superuser' color='red'>{t`Superuser`}</Badge>
+          ),
+          !instance.is_staff && !instance.is_superuser && (
+            <Badge key='is_normal' color='yellow'>{t`Basic user`}</Badge>
+          ),
+          instance.is_active ? (
+            <Badge key='is_active' color='green'>{t`Active`}</Badge>
+          ) : (
+            <Badge key='is_inactive' color='red'>{t`Inactive`}</Badge>
+          )
+        ];
+  }, [instance, instanceQuery]);
+
+  return (
+    <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
+      <Stack gap='xs'>
+        <PageDetail
+          title={`${t`User`}: ${instance.username}`}
+          imageUrl={instance?.image}
+          badges={userBadges}
+          breadcrumbs={[
+            { name: t`System Overview`, url: '/core/' },
+
+            { name: t`Users`, url: '/core/index/users/' }
+          ]}
+          lastCrumb={[
+            { name: instance.username, url: `/core/user/${instance.pk}/` }
+          ]}
+        />
+        <PanelGroup
+          pageKey='user'
+          panels={userPanels}
+          model={ModelType.user}
+          id={instance.pk}
+          instance={instance}
+        />
+      </Stack>
+    </InstanceDetail>
+  );
+}

package/src/pages/part/CategoryDetail.tsx

@@ -0,0 +1,369 @@
+import { t } from '@lingui/core/macro';
+import { Group, LoadingOverlay, Skeleton, Stack, Text } from '@mantine/core';
+import {
+  IconCategory,
+  IconInfoCircle,
+  IconListDetails,
+  IconPackages,
+  IconSitemap
+} from '@tabler/icons-react';
+import { useMemo, useState } 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 AdminButton from '../../components/buttons/AdminButton';
+import StarredToggleButton from '../../components/buttons/StarredToggleButton';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
+import { ItemDetailsGrid } from '../../components/details/ItemDetails';
+import {
+  DeleteItemAction,
+  EditItemAction,
+  OptionsActionDropdown
+} from '../../components/items/ActionDropdown';
+import { ApiIcon } from '../../components/items/ApiIcon';
+import InstanceDetail from '../../components/nav/InstanceDetail';
+import NavigationTree from '../../components/nav/NavigationTree';
+import { PageDetail } from '../../components/nav/PageDetail';
+import type { PanelType } from '../../components/panels/Panel';
+import { PanelGroup } from '../../components/panels/PanelGroup';
+import { partCategoryFields } from '../../forms/PartForms';
+import { getDetailUrl } from '../../functions/urls';
+import {
+  useDeleteApiFormModal,
+  useEditApiFormModal
+} from '../../hooks/UseForm';
+import { useInstance } from '../../hooks/UseInstance';
+import { useUserState } from '../../states/UserState';
+import ParametricPartTable from '../../tables/part/ParametricPartTable';
+import { PartCategoryTable } from '../../tables/part/PartCategoryTable';
+import { PartListTable } from '../../tables/part/PartTable';
+import { StockItemTable } from '../../tables/stock/StockItemTable';
+
+/**
+ * Detail view for a single PartCategory instance.
+ *
+ * Note: If no category ID is supplied, this acts as the top-level part category page
+ */
+export default function CategoryDetail() {
+  const { id: _id } = useParams();
+  const id = useMemo(
+    () => (!Number.isNaN(Number.parseInt(_id || '')) ? _id : undefined),
+    [_id]
+  );
+
+  const navigate = useNavigate();
+  const user = useUserState();
+
+  const [treeOpen, setTreeOpen] = useState(false);
+
+  const {
+    instance: category,
+    refreshInstance,
+    instanceQuery,
+    requestStatus
+  } = useInstance({
+    endpoint: ApiEndpoints.category_list,
+    hasPrimaryKey: true,
+    pk: id,
+    params: {
+      path_detail: true
+    }
+  });
+
+  const detailsPanel = useMemo(() => {
+    if (id && instanceQuery.isFetching) {
+      return <Skeleton />;
+    }
+
+    const left: DetailsField[] = [
+      {
+        type: 'text',
+        name: 'name',
+        label: t`Name`,
+        copy: true,
+        value_formatter: () => (
+          <Group gap='xs'>
+            {category.icon && <ApiIcon name={category.icon} />}
+            {category.name}
+          </Group>
+        )
+      },
+      {
+        type: 'text',
+        name: 'pathstring',
+        label: t`Path`,
+        icon: 'sitemap',
+        copy: true,
+        hidden: !id
+      },
+      {
+        type: 'text',
+        name: 'description',
+        label: t`Description`,
+        copy: true
+      },
+      {
+        type: 'link',
+        name: 'parent',
+        model_field: 'name',
+        icon: 'location',
+        label: t`Parent Category`,
+        model: ModelType.partcategory,
+        hidden: !category?.parent
+      },
+      {
+        type: 'boolean',
+        name: 'starred',
+        icon: 'notification',
+        label: t`Subscribed`
+      }
+    ];
+
+    const right: DetailsField[] = [
+      {
+        type: 'text',
+        name: 'part_count',
+        label: t`Parts`,
+        icon: 'part',
+        value_formatter: () => category?.part_count || '0'
+      },
+      {
+        type: 'text',
+        name: 'subcategories',
+        label: t`Subcategories`,
+        icon: 'sitemap',
+        hidden: !category?.subcategories
+      },
+      {
+        type: 'boolean',
+        name: 'structural',
+        label: t`Structural`,
+        icon: 'sitemap'
+      },
+      {
+        type: 'link',
+        name: 'parent_default_location',
+        label: t`Parent default location`,
+        model: ModelType.stocklocation,
+        hidden: !category.parent_default_location || category.default_location
+      },
+      {
+        type: 'link',
+        name: 'default_location',
+        label: t`Default location`,
+        model: ModelType.stocklocation,
+        hidden: !category.default_location
+      }
+    ];
+
+    return (
+      <ItemDetailsGrid>
+        {id && category?.pk ? (
+          <DetailsTable item={category} fields={left} />
+        ) : (
+          <Text>{t`Top level part category`}</Text>
+        )}
+        {id && category?.pk && <DetailsTable item={category} fields={right} />}
+      </ItemDetailsGrid>
+    );
+  }, [category, instanceQuery]);
+
+  const editCategory = useEditApiFormModal({
+    url: ApiEndpoints.category_list,
+    pk: id,
+    title: t`Edit Part Category`,
+    fields: partCategoryFields({}),
+    onFormSuccess: refreshInstance
+  });
+
+  const deleteOptions = useMemo(() => {
+    return [
+      {
+        value: 0,
+        display_name: t`Move items to parent category`
+      },
+      {
+        value: 1,
+        display_name: t`Delete items`
+      }
+    ];
+  }, []);
+
+  const deleteCategory = useDeleteApiFormModal({
+    url: ApiEndpoints.category_list,
+    pk: id,
+    title: t`Delete Part Category`,
+    fields: {
+      delete_parts: {
+        label: t`Parts Action`,
+        description: t`Action for parts in this category`,
+        choices: deleteOptions,
+        field_type: 'choice'
+      },
+      delete_child_categories: {
+        label: t`Child Categories Action`,
+        description: t`Action for child categories in this category`,
+        choices: deleteOptions,
+        field_type: 'choice'
+      }
+    },
+    onFormSuccess: () => {
+      if (category.parent) {
+        navigate(getDetailUrl(ModelType.partcategory, category.parent));
+      } else {
+        navigate('/part/');
+      }
+    }
+  });
+
+  const categoryActions = useMemo(() => {
+    return [
+      <AdminButton
+        key='admin'
+        model={ModelType.partcategory}
+        id={category.pk}
+      />,
+      <StarredToggleButton
+        key='starred_change'
+        instance={category}
+        model={ModelType.partcategory}
+        successFunction={() => {
+          refreshInstance();
+        }}
+      />,
+      <OptionsActionDropdown
+        key='category-actions'
+        tooltip={t`Category Actions`}
+        actions={[
+          EditItemAction({
+            hidden: !id || !user.hasChangeRole(UserRoles.part_category),
+            tooltip: t`Edit Part Category`,
+            onClick: () => editCategory.open()
+          }),
+          DeleteItemAction({
+            hidden: !id || !user.hasDeleteRole(UserRoles.part_category),
+            tooltip: t`Delete Part Category`,
+            onClick: () => deleteCategory.open()
+          })
+        ]}
+      />
+    ];
+  }, [id, user, category.pk, category.starred]);
+
+  const panels: PanelType[] = useMemo(
+    () => [
+      {
+        name: 'details',
+        label: t`Category Details`,
+        icon: <IconInfoCircle />,
+        content: detailsPanel
+      },
+      {
+        name: 'subcategories',
+        label: t`Subcategories`,
+        icon: <IconSitemap />,
+        content: <PartCategoryTable parentId={id} />
+      },
+      {
+        name: 'parts',
+        label: t`Parts`,
+        icon: <IconCategory />,
+        content: (
+          <PartListTable
+            props={{
+              params: {
+                category: id
+              }
+            }}
+          />
+        )
+      },
+      {
+        name: 'stockitem',
+        label: t`Stock Items`,
+        icon: <IconPackages />,
+        hidden: !id,
+        content: (
+          <StockItemTable
+            params={{
+              category: id
+            }}
+            allowAdd={false}
+            tableName='category-stockitems'
+          />
+        )
+      },
+      {
+        name: 'parameters',
+        label: t`Part Parameters`,
+        icon: <IconListDetails />,
+        content: <ParametricPartTable categoryId={id} />
+      }
+    ],
+    [category, id]
+  );
+
+  const breadcrumbs = useMemo(
+    () => [
+      { name: t`Parts`, url: '/part' },
+      ...(category.path ?? []).map((c: any) => ({
+        name: c.name,
+        url: getDetailUrl(ModelType.partcategory, c.pk),
+        icon: c.icon ? <ApiIcon name={c.icon} /> : undefined
+      }))
+    ],
+    [category]
+  );
+
+  return (
+    <>
+      {editCategory.modal}
+      {deleteCategory.modal}
+      <InstanceDetail
+        status={requestStatus}
+        loading={id ? instanceQuery.isFetching : false}
+        requiredRole={UserRoles.part_category}
+      >
+        <Stack gap='xs'>
+          <LoadingOverlay visible={instanceQuery.isFetching} />
+          <NavigationTree
+            modelType={ModelType.partcategory}
+            title={t`Part Categories`}
+            endpoint={ApiEndpoints.category_tree}
+            opened={treeOpen}
+            onClose={() => {
+              setTreeOpen(false);
+            }}
+            selectedId={category?.pk}
+          />
+          <PageDetail
+            title={t`Part Category`}
+            subtitle={category?.name}
+            icon={category?.icon && <ApiIcon name={category?.icon} />}
+            breadcrumbs={breadcrumbs}
+            breadcrumbAction={() => {
+              setTreeOpen(true);
+            }}
+            actions={categoryActions}
+            editAction={editCategory.open}
+            editEnabled={
+              !!category?.pk && user.hasChangePermission(ModelType.partcategory)
+            }
+          />
+          <PanelGroup
+            pageKey='partcategory'
+            panels={panels}
+            model={ModelType.partcategory}
+            instance={category}
+            id={category.pk ?? null}
+          />
+        </Stack>
+      </InstanceDetail>
+    </>
+  );
+}

package/src/pages/part/PartAllocationPanel.tsx

@@ -0,0 +1,40 @@
+import { t } from '@lingui/core/macro';
+import { Accordion } from '@mantine/core';
+
+import { UserRoles } from '@lib/enums/Roles';
+import { StylishText } from '../../components/items/StylishText';
+import { useUserState } from '../../states/UserState';
+import PartBuildAllocationsTable from '../../tables/part/PartBuildAllocationsTable';
+import PartSalesAllocationsTable from '../../tables/part/PartSalesAllocationsTable';
+
+export default function PartAllocationPanel({ part }: Readonly<{ part: any }>) {
+  const user = useUserState();
+
+  return (
+    <Accordion
+      multiple={true}
+      defaultValue={['buildallocations', 'salesallocations']}
+    >
+      {part.component && user.hasViewRole(UserRoles.build) && (
+        <Accordion.Item value='buildallocations' key='buildallocations'>
+          <Accordion.Control>
+            <StylishText size='lg'>{t`Build Order Allocations`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <PartBuildAllocationsTable partId={part.pk} />
+          </Accordion.Panel>
+        </Accordion.Item>
+      )}
+      {part.salable && user.hasViewRole(UserRoles.sales_order) && (
+        <Accordion.Item value='salesallocations' key='salesallocations'>
+          <Accordion.Control>
+            <StylishText size='lg'>{t`Sales Order Allocations`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <PartSalesAllocationsTable partId={part.pk} />
+          </Accordion.Panel>
+        </Accordion.Item>
+      )}
+    </Accordion>
+  );
+}