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 00000000..528a13bc Binary files /dev/null and b/services/ui-src/src/assets/icons/check/icon_check_gray.png differ 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 ( + {currentPage.sidebar && } { + const { reportType } = useParams(); + const { report, lastSavedTime } = useStore(); + const saveStatusText = "Last saved " + lastSavedTime; + return ( + + + + + + {reportType == ReportType.QM ? report?.state + " QMS Report" : ""} + + + + {lastSavedTime && ( + <> + gray checkmark icon + {saveStatusText} + + )} + + Leave form + + + + + + ); +}; + +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) =>