add dropdown for year selection

services/ui-src/src/components/modals/AddEditReportModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Modal, TextField } from "components";
 import {
   Spinner,
@@ -8,10 +8,12 @@ import {
   RadioGroup,
   Stack,
 } from "@chakra-ui/react";
-import { ElementType, Report } from "types";
+import { DropdownOptions, ElementType, Report } from "types";
 import { createReport, putReport } from "utils/api/requestMethods/report";
 import { FormProvider, useForm } from "react-hook-form";
 import { ReportOptions } from "types/report";
+import { Dropdown } from "@cmsgov/design-system";
+import { Years } from "../../constants";
 
 export const AddEditReportModal = ({
   activeState,
@@ -21,9 +23,31 @@ export const AddEditReportModal = ({
   reportHandler,
 }: Props) => {
   const [submitting, setSubmitting] = useState<boolean>(false);
+  const [selectedYear, setSelectedYear] = useState<string>("");
 
+  const handleYearChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedYear(event.target.value);
+  };
   // add validation to formJson
   const form = useForm();
+  const buildYears = (): DropdownOptions[] => {
+    const dropdownYears: DropdownOptions[] = Object.keys(Years).map(
+      (value) => ({
+        label: Years[value as unknown as keyof typeof Years],
+        value,
+      })
+    );
+    return [
+      {
+        label: "- Select a year -",
+        value: "",
+      },
+      ...dropdownYears,
+    ];
+  };
+
+  const dropdownYears = buildYears();
+  // const dropdownYears = { "2026": 2026, "2027": 2027, "2028": 2028];
 
   const onSubmit = async (formData: any) => {
     setSubmitting(true);
@@ -85,6 +109,14 @@ export const AddEditReportModal = ({
               }}
               formkey={"reportTitle"}
             />
+            <Dropdown
+              name="year"
+              id="year"
+              label="Select the quality measure set reporting year"
+              options={dropdownYears}
+              onChange={handleYearChange}
+              value={selectedYear}
+            />
             <strong>
               Does your state administer the HCBS CAHPS beneficiary survey?
             </strong>

services/ui-src/src/constants.ts

@@ -6,6 +6,15 @@ export const PRODUCTION_HOST_DOMAIN = "mdcthcbs.cms.gov";
 
 export const notAnsweredText = "Not answered";
 
+// YEARS
+export const Years = {
+  2026: "2026",
+  2027: "2027",
+  2028: "2028",
+  2029: "2029",
+  2030: "2030",
+} as const;
+
 // STATES
 export const StateNames = {
   AL: "Alabama",