From 2de605e520aebd78910af31f7e7d1114b13cc473 Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Tue, 24 Mar 2026 16:37:03 -0400
Subject: [PATCH] IO-3624 Refine Rome responsibility center tax layout

---
 ...p-info.responsibilitycenters.component.jsx |   8 +-
 ....responsibilitycenters.taxes.component.jsx | 391 ++++++++++--------
 ...fo.responsibilitycenters.taxes.styles.scss |  25 ++
 .../shop-intellipay-config.component.jsx      |   8 +-
 client/src/translations/en_us/common.json     |  10 +
 client/src/translations/es/common.json        |  10 +
 client/src/translations/fr/common.json        |  10 +
 7 files changed, 282 insertions(+), 180 deletions(-)
 create mode 100644 client/src/components/shop-info/shop-info.responsibilitycenters.taxes.styles.scss

diff --git a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
index f88b3f059..0a2fa27ca 100644
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
@@ -3316,22 +3316,22 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
           <>
             {InstanceRenderManager({
               rome: (
-                <>
+                <LayoutFormRow header={t("bodyshop.labels.responsibilitycenters.quickbooks_us")} id="quickbooks_us">
                   <Form.Item
-                    label={t("bodyshop.fields.responsibilitycenters.itemexemptcode")}
+                    label={t("bodyshop.fields.responsibilitycenters.itemexemptcode_short")}
                     rules={[{ required: true }]}
                     name={["md_responsibility_centers", "taxes", "itemexemptcode"]}
                   >
                     <Input />
                   </Form.Item>
                   <Form.Item
-                    label={t("bodyshop.fields.responsibilitycenters.invoiceexemptcode")}
+                    label={t("bodyshop.fields.responsibilitycenters.invoiceexemptcode_short")}
                     rules={[{ required: true }]}
                     name={["md_responsibility_centers", "taxes", "invoiceexemptcode"]}
                   >
                     <Input />
                   </Form.Item>
-                </>
+                </LayoutFormRow>
               )
             })}
             <LayoutFormRow header={<div>AR</div>} id="AR">
diff --git a/client/src/components/shop-info/shop-info.responsibilitycenters.taxes.component.jsx b/client/src/components/shop-info/shop-info.responsibilitycenters.taxes.component.jsx
index a947f7d1c..cfa0f589d 100644
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.taxes.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.taxes.component.jsx
@@ -1,4 +1,4 @@
-import { Collapse, Divider, Form, Input, InputNumber, Space, Switch } from "antd";
+import { Col, Collapse, Form, Input, InputNumber, Row, Switch } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -6,6 +6,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
+import "./shop-info.responsibilitycenters.taxes.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -16,47 +17,96 @@ const mapDispatchToProps = () => ({
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoResponsibilityCenters);
 
+const taxRootColProps = {
+  xs: 24,
+  sm: 12,
+  md: 8,
+  lg: { flex: "0 0 280px" },
+  xl: { flex: "0 0 240px" },
+  xxl: { flex: "0 0 300px" }
+};
+
+const taxTierFieldColProps = {
+  xs: 24,
+  sm: 12,
+  lg: 6
+};
+
 export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
   const { t } = useTranslation();
