From 594e6d0336ab2276f6d26a54c4c7010bab117e73 Mon Sep 17 00:00:00 2001
From: mariaozamiz <ozamiz.m@gmail.com>
Date: Fri, 8 Mar 2024 09:06:16 +0100
Subject: [PATCH 1/7] feat: set component in step 3

---
 .../SelectMultiCheckboxes.tsx                 | 50 +++++++++++++++++++
 .../3-disaggregates/DisaggregatesStep.tsx     | 14 ++----
 .../hooks/useDisaggregatesStep.tsx            |  7 +--
 3 files changed, 59 insertions(+), 12 deletions(-)
 create mode 100644 src/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes.tsx

diff --git a/src/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes.tsx b/src/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes.tsx
new file mode 100644
index 0000000..a50ca68
--- /dev/null
+++ b/src/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes.tsx
@@ -0,0 +1,50 @@
+import React, { ChangeEvent } from "react";
+import Select from "@material-ui/core/Select";
+import Checkbox from "@material-ui/core/Checkbox";
+import MenuItem from "@material-ui/core/MenuItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import styled from "styled-components";
+
+type Option = {
+    text: string;
+    value: string;
+};
+
+type Props = {
+    label: string;
+    options: Option[];
+    value: string[];
+    onChange: (event: ChangeEvent<any>) => void;
+};
+
+export const SelectMultiCheckboxes: React.FC<Props> = React.memo(
+    ({ onChange, options, value, label }) => {
+        return (
+            <StyledFormControl>
+                <InputLabel id="mutiple-checkbox-label">{label}</InputLabel>
+                <Select
+                    labelId="mutiple-checkbox-label"
+                    id="mutiple-checkbox"
+                    multiple
+                    value={value}
+                    onChange={onChange}
+                    renderValue={selected => (selected as string[]).join(", ")}
+                >
+                    {options.map(option => (
+                        <MenuItem key={option.text} value={option.text}>
+                            <Checkbox checked={value.indexOf(option.text) > -1} />
+                            <ListItemText primary={option.text} />
+                        </MenuItem>
+                    ))}
+                </Select>
+            </StyledFormControl>
+        );
+    }
+);
+
+const StyledFormControl = styled(FormControl)`
+    min-width: 7.5rem;
+    max-width: 18.75rem;
+`;
diff --git a/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx b/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx
index 36293c2..780810a 100644
--- a/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx
+++ b/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import i18n from "$/utils/i18n";
 import styled from "styled-components";
-import { MultipleDropdown } from "@eyeseetea/d2-ui-components";
 import { useDisaggregatesStep } from "./hooks/useDisaggregatesStep";
 import { EmptyState } from "$/webapp/components/empty-state/EmptyState";
 import { Typography, Button } from "@material-ui/core";
