From cdfae5a4292badb55d06bbf576870b0f48d58ca5 Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Tue, 3 Feb 2026 10:51:14 -0500
Subject: [PATCH] feature/IO-3544-Ant-Select-Deprecation - finish

---
 .../allocations-assignment.component.jsx      |  13 +-
 .../allocations-bulk-assignment.component.jsx |  12 +-
 ...form-lines.extended.formitem.component.jsx |  46 +-
 .../bill-form/bill-form.component.jsx         |  13 +-
 .../bill-form/bill-form.lines.component.jsx   |  46 +-
 .../chat-tag-ro/chat-tag-ro.component.jsx     |  13 +-
 .../contract-convert-to-ro.component.jsx      |  28 +-
 .../contract-status-select.component.jsx      |  18 +-
 ...ourtesy-car-readiness-select.component.jsx |  11 +-
 .../courtesy-car-status-select.component.jsx  |  19 +-
 .../dms-post-form/cdklike-dms-post-form.jsx   |  14 +-
 .../email-overlay/email-overlay.component.jsx |  12 +-
 ...employee-search-select-email.component.jsx |  31 +-
 .../employee-search-select.component.jsx      |  40 +-
 .../job-3rd-party-modal.component.jsx         |  37 +-
 .../job-line-bulk-assign.component.jsx        |  12 +-
 .../job-line-convert-to-labor.component.jsx   |  36 +-
 .../job-line-dispatch-button.component.jsx    |  15 +-
 .../job-line-status-popup.component.jsx       |  13 +-
 .../job-line-team-assignmnent.component.jsx   |  13 +-
 .../job-lines-upsert-modal.component.jsx      |  54 +-
 .../job-search-select.component.jsx           |  38 +-
 .../jobs-admin-class.component.jsx            |  13 +-
 .../jobs-close-lines.component.jsx            |  24 +-
 .../jobs-convert-button.component.jsx         |  71 +-
 .../jobs-create-jobs-info.component.jsx       |  38 +-
 .../jobs-detail-general.component.jsx         |  61 +-
 .../jobs-detail-header-actions.component.jsx  |  13 +-
 ...-allocations-adjustment-edit.component.jsx |  36 +-
 .../owner-search-select.component.jsx         |  17 +-
 .../parts-order-modal.component.jsx           |  28 +-
 .../parts-receive-modal.component.jsx         |  28 +-
 ...arts-shop-info-email-presets.component.jsx |  10 +-
 .../payment-form/payment-form.component.jsx   |  47 +-
 ...n-list-columns.empassignment.component.jsx |  21 +-
 ...oduction-list-config-manager.component.jsx |   2 +-
 .../schedule-job-modal.component.jsx          |  32 +-
 .../schedule-manual-event.component.jsx       |  13 +-
 .../shop-employees-form.component.jsx         |  30 +-
 .../shop-info/shop-info.general.component.jsx |  60 +-
 .../shop-info/shop-info.intake.component.jsx  |  44 +-
 ...p-info.responsibilitycenters.component.jsx | 980 +++---------------
 .../shop-info.rostatus.component.jsx          | 120 +--
 .../shop-info.speedprint.component.jsx        |  14 +-
 .../shop-intellipay-config.component.jsx      |  56 +-
 .../tech-job-clock-in-form.component.jsx      |  20 +-
 .../tech-job-clock-out-button.component.jsx   |  43 +-
 .../time-ticket-modal.component.jsx           |  19 +-
 .../time-ticket-shift-form.component.jsx      |  16 +-
 .../vehicle-search-select.component.jsx       |  17 +-
 .../vendor-search-select.component.jsx        | 120 +--
 .../dms-payables/dms-payables.container.jsx   |  13 +-
 client/src/pages/dms/dms.container.jsx        |  15 +-
 .../pages/jobs-close/jobs-close.component.jsx |  16 +-
 client/src/utils/Ciecaselect.jsx              |  75 +-
 55 files changed, 872 insertions(+), 1774 deletions(-)

diff --git a/client/src/components/allocations-assignment/allocations-assignment.component.jsx b/client/src/components/allocations-assignment/allocations-assignment.component.jsx
index de8089370..00ec8f90a 100644
--- a/client/src/components/allocations-assignment/allocations-assignment.component.jsx
+++ b/client/src/components/allocations-assignment/allocations-assignment.component.jsx
@@ -35,13 +35,12 @@ export function AllocationsAssignmentComponent({
         style={{ width: 200 }}
         placeholder="Select a person"
         onChange={onChange}
-      >
-        {bodyshop.employees.map((emp) => (
-          <Select.Option value={emp.id} key={emp.id}>
-            {`${emp.first_name} ${emp.last_name}`}
-          </Select.Option>
-        ))}
-      </Select>
+        options={bodyshop.employees.map((emp) => ({
+          value: emp.id,
+          key: emp.id,
+          label: `${emp.first_name} ${emp.last_name}`
+        }))}
+      />
       <InputNumber
         defaultValue={assignment.hours}
         placeholder={t("joblines.fields.mod_lb_hrs")}
diff --git a/client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx b/client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx
index f7bd86df9..f70872ea1 100644
--- a/client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx
+++ b/client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx
@@ -37,13 +37,11 @@ export default connect(
         style={{ width: 200 }}
         placeholder="Select a person"
         onChange={onChange}
-      >
-        {bodyshop.employees.map((emp) => (
-          <Select.Option value={emp.id} key={emp.id}>
-            {`${emp.first_name} ${emp.last_name}`}
-          </Select.Option>
-        ))}
-      </Select>
+        options={bodyshop.employees.map((emp) => ({
+          value: emp.id,
+          label: `${emp.first_name} ${emp.last_name}`
+        }))}
+      />
 
       <Button type="primary" disabled={!assignment.employeeid} onClick={handleAssignment}>
         Assign
diff --git a/client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx b/client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx
index cf8104606..479b1fa50 100644
--- a/client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx
+++ b/client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx
@@ -99,20 +99,22 @@ export function BillFormItemsExtendedFormItem({
         }}
       </Form.Item>
       <Form.Item label={t("billlines.fields.cost_center")} name={["billlineskeys", record.id, "cost_center"]}>
-        <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
-          {bodyshopHasDmsKey(bodyshop)
-            ? CiecaSelect(true, false)
-            : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
-        </Select>
+        <Select 
+          showSearch 
+          style={{ minWidth: "3rem" }} 
+          disabled={disabled}
+          options={
+            bodyshopHasDmsKey(bodyshop)
+              ? CiecaSelect(true, false)
+              : responsibilityCenters.costs.map((item) => ({ value: item.name, label: item.name }))
+          }
+        />
       </Form.Item>
       <Form.Item label={t("billlines.fields.location")} name={["billlineskeys", record.id, "location"]}>
-        <Select disabled={disabled}>
-          {bodyshop.md_parts_locations.map((loc, idx) => (
-            <Select.Option key={idx} value={loc}>
-              {loc}
-            </Select.Option>
-          ))}
-        </Select>
+        <Select 
+          disabled={disabled}
+          options={bodyshop.md_parts_locations.map((loc) => ({ value: loc, label: loc }))}
+        />
       </Form.Item>
       <Form.Item
         label={t("billlines.fields.deductedfromlbr")}
@@ -136,22 +138,10 @@ export function BillFormItemsExtendedFormItem({
                   ]}
                   name={["billlineskeys", record.id, "lbr_adjustment", "mod_lbr_ty"]}
                 >
-                  <Select allowClear>
-                    <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
-                    <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
-                    <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
-                    <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
-                    <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
-                    <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
-                    <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
-                    <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
-                    <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
-                    <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
-                    <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
-                    <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
-                    <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
-                    <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
-                  </Select>
+                  <Select 
+                    allowClear
+                    options={CiecaSelect(false, true)}
+                  />
                 </Form.Item>
                 <Form.Item
                   label={t("jobs.labels.adjustmentrate")}
diff --git a/client/src/components/bill-form/bill-form.component.jsx b/client/src/components/bill-form/bill-form.component.jsx
index 51ce7bee1..ee8cd0844 100644
--- a/client/src/components/bill-form/bill-form.component.jsx
+++ b/client/src/components/bill-form/bill-form.component.jsx
@@ -328,13 +328,12 @@ export function BillFormComponent({
         </Form.Item>
         {!billEdit && (
           <Form.Item label={t("bills.fields.allpartslocation")} name="location">
-            <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
-              {bodyshop.md_parts_locations.map((loc, idx) => (
-                <Select.Option key={idx} value={loc}>
-                  {loc}
-                </Select.Option>
-              ))}
-            </Select>
+            <Select 
+              style={{ width: "10rem" }} 
+              disabled={disabled} 
+              allowClear
+              options={bodyshop.md_parts_locations.map((loc) => ({ value: loc, label: loc }))}
+            />
           </Form.Item>
         )}
       </LayoutFormRow>
diff --git a/client/src/components/bill-form/bill-form.lines.component.jsx b/client/src/components/bill-form/bill-form.lines.component.jsx
index 73b0a21a9..ed7bf7457 100644
--- a/client/src/components/bill-form/bill-form.lines.component.jsx
+++ b/client/src/components/bill-form/bill-form.lines.component.jsx
@@ -392,11 +392,16 @@ export function BillEnterModalLinesComponent({
           rules: [{ required: true }]
         }),
         formInput: () => (
-          <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
-            {bodyshopHasDmsKey(bodyshop)
-              ? CiecaSelect(true, false)
-              : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
-          </Select>
+          <Select 
+            showSearch 
+            style={{ minWidth: "3rem" }} 
+            disabled={disabled}
+            options={
+              bodyshopHasDmsKey(bodyshop)
+                ? CiecaSelect(true, false)
+                : responsibilityCenters.costs.map((item) => ({ value: item.name, label: item.name }))
+            }
+          />
         )
       },
       ...(billEdit
@@ -412,13 +417,10 @@ export function BillEnterModalLinesComponent({
                 name: [field.name, "location"]
               }),
               formInput: () => (
-                <Select disabled={disabled}>
-                  {bodyshop.md_parts_locations.map((loc, idx) => (
-                    <Select.Option key={idx} value={loc}>
-                      {loc}
-                    </Select.Option>
-                  ))}
-                </Select>
+                <Select 
+                  disabled={disabled}
+                  options={bodyshop.md_parts_locations.map((loc) => ({ value: loc, label: loc }))}
+                />
               )
             }
           ]),
@@ -459,22 +461,10 @@ export function BillEnterModalLinesComponent({
                       rules={[{ required: true }]}
                       name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
                     >
-                      <Select allowClear>
-                        <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
-                        <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
-                        <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
-                        <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
-                        <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
-                        <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
-                        <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
-                        <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
-                        <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
-                        <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
-                        <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
-                        <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
-                        <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
-                        <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
-                      </Select>
+                      <Select 
+                        allowClear
+                        options={CiecaSelect(false, true)}
+                      />
                     </Form.Item>
 
                     {Enhanced_Payroll.treatment === "on" ? (
diff --git a/client/src/components/chat-tag-ro/chat-tag-ro.component.jsx b/client/src/components/chat-tag-ro/chat-tag-ro.component.jsx
index e9dc14b07..5849b2146 100644
--- a/client/src/components/chat-tag-ro/chat-tag-ro.component.jsx
+++ b/client/src/components/chat-tag-ro/chat-tag-ro.component.jsx
@@ -19,13 +19,12 @@ export default function ChatTagRoComponent({ roOptions, loading, handleSearch, h
           placeholder={t("general.labels.search")}
           onSelect={handleInsertTag}
           notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
-        >
-          {roOptions.map((item, idx) => (
-            <Select.Option key={item.id || idx}>
-              {` ${item.ro_number || ""} | ${OwnerNameDisplayFunction(item)}`}
-            </Select.Option>
-          ))}
-        </Select>
+          options={roOptions.map((item, idx) => ({
+            key: item.id || idx,
+            value: item.id || idx,
+            label: ` ${item.ro_number || ""} | ${OwnerNameDisplayFunction(item)}`
+          }))}
+        />
       </div>
       {loading ? <LoadingOutlined /> : null}
 
diff --git a/client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx b/client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx
index 3b60b73e5..015b70bbb 100644
--- a/client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx
+++ b/client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx
@@ -309,13 +309,13 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
             }
           ]}
         >
-          <Select>
-            {bodyshop.md_ins_cos.map((s) => (
-              <Select.Option key={s.name} value={s.name}>
-                {s.name}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select
+            options={bodyshop.md_ins_cos.map((s) => ({
+              key: s.name,
+              value: s.name,
+              label: s.name
+            }))}
+          />
         </Form.Item>
         <Form.Item
           name={"class"}
@@ -327,13 +327,13 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
             }
           ]}
         >
-          <Select>
-            {bodyshop.md_classes.map((s) => (
-              <Select.Option key={s} value={s}>
-                {s}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select
+            options={bodyshop.md_classes.map((s) => ({
+              key: s,
+              value: s,
+              label: s
+            }))}
+          />
         </Form.Item>
         <Form.Item
           label={t("contracts.labels.convertform.applycleanupcharge")}
diff --git a/client/src/components/contract-status-select/contract-status-select.component.jsx b/client/src/components/contract-status-select/contract-status-select.component.jsx
index a02664f6c..29c59c210 100644
--- a/client/src/components/contract-status-select/contract-status-select.component.jsx
+++ b/client/src/components/contract-status-select/contract-status-select.component.jsx
@@ -2,8 +2,6 @@ import { useEffect, useState } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";
 
-const { Option } = Select;
-
 const ContractStatusComponent = ({ value, onChange, ref }) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
@@ -15,11 +13,17 @@ const ContractStatusComponent = ({ value, onChange, ref }) => {
   }, [value, option, onChange]);
 
   return (
-    <Select ref={ref} value={option} style={{ width: 100 }} onChange={setOption}>
-      <Option value="contracts.status.new">{t("contracts.status.new")}</Option>
-      <Option value="contracts.status.out">{t("contracts.status.out")}</Option>
-      <Option value="contracts.status.returned">{t("contracts.status.out")}</Option>
-    </Select>
+    <Select
+      ref={ref}
+      value={option}
+      style={{ width: 100 }}
+      onChange={setOption}
+      options={[
+        { value: "contracts.status.new", label: t("contracts.status.new") },
+        { value: "contracts.status.out", label: t("contracts.status.out") },
+        { value: "contracts.status.returned", label: t("contracts.status.out") }
+      ]}
+    />
   );
 };
 
diff --git a/client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx b/client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx
index eea8819d8..5bec4a7f0 100644
--- a/client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx
+++ b/client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx
@@ -2,8 +2,6 @@ import { Select } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-const { Option } = Select;
-
 const CourtesyCarReadinessComponent = ({ value, onChange, ref }) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
@@ -23,10 +21,11 @@ const CourtesyCarReadinessComponent = ({ value, onChange, ref }) => {
         width: 100
       }}
       onChange={setOption}
-    >
-      <Option value="courtesycars.readiness.ready">{t("courtesycars.readiness.ready")}</Option>
-      <Option value="courtesycars.readiness.notready">{t("courtesycars.readiness.notready")}</Option>
-    </Select>
+      options={[
+        { value: "courtesycars.readiness.ready", label: t("courtesycars.readiness.ready") },
+        { value: "courtesycars.readiness.notready", label: t("courtesycars.readiness.notready") }
+      ]}
+    />
   );
 };
 export default CourtesyCarReadinessComponent;
diff --git a/client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx b/client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx
index 31f0216de..f31fb4529 100644
--- a/client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx
+++ b/client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx
@@ -2,8 +2,6 @@ import { useEffect, useState } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";
 
-const { Option } = Select;
-
 const CourtesyCarStatusComponent = ({ value, onChange, ref }) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
@@ -22,14 +20,15 @@ const CourtesyCarStatusComponent = ({ value, onChange, ref }) => {
         width: 100
       }}
       onChange={setOption}
-    >
-      <Option value="courtesycars.status.in">{t("courtesycars.status.in")}</Option>
-      <Option value="courtesycars.status.inservice">{t("courtesycars.status.inservice")}</Option>
-      <Option value="courtesycars.status.out">{t("courtesycars.status.out")}</Option>
-      <Option value="courtesycars.status.sold">{t("courtesycars.status.sold")}</Option>
-      <Option value="courtesycars.status.leasereturn">{t("courtesycars.status.leasereturn")}</Option>
-      <Option value="courtesycars.status.unavailable">{t("courtesycars.status.unavailable")}</Option>
-    </Select>
+      options={[
+        { value: "courtesycars.status.in", label: t("courtesycars.status.in") },
+        { value: "courtesycars.status.inservice", label: t("courtesycars.status.inservice") },
+        { value: "courtesycars.status.out", label: t("courtesycars.status.out") },
+        { value: "courtesycars.status.sold", label: t("courtesycars.status.sold") },
+        { value: "courtesycars.status.leasereturn", label: t("courtesycars.status.leasereturn") },
+        { value: "courtesycars.status.unavailable", label: t("courtesycars.status.unavailable") }
+      ]}
+    />
   );
 };
 export default CourtesyCarStatusComponent;
diff --git a/client/src/components/dms-post-form/cdklike-dms-post-form.jsx b/client/src/components/dms-post-form/cdklike-dms-post-form.jsx
index 9e006534b..fccea23da 100644
--- a/client/src/components/dms-post-form/cdklike-dms-post-form.jsx
+++ b/client/src/components/dms-post-form/cdklike-dms-post-form.jsx
@@ -272,11 +272,15 @@ export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode,
                         name={[field.name, "name"]}
                         rules={[{ required: true }]}
                       >
-                        <Select style={{ width: "100%" }} onSelect={(value) => handlePayerSelect(value, index)}>
-                          {bodyshop.cdk_configuration?.payers?.map((payer) => (
-                            <Select.Option key={payer.name}>{payer.name}</Select.Option>
-                          ))}
-                        </Select>
+                        <Select
+                          style={{ width: "100%" }}
+                          onSelect={(value) => handlePayerSelect(value, index)}
+                          options={bodyshop.cdk_configuration?.payers?.map((payer) => ({
+                            key: payer.name,
+                            value: payer.name,
+                            label: payer.name
+                          }))}
+                        />
                       </Form.Item>
                     </Col>
 
diff --git a/client/src/components/email-overlay/email-overlay.component.jsx b/client/src/components/email-overlay/email-overlay.component.jsx
index 3263b8d77..a5b439da0 100644
--- a/client/src/components/email-overlay/email-overlay.component.jsx
+++ b/client/src/components/email-overlay/email-overlay.component.jsx
@@ -86,11 +86,13 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
           }
         ]}
       >
