Added job card functionality + new fields.

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

@@ -13,16 +13,23 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
       extraLink={data?.owner ? `/manage/owners/${data?.owner?.id}` : null}>
       {data ? (
         <span>
-          <div>{`${data?.ownr_fn ??
-            ""} ${data.ownr_ln ?? ""}`}</div>
+          <div>{`${data?.ownr_fn ?? ""} ${data.ownr_ln ?? ""}`}</div>
           <div>
-            <PhoneFormatter>{`${data?.ownr_ph1 ?? ""}`}</PhoneFormatter>
+            {t("jobs.fields.phoneshort")}:
+            <PhoneFormatter>{`${data?.ownr_ph1 ??
+              t("general.labels.na")}`}</PhoneFormatter>
+          </div>
+
+          <div>
+            {t("jobs.fields.ownr_ea")}:
+            {data?.ownr_ea ? (
+              <a href={`mailto:${data.ownr_ea}`}>
+                <span>{`${data?.ownr_ea ?? ""}`}</span>
+              </a>
+            ) : (
+              t("general.labels.na")
+            )}
           </div>
-          {data?.ownr_ea ? (
-            <a href={`mailto:${data.ownr_ea}`}>
-              <div>{`${data?.ownr_ea ?? ""}`}</div>
-            </a>
-          ) : null}
 
           <div>{`${data?.owner?.preferred_contact ?? ""}`}</div>
         </span>

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

@@ -1,16 +1,32 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CardTemplate from "./job-detail-cards.template.component";
+import { Carousel } from "antd";
+import "./job-detail-cards.styles.scss";
 
 export default function JobDetailCardsDocumentsComponent({ loading, data }) {
   const { t } = useTranslation();
 
+  if (!data)
+    return (
+      <CardTemplate loading={loading} title={t("jobs.labels.cards.documents")}>
+        null
+      </CardTemplate>
+    );
+
   return (
-    <CardTemplate loading={loading} title={t("jobs.labels.cards.documents")}>
-      {data ? (
-        <span>
-            Documents stuff here.
-        </span>
+    <CardTemplate
+      loading={loading}
+      title={t("jobs.labels.cards.documents")}
+      extraLink={`/manage/jobs/${data.id}#documents`}>
+      {data.documents ? (
+        <Carousel autoplay>
+          {data.documents.map(item => (
+            <div key={item.id}>
+              <img src={item.thumb_url} />
+            </div>
+          ))}
+        </Carousel>
       ) : null}
     </CardTemplate>
   );

client/src/components/job-detail-cards/job-detail-cards.documents.styles.scss

@@ -0,0 +1,11 @@
+.ant-carousel .slick-slide {
+    text-align: center;
+    height: 160px;
+    line-height: 160px;
+    background: #364d79;
+    overflow: hidden;
+  }
+  
+  .ant-carousel .slick-slide h3 {
+    color: #fff;
+  }