feature/IO-3499-React-19 -Checkpoint

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

@@ -1,5 +1,5 @@
 import { WarningFilled } from "@ant-design/icons";
-import { Form, Input, InputNumber, Space } from "antd";
+import { Card, Form, Input, InputNumber, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { DateFormatter } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
@@ -19,9 +19,9 @@ import ContractFormJobPrefill from "./contract-form-job-prefill.component";
 export default function ContractFormComponent({ form, create = false, selectedJobState, selectedCar }) {
   const { t } = useTranslation();
   return (
-    <>
+    <Card>
       {!create && <FormFieldsChanged form={form} />}
-      <LayoutFormRow>
+      <LayoutFormRow noDivider={true}>
         {!create && (
           <Form.Item
             label={t("contracts.fields.status")}
@@ -310,6 +310,6 @@ export default function ContractFormComponent({ form, create = false, selectedJo
           <InputNumber precision={2} />
         </Form.Item>
       </LayoutFormRow>
-    </>
+    </Card>
   );
 }

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -1,6 +1,6 @@
 import { WarningFilled } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client/react";
-import { Button, Form, Input, InputNumber, Space } from "antd";
+import { Button, Card, Form, Input, InputNumber, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import dayjs from "../../utils/day";
 import { useTranslation } from "react-i18next";
@@ -19,7 +19,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
   const client = useApolloClient();
 
   return (
-    <div>
+    <Card>
       <PageHeader
         title={t("menus.header.courtesycars")}
         extra={
@@ -314,6 +314,6 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
           <CurrencyInput />
         </Form.Item>
       </LayoutFormRow>
-    </div>
+    </Card>
   );
 }

client/src/pages/contract-detail/contract-detail.page.container.jsx

@@ -41,19 +41,25 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem, set
 
   useEffect(() => {
     setSelectedHeader("contracts");
-    document.title = loading
-      ? InstanceRenderManager({
-          imex: t("titles.imexonline"),
-          rome: t("titles.romeonline")
-        })
-      : error
-        ? InstanceRenderManager({
-            imex: t("titles.imexonline"),
-            rome: t("titles.romeonline")
-          })
-        : t("titles.contracts-detail", {
-            id: (data?.cccontracts_by_pk && data.cccontracts_by_pk.agreementnumber) || ""
-          });
+    
+    const appName = InstanceRenderManager({
+      imex: "$t(titles.imexonline)",
+      rome: "$t(titles.romeonline)"
+    });
+    
+    const fallbackTitle = InstanceRenderManager({
+      imex: t("titles.imexonline"),
+      rome: t("titles.romeonline")
+    });
+    
+    if (loading || error) {
+      document.title = fallbackTitle;
+    } else {
+      document.title = t("titles.contracts-detail", {
+        id: (data?.cccontracts_by_pk && data.cccontracts_by_pk.agreementnumber) || "",
+        app: appName
+      });
+    }
 
     setBreadcrumbs([
       { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },

client/src/translations/en_us/common.json

@@ -3574,7 +3574,7 @@
       "accounting-payables": "Payables | {{app}}",
       "accounting-payments": "Payments | {{app}}",
       "accounting-receivables": "Receivables | {{app}}",
-      "all_tasks": "All Tasks",
+      "all_tasks": "All Tasks | {{app}}",
       "app": "",
       "bc": {
         "simplified-parts-jobs": "Jobs",
@@ -3655,7 +3655,7 @@
       "jobsdetail": "Job {{ro_number}} | {{app}}",
       "jobsdocuments": "Job Documents {{ro_number}} | {{app}}",
       "manageroot": "Home | {{app}}",
-      "my_tasks": "My Tasks",
+      "my_tasks": "My Tasks | {{app}}",
       "owners": "All Owners | {{app}}",
       "owners-detail": "{{name}} | {{app}}",
       "parts-queue": "Parts Queue | {{app}}",