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

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

@@ -1,8 +1,29 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Card } from "antd";
+import CardTemplate from "./job-detail-cards.template.component";
+import PhoneFormatter from "../../utils/PhoneFormatter";
+
 export default function JobDetailCardsCustomerComponent({ loading, data }) {
   const { t } = useTranslation();
 
-  return <Card loading={loading}>Card has loaded.</Card>;
+  return (
+    <CardTemplate loading={loading} title={t("jobs.labels.cards.customer")}>
+      {data ? (
+        <span>
+          <div>{`${data?.pit_owner_first_name ??
+            ""} ${data.pit_owner_last_name ?? ""}`}</div>
+          <div>
+            <PhoneFormatter>{`${data?.pit_owner_phone ?? ""}`}</PhoneFormatter>
+          </div>
+          {data?.pit_owner_email ? (
+            <a href={`mailto:${data.pit_owner_email}`}>
+              <div>{`${data?.pit_owner_email ?? ""}`}</div>
+            </a>
+          ) : null}
+
+          <div>{`${data?.owner.preferred_contact ?? ""}`}</div>
+        </span>
+      ) : null}
+    </CardTemplate>
+  );
 }