Merge pull request #184 from jadmsaadaot/SUBMIT-task#176-E

Display Awaiting Manager Review Status

submit-api/src/submit_api/schemas/package.py

@@ -6,6 +6,7 @@
 from marshmallow import EXCLUDE, Schema, fields, post_dump
 
 from submit_api.models.package import PackageStatus
+from submit_api.models.submission_review import SubmissionReviewStatus
 from submit_api.models.user import UserType
 from submit_api.schemas.item import ItemSchema, StaffItemSchema
 from submit_api.schemas.package_type import PackageTypeSchema
@@ -77,6 +78,7 @@ def map_status(self, data, many, **kwargs):
         user_type = user.type if user else None
 
         new_status = [get_package_status(status, user_type) for status in data['status']]
+        new_status = [status for status in new_status if status]
         data['status'] = new_status
 
         return data
@@ -91,6 +93,16 @@ class Meta:  # pylint: disable=too-few-public-methods
         unknown = EXCLUDE
 
     items = fields.Nested(StaffItemSchema, data_key="items", many=True)
+    review_status = fields.Method('get_review_status')
+
+    def get_review_status(self, package):
+        """Add review status."""
+        reviews = [item.review for item in package.items if item.review]
+        pending_manager_review = any(review.status == SubmissionReviewStatus.PENDING_MANAGER_REVIEW
+                                     for review in reviews)
+        if pending_manager_review:
+            return SubmissionReviewStatus.PENDING_MANAGER_REVIEW.value
+        return None
 
 
 def get_package_status(status, user_type):

submit-api/src/submit_api/schemas/project.py

@@ -6,7 +6,7 @@
 
 from marshmallow import EXCLUDE, Schema, fields
 
-from submit_api.schemas.package import PackageSchema
+from submit_api.schemas.package import PackageSchema, StaffPackageSchema
 
 
 class ProjectSchema(Schema):
@@ -61,7 +61,7 @@ class Meta:  # pylint: disable=too-few-public-methods
     packages = fields.List(fields.Nested(AccountProjectPackageSchema), data_key="packages")
 
 
-class StaffAccountProjectPackageSchema(AccountProjectPackageSchema):
+class StaffAccountProjectPackageSchema(StaffPackageSchema):
     """Account project package schema for staff."""
 
     class Meta:  # pylint: disable=too-few-public-methods
@@ -71,6 +71,7 @@ class Meta:  # pylint: disable=too-few-public-methods
 
     days_since_submission = fields.Method('get_days_since_submission')
     meta = fields.Method('get_meta')
+    items = fields.Function(lambda obj: [])
 
     def get_days_since_submission(self, obj):
         """Get days since submission."""

submit-web/src/components/Filters/StatusFilter.tsx

@@ -8,7 +8,7 @@ import {
 } from "@mui/material";
 import { useProjectFilters } from "./projectFilterStore";
 import { SUBMISSION_STATUS } from "@/models/Submission";
