IO-3285 Shop Config Lite-Basic

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

bodyshop_translations.babel

@@ -65429,6 +65429,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>tags</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>taxid</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/accounting-payables-table/accounting-payables-table.component.jsx

@@ -1,6 +1,6 @@
 import { Card, Checkbox, Input, Space, Table } from "antd";
 import queryString from "query-string";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -16,12 +16,13 @@ import PayableExportAll from "../payable-export-all-button/payable-export-all-bu
 import PayableExportButton from "../payable-export-button/payable-export-button.component";
 import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import useLocalStorage from "./../../utils/useLocalStorage";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -31,7 +32,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
   const { t } = useTranslation();
   const [selectedBills, setSelectedBills] = useState([]);
   const [transInProgress, setTransInProgress] = useState(false);
-  const [state, setState] = useState({
+  const [state, setState] = useLocalStorage("accounting-payables-table-state", {
     sortedInfo: {},
     search: ""
   });
@@ -181,7 +182,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
         onChange={handleTableChange}
         rowSelection={{
           onSelectAll: (selected, selectedRows) => setSelectedBills(selectedRows.map((i) => i.id)),
-          onSelect: (record, selected, selectedRows, nativeEvent) => {
+          onSelect: (record, selected, selectedRows) => {
             setSelectedBills(selectedRows.map((i) => i.id));
           },
           getCheckboxProps: (record) => ({

client/src/components/accounting-payments-table/accounting-payments-table.component.jsx

@@ -1,5 +1,5 @@
 import { Card, Input, Space, Table } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -10,6 +10,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
 import { exportPageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import PaymentExportButton from "../payment-export-button/payment-export-button.component";
@@ -21,7 +22,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -31,7 +32,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
   const { t } = useTranslation();
   const [selectedPayments, setSelectedPayments] = useState([]);
   const [transInProgress, setTransInProgress] = useState(false);
-  const [state, setState] = useState({
+  const [state, setState] = useLocalStorage("accounting-payments-table-state", {
     sortedInfo: {},
     search: ""
   });
@@ -194,7 +195,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
         onChange={handleTableChange}
         rowSelection={{
           onSelectAll: (selected, selectedRows) => setSelectedPayments(selectedRows.map((i) => i.id)),
-          onSelect: (record, selected, selectedRows, nativeEvent) => {
+          onSelect: (record, selected, selectedRows) => {
             setSelectedPayments(selectedRows.map((i) => i.id));
           },
           getCheckboxProps: (record) => ({

client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx

@@ -1,5 +1,5 @@
 import { Button, Card, Input, Space, Table } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -10,6 +10,7 @@ import { exportPageLimit } from "../../utils/config";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import JobExportButton from "../jobs-close-export-button/jobs-close-export-button.component";
 import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-button.component";
@@ -20,7 +21,7 @@ import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(AccountingReceivablesTableComponent);
@@ -30,7 +31,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
   const [selectedJobs, setSelectedJobs] = useState([]);
   const [transInProgress, setTransInProgress] = useState(false);
 
-  const [state, setState] = useState({
+  const [state, setState] = useLocalStorage("accounting-receivables-table-state", {
     sortedInfo: {},
     search: ""
   });
@@ -207,7 +208,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
         onChange={handleTableChange}
         rowSelection={{
           onSelectAll: (selected, selectedRows) => setSelectedJobs(selectedRows.map((i) => i.id)),
-          onSelect: (record, selected, selectedRows, nativeEvent) => {
+          onSelect: (record, selected, selectedRows) => {
             setSelectedJobs(selectedRows.map((i) => i.id));
           },
           getCheckboxProps: (record) => ({

client/src/components/dms-post-form/dms-post-form.component.jsx

@@ -14,7 +14,6 @@ import {
   Typography
 } from "antd";
 import Dinero from "dinero.js";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -24,14 +23,14 @@ import i18n from "../../translations/i18n";
 import dayjs from "../../utils/day";
 import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
 import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(DmsPostForm);
@@ -93,7 +92,9 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                 })
               : ""
           }`.slice(0, 239),
-          inservicedate: dayjs("2019-01-01")
+          inservicedate: dayjs(
+            `${(job.v_model_yr && (job.v_model_yr < 100 ? (job.v_model_yr >= (dayjs().year() + 1) % 100 ? 1900 + parseInt(job.v_model_yr) : 2000 + parseInt(job.v_model_yr)) : job.v_model_yr)) || 2019}-01-01`
+          )
         }}
       >
         <LayoutFormRow grow>

client/src/components/form-items-formatted/labor-type-form-item.component.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 
-const LaborTypeFormItem = ({ value, onChange }, ref) => {
+const LaborTypeFormItem = ({ value }) => {
   const { t } = useTranslation();
 
   if (!value) return null;

client/src/components/form-items-formatted/part-type-form-item.component.jsx

@@ -1,11 +1,13 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 
-const PartTypeFormItem = ({ value, onChange }, ref) => {
+const PartTypeFormItem = ({ value }) => {
   const { t } = useTranslation();
 
   if (!value) return null;
 
-  return <div>{t(`joblines.fields.part_types.${value}`)}</div>;
+  return (
+    <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{t(`joblines.fields.part_types.${value}`)}</div>
+  );
 };
 export default forwardRef(PartTypeFormItem);

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

@@ -1,6 +1,5 @@
 import Dinero from "dinero.js";
-import React, { forwardRef } from "react";
-
+import { forwardRef } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -8,23 +7,24 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-const ReadOnlyFormItem = ({ bodyshop, value, type = "text", onChange }, ref) => {
+const ReadOnlyFormItem = ({ bodyshop, value, type = "text" }) => {
   if (!value) return null;
   switch (type) {
-    case "employee":
+    case "employee": {
       const emp = bodyshop.employees.find((e) => e.id === value);
       return `${emp?.first_name} ${emp?.last_name}`;
+    }
 
     case "text":
-      return <div>{value}</div>;
+      return <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{value}</div>;
     case "currency":
       return <div>{Dinero({ amount: Math.round(value * 100) }).toFormat()}</div>;
     default:
-      return <div>{value}</div>;
+      return <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{value}</div>;
   }
 };
 

client/src/components/job-notes-pin-toggle/job-notes-pin-toggle.component.jsx

@@ -1,44 +1,17 @@
 import { PushpinFilled, PushpinOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
 import { UPDATE_NOTE } from "../../graphql/notes.queries";
 
 function JobNotesPinToggle({ note }) {
-  const [updateNote] = useMutation(UPDATE_NOTE, {
-    update(cache, { data: { updateNote: updatedNote } }) {
-      try {
-        const existingJob = cache.readQuery({
-          query: GET_JOB_BY_PK,
-          variables: { id: note.jobid }
-        });
-
-        if (existingJob) {
-          cache.writeQuery({
-            query: GET_JOB_BY_PK,
-            variables: { id: note.jobid },
-            data: {
-              ...existingJob,
-              job: {
-                ...existingJob.job,
-                notes: updatedNote.pinned
-                  ? [updatedNote, ...existingJob.job.notes]
-                  : existingJob.job.notes.filter((n) => n.id !== updatedNote.id)
-              }
-            }
-          });
-        }
-      } catch (error) {
-        // Query not yet executed is most likely. No logging as this isn't a fatal error.
-      }
-    }
-  });
+  const [updateNote] = useMutation(UPDATE_NOTE);
 
   const handlePinToggle = () => {
     updateNote({
       variables: {
         noteId: note.id,
         note: { pinned: !note.pinned }
-      }
+      },
+      refetchQueries: ["GET_JOB_BY_PK", "QUERY_JOB_CARD_DETAILS", "QUERY_PARTS_QUEUE_CARD_DETAILS"]
     });
   };
 

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

@@ -1,16 +1,16 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Button, Dropdown } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { UPDATE_JOB_STATUS } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -24,7 +24,6 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
   const { t } = useTranslation();
 
   const [availableStatuses, setAvailableStatuses] = useState([]);
-  const [otherStages, setOtherStages] = useState([]);
   const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
   const notification = useNotification();
 
@@ -32,7 +31,7 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
     mutationUpdateJobstatus({
       variables: { jobId: job.id, status: status }
     })
-      .then((r) => {
+      .then(() => {
         notification["success"]({ message: t("jobs.successes.save") });
         insertAuditTrail({
           jobid: job.id,
@@ -41,7 +40,7 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
         });
         // refetch();
       })
-      .catch((error) => {
+      .catch(() => {
         notification["error"]({ message: t("jobs.errors.saving") });
       });
   };
@@ -51,19 +50,14 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
     if (job && bodyshop) {
       if (bodyshop.md_ro_statuses.pre_production_statuses.includes(job.status)) {
         setAvailableStatuses(bodyshop.md_ro_statuses.pre_production_statuses);
-        if (bodyshop.md_ro_statuses.production_statuses[0])
-          setOtherStages([bodyshop.md_ro_statuses.production_statuses[0]]);
       } else if (bodyshop.md_ro_statuses.production_statuses.includes(job.status)) {
         setAvailableStatuses(bodyshop.md_ro_statuses.production_statuses);
-        setOtherStages([bodyshop.md_ro_statuses.default_imported, bodyshop.md_ro_statuses.default_delivered]);
       } else if (bodyshop.md_ro_statuses.post_production_statuses.includes(job.status)) {
         setAvailableStatuses(
           bodyshop.md_ro_statuses.post_production_statuses.filter(
             (s) => s !== bodyshop.md_ro_statuses.default_invoiced && s !== bodyshop.md_ro_statuses.default_exported
           )
         );
-        if (bodyshop.md_ro_statuses.production_statuses[0])
-          setOtherStages([bodyshop.md_ro_statuses.production_statuses[0]]);
       } else {
         console.log("Status didn't match any restrictions. Allowing all status changes.");
         setAvailableStatuses(bodyshop.md_ro_statuses.statuses);
@@ -76,16 +70,7 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
       ...availableStatuses.map((item) => ({
         key: item,
         label: item
-      })),
-      ...(job.converted
-        ? [
-            { type: "divider" },
-            ...otherStages.map((item) => ({
-              key: item,
-              label: item
-            }))
-          ]
-        : [])
+      }))
     ],
     onClick: (e) => updateJobStatus(e.key)
   };

client/src/components/jobs-close-lines/jobs-close-lines.component.jsx

@@ -1,5 +1,5 @@
+import { WarningOutlined } from "@ant-design/icons";
 import { Form, Select, Space, Tooltip } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -8,14 +8,13 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import LaborTypeFormItem from "../form-items-formatted/labor-type-form-item.component";
 import PartTypeFormItem from "../form-items-formatted/part-type-form-item.component";
 import ReadOnlyFormItem from "../form-items-formatted/read-only-form-item.component";
-import { WarningOutlined } from "@ant-design/icons";
 import "./jobs-close-lines.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -24,7 +23,7 @@ export function JobsCloseLines({ bodyshop, job, jobRO }) {
   return (
     <div>
       <Form.List name={["joblines"]}>
-        {(fields, { add, remove, move }) => {
+        {(fields) => {
           return (
             <table className="jobs-close-table">
               <thead>

client/src/components/note-upsert-modal/note-upsert-modal.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useApolloClient, useMutation } from "@apollo/client";
 import { Form, Modal } from "antd";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -43,6 +43,8 @@ export function NoteUpsertModalContainer({ currentUser, noteUpsertModal, toggleM
 
   const [form] = Form.useForm();
 
+  const { client } = useApolloClient();
+
   useEffect(() => {
     //Required to prevent infinite looping.
     if (existingNote && open) {
@@ -67,34 +69,8 @@ export function NoteUpsertModalContainer({ currentUser, noteUpsertModal, toggleM
           noteId: existingNote.id,
           note: values
         },
-        update(cache, { data: { updateNote: updatedNote } }) {
-          try {
-            const existingJob = cache.readQuery({
-              query: GET_JOB_BY_PK,
-              variables: { id: jobId }
-            });
-
-            if (existingJob) {
-              cache.writeQuery({
-                query: GET_JOB_BY_PK,
-                variables: { id: jobId },
-                data: {
-                  ...existingJob,
-                  job: {
-                    ...existingJob.job,
-                    notes: updatedNote.pinned
-                      ? [updatedNote, ...existingJob.job.notes]
-                      : existingJob.job.notes.filter((n) => n.id !== updatedNote.id)
-                  }
-                }
-              });
-            }
-          } catch (error) {
-            // Cache miss is okay, query hasn't been executed yet
-            console.log("Cache miss for GET_JOB_BY_PK");
-          }
-        }
-      }).then((r) => {
+        refetchQueries: ["GET_JOB_BY_PK", "QUERY_JOB_CARD_DETAILS", "QUERY_PARTS_QUEUE_CARD_DETAILS"]
+      }).then(() => {
         notification["success"]({
           message: t("notes.successes.updated")
         });

client/src/components/rbac-wrapper/rbac-defaults.js

@@ -59,6 +59,7 @@ const ret = {
   "shop:dashboard": 3,
   "shop:rbac": 5,
   "shop:reportcenter": 2,
+  "shop:responsibilitycenter": 4, // Updated from "shop:responsibility" to "shop:responsibilitycenter"
   "shop:templates": 4,
   "shop:vendors": 2,
 

client/src/components/shop-info/shop-info.container.jsx

@@ -1,15 +1,16 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form } from "antd";
-import dayjs from "../../utils/day";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { QUERY_BODYSHOP, UPDATE_SHOP } from "../../graphql/bodyshop.queries";
+import dayjs from "../../utils/day";
 import AlertComponent from "../alert/alert.component";
 import FormsFieldChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import ShopInfoComponent from "./shop-info.component";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { FEATURE_CONFIGS, useFormDataPreservation } from "./useFormDataPreservation";
 
 export default function ShopInfoContainer() {
   const [form] = Form.useForm();
@@ -22,16 +23,24 @@ export default function ShopInfoContainer() {
   });
   const notification = useNotification();
 
-  const handleFinish = (values) => {
+  const combinedFeatureConfig = {
+    ...FEATURE_CONFIGS.general,
+    ...FEATURE_CONFIGS.responsibilitycenters
+  };
+
+  // Use form data preservation for all shop-info features
+  const { createSubmissionHandler } = useFormDataPreservation(form, data?.bodyshops[0], combinedFeatureConfig);
+
+  const handleFinish = createSubmissionHandler((values) => {
     setSaveLoading(true);
     logImEXEvent("shop_update");
 
     updateBodyshop({
       variables: { id: data.bodyshops[0].id, shop: values }
     })
-      .then((r) => {
+      .then(() => {
         notification["success"]({ message: t("bodyshop.successes.save") });
-        refetch().then((_) => form.resetFields());
+        refetch().then(() => form.resetFields());
       })
       .catch((error) => {
         notification["error"]({
@@ -39,7 +48,7 @@ export default function ShopInfoContainer() {
         });
       });
     setSaveLoading(false);
-  };
+  });
 
   useEffect(() => {
     if (data) form.resetFields();

client/src/components/shop-info/shop-info.general.component.jsx

@@ -145,124 +145,168 @@ 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"]}>
-              <Switch />
-            </Form.Item>
-            {InstanceRenderManager({
-              imex: (
-                <Form.Item shouldUpdate noStyle>
-                  {() => (
-                    <Form.Item
-                      label={t("bodyshop.labels.qbo_usa")}
-                      shouldUpdate
-                      valuePropName="checked"
-                      name={["accountingconfig", "qbo_usa"]}
-                    >
-                      <Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
-                    </Form.Item>
-                  )}
-                </Form.Item>
-              )
-            })}
-            <Form.Item label={t("bodyshop.labels.qbo_departmentid")} name={["accountingconfig", "qbo_departmentid"]}>
-              <Input />
-            </Form.Item>
-            <Form.Item
-              label={t("bodyshop.labels.accountingtiers")}
-              rules={[
-                {
-                  required: true
-                  //message: t("general.validation.required"),
-                }
-              ]}
-              name={["accountingconfig", "tiers"]}
-            >
-              <Radio.Group>
-                <Radio value={2}>2</Radio>
-                <Radio value={3}>3</Radio>
-              </Radio.Group>
-            </Form.Item>
-            <Form.Item shouldUpdate>
-              {() => {
-                return (
-                  <Form.Item
-                    label={t("bodyshop.labels.2tiersetup")}
-                    shouldUpdate
-                    rules={[
-                      {
-                        required: form.getFieldValue(["accountingconfig", "tiers"]) === 2
-                        //message: t("general.validation.required"),
-                      }
-                    ]}
-                    name={["accountingconfig", "twotierpref"]}
-                  >
-                    <Radio.Group disabled={form.getFieldValue(["accountingconfig", "tiers"]) === 3}>
-                      <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
-                      <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
-                    </Radio.Group>
-                  </Form.Item>
-                );
-              }}
-            </Form.Item>
-            <Form.Item
-              label={t("bodyshop.labels.printlater")}
-              valuePropName="checked"
-              name={["accountingconfig", "printlater"]}
-            >
-              <Switch />
-            </Form.Item>
-            <Form.Item
-              label={t("bodyshop.labels.emaillater")}
-              valuePropName="checked"
-              name={["accountingconfig", "emaillater"]}
-            >
-              <Switch />
-            </Form.Item>
-          </>
-        )}
-        <Form.Item
-          label={t("bodyshop.fields.inhousevendorid")}
-          name={"inhousevendorid"}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.default_adjustment_rate")}
-          name={"default_adjustment_rate"}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-        >
-          <InputNumber min={0} precision={2} />
-        </Form.Item>
-        {InstanceRenderManager({
-          imex: (
-            <Form.Item 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">
-          <Input />
-        </Form.Item>
-        {HasFeatureAccess({ featureName: "bills", bodyshop }) && (
-          <>
-            {InstanceRenderManager({
-              imex: (
+        {[
+          ...(HasFeatureAccess({ featureName: "export", bodyshop })
+            ? [
                 <Form.Item
-                  label={t("bodyshop.fields.invoice_federal_tax_rate")}
-                  name={["bill_tax_rates", "federal_tax_rate"]}
+                  key="qbo"
+                  label={t("bodyshop.labels.qbo")}
+                  valuePropName="checked"
+                  name={["accountingconfig", "qbo"]}
+                >
+                  <Switch />
+                </Form.Item>,
+                InstanceRenderManager({
+                  imex: (
+                    <Form.Item key="qbo_usa_wrapper" shouldUpdate noStyle>
+                      {() => (
+                        <Form.Item
+                          label={t("bodyshop.labels.qbo_usa")}
+                          shouldUpdate
+                          valuePropName="checked"
+                          name={["accountingconfig", "qbo_usa"]}
+                        >
+                          <Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
+                        </Form.Item>
+                      )}
+                    </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={[
+                    {
+                      required: true
+                      //message: t("general.validation.required"),
+                    }
+                  ]}
+                  name={["accountingconfig", "tiers"]}
+                >
+                  <Radio.Group>
+                    <Radio value={2}>2</Radio>
+                    <Radio value={3}>3</Radio>
+                  </Radio.Group>
+                </Form.Item>,
+                <Form.Item key="twotierpref_wrapper" shouldUpdate>
+                  {() => {
+                    return (
+                      <Form.Item
+                        label={t("bodyshop.labels.2tiersetup")}
+                        shouldUpdate
+                        rules={[
+                          {
+                            required: form.getFieldValue(["accountingconfig", "tiers"]) === 2
+                            //message: t("general.validation.required"),
+                          }
+                        ]}
+                        name={["accountingconfig", "twotierpref"]}
+                      >
+                        <Radio.Group disabled={form.getFieldValue(["accountingconfig", "tiers"]) === 3}>
+                          <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
+                          <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
+                        </Radio.Group>
+                      </Form.Item>
+                    );
+                  }}
+                </Form.Item>,
+                <Form.Item
+                  key="printlater"
+                  label={t("bodyshop.labels.printlater")}
+                  valuePropName="checked"
+                  name={["accountingconfig", "printlater"]}
+                >
+                  <Switch />
+                </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={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+          >
+            <Input />
+          </Form.Item>,
+          <Form.Item
+            key="default_adjustment_rate"
+            label={t("bodyshop.fields.default_adjustment_rate")}
+            name={"default_adjustment_rate"}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+          >
+            <InputNumber min={0} precision={2} />
+          </Form.Item>,
+          InstanceRenderManager({
+            imex: (
+              <Form.Item key="federal_tax_id" label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
+                <Input />
+              </Form.Item>
+            )
+          }),
+          <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({
+                  imex: (
+                    <Form.Item
+                      key="invoice_federal_tax_rate"
+                      label={t("bodyshop.fields.invoice_federal_tax_rate")}
+                      name={["bill_tax_rates", "federal_tax_rate"]}
+                      rules={[
+                        {
+                          required: true
+                          //message: t("general.validation.required"),
+                        }
+                      ]}
+                    >
+                      <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={[
+                    {
+                      required: true
+                      //message: t("general.validation.required"),
+                    }
+                  ]}
+                >
+                  <InputNumber />
+                </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={[
                     {
                       required: true
@@ -272,117 +316,118 @@ export function ShopInfoGeneral({ form, bodyshop }) {
                 >
                   <InputNumber />
                 </Form.Item>
-              )
-            })}
-            <Form.Item
-              label={t("bodyshop.fields.invoice_state_tax_rate")}
-              name={["bill_tax_rates", "state_tax_rate"]}
-              rules={[
-                {
-                  required: true
-                  //message: t("general.validation.required"),
-                }
-              ]}
-            >
-              <InputNumber />
-            </Form.Item>
-            <Form.Item
-              label={t("bodyshop.fields.invoice_local_tax_rate")}
-              name={["bill_tax_rates", "local_tax_rate"]}
-              rules={[
-                {
-                  required: true
-                  //message: t("general.validation.required"),
-                }
-              ]}
-            >
-              <InputNumber />
-            </Form.Item>
-          </>
-        )}
-        <Form.Item
-          name={["md_payment_types"]}
-          label={t("bodyshop.fields.md_payment_types")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        <Form.Item
-          name={["md_categories"]}
-          label={t("bodyshop.fields.md_categories")}
-          rules={[
-            {
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        {HasFeatureAccess({ featureName: "export", bodyshop }) && (
-          <>
-            <Form.Item
-              name={["accountingconfig", "ReceivableCustomField1"]}
-              label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
-            >
-              {ReceivableCustomFieldSelect}
-            </Form.Item>
-            <Form.Item
-              name={["accountingconfig", "ReceivableCustomField2"]}
-              label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
-            >
-              {ReceivableCustomFieldSelect}
-            </Form.Item>
-            <Form.Item
-              name={["accountingconfig", "ReceivableCustomField3"]}
-              label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
-            >
-              {ReceivableCustomFieldSelect}
-            </Form.Item>
-            <Form.Item
-              name={["md_classes"]}
-              label={t("bodyshop.fields.md_classes")}
-              rules={[
-                ({ getFieldValue }) => {
-                  return {
-                    required: getFieldValue("enforce_class"),
-                    //message: t("general.validation.required"),
-                    type: "array"
-                  };
-                }
-              ]}
-            >
-              <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
-                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")}>
-                <Input />
-              </Form.Item>
-            )}
-            {ADPPayroll.treatment === "on" && (
-              <Form.Item name={["accountingconfig", "batchID"]} label={t("bodyshop.fields.batchid")}>
-                <Input />
-              </Form.Item>
-            )}
-          </>
-        )}
+              ]
+            : []),
+          <Form.Item
+            key="md_payment_types"
+            name={["md_payment_types"]}
+            label={t("bodyshop.fields.md_payment_types")}
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+                type: "array"
+              }
+            ]}
+          >
+            <Select mode="tags" />
+          </Form.Item>,
+          <Form.Item
+            key="md_categories"
+            name={["md_categories"]}
+            label={t("bodyshop.fields.md_categories")}
+            rules={[
+              {
+                //message: t("general.validation.required"),
+                type: "array"
+              }
+            ]}
+          >
+            <Select mode="tags" />
+          </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
+                  key="ReceivableCustomField2"
+                  name={["accountingconfig", "ReceivableCustomField2"]}
+                  label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
+                >
+                  {ReceivableCustomFieldSelect}
+                </Form.Item>,
+                <Form.Item
+                  key="ReceivableCustomField3"
+                  name={["accountingconfig", "ReceivableCustomField3"]}
+                  label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
+                >
+                  {ReceivableCustomFieldSelect}
+                </Form.Item>,
+                <Form.Item
+                  key="md_classes"
+                  name={["md_classes"]}
+                  label={t("bodyshop.fields.md_classes")}
+                  rules={[
+                    ({ getFieldValue }) => {
+                      return {
+                        required: getFieldValue("enforce_class"),
+                        //message: t("general.validation.required"),
+                        type: "array"
+                      };
+                    }
+                  ]}
+                >
+                  <Select mode="tags" />
+                </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
+                        key="companyCode"
+                        name={["accountingconfig", "companyCode"]}
+                        label={t("bodyshop.fields.companycode")}
+                      >
+                        <Input />
+                      </Form.Item>
+                    ]
+                  : []),
+                ...(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,211 +491,255 @@ export function ShopInfoGeneral({ form, bodyshop }) {
         </LayoutFormRow>
       </FeatureWrapper>
       <LayoutFormRow header={t("bodyshop.labels.systemsettings")} id="systemsettings">
-        <Form.Item
-          name={["md_referral_sources"]}
-          label={t("bodyshop.fields.md_referral_sources")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        <Form.Item name={["enforce_referral"]} label={t("bodyshop.fields.enforce_referral")} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["enforce_conversion_csr"]}
-          label={t("bodyshop.fields.enforce_conversion_csr")}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["enforce_conversion_category"]}
-          label={t("bodyshop.fields.enforce_conversion_category")}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["target_touchtime"]}
-          label={t("bodyshop.fields.target_touchtime")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-        >
-          <InputNumber min={0.1} precision={1} />
-        </Form.Item>
-        <Form.Item label={t("bodyshop.fields.use_fippa")} name={["use_fippa"]} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.md_hour_split.prep")}
-          name={["md_hour_split", "prep"]}
-          dependencies={[["md_hour_split", "paint"]]}
-          rules={[
-            ({ getFieldValue }) => ({
-              validator(rule, value) {
-                if (!value && !getFieldValue(["md_hour_split", "paint"])) {
-                  return Promise.resolve();
-                }
-                if (value + getFieldValue(["md_hour_split", "paint"]) === 1) {
-                  return Promise.resolve();
-                }
-                return Promise.reject(t("bodyshop.validation.larsplit"));
+        {[
+          <Form.Item
+            key="md_referral_sources"
+            name={["md_referral_sources"]}
+            label={t("bodyshop.fields.md_referral_sources")}
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+                type: "array"
               }
-            })
-          ]}
-        >
-          <InputNumber min={0} max={1} precision={2} />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.md_hour_split.paint")}
-          name={["md_hour_split", "paint"]}
-          dependencies={[["md_hour_split", "prep"]]}
-          rules={[
-            ({ getFieldValue }) => ({
-              validator(rule, value) {
-                if (!value && !getFieldValue(["md_hour_split", "paint"])) {
-                  return Promise.resolve();
-                }
-                if (value + getFieldValue(["md_hour_split", "prep"]) === 1) {
-                  return Promise.resolve();
-                }
-                return Promise.reject(t("bodyshop.validation.larsplit"));
+            ]}
+          >
+            <Select mode="tags" />
+          </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
+            key="enforce_conversion_category"
+            name={["enforce_conversion_category"]}
+            label={t("bodyshop.fields.enforce_conversion_category")}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>,
+          <Form.Item
+            key="target_touchtime"
+            name={["target_touchtime"]}
+            label={t("bodyshop.fields.target_touchtime")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
               }
-            })
-          ]}
-        >
-          <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
-          name={["use_paint_scale_data"]}
-          label={t("bodyshop.fields.use_paint_scale_data")}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["attach_pdf_to_email"]}
-          label={t("bodyshop.fields.attach_pdf_to_email")}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["md_from_emails"]}
-          label={t("bodyshop.fields.md_from_emails")}
-          // rules={[
-          //   {
-          //     //message: t("general.validation.required"),
-          //     type: "array",
-          //   },
-          // ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        <Form.Item
-          name={["md_email_cc", "parts_order"]}
-          label={t("bodyshop.fields.md_email_cc", { template: "parts_orders" })}
-          rules={[
-            {
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        <Form.Item
-          name={["md_email_cc", "parts_return_slip"]}
-          label={t("bodyshop.fields.md_email_cc", { template: "parts_returns" })}
-          rules={[
-            {
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-
-        {HasFeatureAccess({ featureName: "timetickets", bodyshop }) && (
-          <>
-            <Form.Item
-              name={["tt_allow_post_to_invoiced"]}
-              label={t("bodyshop.fields.tt_allow_post_to_invoiced")}
-              valuePropName="checked"
-            >
-              <Switch />
-            </Form.Item>
-            <Form.Item
-              name={["tt_enforce_hours_for_tech_console"]}
-              label={t("bodyshop.fields.tt_enforce_hours_for_tech_console")}
-              valuePropName="checked"
-            >
-              <Switch />
-            </Form.Item>
-            <Form.Item
-              name={["bill_allow_post_to_closed"]}
-              label={t("bodyshop.fields.bill_allow_post_to_closed")}
-              valuePropName="checked"
-            >
-              <Switch />
-            </Form.Item>
-          </>
-        )}
-        <Form.Item
-          name={["md_ded_notes"]}
-          label={t("bodyshop.fields.md_ded_notes")}
-          rules={[
-            {
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        <Form.Item
-          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
-          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")}>
-          <Input />
-        </Form.Item>
+            ]}
+          >
+            <InputNumber min={0.1} precision={1} />
+          </Form.Item>,
+          <Form.Item key="use_fippa" label={t("bodyshop.fields.use_fippa")} name={["use_fippa"]} valuePropName="checked">
+            <Switch />
+          </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"]]}
+            rules={[
+              ({ getFieldValue }) => ({
+                validator(rule, value) {
+                  if (!value && !getFieldValue(["md_hour_split", "paint"])) {
+                    return Promise.resolve();
+                  }
+                  if (value + getFieldValue(["md_hour_split", "paint"]) === 1) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(t("bodyshop.validation.larsplit"));
+                }
+              })
+            ]}
+          >
+            <InputNumber min={0} max={1} precision={2} />
+          </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"]]}
+            rules={[
+              ({ getFieldValue }) => ({
+                validator(rule, value) {
+                  if (!value && !getFieldValue(["md_hour_split", "paint"])) {
+                    return Promise.resolve();
+                  }
+                  if (value + getFieldValue(["md_hour_split", "prep"]) === 1) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(t("bodyshop.validation.larsplit"));
+                }
+              })
+            ]}
+          >
+            <InputNumber min={0} max={1} precision={2} />
+          </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
+            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
+            key="md_from_emails"
+            name={["md_from_emails"]}
+            label={t("bodyshop.fields.md_from_emails")}
+            // rules={[
+            //   {
+            //     //message: t("general.validation.required"),
+            //     type: "array",
+            //   },
+            // ]}
+          >
+            <Select mode="tags" />
+          </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={[
+              {
+                //message: t("general.validation.required"),
+                type: "array"
+              }
+            ]}
+          >
+            <Select mode="tags" />
+          </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={[
+              {
+                //message: t("general.validation.required"),
+                type: "array"
+              }
+            ]}
+          >
+            <Select mode="tags" />
+          </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
+                  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
+                  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={[
+              {
+                //message: t("general.validation.required"),
+                type: "array"
+              }
+            ]}
+          >
+            <Select mode="tags" />
+          </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
+            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
+            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

client/src/components/shop-info/useFormDataPreservation.js

@@ -0,0 +1,140 @@
+import { useEffect } from "react";
+import { HasFeatureAccess } from "./../feature-wrapper/feature-wrapper.component";
+
+/**
+ * Custom hook to preserve form data for conditionally hidden fields based on feature access
+ * @param {Object} form - Ant Design form instance
+ * @param {Object} bodyshop - Bodyshop data for feature access checks (also contains existing database values)
+ * @param {Object} featureConfig - Configuration object defining which features and their associated fields to preserve
+ */
+export const useFormDataPreservation = (form, bodyshop, featureConfig) => {
+  const getNestedValue = (obj, path) => {
+    return path.reduce((current, key) => current?.[key], obj);
+  };
+
+  const setNestedValue = (obj, path, value) => {
+    const lastKey = path[path.length - 1];
+    const parentPath = path.slice(0, -1);
+
+    const parent = parentPath.reduce((current, key) => {
+      if (!current[key]) current[key] = {};
+      return current[key];
+    }, obj);
+
+    parent[lastKey] = value;
+  };
+
+  const preserveHiddenFormData = () => {
+    const preservationData = {};
+    let hasDataToPreserve = false;
+
+    Object.entries(featureConfig).forEach(([featureName, fieldPaths]) => {
+      const hasAccess = HasFeatureAccess({ featureName, bodyshop });
+
+      if (!hasAccess) {
+        fieldPaths.forEach((fieldPath) => {
+          const currentValues = form.getFieldsValue();
+          let value = getNestedValue(currentValues, fieldPath);
+
+          if (value === undefined || value === null) {
+            value = getNestedValue(bodyshop, fieldPath);
+          }
+
+          if (value !== undefined && value !== null) {
+            setNestedValue(preservationData, fieldPath, value);
+            hasDataToPreserve = true;
+          }
+        });
+      }
+    });
+
+    if (hasDataToPreserve) {
+      form.setFieldsValue(preservationData);
+    }
+  };
+
+  const getCompleteFormValues = () => {
+    const currentFormValues = form.getFieldsValue();
+    const completeValues = { ...currentFormValues };
+
+    Object.entries(featureConfig).forEach(([featureName, fieldPaths]) => {
+      const hasAccess = HasFeatureAccess({ featureName, bodyshop });
+
+      if (!hasAccess) {
+        fieldPaths.forEach((fieldPath) => {
+          let value = getNestedValue(currentFormValues, fieldPath);
+          if (value === undefined || value === null) {
+            value = getNestedValue(bodyshop, fieldPath);
+          }
+
+          if (value !== undefined && value !== null) {
+            setNestedValue(completeValues, fieldPath, value);
+          }
+        });
+      }
+    });
+
+    return completeValues;
+  };
+
+  const createSubmissionHandler = (originalHandler) => {
+    return () => {
+      const completeValues = getCompleteFormValues();
+
+      // Call the original handler with complete values including hidden data
+      return originalHandler(completeValues);
+    };
+  };
+
+  useEffect(() => {
+    preserveHiddenFormData();
+  }, [bodyshop]);
+
+  return { preserveHiddenFormData, getCompleteFormValues, createSubmissionHandler };
+};
+
+/**
+ * Predefined feature configurations for common shop-info components
+ */
+export const FEATURE_CONFIGS = {
+  responsibilitycenters: {
+    export: [
+      ["md_responsibility_centers", "costs"],
+      ["md_responsibility_centers", "profits"],
+      ["md_responsibility_centers", "defaults"],
+      ["md_responsibility_centers", "dms_defaults"],
+      ["md_responsibility_centers", "taxes", "itemexemptcode"],
+      ["md_responsibility_centers", "taxes", "invoiceexemptcode"],
+      ["md_responsibility_centers", "ar"],
+      ["md_responsibility_centers", "refund"],
+      ["md_responsibility_centers", "sales_tax_codes"],
+      ["md_responsibility_centers", "ttl_adjustment"],
+      ["md_responsibility_centers", "ttl_tax_adjustment"]
+    ]
+  },
+  general: {
+    export: [
+      ["accountingconfig", "qbo"],
+      ["accountingconfig", "qbo_usa"],
+      ["accountingconfig", "qbo_departmentid"],
+      ["accountingconfig", "tiers"],
+      ["accountingconfig", "twotierpref"],
+      ["accountingconfig", "printlater"],
+      ["accountingconfig", "emaillater"],
+      ["accountingconfig", "ReceivableCustomField1"],
+      ["accountingconfig", "ReceivableCustomField2"],
+      ["accountingconfig", "ReceivableCustomField3"],
+      ["md_classes"],
+      ["enforce_class"],
+      ["accountingconfig", "ClosingPeriod"],
+      ["accountingconfig", "companyCode"],
+      ["accountingconfig", "batchID"]
+    ],
+    bills: [
+      ["bill_tax_rates", "federal_tax_rate"],
+      ["bill_tax_rates", "state_tax_rate"],
+      ["bill_tax_rates", "local_tax_rate"]
+    ],
+    timetickets: [["tt_allow_post_to_invoiced"], ["tt_enforce_hours_for_tech_console"], ["bill_allow_post_to_closed"]]
+  }
+};

client/src/components/vendor-search-select/vendor-search-select.component.jsx

@@ -52,6 +52,7 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
             >
               {label}
             </div>
+
             {discount && discount !== 0 ? <Tag color="green">{`${discount * 100}%`}</Tag> : null}
           </div>
         );
@@ -116,6 +117,11 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
                 {o.name}
               </div>
               <Space style={{ marginLeft: "1rem" }}>
+                {o.tags?.map((tag, idx) => (
+                  <Tag key={idx} style={{ marginLeft: "0.5rem" }}>
+                    {tag}
+                  </Tag>
+                ))}
                 {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
                 {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
               </Space>

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

@@ -1,7 +1,7 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Button, Divider, Form, Input, InputNumber, Space, Switch } from "antd";
+import { Button, Divider, Form, Input, InputNumber, Select, Space, Switch } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -179,6 +179,18 @@ export function VendorsFormComponent({
         }
       </LayoutFormRow>
 
+      <Form.Item
+        name="tags"
+        label={t("vendor.fields.tags")}
+        rules={[
+          {
+            //message: t("general.validation.required"),
+            type: "array"
+          }
+        ]}
+      >
+        <Select mode="tags" />
+      </Form.Item>
       {DmsAp.treatment === "on" && (
         <Form.Item label={t("vendors.fields.dmsid")} name="dmsid">
           <Input />

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

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table } from "antd";
+import { Button, Card, Input, Space, Table, Tag } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -38,6 +38,18 @@ export default function VendorsListComponent({ handleNewVendor, loading, handleO
       title: t("vendors.fields.city"),
       dataIndex: "city",
       key: "city"
+    },
+    {
+      title: t("vendors.fields.tags"),
+      dataIndex: "tags",
+      key: "tags",
+      render: (text, record) => (
+        <Space>
+          {record?.tags?.map((tag, idx) => (
+            <Tag key={idx}>{tag}</Tag>
+          ))}
+        </Space>
+      )
     }
   ];
 

client/src/contexts/SocketIO/socketProvider.jsx

@@ -32,7 +32,6 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
   const socketRef = useRef(null);
   const [clientId, setClientId] = useState(null);
   const [isConnected, setIsConnected] = useState(false);
-  const [socketInitialized, setSocketInitialized] = useState(false);
   const notification = useNotification();
   const userAssociationId = bodyshop?.associations?.[0]?.id;
   const { t } = useTranslation();
@@ -148,13 +147,6 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
     onError: (err) => console.error("MARK_ALL_NOTIFICATIONS_READ error:", err)
   });
 
-  const checkAndReconnect = () => {
-    if (socketRef.current && !socketRef.current.connected) {
-      console.log("Attempting manual reconnect due to event trigger");
-      socketRef.current.connect();
-    }
-  };
-
   useEffect(() => {
     const initializeSocket = async (token) => {
       if (!bodyshop || !bodyshop.id || socketRef.current) return;
@@ -166,14 +158,13 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
         auth: { token, bodyshopId: bodyshop.id },
         reconnectionAttempts: Infinity,
         reconnectionDelay: 2000,
-        reconnectionDelayMax: 60000,
-        randomizationFactor: 0.5,
-        transports: ["websocket", "polling"], // Add this to prefer WebSocket with polling fallback
-        rememberUpgrade: true
+        reconnectionDelayMax: 60000
+        // randomizationFactor: 0.5,
+        // transports: ["websocket", "polling"], // Add this to prefer WebSocket with polling fallback
+        // rememberUpgrade: true
       });
 
       socketRef.current = socketInstance;
-      setSocketInitialized(true);
 
       const handleBodyshopMessage = (message) => {
         if (!message || !message.type) return;
@@ -261,7 +252,7 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
             break;
         }
       };
-      
+
       const handleConnect = () => {
         socketInstance.emit("join-bodyshop-room", bodyshop.id);
         setClientId(socketInstance.id);
@@ -558,57 +549,6 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
     t
   ]);
 
-  useEffect(() => {
-    if (!socketInitialized) return;
-
-    const onVisibilityChange = () => {
-      if (document.visibilityState === "visible") {
-        checkAndReconnect();
-      }
-    };
-
-    const onFocus = () => {
-      checkAndReconnect();
-    };
-
-    const onOnline = () => {
-      checkAndReconnect();
-    };
-
-    const onPageShow = (event) => {
-      if (event.persisted) {
-        checkAndReconnect();
-      }
-    };
-
-    document.addEventListener("visibilitychange", onVisibilityChange);
-    window.addEventListener("focus", onFocus);
-    window.addEventListener("online", onOnline);
-    window.addEventListener("pageshow", onPageShow);
-
-    // Sleep/wake detection using timer
-    let lastTime = Date.now();
-    const intervalMs = 1000; // Check every second
-    const thresholdMs = 2000; // If more than 2 seconds elapsed, assume sleep/wake
-
-    const sleepCheckInterval = setInterval(() => {
-      const currentTime = Date.now();
-      if (currentTime > lastTime + intervalMs + thresholdMs) {
-        console.log("Detected potential wake from sleep/hibernate");
-        checkAndReconnect();
-      }
-      lastTime = currentTime;
-    }, intervalMs);
-
-    return () => {
-      document.removeEventListener("visibilitychange", onVisibilityChange);
-      window.removeEventListener("focus", onFocus);
-      window.removeEventListener("online", onOnline);
-      window.removeEventListener("pageshow", onPageShow);
-      clearInterval(sleepCheckInterval);
-    };
-  }, [socketInitialized]);
-
   return (
     <SocketContext.Provider
       value={{

client/src/graphql/vendors.queries.js

@@ -19,6 +19,7 @@ export const QUERY_VENDOR_BY_ID = gql`
       active
       phone
       dmsid
+      tags
     }
   }
 `;
@@ -54,6 +55,7 @@ export const QUERY_ALL_VENDORS = gql`
       city
       phone
       active
+      tags
     }
   }
 `;
@@ -89,6 +91,7 @@ export const QUERY_ALL_VENDORS_FOR_ORDER = gql`
       email
       active
       phone
+      tags
     }
     jobs(where: { id: { _eq: $jobId } }) {
       v_make_desc
@@ -105,6 +108,7 @@ export const SEARCH_VENDOR_AUTOCOMPLETE = gql`
       cost_center
       active
       favorite
+      tags
     }
   }
 `;
@@ -124,6 +128,7 @@ export const SEARCH_VENDOR_AUTOCOMPLETE_WITH_ADDR = gql`
       email
       state
       active
+      tags
     }
   }
 `;

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

@@ -2,7 +2,7 @@ import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Checkbox, Input, Space, Table, Typography } from "antd";
 import axios from "axios";
 import queryString from "query-string";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -13,8 +13,9 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
-import { alphaSort, dateSort } from "../../utils/sorters";
 import { pageLimit } from "../../utils/config";
+import { alphaSort, dateSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 
 const mapDispatchToProps = (dispatch) => ({
   setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
@@ -27,7 +28,7 @@ export function BillsListPage({ loading, data, refetch, total, setPartsOrderCont
   const [searchLoading, setSearchLoading] = useState(false);
   const { page } = search;
   const history = useNavigate();
-  const [state, setState] = useState({
+  const [state, setState] = useLocalStorage("bills_list_sort", {
     sortedInfo: {},
     filteredInfo: { text: "" }
   });

client/src/pages/jobs-close/jobs-close.component.jsx

@@ -271,7 +271,7 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail, set
               {
                 required: true
               },
-              ({ getFieldValue }) => ({
+              () => ({
                 validator(_, value) {
                   if (!bodyshop.cdk_dealerid) return Promise.resolve();
                   if (!value || dayjs(value).isSameOrAfter(dayjs(), "day")) {
@@ -280,7 +280,7 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail, set
                   return Promise.reject(new Error(t("jobs.labels.dms.invoicedatefuture")));
                 }
               }),
-              ({ getFieldValue }) => ({
+              () => ({
                 validator(_, value) {
                   if (ClosingPeriod.treatment === "on" && bodyshop.accountingconfig.ClosingPeriod) {
                     if (
@@ -369,8 +369,8 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail, set
                 <Form.List
                   name={["qb_multiple_payers"]}
                   rules={[
-                    ({ getFieldValue }) => ({
-                      validator(_, value) {
+                    () => ({
+                      validator() {
                         let totalAllocated = Dinero();
 
                         const payers = form.getFieldValue("qb_multiple_payers");
@@ -492,7 +492,7 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail, set
                         <Statistic
                           title={t("jobs.labels.pimraryamountpayable")}
                           valueStyle={{
-                            color: discrep.getAmount() > 0 ? "green" : "red"
+                            color: discrep.getAmount() >= 0 ? "green" : "red"
                           }}
                           value={discrep.toFormat()}
                         />

client/src/translations/en_us/common.json

@@ -517,6 +517,7 @@
             "dashboard": "Shop -> Dashboard",
             "rbac": "Shop -> RBAC",
             "reportcenter": "Shop -> Report Center",
+            "responsibilitycenter": "Shop -> Responsibility Centers",
             "templates": "Shop -> Templates",
             "vendors": "Shop -> Vendors"
           },
@@ -3890,6 +3891,7 @@
         "state": "Province/State",
         "street1": "Street",
         "street2": "Address 2",
+        "tags": "Tags",
         "taxid": "Tax ID",
         "terms": "Payment Terms",
         "zip": "Zip/Postal Code"

client/src/translations/es/common.json

@@ -517,6 +517,7 @@
             "dashboard": "",
             "rbac": "",
             "reportcenter": "",
+            "responsibilitycenter": "",
             "templates": "",
             "vendors": ""
           },
@@ -3890,6 +3891,7 @@
         "state": "Provincia del estado",
         "street1": "calle",
         "street2": "Dirección 2",
+        "tags": "",
         "taxid": "Identificación del impuesto",
         "terms": "Términos de pago",
         "zip": "código postal"

client/src/translations/fr/common.json

@@ -517,6 +517,7 @@
             "dashboard": "",
             "rbac": "",
             "reportcenter": "",
+            "responsibilitycenter": "",
             "templates": "",
             "vendors": ""
           },
@@ -3890,6 +3891,7 @@
         "state": "Etat / Province",
         "street1": "rue",
         "street2": "Adresse 2 ",
+        "tags": "",
         "taxid": "Identifiant de taxe",
         "terms": "Modalités de paiement",
         "zip": "Zip / code postal"

client/src/utils/RenderTemplate.js

@@ -48,24 +48,24 @@ export default async function RenderTemplate(
       ...(renderAsHtml
         ? {}
         : {
-            recipe: "chrome-pdf",
-            ...(!ignoreCustomMargins && {
-              chrome: {
-                marginTop:
-                  bodyshop.logo_img_path &&
+          recipe: "chrome-pdf",
+          ...(!ignoreCustomMargins && {
+            chrome: {
+              marginTop:
+                bodyshop.logo_img_path &&
                   bodyshop.logo_img_path.headerMargin &&
                   bodyshop.logo_img_path.headerMargin > 36
-                    ? bodyshop.logo_img_path.headerMargin
-                    : "36px",
-                marginBottom:
-                  bodyshop.logo_img_path &&
+                  ? bodyshop.logo_img_path.headerMargin
+                  : "36px",
+              marginBottom:
+                bodyshop.logo_img_path &&
                   bodyshop.logo_img_path.footerMargin &&
                   bodyshop.logo_img_path.footerMargin > 50
-                    ? bodyshop.logo_img_path.footerMargin
-                    : "50px"
-              }
-            })
-          }),
+                  ? bodyshop.logo_img_path.footerMargin
+                  : "50px"
+            }
+          })
+        }),
       ...(renderAsExcel ? { recipe: "html-to-xlsx" } : {}),
       ...(renderAsText ? { recipe: "text" } : {})
     },
@@ -100,14 +100,14 @@ export default async function RenderTemplate(
               chrome: {
                 marginTop:
                   bodyshop.logo_img_path &&
-                  bodyshop.logo_img_path.headerMargin &&
-                  bodyshop.logo_img_path.headerMargin > 36
+                    bodyshop.logo_img_path.headerMargin &&
+                    bodyshop.logo_img_path.headerMargin > 36
                     ? bodyshop.logo_img_path.headerMargin
                     : "36px",
                 marginBottom:
                   bodyshop.logo_img_path &&
-                  bodyshop.logo_img_path.footerMargin &&
-                  bodyshop.logo_img_path.footerMargin > 50
+                    bodyshop.logo_img_path.footerMargin &&
+                    bodyshop.logo_img_path.footerMargin > 50
                     ? bodyshop.logo_img_path.footerMargin
                     : "50px"
               }
@@ -182,22 +182,22 @@ export async function RenderTemplates(templateObjects, bodyshop, renderAsHtml =
       ...(renderAsHtml
         ? {}
         : {
-            recipe: "chrome-pdf",
-            chrome: {
-              marginTop:
-                bodyshop.logo_img_path &&
+          recipe: "chrome-pdf",
+          chrome: {
+            marginTop:
+              bodyshop.logo_img_path &&
                 bodyshop.logo_img_path.headerMargin &&
                 bodyshop.logo_img_path.headerMargin > 36
-                  ? bodyshop.logo_img_path.headerMargin
-                  : "36px",
-              marginBottom:
-                bodyshop.logo_img_path &&
+                ? bodyshop.logo_img_path.headerMargin
+                : "36px",
+            marginBottom:
+              bodyshop.logo_img_path &&
                 bodyshop.logo_img_path.footerMargin &&
                 bodyshop.logo_img_path.footerMargin > 50
-                  ? bodyshop.logo_img_path.footerMargin
-                  : "50px"
-            }
-          }),
+                ? bodyshop.logo_img_path.footerMargin
+                : "50px"
+          }
+        }),
       pdfOperations: [
         {
           template: {
@@ -213,14 +213,14 @@ export async function RenderTemplates(templateObjects, bodyshop, renderAsHtml =
               chrome: {
                 marginTop:
                   bodyshop.logo_img_path &&
-                  bodyshop.logo_img_path.headerMargin &&
-                  bodyshop.logo_img_path.headerMargin > 36
+                    bodyshop.logo_img_path.headerMargin &&
+                    bodyshop.logo_img_path.headerMargin > 36
                     ? bodyshop.logo_img_path.headerMargin
                     : "36px",
                 marginBottom:
                   bodyshop.logo_img_path &&
-                  bodyshop.logo_img_path.footerMargin &&
-                  bodyshop.logo_img_path.footerMargin > 50
+                    bodyshop.logo_img_path.footerMargin &&
+                    bodyshop.logo_img_path.footerMargin > 50
                     ? bodyshop.logo_img_path.footerMargin
                     : "50px"
               },
@@ -302,7 +302,6 @@ export const fetchFilterData = async ({ name }) => {
     const jsReportFilters = await cleanAxios.get(`${server}/odata/assets?$filter=name eq '${name}.filters'`, {
       headers: { Authorization: jsrAuth }
     });
-    console.log("🚀 ~ fetchFilterData ~ jsReportFilters:", jsReportFilters);
 
     let parsedFilterData;
     let useShopSpecificTemplate = false;

hasura/metadata/tables.yaml

@@ -7123,6 +7123,7 @@
           - state
           - street1
           - street2
+          - tags
           - updated_at
           - zip
   select_permissions:
@@ -7146,6 +7147,7 @@
           - state
           - street1
           - street2
+          - tags
           - updated_at
           - zip
         filter:
@@ -7179,6 +7181,7 @@
           - state
           - street1
           - street2
+          - tags
           - updated_at
           - zip
         filter:

hasura/migrations/1753201013074_alter_table_public_vendors_add_column_tags/down.sql

@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."vendors" add column "tags" jsonb
+--  not null default jsonb_build_array();

hasura/migrations/1753201013074_alter_table_public_vendors_add_column_tags/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."vendors" add column "tags" jsonb
+ not null default jsonb_build_array();