feature/IO-3160 - RC-COLLAPSE-ISSUE:

client/src/components/error-boundary/error-boundary.component.jsx

@@ -75,6 +75,22 @@ class ErrorBoundary extends React.Component {
   render() {
     const { t } = this.props;
     const { error, info } = this.state;
+
+    const collapseItems = error
+      ? [
+          {
+            key: "errors",
+            label: t("general.labels.errors"),
+            children: (
+              <div>
+                <strong>{error.message || "Unknown error"}</strong>
+                <div>{error.stack || "No stack trace available"}</div>
+              </div>
+            )
+          }
+        ]
+      : [];
+
     if (this.state.hasErrored === true) {
       logImEXEvent("error_boundary_rendered", { error, info });
 
@@ -122,14 +138,7 @@ class ErrorBoundary extends React.Component {
           />
           <Row>
             <Col offset={6} span={12}>
-              <Collapse bordered={false}>
+              <Collapse bordered={false} items={collapseItems} />
-                <Collapse.Panel header={t("general.labels.errors")}>
-                  <div>
-                    <strong>{this.state.error.message}</strong>
-                  </div>
-                  <div>{this.state.error.stack}</div>
-                </Collapse.Panel>
-              </Collapse>
             </Col>
           </Row>
         </div>

client/src/components/job-close-ro-guard/job-close-ro-guard.container.jsx

@@ -16,7 +16,6 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import JobCloseRoGuardTtLifecycle from "./job-close-ro-guard.tt-lifecycle";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly
 });
@@ -40,34 +39,13 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
 
   if (!bodyshop?.md_ro_guard?.enabled) return null;
 
-  return (
+  // Define collapse items for both panels
+  const collapseItems = [
+    {
+      key: "roguard",
+      label: t("jobs.labels.roguard"),
+      children: (
         <>
-      {warnings.length > 0 && (
-        <Card
-          title={
-            <Space size="small">
-              <Badge count={warnings.length} />
-              {t("jobs.labels.roguardwarnings")}
-            </Space>
-          }
-        >
-          <ul>
-            {warnings.map((w, index) => (
-              <li key={index}>
-                {bodyshop.md_ro_guard[`enforce_${w.key}`] && (
-                  <Tooltip title={t("jobs.labels.ro_guard.enforced")}>
-                    <LockOutlined style={{ color: "tomato", marginRight: "8px" }} />
-                  </Tooltip>
-                )}
-                {w.warning}
-              </li>
-            ))}
-          </ul>
-        </Card>
-      )}
-
-      <Collapse>
-        <Collapse.Panel forceRender key="roguard" header={t("jobs.labels.roguard")}>
           <Row gutter={[32, 32]}>
             <Col span={24}>
               <JobCloseRoGuardBills job={job} form={form} warningCallback={warningCallback} />
@@ -85,7 +63,6 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
             {InstanceRenderManager({
               rome: (
                 <Col md={24} lg={8}>
-                  {/* <JobCloseRoGuardSublet job={job} warningCallback={warningCallback} /> */}
                   <JobCloseRoGuardPpd job={job} warningCallback={warningCallback} />
                 </Col>
               )
@@ -214,16 +191,50 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
           >
             <Input prefix={<LockOutlined />} type="password" placeholder="Password" disabled={jobRO} />
           </Form.Item>
-        </Collapse.Panel>
+        </>
-
+      ),
-        <Collapse.Panel header={t("jobs.labels.performance")}>
+      forceRender: true // Preserve the forceRender prop from the original
+    },
+    {
+      key: "performance",
+      label: t("jobs.labels.performance"),
+      children: (
         <Row gutter={[32, 32]}>
           <Col className="ro-guard-col" span={24}>
             <JobCloseRoGuardTtLifecycle job={job} />
           </Col>
         </Row>
-        </Collapse.Panel>
+      )
-      </Collapse>
+    }
+  ];
+
+  return (
+    <>
+      {warnings.length > 0 && (
+        <Card
+          title={
+            <Space size="small">
+              <Badge count={warnings.length} />
+              {t("jobs.labels.roguardwarnings")}
+            </Space>
+          }
+        >
+          <ul>
+            {warnings.map((w, index) => (
+              <li key={index}>
+                {bodyshop.md_ro_guard[`enforce_${w.key}`] && (
+                  <Tooltip title={t("jobs.labels.ro_guard.enforced")}>
+                    <LockOutlined style={{ color: "tomato", marginRight: "8px" }} />
+                  </Tooltip>
+                )}
+                {w.warning}
+              </li>
+            ))}
+          </ul>
+        </Card>
+      )}
+
+      <Collapse items={collapseItems} />
     </>
   );
 }

client/src/components/job-totals-table/job-totals-table.component.jsx

@@ -27,7 +27,7 @@ const colSpan = {
 export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
   const { t } = useTranslation();
 
-  if (!!!job.job_totals) {
+  if (!job.job_totals) {
     return (
       <Card>
         <Result title={t("jobs.errors.nofinancial")} extra={<JobCalculateTotals job={job} disabled={jobRO} />} />
@@ -35,6 +35,29 @@ export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
     );
   }
 
+  // Define collapse items
+  const collapseItems = [
+    {
+      key: "json-tree-totals",
+      label: "JSON Tree Totals",
+      children: (
+        <div>
+          <pre>
+            {JSON.stringify(
+              {
+                CIECA: job.cieca_ttl && job.cieca_ttl.data,
+                CIECASTL: job.cieca_stl && job.cieca_stl.data,
+                ImEXCalc: job.job_totals
+              },
+              null,
+              2
+            )}
+          </pre>
+        </div>
+      )
+    }
+  ];
+
   return (
     <div>
       <Row gutter={[16, 16]}>
@@ -68,23 +91,7 @@ export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
               <Col span={24}>
                 <Card title="DEVELOPMENT USE ONLY">
                   <JobCalculateTotals job={job} disabled={jobRO} />
-                  <Collapse>
+                  <Collapse items={collapseItems} />
-                    <Collapse.Panel header="JSON Tree Totals">
-                      <div>
-                        <pre>
-                          {JSON.stringify(
-                            {
-                              CIECA: job.cieca_ttl && job.cieca_ttl.data,
-                              CIECASTL: job.cieca_stl && job.cieca_stl.data,
-                              ImEXCalc: job.job_totals
-                            },
-                            null,
-                            2
-                          )}
-                        </pre>
-                      </div>
-                    </Collapse.Panel>
-                  </Collapse>
                 </Card>
               </Col>
             )}

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

@@ -20,7 +20,6 @@ import JobsMarkPstExempt from "../jobs-mark-pst-exempt/jobs-mark-pst-exempt.comp
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
@@ -39,10 +38,12 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
     }
   };
 
-  return (
+  // Define collapse items for all three panels
-    <div>
+  const collapseItems = [
-      <Collapse defaultActiveKey="insurance">
+    {
-        <Collapse.Panel key="insurance" header={t("menus.jobsdetail.insurance")} forceRender>
+      key: "insurance",
+      label: t("menus.jobsdetail.insurance"),
+      children: (
         <LayoutFormRow>
           <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
             <Input />
@@ -108,7 +109,7 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
             <Input />
           </Form.Item>
           <Form.Item label={t("jobs.fields.est_co_nm")} name="est_co_nm">
-              <Input />
+            sausage <Input />
           </Form.Item>
           <Form.Item
             label={
@@ -152,8 +153,13 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
             <Input />
           </Form.Item>
         </LayoutFormRow>
-        </Collapse.Panel>
+      ),
-        <Collapse.Panel forceRender key="claim" header={t("menus.jobsdetail.claimdetail")}>
+      forceRender: true
+    },
+    {
+      key: "claim",
+      label: t("menus.jobsdetail.claimdetail"),
+      children: (
         <LayoutFormRow>
           <Form.Item label={t("jobs.fields.loss_desc")} name="loss_desc">
             <Input />
@@ -193,8 +199,14 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
             <Input />
           </Form.Item>
         </LayoutFormRow>
-        </Collapse.Panel>
+      ),
-        <Collapse.Panel forceRender key="financial" header={t("menus.jobsdetail.financials")}>
+      forceRender: true
+    },
+    {
+      key: "financial",
+      label: t("menus.jobsdetail.financials"),
+      children: (
+        <>
           <JobsDetailRatesChangeButton form={form} />
           {InstanceRenderManager({
             imex: <JobsMarkPstExempt form={form} />
@@ -315,8 +327,15 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
               <CurrencyInput />
             </Form.Item>
           </LayoutFormRow>
-        </Collapse.Panel>
+        </>
-      </Collapse>
+      ),
+      forceRender: true
+    }
+  ];
+
+  return (
+    <div>
+      <Collapse defaultActiveKey="insurance" items={collapseItems} />
       <JobsDetailRatesParts jobRO={false} expanded required={selected && true} form={form} />
       {InstanceRenderManager({
         rome: (

client/src/components/jobs-detail-rates/jobs-detail-rates.labor.component.jsx

@@ -13,9 +13,13 @@ const mapStateToProps = createStructuredSelector({
 export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form }) {
   const { t } = useTranslation();
 
-  return (
+  // Define collapse items
-    <Collapse defaultActiveKey={expanded && "rates"}>
+  const collapseItems = [
-      <Collapse.Panel forceRender header={t("jobs.labels.cieca_pfl")} key="cieca_pfl">
+    {
+      key: "cieca_pfl",
+      label: t("jobs.labels.cieca_pfl"),
+      children: (
+        <>
           <LayoutFormRow header={t("joblines.fields.lbr_types.LAB")}>
             <Form.Item label={t("jobs.fields.cieca_pfl.lbr_adjp")} name={["cieca_pfl", "LAB", "lbr_adjp"]}>
               <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
@@ -601,9 +605,13 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
               <Switch disabled={jobRO} />
             </Form.Item>
           </LayoutFormRow>
-      </Collapse.Panel>
+        </>
-    </Collapse>
+      ),
-  );
+      forceRender: true
+    }
+  ];
+
+  return <Collapse defaultActiveKey={expanded && "rates"} items={collapseItems} />;
 }
 
 export default connect(mapStateToProps, null)(JobsDetailRatesLabor);

client/src/components/jobs-detail-rates/jobs-detail-rates.materials.component.jsx

@@ -13,9 +13,13 @@ const mapStateToProps = createStructuredSelector({
 export function JobsDetailRatesMaterials({ jobRO, expanded, required = true, form }) {
   const { t } = useTranslation();
 
-  return (
+  // Define collapse items
-    <Collapse defaultActiveKey={expanded && "rates"}>
+  const collapseItems = [
-      <Collapse.Panel forceRender header={t("jobs.fields.materials.materials")} key="materials">
+    {
+      key: "materials",
+      label: t("jobs.fields.materials.materials"),
+      children: (
+        <>
           <LayoutFormRow header={t("jobs.fields.materials.MAPA")}>
             <Form.Item label={t("jobs.fields.materials.cal_maxdlr")} name={["materials", "MAPA", "cal_maxdlr"]}>
               <InputNumber min={0} precision={2} disabled={jobRO} />
@@ -158,9 +162,13 @@ export function JobsDetailRatesMaterials({ jobRO, expanded, required = true, for
               <Switch />
             </Form.Item>
           </LayoutFormRow>
-      </Collapse.Panel>
+        </>
-    </Collapse>
+      ),
-  );
+      forceRender: true
+    }
+  ];
+
+  return <Collapse defaultActiveKey={expanded && "rates"} items={collapseItems} />;
 }
 
 export default connect(mapStateToProps, null)(JobsDetailRatesMaterials);

client/src/components/jobs-detail-rates/jobs-detail-rates.other.component.jsx

@@ -13,9 +13,12 @@ const mapStateToProps = createStructuredSelector({
 export function JobsDetailRatesOther({ jobRO, expanded, required = true, form }) {
   const { t } = useTranslation();
 
-  return (
+  // Define collapse items
-    <Collapse defaultActiveKey={expanded && "rates"}>
+  const collapseItems = [
-      <Collapse.Panel forceRender header={t("jobs.labels.cieca_pfo")} key="cieca_pfo">
+    {
+      key: "cieca_pfo",
+      label: t("jobs.labels.cieca_pfo"),
+      children: (
         <LayoutFormRow noDivider>
           <Form.Item
             label={t("jobs.fields.cieca_pfo.tow_t_in1")}
@@ -52,7 +55,6 @@ export function JobsDetailRatesOther({ jobRO, expanded, required = true, form })
           >
             <Switch />
           </Form.Item>
-
           <Form.Item
             label={t("jobs.fields.cieca_pfo.stor_t_in1")}
             name={["cieca_pfo", "stor_t_in1"]}
@@ -89,9 +91,12 @@ export function JobsDetailRatesOther({ jobRO, expanded, required = true, form })
             <Switch />
           </Form.Item>
         </LayoutFormRow>
-      </Collapse.Panel>
+      ),
-    </Collapse>
+      forceRender: true
-  );
+    }
+  ];
+
+  return <Collapse defaultActiveKey={expanded && "rates"} items={collapseItems} />;
 }
 
 export default connect(mapStateToProps, null)(JobsDetailRatesOther);

client/src/components/jobs-detail-rates/jobs-detail-rates.parts.component.jsx

@@ -14,11 +14,18 @@ const mapStateToProps = createStructuredSelector({
 export function JobsDetailRatesParts({ jobRO, expanded, required = true, form }) {
   const { t } = useTranslation();
 
-  return (
+  // Define collapse items
-    <Collapse defaultActiveKey={expanded && "rates"}>
+  const collapseItems = [
-      <Collapse.Panel forceRender header={t("jobs.labels.parts_tax_rates")} key="rates">
+    {
+      key: "rates",
+      label: t("jobs.labels.parts_tax_rates"),
+      children: (
+        <>
           <LayoutFormRow header={t("joblines.fields.part_types.PAA")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAA", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "PAA", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -28,7 +35,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAA", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "PAA", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -93,7 +103,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.PAC")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAC", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "PAC", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -103,7 +116,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAC", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "PAC", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -168,7 +184,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.PAL")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAL", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "PAL", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -178,7 +197,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAL", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "PAL", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -243,7 +265,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.PAG")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAG", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "PAG", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -253,7 +278,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAG", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "PAG", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -318,7 +346,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.PAM")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAM", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "PAM", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -328,7 +359,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAM", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "PAM", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -393,7 +427,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.PAN")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAN", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "PAN", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -403,7 +440,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAN", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "PAN", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -468,7 +508,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.PAO")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAO", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "PAO", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -478,7 +521,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAO", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "PAO", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -543,7 +589,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.PAP")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAP", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "PAP", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -553,7 +602,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAP", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "PAP", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -618,7 +670,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.PAR")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAR", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "PAR", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -628,7 +683,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAR", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "PAR", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -693,7 +751,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.PAS")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAS", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "PAS", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -703,7 +764,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAS", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "PAS", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -768,7 +832,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.PASL")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PASL", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "PASL", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -778,7 +845,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PASL", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "PASL", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -843,7 +913,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.CCDR")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "CCDR", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "CCDR", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -853,7 +926,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "CCDR", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "CCDR", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -871,7 +947,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.CCF")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "CCF", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "CCF", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -881,7 +960,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "CCF", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "CCF", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -899,7 +981,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.CCM")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "CCM", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "CCM", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -909,7 +994,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "CCM", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "CCM", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -927,7 +1015,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.CCC")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "CCC", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "CCC", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -937,7 +1028,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "CCC", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "CCC", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -955,7 +1049,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow header={t("joblines.fields.part_types.CCD")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "CCD", "prt_discp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_discp")}
+              name={["parts_tax_rates", "CCD", "prt_discp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -965,7 +1062,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             >
               <Switch />
             </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "CCD", "prt_mkupp"]}>
+            <Form.Item
+              label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+              name={["parts_tax_rates", "CCD", "prt_mkupp"]}
+            >
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
             <Form.Item
@@ -996,7 +1096,7 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
                 </Form.Item>
                 <Form.Item label={t("jobs.fields.tax_shop_mat_rt")} name="tax_shop_mat_rt">
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-              </Form.Item>{" "}
+                </Form.Item>
               </>
             ) : null}
             <Form.Item label={t("jobs.fields.tax_sub_rt")} name="tax_sub_rt">
@@ -1011,9 +1111,13 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>
           </LayoutFormRow>
-      </Collapse.Panel>
+        </>
-    </Collapse>
+      ),
-  );
+      forceRender: true
+    }
+  ];
+
+  return <Collapse defaultActiveKey={expanded && "rates"} items={collapseItems} />;
 }
 
 export default connect(mapStateToProps, null)(JobsDetailRatesParts);

client/src/components/jobs-detail-rates/jobs-detail-rates.taxes.component.jsx

@@ -11,6 +11,9 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
+//If the panel doesn’t expand correctly due to the key mismatch, update the Collapse line to:
+// <Collapse defaultActiveKey={expanded && "cieca_pft"} items={collapseItems} />
+
 export function JobsDetailRatesTaxes({ jobRO, expanded, bodyshop, required = true, form }) {
   const { t } = useTranslation();
   const formItems = [];
@@ -47,13 +50,18 @@ export function JobsDetailRatesTaxes({ jobRO, expanded, bodyshop, required = tru
       </>
     );
   }
-  return (
+
-    <Collapse defaultActiveKey={expanded && "rates"}>
+  // Define collapse items
-      <Collapse.Panel forceRender header={t("jobs.labels.cieca_pft")} key="cieca_pft">
+  const collapseItems = [
-        {formItems}
+    {
-      </Collapse.Panel>
+      key: "cieca_pft",
-    </Collapse>
+      label: t("jobs.labels.cieca_pft"),
-  );
+      children: <>{formItems}</>,
+      forceRender: true
+    }
+  ];
+
+  return <Collapse defaultActiveKey={expanded && "rates"} items={collapseItems} />;
 }
 
 export default connect(mapStateToProps, null)(JobsDetailRatesTaxes);

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

@@ -36,6 +36,7 @@ export function ScheduleCalendarWrapperComponent({
   const search = queryString.parse(useLocation().search);
   const history = useNavigate();
   const { t } = useTranslation();
+
   const handleEventPropStyles = (event, start, end, isSelected) => {
     return {
       ...(event.color && !((search.view || defaultView) === "agenda")
@@ -51,17 +52,12 @@ export function ScheduleCalendarWrapperComponent({
 
   const selectedDate = new Date(date || dayjs(search.date) || Date.now());
 
-  return (
+  // Convert Collapse to use items prop
-    <>
+  const collapseItems = [
-      <JobDetailCards />
+    {
-      {HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) &&
+      key: "1",
-        problemJobs &&
+      label: <span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>,
-        (problemJobs.length > 2 ? (
+      children: (
-          <Collapse style={{ marginBottom: "5px" }}>
-            <Collapse.Panel
-              key="1"
-              header={<span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>}
-            >
         <Space direction="vertical" style={{ width: "100%" }}>
           {problemJobs.map((problem) => (
             <Alert
@@ -80,8 +76,17 @@ export function ScheduleCalendarWrapperComponent({
             />
           ))}
         </Space>
-            </Collapse.Panel>
+      )
-          </Collapse>
+    }
+  ];
+
+  return (
+    <>
+      <JobDetailCards />
+      {HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) &&
+        problemJobs &&
+        (problemJobs.length > 2 ? (
+          <Collapse items={collapseItems} style={{ marginBottom: "5px" }} />
         ) : (
           <Space direction="vertical" style={{ width: "100%", marginBottom: "5px" }}>
             {problemJobs.map((problem) => (
@@ -119,7 +124,6 @@ export function ScheduleCalendarWrapperComponent({
           history({ search: queryString.stringify(search) });
         }}
         step={15}
-        // timeslots={1}
         showMultiDayTimes
         localizer={localizer}
         min={bodyshop.schedule_start_time ? new Date(bodyshop.schedule_start_time) : new Date("2020-01-01T06:00:00")}