From 84cbbb517cee490bf5b96af6786fbe0b083e1b9b Mon Sep 17 00:00:00 2001 From: Philipp Metzner Date: Tue, 12 May 2026 16:38:47 +0200 Subject: [PATCH 1/6] remove-expansion --- .../Products/components/ProductsContainer.tsx | 4 +- .../Products/components/ProductsTable.tsx | 83 +++++++++++++------ 2 files changed, 60 insertions(+), 27 deletions(-) diff --git a/front/src/views/Products/components/ProductsContainer.tsx b/front/src/views/Products/components/ProductsContainer.tsx index 4a34c7975c..49be462c57 100644 --- a/front/src/views/Products/components/ProductsContainer.tsx +++ b/front/src/views/Products/components/ProductsContainer.tsx @@ -92,8 +92,8 @@ function ProductsContainer() { filter: "includesOneOfMultipleStrings", Cell: ProductWithSPCheckmarkCell, sortType: (rowA, rowB) => { - const a = rowA.values.name.toLowerCase(); - const b = rowB.values.name.toLowerCase(); + const a = (rowA.values.name ?? "").toLowerCase(); + const b = (rowB.values.name ?? "").toLowerCase(); return a.localeCompare(b); }, }, diff --git a/front/src/views/Products/components/ProductsTable.tsx b/front/src/views/Products/components/ProductsTable.tsx index b039d84eee..68b19e6f30 100644 --- a/front/src/views/Products/components/ProductsTable.tsx +++ b/front/src/views/Products/components/ProductsTable.tsx @@ -5,6 +5,7 @@ import { useTable, useFilters, useGlobalFilter, + useGroupBy, useSortBy, useRowSelect, usePagination, @@ -26,7 +27,11 @@ import { Switch, } from "@chakra-ui/react"; import { Link } from "react-router-dom"; -import { AddIcon, ChevronRightIcon, ChevronLeftIcon } from "@chakra-ui/icons"; +import { + AddIcon, + ChevronRightIcon, + ChevronLeftIcon, +} from "@chakra-ui/icons"; import { IUseTableConfigReturnType } from "hooks/useTableConfig"; import { ProductRow } from "./transformers"; import { removeFilter } from "utils/helpers"; @@ -81,10 +86,10 @@ function ProductsTable({ headerGroups, prepareRow, allColumns, + rows, state: { globalFilter, pageIndex, filters, sortBy, hiddenColumns }, setGlobalFilter, setAllFilters, - page, canPreviousPage, canNextPage, pageOptions, @@ -101,6 +106,7 @@ function ProductsTable({ pageIndex: 0, pageSize: 20, filters: tableConfig.getColumnFilters(), + groupBy: ["category"], ...(tableConfig.getGlobalFilter() ? { globalFilter: tableConfig.getGlobalFilter() } : undefined), @@ -108,6 +114,7 @@ function ProductsTable({ }, useFilters, useGlobalFilter, + useGroupBy, useSortBy, usePagination, useRowSelect, @@ -196,31 +203,57 @@ function ProductsTable({ onClearAllFilters={handleClearFilters} /> - + - {page.map((row) => { + + + + {rows.map((row) => { prepareRow(row); - return ( - - onRowClick( - row.original.isStandard - ? row.original.standardInstantiationId - : row.original.id, - row.original.isStandard, - ) - } - cursor="pointer" - > - {row.cells.map((cell) => ( - - ))} - - ); + + if (row.isGrouped) { + return ( + <> + + + + {row.subRows.map((subRow) => { + prepareRow(subRow); + return ( + + onRowClick( + subRow.original.isStandard + ? subRow.original.standardInstantiationId + : subRow.original.id, + subRow.original.isStandard, + ) + } + cursor="pointer" + > + {subRow.cells.map((cell) => + cell.isGrouped ? null : ( + + ), + )} + + ); + })} + + ); + } + + return null; })}
+
- {cell.render("Cell")} -
+ {row.groupByVal} ({row.subRows.length}) +
+ {cell.isPlaceholder ? null : cell.render("Cell")} +
From 1a29bbb249cd6a11e65cc8aebcaa3512edd308c4 Mon Sep 17 00:00:00 2001 From: Philipp Metzner Date: Tue, 12 May 2026 16:40:38 +0200 Subject: [PATCH 2/6] remove-pagination --- .../Products/components/ProductsTable.tsx | 47 +------------------ 1 file changed, 2 insertions(+), 45 deletions(-) diff --git a/front/src/views/Products/components/ProductsTable.tsx b/front/src/views/Products/components/ProductsTable.tsx index 68b19e6f30..74b7ceaca9 100644 --- a/front/src/views/Products/components/ProductsTable.tsx +++ b/front/src/views/Products/components/ProductsTable.tsx @@ -8,7 +8,6 @@ import { useGroupBy, useSortBy, useRowSelect, - usePagination, } from "react-table"; import { Table, @@ -17,8 +16,6 @@ import { Td, Spacer, Flex, - Text, - IconButton, Button, HStack, useDisclosure, @@ -27,11 +24,7 @@ import { Switch, } from "@chakra-ui/react"; import { Link } from "react-router-dom"; -import { - AddIcon, - ChevronRightIcon, - ChevronLeftIcon, -} from "@chakra-ui/icons"; +import { AddIcon } from "@chakra-ui/icons"; import { IUseTableConfigReturnType } from "hooks/useTableConfig"; import { ProductRow } from "./transformers"; import { removeFilter } from "utils/helpers"; @@ -87,14 +80,9 @@ function ProductsTable({ prepareRow, allColumns, rows, - state: { globalFilter, pageIndex, filters, sortBy, hiddenColumns }, + state: { globalFilter, filters, sortBy, hiddenColumns }, setGlobalFilter, setAllFilters, - canPreviousPage, - canNextPage, - pageOptions, - nextPage, - previousPage, } = useTable( { columns, @@ -116,7 +104,6 @@ function ProductsTable({ useGlobalFilter, useGroupBy, useSortBy, - usePagination, useRowSelect, ); @@ -257,36 +244,6 @@ function ProductsTable({ })} - - - } - /> - - - - Page{" "} - - {pageIndex + 1} - {" "} - of{" "} - - {pageOptions.length} - - - - - } - /> - - ); } From 4c5e325816760e441b077ca847fc517fb39ba674 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 12 May 2026 14:59:54 +0000 Subject: [PATCH 3/6] fix build and apply category grouping to StandardProductsTable Agent-Logs-Url: https://github.com/boxwise/boxtribute/sessions/6e388217-ca30-470c-8ae5-a6515f20ee88 Co-authored-by: pylipp <10617122+pylipp@users.noreply.github.com> --- .../Products/components/ProductsTable.tsx | 2 +- .../components/StandardProductsContainer.tsx | 21 +-- .../components/StandardProductsTable.tsx | 136 +++++++----------- 3 files changed, 58 insertions(+), 101 deletions(-) diff --git a/front/src/views/Products/components/ProductsTable.tsx b/front/src/views/Products/components/ProductsTable.tsx index 74b7ceaca9..c0a829205c 100644 --- a/front/src/views/Products/components/ProductsTable.tsx +++ b/front/src/views/Products/components/ProductsTable.tsx @@ -190,7 +190,7 @@ function ProductsTable({ onClearAllFilters={handleClearFilters} /> - + +
diff --git a/front/src/views/Products/components/StandardProductsContainer.tsx b/front/src/views/Products/components/StandardProductsContainer.tsx index 383102aa66..327ee3de28 100644 --- a/front/src/views/Products/components/StandardProductsContainer.tsx +++ b/front/src/views/Products/components/StandardProductsContainer.tsx @@ -1,6 +1,5 @@ -import { useQuery } from "@apollo/client"; +import { useSuspenseQuery } from "@apollo/client"; import { Button, Badge } from "@chakra-ui/react"; -import { TableSkeleton } from "components/Skeletons"; import { SelectColumnFilter } from "components/Table/Filter"; import { useTableConfig } from "hooks/useTableConfig"; import { useCallback, useMemo } from "react"; @@ -89,11 +88,10 @@ function StandardProductsContainer() { }); // fetch Standard Products data - const { - loading: isStandardProductsQueryLoading, - data: standardProductsRawData, - error, - } = useQuery(STANDARD_PRODUCTS_FOR_PRODUCTVIEW_QUERY, { variables: { baseId } }); + const { data: standardProductsRawData } = useSuspenseQuery( + STANDARD_PRODUCTS_FOR_PRODUCTVIEW_QUERY, + { variables: { baseId } }, + ); const handleEnableProduct = useCallback( (standardProductId: string) => @@ -245,13 +243,8 @@ function StandardProductsContainer() { [disableStandardProductMutationLoading, handleDisableOrDeleteProduct, handleEnableProduct], ); - if (error) throw error; - const tableData = useMemo( - () => - standardProductsRawData - ? standardProductsRawDataToTableDataTransformer(standardProductsRawData) - : [], + () => standardProductsRawDataToTableDataTransformer(standardProductsRawData), [standardProductsRawData], ); @@ -261,8 +254,6 @@ function StandardProductsContainer() { const sizeRangeOptions = useMemo(() => createOptions(tableData, "sizeRange"), [tableData]); - if (!standardProductsRawData || isStandardProductsQueryLoading) return ; - return ( + @@ -166,68 +147,53 @@ function StandardProductsTable({ onRemoveFilter={handleRemoveFilter} onClearAllFilters={handleClearFilters} /> - {/* overflowY and flex={1} make the table scrollable vertically and took the other settings from - See https://chakra-ui.com/docs/components/table/usage#table-container */} - - - - - {page.map((row) => { - prepareRow(row); +
+ + + + + + {rows.map((row) => { + prepareRow(row); + + if (row.isGrouped) { return ( - - {row.cells.map((cell) => ( - + - ))} - + + {row.subRows.map((subRow) => { + prepareRow(subRow); + return ( + + {subRow.cells.map((cell) => + cell.isGrouped ? null : ( + + ), + )} + + ); + })} + ); - })} - -
+
- {cell.render("Cell")} + <> +
+ {row.groupByVal} ({row.subRows.length})
+ {cell.isPlaceholder ? null : cell.render("Cell")} +
- - - - } - /> - - - - Page{" "} - - {pageIndex + 1} - {" "} - of{" "} - - {pageOptions.length} - - - - - } - /> - - + } + + return null; + })} +
); } From 0c98abbe670d10f5703545da6e93aaeb6c37f0b0 Mon Sep 17 00:00:00 2001 From: Philipp Metzner Date: Tue, 12 May 2026 17:51:12 +0200 Subject: [PATCH 4/6] Update nav when enabling standard product --- .../EnableStandardProduct/EnableStandardProductView.tsx | 6 +++--- .../components/EnableStandardProductForm.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx b/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx index b8e7104e65..56ce67e8e3 100644 --- a/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx +++ b/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx @@ -103,7 +103,7 @@ function EnableStandardProductFormContainer() { createToast({ message: `The ASSORT standard product was successfully enabled.`, }); - navigate(`../../`); + navigate(`../../assort`); break; case "InsufficientPermissionError": @@ -179,8 +179,8 @@ function EnableStandardProductView() { {/* If a standard product is selected, the view path becomes /products/enable/X, if none is selected yet, the view path is /products/enable. In both cases return to ProductsView */}
{/*
*/} diff --git a/front/src/views/EnableStandardProduct/components/EnableStandardProductForm.tsx b/front/src/views/EnableStandardProduct/components/EnableStandardProductForm.tsx index 667fb3c23f..22616de287 100644 --- a/front/src/views/EnableStandardProduct/components/EnableStandardProductForm.tsx +++ b/front/src/views/EnableStandardProduct/components/EnableStandardProductForm.tsx @@ -230,7 +230,7 @@ function EnableStandardProductForm({ type="button" w="full" variant="outline" - onClick={() => navigate(`${selectedStandardProduct ? "../.." : ".."}`)} + onClick={() => navigate(`${selectedStandardProduct ? "../../assort" : ".."}`)} > Nevermind From 88d2392451ab8fb65450c024aded3e48e3de630c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 12 May 2026 16:59:34 +0000 Subject: [PATCH 5/6] revert to useQuery, fix colSpan/Fragment keys, remove stale pagination state, fix build Agent-Logs-Url: https://github.com/boxwise/boxtribute/sessions/76f87288-de7c-4100-bbf2-bc6426bf2743 Co-authored-by: pylipp <10617122+pylipp@users.noreply.github.com> --- .../EnableStandardProductView.tsx | 6 +----- .../Products/components/ProductsTable.tsx | 14 ++++++------- .../components/StandardProductsContainer.tsx | 21 +++++++++++++------ .../components/StandardProductsTable.tsx | 12 +++++------ 4 files changed, 28 insertions(+), 25 deletions(-) diff --git a/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx b/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx index 56ce67e8e3..b4d60b07bb 100644 --- a/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx +++ b/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx @@ -173,15 +173,11 @@ function EnableStandardProductFormContainer() { } function EnableStandardProductView() { - const baseId = useAtomValue(selectedBaseIdAtom); return ( <> {/* If a standard product is selected, the view path becomes /products/enable/X, if none is selected yet, the view path is /products/enable. In both cases return to ProductsView */} - +
{/* */} diff --git a/front/src/views/Products/components/ProductsTable.tsx b/front/src/views/Products/components/ProductsTable.tsx index c0a829205c..af08a1bb10 100644 --- a/front/src/views/Products/components/ProductsTable.tsx +++ b/front/src/views/Products/components/ProductsTable.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import { Column, Filters, @@ -91,8 +91,6 @@ function ProductsTable({ initialState: { hiddenColumns: tableConfig.getHiddenColumns(), sortBy: tableConfig.getSortBy(), - pageIndex: 0, - pageSize: 20, filters: tableConfig.getColumnFilters(), groupBy: ["category"], ...(tableConfig.getGlobalFilter() @@ -193,7 +191,7 @@ function ProductsTable({ - + {rows.map((row) => { @@ -201,9 +199,9 @@ function ProductsTable({ if (row.isGrouped) { return ( - <> - - + + + {row.groupByVal} ({row.subRows.length}) @@ -236,7 +234,7 @@ function ProductsTable({ ); })} - + ); } diff --git a/front/src/views/Products/components/StandardProductsContainer.tsx b/front/src/views/Products/components/StandardProductsContainer.tsx index 327ee3de28..383102aa66 100644 --- a/front/src/views/Products/components/StandardProductsContainer.tsx +++ b/front/src/views/Products/components/StandardProductsContainer.tsx @@ -1,5 +1,6 @@ -import { useSuspenseQuery } from "@apollo/client"; +import { useQuery } from "@apollo/client"; import { Button, Badge } from "@chakra-ui/react"; +import { TableSkeleton } from "components/Skeletons"; import { SelectColumnFilter } from "components/Table/Filter"; import { useTableConfig } from "hooks/useTableConfig"; import { useCallback, useMemo } from "react"; @@ -88,10 +89,11 @@ function StandardProductsContainer() { }); // fetch Standard Products data - const { data: standardProductsRawData } = useSuspenseQuery( - STANDARD_PRODUCTS_FOR_PRODUCTVIEW_QUERY, - { variables: { baseId } }, - ); + const { + loading: isStandardProductsQueryLoading, + data: standardProductsRawData, + error, + } = useQuery(STANDARD_PRODUCTS_FOR_PRODUCTVIEW_QUERY, { variables: { baseId } }); const handleEnableProduct = useCallback( (standardProductId: string) => @@ -243,8 +245,13 @@ function StandardProductsContainer() { [disableStandardProductMutationLoading, handleDisableOrDeleteProduct, handleEnableProduct], ); + if (error) throw error; + const tableData = useMemo( - () => standardProductsRawDataToTableDataTransformer(standardProductsRawData), + () => + standardProductsRawData + ? standardProductsRawDataToTableDataTransformer(standardProductsRawData) + : [], [standardProductsRawData], ); @@ -254,6 +261,8 @@ function StandardProductsContainer() { const sizeRangeOptions = useMemo(() => createOptions(tableData, "sizeRange"), [tableData]); + if (!standardProductsRawData || isStandardProductsQueryLoading) return ; + return ( - + {rows.map((row) => { @@ -159,9 +159,9 @@ function StandardProductsTable({ if (row.isGrouped) { return ( - <> - - + + + {row.groupByVal} ({row.subRows.length}) @@ -186,7 +186,7 @@ function StandardProductsTable({ ); })} - + ); } From b6d05a9122f09a3cf562c1da78abe46bd6fe04f0 Mon Sep 17 00:00:00 2001 From: Philipp Metzner Date: Wed, 13 May 2026 08:48:49 +0200 Subject: [PATCH 6/6] another-nav-update --- .../EnableStandardProduct/EnableStandardProductView.tsx | 8 ++++++-- .../components/EnableStandardProductForm.tsx | 2 +- .../views/Products/components/StandardProductsTable.tsx | 2 +- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx b/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx index b4d60b07bb..26315b0026 100644 --- a/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx +++ b/front/src/views/EnableStandardProduct/EnableStandardProductView.tsx @@ -173,11 +173,15 @@ function EnableStandardProductFormContainer() { } function EnableStandardProductView() { + const baseId = useAtomValue(selectedBaseIdAtom); return ( <> {/* If a standard product is selected, the view path becomes /products/enable/X, if none is - selected yet, the view path is /products/enable. In both cases return to ProductsView */} - + selected yet, the view path is /products/enable. In both cases return to StandardProductsView */} +
{/* */} diff --git a/front/src/views/EnableStandardProduct/components/EnableStandardProductForm.tsx b/front/src/views/EnableStandardProduct/components/EnableStandardProductForm.tsx index 22616de287..667fb3c23f 100644 --- a/front/src/views/EnableStandardProduct/components/EnableStandardProductForm.tsx +++ b/front/src/views/EnableStandardProduct/components/EnableStandardProductForm.tsx @@ -230,7 +230,7 @@ function EnableStandardProductForm({ type="button" w="full" variant="outline" - onClick={() => navigate(`${selectedStandardProduct ? "../../assort" : ".."}`)} + onClick={() => navigate(`${selectedStandardProduct ? "../.." : ".."}`)} > Nevermind diff --git a/front/src/views/Products/components/StandardProductsTable.tsx b/front/src/views/Products/components/StandardProductsTable.tsx index 9d3ee19586..051fc781fc 100644 --- a/front/src/views/Products/components/StandardProductsTable.tsx +++ b/front/src/views/Products/components/StandardProductsTable.tsx @@ -150,7 +150,7 @@ function StandardProductsTable({ - +