Complete refactor of jobs detail screen.

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

@@ -0,0 +1,181 @@
+import { Form, Icon, Tabs } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { FaRegStickyNote } from "react-icons/fa";
+import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
+import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";
+import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
+import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
+import JobsRatesContainer from "../../components/jobs-rates/jobs-rates.container";
+
+export default function JobsDetailPage({
+  job,
+  mutationUpdateJob,
+  mutationConvertJob,
+  handleSubmit,
+  handleChange,
+  getFieldDecorator,
+  refetch
+}) {
+  const { t } = useTranslation();
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 12 },
+      sm: { span: 5 }
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 12 }
+    }
+  };
+
+  // const TEMP = (
+  //   <div>
+  //     {" "}
+  //     <Form.Item label='Estimator Last Name'>
+  //       {getFieldDecorator("est_ct_ln", {
+  //         initialValue: jobContext.est_ct_ln
+  //       })(<Input name='est_ct_ln' onChange={handleChange} />)}
+  //     </Form.Item>
+  //     <Form.Item label='Estimator First Name'>
+  //       {getFieldDecorator("est_ct_fn", {
+  //         initialValue: jobContext.est_ct_fn
+  //       })(<Input name='est_ct_fn' onChange={handleChange} />)}
+  //     </Form.Item>
+  //     <Form.Item label='Estimator Phone #'>
+  //       {getFieldDecorator("est_ph1", {
+  //         initialValue: jobContext.est_ph1
+  //       })(
+  //         <FormItemPhone
+  //           customInput={Input}
+  //           name='est_ph1'
+  //           onValueChange={handleChange}
+  //         />
+  //       )}
+  //     </Form.Item>
+  //     <Form.Item label='Estimator Email'>
+  //       {getFieldDecorator("est_ea", {
+  //         initialValue: jobContext.est_ea,
+  //         rules: [
+  //           {
+  //             type: "email",
+  //             message: "This is not a valid email address."
+  //           }
+  //         ]
+  //       })(<Input name='est_ea' onChange={handleChange} />)}
+  //     </Form.Item>
+  //   </div>
+  // );
+
+  return (
+    <Form onSubmit={handleSubmit} {...formItemLayout}>
+      <JobsDetailHeader
+        job={job}
+        mutationConvertJob={mutationConvertJob}
+        refetch={refetch}
+        getFieldDecorator={getFieldDecorator}
+      />
+
+      <Tabs defaultActiveKey='claimdetail'>
+        <Tabs.TabPane
+          tab={
+            <span>
+              <Icon type='bars' />
+              {t("menus.jobsdetail.claimdetail")}
+            </span>
+          }
+          key='claimdetail'>
+          Claim detail
+        </Tabs.TabPane>
+
+        <Tabs.TabPane
+          tab={
+            <span>
+              <Icon type='bars' />
+              {t("menus.jobsdetail.insurance")}
+            </span>
+          }
+          key='insurance'>
+          Insurance
+        </Tabs.TabPane>
+
+        <Tabs.TabPane
+          tab={
+            <span>
+              <Icon type='bars' />
+              {t("menus.jobsdetail.repairdata")}
+            </span>
+          }
+          key='repairdata'>
+          <JobLinesContainer jobId={job.id} />
+        </Tabs.TabPane>
+
+        <Tabs.TabPane
+          tab={
+            <span>
+              <Icon type='dollar' />
+              {t("menus.jobsdetail.financials")}
+            </span>
+          }
+          key='financials'>
+          <JobsRatesContainer />
+        </Tabs.TabPane>
+
+        <Tabs.TabPane
+          tab={
+            <span>
+              <Icon type='bars' />
+              {t("menus.jobsdetail.partssublet")}
+            </span>
+          }
+          key='partssublet'>
+          Partssublet
+        </Tabs.TabPane>
+
+        <Tabs.TabPane
+          tab={
+            <span>
+              <Icon type='bars' />
+              {t("menus.jobsdetail.labor")}
+            </span>
+          }
+          key='labor'>
+          Labor
+        </Tabs.TabPane>
+
+        <Tabs.TabPane
+          tab={
+            <span>
+              <Icon type='bars' />
+              {t("menus.jobsdetail.dates")}
+            </span>
+          }
+          key='dates'>
+          Dates
+        </Tabs.TabPane>
+
+        <Tabs.TabPane
+          tab={
+            <span>
+              <Icon type='file-image' />
+              {t("jobs.labels.documents")}
+            </span>
+          }
+          key='#documents'>
+          <JobsDocumentsContainer jobId={job.id} />
+        </Tabs.TabPane>
+        <Tabs.TabPane
+          tab={
+            <span>
+              <Icon component={FaRegStickyNote} />
+              {t("jobs.labels.notes")}
+            </span>
+          }
+          key='#notes'>
+          <JobNotesContainer jobId={job.id} />
+        </Tabs.TabPane>
+      </Tabs>
+    </Form>
+  );
+}