From 02974e6e4b0ffaaa131ce68af2b3019acd283741 Mon Sep 17 00:00:00 2001 From: Allan Carr Date: Thu, 11 Sep 2025 21:32:18 -0700 Subject: [PATCH 01/11] IO-3365 Push Filters to Query Signed-off-by: Allan Carr --- client/src/graphql/bills.queries.js | 4 +-- .../src/pages/bills/bills.page.component.jsx | 27 ++++++++++++++----- .../src/pages/bills/bills.page.container.jsx | 3 ++- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/client/src/graphql/bills.queries.js b/client/src/graphql/bills.queries.js index 7a7fd2d8a..a9c3433fa 100644 --- a/client/src/graphql/bills.queries.js +++ b/client/src/graphql/bills.queries.js @@ -20,8 +20,8 @@ export const DELETE_BILL = gql` `; export const QUERY_ALL_BILLS_PAGINATED = gql` - query QUERY_ALL_BILLS_PAGINATED($offset: Int, $limit: Int, $order: [bills_order_by!]!) { - bills(offset: $offset, limit: $limit, order_by: $order) { + query QUERY_ALL_BILLS_PAGINATED($offset: Int, $limit: Int, $order: [bills_order_by!]!, $where: bills_bool_exp) { + bills(offset: $offset, limit: $limit, order_by: $order, where: $where) { id vendorid vendor { diff --git a/client/src/pages/bills/bills.page.component.jsx b/client/src/pages/bills/bills.page.component.jsx index db9145984..4f06295af 100644 --- a/client/src/pages/bills/bills.page.component.jsx +++ b/client/src/pages/bills/bills.page.component.jsx @@ -31,7 +31,7 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte const history = useNavigate(); const [state, setState] = useLocalStorage("bills_list_sort", { sortedInfo: {}, - filteredInfo: { text: "" } + filteredInfo: { vendorname: [] } }); const Templates = TemplateList("bill"); const { t } = useTranslation(); @@ -48,8 +48,7 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte vendor: { name: order === "descend" ? "desc" : "asc" } }), filters: (vendorsData?.vendors || []).map((v) => ({ text: v.name, value: v.id })), - filteredValue: state.filteredInfo.vendorname || null, - onFilter: (value, record) => record.vendorid === value, + filteredValue: search.vendorIds ? search.vendorIds.split(",") : null, sortOrder: state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order, render: (text, record) => {record.vendor.name} }, @@ -165,20 +164,36 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte ]; const handleTableChange = (pagination, filters, sorter) => { - // Persist filters (including vendorname) and sorting - setState({ ...state, filteredInfo: { ...state.filteredInfo, ...filters }, sortedInfo: sorter }); + setState({ + sortedInfo: sorter, + filteredInfo: { ...state.filteredInfo, vendorname: filters.vendorname || [] } + }); + search.page = pagination.current; + if (filters.vendorname && filters.vendorname.length) { + search.vendorIds = filters.vendorname.join(","); + } else { + delete search.vendorIds; + } if (sorter && sorter.column && sorter.column.sortObject) { search.searchObj = JSON.stringify(sorter.column.sortObject(sorter.order)); + delete search.sortcolumn; + delete search.sortorder; } else { delete search.searchObj; search.sortcolumn = sorter.order ? sorter.columnKey : null; search.sortorder = sorter.order; } - search.sort = JSON.stringify({ [sorter.columnKey]: sorter.order }); history({ search: queryString.stringify(search) }); }; + useEffect(() => { + if (!search.vendorIds && state.filteredInfo.vendorname && state.filteredInfo.vendorname.length) { + search.vendorIds = state.filteredInfo.vendorname.join(","); + history({ search: queryString.stringify(search) }); + } + }, []); + useEffect(() => { if (search.search && search.search.trim() !== "") { searchBills(); diff --git a/client/src/pages/bills/bills.page.container.jsx b/client/src/pages/bills/bills.page.container.jsx index 8ea150322..68c5d4c01 100644 --- a/client/src/pages/bills/bills.page.container.jsx +++ b/client/src/pages/bills/bills.page.container.jsx @@ -49,7 +49,8 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) { : { [sortcolumn || "date"]: sortorder ? (sortorder === "descend" ? "desc" : "asc") : "desc" } - ] + ], + where: searchParams.vendorIds ? { vendorid: { _in: searchParams.vendorIds.split(",") } } : undefined } }); From cc934fe333c3e21c8848b5e19acfa4c2847134db Mon Sep 17 00:00:00 2001 From: Allan Carr Date: Tue, 16 Sep 2025 17:20:23 -0700 Subject: [PATCH 02/11] IO-3373 Dashboard Errors on Large Datasets Signed-off-by: Allan Carr --- .../dashboard-grid/createDashboardQuery.js | 10 +- .../dashboard-grid.component.jsx | 107 ++++++++++++------ 2 files changed, 78 insertions(+), 39 deletions(-) diff --git a/client/src/components/dashboard-grid/createDashboardQuery.js b/client/src/components/dashboard-grid/createDashboardQuery.js index 1b0ce0a3f..5f0e7b322 100644 --- a/client/src/components/dashboard-grid/createDashboardQuery.js +++ b/client/src/components/dashboard-grid/createDashboardQuery.js @@ -2,11 +2,13 @@ import { gql } from "@apollo/client"; import dayjs from "../../utils/day.js"; import componentList from "./componentList.js"; -const createDashboardQuery = (state) => { +const createDashboardQuery = (items) => { const componentBasedAdditions = - state && - Array.isArray(state.layout) && - state.layout.map((item) => componentList[item.i].gqlFragment || "").join(""); + Array.isArray(items) && + items + .map((item) => (componentList[item.i] && componentList[item.i].gqlFragment) || "") + .filter(Boolean) + .join(""); return gql` query QUERY_DASHBOARD_DETAILS { ${componentBasedAdditions || ""} monthly_sales: jobs(where: {_and: [ diff --git a/client/src/components/dashboard-grid/dashboard-grid.component.jsx b/client/src/components/dashboard-grid/dashboard-grid.component.jsx index 546481e2e..929681bbd 100644 --- a/client/src/components/dashboard-grid/dashboard-grid.component.jsx +++ b/client/src/components/dashboard-grid/dashboard-grid.component.jsx @@ -1,5 +1,5 @@ import Icon, { SyncOutlined } from "@ant-design/icons"; -import { cloneDeep, isEmpty } from "lodash"; +import { cloneDeep } from "lodash"; import { useMutation, useQuery } from "@apollo/client"; import { Button, Dropdown, Space } from "antd"; import { PageHeader } from "@ant-design/pro-layout"; @@ -34,14 +34,25 @@ const mapDispatchToProps = () => ({ export function DashboardGridComponent({ currentUser, bodyshop }) { const { t } = useTranslation(); - const [state, setState] = useState({ - ...(bodyshop.associations[0].user.dashboardlayout - ? bodyshop.associations[0].user.dashboardlayout - : { items: [], layout: {}, layouts: [] }) + const [state, setState] = useState(() => { + const persisted = bodyshop.associations[0].user.dashboardlayout; + // Normalize persisted structure to avoid malformed shapes that can cause recursive layout recalculations + if (persisted) { + return { + items: Array.isArray(persisted.items) ? persisted.items : [], + layout: Array.isArray(persisted.layout) ? persisted.layout : [], + layouts: typeof persisted.layouts === "object" && !Array.isArray(persisted.layouts) ? persisted.layouts : {}, + cols: persisted.cols + }; + } + return { items: [], layout: [], layouts: {}, cols: 12 }; }); const notification = useNotification(); - const { loading, error, data, refetch } = useQuery(createDashboardQuery(state), { + // Memoize the query document so Apollo doesn't treat each render as a brand-new query causing continuous re-fetches + const dashboardQueryDoc = useMemo(() => createDashboardQuery(state.items), [state.items]); + + const { loading, error, data, refetch } = useQuery(dashboardQueryDoc, { fetchPolicy: "network-only", nextFetchPolicy: "network-only" }); @@ -49,21 +60,32 @@ export function DashboardGridComponent({ currentUser, bodyshop }) { const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT); const handleLayoutChange = async (layout, layouts) => { - logImEXEvent("dashboard_change_layout"); + try { + logImEXEvent("dashboard_change_layout"); - setState({ ...state, layout, layouts }); + setState((prev) => ({ ...prev, layout, layouts })); - const result = await updateLayout({ - variables: { - email: currentUser.email, - layout: { ...state, layout, layouts } + const result = await updateLayout({ + variables: { + email: currentUser.email, + layout: { ...state, layout, layouts } + } + }); + + if (result?.errors && result.errors.length) { + const errorMessages = result.errors.map((e) => e?.message || String(e)); + notification.error({ + message: t("dashboard.errors.updatinglayout", { + message: errorMessages.join("; ") + }) + }); } - }); - - if (!isEmpty(result?.errors)) { + } catch (err) { + // Catch any unexpected errors (including potential cyclic JSON issues) so the promise never rejects unhandled + console.error("Dashboard layout update failed", err); notification.error({ message: t("dashboard.errors.updatinglayout", { - message: JSON.stringify(result.errors) + message: err?.message || String(err) }) }); } @@ -80,19 +102,26 @@ export function DashboardGridComponent({ currentUser, bodyshop }) { }; const handleAddComponent = (e) => { - logImEXEvent("dashboard_add_component", { name: e }); - setState({ - ...state, - items: [ - ...state.items, + // Avoid passing the full AntD menu click event (contains circular refs) to analytics + logImEXEvent("dashboard_add_component", { key: e.key }); + const compSpec = componentList[e.key] || {}; + const minW = compSpec.minW || 1; + const minH = compSpec.minH || 1; + const baseW = compSpec.w || 2; + const baseH = compSpec.h || 2; + setState((prev) => { + const nextItems = [ + ...prev.items, { i: e.key, - x: (state.items.length * 2) % (state.cols || 12), - y: 99, // puts it at the bottom - w: componentList[e.key].w || 2, - h: componentList[e.key].h || 2 + // Position near bottom: use a large y so RGL places it last without triggering cascading relayout loops + x: (prev.items.length * 2) % (prev.cols || 12), + y: 1000, + w: Math.max(baseW, minW), + h: Math.max(baseH, minH) } - ] + ]; + return { ...prev, items: nextItems }; }); }; @@ -130,25 +159,33 @@ export function DashboardGridComponent({ currentUser, bodyshop }) { className="layout" breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }} cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} - width="100%" layouts={state.layouts} onLayoutChange={handleLayoutChange} > {state.items.map((item) => { - const TheComponent = componentList[item.i].component; + const spec = componentList[item.i] || {}; + const TheComponent = spec.component; + const minW = spec.minW || 1; + const minH = spec.minH || 1; + // Ensure current width/height respect minimums to avoid react-grid-layout prop warnings + const safeItem = { + ...item, + w: Math.max(item.w || spec.w || minW, minW), + h: Math.max(item.h || spec.h || minH, minH) + }; return (
handleRemoveComponent(item.i)} + onClick={() => handleRemoveComponent(safeItem.i)} /> - + {TheComponent && }
); From f93800ded4ca6450583692a47d0f8b67d198738b Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Fri, 19 Sep 2025 09:51:38 -0700 Subject: [PATCH 03/11] IO-3325 Additional ImEX log Events. --- client/.env.development.imex | 3 ++- client/.env.development.rome | 3 ++- client/.env.production.imex | 3 ++- client/.env.production.rome | 3 ++- client/.env.test.imex | 3 ++- client/.env.test.rome | 3 ++- ...accounting-receivables-table.component.jsx | 11 +++++++++- .../bills-list-table.component.jsx | 4 ++++ .../card-payment-modal.component.jsx | 4 +++- .../contracts-find-modal.container.jsx | 1 - .../global-search-os.component.jsx | 3 +++ .../job-audit-trail.component.jsx | 2 ++ .../job-detail-lines/job-lines.component.jsx | 11 +++++++++- .../job-lifecycle/job-lifecycle.component.jsx | 20 ++++++++++--------- .../job-line-bulk-assign.component.jsx | 2 ++ .../job-line-dispatch-button.component.jsx | 2 ++ .../job-remove-from-parts-queue.component.jsx | 3 +++ .../jobs-available-scan.component.jsx | 5 +++++ .../jobs-available-table.component.jsx | 2 ++ ...etail-header-actions.toggle-production.jsx | 4 ++++ .../jobs-list-paginated.component.jsx | 2 ++ .../jobs-list/jobs-list.component.jsx | 2 ++ .../owner-detail-form.container.jsx | 13 +++++++----- ...rts-order-modal-price-change.component.jsx | 3 ++- .../parts-queue-card.component.jsx | 3 +++ .../parts-queue.list.component.jsx | 2 ++ .../production-board-filters.component.jsx | 9 ++++++++- ...duction-list-columns.comment.component.jsx | 2 ++ .../production-list-table.component.jsx | 4 ++++ .../qbo-authorize/qbo-authorize.component.jsx | 2 ++ ...hedule-calendar-header-graph.component.jsx | 8 +++++++- .../schedule-calendar-header.component.jsx | 3 +++ .../scheduler-calendar-wrapper.component.jsx | 3 +++ .../schedule-calendar.component.jsx | 3 +++ .../scoreboard-entry-edit.component.jsx | 2 ++ .../share-to-teams.component.jsx | 2 ++ .../simplified-parts-jobs-list.component.jsx | 4 ++-- .../task-list/task-list.component.jsx | 2 ++ .../task-list/task-list.container.jsx | 3 +++ .../task-upsert-modal.container.jsx | 5 +++-- .../vehicle-detail-form.container.jsx | 13 +++++++----- client/src/firebase/firebase.utils.js | 14 +++++++------ client/src/index.jsx | 2 +- .../src/pages/bills/bills.page.component.jsx | 4 ++++ .../contract-create.page.container.jsx | 2 ++ .../jobs-create/jobs-create.container.jsx | 4 +++- client/vite.config.js | 2 +- 47 files changed, 165 insertions(+), 45 deletions(-) diff --git a/client/.env.development.imex b/client/.env.development.imex index a7c9c1349..79d1b4e63 100644 --- a/client/.env.development.imex +++ b/client/.env.development.imex @@ -16,4 +16,5 @@ TEST_USERNAME="test@imex.dev" TEST_PASSWORD="test123" VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com -VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com \ No newline at end of file +VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com +VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891 \ No newline at end of file diff --git a/client/.env.development.rome b/client/.env.development.rome index 816df9917..eabf048e8 100644 --- a/client/.env.development.rome +++ b/client/.env.development.rome @@ -18,4 +18,5 @@ TEST_USERNAME="test@imex.dev" TEST_PASSWORD="test123" VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com -VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com \ No newline at end of file +VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com +VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78 \ No newline at end of file diff --git a/client/.env.production.imex b/client/.env.production.imex index dc1d7fe7a..70c7c01c7 100644 --- a/client/.env.production.imex +++ b/client/.env.production.imex @@ -15,4 +15,5 @@ VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk VITE_APP_INSTANCE=IMEX VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com -VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com \ No newline at end of file +VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com +VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891 \ No newline at end of file diff --git a/client/.env.production.rome b/client/.env.production.rome index 808c8e199..cb2cd88ac 100644 --- a/client/.env.production.rome +++ b/client/.env.production.rome @@ -15,4 +15,5 @@ VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk VITE_APP_INSTANCE=ROME VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com -VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com \ No newline at end of file +VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com +VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78 \ No newline at end of file diff --git a/client/.env.test.imex b/client/.env.test.imex index 2ff9a10d7..0afecd91b 100644 --- a/client/.env.test.imex +++ b/client/.env.test.imex @@ -15,4 +15,5 @@ VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc VITE_APP_INSTANCE=IMEX VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com -VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com \ No newline at end of file +VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com +VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891 \ No newline at end of file diff --git a/client/.env.test.rome b/client/.env.test.rome index 24c9b7047..558c4528e 100644 --- a/client/.env.test.rome +++ b/client/.env.test.rome @@ -15,4 +15,5 @@ VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc VITE_APP_INSTANCE=ROME VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com -VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com \ No newline at end of file +VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com +VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78 \ No newline at end of file diff --git a/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx b/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx index 7775fbb8f..a3aacdb08 100644 --- a/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx +++ b/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx @@ -142,7 +142,16 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r refetch={refetch} /> - + ) diff --git a/client/src/components/bills-list-table/bills-list-table.component.jsx b/client/src/components/bills-list-table/bills-list-table.component.jsx index 8b1d8e09c..166cd0b5b 100644 --- a/client/src/components/bills-list-table/bills-list-table.component.jsx +++ b/client/src/components/bills-list-table/bills-list-table.component.jsx @@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next"; import { FaTasks } from "react-icons/fa"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; +import { logImEXEvent } from "../../firebase/firebase.utils"; import { selectJobReadOnly } from "../../redux/application/application.selectors"; import { setModalContext } from "../../redux/modals/modals.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; @@ -75,6 +76,7 @@ export function BillsListTableComponent({