Allow multiple year selections in SAP report

backend/src/components/sap/environmentCodeReport.ts

@@ -5,6 +5,7 @@ import { getPool, sql, textToTsQuery } from '@backend/db';
 import { EnvironmentCodeReportQuery, environmentCodeReportSchema } from '@shared/schema/sapReport';
 
 function environmentCodeReportFragment(params?: Partial<EnvironmentCodeReportQuery>) {
+  const years = params?.filters?.years ?? [];
   return sql.fragment`
     WITH total_actuals AS (
       SELECT
@@ -14,9 +15,9 @@ function environmentCodeReportFragment(params?: Partial<EnvironmentCodeReportQue
         sum(value_in_currency_subunit) AS "totalActuals"
       FROM app.sap_actuals_item
       ${
-        params?.filters?.year != null
+        years.length > 0
           ? sql.fragment`
-        WHERE fiscal_year = ${params.filters.year}
+        WHERE fiscal_year = ANY(${sql.array(years, 'int4')})
       `
           : sql.fragment``
       }

frontend/src/components/forms/MultiSelect.tsx

@@ -49,7 +49,9 @@ export function MultiSelect<T>({
   const autocompleteRef = useRef<HTMLElement>();
 
   function getOption(id: string | null) {
-    return options.find((option) => getOptionId?.(option) === id) ?? (id as T);
+    const option = options.find((option) => getOptionId?.(option) === id);
+    // If an option wasn't found, return the ID as numeric or string
+    return option ?? ((isNaN(Number(id)) ? id : Number(id)) as T);
   }
 
   function getLabel(optionId: string | null) {

frontend/src/stores/sapReport/environmentalCodeReportFilters.ts

@@ -9,7 +9,7 @@ export const environmentalCodeReportFilterAtom = atom<EnvironmentCodeReportQuery
   text: null,
   plants: [],
   reasonsForEnvironmentalInvestment: [],
-  year: null,
+  years: [],
 });
 
 export const textAtom = focusAtom(environmentalCodeReportFilterAtom, (o) => o.prop('text'));
@@ -18,7 +18,7 @@ export const reasonsForEnvironmentalInvestmentAtom = focusAtom(
   environmentalCodeReportFilterAtom,
   (o) => o.prop('reasonsForEnvironmentalInvestment')
 );
-export const yearAtom = focusAtom(environmentalCodeReportFilterAtom, (o) => o.prop('year'));
+export const yearsAtom = focusAtom(environmentalCodeReportFilterAtom, (o) => o.prop('years'));
 
 export function useDebouncedEnvironmentalCodeReportFilters() {
   const filters = useAtomValue(environmentalCodeReportFilterAtom);

frontend/src/views/SapReports/EnvironmentalCodeReportFilters.tsx

@@ -22,7 +22,7 @@ import {
   reasonsForEnvironmentalInvestmentAtom,
   textAtom,
   useDebouncedEnvironmentalCodeReportFilters,
-  yearAtom,
+  yearsAtom,
 } from '@frontend/stores/sapReport/environmentalCodeReportFilters';
 
 import { ReportSummary } from './ReportSummary';
@@ -36,7 +36,7 @@ export function EnvironmentalCodeReportFilters() {
   const [reasonsForEnvironmentalInvestment, setReasonsForEnvironmentalInvestment] = useAtom(
     reasonsForEnvironmentalInvestmentAtom
   );
-  const [year, setYear] = useAtom(yearAtom);
+  const [years, setYears] = useAtom(yearsAtom);
   const filters = useAtomValue(environmentalCodeReportFilterAtom);
 
   const { data: allPlants, isLoading: allPlantsLoading } = trpc.sapReport.getPlants.useQuery();
@@ -111,12 +111,14 @@ export function EnvironmentalCodeReportFilters() {
         <FormControl>
           <FormLabel htmlFor="year">{tr('sapReports.environmentCodes.year')}</FormLabel>
           <MultiSelect
-            id="year"
-            options={allYears?.map(String) ?? []}
+            id="years"
+            options={allYears ?? []}
             loading={allYearsLoading}
-            value={String(year ?? '')}
-            onChange={(year) => setYear(year == null ? null : Number(year))}
-            multiple={false}
+            value={years}
+            onChange={(years) => {
+              setYears(years);
+            }}
+            multiple
           />
         </FormControl>
       </div>

shared/src/schema/sapReport.ts

@@ -19,7 +19,7 @@ export const environmentCodeReportFilterSchema = z.object({
     text: z.string().nullable(),
     plants: z.array(z.string()),
     reasonsForEnvironmentalInvestment: z.array(z.string()),
-    year: z.number().nullable(),
+    years: z.array(z.number()),
   }),
 });