-  //Iteratively build the form items.
-  const formItems = [];
-  for (let tyCounter = 1; tyCounter <= 5; tyCounter++) {
-    const section = [];
+  const profileTaxCards = [];
+  for (let typeNum = 1; typeNum <= 5; typeNum++) {
+    const rootTaxItems = getRootTaxFormItems({ typeNum, bodyshop, t });
 
-    section.push(
-      TaxFormItems({
-        typeNum: tyCounter,
-        rootElements: true,
-        bodyshop
-      })
+    profileTaxCards.push(
+      <LayoutFormRow key={`profile-tax-type-${typeNum}`} header={t("bodyshop.labels.responsibilitycenters.tax_type_card", { typeNum })}>
+        <div style={{ display: "grid", rowGap: 12 }}>
+          <Row gutter={[16, 16]} wrap>
+            {rootTaxItems.map((item, index) => (
+              <Col key={item.key ?? `tax-root-${typeNum}-${index}`} {...taxRootColProps}>
+                {item}
+              </Col>
+            ))}
+          </Row>
+          <Row gutter={[12, 12]} wrap className="responsibility-centers-tax-tier-grid">
+            {Array.from({ length: 5 }, (_, index) => {
+              const typeNumIterator = index + 1;
+              const tierTaxItems = getTierTaxFormItems({
+                typeNum,
+                typeNumIterator,
+                t
+              });
+
+              return (
+                <Col
+                  key={`tax-tier-row-${typeNum}-${typeNumIterator}`}
+                  xs={24}
+                  className="responsibility-centers-tax-tier-grid__col"
+                >
+                  <LayoutFormRow
+                    header={t("bodyshop.labels.responsibilitycenters.tax_tier_card", { typeNumIterator })}
+                    style={{ marginBottom: 0 }}
+                    styles={{
+                      header: {
+                        paddingInline: 12
+                      },
+                      body: {
+                        padding: 12
+                      }
+                    }}
+                  >
+                    <Row gutter={[12, 8]} wrap>
+                      {tierTaxItems.map((item, tierIndex) => (
+                        <Col key={item.key ?? `tax-tier-${typeNum}-${typeNumIterator}-${tierIndex}`} {...taxTierFieldColProps}>
+                          {item}
+                        </Col>
+                      ))}
+                    </Row>
+                  </LayoutFormRow>
+                </Col>
+              );
+            })}
+          </Row>
+        </div>
+      </LayoutFormRow>
     );
-    for (let iterator = 1; iterator <= 5; iterator++) {
-      section.push(
-        TaxFormItems({
-          typeNum: tyCounter,
-          typeNumIterator: iterator,
-          rootElements: false
-        })
-      );
-    }
-    formItems.push(<Space wrap>{section}</Space>);
-    formItems.push(<Divider />);
   }
+
   return (
     <>
-      <Divider titlePlacement="left" orientation="horizontal" style={{ marginTop: ".8rem" }}>
-        {t("jobs.labels.cieca_pft")}
-      </Divider>
-      {formItems}
+      <LayoutFormRow header={t("jobs.labels.cieca_pft")}>
+        <div>{profileTaxCards}</div>
+      </LayoutFormRow>
 
-      <Collapse
-        items={[
-          {
-            key: "cieca_pfl",
-            label: t("jobs.labels.cieca_pfl"),
-            forceRender: true,
-            children: (
-              <>
+      <LayoutFormRow header={t("bodyshop.labels.responsibilitycenters.default_tax_setup")}>
+        <Collapse
+          items={[
+            {
+              key: "cieca_pfl",
+              label: t("jobs.labels.cieca_pfl"),
+              forceRender: true,
+              children: (
+                <>
                 <LayoutFormRow header={t("joblines.fields.lbr_types.LAB")}>
                   <Form.Item
                     label={t("jobs.fields.cieca_pfl.lbr_adjp")}
@@ -893,15 +943,15 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                     <Switch />
                   </Form.Item>
                 </LayoutFormRow>
-              </>
-            )
-          },
-          {
-            key: "cieca_pfo",
-            label: t("jobs.labels.cieca_pfo"),
-            forceRender: true,
-            children: (
-              <>
+                </>
+              )
+            },
+            {
+              key: "cieca_pfo",
+              label: t("jobs.labels.cieca_pfo"),
+              forceRender: true,
+              children: (
+                <>
                 <LayoutFormRow noDivider>
                   <Form.Item
                     label={t("jobs.fields.cieca_pfo.tow_t_in1")}
@@ -2145,76 +2195,74 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                     <InputNumber min={0} max={100} precision={4} />
                   </Form.Item>
                 </LayoutFormRow>
-              </>
-            )
-          }
-        ]}
-      />
+                </>
+              )
+            }
+          ]}
+        />
+      </LayoutFormRow>
     </>
   );
 }
 
-function TaxFormItems({ typeNum, typeNumIterator, rootElements, bodyshop }) {
-  const { t } = useTranslation();
-
-  if (rootElements)
-    return (
-      <>
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_tax_type", {
-            typeNum,
-            typeNumIterator
-          })}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `tax_type${typeNum}`]}
-        >
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenters.state_tax")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "name"]}
-        >
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountdesc"]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountitem")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountitem"]}
-        >
-          <Input />
-        </Form.Item>
-        {bodyshopHasDmsKey(bodyshop) && (
+function getRootTaxFormItems({ typeNum, bodyshop, t }) {
+  return [
+    <Form.Item
+      key={`tax_type_${typeNum}_type`}
+      label={t("bodyshop.fields.responsibilitycenter_tax_type", { typeNum })}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `tax_type${typeNum}`]}
+    >
+      <Input />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_name`}
+      label={t("bodyshop.fields.responsibilitycenters.state_tax")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "name"]}
+    >
+      <Input />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_accountdesc`}
+      label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountdesc"]}
+    >
+      <Input />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_accountitem`}
+      label={t("bodyshop.fields.responsibilitycenter_accountitem")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountitem"]}
+    >
+      <Input />
+    </Form.Item>,
+    ...(bodyshopHasDmsKey(bodyshop)
+      ? [
           <Form.Item
+            key={`tax_type_${typeNum}_dms_acctnumber`}
             label={t("bodyshop.fields.dms.dms_acctnumber")}
             rules={[
               {
@@ -2226,71 +2274,64 @@ function TaxFormItems({ typeNum, typeNumIterator, rootElements, bodyshop }) {
           >
             <Input />
           </Form.Item>
-        )}
-      </>
-    );
-  return (
-    <>
-      <Form.Item
-        label={t("bodyshop.fields.responsibilitycenter_tax_tier", {
-          typeNum,
-          typeNumIterator
-        })}
-        rules={[
-          {
-            required: true
-            //message: t("general.validation.required"),
-          }
-        ]}
-        name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_tier${typeNumIterator}`]}
-      >
-        <InputNumber precision={0} min={0} />
-      </Form.Item>
-      <Form.Item
-        label={t("bodyshop.fields.responsibilitycenter_tax_thres", {
-          typeNum,
-          typeNumIterator
-        })}
-        rules={[
-          {
-            required: true
-            //message: t("general.validation.required"),
-          }
-        ]}
-        name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_thres${typeNumIterator}`]}
-      >
-        <InputNumber min={0} precision={2} />
-      </Form.Item>
-      <Form.Item
-        label={t("bodyshop.fields.responsibilitycenter_tax_rate", {
-          typeNum,
-          typeNumIterator
-        })}
-        rules={[
-          {
-            required: true
-            //message: t("general.validation.required"),
-          }
-        ]}
-        name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_rate${typeNumIterator}`]}
-      >
-        <InputNumber min={0} precision={2} />
-      </Form.Item>
-      <Form.Item
-        label={t("bodyshop.fields.responsibilitycenter_tax_sur", {
-          typeNum,
-          typeNumIterator
-        })}
-        rules={[
-          {
-            required: true
-            //message: t("general.validation.required"),
-          }
-        ]}
-        name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_sur${typeNumIterator}`]}
-      >
-        <InputNumber min={0} precision={2} />
-      </Form.Item>
-    </>
-  );
+        ]
+      : [])
+  ];
+}
+
+function getTierTaxFormItems({ typeNum, typeNumIterator, t }) {
+  return [
+    <Form.Item
+      key={`tax_type_${typeNum}_tier_${typeNumIterator}`}
+      label={t("bodyshop.labels.responsibilitycenters.tax_tier_short")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_tier${typeNumIterator}`]}
+    >
+      <InputNumber precision={0} min={0} />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_threshold_${typeNumIterator}`}
+      label={t("bodyshop.labels.responsibilitycenters.tax_threshold_short")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_thres${typeNumIterator}`]}
+    >
+      <InputNumber min={0} precision={2} />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_rate_${typeNumIterator}`}
+      label={t("bodyshop.labels.responsibilitycenters.tax_rate_short")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_rate${typeNumIterator}`]}
+    >
+      <InputNumber min={0} precision={2} />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_surcharge_${typeNumIterator}`}
+      label={t("bodyshop.labels.responsibilitycenters.tax_surcharge_short")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_sur${typeNumIterator}`]}
+    >
+      <InputNumber min={0} precision={2} />
+    </Form.Item>
+  ];
 }