+import { SelectMultiCheckboxes } from "$/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes";
 
 interface PageProps {
     name: string;
@@ -19,11 +19,11 @@ export const DisaggregatesStep: React.FC<PageProps> = React.memo(props => {
             <AnalysisHeader>
                 <StyledTypography variant="h2">{i18n.t(name)}</StyledTypography>
                 <FiltersContainer>
-                    <StyledMultipleDropdown
-                        items={dropdownItems}
-                        label={i18n.t("CatCombos")}
-                        values={values}
+                    <SelectMultiCheckboxes
+                        options={dropdownItems}
                         onChange={handleChange}
+                        value={values}
+                        label={i18n.t("CatCombos")}
                     />
                     <Button variant="contained" color="primary" size="small" onClick={runAnalysis}>
                         {i18n.t("Run")}
@@ -58,7 +58,3 @@ const FiltersContainer = styled.div`
     align-items: center;
     gap: 1rem;
 `;
-
-const StyledMultipleDropdown = styled(MultipleDropdown)`
-    max-width: 20rem;
-`;
diff --git a/src/webapp/pages/analysis/steps/3-disaggregates/hooks/useDisaggregatesStep.tsx b/src/webapp/pages/analysis/steps/3-disaggregates/hooks/useDisaggregatesStep.tsx
index c1293a4..b2338af 100644
--- a/src/webapp/pages/analysis/steps/3-disaggregates/hooks/useDisaggregatesStep.tsx
+++ b/src/webapp/pages/analysis/steps/3-disaggregates/hooks/useDisaggregatesStep.tsx
@@ -1,11 +1,12 @@
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 import i18n from "$/utils/i18n";
 
 export function useDisaggregatesStep() {
     const [values, setValues] = useState<string[]>([]);
 
-    const handleChange = (values: string[]) => {
-        setValues(values);
+    const handleChange = (event: ChangeEvent<any>) => {
+        const selectedValues = event.target.value as string[];
+        setValues(selectedValues);
     };
 
     const dropdownItems = [

From a81ed592a3c0c5fbb7fd57ad3b3b14e9635a9074 Mon Sep 17 00:00:00 2001
From: mariaozamiz <ozamiz.m@gmail.com>
Date: Fri, 8 Mar 2024 09:31:58 +0100
Subject: [PATCH 2/7] feat: all options selected by default

---
 .../3-disaggregates/DisaggregatesStep.tsx     |  6 ++---
 .../hooks/useDisaggregatesStep.tsx            | 22 ++++++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx b/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx
index 780810a..5b89b10 100644
--- a/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx
+++ b/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx
@@ -12,7 +12,7 @@ interface PageProps {
 
 export const DisaggregatesStep: React.FC<PageProps> = React.memo(props => {
     const { name = "Missing disaggregates in selected catcombos" } = props;
-    const { dropdownItems, values, handleChange, runAnalysis } = useDisaggregatesStep();
+    const { catCombosList, value, handleChange, runAnalysis } = useDisaggregatesStep();
 
     return (
         <Container>
@@ -20,9 +20,9 @@ export const DisaggregatesStep: React.FC<PageProps> = React.memo(props => {
                 <StyledTypography variant="h2">{i18n.t(name)}</StyledTypography>
                 <FiltersContainer>
                     <SelectMultiCheckboxes
-                        options={dropdownItems}
+                        options={catCombosList}
                         onChange={handleChange}
-                        value={values}
+                        value={value}
                         label={i18n.t("CatCombos")}
                     />
                     <Button variant="contained" color="primary" size="small" onClick={runAnalysis}>
diff --git a/src/webapp/pages/analysis/steps/3-disaggregates/hooks/useDisaggregatesStep.tsx b/src/webapp/pages/analysis/steps/3-disaggregates/hooks/useDisaggregatesStep.tsx
index b2338af..847d295 100644
--- a/src/webapp/pages/analysis/steps/3-disaggregates/hooks/useDisaggregatesStep.tsx
+++ b/src/webapp/pages/analysis/steps/3-disaggregates/hooks/useDisaggregatesStep.tsx
@@ -2,14 +2,7 @@ import { ChangeEvent, useState } from "react";
 import i18n from "$/utils/i18n";
 
 export function useDisaggregatesStep() {
-    const [values, setValues] = useState<string[]>([]);
-
-    const handleChange = (event: ChangeEvent<any>) => {
-        const selectedValues = event.target.value as string[];
-        setValues(selectedValues);
-    };
-
-    const dropdownItems = [
+    const catCombosList = [
         {
             value: "ACTIVITY",
             text: i18n.t("Activity Level"),
@@ -44,13 +37,22 @@ export function useDisaggregatesStep() {
         },
     ];
 
+    const defaultValues = catCombosList.map(option => option.text);
+
+    const [value, setValue] = useState<string[]>(defaultValues);
+
+    const handleChange = (event: ChangeEvent<any>) => {
+        const selectedValues = event.target.value as string[];
+        setValue(selectedValues);
+    };
+
     const runAnalysis = (e: any) => {
         alert(`run analysis`);
     };
 
     return {
-        dropdownItems,
-        values,
+        catCombosList,
+        value,
         handleChange,
         runAnalysis,
     };

From 27f74a05a5d799a8158c754e2248166aa7a2f0e3 Mon Sep 17 00:00:00 2001
From: mariaozamiz <ozamiz.m@gmail.com>
Date: Fri, 8 Mar 2024 09:36:52 +0100
Subject: [PATCH 3/7] chore: update catcombos list, rename constant and
 organize folders for consistency

---
 .../3-disaggregates/DisaggregatesStep.tsx     |   2 +-
 .../{hooks => }/useDisaggregatesStep.tsx      |  48 ++++++++-
 .../NursingMidwiferyStep.tsx                  |   6 +-
 .../hooks/useNursingMidwiferyStep.tsx         |  56 ----------
 .../useNursingMidwiferyStep.tsx               | 100 ++++++++++++++++++
 5 files changed, 150 insertions(+), 62 deletions(-)
 rename src/webapp/pages/analysis/steps/3-disaggregates/{hooks => }/useDisaggregatesStep.tsx (50%)
 delete mode 100644 src/webapp/pages/analysis/steps/7-nursingMidwifery/hooks/useNursingMidwiferyStep.tsx
 create mode 100644 src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx

diff --git a/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx b/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx
index 5b89b10..f96f6ed 100644
--- a/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx
+++ b/src/webapp/pages/analysis/steps/3-disaggregates/DisaggregatesStep.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import i18n from "$/utils/i18n";
 import styled from "styled-components";
-import { useDisaggregatesStep } from "./hooks/useDisaggregatesStep";
+import { useDisaggregatesStep } from "./useDisaggregatesStep";
 import { EmptyState } from "$/webapp/components/empty-state/EmptyState";
 import { Typography, Button } from "@material-ui/core";
 import { SelectMultiCheckboxes } from "$/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes";
diff --git a/src/webapp/pages/analysis/steps/3-disaggregates/hooks/useDisaggregatesStep.tsx b/src/webapp/pages/analysis/steps/3-disaggregates/useDisaggregatesStep.tsx
similarity index 50%
rename from src/webapp/pages/analysis/steps/3-disaggregates/hooks/useDisaggregatesStep.tsx
rename to src/webapp/pages/analysis/steps/3-disaggregates/useDisaggregatesStep.tsx
index 847d295..40d267d 100644
--- a/src/webapp/pages/analysis/steps/3-disaggregates/hooks/useDisaggregatesStep.tsx
+++ b/src/webapp/pages/analysis/steps/3-disaggregates/useDisaggregatesStep.tsx
@@ -13,20 +13,56 @@ export function useDisaggregatesStep() {
         },
         {
             value: "AGE",
-            text: i18n.t("Age group"),
+            text: i18n.t("Age Group"),
         },
         {
-            value: "BIRTH",
+            value: "AGESEX",
+            text: i18n.t("Age Group + Sex"),
+        },
+        {
+            value: "BIRTHPLACE",
             text: i18n.t("Place of Birth"),
         },
+        {
+            value: "TRAININGPLACE",
+            text: i18n.t("Place of Training"),
+        },
+        {
+            value: "FOREIGNTRAINED",
+            text: i18n.t("Foreign Trained"),
+        },
         {
             value: "OWNERSHIP",
             text: i18n.t("Ownership"),
         },
+        {
+            value: "WORKINGFACILITYTYPE",
+            text: i18n.t("Working Facility Type"),
+        },
+        {
+            value: "NADOMESTICTHWF",
+            text: i18n.t("Newly Active domestic trained HWF"),
+        },
+        {
+            value: "NAFOREIGNTE",
+            text: i18n.t("Newly Active foreign trained employed"),
+        },
+        {
+            value: "VOLUNTARY",
+            text: i18n.t("Voluntary Exits"),
+        },
+        {
+            value: "INVOLUNTARY",
+            text: i18n.t("Involuntary exits"),
+        },
         {
             value: "VACANCY",
             text: i18n.t("Vacancy rate"),
         },
+        {
+            value: "CONTRACT",
+            text: i18n.t("Contract Type"),
+        },
         {
             value: "APPLICATIONS",
             text: i18n.t("Applications"),
@@ -35,6 +71,14 @@ export function useDisaggregatesStep() {
             value: "ENROLLED",
             text: i18n.t("Enrolled"),
         },
+        {
+            value: "GRADUATESGENDER",
+            text: i18n.t("Graduates by Gender"),
+        },
+        {
+            value: "GRADUATESINSTITUTION",
+            text: i18n.t("Graduates by institution ownership"),
+        },
     ];
 
     const defaultValues = catCombosList.map(option => option.text);
diff --git a/src/webapp/pages/analysis/steps/7-nursingMidwifery/NursingMidwiferyStep.tsx b/src/webapp/pages/analysis/steps/7-nursingMidwifery/NursingMidwiferyStep.tsx
index 6541f8d..4403d7f 100644
--- a/src/webapp/pages/analysis/steps/7-nursingMidwifery/NursingMidwiferyStep.tsx
+++ b/src/webapp/pages/analysis/steps/7-nursingMidwifery/NursingMidwiferyStep.tsx
@@ -4,7 +4,7 @@ import { EmptyState } from "$/webapp/components/empty-state/EmptyState";
 import { Typography, Button } from "@material-ui/core";
 import styled from "styled-components";
 import { MultipleDropdown } from "@eyeseetea/d2-ui-components";
-import { useNursingMidwiferyStep } from "./hooks/useNursingMidwiferyStep";
+import { useNursingMidwiferyStep } from "./useNursingMidwiferyStep";
 
 interface PageProps {
     name: string;
@@ -12,7 +12,7 @@ interface PageProps {
 
 export const NursingMidwiferyStep: React.FC<PageProps> = React.memo(props => {
     const { name = "Missing nursing personnel when midwifery personnel is present" } = props;
-    const { dropdownItems, values, handleChange, runAnalysis } = useNursingMidwiferyStep();
+    const { catCombosList, values, handleChange, runAnalysis } = useNursingMidwiferyStep();
 
     return (
         <Container>
@@ -20,7 +20,7 @@ export const NursingMidwiferyStep: React.FC<PageProps> = React.memo(props => {
                 <StyledTypography variant="h2">{i18n.t(name)}</StyledTypography>
                 <FiltersContainer>
                     <StyledMultipleDropdown
-                        items={dropdownItems}
+                        items={catCombosList}
                         label={i18n.t("CatCombos")}
                         values={values}
                         onChange={handleChange}
diff --git a/src/webapp/pages/analysis/steps/7-nursingMidwifery/hooks/useNursingMidwiferyStep.tsx b/src/webapp/pages/analysis/steps/7-nursingMidwifery/hooks/useNursingMidwiferyStep.tsx
deleted file mode 100644
index 5c1d299..0000000
--- a/src/webapp/pages/analysis/steps/7-nursingMidwifery/hooks/useNursingMidwiferyStep.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useState } from "react";
-import i18n from "$/utils/i18n";
-
-export function useNursingMidwiferyStep() {
-    const dropdownItems = [
-        {
-            value: "ACTIVITY",
-            text: i18n.t("Activity Level"),
-        },
-        {
-            value: "SEX",
-            text: i18n.t("Sex"),
-        },
-        {
-            value: "AGE",
-            text: i18n.t("Age group"),
-        },
-        {
-            value: "BIRTH",
-            text: i18n.t("Place of Birth"),
-        },
-        {
-            value: "OWNERSHIP",
-            text: i18n.t("Ownership"),
-        },
-        {
-            value: "VACANCY",
-            text: i18n.t("Vacancy rate"),
-        },
-        {
-            value: "APPLICATIONS",
-            text: i18n.t("Applications"),
-        },
-        {
-            value: "ENROLLED",
-            text: i18n.t("Enrolled"),
-        },
-    ];
-
-    const [values, setValues] = useState<string[]>(dropdownItems.map(item => item.value));
-
-    const handleChange = (values: string[]) => {
-        setValues(values);
-    };
-
-    const runAnalysis = (e: any) => {
-        alert(`run analysis`);
-    };
-
-    return {
-        dropdownItems,
-        values,
-        handleChange,
-        runAnalysis,
-    };
-}
diff --git a/src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx b/src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx
new file mode 100644
index 0000000..5cccbf2
--- /dev/null
+++ b/src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx
@@ -0,0 +1,100 @@
+import { useState } from "react";
+import i18n from "$/utils/i18n";
+
+export function useNursingMidwiferyStep() {
+    const catCombosList = [
+        {
+            value: "ACTIVITY",
+            text: i18n.t("Activity Level"),
+        },
+        {
+            value: "SEX",
+            text: i18n.t("Sex"),
+        },
+        {
+            value: "AGE",
+            text: i18n.t("Age Group"),
+        },
+        {
+            value: "AGESEX",
+            text: i18n.t("Age Group + Sex"),
+        },
+        {
+            value: "BIRTHPLACE",
+            text: i18n.t("Place of Birth"),
+        },
+        {
+            value: "TRAININGPLACE",
+            text: i18n.t("Place of Training"),
+        },
+        {
+            value: "FOREIGNTRAINED",
+            text: i18n.t("Foreign Trained"),
+        },
+        {
+            value: "OWNERSHIP",
+            text: i18n.t("Ownership"),
+        },
+        {
+            value: "WORKINGFACILITYTYPE",
+            text: i18n.t("Working Facility Type"),
+        },
+        {
+            value: "NADOMESTICTHWF",
+            text: i18n.t("Newly Active domestic trained HWF"),
+        },
+        {
+            value: "NAFOREIGNTE",
+            text: i18n.t("Newly Active foreign trained employed"),
+        },
+        {
+            value: "VOLUNTARY",
+            text: i18n.t("Voluntary Exits"),
+        },
+        {
+            value: "INVOLUNTARY",
+            text: i18n.t("Involuntary exits"),
+        },
+        {
+            value: "VACANCY",
+            text: i18n.t("Vacancy rate"),
+        },
+        {
+            value: "CONTRACT",
+            text: i18n.t("Contract Type"),
+        },
+        {
+            value: "APPLICATIONS",
+            text: i18n.t("Applications"),
+        },
+        {
+            value: "ENROLLED",
+            text: i18n.t("Enrolled"),
+        },
+        {
+            value: "GRADUATESGENDER",
+            text: i18n.t("Graduates by Gender"),
+        },
+        {
+            value: "GRADUATESINSTITUTION",
+            text: i18n.t("Graduates by institution ownership"),
+        },
+    ];
+
+    const [values, setValues] = useState<string[]>(catCombosList.map(item => item.value));
+
+    const handleChange = (values: string[]) => {
+        setValues(values);
+    };
+
+    const runAnalysis = (e: any) => {
+        alert(`run analysis`);
+    };
+
+    return {
+        catCombosList,
+        values,
+        handleChange,
+        runAnalysis,
+    };
+}

From cada344b3fcc3bccaa973cd828dedc776ca94505 Mon Sep 17 00:00:00 2001
From: mariaozamiz <ozamiz.m@gmail.com>
Date: Fri, 8 Mar 2024 09:42:52 +0100
Subject: [PATCH 4/7] feat: instance selectmulticheckbox in other steps

---
 .../GeneralPractitionersStep.tsx                   | 13 +++++--------
 .../useGeneralPractitionersStep.tsx                | 11 +++++++----
 .../7-nursingMidwifery/NursingMidwiferyStep.tsx    | 14 +++++---------
 .../7-nursingMidwifery/useNursingMidwiferyStep.tsx | 11 +++++++----
 .../analysis/steps/9-validation/ValidationStep.tsx |  1 +
 5 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/webapp/pages/analysis/steps/4-general-practitioners/GeneralPractitionersStep.tsx b/src/webapp/pages/analysis/steps/4-general-practitioners/GeneralPractitionersStep.tsx
index fffc31b..714d687 100644
--- a/src/webapp/pages/analysis/steps/4-general-practitioners/GeneralPractitionersStep.tsx
+++ b/src/webapp/pages/analysis/steps/4-general-practitioners/GeneralPractitionersStep.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import i18n from "$/utils/i18n";
 import styled from "styled-components";
-import { MultipleDropdown } from "@eyeseetea/d2-ui-components";
 import { useGeneralPractitionersStep } from "./useGeneralPractitionersStep";
 import { EmptyState } from "$/webapp/components/empty-state/EmptyState";
 import { Typography, Button } from "@material-ui/core";
 import { Dropdown } from "@eyeseetea/d2-ui-components";
+import { SelectMultiCheckboxes } from "$/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes";
 
 interface PageProps {
     name: string;
@@ -28,11 +28,11 @@ export const GeneralPractitionersStep: React.FC<PageProps> = React.memo(props =>
             <AnalysisHeader>
                 <StyledTypography variant="h2">{i18n.t(name)}</StyledTypography>
                 <FiltersContainer>
-                    <StyledMultipleDropdown
-                        items={catCombosList}
-                        label={i18n.t("CatCombos")}
-                        values={values}
+                    <SelectMultiCheckboxes
+                        options={catCombosList}
                         onChange={handleChange}
+                        value={values}
+                        label={i18n.t("CatCombos")}
                     />
                     <StyledDropdown
                         hideEmpty
@@ -79,6 +79,3 @@ const FiltersContainer = styled.div`
 const StyledDropdown = styled(Dropdown)`
     min-width: 14rem;
 `;
-const StyledMultipleDropdown = styled(MultipleDropdown)`
-    max-width: 20rem;
-`;
diff --git a/src/webapp/pages/analysis/steps/4-general-practitioners/useGeneralPractitionersStep.tsx b/src/webapp/pages/analysis/steps/4-general-practitioners/useGeneralPractitionersStep.tsx
index 0e9238b..f5931c9 100644
--- a/src/webapp/pages/analysis/steps/4-general-practitioners/useGeneralPractitionersStep.tsx
+++ b/src/webapp/pages/analysis/steps/4-general-practitioners/useGeneralPractitionersStep.tsx
@@ -1,5 +1,5 @@
 import i18n from "$/utils/i18n";
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 
 export function useGeneralPractitionersStep() {
     const catCombosList = [
@@ -93,10 +93,13 @@ export function useGeneralPractitionersStep() {
         },
     ];
 
-    const [values, setValues] = useState<string[]>(catCombosList.map(item => item.value));
+    const defaultValues = catCombosList.map(option => option.text);
 
-    const handleChange = (values: string[]) => {
-        setValues(values);
+    const [values, setValues] = useState<string[]>(defaultValues);
+
+    const handleChange = (event: ChangeEvent<any>) => {
+        const selectedValues = event.target.value as string[];
+        setValues(selectedValues);
     };
 
     const runAnalysis = (e: any) => {
diff --git a/src/webapp/pages/analysis/steps/7-nursingMidwifery/NursingMidwiferyStep.tsx b/src/webapp/pages/analysis/steps/7-nursingMidwifery/NursingMidwiferyStep.tsx
index 4403d7f..c66adc0 100644
--- a/src/webapp/pages/analysis/steps/7-nursingMidwifery/NursingMidwiferyStep.tsx
+++ b/src/webapp/pages/analysis/steps/7-nursingMidwifery/NursingMidwiferyStep.tsx
@@ -3,8 +3,8 @@ import i18n from "$/utils/i18n";
 import { EmptyState } from "$/webapp/components/empty-state/EmptyState";
 import { Typography, Button } from "@material-ui/core";
 import styled from "styled-components";
-import { MultipleDropdown } from "@eyeseetea/d2-ui-components";
 import { useNursingMidwiferyStep } from "./useNursingMidwiferyStep";
+import { SelectMultiCheckboxes } from "$/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes";
 
 interface PageProps {
     name: string;
@@ -19,11 +19,11 @@ export const NursingMidwiferyStep: React.FC<PageProps> = React.memo(props => {
             <AnalysisHeader>
                 <StyledTypography variant="h2">{i18n.t(name)}</StyledTypography>
                 <FiltersContainer>
-                    <StyledMultipleDropdown
-                        items={catCombosList}
-                        label={i18n.t("CatCombos")}
-                        values={values}
+                    <SelectMultiCheckboxes
+                        options={catCombosList}
                         onChange={handleChange}
+                        value={values}
+                        label={i18n.t("CatCombos")}
                     />
                     <Button variant="contained" color="primary" size="small" onClick={runAnalysis}>
                         {i18n.t("Run")}
@@ -58,7 +58,3 @@ const FiltersContainer = styled.div`
     align-items: center;
     gap: 1rem;
 `;
-
-const StyledMultipleDropdown = styled(MultipleDropdown)`
-    max-width: 20rem;
-`;
diff --git a/src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx b/src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx
index 5cccbf2..752b01d 100644
--- a/src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx
+++ b/src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 import i18n from "$/utils/i18n";
 
 export function useNursingMidwiferyStep() {
@@ -81,10 +81,13 @@ export function useNursingMidwiferyStep() {
         },
     ];
 
-    const [values, setValues] = useState<string[]>(catCombosList.map(item => item.value));
+    const defaultValues = catCombosList.map(option => option.text);
 
-    const handleChange = (values: string[]) => {
-        setValues(values);
+    const [values, setValues] = useState<string[]>(defaultValues);
+
+    const handleChange = (event: ChangeEvent<any>) => {
+        const selectedValues = event.target.value as string[];
+        setValues(selectedValues);
     };
 
     const runAnalysis = (e: any) => {
diff --git a/src/webapp/pages/analysis/steps/9-validation/ValidationStep.tsx b/src/webapp/pages/analysis/steps/9-validation/ValidationStep.tsx
index f64af48..3cfedff 100644
--- a/src/webapp/pages/analysis/steps/9-validation/ValidationStep.tsx
+++ b/src/webapp/pages/analysis/steps/9-validation/ValidationStep.tsx
@@ -20,6 +20,7 @@ export const ValidationStep: React.FC<PageProps> = React.memo(props => {
                 <StyledTypography variant="h2">{i18n.t(name)}</StyledTypography>
                 <FiltersContainer>
                     <StyledDropdown
+                        hideEmpty
                         key={"validations-filter"}
                         items={validationItems}
                         onChange={handleChange}

From da3cfbad8a6da893575d595785d36b5254f20b6a Mon Sep 17 00:00:00 2001
From: mariaozamiz <ozamiz.m@gmail.com>
Date: Fri, 8 Mar 2024 09:44:23 +0100
Subject: [PATCH 5/7] chore: update translations

---
 i18n/en.pot | 46 +++++++++++++++++++++++-----------------------
 i18n/es.po  | 44 ++++++++++++++++++++++----------------------
 2 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 9440c79..c393aaf 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-03-07T11:40:09.170Z\n"
-"PO-Revision-Date: 2024-03-07T11:40:09.171Z\n"
+"POT-Creation-Date: 2024-03-08T08:43:07.923Z\n"
+"PO-Revision-Date: 2024-03-08T08:43:07.924Z\n"
 
 msgid "Cannot be blank: {{fieldName}}"
 msgstr ""
@@ -170,39 +170,24 @@ msgstr ""
 msgid "Sex"
 msgstr ""
 
-msgid "Age group"
-msgstr ""
-
-msgid "Place of Birth"
-msgstr ""
-
-msgid "Ownership"
-msgstr ""
-
-msgid "Vacancy rate"
-msgstr ""
-
-msgid "Applications"
-msgstr ""
-
-msgid "Enrolled"
-msgstr ""
-
-msgid "Double Counts Threshold"
-msgstr ""
-
 msgid "Age Group"
 msgstr ""
 
 msgid "Age Group + Sex"
 msgstr ""
 
+msgid "Place of Birth"
+msgstr ""
+
 msgid "Place of Training"
 msgstr ""
 
 msgid "Foreign Trained"
 msgstr ""
 
+msgid "Ownership"
+msgstr ""
+
 msgid "Working Facility Type"
 msgstr ""
 
@@ -218,15 +203,27 @@ msgstr ""
 msgid "Involuntary exits"
 msgstr ""
 
+msgid "Vacancy rate"
+msgstr ""
+
 msgid "Contract Type"
 msgstr ""
 
+msgid "Applications"
+msgstr ""
+
+msgid "Enrolled"
+msgstr ""
+
 msgid "Graduates by Gender"
 msgstr ""
 
 msgid "Graduates by institution ownership"
 msgstr ""
 
+msgid "Double Counts Threshold"
+msgstr ""
+
 msgid "Total"
 msgstr ""
 
@@ -239,6 +236,9 @@ msgstr ""
 msgid "Validation Rule Group"
 msgstr ""
 
+msgid "Age group"
+msgstr ""
+
 msgid "Configuration"
 msgstr ""
 
diff --git a/i18n/es.po b/i18n/es.po
index 5d6f486..1a93142 100644
--- a/i18n/es.po
+++ b/i18n/es.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-03-07T11:40:09.170Z\n"
+"POT-Creation-Date: 2024-03-08T08:43:07.923Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -171,39 +171,24 @@ msgstr ""
 msgid "Sex"
 msgstr ""
 
-msgid "Age group"
-msgstr ""
-
-msgid "Place of Birth"
-msgstr ""
-
-msgid "Ownership"
-msgstr ""
-
-msgid "Vacancy rate"
-msgstr ""
-
-msgid "Applications"
-msgstr ""
-
-msgid "Enrolled"
-msgstr ""
-
-msgid "Double Counts Threshold"
-msgstr ""
-
 msgid "Age Group"
 msgstr ""
 
 msgid "Age Group + Sex"
 msgstr ""
 
+msgid "Place of Birth"
+msgstr ""
+
 msgid "Place of Training"
 msgstr ""
 
 msgid "Foreign Trained"
 msgstr ""
 
+msgid "Ownership"
+msgstr ""
+
 msgid "Working Facility Type"
 msgstr ""
 
@@ -219,15 +204,27 @@ msgstr ""
 msgid "Involuntary exits"
 msgstr ""
 
+msgid "Vacancy rate"
+msgstr ""
+
 msgid "Contract Type"
 msgstr ""
 
+msgid "Applications"
+msgstr ""
+
+msgid "Enrolled"
+msgstr ""
+
 msgid "Graduates by Gender"
 msgstr ""
 
 msgid "Graduates by institution ownership"
 msgstr ""
 
+msgid "Double Counts Threshold"
+msgstr ""
+
 msgid "Total"
 msgstr ""
 
@@ -240,6 +237,9 @@ msgstr ""
 msgid "Validation Rule Group"
 msgstr ""
 
+msgid "Age group"
+msgstr ""
+
 msgid "Configuration"
 msgstr ""
 

From 55e2a00d3764cebce90d08ed3b5380d700c4e0a0 Mon Sep 17 00:00:00 2001
From: mariaozamiz <ozamiz.m@gmail.com>
Date: Mon, 11 Mar 2024 09:49:15 +0100
Subject: [PATCH 6/7] chore: add onChangeSelector function

---
 .../selectmulti-checkboxes/SelectMultiCheckboxes.tsx  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes.tsx b/src/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes.tsx
index a50ca68..a1acb10 100644
--- a/src/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes.tsx
+++ b/src/webapp/components/selectmulti-checkboxes/SelectMultiCheckboxes.tsx
@@ -1,4 +1,3 @@
-import React, { ChangeEvent } from "react";
 import Select from "@material-ui/core/Select";
 import Checkbox from "@material-ui/core/Checkbox";
 import MenuItem from "@material-ui/core/MenuItem";
@@ -6,6 +5,7 @@ import ListItemText from "@material-ui/core/ListItemText";
 import InputLabel from "@material-ui/core/InputLabel";
 import FormControl from "@material-ui/core/FormControl";
 import styled from "styled-components";
+import { memo } from "react";
 
 type Option = {
     text: string;
@@ -16,11 +16,14 @@ type Props = {
     label: string;
     options: Option[];
     value: string[];
-    onChange: (event: ChangeEvent<any>) => void;
+    onChange: (values: string[]) => void;
 };
 
-export const SelectMultiCheckboxes: React.FC<Props> = React.memo(
+export const SelectMultiCheckboxes: React.FC<Props> = memo(
     ({ onChange, options, value, label }) => {
+        const onChangeSelector = (event: React.ChangeEvent<{ value: unknown }>) => {
+            onChange(event.target.value as string[]);
+        };
         return (
             <StyledFormControl>
                 <InputLabel id="mutiple-checkbox-label">{label}</InputLabel>
@@ -29,7 +32,7 @@ export const SelectMultiCheckboxes: React.FC<Props> = React.memo(
                     id="mutiple-checkbox"
                     multiple
                     value={value}
-                    onChange={onChange}
+                    onChange={onChangeSelector}
                     renderValue={selected => (selected as string[]).join(", ")}
                 >
                     {options.map(option => (

From f6422ed695ed46ee643f142f26a7f9cb80ca8ee4 Mon Sep 17 00:00:00 2001
From: mariaozamiz <ozamiz.m@gmail.com>
Date: Mon, 11 Mar 2024 09:53:29 +0100
Subject: [PATCH 7/7] chore: update handleChange on hooks

---
 .../steps/3-disaggregates/useDisaggregatesStep.tsx         | 7 +++----
 .../useGeneralPractitionersStep.tsx                        | 7 +++----
 .../steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx   | 7 +++----
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/webapp/pages/analysis/steps/3-disaggregates/useDisaggregatesStep.tsx b/src/webapp/pages/analysis/steps/3-disaggregates/useDisaggregatesStep.tsx
index 40d267d..5734e7b 100644
--- a/src/webapp/pages/analysis/steps/3-disaggregates/useDisaggregatesStep.tsx
+++ b/src/webapp/pages/analysis/steps/3-disaggregates/useDisaggregatesStep.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from "react";
+import { useState } from "react";
 import i18n from "$/utils/i18n";
 
 export function useDisaggregatesStep() {
@@ -85,9 +85,8 @@ export function useDisaggregatesStep() {
 
     const [value, setValue] = useState<string[]>(defaultValues);
 
-    const handleChange = (event: ChangeEvent<any>) => {
-        const selectedValues = event.target.value as string[];
-        setValue(selectedValues);
+    const handleChange = (values: string[]) => {
+        setValue(values);
     };
 
     const runAnalysis = (e: any) => {
diff --git a/src/webapp/pages/analysis/steps/4-general-practitioners/useGeneralPractitionersStep.tsx b/src/webapp/pages/analysis/steps/4-general-practitioners/useGeneralPractitionersStep.tsx
index f5931c9..70db2c8 100644
--- a/src/webapp/pages/analysis/steps/4-general-practitioners/useGeneralPractitionersStep.tsx
+++ b/src/webapp/pages/analysis/steps/4-general-practitioners/useGeneralPractitionersStep.tsx
@@ -1,5 +1,5 @@
 import i18n from "$/utils/i18n";
-import { ChangeEvent, useState } from "react";
+import { useState } from "react";
 
 export function useGeneralPractitionersStep() {
     const catCombosList = [
@@ -97,9 +97,8 @@ export function useGeneralPractitionersStep() {
 
     const [values, setValues] = useState<string[]>(defaultValues);
 
-    const handleChange = (event: ChangeEvent<any>) => {
-        const selectedValues = event.target.value as string[];
-        setValues(selectedValues);
+    const handleChange = (values: string[]) => {
+        setValues(values);
     };
 
     const runAnalysis = (e: any) => {
diff --git a/src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx b/src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx
index 752b01d..7eb77f8 100644
--- a/src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx
+++ b/src/webapp/pages/analysis/steps/7-nursingMidwifery/useNursingMidwiferyStep.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from "react";
+import { useState } from "react";
 import i18n from "$/utils/i18n";
 
 export function useNursingMidwiferyStep() {
@@ -85,9 +85,8 @@ export function useNursingMidwiferyStep() {
 
     const [values, setValues] = useState<string[]>(defaultValues);
 
-    const handleChange = (event: ChangeEvent<any>) => {
-        const selectedValues = event.target.value as string[];
-        setValues(selectedValues);
+    const handleChange = (values: string[]) => {
+        setValues(values);
     };
 
     const runAnalysis = (e: any) => {