From ec2d9c2485f7e035304ae012928e926612d19ec6 Mon Sep 17 00:00:00 2001
From: Tom Chapman <tchapman000@gmail.com>
Date: Mon, 11 Dec 2023 10:50:26 -0800
Subject: [PATCH] add checks for null values

---
 .../components/myWorkplans/Card/CardBody.tsx  | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/epictrack-web/src/components/myWorkplans/Card/CardBody.tsx b/epictrack-web/src/components/myWorkplans/Card/CardBody.tsx
index fceb742d8..a509c4113 100644
--- a/epictrack-web/src/components/myWorkplans/Card/CardBody.tsx
+++ b/epictrack-web/src/components/myWorkplans/Card/CardBody.tsx
@@ -117,38 +117,40 @@ const CardBody = ({ workplan }: CardProps) => {
           </Grid>
         </When>
       </Grid>
-      <Grid item container direction="row" spacing={1}>
-        <Grid
-          item
-          sx={{
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-          }}
-        >
-          <ETCaption1 color={Palette.neutral.main}>
-            {`UPCOMING MILESTONE ${dayjs(new Date())
-              .add(workplan?.phase_info?.days_left, "days")
-              .format(MONTH_DAY_YEAR)
-              .toUpperCase()}`}
-          </ETCaption1>
-        </Grid>
-      </Grid>
-      <Grid item container direction="row" spacing={1}>
-        <Grid item sx={{ overflow: "hidden" }}>
-          <ETParagraph
-            bold
-            color={Palette.neutral.dark}
+      <When condition={Boolean(workplan?.phase_info)}>
+        <Grid item container direction="row" spacing={1}>
+          <Grid
+            item
             sx={{
               overflow: "hidden",
               textOverflow: "ellipsis",
               whiteSpace: "nowrap",
             }}
           >
-            {workplan.phase_info.next_milestone}
-          </ETParagraph>
+            <ETCaption1 color={Palette.neutral.main}>
+              {`UPCOMING MILESTONE ${dayjs(new Date())
+                .add(workplan?.phase_info?.days_left, "days")
+                .format(MONTH_DAY_YEAR)
+                .toUpperCase()}`}
+            </ETCaption1>
+          </Grid>
         </Grid>
-      </Grid>
+        <Grid item container direction="row" spacing={1}>
+          <Grid item sx={{ overflow: "hidden" }}>
+            <ETParagraph
+              bold
+              color={Palette.neutral.dark}
+              sx={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {workplan.phase_info?.next_milestone}
+            </ETParagraph>
+          </Grid>
+        </Grid>
+      </When>
 
       <Grid item container direction="row" spacing={1}>
         <Grid item>