Jobs datamodel updates + creation of cards for jobs detail screen.

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

@@ -1,16 +1,71 @@
 import React from "react";
-import JobDetailCardsCustomerContainer from "./job-detail-cards.customer.container";
 import { useTranslation } from "react-i18next";
+import { useQuery } from "@apollo/react-hooks";
+import AlertComponent from "../alert/alert.component";
+import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
+import { Row, Col } from "antd";
+
+import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
+import JobDetailCardsVehicleComponent from "./job-detail-cards.vehicle.component";
+import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.component";
+import JobDetailCardsDatesComponent from "./job-detail-cards.dates.component";
+import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
+import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
+import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
+import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
+import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
+
+import "./job-detail-cards.styles.scss";
 
 export default function JobDetailCards({ selectedJob }) {
+  const { loading, error, data } = useQuery(QUERY_JOB_CARD_DETAILS, {
+    fetchPolicy: "network-only",
+    variables: { id: selectedJob },
+    skip: !selectedJob
+  });
+
   const { t } = useTranslation();
 
   if (!selectedJob) {
     return <div>{t("jobs.errors.nojobselected")}</div>;
   }
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
   return (
-    <div>
-      <JobDetailCardsCustomerContainer selectedJob={selectedJob} />
-    </div>
+    <section className="job-cards">
+      <JobDetailCardsCustomerComponent
+        loading={loading}
+        data={data ? data.jobs_by_pk : null}
+      />
+      <JobDetailCardsVehicleComponent
+        loading={loading}
+        data={data ? data.jobs_by_pk : null}
+      />
+      <JobDetailCardsInsuranceComponent
+        loading={loading}
+        data={data ? data.jobs_by_pk : null}
+      />
+      <JobDetailCardsDatesComponent
+        loading={loading}
+        data={data ? data.jobs_by_pk : null}
+      />
+      <JobDetailCardsPartsComponent
+        loading={loading}
+        data={data ? data.jobs_by_pk : null}
+      />
+      <JobDetailCardsNotesComponent
+        loading={loading}
+        data={data ? data.jobs_by_pk : null}
+      />
+      <JobDetailCardsDamageComponent
+        loading={loading}
+        data={data ? data.jobs_by_pk : null}
+      />
+      <JobDetailCardsDocumentsComponent
+        loading={loading}
+        data={data ? data.jobs_by_pk : null}
+      />
+    </section>
   );
 }