Show Design Reviews on Gantt Chart

src/backend/src/prisma-query-args/projects.query-args.ts

@@ -5,6 +5,7 @@ import { getDescriptionBulletQueryArgs } from './description-bullets.query-args'
 import { getTeamQueryArgs } from './teams.query-args';
 import { getMaterialQueryArgs, getAssemblyQueryArgs } from './bom.query-args';
 import { getTaskQueryArgs } from './tasks.query-args';
+import { getDesignReviewQueryArgs } from './design-reviews.query-args';
 
 export type ProjectQueryArgs = ReturnType<typeof getProjectQueryArgs>;
 
@@ -58,7 +59,8 @@ export const getProjectQueryArgs = (organizationId: string) =>
                 where: { dateDeleted: null },
                 ...getAssemblyQueryArgs(organizationId)
               },
-              blocking: { where: { wbsElement: { dateDeleted: null } }, include: { wbsElement: true } }
+              blocking: { where: { wbsElement: { dateDeleted: null } }, include: { wbsElement: true } },
+              designReviews: { where: { dateDeleted: null }, ...getDesignReviewQueryArgs(organizationId) }
             }
           },
           blockedBy: { where: { dateDeleted: null } }

src/backend/src/prisma-query-args/work-packages.query-args.ts

@@ -2,6 +2,7 @@ import { Prisma } from '@prisma/client';
 import { getUserQueryArgs } from './user.query-args';
 import { getTaskQueryArgs } from './tasks.query-args';
 import { getDescriptionBulletQueryArgs } from './description-bullets.query-args';
+import { getDesignReviewQueryArgs } from './design-reviews.query-args';
 
 export type WorkPackageQueryArgs = ReturnType<typeof getWorkPackageQueryArgs>;
 
@@ -29,7 +30,8 @@ export const getWorkPackageQueryArgs = (organizationId: string) =>
           },
           blocking: { where: { wbsElement: { dateDeleted: null } }, include: { wbsElement: true } },
           tasks: { where: { dateDeleted: null }, ...getTaskQueryArgs(organizationId) },
-          descriptionBullets: { where: { dateDeleted: null }, ...getDescriptionBulletQueryArgs(organizationId) }
+          descriptionBullets: { where: { dateDeleted: null }, ...getDescriptionBulletQueryArgs(organizationId) },
+          designReviews: { where: { dateDeleted: null }, ...getDesignReviewQueryArgs(organizationId) }
         }
       },
       blockedBy: { where: { dateDeleted: null } }

src/backend/src/services/notifications.services.ts

@@ -24,7 +24,8 @@ export default class NotificationsService {
         },
         status: {
           not: 'DONE'
-        }
+        },
+        dateDeleted: null
       },
       include: {
         assignees: {

src/backend/src/transformers/projects.transformer.ts

@@ -17,6 +17,7 @@ import { assemblyTransformer, materialTransformer } from './material.transformer
 import { userTransformer } from './user.transformer';
 import { ProjectQueryArgs } from '../prisma-query-args/projects.query-args';
 import teamTransformer from './teams.transformer';
+import { designReviewTransformer } from './design-reviews.transformer';
 
 const projectTransformer = (project: Prisma.ProjectGetPayload<ProjectQueryArgs>): Project => {
   const { wbsElement } = project;
@@ -87,6 +88,7 @@ const projectTransformer = (project: Prisma.ProjectGetPayload<ProjectQueryArgs>)
         materials: workPackage.wbsElement?.materials.map(materialTransformer),
         assemblies: workPackage.wbsElement?.assemblies.map(assemblyTransformer),
         blocking: workPackage.wbsElement.blocking.map((blocking) => wbsNumOf(blocking.wbsElement)),
+        designReviews: workPackage.wbsElement.designReviews.map(designReviewTransformer),
         deleted: workPackage.wbsElement.dateDeleted !== null
       };
     })

src/backend/src/transformers/work-packages.transformer.ts

@@ -4,6 +4,7 @@ import descriptionBulletTransformer from '../transformers/description-bullets.tr
 import { convertStatus, wbsNumOf } from '../utils/utils';
 import { userTransformer } from './user.transformer';
 import { WorkPackageQueryArgs } from '../prisma-query-args/work-packages.query-args';
+import { designReviewTransformer } from './design-reviews.transformer';
 
 const workPackageTransformer = (wpInput: Prisma.Work_PackageGetPayload<WorkPackageQueryArgs>): WorkPackage => {
   const wbsNum = wbsNumOf(wpInput.wbsElement);
@@ -37,6 +38,7 @@ const workPackageTransformer = (wpInput: Prisma.Work_PackageGetPayload<WorkPacka
     projectName: wpInput.project.wbsElement.name,
     stage: (wpInput.stage as WorkPackageStage) || undefined,
     blocking: wpInput.wbsElement.blocking.map((wp) => wbsNumOf(wp.wbsElement)),
+    designReviews: wpInput.wbsElement.designReviews.map(designReviewTransformer),
     deleted: wpInput.wbsElement.dateDeleted !== null
   };
 };

src/frontend/src/apis/transformers/work-packages.transformers.ts

