Added formrow components and for fields changed components + reformatted couple of job detail screens. BOD-160 BOD-155

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -23,6 +23,7 @@ import { createStructuredSelector } from "reselect";
 import { CalculateJob } from "../../components/job-totals-table/job-totals.utility";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import FormFieldsChanged from "../../components/form-fields-changed-alert/form-fields-changed-alert.component";
 
 const JobsLinesContainer = lazy(() =>
   import("../../components/job-detail-lines/job-lines.container")
@@ -96,14 +97,8 @@ export function JobsDetailPage({
 
   const search = queryString.parse(useLocation().search);
   const formItemLayout = {
-    labelCol: {
-      xs: { span: 12 },
-      sm: { span: 5 },
-    },
-    wrapperCol: {
-      xs: { span: 24 },
-      sm: { span: 12 },
-    },
+    layout: "vertical",
+    // size: "small",
   };
 
   const handleFinish = (values) => {
@@ -134,7 +129,6 @@ export function JobsDetailPage({
       <JobLineUpsertModalContainer />
       <Form
         form={form}
-        //onFieldsChange={(a, b) => console.log("a,b", a, b)}
         name='JobDetailForm'
         onFinish={handleFinish}
         {...formItemLayout}
@@ -143,6 +137,8 @@ export function JobsDetailPage({
           ...job,
           loss_date: job.loss_date ? moment(job.loss_date) : null,
         }}>
+        <FormFieldsChanged form={form} />
+
         <JobsDetailHeader
           job={job}
           mutationConvertJob={mutationConvertJob}
@@ -221,7 +217,7 @@ export function JobsDetailPage({
               </span>
             }
             key='dates'>
-            <JobsDetailDatesComponent job={job} />}
+            <JobsDetailDatesComponent job={job} />
           </Tabs.TabPane>
           <Tabs.TabPane
             tab={