User Story
As an admin user,
I want the Product Management page to load all products and their supplier names in a minimal number of API calls,
so that the page loads quickly even as the product catalog grows.
Problem
In AdminProducts.tsx, fetchProducts() fires one separate GET /api/suppliers/:id request per product after fetching the product list. This is a classic N+1 query pattern — if there are 50 products, the page makes 51 API calls on load.
// Current — N+1 pattern
const productsWithSuppliers = await Promise.all(
productsData.map(async (product: Product) => {
const supplierResponse = await axios.get(`${api.baseURL}${api.endpoints.suppliers}/${product.supplierId}`);
return { ...product, supplier: supplierResponse.data };
})
);
fetchSuppliers() is already called on mount and fetches all suppliers in a single request — supplier data should be joined client-side instead.
Acceptance Criteria
Files
frontend/src/components/admin/AdminProducts.tsx
User Story
As an admin user,
I want the Product Management page to load all products and their supplier names in a minimal number of API calls,
so that the page loads quickly even as the product catalog grows.
Problem
In
AdminProducts.tsx,fetchProducts()fires one separateGET /api/suppliers/:idrequest per product after fetching the product list. This is a classic N+1 query pattern — if there are 50 products, the page makes 51 API calls on load.fetchSuppliers()is already called on mount and fetches all suppliers in a single request — supplier data should be joined client-side instead.Acceptance Criteria
fetchProductsandfetchSuppliersare coordinated (e.g. viaPromise.all) so supplier join works correctly"Unknown"gracefullyFiles
frontend/src/components/admin/AdminProducts.tsx