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

Merge branch 'master-AIO' into feature/IO-XXXX-pbs-ro-posting

Browse Source
This commit is contained in:
Patrick Fic
2025-09-02 15:24:15 -07:00
parent 83c0696a3e 130745d7e7
commit 9ab3d8c81a
77 changed files with 2996 additions and 2097 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
bodyshop_translations.babel
View File

@@ -65744,7 +65744,7 @@
<primary_language>en-US</primary_language>
<configuration>
<definitions>.</definitions>
<indent>tab</indent>
<indent>space2</indent>
<format>namespaced-json</format>
<support_arrays>true</support_arrays>
</configuration>

2
client/.env.development.imex
View File

@@ -14,3 +14,5 @@ VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
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

2
client/.env.development.rome
View File

@@ -16,3 +16,5 @@ VITE_APP_COUNTRY=USA
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

2
client/.env.production.imex
View File

@@ -13,3 +13,5 @@ VITE_APP_AXIOS_BASE_API_URL=https://api.imex.online/
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

2
client/.env.production.rome
View File

@@ -13,3 +13,5 @@ VITE_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
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

2
client/.env.test.imex
View File

@@ -13,3 +13,5 @@ VITE_APP_REPORTS_SERVER_URL=https://reports.test.imex.online
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

2
client/.env.test.rome
View File

@@ -13,3 +13,5 @@ VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
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

2115
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
client/package.json
View File

