Merged in feature/IO-3499-React-19 (pull request #2883)

Feature/IO-3499 React 19

client/src/App/App.container.jsx

@@ -3,11 +3,10 @@ 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, useMemo } from "react";
+import { useEffect } from "react";
 import { CookiesProvider } from "react-cookie";
 import { useTranslation } from "react-i18next";
-import { connect, useSelector } from "react-redux";
+import { useDispatch, 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";
@@ -28,93 +27,99 @@ const config = {
 function SplitClientProvider({ children }) {
   const imexshopid = useSelector((state) => state.user.imexshopid);
   const splitClient = useSplitClient({ key: imexshopid || "anon" });
+
   useEffect(() => {
-    if (splitClient && imexshopid) {
+    if (import.meta.env.DEV && splitClient && imexshopid) {
       console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
     }
   }, [splitClient, imexshopid]);
+
   return children;
 }
 
-const mapStateToProps = createStructuredSelector({
+function AppContainer() {
-  currentUser: selectCurrentUser
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode)),
-  signOutStart: () => dispatch(signOutStart())
-});
-
-function AppContainer({ currentUser, setDarkMode, signOutStart }) {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const currentUser = useSelector(selectCurrentUser);
   const isDarkMode = useSelector(selectDarkMode);
-  const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);
+
+  const theme = () => getTheme(isDarkMode);
+
+  const antdInput = () => ({ autoComplete: "new-password" });
+
+  const antdForm = () => ({
+    validateMessages: {
+      required: t("general.validation.required", { label: "${label}" })
+    }
+  });
 
   // Global seamless logout listener with redirect to /signin
   useEffect(() => {
     const handleSeamlessLogout = (event) => {
       if (event.data?.type !== "seamlessLogoutRequest") return;
 
-      const requestOrigin = event.origin;
+      // Only accept messages from the parent window
+      if (event.source !== window.parent) return;
+
+      const targetOrigin = event.origin || "*";
 
       if (currentUser?.authorized !== true) {
-        window.parent.postMessage(
+        window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "already_logged_out" }, targetOrigin);
-          { type: "seamlessLogoutResponse", status: "already_logged_out" },
-          requestOrigin || "*"
-        );
         return;
       }
 
-      signOutStart();
+      dispatch(signOutStart());
-      window.parent.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, requestOrigin || "*");
+      window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, targetOrigin);
     };
 
     window.addEventListener("message", handleSeamlessLogout);
     return () => {
       window.removeEventListener("message", handleSeamlessLogout);
     };
-  }, [signOutStart, currentUser]);
+  }, [dispatch, currentUser?.authorized]);
 