-import SubmissionStatusChip from "../Submission/SubmissionStatusChip";
+import { SubmissionStatusChip } from "../SubmissionStatusChip";
 import { BCDesignTokens } from "epic.theme";
 
 function StatusFilter() {

submit-web/src/components/PackageStatusChip/PackageStatusChipStack.tsx

@@ -1,19 +1,35 @@
-import { PackageStatus } from "@/models/Package";
+import {
+  NON_CANONICAL_PACKAGE_STATUS,
+  NonCanonicalPackageStatus,
+  PackageStatus,
+} from "@/models/Package";
 import { Box, Stack } from "@mui/material";
 import PackageStatusChip from ".";
+import { When } from "react-if";
 
 type PackageStatusChipStackProps = {
   status: PackageStatus[];
+  reviewStatus?: NonCanonicalPackageStatus;
 };
 export const PackageStatusChipStack = ({
   status,
+  reviewStatus,
 }: PackageStatusChipStackProps) => {
   return (
-    <Box sx={{ display: "inline-block" }}>
-      <Stack direction="column" spacing={1} width={"fit-content"}>
+    <Box sx={{ display: "inline-block", width: "fit-content" }}>
+      <Stack direction="column" spacing={1} alignItems={"flex-end"}>
         {status.map((value) => (
           <PackageStatusChip key={value} status={value} />
         ))}
+        <When
+          condition={
+            reviewStatus === NON_CANONICAL_PACKAGE_STATUS.PENDING_MANAGER_REVIEW
+          }
+        >
+          <PackageStatusChip
+            status={NON_CANONICAL_PACKAGE_STATUS.PENDING_MANAGER_REVIEW}
+          />
+        </When>
       </Stack>
     </Box>
   );

submit-web/src/components/PackageStatusChip/index.tsx

@@ -1,12 +1,15 @@
-import { PackageStatus } from "@/models/Package";
+import { NonCanonicalPackageStatus, PackageStatus } from "@/models/Package";
 import { Chip } from "@mui/material";
 import { BCDesignTokens, EAOColors } from "epic.theme";
 
 type StyleProps = {
   sx: Record<string, string | number>;
   label: string;
 };
-const statusStyles: Record<PackageStatus, StyleProps> = {
+const statusStyles: Record<
+  PackageStatus | NonCanonicalPackageStatus,
+  StyleProps
+> = {
   APPROVED: {
     sx: {
       borderRadius: 1,
@@ -67,12 +70,22 @@ const statusStyles: Record<PackageStatus, StyleProps> = {
     },
     label: "New",
   },
+  PENDING_MANAGER_REVIEW: {
+    sx: {
+      borderRadius: 1,
+      border: `1px solid #F18A15`,
+      background: "#FFDEB8",
+      height: "24px",
+      width: "188px",
+    },
+    label: "Awaiting Manager Review",
+  },
 };
 
 export default function PackageStatusChip({
   status,
 }: {
-  status: PackageStatus;
+  status: PackageStatus | NonCanonicalPackageStatus;
 }) {
   const style = statusStyles[status];
 

submit-web/src/components/Projects/ProjectTable/StaffTableRow.tsx

@@ -29,8 +29,9 @@ export default function StaffTableRow({ submissionPackage }: ProjectRowProps) {
     name,
     meta: { cc_completed_on = "", mp_review = "", type = "" },
     days_since_submission = 0,
-    status,
+    review_status,
     submitted_on,
+    status,
   } = submissionPackage;
 
   return (
@@ -78,8 +79,11 @@ export default function StaffTableRow({ submissionPackage }: ProjectRowProps) {
         <StyledProjectTableCell align="right">
           {mp_review}
         </StyledProjectTableCell>
-        <StyledProjectTableCell align="center">
-          <PackageStatusChipStack status={status} />
+        <StyledProjectTableCell align="right">
+          <PackageStatusChipStack
+            status={status}
+            reviewStatus={review_status}
+          />
         </StyledProjectTableCell>
       </StyledProjectTableRow>
       <EmptyRow colSpan={7} />

submit-web/src/components/Projects/ProjectTable/index.tsx

@@ -12,7 +12,7 @@ export default function ProjectTable({
 }) {
   return (
     <TableContainer component={Box} sx={{ height: "100%" }}>
-      <Table sx={{ tableLayout: "fixed", border: 0 }}>
+      <Table>
         {!headless && <ProjectTableHead />}
         <TableBody>
           {submissionPackages?.map((subPackage) => (

submit-web/src/components/Submission/ItemsTable.tsx

@@ -41,6 +41,7 @@ export default function ItemsTable({
     ),
     has_document:
       subItem.type.submission_method === SUBMISSION_ITEM_METHOD.DOCUMENT_UPLOAD,
+    reviewStatus: subItem.review?.status,
   }));
 
   const internalStaffDocuments = submissionItems.flatMap(

submit-web/src/components/Submission/SubmissionItemTableRow/ProponentSubmissionItemTableRow.tsx

@@ -5,7 +5,7 @@ import {
   Typography,
 } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
-import SubmissionStatusChip from "../SubmissionStatusChip";
+import { SubmissionStatusChip } from "../../SubmissionStatusChip";
 import { SUBMISSION_STATUS } from "@/models/Submission";
 import { useNavigate, useParams } from "@tanstack/react-router";
 import DocumentRow from "../DocumentRow";

submit-web/src/components/Submission/SubmissionItemTableRow/StaffSubmissionItemTableRow.tsx

@@ -10,14 +10,15 @@ import { When } from "react-if";
 import { SubmissionItemTableCell, SubmissionItemTableRowProps } from ".";
 import { PackageTableRow } from ".";
 import { useNavigate, useParams } from "@tanstack/react-router";
+import { SubmissionStatusChipStack } from "../../SubmissionStatusChip";
 
 export default function StaffSubmissionItemTableRow({
   item,
   error = false,
 }: SubmissionItemTableRowProps) {
   const { projectId, submissionPackageId } = useParams({ strict: false });
   const navigate = useNavigate();
-  const { name, submissions, has_document, id } = item;
+  const { name, submissions, has_document, id, status, reviewStatus } = item;
 
   const actionLabel = has_document ? "Review" : "View";
 
@@ -53,7 +54,14 @@ export default function StaffSubmissionItemTableRow({
             </Typography>
           </MuiLink>
         </SubmissionItemTableCell>
-        <SubmissionItemTableCell align="right" colSpan={3} />
+        <SubmissionItemTableCell align="right" colSpan={2} />
+        <SubmissionItemTableCell align="right">
+          <SubmissionStatusChipStack
+            status={status}
+            reviewStatus={reviewStatus}
+          />
+        </SubmissionItemTableCell>
+
         <SubmissionItemTableCell align="center">
           <Typography
             variant="body2"

submit-web/src/components/Submission/types.ts

@@ -8,4 +8,5 @@ export type SubmissionItemTableRow = {
   version: number;
   submissions: Array<Submission>;
   has_document: boolean;
+  reviewStatus?: string;
 };

submit-web/src/components/Submission/SubmissionStatusChip.tsx → submit-web/src/components/SubmissionStatusChip/index.tsx

@@ -1,5 +1,8 @@
-import { SubmissionStatus } from "@/models/Submission";
-import { Chip } from "@mui/material";
+import {
+  NON_CANONICAL_SUBMISSION_STATUS,
+  SubmissionStatus,
+} from "@/models/Submission";
+import { Box, Chip, Stack } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
 import { EAOColors } from "epic.theme";
 
@@ -8,7 +11,7 @@ type StyleProps = {
   label: string;
 };
 
-const statusStyles: Record<SubmissionStatus, StyleProps> = {
+const statusStyles: Record<string, StyleProps> = {
   NEW_SUBMISSION: {
     sx: {
       borderRadius: 1,
@@ -39,19 +42,26 @@ const statusStyles: Record<SubmissionStatus, StyleProps> = {
   SUBMITTED: {
     label: "Submitted",
     sx: {
+      width: "90px",
       borderRadius: 1,
       border: `1px solid ${BCDesignTokens.themeBlue100}`,
       background: BCDesignTokens.themeBlue20,
       height: "24px",
     },
   },
+  PENDING_MANAGER_REVIEW: {
+    sx: {
+      borderRadius: 1,
+      border: `1px solid #F18A15`,
+      background: "#FFDEB8",
+      height: "24px",
+      width: "188px",
+    },
+    label: "Awaiting Manager Review",
+  },
 };
 
-export default function SubmissionStatusChip({
-  status,
-}: {
-  status: SubmissionStatus;
-}) {
+export function SubmissionStatusChip({ status }: { status: string }) {
   const style = statusStyles[status];
 
   if (!style) {
@@ -67,3 +77,29 @@ export default function SubmissionStatusChip({
     />
   );
 }
+
+type SubmissionStatusChipStackProps = {
+  status: SubmissionStatus;
+  reviewStatus?: string;
+};
+export const SubmissionStatusChipStack = ({
+  status,
+  reviewStatus,
+}: SubmissionStatusChipStackProps) => {
+  return (
+    <Box sx={{ display: "inline-block" }}>
+      <Stack
+        direction="column"
+        spacing={1}
+        width={"fit-content"}
+        alignItems={"flex-end"}
+      >
+        {status && <SubmissionStatusChip status={status} />}
+        {reviewStatus ===
+          NON_CANONICAL_SUBMISSION_STATUS.PENDING_MANAGER_REVIEW && (
+          <SubmissionStatusChip status={reviewStatus} />
+        )}
+      </Stack>
+    </Box>
+  );
+};

submit-web/src/models/Package.ts

@@ -5,6 +5,14 @@ export type PackageType = {
   name: string;
 };
 
+// These statuses are just for UI purposes, the actual canonical business statuses are PackageStatus
+export type NonCanonicalPackageStatus = "PENDING_MANAGER_REVIEW";
+export const NON_CANONICAL_PACKAGE_STATUS = Object.freeze<
+  Record<NonCanonicalPackageStatus, NonCanonicalPackageStatus>
+>({
+  PENDING_MANAGER_REVIEW: "PENDING_MANAGER_REVIEW",
+});
+
 export type PackageStatus =
   | "IN_REVIEW"
   | "APPROVED"
@@ -62,4 +70,5 @@ export type SubmissionPackage = {
   account_project_id: number;
   meta: SubmissionPackageMeta;
   days_since_submission?: number;
+  review_status?: NonCanonicalPackageStatus;
 };

submit-web/src/models/Submission.ts

@@ -1,11 +1,21 @@
+// NonCanonicalSubmissionStatus are just for display purpose, they are not canonical business statuses
+export type NonCanonicalSubmissionStatus = "PENDING_MANAGER_REVIEW";
+
+export const NON_CANONICAL_SUBMISSION_STATUS = Object.freeze<
+  Record<NonCanonicalSubmissionStatus, NonCanonicalSubmissionStatus>
+>({
+  PENDING_MANAGER_REVIEW: "PENDING_MANAGER_REVIEW",
+});
+
 export type SubmissionStatus =
   | "NEW_SUBMISSION"
   | "COMPLETED"
   | "PARTIALLY_COMPLETED"
   | "SUBMITTED";
+
 export const SUBMISSION_STATUS: Record<
-  SubmissionStatus,
-  { value: SubmissionStatus; label: string }
+  SubmissionStatus | NonCanonicalSubmissionStatus,
+  { value: SubmissionStatus | NonCanonicalSubmissionStatus; label: string }
 > = {
   NEW_SUBMISSION: {
     value: "NEW_SUBMISSION",
@@ -23,6 +33,10 @@ export const SUBMISSION_STATUS: Record<
     value: "SUBMITTED",
     label: "Submitted",
   },
+  PENDING_MANAGER_REVIEW: {
+    value: "PENDING_MANAGER_REVIEW",
+    label: "Awaiting Manager Review",
+  },
 };
 
 export type SubmittedForm = {

submit-web/src/models/SubmissionReview.ts

@@ -1,4 +1,4 @@
-type SubmissionReviewStatus =
+export type SubmissionReviewStatus =
   | "PENDING_STAFF_REVIEW"
   | "PENDING_MANAGER_REVIEW"
   | "APPROVED"