@@ -9,6 +9,7 @@
"proxy": "http://localhost:4000",
"dependencies": {
"@ant-design/pro-layout": "^7.22.4",
"@amplitude/analytics-browser": "^2.23.1",
"@apollo/client": "^3.13.6",
"@emotion/is-prop-valid": "^1.3.1",
"@fingerprintjs/fingerprintjs": "^4.6.1",
@@ -48,6 +49,7 @@
"normalize-url": "^8.0.2",
"object-hash": "^3.0.0",
"phone": "^3.1.59",
"posthog-js": "^1.260.2",
"prop-types": "^15.8.1",
"query-string": "^9.2.0",
"raf-schd": "^4.0.3",

62
client/src/App/App.container.jsx
View File

@@ -1,16 +1,20 @@
import { ApolloProvider } from "@apollo/client";
import * as Sentry from "@sentry/react";
import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
import { ConfigProvider } from "antd";
import enLocale from "antd/es/locale/en_US";
import { useEffect } from "react";
import { useEffect, useMemo } from "react";
import { CookiesProvider } from "react-cookie";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { connect, useSelector } from "react-redux";
import { createStructuredSelector } from "reselect";
import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
import { setDarkMode } from "../redux/application/application.actions";
import { selectDarkMode } from "../redux/application/application.selectors";
import { selectCurrentUser } from "../redux/user/user.selectors.js";
import client from "../utils/GraphQLClient";
import App from "./App";
import * as Sentry from "@sentry/react";
import themeProvider from "./themeProvider";
import { CookiesProvider } from "react-cookie";
import getTheme from "./themeProvider";
// Base Split configuration
const config = {
@@ -24,19 +28,54 @@ const config = {
function SplitClientProvider({ children }) {
const imexshopid = useSelector((state) => state.user.imexshopid); // Access imexshopid from Redux store
const splitClient = useSplitClient({ key: imexshopid || "anon" }); // Use imexshopid or fallback to "anon"
useEffect(() => {
if (splitClient && imexshopid) {
// Log readiness for debugging; no need for ready() since isReady is available
console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
}
}, [splitClient, imexshopid]);
return children;
}
function AppContainer() {
const mapDispatchToProps = (dispatch) => ({
setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode))
});
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser
});
function AppContainer({ currentUser, setDarkMode }) {
const { t } = useTranslation();
const isDarkMode = useSelector(selectDarkMode);
const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);
// Update data-theme attribute when dark mode changes
useEffect(() => {
document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
return () => document.documentElement.removeAttribute("data-theme");
}, [isDarkMode]);
// Sync Redux darkMode with localStorage on user change
useEffect(() => {
if (currentUser?.uid) {
const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`);
if (savedMode !== null) {
setDarkMode(JSON.parse(savedMode));
} else {
setDarkMode(false); // default to light mode
}
} else {
setDarkMode(false);
}
// eslint-disable-next-line
}, [currentUser?.uid]);
// Persist darkMode to localStorage when it or user changes
useEffect(() => {
if (currentUser?.uid) {
localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));
}
}, [isDarkMode, currentUser?.uid]);
return (
<CookiesProvider>
@@ -44,10 +83,9 @@ function AppContainer() {
<ConfigProvider
input={{ autoComplete: "new-password" }}
locale={enLocale}
theme={themeProvider}
theme={theme}
form={{
validateMessages: {
// eslint-disable-next-line no-template-curly-in-string
required: t("general.validation.required", { label: "${label}" })
}
}}
@@ -64,4 +102,4 @@ function AppContainer() {
);
}
export default Sentry.withProfiler(AppContainer);
export default Sentry.withProfiler(connect(mapStateToProps, mapDispatchToProps)(AppContainer));

305
client/src/App/App.styles.scss
View File

@@ -1,15 +1,226 @@
//Global Styles.
:root {
--table-stripe-bg: #f4f4f4; /* Light mode table stripe */
--menu-divider-color: #74695c; /* Light mode menu divider */
--menu-submenu-text: rgba(255, 255, 255, 0.65); /* Light mode submenu text */
--kanban-column-bg: #ddd; /* Light mode kanban column */
--alert-color: blue; /* Light mode alert */
--completion-soon-color: rgba(255, 140, 0, 0.8); /* Light mode completion soon */
--completion-past-color: rgba(255, 0, 0, 0.8); /* Light mode completion past */
--job-line-manual-color: tomato; /* Light mode job line manual */
--muted-button-color: lightgray; /* Light mode muted button */
--muted-button-hover-color: darkgrey; /* Light mode muted button hover */
--table-border-color: #ddd; /* Light mode table border */
--table-hover-bg: #f5f5f5; /* Light mode table hover */
--popover-bg: #fff; /* Light mode popover background */
--error-text: red; /* Light mode error message */
--no-jobs-text: #888; /* Light mode no jobs message */
--message-yours-bg: #eee; /* Light mode yours message background */
--message-mine-bg-start: #00d0ea; /* Light mode mine message gradient start */
--message-mine-bg-end: #0085d1; /* Light mode mine message gradient end */
--message-mine-text: white; /* Light mode mine message text */
--message-mine-tail-bg: white; /* Light mode mine/yours message tail */
--system-message-bg: #f5f5f5; /* Light mode system message background */
--system-message-text: #555; /* Light mode system message text */
--system-label-text: #888; /* Light mode system label/date text */
--message-icon-color: whitesmoke; /* Light mode message icon */
--eula-card-bg: lightgray; /* Light mode eula card background */
--notification-bg: #fff; /* Light mode notification background */
--notification-text: rgba(0, 0, 0, 0.85); /* Light mode notification text */
--notification-border: #d9d9d9; /* Light mode notification border */
--notification-header-bg: #fafafa; /* Light mode notification header background */
--notification-header-border: #f0f0f0; /* Light mode notification header border */
--notification-header-text: rgba(0, 0, 0, 0.85); /* Light mode notification header text */
--notification-toggle-icon: #1677ff; /* Light mode notification toggle icon */
--notification-switch-bg: #1677ff; /* Light mode notification switch background */
--notification-btn-link: #1677ff; /* Light mode notification link button */
--notification-btn-link-hover: #69b1ff; /* Light mode notification link button hover */
--notification-btn-link-disabled: rgba(0, 0, 0, 0.25); /* Light mode notification link button disabled */
--notification-btn-link-active: #0958d9; /* Light mode notification link button active */
--notification-read-bg: #fff; /* Light mode notification read background */
--notification-read-text: rgba(0, 0, 0, 0.65); /* Light mode notification read text */
--notification-unread-bg: #f5f5f5; /* Light mode notification unread background */
--notification-unread-text: rgba(0, 0, 0, 0.85); /* Light mode notification unread text */
--notification-item-hover-bg: #fafafa; /* Light mode notification item hover background */
--notification-ro-number: #1677ff; /* Light mode notification RO number */
--notification-relative-time: rgba(0, 0, 0, 0.45); /* Light mode notification relative time */
--alert-bg: #fff1f0; /* Light mode alert background */
--alert-text: rgba(0, 0, 0, 0.85); /* Light mode alert text */
--alert-border: #ffa39e; /* Light mode alert border */
--alert-message: #ff4d4f; /* Light mode alert message */
--share-badge-bg: #cccccc; /* Light mode share badge background */
--column-header-bg: #d0d0d0; /* Light mode column header background */
--footer-bg: #d0d0d0; /* Light mode footer background */
--tech-icon-color: orangered; /* Light mode tech icon color */
--clone-border-color: #1890ff; /* Light mode clone border color */
--event-arrived-bg: rgba(4, 141, 4, 0.4); /* Light mode arrived event background */
--event-block-bg: tomato; /* Light mode block event background */
--event-selected-bg: slategrey; /* Light mode selected event background */
--task-bg: #fff; /* Light mode task center background */
--task-text: rgba(0, 0, 0, 0.85); /* Light mode task text */
--task-border: #d9d9d9; /* Light mode task border */
--task-header-bg: #fafafa; /* Light mode task header background */
--task-header-border: #f0f0f0; /* Light mode task header border */
--task-section-bg: #f5f5f5; /* Light mode task section background */
--task-section-border: #e8e8e8; /* Light mode task section border */
--task-row-hover-bg: #f5f5f5; /* Light mode task row hover background */
--task-row-border: #f0f0f0; /* Light mode task row border */
--task-ro-number: #1677ff; /* Light mode task RO number */
--task-due-text: rgba(0, 0, 0, 0.45); /* Light mode task due text */
--task-button-bg: #1677ff; /* Light mode task button background */
--task-button-hover-bg: #4096ff; /* Light mode task button hover background */
--task-button-disabled-bg: #d9d9d9; /* Light mode task button disabled background */
--task-button-text: white; /* Light mode task button text */
--task-message-text: rgba(0, 0, 0, 0.45); /* Light mode task message text */
--mask-bg: rgba(0, 0, 0, 0.05); /* Light mode mask background */
--board-text-color: #393939; /* Light mode board text color */
--section-bg: #e3e3e3; /* Light mode section background */
--detail-text-color: #4d4d4d; /* Light mode detail text color */
--card-selected-bg: rgba(128, 128, 128, 0.2); /* Light mode selected card background */
--card-stripe-even-bg: #f0f2f5; /* Light mode even card background */
--card-stripe-odd-bg: #ffffff; /* Light mode odd card background */
--bar-border-color: #f0f2f5; /* Light mode bar border and background */
--tag-wrapper-bg: #f0f2f5; /* Light mode tag wrapper background */
--tag-wrapper-text: #000; /* Light mode tag wrapper text */
--preview-bg: lightgray; /* Light mode preview background */
--preview-border-color: #2196F3; /* Light mode preview border color */
--event-bg-fallback: #c4c4c4; /* Light mode event background fallback */
--card-bg-fallback: #ffffff; /* Light mode card background fallback */
--card-text-fallback: black; /* Light mode card text fallback */
--table-row-even-bg: rgb(236, 236, 236); /* Light mode table row even background */
--status-row-bg-fallback: #ffffff; /* Light mode status row fallback background */
--reset-link-color: #0000ff; /* Light mode reset link color */
--error-header-text: tomato; /* Light mode error header text */
--tooltip-bg: white; /* Light mode tooltip background */
--tooltip-border: gray; /* Light mode tooltip border */
--tooltip-text-fallback: black; /* Light mode tooltip text fallback */
--teams-button-bg: #6264A7; /* Light mode Teams button background */
--teams-button-border: #6264A7; /* Light mode Teams button border */
--teams-button-text: #FFFFFF; /* Light mode Teams button text and icon */
--content-bg: #fff; /* Light mode content background */
--legend-bg-fallback: #ffffff; /* Light mode legend background fallback */
--tech-content-bg: #fff; /* Light mode tech content background */
--today-bg: #ffffff; /* Light mode today background */
--today-text: #000000; /* Light mode today text */
--off-range-bg: #f8f8f8; /* Light mode off-range background */
}
[data-theme="dark"] {
--table-stripe-bg: #2a2a2a; /* Dark mode table stripe */
--menu-divider-color: #5c5c5c; /* Dark mode menu divider */
--menu-submenu-text: rgba(255, 255, 255, 0.85); /* Dark mode submenu text */
--kanban-column-bg: #333333; /* Dark mode kanban column */
--alert-color: #4da8ff; /* Dark mode alert */
--completion-soon-color: #ff8c1a; /* Dark mode completion soon */
--completion-past-color: #ff4d4f; /* Dark mode completion past */
--job-line-manual-color: #ff6347; /* Dark mode job line manual */
--muted-button-color: #666666; /* Dark mode muted button */
--muted-button-hover-color: #999999; /* Dark mode muted button hover */
--table-border-color: #5c5c5c; /* Dark mode table border */
--table-hover-bg: #2a2a2a; /* Dark mode table hover */
--popover-bg: #2a2a2a; /* Dark mode popover background */
--error-text: #ff4d4f; /* Dark mode error message */
--no-jobs-text: #999999; /* Dark mode no jobs message */
--message-yours-bg: #2a2a2a; /* Dark mode yours message background */
--message-mine-bg-start: #4da8ff; /* Dark mode mine message gradient start */
--message-mine-bg-end: #326ade; /* Dark mode mine message gradient end */
--message-mine-text: #ffffff; /* Dark mode mine message text */
--message-mine-tail-bg: #1f1f1f; /* Dark mode mine/yours message tail */
--system-message-bg: #333333; /* Dark mode system message background */
--system-message-text: #cccccc; /* Dark mode system message text */
--system-label-text: #999999; /* Dark mode system label/date text */
--message-icon-color: #cccccc; /* Dark mode message icon */
--eula-card-bg: #2a2a2a; /* Dark mode eula card background */
--notification-bg: #2a2a2a; /* Dark mode notification background */
--notification-text: rgba(255, 255, 255, 0.85); /* Dark mode notification text */
--notification-border: #5c5c5c; /* Dark mode notification border */
--notification-header-bg: #333333; /* Dark mode notification header background */
--notification-header-border: #444444; /* Dark mode notification header border */
--notification-header-text: rgba(255, 255, 255, 0.85); /* Dark mode notification header text */
--notification-toggle-icon: #4da8ff; /* Dark mode notification toggle icon */
--notification-switch-bg: #4da8ff; /* Dark mode notification switch background */
--notification-btn-link: #4da8ff; /* Dark mode notification link button */
--notification-btn-link-hover: #80c1ff; /* Dark mode notification link button hover */
--notification-btn-link-disabled: rgba(255, 255, 255, 0.25); /* Dark mode notification link button disabled */
--notification-btn-link-active: #2681ff; /* Dark mode notification link button active */
--notification-read-bg: #2a2a2a; /* Dark mode notification read background */
--notification-read-text: rgba(255, 255, 255, 0.65); /* Dark mode notification read text */
--notification-unread-bg: #333333; /* Dark mode notification unread background */
--notification-unread-text: rgba(255, 255, 255, 0.85); /* Dark mode notification unread text */
--notification-item-hover-bg: #3a3a3a; /* Dark mode notification item hover background */
--notification-ro-number: #4da8ff; /* Dark mode notification RO number */
--notification-relative-time: rgba(255, 255, 255, 0.45); /* Dark mode notification relative time */
--alert-bg: #3a1a1a; /* Dark mode alert background */
--alert-text: rgba(255, 255, 255, 0.85); /* Dark mode alert text */
--alert-border: #ff6666; /* Dark mode alert border */
--alert-message: #ff6666; /* Dark mode alert message */
--share-badge-bg: #666666; /* Dark mode share badge background */
--column-header-bg: #333333; /* Dark mode column header background */
--footer-bg: #333333; /* Dark mode footer background */
--tech-icon-color: #ff4500; /* Dark mode tech icon color */
--clone-border-color: #4da8ff; /* Dark mode clone border color */
--event-arrived-bg: rgba(4, 141, 4, 0.6); /* Dark mode arrived event background */
--event-block-bg: tomato; /* Dark mode block event background */
--event-selected-bg: #4a5e6e; /* Dark mode selected event background */
--task-bg: #2a2a2a; /* Dark mode task center background */
--task-text: rgba(255, 255, 255, 0.85); /* Dark mode task text */
--task-border: #5c5c5c; /* Dark mode task border */
--task-header-bg: #333333; /* Dark mode task header background */
--task-header-border: #444444; /* Dark mode task header border */
--task-section-bg: #333333; /* Dark mode task section background */
--task-section-border: #444444; /* Dark mode task section border */
--task-row-hover-bg: #3a3a3a; /* Dark mode task row hover background */
--task-row-border: #444444; /* Dark mode task row border */
--task-ro-number: #4da8ff; /* Dark mode task RO number */
--task-due-text: rgba(255, 255, 255, 0.45); /* Dark mode task due text */
--task-button-bg: #4da8ff; /* Dark mode task button background */
--task-button-hover-bg: #80c1ff; /* Dark mode task button hover background */
--task-button-disabled-bg: #666666; /* Dark mode task button disabled background */
--task-button-text: #ffffff; /* Dark mode task button text */
--task-message-text: rgba(255, 255, 255, 0.45); /* Dark mode task message text */
--mask-bg: rgba(255, 255, 255, 0.05); /* Dark mode mask background */
--board-text-color: #cccccc; /* Dark mode board text color */
--section-bg: #333333; /* Dark mode section background */
--detail-text-color: #bbbbbb; /* Dark mode detail text color */
--card-selected-bg: rgba(255, 255, 255, 0.1); /* Dark mode selected card background */
--card-stripe-even-bg: #2a2a2a; /* Dark mode even card background */
--card-stripe-odd-bg: #1f1f1f; /* Dark mode odd card background */
--bar-border-color: #2a2a2a; /* Dark mode bar border and background */
--tag-wrapper-bg: #2a2a2a; /* Dark mode tag wrapper background */
--tag-wrapper-text: #cccccc; /* Dark mode tag wrapper text */
--preview-bg: #2a2a2a; /* Dark mode preview background */
--preview-border-color: #4da8ff; /* Dark mode preview border color */
--event-bg-fallback: #262626; /* Dark mode event background fallback */
--card-bg-fallback: #2a2a2a; /* Dark mode card background fallback */
--card-text-fallback: #cccccc; /* Dark mode card text fallback */
--table-row-even-bg: #2a2a2a; /* Dark mode table row even background */
--status-row-bg-fallback: #1f1f1f; /* Dark mode status row fallback background */
--reset-link-color: #4da8ff; /* Dark mode reset link color */
--error-header-text: #ff6347; /* Dark mode error header text */
--tooltip-bg: #2a2a2a; /* Dark mode tooltip background */
--tooltip-border: #5c5c5c; /* Dark mode tooltip border */
--tooltip-text-fallback: #cccccc; /* Dark mode tooltip text fallback */
--teams-button-bg: #7b7dc4; /* Dark mode Teams button background */
--teams-button-border: #7b7dc4; /* Dark mode Teams button border */
--teams-button-text: #ffffff; /* Dark mode Teams button text and icon */
--content-bg: #2a2a2a; /* Dark mode content background */
--legend-bg-fallback: #2a2a2a; /* Dark mode legend background fallback */
--tech-content-bg: #2a2a2a; /* Dark mode tech content background */
--today-bg: #4a5e6e; /* Dark mode today background */
--today-text: #ffffff; /* Dark mode today text */
--off-range-bg: #333333; /* Dark mode off-range background */
--svg-background: #FFF; /* Dark mode SVG background */
}
// Global Styles
@import "react-big-calendar/lib/sass/styles";
.ant-menu-item-divider {
border-bottom: 1px solid #74695c !important;
border-bottom: 1px solid var(--menu-divider-color) !important;
}
// TODO: This was added because the newest release of ant was making the text color and the background color the same on a selected header
// Tried all available tokens (https://ant.design/components/menu?locale=en-US) and even reverted all our custom styles, to no avail
// This should be kept an eye on, especially if implementing DARK MODE
// Note: Monitor this in dark mode to ensure text visibility
.ant-menu-submenu-title {
color: rgba(255, 255, 255, 0.65) !important;
color: var(--menu-submenu-text) !important;
}
.imex-table-header {
@@ -46,7 +257,7 @@
}
.ellipses {
display: inline-block; /* for em, a, span, etc (inline by default) */
display: inline-block;
text-overflow: ellipsis;
width: calc(95%);
overflow: hidden;
@@ -60,23 +271,24 @@
}
}
// ::-webkit-scrollbar-track {
// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
// border-radius: 0.2rem;
// background-color: #f5f5f5;
// }
// Scrollbar styles (uncomment if needed, updated for dark mode)
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 0.2rem;
background-color: var(--table-stripe-bg);
}
// ::-webkit-scrollbar {
// width: 0.25rem;
// max-height: 0.25rem;
// background-color: #f5f5f5;
// }
::-webkit-scrollbar {
width: 0.25rem;
max-height: 0.25rem;
background-color: var(--table-stripe-bg);
}
// ::-webkit-scrollbar-thumb {
// border-radius: 0.2rem;
// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
// background-color: #188fff;
// }
::-webkit-scrollbar-thumb {
border-radius: 0.2rem;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: var(--alert-color);
}
.ant-input-number-input,
.ant-input-number,
@@ -88,28 +300,27 @@
.production-alert {
animation: alertBlinker 1s linear infinite;
color: blue;
color: var(--alert-color);
}
@keyframes alertBlinker {
50% {
color: red;
color: var(--completion-past-color);
opacity: 100;
//opacity: 0;
}
}
.blue {
color: blue;
color: var(--alert-color);
}
.production-completion-soon {
color: rgba(255, 140, 0, 0.8);
color: var(--completion-soon-color);
font-weight: bold;
}
.production-completion-past {
color: rgba(255, 0, 0, 0.8);
color: var(--completion-past-color);
font-weight: bold;
}
@@ -139,7 +350,7 @@
}
.react-kanban-column {
background-color: #ddd !important;
background-color: var(--kanban-column-bg) !important;
}
.production-list-table {
@@ -151,18 +362,18 @@
.ReactGridGallery_tile-icon-bar {
div {
svg {
fill: #1890ff;
fill: var(--alert-color);
}
}
}
.job-line-manual {
color: tomato;
color: var(--job-line-manual-color);
font-style: italic;
}
.ant-table-tbody > tr.ant-table-row:nth-child(2n) > td {
background-color: #f4f4f4;
background-color: var(--table-stripe-bg);
}
.rowWithColor > td {
@@ -170,15 +381,15 @@
}
.muted-button {
color: lightgray;
color: var(--muted-button-color);
border: none;
background: none;
cursor: pointer;
font-size: 16px; /* Adjust as needed */
font-size: 16px;
}
.muted-button:hover {
color: darkgrey;
color: var(--muted-button-hover-color);
}
.notification-alert-unordered-list {
@@ -190,3 +401,27 @@
margin-right: 0;
}
}
// Override react-big-calendar styles for dark mode only
[data-theme="dark"] {
.car-svg {
background-color: var(--svg-background);
}
.rbc-today {
background-color: var(--today-bg);
color: var(--today-text);
}
.rbc-off-range {
background-color: var(--off-range-bg);
}
.rbc-day-bg.rbc-today {
background-color: var(--today-bg);
}
}
//.rbc-time-header-gutter {
// padding: 0;
//}

47
client/src/App/themeProvider.js
View File

@@ -4,36 +4,42 @@ import InstanceRenderMgr from "../utils/instanceRenderMgr";
const { defaultAlgorithm, darkAlgorithm } = theme;
let isDarkMode = false;
/**
* Default theme
* @type {{components: {Menu: {itemDividerBorderColor: string}}}}
*/
const defaultTheme = {
const defaultTheme = (isDarkMode) => ({
components: {
Table: {
rowHoverBg: "#e7f3ff",
rowSelectedBg: "#e6f7ff",
rowHoverBg: isDarkMode ? "#2a2a2a" : "#e7f3ff",
rowSelectedBg: isDarkMode ? "#333333" : "#e6f7ff",
headerSortHoverBg: "transparent"
},
Menu: {
darkItemHoverBg: "#1890ff",
itemHoverBg: "#1890ff",
horizontalItemHoverBg: "#1890ff"
darkItemHoverBg: isDarkMode ? "#004a77" : "#1890ff",
itemHoverBg: isDarkMode ? "#004a77" : "#1890ff",
horizontalItemHoverBg: isDarkMode ? "#004a77" : "#1890ff"
}
},
token: {
colorPrimary: InstanceRenderMgr({
imex: "#1890ff",
rome: "#326ade"
}),
colorInfo: InstanceRenderMgr({
imex: "#1890ff",
rome: "#326ade"
})
colorPrimary: InstanceRenderMgr(
{
imex: isDarkMode ? "#4da8ff" : "#1890ff",
rome: isDarkMode ? "#5b8ce6" : "#326ade"
},
isDarkMode
),
colorInfo: InstanceRenderMgr(
{
imex: isDarkMode ? "#4da8ff" : "#1890ff",
rome: isDarkMode ? "#5b8ce6" : "#326ade"
},
isDarkMode
),
colorError: isDarkMode ? "#ff4d4f" : "#f5222d",
colorBgBase: isDarkMode ? "#1f1f1f" : "#ffffff" // Align with Ant Design dark mode
}
};
});
/**
* Development theme
@@ -60,8 +66,9 @@ const prodTheme = {};
const currentTheme = import.meta.env.DEV ? devTheme : prodTheme;
const finaltheme = {
const getTheme = (isDarkMode) => ({
algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
...defaultsDeep(currentTheme, defaultTheme)
};
export default finaltheme;
});
export default getTheme;

4
client/src/components/bill-cm-returns-table/bill-cm-returns-table.styles.scss
View File

@@ -6,7 +6,7 @@
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--table-border-color);
.ant-form-item {
margin-bottom: 0px !important;
@@ -14,6 +14,6 @@
}
tr:hover {
background-color: #f5f5f5;
background-color: var(--table-hover-bg);
}
}

4
client/src/components/bill-inventory-table/bill-inventory-table.styles.scss
View File

@@ -6,7 +6,7 @@
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--table-border-color);
.ant-form-item {
margin-bottom: 0px !important;
@@ -14,6 +14,6 @@
}
tr:hover {
background-color: #f5f5f5;
background-color: var(--table-hover-bg);
}
}

11
client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
View File

@@ -29,9 +29,7 @@ const mapDispatchToProps = (dispatch) => ({
function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation, bodyshop }) {
const { t } = useTranslation();
const [, forceUpdate] = useState(false);
const phoneNumbers = conversationList.map((item) => phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, ""));
const { data: optOutData } = useQuery(GET_PHONE_NUMBER_OPT_OUTS, {
variables: {
bodyshopid: bodyshop.id,
@@ -64,15 +62,12 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
const item = sortedConversationList[index];
const normalizedPhone = phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, "");
const hasOptOutEntry = optOutMap.has(normalizedPhone);
const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
const cardContentLeft =
item.job_conversations.length > 0
? item.job_conversations.map((j, idx) => <Tag key={idx}>{j.job.ro_number}</Tag>)
: null;
const names = <>{_.uniq(item.job_conversations.map((j, idx) => OwnerNameDisplayFunction(j.job)))}</>;
const cardTitle = (
<>
{item.label && <Tag color="blue">{item.label}</Tag>}
@@ -85,7 +80,6 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
)}
</>
);
const cardExtra = (
<>
<Badge count={item.messages_aggregate.aggregate.count} />
@@ -98,11 +92,10 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
)}
</>
);
const getCardStyle = () =>
item.id === selectedConversation
? { backgroundColor: "rgba(128, 128, 128, 0.2)" }
: { backgroundColor: index % 2 === 0 ? "#f0f2f5" : "#ffffff" };
? { backgroundColor: "var(--card-selected-bg)" }
: { backgroundColor: index % 2 === 0 ? "var(--card-stripe-even-bg)" : "var(--card-stripe-odd-bg)" };
return (
<List.Item

11
client/src/components/chat-media-selector/chat-media-selector.styles.scss
View File

@@ -5,7 +5,7 @@
max-height: 480px;
overflow-y: auto;
padding: 8px;
background-color: #fff;
background-color: var(--popover-bg);
border-radius: 8px;
}
}
@@ -17,7 +17,7 @@
}
.error-message {
color: red;
color: var(--error-text);
font-size: 12px;
text-align: center;
margin-bottom: 8px;
@@ -25,14 +25,13 @@
.no-jobs-message {
font-size: 14px;
color: #888;
color: var(--no-jobs-text);
text-align: center;
padding: 8px;
}
/* Style images within gallery components */
.media-selector-content img {
object-fit: cover;
border-radius: 4px;
margin: 4px;
@@ -40,8 +39,8 @@
}
/* Grid layout for gallery components */
.media-selector-content .ant-image, /* Assuming gallery components use Ant Design's Image */
.media-selector-content .gallery-container { /* Fallback for custom gallery classes */
.media-selector-content .ant-image,
.media-selector-content .gallery-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 4px;

24
client/src/components/chat-messages-list/chat-message-list.styles.scss
View File

@@ -44,7 +44,6 @@
.chat-send-message-button {
margin: 0.3rem;
padding-left: 0.5rem;
}
.message-icon {
@@ -52,7 +51,7 @@
bottom: 0.1rem;
right: 0.3rem;
margin: 0 0.1rem;
color: whitesmoke;
color: var(--message-icon-color);
z-index: 5;
}
@@ -80,7 +79,7 @@
&:last-child:after {
width: 10px;
background: white;
background: var(--message-mine-tail-bg);
z-index: 1;
}
}
@@ -92,11 +91,11 @@
.message {
margin-right: 20%;
background-color: #eee;
background-color: var(--message-yours-bg);
&:last-child:before {
left: -7px;
background: #eee;
background: var(--message-yours-bg);
border-bottom-right-radius: 15px;
}
@@ -112,14 +111,14 @@
align-items: flex-end;
.message {
color: white;
color: var(--message-mine-text);
margin-left: 25%;
background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
background: linear-gradient(to bottom, var(--message-mine-bg-start) 0%, var(--message-mine-bg-end) 100%);
padding-bottom: 0.6rem;
&:last-child:before {
right: -8px;
background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
background: linear-gradient(to bottom, var(--message-mine-bg-start) 0%, var(--message-mine-bg-end) 100%);
border-bottom-left-radius: 15px;
}
@@ -135,32 +134,31 @@
margin: 0.5rem 10%;
.message {
background-color: #f5f5f5;
background-color: var(--system-message-bg);
border-radius: 10px;
padding: 0.5rem 1rem;
text-align: center;
font-style: italic;
color: #555;
color: var(--system-message-text);
width: fit-content;
max-width: 80%;
}
.system-label {
font-size: 0.75rem;
color: #888;
color: var(--system-label-text);
margin-bottom: 0.2rem;
display: block;
}
.system-date {
font-size: 0.75rem;
color: #888;
color: var(--system-label-text);
margin-top: 0.2rem;
text-align: center;
}
}
.virtuoso-container {
flex: 1;
overflow: auto;

21
client/src/components/dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx
View File

@@ -1,6 +1,6 @@
import { Card, Table, Tag } from "antd";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import dayjs from "../../../utils/day";
import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
@@ -69,7 +69,6 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
];
if (!data) return null;
if (!data.job_lifecycle || !lifecycleData) return <DashboardRefreshRequired {...cardProps} />;
const extra = `${t("job_lifecycle.content.calculated_based_on")} ${lifecycleData.jobs} ${t("job_lifecycle.content.jobs_in_since")} ${fortyFiveDaysAgo()}`;
@@ -88,7 +87,7 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
borderRadius: "5px",
borderWidth: "5px",
borderStyle: "solid",
borderColor: "#f0f2f5",
borderColor: "var(--bar-border-color)",
margin: 0,
padding: 0
}}
@@ -107,12 +106,10 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
alignItems: "center",
margin: 0,
padding: 0,
borderTop: "1px solid #f0f2f5",
borderBottom: "1px solid #f0f2f5",
borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
borderRight: isLast ? "1px solid #f0f2f5" : undefined,
borderTop: "1px solid var(--bar-border-color)",
borderBottom: "1px solid var(--bar-border-color)",
borderLeft: isFirst ? "1px solid var(--bar-border-color)" : undefined,
borderRight: isLast ? "1px solid var(--bar-border-color)" : undefined,
backgroundColor: key.color,
width: `${key.percentage}%`
}}
@@ -124,7 +121,7 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
<div>{key.roundedPercentage}</div>
<div
style={{
backgroundColor: "#f0f2f5",
backgroundColor: "var(--tag-wrapper-bg)",
borderRadius: "5px",
paddingRight: "2px",
paddingLeft: "2px",
@@ -152,8 +149,8 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
style={{
backgroundColor: "#f0f2f5",
color: "#000",
backgroundColor: "var(--tag-wrapper-bg)",
color: "var(--tag-wrapper-text)",
padding: "4px",
textAlign: "center"
}}

24
client/src/components/email-overlay/email-overlay.component.jsx
View File

@@ -1,7 +1,6 @@
import { UploadOutlined, UserAddOutlined } from "@ant-design/icons";
import { Button, Divider, Dropdown, Form, Input, Select, Space, Tabs, Upload } from "antd";
import _ from "lodash";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -15,20 +14,24 @@ const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
emailConfig: selectEmailConfig
});
const mapDispatchToProps = (dispatch) => ({
const mapDispatchToProps = () => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(EmailOverlayComponent);
export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, bodyshop, currentUser }) {
const { t } = useTranslation();
const handleClick = ({ item, key, keyPath }) => {
const handleClick = ({ item }) => {
const email = item.props.value;
form.setFieldsValue({
to: _.uniq([...form.getFieldValue("to"), ...(typeof email === "string" ? [email] : email)])
});
};
const handle_CC_Click = ({ item, key, keyPath }) => {
const handle_CC_Click = ({ item }) => {
const email = item.props.value;
form.setFieldsValue({
cc: _.uniq([...(form.getFieldValue("cc") || ""), ...(typeof email === "string" ? [email] : email)])
@@ -52,6 +55,7 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
],
onClick: handleClick
};
const menuCC = {
items: [
...bodyshop.employees
@@ -136,26 +140,22 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
>
<Input />
</Form.Item>
<Divider>{t("emails.labels.preview")}</Divider>
{bodyshop.attach_pdf_to_email && <strong>{t("emails.labels.pdfcopywillbeattached")}</strong>}
<Form.Item shouldUpdate>
{() => {
return (
<div
style={{
padding: "1rem",
backgroundColor: "lightgray",
borderLeft: "6px solid #2196F3"
backgroundColor: "var(--preview-bg)",
borderLeft: "6px solid var(--preview-border-color)"
}}
dangerouslySetInnerHTML={{ __html: form.getFieldValue("html") }}
/>
);
}}
</Form.Item>
<Tabs
defaultActiveKey="documents"
items={[
@@ -184,12 +184,10 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
return e && e.fileList;
}}
rules={[
({ getFieldValue }) => ({
() => ({
validator(rule, value) {
const totalSize = value.reduce((acc, val) => (acc = acc + val.size), 0);
const limit = 10485760 - new Blob([form.getFieldValue("html")]).size;
if (totalSize > limit) {
return Promise.reject(t("general.errors.sizelimit"));
}

2
client/src/components/eula/eula.styles.scss
View File

@@ -5,7 +5,7 @@
.eula-markdown-card {
max-height: 50vh;
overflow-y: auto;
background-color: lightgray;
background-color: var(--eula-card-bg);
}
.eula-markdown-div {

3
client/src/components/form-items-formatted/read-only-form-item.component.jsx
View File

@@ -1,5 +1,4 @@
import Dinero from "dinero.js";
import { forwardRef } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -28,4 +27,4 @@ const ReadOnlyFormItem = ({ bodyshop, value, type = "text" }) => {
}
};
export default connect(mapStateToProps, mapDispatchToProps)(forwardRef(ReadOnlyFormItem));
export default connect(mapStateToProps, mapDispatchToProps)(ReadOnlyFormItem);

13
client/src/components/header/buildLeftMenuItems.jsx
View File

@@ -25,7 +25,7 @@ import {
UsergroupAddOutlined,
UserOutlined
} from "@ant-design/icons";
import { FaCalendarAlt, FaCarCrash, FaTasks } from "react-icons/fa";
import { FaCalendarAlt, FaCarCrash, FaMoon, FaSun, FaTasks } from "react-icons/fa";
import { BsKanban } from "react-icons/bs";
import { FiLogOut } from "react-icons/fi";
import { GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
@@ -41,7 +41,9 @@ const buildLeftMenuItems = ({
setTaskUpsertContext,
setReportCenterContext,
signOutStart,
accountingChildren
accountingChildren,
handleDarkModeToggle,
darkMode
}) => {
return [
{
@@ -331,6 +333,13 @@ const buildLeftMenuItems = ({
label: t("user.actions.signout"),
onClick: () => signOutStart()
},
{
key: "darkmode-toggle",
id: "header-darkmode-toggle",
label: darkMode ? t("user.actions.light_theme") : t("user.actions.dark_theme"),
icon: darkMode ? <FaSun /> : <FaMoon />,
onClick: handleDarkModeToggle
},
{
key: "help",
id: "header-help",

40
client/src/components/header/header.component.jsx
View File

@@ -12,7 +12,7 @@ import { createStructuredSelector } from "reselect";
import { TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket.js";
import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
import { QUERY_MY_TASKS_COUNT } from "../../graphql/tasks.queries.js";
import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
import { selectDarkMode, selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
import { setModalContext } from "../../redux/modals/modals.actions";
import { signOutStart } from "../../redux/user/user.actions";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
@@ -22,13 +22,15 @@ import NotificationCenterContainer from "../notification-center/notification-cen
import TaskCenterContainer from "../task-center/task-center.container.jsx";
import buildAccountingChildren from "./buildAccountingChildren.jsx";
import buildLeftMenuItems from "./buildLeftMenuItems.jsx";
import { toggleDarkMode } from "../../redux/application/application.actions";
// --- Redux mappings ---
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
recentItems: selectRecentItems,
selectedHeader: selectSelectedHeader,
bodyshop: selectBodyshop
bodyshop: selectBodyshop,
darkMode: selectDarkMode
});
const mapDispatchToProps = (dispatch) => ({
@@ -38,7 +40,8 @@ const mapDispatchToProps = (dispatch) => ({
setReportCenterContext: (context) => dispatch(setModalContext({ context, modal: "reportCenter" })),
signOutStart: () => dispatch(signOutStart()),
setCardPaymentContext: (context) => dispatch(setModalContext({ context, modal: "cardPayment" })),
setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" })),
toggleDarkMode: () => dispatch(toggleDarkMode())
});
// --- Utility Hooks ---
@@ -84,8 +87,7 @@ function useIncompleteTaskCount(assignedToId, bodyshopId, isEmployee, isConnecte
}
// --- Main Component ---
function Header(props) {
const {
function Header({
handleMenuClick,
currentUser,
bodyshop,
@@ -97,9 +99,10 @@ function Header(props) {
setReportCenterContext,
recentItems,
setCardPaymentContext,
setTaskUpsertContext
} = props;
setTaskUpsertContext,
toggleDarkMode,
darkMode
}) {
// Feature flags
const {
treatments: { ImEXPay, DmsAp, Simple_Inventory }
@@ -216,6 +219,10 @@ function Header(props) {
[handleMenuClick]
);
const handleDarkModeToggle = useCallback(() => {
toggleDarkMode();
}, [toggleDarkMode]);
// --- Menu Items ---
// built externally to keep the component clean, but on this level to prevent unnecessary re-renders
@@ -257,9 +264,21 @@ function Header(props) {
setTaskUpsertContext,
setReportCenterContext,
signOutStart,
accountingChildren
accountingChildren,
darkMode,
handleDarkModeToggle
}),
[t, bodyshop, recentItems, setTaskUpsertContext, setReportCenterContext, signOutStart, accountingChildren]
[
t,
bodyshop,
recentItems,
setTaskUpsertContext,
setReportCenterContext,
signOutStart,
accountingChildren,
darkMode,
handleDarkModeToggle
]
);
const rightMenuItems = useMemo(() => {
@@ -292,6 +311,7 @@ function Header(props) {
),
onClick: handleTaskCenterClick
});
return items;
}, [
scenarioNotificationsOn,

29
client/src/components/job-at-change/schedule-event.component.jsx
View File

@@ -36,6 +36,7 @@ import ScheduleEventNote from "./schedule-event.note.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
setScheduleContext: (context) => dispatch(setModalContext({ context: context, modal: "schedule" })),
openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
@@ -64,7 +65,6 @@ export function ScheduleEventComponent({
const notification = useNotification();
const [form] = Form.useForm();
const [popOverVisible, setPopOverVisible] = useState(false);
const [getJobDetails] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
variables: { id: event.job?.id },
onCompleted: (data) => {
@@ -83,7 +83,6 @@ export function ScheduleEventComponent({
});
}
},
fetchPolicy: "network-only"
});
@@ -115,7 +114,6 @@ export function ScheduleEventComponent({
});
}}
/>
<Button onClick={() => handleCancel({ id: event.id })} disabled={event.arrived}>
{t("appointments.actions.unblock")}
</Button>
@@ -133,7 +131,6 @@ export function ScheduleEventComponent({
}
}
});
if (!res.errors) {
notification["success"]({
message: t("jobs.successes.converted")
@@ -180,7 +177,6 @@ export function ScheduleEventComponent({
<Form.Item name={["scheduled_delivery"]} label={t("jobs.fields.scheduled_delivery")}>
<FormDateTimePickerComponent disabled={event.ro_number} />
</Form.Item>
<Space wrap>
<Button type="primary" onClick={() => form.submit()}>
{t("general.actions.save")}
@@ -210,7 +206,6 @@ export function ScheduleEventComponent({
<ScheduleEventColor event={event} />
</Space>
)}
{event.job ? (
<div>
<DataLabel label={t("jobs.fields.ro_number")}>{(event.job && event.job.ro_number) || ""}</DataLabel>
@@ -371,7 +366,6 @@ export function ScheduleEventComponent({
</Button>
</Popover>
)}
{event.isintake ? (
<Button
disabled={event.arrived}
@@ -428,27 +422,33 @@ export function ScheduleEventComponent({
</div>
);
// Adjust event color for dark mode if needed
const getEventBackground = () => {
if (event?.block) {
return "var(--event-block-bg)"; // Use a specific color for dark mode
}
const baseColor = event.color && event.color.hex ? event.color.hex : event.color || "var(--event-bg-fallback)";
// Optionally adjust color for dark mode (e.g., lighten if too dark)
return baseColor;
};
const RegularEvent = event.isintake ? (
<Space
wrap
size="small"
style={{
backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
backgroundColor: getEventBackground()
}}
>
{event.note && <AlertFilled className="production-alert" />}
<strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
<OwnerNameDisplay ownerObject={event.job} />
{`${(event.job && event.job.v_model_yr) || ""} ${
(event.job && event.job.v_make_desc) || ""
} ${(event.job && event.job.v_model_desc) || ""}`}
{`(${(event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"} / ${
(event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
})`}
{event.job && event.job.alt_transport && <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>}
{event?.job?.comment && `C: ${event.job.comment}`}
</Space>
@@ -457,7 +457,7 @@ export function ScheduleEventComponent({
style={{
height: "100%",
width: "100%",
backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
backgroundColor: getEventBackground()
}}
>
<strong>{`${event.title || ""}`}</strong>
@@ -473,8 +473,7 @@ export function ScheduleEventComponent({
style={{
height: "100%",
width: "100%",
backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
backgroundColor: getEventBackground()
}}
>
{RegularEvent}

2
client/src/components/job-damage-visual/job-damage-visual.component.jsx
View File

@@ -1,4 +1,3 @@
import React from "react";
import { useTranslation } from "react-i18next";
const Car = ({ dmg1, dmg2 }) => {
@@ -8,6 +7,7 @@ const Car = ({ dmg1, dmg2 }) => {
<div style={{ position: "relative", textAlign: "center" }}>
{t("jobs.labels.cards.damage")}
<svg
className="car-svg"
style={{ left: 0, top: 0, width: "100%", height: "100%" }}
id="svg166"
version="1.1"

38
client/src/components/job-lifecycle/job-lifecycle.component.jsx
View File

@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import dayjs from "../../utils/day";
import axios from "axios";
import { Badge, Card, Space, Table, Tag } from "antd";
@@ -6,24 +6,24 @@ import { gql, useQuery } from "@apollo/client";
import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
import { isEmpty } from "lodash";
import { useTranslation } from "react-i18next";
import "./job-lifecycle.styles.scss";
import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
const mapDispatchToProps = () => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
// show text on bar if text can fit
export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
export function JobLifecycleComponent({ bodyshop, job, statuses }) {
const [loading, setLoading] = useState(true);
const [lifecycleData, setLifecycleData] = useState(null);
const { t } = useTranslation(); // Used for tracking external state changes.
@@ -79,7 +79,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
title: t("job_lifecycle.columns.value"),
dataIndex: "value",
key: "value",
render: (text, record) => (
render: (text) => (
<BlurWrapperComponent
featureName="lifecycle"
bypass
@@ -95,7 +95,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
dataIndex: "start",
key: "start",
sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix(),
render: (text, record) => (
render: (text) => (
<BlurWrapperComponent featureName="lifecycle" bypass valueProp="children" overrideValueFunction="RandomDate">
<span>{DateTimeFormatterFunction(text)}</span>
</BlurWrapperComponent>
@@ -119,8 +119,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
}
return dayjs(a.end).unix() - dayjs(b.end).unix();
},
render: (text, record) => (
render: (text) => (
<BlurWrapperComponent featureName="lifecycle" bypass valueProp="children" overrideValueFunction="RandomDate">
<span>{isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text)}</span>
</BlurWrapperComponent>
@@ -170,7 +169,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
borderRadius: "5px",
borderWidth: "5px",
borderStyle: "solid",
borderColor: "#f0f2f5",
borderColor: "var(--bar-border-color)",
margin: 0,
padding: 0
}}
@@ -189,12 +188,10 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
alignItems: "center",
margin: 0,
padding: 0,
borderTop: "1px solid #f0f2f5",
borderBottom: "1px solid #f0f2f5",
borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
borderRight: isLast ? "1px solid #f0f2f5" : undefined,
borderTop: "1px solid var(--bar-border-color)",
borderBottom: "1px solid var(--bar-border-color)",
borderLeft: isFirst ? "1px solid var(--bar-border-color)" : undefined,
borderRight: isLast ? "1px solid var(--bar-border-color)" : undefined,
backgroundColor: key.color,
width: `${key.percentage}%`
}}
@@ -206,7 +203,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
<div>{key.roundedPercentage}</div>
<div
style={{
backgroundColor: "#f0f2f5",
backgroundColor: "var(--tag-wrapper-bg)",
borderRadius: "5px",
paddingRight: "2px",
paddingLeft: "2px",
@@ -230,8 +227,8 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
style={{
backgroundColor: "#f0f2f5",
color: "#000",
backgroundColor: "var(--tag-wrapper-bg)",
color: "var(--tag-wrapper-text)",
padding: "4px",
textAlign: "center"
}}
@@ -315,4 +312,5 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
</Card>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(JobLifecycleComponent);

4
client/src/components/jobs-close-lines/jobs-close-lines.styles.scss
View File

@@ -6,7 +6,7 @@
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--table-border-color);
.ant-form-item {
margin-bottom: 0px !important;
@@ -14,6 +14,6 @@
}
tr:hover {
background-color: #f5f5f5;
background-color: var(--table-hover-bg);
}
}

8
client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
View File

@@ -46,8 +46,8 @@ function JobsDocumentsImgproxyComponent({
const [modalState, setModalState] = useState({ open: false, index: 0 });
const fetchThumbnails = useCallback(() => {
fetchImgproxyThumbnails({ setStateCallback: setGalleryImages, jobId });
}, [jobId, setGalleryImages]);
fetchImgproxyThumbnails({ setStateCallback: setGalleryImages, jobId, billId });
}, [jobId, billId, setGalleryImages]);
useEffect(() => {
if (data) {
@@ -208,8 +208,8 @@ function JobsDocumentsImgproxyComponent({
export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyComponent);
export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, imagesOnly }) => {
const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId });
export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, billId, imagesOnly }) => {
const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId, billid: billId });
const documents = result.data.reduce(
(acc, value) => {
if (value.type.startsWith("image")) {

4
client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
View File

@@ -1,4 +1,4 @@
import { useApolloClient, useMutation } from "@apollo/client";
import { useMutation } from "@apollo/client";
import { Form, Modal } from "antd";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
@@ -43,8 +43,6 @@ export function NoteUpsertModalContainer({ currentUser, noteUpsertModal, toggleM
const [form] = Form.useForm();
const { client } = useApolloClient();
useEffect(() => {
//Required to prevent infinite looping.
if (existingNote && open) {

50
client/src/components/notification-center/notification-center.styles.scss
View File

@@ -4,9 +4,9 @@
right: 0;
width: 400px;
max-width: 400px;
background: #fff;
color: rgba(0, 0, 0, 0.85);
border: 1px solid #d9d9d9;
background: var(--notification-bg);
color: var(--notification-text);
border: 1px solid var(--notification-border);
border-radius: 6px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
z-index: 1000;
@@ -19,23 +19,22 @@
.notification-header {
padding: 4px 16px;
border-bottom: 1px solid #f0f0f0;
border-bottom: 1px solid var(--notification-header-border);
display: flex;
justify-content: space-between;
align-items: center;
background: #fafafa;
background: var(--notification-header-bg);
h3 {
margin: 0;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
color: var(--notification-header-text);
}
.notification-controls {
display: flex;
align-items: center;
gap: 8px;
// Styles for the eye icon and switch (custom classes)
.notification-toggle {
align-items: center; // Ensure vertical alignment
@@ -43,7 +42,7 @@
.notification-toggle-icon {
font-size: 14px;
color: #1677ff;
color: var(--notification-toggle-icon);
vertical-align: middle;
}
@@ -59,7 +58,8 @@
}
&.ant-switch-checked {
background-color: #1677ff;
background-color: var(--notification-switch-bg);
.ant-switch-handle {
left: calc(100% - 14px);
}
@@ -70,37 +70,37 @@
// Styles for the "Mark All Read" button (restore original link button style)
.ant-btn-link {
padding: 0;
color: #1677ff;
color: var(--notification-btn-link);
&:hover {
color: #69b1ff;
color: var(--notification-btn-link-hover);
}
&:disabled {
color: rgba(0, 0, 0, 0.25);
color: var(--notification-btn-link-disabled);
cursor: not-allowed;
}
&.active {
color: #0958d9;
color: var(--notification-btn-link-active);
}
}
}
}
.notification-read {
background: #fff;
color: rgba(0, 0, 0, 0.65);
background: var(--notification-read-bg);
color: var(--notification-read-text);
}
.notification-unread {
background: #f5f5f5;
color: rgba(0, 0, 0, 0.85);
background: var(--notification-unread-bg);
color: var(--notification-unread-text);
}
.notification-item {
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
border-bottom: 1px solid var(--notification-header-border);
display: block;
overflow: visible;
width: 100%;
@@ -108,7 +108,7 @@
cursor: pointer;
&:hover {
background: #fafafa;
background: var(--notification-item-hover-bg);
}
.notification-content {
@@ -125,7 +125,7 @@
.ro-number {
margin: 0;
color: #1677ff;
color: var(--notification-ro-number);
flex-shrink: 0;
white-space: nowrap;
}
@@ -133,7 +133,7 @@
.relative-time {
margin: 0;
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
color: var(--notification-relative-time);
white-space: nowrap;
flex-shrink: 0;
margin-left: auto;
@@ -164,12 +164,12 @@
.ant-alert {
margin: 8px;
background: #fff1f0;
color: rgba(0, 0, 0, 0.85);
border: 1px solid #ffa39e;
background: var(--alert-bg);
color: var(--alert-text);
border: 1px solid var(--alert-border);
.ant-alert-message {
color: #ff4d4f;
color: var(--alert-message);
}
}
}

6
client/src/components/payment-expanded-row/payment-expanded-row.component.jsx
View File

@@ -16,10 +16,10 @@ import { useNotification } from "../../contexts/Notifications/notificationContex
const { confirm } = Modal;
const openNotificationWithIcon = (type, t, notification) => {
const openNotificationWithIcon = (type, t, notification, message) => {
notification[type]({
message: t("job_payments.notifications.error.title"),
description: t("job_payments.notifications.error.description")
description: t("job_payments.notifications.error.description", { message: message || "Unknown error." })
});
};
@@ -99,7 +99,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
});
if (refundResponse.data.status < 0) {
openNotificationWithIcon("error", t, notification);
openNotificationWithIcon("error", t, notification, refundResponse.data.message);
return;
}

17
client/src/components/production-board-kanban/production-board-kanban-card-color-legend.component.jsx
View File

@@ -1,26 +1,29 @@
import { Col, List, Space, Typography } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
const CardColorLegend = ({ bodyshop }) => {
const { t } = useTranslation();
const data = bodyshop.ssbuckets.map((bucket) => {
let color = { r: 255, g: 255, b: 255 };
let color = { r: 255, g: 255, b: 255, a: 1 }; // Default to white with full opacity
if (bucket.color) {
color = bucket.color;
if (bucket.color.rgb) {
color = bucket.color.rgb;
color = { ...bucket.color.rgb, a: bucket.color.a || 1 };
}
}
return {
label: bucket.label,
color
};
});
const getBackgroundColor = (color) => {
// Return dynamic color if valid, otherwise use fallback
return color && color.r !== undefined && color.g !== undefined && color.b !== undefined
? `rgba(${color.r},${color.g},${color.b},${color.a || 1})`
: "var(--legend-bg-fallback)";
};
return (
<Col>
<Typography>{t("production.labels.legend")}</Typography>
@@ -36,7 +39,7 @@ const CardColorLegend = ({ bodyshop }) => {
style={{
width: "1.5rem",
aspectRatio: "1/1",
backgroundColor: `rgba(${item.color.r},${item.color.g},${item.color.b},${item.color.a})`
backgroundColor: getBackgroundColor(item.color)
}}
></div>
<div>{item.label}</div>

42
client/src/components/production-board-kanban/production-board-kanban-card.component.jsx
View File

@@ -11,13 +11,10 @@ import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
import dayjs from "../../utils/day";
import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
@@ -25,11 +22,25 @@ import { PiMicrosoftTeamsLogo } from "react-icons/pi";
const cardColor = (ssbuckets, totalHrs) => {
const bucket = ssbuckets.find((bucket) => bucket.gte <= totalHrs && (!bucket.lt || bucket.lt > totalHrs));
return bucket && bucket.color ? bucket.color.rgb || bucket.color : { r: 255, g: 255, b: 255 };
return bucket && bucket.color
? bucket.color.rgb || bucket.color
: {
r: 255,
g: 255,
b: 255,
a: 1,
fallback: "var(--card-bg-fallback)"
};
};
const getContrastYIQ = (bgColor) =>
(bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000 >= 128 ? "black" : "white";
const getContrastYIQ = (bgColor, isDarkMode = document.documentElement.getAttribute("data-theme") === "dark") => {
// Use fallback if bgColor is invalid
if (!bgColor || bgColor.fallback) return isDarkMode ? "var(--card-text-fallback)" : "black";
// Calculate luminance for contrast
const luminance = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;
// Adjust threshold for dark mode to ensure readable text
return luminance >= (isDarkMode ? 150 : 128) ? "black" : isDarkMode ? "var(--card-text-fallback)" : "white";
};
const findEmployeeById = (employees, id) => employees.find((e) => e.id === id);
@@ -44,6 +55,8 @@ const EllipsesToolTip = React.memo(({ title, children, kiosk }) => {
);
});
EllipsesToolTip.displayName = "EllipsesToolTip";
const OwnerNameToolTip = ({ metadata, cardSettings }) =>
cardSettings?.ownr_nm && (
<Col span={24}>
@@ -214,9 +227,8 @@ const EstimatorToolTip = ({ metadata, cardSettings }) => {
);
};
const SubtotalTooltip = ({ metadata, cardSettings, t }) => {
const SubtotalTooltip = ({ metadata, cardSettings }) => {
const dineroAmount = Dinero(metadata?.job_totals?.totals?.subtotal ?? Dinero()).toFormat();
return (
cardSettings?.subtotal && (
<Col span={cardSettings.compact ? 24 : 12}>
@@ -300,12 +312,10 @@ const TasksToolTip = ({ metadata, cardSettings, t }) =>
</Col>
);
export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings, clone }) {
export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings }) {
const { t } = useTranslation();
const { metadata } = card;
const employees = useMemo(() => bodyshop.employees, [bodyshop.employees]);
const { employee_body, employee_prep, employee_refinish, employee_csr } = useMemo(() => {
return {
employee_body: metadata?.employee_body && findEmployeeById(employees, metadata.employee_body),
@@ -314,7 +324,6 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
employee_csr: metadata?.employee_csr && findEmployeeById(employees, metadata.employee_csr)
};
}, [metadata, employees]);
const pastDueAlert = useMemo(() => {
if (!metadata?.scheduled_completion) return null;
const completionDate = dayjs(metadata.scheduled_completion);
@@ -322,16 +331,13 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
if (dayjs().add(1, "day").isSame(completionDate, "day")) return "production-completion-soon";
return null;
}, [metadata?.scheduled_completion]);
const totalHrs = useMemo(() => {
return metadata?.labhrs && metadata?.larhrs
? metadata.labhrs.aggregate.sum.mod_lb_hrs + metadata.larhrs.aggregate.sum.mod_lb_hrs
: 0;
}, [metadata?.labhrs, metadata?.larhrs]);
const bgColor = useMemo(() => cardColor(bodyshop.ssbuckets, totalHrs), [bodyshop.ssbuckets, totalHrs]);
const contrastYIQ = useMemo(() => getContrastYIQ(bgColor), [bgColor]);
const isBodyEmpty = useMemo(() => {
return !(
cardSettings?.ownr_nm ||
@@ -413,8 +419,10 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
className={`react-trello-card ${cardSettings.kiosk ? "kiosk-mode" : ""}`}
size="small"
style={{
backgroundColor: cardSettings?.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
color: cardSettings?.cardcolor && contrastYIQ
backgroundColor: cardSettings?.cardcolor
? bgColor.fallback || `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a || 1})`
: "var(--card-bg-fallback)",
color: cardSettings?.cardcolor ? contrastYIQ : "var(--card-text-fallback)"
}}
title={!isBodyEmpty ? headerContent : null}
extra={

21
client/src/components/production-board-kanban/production-board-kanban.styles.scss
View File

@@ -11,7 +11,7 @@
}
.share-to-teams-badge {
background-color: #cccccc;
background-color: var(--share-badge-bg);
border-radius: 50%;
width: 24px;
height: 24px;
@@ -23,7 +23,7 @@
.react-trello-column-header {
font-weight: bold;
cursor: pointer;
background-color: #d0d0d0;
background-color: var(--column-header-bg);
border-radius: 5px 5px 0 0;
}
@@ -31,13 +31,14 @@
background: transparent;
border: none;
}
.react-trello-footer {
background-color: #d0d0d0;
background-color: var(--footer-bg);
border-radius: 0 0 5px 5px;
}
.grid-item {
margin: 1px; // TODO: (Note) THis is where we set the margin for vertical
margin: 1px; // TODO: (Note) This is where we set the margin for vertical
}
.lane-title {
@@ -53,27 +54,33 @@
justify-content: center;
align-items: center;
position: relative;
.body-empty-container {
position: absolute;
right: 0;
}
.tech-container {
font-weight: bolder;
text-align: center;
flex: 1;
.branches-outlined {
color: orangered;
color: var(--tech-icon-color);
}
}
.inner-container {
display: flex;
align-items: center;
position: absolute;
left: 0;
.circle-outline {
color: orangered;
color: var(--tech-icon-color);
margin-left: 8px;
}
.iou-parent {
margin-left: 8px;
}
@@ -81,6 +88,6 @@
}
.clone.is-dragging .ant-card {
border: #1890ff 2px solid !important;
border: 2px solid var(--clone-border-color) !important;
border-radius: 12px;
}

28
client/src/components/production-board-kanban/trello-board/styles/Base.js
View File

@@ -58,7 +58,7 @@ export const StyleHorizontal = styled.div`
height: 100%;
min-height: 1px;
overflow-y: visible;
overflow-x: visible; // change this line
overflow-x: visible;
}
.react-trello-lane.lane-collapsed {
@@ -85,17 +85,17 @@ export const StyleHorizontal = styled.div`
.react-trello-card {
height: auto;
margin: 2px;
margin: 2px 0 2px;
}
.size-memory-wrapper {
display: flex; /* This makes it a flex container */
flex-direction: column; /* Aligns children vertically */
display: flex;
flex-direction: column;
}
.size-memory-wrapper .ant-card {
flex-grow: 1; /* Allows the card to expand to fill the available space */
width: 100%; /* Ensures the card stretches to fill the width of its parent */
flex-grow: 1;
width: 100%;
}
`;
@@ -131,7 +131,7 @@ export const StyleVertical = styled.div`
.grid-item {
display: flex;
width: ${(props) => props.gridItemWidth}; /* Use props to set width */
width: ${(props) => props.gridItemWidth};
align-content: stretch;
box-sizing: border-box;
}
@@ -148,13 +148,13 @@ export const StyleVertical = styled.div`
}
.size-memory-wrapper {
display: flex; /* This makes it a flex container */
flex-direction: column; /* Aligns children vertically */
display: flex;
flex-direction: column;
}
.size-memory-wrapper .ant-card {
flex-grow: 1; /* Allows the card to expand to fill the available space */
width: 100%; /* Ensures the card stretches to fill the width of its parent */
flex-grow: 1;
width: 100%;
}
.react-trello-lane .lane-collapsed {
@@ -163,7 +163,7 @@ export const StyleVertical = styled.div`
`;
export const BoardWrapper = styled.div`
color: #393939;
color: var(--board-text-color);
height: 100%;
overflow-x: auto;
overflow-y: hidden;
@@ -171,7 +171,7 @@ export const BoardWrapper = styled.div`
`;
export const Section = styled.section`
background-color: #e3e3e3;
background-color: var(--section-bg);
border-radius: 3px;
margin: 2px 2px;
height: 100%;
@@ -197,6 +197,6 @@ export const ScrollableLane = styled.div`
export const Detail = styled.div`
font-size: 12px;
color: #4d4d4d;
color: var(--detail-text-color);
white-space: pre-wrap;
`;

30
client/src/components/production-list-table/production-list-table.component.jsx
View File

@@ -28,7 +28,6 @@ const mapStateToProps = createStructuredSelector({
export function ProductionListTable({ loading, data, refetch, bodyshop, technician, currentUser }) {
const [searchText, setSearchText] = useState("");
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
const {
treatments: { Production_List_Status_Colors, Enhanced_Payroll }
} = useSplitTreatments({
@@ -36,10 +35,8 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
names: ["Production_List_Status_Colors", "Enhanced_Payroll"],
splitKey: bodyshop.imexshopid
});
const assoc = bodyshop.associations.find((a) => a.useremail === currentUser.email);
const defaultView = assoc && assoc.default_prod_list_view;
const initialStateRef = useRef(
(bodyshop.production_config &&
bodyshop.production_config.find((p) => p.name === defaultView)?.columns.tableState) ||
@@ -48,7 +45,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
filteredInfo: { text: "" }
}
);
const initialColumnsRef = useRef(
(initialStateRef.current &&
bodyshop?.production_config
@@ -69,12 +65,9 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
})) ||
[]
);
const [state, setState] = useState(initialStateRef.current);
const [columns, setColumns] = useState(initialColumnsRef.current);
const { t } = useTranslation();
const matchingColumnConfig = useMemo(() => {
return bodyshop?.production_config?.find((p) => p.name === defaultView);
}, [bodyshop.production_config, defaultView]);
@@ -95,7 +88,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
width: k.width ?? 100
};
}) || [];
// Only update columns if they haven't been manually changed by the user
if (_.isEqual(initialColumnsRef.current, columns)) {
setColumns(newColumns);
@@ -126,11 +118,9 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
const onDragEnd = (fromIndex, toIndex) => {
if (fromIndex === toIndex) return;
const columnsCopy = [...columns];
const [movedItem] = columnsCopy.splice(fromIndex, 1);
columnsCopy.splice(toIndex, 0, movedItem);
if (!_.isEqual(columnsCopy, columns)) {
setColumns(columnsCopy);
setHasUnsavedChanges(true);
@@ -140,7 +130,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
const removeColumn = (e) => {
const { key } = e;
const newColumns = columns.filter((i) => i.key !== key);
if (!_.isEqual(newColumns, columns)) {
setColumns(newColumns);
setHasUnsavedChanges(true);
@@ -155,7 +144,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
...nextColumns[index],
width: size.width
};
if (!_.isEqual(nextColumns, columns)) {
setColumns(nextColumns);
setHasUnsavedChanges(true);
@@ -180,7 +168,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
}
]
};
return (
<Dropdown className="prod-header-dropdown" menu={menu} trigger={["contextMenu"]}>
<span>{col.title}</span>
@@ -206,13 +193,12 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
item.v_model_desc,
item.v_make_desc
];
return fieldsToSearch.some((field) => (field || "").toString().toLowerCase().includes(searchText.toLowerCase()));
};
const dataSource = searchText === "" ? data : data.filter((j) => filterData(j, searchText));
if (!!!columns) return <div>No columns found.</div>;
if (!columns) return <div>No columns found.</div>;
const totalHrs = data
.reduce(
@@ -236,7 +222,8 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
onClick={resetChanges}
style={{
cursor: "pointer",
textDecoration: "underline"
textDecoration: "underline",
color: "var(--reset-link-color)"
}}
>
{t("general.actions.reset")}
@@ -269,7 +256,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
data={data}
onColumnAdd={addColumn}
/>
<ProductionListConfigManager
columns={columns}
setColumns={setColumns}
@@ -305,24 +291,22 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
{...(Production_List_Status_Colors.treatment === "on" && {
onRow: (record, index) => {
if (!bodyshop.md_ro_statuses.production_colors) return null;
const color = bodyshop.md_ro_statuses.production_colors.find((x) => x.status === record.status);
if (!color) {
if (index % 2 === 0)
return {
style: {
backgroundColor: `rgb(236, 236, 236)`
backgroundColor: "var(--table-row-even-bg)"
}
};
return null;
}
return {
className: "rowWithColor",
style: {
"--bgColor": `rgb(${color.color.r},${color.color.g},${color.color.b},${color.color.a})`
"--bgColor": color.color
? `rgba(${color.color.r},${color.color.g},${color.color.b},${color.color.a || 1})`
: "var(--status-row-bg-fallback)"
}
};
}

4
client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx
View File

@@ -212,6 +212,10 @@ export function ScheduleCalendarHeaderComponent({ bodyshop, label, refetch, date
return bodyshop.workingdays[day];
};
const blocked = isDayBlocked.length > 0;
const headerStyle = blocked ? { color: "#fff" } : { color: isShopOpen(date) ? "" : "tomato" };
const headerClass = `imex-calendar-header-card ${blocked ? "imex-calendar-header-card--blocked" : ""}`.trim();
return (
<div className="imex-calendar-load">
<ScheduleBlockDay alreadyBlocked={isDayBlocked.length > 0} date={date} refetch={refetch}>

39
client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss
View File

@@ -19,11 +19,42 @@
// }
.imex-event-arrived {
background-color: rgba(4, 141, 4, 0.4);
background-color: var(--event-arrived-bg);
}
.imex-event-block {
background-color: rgba(212, 2, 2, 0.6);
background-color: var(--event-block-bg);
}
/* Ensure readable text when fallback background is used */
.imex-event-fallback,
.imex-event-fallback .rbc-event-content,
.imex-event-fallback .rbc-event-label,
.imex-event-fallback a {
color: var(--card-text-fallback) !important;
}
/* Optional subtle border to distinguish on white backgrounds */
.imex-event-fallback {
border: 1px solid var(--bar-border-color);
}
/* Header day card styling */
.imex-calendar-header-card {
display: inline-block;
padding: 0.15rem 0.35rem;
border-radius: 0.25rem;
}
.imex-calendar-header-card--blocked {
background-color: var(--event-block-bg);
color: #ffffff;
}
.imex-calendar-header-card--blocked a,
.imex-calendar-header-card--blocked span,
.imex-calendar-header-card--blocked .ant-typography {
color: #ffffff;
}
.rbc-month-view {
@@ -31,12 +62,12 @@
}
.rbc-event.rbc-selected {
background-color: slategrey;
background-color: var(--event-selected-bg);
}
.imex-calendar-load {
max-width: 12rem;
position: relative;
left: 50%;
transform: translateX(-50%);
transform: translate(-50%);
}

51
client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
View File

@@ -36,16 +36,40 @@ export function ScheduleCalendarWrapperComponent({
const search = queryString.parse(useLocation().search);
const history = useNavigate();
const { t } = useTranslation();
// Determine current view to compute styles consistently
const currentView = search.view || defaultView || "week";
const handleEventPropStyles = (event, start, end, isSelected) => {
const hasColor = Boolean(event?.color?.hex || event?.color);
const useBg = currentView !== "agenda";
// Prioritize explicit blocked-day background to ensure red in all themes
let bg;
if (useBg) {
if (event?.block) {
bg = "var(--event-block-bg)";
} else if (hasColor) {
bg = event?.color?.hex ?? event?.color;
} else {
bg = "var(--event-bg-fallback)";
}
}
const usedFallback = !hasColor && !event?.block; // only mark as fallback when not blocked
const classes = [
"imex-event",
event.arrived && "imex-event-arrived",
event.block && "imex-event-block",
usedFallback && "imex-event-fallback"
]
.filter(Boolean)
.join(" ");
return {
...(event.color && !((search.view || defaultView) === "agenda")
? {
style: {
backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
}
}
: {}),
className: `${event.arrived ? "imex-event-arrived" : ""} ${event.block ? "imex-event-block" : ""}`
...(bg ? { style: { backgroundColor: bg } } : {}),
className: classes
};
};
@@ -60,7 +84,9 @@ export function ScheduleCalendarWrapperComponent({
<Collapse style={{ marginBottom: "5px" }}>
<Collapse.Panel
key="1"
header={<span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>}
header={
<span style={{ color: "var(--error-header-text)" }}>{t("appointments.labels.severalerrorsfound")}</span>
}
>
<Space direction="vertical" style={{ width: "100%" }}>
{problemJobs.map((problem) => (
@@ -70,7 +96,7 @@ export function ScheduleCalendarWrapperComponent({
message={
<Trans
i18nKey="appointments.labels.dataconsistency"
components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
components={[<Link key={problem.id} to={`/manage/jobs/${problem.id}`} target="_blank" />]}
values={{
ro_number: problem.ro_number,
code: problem.code
@@ -91,7 +117,7 @@ export function ScheduleCalendarWrapperComponent({
message={
<Trans
i18nKey="appointments.labels.dataconsistency"
components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
components={[<Link key={problem.id} to={`/manage/jobs/${problem.id}`} target="_blank" />]}
values={{
ro_number: problem.ro_number,
code: problem.code
@@ -102,12 +128,11 @@ export function ScheduleCalendarWrapperComponent({
))}
</Space>
))}
<Calendar
events={data}
defaultView={search.view || defaultView || "week"}
date={selectedDate}
onNavigate={(date, view, action) => {
onNavigate={(date) => {
search.date = date.toISOString().substr(0, 10);
history({ search: queryString.stringify(search) });
}}

4
client/src/components/schedule-calendar/schedule-calendar.component.jsx
View File

@@ -2,7 +2,7 @@ import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Checkbox, Col, Row, Select, Space } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import { t } from "i18next";
import React, { useMemo } from "react";
import { useMemo } from "react";
import useLocalStorage from "../../utils/useLocalStorage";
import ScheduleAtsSummary from "../schedule-ats-summary/schedule-ats-summary.component";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
@@ -18,7 +18,7 @@ import _ from "lodash";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
const mapDispatchToProps = () => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(ScheduleCalendarComponent);

4
client/src/components/schedule-calendar/schedule-calendar.container.jsx
View File

@@ -1,6 +1,6 @@
import { useQuery } from "@apollo/client";
import queryString from "query-string";
import React, { useEffect, useMemo } from "react";
import { useEffect, useMemo } from "react";
import { useLocation } from "react-router-dom";
import { QUERY_ALL_ACTIVE_APPOINTMENTS } from "../../graphql/appointments.queries";
import AlertComponent from "../alert/alert.component";
@@ -32,7 +32,7 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
startd: range.start,
endd: range.end
},
skip: !!!range.start || !!!range.end,
skip: !range.start || !range.end,
fetchPolicy: "network-only",
nextFetchPolicy: "network-only"
});

11
client/src/components/scoreboard-chart/chart-custom-tooltip.jsx
View File

@@ -5,26 +5,25 @@ const CustomTooltip = ({ active, payload, label }) => {
return (
<div
style={{
backgroundColor: "white",
border: "1px solid gray",
backgroundColor: "var(--tooltip-bg)",
border: "1px solid var(--tooltip-border)",
padding: "0.5rem"
}}
>
<p style={{ margin: "0" }}>{label}</p>
{payload.map((data, index) => {
const textColor = data.color || "var(--tooltip-text-fallback)";
if (data.dataKey === "sales" || data.dataKey === "accSales")
return (
<p style={{ margin: "10px 0", color: data.color }} key={index}>{`${data.name} : ${Dinero({
<p style={{ margin: "10px 0", color: textColor }} key={index}>{`${data.name} : ${Dinero({
amount: Math.round(data.value * 100)
}).toFormat()}`}</p>
);
return <p style={{ margin: "10px 0", color: data.color }} key={index}>{`${data.name} : ${data.value}`}</p>;
return <p style={{ margin: "10px 0", color: textColor }} key={index}>{`${data.name} : ${data.value}`}</p>;
})}
</div>
);
}
return null;
};

