Further UI Improvements

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

@@ -10,6 +10,8 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
+import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
+import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
 import "./jobs-detail-header.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
@@ -22,15 +24,25 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setModalContext({ context: context, modal: "printCenter" })),
 });
 
-export function JobsDetailHeader({
-  setPrintCenterContext,
-  jobRO,
-  job,
-  refetch,
-  loading,
-  form,
-  bodyshop,
-}) {
+const colSpan = {
+  xs: {
+    span: 24,
+  },
+  sm: {
+    span: 24,
+  },
+  md: {
+    span: 12,
+  },
+  lg: {
+    span: 6,
+  },
+  xl: {
+    span: 6,
+  },
+};
+
+export function JobsDetailHeader({ job, bodyshop }) {
   const { t } = useTranslation();
 
   const jobInPostProduction = useMemo(() => {
@@ -39,15 +51,10 @@ export function JobsDetailHeader({
     );
   }, [job.status, bodyshop.md_ro_statuses.post_production_statuses]);
 
-  const gridStyle = {
-    flex: 1,
-    //textAlign: "center",
-  };
-
   return (
-    <Row gutter={16} style={{ alignItems: "stretch" }}>
-      <Col span={8}>
-        <Card title="Job Status" style={{ height: "100%" }}>
+    <Row gutter={[16, 16]} style={{ alignItems: "stretch" }}>
+      <Col {...colSpan}>
+        <Card title={"Job Status"} style={{ height: "100%" }}>
           <div>
             <DataLabel label={t("jobs.fields.status")}>
               {job.status}
@@ -68,10 +75,15 @@ export function JobsDetailHeader({
               <span style={{ margin: "0rem .5rem" }}>/</span>
               <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
             </DataLabel>
+            {(job.inproduction || jobInPostProduction) && (
+              <DataLabel label={t("jobs.fields.production_vars.note")}>
+                <ProductionListColumnProductionNote record={job} />
+              </DataLabel>
+            )}
           </div>
         </Card>
       </Col>
-      <Col span={8}>
+      <Col {...colSpan}>
         <Link to={`/manage/owners/${job.owner.id}`}>
           <Card
             className="ant-card-grid-hoverable"
@@ -96,7 +108,7 @@ export function JobsDetailHeader({
           </Card>
         </Link>
       </Col>
-      <Col span={8}>
+      <Col {...colSpan}>
         <Link to={`/manage/vehicles/${job.vehicle.id}`}>
           <Card
             className="ant-card-grid-hoverable"
@@ -118,6 +130,16 @@ export function JobsDetailHeader({
           </Card>
         </Link>
       </Col>
+      <Col {...colSpan}>
+        <Card
+          style={{ height: "100%" }}
+          title={t("jobs.labels.employeeassignments")}
+        >
+          <div>
+            <JobEmployeeAssignments job={job} />
+          </div>
+        </Card>
+      </Col>
     </Row>
   );
 
@@ -156,7 +178,7 @@ export function JobsDetailHeader({
   //         </>
   //       )}
 
-  //       <JobEmployeeAssignments job={job} />
+  //
   //     </div>
   //   </PageHeader>
   // );