feat(details): Add additional fields to SEATool transform; Display in…

… UI (#266)

* Initial commit: add fields to seatool schema and transform

* Fix undefined error

* Fixes types

* Updates to property names

* Add ReviewTeam UI

* Wire in new fields; try to fix disposition date

* Format final disposition date

* Reorder view

* Status date update

* Rename CPOC

* Add user type gates

* Refactor Details page sections to reuse code

* Remove cpoc attribute

* Move components to proper directory

* More file structurer stuff

src/packages/shared-types/seatool.ts

@@ -75,16 +75,16 @@ const getRaiDate = (data: SeaToolSink) => {
   };
 };
 
+const zActionOfficer = z.object({
+  OFFICER_ID: z.number(),
+  FIRST_NAME: z.string(),
+  LAST_NAME: z.string(),
+});
+type ActionOfficer = z.infer<typeof zActionOfficer>;
+
 export const seatoolSchema = z.object({
-  LEAD_ANALYST: z
-    .array(
-      z.object({
-        OFFICER_ID: z.number(),
-        FIRST_NAME: z.string(),
-        LAST_NAME: z.string(),
-      })
-    )
-    .nullable(),
+  ACTION_OFFICERS: z.array(zActionOfficer).nullish(),
+  LEAD_ANALYST: z.array(zActionOfficer).nullable(),
   PLAN_TYPES: z
     .array(
       z.object({
@@ -102,6 +102,9 @@ export const seatoolSchema = z.object({
     PROPOSED_DATE: z.number().nullable(),
     SPW_STATUS_ID: z.number().nullable(),
     STATE_CODE: z.string().nullish(),
+    STATUS_DATE: z.number().nullish(),
+    SUMMARY_MEMO: z.string().nullish(),
+    TITLE_NAME: z.string().nullish(),
   }),
   SPW_STATUS: z
     .array(
@@ -131,11 +134,25 @@ export const seatoolSchema = z.object({
     .nullable(),
 });
 
-const getDateStringOrNullFromEpoc = (epocDate: number | null) => {
-  if (epocDate !== null) {
-    return new Date(epocDate).toISOString();
-  }
-  return null;
+const getDateStringOrNullFromEpoc = (epocDate: number | null | undefined) =>
+  epocDate !== null && epocDate !== undefined
+    ? new Date(epocDate).toISOString()
+    : null;
+
+const compileSrtList = (
+  officers: ActionOfficer[] | null | undefined
+): string[] =>
+  officers?.length ? officers.map((o) => `${o.FIRST_NAME} ${o.LAST_NAME}`) : [];
+
+const getFinalDispositionDate = (status: string, record: SeaToolSink) => {
+  const finalDispositionStatuses = [
+    SEATOOL_STATUS.APPROVED,
+    SEATOOL_STATUS.DISAPPROVED,
+    SEATOOL_STATUS.WITHDRAWN,
+  ];
+  return status && finalDispositionStatuses.includes(status)
+    ? getDateStringOrNullFromEpoc(record.STATE_PLAN.STATUS_DATE)
+    : null;
 };
 
 export const transformSeatoolData = (id: string) => {
@@ -178,6 +195,8 @@ export const transformSeatoolData = (id: string) => {
       ),
       authority: authorityLookup(data.STATE_PLAN.PLAN_TYPE),
       changedDate: getDateStringOrNullFromEpoc(data.STATE_PLAN.CHANGED_DATE),
+      description: data.STATE_PLAN.SUMMARY_MEMO,
+      finalDispositionDate: getFinalDispositionDate(seatoolStatus, data),
       leadAnalystOfficerId,
       leadAnalystName,
       planType: data.PLAN_TYPES?.[0].PLAN_TYPE_NAME,
@@ -187,13 +206,16 @@ export const transformSeatoolData = (id: string) => {
       raiRequestedDate,
       raiWithdrawnDate,
       rais,
+      reviewTeam: compileSrtList(data.ACTION_OFFICERS),
       state: data.STATE_PLAN.STATE_CODE,
       stateStatus: stateStatus || SEATOOL_STATUS.UNKNOWN,
+      statusDate: getDateStringOrNullFromEpoc(data.STATE_PLAN.STATUS_DATE),
       cmsStatus: cmsStatus || SEATOOL_STATUS.UNKNOWN,
       seatoolStatus,
       submissionDate: getDateStringOrNullFromEpoc(
         data.STATE_PLAN.SUBMISSION_DATE
       ),
+      subject: data.STATE_PLAN.TITLE_NAME,
     };
   });
 };

src/services/data/handlers/sink.ts

@@ -73,6 +73,8 @@ export const seatool: Handler = async (event) => {
           approvedEffectiveDate: null,
           authority: null,
           changedDate: null,
+          description: null,
+          finalDispositionDate: null,
           leadAnalystName: null,
           leadAnalystOfficerId: null,
           planType: null,
@@ -81,11 +83,14 @@ export const seatool: Handler = async (event) => {
           raiReceivedDate: null,
           raiRequestedDate: null,
           raiWithdrawnDate: null,
+          reviewTeam: null,
           state: null,
           cmsStatus: null,
           stateStatus: null,
           seatoolStatus: null,
+          statusDate: null,
           submissionDate: null,
+          subject: null,
         };
 
         docObject[id] = seaTombstone;

src/services/ui/src/components/PackageDetails/DetailItemsGrid.tsx

@@ -0,0 +1,25 @@
+import { useGetUser } from "@/api/useGetUser";
+import { DetailSectionItem } from "@/pages/detail/setup/spa";
+
+export const DetailItemsGrid = ({
+  displayItems,
+}: {
+  displayItems: DetailSectionItem[];
+}) => {
+  const { data: user } = useGetUser();
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-4">
+        {displayItems.map(({ label, value, canView }) => {
+          return !canView(user) ? null : (
+            <div key={label}>
+              <h3 className="text-sm">{label}</h3>
+              {value}
+            </div>
+          );
+        })}
+      </div>
+      <hr className="my-4" />
+    </>
+  );
+};

src/services/ui/src/components/PackageDetails/ReviewTeamList.tsx

@@ -0,0 +1,26 @@
+import { useMemo, useState } from "react";
+import { BLANK_VALUE } from "@/consts";
+
+export const ReviewTeamList = ({ team }: { team: string[] | undefined }) => {
+  const [expanded, setExpanded] = useState(false);
+  const displayTeam = useMemo(
+    () => (expanded ? team : team?.slice(0, 3)),
+    [expanded, team]
+  );
+  return !displayTeam || !displayTeam.length ? (
+    BLANK_VALUE
+  ) : (
+    <ul>
+      {displayTeam.map((reviewer, idx) => (
+        <li key={`reviewteam-ul-${reviewer}-${idx}`}>{reviewer}</li>
+      ))}
+      {team && team?.length > 3 && (
+        <li className={"text-xs text-sky-600 hover:cursor-pointer"}>
+          <button onClick={() => setExpanded((prev) => !prev)}>
+            {expanded ? "Show less" : "Show more"}
+          </button>
+        </li>
+      )}
+    </ul>
+  );
+};

src/services/ui/src/components/PackageDetails/index.ts

@@ -1 +1,2 @@
-export * from "./ChipSpaPackageDetails";
+export * from "./DetailItemsGrid";
+export * from "./ReviewTeamList";

src/services/ui/src/components/index.tsx

@@ -14,7 +14,6 @@ export * from "./LoadingSpinner";
 export * from "./PackageDetails";
 export * from "./RaiList";
 export * from "./SearchForm";
-export * from "./SubmissionInfo";
 export * from "./Modal";
 export * from "./Dialog";
 export * from "./Modal/ConfirmationModal";

src/services/ui/src/pages/detail/index.tsx

@@ -3,12 +3,10 @@ import {
   Alert,
   Attachmentslist,
   CardWithTopBorder,
-  ChipSpaPackageDetails,
   DetailsSection,
   ErrorAlert,
   LoadingSpinner,
   RaiList,
-  SubmissionInfo,
   ConfirmationModal,
 } from "@/components";
 import { useGetUser } from "@/api/useGetUser";
@@ -28,6 +26,8 @@ import { useGetPackageActions } from "@/api/useGetPackageActions";
 import { PropsWithChildren, useState } from "react";
 import { DETAILS_AND_ACTIONS_CRUMBS } from "@/pages/actions/actions-breadcrumbs";
 import { API } from "aws-amplify";
+import { DetailItemsGrid } from "@/components";
+import { spaDetails, submissionDetails } from "@/pages/detail/setup/spa";
 
 const DetailCardWrapper = ({
   title,
@@ -199,10 +199,9 @@ export const DetailsContent = ({ data }: { data?: ItemResult }) => {
           />
           <PackageActionsCard id={data._id} />
         </section>
-        <DetailsSection id="package-details" title="Package Details">
-          <ChipSpaPackageDetails {...data?._source} />
-        </DetailsSection>
-        <SubmissionInfo {...data?._source} />
+        <h2 className="text-xl font-semibold mb-2">{"Package Details"}</h2>
+        <DetailItemsGrid displayItems={spaDetails(data._source)} />
+        <DetailItemsGrid displayItems={submissionDetails(data._source)} />
         {/* Below is used for spacing. Keep it simple */}
         <div className="mb-4" />
         <DetailsSection id="attachments" title="Attachments">