Add emp assignments to production list.

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

@@ -1,6 +1,6 @@
 import { PrinterFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Card, Drawer, Grid, PageHeader, Space, Tag } from "antd";
+import { Button, Card, Col, Divider, Drawer, Grid, Row, Space } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -9,9 +9,8 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import AlertComponent from "../alert/alert.component";
+import JobsDetailHeader from "../jobs-detail-header/jobs-detail-header.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
-import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
 import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
 import JobDetailCardsDatesComponent from "./job-detail-cards.dates.component";
 import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
@@ -25,6 +24,12 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setModalContext({ context: context, modal: "printCenter" })),
 });
 
+const span = {
+  sm: { span: 24 },
+  md: { span: 12 },
+  lg: { span: 8 },
+};
+
 export function JobDetailCards({ setPrintCenterContext }) {
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
@@ -34,9 +39,9 @@ export function JobDetailCards({ setPrintCenterContext }) {
     xs: "100%",
     sm: "100%",
     md: "100%",
-    lg: "50%",
-    xl: "50%",
-    xxl: "45%",
+    lg: "75%",
+    xl: "75%",
+    xxl: "60%",
   };
   const drawerPercentage = selectedBreakpoint
     ? bpoints[selectedBreakpoint[0]]
@@ -46,7 +51,6 @@ export function JobDetailCards({ setPrintCenterContext }) {
   const { selected } = searchParams;
   const history = useHistory();
   const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
-    fetchPolicy: "network-only",
     variables: { id: selected },
     skip: !selected,
   });
@@ -60,10 +64,7 @@ export function JobDetailCards({ setPrintCenterContext }) {
       }),
     });
   };