8
client/src/components/scoreboard-timetickets-stats/chart-custom-tooltip.jsx
View File

@@ -3,15 +3,16 @@ const CustomTooltip = ({ active, payload, label }) => {
return (
<div
style={{
backgroundColor: "white",
border: "1px solid gray",
backgroundColor: "var(--tooltip-bg)",
border: "1px solid var(--tooltip-border)",
padding: "0.5rem"
}}
>
<p style={{ margin: "0" }}>{label}</p>
{payload.map((data, index) => {
const textColor = data.color || "var(--tooltip-text-fallback)";
return (
<p style={{ margin: "10px 0", color: data.color }} key={index}>{`${
<p style={{ margin: "10px 0", color: textColor }} key={index}>{`${
data.name
} : ${data.value.toFixed(1)}`}</p>
);
@@ -19,7 +20,6 @@ const CustomTooltip = ({ active, payload, label }) => {
</div>
);
}
return null;
};

17
client/src/components/share-to-teams/share-to-teams.component.jsx
View File

@@ -41,7 +41,6 @@ const ShareToTeamsComponent = ({
}) => {
const location = useLocation();
const { t } = useTranslation();
const currentUrl =
urlOverride ||
encodeURIComponent(`${window.location.origin}${location.pathname}${location.search}${location.hash}`);
@@ -49,31 +48,24 @@ const ShareToTeamsComponent = ({
pageTitleOverride ||
encodeURIComponent(typeof document !== "undefined" ? document.title : t("general.actions.sharetoteams"));
const messageText = messageTextOverride || encodeURIComponent(t("general.actions.sharetoteams"));
// Construct the Teams share URL with parameters
const teamsShareUrl = `https://teams.microsoft.com/share?href=${currentUrl}&preText=${messageText}&title=${pageTitle}`;
// Function to open the centered share link in a new window/tab
const handleShare = () => {
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
const windowWidth = 600;
const windowHeight = 400;
const left = screenWidth / 2 - windowWidth / 2;
const top = screenHeight / 2 - windowHeight / 2;
const windowFeatures = `width=${windowWidth},height=${windowHeight},left=${left},top=${top}`;
// noinspection JSIgnoredPromiseFromCall
window.open(teamsShareUrl, "_blank", windowFeatures);
};
// Feature is disabled
if (!bodyshop?.md_functionality_toggles?.teams) {
return null;
}
if (noIcon) {
return (
<div style={{ cursor: "pointer", ...noIconStyle }} onClick={handleShare}>
@@ -81,16 +73,15 @@ const ShareToTeamsComponent = ({
</div>
);
}
return (
<Button
style={{
backgroundColor: "#6264A7",
borderColor: "#6264A7",
color: "#FFFFFF",
backgroundColor: "var(--teams-button-bg)",
borderColor: "var(--teams-button-border)",
color: "var(--teams-button-text)",
...buttonStyle
}}
icon={<PiMicrosoftTeamsLogo style={{ color: "#FFFFFF", ...buttonIconStyle }} />}
icon={<PiMicrosoftTeamsLogo style={{ color: "var(--teams-button-text)", ...buttonIconStyle }} />}
onClick={handleShare}
title={linkText === null ? t("general.actions.sharetoteams") : linkText}
/>

275
client/src/components/shop-info/shop-info.general.component.jsx
View File

@@ -145,14 +145,20 @@ export function ShopInfoGeneral({ form, bodyshop }) {
</Form.Item>
</LayoutFormRow>
<LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
{HasFeatureAccess({ featureName: "export", bodyshop }) && (
<>
<Form.Item label={t("bodyshop.labels.qbo")} valuePropName="checked" name={["accountingconfig", "qbo"]}>
{[
...(HasFeatureAccess({ featureName: "export", bodyshop })
? [
<Form.Item
key="qbo"
label={t("bodyshop.labels.qbo")}
valuePropName="checked"
name={["accountingconfig", "qbo"]}
>
<Switch />
</Form.Item>
{InstanceRenderManager({
</Form.Item>,
InstanceRenderManager({
imex: (
<Form.Item shouldUpdate noStyle>
<Form.Item key="qbo_usa_wrapper" shouldUpdate noStyle>
{() => (
<Form.Item
label={t("bodyshop.labels.qbo_usa")}
@@ -165,11 +171,16 @@ export function ShopInfoGeneral({ form, bodyshop }) {
)}
</Form.Item>
)
})}
<Form.Item label={t("bodyshop.labels.qbo_departmentid")} name={["accountingconfig", "qbo_departmentid"]}>
<Input />
</Form.Item>
}),
<Form.Item
key="qbo_departmentid"
label={t("bodyshop.labels.qbo_departmentid")}
name={["accountingconfig", "qbo_departmentid"]}
>
<Input />
</Form.Item>,
<Form.Item
key="accountingtiers"
label={t("bodyshop.labels.accountingtiers")}
rules={[
{
@@ -183,8 +194,8 @@ export function ShopInfoGeneral({ form, bodyshop }) {
<Radio value={2}>2</Radio>
<Radio value={3}>3</Radio>
</Radio.Group>
</Form.Item>
<Form.Item shouldUpdate>
</Form.Item>,
<Form.Item key="twotierpref_wrapper" shouldUpdate>
{() => {
return (
<Form.Item
@@ -205,24 +216,27 @@ export function ShopInfoGeneral({ form, bodyshop }) {
</Form.Item>
);
}}
</Form.Item>
</Form.Item>,
<Form.Item
key="printlater"
label={t("bodyshop.labels.printlater")}
valuePropName="checked"
name={["accountingconfig", "printlater"]}
>
<Switch />
</Form.Item>
</Form.Item>,
<Form.Item
key="emaillater"
label={t("bodyshop.labels.emaillater")}
valuePropName="checked"
name={["accountingconfig", "emaillater"]}
>
<Switch />
</Form.Item>
</>
)}
]
: []),
<Form.Item
key="inhousevendorid"
label={t("bodyshop.fields.inhousevendorid")}
name={"inhousevendorid"}
rules={[
@@ -233,8 +247,9 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<Input />
</Form.Item>
</Form.Item>,
<Form.Item
key="default_adjustment_rate"
label={t("bodyshop.fields.default_adjustment_rate")}
name={"default_adjustment_rate"}
rules={[
@@ -245,22 +260,23 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<InputNumber min={0} precision={2} />
</Form.Item>
{InstanceRenderManager({
</Form.Item>,
InstanceRenderManager({
imex: (
<Form.Item label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
<Form.Item key="federal_tax_id" label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
<Input />
</Form.Item>
)
})}
<Form.Item label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
}),
<Form.Item key="state_tax_id" label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
<Input />
</Form.Item>
{HasFeatureAccess({ featureName: "bills", bodyshop }) && (
<>
{InstanceRenderManager({
</Form.Item>,
...(HasFeatureAccess({ featureName: "bills", bodyshop })
? [
InstanceRenderManager({
imex: (
<Form.Item
key="invoice_federal_tax_rate"
label={t("bodyshop.fields.invoice_federal_tax_rate")}
name={["bill_tax_rates", "federal_tax_rate"]}
rules={[
@@ -273,8 +289,9 @@ export function ShopInfoGeneral({ form, bodyshop }) {
<InputNumber />
</Form.Item>
)
})}
}),
<Form.Item
key="invoice_state_tax_rate"
label={t("bodyshop.fields.invoice_state_tax_rate")}
name={["bill_tax_rates", "state_tax_rate"]}
rules={[
@@ -285,8 +302,9 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<InputNumber />
</Form.Item>
</Form.Item>,
<Form.Item
key="invoice_local_tax_rate"
label={t("bodyshop.fields.invoice_local_tax_rate")}
name={["bill_tax_rates", "local_tax_rate"]}
rules={[
@@ -298,9 +316,10 @@ export function ShopInfoGeneral({ form, bodyshop }) {
>
<InputNumber />
</Form.Item>
</>
)}
]
: []),
<Form.Item
key="md_payment_types"
name={["md_payment_types"]}
label={t("bodyshop.fields.md_payment_types")}
rules={[
@@ -312,8 +331,9 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<Select mode="tags" />
</Form.Item>
</Form.Item>,
<Form.Item
key="md_categories"
name={["md_categories"]}
label={t("bodyshop.fields.md_categories")}
rules={[
@@ -324,28 +344,32 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<Select mode="tags" />
</Form.Item>
{HasFeatureAccess({ featureName: "export", bodyshop }) && (
<>
</Form.Item>,
...(HasFeatureAccess({ featureName: "export", bodyshop })
? [
<Form.Item
key="ReceivableCustomField1"
name={["accountingconfig", "ReceivableCustomField1"]}
label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
>
{ReceivableCustomFieldSelect}
</Form.Item>
</Form.Item>,
<Form.Item
key="ReceivableCustomField2"
name={["accountingconfig", "ReceivableCustomField2"]}
label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
>
{ReceivableCustomFieldSelect}
</Form.Item>
</Form.Item>,
<Form.Item
key="ReceivableCustomField3"
name={["accountingconfig", "ReceivableCustomField3"]}
label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
>
{ReceivableCustomFieldSelect}
</Form.Item>
</Form.Item>,
<Form.Item
key="md_classes"
name={["md_classes"]}
label={t("bodyshop.fields.md_classes")}
rules={[
@@ -359,30 +383,51 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<Select mode="tags" />
</Form.Item>
<Form.Item name={["enforce_class"]} label={t("bodyshop.fields.enforce_class")} valuePropName="checked">
<Switch />
</Form.Item>
{ClosingPeriod.treatment === "on" && (
</Form.Item>,
<Form.Item
key="enforce_class"
name={["enforce_class"]}
label={t("bodyshop.fields.enforce_class")}
valuePropName="checked"
>
<Switch />
</Form.Item>,
...(ClosingPeriod.treatment === "on"
? [
<Form.Item
key="ClosingPeriod"
name={["accountingconfig", "ClosingPeriod"]}
label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
>
<DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
</Form.Item>
)}
{ADPPayroll.treatment === "on" && (
<Form.Item name={["accountingconfig", "companyCode"]} label={t("bodyshop.fields.companycode")}>
]
: []),
...(ADPPayroll.treatment === "on"
? [
<Form.Item
key="companyCode"
name={["accountingconfig", "companyCode"]}
label={t("bodyshop.fields.companycode")}
>
<Input />
</Form.Item>
)}
{ADPPayroll.treatment === "on" && (
<Form.Item name={["accountingconfig", "batchID"]} label={t("bodyshop.fields.batchid")}>
]
: []),
...(ADPPayroll.treatment === "on"
? [
<Form.Item
key="batchID"
name={["accountingconfig", "batchID"]}
label={t("bodyshop.fields.batchid")}
>
<Input />
</Form.Item>
)}
</>
)}
]
: [])
]
: [])
]}
</LayoutFormRow>
<FeatureWrapper featureName="scoreboard" noauth={() => null}>
<LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")} id="scoreboardsetup">
@@ -446,7 +491,9 @@ export function ShopInfoGeneral({ form, bodyshop }) {
</LayoutFormRow>
</FeatureWrapper>
<LayoutFormRow header={t("bodyshop.labels.systemsettings")} id="systemsettings">
{[
<Form.Item
key="md_referral_sources"
name={["md_referral_sources"]}
label={t("bodyshop.fields.md_referral_sources")}
rules={[
@@ -458,25 +505,33 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<Select mode="tags" />
</Form.Item>
<Form.Item name={["enforce_referral"]} label={t("bodyshop.fields.enforce_referral")} valuePropName="checked">
<Switch />
</Form.Item>
</Form.Item>,
<Form.Item
key="enforce_referral"
name={["enforce_referral"]}
label={t("bodyshop.fields.enforce_referral")}
valuePropName="checked"
>
<Switch />
</Form.Item>,
<Form.Item
key="enforce_conversion_csr"
name={["enforce_conversion_csr"]}
label={t("bodyshop.fields.enforce_conversion_csr")}
valuePropName="checked"
>
<Switch />
</Form.Item>
</Form.Item>,
<Form.Item
key="enforce_conversion_category"
name={["enforce_conversion_category"]}
label={t("bodyshop.fields.enforce_conversion_category")}
valuePropName="checked"
>
<Switch />
</Form.Item>
</Form.Item>,
<Form.Item
key="target_touchtime"
name={["target_touchtime"]}
label={t("bodyshop.fields.target_touchtime")}
rules={[
@@ -487,11 +542,12 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<InputNumber min={0.1} precision={1} />
</Form.Item>
<Form.Item label={t("bodyshop.fields.use_fippa")} name={["use_fippa"]} valuePropName="checked">
</Form.Item>,
<Form.Item key="use_fippa" label={t("bodyshop.fields.use_fippa")} name={["use_fippa"]} valuePropName="checked">
<Switch />
</Form.Item>
</Form.Item>,
<Form.Item
key="md_hour_split_prep"
label={t("bodyshop.fields.md_hour_split.prep")}
name={["md_hour_split", "prep"]}
dependencies={[["md_hour_split", "paint"]]}
@@ -510,8 +566,9 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<InputNumber min={0} max={1} precision={2} />
</Form.Item>
</Form.Item>,
<Form.Item
key="md_hour_split_paint"
label={t("bodyshop.fields.md_hour_split.paint")}
name={["md_hour_split", "paint"]}
dependencies={[["md_hour_split", "prep"]]}
@@ -530,28 +587,39 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<InputNumber min={0} max={1} precision={2} />
</Form.Item>
<Form.Item label={t("bodyshop.fields.jc_hourly_rates.mapa")} name={["jc_hourly_rates", "mapa"]}>
<CurrencyInput />
</Form.Item>
<Form.Item label={t("bodyshop.fields.jc_hourly_rates.mash")} name={["jc_hourly_rates", "mash"]}>
<CurrencyInput />
</Form.Item>
</Form.Item>,
<Form.Item
key="jc_hourly_rates_mapa"
label={t("bodyshop.fields.jc_hourly_rates.mapa")}
name={["jc_hourly_rates", "mapa"]}
>
<CurrencyInput />
</Form.Item>,
<Form.Item
key="jc_hourly_rates_mash"
label={t("bodyshop.fields.jc_hourly_rates.mash")}
name={["jc_hourly_rates", "mash"]}
>
<CurrencyInput />
</Form.Item>,
<Form.Item
key="use_paint_scale_data"
name={["use_paint_scale_data"]}
label={t("bodyshop.fields.use_paint_scale_data")}
valuePropName="checked"
>
<Switch />
</Form.Item>
</Form.Item>,
<Form.Item
key="attach_pdf_to_email"
name={["attach_pdf_to_email"]}
label={t("bodyshop.fields.attach_pdf_to_email")}
valuePropName="checked"
>
<Switch />
</Form.Item>
</Form.Item>,
<Form.Item
key="md_from_emails"
name={["md_from_emails"]}
label={t("bodyshop.fields.md_from_emails")}
// rules={[
@@ -562,8 +630,9 @@ export function ShopInfoGeneral({ form, bodyshop }) {
// ]}
>
<Select mode="tags" />
</Form.Item>
</Form.Item>,
<Form.Item
key="md_email_cc_parts_order"
name={["md_email_cc", "parts_order"]}
label={t("bodyshop.fields.md_email_cc", { template: "parts_orders" })}
rules={[
@@ -574,8 +643,9 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<Select mode="tags" />
</Form.Item>
</Form.Item>,
<Form.Item
key="md_email_cc_parts_return_slip"
name={["md_email_cc", "parts_return_slip"]}
label={t("bodyshop.fields.md_email_cc", { template: "parts_returns" })}
rules={[
@@ -586,34 +656,37 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<Select mode="tags" />
</Form.Item>
{HasFeatureAccess({ featureName: "timetickets", bodyshop }) && (
<>
</Form.Item>,
...(HasFeatureAccess({ featureName: "timetickets", bodyshop })
? [
<Form.Item
key="tt_allow_post_to_invoiced"
name={["tt_allow_post_to_invoiced"]}
label={t("bodyshop.fields.tt_allow_post_to_invoiced")}
valuePropName="checked"
>
<Switch />
</Form.Item>
</Form.Item>,
<Form.Item
key="tt_enforce_hours_for_tech_console"
name={["tt_enforce_hours_for_tech_console"]}
label={t("bodyshop.fields.tt_enforce_hours_for_tech_console")}
valuePropName="checked"
>
<Switch />
</Form.Item>
</Form.Item>,
<Form.Item
key="bill_allow_post_to_closed"
name={["bill_allow_post_to_closed"]}
label={t("bodyshop.fields.bill_allow_post_to_closed")}
valuePropName="checked"
>
<Switch />
</Form.Item>
</>
)}
]
: []),
<Form.Item
key="md_ded_notes"
name={["md_ded_notes"]}
label={t("bodyshop.fields.md_ded_notes")}
rules={[
@@ -624,33 +697,49 @@ export function ShopInfoGeneral({ form, bodyshop }) {
]}
>
<Select mode="tags" />
</Form.Item>
</Form.Item>,
<Form.Item
key="parts_queue_toggle"
label={t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
name={["md_functionality_toggles", "parts_queue_toggle"]}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item name={["last_name_first"]} label={t("bodyshop.fields.last_name_first")} valuePropName="checked">
<Switch />
</Form.Item>
</Form.Item>,
<Form.Item
key="last_name_first"
name={["last_name_first"]}
label={t("bodyshop.fields.last_name_first")}
valuePropName="checked"
>
<Switch />
</Form.Item>,
<Form.Item
key="uselocalmediaserver"
name={["uselocalmediaserver"]}
label={t("bodyshop.fields.uselocalmediaserver")}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item name={["localmediaserverhttp"]} label={t("bodyshop.fields.localmediaserverhttp")}>
<Input />
</Form.Item>
<Form.Item name={["localmediaservernetwork"]} label={t("bodyshop.fields.localmediaservernetwork")}>
<Input />
</Form.Item>
<Form.Item name={["localmediatoken"]} label={t("bodyshop.fields.localmediatoken")}>
</Form.Item>,
<Form.Item
key="localmediaserverhttp"
name={["localmediaserverhttp"]}
label={t("bodyshop.fields.localmediaserverhttp")}
>
<Input />
</Form.Item>,
<Form.Item
key="localmediaservernetwork"
name={["localmediaservernetwork"]}
label={t("bodyshop.fields.localmediaservernetwork")}
>
<Input />
</Form.Item>,
<Form.Item key="localmediatoken" name={["localmediatoken"]} label={t("bodyshop.fields.localmediatoken")}>
<Input />
</Form.Item>
]}
</LayoutFormRow>
<LayoutFormRow header={t("bodyshop.labels.shop_enabled_features")} id="sharing">
<Form.Item

8
client/src/components/shop-info/useFormDataPreservation.js
View File

@@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useCallback, useEffect } from "react";
import { HasFeatureAccess } from "./../feature-wrapper/feature-wrapper.component";
/**
@@ -24,7 +24,7 @@ export const useFormDataPreservation = (form, bodyshop, featureConfig) => {
parent[lastKey] = value;
};
const preserveHiddenFormData = () => {
const preserveHiddenFormData = useCallback(() => {
const preservationData = {};
let hasDataToPreserve = false;
@@ -51,7 +51,7 @@ export const useFormDataPreservation = (form, bodyshop, featureConfig) => {
if (hasDataToPreserve) {
form.setFieldsValue(preservationData);
}
};
}, [form, featureConfig, bodyshop]);
const getCompleteFormValues = () => {
const currentFormValues = form.getFieldsValue();
@@ -88,7 +88,7 @@ export const useFormDataPreservation = (form, bodyshop, featureConfig) => {
useEffect(() => {
preserveHiddenFormData();
}, [bodyshop]);
}, [bodyshop, preserveHiddenFormData]);
return { preserveHiddenFormData, getCompleteFormValues, createSubmissionHandler };
};

44
client/src/components/task-center/task-center.styles.scss
View File

@@ -4,9 +4,9 @@
right: 0;
width: 500px;
max-width: 500px;
background: #fff;
color: rgba(0, 0, 0, 0.85);
border: 1px solid #d9d9d9;
background: var(--task-bg);
color: var(--task-text);
border: 1px solid var(--task-border);
border-radius: 6px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
z-index: 1000;
@@ -19,11 +19,11 @@
.task-header {
padding: 4px 10px;
border-bottom: 1px solid #f0f0f0;
border-bottom: 1px solid var(--task-header-border);
display: flex;
justify-content: space-between;
align-items: center;
background: #fafafa;
background: var(--task-header-bg);
h3 {
font-size: 14px;
@@ -32,14 +32,14 @@
.create-task-button {
border: none;
color: white;
color: var(--task-button-text);
padding: 4px 12px;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
&:hover {
background-color: #40a9ff;
background-color: var(--task-button-hover-bg);
}
}
}
@@ -52,10 +52,9 @@
.section-title {
padding: 0px 10px;
margin: 0px;
//font-size: 12px;
background: #f5f5f5;
background: var(--task-section-bg);
font-weight: 650;
border-bottom: 1px solid #e8e8e8;
border-bottom: 1px solid var(--task-section-border);
position: sticky;
top: 0;
z-index: 1;
@@ -68,22 +67,21 @@
.task-row {
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
border-bottom: 1px solid var(--task-row-border);
display: flex;
justify-content: space-between;
align-items: flex-start;
&:hover {
background: #f5f5f5;
background: var(--task-row-hover-bg);
}
.task-title-cell {
flex: 1;
padding: 6px 8px;
vertical-align: top;
//font-size: 12px;
line-height: 1.2;
max-width: 350px; // or whatever fits your layout
max-width: 350px;
.task-title {
font-size: 16px;
@@ -91,44 +89,42 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%; // Or a specific width if you want more control
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
.task-ro-number {
margin-top: 20px;
color: #1677ff;
color: var(--task-ro-number);
}
}
.task-due-cell {
padding: 6px 8px;
vertical-align: top;
//font-size: 12px;
line-height: 1.2;
text-align: right;
white-space: nowrap;
color: rgba(0, 0, 0, 0.45);
color: var(--task-due-text);
}
}
button {
margin: 8px auto;
padding: 4px 10px;
background-color: #1677ff;
color: white;
background-color: var(--task-button-bg);
color: var(--task-button-text);
border: none;
border-radius: 4px;
//font-size: 12px;
cursor: pointer;
&:hover {
background-color: #4096ff;
background-color: var(--task-button-hover-bg);
}
&:disabled {
background-color: #d9d9d9;
background-color: var(--task-button-disabled-bg);
cursor: not-allowed;
}
}
@@ -137,7 +133,7 @@
.error-message {
padding: 16px;
text-align: center;
color: rgba(0, 0, 0, 0.45);
color: var(--task-message-text);
}
.loading-footer {

4
client/src/components/time-ticket-task-modal/time-ticket-task-modal.styles.scss
View File

@@ -6,7 +6,7 @@
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--table-border-color);
.ant-form-item {
margin-bottom: 0px !important;
@@ -14,6 +14,6 @@
}
tr:hover {
background-color: #f5f5f5;
background-color: var(--table-hover-bg);
}
}

15
client/src/components/upsell/upsell.component.jsx
View File

@@ -11,7 +11,7 @@ import {
} from "@ant-design/icons";
import { Button, Card, Result } from "antd";
import i18n from "i18next";
import React, { useEffect, useRef } from "react";
import { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { store } from "../../redux/store.js";
@@ -21,7 +21,6 @@ import "./upsell.styles.scss";
export default function UpsellComponent({ featureName, subFeatureName, upsell, disableMask }) {
const { t } = useTranslation();
const resultProps = upsell || upsellEnum[featureName][subFeatureName];
const componentRef = useRef(null);
useEffect(() => {
@@ -34,12 +33,10 @@ export default function UpsellComponent({ featureName, subFeatureName, upsell, d
mask.style.left = 0;
mask.style.width = "100%";
mask.style.height = "100%";
mask.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
mask.style.backgroundColor = "var(--mask-bg)";
// mask.style.zIndex = 9999;
parentElement.style.position = "relative";
parentElement.prepend(mask);
return () => {
parentElement.removeChild(mask);
};
@@ -47,18 +44,22 @@ export default function UpsellComponent({ featureName, subFeatureName, upsell, d
}, [disableMask]);
if (!resultProps) return <Result status="info" title={t("upsell.messages.generic")} />;
return (
<div ref={componentRef}>
<Result status="info" icon={<AppstoreAddOutlined />} {...resultProps} />
</div>
);
}
//Kept in the same function as the result props line must mirror and doesnt warrant a separate function.
export function UpsellMaskWrapper({ children, upsell, featureName, subFeatureName }) {
const resultProps = upsell || upsellEnum[featureName][subFeatureName];
return (
<div className="mask-wrapper">
<div className="mask-content">{children}</div>
<div className="mask-content" style={{ backgroundColor: "var(--mask-bg)" }}>
{children}
</div>
<div className="mask-overlay">
<Card size="small">
<Result status="info" icon={<AppstoreAddOutlined />} {...resultProps} />
@@ -71,7 +72,6 @@ export function UpsellMaskWrapper({ children, upsell, featureName, subFeatureNam
//This is kept in this function as pulling it out into it's own util/enum prevents passing JSX as an `extra` prop
export const upsellEnum = () => {
const { currentUser, bodyshop } = store.getState().user;
const [first_name, ...last_name] = currentUser?.displayName ? currentUser.displayName.split(" ") : [];
const LearnMoreLink = encodeURI(
InstanceRenderManager({
@@ -79,7 +79,6 @@ export const upsellEnum = () => {
rome: `https://forms.zohopublic.com/rometech/form/ROLearnMore/formperma/0G29z8LgLlvKK8nno-b7s-GHgNXwIFlrMeE0mC394L4?first_name=${first_name || ""}&last_name=${last_name.join(" ") || ""}&shop_name=${bodyshop?.shopname || ""}&email=${currentUser?.email || ""}&shop_phone=${bodyshop?.phone || ""}`
})
);
return {
bills: {
autoreconcile: {

34
client/src/components/upsell/upsell.styles.scss
View File

@@ -1,6 +1,5 @@
.mask-wrapper {
position: relative;
//Newly added
display: flex;
justify-content: center;
align-items: center;
@@ -8,12 +7,8 @@
}
.mask-content {
// filter: blur(5px);
background-color: rgba(0, 0, 0, 0.05);
background-color: var(--mask-content-bg);
pointer-events: none;
//Newly added
//width: 100%;
}
.mask-overlay {
@@ -22,35 +17,8 @@
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
// width: 100%
}
.mask-overlay .ant-card {
max-width: 100%;
}
// .mask-wrapper {
// position: relative;
// display: inline-block;
// }
// .mask-content {
// filter: blur(5px);
// pointer-events: none;
// }
// .mask-overlay {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// display: flex;
// justify-content: center;
// align-items: center;
// z-index: 10;
// }
// .mask-overlay .ant-card {
// max-width: 100%;
// }

10
client/src/firebase/firebase.utils.js
View File

@@ -4,6 +4,8 @@ import { getAuth, updatePassword, updateProfile } from "@firebase/auth";
import { getFirestore } from "@firebase/firestore";
import { getMessaging, getToken, onMessage } from "@firebase/messaging";
import { store } from "../redux/store";
import * as amplitude from '@amplitude/analytics-browser';
import posthog from 'posthog-js'
const config = JSON.parse(import.meta.env.VITE_APP_FIREBASE_CONFIG);
initializeApp(config);
@@ -71,6 +73,8 @@ onMessage(messaging, (payload) => {
});
export const logImEXEvent = (eventName, additionalParams, stateProp = null) => {
try {
const state = stateProp || store.getState();
const eventParams = {
shop: (state.user && state.user.bodyshop && state.user.bodyshop.shopname) || null,
@@ -92,4 +96,10 @@ export const logImEXEvent = (eventName, additionalParams, stateProp = null) => {
// eventParams
// );
logEvent(analytics, eventName, eventParams);
amplitude.track(eventName, eventParams);
posthog.capture(eventName, eventParams);
} finally {
//If it fails, just keep going.
}
};

9
client/src/index.jsx
View File

@@ -14,6 +14,8 @@ import { persistor, store } from "./redux/store";
import reportWebVitals from "./reportWebVitals";
import "./translations/i18n";
import "./utils/CleanAxios";
import * as amplitude from "@amplitude/analytics-browser";
import { PostHogProvider } from "posthog-js/react";
window.global ||= window;
@@ -23,10 +25,10 @@ registerSW({ immediate: true });
// Dinero.globalLocale = "en-CA";
Dinero.globalRoundingMode = "HALF_EVEN";
amplitude.init("6228a598e57cd66875cfd41604f1f891", {});
const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(createBrowserRouter);
const router = sentryCreateBrowserRouter(createRoutesFromElements(<Route path="*" element={<AppContainer />} />));
if (import.meta.env.DEV) {
let styles =
"font-weight: bold; font-size: 50px;color: red; 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) ";
@@ -37,7 +39,12 @@ function App() {
return (
<PersistGate loading={<LoadingSpinner message="Restoring your settings..." />} persistor={persistor}>
<Provider store={store}>
<PostHogProvider
apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY}
options={{ autocapture: false, capture_exceptions: true }}
>
<RouterProvider router={router} />
</PostHogProvider>
</Provider>
</PersistGate>
);

18
client/src/pages/csi/csi.container.page.jsx
View File

@@ -1,7 +1,7 @@
//import {useMutation, useQuery } from "@apollo/client";
import { Button, Form, Layout, Result, Typography } from "antd";
import axios from "axios";
import React, { useCallback, useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useParams } from "react-router-dom";
@@ -16,7 +16,8 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({});
const mapDispatchToProps = () => ({});
export default connect(mapStateToProps, mapDispatchToProps)(CsiContainerPage);
@@ -28,7 +29,6 @@ export function CsiContainerPage({ currentUser }) {
loading: false,
submitted: false
});
const { t } = useTranslation();
const getAxiosData = useCallback(async () => {
@@ -39,7 +39,6 @@ export function CsiContainerPage({ currentUser }) {
console.log("Unable to attach to crisp instance. ");
}
setSubmitting((prevSubmitting) => ({ ...prevSubmitting, loading: true }));
const response = await axios.post("/csi/lookup", {
surveyId
});
@@ -91,7 +90,7 @@ export function CsiContainerPage({ currentUser }) {
setSubmitting({ ...submitting, loading: true, submitting: true });
const result = await axios.post("/csi/submit", { surveyId, values });
console.log("result", result);
if (!!!result.errors && result.data.update_csi.affected_rows > 0) {
if (!result.errors && result.data.update_csi.affected_rows > 0) {
setSubmitting({ ...submitting, loading: false, submitted: true });
}
} catch (error) {
@@ -110,7 +109,7 @@ export function CsiContainerPage({ currentUser }) {
<Layout style={{ display: "flex", flexDirection: "column" }}>
<Layout.Content
style={{
backgroundColor: "#fff",
backgroundColor: "var(--content-bg)",
margin: "2em 4em",
padding: "2em",
overflowY: "auto",
@@ -139,7 +138,6 @@ export function CsiContainerPage({ currentUser }) {
relateddata: { bodyshop, job },
csiquestion: { config: csiquestions }
} = axiosResponse.csi_by_pk;
return (
<Layout style={{ display: "flex", flexDirection: "column" }}>
<div
@@ -184,13 +182,11 @@ export function CsiContainerPage({ currentUser }) {
})}
</Typography.Paragraph>
</div>
{submitting.error ? <AlertComponent message={submitting.error} type="error" /> : null}
{submitting.submitted ? (
<Layout.Content
style={{
backgroundColor: "#fff",
backgroundColor: "var(--content-bg)",
margin: "2em 4em",
padding: "2em",
overflowY: "auto"
@@ -201,7 +197,7 @@ export function CsiContainerPage({ currentUser }) {
) : (
<Layout.Content
style={{
backgroundColor: "#fff",
backgroundColor: "var(--content-bg)",
margin: "2em 4em",
padding: "2em",
overflowY: "auto"

1
client/src/pages/schedule/schedule.page.component.jsx
View File

@@ -1,4 +1,3 @@
import React from "react";
import ScheduleCalendarContainer from "../../components/schedule-calendar/schedule-calendar.container";
export default function SchedulePageComponent() {

2
client/src/pages/schedule/schedule.page.container.jsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";

2
client/src/pages/tech/tech.page.styles.scss
View File

@@ -1,7 +1,7 @@
.tech-content-container {
overflow-y: visible;
padding: 1rem;
background: #fff;
background: var(--tech-content-bg);
}
.tech-layout-container {

8
client/src/redux/application/application.actions.js
View File

@@ -77,3 +77,11 @@ export const setWssStatus = (status) => ({
type: ApplicationActionTypes.SET_WSS_STATUS,
payload: status
});
export const toggleDarkMode = () => ({
type: ApplicationActionTypes.TOGGLE_DARK_MODE
});
export const setDarkMode = (value) => ({
type: ApplicationActionTypes.SET_DARK_MODE,
payload: value
});

15
client/src/redux/application/application.reducer.js
View File

@@ -16,7 +16,8 @@ const INITIAL_STATE = {
},
jobReadOnly: false,
partnerVersion: null,
alerts: {}
alerts: {},
darkMode: false
};
const applicationReducer = (state = INITIAL_STATE, action) => {
@@ -104,6 +105,18 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
alerts: newAlertsMap
};
}
case ApplicationActionTypes.TOGGLE_DARK_MODE: {
const newDarkModeState = !state.darkMode;
return {
...state,
darkMode: newDarkModeState
};
}
case ApplicationActionTypes.SET_DARK_MODE:
return {
...state,
darkMode: action.payload
};
default:
return state;
}

73
client/src/redux/application/application.sagas.js
View File

@@ -6,6 +6,7 @@ import client from "../../utils/GraphQLClient";
import { CalculateLoad, CheckJobBucket } from "../../utils/SSSUtils";
import { scheduleLoadFailure, scheduleLoadSuccess, setProblemJobs } from "./application.actions";
import ApplicationActionTypes from "./application.types";
import { logImEXEvent } from "../../firebase/firebase.utils";
export function* onCalculateScheduleLoad() {
yield takeLatest(ApplicationActionTypes.CALCULATE_SCHEDULE_LOAD, calculateScheduleLoad);
@@ -106,17 +107,14 @@ export function* calculateScheduleLoad({ payload: end }) {
const AddJobForSchedulingCalc = !item.inproduction;
if (!!load[itemDate]) {
if (load[itemDate]) {
load[itemDate].allHoursIn =
(load[itemDate].allHoursIn || 0) +
item.labhrs.aggregate.sum.mod_lb_hrs +
item.larhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].allHoursInBody =
(load[itemDate].allHoursInBody || 0) +
item.labhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].allHoursInBody = (load[itemDate].allHoursInBody || 0) + item.labhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].allHoursInRefinish =
(load[itemDate].allHoursInRefinish || 0) +
item.larhrs.aggregate.sum.mod_lb_hrs;
(load[itemDate].allHoursInRefinish || 0) + item.larhrs.aggregate.sum.mod_lb_hrs;
//If the job hasn't already arrived, add it to the jobs in list.
// Make sure it also hasn't already been completed, or isn't an in and out job.
//This prevents the duplicate counting.
@@ -124,15 +122,9 @@ export function* calculateScheduleLoad({ payload: end }) {
if (AddJobForSchedulingCalc) {
load[itemDate].jobsIn.push(item);
load[itemDate].hoursIn =
(load[itemDate].hoursIn || 0) +
item.labhrs.aggregate.sum.mod_lb_hrs +
item.larhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].hoursInBody =
(load[itemDate].hoursInBody || 0) +
item.labhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].hoursInRefinish =
(load[itemDate].hoursInRefinish || 0) +
item.larhrs.aggregate.sum.mod_lb_hrs;
(load[itemDate].hoursIn || 0) + item.labhrs.aggregate.sum.mod_lb_hrs + item.larhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].hoursInBody = (load[itemDate].hoursInBody || 0) + item.labhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].hoursInRefinish = (load[itemDate].hoursInRefinish || 0) + item.larhrs.aggregate.sum.mod_lb_hrs;
}
} else {
load[itemDate] = {
@@ -140,21 +132,14 @@ export function* calculateScheduleLoad({ payload: end }) {
jobsIn: AddJobForSchedulingCalc ? [item] : [], //Same as above, only add it if it isn't already in production.
jobsOut: [],
allJobsOut: [],
allHoursIn:
item.labhrs.aggregate.sum.mod_lb_hrs +
item.larhrs.aggregate.sum.mod_lb_hrs,
allHoursIn: item.labhrs.aggregate.sum.mod_lb_hrs + item.larhrs.aggregate.sum.mod_lb_hrs,
allHoursInBody: item.labhrs.aggregate.sum.mod_lb_hrs,
allHoursInRefinish: item.larhrs.aggregate.sum.mod_lb_hrs,
hoursIn: AddJobForSchedulingCalc
? item.labhrs.aggregate.sum.mod_lb_hrs +
item.larhrs.aggregate.sum.mod_lb_hrs
: 0,
hoursInBody: AddJobForSchedulingCalc
? item.labhrs.aggregate.sum.mod_lb_hrs
: 0,
hoursInRefinish: AddJobForSchedulingCalc
? item.larhrs.aggregate.sum.mod_lb_hrs
? item.labhrs.aggregate.sum.mod_lb_hrs + item.larhrs.aggregate.sum.mod_lb_hrs
: 0,
hoursInBody: AddJobForSchedulingCalc ? item.labhrs.aggregate.sum.mod_lb_hrs : 0,
hoursInRefinish: AddJobForSchedulingCalc ? item.larhrs.aggregate.sum.mod_lb_hrs : 0
};
}
});
@@ -170,17 +155,14 @@ export function* calculateScheduleLoad({ payload: end }) {
const itemDate = dayjs(item.actual_completion || item.scheduled_completion).format("YYYY-MM-DD");
//Skip it, it's already completed.
if (!!load[itemDate]) {
if (load[itemDate]) {
load[itemDate].allHoursOut =
(load[itemDate].allHoursOut || 0) +
item.labhrs.aggregate.sum.mod_lb_hrs +
item.larhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].allHoursOutBody =
(load[itemDate].allHoursOutBody || 0) +
item.labhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].allHoursOutBody = (load[itemDate].allHoursOutBody || 0) + item.labhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].allHoursOutRefinish =
(load[itemDate].allHoursOutRefinish || 0) +
item.larhrs.aggregate.sum.mod_lb_hrs;
(load[itemDate].allHoursOutRefinish || 0) + item.larhrs.aggregate.sum.mod_lb_hrs;
//Add only the jobs that are still in production to get rid of.
//If it's not in production, we'd subtract unnecessarily.
load[itemDate].allJobsOut.push(item);
@@ -191,12 +173,9 @@ export function* calculateScheduleLoad({ payload: end }) {
(load[itemDate].hoursOut || 0) +
item.labhrs.aggregate.sum.mod_lb_hrs +
item.larhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].hoursOutBody =
(load[itemDate].hoursOutBody || 0) +
item.labhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].hoursOutBody = (load[itemDate].hoursOutBody || 0) + item.labhrs.aggregate.sum.mod_lb_hrs;
load[itemDate].hoursOutRefinish =
(load[itemDate].hoursOutRefinish || 0) +
item.larhrs.aggregate.sum.mod_lb_hrs;
(load[itemDate].hoursOutRefinish || 0) + item.larhrs.aggregate.sum.mod_lb_hrs;
}
} else {
load[itemDate] = {
@@ -205,11 +184,9 @@ export function* calculateScheduleLoad({ payload: end }) {
hoursOut: AddJobForSchedulingCalc
? item.labhrs.aggregate.sum.mod_lb_hrs + item.larhrs.aggregate.sum.mod_lb_hrs
: 0,
allHoursOut:
item.labhrs.aggregate.sum.mod_lb_hrs +
item.larhrs.aggregate.sum.mod_lb_hrs,
allHoursOut: item.labhrs.aggregate.sum.mod_lb_hrs + item.larhrs.aggregate.sum.mod_lb_hrs,
allHoursOutBody: item.labhrs.aggregate.sum.mod_lb_hrs,
allHoursOutRefinish: item.larhrs.aggregate.sum.mod_lb_hrs,
allHoursOutRefinish: item.larhrs.aggregate.sum.mod_lb_hrs
};
}
});
@@ -222,7 +199,7 @@ export function* calculateScheduleLoad({ payload: end }) {
const prev = dayjs(today)
.add(day - 1, "day")
.format("YYYY-MM-DD");
if (!!!load[current]) {
if (!load[current]) {
load[current] = {};
}
@@ -298,6 +275,14 @@ export function* insertAuditTrailSaga({ payload: { jobid, billid, operation, typ
});
}
export function* applicationSagas() {
yield all([call(onCalculateScheduleLoad), call(onInsertAuditTrail)]);
export function* onToggleDarkMode() {
yield takeLatest(ApplicationActionTypes.TOGGLE_DARK_MODE, function* () {
const state = yield select();
const darkMode = state.application.darkMode;
logImEXEvent("dark_mode_toggled", { darkMode });
});
}
export function* applicationSagas() {
yield all([call(onCalculateScheduleLoad), call(onInsertAuditTrail), call(onToggleDarkMode)]);
}

1
client/src/redux/application/application.selectors.js
View File

@@ -24,3 +24,4 @@ export const selectProblemJobs = createSelector([selectApplication], (applicatio
export const selectUpdateAvailable = createSelector([selectApplication], (application) => application.updateAvailable);
export const selectWssStatus = createSelector([selectApplication], (application) => application.wssStatus);
export const selectAlerts = createSelector([selectApplication], (application) => application.alerts);
export const selectDarkMode = createSelector([selectApplication], (application) => application.darkMode);

4
client/src/redux/application/application.types.js
View File

@@ -14,6 +14,8 @@ const ApplicationActionTypes = {
SET_PROBLEM_JOBS: "SET_PROBLEM_JOBS",
SET_UPDATE_AVAILABLE: "SET_UPDATE_AVAILABLE",
SET_WSS_STATUS: "SET_WSS_STATUS",
ADD_ALERTS: "ADD_ALERTS"
ADD_ALERTS: "ADD_ALERTS",
TOGGLE_DARK_MODE: "TOGGLE_DARK_MODE",
SET_DARK_MODE: "SET_DARK_MODE"
};
export default ApplicationActionTypes;

14
client/src/redux/user/user.sagas.js
View File

@@ -48,6 +48,8 @@ import {
validatePasswordResetSuccess
} from "./user.actions";
import UserActionTypes from "./user.types";
import * as amplitude from "@amplitude/analytics-browser";
import posthog from "posthog-js";
const fpPromise = FingerprintJS.load();
@@ -82,8 +84,6 @@ export function* onCheckUserSession() {
export function* isUserAuthenticated() {
try {
logImEXEvent("redux_auth_check");
const user = yield getCurrentUser();
if (!user) {
yield put(unauthorizedUser());
@@ -91,6 +91,8 @@ export function* isUserAuthenticated() {
}
LogRocket.identify(user.email);
amplitude.setUserId(user.email);
posthog.identify(user.email);
const eulaQuery = yield client.query({
query: QUERY_EULA,
@@ -136,7 +138,8 @@ export function* signOutStart() {
imexshopid: state.user.bodyshop.imexshopid,
type: "messaging"
});
} catch (error) {
amplitude.reset();
} catch {
console.log("No FCM token. Skipping unsubscribe.");
}
@@ -161,7 +164,7 @@ export function* updateUserDetails(userDetails) {
type: "success",
message: i18next.t("profile.successes.updated")
});
} catch (error) {
} catch {
//yield put(signOutFailure(error.message));
}
}
@@ -268,7 +271,7 @@ export function* signInSuccessSaga({ payload }) {
setUserId(analytics, payload.email);
setUserProperties(analytics, payload);
yield logImEXEvent("redux_sign_in_success");
yield;
}
export function* onSendPasswordResetStart() {
@@ -335,6 +338,7 @@ export function* SetAuthLevelFromShopDetails({ payload }) {
}
try {
amplitude.setGroup("Shop", payload.shopname);
window.$crisp.push(["set", "user:company", [payload.shopname]]);
window.$crisp.push(["set", "session:segments", [[`region:${payload.region_config}`]]]);
if (authRecord[0] && authRecord[0].user.validemail) {

8
client/src/translations/en_us/common.json
View File

@@ -1456,9 +1456,9 @@
},
"notifications": {
"error": {
"description": "Please try again. Make sure the refund amount does not exceeds the payment amount.",
"description": "An error has occurred processing the refund: {{message}}",
"openingip": "Error connecting to IntelliPay service.",
"title": "Error placing refund"
"title": "Error issuing refund"
}
},
"titles": {
@@ -3782,7 +3782,9 @@
"actions": {
"changepassword": "Change Password",
"signout": "Sign Out",
"updateprofile": "Update Profile"
"updateprofile": "Update Profile",
"light_theme": "Switch to Light Theme",
"dark_theme": "Switch to Dark Theme"
},
"errors": {
"updating": "Error updating user or association {{message}}"

4
client/src/translations/es/common.json
View File

@@ -3782,7 +3782,9 @@
"actions": {
"changepassword": "",
"signout": "desconectar",
"updateprofile": "Actualización del perfil"
"updateprofile": "Actualización del perfil",
"light_theme": "",
"dark_theme": ""
},
"errors": {
"updating": ""

4
client/src/translations/fr/common.json
View File

@@ -3782,7 +3782,9 @@
"actions": {
"changepassword": "",
"signout": "Déconnexion",
"updateprofile": "Mettre à jour le profil"
"updateprofile": "Mettre à jour le profil",
"light_theme": "",
"dark_theme": ""
},
"errors": {
"updating": ""

31
server/accounting/qbo/qbo-payments.js
View File

@@ -10,7 +10,6 @@ const queries = require("../../graphql-client/queries");
const { refresh: refreshOauthToken, setNewRefreshToken } = require("./qbo-callback");
const OAuthClient = require("intuit-oauth");
const moment = require("moment-timezone");
const GraphQLClient = require("graphql-request").GraphQLClient;
const {
QueryInsuranceCo,
InsertInsuranceCo,
@@ -28,7 +27,7 @@ exports.default = async (req, res) => {
clientId: process.env.QBO_CLIENT_ID,
clientSecret: process.env.QBO_SECRET,
environment: process.env.NODE_ENV === "production" ? "production" : "sandbox",
redirectUri: process.env.QBO_REDIRECT_URI,
redirectUri: process.env.QBO_REDIRECT_URI
});
try {
//Fetch the API Access Tokens & Set them for the session.
@@ -131,9 +130,7 @@ exports.default = async (req, res) => {
// //No error. Mark the payment exported & insert export log.
if (elgen) {
const result = await client
.setHeaders({ Authorization: BearerToken })
.request(queries.QBO_MARK_PAYMENT_EXPORTED, {
await client.setHeaders({ Authorization: BearerToken }).request(queries.QBO_MARK_PAYMENT_EXPORTED, {
paymentId: payment.id,
payment: {
exportedat: moment().tz(bodyshop.timezone)
@@ -156,7 +153,7 @@ exports.default = async (req, res) => {
});
//Add the export log error.
if (elgen) {
const result = await client.setHeaders({ Authorization: BearerToken }).request(queries.INSERT_EXPORT_LOG, {
await client.setHeaders({ Authorization: BearerToken }).request(queries.INSERT_EXPORT_LOG, {
logs: [
{
bodyshopid: bodyshop.id,
@@ -190,7 +187,7 @@ exports.default = async (req, res) => {
}
};
async function InsertPayment(oauthClient, qbo_realmId, req, payment, parentRef, bodyshop) {
async function InsertPayment(oauthClient, qbo_realmId, req, payment, parentRef) {
const { paymentMethods, invoices } = await QueryMetaData(
oauthClient,
qbo_realmId,
@@ -263,7 +260,7 @@ async function InsertPayment(oauthClient, qbo_realmId, req, payment, parentRef,
status: result.response?.status,
bodyshopid: payment.job.shopid,
email: req.user.email
})
});
setNewRefreshToken(req.user.email, result);
return result && result.Bill;
} catch (error) {
@@ -291,7 +288,7 @@ async function QueryMetaData(oauthClient, qbo_realmId, req, ro_number, isCreditM
status: invoice.response?.status,
bodyshopid,
email: req.user.email
})
});
const paymentMethods = await oauthClient.makeApiCall({
url: urlBuilder(qbo_realmId, "query", `select * From PaymentMethod`),
method: "POST",
@@ -306,7 +303,7 @@ async function QueryMetaData(oauthClient, qbo_realmId, req, ro_number, isCreditM
status: paymentMethods.response?.status,
bodyshopid,
email: req.user.email
})
});
setNewRefreshToken(req.user.email, paymentMethods);
// const classes = await oauthClient.makeApiCall({
@@ -358,7 +355,7 @@ async function QueryMetaData(oauthClient, qbo_realmId, req, ro_number, isCreditM
status: taxCodes.response?.status,
bodyshopid,
email: req.user.email
})
});
const items = await oauthClient.makeApiCall({
url: urlBuilder(qbo_realmId, "query", `select * From Item`),
method: "POST",
@@ -373,7 +370,7 @@ async function QueryMetaData(oauthClient, qbo_realmId, req, ro_number, isCreditM
status: items.response?.status,
bodyshopid,
email: req.user.email
})
});
setNewRefreshToken(req.user.email, items);
const itemMapping = {};
@@ -412,8 +409,8 @@ async function QueryMetaData(oauthClient, qbo_realmId, req, ro_number, isCreditM
};
}
async function InsertCreditMemo(oauthClient, qbo_realmId, req, payment, parentRef, bodyshop) {
const { paymentMethods, invoices, items, taxCodes } = await QueryMetaData(
async function InsertCreditMemo(oauthClient, qbo_realmId, req, payment, parentRef) {
const { invoices, items, taxCodes } = await QueryMetaData(
oauthClient,
qbo_realmId,
req,
@@ -483,12 +480,14 @@ async function InsertCreditMemo(oauthClient, qbo_realmId, req, payment, parentRe
status: result.response?.status,
bodyshopid: req.user.bodyshopid,
email: req.user.email
})
});
setNewRefreshToken(req.user.email, result);
return result && result.Bill;
} catch (error) {
logger.log("qbo-payables-error", "DEBUG", req.user.email, payment.id, {
error: error && error.message,
error: error,
validationError: JSON.stringify(error?.response?.data),
accountmeta: JSON.stringify({ items, taxCodes }),
method: "InsertCreditMemo"
});
throw error;

12
server/data/autohouse.js
View File

@@ -3,7 +3,6 @@ const queries = require("../graphql-client/queries");
const Dinero = require("dinero.js");
const moment = require("moment-timezone");
var builder = require("xmlbuilder2");
const _ = require("lodash");
const logger = require("../utils/logger");
const fs = require("fs");
require("dotenv").config({
@@ -16,6 +15,7 @@ const { sendServerEmail } = require("../email/sendemail");
const AHDineroFormat = "0.00";
const AhDateFormat = "MMDDYYYY";
const NON_ASCII_REGEX = /[^\x20-\x7E]/g;
const repairOpCodes = ["OP4", "OP9", "OP10"];
const replaceOpCodes = ["OP2", "OP5", "OP11", "OP12"];
@@ -37,13 +37,11 @@ const ftpSetup = {
exports.default = async (req, res) => {
// Only process if in production environment.
if (process.env.NODE_ENV !== "production") {
res.sendStatus(403);
return;
return res.sendStatus(403);
}
// Only process if the appropriate token is provided.
if (req.headers["x-imex-auth"] !== process.env.AUTOHOUSE_AUTH_TOKEN) {
res.sendStatus(401);
return;
return res.sendStatus(401);
}
// Send immediate response and continue processing.
@@ -822,7 +820,7 @@ const GenerateDetailLines = (job, line, statuses) => {
BackOrdered: line.status === statuses.default_bo ? "1" : "0",
Cost: (line.billlines[0] && (line.billlines[0].actual_cost * line.billlines[0].quantity).toFixed(2)) || 0,
//Critical: null,
Description: line.line_desc ? line.line_desc.replace(/[^\x00-\x7F]/g, "") : "",
Description: line.line_desc ? line.line_desc.replace(NON_ASCII_REGEX, "") : "",
DiscountMarkup: line.prt_dsmk_m || 0,
InvoiceNumber: line.billlines[0] && line.billlines[0].bill.invoice_number,
IOUPart: 0,
@@ -834,7 +832,7 @@ const GenerateDetailLines = (job, line, statuses) => {
OriginalCost: null,
OriginalInvoiceNumber: null,
PriceEach: line.act_price || 0,
PartNumber: line.oem_partno ? line.oem_partno.replace(/[^\x00-\x7F]/g, "") : "",
PartNumber: line.oem_partno ? line.oem_partno.replace(NON_ASCII_REGEX, "") : "",
ProfitPercent: null,
PurchaseOrderNumber: null,
Qty: line.part_qty || 0,

408
server/data/carfax.js Normal file
View File

@@ -0,0 +1,408 @@
const path = require("path");
const queries = require("../graphql-client/queries");
const Dinero = require("dinero.js");
const moment = require("moment-timezone");
const logger = require("../utils/logger");
const InstanceManager = require("../utils/instanceMgr").default;
const { isString, isEmpty } = require("lodash");
const fs = require("fs");
const client = require("../graphql-client/graphql-client").client;
const { sendServerEmail } = require("../email/sendemail");
const { uploadFileToS3 } = require("../utils/s3");
const crypto = require("crypto");
require("dotenv").config({
path: path.resolve(process.cwd(), `.env.${process.env.NODE_ENV || "development"}`)
});
let Client = require("ssh2-sftp-client");
const AHDateFormat = "YYYY-MM-DD";
const NON_ASCII_REGEX = /[^\x20-\x7E]/g;
const ftpSetup = {
host: process.env.CARFAX_HOST,
port: process.env.CARFAX_PORT,
username: process.env.CARFAX_USER,
password: process.env.CARFAX_PASSWORD,
debug:
process.env.NODE_ENV !== "production"
? (message, ...data) => logger.log(message, "DEBUG", "api", null, data)
: () => {},
algorithms: {
serverHostKey: ["ssh-rsa", "ssh-dss", "rsa-sha2-256", "rsa-sha2-512", "ecdsa-sha2-nistp256", "ecdsa-sha2-nistp384"]
}
};
const S3_BUCKET_NAME = InstanceManager({
imex: "imex-carfax-uploads",
rome: "rome-carfax-uploads"
});
const region = InstanceManager.InstanceRegion;
const isLocal = isString(process.env?.LOCALSTACK_HOSTNAME) && !isEmpty(process.env?.LOCALSTACK_HOSTNAME);
const uploadToS3 = (jsonObj) => {
const webPath = isLocal
? `https://${S3_BUCKET_NAME}.s3.localhost.localstack.cloud:4566/${jsonObj.filename}`
: `https://${S3_BUCKET_NAME}.s3.${region}.amazonaws.com/${jsonObj.filename}`;
uploadFileToS3({ bucketName: S3_BUCKET_NAME, key: jsonObj.filename, content: jsonObj.json })
.then(() => {
logger.log("CARFAX-s3-upload", "DEBUG", "api", jsonObj.bodyshopid, {
imexshopid: jsonObj.imexshopid,
filename: jsonObj.filename,
webPath
});
})
.catch((error) => {
logger.log("CARFAX-s3-upload-error", "ERROR", "api", jsonObj.bodyshopid, {
imexshopid: jsonObj.imexshopid,
filename: jsonObj.filename,
webPath,
error: error.message,
stack: error.stack
});
});
};
exports.default = async (req, res) => {
// Only process if in production environment.
if (process.env.NODE_ENV !== "production") {
return res.sendStatus(403);
}
// Only process if the appropriate token is provided.
if (req.headers["x-imex-auth"] !== process.env.AUTOHOUSE_AUTH_TOKEN) {
return res.sendStatus(401);
}
// Send immediate response and continue processing.
res.status(202).json({
success: true,
message: "Processing request ...",
timestamp: new Date().toISOString()
});
try {
logger.log("CARFAX-start", "DEBUG", "api", null, null);
const allXMLResults = [];
const allErrors = [];
const { bodyshops } = await client.request(queries.GET_CARFAX_SHOPS); //Query for the List of Bodyshop Clients.
const specificShopIds = req.body.bodyshopIds; // ['uuid];
const { start, end, skipUpload, ignoreDateFilter } = req.body; //YYYY-MM-DD
const shopsToProcess =
specificShopIds?.length > 0 ? bodyshops.filter((shop) => specificShopIds.includes(shop.id)) : bodyshops;
logger.log("CARFAX-shopsToProcess-generated", "DEBUG", "api", null, null);
if (shopsToProcess.length === 0) {
logger.log("CARFAX-shopsToProcess-empty", "DEBUG", "api", null, null);
return;
}
await processShopData(shopsToProcess, start, end, skipUpload, ignoreDateFilter, allXMLResults, allErrors);
await sendServerEmail({
subject: `CARFAX Report ${moment().format("MM-DD-YY")}`,
text: `Errors:\n${JSON.stringify(allErrors, null, 2)}\n\nUploaded:\n${JSON.stringify(
allXMLResults.map((x) => ({
imexshopid: x.imexshopid,
filename: x.filename,
count: x.count,
result: x.result
})),
null,
2
)}`
});
logger.log("CARFAX-end", "DEBUG", "api", null, null);
} catch (error) {
logger.log("CARFAX-error", "ERROR", "api", null, { error: error.message, stack: error.stack });
}
};
async function processShopData(shopsToProcess, start, end, skipUpload, ignoreDateFilter, allXMLResults, allErrors) {
for (const bodyshop of shopsToProcess) {
const shopid = bodyshop.imexshopid?.toLowerCase() || bodyshop.shopname.replace(/[^a-zA-Z0-9]/g, "").toLowerCase()
const erroredJobs = [];
try {
logger.log("CARFAX-start-shop-extract", "DEBUG", "api", bodyshop.id, {
shopname: bodyshop.shopname
});
const { jobs, bodyshops_by_pk } = await client.request(queries.CARFAX_QUERY, {
bodyshopid: bodyshop.id,
...(ignoreDateFilter
? {}
: {
start: start ? moment(start).startOf("day") : moment().subtract(7, "days").startOf("day"),
...(end && { end: moment(end).endOf("day") })
})
});
const carfaxObject = {
shopid: shopid,
shop_name: bodyshop.shopname,
job: jobs.map((j) =>
CreateRepairOrderTag({ ...j, bodyshop: bodyshops_by_pk }, function ({ job, error }) {
erroredJobs.push({ job: job, error: error.toString() });
})
)
};
if (erroredJobs.length > 0) {
logger.log("CARFAX-failed-jobs", "ERROR", "api", bodyshop.id, {
count: erroredJobs.length,
jobs: JSON.stringify(erroredJobs.map((j) => j.job.ro_number))
});
}
const jsonObj = {
bodyshopid: bodyshop.id,
imexshopid: shopid,
json: JSON.stringify(carfaxObject, null, 2),
filename: `${shopid}_${moment().format("DDMMYYYY_HHMMss")}.json`,
count: carfaxObject.job.length
};
if (skipUpload) {
fs.writeFileSync(`./logs/${jsonObj.filename}`, jsonObj.json);
} else {
await uploadViaSFTP(jsonObj);
}
allXMLResults.push({
bodyshopid: bodyshop.id,
imexshopid: shopid,
count: jsonObj.count,
filename: jsonObj.filename,
result: jsonObj.result
});
logger.log("CARFAX-end-shop-extract", "DEBUG", "api", bodyshop.id, {
shopname: bodyshop.shopname
});
} catch (error) {
//Error at the shop level.
logger.log("CARFAX-error-shop", "ERROR", "api", bodyshop.id, { error: error.message, stack: error.stack });
allErrors.push({
bodyshopid: bodyshop.id,
imexshopid: shopid,
CARFAXid: bodyshop.CARFAXid,
fatal: true,
errors: [error.toString()]
});
} finally {
allErrors.push({
bodyshopid: bodyshop.id,
imexshopid: shopid,
CARFAXid: bodyshop.CARFAXid,
errors: erroredJobs.map((ej) => ({
ro_number: ej.job?.ro_number,
jobid: ej.job?.id,
error: ej.error
}))
});
}
}
}
async function uploadViaSFTP(jsonObj) {
const sftp = new Client();
sftp.on("error", (errors) =>
logger.log("CARFAX-sftp-connection-error", "ERROR", "api", jsonObj.bodyshopid, {
error: errors.message,
stack: errors.stack
})
);
try {
// Upload to S3 first.
uploadToS3(jsonObj);
//Connect to the FTP and upload all.
await sftp.connect(ftpSetup);
try {
jsonObj.result = await sftp.put(Buffer.from(jsonObj.json), `${jsonObj.filename}`);
logger.log("CARFAX-sftp-upload", "DEBUG", "api", jsonObj.bodyshopid, {
imexshopid: jsonObj.imexshopid,
filename: jsonObj.filename,
result: jsonObj.result
});
} catch (error) {
logger.log("CARFAX-sftp-upload-error", "ERROR", "api", jsonObj.bodyshopid, {
filename: jsonObj.filename,
error: error.message,
stack: error.stack
});
throw error;
}
} catch (error) {
logger.log("CARFAX-sftp-error", "ERROR", "api", jsonObj.bodyshopid, { error: error.message, stack: error.stack });
throw error;
} finally {
sftp.end();
}
}
const CreateRepairOrderTag = (job, errorCallback) => {
if (!job.job_totals) {
errorCallback({
jobid: job.id,
job: job,
ro_number: job.ro_number,
error: { toString: () => "No job totals for RO." }
});
return {};
}
try {
const ret = {
ro_number: crypto.createHash("md5").update(job.ro_number, "utf8").digest("hex"),
v_vin: job.v_vin || "",
v_year: job.v_model_yr
? parseInt(job.v_model_yr.match(/\d/g))
? parseInt(job.v_model_yr.match(/\d/g).join(""), 10)
: ""
: "",
v_make: job.v_make_desc || "",
v_model: job.v_model_desc || "",
date_estimated:
(job.date_estimated && moment(job.date_estimated).tz(job.bodyshop.timezone).format(AHDateFormat)) ||
(job.created_at && moment(job.created_at).tz(job.bodyshop.timezone).format(AHDateFormat)) ||
"",
data_opened:
(job.date_open && moment(job.date_open).tz(job.bodyshop.timezone).format(AHDateFormat)) ||
(job.created_at && moment(job.created_at).tz(job.bodyshop.timezone).format(AHDateFormat)) ||
"",
date_invoiced:
(job.date_invoiced && moment(job.date_invoiced).tz(job.bodyshop.timezone).format(AHDateFormat)) || "",
loss_date: (job.loss_date && moment(job.loss_date).format(AHDateFormat)) || "",
ins_co_nm: job.ins_co_nm || "",
loss_desc: job.loss_desc || "",
theft_ind: job.theft_ind,
tloss_ind: job.tlos_ind,
subtotal: Dinero(job.job_totals.totals.subtotal).toUnit(),
areaofdamage: {
impact1: generateAreaOfDamage(job.area_of_damage?.impact1 || ""),
impact2: generateAreaOfDamage(job.area_of_damage?.impact2 || "")
},
jobLines: job.joblines.length > 0 ? job.joblines.map((jl) => GenerateDetailLines(jl)) : [generateNullDetailLine()]
};
return ret;
} catch (error) {
logger.log("CARFAX-job-data-error", "ERROR", "api", null, { error: error.message, stack: error.stack });
errorCallback({ jobid: job.id, ro_number: job.ro_number, error });
}
};
const GenerateDetailLines = (line) => {
const ret = {
line_desc: line.line_desc ? line.line_desc.replace(NON_ASCII_REGEX, "") : null,
oem_partno: line.oem_partno ? line.oem_partno.replace(NON_ASCII_REGEX, "") : null,
alt_partno: line.alt_partno ? line.alt_partno.replace(NON_ASCII_REGEX, "") : null,
lbr_ty: generateLaborType(line.mod_lbr_ty),
part_qty: line.part_qty || 0,
part_type: generatePartType(line.part_type),
act_price: line.act_price || 0
};
return ret;
};
const generateNullDetailLine = () => {
return {
line_desc: null,
oem_partno: null,
alt_partno: null,
lbr_ty: null,
part_qty: 0,
part_type: null,
act_price: 0
};
};
const generateAreaOfDamage = (loc) => {
const areaMap = {
"01": "Right Front Corner",
"02": "Right Front Side",
"03": "Right Side",
"04": "Right Rear Side",
"05": "Right Rear Corner",
"06": "Rear",
"07": "Left Rear Corner",
"08": "Left Rear Side",
"09": "Left Side",
10: "Left Front Side",
11: "Left Front Corner",
12: "Front",
13: "Rollover",
14: "Uknown",
15: "Total Loss",
16: "Non-Collision",
19: "All Over",
25: "Hood",
26: "Deck Lid",
27: "Roof",
28: "Undercarriage",
34: "All Over"
};
return areaMap[loc] || null;
};
const generateLaborType = (type) => {
const laborTypeMap = {
laa: "Aluminum",
lab: "Body",
lad: "Diagnostic",
lae: "Electrical",
laf: "Frame",
lag: "Glass",
lam: "Mechanical",
lar: "Refinish",
las: "Structural",
lau: "Other - LAU",
la1: "Other - LA1",
la2: "Other - LA2",
la3: "Other - LA3",
la4: "Other - LA4",
null: "Other",
mapa: "Paint Materials",
mash: "Shop Materials",
rates_subtotal: "Labor Total",
"timetickets.labels.shift": "Shift",
"timetickets.labels.amshift": "Morning Shift",
"timetickets.labels.ambreak": "Morning Break",
"timetickets.labels.pmshift": "Afternoon Shift",
"timetickets.labels.pmbreak": "Afternoon Break",
"timetickets.labels.lunch": "Lunch"
};
return laborTypeMap[type?.toLowerCase()] || null;
};
const generatePartType = (type) => {
const partTypeMap = {
paa: "Aftermarket",
pae: "Existing",
pag: "Glass",
pal: "LKQ",
pan: "OEM",
pao: "Other",
pas: "Sublet",
pasl: "Sublet",
ccc: "CC Cleaning",
ccd: "CC Damage Waiver",
ccdr: "CC Daily Rate",
ccf: "CC Refuel",
ccm: "CC Mileage",
prt_dsmk_total: "Line Item Adjustment"
};
return partTypeMap[type?.toLowerCase()] || null;
};

6
server/data/chatter.js
View File

@@ -28,13 +28,11 @@ const ftpSetup = {
exports.default = async (req, res) => {
// Only process if in production environment.
if (process.env.NODE_ENV !== "production") {
res.sendStatus(403);
return;
return res.sendStatus(403);
}
// Only process if the appropriate token is provided.
if (req.headers["x-imex-auth"] !== process.env.AUTOHOUSE_AUTH_TOKEN) {
res.sendStatus(401);
return;
return res.sendStatus(401);
}
// Send immediate response and continue processing.

7
server/data/claimscorp.js
View File

@@ -3,7 +3,6 @@ const queries = require("../graphql-client/queries");
const Dinero = require("dinero.js");
const moment = require("moment-timezone");
var builder = require("xmlbuilder2");
const _ = require("lodash");
const logger = require("../utils/logger");
const fs = require("fs");
require("dotenv").config({
@@ -36,13 +35,11 @@ const ftpSetup = {
exports.default = async (req, res) => {
// Only process if in production environment.
if (process.env.NODE_ENV !== "production") {
res.sendStatus(403);
return;
return res.sendStatus(403);
}
// Only process if the appropriate token is provided.
if (req.headers["x-imex-auth"] !== process.env.AUTOHOUSE_AUTH_TOKEN) {
res.sendStatus(401);
return;
return res.sendStatus(401);
}
// Send immediate response and continue processing.

1
server/data/data.js
View File

@@ -6,3 +6,4 @@ exports.kaizen = require("./kaizen").default;
exports.usageReport = require("./usageReport").default;
exports.podium = require("./podium").default;
exports.emsUpload = require("./emsUpload").default;
exports.carfax = require("./carfax").default;

7
server/data/kaizen.js
View File

@@ -3,7 +3,6 @@ const queries = require("../graphql-client/queries");
const Dinero = require("dinero.js");
const moment = require("moment-timezone");
var builder = require("xmlbuilder2");
const _ = require("lodash");
const logger = require("../utils/logger");
const fs = require("fs");
require("dotenv").config({
@@ -35,13 +34,11 @@ const ftpSetup = {
exports.default = async (req, res) => {
// Only process if in production environment.
if (process.env.NODE_ENV !== "production") {
res.sendStatus(403);
return;
return res.sendStatus(403);
}
// Only process if the appropriate token is provided.
if (req.headers["x-imex-auth"] !== process.env.AUTOHOUSE_AUTH_TOKEN) {
res.sendStatus(401);
return;
return res.sendStatus(401);
}
// Send immediate response and continue processing.

6
server/data/podium.js
View File

@@ -29,13 +29,11 @@ const ftpSetup = {
exports.default = async (req, res) => {
// Only process if in production environment.
if (process.env.NODE_ENV !== "production") {
res.sendStatus(403);
return;
return res.sendStatus(403);
}
// Only process if the appropriate token is provided.
if (req.headers["x-imex-auth"] !== process.env.AUTOHOUSE_AUTH_TOKEN) {
res.sendStatus(401);
return;
return res.sendStatus(401);
}
// Send immediate response and continue processing.

65
server/graphql-client/queries.js
View File

@@ -878,6 +878,43 @@ exports.CHATTER_QUERY = `query CHATTER_EXPORT($start: timestamptz, $bodyshopid:
}
}`;
exports.CARFAX_QUERY = `query CARFAX_EXPORT($start: timestamptz, $bodyshopid: uuid!, $end: timestamptz) {
bodyshops_by_pk(id: $bodyshopid){
id
shopname
imexshopid
timezone
}
jobs(where: {_and: [{converted: {_eq: true}}, {v_vin: {_is_null: false}}, {date_invoiced: {_gt: $start}}, {date_invoiced: {_lte: $end}}, {shopid: {_eq: $bodyshopid}}]}) {
id
created_at
ro_number
v_model_yr
v_model_desc
v_make_desc
v_vin
date_estimated
date_open
date_invoiced
loss_date
ins_co_nm
loss_desc
theft_ind
tlos_ind
job_totals
area_of_damage
joblines(where: {removed: {_eq: false}}) {
line_desc
oem_partno
alt_partno
mod_lbr_ty
part_qty
part_type
act_price
}
}
}`;
exports.CLAIMSCORP_QUERY = `query CLAIMSCORP_EXPORT($start: timestamptz, $bodyshopid: uuid!, $end: timestamptz) {
bodyshops_by_pk(id: $bodyshopid){
id
@@ -1816,6 +1853,14 @@ exports.GET_CHATTER_SHOPS = `query GET_CHATTER_SHOPS {
}
}`;
exports.GET_CARFAX_SHOPS = `query GET_CARFAX_SHOPS {
bodyshops{
id
shopname
imexshopid
}
}`;
exports.GET_CLAIMSCORP_SHOPS = `query GET_CLAIMSCORP_SHOPS {
bodyshops(where: {claimscorpid: {_is_null: false}, _or: {claimscorpid: {_neq: ""}}}){
id
@@ -2846,6 +2891,26 @@ exports.GET_DOCUMENTS_BY_JOB = `
}
}
}`;
exports.GET_DOCUMENTS_BY_BILL = `
query GET_DOCUMENTS_BY_BILL($billId: uuid!) {
documents_aggregate(where: {billid: {_eq: $billId}}) {
aggregate {
sum {
size
}
}
}
documents(order_by: {takenat: desc}, where: {billid: {_eq: $billId}}) {
id
name
key
type
size
takenat
extension
}
}
`;
exports.QUERY_TEMPORARY_DOCS = ` query QUERY_TEMPORARY_DOCS {
documents(where: { jobid: { _is_null: true } }, order_by: { takenat: desc }) {

5
server/media/imgproxy-media.js
View File

@@ -18,6 +18,7 @@ const {
GET_DOCUMENTS_BY_JOB,
QUERY_TEMPORARY_DOCS,
GET_DOCUMENTS_BY_IDS,
GET_DOCUMENTS_BY_BILL,
DELETE_MEDIA_DOCUMENTS
} = require("../graphql-client/queries");
const yazl = require("yazl");
@@ -90,7 +91,9 @@ const getThumbnailUrls = async (req, res) => {
//Delayed as the key structure may change slightly from what it is currently and will require evaluating mobile components.
const client = req.userGraphQLClient;
//If there's no jobid and no billid, we're in temporary documents.
const data = await (jobid
const data = await (
billid ? client.request(GET_DOCUMENTS_BY_BILL, { billId: billid }) :
jobid
? client.request(GET_DOCUMENTS_BY_JOB, { jobId: jobid })
: client.request(QUERY_TEMPORARY_DOCS));

32
server/render/canvas-handler.js
View File

@@ -73,37 +73,23 @@ const processCanvasRequest = async (req, res) => {
// Default width and height
const width = isNumber(w) && w > 0 ? w : 500;
const height = isNumber(h) && h > 0 ? h : 275;
const configuration = getChartConfiguration(keys, values, override);
let canvas = null;
let ctx = null;
let chart = null;
let chartImage = null;
try {
// Create the canvas
canvas = new Canvas(width, height);
ctx = canvas.getContext("2d");
const canvas = new Canvas(width, height);
const ctx = canvas.getContext("2d");
// Render the chart
chart = new Chart(ctx, configuration);
// Generate and send the image
chartImage = (await canvas.toBuffer("image/png")).toString("base64");
const chartImage = (await canvas.toBuffer("image/png")).toString("base64");
res.status(200).send(`data:image/png;base64,${chartImage}`);
} catch (error) {
// Log the error and send the response
logger.log("canvas-error", "error", "jsr", null, { error: error.message });
res.status(500).send("Failed to generate canvas.");
res.status(500).send("Error generating canvas");
} finally {
// Cleanup resources
if (chart) {
chart.destroy();
}
ctx = null;
canvas = null;
chartImage = null;
chart?.destroy();
}
};
@@ -118,6 +104,7 @@ const enqueueRequest = (req, res) => {
};
const processNextInQueue = async () => {
try {
while (requestQueue.length > 0) {
const { req, res } = requestQueue.shift();
try {
@@ -126,7 +113,9 @@ const processNextInQueue = async () => {
console.error("canvas-queue-error", "error", "jsr", null, { error: err.message });
}
}
} finally {
isProcessing = false;
}
};
exports.canvastest = function (req, res) {
@@ -134,7 +123,10 @@ exports.canvastest = function (req, res) {
};
exports.canvas = async (req, res) => {
if (isProcessing || !enqueueRequest(req, res)) return;
if (!enqueueRequest(req, res)) return;
if (!isProcessing) {
isProcessing = true;
processNextInQueue().catch((err) => console.error("canvas-processing-error", { error: err.message }));
}
};

3
server/routes/dataRoutes.js
View File

@@ -1,6 +1,6 @@
const express = require("express");
const router = express.Router();
const { autohouse, claimscorp, chatter, kaizen, usageReport, podium } = require("../data/data");
const { autohouse, claimscorp, chatter, kaizen, usageReport, podium, carfax } = require("../data/data");
router.post("/ah", autohouse);
router.post("/cc", claimscorp);
@@ -8,5 +8,6 @@ router.post("/chatter", chatter);
router.post("/kaizen", kaizen);
router.post("/usagereport", usageReport);
router.post("/podium", podium);
router.post("/carfax", carfax);
module.exports = router;