diff --git a/client/src/components/shop-info/shop-info.responsibilitycenters.taxes.styles.scss b/client/src/components/shop-info/shop-info.responsibilitycenters.taxes.styles.scss
new file mode 100644
index 000000000..5cbfe7f95
--- /dev/null
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.taxes.styles.scss
@@ -0,0 +1,25 @@
+.responsibility-centers-tax-tier-grid__col.ant-col {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+@media (min-width: 992px) {
+  .responsibility-centers-tax-tier-grid__col.ant-col {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+}
+
+@media (min-width: 1600px) {
+  .responsibility-centers-tax-tier-grid__col.ant-col {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+}
+
+@media (min-width: 2400px) {
+  .responsibility-centers-tax-tier-grid__col.ant-col {
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+}
diff --git a/client/src/components/shop-info/shop-intellipay-config.component.jsx b/client/src/components/shop-info/shop-intellipay-config.component.jsx
index 60b4fabef..7503c8ca9 100644
--- a/client/src/components/shop-info/shop-intellipay-config.component.jsx
+++ b/client/src/components/shop-info/shop-intellipay-config.component.jsx
@@ -5,6 +5,7 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -29,7 +30,12 @@ export function ShopInfoIntellipay({ bodyshop, form }) {
         }}
       </Form.Item>
 
-      <LayoutFormRow header={t("bodyshop.labels.imexpay")}>
+      <LayoutFormRow
+        header={InstanceRenderManager({
+          rome: t("bodyshop.labels.romepay"),
+          imex: t("bodyshop.labels.imexpay")
+        })}
+      >
         <Form.Item
           label={t("bodyshop.fields.intellipay_config.enable_cash_discount")}
           valuePropName="checked"
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index c70a7e3bf..d394b9c69 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -600,11 +600,13 @@
           "gogcode": "GOG Code (BreakOut)",
           "gst_override": "GST Override Account #",
           "invoiceexemptcode": "QuickBooks US - Invoice Tax Exempt Code",
+          "invoiceexemptcode_short": "Invoice Tax Exempt Code",
           "item_type": "Item Type",
           "item_type_freight": "Freight",
           "item_type_gog": "GOG",
           "item_type_paint": "Paint Materials",
           "itemexemptcode": "QuickBooks US - Line Item Tax Exempt Code",
+          "itemexemptcode_short": "Line Item Tax Exempt Code",
           "la1": "LA1",
           "la2": "LA2",
           "la3": "LA3",
@@ -779,9 +781,17 @@
         "rbac_options": "Role Based Access Control Options",
         "responsibilitycenters": {
           "costs": "Cost Centers",
+          "default_tax_setup": "Default Tax Setup",
           "profits": "Profit Centers",
+          "quickbooks_us": "QuickBooks US",
           "sales_tax_codes": "Sales Tax Codes",
           "tax_accounts": "Tax Accounts",
+          "tax_rate_short": "Rate",
+          "tax_surcharge_short": "Surcharge",
+          "tax_threshold_short": "Threshold",
+          "tax_tier_card": "Tier {{typeNumIterator}}",
+          "tax_tier_short": "Tier",
+          "tax_type_card": "Tax Type {{typeNum}}",
           "title": "Responsibility Centers",
           "ttl_adjustment": "Subtotal Adjustment Account",
           "ttl_tax_adjustment": "Tax Adjustment Account"
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 403d9a907..77288adf9 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -600,11 +600,13 @@
           "gogcode": "",
           "gst_override": "",
           "invoiceexemptcode": "",
+          "invoiceexemptcode_short": "",
           "item_type": "Item Type",
           "item_type_freight": "",
           "item_type_gog": "",
           "item_type_paint": "",
           "itemexemptcode": "",
+          "itemexemptcode_short": "",
           "la1": "",
           "la2": "",
           "la3": "",
@@ -779,9 +781,17 @@
         "rbac_options": "",
         "responsibilitycenters": {
           "costs": "",
+          "default_tax_setup": "",
           "profits": "",
+          "quickbooks_us": "",
           "sales_tax_codes": "",
           "tax_accounts": "",
+          "tax_rate_short": "",
+          "tax_surcharge_short": "",
+          "tax_threshold_short": "",
+          "tax_tier_card": "",
+          "tax_tier_short": "",
+          "tax_type_card": "",
           "title": "",
           "ttl_adjustment": "",
           "ttl_tax_adjustment": ""
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index edc02d5c8..5b0a327e8 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -600,11 +600,13 @@
           "gogcode": "",
           "gst_override": "",
           "invoiceexemptcode": "",
+          "invoiceexemptcode_short": "",
           "item_type": "Item Type",
           "item_type_freight": "",
           "item_type_gog": "",
           "item_type_paint": "",
           "itemexemptcode": "",
+          "itemexemptcode_short": "",
           "la1": "",
           "la2": "",
           "la3": "",
@@ -779,9 +781,17 @@
         "rbac_options": "",
         "responsibilitycenters": {
           "costs": "",
+          "default_tax_setup": "",
           "profits": "",
+          "quickbooks_us": "",
           "sales_tax_codes": "",
           "tax_accounts": "",
+          "tax_rate_short": "",
+          "tax_surcharge_short": "",
+          "tax_threshold_short": "",
+          "tax_tier_card": "",
+          "tax_tier_short": "",
+          "tax_type_card": "",
           "title": "",
           "ttl_adjustment": "",
           "ttl_tax_adjustment": ""