todo

Author: adityathebe

src/pages/audit-report/components/View/GlobalFilters.tsx

@@ -10,30 +10,19 @@ import { useField } from "formik";
 interface DropdownProps {
   label: string;
   paramsKey: string;
-  options: string[];
+  options: GroupByOptions[];
 }
 
 const Dropdown: React.FC<DropdownProps> = ({ label, paramsKey, options }) => {
   const [field] = useField({
     name: paramsKey
   });
-  const dropdownOptions = useMemo(() => {
-    const mappedOptions = options.map(
-      (option) =>
-        ({
-          value: option,
-          label: option
-        }) satisfies GroupByOptions
-    );
-
-    return mappedOptions;
-  }, [options]);
 
   return (
     <MultiSelectDropdown
       label={label}
-      options={dropdownOptions}
-      value={dropdownOptions.find((option) => option.value === field.value)}
+      options={options}
+      value={options.find((option) => option.value === field.value)}
       onChange={(selectedOption: unknown) => {
         const option = selectedOption as GroupByOptions;
         field.onChange({
@@ -62,7 +51,17 @@ const GlobalFilters: React.FC<GlobalFiltersProps> = ({ variables }) => {
         key={variable.key}
         label={variable.label || formatDisplayLabel(variable.key)}
         paramsKey={variable.key}
-        options={variable.options}
+        options={
+          variable.optionItems && variable.optionItems.length > 0
+            ? variable.optionItems.map((item) => ({
+                label: item.label,
+                value: item.value
+              }))
+            : variable.options.map((option) => ({
+                label: option,
+                value: option
+              }))
+        }
       />
     ));
   }, [variables]);

src/pages/audit-report/components/View/GlobalFiltersForm.tsx

@@ -42,9 +42,14 @@ function GlobalFiltersListener({
     variables.forEach((variable) => {
       const urlValue = globalParams.get(variable.key);
       const currentValue = currentVariables[variable.key];
+      const optionItems = variable.optionItems ?? [];
       const defaultValue =
         variable.default ??
-        (variable.options.length > 0 ? variable.options[0] : "");
+        (optionItems.length > 0
+          ? optionItems[0].value
+          : variable.options.length > 0
+            ? variable.options[0]
+            : "");
 
       const valueToUse = urlValue || currentValue || defaultValue;
       if (valueToUse) {

src/pages/audit-report/types/index.ts

@@ -389,6 +389,10 @@ export interface ViewVariable {
   value: string;
   type: string;
   options: string[];
+  optionItems?: {
+    label: string;
+    value: string;
+  }[];
   default?: string;
   label?: string;
 }

src/pages/views/utils/aggregateVariables.ts

@@ -16,13 +16,30 @@ export function aggregateVariables(
     for (const variable of variables) {
       const existing = variableMap.get(variable.key);
       if (existing) {
-        // Merge options (union of both arrays)
+        const existingOptionItems = existing.optionItems ?? [];
+        const nextOptionItems = variable.optionItems ?? [];
+        const optionItemsByValue = new Map(
+          existingOptionItems.map((item) => [item.value, item])
+        );
+        for (const item of nextOptionItems) {
+          if (!optionItemsByValue.has(item.value)) {
+            optionItemsByValue.set(item.value, item);
+          }
+        }
+
+        const mergedOptionItems = Array.from(optionItemsByValue.values());
         const mergedOptions = [
-          ...new Set([...existing.options, ...variable.options])
+          ...new Set([
+            ...existing.options,
+            ...variable.options,
+            ...mergedOptionItems.map((item) => item.value)
+          ])
         ];
         variableMap.set(variable.key, {
           ...existing,
-          options: mergedOptions
+          options: mergedOptions,
+          optionItems:
+            mergedOptionItems.length > 0 ? mergedOptionItems : undefined
         });
       } else {
         variableMap.set(variable.key, { ...variable });