Update UI for viewing a single officer

frontend/compositions/officer-view/index.tsx

@@ -3,20 +3,53 @@ import OptionalOfficerInfo from "./optional-officer-info"
 import OfficerWorkHistory from "./officer-work-history"
 import OfficerAffiliations from "./officer-affiliations"
 import { OfficerRecordType } from "../../models/officer"
-import { DataTable } from "../../shared-components/data-table/data-table"
-import { resultsColumns } from "../search-results/search-results"
-import { EXISTING_TEST_INCIDENTS } from "../../helpers/api/mocks/data"
+import styles from "./officer-view.module.css"
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { useRouter } from "next/router"
+import { OfficerIncidentDataTable } from "../../shared-components/officer-incident-data-table/officer-incident-data-table"
+import { incidentResultsColumns } from "../../models/incident"
 
 export default function OfficerView(officer: OfficerRecordType) {
+  const { officerView, profilePicture, officerViewHeader, wrapper, backButton } = styles
+  const router = useRouter()
+
+  const BackButton = () => {
+    return (
+      <FontAwesomeIcon
+        className={backButton}
+        title={"Back"}
+        icon={faArrowLeft}
+        size="lg"
+        onClick={() => router.back()}
+      />
+    )
+  }
+
   return (
-    <>
-      <OfficerHeader {...officer} />
-      <hr />
-      <OptionalOfficerInfo {...officer} />
-      <hr />
-      <OfficerWorkHistory {...officer} />
-      <OfficerAffiliations {...officer} />
-      {/* TODO: <DataTable tableName='Mock Table' columns={resultsColumns} data={EXISTING_TEST_INCIDENTS} /> */}
-    </>
+    <div className={wrapper}>
+      <BackButton />
+      <div className={officerView}>
+        <img
+          className={profilePicture}
+          src={
+            "https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+          }
+          alt="Profile Picture"
+        />
+        <div>
+          <OfficerHeader {...officer} />
+          <OptionalOfficerInfo {...officer} />
+          <OfficerWorkHistory {...officer} />
+          {officer.incidents && officer.incidents.length > 0 && (
+            <OfficerIncidentDataTable
+              tableName=""
+              columns={incidentResultsColumns}
+              data={officer.incidents}
+            />
+          )}
+        </div>
+      </div>
+    </div>
   )
 }

frontend/compositions/officer-view/officer-view-header/index.tsx

@@ -3,21 +3,14 @@ import styles from "./officer-view-header.module.css"
 
 export default function OfficerHeader(officer: OfficerRecordType) {
   const { firstName, lastName, knownEmployers } = officer
-  const { category, name, titleAndName, otherData, viewWrapper } = styles
+  const { name, title } = styles
 
   return (
     <div>
-      <h3>Officer Record</h3>
-      <div className={viewWrapper}>
-        <div className={titleAndName}>
-          <p className={name}>
-            {firstName} {lastName}
-          </p>
-        </div>
-        <div className={otherData}>
-          <p className={category}>Known Employers</p>
-        </div>
-      </div>
+      <p className={title}>Officer Record</p>
+      <p className={name}>
+        {firstName} {lastName}
+      </p>
     </div>
   )
 }

frontend/compositions/officer-view/officer-view-header/officer-view-header.module.css

@@ -1,22 +1,11 @@
-.category {
-  display: block;
-  font-size: var(--size10);
-  color: var(--grey);
-  margin-left: 0;
-}
-
 .name {
   font-size: var(--size32);
+  font-weight: 400;
+  margin-bottom: 0.3rem;
 }
 
-.titleAndName {
-  width: 33%;
-}
-
-.otherData {
-  width: 22%;
-}
-
-.viewWrapper {
-  display: flex;
+.title {
+  font-size: var(--size16);
+  font-weight: 700;
+  margin-top: 0.5rem;
 }

frontend/compositions/officer-view/officer-view.module.css

@@ -0,0 +1,56 @@
+.officerView {
+  display: flex;
+  flex-direction: row;
+  padding: 1rem; /* Added padding for mobile devices */
+}
+
+.officerView > div {
+  flex: 1;
+}
+
+.profilePicture {
+  width: 8rem; /* Set your desired width */
+  height: 8rem; /* Set your desired height */
+  border-radius: 50%;
+  margin-right: 1rem;
+}
+
+.officerViewHeader {
+  display: flex;
+  flex-direction: row;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column; /* Adjusted flex direction for mobile devices */
+  padding: 1rem var(--size100); /* Adjusted padding for mobile devices */
+}
+
+.backButton {
+  cursor: pointer;
+  margin-bottom: var(--size10); /* Adjusted margin for mobile devices */
+}
+
+/* For devices with screen width less than 600px */
+@media (max-width: 600px) {
+  .officerView {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .profilePicture {
+    width: 4rem; /* Set your desired width */
+    height: 4rem; /* Set your desired height */
+    margin-right: 0.5rem;
+  }
+
+  .officerViewHeader {
+    flex-direction: column;
+    align-items: center; /* Center items for mobile devices */
+  }
+
+  .wrapper {
+    padding: 1rem var(--size20); /* Adjusted padding for mobile devices */
+  }
+}

frontend/compositions/officer-view/officer-work-history/index.tsx

@@ -4,17 +4,15 @@ import styles from "./officer-work-history.module.css"
 
 export default function OfficerWorkHistory(officer: OfficerRecordType) {
   const { workHistory } = officer
-  const { category, wrapper } = styles
+  const { wrapper, title } = styles
 
   const result = workHistory.map((item, index) => (
     <WorkHistoryInstance key={index + "workHistoryItem"} {...item} />
   ))
 
   return (
     <div className={wrapper}>
-      <div className={category}>
-        <p>Work History Summary:</p>
-      </div>
+      <p className={title}>Work History:</p>
       <div>{result}</div>
     </div>
   )

frontend/compositions/officer-view/officer-work-history/officer-work-history.module.css

@@ -1,10 +1,12 @@
-.category {
-  display: block;
-  font-size: var(--size10);
-  color: var(--grey);
-  margin-left: 0;
+.title {
+  font-size: var(--size14);
+  color: #666666;
+  margin: 0.5rem 0;
+  font-weight: 400;
 }
 
 .wrapper {
   display: flex;
+  flex-direction: column;
+  margin: 0.2rem 0;
 }

frontend/compositions/officer-view/officer-work-history/work-history-instance/index.tsx

@@ -5,24 +5,26 @@ import Image from "next/image"
 export default function WorkHistoryInstance(pastWorkplace: EmploymentType) {
   const { agency, currentlyEmployed, earliestEmployment, latestEmployment } = pastWorkplace
   const { agencyName, agencyImage, agencyHqAddress, websiteUrl } = agency
-  const startDateString = new Date(earliestEmployment).toLocaleDateString().split(",")[0]
-  const endDateString = new Date(latestEmployment).toLocaleDateString().split(",")[0]
+  const startDateString = earliestEmployment.toLocaleDateString().split("/")[2]
+  const endDateString = latestEmployment.toLocaleDateString().split("/")[2]
 
-  const { patch, wrapper, dates } = styles
+  const { patch, wrapper, titleAndDate, title, address, content, link } = styles
 
   return (
     <div className={wrapper}>
       <img className={patch} src={agencyImage} alt={agencyName.concat(" Patch")} />
-      <div>
-        <p>
-          {status}
-          <span className={dates}>
+      <div className={content}>
+        <div className={titleAndDate}>
+          <span className={title}>Detective</span>
+          <span>
             {startDateString} - {endDateString}
           </span>
-        </p>
-        <a href={websiteUrl}>{agencyName}</a>
+        </div>
+        <a href={websiteUrl} className={link}>
+          {agencyName}
+        </a>
         {/*TODO: Get Phone number from officer data, mock data currently does not have*/}
-        <p>(123) 456-7890 * {agencyHqAddress}</p>
+        <p className={address}>(123) 456-7890 * {agencyHqAddress}</p>
       </div>
     </div>
   )

frontend/compositions/officer-view/officer-work-history/work-history-instance/work-history-instance.module.css

@@ -1,13 +1,35 @@
 .patch {
   width: var(--size64);
   height: var(--size64);
+  margin-right: var(--size8);
 }
 
 .wrapper {
   display: flex;
-  margin-bottom: var(--size16);
 }
 
-.dates {
-  float: "right";
+.titleAndDate {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.title {
+  font-size: var(--size16);
+  font-weight: bold;
+}
+
+.address {
+  font-size: var(--size14);
+  color: #666666;
+  font-style: italic;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.link {
+  /* margin: var(--size4) 0; */
 }

frontend/compositions/officer-view/optional-officer-info/index.tsx

@@ -2,12 +2,26 @@ import { OfficerRecordType } from "../../../models/officer"
 import styles from "./optional-officer-info.module.css"
 
 export default function OptionalOfficerInfo(officer: OfficerRecordType) {
-  const { dateOfBirth, gender, race } = officer
+  const { dateOfBirth, gender, race, ethnicity, badgeNo, status, department } = officer
   const { category, data, viewWrapper } = styles
 
   const dateString: string = new Date(dateOfBirth).toLocaleDateString().split(",")[0]
   return (
-    <div>
+    <>
+      <div className={viewWrapper}>
+        <div className={data}>
+          <p className={category}>Badge Number</p>
+          <p>{badgeNo}</p>
+        </div>
+        <div className={data}>
+          <p className={category}>Officer Status</p>
+          <p>{status}</p>
+        </div>
+        <div className={data}>
+          <p className={category}>Department</p>
+          <p>{department}</p>
+        </div>
+      </div>
       <div className={viewWrapper}>
         <div className={data}>
           <p className={category}>Date of Birth</p>
@@ -22,6 +36,14 @@ export default function OptionalOfficerInfo(officer: OfficerRecordType) {
           <p>{race}</p>
         </div>
       </div>
-    </div>
+      <div>
+        <div className={viewWrapper}>
+          <div className={data}>
+            <p className={category}>Ethnicity</p>
+            <p>{ethnicity}</p>
+          </div>
+        </div>
+      </div>
+    </>
   )
 }

frontend/compositions/officer-view/optional-officer-info/optional-officer-info.module.css

@@ -1,13 +1,33 @@
 .category {
-  font-size: var(--size10);
-  color: var(--grey);
+  font-size: var(--size14);
+  color: #666666;
   margin-left: 0;
+  font-weight: 400;
 }
 
 .data {
-  width: 20%;
+  margin-right: 1rem;
+  margin: 0.4rem 0;
+  width: 100%;
 }
 
 .viewWrapper {
   display: flex;
+  width: 40%;
+}
+
+/* For devices with screen width less than 600px */
+@media (max-width: 600px) {
+  .data {
+    margin-right: 0.5rem;
+    margin: 0.2rem 0; /* Adjusted margin for better spacing on mobile */
+  }
+
+  .viewWrapper {
+    flex-direction: column;
+  }
+
+  .category {
+    margin-bottom: 0.2rem; /* Added margin-bottom for better spacing on mobile */
+  }
 }