Jobs list page updates & note adding modal.

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

@@ -1,6 +1,13 @@
+import { List, Icon } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CardTemplate from "./job-detail-cards.template.component";
+import styled from "styled-components";
+
+const Container = styled.div`
+  height: 100%;
+  overflow-y: auto;
+`;
 
 export default function JobDetailCardsNotesComponent({ loading, data }) {
   const { t } = useTranslation();
@@ -8,9 +15,24 @@ export default function JobDetailCardsNotesComponent({ loading, data }) {
   return (
     <CardTemplate loading={loading} title={t("jobs.labels.cards.notes")}>
       {data ? (
-        <span>
-            notes stuff here.
-        </span>
+        <Container>
+          <List
+            size='small'
+            bordered
+            dataSource={data?.notes}
+            renderItem={item => (
+              <List.Item>
+                {item.critical ? (
+                  <Icon style={{ margin: 4, color: "red" }} type='warning' />
+                ) : null}
+                {item.private ? (
+                  <Icon style={{ margin: 4 }} type='eye-invisible' />
+                ) : null}
+                {item.text}
+              </List.Item>
+            )}
+          />
+        </Container>
       ) : null}
     </CardTemplate>
   );