-  const gridStyle = {
-    width: "25%",
-    textAlign: "center",
-  };
+
   return (
     <Drawer
       visible={!!selected}
@@ -75,99 +76,96 @@ export function JobDetailCards({ setPrintCenterContext }) {
       {loading ? <LoadingSpinner /> : null}
       {error ? <AlertComponent message={error.message} type="error" /> : null}
       {data ? (
-        <PageHeader
-          // ghost={true}
-          tags={[
-            <OwnerTagPopoverComponent key="owner" job={data.jobs_by_pk} />,
-            <VehicleTagPopoverComponent key="vehicle" job={data.jobs_by_pk} />,
-            <Tag
-              color="#f50"
-              key="production"
-              style={{
-                display:
-                  data && data.jobs_by_pk && data.jobs_by_pk.inproduction
-                    ? ""
-                    : "none",
-              }}
-            >
-              {t("jobs.labels.inproduction")}
-            </Tag>,
-          ]}
-          subTitle={data.jobs_by_pk.status}
-        >
-          <Card
-            title={
-              <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
-                {data.jobs_by_pk.ro_number || t("general.labels.na")}
+        <Card
+          title={
+            <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
+              {data.jobs_by_pk.ro_number || t("general.labels.na")}
+            </Link>
+          }
+          extra={
+            <Space wrap>
+              <Button
+                onClick={() => {
+                  setPrintCenterContext({
+                    actions: { refetch: refetch },
+                    context: {
+                      id: data.jobs_by_pk.id,
+                      job: data.jobs_by_pk,
+                      type: "job",
+                    },
+                  });
+                }}
+              >
+                <PrinterFilled />
+                {t("jobs.actions.printCenter")}
+              </Button>
+              <Link to={`/manage/jobs/${data.jobs_by_pk.id}?tab=repairdata`}>
+                <Button>{t("parts.actions.order")}</Button>
               </Link>
-            }
-            extra={
-              <Space>
-                <Button
-                  onClick={() => {
-                    setPrintCenterContext({
-                      actions: { refetch: refetch },
-                      context: {
-                        id: data.jobs_by_pk.id,
-                        job: data.jobs_by_pk,
-                        type: "job",
-                      },
-                    });
-                  }}
-                >
-                  <PrinterFilled />
-                  {t("jobs.actions.printCenter")}
-                </Button>
-                <Link to={`/manage/jobs/${data.jobs_by_pk.id}?tab=repairdata`}>
-                  <Button>{t("parts.actions.order")}</Button>
-                </Link>
-              </Space>
-            }
-          >
-            <Card.Grid style={gridStyle}>
-              <JobDetailCardsInsuranceComponent
-                loading={loading}
-                data={data ? data.jobs_by_pk : null}
-              />
-            </Card.Grid>
-            <Card.Grid style={gridStyle}>
-              <JobDetailCardsTotalsComponent
-                loading={loading}
-                data={data ? data.jobs_by_pk : null}
-              />
-            </Card.Grid>
-            <Card.Grid style={gridStyle}>
-              <JobDetailCardsDatesComponent
-                loading={loading}
-                data={data ? data.jobs_by_pk : null}
-              />
-            </Card.Grid>
-            <Card.Grid style={gridStyle}>
-              <JobDetailCardsPartsComponent
-                loading={loading}
-                data={data ? data.jobs_by_pk : null}
-              />
-            </Card.Grid>
-            <Card.Grid style={gridStyle}>
-              <JobDetailCardsNotesComponent
-                loading={loading}
-                data={data ? data.jobs_by_pk : null}
-              />
-            </Card.Grid>
-            <Card.Grid style={gridStyle}>
-              <JobDetailCardsDocumentsComponent
-                loading={loading}
-                data={data ? data.jobs_by_pk : null}
-              />
-            </Card.Grid>
-            <Card.Grid style={gridStyle}>
-              <JobDetailCardsDamageComponent
-                loading={loading}
-                data={data ? data.jobs_by_pk : null}
-              />
-            </Card.Grid>
-          </Card>
-        </PageHeader>
+            </Space>
+          }
+        >
+          <JobsDetailHeader job={data ? data.jobs_by_pk : null} />
+          <Divider type="horizontal" />
+          <Row gutter={[16, 16]}>
+            <Col {...span}>
+              <Card.Grid style={{ width: "100%", height: "100%" }}>
+                <JobDetailCardsInsuranceComponent
+                  loading={loading}
+                  data={data ? data.jobs_by_pk : null}
+                />
+              </Card.Grid>
+            </Col>
+            <Col {...span}>
+              <Card.Grid style={{ width: "100%", height: "100%" }}>
+                <JobDetailCardsTotalsComponent
+                  loading={loading}
+                  data={data ? data.jobs_by_pk : null}
+                />
+              </Card.Grid>
+            </Col>
+            <Col {...span}>
+              <Card.Grid style={{ width: "100%", height: "100%" }}>
+                <JobDetailCardsDatesComponent
+                  loading={loading}
+                  data={data ? data.jobs_by_pk : null}
+                />
+              </Card.Grid>
+            </Col>
+            <Col {...span}>
+              <Card.Grid style={{ width: "100%", height: "100%" }}>
+                <JobDetailCardsPartsComponent
+                  loading={loading}
+                  data={data ? data.jobs_by_pk : null}
+                />
+              </Card.Grid>
+            </Col>
+            <Col {...span}>
+              <Card.Grid style={{ width: "100%", height: "100%" }}>
+                <JobDetailCardsNotesComponent
+                  loading={loading}
+                  data={data ? data.jobs_by_pk : null}
+                />
+              </Card.Grid>
+            </Col>
+            <Col {...span}>
+              <Card.Grid style={{ width: "100%", height: "100%" }}>
+                <JobDetailCardsDocumentsComponent
+                  loading={loading}
+                  data={data ? data.jobs_by_pk : null}
+                />
+              </Card.Grid>
+            </Col>
+            <Col {...span}>
+              <Card.Grid style={{ width: "100%", height: "100%" }}>
+                <JobDetailCardsDamageComponent
+                  loading={loading}
+                  data={data ? data.jobs_by_pk : null}
+                />
+              </Card.Grid>
+            </Col>
+          </Row>
+        </Card>
       ) : null}
     </Drawer>
   );