@@ -5,6 +5,7 @@
 
 import { WorkPackage } from 'shared';
 import { implementedChangeTransformer } from './change-requests.transformers';
+import { designReviewTransformer } from './design-reviews.tranformers';
 import { descriptionBulletTransformer } from './projects.transformers';
 
 /**
@@ -20,6 +21,7 @@ export const workPackageTransformer = (workPackage: WorkPackage): WorkPackage =>
     startDate: new Date(workPackage.startDate),
     endDate: new Date(workPackage.endDate),
     descriptionBullets: workPackage.descriptionBullets.map(descriptionBulletTransformer),
-    changes: workPackage.changes.map(implementedChangeTransformer)
+    changes: workPackage.changes.map(implementedChangeTransformer),
+    designReviews: workPackage.designReviews.map(designReviewTransformer)
   };
 };

src/frontend/src/pages/GanttPage/GanttChartComponents/GanttChartColorLegend.tsx

@@ -4,9 +4,13 @@
  */
 
 import { Box, Card, Tooltip, Typography } from '@mui/material';
-import { WbsElementStatus, WorkPackageStage } from 'shared';
-import { GanttWorkPackageStageColorPipe, GanttWorkPackageTextColorPipe } from '../../../utils/gantt.utils';
-import { WbsElementStatusTextPipe, WorkPackageStageTextPipe } from '../../../utils/enum-pipes';
+import { DesignReviewStatus, WbsElementStatus, WorkPackageStage } from 'shared';
+import {
+  GanttDesignReviewStatusColorPipe,
+  GanttWorkPackageStageColorPipe,
+  GanttWorkPackageTextColorPipe
+} from '../../../utils/gantt.utils';
+import { DesignReviewStatusTextPipe, WbsElementStatusTextPipe, WorkPackageStageTextPipe } from '../../../utils/enum-pipes';
 
 const LEGEND_POPUPS_MAP = new Map<WorkPackageStage, JSX.Element>();
 
@@ -48,6 +52,43 @@ Object.values(WorkPackageStage).map((stage) =>
   )
 );
 
+const DesignReviewToolTipPopUp = () => {
+  return (
+    <Card
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+        px: 2,
+        py: 1
+      }}
+    >
+      {
+        // map through all the Wbs Element Statuses
+        [DesignReviewStatus.UNCONFIRMED, DesignReviewStatus.SCHEDULED].map((status) => {
+          return (
+            <Box
+              sx={{
+                backgroundColor: GanttDesignReviewStatusColorPipe(status),
+                height: '2rem',
+                width: '8rem',
+                borderRadius: 1,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center'
+              }}
+            >
+              <Typography variant="body1" sx={{ color: 'white' }}>
+                {DesignReviewStatusTextPipe(status)}
+              </Typography>
+            </Box>
+          );
+        })
+      }
+    </Card>
+  );
+};
+
 const GanttChartColorLegend = () => {
   return (
     <Box
@@ -103,6 +144,32 @@ const GanttChartColorLegend = () => {
           );
         })
       }
+      <Box
+        sx={{
+          background: `linear-gradient(90deg, ${GanttDesignReviewStatusColorPipe(
+            DesignReviewStatus.UNCONFIRMED
+          )} 0%, ${GanttDesignReviewStatusColorPipe(DesignReviewStatus.CONFIRMED)} 100%)`,
+          display: 'flex',
+          flexDirection: 'column',
+          height: '2rem',
+          width: '8.25rem',
+          borderRadius: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          px: 1
+        }}
+      >
+        <Tooltip
+          title={<DesignReviewToolTipPopUp />}
+          slotProps={{
+            tooltip: { sx: { background: 'transparent', width: 'fit-content' } }
+          }}
+        >
+          <Typography variant="body2" sx={{ color: 'white', overflow: 'hidden', textWrap: 'nowrap' }}>
+            Design Review
+          </Typography>
+        </Tooltip>
+      </Box>
     </Box>
   );
 };

src/frontend/src/pages/GanttPage/GanttChartComponents/GanttTaskBar/GanttTaskBarDisplay.tsx

@@ -3,13 +3,15 @@ import { grey } from '@mui/material/colors';
 import { ArrowDropDownIcon } from '@mui/x-date-pickers';
 import { useHistory } from 'react-router-dom';
 import {
+  GanttDesignReviewStatusColorPipe,
   GanttTask,
   isHighlightedChangeOnGanttTask,
   RequestEventChange,
+  transformDesignReviewToGanttTask,
   transformWorkPackageToGanttTask
 } from '../../../../utils/gantt.utils';
 import { routes } from '../../../../utils/routes';
