From d23a182650bbbf611367c078b76efd48a6d30ca3 Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Tue, 24 Mar 2026 10:54:42 -0400
Subject: [PATCH] IO-3624 Refresh shop config list rows and color UX

---
 .../form-fields-changed-alert.component.jsx   |    2 +-
 .../phone-form-item.component.jsx             |   85 +-
 .../form-list-item-title.utils.js             |   30 +
 .../layout-form-row.component.jsx             |   26 +-
 .../layout-form-row.styles.scss               |   23 +
 .../parts-order-modal.component.jsx           |   57 +-
 .../parts-receive-modal.component.jsx         |   54 +-
 .../parts-email-presets.component.jsx         |   66 +-
 .../parts-locations.component.jsx             |   70 +-
 .../parts-order-comments.component.jsx        |   99 +-
 .../shop-employees-form.component.jsx         |  122 +-
 .../shop-info/shop-info.color.utils.js        |  304 ++++
 .../shop-info/shop-info.color.utils.test.js   |   52 +
 .../shop-info/shop-info.general.component.jsx | 1396 ++++++++++-------
 .../shop-info/shop-info.intake.component.jsx  |  429 ++---
 .../shop-info.laborrates.component.jsx        |   47 +-
 .../shop-info/shop-info.parts-scan.jsx        |  280 ++--
 ...p-info.responsibilitycenters.component.jsx |  840 ++++++----
 .../shop-info.rostatus.component.jsx          |  142 +-
 .../shop-info.scheduling.component.jsx        |  337 ++--
 .../shop-info.speedprint.component.jsx        |  134 +-
 .../shop-info.task-presets.component.jsx      |  314 ++--
 22 files changed, 3100 insertions(+), 1809 deletions(-)
 create mode 100644 client/src/components/form-list-move-arrows/form-list-item-title.utils.js
 create mode 100644 client/src/components/shop-info/shop-info.color.utils.js
 create mode 100644 client/src/components/shop-info/shop-info.color.utils.test.js

