From 6ae1ffdd965d03f936f105e2f92b5c1e98b4c761 Mon Sep 17 00:00:00 2001
From: ajaitasaini <ajaita.saini@coforma.io>
Date: Fri, 15 Nov 2024 11:40:29 -0500
Subject: [PATCH] Last Saved Bar (#47)

---
 .../assets/icons/check/icon_check_gray.png    | Bin 0 -> 560 bytes
 .../components/report/ReportPageWrapper.tsx   |   4 +-
 .../src/components/report/SubnavBar.tsx       |  90 ++++++++++++++++++
 services/ui-src/src/styles/theme.ts           |  16 ++++
 services/ui-src/src/types/states.ts           |   1 +
 .../src/utils/state/management/reportState.ts |   4 +-
 services/ui-src/src/utils/state/useStore.ts   |   1 +
 7 files changed, 113 insertions(+), 3 deletions(-)
 create mode 100644 services/ui-src/src/assets/icons/check/icon_check_gray.png
 create mode 100644 services/ui-src/src/components/report/SubnavBar.tsx

diff --git a/services/ui-src/src/assets/icons/check/icon_check_gray.png b/services/ui-src/src/assets/icons/check/icon_check_gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..528a13bc81d82a9c9467a1bdb1031d37f709f841
GIT binary patch
literal 560
zcmV-00?+-4P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0mVr~K~#7F?UX-K
z!ax+pH;Dr+-XIrX#Lkl3fRcg2a01~5*x6}mXPn_*XKnyD0EY|2PCF`QfFbdF4#E7}
zWD|@H`I>CrzJ1>>FT2ZFp+e^_iRG+zyM2qtljAt6QmLdFhGG310GY$s@Pw=&L~a1O
zuGhBP?L1=22O+Z@MCQBQZpxWfH=E6i`|{@iFjvVOt*`KMBuT2f<BNy_6}0XS1?uH;
zxf9$pN#<BfUtUQ_HQYg{11Lc4=@TUtqoORGc~buSdcE#N0$|sYdBYP@MIcg`TefXC
zOw(M20AT)zw(Aj#Vj)tRYm>>u@&=CpFz?1Jj)XYu7c;B54**)k*Z6^WBU3kk_Zc2n
zETcK;co8+5O;wg<kyb9~BEeDP{j%TUlC;|I_t!jgAAk#?D9SwU3?F1Afs#4uXrs|6
zwzHwDxYcUauy`r}5i4|48w>`s#JpgDh>4uOfMr)l#GIr=1((a^XSG`WV*WcpNPzE+
z$Kz+we1$gwhy@@%QbOFr{2@g?AHV}a`=rhU%<=pBETxpB1VGFLATpT?0SG{3HWvoq
yLExmk!o15)kT8G;;u6CfG9M0yIxAG@M12F&fCF?VHfa6;0000<MNUMnLSTZirSQi9

literal 0
HcmV?d00001

diff --git a/services/ui-src/src/components/report/ReportPageWrapper.tsx b/services/ui-src/src/components/report/ReportPageWrapper.tsx
index 225b4224..bc2a213f 100644
--- a/services/ui-src/src/components/report/ReportPageWrapper.tsx
+++ b/services/ui-src/src/components/report/ReportPageWrapper.tsx
@@ -1,10 +1,11 @@
+import { useParams } from "react-router-dom";
 import { Box, Button, Divider, Flex, HStack, VStack } from "@chakra-ui/react";
 import { useEffect, useMemo, useState } from "react";
 import { Page } from "./Page";
 import { Sidebar } from "./Sidebar";
 import { ReportModal } from "./ReportModal";
+import { SubnavBar } from "./SubnavBar";
 import { getReport } from "utils/api/requestMethods/report";
-import { useParams } from "react-router-dom";
 import { useStore } from "utils";
 import { FormProvider, useForm } from "react-hook-form";
 import { FormPageTemplate } from "types/report";
@@ -72,6 +73,7 @@ export const ReportPageWrapper = () => {
 
   return (
     <FormProvider {...methods}>
+      <SubnavBar />
       <HStack width="100%" height="100%" position="relative" spacing="0">
         {currentPage.sidebar && <Sidebar />}
         <VStack
diff --git a/services/ui-src/src/components/report/SubnavBar.tsx b/services/ui-src/src/components/report/SubnavBar.tsx
new file mode 100644
index 00000000..cc34ffcf
--- /dev/null
+++ b/services/ui-src/src/components/report/SubnavBar.tsx
@@ -0,0 +1,90 @@
+import { Link as RouterLink, useParams } from "react-router-dom";
+import { Flex, Container, Image, Link, Text } from "@chakra-ui/react";
+import { useStore } from "utils";
+import checkIcon from "assets/icons/check/icon_check_gray.png";
+import { ReportType } from "types/report";
+
+export const SubnavBar = () => {
+  const { reportType } = useParams();
+  const { report, lastSavedTime } = useStore();
+  const saveStatusText = "Last saved " + lastSavedTime;
+  return (
+    <Flex sx={sx.subnavBar}>
+      <Container sx={sx.subnavContainer}>
+        <Flex sx={sx.subnavFlex}>
+          <Flex>
+            <Text sx={sx.submissionNameText}>
+              {reportType == ReportType.QM ? report?.state + " QMS Report" : ""}
+            </Text>
+          </Flex>
+          <Flex sx={sx.subnavFlexRight}>
+            {lastSavedTime && (
+              <>
+                <Image
+                  src={checkIcon}
+                  alt="gray checkmark icon"
+                  sx={sx.checkIcon}
+                />
+                <Text sx={sx.saveStatusText}>{saveStatusText}</Text>
+              </>
+            )}
+            <Link
+              as={RouterLink}
+              to={`/report/${report?.type}/${report?.state}` || "/"}
+              sx={sx.leaveFormLink}
+              variant="outlineButton"
+              tabIndex={-1}
+            >
+              Leave form
+            </Link>
+          </Flex>
+        </Flex>
+      </Container>
+    </Flex>
+  );
+};
+
+const sx = {
+  subnavBar: {
+    position: "sticky",
+    top: 0,
+    zIndex: "sticky",
+    bg: "palette.secondary_lightest",
+    boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
+  },
+  subnavContainer: {
+    maxW: "appMax",
+    ".desktop &": {
+      padding: "0 2rem",
+    },
+  },
+  subnavFlex: {
+    height: "60px",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  leaveFormLink: {
+    marginLeft: "1rem",
+  },
+  checkIcon: {
+    marginRight: "0.5rem",
+    boxSize: "1rem",
+    ".mobile &": {
+      display: "none",
+    },
+  },
+  submissionNameText: {
+    fontWeight: "bold",
+  },
+  saveStatusText: {
+    fontSize: "sm",
+    ".mobile &": {
+      width: "5rem",
+      textAlign: "right",
+    },
+  },
+  subnavFlexRight: {
+    alignItems: "center",
+    paddingRight: ".5rem",
+  },
+};
diff --git a/services/ui-src/src/styles/theme.ts b/services/ui-src/src/styles/theme.ts
index e58557e3..5b50a9c4 100644
--- a/services/ui-src/src/styles/theme.ts
+++ b/services/ui-src/src/styles/theme.ts
@@ -405,6 +405,22 @@ const theme = extendTheme({
             textDecoration: "none",
           },
         },
+        outlineButton: {
+          color: "palette.primary",
+          border: "1px solid",
+          padding: ".5rem 1rem",
+          borderRadius: "5px",
+          fontWeight: "bold",
+          textDecoration: "none",
+          _visited: { color: "palette.primary" },
+          ":hover, :visited:hover": {
+            color: "palette.primary_darker",
+            textDecoration: "none",
+          },
+          ".mobile &": {
+            border: "none",
+          },
+        },
       },
       defaultProps: {
         variant: "primary",
diff --git a/services/ui-src/src/types/states.ts b/services/ui-src/src/types/states.ts
index 47b3d82b..05da5485 100644
--- a/services/ui-src/src/types/states.ts
+++ b/services/ui-src/src/types/states.ts
@@ -21,6 +21,7 @@ export interface HcbsReportState {
   currentPageId?: string;
   modalOpen: boolean;
   modalComponent?: React.ReactFragment;
+  lastSavedTime?: string;
 
   // ACTIONS
   setReport: (report?: Report) => void;
diff --git a/services/ui-src/src/utils/state/management/reportState.ts b/services/ui-src/src/utils/state/management/reportState.ts
index 12496409..0f9c026a 100644
--- a/services/ui-src/src/utils/state/management/reportState.ts
+++ b/services/ui-src/src/utils/state/management/reportState.ts
@@ -1,6 +1,7 @@
 import { HcbsReportState } from "types";
 import { ParentPageTemplate, Report } from "types/report";
 import { putReport } from "utils/api/requestMethods/report";
+import { getLocalHourMinuteTime } from "utils";
 
 export const buildState = (report: Report | undefined) => {
   if (!report) return { report: undefined };
@@ -63,6 +64,5 @@ export const mergeAnswers = (answers: any, state: HcbsReportState) => {
   report.pages[pageIndex] = deepMerge(report.pages[pageIndex], answers);
 
   putReport(report); // Submit to API
-
-  return { report };
+  return { report, lastSavedTime: getLocalHourMinuteTime() };
 };
diff --git a/services/ui-src/src/utils/state/useStore.ts b/services/ui-src/src/utils/state/useStore.ts
index 26af9c60..9a056578 100644
--- a/services/ui-src/src/utils/state/useStore.ts
+++ b/services/ui-src/src/utils/state/useStore.ts
@@ -29,6 +29,7 @@ const reportStore = (set: Function): HcbsReportState => ({
   currentPageId: undefined,
   modalOpen: false,
   modalComponent: undefined,
+  lastSavedTime: undefined,
 
   // actions
   setReport: (report: Report | undefined) =>