admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/release/2025-10-17' into feature/IO-3357-Reynolds-and-Reynolds-DMS-API-Integration

Browse Source 
# Conflicts:
#	client/package-lock.json
#	client/package.json
#	package-lock.json
#	package.json
This commit is contained in:
Dave
2025-10-07 12:25:23 -04:00
parent d16c8d5bd5 c9ade68dc9
commit 88c00cf34f
17 changed files with 1774 additions and 1498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
client/src/components/dashboard-grid/dashboard-grid.component.jsx
View File

@@ -1,17 +1,17 @@
import Icon, { SyncOutlined } from "@ant-design/icons";
import { cloneDeep } from "lodash";
import { useMutation, useQuery } from "@apollo/client";
import { useMutation, useQuery, useApolloClient } from "@apollo/client";
import { Button, Dropdown, Space } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import { useMemo, useState } from "react";
import { useMemo, useState, useEffect } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import { useTranslation } from "react-i18next";
import { MdClose } from "react-icons/md";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import { UPDATE_DASHBOARD_LAYOUT, QUERY_USER_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
import { QUERY_DASHBOARD_BODYSHOP } from "../../graphql/bodyshop.queries";
import { selectCurrentUser } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import { GenerateDashboardData } from "./dashboard-grid.utils";
@@ -24,128 +24,185 @@ import "./dashboard-grid.styles.scss";
const ResponsiveReactGridLayout = WidthProvider(Responsive);
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
bodyshop: selectBodyshop
currentUser: selectCurrentUser
});
const mapDispatchToProps = () => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function DashboardGridComponent({ currentUser, bodyshop }) {
export function DashboardGridComponent({ currentUser }) {
const { t } = useTranslation();
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 client = useApolloClient();
const notification = useNotification();
// 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]);
// Constants for layout defaults
const DEFAULT_COLS = 12;
const DEFAULT_Y_POSITION = 1000;
const GRID_BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
const GRID_COLS = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 };
const { loading, error, data, refetch } = useQuery(dashboardQueryDoc, {
// Fetch dashboard layout data
const { data: layoutData } = useQuery(QUERY_USER_DASHBOARD_LAYOUT, {
variables: { email: currentUser.email },
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
skip: !currentUser?.email
});
// Fetch minimal bodyshop data for components
const {
loading,
error,
data: bodyshopData
} = useQuery(QUERY_DASHBOARD_BODYSHOP, {
fetchPolicy: "network-only",
nextFetchPolicy: "network-only"
});
const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
const handleLayoutChange = async (layout, layouts) => {
// Memoize layout state initialization
const initialState = useMemo(() => {
const persisted = layoutData?.users?.[0]?.dashboardlayout;
if (persisted) {
const { items = [], layout = [], layouts = {}, cols = DEFAULT_COLS } = persisted;
return {
items: Array.isArray(items) ? items : [],
layout: Array.isArray(layout) ? layout : [],
layouts: typeof layouts === "object" && !Array.isArray(layouts) ? layouts : {},
cols
};
}
return { items: [], layout: [], layouts: {}, cols: DEFAULT_COLS };
}, [layoutData]);
const [state, setState] = useState(initialState);
// Update state when layout data changes
useEffect(() => {
if (layoutData?.users?.[0]?.dashboardlayout) {
const { items = [], layout = [], layouts = {}, cols = DEFAULT_COLS } = layoutData.users[0].dashboardlayout;
setState({
items: Array.isArray(items) ? items : [],
layout: Array.isArray(layout) ? layout : [],
layouts: typeof layouts === "object" && !Array.isArray(layouts) ? layouts : {},
cols
});
}
}, [layoutData]);
// Get bodyshop data for components
const bodyshop = bodyshopData?.dashboard_bodyshops?.[0];
// DRY helper function to update layout in database and cache
const updateLayoutAndCache = async (updatedLayout, errorContext = "updating layout") => {
try {
logImEXEvent("dashboard_change_layout");
setState((prev) => ({ ...prev, layout, layouts }));
const result = await updateLayout({
variables: {
email: currentUser.email,
layout: { ...state, layout, layouts }
}
const { data: result } = await updateLayout({
variables: { email: currentUser.email, layout: updatedLayout }
});
if (result?.errors && result.errors.length) {
const errorMessages = result.errors.map((e) => e?.message || String(e));
const { errors = [] } = result?.update_users?.returning?.[0] || {};
if (errors.length) {
const errorMessages = errors.map(({ message }) => message || String(error));
notification.error({
message: t("dashboard.errors.updatinglayout", {
message: errorMessages.join("; ")
})
});
return false;
}
// Note: Removed Apollo cache update to prevent triggering unwanted Redux actions
// Instead, evict the dashboard bodyshop query from cache to ensure fresh data on next fetch
client.cache.evict({ fieldName: "dashboard_bodyshops" });
client.cache.gc();
return true;
} catch (err) {
// Catch any unexpected errors (including potential cyclic JSON issues) so the promise never rejects unhandled
console.error("Dashboard layout update failed", err);
console.error(`Dashboard ${errorContext} failed`, err);
notification.error({
message: t("dashboard.errors.updatinglayout", {
message: err?.message || String(err)
})
});
return false;
}
};
const handleRemoveComponent = (key) => {
// 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: dashboardLoading,
error: dashboardError,
data: dashboardQueryData,
refetch
} = useQuery(dashboardQueryDoc, {
fetchPolicy: "network-only",
nextFetchPolicy: "network-only"
});
const dashboardData = useMemo(() => GenerateDashboardData(dashboardQueryData), [dashboardQueryData]);
// Memoize existing layout keys to prevent unnecessary recalculations
const existingLayoutKeys = useMemo(() => state.items.map(({ i }) => i), [state.items]);
// Memoize menu items to prevent unnecessary recalculations
const menuItems = useMemo(
() =>
Object.entries(componentList).map(([key, { label }]) => ({
key,
label,
value: key,
disabled: existingLayoutKeys.includes(key)
})),
[existingLayoutKeys]
);
if (loading || dashboardLoading) return <LoadingSkeleton message={t("general.labels.loading")} />;
if (error || dashboardError) return <AlertComponent message={(error || dashboardError).message} type="error" />;
const handleLayoutChange = async (layout, layouts) => {
logImEXEvent("dashboard_change_layout");
setState((prev) => ({ ...prev, layout, layouts }));
await updateLayoutAndCache({ ...state, layout, layouts }, "layout change");
};
const handleRemoveComponent = async (key) => {
logImEXEvent("dashboard_remove_component", { name: key });
const idxToRemove = state.items.findIndex((i) => i.i === key);
const items = cloneDeep(state.items);
items.splice(idxToRemove, 1);
setState({ ...state, items });
const updatedState = { ...state, items: state.items.filter((item) => item.i !== key) };
setState(updatedState);
await updateLayoutAndCache(updatedState, "component removal");
};
const handleAddComponent = (e) => {
// 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,
// 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 };
});
const handleAddComponent = async ({ key }) => {
logImEXEvent("dashboard_add_component", { key });
const { minW = 1, minH = 1, w: baseW = 2, h: baseH = 2 } = componentList[key] || {};
const nextItems = [
...state.items,
{
i: key,
x: (state.items.length * 2) % (state.cols || DEFAULT_COLS),
y: DEFAULT_Y_POSITION,
w: Math.max(baseW, minW),
h: Math.max(baseH, minH)
}
];
const updatedState = { ...state, items: nextItems };
setState(updatedState);
await updateLayoutAndCache(updatedState, "component addition");
};
const dashboardData = useMemo(() => GenerateDashboardData(data), [data]);
const existingLayoutKeys = state.items.map((i) => i.i);
const menuItems = Object.keys(componentList).map((key) => ({
key: key,
label: componentList[key].label,
value: key,
disabled: existingLayoutKeys.includes(key)
}));
const menu = { items: menuItems, onClick: handleAddComponent };
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<div>
<PageHeader
extra={
<Space>
<Button onClick={() => refetch()}>
<Button onClick={refetch}>
<SyncOutlined />
</Button>
<Dropdown menu={menu} trigger={["click"]}>
@@ -157,22 +214,19 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
<ResponsiveReactGridLayout
className="layout"
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
breakpoints={GRID_BREAKPOINTS}
cols={GRID_COLS}
layouts={state.layouts}
onLayoutChange={handleLayoutChange}
>
{state.items.map((item) => {
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 { component: TheComponent, minW = 1, minH = 1, w: specW, h: specH } = componentList[item.i] || {};
const safeItem = {
...item,
w: Math.max(item.w || spec.w || minW, minW),
h: Math.max(item.h || spec.h || minH, minH)
w: Math.max(item.w || specW || minW, minW),
h: Math.max(item.h || specH || minH, minH)
};
return (
<div
key={safeItem.i}

2
client/src/components/job-detail-lines/job-lines.component.jsx
View File

@@ -97,7 +97,7 @@ export function JobLinesComponent({
filteredInfo: {
...(isPartsEntry
? {
part_type: ["PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG", "PAO"]
part_type: ["PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG"] //"PAO" Removed by request
}
: {})
}

22
client/src/graphql/bodyshop.queries.js
View File

@@ -365,3 +365,25 @@ export const GET_ACTIVE_EMPLOYEES_IN_SHOP = gql`
}
}
`;
export const QUERY_MINIMAL_BODYSHOP = gql`
query QUERY_MINIMAL_BODYSHOP {
bodyshops(where: { associations: { active: { _eq: true } } }) {
id
shopname
associations(where: { active: { _eq: true } }) {
user {
email
}
}
}
}
`;
export const QUERY_DASHBOARD_BODYSHOP = gql`
query QUERY_DASHBOARD_BODYSHOP {
dashboard_bodyshops: bodyshops(where: { associations: { active: { _eq: true } } }) {
id
prodtargethrs
md_ro_statuses
}
}
`;

9
client/src/graphql/user.queries.js
View File

@@ -135,3 +135,12 @@ export const UPDATE_NOTIFICATIONS_AUTOADD = gql`
}
}
`;
export const QUERY_USER_DASHBOARD_LAYOUT = gql`
query QUERY_USER_DASHBOARD_LAYOUT($email: String!) {
users(where: { email: { _eq: $email } }) {
email
dashboardlayout
}
}
`;