feature/IO-3497-Ant-Design-v5-to-v6 - Signed off Files (Checkpoint)

client/src/components/alert/alert.component.test.jsx

@@ -4,27 +4,27 @@ import AlertComponent from "./alert.component";
 
 describe("AlertComponent", () => {
   it("renders with default props", () => {
-    render(<AlertComponent message="Default Alert" />);
+    render(<AlertComponent title="Default Alert" />);
     expect(screen.getByText("Default Alert")).toBeInTheDocument();
     expect(screen.getByRole("alert")).toHaveClass("ant-alert");
   });
 
   it("applies type prop correctly", () => {
-    render(<AlertComponent message="Success Alert" type="success" />);
+    render(<AlertComponent title="Success Alert" type="success" />);
     const alert = screen.getByRole("alert");
     expect(screen.getByText("Success Alert")).toBeInTheDocument();
     expect(alert).toHaveClass("ant-alert-success");
   });
 
   it("displays description when provided", () => {
-    render(<AlertComponent message="Error Alert" description="Something went wrong" type="error" />);
+    render(<AlertComponent title="Error Alert" description="Something went wrong" type="error" />);
     expect(screen.getByText("Error Alert")).toBeInTheDocument();
     expect(screen.getByText("Something went wrong")).toBeInTheDocument();
     expect(screen.getByRole("alert")).toHaveClass("ant-alert-error");
   });
 
   it("is closable and shows icon when props are set", () => {
-    render(<AlertComponent message="Warning Alert" type="warning" showIcon closable />);
+    render(<AlertComponent title="Warning Alert" type="warning" showIcon closable />);
     expect(screen.getByText("Warning Alert")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /close/i })).toBeInTheDocument(); // Close button
   });

client/src/components/audit-trail-list/audit-trail-list.container.jsx