-        <Select>
-          <Select.Option key={currentUser.email}>{currentUser.email}</Select.Option>
-          <Select.Option key={bodyshop.email}>{bodyshop.email}</Select.Option>
-          {bodyshop.md_from_emails && bodyshop.md_from_emails.map((e) => <Select.Option key={e}>{e}</Select.Option>)}
-        </Select>
+        <Select
+          options={[
+            { key: currentUser.email, value: currentUser.email, label: currentUser.email },
+            { key: bodyshop.email, value: bodyshop.email, label: bodyshop.email },
+            ...(bodyshop.md_from_emails ? bodyshop.md_from_emails.map((e) => ({ key: e, value: e, label: e })) : [])
+          ]}
+        />
       </Form.Item>
       <Form.Item
         label={
diff --git a/client/src/components/employee-search-select/employee-search-select-email.component.jsx b/client/src/components/employee-search-select/employee-search-select-email.component.jsx
index cb1c80872..728c09151 100644
--- a/client/src/components/employee-search-select/employee-search-select-email.component.jsx
+++ b/client/src/components/employee-search-select/employee-search-select-email.component.jsx
@@ -1,7 +1,6 @@
 import { Select, Space, Tag } from "antd";
 import { useTranslation } from "react-i18next";
 
-const { Option } = Select;
 //To be used as a form element only.
 
 const EmployeeSearchSelectEmail = ({ options, ...props }) => {
@@ -12,26 +11,24 @@ const EmployeeSearchSelectEmail = ({ options, ...props }) => {
       showSearch={{
         optionFilterProp: "search"
       }}
-      // value={option}
       style={{
         width: 400
       }}
+      options={options?.map((o) => ({
+        key: o.id,
+        value: o.user_email,
+        search: `${o.employee_number}  ${o.first_name} ${o.last_name}`,
+        label: (
+          <Space>
+            {`${o.employee_number}  ${o.first_name} ${o.last_name}`}
+            <Tag color="green">
+              {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
+            </Tag>
+          </Space>
+        )
+      }))}
       {...props}
-    >
-      {options
-        ? options.map((o) => (
-            <Option key={o.id} value={o.user_email} search={`${o.employee_number}  ${o.first_name} ${o.last_name}`}>
-              <Space>
-                {`${o.employee_number}  ${o.first_name} ${o.last_name}`}
-
-                <Tag color="green">
-                  {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
-                </Tag>
-              </Space>
-            </Option>
-          ))
-        : null}
-    </Select>
+    />
   );
 };
 export default EmployeeSearchSelectEmail;
diff --git a/client/src/components/employee-search-select/employee-search-select.component.jsx b/client/src/components/employee-search-select/employee-search-select.component.jsx
index 4691a645d..ff30b4808 100644
--- a/client/src/components/employee-search-select/employee-search-select.component.jsx
+++ b/client/src/components/employee-search-select/employee-search-select.component.jsx
@@ -1,7 +1,6 @@
 import { Select, Space, Tag } from "antd";
 import { useTranslation } from "react-i18next";
 
-const { Option } = Select;
 //To be used as a form element only.
 
 const EmployeeSearchSelect = ({ options, showEmail, ...props }) => {
@@ -12,30 +11,29 @@ const EmployeeSearchSelect = ({ options, showEmail, ...props }) => {
       showSearch={{
         optionFilterProp: "search"
       }}
-      // value={option}
       style={{
         width: 400
       }}
+      options={options?.map((o) => ({
+        key: o.id,
+        value: o.id,
+        search: `${o.employee_number}  ${o.first_name} ${o.last_name}`,
+        label: (
+          <Space size="small">
+            {`${o.employee_number ?? ""}  ${o.first_name} ${o.last_name}`}
+            <Tag color="green" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
+              {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
+            </Tag>
+            {showEmail && o.user_email ? (
+              <Tag color="blue" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
+                {o.user_email}
+              </Tag>
+            ) : null}
+          </Space>
+        )
+      }))}
       {...props}
-    >
-      {options
-        ? options.map((o) => (
-            <Option key={o.id} value={o.id} search={`${o.employee_number}  ${o.first_name} ${o.last_name}`}>
-              <Space size="small">
-                {`${o.employee_number ?? ""}  ${o.first_name} ${o.last_name}`}
-                <Tag color="green" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
-                  {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
-                </Tag>
-                {showEmail && o.user_email ? (
-                  <Tag color="blue" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
-                    {o.user_email}
-                  </Tag>
-                ) : null}
-              </Space>
-            </Option>
-          ))
-        : null}
-    </Select>
+    />
   );
 };
 export default EmployeeSearchSelect;
diff --git a/client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx b/client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx
index 4e0d2fcd5..6ce826a35 100644
--- a/client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx
+++ b/client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx
@@ -67,16 +67,19 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
     );
   };
 
-  const handleInsSelect = (value, option) => {
-    form.setFieldsValue({
-      addr1: option.obj.name,
-      addr2: option.obj.street1,
-      addr3: option.obj.street2,
-      city: option.obj.city,
-      state: option.obj.state,
-      zip: option.obj.zip,
-      vendorid: null
-    });
+  const handleInsSelect = (value) => {
+    const selectedVendor = bodyshop.md_ins_cos.find(s => s.name === value);
+    if (selectedVendor) {
+      form.setFieldsValue({
+        addr1: selectedVendor.name,
+        addr2: selectedVendor.street1,
+        addr3: selectedVendor.street2,
+        city: selectedVendor.city,
+        state: selectedVendor.state,
+        zip: selectedVendor.zip,
+        vendorid: null
+      });
+    }
   };
 
   const handleVendorSelect = (vendorid) => {
@@ -103,13 +106,13 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
             <VendorSearchSelect options={VendorAutoCompleteData?.vendors} onSelect={handleVendorSelect} />
           </Form.Item>
           <Form.Item label={t("bodyshop.fields.md_ins_co.name")} name="ins_co_id">
-            <Select onSelect={handleInsSelect}>
-              {bodyshop.md_ins_cos.map((s) => (
-                <Select.Option key={s.name} obj={s} value={s.name}>
-                  {s.name}
-                </Select.Option>
-              ))}
-            </Select>
+            <Select
+              onSelect={handleInsSelect}
+              options={bodyshop.md_ins_cos.map((s) => ({
+                value: s.name,
+                label: s.name
+              }))}
+            />
           </Form.Item>
           <LayoutFormRow grow>
             <Form.Item label={t("printcenter.jobs.3rdpartyfields.addr1")} name="addr1">
diff --git a/client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx b/client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx
index c173dfbcb..7674d75c6 100644
--- a/client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx
+++ b/client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx
@@ -92,13 +92,11 @@ export function JoblineBulkAssign({ setSelectedLines, selectedLines, insertAudit
               filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }}
             style={{ width: 200 }}
-          >
-            {bodyshop.employee_teams.map((team) => (
-              <Select.Option value={team.id} key={team.id} name={team.name}>
-                {team.name}
-              </Select.Option>
-            ))}
-          </Select>
+            options={bodyshop.employee_teams.map((team) => ({
+              value: team.id,
+              label: team.name
+            }))}
+          />
         </Form.Item>
 
         <Space wrap>
diff --git a/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx b/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
index 4f088697d..da2161f86 100644
--- a/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
+++ b/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
@@ -122,22 +122,26 @@ export function JobLineConvertToLabor({
             }
           ]}
         >
-          <Select allowClear showSearch={{ optionFilterProp: "children" }}>
-            <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
-            <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
-            <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
-            <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
-            <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
-            <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
-            <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
-            <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
-            <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
-            <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
-            <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
-            <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
-            <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
-            <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
-          </Select>
+          <Select
+            allowClear
+            showSearch
+            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 shouldUpdate>
diff --git a/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx b/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx
index 23a55f611..bbacc2f16 100644
--- a/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx
+++ b/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx
@@ -119,15 +119,14 @@ export function JobLineDispatchButton({
               filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }}
             style={{ width: 200 }}
-          >
-            {bodyshop.employees
+            options={bodyshop.employees
               .filter((emp) => emp.active)
-              .map((emp) => (
-                <Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}>
-                  {`${emp.first_name} ${emp.last_name}`}
-                </Select.Option>
-              ))}
-          </Select>
+              .map((emp) => ({
+                value: emp.id,
+                key: emp.id,
+                label: `${emp.first_name} ${emp.last_name}`
+              }))}
+          />
         </Form.Item>
 
         <Space wrap>
diff --git a/client/src/components/job-line-status-popup/job-line-status-popup.component.jsx b/client/src/components/job-line-status-popup/job-line-status-popup.component.jsx
index 560698a4d..4e669899a 100644
--- a/client/src/components/job-line-status-popup/job-line-status-popup.component.jsx
+++ b/client/src/components/job-line-status-popup/job-line-status-popup.component.jsx
@@ -64,13 +64,12 @@ export function JobLineStatusPopup({ bodyshop, jobline, disabled }) {
             onSelect={handleChange}
             onBlur={handleSave}
             onClear={() => handleChange(null)}
-          >
-            {Object.values(bodyshop.md_order_statuses).map((s, idx) => (
-              <Select.Option key={idx} value={s}>
-                {s}
-              </Select.Option>
-            ))}
-          </Select>
+            options={Object.values(bodyshop.md_order_statuses).map((s, idx) => ({
+              key: idx,
+              value: s,
+              label: s
+            }))}
+          />
         </LoadingSpinner>
       </div>
     );
diff --git a/client/src/components/job-line-team-assignment/job-line-team-assignmnent.component.jsx b/client/src/components/job-line-team-assignment/job-line-team-assignmnent.component.jsx
index 169368ece..92c6f97ec 100644
--- a/client/src/components/job-line-team-assignment/job-line-team-assignmnent.component.jsx
+++ b/client/src/components/job-line-team-assignment/job-line-team-assignmnent.component.jsx
@@ -75,13 +75,12 @@ export function JoblineTeamAssignment({ bodyshop, jobline, disabled, jobId, inse
             onSelect={handleChange}
             onBlur={handleSave}
             onClear={() => handleChange(null)}
-          >
-            {Object.values(bodyshop.employee_teams).map((s, idx) => (
-              <Select.Option key={idx} value={s.id}>
-                {s.name}
-              </Select.Option>
-            ))}
-          </Select>
+            options={Object.values(bodyshop.employee_teams).map((s) => ({
+              key: s.id,
+              value: s.id,
+              label: s.name
+            }))}
+          />
         </LoadingSpinner>
       </div>
     );
diff --git a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx
index 05362b55e..17f626c0d 100644
--- a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx
+++ b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx
@@ -67,22 +67,22 @@ export function JobLinesUpsertModalComponent({ bodyshop, open, jobLine, handleCa
         </LayoutFormRow>
         <LayoutFormRow grow>
           <Form.Item label={t("joblines.fields.mod_lbr_ty")} name="mod_lbr_ty">
-            <Select allowClear>
-              <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
-              <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
-              <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
-              <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
-              <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
-              <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
-              <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
-              <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
-              <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
-              <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
-              <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
-              <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
-              <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
-              <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
-            </Select>
+            <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.op_code_desc")} name="op_code_desc">
             <Input />
@@ -128,17 +128,17 @@ export function JobLinesUpsertModalComponent({ bodyshop, open, jobLine, handleCa
         </LayoutFormRow>
         <LayoutFormRow>
           <Form.Item label={t("joblines.fields.part_type")} name="part_type">
-            <Select allowClear>
-              <Select.Option value="PAA">{t("joblines.fields.part_types.PAA")}</Select.Option>
-              <Select.Option value="PAC">{t("joblines.fields.part_types.PAC")}</Select.Option>
-              <Select.Option value="PAE">{t("joblines.fields.part_types.PAE")}</Select.Option>
-              <Select.Option value="PAL">{t("joblines.fields.part_types.PAL")}</Select.Option>
-              <Select.Option value="PAM">{t("joblines.fields.part_types.PAM")}</Select.Option>
-              <Select.Option value="PAN">{t("joblines.fields.part_types.PAN")}</Select.Option>
-              <Select.Option value="PAO">{t("joblines.fields.part_types.PAO")}</Select.Option>
-              <Select.Option value="PAR">{t("joblines.fields.part_types.PAR")}</Select.Option>
-              <Select.Option value="PAS">{t("joblines.fields.part_types.PAS")}</Select.Option>
-            </Select>
+            <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")} name="oem_partno">
             <Input />
diff --git a/client/src/components/job-search-select/job-search-select.component.jsx b/client/src/components/job-search-select/job-search-select.component.jsx
index 62d1f60f3..7fa9b3c6c 100644
--- a/client/src/components/job-search-select/job-search-select.component.jsx
+++ b/client/src/components/job-search-select/job-search-select.component.jsx
@@ -8,8 +8,6 @@ import { SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_JOBS_FOR_AUTOCOMPLETE } from
 import AlertComponent from "../alert/alert.component";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 
-const { Option } = Select;
-
 const JobSearchSelect = ({
   disabled,
   convertedOnly = false,
@@ -87,24 +85,24 @@ const JobSearchSelect = ({
         style={{ width: "100%" }}
         suffixIcon={(loading || idLoading) && <Spin />} // matches OLD spinner semantics
         notFoundContent={loading ? <LoadingOutlined /> : null} // matches OLD (loading only)
-      >
-        {theOptions
-          ? theOptions.map((o) => (
-              <Option key={o.id} value={o.id} status={o.status}>
-                <Space align="center">
-                  <span>
-                    {`${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${o.ro_number || t("general.labels.na")} | ${OwnerNameDisplayFunction(
-                      o
-                    )} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${o.v_model_desc || ""}`}
-                  </span>
-                  <Tag>
-                    <strong>{o.status}</strong>
-                  </Tag>
-                </Space>
-              </Option>
-            ))
-          : null}
-      </Select>
+        options={theOptions?.map((o) => ({
+          key: o.id,
+          value: o.id,
+          status: o.status,
+          label: (
+            <Space align="center">
+              <span>
+                {`${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${o.ro_number || t("general.labels.na")} | ${OwnerNameDisplayFunction(
+                  o
+                )} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${o.v_model_desc || ""}`}
+              </span>
+              <Tag>
+                <strong>{o.status}</strong>
+              </Tag>
+            </Space>
+          )
+        }))}
+      />
 
       {error ? <AlertComponent title={error.message} type="error" /> : null}
       {idError ? <AlertComponent title={idError.message} type="error" /> : null}
diff --git a/client/src/components/jobs-admin-class/jobs-admin-class.component.jsx b/client/src/components/jobs-admin-class/jobs-admin-class.component.jsx
index a89547f8f..537995bbc 100644
--- a/client/src/components/jobs-admin-class/jobs-admin-class.component.jsx
+++ b/client/src/components/jobs-admin-class/jobs-admin-class.component.jsx
@@ -59,13 +59,12 @@ export function JobsAdminClass({ bodyshop, job }) {
             }
           ]}
         >
-          <Select>
-            {bodyshop.md_classes.map((s) => (
-              <Select.Option key={s} value={s}>
-                {s}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select
+            options={bodyshop.md_classes.map((s) => ({
+              value: s,
+              label: s
+            }))}
+          />
         </Form.Item>
       </Form>
 
diff --git a/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx b/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
index e6bdc5321..f7f5cb988 100644
--- a/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
+++ b/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
@@ -141,13 +141,11 @@ export function JobsCloseLines({ bodyshop, job, jobRO }) {
                               option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                           }}
                           disabled={jobRO}
-                        >
-                          {bodyshop.md_responsibility_centers.profits.map((p) => (
-                            <Select.Option key={p.name} value={p.name}>
-                              {p.name}
-                            </Select.Option>
-                          ))}
-                        </Select>
+                          options={bodyshop.md_responsibility_centers.profits.map((p) => ({
+                            value: p.name,
+                            label: p.name
+                          }))}
+                        />
                       </Form.Item>
                     </td>
                     <td>
@@ -171,13 +169,11 @@ export function JobsCloseLines({ bodyshop, job, jobRO }) {
                               option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                           }}
                           disabled={jobRO}
-                        >
-                          {bodyshop.md_responsibility_centers.profits.map((p) => (
-                            <Select.Option key={p.name} value={p.name}>
-                              {p.name}
-                            </Select.Option>
-                          ))}
-                        </Select>
+                          options={bodyshop.md_responsibility_centers.profits.map((p) => ({
+                            value: p.name,
+                            label: p.name
+                          }))}
+                        />
                       </Form.Item>
                     </td>
                   </tr>
diff --git a/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
index bd3ee36ee..5f97f2e3a 100644
--- a/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
+++ b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
@@ -108,13 +108,13 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
             }
           ]}
         >
-          <Select showSearch>
-            {bodyshop.md_ins_cos.map((s, i) => (
-              <Select.Option key={i} value={s.name}>
-                {s.name}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select
+            showSearch
+            options={bodyshop.md_ins_cos.map((s) => ({
+              value: s.name,
+              label: s.name
+            }))}
+          />
         </Form.Item>
         {bodyshop.enforce_class && (
           <Form.Item
@@ -127,13 +127,12 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
               }
             ]}
           >
-            <Select>
-              {bodyshop.md_classes.map((s) => (
-                <Select.Option key={s} value={s}>
-                  {s}
-                </Select.Option>
-              ))}
-            </Select>
+            <Select
+              options={bodyshop.md_classes.map((s) => ({
+                value: s,
+                label: s
+              }))}
+            />
           </Form.Item>
         )}
         {bodyshop.enforce_referral && (
@@ -148,13 +147,12 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
                 }
               ]}
             >
-              <Select>
-                {bodyshop.md_referral_sources.map((s) => (
-                  <Select.Option key={s} value={s}>
-                    {s}
-                  </Select.Option>
-                ))}
-              </Select>
+              <Select
+                options={bodyshop.md_referral_sources.map((s) => ({
+                  value: s,
+                  label: s
+                }))}
+              />
             </Form.Item>
             <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
               <Input />
@@ -179,19 +177,16 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
           >
             <Select
               showSearch={{
-                optionFilterProp: "children",
-                filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                filterOption: (input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }}
               style={{ width: 200 }}
-            >
-              {bodyshop.employees
+              options={bodyshop.employees
                 .filter((emp) => emp.active)
-                .map((emp) => (
-                  <Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}>
-                    {`${emp.first_name} ${emp.last_name}`}
-                  </Select.Option>
-                ))}
-            </Select>
+                .map((emp) => ({
+                  value: emp.id,
+                  label: `${emp.first_name} ${emp.last_name}`
+                }))}
+            />
           </Form.Item>
         )}
         {bodyshop.enforce_conversion_category && (
@@ -205,13 +200,13 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
               }
             ]}
           >
-            <Select allowClear>
-              {bodyshop.md_categories.map((s) => (
-                <Select.Option key={s} value={s}>
-                  {s}
-                </Select.Option>
-              ))}
-            </Select>
+            <Select
+              allowClear
+              options={bodyshop.md_categories.map((s) => ({
+                value: s,
+                label: s
+              }))}
+            />
           </Form.Item>
         )}
         {bodyshop.region_config.toLowerCase().startsWith("ca") && (
diff --git a/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx b/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
index ccd887d8f..73c59b0a9 100644
--- a/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
+++ b/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
@@ -60,13 +60,13 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
                   <Input />
                 </Form.Item>
                 <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
-                  <Select onChange={handleInsCoChange}>
-                    {bodyshop.md_ins_cos.map((s) => (
-                      <Select.Option key={s.name} value={s.name}>
-                        {s.name}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select
+                    onChange={handleInsCoChange}
+                    options={bodyshop.md_ins_cos.map((s) => ({
+                      value: s.name,
+                      label: s.name
+                    }))}
+                  />
                 </Form.Item>
                 <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
                   <Input />
@@ -192,13 +192,12 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
                   <Input />
                 </Form.Item>
                 <Form.Item label={t("jobs.fields.referralsource")} name="referral_source">
-                  <Select>
-                    {bodyshop.md_referral_sources.map((s) => (
-                      <Select.Option key={s} value={s}>
-                        {s}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select
+                    options={bodyshop.md_referral_sources.map((s) => ({
+                      value: s,
+                      label: s
+                    }))}
+                  />
                 </Form.Item>
                 <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
                   <Input />
@@ -221,10 +220,13 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
                     <CurrencyInput min={0} />
                   </Form.Item>
                   <Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
-                    <Select allowClear>
-                      <Select.Option value="W">{t("jobs.labels.deductible.waived")}</Select.Option>
-                      <Select.Option value="Y">{t("jobs.labels.deductible.stands")}</Select.Option>
-                    </Select>
+                    <Select
+                      allowClear
+                      options={[
+                        { value: "W", label: t("jobs.labels.deductible.waived") },
+                        { value: "Y", label: t("jobs.labels.deductible.stands") }
+                      ]}
+                    />
                   </Form.Item>
                   <Form.Item label={t("jobs.fields.depreciation_taxes")} name="depreciation_taxes">
                     <CurrencyInput />
diff --git a/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx b/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
index 172400edd..b486ad13b 100644
--- a/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
+++ b/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
@@ -43,20 +43,19 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
           <Input disabled={jobRO} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
-          <Select disabled={jobRO}>
-            <Select.Option value="W">{t("jobs.labels.deductible.waived")}</Select.Option>
-            <Select.Option value="Y">{t("jobs.labels.deductible.stands")}</Select.Option>
-          </Select>
+          <Select disabled={jobRO} options={[
+            { value: "W", label: t("jobs.labels.deductible.waived") },
+            { value: "Y", label: t("jobs.labels.deductible.stands") }
+          ]} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
           <CurrencyInput disabled={jobRO} min={0} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ded_note")} name="ded_note">
-          <Select disabled={jobRO}>
-            {bodyshop.md_ded_notes.map((n, index) => (
-              <Select.Option key={index}>{n}</Select.Option>
-            ))}
-          </Select>
+          <Select disabled={jobRO} options={bodyshop.md_ded_notes.map((n) => ({
+            value: n,
+            label: n
+          }))} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
           <Input disabled={jobRO} />
@@ -66,13 +65,10 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
         </Form.Item>
 
         <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
-          <Select disabled={jobRO} onChange={handleInsCoChange}>
-            {bodyshop.md_ins_cos.map((s) => (
-              <Select.Option key={s.name} value={s.name}>
-                {s.name}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select disabled={jobRO} onChange={handleInsCoChange} options={bodyshop.md_ins_cos.map((s) => ({
+            value: s.name,
+            label: s.name
+          }))} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
           <Input disabled={jobRO} />
@@ -123,25 +119,19 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
             }
           ]}
         >
-          <Select disabled={jobRO} allowClear>
-            {bodyshop.md_referral_sources.map((s) => (
-              <Select.Option key={s} value={s}>
-                {s}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select disabled={jobRO} allowClear options={bodyshop.md_referral_sources.map((s) => ({
+            value: s,
+            label: s
+          }))} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
           <Input disabled={jobRO} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.alt_transport")} name="alt_transport">
-          <Select disabled={jobRO} allowClear>
-            {bodyshop.appt_alt_transport.map((s) => (
-              <Select.Option key={s} value={s}>
-                {s}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select disabled={jobRO} allowClear options={bodyshop.appt_alt_transport.map((s) => ({
+            value: s,
+            label: s
+          }))} />
         </Form.Item>
       </FormRow>
       <Row gutter={[16, 16]}>
@@ -243,13 +233,10 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
       </FormRow>
       <FormRow header={t("jobs.forms.other")}>
         <Form.Item label={t("jobs.fields.category")} name="category">
-          <Select disabled={jobRO} allowClear>
-            {bodyshop.md_categories.map((s) => (
-              <Select.Option key={s} value={s}>
-                {s}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select disabled={jobRO} allowClear options={bodyshop.md_categories.map((s) => ({
+            value: s,
+            label: s
+          }))} />
         </Form.Item>
 
         <Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
index bdb08ef01..2b28f3b9c 100644
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -714,13 +714,12 @@ export function JobsDetailHeaderActions({
             <FormDateTimePickerComponent />
           </Form.Item>
           <Form.Item label={t("appointments.fields.color")} name="color">
-            <Select>
-              {bodyshop.appt_colors.map((col, idx) => (
-                <Select.Option key={idx} value={col.color.hex}>
-                  {col.label}
-                </Select.Option>
-              ))}
-            </Select>
+            <Select
+              options={bodyshop.appt_colors.map((col) => ({
+                value: col.color.hex,
+                label: col.label
+              }))}
+            />
           </Form.Item>
 
           <Space wrap>
diff --git a/client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx b/client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx
index 0bf490db0..eb2e380c3 100644
--- a/client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx
+++ b/client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx
@@ -94,22 +94,26 @@ export function LaborAllocationsAdjustmentEdit({
               }
             ]}
           >
-            <Select allowClear disabled={!!mod_lbr_ty}>
-              <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
-              <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
-              <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
-              <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
-              <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
-              <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
-              <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
-              <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
-              <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
-              <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
-              <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
-              <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
-              <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
-              <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
-            </Select>
+            <Select
+              allowClear
+              disabled={!!mod_lbr_ty}
+              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("jobs.fields.adjustmenthours")}
diff --git a/client/src/components/owner-search-select/owner-search-select.component.jsx b/client/src/components/owner-search-select/owner-search-select.component.jsx
index bc5d7b105..bd5ed0594 100644
--- a/client/src/components/owner-search-select/owner-search-select.component.jsx
+++ b/client/src/components/owner-search-select/owner-search-select.component.jsx
@@ -7,8 +7,6 @@ import { SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_OWNERS_FOR_AUTOCOMPLETE }
 import AlertComponent from "../alert/alert.component";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 
-const { Option } = Select;
-
 const OwnerSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
   const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_OWNERS_FOR_AUTOCOMPLETE);
 
@@ -71,15 +69,12 @@ const OwnerSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
         onSelect={handleSelect}
         notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
         onBlur={onBlur}
-      >
-        {theOptions
-          ? theOptions.map((o) => (
-              <Option key={o.id} value={o.id}>
-                {`${OwnerNameDisplayFunction(o)} | ${o.ownr_addr1 || ""} `}
-              </Option>
-            ))
-          : null}
-      </Select>
+        options={theOptions?.map((o) => ({
+          key: o.id,
+          value: o.id,
+          label: `${OwnerNameDisplayFunction(o)} | ${o.ownr_addr1 || ""} `
+        }))}
+      />
       {idLoading || loading ? <LoadingOutlined /> : null}
       {error ? <AlertComponent title={error.message} type="error" /> : null}
       {idError ? <AlertComponent title={idError.message} type="error" /> : null}
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 c59e2cbd3..bfb0cb1df 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
@@ -158,19 +158,21 @@ export function PartsOrderModalComponent({
                         key={`${index}part_type`}
                         name={[field.name, "part_type"]}
                       >
-                        <Select disabled={!(sendType === "oec" && OEConnection_PriceChange.treatment === "on")}>
-                          <Select.Option value="PAA">{t("joblines.fields.part_types.PAA")}</Select.Option>
-                          <Select.Option value="PAC">{t("joblines.fields.part_types.PAC")}</Select.Option>
-
-                          <Select.Option value="PAL">{t("joblines.fields.part_types.PAL")}</Select.Option>
-                          <Select.Option value="PAG">{t("joblines.fields.part_types.PAG")}</Select.Option>
-                          <Select.Option value="PAM">{t("joblines.fields.part_types.PAM")}</Select.Option>
-                          <Select.Option value="PAP">{t("joblines.fields.part_types.PAP")}</Select.Option>
-                          <Select.Option value="PAN">{t("joblines.fields.part_types.PAN")}</Select.Option>
-                          <Select.Option value="PAO">{t("joblines.fields.part_types.PAO")}</Select.Option>
-                          <Select.Option value="PAR">{t("joblines.fields.part_types.PAR")}</Select.Option>
-                          <Select.Option value="PAS">{t("joblines.fields.part_types.PAS")}</Select.Option>
-                        </Select>
+                        <Select
+                          disabled={!(sendType === "oec" && OEConnection_PriceChange.treatment === "on")}
+                          options={[
+                            { value: "PAA", label: t("joblines.fields.part_types.PAA") },
+                            { value: "PAC", label: t("joblines.fields.part_types.PAC") },
+                            { value: "PAL", label: t("joblines.fields.part_types.PAL") },
+                            { value: "PAG", label: t("joblines.fields.part_types.PAG") },
+                            { value: "PAM", label: t("joblines.fields.part_types.PAM") },
+                            { value: "PAP", label: t("joblines.fields.part_types.PAP") },
+                            { 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("parts_orders.fields.oem_partno")}
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 3133fbe93..723ccb9db 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
@@ -29,13 +29,12 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
                 })
               });
             }}
-          >
-            {bodyshop.md_parts_locations.map((loc, idx) => (
-              <Select.Option key={idx} value={loc}>
-                {loc}
-              </Select.Option>
-            ))}
-          </Select>
+            options={bodyshop.md_parts_locations.map((loc, idx) => ({
+              key: idx,
+              value: loc,
+              label: loc
+            }))}
+          />
         </Form.Item>
       </LayoutFormRow>
       <Typography.Title level={4}>{t("parts_orders.labels.inthisorder")}</Typography.Title>
@@ -85,13 +84,14 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
                         key={`${index}location`}
                         name={[field.name, "location"]}
                       >
-                        <Select style={{ width: "10rem" }}>
-                          {bodyshop.md_parts_locations.map((loc, idx) => (
-                            <Select.Option key={idx} value={loc}>
-                              {loc}
-                            </Select.Option>
-                          ))}
-                        </Select>
+                        <Select 
+                          style={{ width: "10rem" }}
+                          options={bodyshop.md_parts_locations.map((loc, idx) => ({
+                            key: idx,
+                            value: loc,
+                            label: loc
+                          }))}
+                        />
                       </Form.Item>
                       <Form.Item
                         label={t("parts_orders.fields.quantity")}
diff --git a/client/src/components/parts-shop-info/parts-shop-info-email-presets.component.jsx b/client/src/components/parts-shop-info/parts-shop-info-email-presets.component.jsx
index 4b63668b1..7620c7eff 100644
--- a/client/src/components/parts-shop-info/parts-shop-info-email-presets.component.jsx
+++ b/client/src/components/parts-shop-info/parts-shop-info-email-presets.component.jsx
@@ -2,8 +2,6 @@ import { Button, Card, Divider, Form, Input, Select, Space } from "antd";
 import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 
-const { Option } = Select;
-
 export default function PartsShopInfoEmailPresets() {
   const { t } = useTranslation();
 
@@ -26,13 +24,7 @@ export default function PartsShopInfoEmailPresets() {
                   label={t("bodyshop.labels.email_type")}
                   rules={[{ required: true, message: t("bodyshop.errors.email_type_required") }]}
                 >
-                  <Select placeholder={t("bodyshop.placeholders.select_email_type")}>
-                    {emailTypes.map((type) => (
-                      <Option key={type.value} value={type.value}>
-                        {type.label}
-                      </Option>
-                    ))}
-                  </Select>
+                  <Select placeholder={t("bodyshop.placeholders.select_email_type")} options={emailTypes} />
                 </Form.Item>
                 <Form.Item
                   {...restField}
diff --git a/client/src/components/payment-form/payment-form.component.jsx b/client/src/components/payment-form/payment-form.component.jsx
index 851ff6774..a11c3e617 100644
--- a/client/src/components/payment-form/payment-form.component.jsx
+++ b/client/src/components/payment-form/payment-form.component.jsx
@@ -91,20 +91,25 @@ export function PaymentFormComponent({ form, bodyshop, disabled }) {
             }
           ]}
         >
-          <Select disabled={disabled}>
-            <Select.Option value={t("payments.labels.customer")}>{t("payments.labels.customer")}</Select.Option>
-            {Qb_Multi_Ar.treatment === "on" ? (
-              <Select.OptGroup label={t("payments.labels.external")}>
-                {bodyshop.md_ins_cos.map((i, idx) => (
-                  <Select.Option key={idx} value={i.name}>
-                    {i.name}
-                  </Select.Option>
-                ))}
-              </Select.OptGroup>
-            ) : (
-              <Select.Option value={t("payments.labels.insurance")}>{t("payments.labels.insurance")}</Select.Option>
-            )}
-          </Select>
+          <Select disabled={disabled}
+            options={Qb_Multi_Ar.treatment === "on" 
+              ? [
+                  { value: t("payments.labels.customer"), label: t("payments.labels.customer") },
+                  {
+                    label: t("payments.labels.external"),
+                    options: bodyshop.md_ins_cos.map((i, idx) => ({
+                      key: idx,
+                      value: i.name,
+                      label: i.name
+                    }))
+                  }
+                ]
+              : [
+                  { value: t("payments.labels.customer"), label: t("payments.labels.customer") },
+                  { value: t("payments.labels.insurance"), label: t("payments.labels.insurance") }
+                ]
+            }
+          />
         </Form.Item>
 
         <Form.Item
@@ -117,13 +122,13 @@ export function PaymentFormComponent({ form, bodyshop, disabled }) {
             }
           ]}
         >
-          <Select disabled={disabled}>
-            {bodyshop.md_payment_types.map((v, idx) => (
-              <Select.Option key={idx} value={v}>
-                {v}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select disabled={disabled}
+            options={bodyshop.md_payment_types.map((v, idx) => ({
+              key: idx,
+              value: v,
+              label: v
+            }))}
+          />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>
diff --git a/client/src/components/production-list-columns/production-list-columns.empassignment.component.jsx b/client/src/components/production-list-columns/production-list-columns.empassignment.component.jsx
index d96d6f56d..c55db2942 100644
--- a/client/src/components/production-list-columns/production-list-columns.empassignment.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.empassignment.component.jsx
@@ -94,9 +94,17 @@ export function ProductionListEmpAssignment({ insertAuditTrail, bodyshop, record
 
   const [visibility, setVisibility] = useState(false);
   const onChange = (e, option) => {
-    setAssignment({ ...assignment, employeeid: e, name: option.name });
+    setAssignment({ ...assignment, employeeid: e, name: option.label });
   };
 
+  const employeeOptions = bodyshop.employees
+    .filter((emp) => emp.active)
+    .map((emp) => ({
+      value: emp.id,
+      label: `${emp.first_name} ${emp.last_name}`,
+      name: `${emp.first_name} ${emp.last_name}`
+    }));
+
   const popContent = (
     <Row gutter={[16, 16]}>
       <Col span={24}>
@@ -108,15 +116,8 @@ export function ProductionListEmpAssignment({ insertAuditTrail, bodyshop, record
           }}
           style={{ width: 200 }}
           onChange={onChange}
-        >
-          {bodyshop.employees
-            .filter((emp) => emp.active)
-            .map((emp) => (
-              <Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}>
-                {`${emp.first_name} ${emp.last_name}`}
-              </Select.Option>
-            ))}
-        </Select>
+          options={employeeOptions}
+        />
       </Col>
       <Col span={24}>
         <Space wrap>
diff --git a/client/src/components/production-list-table/production-list-config-manager.component.jsx b/client/src/components/production-list-table/production-list-config-manager.component.jsx
index 23dcbdc0f..75e15b75d 100644
--- a/client/src/components/production-list-table/production-list-config-manager.component.jsx
+++ b/client/src/components/production-list-table/production-list-config-manager.component.jsx
@@ -453,10 +453,10 @@ export function ProductionListConfigManager({
           }}
           onSelect={handleSelect}
           placeholder={t("production.labels.selectview")}
-          optionLabelProp="label"
           popupMatchSelectWidth={false}
           value={activeView}
           disabled={open || isAddingNewProfile} // Disable the Select box when the popover is open or adding a new profile
+          optionLabelProp="label"
         >
           {bodyshop?.production_config &&
             bodyshop.production_config
diff --git a/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx b/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
index 18890e507..8d85eacc3 100644
--- a/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
@@ -158,20 +158,28 @@ export function ScheduleJobModalComponent({
         </LayoutFormRow>
         <LayoutFormRow grow>
           <Form.Item name="color" label={t("appointments.fields.color")}>
-            <Select allowClear>
-              {bodyshop.appt_colors &&
-                bodyshop.appt_colors.map((color) => (
-                  <Select.Option style={{ color: color.color.hex }} key={color.color.hex} value={color.color.hex}>
-                    {color.label}
-                  </Select.Option>
-                ))}
-            </Select>
+            <Select
+              allowClear
+              options={
+                bodyshop.appt_colors &&
+                bodyshop.appt_colors.map((color) => ({
+                  value: color.color.hex,
+                  label: color.label
+                }))
+              }
+            />
           </Form.Item>
           <Form.Item name={"alt_transport"} label={t("jobs.fields.alt_transport")}>
-            <Select allowClear>
-              {bodyshop.appt_alt_transport &&
-                bodyshop.appt_alt_transport.map((alt) => <Select.Option key={alt}>{alt}</Select.Option>)}
-            </Select>
+            <Select
+              allowClear
+              options={
+                bodyshop.appt_alt_transport &&
+                bodyshop.appt_alt_transport.map((alt) => ({
+                  value: alt,
+                  label: alt
+                }))
+              }
+            />
           </Form.Item>
           <Form.Item name={"note"} label={t("appointments.fields.note")}>
             <Input />
diff --git a/client/src/components/schedule-manual-event/schedule-manual-event.component.jsx b/client/src/components/schedule-manual-event/schedule-manual-event.component.jsx
index 3294126dc..b8b45ab24 100644
--- a/client/src/components/schedule-manual-event/schedule-manual-event.component.jsx
+++ b/client/src/components/schedule-manual-event/schedule-manual-event.component.jsx
@@ -120,13 +120,12 @@ export function ScheduleManualEvent({ bodyshop, event }) {
             <FormDateTimePickerComponent />
           </Form.Item>
           <Form.Item label={t("appointments.fields.color")} name="color">
-            <Select>
-              {bodyshop.appt_colors.map((col, idx) => (
-                <Select.Option key={idx} value={col.color.hex}>
-                  {col.label}
-                </Select.Option>
-              ))}
-            </Select>
+            <Select
+              options={bodyshop.appt_colors.map((col) => ({
+                value: col.color.hex,
+                label: col.label
+              }))}
+            />
           </Form.Item>
 
           <Space wrap>
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 804081071..9ed09fbd9 100644
--- a/client/src/components/shop-employees/shop-employees-form.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-form.component.jsx
@@ -325,22 +325,20 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                           }
                         ]}
                       >
-                        <Select>
-                          <Select.Option key={"shift"} value="timetickets.labels.shift">
-                            {t("timetickets.labels.shift")}
-                          </Select.Option>
-
-                          {bodyshop.cdk_dealerid ||
-                          bodyshop.pbs_serialnumber ||
-                          bodyshop.rr_dealerid ||
-                          Enhanced_Payroll.treatment === "on"
-                            ? CiecaSelect(false, true)
-                            : bodyshop.md_responsibility_centers.costs.map((c) => (
-                                <Select.Option key={c.name} value={c.name}>
-                                  {c.name}
-                                </Select.Option>
-                              ))}
-                        </Select>
+                        <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")}
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 3eddfbfaa..00410f0f9 100644
--- a/client/src/components/shop-info/shop-info.general.component.jsx
+++ b/client/src/components/shop-info/shop-info.general.component.jsx
@@ -1039,22 +1039,25 @@ export function ShopInfoGeneral({ form }) {
                         key={`${index}mod_lbr_ty`}
                         name={[field.name, "mod_lbr_ty"]}
                       >
-                        <Select allowClear>
-                          <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
-                          <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
-                          <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
-                          <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
-                          <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
-                          <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
-                          <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
-                          <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
-                          <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
-                          <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
-                          <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
-                          <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
-                          <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
-                          <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
-                        </Select>
+                        <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")}
@@ -1068,17 +1071,20 @@ export function ShopInfoGeneral({ form }) {
                         key={`${index}part_type`}
                         name={[field.name, "part_type"]}
                       >
-                        <Select allowClear>
-                          <Select.Option value="PAA">{t("joblines.fields.part_types.PAA")}</Select.Option>
-                          <Select.Option value="PAC">{t("joblines.fields.part_types.PAC")}</Select.Option>
-                          <Select.Option value="PAE">{t("joblines.fields.part_types.PAE")}</Select.Option>
-                          <Select.Option value="PAL">{t("joblines.fields.part_types.PAL")}</Select.Option>
-                          <Select.Option value="PAM">{t("joblines.fields.part_types.PAM")}</Select.Option>
-                          <Select.Option value="PAN">{t("joblines.fields.part_types.PAN")}</Select.Option>
-                          <Select.Option value="PAO">{t("joblines.fields.part_types.PAO")}</Select.Option>
-                          <Select.Option value="PAR">{t("joblines.fields.part_types.PAR")}</Select.Option>
-                          <Select.Option value="PAS">{t("joblines.fields.part_types.PAS")}</Select.Option>
-                        </Select>
+                        <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")}
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 e71738af8..174a6ddf0 100644
--- a/client/src/components/shop-info/shop-info.intake.component.jsx
+++ b/client/src/components/shop-info/shop-info.intake.component.jsx
@@ -51,13 +51,7 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                           }
                         ]}
                       >
-                        <Select>
-                          {Object.keys(ConfigFormTypes).map((i) => (
-                            <Select.Option key={i} value={i}>
-                              {i}
-                            </Select.Option>
-                          ))}
-                        </Select>
+                        <Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
                       </Form.Item>
                       <Form.Item
                         label={t("jobs.fields.intake.label")}
@@ -156,13 +150,13 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
             }
           ]}
         >
-          <Select mode="multiple">
-            {Object.keys(TemplateListGenerated).map((i) => (
-              <Select.Option key={TemplateListGenerated[i].key} value={TemplateListGenerated[i].key}>
-                {TemplateListGenerated[i].title}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select
+            mode="multiple"
+            options={Object.keys(TemplateListGenerated).map((i) => ({
+              value: TemplateListGenerated[i].key,
+              label: TemplateListGenerated[i].title
+            }))}
+          />
         </Form.Item>
         <Form.Item
           name={["intakechecklist", "next_contact_hours"]}
@@ -205,13 +199,7 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                           }
                         ]}
                       >
-                        <Select>
-                          {Object.keys(ConfigFormTypes).map((i) => (
-                            <Select.Option key={i} value={i}>
-                              {i}
-                            </Select.Option>
-                          ))}
-                        </Select>
+                        <Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
                       </Form.Item>
 
                       <Form.Item
@@ -310,13 +298,13 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
             }
           ]}
         >
-          <Select mode="multiple">
-            {Object.keys(TemplateListGenerated).map((i) => (
-              <Select.Option key={TemplateListGenerated[i].key} value={TemplateListGenerated[i].key}>
-                {TemplateListGenerated[i].title}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select
+            mode="multiple"
+            options={Object.keys(TemplateListGenerated).map((i) => ({
+              value: TemplateListGenerated[i].key,
+              label: TemplateListGenerated[i].title
+            }))}
+          />
         </Form.Item>
         <Form.Item
           name={["deliverchecklist", "actual_delivery"]}
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 f7f7c9a4a..87013bdd2 100644
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
@@ -66,11 +66,11 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
   };
 
   const ReceivableCustomFieldSelect = (
-    <Select allowClear>
-      <Select.Option value="v_vin">VIN</Select.Option>
-      <Select.Option value="clm_no">Claim No.</Select.Option>
-      <Select.Option value="ded_amt">Deductible Amount</Select.Option>
-    </Select>
+    <Select allowClear options={[
+      { value: "v_vin", label: "VIN" },
+      { value: "clm_no", label: "Claim No." },
+      { value: "ded_amt", label: "Deductible Amount" }
+    ]} />
   );
 
   return (
@@ -518,14 +518,12 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                   key={`${index}control_type`}
                                   name={[field.name, "control_type"]}
                                 >
-                                  <Select allowClear showSearch>
-                                    <Select.Option value="ro_number">{t("jobs.fields.ro_number")}</Select.Option>
-                                    <Select.Option value="clm_no">{t("jobs.fields.clm_no")}</Select.Option>
-                                    <Select.Option value="po_number">{t("jobs.fields.ponumber")}</Select.Option>
-                                    <Select.Option value="account_number">
-                                      {t("jobs.fields.dms.control_type.account_number")}
-                                    </Select.Option>
-                                  </Select>
+                                  <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
@@ -773,17 +771,11 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                   name={[field.name, "rr_item_type"]}
                                   rules={[{ required: true }]}
                                 >
-                                  <Select>
-                                    <Select.Option value="G">
-                                      {t("bodyshop.fields.responsibilitycenters.item_type_gog")}
-                                    </Select.Option>
-                                    <Select.Option value="P">
-                                      {t("bodyshop.fields.responsibilitycenters.item_type_paint")}
-                                    </Select.Option>
-                                    <Select.Option value="F">
-                                      {t("bodyshop.fields.responsibilitycenters.item_type_freight")}
-                                    </Select.Option>
-                                  </Select>
+                                  <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
@@ -792,14 +784,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                   name={[field.name, "rr_cust_txbl_flag"]}
                                   rules={[{ required: true }]}
                                 >
-                                  <Select>
-                                    <Select.Option value="T">
-                                      {t("bodyshop.fields.responsibilitycenters.taxable")}
-                                    </Select.Option>
-                                    <Select.Option value="N">
-                                      {t("bodyshop.fields.responsibilitycenters.nontaxable")}
-                                    </Select.Option>
-                                  </Select>
+                                  <Select options={[
+                                    { value: "T", label: t("bodyshop.fields.responsibilitycenters.taxable") },
+                                    { value: "N", label: t("bodyshop.fields.responsibilitycenters.nontaxable") }
+                                  ]} />
                                 </Form.Item>
                               </>
                             )}
@@ -878,13 +866,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-ats`}
                                     name={[field.name, "costs", "ATS"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.laa")}
@@ -902,13 +884,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAA`}
                                     name={[field.name, "costs", "LAA"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lab")}
@@ -926,13 +902,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAB`}
                                     name={[field.name, "costs", "LAB"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lad")}
@@ -950,13 +920,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAD`}
                                     name={[field.name, "costs", "LAD"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lae")}
@@ -974,13 +938,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAE`}
                                     name={[field.name, "costs", "LAE"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.laf")}
@@ -998,13 +956,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAF`}
                                     name={[field.name, "costs", "LAF"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lag")}
@@ -1022,13 +974,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAG`}
                                     name={[field.name, "costs", "LAG"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lam")}
@@ -1046,13 +992,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAM`}
                                     name={[field.name, "costs", "LAM"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lar")}
@@ -1070,13 +1010,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAR`}
                                     name={[field.name, "costs", "LAR"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.las")}
@@ -1094,13 +1028,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAS`}
                                     name={[field.name, "costs", "LAS"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lau")}
@@ -1118,13 +1046,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LAU`}
                                     name={[field.name, "costs", "LAU"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la1")}
@@ -1142,13 +1064,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LA1`}
                                     name={[field.name, "costs", "LA1"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la2")}
@@ -1166,13 +1082,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LA2`}
                                     name={[field.name, "costs", "LA2"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la3")}
@@ -1190,13 +1100,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LA3`}
                                     name={[field.name, "costs", "LA3"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la4")}
@@ -1214,13 +1118,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-LA4`}
                                     name={[field.name, "costs", "LA4"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.paa")}
@@ -1238,13 +1136,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAA`}
                                     name={[field.name, "costs", "PAA"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pac")}
@@ -1262,13 +1154,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAC`}
                                     name={[field.name, "costs", "PAC"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pag")}
@@ -1286,13 +1172,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAG`}
                                     name={[field.name, "costs", "PAG"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pal")}
@@ -1310,13 +1190,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAL`}
                                     name={[field.name, "costs", "PAL"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pam")}
@@ -1334,13 +1208,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAM`}
                                     name={[field.name, "costs", "PAM"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pan")}
@@ -1358,13 +1226,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAN`}
                                     name={[field.name, "costs", "PAN"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pao")}
@@ -1382,13 +1244,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAO`}
                                     name={[field.name, "costs", "PAO"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pap")}
@@ -1406,13 +1262,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAP`}
                                     name={[field.name, "costs", "PAP"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.par")}
@@ -1430,13 +1280,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAR`}
                                     name={[field.name, "costs", "PAR"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pas")}
@@ -1454,13 +1298,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PAS`}
                                     name={[field.name, "costs", "PAS"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pasl")}
@@ -1478,13 +1316,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-PASL`}
                                     name={[field.name, "costs", "PASL"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.tow")}
@@ -1502,13 +1334,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-TOW`}
                                     name={[field.name, "costs", "TOW"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.mapa")}
@@ -1526,13 +1352,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-MAPA`}
                                     name={[field.name, "costs", "MAPA"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.mash")}
@@ -1550,13 +1370,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}costs-MASH`}
                                     name={[field.name, "costs", "MASH"]}
                                   >
-                                    <Select showSearch>
-                                      {costOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                 </LayoutFormRow>
                                 <LayoutFormRow header={t("bodyshop.labels.dms.profitsmapping")} id="profitsmapping">
@@ -1576,13 +1390,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-ATS`}
                                     name={[field.name, "profits", "ATS"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.laa")}
@@ -1600,13 +1408,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAA`}
                                     name={[field.name, "profits", "LAA"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lab")}
@@ -1624,13 +1426,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAB`}
                                     name={[field.name, "profits", "LAB"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lad")}
@@ -1648,13 +1444,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAD`}
                                     name={[field.name, "profits", "LAD"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lae")}
@@ -1672,13 +1462,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAE`}
                                     name={[field.name, "profits", "LAE"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.laf")}
@@ -1696,13 +1480,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAF`}
                                     name={[field.name, "profits", "LAF"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lag")}
@@ -1720,13 +1498,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAG`}
                                     name={[field.name, "profits", "LAG"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lam")}
@@ -1744,13 +1516,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAM`}
                                     name={[field.name, "profits", "LAM"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lar")}
@@ -1768,13 +1534,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAR`}
                                     name={[field.name, "profits", "LAR"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.las")}
@@ -1792,13 +1552,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAS`}
                                     name={[field.name, "profits", "LAS"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.lau")}
@@ -1816,13 +1570,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LAU`}
                                     name={[field.name, "profits", "LAU"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la1")}
@@ -1840,13 +1588,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LA1`}
                                     name={[field.name, "profits", "LA1"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la2")}
@@ -1864,13 +1606,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LA2`}
                                     name={[field.name, "profits", "LA2"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la3")}
@@ -1888,13 +1624,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LA3`}
                                     name={[field.name, "profits", "LA3"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.la4")}
@@ -1912,13 +1642,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-LA4`}
                                     name={[field.name, "profits", "LA4"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.paa")}
@@ -1936,13 +1660,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAA`}
                                     name={[field.name, "profits", "PAA"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pac")}
@@ -1960,13 +1678,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAC`}
                                     name={[field.name, "profits", "PAC"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pag")}
@@ -1984,13 +1696,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAG`}
                                     name={[field.name, "profits", "PAG"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pal")}
@@ -2008,13 +1714,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAL`}
                                     name={[field.name, "profits", "PAL"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pam")}
@@ -2032,13 +1732,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAM`}
                                     name={[field.name, "profits", "PAM"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pan")}
@@ -2056,13 +1750,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAN`}
                                     name={[field.name, "profits", "PAN"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pao")}
@@ -2080,13 +1768,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAO`}
                                     name={[field.name, "profits", "PAO"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pap")}
@@ -2104,13 +1786,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAP`}
                                     name={[field.name, "profits", "PAP"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.par")}
@@ -2128,13 +1804,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAR`}
                                     name={[field.name, "profits", "PAR"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pas")}
@@ -2152,13 +1822,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PAS`}
                                     name={[field.name, "profits", "PAS"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.pasl")}
@@ -2176,13 +1840,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-PASL`}
                                     name={[field.name, "profits", "PASL"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.tow")}
@@ -2200,13 +1858,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-TOW`}
                                     name={[field.name, "profits", "TOW"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.mapa")}
@@ -2224,13 +1876,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-MAPA`}
                                     name={[field.name, "profits", "MAPA"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                   <Form.Item
                                     label={t("bodyshop.fields.responsibilitycenters.mash")}
@@ -2248,13 +1894,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                     key={`${index}profits-MASH`}
                                     name={[field.name, "profits", "MASH"]}
                                   >
-                                    <Select showSearch>
-                                      {profitOptions.map((item, idx) => (
-                                        <Select.Option key={idx} value={item}>
-                                          {item}
-                                        </Select.Option>
-                                      ))}
-                                    </Select>
+                                    <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                                   </Form.Item>
                                 </LayoutFormRow>
                               </div>
@@ -2294,13 +1934,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "ATS"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.laa")}
@@ -2317,13 +1951,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LAA"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lab")}
@@ -2340,13 +1968,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LAB"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lad")}
@@ -2363,13 +1985,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LAD"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lae")}
@@ -2386,13 +2002,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LAE"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.laf")}
@@ -2409,13 +2019,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LAF"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lag")}
@@ -2432,13 +2036,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LAG"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lam")}
@@ -2455,13 +2053,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LAM"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lar")}
@@ -2478,13 +2070,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LAR"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.las")}
@@ -2501,13 +2087,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LAS"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lau")}
@@ -2524,13 +2104,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LAU"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.la1")}
@@ -2547,13 +2121,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LA1"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.la2")}
@@ -2570,13 +2138,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LA2"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.la3")}
@@ -2593,13 +2155,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LA3"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.la4")}
@@ -2616,13 +2172,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "LA4"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.paa")}
@@ -2639,13 +2189,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "PAA"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pac")}
@@ -2662,13 +2206,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "PAC"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pag")}
@@ -2685,13 +2223,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "PAG"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pal")}
@@ -2708,13 +2240,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "PAL"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pam")}
@@ -2731,13 +2257,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "PAM"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pan")}
@@ -2754,13 +2274,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "PAN"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pao")}
@@ -2777,13 +2291,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "PAO"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pap")}
@@ -2800,13 +2308,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "PAP"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.par")}
@@ -2823,13 +2325,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "PAR"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pas")}
@@ -2846,13 +2342,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "PAS"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pasl")}
@@ -2869,13 +2359,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "PASL"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.tow")}
@@ -2892,13 +2376,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "TOW"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.mapa")}
@@ -2915,13 +2393,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "MAPA"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.mash")}
@@ -2938,13 +2410,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "costs", "MASH"]}
                 >
-                  <Select showSearch>
-                    {costOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={costOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("bodyshop.labels.defaultprofitsmapping")}>
@@ -2963,13 +2429,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "ATS"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.laa")}
@@ -2986,13 +2446,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LAA"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lab")}
@@ -3009,13 +2463,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LAB"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lad")}
@@ -3032,13 +2480,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LAD"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lae")}
@@ -3055,13 +2497,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LAE"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.laf")}
@@ -3078,13 +2514,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LAF"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lag")}
@@ -3101,13 +2531,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LAG"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lam")}
@@ -3124,13 +2548,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LAM"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lar")}
@@ -3147,13 +2565,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LAR"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.las")}
@@ -3170,13 +2582,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LAS"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.lau")}
@@ -3193,13 +2599,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LAU"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.la1")}
@@ -3216,13 +2616,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LA1"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.la2")}
@@ -3239,13 +2633,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LA2"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.la3")}
@@ -3262,13 +2650,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LA3"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.la4")}
@@ -3285,13 +2667,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "LA4"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.paa")}
@@ -3308,13 +2684,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "PAA"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pac")}
@@ -3331,13 +2701,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "PAC"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pag")}
@@ -3354,13 +2718,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "PAG"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pal")}
@@ -3377,13 +2735,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "PAL"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pam")}
@@ -3400,13 +2752,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "PAM"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pan")}
@@ -3423,13 +2769,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "PAN"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pao")}
@@ -3446,13 +2786,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "PAO"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pap")}
@@ -3469,13 +2803,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "PAP"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.par")}
@@ -3492,13 +2820,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "PAR"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pas")}
@@ -3515,13 +2837,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "PAS"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.pasl")}
@@ -3538,13 +2854,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "PASL"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.tow")}
@@ -3561,13 +2871,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "TOW"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.mapa")}
@@ -3584,13 +2888,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "MAPA"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
                 <Form.Item
                   label={t("bodyshop.fields.responsibilitycenters.mash")}
@@ -3607,13 +2905,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   ]}
                   name={["md_responsibility_centers", "defaults", "profits", "MASH"]}
                 >
-                  <Select showSearch>
-                    {profitOptions.map((item, idx) => (
-                      <Select.Option key={idx} value={item}>
-                        {item}
-                      </Select.Option>
-                    ))}
-                  </Select>
+                  <Select showSearch options={profitOptions.map((item) => ({ value: item, label: item }))} />
                 </Form.Item>
               </LayoutFormRow>
             </SelectorDiv>
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 b5bcf643c..3f843a991 100644
--- a/client/src/components/shop-info/shop-info.rostatus.component.jsx
+++ b/client/src/components/shop-info/shop-info.rostatus.component.jsx
@@ -80,13 +80,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple">
-          {options.map((item, idx) => (
-            <Select.Option key={idx} value={item}>
-              {item}
-            </Select.Option>
-          ))}
-        </Select>
+        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <Form.Item
         name={["md_ro_statuses", "pre_production_statuses"]}
@@ -99,13 +93,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple">
-          {options.map((item, idx) => (
-            <Select.Option key={idx} value={item}>
-              {item}
-            </Select.Option>
-          ))}
-        </Select>
+        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <Form.Item
         name={["md_ro_statuses", "production_statuses"]}
@@ -118,13 +106,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple">
-          {options.map((item, idx) => (
-            <Select.Option key={idx} value={item}>
-              {item}
-            </Select.Option>
-          ))}
-        </Select>
+        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <Form.Item
         name={["md_ro_statuses", "post_production_statuses"]}
@@ -137,13 +119,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple">
-          {options.map((item, idx) => (
-            <Select.Option key={idx} value={item}>
-              {item}
-            </Select.Option>
-          ))}
-        </Select>
+        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <Form.Item
         name={["md_ro_statuses", "ready_statuses"]}
@@ -156,13 +132,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple">
-          {options.map((item, idx) => (
-            <Select.Option key={idx} value={item}>
-              {item}
-            </Select.Option>
-          ))}
-        </Select>
+        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <Form.Item
         name={["md_ro_statuses", "additional_board_statuses"]}
@@ -175,13 +145,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           }
         ]}
       >
-        <Select mode="multiple">
-          {options.map((item, idx) => (
-            <Select.Option key={idx} value={item}>
-              {item}
-            </Select.Option>
-          ))}
-        </Select>
+        <Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
       </Form.Item>
       <LayoutFormRow noDivider>
         <Form.Item
@@ -194,13 +158,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_scheduled"]}
         >
-          <Select>
-            {options.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select options={options.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_arrived")}
@@ -212,13 +170,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_arrived"]}
         >
-          <Select>
-            {options.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select options={options.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_exported")}
@@ -230,13 +182,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_exported"]}
         >
-          <Select>
-            {options.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select options={options.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_imported")}
@@ -248,13 +194,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_imported"]}
         >
-          <Select>
-            {options.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select options={options.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_invoiced")}
@@ -266,13 +206,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_invoiced"]}
         >
-          <Select>
-            {options.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select options={options.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_completed")}
@@ -284,13 +218,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_completed"]}
         >
-          <Select>
-            {options.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select options={options.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_delivered")}
@@ -302,13 +230,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_delivered"]}
         >
-          <Select>
-            {options.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select options={options.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.statuses.default_void")}
@@ -320,13 +242,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
           ]}
           name={["md_ro_statuses", "default_void"]}
         >
-          <Select>
-            {options.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select options={options.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
       </LayoutFormRow>
       {Production_List_Status_Colors.treatment === "on" && (
@@ -352,13 +268,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
                                 }
                               ]}
                             >
-                              <Select>
-                                {productionStatus.map((item, idx) => (
-                                  <Select.Option key={idx} value={item}>
-                                    {item}
-                                  </Select.Option>
-                                ))}
-                              </Select>
+                              <Select options={productionStatus.map((item) => ({ value: item, label: item }))} />
                             </Form.Item>
                             <DeleteFilled
                               onClick={() => {
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 bb1b8b313..08d9e816a 100644
--- a/client/src/components/shop-info/shop-info.speedprint.component.jsx
+++ b/client/src/components/shop-info/shop-info.speedprint.component.jsx
@@ -60,13 +60,13 @@ export default function ShopInfoSpeedPrint() {
                       }
                     ]}
                   >
-                    <Select mode="multiple">
-                      {Object.keys(TemplateListGenerated).map((key, idx) => (
-                        <Select.Option key={idx} value={TemplateListGenerated[key].key}>
-                          {TemplateListGenerated[key].title}
-                        </Select.Option>
-                      ))}
-                    </Select>
+                    <Select
+                      mode="multiple"
+                      options={Object.keys(TemplateListGenerated).map((key) => ({
+                        value: TemplateListGenerated[key].key,
+                        label: TemplateListGenerated[key].title
+                      }))}
+                    />
                   </Form.Item>
 
                   <Space wrap>
diff --git a/client/src/components/shop-info/shop-intellipay-config.component.jsx b/client/src/components/shop-info/shop-intellipay-config.component.jsx
index da7b4d1fc..bdbf80c02 100644
--- a/client/src/components/shop-info/shop-intellipay-config.component.jsx
+++ b/client/src/components/shop-info/shop-intellipay-config.component.jsx
@@ -43,85 +43,43 @@ export function ShopInfoIntellipay({ bodyshop, form }) {
           label={t("bodyshop.fields.intellipay_config.payment_map.visa")}
           name={["intellipay_config", "payment_map", "visa"]}
         >
-          <Select showSearch>
-            {bodyshop.md_payment_types.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.intellipay_config.payment_map.mast")}
           name={["intellipay_config", "payment_map", "mast"]}
         >
-          <Select showSearch>
-            {bodyshop.md_payment_types.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.intellipay_config.payment_map.amex")}
           name={["intellipay_config", "payment_map", "amex"]}
         >
-          <Select showSearch>
-            {bodyshop.md_payment_types.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.intellipay_config.payment_map.disc")}
           name={["intellipay_config", "payment_map", "disc"]}
         >
-          <Select showSearch>
-            {bodyshop.md_payment_types.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.intellipay_config.payment_map.dnrs")}
           name={["intellipay_config", "payment_map", "dnrs"]}
         >
-          <Select showSearch>
-            {bodyshop.md_payment_types.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.intellipay_config.payment_map.jcb")}
           name={["intellipay_config", "payment_map", "jcb"]}
         >
-          <Select showSearch>
-            {bodyshop.md_payment_types.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.intellipay_config.payment_map.intr")}
           name={["intellipay_config", "payment_map", "intr"]}
         >
-          <Select showSearch>
-            {bodyshop.md_payment_types.map((item, idx) => (
-              <Select.Option key={idx} value={item}>
-                {item}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
         </Form.Item>
       </LayoutFormRow>
     </>
diff --git a/client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.component.jsx b/client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.component.jsx
index 6db04d3be..31677fcba 100644
--- a/client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.component.jsx
+++ b/client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.component.jsx
@@ -57,21 +57,23 @@ export function TechClockInComponent({ form, bodyshop, technician }) {
             }
           ]}
         >
-          <Select>
-            {emps &&
-              emps.rates.map((item) => (
-                <Select.Option key={item.cost_center} value={item.cost_center}>
-                  {item.cost_center === "timetickets.labels.shift"
+          <Select
+            options={
+              emps &&
+              emps.rates.map((item) => ({
+                value: item.cost_center,
+                label:
+                  item.cost_center === "timetickets.labels.shift"
                     ? t(item.cost_center)
                     : bodyshop.cdk_dealerid ||
                         bodyshop.pbs_serialnumber ||
                         bodyshop.rr_dealerid ||
                         Enhanced_Payroll.treatment === "on"
                       ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
-                      : item.cost_center}
-                </Select.Option>
-              ))}
-          </Select>
+                      : item.cost_center
+              }))
+            }
+          />
         </Form.Item>
       </LayoutFormRow>
       <Divider />
diff --git a/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx b/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
index 2baea1cdf..9742f4120 100644
--- a/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
+++ b/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
@@ -201,22 +201,22 @@ export function TechClockOffButton({
                 }
               ]}
             >
-              <Select disabled={isShiftTicket}>
-                {isShiftTicket ? (
-                  <Select.Option value="timetickets.labels.shift">{t("timetickets.labels.shift")}</Select.Option>
-                ) : (
-                  emps &&
-                  emps.rates.map((item) => (
-                    <Select.Option key={item.cost_center}>
-                      {item.cost_center === "timetickets.labels.shift"
-                        ? t(item.cost_center)
-                        : hasDmsKey
-                          ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
-                          : item.cost_center}
-                    </Select.Option>
-                  ))
-                )}
-              </Select>
+              <Select disabled={isShiftTicket}
+                options={
+                  isShiftTicket
+                    ? [{ value: "timetickets.labels.shift", label: t("timetickets.labels.shift") }]
+                    : emps &&
+                      emps.rates.map((item) => ({
+                        value: item.cost_center,
+                        label:
+                          item.cost_center === "timetickets.labels.shift"
+                            ? t(item.cost_center)
+                            : hasDmsKey
+                              ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
+                              : item.cost_center
+                      }))
+                }
+              />
             </Form.Item>
 
             {isShiftTicket ? (
@@ -232,11 +232,12 @@ export function TechClockOffButton({
                   }
                 ]}
               >
-                <Select>
-                  {bodyshop.md_ro_statuses.production_statuses.map((item) => (
-                    <Select.Option key={item}></Select.Option>
-                  ))}
-                </Select>
+                <Select
+                  options={bodyshop.md_ro_statuses.production_statuses.map((item) => ({
+                    value: item,
+                    label: item
+                  }))}
+                />
               </Form.Item>
             )}
 
diff --git a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
index 35926e16c..1785c193c 100644
--- a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
@@ -91,21 +91,22 @@ export function TimeTicketModalComponent({
       value={value === "timetickets.labels.shift" ? t(value) : value}
       {...props}
       disabled={value === "timetickets.labels.shift" || disabled}
-    >
-      {emps &&
-        emps.rates.map((item) => (
-          <Select.Option key={item.cost_center} value={item.cost_center}>
-            {item.cost_center === "timetickets.labels.shift"
+      options={
+        emps &&
+        emps.rates.map((item) => ({
+          value: item.cost_center,
+          label:
+            item.cost_center === "timetickets.labels.shift"
               ? t(item.cost_center)
               : bodyshop.cdk_dealerid ||
                   bodyshop.pbs_serialnumber ||
                   bodyshop.rr_dealerid ||
                   Enhanced_Payroll.treatment === "on"
                 ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
-                : item.cost_center}
-          </Select.Option>
-        ))}
-    </Select>
+                : item.cost_center
+        }))
+      }
+    />
   );
 
   const MemoInput = ({ value, ...props }) => (
diff --git a/client/src/components/time-ticket-shift-form/time-ticket-shift-form.component.jsx b/client/src/components/time-ticket-shift-form/time-ticket-shift-form.component.jsx
index 2cff01a05..0569fc595 100644
--- a/client/src/components/time-ticket-shift-form/time-ticket-shift-form.component.jsx
+++ b/client/src/components/time-ticket-shift-form/time-ticket-shift-form.component.jsx
@@ -20,13 +20,15 @@ export function TimeTicketShiftFormComponent() {
           }
         ]}
       >
-        <Select>
-          <Select.Option value="timetickets.labels.amshift">{t("timetickets.labels.amshift")}</Select.Option>
-          <Select.Option value="timetickets.labels.ambreak">{t("timetickets.labels.ambreak")}</Select.Option>
-          <Select.Option value="timetickets.labels.lunch">{t("timetickets.labels.lunch")}</Select.Option>
-          <Select.Option value="timetickets.labels.pmshift">{t("timetickets.labels.pmshift")}</Select.Option>
-          <Select.Option value="timetickets.labels.pmbreak">{t("timetickets.labels.pmbreak")}</Select.Option>
-        </Select>
+        <Select
+          options={[
+            { value: "timetickets.labels.amshift", label: t("timetickets.labels.amshift") },
+            { value: "timetickets.labels.ambreak", label: t("timetickets.labels.ambreak") },
+            { value: "timetickets.labels.lunch", label: t("timetickets.labels.lunch") },
+            { value: "timetickets.labels.pmshift", label: t("timetickets.labels.pmshift") },
+            { value: "timetickets.labels.pmbreak", label: t("timetickets.labels.pmbreak") }
+          ]}
+        />
       </Form.Item>
     </div>
   );
diff --git a/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx b/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
index b11851588..c49b94f2f 100644
--- a/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
+++ b/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
@@ -9,8 +9,6 @@ import {
 } from "../../graphql/vehicles.queries";
 import AlertComponent from "../alert/alert.component";
 
-const { Option } = Select;
-
 const VehicleSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
   const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_VEHICLES_FOR_AUTOCOMPLETE);
 
@@ -73,15 +71,12 @@ const VehicleSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
         onSelect={handleSelect}
         notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
         onBlur={onBlur}
-      >
-        {theOptions
-          ? theOptions.map((o) => (
-              <Option key={o.id} value={o.id}>
-                {`${o.v_vin || ""} ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${o.v_model_desc || ""} `}
-              </Option>
-            ))
-          : null}
-      </Select>
+        options={theOptions?.map((o) => ({
+          key: o.id,
+          value: o.id,
+          label: `${o.v_vin || ""} ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${o.v_model_desc || ""} `
+        }))}
+      />
       {idLoading || loading ? <LoadingOutlined /> : null}
       {error ? <AlertComponent title={error.message} type="error" /> : null}
       {idError ? <AlertComponent title={idError.message} type="error" /> : null}
diff --git a/client/src/components/vendor-search-select/vendor-search-select.component.jsx b/client/src/components/vendor-search-select/vendor-search-select.component.jsx
index a8c0d5a24..92a076e8d 100644
--- a/client/src/components/vendor-search-select/vendor-search-select.component.jsx
+++ b/client/src/components/vendor-search-select/vendor-search-select.component.jsx
@@ -3,8 +3,6 @@ import { Select, Space, Tag } from "antd";
 import { useEffect, useState } from "react";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
-const { Option } = Select;
-
 // To be used as a form element only.
 
 const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone, ref }) => {
@@ -21,10 +19,57 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
       ? options.filter((o) => o.favorite.filter((f) => f.toLowerCase() === preferredMake.toLowerCase()).length > 0)
       : [];
 
+  const formatOption = (o, isFavorite = false) => ({
+    key: isFavorite ? `favorite-${o.id}` : o.id,
+    value: o.id,
+    name: o.name,
+    discount: o.discount,
+    label: (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "nowrap",
+          width: "100%"
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            minWidth: 0,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }}
+        >
+          {o.name}
+        </div>
+        <Space style={{ marginLeft: "1rem" }}>
+          {isFavorite && <HeartOutlined style={{ color: "red" }} />}
+          {!isFavorite &&
+            o.tags?.map((tag, idx) => (
+              <Tag key={idx} style={{ marginLeft: "0.5rem" }}>
+                {tag}
+              </Tag>
+            ))}
+          {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
+          {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
+        </Space>
+      </div>
+    )
+  });
+
+  const allOptions = [
+    ...(favorites?.map((o) => formatOption(o, true)) || []),
+    ...(options?.map((o) => formatOption(o, false)) || [])
+  ];
+
   return (
     <Select
       ref={ref}
-      showSearch
+      showSearch={{
+        optionFilterProp: "name"
+      }}
       value={option}
       style={{
         width: "100%"
@@ -59,76 +104,11 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
       }}
       popupMatchSelectWidth={false}
       onChange={setOption}
-      optionFilterProp="name"
       onSelect={onSelect}
       disabled={disabled || false}
       optionLabelProp="name"
-    >
-      {favorites &&
-        favorites.map((o) => (
-          <Option key={`favorite-${o.id}`} value={o.id} name={o.name} discount={o.discount}>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                flexWrap: "nowrap",
-                width: "100%"
-              }}
-            >
-              <div
-                style={{
-                  flex: 1,
-                  minWidth: 0,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                }}
-              >
-                {o.name}
-              </div>
-              <Space style={{ marginLeft: "1rem" }}>
-                <HeartOutlined style={{ color: "red" }} />
-                {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
-                {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
-              </Space>
-            </div>
-          </Option>
-        ))}
-      {options &&
-        options.map((o) => (
-          <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                flexWrap: "nowrap",
-                width: "100%"
-              }}
-            >
-              <div
-                style={{
-                  flex: 1,
-                  minWidth: 0,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                }}
-              >
-                {o.name}
-              </div>
-              <Space style={{ marginLeft: "1rem" }}>
-                {o.tags?.map((tag, idx) => (
-                  <Tag key={idx} style={{ marginLeft: "0.5rem" }}>
-                    {tag}
-                  </Tag>
-                ))}
-                {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
-                {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
-              </Space>
-            </div>
-          </Option>
-        ))}
-    </Select>
+      options={allOptions}
+    />
   );
 };
 export default VendorSearchSelect;
diff --git a/client/src/pages/dms-payables/dms-payables.container.jsx b/client/src/pages/dms-payables/dms-payables.container.jsx
index d49b0bf05..113d4b584 100644
--- a/client/src/pages/dms-payables/dms-payables.container.jsx
+++ b/client/src/pages/dms-payables/dms-payables.container.jsx
@@ -119,12 +119,13 @@ export function DmsContainer({ setBreadcrumbs, setSelectedHeader }) {
                     setLogLevel(value);
                     socket.emit("set-log-level", value);
                   }}
-                >
-                  <Select.Option key="DEBUG">DEBUG</Select.Option>
-                  <Select.Option key="INFO">INFO</Select.Option>
-                  <Select.Option key="WARN">WARN</Select.Option>
-                  <Select.Option key="ERROR">ERROR</Select.Option>
-                </Select>
+                  options={[
+                    { key: "DEBUG", value: "DEBUG", label: "DEBUG" },
+                    { key: "INFO", value: "INFO", label: "INFO" },
+                    { key: "WARN", value: "WARN", label: "WARN" },
+                    { key: "ERROR", value: "ERROR", label: "ERROR" }
+                  ]}
+                />
                 <Button onClick={() => setLogs([])}>Clear Logs</Button>
                 <Button
                   onClick={() => {
diff --git a/client/src/pages/dms/dms.container.jsx b/client/src/pages/dms/dms.container.jsx
index c4d5c8190..4d749c326 100644
--- a/client/src/pages/dms/dms.container.jsx
+++ b/client/src/pages/dms/dms.container.jsx
@@ -522,13 +522,14 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
                       setLogLevel(value);
                       setActiveLogLevel(value);
                     }}
-                  >
-                    <Select.Option key="SILLY">SILLY</Select.Option>
-                    <Select.Option key="DEBUG">DEBUG</Select.Option>
-                    <Select.Option key="INFO">INFO</Select.Option>
-                    <Select.Option key="WARN">WARN</Select.Option>
-                    <Select.Option key="ERROR">ERROR</Select.Option>
-                  </Select>
+                    options={[
+                      { key: "SILLY", value: "SILLY", label: "SILLY" },
+                      { key: "DEBUG", value: "DEBUG", label: "DEBUG" },
+                      { key: "INFO", value: "INFO", label: "INFO" },
+                      { key: "WARN", value: "WARN", label: "WARN" },
+                      { key: "ERROR", value: "ERROR", label: "ERROR" }
+                    ]}
+                  />
                   <Button onClick={() => setLogs([])}>Clear Logs</Button>
                   <Button
                     onClick={() => {
diff --git a/client/src/pages/jobs-close/jobs-close.component.jsx b/client/src/pages/jobs-close/jobs-close.component.jsx
index 9a429cb2a..cf0b1d620 100644
--- a/client/src/pages/jobs-close/jobs-close.component.jsx
+++ b/client/src/pages/jobs-close/jobs-close.component.jsx
@@ -426,13 +426,15 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail, set
                                   }
                                 ]}
                               >
-                                <Select style={{ minWidth: "12rem" }} disabled={jobRO}>
-                                  {bodyshop.md_ins_cos.map((s) => (
-                                    <Select.Option key={s.name} value={s.name}>
-                                      {s.name}
-                                    </Select.Option>
-                                  ))}
-                                </Select>
+                                <Select
+                                  style={{ minWidth: "12rem" }}
+                                  disabled={jobRO}
+                                  options={bodyshop.md_ins_cos.map((s) => ({
+                                    key: s.name,
+                                    value: s.name,
+                                    label: s.name
+                                  }))}
+                                />
                               </Form.Item>
 
                               <Form.Item
diff --git a/client/src/utils/Ciecaselect.jsx b/client/src/utils/Ciecaselect.jsx
index 5d4bea6ef..cffe05fa8 100644
--- a/client/src/utils/Ciecaselect.jsx
+++ b/client/src/utils/Ciecaselect.jsx
@@ -1,44 +1,43 @@
-import { Select } from "antd";
 import i18n from "../translations/i18n";
 
 export default function CiecaSelect(parts = true, labor = true) {
-  return (
-    <>
-      {labor && (
-        <>
-          <Select.Option value="LAA">{i18n.t("joblines.fields.lbr_types.LAA")}</Select.Option>
-          <Select.Option value="LAB">{i18n.t("joblines.fields.lbr_types.LAB")}</Select.Option>
-          <Select.Option value="LAD">{i18n.t("joblines.fields.lbr_types.LAD")}</Select.Option>
-          <Select.Option value="LAE">{i18n.t("joblines.fields.lbr_types.LAE")}</Select.Option>
-          <Select.Option value="LAF">{i18n.t("joblines.fields.lbr_types.LAF")}</Select.Option>
-          <Select.Option value="LAG">{i18n.t("joblines.fields.lbr_types.LAG")}</Select.Option>
-          <Select.Option value="LAM">{i18n.t("joblines.fields.lbr_types.LAM")}</Select.Option>
-          <Select.Option value="LAR">{i18n.t("joblines.fields.lbr_types.LAR")}</Select.Option>
-          <Select.Option value="LAS">{i18n.t("joblines.fields.lbr_types.LAS")}</Select.Option>
-          <Select.Option value="LAU">{i18n.t("joblines.fields.lbr_types.LAU")}</Select.Option>
-          <Select.Option value="LA1">{i18n.t("joblines.fields.lbr_types.LA1")}</Select.Option>
-          <Select.Option value="LA2">{i18n.t("joblines.fields.lbr_types.LA2")}</Select.Option>
-          <Select.Option value="LA3">{i18n.t("joblines.fields.lbr_types.LA3")}</Select.Option>
-          <Select.Option value="LA4">{i18n.t("joblines.fields.lbr_types.LA4")}</Select.Option>
-        </>
-      )}
-      {parts && (
-        <>
-          <Select.Option value="PAA">{i18n.t("joblines.fields.part_types.PAA")}</Select.Option>
-          <Select.Option value="PAC">{i18n.t("joblines.fields.part_types.PAC")}</Select.Option>
-
-          <Select.Option value="PAL">{i18n.t("joblines.fields.part_types.PAL")}</Select.Option>
-          <Select.Option value="PAG">{i18n.t("joblines.fields.part_types.PAG")}</Select.Option>
-          <Select.Option value="PAM">{i18n.t("joblines.fields.part_types.PAM")}</Select.Option>
-          <Select.Option value="PAP">{i18n.t("joblines.fields.part_types.PAP")}</Select.Option>
-          <Select.Option value="PAN">{i18n.t("joblines.fields.part_types.PAN")}</Select.Option>
-          <Select.Option value="PAO">{i18n.t("joblines.fields.part_types.PAO")}</Select.Option>
-          <Select.Option value="PAR">{i18n.t("joblines.fields.part_types.PAR")}</Select.Option>
-          <Select.Option value="PAS">{i18n.t("joblines.fields.part_types.PAS")}</Select.Option>
-        </>
-      )}
-    </>
-  );
+  const options = [];
+  
+  if (labor) {
+    options.push(
+      { value: "LAA", label: i18n.t("joblines.fields.lbr_types.LAA") },
+      { value: "LAB", label: i18n.t("joblines.fields.lbr_types.LAB") },
+      { value: "LAD", label: i18n.t("joblines.fields.lbr_types.LAD") },
+      { value: "LAE", label: i18n.t("joblines.fields.lbr_types.LAE") },
+      { value: "LAF", label: i18n.t("joblines.fields.lbr_types.LAF") },
+      { value: "LAG", label: i18n.t("joblines.fields.lbr_types.LAG") },
+      { value: "LAM", label: i18n.t("joblines.fields.lbr_types.LAM") },
+      { value: "LAR", label: i18n.t("joblines.fields.lbr_types.LAR") },
+      { value: "LAS", label: i18n.t("joblines.fields.lbr_types.LAS") },
+      { value: "LAU", label: i18n.t("joblines.fields.lbr_types.LAU") },
+      { value: "LA1", label: i18n.t("joblines.fields.lbr_types.LA1") },
+      { value: "LA2", label: i18n.t("joblines.fields.lbr_types.LA2") },
+      { value: "LA3", label: i18n.t("joblines.fields.lbr_types.LA3") },
+      { value: "LA4", label: i18n.t("joblines.fields.lbr_types.LA4") }
+    );
+  }
+  
+  if (parts) {
+    options.push(
+      { value: "PAA", label: i18n.t("joblines.fields.part_types.PAA") },
+      { value: "PAC", label: i18n.t("joblines.fields.part_types.PAC") },
+      { value: "PAL", label: i18n.t("joblines.fields.part_types.PAL") },
+      { value: "PAG", label: i18n.t("joblines.fields.part_types.PAG") },
+      { value: "PAM", label: i18n.t("joblines.fields.part_types.PAM") },
+      { value: "PAP", label: i18n.t("joblines.fields.part_types.PAP") },
+      { value: "PAN", label: i18n.t("joblines.fields.part_types.PAN") },
+      { value: "PAO", label: i18n.t("joblines.fields.part_types.PAO") },
+      { value: "PAR", label: i18n.t("joblines.fields.part_types.PAR") },
+      { value: "PAS", label: i18n.t("joblines.fields.part_types.PAS") }
+    );
+  }
+  
+  return options;
 }
 
 export function GetPartTypeName(part_type) {