[PUI] Add "index" page for build orders (#8287)

* Add "index" page for build orders

- Make consistent with other pages
- Allow plugin panels here
- Prepare for future development

* Rearrange URLs for "manufacturing"

- Provide same format as other order types
- Allow for other sub-pages under "manufacturing" in the future

* Fix breadcrumbs

* Adjust playwright tests

src/frontend/src/components/render/ModelType.tsx

@@ -105,8 +105,8 @@ export const ModelInformationDict: ModelDict = {
   build: {
     label: () => t`Build`,
     label_multiple: () => t`Builds`,
-    url_overview: '/build',
+    url_overview: '/manufacturing/build-order/',
-    url_detail: '/build/:pk/',
+    url_detail: '/manufacturing/build-order/:pk/',
     cui_detail: '/build/:pk/',
     api_endpoint: ApiEndpoints.build_order_list,
     admin_url: '/build/build/'

src/frontend/src/defaults/links.tsx

@@ -28,7 +28,11 @@ export const navTabs = [
   { text: <Trans>Dashboard</Trans>, name: 'dashboard' },
   { text: <Trans>Parts</Trans>, name: 'part', role: UserRoles.part },
   { text: <Trans>Stock</Trans>, name: 'stock', role: UserRoles.stock },
-  { text: <Trans>Build</Trans>, name: 'build', role: UserRoles.build },
+  {
+    text: <Trans>Manufacturing</Trans>,
+    name: 'manufacturing',
+    role: UserRoles.build
+  },
   {
     text: <Trans>Purchasing</Trans>,
     name: 'purchasing',

src/frontend/src/defaults/menuItems.tsx

@@ -39,9 +39,9 @@ export const menuItems: menuItemsCollection = {
     link: '/stock'
   },
   build: {
-    id: 'build',
+    id: 'manufacturing',
-    text: <Trans>Build</Trans>,
+    text: <Trans>Manufacturing</Trans>,
-    link: '/build/'
+    link: '/manufacturing/'
   },
   purchasing: {
     id: 'purchasing',

src/frontend/src/pages/build/BuildDetail.tsx

@@ -522,7 +522,7 @@ export default function BuildDetail() {
             editEnabled={user.hasChangePermission(ModelType.part)}
             imageUrl={build.part_detail?.image ?? build.part_detail?.thumbnail}
             breadcrumbs={[
-              { name: t`Build Orders`, url: '/build' },
+              { name: t`Manufacturing`, url: '/manufacturing' },
               { name: build.reference, url: `/build/${build.pk}` }
             ]}
             actions={buildActions}

src/frontend/src/pages/build/BuildIndex.tsx

@@ -1,8 +1,11 @@
 import { t } from '@lingui/macro';
 import { Stack } from '@mantine/core';
+import { IconTools } 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 { UserRoles } from '../../enums/Roles';
 import { useUserState } from '../../states/UserState';
 import { BuildOrderTable } from '../../tables/build/BuildOrderTable';
@@ -17,10 +20,26 @@ export default function BuildIndex() {
     return <PermissionDenied />;
   }
 
+  const panels = useMemo(() => {
+    return [
+      {
+        name: 'buildorders',
+        label: t`Build Orders`,
+        content: <BuildOrderTable />,
+        icon: <IconTools />
+      }
+    ];
+  }, []);
+
   return (
     <Stack>
-      <PageDetail title={t`Build Orders`} actions={[]} />
+      <PageDetail title={t`Manufacturing`} actions={[]} />
-      <BuildOrderTable />
+      <PanelGroup
+        pageKey="build-index"
+        panels={panels}
+        model="manufacturing"
+        id={null}
+      />
     </Stack>
   );
 }

src/frontend/src/router.tsx

@@ -51,6 +51,7 @@ export const StockDetail = Loadable(
 export const BuildIndex = Loadable(
   lazy(() => import('./pages/build/BuildIndex'))
 );
+
 export const BuildDetail = Loadable(
   lazy(() => import('./pages/build/BuildDetail'))
 );
@@ -139,9 +140,10 @@ export const routes = (
         <Route path="location/:id?/*" element={<LocationDetail />} />
         <Route path="item/:id/*" element={<StockDetail />} />
       </Route>
-      <Route path="build/">
+      <Route path="manufacturing/">
-        <Route index element={<BuildIndex />} />
+        <Route index element={<Navigate to="index/" />} />
-        <Route path=":id/*" element={<BuildDetail />} />
+        <Route path="index/*" element={<BuildIndex />} />
+        <Route path="build-order/:id/*" element={<BuildDetail />} />
       </Route>
       <Route path="purchasing/">
         <Route index element={<Navigate to="index/" />} />

src/frontend/tests/pages/pui_build.spec.ts

@@ -8,7 +8,7 @@ test('Pages - Build Order', async ({ page }) => {
   await page.goto(`${baseUrl}/part/`);
 
   // Navigate to the correct build order
-  await page.getByRole('tab', { name: 'Build', exact: true }).click();
+  await page.getByRole('tab', { name: 'Manufacturing', exact: true }).click();
 
   // We have now loaded the "Build Order" table. Check for some expected texts
   await page.getByText('On Hold').first().waitFor();
@@ -30,7 +30,7 @@ test('Pages - Build Order', async ({ page }) => {
   await page.getByRole('button', { name: 'Cancel' }).click();
 
   // Back to the build list
-  await page.getByLabel('breadcrumb-0-build-orders').click();
+  await page.getByLabel('breadcrumb-0-manufacturing').click();
 
   // Load a different build order
   await page.getByRole('cell', { name: 'BO0011' }).click();
@@ -88,7 +88,7 @@ test('Pages - Build Order - Build Outputs', async ({ page }) => {
   await page.goto(`${baseUrl}/part/`);
 
   // Navigate to the correct build order
-  await page.getByRole('tab', { name: 'Build', exact: true }).click();
+  await page.getByRole('tab', { name: 'Manufacturing', exact: true }).click();
 
   // We have now loaded the "Build Order" table. Check for some expected texts
   await page.getByText('On Hold').first().waitFor();

src/frontend/tests/pui_tables.spec.ts

@@ -24,7 +24,7 @@ test('Tables - Filters', async ({ page }) => {
   await doQuickLogin(page);
 
   // Head to the "build order list" page
-  await page.goto(`${baseUrl}/build/`);
+  await page.goto(`${baseUrl}/manufacturing/index/`);
 
   await setFilter(page, 'Status', 'Complete');
   await setFilter(page, 'Responsible', 'allaccess');