diff --git a/client/src/app/pages/reports/reports.tsx b/client/src/app/pages/reports/reports.tsx index 5b5aa4b2ea..6a5f6c0135 100644 --- a/client/src/app/pages/reports/reports.tsx +++ b/client/src/app/pages/reports/reports.tsx @@ -9,9 +9,15 @@ import { CardExpandableContent, CardHeader, CardTitle, + Flex, + FlexItem, + MenuToggle, + MenuToggleElement, PageSection, PageSectionVariants, Popover, + Select, + SelectOption, Split, SplitItem, Stack, @@ -31,11 +37,20 @@ import { Landscape } from "./components/landscape"; import { AdoptionPlan } from "./components/adoption-plan"; import { IdentifiedRisksTable } from "./components/identified-risks-table"; import { useFetchApplications } from "@app/queries/applications"; +import { useFetchQuestionnaires } from "@app/queries/questionnaires"; export const Reports: React.FC = () => { // i18 const { t } = useTranslation(); + const [isQuestionnaireSelectOpen, setIsQuestionnaireSelectOpen] = + React.useState(false); + + const [selectedQuestionnaire, setSelectedQuestionnaire] = + React.useState("All questionnaires"); + + const { questionnaires } = useFetchQuestionnaires(); + // Cards const [isAdoptionCandidateTable, setIsAdoptionCandidateTable] = useState(true); @@ -66,6 +81,27 @@ export const Reports: React.FC = () => { ); } + const toggle = (toggleRef: React.Ref) => ( + { + setIsQuestionnaireSelectOpen(!isQuestionnaireSelectOpen); + }} + isExpanded={isQuestionnaireSelectOpen} + > + {selectedQuestionnaire} + + ); + + const onSelectQuestionnaire = ( + _event: React.MouseEvent | undefined, + value: string | number | undefined + ) => { + setSelectedQuestionnaire(value as string); + setIsQuestionnaireSelectOpen(false); + }; + return ( <> {pageHeaderSection} @@ -78,9 +114,40 @@ export const Reports: React.FC = () => { - - {t("terms.currentLandscape")} - + + + + + {t("terms.currentLandscape")} + + + + + + +