@@ -17,7 +17,7 @@ export default function AuditTrailListContainer({ recordId }) {
   return (
     <div>
       {error ? (
-        <AlertComponent type="error" message={error.message} />
+        <AlertComponent type="error" title={error.message} />
       ) : (
         <Row gutter={[16, 16]}>
           <Card>

client/src/components/bill-detail-edit/bill-detail-edit-component.jsx

@@ -148,7 +148,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
     setUpdateLoading(false);
   };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
 
   const exported = data?.bills_by_pk && data.bills_by_pk.exported;

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

@@ -421,7 +421,7 @@ export function BillFormComponent({
                     />
                   </Space>
                   {form.getFieldValue("is_credit_memo") ? (
-                    <AlertComponent type="warning" message={t("bills.labels.enteringcreditmemo")} />
+                    <AlertComponent type="warning" title={t("bills.labels.enteringcreditmemo")} />
                   ) : null}
                 </div>
               );

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

@@ -67,7 +67,7 @@ export default function BillsVendorsList() {
     setState({ ...state, search: e.target.value });
   };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   const dataSource = state.search
     ? data.vendors.filter(

client/src/components/card-payment-modal/card-payment-modal.component.jsx

@@ -51,10 +51,11 @@ const CardPaymentModalComponent = ({
   const { t } = useTranslation();
   const notification = useNotification();
 
-  const [, { data, refetch, queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS, {
-    variables: { jobids: [context.jobid] },
-    skip: !context?.jobid
-  });
+  const [executeQuery, { data, loading: queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS);
+
+  const refetch = (variables) => {
+    return executeQuery({ variables });
+  };
 
   const collectIPayFields = () => {
     const iPayFields = document.querySelectorAll(".ipayfield");

client/src/components/chat-conversation/chat-conversation.component.jsx

@@ -27,7 +27,7 @@ export function ChatConversationComponent({
 
   if (conversation?.archived) return null;
   if (loading) return <LoadingSkeleton />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <div

client/src/components/chat-media-selector/chat-media-selector.component.jsx

@@ -63,7 +63,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
   const content = (
     <div className="media-selector-content">
       {loading && <LoadingSpinner />}
-      {error && <AlertComponent message={error.message} type="error" />}
+      {error && <AlertComponent title={error.message} type="error" />}
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div className="error-message">{t("messaging.labels.maxtenimages")}</div>
       ) : null}

client/src/components/chat-popup/chat-popup.component.jsx

@@ -51,21 +51,29 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
 
   // Query for unread count when chat is not visible and socket is not connected.
   // (Once socket connects, we stop this query; we keep the last known value in state.)
-  useQuery(UNREAD_CONVERSATION_COUNT, {
+  const { data: unreadData, error: unreadError } = useQuery(UNREAD_CONVERSATION_COUNT, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
     skip: chatVisible || socket?.connected,
-    pollInterval: socket?.connected ? 0 : 60 * 1000,
-    onCompleted: (result) => {
-      const nextCount = result?.messages_aggregate?.aggregate?.count;
-      if (typeof nextCount === "number") setUnreadAggregateCount(nextCount);
-    },
-    onError: (err) => {
-      // Keep last known count; do not force badge to zero on transient failures
-      console.warn("UNREAD_CONVERSATION_COUNT failed:", err?.message || err);
-    }
+    pollInterval: socket?.connected ? 0 : 60 * 1000
   });
 
+  // Handle unread count updates in useEffect
+  useEffect(() => {
+    if (unreadData) {
+      const nextCount = unreadData?.messages_aggregate?.aggregate?.count;
+      if (typeof nextCount === "number") setUnreadAggregateCount(nextCount);
+    }
+  }, [unreadData]);
+
+  // Handle unread count errors in useEffect
+  useEffect(() => {
+    if (unreadError) {
+      // Keep last known count; do not force badge to zero on transient failures
+      console.warn("UNREAD_CONVERSATION_COUNT failed:", unreadError?.message || unreadError);
+    }
+  }, [unreadError]);
+
   // Socket connection status -> polling strategy for CONVERSATION_LIST_QUERY
   useEffect(() => {
     const handleSocketStatus = () => {

client/src/components/chat-send-message/chat-send-message.component.jsx

@@ -74,7 +74,7 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
           <Alert
             showIcon={true}
             icon={<ExclamationCircleOutlined />}
-            message={t("messaging.errors.no_consent")}
+            title={t("messaging.errors.no_consent")}
             type="error"
           />
         </Tooltip>

client/src/components/contract-cars/contract-cars.container.jsx

@@ -24,7 +24,7 @@ export default function ContractCarsContainer({ selectedCarState, form }) {
     });
   };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   return (
     <ContractCarsComponent
       handleSelect={handleSelect}

client/src/components/contract-jobs/contract-jobs.container.jsx

@@ -26,7 +26,7 @@ export function ContractJobsContainer({ selectedJobState, bodyshop }) {
     setSelectedJob(record.id);
   };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   return (
     <ContractJobsComponent
       handleSelect={handleSelect}

client/src/components/contracts-find-modal/contracts-find-modal.container.jsx

@@ -63,7 +63,7 @@ export function ContractsFindModalContainer({ contractFinderModal, toggleModalVi
         <Button onClick={() => form.submit()} type="primary" loading={loading}>
           {t("general.labels.search")}
         </Button>
-        {error && <AlertComponent type="error" message={JSON.stringify(error)} />}
+        {error && <AlertComponent type="error" title={JSON.stringify(error)} />}
         <Table
           loading={loading}
           columns={[

client/src/components/csi-response-form/csi-response-form.container.jsx

@@ -36,7 +36,7 @@ export default function CsiResponseFormContainer() {
     );
 
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <Card>

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -156,7 +156,7 @@ export function DashboardGridComponent({ currentUser }) {
   );
 
   if (loading || dashboardLoading) return <LoadingSkeleton message={t("general.labels.loading")} />;
-  if (error || dashboardError) return <AlertComponent message={(error || dashboardError).message} type="error" />;
+  if (error || dashboardError) return <AlertComponent title={(error || dashboardError).message} type="error" />;
 
   const handleLayoutChange = async (layout, layouts) => {
     logImEXEvent("dashboard_change_layout");

client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx

@@ -112,7 +112,7 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, on
       }
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
-        <Alert type="warning" message={t("jobs.labels.dms.disablebillwip")} />
+        <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />
       )}
 
       <Table

client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx

@@ -331,10 +331,10 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
       }
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
-        <Alert type="warning" message={t("jobs.labels.dms.disablebillwip")} />
+        <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />
       )}
 
-      {error && <Alert type="error" style={{ marginTop: 8, marginBottom: 8 }} message={error} />}
+      {error && <Alert type="error" style={{ marginTop: 8, marginBottom: 8 }} title={error} />}
 
       <Tabs defaultActiveKey="rogog" items={tabItems} />
     </Card>

client/src/components/dms-cdk-makes/dms-cdk-makes.component.jsx

@@ -56,7 +56,7 @@ export function DmsCdkVehicles({ form, job }) {
           setOpen(false);
         }}
       >
-        {error && <AlertComponent error={error.message} />}
+        {error && <AlertComponent title={error.message} type="error" />}
         <Table
           title={() => (
             <Input.Search

client/src/components/dms-customer-selector/rr-customer-selector.jsx

@@ -179,7 +179,7 @@ export default function RRCustomerSelector({
               <Alert
                 type="error"
                 showIcon
-                message="Open RO limit reached in Reynolds"
+                title="Open RO limit reached in Reynolds"
                 description={
                   <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                     <div>
@@ -201,7 +201,7 @@ export default function RRCustomerSelector({
               <Alert
                 type="info"
                 showIcon
-                message="Complete Validation in Reynolds"
+                title="Complete Validation in Reynolds"
                 description={
                   <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                     <div>
@@ -234,7 +234,7 @@ export default function RRCustomerSelector({
               <Alert
                 type="warning"
                 showIcon
-                message="VIN ownership enforced"
+                title="VIN ownership enforced"
                 description={
                   <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
                     <div>

client/src/components/document-editor/document-editor.container.jsx

@@ -51,7 +51,7 @@ export function DocumentEditorContainer({ setBodyshop }) {
   }, [dataShop, setBodyshop]);
 
   if (loadingShop) return <LoadingSpinner />;
-  if (errorShop) return <AlertComponent message={errorShop.message} type="error" />;
+  if (errorShop) return <AlertComponent title={errorShop.message} type="error" />;
 
   if (isLocalMedia) {
     if (imageUrl && filename && jobid) {
@@ -66,7 +66,7 @@ export function DocumentEditorContainer({ setBodyshop }) {
   }
 
   if (loadingDoc) return <LoadingSpinner />;
-  if (errorDoc) return <AlertComponent message={errorDoc.message} type="error" />;
+  if (errorDoc) return <AlertComponent title={errorDoc.message} type="error" />;
 
   if (!dataDoc || !dataDoc.documents_by_pk) return <Result status="404" title={t("general.errors.notfound")} />;
   return (

client/src/components/email-documents/email-documents.component.jsx

@@ -45,7 +45,7 @@ export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState,
   return (
     <div>
       {loading && <LoadingSpinner />}
-      {error && <AlertComponent message={error.message} type="error" />}
+      {error && <AlertComponent title={error.message} type="error" />}
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
       ) : null}

client/src/components/employee-team-search-select/employee-team-search-select.component.jsx

@@ -9,7 +9,7 @@ import AlertComponent from "../alert/alert.component";
 const EmployeeTeamSearchSelect = ({ ...props }) => {
   const { loading, error, data } = useQuery(QUERY_TEAMS);
 
-  if (error) return <AlertComponent message={JSON.stringify(error)} />;
+  if (error) return <AlertComponent title={JSON.stringify(error)} type="error" />;
   return (
     <Select
       showSearch

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

@@ -122,14 +122,23 @@ class ErrorBoundary extends React.Component {
           />
           <Row>
             <Col offset={6} span={12}>
-              <Collapse bordered={false}>
-                <Collapse.Panel key="errors-panel" header={t("general.labels.errors")}>
+              <Collapse
+                bordered={false}
+                items={[
+                  {
+                    key: "errors-panel",
+                    label: t("general.labels.errors"),
+                    children: (
+                      <>
                         <div>
                           <strong>{this.state.error.message}</strong>
                         </div>
                         <div>{this.state.error.stack}</div>
-                </Collapse.Panel>
-              </Collapse>
+                      </>
+                    )
+                  }
+                ]}
+              />
             </Col>
           </Row>
         </div>

client/src/components/feature-wrapper/feature-wrapper.component.jsx

@@ -56,7 +56,7 @@ function FeatureWrapper({
     return (
       noauth || (
         <AlertComponent
-          message={t("general.messages.nofeatureaccess", {
+          title={t("general.messages.nofeatureaccess", {
             app: InstanceRenderManager({
               imex: "$t(titles.imexonline)",
               rome: "$t(titles.romeonline)"

client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx

@@ -21,7 +21,7 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
               <Prompt when={!skipPrompt} beforeUnload={true} message={t("general.messages.unsavedchangespopup")} />
               <AlertComponent
                 type="warning"
-                message={
+                title={
                   <div>
                     <span>{t("general.messages.unsavedchanges")} </span>
                     <span
@@ -39,7 +39,7 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
               {errors.length > 0 && (
                 <AlertComponent
                   type="error"
-                  message={
+                  title={
                     <div>
                       <ul>{errors.map((e, idx) => e.errors.map((e2, idx2) => <li key={`${idx}${idx2}`}>{e2}</li>))}</ul>
                     </div>

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

@@ -1,22 +1,20 @@
 import { MailFilled } from "@ant-design/icons";
-import { Input } from "antd";
+import { Button, Input, Space } from "antd";
 import { forwardRef } from "react";
 
 function FormItemEmail(props, ref) {
+  const { defaultValue, value, ...restProps } = props;
+  const emailValue = defaultValue || value;
+
   return (
-    <Input
-      {...props}
-      ref={ref}
-      addonAfter={
-        props.defaultValue || props.value ? (
-          <a href={`mailto:${props.defaultValue || props.value}`}>
-            <MailFilled />
-          </a>
+    <Space.Compact style={{ width: "100%" }}>
+      <Input {...restProps} ref={ref} value={value} defaultValue={defaultValue} />
+      {emailValue ? (
+        <Button icon={<MailFilled />} href={`mailto:${emailValue}`} target="_blank" rel="noopener noreferrer" />
       ) : (
-          <MailFilled />
-        )
-      }
-    />
+        <Button icon={<MailFilled />} disabled />
+      )}
+    </Space.Compact>
   );
 }
 

client/src/components/global-search/global-search-os.component.jsx

@@ -46,7 +46,7 @@ export default function GlobalSearchOs() {
                 value: job.ro_number || "N/A",
                 label: (
                   <Link to={`/manage/jobs/${job.id}`}>
-                    <Space size="small" split={<Divider type="vertical" />}>
+                    <Space size="small" split={<Divider orientation="vertical" />}>
                       <strong>{job.ro_number || t("general.labels.na")}</strong>
                       <span>{`${job.status || ""}`}</span>
                       <span>
@@ -69,7 +69,7 @@ export default function GlobalSearchOs() {
                 value: OwnerNameDisplayFunction(owner),
                 label: (
                   <Link to={`/manage/owners/${owner.id}`}>
-                    <Space size="small" split={<Divider type="vertical" />} wrap>
+                    <Space size="small" split={<Divider orientation="vertical" />} wrap>
                       <span>
                         <OwnerNameDisplay ownerObject={owner} />
                       </span>
@@ -89,7 +89,7 @@ export default function GlobalSearchOs() {
                 value: `${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`,
                 label: (
                   <Link to={`/manage/vehicles/${vehicle.id}`}>
-                    <Space size="small" split={<Divider type="vertical" />}>
+                    <Space size="small" split={<Divider orientation="vertical" />}>
                       <span>
                         {`${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`}
                       </span>
@@ -111,7 +111,7 @@ export default function GlobalSearchOs() {
                 value: `${payment.job?.ro_number} ${payment.amount}`,
                 label: (
                   <Link to={`/manage/jobs/${payment.job?.id}`}>
-                    <Space size="small" split={<Divider type="vertical" />}>
+                    <Space size="small" split={<Divider orientation="vertical" />}>
                       <span>{payment.paymentnum}</span>
                       <span>{payment.job?.ro_number}</span>
                       <span>{payment.memo || ""}</span>
@@ -131,7 +131,7 @@ export default function GlobalSearchOs() {
                 value: `${bill.invoice_number} - ${bill.vendor.name}`,
                 label: (
                   <Link to={`/manage/bills?billid=${bill.id}`}>
-                    <Space size="small" split={<Divider type="vertical" />}>
+                    <Space size="small" split={<Divider orientation="vertical" />}>
                       <span>{bill.invoice_number}</span>
                       <span>{bill.vendor.name}</span>
                       <span>{bill.date}</span>
@@ -151,7 +151,7 @@ export default function GlobalSearchOs() {
           //       }`,
           //       label: (
           //         <Link to={`/manage/phonebook?phonebookentry=${pb.id}`}>
-          //           <Space size="small" split={<Divider type="vertical" />}>
+          //           <Space size="small" split={<Divider orientation="vertical" />}>
           //             <span>{`${pb.firstname || ""} ${pb.lastname || ""} ${
           //               pb.company || ""
           //             }`}</span>

client/src/components/global-search/global-search.component.jsx

@@ -152,7 +152,7 @@ export default function GlobalSearch() {
       ]
     : [];
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <AutoComplete

client/src/components/inventory-list/inventory-list.container.jsx

@@ -33,7 +33,7 @@ export function InventoryList() {
     }
   });
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   return (
     <InventoryListPaginated
       refetch={refetch}

client/src/components/job-bills-total/job-bills-total.component.jsx

@@ -33,7 +33,7 @@ export function JobBillsTotalComponent({
     if (showWarning && warningCallback && typeof warningCallback === "function") {
       warningCallback({ key: "bills", warning: t("jobs.errors.nofinancial") });
     }
-    return <AlertComponent type="error" message={t("jobs.errors.nofinancial")} />;
+    return <AlertComponent type="error" title={t("jobs.errors.nofinancial")} />;
   }
 
   const totals = jobTotals;
@@ -264,7 +264,7 @@ export function JobBillsTotalComponent({
               <Alert
                 style={{ margin: "8px 0px" }}
                 type="warning"
-                message={t("jobs.labels.outstanding_reconciliation_discrep")}
+                title={t("jobs.labels.outstanding_reconciliation_discrep")}
               />
             )}
         </Card>
@@ -337,7 +337,7 @@ export function JobBillsTotalComponent({
             </Tooltip>
           </Space>
           {showWarning && calculatedCreditsNotReceived.getAmount() > 0 && (
-            <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_credit_memos")} />
+            <Alert style={{ margin: "8px 0px" }} type="warning" title={t("jobs.labels.outstanding_credit_memos")} />
           )}
         </Card>
       </Col>

client/src/components/job-close-ro-guard/job-close-ro-gaurd.labor.jsx

@@ -30,7 +30,7 @@ export function JobCloseRoGuardLabor({ job, bodyshop, warningCallback }) {
   });
 
   if (loading) return <LoadingSkeleton />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return Enhanced_Payroll.treatment === "on" ? (
     <PayrollLaborAllocationsTable

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

@@ -49,7 +49,7 @@ export function JobCloseRoGuardProfit({ job, warningCallback }) {
         {balance.toFormat()}
       </DataLabel>
       {balance.getAmount() !== 0 && (
-        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_ar")} />
+        <Alert style={{ margin: "8px 0px" }} type="warning" title={t("jobs.labels.outstanding_ar")} />
       )}
     </Card>
   );

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

@@ -18,7 +18,7 @@ export function JobCloseRoGuardBills({ job, warningCallback }) {
     nextFetchPolicy: "network-only"
   });
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <JobBillsTotalComponent

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

@@ -66,8 +66,14 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
         </Card>
       )}
 
-      <Collapse>
-        <Collapse.Panel forceRender key="roguard" header={t("jobs.labels.roguard")}>
+      <Collapse
+        items={[
+          {
+            key: "roguard",
+            label: t("jobs.labels.roguard"),
+            forceRender: true,
+            children: (
+              <>
                 <Row gutter={[32, 32]}>
                   <Col span={24}>
                     <JobCloseRoGuardBills job={job} form={form} warningCallback={warningCallback} />
@@ -214,16 +220,22 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
                 >
                   <Input prefix={<LockOutlined />} type="password" placeholder="Password" disabled={jobRO} />
                 </Form.Item>
-        </Collapse.Panel>
-
-        <Collapse.Panel key="job-performance" header={t("jobs.labels.performance")}>
+              </>
+            )
+          },
+          {
+            key: "job-performance",
+            label: t("jobs.labels.performance"),
+            children: (
               <Row gutter={[32, 32]}>
                 <Col className="ro-guard-col" span={24}>
                   <JobCloseRoGuardTtLifecycle job={job} />
                 </Col>
               </Row>
-        </Collapse.Panel>
-      </Collapse>
+            )
+          }
+        ]}
+      />
     </>
   );
 }

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

@@ -70,7 +70,7 @@ export function JobCloseRGuardPpd({ job, warningCallback }) {
     <Card title={t("jobs.labels.ppdnotexported")}>
       <Table dataSource={linesWithPPD} columns={columns} pagination={false} rowKey="id" bordered size="small" />
       {linesWithPPD.length > 0 && (
-        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_ppd")} />
+        <Alert style={{ margin: "8px 0px" }} type="warning" title={t("jobs.labels.outstanding_ppd")} />
       )}
     </Card>
   );

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

@@ -54,7 +54,7 @@ export function JobCloseRoGuardProfit({ job, bodyshop, warningCallback }) {
     <Card title={t("jobs.labels.profits")} style={{ height: "100%" }}>
       <JobCostingStatistics summaryData={costingData?.summaryData} onlyGP />
       {enforceProfitPassword && (
-        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.profitbypassrequired")} />
+        <Alert style={{ margin: "8px 0px" }} type="warning" title={t("jobs.labels.profitbypassrequired")} />
       )}
     </Card>
   );

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

@@ -64,7 +64,7 @@ export function JobCloseRGuardSublet({ job, warningCallback }) {
     <Card title={t("jobs.labels.subletsnotcompleted")}>
       <Table dataSource={subletsNotDone} columns={columns} pagination={false} rowKey="id" bordered size="small" />
       {subletsNotDone.length > 0 && (
-        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_sublets")} />
+        <Alert style={{ margin: "8px 0px" }} type="warning" title={t("jobs.labels.outstanding_sublets")} />
       )}
     </Card>
   );

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -95,7 +95,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTra
   return (
     <Drawer open={!!selected} destroyOnHidden width={drawerPercentage} placement="right" onClose={handleDrawerClose}>
       {loading ? <LoadingSpinner /> : null}
-      {error ? <AlertComponent message={error.message} type="error" /> : null}
+      {error ? <AlertComponent title={error.message} type="error" /> : null}
       {data ? (
         <Card
           title={

client/src/components/job-detail-cards/job-detail-cards.dates.component.jsx

@@ -15,7 +15,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "date_last_contacted",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.date_last_contacted")}: </label>
                         <DateTimeFormatter>{data.date_last_contacted}</DateTimeFormatter>
@@ -28,7 +28,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "date_open",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.date_open")}: </label>
                         <DateTimeFormatter>{data.date_open}</DateTimeFormatter>
@@ -41,7 +41,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "date_estimated",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.date_estimated")}: </label>
                         <DateTimeFormatter>{data.date_estimated}</DateTimeFormatter>
@@ -54,7 +54,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "date_scheduled",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.date_scheduled")}: </label>
                         <DateTimeFormatter>{data.date_scheduled}</DateTimeFormatter>
@@ -67,7 +67,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "scheduled_in",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.scheduled_in")}: </label>
                         <DateTimeFormatter>{data.scheduled_in}</DateTimeFormatter>
@@ -80,7 +80,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "actual_in",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.actual_in")}: </label>
                         <DateTimeFormatter>{data.actual_in}</DateTimeFormatter>
@@ -93,7 +93,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "date_repairstarted",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.date_repairstarted")}: </label>
                         <DateTimeFormatter>{data.date_repairstarted}</DateTimeFormatter>
@@ -106,7 +106,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "scheduled_completion",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.scheduled_completion")}: </label>
                         <DateTimeFormatter>{data.scheduled_completion}</DateTimeFormatter>
@@ -119,7 +119,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "actual_completion",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.actual_completion")}: </label>
                         <DateTimeFormatter>{data.actual_completion}</DateTimeFormatter>
@@ -132,7 +132,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "scheduled_delivery",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.scheduled_delivery")}: </label>
                         <DateTimeFormatter>{data.scheduled_delivery}</DateTimeFormatter>
@@ -145,7 +145,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "actual_delivery",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.actual_delivery")}: </label>
                         <DateTimeFormatter>{data.actual_delivery}</DateTimeFormatter>
@@ -158,7 +158,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "date_invoiced",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.date_invoiced")}: </label>
                         <DateTimeFormatter>{data.date_invoiced}</DateTimeFormatter>
@@ -171,7 +171,7 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
               ? [
                   {
                     key: "date_exported",
-                    children: (
+                    content: (
                       <>
                         <label>{t("jobs.fields.date_exported")}: </label>
                         <DateTimeFormatter>{data.date_exported}</DateTimeFormatter>

client/src/components/job-detail-lines/job-lines-expander.component.jsx

@@ -36,7 +36,7 @@ export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
   });
 
   if (loading) return <Skeleton />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <Row>

client/src/components/job-detail-lines/jobs-lines-expander-simple.component.jsx

@@ -28,7 +28,7 @@ export function JobLinesExpanderSimple({ jobline, jobid, technician }) {
   });
 
   if (loading) return <Skeleton />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <Row>

client/src/components/job-profile-data-warning/job-profile-data-warning.component.jsx

@@ -11,6 +11,6 @@ export default function JobProfileDataWarning({ job }) {
     Object.keys(job.materials).length === 0;
 
   if (missingProfileInfo && InstanceRenderManager({ rome: true }))
-    return <Alert type="error" message={t("jobs.labels.missingprofileinfo")}></Alert>;
+    return <Alert type="error" title={t("jobs.labels.missingprofileinfo")}></Alert>;
   return null;
 }

client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx

@@ -47,7 +47,7 @@ function JobReconciliationModalContainer({ reconciliationModal, toggleModalVisib
       className="imex-reconciliation-modal"
     >
       {loading && <LoadingSpinner loading={loading} />}
-      {error && <AlertComponent message={error.message} type="error" />}
+      {error && <AlertComponent title={error.message} type="error" />}
       {data && <JobReconciliationModalComponent job={data?.jobs_by_pk} bills={data?.bills} />}
     </Modal>
   );

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

@@ -95,8 +95,8 @@ const JobSearchSelect = (
           : null}
       </Select>
 
-      {error ? <AlertComponent message={error.message} type="error" /> : null}
-      {idError ? <AlertComponent message={idError.message} type="error" /> : null}
+      {error ? <AlertComponent title={error.message} type="error" /> : null}
+      {idError ? <AlertComponent title={idError.message} type="error" /> : null}
     </div>
   );
 };

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

@@ -65,8 +65,12 @@ export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
               <Col span={24}>
                 <Card title="DEVELOPMENT USE ONLY">
                   <JobCalculateTotals job={job} disabled={jobRO} />
-                  <Collapse>
-                    <Collapse.Panel key="json-totals" header="JSON Tree Totals">
+                  <Collapse
+                    items={[
+                      {
+                        key: "json-totals",
+                        label: "JSON Tree Totals",
+                        children: (
                           <div>
                             <pre>
                               {JSON.stringify(
@@ -80,8 +84,10 @@ export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
                               )}
                             </pre>
                           </div>
-                    </Collapse.Panel>
-                  </Collapse>
+                        )
+                      }
+                    ]}
+                  />
                 </Card>
               </Col>
             )}

client/src/components/jobs-available-table/jobs-available-table.component.jsx

@@ -148,7 +148,7 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
                 </Button>
               </>
             )}
-            {isClosed && <Alert type="error" message={t("jobs.labels.alreadyclosed")}></Alert>}
+            {isClosed && <Alert type="error" title={t("jobs.labels.alreadyclosed")}></Alert>}
           </Space>
         );
       }

client/src/components/jobs-available-table/jobs-available-table.container.jsx

@@ -382,7 +382,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
     if (availableJobId && clm_no) addJobAsSupp({ id: availableJobId, clm_no: clm_no });
   }, [addJobAsSupp, availableJobId, clm_no]);
 
-  if (error) return <AlertComponent type="error" message={error.message} />;
+  if (error) return <AlertComponent type="error" title={error.message} />;
 
   return (
     <LoadingSpinner loading={insertLoading} message={t("jobs.labels.creating_new_job")}>

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

@@ -41,8 +41,14 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
 
   return (
     <div>
-      <Collapse defaultActiveKey="insurance">
-        <Collapse.Panel key="insurance" header={t("menus.jobsdetail.insurance")} forceRender>
+      <Collapse
+        defaultActiveKey="insurance"
+        items={[
+          {
+            key: "insurance",
+            label: t("menus.jobsdetail.insurance"),
+            forceRender: true,
+            children: (
               <LayoutFormRow>
                 <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
                   <Input />
@@ -152,8 +158,13 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
                   <Input />
                 </Form.Item>
               </LayoutFormRow>
-        </Collapse.Panel>
-        <Collapse.Panel forceRender key="claim" header={t("menus.jobsdetail.claimdetail")}>
+            )
+          },
+          {
+            key: "claim",
+            label: t("menus.jobsdetail.claimdetail"),
+            forceRender: true,
+            children: (
               <LayoutFormRow>
                 <Form.Item label={t("jobs.fields.loss_desc")} name="loss_desc">
                   <Input />
@@ -193,8 +204,14 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
                   <Input />
                 </Form.Item>
               </LayoutFormRow>
-        </Collapse.Panel>
-        <Collapse.Panel forceRender key="financial" header={t("menus.jobsdetail.financials")}>
+            )
+          },
+          {
+            key: "financial",
+            label: t("menus.jobsdetail.financials"),
+            forceRender: true,
+            children: (
+              <>
                 <JobsDetailRatesChangeButton form={form} />
                 {InstanceRenderManager({
                   imex: <JobsMarkPstExempt form={form} />
@@ -213,7 +230,11 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
                     <CurrencyInput />
                   </Form.Item>
                   {bodyshop.region_config.toLowerCase().startsWith("ca") && (
-              <Form.Item label={t("jobs.fields.ca_gst_registrant")} name="ca_gst_registrant" valuePropName="checked">
+                    <Form.Item
+                      label={t("jobs.fields.ca_gst_registrant")}
+                      name="ca_gst_registrant"
+                      valuePropName="checked"
+                    >
                       <Switch />
                     </Form.Item>
                   )}
@@ -315,8 +336,11 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
                     <CurrencyInput />
                   </Form.Item>
                 </LayoutFormRow>
-        </Collapse.Panel>
-      </Collapse>
+              </>
+            )
+          }
+        ]}
+      />
       <JobsDetailRatesParts jobRO={false} expanded required={selected && true} form={form} />
       {InstanceRenderManager({
         rome: (

client/src/components/jobs-create-owner-info/jobs-create-owner-info.container.jsx

@@ -14,6 +14,6 @@ export default function JobsCreateOwnerContainer() {
     nextFetchPolicy: "network-only"
   });
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   return <JobsCreateOwnerInfoComponent loading={loading} owners={data ? data.search_owners : null} />;
 }

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.container.jsx

@@ -14,7 +14,7 @@ export default function JobsCreateVehicleInfoContainer({ form }) {
     nextFetchPolicy: "network-only"
   });
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return <JobsCreateVehicleInfoComponent loading={loading} vehicles={data ? data.search_vehicles : null} form={form} />;
 }

client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx

@@ -11,7 +11,7 @@ export default function JobsDetailLaborContainer({ jobId, techConsole, job }) {
     nextFetchPolicy: "network-only"
   });
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <JobsDetailLaborComponent

client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx

@@ -41,7 +41,7 @@ export function JobsDetailPliComponent({
     return (
       <div>
         <PartsOrderModal />
-        {billsQuery.error ? <AlertComponent message={billsQuery.error.message} type="error" /> : null}
+        {billsQuery.error ? <AlertComponent title={billsQuery.error.message} type="error" /> : null}
         <BillDetailEditcontainer />
         <Row gutter={[16, 16]}>
           <Col span={24}>

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

@@ -13,8 +13,15 @@ export function JobsDetailRatesLabor({ jobRO, expanded, form }) {
   const { t } = useTranslation();
 
   return (
-    <Collapse defaultActiveKey={expanded && "rates"}>
-      <Collapse.Panel forceRender header={t("jobs.labels.cieca_pfl")} key="cieca_pfl">
+    <Collapse
+      defaultActiveKey={expanded && "rates"}
+      items={[
+        {
+          key: "cieca_pfl",
+          label: t("jobs.labels.cieca_pfl"),
+          forceRender: true,
+          children: (
+            <>
               <LayoutFormRow header={t("joblines.fields.lbr_types.LAB")}>
                 <Form.Item label={t("jobs.fields.cieca_pfl.lbr_adjp")} name={["cieca_pfl", "LAB", "lbr_adjp"]}>
                   <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
@@ -600,8 +607,11 @@ export function JobsDetailRatesLabor({ jobRO, expanded, form }) {
                   <Switch disabled={jobRO} />
                 </Form.Item>
               </LayoutFormRow>
-      </Collapse.Panel>
-    </Collapse>
+            </>
+          )
+        }
+      ]}
+    />
   );
 }
 

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

@@ -13,8 +13,15 @@ export function JobsDetailRatesMaterials({ jobRO, expanded, form }) {
   const { t } = useTranslation();
 
   return (
-    <Collapse defaultActiveKey={expanded && "rates"}>
-      <Collapse.Panel forceRender header={t("jobs.fields.materials.materials")} key="materials">
+    <Collapse
+      defaultActiveKey={expanded && "rates"}
+      items={[
+        {
+          key: "materials",
+          label: t("jobs.fields.materials.materials"),
+          forceRender: true,
+          children: (
+            <>
               <LayoutFormRow header={t("jobs.fields.materials.MAPA")}>
                 <Form.Item label={t("jobs.fields.materials.cal_maxdlr")} name={["materials", "MAPA", "cal_maxdlr"]}>
                   <InputNumber min={0} precision={2} disabled={jobRO} />
@@ -157,8 +164,11 @@ export function JobsDetailRatesMaterials({ jobRO, expanded, form }) {
                   <Switch />
                 </Form.Item>
               </LayoutFormRow>
-      </Collapse.Panel>
-    </Collapse>
+            </>
+          )
+        }
+      ]}
+    />
   );
 }
 

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

@@ -10,8 +10,15 @@ export function JobsDetailRatesOther({ expanded }) {
   const { t } = useTranslation();
 
   return (
-    <Collapse defaultActiveKey={expanded && "rates"}>
-      <Collapse.Panel forceRender header={t("jobs.labels.cieca_pfo")} key="cieca_pfo">
+    <Collapse
+      defaultActiveKey={expanded && "rates"}
+      items={[
+        {
+          key: "cieca_pfo",
+          label: t("jobs.labels.cieca_pfo"),
+          forceRender: true,
+          children: (
+            <>
               <LayoutFormRow noDivider>
                 <Form.Item
                   label={t("jobs.fields.cieca_pfo.tow_t_in1")}
@@ -85,8 +92,11 @@ export function JobsDetailRatesOther({ expanded }) {
                   <Switch />
                 </Form.Item>
               </LayoutFormRow>
-      </Collapse.Panel>
-    </Collapse>
+            </>
+          )
+        }
+      ]}
+    />
   );
 }
 

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

@@ -14,10 +14,20 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
   const { t } = useTranslation();
 
   return (
-    <Collapse defaultActiveKey={expanded && "rates"}>
-      <Collapse.Panel forceRender header={t("jobs.labels.parts_tax_rates")} key="rates">
+    <Collapse
+      defaultActiveKey={expanded && "rates"}
+      items={[
+        {
+          key: "rates",
+          label: t("jobs.labels.parts_tax_rates"),
+          forceRender: true,
+          children: (
+            <>
               <LayoutFormRow header={t("joblines.fields.part_types.PAA")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAA", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "PAA", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -27,7 +37,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAA", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "PAA", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -92,7 +105,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.PAC")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAC", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "PAC", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -102,7 +118,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAC", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "PAC", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -167,7 +186,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.PAL")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAL", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "PAL", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -177,7 +199,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAL", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "PAL", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -242,7 +267,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.PAG")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAG", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "PAG", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -252,7 +280,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAG", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "PAG", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -317,7 +348,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.PAM")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAM", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "PAM", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -327,7 +361,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAM", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "PAM", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -392,7 +429,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.PAN")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAN", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "PAN", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -402,7 +442,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAN", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "PAN", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -467,7 +510,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.PAO")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAO", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "PAO", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -477,7 +523,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAO", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "PAO", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -542,7 +591,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.PAP")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAP", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "PAP", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -552,7 +604,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAP", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "PAP", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -617,7 +672,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.PAR")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAR", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "PAR", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -627,7 +685,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAR", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "PAR", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -692,7 +753,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.PAS")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PAS", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "PAS", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -702,7 +766,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PAS", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "PAS", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -767,7 +834,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.PASL")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "PASL", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "PASL", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -777,7 +847,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "PASL", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "PASL", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -842,7 +915,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.CCDR")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "CCDR", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "CCDR", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -852,7 +928,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "CCDR", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "CCDR", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -870,7 +949,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.CCF")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "CCF", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "CCF", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -880,7 +962,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "CCF", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "CCF", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -898,7 +983,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.CCM")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "CCM", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "CCM", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -908,7 +996,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "CCM", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "CCM", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -926,7 +1017,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.CCC")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "CCC", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "CCC", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -936,7 +1030,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "CCC", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "CCC", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -954,7 +1051,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 </Form.Item>
               </LayoutFormRow>
               <LayoutFormRow header={t("joblines.fields.part_types.CCD")}>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_discp")} name={["parts_tax_rates", "CCD", "prt_discp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_discp")}
+                  name={["parts_tax_rates", "CCD", "prt_discp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -964,7 +1064,10 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                 >
                   <Switch />
                 </Form.Item>
-          <Form.Item label={t("jobs.fields.parts_tax_rates.prt_mkupp")} name={["parts_tax_rates", "CCD", "prt_mkupp"]}>
+                <Form.Item
+                  label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
+                  name={["parts_tax_rates", "CCD", "prt_mkupp"]}
+                >
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
                 <Form.Item
@@ -1010,8 +1113,11 @@ export function JobsDetailRatesParts({ jobRO, expanded, form }) {
                   <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
                 </Form.Item>
               </LayoutFormRow>
-      </Collapse.Panel>
-    </Collapse>
+            </>
+          )
+        }
+      ]}
+    />
   );
 }
 

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

@@ -47,11 +47,17 @@ export function JobsDetailRatesTaxes({ jobRO, expanded, bodyshop }) {
     );
   }
   return (
-    <Collapse defaultActiveKey={expanded && "rates"}>
-      <Collapse.Panel forceRender header={t("jobs.labels.cieca_pft")} key="cieca_pft">
-        {formItems}
-      </Collapse.Panel>
-    </Collapse>
+    <Collapse
+      defaultActiveKey={expanded && "rates"}
+      items={[
+        {
+          key: "cieca_pft",
+          label: t("jobs.labels.cieca_pft"),
+          forceRender: true,
+          children: formItems
+        }
+      ]}
+    />
   );
 }
 

client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx

@@ -48,7 +48,7 @@ export function JobsDocumentsContainer({
   });
 
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent type="error" message={error.message} />;
+  if (error) return <AlertComponent type="error" title={error.message} />;
 
   if (Imgproxy.treatment === "on") {
     return (

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.container.jsx

@@ -21,7 +21,7 @@ export default function JobsDocumentsImgproxyContainer({ jobId, billId, document
   });
 
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent type="error" message={error.message} />;
+  if (error) return <AlertComponent type="error" title={error.message} />;
 
   return (
     <JobDocuments

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

@@ -133,7 +133,7 @@ export function JobsDocumentsLocalGallery({
         <Col span={24}>
           <Card title={t("jobs.labels.documents-images")}>
             {optimized && (
-              <Alert style={{ margin: "4px" }} message={t("documents.labels.optimizedimage")} type="success" />
+              <Alert style={{ margin: "4px" }} title={t("documents.labels.optimizedimage")} type="success" />
             )}
             <LocalMediaGrid
               images={jobMedia.images}

client/src/components/jobs-find-modal/jobs-find-modal.container.jsx

@@ -69,7 +69,7 @@ export default connect(
       {...modalProps}
     >
       {loading ? <LoadingSpinner /> : null}
-      {error ? <AlertComponent message={error.message} type="error" /> : null}
+      {error ? <AlertComponent title={error.message} type="error" /> : null}
       <JobsFindModalComponent
         selectedJob={selectedJob}
         setSelectedJob={setSelectedJob}

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

@@ -46,7 +46,7 @@ export function JobsList({ bodyshop }) {
   const history = useNavigate();
   const [searchText, setSearchText] = useState("");
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   const jobs = data
     ? searchText === ""

client/src/components/jobs-notes/jobs-notes.container.jsx

@@ -53,7 +53,7 @@ export function JobNotesContainer({ jobId, insertAuditTrail }) {
   };
 
   //if (loading) return <SpinComponent />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   return (
     <JobNotesComponent
       jobId={jobId}

client/src/components/jobs-ready-list/jobs-ready-list.component.jsx

@@ -53,7 +53,7 @@ export function JobsReadyList({ bodyshop }) {
   const history = useNavigate();
   const [searchText, setSearchText] = useState("");
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   const jobs = data
     ? searchText === ""

client/src/components/labor-allocations-table/labor-allocations-table.component.jsx

@@ -264,7 +264,7 @@ export function LaborAllocationsTable({
         </Col>
       )}
       {showWarning && Math.abs(summary.difference.toFixed(1)) !== 0 && (
-        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstandinghours")} />
+        <Alert style={{ margin: "8px 0px" }} type="warning" title={t("jobs.labels.outstandinghours")} />
       )}
     </Row>
   );

client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx

@@ -304,7 +304,7 @@ export function PayrollLaborAllocationsTable({
         </Col>
       )}
       {showWarning && summary.difference !== 0 && (
-        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstandinghours")} />
+        <Alert style={{ margin: "8px 0px" }} type="warning" title={t("jobs.labels.outstandinghours")} />
       )}
     </Row>
   );

client/src/components/notification-center/notification-center.component.jsx

@@ -113,7 +113,7 @@ const NotificationCenterComponent = forwardRef(
         </div>
         {!isEmployee ? (
           <div style={{ padding: 10 }}>
-            <Alert message={t("notifications.labels.employee-notification")} type="warning" />
+            <Alert title={t("notifications.labels.employee-notification")} type="warning" />
           </div>
         ) : (
           <Virtuoso

client/src/components/notification-settings/notification-settings-form.component.jsx

@@ -123,7 +123,7 @@ const NotificationSettingsForm = ({ currentUser, bodyshop }) => {
     setIsDirty(false);
   };
 
-  if (error) return <AlertComponent type="error" message={error.message} />;
+  if (error) return <AlertComponent type="error" title={error.message} />;
   if (loading) return <LoadingSpinner />;
 
   const columns = [
@@ -201,7 +201,7 @@ const NotificationSettingsForm = ({ currentUser, bodyshop }) => {
       >
         {!isEmployee && (
           <div style={{ width: "100%", marginBottom: "10px" }}>
-            <Alert message={t("notifications.labels.employee-notification")} type="warning" />
+            <Alert title={t("notifications.labels.employee-notification")} type="warning" />
           </div>
         )}
         <Table dataSource={dataSource} columns={columns} pagination={false} bordered rowKey="key" />

client/src/components/owner-find-modal/owner-find-modal.container.jsx

@@ -45,7 +45,7 @@ export default function OwnerFindModalContainer({
       {...modalProps}
     >
       {loading ? <LoadingSpinner /> : null}
-      {error ? <AlertComponent message={error.message} type="error" /> : null}
+      {error ? <AlertComponent title={error.message} type="error" /> : null}
       {owner ? (
         <>
           <Input.Search

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

@@ -56,14 +56,15 @@ const OwnerSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
       <Select
         ref={ref}
         disabled={disabled}
-        showSearch
+        showSearch={{
+          filterOption: false,
+          onSearch: handleSearch
+        }}
         autoFocus
         value={option}
         style={{
           width: "100%"
         }}
-        filterOption={false}
-        onSearch={handleSearch}
         //     onChange={setOption}
         onChange={handleSelect}
         onSelect={handleSelect}
@@ -79,8 +80,8 @@ const OwnerSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
           : null}
       </Select>
       {idLoading || loading ? <LoadingOutlined /> : null}
-      {error ? <AlertComponent message={error.message} type="error" /> : null}
-      {idError ? <AlertComponent message={idError.message} type="error" /> : null}
+      {error ? <AlertComponent title={error.message} type="error" /> : null}
+      {idError ? <AlertComponent title={idError.message} type="error" /> : null}
     </div>
   );
 };

client/src/components/owners-list/owners-list.container.jsx

@@ -24,7 +24,7 @@ export default function OwnersListContainer() {
     }
   });
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   return (
     <OwnersListComponent
       loading={loading}

client/src/components/parts-order-modal/parts-order-modal-price-change.component.jsx

@@ -2,6 +2,7 @@ import { DownOutlined } from "@ant-design/icons";
 import { Dropdown, InputNumber, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+
 export default function PartsOrderModalPriceChange({ form, field }) {
   const { t } = useTranslation();
   const menu = {

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -334,7 +334,7 @@ export function PartsOrderModalContainer({
       width="75%"
       forceRender
     >
-      {error ? <AlertComponent message={error.message} type="error" /> : null}
+      {error ? <AlertComponent title={error.message} type="error" /> : null}
       <Form form={form} layout="vertical" autoComplete="no" onFinish={handleFinish} initialValues={initialValues}>
         {loading ? (
           <LoadingSpinner />

client/src/components/parts-queue-card/parts-queue-card.component.jsx

@@ -50,7 +50,7 @@ export default function PartsQueueDetailCard() {
   return (
     <Drawer open={!!selected} destroyOnHidden width={drawerPercentage} placement="right" onClose={handleDrawerClose}>
       {loading ? <LoadingSpinner /> : null}
-      {error ? <AlertComponent message={error.message} type="error" /> : null}
+      {error ? <AlertComponent title={error.message} type="error" /> : null}
       {data ? (
         <Card
           title={

client/src/components/parts-queue-list/parts-queue.list.component.jsx

@@ -44,7 +44,7 @@ export function PartsQueueListComponent({ bodyshop }) {
   const { t } = useTranslation();
   const [searchText, setSearchText] = useState("");
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   const jobs = data
     ? searchText === ""

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

@@ -45,7 +45,7 @@ export default function PartsShopInfoContainer() {
     if (data) form.resetFields();
   }, [form, data]);
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   if (loading) return <LoadingSpinner />;
 
   return (

client/src/components/payment-form/payment-form.totalpayments.component.jsx

@@ -17,7 +17,7 @@ export default function PaymentFormTotalPayments({ jobid }) {
   });
 
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   if (!data) return <></>;
   const totalPayments = data.jobs_by_pk.payments.reduce((acc, val) => {

client/src/components/phonebook-form/phonebook-form.container.jsx

@@ -132,7 +132,7 @@ function PhonebookFormContainer({ refetch, bodyshop }) {
   }, [data, form, phonebookentry]);
 
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <Form

client/src/components/production-list-detail/production-list-detail.component.jsx

@@ -132,7 +132,7 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
       open={selected}
     >
       {loading && <LoadingSkeleton />}
-      {error && <AlertComponent error={JSON.stringify(error)} />}
+      {error && <AlertComponent title={JSON.stringify(error)} type="error" />}
       {!loading && data && (
         <div>
           <CardTemplate title={t("jobs.labels.employeeassignments")} loading={loading}>

client/src/components/production-list-table/production-list-table.component.jsx

@@ -219,7 +219,7 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
       {hasUnsavedChanges && (
         <AlertComponent
           type="warning"
-          message={
+          title={
             <div>
               <span>{t("general.messages.unsavedchanges")} </span>
               <span

client/src/components/profile-shops/profile-shops.container.jsx

@@ -59,7 +59,7 @@ export function ProfileShopsContainer({ bodyshop, currentUser }) {
     window.location.reload();
   };
 
-  if (error) return <AlertComponent type="error" message={error.message} />;
+  if (error) return <AlertComponent type="error" title={error.message} />;
   return (
     <ProfileShopsComponent
       loading={loading}

client/src/components/rbac-wrapper/rbac-wrapper.component.jsx

@@ -21,7 +21,7 @@ function RbacWrapper({ authLevel, bodyshop, requiredAuthLevel, noauth, children,
     return children;
   //return <div>{React.cloneElement(children, restProps)}</div>;
 
-  return noauth || <AlertComponent message={t("general.messages.rbacunauth")} type="warning" />;
+  return noauth || <AlertComponent title={t("general.messages.rbacunauth")} type="warning" />;
 }
 
 export function HasRbacAccess({ authLevel, bodyshop, requiredAuthLevel, action }) {

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

@@ -80,19 +80,23 @@ export function ScheduleCalendarWrapperComponent({
       {HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) &&
         problemJobs &&
         (problemJobs.length > 2 ? (
-          <Collapse style={{ marginBottom: "5px" }}>
-            <Collapse.Panel
-              key="1"
-              header={
-                <span style={{ color: "var(--error-header-text)" }}>{t("appointments.labels.severalerrorsfound")}</span>
-              }
-            >
+          <Collapse
+            style={{ marginBottom: "5px" }}
+            items={[
+              {
+                key: "1",
+                label: (
+                  <span style={{ color: "var(--error-header-text)" }}>
+                    {t("appointments.labels.severalerrorsfound")}
+                  </span>
+                ),
+                children: (
                   <Space orientation="vertical" style={{ width: "100%" }}>
                     {problemJobs.map((problem) => (
                       <Alert
                         key={problem.id}
                         type="error"
-                    message={
+                        title={
                           <Trans
                             i18nKey="appointments.labels.dataconsistency"
                             components={[<Link key={problem.id} to={`/manage/jobs/${problem.id}`} target="_blank" />]}
@@ -105,15 +109,17 @@ export function ScheduleCalendarWrapperComponent({
                       />
                     ))}
                   </Space>
-            </Collapse.Panel>
-          </Collapse>
+                )
+              }
+            ]}
+          />
         ) : (
           <Space orientation="vertical" style={{ width: "100%", marginBottom: "5px" }}>
             {problemJobs.map((problem) => (
               <Alert
                 key={problem.id}
                 type="error"
-                message={
+                title={
                   <Trans
                     i18nKey="appointments.labels.dataconsistency"
                     components={[<Link key={problem.id} to={`/manage/jobs/${problem.id}`} target="_blank" />]}

client/src/components/schedule-calendar/schedule-calendar.container.jsx

@@ -42,7 +42,7 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
   }, [data, range, calculateScheduleLoad]);
 
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   let normalizedData = [
     ...data.appointments.map((e) => {
       //Required because Hasura returns a string instead of a date object.

client/src/components/schedule-existing-appointments-list/schedule-existing-appointments-list.component.jsx

@@ -7,7 +7,7 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 export default function ScheduleExistingAppointmentsList({ existingAppointments }) {
   const { t } = useTranslation();
   if (existingAppointments.loading) return <LoadingSpinner />;
-  if (existingAppointments.error) return <AlertComponent message={existingAppointments.error.message} type="error" />;
+  if (existingAppointments.error) return <AlertComponent title={existingAppointments.error.message} type="error" />;
 
   return (
     <div>

client/src/components/schedule-production-list/schedule-production-list.component.jsx

@@ -19,7 +19,7 @@ export default function ScheduleProductionList() {
       <Card>
         <div onClick={(e) => e.stopPropagation()} className="jobs-in-production-table">
           {loading ? <LoadingSkeleton /> : null}
-          {error ? <AlertComponent message={error.message} type="error" /> : null}
+          {error ? <AlertComponent title={error.message} type="error" /> : null}
           {data ? (
             <table>
               <tbody>

client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx

@@ -119,7 +119,7 @@ export default function ScoreboardJobsList() {
           }))
         }
       >
-        {error && <AlertComponent type="error" message={JSON.stringify(error)} />}
+        {error && <AlertComponent type="error" title={JSON.stringify(error)} />}
         <Card
           extra={
             <Space align="middle" wrap>

client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.component.jsx

@@ -293,7 +293,7 @@ export function ScoreboardTimeTicketsStats({ bodyshop }) {
     };
   }, [fixedPeriods, data, bodyshop]);
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   if (loading) return <LoadingSpinner />;
   return (
     <Row gutter={[16, 16]}>

client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx

@@ -219,7 +219,7 @@ export default function ScoreboardTimeTickets() {
     };
   }, [fixedPeriods, data, startDate, endDate]);
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   if (loading) return <LoadingSpinner />;
   return (
     <Row gutter={[16, 16]}>

client/src/components/shop-csi-config/shop-csi-config.component.jsx

@@ -19,7 +19,7 @@ export default function ShopCsiConfig() {
   const { t } = useTranslation();
 
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   return (
     <div>
       <Row>

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -113,7 +113,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
   };
 
   if (!search.employeeId) return null;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   const columns = [
     {

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

@@ -15,7 +15,7 @@ function ShopEmployeesContainer() {
     nextFetchPolicy: "network-only"
   });
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <div>

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

@@ -68,7 +68,7 @@ export default function ShopInfoContainer() {
     preserveHiddenFormData();
   }, [data, form, preserveHiddenFormData]);
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   if (loading) return <LoadingSpinner />;
   return (
     <Form

client/src/components/shop-info/shop-info.parts-scan.jsx

@@ -168,7 +168,6 @@ export default function ShopInfoPartsScan({ form }) {
                             label={t("bodyshop.fields.md_parts_scan.caseInsensitive")}
                             name={[field.name, "caseInsensitive"]}
                             valuePropName="checked"
-                            initialValue={true}
                             labelCol={{ span: 14 }}
                             wrapperCol={{ span: 10 }}
                           >
@@ -183,7 +182,6 @@ export default function ShopInfoPartsScan({ form }) {
                           label={t("bodyshop.fields.md_parts_scan.mark_critical")}
                           name={[field.name, "mark_critical"]}
                           valuePropName="checked"
-                          initialValue={true}
                           labelCol={{ span: 14 }}
                           wrapperCol={{ span: 10 }}
                         >
@@ -242,7 +240,14 @@ export default function ShopInfoPartsScan({ form }) {
               <Form.Item>
                 <Button
                   type="dashed"
-                  onClick={() => add({ field: "line_desc", operation: "contains" })}
+                  onClick={() =>
+                    add({
+                      field: "line_desc",
+                      operation: "contains",
+                      mark_critical: true,
+                      caseInsensitive: true
+                    })
+                  }
                   style={{ width: "100%" }}
                 >
                   {t("bodyshop.actions.addpartsrule")}

client/src/components/shop-info/shop-info.responsibilitycenters.taxes.component.jsx

@@ -44,13 +44,19 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
   }
   return (
     <>
-      <Divider orientation="left" type="horizontal" style={{ marginTop: ".8rem" }}>
+      <Divider titlePlacement="left" orientation="horizontal" style={{ marginTop: ".8rem" }}>
         {t("jobs.labels.cieca_pft")}
       </Divider>
       {formItems}
 
-      <Collapse>
-        <Collapse.Panel forceRender header={t("jobs.labels.cieca_pfl")} key="cieca_pfl">
+      <Collapse
+        items={[
+          {
+            key: "cieca_pfl",
+            label: t("jobs.labels.cieca_pfl"),
+            forceRender: true,
+            children: (
+              <>
                 <LayoutFormRow header={t("joblines.fields.lbr_types.LAB")}>
                   <Form.Item
                     label={t("jobs.fields.cieca_pfl.lbr_adjp")}
@@ -73,7 +79,12 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                           name={["md_responsibility_centers", "cieca_pfl", "LAB", "lbr_taxp"]}
                           rules={[
                             {
-                        required: form.getFieldValue(["md_responsibility_centers", "cieca_pfl", "LAB", "lbr_tax_in"])
+                              required: form.getFieldValue([
+                                "md_responsibility_centers",
+                                "cieca_pfl",
+                                "LAB",
+                                "lbr_tax_in"
+                              ])
                               //message: t("general.validation.required"),
                             }
                           ]}
@@ -141,7 +152,12 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                           name={["md_responsibility_centers", "cieca_pfl", "LAD", "lbr_taxp"]}
                           rules={[
                             {
-                        required: form.getFieldValue(["md_responsibility_centers", "cieca_pfl", "LAD", "lbr_tax_in"])
+                              required: form.getFieldValue([
+                                "md_responsibility_centers",
+                                "cieca_pfl",
+                                "LAD",
+                                "lbr_tax_in"
+                              ])
                               //message: t("general.validation.required"),
                             }
                           ]}
@@ -209,7 +225,12 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                           name={["md_responsibility_centers", "cieca_pfl", "LAE", "lbr_taxp"]}
                           rules={[
                             {
-                        required: form.getFieldValue(["md_responsibility_centers", "cieca_pfl", "LAE", "lbr_tax_in"])
+                              required: form.getFieldValue([
+                                "md_responsibility_centers",
+                                "cieca_pfl",
+                                "LAE",
+                                "lbr_tax_in"
+                              ])
                               //message: t("general.validation.required"),
                             }
                           ]}
@@ -277,7 +298,12 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                           name={["md_responsibility_centers", "cieca_pfl", "LAF", "lbr_taxp"]}
                           rules={[
                             {
-                        required: form.getFieldValue(["md_responsibility_centers", "cieca_pfl", "LAF", "lbr_tax_in"])
+                              required: form.getFieldValue([
+                                "md_responsibility_centers",
+                                "cieca_pfl",
+                                "LAF",
+                                "lbr_tax_in"
+                              ])
                               //message: t("general.validation.required"),
                             }
                           ]}
@@ -345,7 +371,12 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                           name={["md_responsibility_centers", "cieca_pfl", "LAG", "lbr_taxp"]}
                           rules={[
                             {
-                        required: form.getFieldValue(["md_responsibility_centers", "cieca_pfl", "LAG", "lbr_tax_in"])
+                              required: form.getFieldValue([
+                                "md_responsibility_centers",
+                                "cieca_pfl",
+                                "LAG",
+                                "lbr_tax_in"
+                              ])
                               //message: t("general.validation.required"),
                             }
                           ]}
@@ -413,7 +444,12 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                           name={["md_responsibility_centers", "cieca_pfl", "LAM", "lbr_taxp"]}
                           rules={[
                             {
-                        required: form.getFieldValue(["md_responsibility_centers", "cieca_pfl", "LAM", "lbr_tax_in"])
+                              required: form.getFieldValue([
+                                "md_responsibility_centers",
+                                "cieca_pfl",
+                                "LAM",
+                                "lbr_tax_in"
+                              ])
                               //message: t("general.validation.required"),
                             }
                           ]}
@@ -481,7 +517,12 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                           name={["md_responsibility_centers", "cieca_pfl", "LAR", "lbr_taxp"]}
                           rules={[
                             {
-                        required: form.getFieldValue(["md_responsibility_centers", "cieca_pfl", "LAR", "lbr_tax_in"])
+                              required: form.getFieldValue([
+                                "md_responsibility_centers",
+                                "cieca_pfl",
+                                "LAR",
+                                "lbr_tax_in"
+                              ])
                               //message: t("general.validation.required"),
                             }
                           ]}
@@ -549,7 +590,12 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                           name={["md_responsibility_centers", "cieca_pfl", "LAS", "lbr_taxp"]}
                           rules={[
                             {
-                        required: form.getFieldValue(["md_responsibility_centers", "cieca_pfl", "LAS", "lbr_tax_in"])
+                              required: form.getFieldValue([
+                                "md_responsibility_centers",
+                                "cieca_pfl",
+                                "LAS",
+                                "lbr_tax_in"
+                              ])
                               //message: t("general.validation.required"),
                             }
                           ]}
@@ -617,7 +663,12 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                           name={["md_responsibility_centers", "cieca_pfl", "LAU", "lbr_taxp"]}
                           rules={[
                             {
-                        required: form.getFieldValue(["md_responsibility_centers", "cieca_pfl", "LAU", "lbr_tax_in"])
+                              required: form.getFieldValue([
+                                "md_responsibility_centers",
+                                "cieca_pfl",
+                                "LAU",
+                                "lbr_tax_in"
+                              ])
                               //message: t("general.validation.required"),
                             }
                           ]}
@@ -663,9 +714,15 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                     <Switch />
                   </Form.Item>
                 </LayoutFormRow>
-        </Collapse.Panel>
-
-        <Collapse.Panel forceRender header={t("jobs.fields.materials.materials")} key="materials">
+              </>
+            )
+          },
+          {
+            key: "materials",
+            label: t("jobs.fields.materials.materials"),
+            forceRender: true,
+            children: (
+              <>
                 <LayoutFormRow header={t("jobs.fields.materials.MAPA")}>
                   <Form.Item
                     label={t("jobs.fields.materials.cal_maxdlr")}
@@ -700,7 +757,12 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                           name={["md_responsibility_centers", "cieca_pfm", "MAPA", "mat_taxp"]}
                           rules={[
                             {
-                        required: form.getFieldValue(["md_responsibility_centers", "cieca_pfm", "MAPA", "tax_ind"])
+                              required: form.getFieldValue([
+                                "md_responsibility_centers",
+                                "cieca_pfm",
+                                "MAPA",
+                                "tax_ind"
+                              ])
                               //message: t("general.validation.required"),
                             }
                           ]}
@@ -780,7 +842,12 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                           name={["md_responsibility_centers", "cieca_pfm", "MASH", "mat_taxp"]}
                           rules={[
                             {
-                        required: form.getFieldValue(["md_responsibility_centers", "cieca_pfm", "MASH", "tax_ind"])
+                              required: form.getFieldValue([
+                                "md_responsibility_centers",
+                                "cieca_pfm",
+                                "MASH",
+                                "tax_ind"
+                              ])
                               //message: t("general.validation.required"),
                             }
                           ]}
@@ -826,9 +893,15 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                     <Switch />
                   </Form.Item>
                 </LayoutFormRow>
-        </Collapse.Panel>
-
-        <Collapse.Panel forceRender header={t("jobs.labels.cieca_pfo")} key="cieca_pfo">
+              </>
+            )
+          },
+          {
+            key: "cieca_pfo",
+            label: t("jobs.labels.cieca_pfo"),
+            forceRender: true,
+            children: (
+              <>
                 <LayoutFormRow noDivider>
                   <Form.Item
                     label={t("jobs.fields.cieca_pfo.tow_t_in1")}
@@ -902,8 +975,15 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                     <Switch />
                   </Form.Item>
                 </LayoutFormRow>
-        </Collapse.Panel>
-        <Collapse.Panel forceRender header={t("jobs.labels.parts_tax_rates")} key="rates">
+              </>
+            )
+          },
+          {
+            key: "rates",
+            label: t("jobs.labels.parts_tax_rates"),
+            forceRender: true,
+            children: (
+              <>
                 <LayoutFormRow header={t("joblines.fields.part_types.PAA")}>
                   <Form.Item
                     label={t("jobs.fields.parts_tax_rates.prt_discp")}
@@ -2058,12 +2138,18 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                       <InputNumber min={0} max={100} precision={4} />
                     </Form.Item>
                   ) : null}
-            <Form.Item label={t("jobs.fields.tax_levies_rt")} name={["md_responsibility_centers", "tax_levies_rt"]}>
+                  <Form.Item
+                    label={t("jobs.fields.tax_levies_rt")}
+                    name={["md_responsibility_centers", "tax_levies_rt"]}
+                  >
                     <InputNumber min={0} max={100} precision={4} />
                   </Form.Item>
                 </LayoutFormRow>
-        </Collapse.Panel>
-      </Collapse>
+              </>
+            )
+          }
+        ]}
+      />
     </>
   );
 }

client/src/components/shop-info/shop-intellipay-config.component.jsx

@@ -25,7 +25,7 @@ export function ShopInfoIntellipay({ bodyshop, form }) {
           const { intellipay_config } = form.getFieldsValue();
 
           if (intellipay_config?.enable_cash_discount)
-            return <Alert message={t("bodyshop.labels.intellipay_cash_discount")} />;
+            return <Alert title={t("bodyshop.labels.intellipay_cash_discount")} />;
         }}
       </Form.Item>
 

client/src/components/shop-teams/shop-employee-teams.form.component.jsx

@@ -112,7 +112,7 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
   };
 
   if (!search.employeeTeamId) return null;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <Card

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

@@ -16,7 +16,7 @@ function ShopTeamsContainer() {
     nextFetchPolicy: "network-only"
   });
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <div>

client/src/components/shop-templates-list/shop-templates-list.container.jsx

@@ -19,7 +19,7 @@ export default function ShopTemplatesListContainer({ openState }) {
   const { t } = useTranslation();
   const search = queryString.parse(useLocation().search);
   const history = useNavigate();
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   const handleEdit = (record) => {
     if (record) {

client/src/components/shop-users/shop-users.component.jsx

@@ -62,7 +62,7 @@ export function ShopInfoUsersComponent({ bodyshop }) {
   ];
 
   if (error) {
-    return <AlertComponent type="error" message={JSON.stringify(error)} />;
+    return <AlertComponent type="error" title={JSON.stringify(error)} />;
   }
   return (
     <div>