Merge branch 'feature/IO-3373-Dashboard-Component-Infinite-Recursion' into feature/IO-3373-Dashboard-Component-Errors

Signed-off-by: Allan Carr <allan@imexsystems.ca>

# Conflicts:
#	client/src/components/dashboard-grid/dashboard-grid.component.jsx

client/.env.development.imex

@@ -15,4 +15,5 @@ VITE_APP_INSTANCE=IMEX
 TEST_USERNAME="test@imex.dev"
 TEST_PASSWORD="test123"
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
-VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com

client/.env.development.rome

@@ -17,4 +17,5 @@ VITE_APP_INSTANCE=ROME
 TEST_USERNAME="test@imex.dev"
 TEST_PASSWORD="test123"
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
-VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com

client/.env.production.imex

@@ -14,4 +14,5 @@ VITE_APP_REPORTS_SERVER_URL=https://reports.imex.online
 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_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com

client/.env.production.rome

@@ -14,4 +14,5 @@ VITE_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
 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_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com

client/.env.test.imex

@@ -14,4 +14,5 @@ VITE_APP_IS_TEST=true
 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_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com

client/.env.test.rome

@@ -14,4 +14,5 @@ VITE_APP_IS_TEST=true
 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_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com

client/src/App/App.jsx

@@ -233,9 +233,7 @@ export function App({
             path="/parts/*"
             element={
               <ErrorBoundary>
-                <SocketProvider bodyshop={bodyshop} navigate={navigate} currentUser={currentUser}>
-                  <PrivateRoute isAuthorized={currentUser.authorized} />
-                </SocketProvider>
+                <PrivateRoute isAuthorized={currentUser.authorized} />
               </ErrorBoundary>
             }
           >

client/src/components/bills-list-table/bills-list-table.component.jsx

@@ -109,6 +109,13 @@ export function BillsListTableComponent({
       key: "vendorname",
       sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
       sortOrder: state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
+      filters: bills
+        ? [...new Set(bills.map((bill) => bill.vendor.name))].map((name) => ({
+            text: name,
+            value: name
+          }))
+        : [],
+      onFilter: (value, record) => record.vendor.name === value,
       render: (text, record) => <span>{record.vendor.name}</span>
     },
     {

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: [

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 (
             <div
-              key={item.i}
+              key={safeItem.i}
               data-grid={{
-                ...item,
-                minH: componentList[item.i].minH || 1,
-                minW: componentList[item.i].minW || 1
+                ...safeItem,
+                minH,
+                minW
               }}
             >
               <LoadingSkeleton loading={loading}>
                 <Icon
                   component={MdClose}
-                  key={item.i}
+                  key={safeItem.i}
                   style={{
                     position: "absolute",
                     zIndex: "2",
@@ -156,9 +193,9 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
                     top: ".25rem",
                     cursor: "pointer"
                   }}
-                  onClick={() => handleRemoveComponent(item.i)}
+                  onClick={() => handleRemoveComponent(safeItem.i)}
                 />
-                <TheComponent className="dashboard-card" bodyshop={bodyshop} data={dashboardData} />
+                {TheComponent && <TheComponent className="dashboard-card" bodyshop={bodyshop} data={dashboardData} />}
               </LoadingSkeleton>
             </div>
           );

client/src/components/global-footer/global-footer.component.jsx

@@ -16,7 +16,7 @@ const mapStateToProps = createStructuredSelector({
 
 export function GlobalFooter({ isPartsEntry }) {
   const { t } = useTranslation();
-  
+
   if (isPartsEntry) {
     return (
       <Footer>
@@ -35,7 +35,6 @@ export function GlobalFooter({ isPartsEntry }) {
               rome: t("titles.romeonline")
             })} - ${import.meta.env.VITE_APP_GIT_SHA_DATE}`}
           </div>
-          <WssStatusDisplayComponent />
           <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
             Disclaimer & Notices
           </Link>

client/src/components/job-parts-queue-count/job-parts-queue-count.component.jsx

@@ -10,9 +10,12 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
+
+export const DEFAULT_COL_LAYOUT = { xs: 24, sm: 24, md: 8, lg: 4, xl: 4, xxl: 4 };
+
 export default connect(mapStateToProps, mapDispatchToProps)(JobPartsQueueCount);
 
-export function JobPartsQueueCount({ bodyshop, parts, style }) {
+export function JobPartsQueueCount({ bodyshop, parts, defaultColLayout = DEFAULT_COL_LAYOUT }) {
   const partsStatus = useMemo(() => {
     if (!parts) return null;
     return parts.reduce(
@@ -35,35 +38,34 @@ export function JobPartsQueueCount({ bodyshop, parts, style }) {
   }, [bodyshop, parts]);
 
   if (!parts) return null;
-
   return (
-    <Row style={style}>
-      <Col span={4}>
+    <Row>
+      <Col {...defaultColLayout}>
         <Tooltip title="Total">
           <Tag>{partsStatus.total}</Tag>
         </Tooltip>
       </Col>
-      <Col span={4}>
+      <Col {...defaultColLayout}>
         <Tooltip title="No Status">
           <Tag color="gold">{partsStatus["null"]}</Tag>
         </Tooltip>
       </Col>
-      <Col span={4}>
+      <Col {...defaultColLayout}>
         <Tooltip title={bodyshop.md_order_statuses.default_ordered}>
           <Tag color="blue">{partsStatus[bodyshop.md_order_statuses.default_ordered]}</Tag>
         </Tooltip>
       </Col>
-      <Col span={4}>
+      <Col {...defaultColLayout}>
         <Tooltip title={bodyshop.md_order_statuses.default_received}>
           <Tag color="green">{partsStatus[bodyshop.md_order_statuses.default_received]}</Tag>
         </Tooltip>
       </Col>
-      <Col span={4}>
+      <Col {...defaultColLayout}>
         <Tooltip title={bodyshop.md_order_statuses.default_returned}>
           <Tag color="orange">{partsStatus[bodyshop.md_order_statuses.default_returned]}</Tag>
         </Tooltip>
       </Col>
-      <Col span={4}>
+      <Col {...defaultColLayout}>
         <Tooltip title={bodyshop.md_order_statuses.default_bo}>
           <Tag color="red">{partsStatus[bodyshop.md_order_statuses.default_bo]}</Tag>
         </Tooltip>

client/src/components/parts-queue-list/parts-queue.list.component.jsx

@@ -233,7 +233,7 @@ export function PartsQueueListComponent({ bodyshop }) {
       title: t("jobs.fields.partsstatus"),
       dataIndex: "partsstatus",
       key: "partsstatus",
-      render: (text, record) => <JobPartsQueueCount style={{ minWidth: "10rem" }} parts={record.joblines_status} />
+      render: (text, record) => <JobPartsQueueCount parts={record.joblines_status} />
     },
     {
       title: t("jobs.fields.comment"),

client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx

@@ -147,7 +147,7 @@ export function SimplifiedPartsJobsListComponent({
       title: t("jobs.fields.partsstatus"),
       dataIndex: "partsstatus",
       key: "partsstatus",
-      render: (text, record) => <JobPartsQueueCount style={{ minWidth: "10rem" }} parts={record.joblines_status} />
+      render: (text, record) => <JobPartsQueueCount parts={record.joblines_status} />
     },
     {
       title: t("jobs.fields.comment"),

client/src/index.jsx

@@ -27,7 +27,8 @@ registerSW({ immediate: true });
 Dinero.globalRoundingMode = "HALF_EVEN";
 
 amplitude.init("6228a598e57cd66875cfd41604f1f891", {
-  defaultTracking: true
+  defaultTracking: true,
+  serverUrl: import.meta.env.VITE_APP_AMP_URL
   //  {
   //     attribution: {
   //       excludeReferrers: true,

client/src/pages/bills/bills.page.component.jsx

@@ -1,5 +1,6 @@
 import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Checkbox, Input, Space, Table, Typography } from "antd";
+import { useQuery } from "@apollo/client";
 import axios from "axios";
 import queryString from "query-string";
 import { useEffect, useState } from "react";
@@ -16,6 +17,7 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
+import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 
 const mapDispatchToProps = (dispatch) => ({
   setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" }))
@@ -33,25 +35,22 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
   });
   const Templates = TemplateList("bill");
   const { t } = useTranslation();
+
+  const { data: vendorsData } = useQuery(QUERY_ALL_VENDORS);
+
   const columns = [
     {
       title: t("bills.fields.vendorname"),
       dataIndex: "vendorname",
       key: "vendorname",
-      // sortObject: (direction) => {
-      //   return {
-      //     vendor: {
-      //       name: direction
-      //         ? direction === "descend"
-      //           ? "desc"
-      //           : "asc"
-      //         : "desc",
-      //     },
-      //   };
-      // },
-      // sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
-      // sortOrder:
-      //   state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
+      sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
+      sortObject: (order) => ({
+        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,
+      sortOrder: state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
       render: (text, record) => <span>{record.vendor.name}</span>
     },
     {
@@ -65,20 +64,11 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
-      // sortObject: (direction) => {
-      //   return {
-      //     job: {
-      //       ro_number: direction
-      //         ? direction === "descend"
-      //           ? "desc"
-      //           : "asc"
-      //         : "desc",
-      //     },
-      //   };
-      // },
-      // sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
-      // sortOrder:
-      //   state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
+      sortObject: (order) => ({
+        job: { ro_number: order === "descend" ? "desc" : "asc" }
+      }),
+      sortOrder: state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
       render: (text, record) => record.job && <Link to={`/manage/jobs/${record.job.id}`}>{record.job.ro_number}</Link>
     },
     {
@@ -175,7 +165,8 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    // Persist filters (including vendorname) and sorting
+    setState({ ...state, filteredInfo: { ...state.filteredInfo, ...filters }, sortedInfo: sorter });
     search.page = pagination.current;
     if (sorter && sorter.column && sorter.column.sortObject) {
       search.searchObj = JSON.stringify(sorter.column.sortObject(sorter.order));

server/integrations/partsManagement/endpoints/partsManagementDeprovisioning.js

@@ -88,7 +88,7 @@ const partsManagementDeprovisioning = async (req, res) => {
   const { logger } = req;
   const { shopId } = req.body;
 
-  if (process.env.NODE_ENV === "production") {
+  if (process.env.NODE_ENV === "production" || process.env.HOSTNAME?.endsWith("compute.internal")) {
     return res.status(403).json({ error: "Deprovisioning not allowed in production environment." });
   }
 

server/routes/intergrationRoutes.js

@@ -1,5 +1,6 @@
 const express = require("express");
 const router = express.Router();
+const logger = require("../../server/utils/logger");
 
 // Pull secrets from env
 const { VSSTA_INTEGRATION_SECRET, PARTS_MANAGEMENT_INTEGRATION_SECRET } = process.env;
@@ -11,7 +12,7 @@ if (typeof VSSTA_INTEGRATION_SECRET === "string" && VSSTA_INTEGRATION_SECRET.len
 
   router.post("/vssta", vsstaMiddleware, vsstaIntegration);
 } else {
-  console.warn("VSSTA_INTEGRATION_SECRET is not set — skipping /vssta integration route");
+  logger.logger.warn("VSSTA_INTEGRATION_SECRET is not set — skipping /vssta integration route");
 }
 
 // Only load Parts Management routes if that secret is set
@@ -45,14 +46,17 @@ if (typeof PARTS_MANAGEMENT_INTEGRATION_SECRET === "string" && PARTS_MANAGEMENT_
   );
 
   // Deprovisioning route
-  router.post("/parts-management/deprovision", partsManagementIntegrationMiddleware, partsManagementDeprovisioning);
+  if (process.env.NODE_ENV !== "production" && !process.env.HOSTNAME?.endsWith("compute.internal")) {
+    logger.logger.warn("Parts Management Deprovisioning route has been loaded.");
+    router.post("/parts-management/deprovision", partsManagementIntegrationMiddleware, partsManagementDeprovisioning);
+  }
 
   /**
    * Route to handle Parts Management Provisioning
    */
   router.post("/parts-management/provision", partsManagementIntegrationMiddleware, partsManagementProvisioning);
 } else {
-  console.warn("PARTS_MANAGEMENT_INTEGRATION_SECRET is not set — skipping /parts-management/provision route");
+  logger.logger.warn("PARTS_MANAGEMENT_INTEGRATION_SECRET is not set — skipping /parts-management/provision route");
 }
 
 module.exports = router;