Begin job details cards.

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

@@ -0,0 +1,16 @@
+import React from "react";
+import JobDetailCardsCustomerContainer from "./job-detail-cards.customer.container";
+import { useTranslation } from "react-i18next";
+
+export default function JobDetailCards({ selectedJob }) {
+  const { t } = useTranslation();
+
+  if (!selectedJob) {
+    return <div>{t("jobs.errors.nojobselected")}</div>;
+  }
+  return (
+    <div>
+      <JobDetailCardsCustomerContainer selectedJob={selectedJob} />
+    </div>
+  );
+}

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Card } from "antd";
+export default function JobDetailCardsCustomerComponent({ loading, data }) {
+  const { t } = useTranslation();
+
+  return <Card loading={loading}>Card has loaded.</Card>;
+}

client/src/components/job-detail-cards/job-detail-cards.customer.container.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
+import { useQuery } from "@apollo/react-hooks";
+import AlertComponent from "../alert/alert.component";
+import { QUERY_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
+
+export default function JobDetailCardsCustomerContainer({ selectedJob }) {
+  const { loading, error, data } = useQuery(QUERY_JOBS_IN_PRODUCTION, {
+    fetchPolicy: "network-only"
+  });
+
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  return <JobDetailCardsCustomerComponent loading={loading} data={data} />;
+}