[PUI] Table refactor (#8395)

* Refactor table header items out into new file

* Improve BomItem API query

* Allow table header to be removed entirely

* revert BomTable

* Re-add "box" component

* Reimplement partlocked attribute

* Fix for PartDetail

- Revert to proper panels

* Updated playwright tests

* Additional tests

src/backend/InvenTree/part/serializers.py

@@ -1708,6 +1708,10 @@ def setup_eager_loading(queryset):
             'sub_part__stock_items__sales_order_allocations',
         )
 
+        queryset = queryset.select_related(
+            'part__pricing_data', 'sub_part__pricing_data'
+        )
+
         queryset = queryset.prefetch_related(
             'substitutes', 'substitutes__part__stock_items'
         )

src/frontend/src/hooks/UseTable.tsx

@@ -1,5 +1,6 @@
 import { randomId, useLocalStorage } from '@mantine/hooks';
 import { useCallback, useMemo, useState } from 'react';
+import { SetURLSearchParams, useSearchParams } from 'react-router-dom';
 
 import { TableFilter } from '../tables/Filter';
 
@@ -8,19 +9,47 @@ import { TableFilter } from '../tables/Filter';
  *
  * tableKey: A unique key for the table. When this key changes, the table will be refreshed.
  * refreshTable: A callback function to externally refresh the table.
+ * isLoading: A boolean flag to indicate if the table is currently loading data
+ * setIsLoading: A function to set the isLoading flag
  * activeFilters: An array of active filters (saved to local storage)
+ * setActiveFilters: A function to set the active filters
+ * clearActiveFilters: A function to clear all active filters
+ * queryFilters: A map of query filters (e.g. ?active=true&overdue=false) passed in the URL
+ * setQueryFilters: A function to set the query filters
+ * clearQueryFilters: A function to clear all query filters
+ * expandedRecords: An array of expanded records (rows) in the table
+ * setExpandedRecords: A function to set the expanded records
+ * isRowExpanded: A function to determine if a record is expanded
  * selectedRecords: An array of selected records (rows) in the table
+ * selectedIds: An array of primary key values for selected records
+ * hasSelectedRecords: A boolean flag to indicate if any records are selected
+ * setSelectedRecords: A function to set the selected records
+ * clearSelectedRecords: A function to clear all selected records
  * hiddenColumns: An array of hidden column names
+ * setHiddenColumns: A function to set the hidden columns
  * searchTerm: The current search term for the table
+ * setSearchTerm: A function to set the search term
+ * recordCount: The total number of records in the table
+ * setRecordCount: A function to set the record count
+ * page: The current page number
+ * setPage: A function to set the current page number
+ * pageSize: The number of records per page
+ * setPageSize: A function to set the number of records per page
+ * records: An array of records (rows) in the table
+ * setRecords: A function to set the records
+ * updateRecord: A function to update a single record in the table
  */
 export type TableState = {
   tableKey: string;
   refreshTable: () => void;
-  activeFilters: TableFilter[];
   isLoading: boolean;
   setIsLoading: (value: boolean) => void;
+  activeFilters: TableFilter[];
   setActiveFilters: (filters: TableFilter[]) => void;
   clearActiveFilters: () => void;
+  queryFilters: URLSearchParams;
+  setQueryFilters: SetURLSearchParams;
+  clearQueryFilters: () => void;
   expandedRecords: any[];
   setExpandedRecords: (records: any[]) => void;
   isRowExpanded: (pk: number) => boolean;
@@ -42,8 +71,6 @@ export type TableState = {
   records: any[];
   setRecords: (records: any[]) => void;
   updateRecord: (record: any) => void;
-  editable: boolean;
-  setEditable: (value: boolean) => void;
 };
 
 /**
@@ -58,6 +85,13 @@ export function useTable(tableName: string): TableState {
     return `${tableName.replaceAll('-', '')}-${randomId()}`;
   }
 
+  // Extract URL query parameters (e.g. ?active=true&overdue=false)
+  const [queryFilters, setQueryFilters] = useSearchParams();
+
+  const clearQueryFilters = useCallback(() => {
+    setQueryFilters({});
+  }, []);
+
   const [tableKey, setTableKey] = useState<string>(generateTableName());
 
   // Callback used to refresh (reload) the table
@@ -145,8 +179,6 @@ export function useTable(tableName: string): TableState {
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const [editable, setEditable] = useState<boolean>(false);
-
   return {
     tableKey,
     refreshTable,
@@ -155,6 +187,9 @@ export function useTable(tableName: string): TableState {
     activeFilters,
     setActiveFilters,
     clearActiveFilters,
+    queryFilters,
+    setQueryFilters,
+    clearQueryFilters,
     expandedRecords,
     setExpandedRecords,
     isRowExpanded,
@@ -175,8 +210,6 @@ export function useTable(tableName: string): TableState {
     setPageSize,
     records,
     setRecords,
-    updateRecord,
-    editable,
-    setEditable
+    updateRecord
   };
 }

src/frontend/src/pages/part/PartDetail.tsx

@@ -625,8 +625,10 @@ export default function PartDetail() {
         label: t`Bill of Materials`,
         icon: <IconListTree />,
         hidden: !part.assembly,
-        content: (
+        content: part?.pk ? (
           <BomTable partId={part.pk ?? -1} partLocked={part?.locked == true} />
+        ) : (
+          <Skeleton />
         )
       },
       {