diff --git a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
index 0f265d7db..3254c9f74 100644
--- a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
+++ b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
@@ -17,7 +17,7 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
         const errors = form.getFieldsError().filter((e) => e.errors.length > 0);
         if (form.isFieldsTouched())
           return (
-            <Space orientation="vertical" style={{ width: "100%" }}>
+            <Space orientation="vertical" style={{ width: "100%", marginBottom: 10 }}>
               <Prompt when={!skipPrompt} beforeUnload={true} message={t("general.messages.unsavedchangespopup")} />
               <AlertComponent
                 type="warning"
diff --git a/client/src/components/form-items-formatted/phone-form-item.component.jsx b/client/src/components/form-items-formatted/phone-form-item.component.jsx
index ede4ec66c..cdf3f4fde 100644
--- a/client/src/components/form-items-formatted/phone-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/phone-form-item.component.jsx
@@ -1,11 +1,88 @@
-import { Input } from "antd";
+import { PhoneFilled } from "@ant-design/icons";
+import { Button, Input, Space } from "antd";
 import i18n from "i18next";
 import parsePhoneNumber from "libphonenumber-js";
+import { forwardRef, useMemo, useState } from "react";
 import "./phone-form-item.styles.scss";
 
-function FormItemPhone({ ref, ...props }) {
-  return <Input ref={ref} {...props} />;
-}
+/**
+ * Formats a phone number for display purposes. If the input value is a valid phone number, it will be formatted in a
+ * national format (e.g., (123) 456-7890 for US/CA). If the input is not a valid phone number, it will be returned as-is.
+ * @param value
+ * @returns {*}
+ */
+const formatPhoneDisplayValue = (value) => {
+  if (!value) return value;
+
+  try {
+    const parsedPhone = parsePhoneNumber(value, "CA");
+    return parsedPhone?.isValid() ? parsedPhone.formatNational() : value;
+  } catch {
+    return value;
+  }
+};
+
+/**
+ * Generates a "tel:" URL for a phone number if it's valid. If the input value is a valid phone number, it will return a
+ * URL in the format "tel:+1234567890". If the input is not a valid phone number, it will attempt to trim whitespace and
+ * return a "tel:" URL with the raw value, or null if the trimmed value is empty.
+ * @param value
+ * @returns {string|null}
+ */
+const getPhoneActionHref = (value) => {
+  if (!value) return null;
+
+  try {
+    const parsedPhone = parsePhoneNumber(value, "CA");
+    if (parsedPhone?.isValid()) return `tel:${parsedPhone.number}`;
+  } catch {
+    // Fall back to the raw value below.
+  }
+
+  const trimmedValue = String(value).trim();
+  return trimmedValue ? `tel:${trimmedValue}` : null;
+};
+
+const FormItemPhone = forwardRef(function FormItemPhone(
+  { formatDisplayOnly = false, showPhoneAction = false, value, onBlur, onFocus, ...props },
+  ref
+) {
+  const [isFocused, setIsFocused] = useState(false);
+  const displayValue = useMemo(() => {
+    if (!formatDisplayOnly || isFocused) return value;
+    return formatPhoneDisplayValue(value);
+  }, [formatDisplayOnly, isFocused, value]);
+  const phoneActionHref = useMemo(() => (showPhoneAction ? getPhoneActionHref(value) : null), [showPhoneAction, value]);
+
+  const input = (
+    <Input
+      ref={ref}
+      {...props}
+      value={displayValue}
+      onFocus={(event) => {
+        setIsFocused(true);
+        onFocus?.(event);
+      }}
+      onBlur={(event) => {
+        setIsFocused(false);
+        onBlur?.(event);
+      }}
+    />
+  );
+
+  if (!showPhoneAction) return input;
+
+  return (
+    <Space.Compact style={{ width: "100%" }}>
+      {input}
+      {phoneActionHref ? (
+        <Button icon={<PhoneFilled />} href={phoneActionHref} />
+      ) : (
+        <Button icon={<PhoneFilled />} disabled />
+      )}
+    </Space.Compact>
+  );
+});
 
 export default FormItemPhone;
 
diff --git a/client/src/components/form-list-move-arrows/form-list-item-title.utils.js b/client/src/components/form-list-move-arrows/form-list-item-title.utils.js
new file mode 100644
index 000000000..03f1beeb8
--- /dev/null
+++ b/client/src/components/form-list-move-arrows/form-list-item-title.utils.js
@@ -0,0 +1,30 @@
+/**
+ * Normalize Form  Item List Titles
+ * @param value
+ * @returns {*|string}
+ */
+const normalizeFormListTitleValue = (value) => {
+  if (value === null || value === undefined) return "";
+
+  if (Array.isArray(value)) {
+    return value
+      .map((item) => normalizeFormListTitleValue(item))
+      .filter(Boolean)
+      .join(", ");
+  }
+
+  return String(value).trim();
+};
+
+/**
+ * Get Form Listem Item Title
+ * @param fallbackLabel
+ * @param index
+ * @param candidates
+ * @returns {*|string}
+ */
+export function getFormListItemTitle(fallbackLabel, index, ...candidates) {
+  const title = candidates.map((candidate) => normalizeFormListTitleValue(candidate)).find(Boolean);
+
+  return title || `${fallbackLabel} ${index + 1}`;
+}
diff --git a/client/src/components/layout-form-row/layout-form-row.component.jsx b/client/src/components/layout-form-row/layout-form-row.component.jsx
index 22343a790..c45e5c75b 100644
--- a/client/src/components/layout-form-row/layout-form-row.component.jsx
+++ b/client/src/components/layout-form-row/layout-form-row.component.jsx
@@ -7,32 +7,37 @@ export default function LayoutFormRow({
   children,
   grow = false,
   noDivider = false,
-  gutter = [16, 16], // Responsive gutter: horizontal, vertical
+  gutter,
   rowProps,
 
   // Optional overrides if you ever need per-section customization
   surface = true,
   surfaceBg,
   surfaceHeaderBg,
+  surfaceBorderColor,
 
   ...cardProps
 }) {
   const items = Children.toArray(children).filter(Boolean);
   if (items.length === 0) return null;
+  const isCompactRow = noDivider;
 
   const title = !noDivider && header ? header : undefined;
+  const resolvedGutter = gutter ?? [16, isCompactRow ? 8 : 16];
 
   const bg = surfaceBg ?? (surface ? "var(--imex-form-surface)" : undefined);
   const headBg = surfaceHeaderBg ?? (surface ? "var(--imex-form-surface-head)" : undefined);
+  const borderColor = surfaceBorderColor ?? (surface ? "var(--imex-form-surface-border)" : undefined);
 
   const mergedStyles = mergeSemanticStyles(
     {
       header: {
-        paddingInline: 16,
-        background: headBg
+        paddingInline: isCompactRow ? 12 : 16,
+        background: headBg,
+        borderBottomColor: borderColor
       },
       body: {
-        padding: 16,
+        padding: isCompactRow ? 12 : 16,
         background: bg
       }
     },
@@ -40,8 +45,9 @@ export default function LayoutFormRow({
   );
 
   const baseCardStyle = {
-    marginBottom: ".8rem",
+    marginBottom: isCompactRow ? "8px" : ".8rem",
     ...(bg ? { background: bg } : null), // ensures the “circled area” is tinted
+    ...(borderColor ? { borderColor } : null),
     ...cardProps.style
   };
 
@@ -53,7 +59,9 @@ export default function LayoutFormRow({
         title={cardProps.title ?? title}
         size={cardProps.size ?? "small"}
         variant={cardProps.variant ?? "outlined"}
-        className={["imex-form-row", cardProps.className].filter(Boolean).join(" ")}
+        className={["imex-form-row", isCompactRow ? "imex-form-row--compact" : null, cardProps.className]
+          .filter(Boolean)
+          .join(" ")}
         style={baseCardStyle}
         styles={mergedStyles}
       >
@@ -128,11 +136,13 @@ export default function LayoutFormRow({
       title={cardProps.title ?? title}
       size={cardProps.size ?? "small"}
       variant={cardProps.variant ?? "outlined"}
-      className={["imex-form-row", cardProps.className].filter(Boolean).join(" ")}
+      className={["imex-form-row", isCompactRow ? "imex-form-row--compact" : null, cardProps.className]
+        .filter(Boolean)
+        .join(" ")}
       style={baseCardStyle}
       styles={mergedStyles}
     >
-      <Row gutter={gutter} wrap {...rowProps}>
+      <Row gutter={resolvedGutter} wrap {...rowProps}>
         {items.map((child, idx) => (
           <Col key={child?.key ?? idx} {...getColPropsForChild(child)}>
             {child}
diff --git a/client/src/components/layout-form-row/layout-form-row.styles.scss b/client/src/components/layout-form-row/layout-form-row.styles.scss
index 264ae9760..9bc77277b 100644
--- a/client/src/components/layout-form-row/layout-form-row.styles.scss
+++ b/client/src/components/layout-form-row/layout-form-row.styles.scss
@@ -43,10 +43,29 @@ html[data-theme="dark"] {
     border-bottom-color: var(--imex-form-surface-border);
   }
 
+  &.imex-form-row--compact {
+    .ant-card-head {
+      min-height: 40px;
+    }
+
+    .ant-card-head-title,
+    .ant-card-extra {
+      padding-block: 2px;
+    }
+
+    .ant-form-item {
+      margin-bottom: 12px;
+    }
+  }
+
   .ant-card-body {
     background: var(--imex-form-surface);
   }
 
+  .ant-form-item:last-child {
+    margin-bottom: 4px;
+  }
+
   /* Optional: tighter spacing on phones for better space usage */
   @media (max-width: 575px) {
     .ant-card-head {
@@ -70,6 +89,10 @@ html[data-theme="dark"] {
     width: 100%;
   }
 
+  .ant-form-item:has(> .imex-form-row--compact) {
+    margin-bottom: 8px;
+  }
+
   /* Better form item spacing on mobile */
   @media (max-width: 575px) {
     .ant-form-item {
diff --git a/client/src/components/parts-order-modal/parts-order-modal.component.jsx b/client/src/components/parts-order-modal/parts-order-modal.component.jsx
index bfb0cb1df..3766b2e7b 100644
--- a/client/src/components/parts-order-modal/parts-order-modal.component.jsx
+++ b/client/src/components/parts-order-modal/parts-order-modal.component.jsx
@@ -1,12 +1,13 @@
 import { DeleteFilled, DownOutlined, WarningFilled } from "@ant-design/icons";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
-import { Checkbox, Divider, Dropdown, Form, Input, InputNumber, Radio, Select, Space, Tag } from "antd";
+import { Button, Checkbox, Divider, Dropdown, Form, Input, InputNumber, Radio, Select, Space, Tag } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import PartsOrderModalPriceChange from "./parts-order-modal-price-change.component";
@@ -50,6 +51,7 @@ export function PartsOrderModalComponent({
   });
 
   const { t } = useTranslation();
+  const partsOrderLines = Form.useWatch(["parts_order_lines", "data"], form) || [];
   const handleClick = ({ item }) => {
     form.setFieldsValue({ comments: item.props.value });
   };
@@ -128,10 +130,38 @@ export function PartsOrderModalComponent({
         {(fields, { remove, move }) => {
           return (
             <div>
-              {fields.map((field, index) => (
-                <Form.Item required={false} key={field.key}>
-                  <div style={{ display: "flex" }}>
-                    <LayoutFormRow grow noDivider style={{ flex: 1 }}>
+              {fields.map((field, index) => {
+                const partsOrderLine = partsOrderLines[field.name] || {};
+
+                return (
+                  <Form.Item required={false} key={field.key}>
+                    <LayoutFormRow
+                      grow
+                      noDivider
+                      title={getFormListItemTitle(
+                        t("parts_orders.fields.line_desc"),
+                        index,
+                        partsOrderLine.line_desc,
+                        partsOrderLine.oem_partno
+                      )}
+                      extra={
+                        <Space align="center" size="small">
+                          <Button
+                            type="text"
+                            icon={<DeleteFilled />}
+                            onClick={() => {
+                              remove(field.name);
+                            }}
+                          />
+                          <FormListMoveArrows
+                            move={move}
+                            index={index}
+                            total={fields.length}
+                            orientation="horizontal"
+                          />
+                        </Space>
+                      }
+                    >
                       <Form.Item
                         //span={8}
                         label={t("parts_orders.fields.line_desc")}
@@ -220,20 +250,9 @@ export function PartsOrderModalComponent({
                         </Form.Item>
                       )}
                     </LayoutFormRow>
-                    <Space wrap size="small" align="center">
-                      <div>
-                        <DeleteFilled
-                          style={{ margin: "1rem" }}
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                      </div>
-                      <FormListMoveArrows move={move} index={index} total={fields.length} />
-                    </Space>
-                  </div>
-                </Form.Item>
-              ))}
+                  </Form.Item>
+                );
+              })}
             </div>
           );
         }}
diff --git a/client/src/components/parts-receive-modal/parts-receive-modal.component.jsx b/client/src/components/parts-receive-modal/parts-receive-modal.component.jsx
index 723ccb9db..c4fdd1bd0 100644
--- a/client/src/components/parts-receive-modal/parts-receive-modal.component.jsx
+++ b/client/src/components/parts-receive-modal/parts-receive-modal.component.jsx
@@ -1,10 +1,11 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { Form, Input, InputNumber, Select, Typography } from "antd";
+import { Button, Form, Input, InputNumber, Select, Space, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -15,6 +16,7 @@ export default connect(mapStateToProps, null)(PartsReceiveModalComponent);
 
 export function PartsReceiveModalComponent({ bodyshop, form }) {
   const { t } = useTranslation();
+  const partsOrderLines = Form.useWatch(["partsorderlines"], form) || [];
 
   return (
     <div>
@@ -42,16 +44,43 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
         {(fields, { remove, move }) => {
           return (
             <div>
-              {fields.map((field, index) => (
-                <Form.Item required={false} key={field.key}>
-                  <div style={{ display: "flex", alignItems: "center" }}>
+              {fields.map((field, index) => {
+                const partsOrderLine = partsOrderLines[field.name] || {};
+
+                return (
+                  <Form.Item required={false} key={field.key}>
                     <Form.Item hidden key={`${index}joblineid`} name={[field.name, "joblineid"]}>
                       <Input />
                     </Form.Item>
                     <Form.Item hidden key={`${index}id`} name={[field.name, "id"]}>
                       <Input />
                     </Form.Item>
-                    <LayoutFormRow grow style={{ flex: 1 }}>
+                    <LayoutFormRow
+                      grow
+                      title={getFormListItemTitle(
+                        t("parts_orders.fields.line_desc"),
+                        index,
+                        partsOrderLine.line_desc,
+                        partsOrderLine.oem_partno
+                      )}
+                      extra={
+                        <Space align="center" size="small">
+                          <Button
+                            type="text"
+                            icon={<DeleteFilled />}
+                            onClick={() => {
+                              remove(field.name);
+                            }}
+                          />
+                          <FormListMoveArrows
+                            move={move}
+                            index={index}
+                            total={fields.length}
+                            orientation="horizontal"
+                          />
+                        </Space>
+                      }
+                    >
                       <Form.Item
                         label={t("parts_orders.fields.line_desc")}
                         key={`${index}line_desc`}
@@ -84,7 +113,7 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
                         key={`${index}location`}
                         name={[field.name, "location"]}
                       >
-                        <Select 
+                        <Select
                           style={{ width: "10rem" }}
                           options={bodyshop.md_parts_locations.map((loc, idx) => ({
                             key: idx,
@@ -101,16 +130,9 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
                         <InputNumber min={0} />
                       </Form.Item>
                     </LayoutFormRow>
-                    <DeleteFilled
-                      style={{ margin: "1rem" }}
-                      onClick={() => {
-                        remove(field.name);
-                      }}
-                    />
-                    <FormListMoveArrows move={move} index={index} total={fields.length} />
-                  </div>
-                </Form.Item>
-              ))}
+                  </Form.Item>
+                );
+              })}
             </div>
           );
         }}
diff --git a/client/src/components/parts-shop-info/parts-email-presets.component.jsx b/client/src/components/parts-shop-info/parts-email-presets.component.jsx
index deb5bb436..ba91f833d 100644
--- a/client/src/components/parts-shop-info/parts-email-presets.component.jsx
+++ b/client/src/components/parts-shop-info/parts-email-presets.component.jsx
@@ -2,10 +2,13 @@ import { DeleteFilled } from "@ant-design/icons";
 import { Button, Form, Input, Select, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function PartsEmailPresetsComponent() {
   const { t } = useTranslation();
+  const form = Form.useFormInstance();
+  const emailPresets = Form.useWatch(["md_to_emails"], form) || [];
 
   return (
     <div>
@@ -14,31 +17,46 @@ export default function PartsEmailPresetsComponent() {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.labels.md_to_emails_emails")}
-                        key={`${index}emails`}
-                        name={[field.name, "emails"]}
-                      >
-                        <Select mode="tags" tokenSeparators={[",", ";"]} />
-                      </Form.Item>
+                {fields.map((field, index) => {
+                  const preset = emailPresets[field.name] || {};
 
-                      <Space>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(t("general.labels.label"), index, preset.label, preset.emails)}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
+                      >
+                        <Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.labels.md_to_emails_emails")}
+                          key={`${index}emails`}
+                          name={[field.name, "emails"]}
+                        >
+                          <Select mode="tags" tokenSeparators={[",", ";"]} />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
diff --git a/client/src/components/parts-shop-info/parts-locations.component.jsx b/client/src/components/parts-shop-info/parts-locations.component.jsx
index 70f8516cc..7434cdd27 100644
--- a/client/src/components/parts-shop-info/parts-locations.component.jsx
+++ b/client/src/components/parts-shop-info/parts-locations.component.jsx
@@ -2,10 +2,13 @@ import { DeleteFilled } from "@ant-design/icons";
 import { Button, Form, Input, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function PartsLocationsComponent() {
   const { t } = useTranslation();
+  const form = Form.useFormInstance();
+  const partsLocations = Form.useWatch(["md_parts_locations"], form) || [];
 
   return (
     <div>
@@ -14,34 +17,49 @@ export default function PartsLocationsComponent() {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        className="imex-flex-row__margin"
-                        label={t("bodyshop.fields.partslocation")}
-                        key={`${index}`}
-                        name={[field.name]}
-                        rules={[
-                          {
-                            required: true
-                          }
-                        ]}
+                {fields.map((field, index) => {
+                  const location = partsLocations[field.name];
+
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(t("bodyshop.fields.partslocation"), index, location)}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <Input />
-                      </Form.Item>
-                      <Space wrap>
-                        <DeleteFilled
+                        <Form.Item
                           className="imex-flex-row__margin"
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                          label={t("bodyshop.fields.partslocation")}
+                          key={`${index}`}
+                          name={[field.name]}
+                          rules={[
+                            {
+                              required: true
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
diff --git a/client/src/components/parts-shop-info/parts-order-comments.component.jsx b/client/src/components/parts-shop-info/parts-order-comments.component.jsx
index c6d02ee5d..526efcdfe 100644
--- a/client/src/components/parts-shop-info/parts-order-comments.component.jsx
+++ b/client/src/components/parts-shop-info/parts-order-comments.component.jsx
@@ -2,10 +2,13 @@ import { DeleteFilled } from "@ant-design/icons";
 import { Button, Form, Input, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function PartsOrderCommentsComponent() {
   const { t } = useTranslation();
+  const form = Form.useFormInstance();
+  const orderComments = Form.useWatch(["md_parts_order_comment"], form) || [];
 
   return (
     <div>
@@ -14,45 +17,65 @@ export default function PartsOrderCommentsComponent() {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("general.labels.label")}
-                        key={`${index}label`}
-                        name={[field.name, "label"]}
-                        rules={[
-                          {
-                            required: true
-                          }
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("parts_orders.fields.comments")}
-                        key={`${index}comment`}
-                        name={[field.name, "comment"]}
-                        rules={[
-                          {
-                            required: true
-                          }
-                        ]}
-                      >
-                        <Input.TextArea autoSize />
-                      </Form.Item>
+                {fields.map((field, index) => {
+                  const comment = orderComments[field.name] || {};
 
-                      <Space wrap>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(
+                          t("parts_orders.fields.comments"),
+                          index,
+                          comment.label,
+                          comment.comment
+                        )}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
+                      >
+                        <Form.Item
+                          label={t("general.labels.label")}
+                          key={`${index}label`}
+                          name={[field.name, "label"]}
+                          rules={[
+                            {
+                              required: true
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("parts_orders.fields.comments")}
+                          key={`${index}comment`}
+                          name={[field.name, "comment"]}
+                          rules={[
+                            {
+                              required: true
+                            }
+                          ]}
+                        >
+                          <Input.TextArea autoSize />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
diff --git a/client/src/components/shop-employees/shop-employees-form.component.jsx b/client/src/components/shop-employees/shop-employees-form.component.jsx
index 59a5b7e9f..547143592 100644
--- a/client/src/components/shop-employees/shop-employees-form.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-form.component.jsx
@@ -1,7 +1,7 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation, useQuery } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
-import { Button, Card, Form, Input, InputNumber, Select, Switch } from "antd";
+import { Button, Card, Form, Input, InputNumber, Select, Space, Switch } from "antd";
 import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useForm } from "antd/es/form/Form";
 import queryString from "query-string";
@@ -27,6 +27,7 @@ import dayjs from "../../utils/day";
 import AlertComponent from "../alert/alert.component";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
 
@@ -40,6 +41,7 @@ const mapDispatchToProps = () => ({
 export function ShopEmployeesFormComponent({ bodyshop }) {
   const { t } = useTranslation();
   const [form] = useForm();
+  const employeeRates = Form.useWatch(["rates"], form) || [];
   const history = useNavigate();
   const search = queryString.parse(useLocation().search);
   const [deleteVacation] = useMutation(DELETE_VACATION);
@@ -311,58 +313,76 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
-                    <LayoutFormRow grow>
-                      <Form.Item
-                        label={t("employees.fields.cost_center")}
-                        key={`${index}`}
-                        name={[field.name, "cost_center"]}
-                        valuePropName="value"
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
+                {fields.map((field, index) => {
+                  const employeeRate = employeeRates[field.name] || {};
+
+                  return (
+                    <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
+                      <LayoutFormRow
+                        grow
+                        title={getFormListItemTitle(t("employees.fields.cost_center"), index, employeeRate.cost_center)}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <Select
-                          options={[
-                            { value: "timetickets.labels.shift", label: t("timetickets.labels.shift") },
-                            ...(bodyshop.cdk_dealerid ||
-                            bodyshop.pbs_serialnumber ||
-                            bodyshop.rr_dealerid ||
-                            Enhanced_Payroll.treatment === "on"
-                              ? CiecaSelect(false, true)
-                              : bodyshop.md_responsibility_centers.costs.map((c) => ({
-                                  value: c.name,
-                                  label: c.name
-                                })))
+                        <Form.Item
+                          label={t("employees.fields.cost_center")}
+                          key={`${index}`}
+                          name={[field.name, "cost_center"]}
+                          valuePropName="value"
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
                           ]}
-                        />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("employees.fields.rate")}
-                        key={`${index}`}
-                        name={[field.name, "rate"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <InputNumber min={0} precision={2} />
-                      </Form.Item>
-                      <DeleteFilled
-                        onClick={() => {
-                          remove(field.name);
-                        }}
-                      />
-                      <FormListMoveArrows move={move} index={index} total={fields.length} />
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                        >
+                          <Select
+                            options={[
+                              { value: "timetickets.labels.shift", label: t("timetickets.labels.shift") },
+                              ...(bodyshop.cdk_dealerid ||
+                              bodyshop.pbs_serialnumber ||
+                              bodyshop.rr_dealerid ||
+                              Enhanced_Payroll.treatment === "on"
+                                ? CiecaSelect(false, true)
+                                : bodyshop.md_responsibility_centers.costs.map((c) => ({
+                                    value: c.name,
+                                    label: c.name
+                                  })))
+                            ]}
+                          />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("employees.fields.rate")}
+                          key={`${index}`}
+                          name={[field.name, "rate"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <InputNumber min={0} precision={2} />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
diff --git a/client/src/components/shop-info/shop-info.color.utils.js b/client/src/components/shop-info/shop-info.color.utils.js
new file mode 100644
index 000000000..d577aee25
--- /dev/null
+++ b/client/src/components/shop-info/shop-info.color.utils.js
@@ -0,0 +1,304 @@
+/**
+ * Default translucent card color used for tinting card surfaces when no specific color is provided.
+ * @type {{r: number, g: number, b: number, a: number}}
+ */
+export const DEFAULT_TRANSLUCENT_CARD_COLOR = {
+  r: 22,
+  g: 119,
+  b: 255,
+  a: 0.5
+};
+
+/**
+ * Rounds a color channel value to two decimal places.
+ * @param value
+ * @returns {number}
+ */
+const roundColorChannel = (value) => Math.round(value * 100) / 100;
+
+/**
+ * Rounds a tint percentage value to two decimal places.
+ * @param value
+ * @returns {number}
+ */
+const roundTintPercentage = (value) => Math.round(value * 100) / 100;
+
+/**
+ * Clamps an alpha value to the range [0, 1] and rounds it to two decimal places.
+ * @param value
+ * @returns {number}
+ */
+const clampAlpha = (value) => {
+  const numericValue = Number(value);
+
+  if (!Number.isFinite(numericValue)) return 1;
+  if (numericValue <= 0) return 0;
+  if (numericValue >= 1) return 1;
+
+  return numericValue;
+};
+
+/**
+ * Converts an RGB color object to a hexadecimal color string.
+ * @param param0
+ * @param param0.r
+ * @param param0.g
+ * @param param0.b
+ * @returns {`#${string}`}
+ */
+const rgbToHex = ({ r, g, b }) =>
+  `#${[r, g, b].map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
+
+/**
+ * Converts an RGB color object to an HSL color object.
+ * @param param0
+ * @param param0.r
+ * @param param0.g
+ * @param param0.b
+ * @param param0.a
+ * @returns {{h: number, s: number, l: number, a: number}|{h: number, s: number, l: number, a: number}}
+ */
+const rgbToHsl = ({ r, g, b, a = 1 }) => {
+  const red = r / 255;
+  const green = g / 255;
+  const blue = b / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const delta = max - min;
+  const lightness = (max + min) / 2;
+
+  if (delta === 0) {
+    return { h: 0, s: 0, l: roundColorChannel(lightness), a };
+  }
+
+  const saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+  let hue;
+
+  switch (max) {
+    case red:
+      hue = (green - blue) / delta + (green < blue ? 6 : 0);
+      break;
+    case green:
+      hue = (blue - red) / delta + 2;
+      break;
+    default:
+      hue = (red - green) / delta + 4;
+      break;
+  }
+
+  return {
+    h: roundColorChannel(hue * 60),
+    s: roundColorChannel(saturation),
+    l: roundColorChannel(lightness),
+    a
+  };
+};
+
+/**
+ * Converts an RGB color object to an HSV color object.
+ * @param param0
+ * @param param0.r
+ * @param param0.g
+ * @param param0.b
+ * @param param0.a
+ * @returns {{h: number, s: number, v: number, a: number}}
+ */
+const rgbToHsv = ({ r, g, b, a = 1 }) => {
+  const red = r / 255;
+  const green = g / 255;
+  const blue = b / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const delta = max - min;
+  const saturation = max === 0 ? 0 : delta / max;
+  let hue = 0;
+
+  if (delta !== 0) {
+    switch (max) {
+      case red:
+        hue = (green - blue) / delta + (green < blue ? 6 : 0);
+        break;
+      case green:
+        hue = (blue - red) / delta + 2;
+        break;
+      default:
+        hue = (red - green) / delta + 4;
+        break;
+    }
+  }
+
+  return {
+    h: roundColorChannel(hue * 60),
+    s: roundColorChannel(saturation),
+    v: roundColorChannel(max),
+    a
+  };
+};
+
+/**
+ * Builds a comprehensive color value object for a color picker component based on an input RGB color object.
+ * @param rgb
+ * @returns {{hex: `#${string}`, rgb: *, hsl: {h: number, s: number, l: number, a: number}, hsv: {h: number, s: number, v: number, a: number}, oldHue: number, source: string}}
+ */
+const buildPickerColorValue = (rgb) => {
+  const hsl = rgbToHsl(rgb);
+
+  return {
+    hex: rgbToHex(rgb),
+    rgb: { ...rgb },
+    hsl,
+    hsv: rgbToHsv(rgb),
+    oldHue: hsl.h,
+    source: "rgb"
+  };
+};
+
+/**
+ * Default color value object for the color picker component, derived from the default translucent card color.
+ * @type {{hex: `#${string}`, rgb: *, hsl: {h: number, s: number, l: number, a: number}, hsv: {h: number, s: number, v: number, a: number}, oldHue: number, source: string}}
+ */
+export const DEFAULT_TRANSLUCENT_PICKER_COLOR = buildPickerColorValue(DEFAULT_TRANSLUCENT_CARD_COLOR);
+
+/**
+ * Parses a color string that may be a JSON representation of a color object. If the string is valid JSON and represents
+ * a color, it returns the parsed object; otherwise, it returns the original string.
+ * @param color
+ * @returns {*|string}
+ */
+const parseJsonColorString = (color) => {
+  if (typeof color !== "string") return color;
+
+  const trimmedColor = color.trim();
+  if (!trimmedColor.startsWith("{") && !trimmedColor.startsWith("[")) return color;
+
+  try {
+    return JSON.parse(trimmedColor);
+  } catch {
+    return color;
+  }
+};
+
+/**
+ * Parses a hexadecimal color string (e.g., "#RRGGBB" or "#RRGGBBAA") and returns an object containing the corresponding
+ * RGB color value and alpha transparency. Supports both 3/4-digit and 6/8-digit hex formats.
+ * @param color
+ * @returns {{colorCssValue: string, alpha: number}|null}
+ */
+const parseHexColor = (color) => {
+  if (typeof color !== "string") return null;
+
+  const normalizedHex = color.trim().replace(/^#/, "");
+
+  if (![3, 4, 6, 8].includes(normalizedHex.length) || /[^0-9a-f]/i.test(normalizedHex)) {
+    return null;
+  }
+
+  const expandedHex =
+    normalizedHex.length <= 4
+      ? normalizedHex
+          .split("")
+          .map((character) => `${character}${character}`)
+          .join("")
+      : normalizedHex;
+
+  const hasAlpha = expandedHex.length === 8;
+  const red = Number.parseInt(expandedHex.slice(0, 2), 16);
+  const green = Number.parseInt(expandedHex.slice(2, 4), 16);
+  const blue = Number.parseInt(expandedHex.slice(4, 6), 16);
+  const alpha = hasAlpha ? Number.parseInt(expandedHex.slice(6, 8), 16) / 255 : 1;
+
+  return {
+    colorCssValue: `rgb(${red}, ${green}, ${blue})`,
+    alpha: clampAlpha(alpha)
+  };
+};
+
+/**
+ * Parses an RGB or RGBA color string (e.g., "rgb(255, 0, 0)" or "rgba(255, 0, 0, 0.5)") and returns an object
+ * containing the corresponding RGB color value and alpha transparency. Supports both integer and percentage formats for
+ * color channels and alpha.
+ * @param color
+ * @returns {{colorCssValue: string, alpha: number}|null}
+ */
+const parseRgbColor = (color) => {
+  if (typeof color !== "string") return null;
+
+  const rgbMatch = color.trim().match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i);
+
+  if (!rgbMatch) return null;
+
+  const [, red, green, blue, alpha = 1] = rgbMatch;
+
+  return {
+    colorCssValue: `rgb(${red}, ${green}, ${blue})`,
+    alpha: clampAlpha(alpha)
+  };
+};
+
+/**
+ * Normalizes a color input into a consistent descriptor object containing a CSS color value and an alpha transparency
+ * level.
+ * @param color
+ * @returns {{colorCssValue: string, alpha: number}|{colorCssValue: string, alpha: number}|*|{colorCssValue: string, alpha: number}|null}
+ */
+const getNormalizedColorDescriptor = (color) => {
+  if (!color) return null;
+
+  const normalizedColor = parseJsonColorString(color);
+
+  if (typeof normalizedColor === "string") {
+    return (
+      parseHexColor(normalizedColor) ||
+      parseRgbColor(normalizedColor) || {
+        colorCssValue: normalizedColor,
+        alpha: 1
+      }
+    );
+  }
+
+  if (typeof normalizedColor === "object" && normalizedColor.rgb) {
+    return getNormalizedColorDescriptor(normalizedColor.rgb);
+  }
+
+  if (typeof normalizedColor === "object" && typeof normalizedColor.hex === "string") {
+    return getNormalizedColorDescriptor(normalizedColor.hex);
+  }
+
+  if (
+    typeof normalizedColor === "object" &&
+    normalizedColor.r !== undefined &&
+    normalizedColor.g !== undefined &&
+    normalizedColor.b !== undefined
+  ) {
+    return {
+      colorCssValue: `rgb(${normalizedColor.r}, ${normalizedColor.g}, ${normalizedColor.b})`,
+      alpha: clampAlpha(normalizedColor.a)
+    };
+  }
+
+  return null;
+};
+
+/**
+ * Generates CSS styles for tinting card surfaces based on a provided color input. The function normalizes the input
+ * color,
+ * @param color
+ * @returns {{surfaceBg: string, surfaceHeaderBg: string, surfaceBorderColor: string}|{}}
+ */
+export const getTintedCardSurfaceStyles = (color) => {
+  const normalizedColor = getNormalizedColorDescriptor(color);
+  if (!normalizedColor?.colorCssValue) return {};
+
+  const tintStrength = clampAlpha(normalizedColor.alpha);
+  if (tintStrength === 0) return {};
+
+  const backgroundTint = roundTintPercentage(10 * tintStrength);
+  const headerTint = roundTintPercentage(18 * tintStrength);
+  const borderTint = roundTintPercentage(30 * tintStrength);
+
+  return {
+    surfaceBg: `color-mix(in srgb, ${normalizedColor.colorCssValue} ${backgroundTint}%, var(--imex-form-surface))`,
+    surfaceHeaderBg: `color-mix(in srgb, ${normalizedColor.colorCssValue} ${headerTint}%, var(--imex-form-surface-head))`,
+    surfaceBorderColor: `color-mix(in srgb, ${normalizedColor.colorCssValue} ${borderTint}%, var(--imex-form-surface-border))`
+  };
+};
diff --git a/client/src/components/shop-info/shop-info.color.utils.test.js b/client/src/components/shop-info/shop-info.color.utils.test.js
new file mode 100644
index 000000000..d39fb810f
--- /dev/null
+++ b/client/src/components/shop-info/shop-info.color.utils.test.js
@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { getTintedCardSurfaceStyles } from "./shop-info.color.utils";
+
+describe("shop info color utilities", () => {
+  it("scales card tint intensity with alpha for plain rgba values", () => {
+    expect(
+      getTintedCardSurfaceStyles({
+        r: 22,
+        g: 119,
+        b: 255,
+        a: 0.5
+      })
+    ).toEqual({
+      surfaceBg: "color-mix(in srgb, rgb(22, 119, 255) 5%, var(--imex-form-surface))",
+      surfaceHeaderBg: "color-mix(in srgb, rgb(22, 119, 255) 9%, var(--imex-form-surface-head))",
+      surfaceBorderColor: "color-mix(in srgb, rgb(22, 119, 255) 15%, var(--imex-form-surface-border))"
+    });
+  });
+
+  it("returns no tint when the selected color alpha is zero", () => {
+    expect(
+      getTintedCardSurfaceStyles({
+        hex: "#1677ff",
+        rgb: {
+          r: 22,
+          g: 119,
+          b: 255,
+          a: 0
+        }
+      })
+    ).toEqual({});
+  });
+
+  it("supports legacy JSON-stringified picker values", () => {
+    expect(
+      getTintedCardSurfaceStyles(
+        JSON.stringify({
+          rgb: {
+            r: 255,
+            g: 0,
+            b: 0,
+            a: 0.25
+          }
+        })
+      )
+    ).toEqual({
+      surfaceBg: "color-mix(in srgb, rgb(255, 0, 0) 2.5%, var(--imex-form-surface))",
+      surfaceHeaderBg: "color-mix(in srgb, rgb(255, 0, 0) 4.5%, var(--imex-form-surface-head))",
+      surfaceBorderColor: "color-mix(in srgb, rgb(255, 0, 0) 7.5%, var(--imex-form-surface-border))"
+    });
+  });
+});
diff --git a/client/src/components/shop-info/shop-info.general.component.jsx b/client/src/components/shop-info/shop-info.general.component.jsx
index 00410f0f9..41a0e0f65 100644
--- a/client/src/components/shop-info/shop-info.general.component.jsx
+++ b/client/src/components/shop-info/shop-info.general.component.jsx
@@ -8,6 +8,7 @@ import CurrencyInput from "../form-items-formatted/currency-form-item.component"
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 const timeZonesList = Intl.supportedValuesOf("timeZone");
@@ -19,6 +20,16 @@ export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoGeneral);
 
 export function ShopInfoGeneral({ form }) {
   const { t } = useTranslation();
+  const messagingPresets = Form.useWatch(["md_messaging_presets"], form) || [];
+  const notesPresets = Form.useWatch(["md_notes_presets"], form) || [];
+  const partsLocations = Form.useWatch(["md_parts_locations"], form) || [];
+  const insuranceCompanies = Form.useWatch(["md_ins_cos"], form) || [];
+  const estimators = Form.useWatch(["md_estimators"], form) || [];
+  const fileHandlers = Form.useWatch(["md_filehandlers"], form) || [];
+  const courtesyCarRates = Form.useWatch(["md_ccc_rates"], form) || [];
+  const joblinePresets = Form.useWatch(["md_jobline_presets"], form) || [];
+  const partOrderComments = Form.useWatch(["md_parts_order_comment"], form) || [];
+  const notificationEmails = Form.useWatch(["md_to_emails"], form) || [];
 
   return (
     <div>
@@ -88,7 +99,7 @@ export function ShopInfoGeneral({ form }) {
           name="phone"
           rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "phone")]}
         >
-          <PhoneFormItem />
+          <PhoneFormItem formatDisplayOnly showPhoneAction />
         </Form.Item>
         <Form.Item label={t("bodyshop.fields.website")} name="website">
           <Input />
@@ -445,46 +456,67 @@ export function ShopInfoGeneral({ form }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("bodyshop.fields.messaginglabel")}
-                        key={`${index}label`}
-                        name={[field.name, "label"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
+                {fields.map((field, index) => {
+                  const messagingPreset = messagingPresets[field.name] || {};
+
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(
+                          t("bodyshop.fields.messaginglabel"),
+                          index,
+                          messagingPreset.label,
+                          messagingPreset.text
+                        )}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.messagingtext")}
-                        key={`${index}text`}
-                        name={[field.name, "text"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <Input.TextArea autoSize />
-                      </Form.Item>
-                      <Space wrap>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                        <Form.Item
+                          label={t("bodyshop.fields.messaginglabel")}
+                          key={`${index}label`}
+                          name={[field.name, "label"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.messagingtext")}
+                          key={`${index}text`}
+                          name={[field.name, "text"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input.TextArea autoSize />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
@@ -506,46 +538,67 @@ export function ShopInfoGeneral({ form }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("bodyshop.fields.noteslabel")}
-                        key={`${index}label`}
-                        name={[field.name, "label"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
+                {fields.map((field, index) => {
+                  const notesPreset = notesPresets[field.name] || {};
+
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(
+                          t("bodyshop.fields.noteslabel"),
+                          index,
+                          notesPreset.label,
+                          notesPreset.text
+                        )}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.notestext")}
-                        key={`${index}text`}
-                        name={[field.name, "text"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <Input.TextArea autoSize />
-                      </Form.Item>
-                      <Space wrap>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                        <Form.Item
+                          label={t("bodyshop.fields.noteslabel")}
+                          key={`${index}label`}
+                          name={[field.name, "label"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.notestext")}
+                          key={`${index}text`}
+                          name={[field.name, "text"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input.TextArea autoSize />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
@@ -567,35 +620,50 @@ export function ShopInfoGeneral({ form }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        className="imex-flex-row__margin"
-                        label={t("bodyshop.fields.partslocation")}
-                        key={`${index}`}
-                        name={[field.name]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
+                {fields.map((field, index) => {
+                  const partsLocation = partsLocations[field.name];
+
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(t("bodyshop.fields.partslocation"), index, partsLocation)}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <Input />
-                      </Form.Item>
-                      <Space wrap>
-                        <DeleteFilled
+                        <Form.Item
                           className="imex-flex-row__margin"
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                          label={t("bodyshop.fields.partslocation")}
+                          key={`${index}`}
+                          name={[field.name]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
@@ -623,97 +691,112 @@ export function ShopInfoGeneral({ form }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("bodyshop.fields.md_ins_co.name")}
-                        key={`${index}name`}
-                        name={[field.name, "name"]}
-                        dependencies={[["md_ins_cos"]]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          },
-                          ({ getFieldValue }) => ({
-                            validator: async (_, value) => {
-                              const normalizedValue = (value ?? "").toString().trim().toLowerCase();
-                              if (!normalizedValue) return Promise.resolve(); // handled by required
+                {fields.map((field, index) => {
+                  const insuranceCompany = insuranceCompanies[field.name] || {};
 
-                              const list = getFieldValue(["md_ins_cos"]) || [];
-                              const normalizedNames = list
-                                .map((c) => (c?.name ?? "").toString().trim().toLowerCase())
-                                .filter(Boolean);
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(t("bodyshop.fields.md_ins_co.name"), index, insuranceCompany.name)}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
+                      >
+                        <Form.Item
+                          label={t("bodyshop.fields.md_ins_co.name")}
+                          key={`${index}name`}
+                          name={[field.name, "name"]}
+                          dependencies={[["md_ins_cos"]]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            },
+                            ({ getFieldValue }) => ({
+                              validator: async (_, value) => {
+                                const normalizedValue = (value ?? "").toString().trim().toLowerCase();
+                                if (!normalizedValue) return Promise.resolve(); // handled by required
 
-                              const count = normalizedNames.filter((n) => n === normalizedValue).length;
+                                const list = getFieldValue(["md_ins_cos"]) || [];
+                                const normalizedNames = list
+                                  .map((c) => (c?.name ?? "").toString().trim().toLowerCase())
+                                  .filter(Boolean);
 
-                              if (count > 1) {
-                                throw new Error(t("bodyshop.errors.duplicate_insurance_company"));
+                                const count = normalizedNames.filter((n) => n === normalizedValue).length;
+
+                                if (count > 1) {
+                                  throw new Error(t("bodyshop.errors.duplicate_insurance_company"));
+                                }
+
+                                return Promise.resolve();
                               }
-
-                              return Promise.resolve();
-                            }
-                          })
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.md_ins_co.street1")}
-                        key={`${index}street1`}
-                        name={[field.name, "street1"]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.md_ins_co.street2")}
-                        key={`${index}street2`}
-                        name={[field.name, "street2"]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.md_ins_co.city")}
-                        key={`${index}city`}
-                        name={[field.name, "city"]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.md_ins_co.state")}
-                        key={`${index}state`}
-                        name={[field.name, "state"]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.md_ins_co.zip")}
-                        key={`${index}zip`}
-                        name={[field.name, "zip"]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.md_ins_co.private")}
-                        key={`${index}private`}
-                        name={[field.name, "private"]}
-                        valuePropName="checked"
-                      >
-                        <Switch />
-                      </Form.Item>
-
-                      <Space wrap>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                            })
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.md_ins_co.street1")}
+                          key={`${index}street1`}
+                          name={[field.name, "street1"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.md_ins_co.street2")}
+                          key={`${index}street2`}
+                          name={[field.name, "street2"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.md_ins_co.city")}
+                          key={`${index}city`}
+                          name={[field.name, "city"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.md_ins_co.state")}
+                          key={`${index}state`}
+                          name={[field.name, "state"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.md_ins_co.zip")}
+                          key={`${index}zip`}
+                          name={[field.name, "zip"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.md_ins_co.private")}
+                          key={`${index}private`}
+                          name={[field.name, "private"]}
+                          valuePropName="checked"
+                        >
+                          <Switch />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
@@ -738,64 +821,85 @@ export function ShopInfoGeneral({ form }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("jobs.fields.est_co_nm")}
-                        key={`${index}est_co_nm`}
-                        name={[field.name, "est_co_nm"]}
+                {fields.map((field, index) => {
+                  const estimator = estimators[field.name] || {};
+                  const estimatorName = [estimator.est_ct_fn, estimator.est_ct_ln].filter(Boolean).join(" ");
+                  const estimatorTitle =
+                    estimator.est_co_nm && estimatorName
+                      ? `${estimator.est_co_nm} | ${estimatorName}`
+                      : getFormListItemTitle(t("jobs.fields.est_co_nm"), index, estimator.est_co_nm, estimatorName);
+
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={estimatorTitle}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("jobs.fields.est_ct_fn")}
-                        key={`${index}est_ct_fn`}
-                        name={[field.name, "est_ct_fn"]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("jobs.fields.est_ct_ln")}
-                        key={`${index}est_ct_ln`}
-                        name={[field.name, "est_ct_ln"]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("jobs.fields.est_ph1")}
-                        key={`${index}est_ph1`}
-                        name={[field.name, "est_ph1"]}
-                        rules={[
-                          ({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, [field.name, "est_ph"])
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("jobs.fields.est_ea")}
-                        key={`${index}est_ea`}
-                        name={[field.name, "est_ea"]}
-                        rules={[
-                          {
-                            type: "email",
-                            message: "This is not a valid email address."
-                          }
-                        ]}
-                      >
-                        <FormItemEmail email={form.getFieldValue([field.name, "est_ea"])} />
-                      </Form.Item>
-                      <Space>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                        <Form.Item
+                          label={t("jobs.fields.est_co_nm")}
+                          key={`${index}est_co_nm`}
+                          name={[field.name, "est_co_nm"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.est_ct_fn")}
+                          key={`${index}est_ct_fn`}
+                          name={[field.name, "est_ct_fn"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.est_ct_ln")}
+                          key={`${index}est_ct_ln`}
+                          name={[field.name, "est_ct_ln"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.est_ph1")}
+                          key={`${index}est_ph1`}
+                          name={[field.name, "est_ph1"]}
+                          rules={[
+                            ({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, [field.name, "est_ph"])
+                          ]}
+                        >
+                          <PhoneFormItem formatDisplayOnly showPhoneAction />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.est_ea")}
+                          key={`${index}est_ea`}
+                          name={[field.name, "est_ea"]}
+                          rules={[
+                            {
+                              type: "email",
+                              message: "This is not a valid email address."
+                            }
+                          ]}
+                        >
+                          <FormItemEmail email={form.getFieldValue([field.name, "est_ea"])} />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
@@ -817,57 +921,79 @@ export function ShopInfoGeneral({ form }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("jobs.fields.ins_ct_fn")}
-                        key={`${index}ins_ct_fn`}
-                        name={[field.name, "ins_ct_fn"]}
+                {fields.map((field, index) => {
+                  const fileHandler = fileHandlers[field.name] || {};
+                  const fileHandlerName = [fileHandler.ins_ct_fn, fileHandler.ins_ct_ln].filter(Boolean).join(" ");
+
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(
+                          t("jobs.fields.ins_ct_fn"),
+                          index,
+                          fileHandlerName,
+                          fileHandler.ins_ea
+                        )}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("jobs.fields.ins_ct_ln")}
-                        key={`${index}ins_ct_ln`}
-                        name={[field.name, "ins_ct_ln"]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("jobs.fields.ins_ph1")}
-                        key={`${index}ins_ph1`}
-                        name={[field.name, "ins_ph1"]}
-                        rules={[
-                          ({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, [field.name, "ins_ph"])
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("jobs.fields.ins_ea")}
-                        key={`${index}ins_ea`}
-                        name={[field.name, "ins_ea"]}
-                        rules={[
-                          {
-                            type: "email",
-                            message: "This is not a valid email address."
-                          }
-                        ]}
-                      >
-                        <FormItemEmail email={form.getFieldValue([field.name, "ins_ea"])} />
-                      </Form.Item>
-                      <Space>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                        <Form.Item
+                          label={t("jobs.fields.ins_ct_fn")}
+                          key={`${index}ins_ct_fn`}
+                          name={[field.name, "ins_ct_fn"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.ins_ct_ln")}
+                          key={`${index}ins_ct_ln`}
+                          name={[field.name, "ins_ct_ln"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.ins_ph1")}
+                          key={`${index}ins_ph1`}
+                          name={[field.name, "ins_ph1"]}
+                          rules={[
+                            ({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, [field.name, "ins_ph"])
+                          ]}
+                        >
+                          <PhoneFormItem formatDisplayOnly showPhoneAction />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.ins_ea")}
+                          key={`${index}ins_ea`}
+                          name={[field.name, "ins_ea"]}
+                          rules={[
+                            {
+                              type: "email",
+                              message: "This is not a valid email address."
+                            }
+                          ]}
+                        >
+                          <FormItemEmail email={form.getFieldValue([field.name, "ins_ea"])} />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
@@ -890,104 +1016,119 @@ export function ShopInfoGeneral({ form }) {
             {(fields, { add, remove, move }) => {
               return (
                 <div>
-                  {fields.map((field, index) => (
-                    <Form.Item key={field.key}>
-                      <LayoutFormRow noDivider>
-                        <Form.Item
-                          label={t("general.labels.label")}
-                          key={`${index}label`}
-                          name={[field.name, "label"]}
-                          rules={[
-                            {
-                              required: true
-                              //message: t("general.validation.required"),
-                            }
-                          ]}
-                        >
-                          <Input />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("contracts.fields.actax")}
-                          key={`${index}actax`}
-                          name={[field.name, "actax"]}
-                        >
-                          <InputNumber precision={2} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("contracts.fields.dailyfreekm")}
-                          key={`${index}dailyfreekm`}
-                          name={[field.name, "dailyfreekm"]}
-                        >
-                          <InputNumber precision={2} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("contracts.fields.refuelcharge")}
-                          key={`${index}refuelcharge`}
-                          name={[field.name, "refuelcharge"]}
-                        >
-                          <InputNumber precision={2} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("contracts.fields.excesskmrate")}
-                          key={`${index}excesskmrate`}
-                          name={[field.name, "excesskmrate"]}
-                        >
-                          <InputNumber precision={2} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("contracts.fields.cleanupcharge")}
-                          key={`${index}cleanupcharge`}
-                          name={[field.name, "cleanupcharge"]}
-                        >
-                          <InputNumber precision={2} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("contracts.fields.damagewaiver")}
-                          key={`${index}damagewaiver`}
-                          name={[field.name, "damagewaiver"]}
-                        >
-                          <InputNumber precision={2} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("contracts.fields.federaltax")}
-                          key={`${index}federaltax`}
-                          name={[field.name, "federaltax"]}
-                        >
-                          <InputNumber precision={2} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("contracts.fields.statetax")}
-                          key={`${index}statetax`}
-                          name={[field.name, "statetax"]}
-                        >
-                          <InputNumber precision={2} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("contracts.fields.localtax")}
-                          key={`${index}localtax`}
-                          name={[field.name, "localtax"]}
-                        >
-                          <InputNumber precision={2} />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("contracts.fields.coverage")}
-                          key={`${index}coverage`}
-                          name={[field.name, "coverage"]}
-                        >
-                          <InputNumber precision={2} />
-                        </Form.Item>
+                  {fields.map((field, index) => {
+                    const courtesyCarRate = courtesyCarRates[field.name] || {};
 
-                        <Space wrap>
-                          <DeleteFilled
-                            onClick={() => {
-                              remove(field.name);
-                            }}
-                          />
-                          <FormListMoveArrows move={move} index={index} total={fields.length} />
-                        </Space>
-                      </LayoutFormRow>
-                    </Form.Item>
-                  ))}
+                    return (
+                      <Form.Item key={field.key}>
+                        <LayoutFormRow
+                          noDivider
+                          title={getFormListItemTitle(t("general.labels.label"), index, courtesyCarRate.label)}
+                          extra={
+                            <Space align="center" size="small">
+                              <Button
+                                type="text"
+                                icon={<DeleteFilled />}
+                                onClick={() => {
+                                  remove(field.name);
+                                }}
+                              />
+                              <FormListMoveArrows
+                                move={move}
+                                index={index}
+                                total={fields.length}
+                                orientation="horizontal"
+                              />
+                            </Space>
+                          }
+                        >
+                          <Form.Item
+                            label={t("general.labels.label")}
+                            key={`${index}label`}
+                            name={[field.name, "label"]}
+                            rules={[
+                              {
+                                required: true
+                                //message: t("general.validation.required"),
+                              }
+                            ]}
+                          >
+                            <Input />
+                          </Form.Item>
+                          <Form.Item
+                            label={t("contracts.fields.actax")}
+                            key={`${index}actax`}
+                            name={[field.name, "actax"]}
+                          >
+                            <InputNumber precision={2} />
+                          </Form.Item>
+                          <Form.Item
+                            label={t("contracts.fields.dailyfreekm")}
+                            key={`${index}dailyfreekm`}
+                            name={[field.name, "dailyfreekm"]}
+                          >
+                            <InputNumber precision={2} />
+                          </Form.Item>
+                          <Form.Item
+                            label={t("contracts.fields.refuelcharge")}
+                            key={`${index}refuelcharge`}
+                            name={[field.name, "refuelcharge"]}
+                          >
+                            <InputNumber precision={2} />
+                          </Form.Item>
+                          <Form.Item
+                            label={t("contracts.fields.excesskmrate")}
+                            key={`${index}excesskmrate`}
+                            name={[field.name, "excesskmrate"]}
+                          >
+                            <InputNumber precision={2} />
+                          </Form.Item>
+                          <Form.Item
+                            label={t("contracts.fields.cleanupcharge")}
+                            key={`${index}cleanupcharge`}
+                            name={[field.name, "cleanupcharge"]}
+                          >
+                            <InputNumber precision={2} />
+                          </Form.Item>
+                          <Form.Item
+                            label={t("contracts.fields.damagewaiver")}
+                            key={`${index}damagewaiver`}
+                            name={[field.name, "damagewaiver"]}
+                          >
+                            <InputNumber precision={2} />
+                          </Form.Item>
+                          <Form.Item
+                            label={t("contracts.fields.federaltax")}
+                            key={`${index}federaltax`}
+                            name={[field.name, "federaltax"]}
+                          >
+                            <InputNumber precision={2} />
+                          </Form.Item>
+                          <Form.Item
+                            label={t("contracts.fields.statetax")}
+                            key={`${index}statetax`}
+                            name={[field.name, "statetax"]}
+                          >
+                            <InputNumber precision={2} />
+                          </Form.Item>
+                          <Form.Item
+                            label={t("contracts.fields.localtax")}
+                            key={`${index}localtax`}
+                            name={[field.name, "localtax"]}
+                          >
+                            <InputNumber precision={2} />
+                          </Form.Item>
+                          <Form.Item
+                            label={t("contracts.fields.coverage")}
+                            key={`${index}coverage`}
+                            name={[field.name, "coverage"]}
+                          >
+                            <InputNumber precision={2} />
+                          </Form.Item>
+                        </LayoutFormRow>
+                      </Form.Item>
+                    );
+                  })}
                   <Form.Item>
                     <Button
                       type="dashed"
@@ -1011,128 +1152,149 @@ export function ShopInfoGeneral({ form }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("general.labels.label")}
-                        key={`${index}label`}
-                        name={[field.name, "label"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
+                {fields.map((field, index) => {
+                  const joblinePreset = joblinePresets[field.name] || {};
+
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(
+                          t("general.labels.label"),
+                          index,
+                          joblinePreset.label,
+                          joblinePreset.line_desc
+                        )}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.line_desc")}
-                        key={`${index}line_desc`}
-                        name={[field.name, "line_desc"]}
-                      >
-                        <Input.TextArea autoSize />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.mod_lbr_ty")}
-                        key={`${index}mod_lbr_ty`}
-                        name={[field.name, "mod_lbr_ty"]}
-                      >
-                        <Select
-                          allowClear
-                          options={[
-                            { value: "LAA", label: t("joblines.fields.lbr_types.LAA") },
-                            { value: "LAB", label: t("joblines.fields.lbr_types.LAB") },
-                            { value: "LAD", label: t("joblines.fields.lbr_types.LAD") },
-                            { value: "LAE", label: t("joblines.fields.lbr_types.LAE") },
-                            { value: "LAF", label: t("joblines.fields.lbr_types.LAF") },
-                            { value: "LAG", label: t("joblines.fields.lbr_types.LAG") },
-                            { value: "LAM", label: t("joblines.fields.lbr_types.LAM") },
-                            { value: "LAR", label: t("joblines.fields.lbr_types.LAR") },
-                            { value: "LAS", label: t("joblines.fields.lbr_types.LAS") },
-                            { value: "LAU", label: t("joblines.fields.lbr_types.LAU") },
-                            { value: "LA1", label: t("joblines.fields.lbr_types.LA1") },
-                            { value: "LA2", label: t("joblines.fields.lbr_types.LA2") },
-                            { value: "LA3", label: t("joblines.fields.lbr_types.LA3") },
-                            { value: "LA4", label: t("joblines.fields.lbr_types.LA4") }
+                        <Form.Item
+                          label={t("general.labels.label")}
+                          key={`${index}label`}
+                          name={[field.name, "label"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
                           ]}
-                        />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.mod_lb_hrs")}
-                        key={`${index}mod_lb_hrs`}
-                        name={[field.name, "mod_lb_hrs"]}
-                      >
-                        <InputNumber precision={1} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.part_type")}
-                        key={`${index}part_type`}
-                        name={[field.name, "part_type"]}
-                      >
-                        <Select
-                          allowClear
-                          options={[
-                            { value: "PAA", label: t("joblines.fields.part_types.PAA") },
-                            { value: "PAC", label: t("joblines.fields.part_types.PAC") },
-                            { value: "PAE", label: t("joblines.fields.part_types.PAE") },
-                            { value: "PAL", label: t("joblines.fields.part_types.PAL") },
-                            { value: "PAM", label: t("joblines.fields.part_types.PAM") },
-                            { value: "PAN", label: t("joblines.fields.part_types.PAN") },
-                            { value: "PAO", label: t("joblines.fields.part_types.PAO") },
-                            { value: "PAR", label: t("joblines.fields.part_types.PAR") },
-                            { value: "PAS", label: t("joblines.fields.part_types.PAS") }
-                          ]}
-                        />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.oem_partno")}
-                        key={`${index}oem_partno`}
-                        name={[field.name, "oem_partno"]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.part_qty")}
-                        key={`${index}part_qty`}
-                        name={[field.name, "part_qty"]}
-                      >
-                        <CurrencyInput precision={2} min={0} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.act_price")}
-                        key={`${index}act_price`}
-                        name={[field.name, "act_price"]}
-                      >
-                        <CurrencyInput precision={2} min={0} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.prt_dsmk_p")}
-                        key={`${index}prt_dsmk_p`}
-                        name={[field.name, "prt_dsmk_p"]}
-                      >
-                        <InputNumber precision={0} min={-100} max={100} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("joblines.fields.ah_detail_line")}
-                        key={`${index}ah_detail_line`}
-                        name={[field.name, "ah_detail_line"]}
-                        valuePropName="checked"
-                      >
-                        <Switch />
-                      </Form.Item>
-                      <Space wrap>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("joblines.fields.line_desc")}
+                          key={`${index}line_desc`}
+                          name={[field.name, "line_desc"]}
+                        >
+                          <Input.TextArea autoSize />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("joblines.fields.mod_lbr_ty")}
+                          key={`${index}mod_lbr_ty`}
+                          name={[field.name, "mod_lbr_ty"]}
+                        >
+                          <Select
+                            allowClear
+                            options={[
+                              { value: "LAA", label: t("joblines.fields.lbr_types.LAA") },
+                              { value: "LAB", label: t("joblines.fields.lbr_types.LAB") },
+                              { value: "LAD", label: t("joblines.fields.lbr_types.LAD") },
+                              { value: "LAE", label: t("joblines.fields.lbr_types.LAE") },
+                              { value: "LAF", label: t("joblines.fields.lbr_types.LAF") },
+                              { value: "LAG", label: t("joblines.fields.lbr_types.LAG") },
+                              { value: "LAM", label: t("joblines.fields.lbr_types.LAM") },
+                              { value: "LAR", label: t("joblines.fields.lbr_types.LAR") },
+                              { value: "LAS", label: t("joblines.fields.lbr_types.LAS") },
+                              { value: "LAU", label: t("joblines.fields.lbr_types.LAU") },
+                              { value: "LA1", label: t("joblines.fields.lbr_types.LA1") },
+                              { value: "LA2", label: t("joblines.fields.lbr_types.LA2") },
+                              { value: "LA3", label: t("joblines.fields.lbr_types.LA3") },
+                              { value: "LA4", label: t("joblines.fields.lbr_types.LA4") }
+                            ]}
+                          />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("joblines.fields.mod_lb_hrs")}
+                          key={`${index}mod_lb_hrs`}
+                          name={[field.name, "mod_lb_hrs"]}
+                        >
+                          <InputNumber precision={1} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("joblines.fields.part_type")}
+                          key={`${index}part_type`}
+                          name={[field.name, "part_type"]}
+                        >
+                          <Select
+                            allowClear
+                            options={[
+                              { value: "PAA", label: t("joblines.fields.part_types.PAA") },
+                              { value: "PAC", label: t("joblines.fields.part_types.PAC") },
+                              { value: "PAE", label: t("joblines.fields.part_types.PAE") },
+                              { value: "PAL", label: t("joblines.fields.part_types.PAL") },
+                              { value: "PAM", label: t("joblines.fields.part_types.PAM") },
+                              { value: "PAN", label: t("joblines.fields.part_types.PAN") },
+                              { value: "PAO", label: t("joblines.fields.part_types.PAO") },
+                              { value: "PAR", label: t("joblines.fields.part_types.PAR") },
+                              { value: "PAS", label: t("joblines.fields.part_types.PAS") }
+                            ]}
+                          />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("joblines.fields.oem_partno")}
+                          key={`${index}oem_partno`}
+                          name={[field.name, "oem_partno"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("joblines.fields.part_qty")}
+                          key={`${index}part_qty`}
+                          name={[field.name, "part_qty"]}
+                        >
+                          <CurrencyInput precision={2} min={0} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("joblines.fields.act_price")}
+                          key={`${index}act_price`}
+                          name={[field.name, "act_price"]}
+                        >
+                          <CurrencyInput precision={2} min={0} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("joblines.fields.prt_dsmk_p")}
+                          key={`${index}prt_dsmk_p`}
+                          name={[field.name, "prt_dsmk_p"]}
+                        >
+                          <InputNumber precision={0} min={-100} max={100} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("joblines.fields.ah_detail_line")}
+                          key={`${index}ah_detail_line`}
+                          name={[field.name, "ah_detail_line"]}
+                          valuePropName="checked"
+                        >
+                          <Switch />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
@@ -1154,47 +1316,67 @@ export function ShopInfoGeneral({ form }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("general.labels.label")}
-                        key={`${index}label`}
-                        name={[field.name, "label"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("parts_orders.fields.comments")}
-                        key={`${index}comment`}
-                        name={[field.name, "comment"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <Input.TextArea autoSize />
-                      </Form.Item>
+                {fields.map((field, index) => {
+                  const partOrderComment = partOrderComments[field.name] || {};
 
-                      <Space wrap>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(
+                          t("parts_orders.fields.comments"),
+                          index,
+                          partOrderComment.label,
+                          partOrderComment.comment
+                        )}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
+                      >
+                        <Form.Item
+                          label={t("general.labels.label")}
+                          key={`${index}label`}
+                          name={[field.name, "label"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("parts_orders.fields.comments")}
+                          key={`${index}comment`}
+                          name={[field.name, "comment"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input.TextArea autoSize />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
@@ -1216,47 +1398,67 @@ export function ShopInfoGeneral({ form }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("general.labels.label")}
-                        key={`${index}label`}
-                        name={[field.name, "label"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.labels.md_to_emails_emails")}
-                        key={`${index}emails`}
-                        name={[field.name, "emails"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <FormItemEmail email={form.getFieldValue([field.name, "emails"])} />
-                      </Form.Item>
+                {fields.map((field, index) => {
+                  const notificationEmail = notificationEmails[field.name] || {};
 
-                      <Space>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(
+                          t("general.labels.label"),
+                          index,
+                          notificationEmail.label,
+                          notificationEmail.emails
+                        )}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
+                      >
+                        <Form.Item
+                          label={t("general.labels.label")}
+                          key={`${index}label`}
+                          name={[field.name, "label"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.labels.md_to_emails_emails")}
+                          key={`${index}emails`}
+                          name={[field.name, "emails"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <FormItemEmail email={form.getFieldValue([field.name, "emails"])} />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
diff --git a/client/src/components/shop-info/shop-info.intake.component.jsx b/client/src/components/shop-info/shop-info.intake.component.jsx
index 174a6ddf0..cf04dcf5b 100644
--- a/client/src/components/shop-info/shop-info.intake.component.jsx
+++ b/client/src/components/shop-info/shop-info.intake.component.jsx
@@ -5,6 +5,7 @@ import styled from "styled-components";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ConfigFormTypes from "../config-form-components/config-form-types";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 const SelectorDiv = styled.div`
@@ -17,6 +18,8 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
   const { t } = useTranslation();
 
   const TemplateListGenerated = TemplateList();
+  const intakeChecklistItems = Form.useWatch(["intakechecklist", "form"], form) || [];
+  const deliverChecklistItems = Form.useWatch(["deliverchecklist", "form"], form) || [];
   return (
     <div>
       <LayoutFormRow header={t("bodyshop.labels.intakechecklist")} id="intakechecklist">
@@ -24,104 +27,126 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("jobs.fields.intake.name")}
-                        key={`${index}name`}
-                        name={[field.name, "name"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("jobs.fields.intake.type")}
-                        key={`${index}type`}
-                        name={[field.name, "type"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("jobs.fields.intake.label")}
-                        key={`${index}label`}
-                        name={[field.name, "label"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
+                {fields.map((field, index) => {
+                  const intakeChecklistItem = intakeChecklistItems[field.name] || {};
 
-                      <Form.Item shouldUpdate>
-                        {() => {
-                          if (form.getFieldValue(["intakechecklist", "form", index, "type"]) !== "slider") return null;
-                          return (
-                            <>
-                              <Form.Item
-                                label={t("jobs.fields.intake.min")}
-                                key={`${index}min`}
-                                name={[field.name, "min"]}
-                                dependencies={[[field.name, "type"]]}
-                                rules={[
-                                  {
-                                    required: true
-                                    //message: t("general.validation.required"),
-                                  }
-                                ]}
-                              >
-                                <InputNumber />
-                              </Form.Item>
-                              <Form.Item
-                                label={t("jobs.fields.intake.max")}
-                                key={`${index}max`}
-                                name={[field.name, "max"]}
-                                rules={[
-                                  {
-                                    required: true
-                                    //message: t("general.validation.required"),
-                                  }
-                                ]}
-                              >
-                                <InputNumber />
-                              </Form.Item>
-                            </>
-                          );
-                        }}
-                      </Form.Item>
-                      <Form.Item
-                        label={t("jobs.fields.intake.required")}
-                        key={`${index}required`}
-                        name={[field.name, "required"]}
-                        valuePropName="checked"
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(
+                          t("jobs.fields.intake.name"),
+                          index,
+                          intakeChecklistItem.name,
+                          intakeChecklistItem.label
+                        )}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <Switch />
-                      </Form.Item>
-                      <Space wrap>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
+                        <Form.Item
+                          label={t("jobs.fields.intake.name")}
+                          key={`${index}name`}
+                          name={[field.name, "name"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.intake.type")}
+                          key={`${index}type`}
+                          name={[field.name, "type"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.intake.label")}
+                          key={`${index}label`}
+                          name={[field.name, "label"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+
+                        <Form.Item shouldUpdate>
+                          {() => {
+                            if (form.getFieldValue(["intakechecklist", "form", index, "type"]) !== "slider")
+                              return null;
+                            return (
+                              <>
+                                <Form.Item
+                                  label={t("jobs.fields.intake.min")}
+                                  key={`${index}min`}
+                                  name={[field.name, "min"]}
+                                  dependencies={[[field.name, "type"]]}
+                                  rules={[
+                                    {
+                                      required: true
+                                      //message: t("general.validation.required"),
+                                    }
+                                  ]}
+                                >
+                                  <InputNumber />
+                                </Form.Item>
+                                <Form.Item
+                                  label={t("jobs.fields.intake.max")}
+                                  key={`${index}max`}
+                                  name={[field.name, "max"]}
+                                  rules={[
+                                    {
+                                      required: true
+                                      //message: t("general.validation.required"),
+                                    }
+                                  ]}
+                                >
+                                  <InputNumber />
+                                </Form.Item>
+                              </>
+                            );
                           }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                        </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.intake.required")}
+                          key={`${index}required`}
+                          name={[field.name, "required"]}
+                          valuePropName="checked"
+                        >
+                          <Switch />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
@@ -171,105 +196,129 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("jobs.fields.intake.name")}
-                        key={`${index}named`}
-                        name={[field.name, "name"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
+                {fields.map((field, index) => {
+                  const deliverChecklistItem = deliverChecklistItems[field.name] || {};
 
-                      <Form.Item
-                        label={t("jobs.fields.intake.type")}
-                        key={`${index}typed`}
-                        name={[field.name, "type"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(
+                          t("jobs.fields.intake.name"),
+                          index,
+                          deliverChecklistItem.name,
+                          deliverChecklistItem.label
+                        )}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
-                      </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.intake.name")}
+                          key={`${index}named`}
+                          name={[field.name, "name"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
 
-                      <Form.Item
-                        label={t("jobs.fields.intake.label")}
-                        key={`${index}labeld`}
-                        name={[field.name, "label"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.intake.type")}
+                          key={`${index}typed`}
+                          name={[field.name, "type"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
+                        </Form.Item>
 
-                      <Form.Item shouldUpdate>
-                        {() => {
-                          if (form.getFieldValue(["deliverchecklist", "form", index, "type"]) !== "slider") return null;
-                          return (
-                            <>
-                              <Form.Item
-                                label={t("jobs.fields.intake.min")}
-                                key={`${index}mind`}
-                                name={[field.name, "min"]}
-                                dependencies={[[field.name, "type"]]}
-                                rules={[
-                                  {
-                                    required: form.getFieldValue([field.name, "type"]) === "slider"
-                                    //message: t("general.validation.required"),
-                                  }
-                                ]}
-                              >
-                                <InputNumber />
-                              </Form.Item>
-                              <Form.Item
-                                label={t("jobs.fields.intake.max")}
-                                key={`${index}maxd`}
-                                name={[field.name, "max"]}
-                                dependencies={[[field.name, "type"]]}
-                                rules={[
-                                  {
-                                    required: form.getFieldValue([field.name, "type"]) === "slider"
-                                    //message: t("general.validation.required"),
-                                  }
-                                ]}
-                              >
-                                <InputNumber />
-                              </Form.Item>
-                            </>
-                          );
-                        }}
-                      </Form.Item>
-                      <Form.Item
-                        label={t("jobs.fields.intake.required")}
-                        key={`${index}requiredd`}
-                        name={[field.name, "required"]}
-                        valuePropName="checked"
-                      >
-                        <Switch />
-                      </Form.Item>
-                      <DeleteFilled
-                        onClick={() => {
-                          remove(field.name);
-                        }}
-                      />
-                      <FormListMoveArrows move={move} index={index} total={fields.length} />
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                        <Form.Item
+                          label={t("jobs.fields.intake.label")}
+                          key={`${index}labeld`}
+                          name={[field.name, "label"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+
+                        <Form.Item shouldUpdate>
+                          {() => {
+                            if (form.getFieldValue(["deliverchecklist", "form", index, "type"]) !== "slider")
+                              return null;
+                            return (
+                              <>
+                                <Form.Item
+                                  label={t("jobs.fields.intake.min")}
+                                  key={`${index}mind`}
+                                  name={[field.name, "min"]}
+                                  dependencies={[[field.name, "type"]]}
+                                  rules={[
+                                    {
+                                      required: form.getFieldValue([field.name, "type"]) === "slider"
+                                      //message: t("general.validation.required"),
+                                    }
+                                  ]}
+                                >
+                                  <InputNumber />
+                                </Form.Item>
+                                <Form.Item
+                                  label={t("jobs.fields.intake.max")}
+                                  key={`${index}maxd`}
+                                  name={[field.name, "max"]}
+                                  dependencies={[[field.name, "type"]]}
+                                  rules={[
+                                    {
+                                      required: form.getFieldValue([field.name, "type"]) === "slider"
+                                      //message: t("general.validation.required"),
+                                    }
+                                  ]}
+                                >
+                                  <InputNumber />
+                                </Form.Item>
+                              </>
+                            );
+                          }}
+                        </Form.Item>
+                        <Form.Item
+                          label={t("jobs.fields.intake.required")}
+                          key={`${index}requiredd`}
+                          name={[field.name, "required"]}
+                          valuePropName="checked"
+                        >
+                          <Switch />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
diff --git a/client/src/components/shop-info/shop-info.laborrates.component.jsx b/client/src/components/shop-info/shop-info.laborrates.component.jsx
index e4ec950fe..6ec3426c9 100644
--- a/client/src/components/shop-info/shop-info.laborrates.component.jsx
+++ b/client/src/components/shop-info/shop-info.laborrates.component.jsx
@@ -3,10 +3,13 @@ import { Button, Form, Input, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function ShopInfoLaborRates() {
   const { t } = useTranslation();
+  const form = Form.useFormInstance();
+  const laborRates = Form.useWatch(["md_labor_rates"], form) || [];
 
   return (
     <>
@@ -23,9 +26,32 @@ export default function ShopInfoLaborRates() {
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider={index === 0}>
+                {fields.map((field, index) => {
+                  const laborRate = laborRates[field.name] || {};
+
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider={index === 0}
+                        title={getFormListItemTitle(t("jobs.fields.labor_rate_desc"), index, laborRate.rate_label)}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
+                      >
                       <Form.Item
                         label={t("jobs.fields.labor_rate_desc")}
                         key={`${index}rate_label`}
@@ -314,17 +340,10 @@ export default function ShopInfoLaborRates() {
                       >
                         <CurrencyInput min={0} />
                       </Form.Item>
-                      <Space>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.rate_length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
diff --git a/client/src/components/shop-info/shop-info.parts-scan.jsx b/client/src/components/shop-info/shop-info.parts-scan.jsx
index 51fdbbfe4..20a89d3a5 100644
--- a/client/src/components/shop-info/shop-info.parts-scan.jsx
+++ b/client/src/components/shop-info/shop-info.parts-scan.jsx
@@ -3,6 +3,7 @@ import { Button, Col, Form, Input, Row, Select, Space, Switch } from "antd";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import i18n from "i18next";
 
@@ -75,98 +76,144 @@ export default function ShopInfoPartsScan({ form }) {
               {fields.map((field, index) => {
                 const selectedField = watchedFields?.[index]?.field || "line_desc";
                 const fieldType = getFieldType(selectedField);
+                const selectedFieldLabel =
+                  fieldSelectOptions.find((option) => option.value === selectedField)?.label ||
+                  t("bodyshop.fields.md_parts_scan.field");
+                const ruleTitle = watchedFields?.[index]?.value
+                  ? `${selectedFieldLabel}: ${watchedFields[index].value}`
+                  : null;
 
                 return (
                   <Form.Item key={field.key}>
-                    <Row gutter={[16, 16]} align="middle">
-                      {/* Select Field */}
-                      <Col span={6}>
-                        <Form.Item
-                          label={t("bodyshop.fields.md_parts_scan.field")}
-                          name={[field.name, "field"]}
-                          rules={[
-                            {
-                              required: true,
-                              message: t("general.validation.required", {
-                                label: t("bodyshop.fields.md_parts_scan.field")
-                              })
-                            }
-                          ]}
-                        >
-                          <Select
-                            options={fieldSelectOptions}
-                            onChange={() => {
-                              form.setFields([
-                                { name: ["md_parts_scan", index, "operation"], value: "contains" },
-                                { name: ["md_parts_scan", index, "value"], value: undefined }
-                              ]);
+                    <LayoutFormRow
+                      noDivider
+                      title={getFormListItemTitle(
+                        t("bodyshop.fields.md_parts_scan.field"),
+                        index,
+                        ruleTitle,
+                        selectedFieldLabel
+                      )}
+                      extra={
+                        <Space align="center" size="small">
+                          <Button
+                            type="text"
+                            icon={<DeleteFilled />}
+                            onClick={() => {
+                              remove(field.name);
                             }}
                           />
-                        </Form.Item>
-                      </Col>
-
-                      {/* Operation */}
-                      {fieldType !== "predefined" && fieldType && (
+                          <FormListMoveArrows
+                            move={move}
+                            index={index}
+                            total={fields.length}
+                            orientation="horizontal"
+                          />
+                        </Space>
+                      }
+                    >
+                      <Row gutter={[16, 16]} align="middle">
+                        {/* Select Field */}
                         <Col span={6}>
                           <Form.Item
-                            label={t("bodyshop.fields.md_parts_scan.operation")}
-                            name={[field.name, "operation"]}
+                            label={t("bodyshop.fields.md_parts_scan.field")}
+                            name={[field.name, "field"]}
                             rules={[
                               {
                                 required: true,
                                 message: t("general.validation.required", {
-                                  label: t("bodyshop.fields.md_parts_scan.operation")
+                                  label: t("bodyshop.fields.md_parts_scan.field")
                                 })
                               }
                             ]}
                           >
-                            <Select options={operationOptions[fieldType]} />
+                            <Select
+                              options={fieldSelectOptions}
+                              onChange={() => {
+                                form.setFields([
+                                  { name: ["md_parts_scan", index, "operation"], value: "contains" },
+                                  { name: ["md_parts_scan", index, "value"], value: undefined }
+                                ]);
+                              }}
+                            />
                           </Form.Item>
                         </Col>
-                      )}
 
-                      {/* Value */}
-                      {fieldType && (
-                        <Col span={6}>
-                          <Form.Item
-                            label={t("bodyshop.fields.md_parts_scan.value")}
-                            name={[field.name, "value"]}
-                            rules={[
-                              {
-                                required: true,
-                                message: t("general.validation.required", {
-                                  label: t("bodyshop.fields.md_parts_scan.value")
-                                })
-                              }
-                            ]}
-                          >
-                            {fieldType === "predefined" ? (
-                              <Select
-                                options={
-                                  selectedField === "part_type"
-                                    ? predefinedPartTypes.map((type) => ({
-                                        label: type,
-                                        value: type
-                                      }))
-                                    : predefinedModLbrTypes.map((type) => ({
-                                        label: type,
-                                        value: type
-                                      }))
+                        {/* Operation */}
+                        {fieldType !== "predefined" && fieldType && (
+                          <Col span={6}>
+                            <Form.Item
+                              label={t("bodyshop.fields.md_parts_scan.operation")}
+                              name={[field.name, "operation"]}
+                              rules={[
+                                {
+                                  required: true,
+                                  message: t("general.validation.required", {
+                                    label: t("bodyshop.fields.md_parts_scan.operation")
+                                  })
                                 }
-                              />
-                            ) : (
-                              <Input />
-                            )}
-                          </Form.Item>
-                        </Col>
-                      )}
+                              ]}
+                            >
+                              <Select options={operationOptions[fieldType]} />
+                            </Form.Item>
+                          </Col>
+                        )}
 
-                      {/* Case Sensitivity */}
-                      {fieldType === "string" && (
+                        {/* Value */}
+                        {fieldType && (
+                          <Col span={6}>
+                            <Form.Item
+                              label={t("bodyshop.fields.md_parts_scan.value")}
+                              name={[field.name, "value"]}
+                              rules={[
+                                {
+                                  required: true,
+                                  message: t("general.validation.required", {
+                                    label: t("bodyshop.fields.md_parts_scan.value")
+                                  })
+                                }
+                              ]}
+                            >
+                              {fieldType === "predefined" ? (
+                                <Select
+                                  options={
+                                    selectedField === "part_type"
+                                      ? predefinedPartTypes.map((type) => ({
+                                          label: type,
+                                          value: type
+                                        }))
+                                      : predefinedModLbrTypes.map((type) => ({
+                                          label: type,
+                                          value: type
+                                        }))
+                                  }
+                                />
+                              ) : (
+                                <Input />
+                              )}
+                            </Form.Item>
+                          </Col>
+                        )}
+
+                        {/* Case Sensitivity */}
+                        {fieldType === "string" && (
+                          <Col span={4}>
+                            <Form.Item
+                              label={t("bodyshop.fields.md_parts_scan.caseInsensitive")}
+                              name={[field.name, "caseInsensitive"]}
+                              valuePropName="checked"
+                              labelCol={{ span: 14 }}
+                              wrapperCol={{ span: 10 }}
+                            >
+                              <Switch />
+                            </Form.Item>
+                          </Col>
+                        )}
+
+                        {/* Mark Line as Critical */}
                         <Col span={4}>
                           <Form.Item
-                            label={t("bodyshop.fields.md_parts_scan.caseInsensitive")}
-                            name={[field.name, "caseInsensitive"]}
+                            label={t("bodyshop.fields.md_parts_scan.mark_critical")}
+                            name={[field.name, "mark_critical"]}
                             valuePropName="checked"
                             labelCol={{ span: 14 }}
                             wrapperCol={{ span: 10 }}
@@ -174,65 +221,44 @@ export default function ShopInfoPartsScan({ form }) {
                             <Switch />
                           </Form.Item>
                         </Col>
-                      )}
 
-                      {/* Mark Line as Critical */}
-                      <Col span={4}>
-                        <Form.Item
-                          label={t("bodyshop.fields.md_parts_scan.mark_critical")}
-                          name={[field.name, "mark_critical"]}
-                          valuePropName="checked"
-                          labelCol={{ span: 14 }}
-                          wrapperCol={{ span: 10 }}
-                        >
-                          <Switch />
-                        </Form.Item>
-                      </Col>
+                        {/* Update Field */}
+                        <Col span={4}>
+                          <Form.Item
+                            label={t("bodyshop.fields.md_parts_scan.update_field")}
+                            name={[field.name, "update_field"]}
+                          >
+                            <Select
+                              options={fieldSelectOptions}
+                              allowClear
+                              onClear={() =>
+                                form.setFields([{ name: ["md_parts_scan", index, "update_field"], value: null }])
+                              }
+                            />
+                          </Form.Item>
+                        </Col>
 
-                      {/* Update Field */}
-                      <Col span={4}>
-                        <Form.Item
-                          label={t("bodyshop.fields.md_parts_scan.update_field")}
-                          name={[field.name, "update_field"]}
-                        >
-                          <Select
-                            options={fieldSelectOptions}
-                            allowClear
-                            onClear={() =>
-                              form.setFields([{ name: ["md_parts_scan", index, "update_field"], value: null }])
-                            }
-                          />
-                        </Form.Item>
-                      </Col>
-
-                      {/* Update Field */}
-                      <Col span={4}>
-                        <Form.Item
-                          label={t("bodyshop.fields.md_parts_scan.update_value")}
-                          name={[field.name, "update_value"]}
-                          dependencies={[["md_parts_scan", index, "update_field"]]}
-                          tooltip={t("bodyshop.tooltips.md_parts_scan.update_value_tooltip")}
-                          rules={[
-                            {
-                              required: form.getFieldValue(["md_parts_scan", index, "update_field"]),
-                              message: t("general.validation.required", {
-                                label: t("bodyshop.fields.md_parts_scan.update_value")
-                              })
-                            }
-                          ]}
-                        >
-                          <Input />
-                        </Form.Item>
-                      </Col>
-
-                      {/* Actions */}
-                      <Col span={2}>
-                        <Space>
-                          <DeleteFilled onClick={() => remove(field.name)} />
-                          <FormListMoveArrows move={move} index={index} total={fields.length} />
-                        </Space>
-                      </Col>
-                    </Row>
+                        {/* Update Field */}
+                        <Col span={4}>
+                          <Form.Item
+                            label={t("bodyshop.fields.md_parts_scan.update_value")}
+                            name={[field.name, "update_value"]}
+                            dependencies={[["md_parts_scan", index, "update_field"]]}
+                            tooltip={t("bodyshop.tooltips.md_parts_scan.update_value_tooltip")}
+                            rules={[
+                              {
+                                required: form.getFieldValue(["md_parts_scan", index, "update_field"]),
+                                message: t("general.validation.required", {
+                                  label: t("bodyshop.fields.md_parts_scan.update_value")
+                                })
+                              }
+                            ]}
+                          >
+                            <Input />
+                          </Form.Item>
+                        </Col>
+                      </Row>
+                    </LayoutFormRow>
                   </Form.Item>
                 );
               })}
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 87013bdd2..69e958fe3 100644
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
@@ -11,6 +11,7 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import DataLabel from "../data-label/data-label.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 import ShopInfoResponsibilitycentersTaxesComponent from "./shop-info.responsibilitycenters.taxes.component";
@@ -32,6 +33,9 @@ export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoResponsibili
 
 export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
   const { t } = useTranslation();
+  const dmsPayers = Form.useWatch(["cdk_configuration", "payers"], form) || [];
+  const costResponsibilityCenters = Form.useWatch(["md_responsibility_centers", "costs"], form) || [];
+  const profitResponsibilityCenters = Form.useWatch(["md_responsibility_centers", "profits"], form) || [];
 
   const hasDMSKey = bodyshopHasDmsKey(bodyshop);
 
@@ -66,11 +70,14 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
   };
 
   const ReceivableCustomFieldSelect = (
-    <Select allowClear options={[
-      { value: "v_vin", label: "VIN" },
-      { value: "clm_no", label: "Claim No." },
-      { value: "ded_amt", label: "Deductible Amount" }
-    ]} />
+    <Select
+      allowClear
+      options={[
+        { value: "v_vin", label: "VIN" },
+        { value: "clm_no", label: "Claim No." },
+        { value: "ded_amt", label: "Deductible Amount" }
+      ]}
+    />
   );
 
   return (
@@ -494,48 +501,76 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                     {(fields, { add, remove, move }) => {
                       return (
                         <div>
-                          {fields.map((field, index) => (
-                            <Form.Item key={field.key}>
-                              <LayoutFormRow noDivider>
-                                <Form.Item
-                                  label={t("jobs.fields.dms.payer.name")}
-                                  key={`${index}name`}
-                                  name={[field.name, "name"]}
-                                  rules={[{ required: true }]}
+                          {fields.map((field, index) => {
+                            const dmsPayer = dmsPayers[field.name] || {};
+
+                            return (
+                              <Form.Item key={field.key}>
+                                <LayoutFormRow
+                                  noDivider
+                                  title={getFormListItemTitle(
+                                    t("jobs.fields.dms.payer.name"),
+                                    index,
+                                    dmsPayer.name,
+                                    dmsPayer.dms_acctnumber
+                                  )}
+                                  extra={
+                                    <Space align="center" size="small">
+                                      <Button
+                                        type="text"
+                                        icon={<DeleteFilled />}
+                                        onClick={() => {
+                                          remove(field.name);
+                                        }}
+                                      />
+                                      <FormListMoveArrows
+                                        move={move}
+                                        index={index}
+                                        total={fields.length}
+                                        orientation="horizontal"
+                                      />
+                                    </Space>
+                                  }
                                 >
-                                  <Input />
-                                </Form.Item>
-                                <Form.Item
-                                  label={t("jobs.fields.dms.payer.dms_acctnumber")}
-                                  key={`${index}dms_acctnumber`}
-                                  name={[field.name, "dms_acctnumber"]}
-                                  rules={[{ required: true }]}
-                                >
-                                  <Input />
-                                </Form.Item>
-                                <Form.Item
-                                  label={t("jobs.fields.dms.payer.control_type")}
-                                  key={`${index}control_type`}
-                                  name={[field.name, "control_type"]}
-                                >
-                                  <Select allowClear showSearch options={[
-                                    { value: "ro_number", label: t("jobs.fields.ro_number") },
-                                    { value: "clm_no", label: t("jobs.fields.clm_no") },
-                                    { value: "po_number", label: t("jobs.fields.ponumber") },
-                                    { value: "account_number", label: t("jobs.fields.dms.control_type.account_number") }
-                                  ]} />
-                                </Form.Item>
-                                <Space align="center">
-                                  <DeleteFilled
-                                    onClick={() => {
-                                      remove(field.name);
-                                    }}
-                                  />
-                                  <FormListMoveArrows move={move} index={index} total={fields.length} />
-                                </Space>
-                              </LayoutFormRow>
-                            </Form.Item>
-                          ))}
+                                  <Form.Item
+                                    label={t("jobs.fields.dms.payer.name")}
+                                    key={`${index}name`}
+                                    name={[field.name, "name"]}
+                                    rules={[{ required: true }]}
+                                  >
+                                    <Input />
+                                  </Form.Item>
+                                  <Form.Item
+                                    label={t("jobs.fields.dms.payer.dms_acctnumber")}
+                                    key={`${index}dms_acctnumber`}
+                                    name={[field.name, "dms_acctnumber"]}
+                                    rules={[{ required: true }]}
+                                  >
+                                    <Input />
+                                  </Form.Item>
+                                  <Form.Item
+                                    label={t("jobs.fields.dms.payer.control_type")}
+                                    key={`${index}control_type`}
+                                    name={[field.name, "control_type"]}
+                                  >
+                                    <Select
+                                      allowClear
+                                      showSearch
+                                      options={[
+                                        { value: "ro_number", label: t("jobs.fields.ro_number") },
+                                        { value: "clm_no", label: t("jobs.fields.clm_no") },
+                                        { value: "po_number", label: t("jobs.fields.ponumber") },
+                                        {
+                                          value: "account_number",
+                                          label: t("jobs.fields.dms.control_type.account_number")
+                                        }
+                                      ]}
+                                    />
+                                  </Form.Item>
+                                </LayoutFormRow>
+                              </Form.Item>
+                            );
+                          })}
                           <Form.Item>
                             <Button
                               type="dashed"
@@ -611,80 +646,100 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                 {(fields, { add, remove, move }) => {
                   return (
                     <div>
-                      {fields.map((field, index) => (
-                        <Form.Item key={field.key}>
-                          <LayoutFormRow noDivider>
-                            <Form.Item
-                              label={t("bodyshop.fields.responsibilitycenter")}
-                              key={`${index}name`}
-                              name={[field.name, "name"]}
-                              rules={[{ required: true }]}
-                            >
-                              <Input onBlur={handleBlur} />
-                            </Form.Item>
-                            <Form.Item
-                              label={t("bodyshop.fields.responsibilitycenter_accountname")}
-                              key={`${index}accountname`}
-                              name={[field.name, "accountname"]}
-                              rules={[{ required: true }]}
-                            >
-                              <Input onBlur={handleBlur} />
-                            </Form.Item>
-                            <Form.Item
-                              label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
-                              key={`${index}accountdesc`}
-                              name={[field.name, "accountdesc"]}
-                              rules={[{ required: true }]}
-                            >
-                              <Input onBlur={handleBlur} />
-                            </Form.Item>
+                      {fields.map((field, index) => {
+                        const responsibilityCenter = costResponsibilityCenters[field.name] || {};
 
-                            {hasDMSKey && !bodyshop.rr_dealerid && (
-                              <>
-                                <Form.Item
-                                  label={t("bodyshop.fields.dms.dms_acctnumber")}
-                                  key={`${index}dms_acctnumber`}
-                                  name={[field.name, "dms_acctnumber"]}
-                                  rules={[{ required: true }]}
-                                >
-                                  <Input onBlur={handleBlur} />
-                                </Form.Item>
-                                <Form.Item
-                                  label={t("bodyshop.fields.dms.dms_wip_acctnumber")}
-                                  key={`${index}dms_wip_acctnumber`}
-                                  name={[field.name, "dms_wip_acctnumber"]}
-                                  rules={[
-                                    {
-                                      required: true
-                                    }
-                                  ]}
-                                >
-                                  <Input onBlur={handleBlur} />
-                                </Form.Item>
-                              </>
-                            )}
-
-                            {bodyshop.cdk_dealerid && (
+                        return (
+                          <Form.Item key={field.key}>
+                            <LayoutFormRow
+                              noDivider
+                              title={getFormListItemTitle(
+                                t("bodyshop.fields.responsibilitycenter"),
+                                index,
+                                responsibilityCenter.name,
+                                responsibilityCenter.accountname
+                              )}
+                              extra={
+                                <Space align="center" size="small">
+                                  <Button
+                                    type="text"
+                                    icon={<DeleteFilled />}
+                                    onClick={() => {
+                                      remove(field.name);
+                                    }}
+                                  />
+                                  <FormListMoveArrows
+                                    move={move}
+                                    index={index}
+                                    total={fields.length}
+                                    orientation="horizontal"
+                                  />
+                                </Space>
+                              }
+                            >
                               <Form.Item
-                                label={t("bodyshop.fields.dms.dms_control_override")}
-                                key={`${index}dms_control_override`}
-                                name={[field.name, "dms_control_override"]}
+                                label={t("bodyshop.fields.responsibilitycenter")}
+                                key={`${index}name`}
+                                name={[field.name, "name"]}
+                                rules={[{ required: true }]}
+                              >
+                                <Input onBlur={handleBlur} />
+                              </Form.Item>
+                              <Form.Item
+                                label={t("bodyshop.fields.responsibilitycenter_accountname")}
+                                key={`${index}accountname`}
+                                name={[field.name, "accountname"]}
+                                rules={[{ required: true }]}
+                              >
+                                <Input onBlur={handleBlur} />
+                              </Form.Item>
+                              <Form.Item
+                                label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
+                                key={`${index}accountdesc`}
+                                name={[field.name, "accountdesc"]}
+                                rules={[{ required: true }]}
                               >
                                 <Input onBlur={handleBlur} />
                               </Form.Item>
-                            )}
 
-                            <Space align="center">
-                              <DeleteFilled
-                                onClick={() => {
-                                  remove(field.name);
-                                }}
-                              />
-                              <FormListMoveArrows move={move} index={index} total={fields.length} />
-                            </Space>
-                          </LayoutFormRow>
-                        </Form.Item>
-                      ))}
+                              {hasDMSKey && !bodyshop.rr_dealerid && (
+                                <>
+                                  <Form.Item
+                                    label={t("bodyshop.fields.dms.dms_acctnumber")}
+                                    key={`${index}dms_acctnumber`}
+                                    name={[field.name, "dms_acctnumber"]}
+                                    rules={[{ required: true }]}
+                                  >
+                                    <Input onBlur={handleBlur} />
+                                  </Form.Item>
+                                  <Form.Item
+                                    label={t("bodyshop.fields.dms.dms_wip_acctnumber")}
+                                    key={`${index}dms_wip_acctnumber`}
+                                    name={[field.name, "dms_wip_acctnumber"]}
+                                    rules={[
+                                      {
+                                        required: true
+                                      }
+                                    ]}
+                                  >
+                                    <Input onBlur={handleBlur} />
+                                  </Form.Item>
+                                </>
+                              )}
+
+                              {bodyshop.cdk_dealerid && (
+                                <Form.Item
+                                  label={t("bodyshop.fields.dms.dms_control_override")}
+                                  key={`${index}dms_control_override`}
+                                  name={[field.name, "dms_control_override"]}
+                                >
+                                  <Input onBlur={handleBlur} />
+                                </Form.Item>
+                              )}
+                            </LayoutFormRow>
+                          </Form.Item>
+                        );
+                      })}
                       <Form.Item>
                         <Button
                           type="dashed"
@@ -706,102 +761,133 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                 {(fields, { add, remove, move }) => {
                   return (
                     <div>
-                      {fields.map((field, index) => (
-                        <Form.Item key={field.key}>
-                          <LayoutFormRow noDivider>
-                            <Form.Item
-                              label={t("bodyshop.fields.responsibilitycenter")}
-                              key={`${index}name`}
-                              name={[field.name, "name"]}
-                              rules={[{ required: true }]}
+                      {fields.map((field, index) => {
+                        const responsibilityCenter = profitResponsibilityCenters[field.name] || {};
+
+                        return (
+                          <Form.Item key={field.key}>
+                            <LayoutFormRow
+                              noDivider
+                              title={getFormListItemTitle(
+                                t("bodyshop.fields.responsibilitycenter"),
+                                index,
+                                responsibilityCenter.name,
+                                responsibilityCenter.accountdesc
+                              )}
+                              extra={
+                                <Space align="center" size="small">
+                                  <Button
+                                    type="text"
+                                    icon={<DeleteFilled />}
+                                    onClick={() => {
+                                      remove(field.name);
+                                    }}
+                                  />
+                                  <FormListMoveArrows
+                                    move={move}
+                                    index={index}
+                                    total={fields.length}
+                                    orientation="horizontal"
+                                  />
+                                </Space>
+                              }
                             >
-                              <Input onBlur={handleBlur} />
-                            </Form.Item>
-                            <Form.Item
-                              label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
-                              key={`${index}accountdesc`}
-                              name={[field.name, "accountdesc"]}
-                              rules={[{ required: true }]}
-                            >
-                              <Input onBlur={handleBlur} />
-                            </Form.Item>
-                            {!hasDMSKey && (
                               <Form.Item
-                                label={t("bodyshop.fields.responsibilitycenter_accountitem")}
-                                key={`${index}accountitem`}
-                                name={[field.name, "accountitem"]}
+                                label={t("bodyshop.fields.responsibilitycenter")}
+                                key={`${index}name`}
+                                name={[field.name, "name"]}
                                 rules={[{ required: true }]}
                               >
                                 <Input onBlur={handleBlur} />
                               </Form.Item>
-                            )}
-                            {hasDMSKey && !bodyshop.rr_dealerid && (
                               <Form.Item
-                                label={t("bodyshop.fields.dms.dms_acctnumber")}
-                                key={`${index}dms_acctnumber`}
-                                name={[field.name, "dms_acctnumber"]}
+                                label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
+                                key={`${index}accountdesc`}
+                                name={[field.name, "accountdesc"]}
                                 rules={[{ required: true }]}
                               >
                                 <Input onBlur={handleBlur} />
                               </Form.Item>
-                            )}
-                            {bodyshop.cdk_dealerid && (
-                              <Form.Item
-                                label={t("bodyshop.fields.dms.dms_control_override")}
-                                key={`${index}dms_control_override`}
-                                name={[field.name, "dms_control_override"]}
-                              >
-                                <Input onBlur={handleBlur} />
-                              </Form.Item>
-                            )}
-                            {bodyshop.rr_dealerid && (
-                              <>
+                              {!hasDMSKey && (
                                 <Form.Item
-                                  label={t("bodyshop.fields.responsibilitycenters.gogcode")}
-                                  key={`${index}rr_gogcode`}
-                                  name={[field.name, "rr_gogcode"]}
+                                  label={t("bodyshop.fields.responsibilitycenter_accountitem")}
+                                  key={`${index}accountitem`}
+                                  name={[field.name, "accountitem"]}
                                   rules={[{ required: true }]}
                                 >
                                   <Input onBlur={handleBlur} />
                                 </Form.Item>
-
+                              )}
+                              {hasDMSKey && !bodyshop.rr_dealerid && (
                                 <Form.Item
-                                  label={t("bodyshop.fields.responsibilitycenters.item_type")}
-                                  key={`${index}rr_item_type`}
-                                  name={[field.name, "rr_item_type"]}
+                                  label={t("bodyshop.fields.dms.dms_acctnumber")}
+                                  key={`${index}dms_acctnumber`}
+                                  name={[field.name, "dms_acctnumber"]}
                                   rules={[{ required: true }]}
                                 >
-                                  <Select options={[
-                                    { value: "G", label: t("bodyshop.fields.responsibilitycenters.item_type_gog") },
-                                    { value: "P", label: t("bodyshop.fields.responsibilitycenters.item_type_paint") },
-                                    { value: "F", label: t("bodyshop.fields.responsibilitycenters.item_type_freight") }
-                                  ]} />
+                                  <Input onBlur={handleBlur} />
                                 </Form.Item>
-
+                              )}
+                              {bodyshop.cdk_dealerid && (
                                 <Form.Item
-                                  label={t("bodyshop.fields.responsibilitycenters.taxable_flag")}
-                                  key={`${index}rr_cust_txbl_flag`}
-                                  name={[field.name, "rr_cust_txbl_flag"]}
-                                  rules={[{ required: true }]}
+                                  label={t("bodyshop.fields.dms.dms_control_override")}
+                                  key={`${index}dms_control_override`}
+                                  name={[field.name, "dms_control_override"]}
                                 >
-                                  <Select options={[
-                                    { value: "T", label: t("bodyshop.fields.responsibilitycenters.taxable") },
-                                    { value: "N", label: t("bodyshop.fields.responsibilitycenters.nontaxable") }
-                                  ]} />
+                                  <Input onBlur={handleBlur} />
                                 </Form.Item>
-                              </>
-                            )}
-                            <Space align="center">
-                              <DeleteFilled
-                                onClick={() => {
-                                  remove(field.name);
-                                }}
-                              />
-                              <FormListMoveArrows move={move} index={index} total={fields.length} />
-                            </Space>
-                          </LayoutFormRow>
-                        </Form.Item>
-                      ))}
+                              )}
+                              {bodyshop.rr_dealerid && (
+                                <>
+                                  <Form.Item
+                                    label={t("bodyshop.fields.responsibilitycenters.gogcode")}
+                                    key={`${index}rr_gogcode`}
+                                    name={[field.name, "rr_gogcode"]}
+                                    rules={[{ required: true }]}
+                                  >
+                                    <Input onBlur={handleBlur} />
+                                  </Form.Item>
+
+                                  <Form.Item
+                                    label={t("bodyshop.fields.responsibilitycenters.item_type")}
+                                    key={`${index}rr_item_type`}
+                                    name={[field.name, "rr_item_type"]}
+                                    rules={[{ required: true }]}
+                                  >
+                                    <Select
+                                      options={[
+                                        { value: "G", label: t("bodyshop.fields.responsibilitycenters.item_type_gog") },
+                                        {
+                                          value: "P",
+                                          label: t("bodyshop.fields.responsibilitycenters.item_type_paint")
+                                        },
+                                        {
+                                          value: "F",
+                                          label: t("bodyshop.fields.responsibilitycenters.item_type_freight")
+                                        }
+                                      ]}
+                                    />
+                                  </Form.Item>
+
+                                  <Form.Item
+                                    label={t("bodyshop.fields.responsibilitycenters.taxable_flag")}
+                                    key={`${index}rr_cust_txbl_flag`}
+                                    name={[field.name, "rr_cust_txbl_flag"]}
+                                    rules={[{ required: true }]}
+                                  >
+                                    <Select
+                                      options={[
+                                        { value: "T", label: t("bodyshop.fields.responsibilitycenters.taxable") },
+                                        { value: "N", label: t("bodyshop.fields.responsibilitycenters.nontaxable") }
+                                      ]}
+                                    />
+                                  </Form.Item>
+                                </>
+                              )}
+                            </LayoutFormRow>
+                          </Form.Item>
+                        );
+                      })}
                       <Form.Item>
                         <Button
                           type="dashed"
@@ -866,7 +952,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-ats`}
                                     name={[field.name, "costs", "ATS"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.laa")}
@@ -884,7 +973,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAA`}
                                     name={[field.name, "costs", "LAA"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lab")}
@@ -902,7 +994,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAB`}
                                     name={[field.name, "costs", "LAB"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lad")}
@@ -920,7 +1015,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAD`}
                                     name={[field.name, "costs", "LAD"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lae")}
@@ -938,7 +1036,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAE`}
                                     name={[field.name, "costs", "LAE"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.laf")}
@@ -956,7 +1057,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAF`}
                                     name={[field.name, "costs", "LAF"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lag")}
@@ -974,7 +1078,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAG`}
                                     name={[field.name, "costs", "LAG"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lam")}
@@ -992,7 +1099,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAM`}
                                     name={[field.name, "costs", "LAM"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lar")}
@@ -1010,7 +1120,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAR`}
                                     name={[field.name, "costs", "LAR"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.las")}
@@ -1028,7 +1141,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAS`}
                                     name={[field.name, "costs", "LAS"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lau")}
@@ -1046,7 +1162,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAU`}
                                     name={[field.name, "costs", "LAU"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la1")}
@@ -1064,7 +1183,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LA1`}
                                     name={[field.name, "costs", "LA1"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la2")}
@@ -1082,7 +1204,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LA2`}
                                     name={[field.name, "costs", "LA2"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la3")}
@@ -1100,7 +1225,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LA3`}
                                     name={[field.name, "costs", "LA3"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la4")}
@@ -1118,7 +1246,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LA4`}
                                     name={[field.name, "costs", "LA4"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.paa")}
@@ -1136,7 +1267,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAA`}
                                     name={[field.name, "costs", "PAA"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pac")}
@@ -1154,7 +1288,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAC`}
                                     name={[field.name, "costs", "PAC"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pag")}
@@ -1172,7 +1309,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAG`}
                                     name={[field.name, "costs", "PAG"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pal")}
@@ -1190,7 +1330,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAL`}
                                     name={[field.name, "costs", "PAL"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pam")}
@@ -1208,7 +1351,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAM`}
                                     name={[field.name, "costs", "PAM"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pan")}
@@ -1226,7 +1372,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAN`}
                                     name={[field.name, "costs", "PAN"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pao")}
@@ -1244,7 +1393,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAO`}
                                     name={[field.name, "costs", "PAO"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pap")}
@@ -1262,7 +1414,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAP`}
                                     name={[field.name, "costs", "PAP"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.par")}
@@ -1280,7 +1435,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAR`}
                                     name={[field.name, "costs", "PAR"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pas")}
@@ -1298,7 +1456,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAS`}
                                     name={[field.name, "costs", "PAS"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pasl")}
@@ -1316,7 +1477,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PASL`}
                                     name={[field.name, "costs", "PASL"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.tow")}
@@ -1334,7 +1498,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-TOW`}
                                     name={[field.name, "costs", "TOW"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.mapa")}
@@ -1352,7 +1519,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-MAPA`}
                                     name={[field.name, "costs", "MAPA"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.mash")}
@@ -1370,7 +1540,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-MASH`}
                                     name={[field.name, "costs", "MASH"]}
                                   >
-                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={costOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                 </LayoutFormRow>
                                 <LayoutFormRow header={t("bodyshop.labels.dms.profitsmapping")} id="profitsmapping">
@@ -1390,7 +1563,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-ATS`}
                                     name={[field.name, "profits", "ATS"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.laa")}
@@ -1408,7 +1584,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAA`}
                                     name={[field.name, "profits", "LAA"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lab")}
@@ -1426,7 +1605,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAB`}
                                     name={[field.name, "profits", "LAB"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lad")}
@@ -1444,7 +1626,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAD`}
                                     name={[field.name, "profits", "LAD"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lae")}
@@ -1462,7 +1647,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAE`}
                                     name={[field.name, "profits", "LAE"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.laf")}
@@ -1480,7 +1668,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAF`}
                                     name={[field.name, "profits", "LAF"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lag")}
@@ -1498,7 +1689,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAG`}
                                     name={[field.name, "profits", "LAG"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lam")}
@@ -1516,7 +1710,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAM`}
                                     name={[field.name, "profits", "LAM"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lar")}
@@ -1534,7 +1731,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAR`}
                                     name={[field.name, "profits", "LAR"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.las")}
@@ -1552,7 +1752,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAS`}
                                     name={[field.name, "profits", "LAS"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lau")}
@@ -1570,7 +1773,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAU`}
                                     name={[field.name, "profits", "LAU"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la1")}
@@ -1588,7 +1794,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LA1`}
                                     name={[field.name, "profits", "LA1"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la2")}
@@ -1606,7 +1815,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LA2`}
                                     name={[field.name, "profits", "LA2"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la3")}
@@ -1624,7 +1836,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LA3`}
                                     name={[field.name, "profits", "LA3"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la4")}
@@ -1642,7 +1857,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LA4`}
                                     name={[field.name, "profits", "LA4"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.paa")}
@@ -1660,7 +1878,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAA`}
                                     name={[field.name, "profits", "PAA"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pac")}
@@ -1678,7 +1899,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAC`}
                                     name={[field.name, "profits", "PAC"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pag")}
@@ -1696,7 +1920,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAG`}
                                     name={[field.name, "profits", "PAG"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pal")}
@@ -1714,7 +1941,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAL`}
                                     name={[field.name, "profits", "PAL"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pam")}
@@ -1732,7 +1962,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAM`}
                                     name={[field.name, "profits", "PAM"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pan")}
@@ -1750,7 +1983,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAN`}
                                     name={[field.name, "profits", "PAN"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pao")}
@@ -1768,7 +2004,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAO`}
                                     name={[field.name, "profits", "PAO"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pap")}
@@ -1786,7 +2025,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAP`}
                                     name={[field.name, "profits", "PAP"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.par")}
@@ -1804,7 +2046,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAR`}
                                     name={[field.name, "profits", "PAR"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pas")}
@@ -1822,7 +2067,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAS`}
                                     name={[field.name, "profits", "PAS"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pasl")}
@@ -1840,7 +2088,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PASL`}
                                     name={[field.name, "profits", "PASL"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.tow")}
@@ -1858,7 +2109,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-TOW`}
                                     name={[field.name, "profits", "TOW"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.mapa")}
@@ -1876,7 +2130,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-MAPA`}
                                     name={[field.name, "profits", "MAPA"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.mash")}
@@ -1894,7 +2151,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-MASH`}
                                     name={[field.name, "profits", "MASH"]}
                                   >
-                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
+                                    <Select
+                                      showSearch
+                                      options={profitOptions.map((item) => ({ value: item, label: item }))}
+                                    />
                                   </Form.Item>
                                 </LayoutFormRow>
                               </div>
@@ -2950,6 +3210,53 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
           >
             <InputNumber precision={2} />
           </Form.Item>
+          {InstanceRenderManager({
+            imex: [
+              <Form.Item
+                key="state_tax_name"
+                label={t("bodyshop.fields.responsibilitycenters.state_tax")}
+                rules={[{ required: true }]}
+                name={["md_responsibility_centers", "taxes", "state", "name"]}
+              >
+                <Input />
+              </Form.Item>,
+              <Form.Item
+                key="state_tax_accountdesc"
+                label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
+                rules={[{ required: true }]}
+                name={["md_responsibility_centers", "taxes", "state", "accountdesc"]}
+              >
+                <Input />
+              </Form.Item>,
+              <Form.Item
+                key="state_tax_accountitem"
+                label={t("bodyshop.fields.responsibilitycenter_accountitem")}
+                rules={[{ required: true }]}
+                name={["md_responsibility_centers", "taxes", "state", "accountitem"]}
+              >
+                <Input />
+              </Form.Item>,
+              hasDMSKey ? (
+                <Form.Item
+                  key="state_tax_dms_acctnumber"
+                  label={t("bodyshop.fields.dms.dms_acctnumber")}
+                  rules={[{ required: true }]}
+                  name={["md_responsibility_centers", "taxes", "state", "dms_acctnumber"]}
+                >
+                  <Input />
+                </Form.Item>
+              ) : null,
+              <Form.Item
+                key="state_tax_rate"
+                label={t("bodyshop.fields.responsibilitycenter_rate")}
+                rules={[{ required: true }]}
+                name={["md_responsibility_centers", "taxes", "state", "rate"]}
+              >
+                <InputNumber precision={2} />
+              </Form.Item>
+            ],
+            rome: null
+          })}
         </LayoutFormRow>
 
         {DmsAp.treatment === "on" && (
@@ -2994,48 +3301,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
           </LayoutFormRow>
         )}
         {InstanceRenderManager({
-          imex: (
-            <LayoutFormRow id="state_tax">
-              <Form.Item
-                label={t("bodyshop.fields.responsibilitycenters.state_tax")}
-                rules={[{ required: true }]}
-                name={["md_responsibility_centers", "taxes", "state", "name"]}
-              >
-                <Input />
-              </Form.Item>
-
-              <Form.Item
-                label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
-                rules={[{ required: true }]}
-                name={["md_responsibility_centers", "taxes", "state", "accountdesc"]}
-              >
-                <Input />
-              </Form.Item>
-              <Form.Item
-                label={t("bodyshop.fields.responsibilitycenter_accountitem")}
-                rules={[{ required: true }]}
-                name={["md_responsibility_centers", "taxes", "state", "accountitem"]}
-              >
-                <Input />
-              </Form.Item>
-              {hasDMSKey && (
-                <Form.Item
-                  label={t("bodyshop.fields.dms.dms_acctnumber")}
-                  rules={[{ required: true }]}
-                  name={["md_responsibility_centers", "taxes", "state", "dms_acctnumber"]}
-                >
-                  <Input />
-                </Form.Item>
-              )}
-              <Form.Item
-                label={t("bodyshop.fields.responsibilitycenter_rate")}
-                rules={[{ required: true }]}
-                name={["md_responsibility_centers", "taxes", "state", "rate"]}
-              >
-                <InputNumber precision={2} />
-              </Form.Item>
-            </LayoutFormRow>
-          ),
+          imex: null,
           rome: <ShopInfoResponsibilitycentersTaxesComponent form={form} />
         })}
         {HasFeatureAccess({ featureName: "export", bodyshop }) && (
diff --git a/client/src/components/shop-info/shop-info.rostatus.component.jsx b/client/src/components/shop-info/shop-info.rostatus.component.jsx
index 3f843a991..985686579 100644
--- a/client/src/components/shop-info/shop-info.rostatus.component.jsx
+++ b/client/src/components/shop-info/shop-info.rostatus.component.jsx
@@ -1,10 +1,11 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { Button, Form, Select, Space } from "antd";
-import { useState } from "react";
 import { ChromePicker } from "react-color";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import { DEFAULT_TRANSLUCENT_CARD_COLOR, getTintedCardSurfaceStyles } from "./shop-info.color.utils";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -28,6 +29,11 @@ const SelectorDiv = styled.div`
 
 export function ShopInfoROStatusComponent({ bodyshop, form }) {
   const { t } = useTranslation();
+  const statusOptions = Form.useWatch(["md_ro_statuses", "statuses"], form) || [];
+  const productionStatuses = Form.useWatch(["md_ro_statuses", "production_statuses"], form) || [];
+  const additionalBoardStatuses = Form.useWatch(["md_ro_statuses", "additional_board_statuses"], form) || [];
+  const productionColors = Form.useWatch(["md_ro_statuses", "production_colors"], form) || [];
+  const availableProductionStatuses = [...new Set([...productionStatuses, ...additionalBoardStatuses].filter(Boolean))];
 
   const {
     treatments: { Production_List_Status_Colors }
@@ -37,23 +43,6 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
     splitKey: bodyshop.imexshopid
   });
 
-  const [options, setOptions] = useState(form.getFieldValue(["md_ro_statuses", "statuses"]) || []);
-
-  const [productionStatus, setProductionStatus] = useState(
-    (form.getFieldValue(["md_ro_statuses", "production_statuses"]) || []).concat(
-      form.getFieldValue(["md_ro_statuses", "additional_board_statuses"]) || []
-    ) || []
-  );
-
-  const handleBlur = () => {
-    setOptions(form.getFieldValue(["md_ro_statuses", "statuses"]));
-    setProductionStatus(
-      form
-        .getFieldValue(["md_ro_statuses", "production_statuses"])
-        .concat(form.getFieldValue(["md_ro_statuses", "additional_board_statuses"]))
-    );
-  };
-
   return (
     <SelectorDiv id="jobstatus">
       <Form.Item
@@ -67,7 +56,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="tags" onBlur={handleBlur} />
+        <Select mode="tags" />
       </Form.Item>
       <Form.Item
         name={["md_ro_statuses", "active_statuses"]}
@@ -80,7 +69,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
+        <Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <Form.Item
         name={["md_ro_statuses", "pre_production_statuses"]}
@@ -93,7 +82,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
+        <Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <Form.Item
         name={["md_ro_statuses", "production_statuses"]}
@@ -106,7 +95,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
+        <Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <Form.Item
         name={["md_ro_statuses", "post_production_statuses"]}
@@ -119,7 +108,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
+        <Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <Form.Item
         name={["md_ro_statuses", "ready_statuses"]}
@@ -132,7 +121,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
+        <Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <Form.Item
         name={["md_ro_statuses", "additional_board_statuses"]}
@@ -145,7 +134,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
+        <Select mode="multiple" options={statusOptions.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <LayoutFormRow noDivider>
         <Form.Item
@@ -158,7 +147,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_scheduled"]}
         >
-          <Select options={options.map((item) => ({ value: item, label: item }))} />
+          <Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_arrived")}
@@ -170,7 +159,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_arrived"]}
         >
-          <Select options={options.map((item) => ({ value: item, label: item }))} />
+          <Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_exported")}
@@ -182,7 +171,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_exported"]}
         >
-          <Select options={options.map((item) => ({ value: item, label: item }))} />
+          <Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_imported")}
@@ -194,7 +183,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_imported"]}
         >
-          <Select options={options.map((item) => ({ value: item, label: item }))} />
+          <Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_invoiced")}
@@ -206,7 +195,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_invoiced"]}
         >
-          <Select options={options.map((item) => ({ value: item, label: item }))} />
+          <Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_completed")}
@@ -218,7 +207,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_completed"]}
         >
-          <Select options={options.map((item) => ({ value: item, label: item }))} />
+          <Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_delivered")}
@@ -230,7 +219,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_delivered"]}
         >
-          <Select options={options.map((item) => ({ value: item, label: item }))} />
+          <Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_void")}
@@ -242,7 +231,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_void"]}
         >
-          <Select options={options.map((item) => ({ value: item, label: item }))} />
+          <Select options={statusOptions.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
       </LayoutFormRow>
       {Production_List_Status_Colors.treatment === "on" && (
@@ -251,13 +240,41 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
             {(fields, { add, remove }) => {
               return (
                 <div>
-                  <Space size="large" wrap>
-                    {fields.map((field, index) => (
-                      <Form.Item key={field.key}>
-                        <Space orientation="vertical">
-                          <div style={{ display: "flex" }}>
+                  <Space size="large" wrap align="start">
+                    {fields.map((field, index) => {
+                      const productionColor = productionColors[field.name] || {};
+                      const productionColorSurfaceStyles = getTintedCardSurfaceStyles(productionColor.color);
+                      const selectedProductionColorStatuses = productionColors
+                        .map((item) => item?.status)
+                        .filter(Boolean);
+                      const productionColorStatusOptions = [
+                        ...new Set([productionColor.status, ...availableProductionStatuses])
+                      ]
+                        .filter(Boolean)
+                        .filter(
+                          (status) =>
+                            status === productionColor.status || !selectedProductionColorStatuses.includes(status)
+                        );
+
+                      return (
+                        <LayoutFormRow
+                          key={field.key}
+                          noDivider
+                          title={getFormListItemTitle(t("jobs.fields.status"), index, productionColor.status)}
+                          extra={
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                          }
+                          {...productionColorSurfaceStyles}
+                          style={{ width: 260, marginBottom: 0 }}
+                        >
+                          <div>
                             <Form.Item
-                              style={{ flex: 1 }}
                               label={t("jobs.fields.status")}
                               key={`${index}status`}
                               name={[field.name, "status"]}
@@ -268,36 +285,35 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
                                 }
                               ]}
                             >
-                              <Select options={productionStatus.map((item) => ({ value: item, label: item }))} />
+                              <Select
+                                options={productionColorStatusOptions.map((item) => ({ value: item, label: item }))}
+                              />
+                            </Form.Item>
+                            <Form.Item
+                              label={t("bodyshop.fields.statuses.color")}
+                              key={`${index}color`}
+                              name={[field.name, "color"]}
+                              rules={[
+                                {
+                                  required: true
+                                  //message: t("general.validation.required"),
+                                }
+                              ]}
+                            >
+                              <ColorPicker />
                             </Form.Item>
-                            <DeleteFilled
-                              onClick={() => {
-                                remove(field.name);
-                              }}
-                            />
                           </div>
-                          <Form.Item
-                            label={t("bodyshop.fields.statuses.color")}
-                            key={`${index}color`}
-                            name={[field.name, "color"]}
-                            rules={[
-                              {
-                                required: true
-                                //message: t("general.validation.required"),
-                              }
-                            ]}
-                          >
-                            <ColorPicker />
-                          </Form.Item>
-                        </Space>
-                      </Form.Item>
-                    ))}
+                        </LayoutFormRow>
+                      );
+                    })}
                   </Space>
-                  <Form.Item>
+                  <Form.Item style={{ marginTop: 8 }}>
                     <Button
                       type="dashed"
                       onClick={() => {
-                        add();
+                        add({
+                          color: { ...DEFAULT_TRANSLUCENT_CARD_COLOR }
+                        });
                       }}
                       style={{ width: "100%" }}
                     >
diff --git a/client/src/components/shop-info/shop-info.scheduling.component.jsx b/client/src/components/shop-info/shop-info.scheduling.component.jsx
index f5d6026df..37f8a766f 100644
--- a/client/src/components/shop-info/shop-info.scheduling.component.jsx
+++ b/client/src/components/shop-info/shop-info.scheduling.component.jsx
@@ -1,5 +1,5 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { Button, Divider, Form, Input, InputNumber, Select, Space, Switch, TimePicker } from "antd";
+import { Button, Form, Input, InputNumber, Select, Space, Switch, TimePicker } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -7,8 +7,14 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-form-item.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { ColorPicker } from "./shop-info.rostatus.component";
+import {
+  DEFAULT_TRANSLUCENT_CARD_COLOR,
+  DEFAULT_TRANSLUCENT_PICKER_COLOR,
+  getTintedCardSurfaceStyles
+} from "./shop-info.color.utils";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -17,12 +23,24 @@ const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
+const WORKING_DAYS = [
+  { key: "sunday", labelKey: "general.labels.sunday" },
+  { key: "monday", labelKey: "general.labels.monday" },
+  { key: "tuesday", labelKey: "general.labels.tuesday" },
+  { key: "wednesday", labelKey: "general.labels.wednesday" },
+  { key: "thursday", labelKey: "general.labels.thursday" },
+  { key: "friday", labelKey: "general.labels.friday" },
+  { key: "saturday", labelKey: "general.labels.saturday" }
+];
+
 export function ShopInfoSchedulingComponent({ form, bodyshop }) {
   const { t } = useTranslation();
+  const appointmentColors = Form.useWatch(["appt_colors"], form) || form.getFieldValue(["appt_colors"]) || [];
+  const schedulingBuckets = Form.useWatch(["ssbuckets"], form) || form.getFieldValue(["ssbuckets"]) || [];
 
   return (
     <div>
-      <LayoutFormRow id="shopinfo-scheduling">
+      <LayoutFormRow grow header={t("bodyshop.labels.scheduling")} id="shopinfo-scheduling">
         <Form.Item
           label={t("bodyshop.fields.appt_length")}
           name={"appt_length"}
@@ -100,80 +118,93 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
           <Select mode="tags" />
         </Form.Item>
       </LayoutFormRow>
-      <Divider titlePlacement="left">{t("bodyshop.labels.workingdays")}</Divider>
-      <Space wrap size="large" id="workingdays">
-        <Form.Item label={t("general.labels.sunday")} name={["workingdays", "sunday"]} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item label={t("general.labels.monday")} name={["workingdays", "monday"]} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item label={t("general.labels.tuesday")} name={["workingdays", "tuesday"]} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item label={t("general.labels.wednesday")} name={["workingdays", "wednesday"]} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item label={t("general.labels.thursday")} name={["workingdays", "thursday"]} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item label={t("general.labels.friday")} name={["workingdays", "friday"]} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item label={t("general.labels.saturday")} name={["workingdays", "saturday"]} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-      </Space>
+      <LayoutFormRow header={t("bodyshop.labels.workingdays")} id="workingdays">
+        <Space wrap size="middle">
+          {WORKING_DAYS.map(({ key, labelKey }) => (
+            <Form.Item key={key} label={t(labelKey)} name={["workingdays", key]} valuePropName="checked">
+              <Switch />
+            </Form.Item>
+          ))}
+        </Space>
+      </LayoutFormRow>
       <LayoutFormRow header={t("bodyshop.labels.apptcolors")} id="apptcolors">
         <Form.List name={["appt_colors"]}>
           {(fields, { add, remove, move }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("bodyshop.fields.appt_colors.label")}
-                        key={`${index}aptcolorlabel`}
-                        name={[field.name, "label"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
+                {fields.map((field, index) => {
+                  const appointmentColor =
+                    appointmentColors[field.name] || form.getFieldValue(["appt_colors", field.name]) || {};
+                  const appointmentColorSurfaceStyles = getTintedCardSurfaceStyles(appointmentColor.color);
+
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(
+                          t("bodyshop.fields.appt_colors.label"),
+                          index,
+                          appointmentColor.label
+                        )}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
+                        {...appointmentColorSurfaceStyles}
                       >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.appt_colors.color")}
-                        key={`${index}aptcolorcolor`}
-                        name={[field.name, "color"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <ColorpickerFormItemComponent />
-                      </Form.Item>
-                      <Space wrap>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                        <Form.Item
+                          label={t("bodyshop.fields.appt_colors.label")}
+                          key={`${index}aptcolorlabel`}
+                          name={[field.name, "label"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.appt_colors.color")}
+                          key={`${index}aptcolorcolor`}
+                          name={[field.name, "color"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <ColorpickerFormItemComponent />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.Item>
                   <Button
                     type="dashed"
                     onClick={() => {
-                      add();
+                      add({
+                        color: {
+                          ...DEFAULT_TRANSLUCENT_PICKER_COLOR,
+                          rgb: { ...DEFAULT_TRANSLUCENT_PICKER_COLOR.rgb }
+                        }
+                      });
                     }}
                     style={{ width: "100%" }}
                   >
@@ -191,73 +222,103 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
             {(fields, { add, remove, move }) => {
               return (
                 <div>
-                  {fields.map((field, index) => (
-                    <Form.Item key={field.key}>
-                      <LayoutFormRow noDivider>
-                        <Form.Item
-                          label={t("bodyshop.fields.ssbuckets.id")}
-                          key={`${index}id`}
-                          name={[field.name, "id"]}
-                          rules={[
-                            {
-                              required: true
-                              //message: t("general.validation.required"),
-                            }
-                          ]}
-                        >
-                          <Input />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("bodyshop.fields.ssbuckets.label")}
-                          key={`${index}label`}
-                          name={[field.name, "label"]}
-                          rules={[
-                            {
-                              required: true
-                              //message: t("general.validation.required"),
-                            }
-                          ]}
-                        >
-                          <Input />
-                        </Form.Item>
+                  {fields.map((field, index) => {
+                    const schedulingBucket =
+                      schedulingBuckets[field.name] || form.getFieldValue(["ssbuckets", field.name]) || {};
+                    const schedulingBucketSurfaceStyles = getTintedCardSurfaceStyles(schedulingBucket.color);
 
-                        <Form.Item
-                          label={t("bodyshop.fields.ssbuckets.gte")}
-                          key={`${index}gte`}
-                          name={[field.name, "gte"]}
-                          rules={[
-                            {
-                              required: true
-                              //message: t("general.validation.required"),
-                            }
-                          ]}
+                    return (
+                      <Form.Item key={field.key}>
+                        <LayoutFormRow
+                          noDivider
+                          title={getFormListItemTitle(
+                            t("bodyshop.fields.ssbuckets.label"),
+                            index,
+                            schedulingBucket.label,
+                            schedulingBucket.id
+                          )}
+                          extra={
+                            <Space align="center" size="small">
+                              <Button
+                                type="text"
+                                icon={<DeleteFilled />}
+                                onClick={() => {
+                                  remove(field.name);
+                                }}
+                              />
+                              <FormListMoveArrows
+                                move={move}
+                                index={index}
+                                total={fields.length}
+                                orientation="horizontal"
+                              />
+                            </Space>
+                          }
+                          {...schedulingBucketSurfaceStyles}
                         >
-                          <InputNumber />
-                        </Form.Item>
+                          <Form.Item
+                            label={t("bodyshop.fields.ssbuckets.id")}
+                            key={`${index}id`}
+                            name={[field.name, "id"]}
+                            rules={[
+                              {
+                                required: true
+                                //message: t("general.validation.required"),
+                              }
+                            ]}
+                          >
+                            <Input />
+                          </Form.Item>
+                          <Form.Item
+                            label={t("bodyshop.fields.ssbuckets.label")}
+                            key={`${index}label`}
+                            name={[field.name, "label"]}
+                            rules={[
+                              {
+                                required: true
+                                //message: t("general.validation.required"),
+                              }
+                            ]}
+                          >
+                            <Input />
+                          </Form.Item>
 
-                        <Form.Item
-                          label={t("bodyshop.fields.ssbuckets.lt")}
-                          key={`${index}lt`}
-                          name={[field.name, "lt"]}
-                        >
-                          <InputNumber />
-                        </Form.Item>
+                          <Form.Item
+                            label={t("bodyshop.fields.ssbuckets.gte")}
+                            key={`${index}gte`}
+                            name={[field.name, "gte"]}
+                            rules={[
+                              {
+                                required: true
+                                //message: t("general.validation.required"),
+                              }
+                            ]}
+                          >
+                            <InputNumber />
+                          </Form.Item>
 
-                        <Form.Item
-                          label={t("bodyshop.fields.ssbuckets.target")}
-                          key={`${index}target`}
-                          name={[field.name, "target"]}
-                          rules={[
-                            {
-                              required: true
-                              //message: t("general.validation.required"),
-                            }
-                          ]}
-                        >
-                          <InputNumber />
-                        </Form.Item>
+                          <Form.Item
+                            label={t("bodyshop.fields.ssbuckets.lt")}
+                            key={`${index}lt`}
+                            name={[field.name, "lt"]}
+                          >
+                            <InputNumber />
+                          </Form.Item>
+
+                          <Form.Item
+                            label={t("bodyshop.fields.ssbuckets.target")}
+                            key={`${index}target`}
+                            name={[field.name, "target"]}
+                            rules={[
+                              {
+                                required: true
+                                //message: t("general.validation.required"),
+                              }
+                            ]}
+                          >
+                            <InputNumber />
+                          </Form.Item>
 
-                        <Space orientation="horizontal">
                           <Form.Item
                             label={
                               <Space>
@@ -284,23 +345,17 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
                           >
                             <ColorPicker />
                           </Form.Item>
-                          <Space wrap>
-                            <DeleteFilled
-                              onClick={() => {
-                                remove(field.name);
-                              }}
-                            />
-                            <FormListMoveArrows move={move} index={index} total={fields.length} />
-                          </Space>
-                        </Space>
-                      </LayoutFormRow>
-                    </Form.Item>
-                  ))}
+                        </LayoutFormRow>
+                      </Form.Item>
+                    );
+                  })}
                   <Form.Item>
                     <Button
                       type="dashed"
                       onClick={() => {
-                        add();
+                        add({
+                          color: { ...DEFAULT_TRANSLUCENT_CARD_COLOR }
+                        });
                       }}
                       style={{ width: "100%" }}
                     >
diff --git a/client/src/components/shop-info/shop-info.speedprint.component.jsx b/client/src/components/shop-info/shop-info.speedprint.component.jsx
index 08d9e816a..999dc5715 100644
--- a/client/src/components/shop-info/shop-info.speedprint.component.jsx
+++ b/client/src/components/shop-info/shop-info.speedprint.component.jsx
@@ -3,12 +3,15 @@ import { Button, Form, Input, Select, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { TemplateList } from "../../utils/TemplateConstants";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 export default function ShopInfoSpeedPrint() {
   const { t } = useTranslation();
+  const form = Form.useFormInstance();
   const allTemplates = TemplateList("job");
+  const speedPrintItems = Form.useWatch(["speedprint"], form) || [];
   const TemplateListGenerated = InstanceRenderManager({
     imex: Object.fromEntries(Object.entries(allTemplates).filter(([, { enhanced_payroll }]) => !enhanced_payroll)),
     rome: allTemplates
@@ -19,67 +22,82 @@ export default function ShopInfoSpeedPrint() {
       {(fields, { add, remove, move }) => {
         return (
           <div>
-            {fields.map((field, index) => (
-              <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
-                <LayoutFormRow grow>
-                  <Form.Item
-                    label={t("bodyshop.fields.speedprint.id")}
-                    key={`${index}id`}
-                    name={[field.name, "id"]}
-                    rules={[
-                      {
-                        required: true
-                        //message: t("general.validation.required"),
-                      }
-                    ]}
-                  >
-                    <Input />
-                  </Form.Item>
-                  <Form.Item
-                    label={t("bodyshop.fields.speedprint.label")}
-                    key={`${index}label`}
-                    name={[field.name, "label"]}
-                    rules={[
-                      {
-                        required: true
-                        //message: t("general.validation.required"),
-                      }
-                    ]}
-                  >
-                    <Input />
-                  </Form.Item>
+            {fields.map((field, index) => {
+              const speedPrintItem = speedPrintItems[field.name] || {};
 
-                  <Form.Item
-                    name={[field.name, "templates"]}
-                    label={t("bodyshop.fields.speedprint.templates")}
-                    rules={[
-                      {
-                        required: true,
-                        //message: t("general.validation.required"),
-                        type: "array"
-                      }
-                    ]}
+              return (
+                <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
+                  <LayoutFormRow
+                    grow
+                    title={getFormListItemTitle(
+                      t("bodyshop.fields.speedprint.label"),
+                      index,
+                      speedPrintItem.label,
+                      speedPrintItem.id
+                    )}
+                    extra={
+                      <Space align="center" size="small">
+                        <Button
+                          type="text"
+                          icon={<DeleteFilled />}
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                        <FormListMoveArrows move={move} index={index} total={fields.length} orientation="horizontal" />
+                      </Space>
+                    }
                   >
-                    <Select
-                      mode="multiple"
-                      options={Object.keys(TemplateListGenerated).map((key) => ({
-                        value: TemplateListGenerated[key].key,
-                        label: TemplateListGenerated[key].title
-                      }))}
-                    />
-                  </Form.Item>
+                    <Form.Item
+                      label={t("bodyshop.fields.speedprint.id")}
+                      key={`${index}id`}
+                      name={[field.name, "id"]}
+                      rules={[
+                        {
+                          required: true
+                          //message: t("general.validation.required"),
+                        }
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
+                    <Form.Item
+                      label={t("bodyshop.fields.speedprint.label")}
+                      key={`${index}label`}
+                      name={[field.name, "label"]}
+                      rules={[
+                        {
+                          required: true
+                          //message: t("general.validation.required"),
+                        }
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
 
-                  <Space wrap>
-                    <DeleteFilled
-                      onClick={() => {
-                        remove(field.name);
-                      }}
-                    />
-                    <FormListMoveArrows move={move} index={index} total={fields.length} />
-                  </Space>
-                </LayoutFormRow>
-              </Form.Item>
-            ))}
+                    <Form.Item
+                      name={[field.name, "templates"]}
+                      label={t("bodyshop.fields.speedprint.templates")}
+                      rules={[
+                        {
+                          required: true,
+                          //message: t("general.validation.required"),
+                          type: "array"
+                        }
+                      ]}
+                    >
+                      <Select
+                        mode="multiple"
+                        options={Object.keys(TemplateListGenerated).map((key) => ({
+                          value: TemplateListGenerated[key].key,
+                          label: TemplateListGenerated[key].title
+                        }))}
+                      />
+                    </Form.Item>
+                  </LayoutFormRow>
+                </Form.Item>
+              );
+            })}
             <Form.Item>
               <Button
                 type="dashed"
diff --git a/client/src/components/shop-info/shop-info.task-presets.component.jsx b/client/src/components/shop-info/shop-info.task-presets.component.jsx
index d5cf92cc2..a53e124b8 100644
--- a/client/src/components/shop-info/shop-info.task-presets.component.jsx
+++ b/client/src/components/shop-info/shop-info.task-presets.component.jsx
@@ -2,6 +2,7 @@ import { DeleteFilled } from "@ant-design/icons";
 import { Button, Checkbox, Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
 import { useTranslation } from "react-i18next";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 import { connect } from "react-redux";
@@ -55,6 +56,8 @@ const getTaskPresetAllocationErrors = (presets = [], t) => {
 
 export function ShopInfoTaskPresets({ bodyshop }) {
   const { t } = useTranslation();
+  const form = Form.useFormInstance();
+  const taskPresets = Form.useWatch(["md_tasks_presets", "presets"], form) || [];
 
   return (
     <>
@@ -93,152 +96,173 @@ export function ShopInfoTaskPresets({ bodyshop }) {
           {(fields, { add, remove, move }, { errors }) => {
             return (
               <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item
-                        label={t("bodyshop.fields.md_tasks_presets.name")}
-                        key={`${index}name`}
-                        name={[field.name, "name"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
+                {fields.map((field, index) => {
+                  const taskPreset = taskPresets[field.name] || {};
+
+                  return (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow
+                        noDivider
+                        title={getFormListItemTitle(
+                          t("bodyshop.fields.md_tasks_presets.name"),
+                          index,
+                          taskPreset.name,
+                          taskPreset.memo
+                        )}
+                        extra={
+                          <Space align="center" size="small">
+                            <Button
+                              type="text"
+                              icon={<DeleteFilled />}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows
+                              move={move}
+                              index={index}
+                              total={fields.length}
+                              orientation="horizontal"
+                            />
+                          </Space>
+                        }
                       >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        span={12}
-                        label={t("bodyshop.fields.md_tasks_presets.hourstype")}
-                        key={`${index}hourstype`}
-                        name={[field.name, "hourstype"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                      >
-                        <Checkbox.Group>
-                          <Row>
-                            <Col span={4}>
-                              <Checkbox value="LAA" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LAA")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LAB" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LAB")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LAD" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LAD")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LAE" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LAE")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LAF" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LAF")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LAG" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LAG")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LAM" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LAM")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LAR" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LAR")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LAS" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LAS")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LAU" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LAU")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LA1" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LA1")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LA2" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LA2")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LA3" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LA3")}
-                              </Checkbox>
-                            </Col>
-                            <Col span={4}>
-                              <Checkbox value="LA4" style={{ lineHeight: "32px" }}>
-                                {t("joblines.fields.lbr_types.LA4")}
-                              </Checkbox>
-                            </Col>
-                          </Row>
-                        </Checkbox.Group>
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.md_tasks_presets.percent")}
-                        key={`${index}percent`}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
-                        name={[field.name, "percent"]}
-                      >
-                        <InputNumber min={0} max={100} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.md_tasks_presets.memo")}
-                        key={`${index}memo`}
-                        name={[field.name, "memo"]}
-                      >
-                        <Input />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("bodyshop.fields.md_tasks_presets.nextstatus")}
-                        key={`${index}nextstatus`}
-                        name={[field.name, "nextstatus"]}
-                      >
-                        <Select
-                          options={bodyshop.md_ro_statuses.production_statuses.map((o) => ({
-                            value: o,
-                            label: o
-                          }))}
-                        />
-                      </Form.Item>
-                      <Space wrap>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
-                  </Form.Item>
-                ))}
+                        <Form.Item
+                          label={t("bodyshop.fields.md_tasks_presets.name")}
+                          key={`${index}name`}
+                          name={[field.name, "name"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          span={12}
+                          label={t("bodyshop.fields.md_tasks_presets.hourstype")}
+                          key={`${index}hourstype`}
+                          name={[field.name, "hourstype"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Checkbox.Group>
+                            <Row>
+                              <Col span={4}>
+                                <Checkbox value="LAA" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LAA")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LAB" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LAB")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LAD" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LAD")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LAE" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LAE")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LAF" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LAF")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LAG" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LAG")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LAM" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LAM")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LAR" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LAR")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LAS" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LAS")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LAU" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LAU")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LA1" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LA1")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LA2" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LA2")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LA3" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LA3")}
+                                </Checkbox>
+                              </Col>
+                              <Col span={4}>
+                                <Checkbox value="LA4" style={{ lineHeight: "32px" }}>
+                                  {t("joblines.fields.lbr_types.LA4")}
+                                </Checkbox>
+                              </Col>
+                            </Row>
+                          </Checkbox.Group>
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.md_tasks_presets.percent")}
+                          key={`${index}percent`}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                          name={[field.name, "percent"]}
+                        >
+                          <InputNumber min={0} max={100} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.md_tasks_presets.memo")}
+                          key={`${index}memo`}
+                          name={[field.name, "memo"]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.md_tasks_presets.nextstatus")}
+                          key={`${index}nextstatus`}
+                          name={[field.name, "nextstatus"]}
+                        >
+                          <Select
+                            options={bodyshop.md_ro_statuses.production_statuses.map((o) => ({
+                              value: o,
+                              label: o
+                            }))}
+                          />
+                        </Form.Item>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  );
+                })}
                 <Form.ErrorList errors={errors} />
                 <Form.Item>
                   <Button