-import { wbsPipe } from 'shared';
+import { addWeeksToDate, DesignReview, wbsPipe } from 'shared';
 import {
   ganttTaskBarBackgroundStyles,
   ganttTaskBarContainerStyles,
@@ -19,6 +21,7 @@ import {
 } from './GanttTaskBarDisplayStyles';
 import { CSSProperties } from 'react';
 import { ArcherElement } from 'react-archer';
+import { datePipe } from '../../../../utils/pipes';
 
 interface GanttTaskBarDisplayProps {
   days: Date[];
@@ -87,6 +90,20 @@ const GanttTaskBarDisplay = ({
     };
   };
 
+  const ganttTaskBarDesignReviewOverlayStyles = (designReview: DesignReview): CSSProperties => {
+    return {
+      gridColumnStart: getStartCol(designReview.dateScheduled),
+      gridColumnEnd: getEndCol(addWeeksToDate(designReview.dateScheduled, 1)),
+      height: '2rem',
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: '0.25rem',
+      backgroundColor: GanttDesignReviewStatusColorPipe(designReview.status),
+      cursor: 'pointer',
+      gridRow: 1,
+      zIndex: 2
+    };
+  };
+
   const highlightedChangeBoxStyles = (highlightedChange: RequestEventChange): CSSProperties => {
     return {
       paddingTop: '2px',
@@ -159,6 +176,24 @@ const GanttTaskBarDisplay = ({
               />
             );
           })}
+        {task.designReviews.map((designReview) => {
+          return (
+            <div
+              style={ganttTaskBarDesignReviewOverlayStyles(designReview)}
+              onMouseOver={(e) => handleOnMouseOver(e, transformDesignReviewToGanttTask(designReview))}
+              onMouseLeave={handleOnMouseLeave}
+              onClick={() => history.push(`${routes.CALENDAR}/${designReview.designReviewId}`)}
+            >
+              <Typography
+                variant="body1"
+                sx={taskNameContainerStyles(task)}
+                onClick={() => history.push(`${routes.CALENDAR}/${designReview.designReviewId}`)}
+              >
+                {datePipe(designReview.dateScheduled, false)}
+              </Typography>
+            </div>
+          );
+        })}
         {highlightedChange && isHighlightedChangeOnGanttTask(highlightedChange, task) && (
           <div id="proposedChange" style={highlightedChangeBoxStyles(highlightedChange)}>
             <Typography

src/frontend/src/pages/GanttPage/GanttChartComponents/GanttTaskBar/GanttTaskBarEditView.tsx

@@ -115,6 +115,7 @@ export const GanttTaskBarEditView = ({
       changes: [],
       materials: [],
       assemblies: [],
+      designReviews: [],
       deleted: false
     };
     addWorkPackage(workPackage);

src/frontend/src/tests/test-support/test-data/work-packages.stub.ts

@@ -54,7 +54,8 @@ export const exampleResearchWorkPackage: WorkPackage = {
   materials: [],
   assemblies: [],
   blocking: [],
-  teamTypes: []
+  teamTypes: [],
+  designReviews: []
 };
 
 export const exampleDesignWorkPackage: WorkPackage = {
@@ -98,7 +99,8 @@ export const exampleDesignWorkPackage: WorkPackage = {
   materials: [],
   assemblies: [],
   blocking: [],
-  teamTypes: []
+  teamTypes: [],
+  designReviews: []
 };
 
 export const exampleManufacturingWorkPackage: WorkPackage = {
@@ -133,7 +135,8 @@ export const exampleManufacturingWorkPackage: WorkPackage = {
   materials: [],
   assemblies: [],
   blocking: [],
-  teamTypes: []
+  teamTypes: [],
+  designReviews: []
 };
 
 export const exampleInstallWorkPackage: WorkPackage = {
@@ -167,8 +170,9 @@ export const exampleInstallWorkPackage: WorkPackage = {
   materials: [],
   assemblies: [],
   blocking: [],
-  deleted: false,
-  teamTypes: []
+  teamTypes: [],
+  designReviews: [],
+  deleted: false
 };
 
 export const exampleWorkPackage5: WorkPackage = {
@@ -202,7 +206,8 @@ export const exampleWorkPackage5: WorkPackage = {
   materials: [],
   assemblies: [],
   blocking: [],
-  teamTypes: []
+  teamTypes: [],
+  designReviews: []
 };
 
 export const exampleAllWorkPackages: WorkPackage[] = [

src/frontend/src/utils/enum-pipes.ts

@@ -3,7 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 import { yellow, green, blue, purple, grey, orange } from '@mui/material/colors';
-import { ChangeRequestStatus, ChangeRequestType, WbsElementStatus, WorkPackageStage } from 'shared';
+import { ChangeRequestStatus, ChangeRequestType, DesignReviewStatus, WbsElementStatus, WorkPackageStage } from 'shared';
 
 // maps stage to the desired color
 export const WorkPackageStageColorPipe: (stage: WorkPackageStage | undefined) => string = (stage) => {
@@ -79,3 +79,16 @@ export const WbsElementStatusTextPipe: (status: WbsElementStatus) => string = (s
       return 'Complete';
   }
 };
+
+export const DesignReviewStatusTextPipe: (status: DesignReviewStatus) => string = (status) => {
+  switch (status) {
+    case DesignReviewStatus.UNCONFIRMED:
+      return 'Unconfirmed';
+    case DesignReviewStatus.CONFIRMED:
+      return 'Confirmed';
+    case DesignReviewStatus.DONE:
+      return 'Done';
+    case DesignReviewStatus.SCHEDULED:
+      return 'Scheduled';
+  }
+};