-  // Update data-theme attribute
+  // Update data-theme attribute (no cleanup to avoid transient style churn)
   useEffect(() => {
-    document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
+    document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
-    return () => document.documentElement.removeAttribute("data-theme");
   }, [isDarkMode]);
 
   // Sync darkMode with localStorage
   useEffect(() => {
-    if (currentUser?.uid) {
+    const uid = currentUser?.uid;
-      const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`);
+
-      if (savedMode !== null) {
+    if (!uid) {
-        setDarkMode(JSON.parse(savedMode));
+      dispatch(setDarkMode(false));
-      } else {
+      return;
-        setDarkMode(false);
-      }
-    } else {
-      setDarkMode(false);
     }
-  }, [currentUser?.uid, setDarkMode]);
+
+    const key = `dark-mode-${uid}`;
+    const raw = localStorage.getItem(key);
+
+    if (raw == null) {
+      dispatch(setDarkMode(false));
+      return;
+    }
+
+    try {
+      dispatch(setDarkMode(Boolean(JSON.parse(raw))));
+    } catch {
+      dispatch(setDarkMode(false));
+    }
+  }, [currentUser?.uid, dispatch]);
 
   // Persist darkMode
   useEffect(() => {
-    if (currentUser?.uid) {
+    const uid = currentUser?.uid;
-      localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));
+    if (!uid) return;
-    }
+
+    localStorage.setItem(`dark-mode-${uid}`, JSON.stringify(isDarkMode));
   }, [isDarkMode, currentUser?.uid]);
 
   return (
     <CookiesProvider>
       <ApolloProvider client={client}>
-        <ConfigProvider
+        <ConfigProvider input={antdInput} locale={enLocale} theme={theme} form={antdForm}>
-          input={{ autoComplete: "new-password" }}
-          locale={enLocale}
-          theme={theme}
-          form={{
-            validateMessages: {
-              required: t("general.validation.required", { label: "${label}" })
-            }
-          }}
-        >
           <GlobalLoadingBar />
           <SplitFactoryProvider config={config}>
             <SplitClientProvider>
@@ -127,4 +132,4 @@ function AppContainer({ currentUser, setDarkMode, signOutStart }) {
   );
 }
 
-export default Sentry.withProfiler(connect(mapStateToProps, mapDispatchToProps)(AppContainer));
+export default Sentry.withProfiler(AppContainer);

client/src/components/bill-delete-button/bill-delete-button.component.jsx

@@ -77,13 +77,7 @@ export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
   return (
     <RbacWrapper action="bills:delete" noauth={<></>}>
       <Popconfirm disabled={bill.exported} onConfirm={handleDelete} title={t("bills.labels.deleteconfirm")}>
-        <Button
+        <Button icon={<DeleteFilled />} disabled={bill.exported} loading={loading} />
-          disabled={bill.exported}
-          // onClick={handleDelete}
-          loading={loading}
-        >
-          <DeleteFilled />
-        </Button>
       </Popconfirm>
     </RbacWrapper>
   );

client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx

@@ -32,6 +32,7 @@ export function BillFormItemsExtendedFormItem({
   if (!value)
     return (
       <Button
+        icon={<PlusCircleFilled />}
         onClick={() => {
           const values = form.getFieldsValue("billlineskeys");
 
@@ -53,9 +54,7 @@ export function BillFormItemsExtendedFormItem({
             }
           });
         }}
-      >
+      />
-        <PlusCircleFilled />
-      </Button>
     );
 
   return (
@@ -196,6 +195,7 @@ export function BillFormItemsExtendedFormItem({
       </Form.Item>
 
       <Button
+        icon={<MinusCircleFilled />}
         onClick={() => {
           const values = form.getFieldsValue("billlineskeys");
 
@@ -207,9 +207,7 @@ export function BillFormItemsExtendedFormItem({
             }
           });
         }}
-      >
+      />
-        <MinusCircleFilled />
-      </Button>
     </Space>
   );
 }

client/src/components/bill-form/bill-form.lines.component.jsx

@@ -564,11 +564,10 @@ export function BillEnterModalLinesComponent({
             {() => (
               <Space wrap>
                 <Button
+                  icon={<DeleteFilled />}
                   disabled={disabled || getFieldValue("billlines")[record.fieldKey]?.inventories?.length > 0}
                   onClick={() => remove(record.name)}
-                >
+                />
-                  <DeleteFilled />
-                </Button>
 
                 {Simple_Inventory.treatment === "on" && (
                   <BilllineAddInventory

client/src/components/billline-add-inventory/billline-add-inventory.component.jsx

@@ -124,11 +124,11 @@ export function BilllineAddInventory({ currentUser, bodyshop, billline, disabled
   return (
     <Tooltip title={t("inventory.actions.addtoinventory")}>
       <Button
+        icon={<FileAddFilled />}
         loading={loading}
         disabled={disabled || billline?.inventories?.length >= billline.quantity}
         onClick={addToInventory}
       >
-        <FileAddFilled />
         {billline?.inventories?.length > 0 && <div>({billline?.inventories?.length} in inv)</div>}
       </Button>
     </Tooltip>

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

@@ -84,15 +84,14 @@ export function BillsListTableComponent({
             }
           });
         }}
-      >
+        icon={<FaTasks />}
-        <FaTasks />
+      />
-      </Button>
+
       <BillDeleteButton bill={record} jobid={job.id} />
       <BillDetailEditReturnComponent
         data={{ bills_by_pk: { ...record, jobid: job.id, job: job } }}
         disabled={record.is_credit_memo || record.vendorid === bodyshop.inhousevendorid || jobRO}
       />
-
       {record.isinhouse && (
         <PrintWrapperComponent
           templateObject={{
@@ -190,9 +189,7 @@ export function BillsListTableComponent({
       title={t("bills.labels.bills")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           {job && job.converted ? (
             <>
               <Button

client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx

@@ -41,9 +41,7 @@ export default function CABCpvrtCalculator({ disabled, form }) {
 
   return (
     <Popover destroyOnHidden content={popContent} open={visibility} disabled={disabled}>
-      <Button disabled={disabled} onClick={() => setVisibility(true)}>
+      <Button disabled={disabled} onClick={() => setVisibility(true)} icon={<CalculatorFilled />} />
-        <CalculatorFilled />
-      </Button>
     </Popover>
   );
 }

client/src/components/chat-affix/chat-affix.container.jsx

@@ -12,11 +12,16 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
   const client = useApolloClient();
   const { socket } = useSocket();
 
-  // 1) FCM subscription (independent of socket handler registration)
+  const messagingServicesId = bodyshop?.messagingservicesid;
-  useEffect(() => {
+  const bodyshopId = bodyshop?.id;
-    if (!bodyshop?.messagingservicesid) return;
+  const imexshopid = bodyshop?.imexshopid;
 
-    async function subscribeToTopicForFCMNotification() {
+  const messagingEnabled = Boolean(messagingServicesId);
+
+  useEffect(() => {
+    if (!messagingEnabled) return;
+
+    (async () => {
       try {
         await requestForToken();
         await axios.post("/notifications/subscribe", {
@@ -24,23 +29,19 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
             vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY
           }),
           type: "messaging",
-          imexshopid: bodyshop.imexshopid
+          imexshopid
         });
       } catch (error) {
         console.log("Error attempting to subscribe to messaging topic: ", error);
       }
-    }
+    })();
+  }, [messagingEnabled, imexshopid]);
 
-    subscribeToTopicForFCMNotification();
-  }, [bodyshop?.messagingservicesid, bodyshop?.imexshopid]);
-
-  // 2) Register socket handlers as soon as socket is connected (regardless of chatVisible)
   useEffect(() => {
     if (!socket) return;
-    if (!bodyshop?.messagingservicesid) return;
+    if (!messagingEnabled) return;
-    if (!bodyshop?.id) return;
+    if (!bodyshopId) return;
 
-    // If socket isn't connected yet, ensure no stale handlers remain.
     if (!socket.connected) {
       unregisterMessagingHandlers({ socket });
       return;
@@ -56,16 +57,14 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
       bodyshop
     });
 
-    return () => {
+    return () => unregisterMessagingHandlers({ socket });
-      unregisterMessagingHandlers({ socket });
+  }, [socket, messagingEnabled, bodyshopId, client, currentUser?.email, bodyshop]);
-    };
-  }, [socket, socket?.connected, bodyshop?.id, bodyshop?.messagingservicesid, client, currentUser?.email]);
 
-  if (!bodyshop?.messagingservicesid) return <></>;
+  if (!messagingEnabled) return null;
 
   return (
     <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      {bodyshop?.messagingservicesid ? <ChatPopupComponent /> : null}
+      {messagingEnabled ? <ChatPopupComponent /> : null}
     </div>
   );
 }

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -128,7 +128,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
         onClick={() => setSelectedConversation(item.id)}
         className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
       >
-        <Card style={getCardStyle()} variant={true} size="small" extra={cardExtra} title={cardTitle}>
+        <Card style={getCardStyle()} variant="outlined" size="small" extra={cardExtra} title={cardTitle}>
           <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
           <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
         </Card>

client/src/components/chat-open-button/chat-open-button.component.jsx

@@ -1,22 +1,23 @@
+import { Button } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
+import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { openChatByPhone } from "../../redux/messaging/messaging.actions";
-import PhoneNumberFormatter from "../../utils/PhoneFormatter";
-
 import { createStructuredSelector } from "reselect";
+import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
-  searchingForConversation: searchingForConversation
+  searchingForConversation
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  openChatByPhone: (phone) => dispatch(openChatByPhone(phone))
+  openChatByPhone: (payload) => dispatch(openChatByPhone(payload))
 });
 
 export function ChatOpenButton({ bodyshop, searchingForConversation, phone, type, jobid, openChatByPhone }) {
@@ -24,31 +25,59 @@ export function ChatOpenButton({ bodyshop, searchingForConversation, phone, type
   const { socket } = useSocket();
   const notification = useNotification();
 
-  if (!phone) return <></>;
+  if (!phone) return null;
 
-  if (!bodyshop.messagingservicesid) {
+  const messagingEnabled = Boolean(bodyshop?.messagingservicesid);
-    return <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>;
-  }
 
+  const parsed = useMemo(() => {
+    if (!messagingEnabled) return null;
+    try {
+      return parsePhoneNumber(phone, "CA") || null;
+    } catch {
+      return null;
+    }
+  }, [messagingEnabled, phone]);
+
+  const isValid = Boolean(parsed?.isValid?.() && parsed.isValid());
+  const clickable = messagingEnabled && !searchingForConversation && isValid;
+
+  const onClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!messagingEnabled) return;
+      if (searchingForConversation) return;
+
+      if (!isValid) {
+        notification.error({ title: t("messaging.error.invalidphone") });
+        return;
+      }
+
+      openChatByPhone({
+        phone_num: parsed.formatInternational(),
+        jobid,
+        socket
+      });
+    },
+    [messagingEnabled, searchingForConversation, isValid, parsed, jobid, socket, openChatByPhone, notification, t]
+  );
+
+  const content = <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>;
+
+  // If not clickable, render plain formatted text (no link styling)
+  if (!clickable) return content;
+
+  // Clickable: render as a link-styled button (best for a “command”)
   return (
-    <a
+    <Button
-      href="# "
+      type="link"
-      onClick={(e) => {
+      onClick={onClick}
-        e.preventDefault();
+      className="chat-open-button-link"
-        e.stopPropagation();
+      aria-label={t("messaging.actions.openchat") || "Open chat"}
-
-        if (searchingForConversation) return; // Prevent finding the same thing twice.
-
-        const p = parsePhoneNumber(phone, "CA");
-        if (p && p.isValid()) {
-          openChatByPhone({ phone_num: p.formatInternational(), jobid, socket });
-        } else {
-          notification.error({ title: t("messaging.error.invalidphone") });
-        }
-      }}
     >
-      <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>
+      {content}
-    </a>
+    </Button>
   );
 }
 

client/src/components/contracts-list/contracts-list.component.jsx

@@ -156,9 +156,8 @@ export function ContractsList({ bodyshop, loading, contracts, refetch, total, se
             </>
           )}
           <Button onClick={() => setContractFinderContext()}>{t("contracts.actions.find")}</Button>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
+
-          </Button>
           <Input.Search
             placeholder={search.searh || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -255,9 +255,8 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       title={t("menus.header.courtesycars")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
+
-          </Button>
           <Dropdown trigger="click" menu={menu}>
             <Button>{t("general.labels.print")}</Button>
           </Dropdown>

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -85,13 +85,7 @@ export default function CsiResponseListPaginated({ refetch, loading, responses,
   };
 
   return (
-    <Card
+    <Card extra={<Button onClick={() => refetch()} icon={<SyncOutlined />} />}>
-      extra={
-        <Button onClick={() => refetch()}>
-          <SyncOutlined />
-        </Button>
-      }
-    >
       <Table
         loading={loading}
         pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(state.page || 1), total: total }}

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -196,9 +196,7 @@ export function DashboardGridComponent({ currentUser }) {
       <PageHeader
         extra={
           <Space>
-            <Button onClick={() => refetch()}>
+            <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-              <SyncOutlined />
-            </Button>
             <Dropdown menu={menu} trigger={["click"]}>
               <Button>{t("dashboard.actions.addcomponent")}</Button>
             </Dropdown>

client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Form, Input, Table } from "antd";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -111,9 +111,8 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
           onClick={() => {
             socket.emit("pbs-calculate-allocations-ap", billids, (ack) => setAllocationsSummary(ack));
           }}
-        >
+          icon={<SyncOutlined />}
-          <SyncOutlined />
+        />
-        </Button>
       }
     >
       <Table

client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx

@@ -1,6 +1,6 @@
 import { Alert, Button, Card, Table, Typography } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
-import { useCallback, useEffect, useState, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -110,11 +110,7 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, on
   return (
     <Card
       title={title}
-      extra={
+      extra={<Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")} icon={<SyncOutlined />} />}
-        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
-          <SyncOutlined />
-        </Button>
-      }
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
         <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />

client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx

@@ -1,6 +1,6 @@
 import { Alert, Button, Card, Table, Tabs, Typography } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
-import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -329,11 +329,7 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
   return (
     <Card
       title={title}
-      extra={
+      extra={<Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")} icon={<SyncOutlined />} />}
-        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
-          <SyncOutlined />
-        </Button>
-      }
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
         <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />

client/src/components/inventory-line-delete/inventory-line-delete.component.jsx

@@ -53,9 +53,7 @@ export default function InventoryLineDelete({ inventoryline, disabled, refetch }
         onConfirm={handleDelete}
         title={t("inventory.labels.deleteconfirm")}
       >
-        <Button disabled={disabled || inventoryline.consumedbybillid} loading={loading}>
+        <Button disabled={disabled || inventoryline.consumedbybillid} loading={loading} icon={<DeleteFilled />} />
-          <DeleteFilled />
-        </Button>
       </Popconfirm>
     </RbacWrapper>
   );

client/src/components/inventory-list/inventory-list.component.jsx

@@ -110,9 +110,9 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
                 }
               });
             }}
-          >
+            icon={<EditFilled />}
-            <EditFilled />
+          />
-          </Button>
+
           <InventoryLineDelete inventoryline={record} refetch={refetch} />
         </Space>
       )
@@ -155,9 +155,9 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
                 context: {}
               });
             }}
-          >
+            icon={<FileAddFilled />}
-            <FileAddFilled />
+          />
-          </Button>
+
           <Button
             onClick={() => {
               const updatedSearch = { ...search };
@@ -172,9 +172,8 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
             {search.showall ? t("inventory.labels.showavailable") : t("inventory.labels.showall")}
           </Button>
 
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
+
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/job-at-change/schedule-event.note.component.jsx

@@ -61,9 +61,7 @@ export function ScheduleEventNote({ event }) {
         ) : (
           <Input.TextArea rows={3} value={note} onChange={(e) => setNote(e.target.value)} style={{ maxWidth: "8vw" }} />
         )}
-        <Button onClick={toggleEdit} loading={loading}>
+        <Button onClick={toggleEdit} loading={loading} icon={editing ? <SaveFilled /> : <EditFilled />} />
-          {editing ? <SaveFilled /> : <EditFilled />}
-        </Button>
       </Space>
     </DataLabel>
   );

client/src/components/job-audit-trail/job-audit-trail.component.jsx

@@ -159,9 +159,8 @@ export function JobAuditTrail({ bodyshop, jobId }) {
               onClick={() => {
                 refetch();
               }}
-            >
+              icon={<SyncOutlined />}
-              <SyncOutlined />
+            />
-            </Button>
           }
         >
           <Table loading={loading} columns={columns} rowKey="id" dataSource={data ? data.audit_trail : []} />

client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx

@@ -61,9 +61,12 @@ export default function JobIntakeTemplateList({ templates }) {
         renderItem={(template) => (
           <List.Item
             actions={[
-              <Button key="checkListTemplateButton" loading={loading} onClick={() => renderTemplate(template)}>
+              <Button
-                <PrinterFilled />
+                key="checkListTemplateButton"
-              </Button>
+                loading={loading}
+                onClick={() => renderTemplate(template)}
+                icon={<PrinterFilled />}
+              />
             ]}
           >
             <List.Item.Meta

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -395,9 +395,8 @@ export function JobLinesComponent({
                         context: { ...record, jobid: job.id }
                       });
                     }}
-                  >
+                    icon={<EditFilled />}
-                    <EditFilled />
+                  />
-                  </Button>
                 )}
                 <Button
                   title={t("tasks.buttons.create")}
@@ -409,9 +408,9 @@ export function JobLinesComponent({
                       }
                     });
                   }}
-                >
+                  icon={<FaTasks />}
-                  <FaTasks />
+                />
-                </Button>
+
                 {(record.manual_line || jobIsPrivate) && !technician && (
                   <Button
                     disabled={jobRO}
@@ -431,9 +430,8 @@ export function JobLinesComponent({
                       await axios.post("/job/totalsssu", { id: job.id });
                       if (refetch) refetch();
                     }}
-                  >
+                    icon={<DeleteFilled />}
-                    <DeleteFilled />
+                  />
-                  </Button>
                 )}
               </Space>
             )
@@ -542,9 +540,7 @@ export function JobLinesComponent({
         title={t("jobs.labels.estimatelines")}
         extra={
           <Space wrap>
-            <Button onClick={() => refetch()}>
+            <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-              <SyncOutlined />
-            </Button>
 
             {/* Bulk Update Location */}
             <Button
@@ -609,8 +605,8 @@ export function JobLinesComponent({
 
                   setSelectedLines([]);
                 }}
+                icon={<HomeOutlined />}
               >
-                <HomeOutlined />
                 {t("parts.actions.orderinhouse")}
                 {selectedLines.length > 0 && ` (${selectedLines.length})`}
               </Button>
@@ -641,6 +637,7 @@ export function JobLinesComponent({
 
             {!isPartsEntry && (
               <Button
+                icon={<FilterFilled />}
                 id="job-lines-filter-parts-only-button"
                 onClick={() => {
                   setState((state) => ({
@@ -652,7 +649,7 @@ export function JobLinesComponent({
                   }));
                 }}
               >
-                <FilterFilled /> {t("jobs.actions.filterpartsonly")}
+                {t("jobs.actions.filterpartsonly")}
               </Button>
             )}
 

client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx

@@ -187,9 +187,8 @@ export function JobLineConvertToLabor({
               loading={loading}
               onClick={handleClick}
               {...otherBtnProps}
-            >
+              icon={<ClockCircleOutlined />}
-              <ClockCircleOutlined />
+            />
-            </Button>
           </Tooltip>
         </Popover>
       )}

client/src/components/job-payments/job-payments.component.jsx

@@ -107,9 +107,8 @@ export function JobPayments({ job, bodyshop, setPaymentContext, setCardPaymentCo
                 context: record
               });
             }}
-          >
+            icon={<EditFilled />}
-            <EditFilled />
+          />
-          </Button>
           <PrintWrapperComponent
             templateObject={{
               name: TemplateList("payment").payment_receipt.key,

client/src/components/job-sync-button/job-sync-button.component.jsx

@@ -11,8 +11,7 @@ export default function JobSyncButton({ job }) {
   };
   if (job?.available_jobs && job?.available_jobs?.length > 0)
     return (
-      <Button onClick={handleClick}>
+      <Button onClick={handleClick} icon={<SyncOutlined />}>
-        <SyncOutlined />
         {t("jobs.actions.sync")}
       </Button>
     );

client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx

@@ -53,10 +53,8 @@ export function JobsAdminStatus({ insertAuditTrail, bodyshop, job }) {
 
   return (
     <Dropdown menu={statusMenu} trigger={["click"]} key="changestatus">
-      <Button shape="round">
+      <Button icon={<DownCircleFilled />} iconPlacement="end" shape="round">
         <span>{job.status}</span>
-
-        <DownCircleFilled />
       </Button>
     </Dropdown>
   );

client/src/components/jobs-available-scan/jobs-available-scan.component.jsx

@@ -94,11 +94,7 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
     {
       title: t("general.labels.actions"),
       key: "actions",
-      render: (text, record) => (
+      render: (text, record) => <Button icon={<DownloadOutlined />} onClick={() => handleImport(record.filepath)} />
-        <Button onClick={() => handleImport(record.filepath)}>
-          <DownloadOutlined />
-        </Button>
-      )
     }
   ];
 
@@ -126,15 +122,14 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
       extra={
         <Space wrap>
           <Button
+            icon={<SyncOutlined />}
             loading={loading}
             disabled={!partnerVersion}
             onClick={() => {
               scanEstimates();
             }}
             id="scan-estimates-button"
-          >
+          />
-            <SyncOutlined />
-          </Button>
 
           <Input.Search
             placeholder={t("general.labels.search")}

client/src/components/jobs-available-table/jobs-available-table.component.jsx

@@ -135,17 +135,16 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
                   refetch();
                 });
               }}
-            >
+              icon={<DeleteFilled />}
-              <DeleteFilled />
+            />
-            </Button>
             {!isClosed && (
               <>
-                <Button onClick={() => addJobAsNew(record)} disabled={record.issupplement}>
+                <Button
-                  <PlusCircleFilled />
+                  onClick={() => addJobAsNew(record)}
-                </Button>
+                  disabled={record.issupplement}
-                <Button onClick={() => addJobAsSupp(record)}>
+                  icon={<PlusCircleFilled />}
-                  <DownloadOutlined />
+                />
-                </Button>
+                <Button onClick={() => addJobAsSupp(record)} icon={<DownloadOutlined />} />
               </>
             )}
             {isClosed && <Alert type="error" title={t("jobs.labels.alreadyclosed")}></Alert>}
@@ -175,9 +174,8 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
             onClick={() => {
               refetch();
             }}
-          >
+            icon={<SyncOutlined />}
-            <SyncOutlined />
+          />
-          </Button>
           <Button
             onClick={() => {
               deleteAllAvailableJobs()

client/src/components/jobs-change-status/jobs-change-status.component.jsx

@@ -96,10 +96,8 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail, isPar
 
   return (
     <Dropdown menu={statusMenu} trigger={["click"]} key="changestatus" disabled={jobRO || !job.converted}>
-      <Button shape="round">
+      <Button shape="round" icon={<DownCircleFilled />} iconPlacement="end">
         <span>{job.status}</span>
-
-        <DownCircleFilled />
       </Button>
     </Dropdown>
   );

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx

@@ -56,9 +56,8 @@ export default function JobsCreateVehicleInfoPredefined({ disabled, form }) {
                   setOpen(false);
                   setSearch("");
                 }}
-              >
+                icon={<PlusOutlined />}
-                <PlusOutlined />
+              />
-              </Button>
             )
           }
         ]}

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -1286,9 +1286,8 @@ export function JobsDetailHeaderActions({
         open={dropdownOpen}
         onOpenChange={handleDropdownOpenChange}
       >
-        <Button>
+        <Button icon={<DownCircleFilled />} iconPlacement="end">
           <span>{t("general.labels.actions")}</span>
-          <DownCircleFilled />
         </Button>
       </Dropdown>
 

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -128,9 +128,7 @@ function JobsDocumentsComponent({
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Space wrap>
-            <Button onClick={() => refetch && refetch()}>
+            <Button onClick={() => refetch && refetch()} icon={<SyncOutlined />} />
-              <SyncOutlined />
-            </Button>
             <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setgalleryImages} />
             <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} />
             <JobsDocumentsDeleteButton galleryImages={galleryImages} deletionCallback={billsCallback || refetch} />

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

@@ -65,9 +65,8 @@ function JobsDocumentsImgproxyComponent({
                 //Do the imgproxy refresh too
                 fetchThumbnails();
               }}
-            >
+              icon={<SyncOutlined />}
-              <SyncOutlined />
+            />
-            </Button>
             <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setGalleryImages} />
             {!billId && (
               <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={fetchThumbnails || refetch} />

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

@@ -102,9 +102,8 @@ export function JobsDocumentsLocalGallery({
                   }
                 }
               }}
-            >
+              icon={<SyncOutlined />}
-              <SyncOutlined />
+            />
-            </Button>
             <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
               <Button>{t("documents.labels.openinexplorer")}</Button>
             </a>

client/src/components/jobs-find-modal/jobs-find-modal.component.jsx

@@ -179,9 +179,8 @@ export default function JobsFindModalComponent({
               onClick={() => {
                 jobsListRefetch();
               }}
-            >
+              icon={<SyncOutlined />}
-              <SyncOutlined />
+            />
-            </Button>
             <Input
               value={modalSearch}
               onChange={(e) => {

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -224,9 +224,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

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

@@ -313,9 +313,7 @@ export function JobsList({ bodyshop }) {
       title={t("titles.bc.jobs-active")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/components/jobs-notes/jobs.notes.component.jsx

@@ -121,9 +121,12 @@ export function JobNotesComponent({
       width: 200,
       render: (text, record) => (
         <Space wrap>
-          <Button loading={deleteLoading} disabled={record.audit || jobRO} onClick={() => handleNoteDelete(record.id)}>
+          <Button
-            <DeleteFilled />
+            loading={deleteLoading}
-          </Button>
+            disabled={record.audit || jobRO}
+            onClick={() => handleNoteDelete(record.id)}
+            icon={<DeleteFilled />}
+          />
           <Button
             disabled={record.audit || jobRO}
             onClick={() => {
@@ -135,9 +138,8 @@ export function JobNotesComponent({
                 }
               });
             }}
-          >
+            icon={<EditFilled />}
-            <EditFilled />
+          />
-          </Button>
           <PrintWrapperComponent
             templateObject={{
               name: Templates.individual_job_note.key,

client/src/components/jobs-ready-list/jobs-ready-list.component.jsx

@@ -297,9 +297,7 @@ export function JobsReadyList({ bodyshop }) {
       extra={
         <Space wrap>
           <span>({readyStatuses && readyStatuses.join(", ")})</span>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx

@@ -246,9 +246,8 @@ export function PayrollLaborAllocationsTable({
                   setTotals(data);
                   refetch();
                 }}
-              >
+                icon={<SyncOutlined />}
-                <SyncOutlined />
+              />
-              </Button>
             </Space>
           }
         >

client/src/components/notification-center/notification-center.component.jsx

@@ -24,6 +24,7 @@ const NotificationCenterComponent = ({
   onNotificationClick,
   unreadCount,
   isEmployee,
+  isDarkMode,
   ref
 }) => {
     const { t } = useTranslation();
@@ -112,14 +113,16 @@ const NotificationCenterComponent = ({
             <Alert title={t("notifications.labels.employee-notification")} type="warning" />
           </div>
         ) : (
-          <Virtuoso
+          <div className={isDarkMode ? "notification-center--dark" : "notification-center--light"} style={{ height: "400px", width: "100%" }}>
-            ref={virtuosoRef}
+            <Virtuoso
-            style={{ height: "400px", width: "100%" }}
+              ref={virtuosoRef}
-            data={notifications}
+              style={{ height: "100%", width: "100%" }}
-            totalCount={notifications.length}
+              data={notifications}
-            endReached={loadMore}
+              totalCount={notifications.length}
-            itemContent={renderNotification}
+              endReached={loadMore}
-          />
+              itemContent={renderNotification}
+            />
+          </div>
         )}
       </div>
     );

client/src/components/notification-center/notification-center.container.jsx

@@ -5,6 +5,7 @@ import NotificationCenterComponent from "./notification-center.component";
 import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
+import { selectDarkMode } from "../../redux/application/application.selectors.js";
 import day from "../../utils/day.js";
 import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
@@ -22,7 +23,7 @@ const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
  * @returns {JSX.Element}
  * @constructor
  */
-const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount, currentUser }) => {
+const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount, currentUser, isDarkMode }) => {
   const [showUnreadOnly, setShowUnreadOnly] = useState(false);
   const [notifications, setNotifications] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -213,13 +214,15 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount,
       loadMore={loadMore}
       onNotificationClick={handleNotificationClick}
       unreadCount={unreadCount}
+      isDarkMode={isDarkMode}
     />
   );
 };
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
+  isDarkMode: selectDarkMode
 });
 
 export default connect(mapStateToProps, null)(NotificationCenterContainer);

client/src/components/notification-center/notification-center.styles.scss

@@ -173,3 +173,11 @@
     }
   }
 }
+
+.notification-center--dark {
+  color-scheme: dark;
+}
+
+.notification-center--light {
+  color-scheme: light;
+}

client/src/components/owners-list/owners-list.component.jsx

@@ -99,9 +99,7 @@ export default function OwnersListComponent({ loading, owners, total, refetch })
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/parts-dispatch-table/parts-dispatch-table.component.jsx

@@ -93,10 +93,7 @@ export function PartDispatchTableComponent({ bodyshop, job, billsQuery }) {
       title={t("parts_dispatch.labels.parts_dispatch")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
-
           <Input.Search
             placeholder={t("general.labels.search")}
             value={searchText}

client/src/components/parts-order-delete-line/parts-order-delete-line.component.jsx

@@ -34,9 +34,7 @@ export default function PartsOrderDeleteLine({ disabled, partsLineId, partsOrder
         });
       }}
     >
-      <Button disabled={disabled}>
+      <Button disabled={disabled} icon={<DeleteFilled />} />
-        <DeleteFilled />
-      </Button>
     </Popconfirm>
   );
 }

client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx

@@ -150,9 +150,8 @@ export function PartsOrderListTableDrawerComponent({
               }
             });
           }}
-        >
+          icon={<FaTasks />}
-          <FaTasks />
+        />
-        </Button>
       )}
       <Popconfirm
         title={t("parts_orders.labels.confirmdelete")}
@@ -173,9 +172,7 @@ export function PartsOrderListTableDrawerComponent({
           });
         }}
       >
-        <Button disabled={jobRO}>
+        <Button disabled={jobRO} icon={<DeleteFilled />} />
-          <DeleteFilled />
-        </Button>
       </Popconfirm>
       {!isPartsEntry && (
         <Button

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -59,7 +59,7 @@ export function PartsOrderModalComponent({
   return (
     <div>
       <Form.Item name="returnfrombill" hidden>
-        <Input />
+        <Input type="hidden" />
       </Form.Item>
       <LayoutFormRow grow noDivider>
         <Form.Item

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -144,6 +144,7 @@ export function PaymentsListPaginated({
       render: (text, record) => (
         <Space>
           <Button
+            icon={<EditFilled />}
             // disabled={record.exportedat}
             onClick={async () => {
               let apolloResults;
@@ -174,9 +175,7 @@ export function PaymentsListPaginated({
                 context: { ...(apolloResults ? apolloResults : record), refetchRequiresContext: true }
               });
             }}
-          >
+          />
-            <EditFilled />
-          </Button>
           <PrintWrapperComponent
             templateObject={{
               name: Templates.payment_receipt.key,
@@ -245,9 +244,7 @@ export function PaymentsListPaginated({
               <Button onClick={() => setCaBcEtfTableContext()}>{t("payments.labels.ca_bc_etf_table")}</Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/print-wrapper/print-wrapper.component.jsx

@@ -1,5 +1,5 @@
 import { MailFilled, PrinterFilled } from "@ant-design/icons";
-import { Space, Spin } from "antd";
+import { Button, Space, Spin } from "antd";
 import { useState } from "react";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
@@ -26,16 +26,18 @@ export default function PrintWrapperComponent({
     <Space>
       {children || null}
       {!emailOnly && (
-        <PrinterFilled
+        <Button
+          style={{ cursor: disabled ? "not-allowed" : null }}
+          icon={<PrinterFilled />}
           disabled={disabled}
           onClick={() => handlePrint("p")}
-          style={{ cursor: disabled ? "not-allowed" : null }}
         />
       )}
-      <MailFilled
+      <Button
+        style={{ cursor: disabled ? "not-allowed" : null }}
+        icon={<MailFilled />}
         disabled={disabled}
         onClick={() => handlePrint("e")}
-        style={{ cursor: disabled ? "not-allowed" : null }}
       />
       {loading && <Spin />}
     </Space>

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -191,9 +191,7 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
         style={{ paddingInline: 0, paddingBlock: 0 }}
         extra={
           <Space wrap>
-            <Button onClick={() => refetch && refetch()}>
+            <Button onClick={() => refetch && refetch()} icon={<SyncOutlined />} />
-              <SyncOutlined />
-            </Button>
             <ProductionBoardFilters filter={filter} setFilter={setFilter} loading={isMoving} />
             <ProductionBoardKanbanSettings
               parentLoading={setLoading}

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

@@ -251,9 +251,8 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
               onClick={() => {
                 refetch && refetch();
               }}
-            >
+              icon={<SyncOutlined />}
-              <SyncOutlined />
+            />
-            </Button>
             <ProductionListColumnsAdd
               columnState={[columns, setColumns]}
               tableState={state}

client/src/components/production-sublets-manage/production-sublets-manage.component.jsx

@@ -69,9 +69,8 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
                     handleSubletMark(s, "complete");
                   }}
                   type={s.sublet_completed ? "primary" : "ghost"}
-                >
+                  icon={<CheckCircleFilled style={{ color: s.sublet_completed ? "green" : undefined }} />}
-                  <CheckCircleFilled style={{ color: s.sublet_completed ? "green" : undefined }} />
+                />,
-                </Button>,
                 <Button
                   key="sublet"
                   loading={loading}
@@ -80,9 +79,8 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
                     handleSubletMark(s, "ignore");
                   }}
                   type={s.sublet_ignored ? "primary" : "ghost"}
-                >
+                  icon={<EyeInvisibleFilled style={{ color: s.sublet_ignored ? "tomato" : undefined }} />}
-                  <EyeInvisibleFilled style={{ color: s.sublet_ignored ? "tomato" : undefined }} />
+                />
-                </Button>
               ]}
             >
               <List.Item.Meta title={s.line_desc} />

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -146,7 +146,9 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
     <div className="report-center-modal">
       <Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
         <Input.Search onChange={(e) => setSearch(e.target.value)} value={search} />
-        <Form.Item name="defaultSorters" hidden />
+        <Form.Item name="defaultSorters" hidden>
+          <Input type="hidden" />
+        </Form.Item>
         <Form.Item
           name="key"
           label={t("reportcenter.labels.key")}

client/src/components/schedule-production-list/schedule-production-list.component.jsx

@@ -61,9 +61,8 @@ export default function ScheduleProductionList() {
 
   return (
     <Popover content={content} trigger="click" placement="bottomRight">
-      <Button onClick={() => callQuery({ variables: {} })}>
+      <Button onClick={() => callQuery({ variables: {} })} icon={<DownOutlined />} iconPlacement="end">
         {t("appointments.labels.inproduction")}
-        <DownOutlined />
       </Button>
     </Popover>
   );

client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx

@@ -123,9 +123,8 @@ export default function ScoreboardJobsList() {
         <Card
           extra={
             <Space align="middle" wrap>
-              <Button onClick={() => refetch()}>
+              <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-                <SyncOutlined />
+
-              </Button>
               <Typography.Title level={4}>
                 {t("general.labels.searchresults", { search: state.search })}
               </Typography.Title>

client/src/components/scoreboard-remove-button/scorebard-remove-button.component.jsx

@@ -37,9 +37,5 @@ export default function ScoreboardRemoveButton({ scoreboardId }) {
     }
     setLoading(false);
   };
-  return (
+  return <Button onClick={handleDelete} loading={loading} icon={<DeleteFilled />} />;
-    <Button onClick={handleDelete} loading={loading}>
-      <DeleteFilled />
-    </Button>
-  );
 }

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -159,9 +159,8 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
               }
             });
           }}
-        >
+          icon={<DeleteFilled />}
-          <DeleteFilled />
+        />
-        </Button>
       )
     }
   ];

client/src/components/shop-teams/shop-employee-teams.form.component.jsx

@@ -159,7 +159,7 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
                 {fields.map((field, index) => (
                   <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
                     <Form.Item label={t("employees.fields.id")} key={`${index}`} name={[field.name, "id"]} hidden>
-                      <Input />
+                      <Input type="hidden" />
                     </Form.Item>
                     <LayoutFormRow grow>
                       <Form.Item

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

@@ -228,9 +228,8 @@ export function SimplifiedPartsJobsListComponent({
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
+
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/task-center/task-center.component.jsx

@@ -22,6 +22,7 @@ const TaskCenterComponent = ({
   hasMore,
   createNewTask,
   incompleteTaskCount,
+  isDarkMode,
   ref
 }) => {
     const { t } = useTranslation();
@@ -140,22 +141,24 @@ const TaskCenterComponent = ({
         {tasks.length === 0 && !loading ? (
           <div className="no-tasks-message">{t("tasks.labels.no_tasks")}</div>
         ) : (
-          <Virtuoso
+          <div className={isDarkMode ? "task-center--dark" : "task-center--light"} style={{ height: "550px", width: "100%" }}>
-            ref={virtuosoRef}
+            <Virtuoso
-            style={{ height: "550px", width: "100%" }}
+              ref={virtuosoRef}
-            groupCounts={groupCounts}
+              style={{ height: "100%", width: "100%" }}
-            groupContent={groupContent}
+              groupCounts={groupCounts}
-            itemContent={itemContent}
+              groupContent={groupContent}
-            endReached={hasMore && !loading ? onLoadMore : undefined}
+              itemContent={itemContent}
-            components={{
+              endReached={hasMore && !loading ? onLoadMore : undefined}
-              Footer: () =>
+              components={{
-                loading ? (
+                Footer: () =>
-                  <div className="loading-footer">
+                  loading ? (
-                    <Spin />
+                    <div className="loading-footer">
-                  </div>
+                      <Spin />
-                ) : null
+                    </div>
-            }}
+                  ) : null
-          />
+              }}
+            />
+          </div>
         )}
       </div>
     );

client/src/components/task-center/task-center.container.jsx

@@ -3,6 +3,7 @@ import { useQuery } from "@apollo/client/react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { selectDarkMode } from "../../redux/application/application.selectors.js";
 import { INITIAL_TASKS, TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket";
 import { useIsEmployee } from "../../utils/useIsEmployee";
 import TaskCenterComponent from "./task-center.component";
@@ -11,7 +12,8 @@ import { QUERY_TASKS_NO_DUE_DATE_PAGINATED, QUERY_TASKS_WITH_DUE_DATES } from ".
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
+  isDarkMode: selectDarkMode
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -24,7 +26,8 @@ const TaskCenterContainer = ({
   bodyshop,
   currentUser,
   setTaskUpsertContext,
-  incompleteTaskCount
+  incompleteTaskCount,
+  isDarkMode
 }) => {
   const [tasks, setTasks] = useState([]);
   const { isConnected } = useSocket();
@@ -128,6 +131,7 @@ const TaskCenterContainer = ({
       hasMore={hasMore}
       createNewTask={createNewTask}
       incompleteTaskCount={incompleteTaskCount}
+      isDarkMode={isDarkMode}
     />
   );
 };

client/src/components/task-center/task-center.styles.scss

@@ -141,3 +141,11 @@
     text-align: center;
   }
 }
+
+.task-center--dark {
+  color-scheme: dark;
+}
+
+.task-center--light {
+  color-scheme: light;
+}

client/src/components/task-list/task-list.component.jsx

@@ -334,11 +334,9 @@ function TaskListComponent({
           checked={deleted === "true"}
           onChange={(value) => handleSwitchChange("deleted", value)}
         />
-        <Button title={t("tasks.buttons.refresh")} onClick={() => refetch()}>
+        <Button title={t("tasks.buttons.refresh")} onClick={() => refetch()} icon={<SyncOutlined />} />
-          <SyncOutlined />
+
-        </Button>
+        <Button title={t("tasks.buttons.create")} onClick={handleCreateTask} icon={<PlusCircleFilled />}>
-        <Button title={t("tasks.buttons.create")} onClick={handleCreateTask}>
-          <PlusCircleFilled />
           {t("tasks.buttons.create")}
         </Button>
       </Space>

client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx

@@ -76,6 +76,7 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
           title={data.jobs_by_pk.ro_number || t("general.labels.na")}
           extra={
             <Button
+              icon={<PrinterFilled />}
               onClick={() => {
                 setPrintCenterContext({
                   actions: { refetch: refetch },
@@ -87,7 +88,6 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
                 });
               }}
             >
-              <PrinterFilled />
               {t("jobs.actions.printCenter")}
             </Button>
           }

client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx

@@ -158,9 +158,7 @@ export function TechLookupJobsList({ bodyshop }) {
     <Card
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/components/time-ticket-calculator/time-ticket-calculator.component.jsx

@@ -95,7 +95,18 @@ export default function TimeTicketCalculatorComponent({
         <Form.Item name="percent">
           <Space.Compact>
             <InputNumber min={0} max={100} precision={1} />
-            <span style={{ padding: "0 11px", backgroundColor: "#fafafa", border: "1px solid #d9d9d9", borderLeft: 0, display: "flex", alignItems: "center" }}>%</span>
+            <span
+              style={{
+                padding: "0 11px",
+                backgroundColor: "#fafafa",
+                border: "1px solid #d9d9d9",
+                borderLeft: 0,
+                display: "flex",
+                alignItems: "center"
+              }}
+            >
+              %
+            </span>
           </Space.Compact>
         </Form.Item>
         <Button htmlType="submit">Calculate</Button>
@@ -112,11 +123,8 @@ export default function TimeTicketCalculatorComponent({
       placement="right"
       destroyOnHidden
     >
-      <Button onClick={(e) => e.preventDefault()}>
+      <Button onClick={(e) => e.preventDefault()} icon={<DownOutlined />} iconPlacement="end">
-        <Space>
+        Draw Calculator
-          Draw Calculator
-          <DownOutlined />
-        </Space>
       </Button>
     </Popover>
   );

client/src/components/time-ticket-list/time-ticket-list.component.jsx

@@ -322,9 +322,8 @@ export function TimeTicketList({
             onClick={async () => {
               refetch();
             }}
-          >
+            icon={<SyncOutlined />}
-            <SyncOutlined />
+          />
-          </Button>
         </Space>
       }
     >

client/src/components/time-ticket-modal/time-ticket-modal.component.jsx

@@ -184,8 +184,8 @@ export function TimeTicketModalComponent({
           }}
         </Form.Item>
 
-        <Form.Item name="flat_rate" label={t("timetickets.fields.flat_rate")} valuePropName="checked" noStyle hidden>
+        <Form.Item name="flat_rate" label={t("timetickets.fields.flat_rate")} valuePropName="checked" hidden>
-          <Switch style={{ display: "none" }} />
+          <Switch />
         </Form.Item>
       </LayoutFormRow>
 

client/src/components/tt-approvals-list/tt-approvals-list.component.jsx

@@ -176,9 +176,7 @@ export function TtApprovalsListComponent({
             completedCallback={setSelectedTickets}
             refetch={refetch}
           />
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
         </Space>
       }
     >

client/src/components/vehicles-list/vehicles-list.component.jsx

@@ -91,9 +91,7 @@ export default function VehiclesListComponent({ loading, vehicles, total, refetc
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/vendors-list/vendors-list.component.jsx

@@ -73,9 +73,7 @@ export default function VendorsListComponent({ handleNewVendor, loading, handleO
       extra={
         <Space wrap>
           <Button onClick={handleNewVendor}>{t("vendors.actions.new")}</Button>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/index.jsx

@@ -1,6 +1,5 @@
-import "./utils/sentry"; //Must be first.
+import "./utils/sentry"; // Must be first.
 import * as Sentry from "@sentry/react";
-import { ConfigProvider } from "antd";
 import Dinero from "dinero.js";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
@@ -14,9 +13,10 @@ import { persistor, store } from "./redux/store";
 import reportWebVitals from "./reportWebVitals";
 import "./translations/i18n";
 import "./utils/CleanAxios";
-//import * as amplitude from "@amplitude/analytics-browser";
+// import * as amplitude from "@amplitude/analytics-browser";
 import { PostHogProvider } from "posthog-js/react";
 import posthog from "posthog-js";
+import { StrictMode } from "react";
 
 window.global ||= window;
 
@@ -52,39 +52,44 @@ posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_KEY, {
 
 const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(createBrowserRouter);
 
-const router = sentryCreateBrowserRouter(
+const router = sentryCreateBrowserRouter(createRoutesFromElements(<Route path="*" element={<AppContainer />} />), {
-  createRoutesFromElements(<Route path="*" element={<AppContainer />} />),
+  future: {
-  {
+    v7_startTransition: true,
-    future: {
+    v7_relativeSplatPath: true
-      v7_startTransition: true,
-      v7_relativeSplatPath: true,
-    },
   }
-);
+});
+
 if (import.meta.env.DEV) {
-  let styles =
+  const 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) ";
+
   console.log("%c %s", styles, `VER: ${import.meta.env.VITE_APP_INSTANCE}`);
 }
 
 function App() {
   return (
-    <PersistGate loading={<LoadingSpinner message="Restoring your settings..." />} persistor={persistor}>
+    <Provider store={store}>
-      <Provider store={store}>
+      <PersistGate loading={<LoadingSpinner message="Restoring your settings..." />} persistor={persistor}>
         <PostHogProvider client={posthog}>
           <RouterProvider router={router} />
         </PostHogProvider>
-      </Provider>
+      </PersistGate>
-    </PersistGate>
+    </Provider>
   );
 }
 
-// Used for ANTD Component Tokens
+const rootEl = document.getElementById("root");
-// https://ant.design/docs/react/migrate-less-variables
+
-ReactDOM.createRoot(document.getElementById("root")).render(
+if (!rootEl) throw new Error('Missing root element: <div id="root" />');
-  <ConfigProvider>
+
+const appTree = import.meta.env.DEV ? (
+  <StrictMode>
     <App />
-  </ConfigProvider>
+  </StrictMode>
+) : (
+  <App />
 );
 
+ReactDOM.createRoot(rootEl).render(appTree);
+
 reportWebVitals();

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

@@ -105,9 +105,7 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
       render: (text, record) => (
         <Space wrap>
           <Link to={`/manage/bills?billid=${record.id}`}>
-            <Button>
+            <Button icon={<EditFilled />} />
-              <EditFilled />
-            </Button>
           </Link>
           {
             //  <Button
@@ -204,9 +202,7 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
               </Button>
             </Space>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Button
             onClick={() => {
               setBillEnterContext({

client/src/pages/export-logs/export-logs.page.component.jsx

@@ -174,9 +174,7 @@ export function ExportLogsPageComponent() {
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={searchParams.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -271,17 +271,18 @@ export function JobsDetailPage({
   const menuExtra = (
     <Space wrap>
       <Button
+        icon={<SyncOutlined />}
         onClick={() => {
           refetch();
         }}
         key="refresh"
       >
-        <SyncOutlined />
         {t("general.labels.refresh")}
       </Button>
       <JobsChangeStatus job={job} />
       <JobSyncButton job={job} />
       <Button
+        icon={<PrinterFilled />}
         onClick={() => {
           setPrintCenterContext({
             actions: { refetch: refetch },
@@ -294,7 +295,6 @@ export function JobsDetailPage({
         }}
         key="printing"
       >
-        <PrinterFilled />
         {t("jobs.actions.printCenter")}
       </Button>
       <JobsConvertButton job={job} refetch={refetch} parentFormIsFieldsTouched={form.isFieldsTouched} />

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

@@ -159,9 +159,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
           <Button disabled={hasNoAccess} onClick={handleNewPhonebook}>
             {t("phonebook.actions.new")}
           </Button>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={searchParams.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.component.jsx

@@ -94,18 +94,19 @@ export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO
   const menuExtra = (
     <Space wrap>
       <Button
+        icon={<SyncOutlined />}
         onClick={() => {
           refetch();
         }}
         key="refresh"
       >
-        <SyncOutlined />
         {t("general.labels.refresh")}
       </Button>
 
       <JobsChangeStatus job={job} />
 
       <Button
+        icon={<PrinterFilled />}
         onClick={() => {
           setPrintCenterContext({
             actions: { refetch: refetch },
@@ -118,7 +119,6 @@ export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO
         }}
         key="printing"
       >
-        <PrinterFilled />
         {t("jobs.actions.printCenter")}
       </Button>
 

client/src/pages/tech-assigned-prod-jobs/tech-assigned-prod-jobs.component.jsx

@@ -176,9 +176,7 @@ export function TechAssignedProdJobs({ setTimeTicketTaskContext, technician, bod
     <Card
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx

@@ -104,9 +104,7 @@ export function TechDispatchedParts({ technician, bodyshop }) {
     <Card
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-            <SyncOutlined />
-          </Button>
         </Space>
       }
     >

client/src/translations/en_us/common.json

@@ -2431,7 +2431,8 @@
     "messaging": {
       "actions": {
         "link": "Link to Job",
-        "new": "New Conversation"
+        "new": "New Conversation",
+        "openchat": "Open Chat"
       },
       "errors": {
         "invalidphone": "The phone number is invalid.  Unable to open conversation. ",

client/src/translations/es/common.json

@@ -2428,7 +2428,8 @@
     "messaging": {
       "actions": {
         "link": "",
-        "new": ""
+        "new": "",
+        "openchat": ""
       },
       "errors": {
         "invalidphone": "",

client/src/translations/fr/common.json

@@ -2428,7 +2428,9 @@
     "messaging": {
       "actions": {
         "link": "",
-        "new": ""
+        "new": "",
+
+        "openchat": ""
       },
       "errors": {
         "invalidphone": "",

client/src/translations/i18n.js

@@ -38,4 +38,15 @@ i18n
     }
   );
 
+// Enable HMR for translation files in development
+if (import.meta.hot) {
+  import.meta.hot.accept(() => {
+    // When translation files change, do a full reload
+    // This is the most reliable approach for i18n updates
+    if (!import.meta.env.VITE_STOP_RELOAD_ON_HOT_UPDATE) {
+      window.location.reload();
+    }
+  });
+}
+
 export default i18n;

client/src/utils/PhoneFormatter.jsx

@@ -11,13 +11,8 @@ export default function PhoneNumberFormatter({ children, type }) {
 
   return (
     <span>
-      <Text>{phone}</Text>
+      <span>{phone}</span>
-      {type ? (
+      {type ? <Text type="secondary"> ({type})</Text> : null}
-        <>
-          {" "}
-          <Text type="secondary">({type})</Text>
-        </>
-      ) : null}
     </span>
   );
 }