From 8630340a070f49045b0077ff347cd2b23a29a709 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Wed, 20 Aug 2025 17:44:21 -0700 Subject: [PATCH 1/7] Add dropdown menus to M&E Data Entry view --- client/src/components/Canvas/Canvas.jsx | 2 - .../Canvas/CanvasComponents/DropDownMenu.jsx | 30 +++++++++ client/src/components/Canvas/views/Admin.jsx | 4 +- .../Canvas/views/AdminTabs/MEDataEntry.jsx | 67 ++++++++++++++----- 4 files changed, 81 insertions(+), 22 deletions(-) create mode 100644 client/src/components/Canvas/CanvasComponents/DropDownMenu.jsx diff --git a/client/src/components/Canvas/Canvas.jsx b/client/src/components/Canvas/Canvas.jsx index 8594742..a254f7b 100644 --- a/client/src/components/Canvas/Canvas.jsx +++ b/client/src/components/Canvas/Canvas.jsx @@ -9,8 +9,6 @@ import { chakra } from "@chakra-ui/react"; import Personal from "./views/Personal"; import Security from "./views/Security"; -const ADMIN_DEFAULT = "medataentry"; - export default function Canvas(props) { const { view } = props; diff --git a/client/src/components/Canvas/CanvasComponents/DropDownMenu.jsx b/client/src/components/Canvas/CanvasComponents/DropDownMenu.jsx new file mode 100644 index 0000000..738351d --- /dev/null +++ b/client/src/components/Canvas/CanvasComponents/DropDownMenu.jsx @@ -0,0 +1,30 @@ +import { Portal, Select } from '@chakra-ui/react'; + +export default function DropDownMenu({ collection, placeholder = "Select...", size = "sm", width = "200px" }) { + return ( + + + + + + + + + + + + + + + {collection.items.map((item) => ( + + {item.label} + + + ))} + + + + + ); +} \ No newline at end of file diff --git a/client/src/components/Canvas/views/Admin.jsx b/client/src/components/Canvas/views/Admin.jsx index 6b27590..b332fc6 100644 --- a/client/src/components/Canvas/views/Admin.jsx +++ b/client/src/components/Canvas/views/Admin.jsx @@ -51,8 +51,8 @@ export default function Admin({ view, onChangeView, onEditWidgets, appendWidget - - + + diff --git a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx index 98822e6..767ad02 100644 --- a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx +++ b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx @@ -1,22 +1,53 @@ -import { Box, Text } from "@chakra-ui/react"; +import { HStack, createListCollection } from "@chakra-ui/react" +import DropDownMenu from "../../CanvasComponents/DropDownMenu" + +const startYear = 1970; +const currentYear = new Date().getFullYear(); + +const yearItems = Array.from( +{ length: currentYear - startYear + 1 }, +(_, i) => { + const year = startYear + i; + return { label: String(year), value: String(year) }; +} +); + +const years = createListCollection({ +items: yearItems.reverse(), +}); + +const quarters = createListCollection({ +items: [ + { label: "Q1", value: "quarter_1" }, + { label: "Q2", value: "quarter_2" }, + { label: "Q3", value: "quarter_3" }, + { label: "Q4", value: "quarter_4" }, +], +}) + +const sections = createListCollection({ +items: [ + { label: "All", value: "all" }, + { label: "Com", value: "com" }, + { label: "Eng", value: "eng" }, + { label: "Gas", value: "gas" }, + { label: "Geophys", value: "geophys" }, + { label: "GRSP", value: "grsp" }, + { label: "IT", value: "it" }, +], +}) export function MEDataEntry() { return( - - - M&E Data Entry dashboard coming soon. - - + + + + + ); -} \ No newline at end of file +} + + + + + From 3ef85bbcbff7722271f16eca088015fc83b19d53 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Fri, 22 Aug 2025 09:28:03 -0700 Subject: [PATCH 2/7] Save point, layout taking shape --- .../Canvas/CanvasComponents/DropDownMenu.jsx | 2 +- .../Canvas/views/AdminTabs/MEDataEntry.jsx | 111 +++++++++++++++--- 2 files changed, 97 insertions(+), 16 deletions(-) diff --git a/client/src/components/Canvas/CanvasComponents/DropDownMenu.jsx b/client/src/components/Canvas/CanvasComponents/DropDownMenu.jsx index 738351d..811fdbb 100644 --- a/client/src/components/Canvas/CanvasComponents/DropDownMenu.jsx +++ b/client/src/components/Canvas/CanvasComponents/DropDownMenu.jsx @@ -4,7 +4,7 @@ export default function DropDownMenu({ collection, placeholder = "Select...", si return ( - + diff --git a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx index 767ad02..ef25974 100644 --- a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx +++ b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx @@ -1,4 +1,5 @@ -import { HStack, createListCollection } from "@chakra-ui/react" +import { useState } from 'react'; +import { Box, Button, Text, List, HStack, RadioGroup, Table, createListCollection } from "@chakra-ui/react" import DropDownMenu from "../../CanvasComponents/DropDownMenu" const startYear = 1970; @@ -26,24 +27,104 @@ items: [ }) const sections = createListCollection({ -items: [ - { label: "All", value: "all" }, - { label: "Com", value: "com" }, - { label: "Eng", value: "eng" }, - { label: "Gas", value: "gas" }, - { label: "Geophys", value: "geophys" }, - { label: "GRSP", value: "grsp" }, - { label: "IT", value: "it" }, -], + items: [ + { label: "All", value: "all" }, + { label: "Com", value: "com" }, + { label: "Eng", value: "eng" }, + { label: "Gas", value: "gas" }, + { label: "Geophys", value: "geophys" }, + { label: "GRSP", value: "grsp" }, + { label: "IT", value: "it" }, + ], }) export function MEDataEntry() { + const [value, setValue] = useState("") + const [rows, setRows] = useState([]); + return( - - - - - + + + + + + + + Use Volcano names as found in GVP and dashboard. (e.g. Nevado del Ruiz, Chiles-Cerro Negro). + + + Edit entry. + Delete entry. + Copy entry to form. Then hitting 'Save' will create a new entry. + + + + Number of people benefitting from VDAP activities, disaggregate by sex + + + + setValue(e.value)}> + + + + Section + Volcano + Country + Start Date of Assistance + End Date of Assistance + Assistance Type + VPI10 + Downstream Population + Male + Female + Total + + + + + {rows.length === 0 ? ( + + + No data yet + + + ) : ( + rows.map((r) => ( + + + + + + + + {r.section} + {r.volcano} + {r.country} + {r.start} + {r.end} + {r.type} + {r.vpi10} + {r.downstream} + {r.male} + {r.female} + {r.total} + + ))) + } + + + + + + + + {/* Row actions aligned right */} + + + + + + ); } From 66d1220fbe3752b4264e200203234cad0563bb9b Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Fri, 22 Aug 2025 12:46:08 -0700 Subject: [PATCH 3/7] Add styling, margin, and padding changes --- .../Canvas/views/AdminTabs/MEDataEntry.jsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx index ef25974..25078b2 100644 --- a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx +++ b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Box, Button, Text, List, HStack, RadioGroup, Table, createListCollection } from "@chakra-ui/react" +import { Box, Button, ButtonGroup, Text, List, HStack, RadioGroup, Table, createListCollection } from "@chakra-ui/react" import DropDownMenu from "../../CanvasComponents/DropDownMenu" const startYear = 1970; @@ -43,13 +43,13 @@ export function MEDataEntry() { const [rows, setRows] = useState([]); return( - + - + Use Volcano names as found in GVP and dashboard. (e.g. Nevado del Ruiz, Chiles-Cerro Negro). @@ -58,7 +58,7 @@ export function MEDataEntry() { Copy entry to form. Then hitting 'Save' will create a new entry. - + Number of people benefitting from VDAP activities, disaggregate by sex @@ -112,17 +112,17 @@ export function MEDataEntry() { ))) } - - {/* Row actions aligned right */} - - - + + + + + ); From 69525d01327efbe532a96dbd18305f08064c5385 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Fri, 22 Aug 2025 16:28:50 -0700 Subject: [PATCH 4/7] Add initial table and checkbox functionality to M&E Data Entry view --- .../Canvas/views/AdminTabs/MEDataEntry.jsx | 154 ++++++++++++++---- 1 file changed, 120 insertions(+), 34 deletions(-) diff --git a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx index 25078b2..75afa54 100644 --- a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx +++ b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Box, Button, ButtonGroup, Text, List, HStack, RadioGroup, Table, createListCollection } from "@chakra-ui/react" +import { Box, Button, ButtonGroup, Text, List, HStack, RadioGroup, Table, Checkbox, createListCollection } from "@chakra-ui/react" import DropDownMenu from "../../CanvasComponents/DropDownMenu" const startYear = 1970; @@ -38,9 +38,122 @@ const sections = createListCollection({ ], }) +// Sample entries for visual reference - remove before flight +const items = [ + { + id: "r1", + section: "Com", + volcano: "Nevado del Ruiz", + country: "COL", + start: "2024-01-15", + end: "2024-01-30", + type: "Training", + vpi10: "Yes", + downstream: 1200, + male: 600, + female: 600, + total: 1200, + }, + { + id: "r2", + section: "Gas", + volcano: "Etna", + country: "ITA", + start: "2024-02-01", + end: "2024-02-20", + type: "Assistance", + vpi10: "No", + downstream: 900, + male: 450, + female: 450, + total: 900, + }, + { + id: "r3", + section: "Eng", + volcano: "Kilauea", + country: "USA", + start: "2024-03-10", + end: "2024-03-25", + type: "Support", + vpi10: "Yes", + downstream: 2000, + male: 1000, + female: 1000, + total: 2000, + }, + { + id: "r4", + section: "Geophys", + volcano: "Fuji", + country: "JPN", + start: "2024-04-05", + end: "2024-04-18", + type: "Monitoring", + vpi10: "Yes", + downstream: 1500, + male: 700, + female: 800, + total: 1500, + }, + { + id: "r5", + section: "IT", + volcano: "Merapi", + country: "IDN", + start: "2024-05-02", + end: "2024-05-12", + type: "Deployment", + vpi10: "No", + downstream: 1100, + male: 550, + female: 550, + total: 1100, + }, + ]; + export function MEDataEntry() { - const [value, setValue] = useState("") - const [rows, setRows] = useState([]); + const [value, setValue] = useState(""); + // const [rows, setRows] = useState([]); + const [selection, setSelection] = useState([]); + const rows = items.map((item) => ( + + + { + setSelection((prev) => + changes.checked + ? [...prev, item.id] + : prev.filter((id) => id !== item.id ), + ); + }} + > + + + + + + + {item.section} + {item.volcano} + {item.country} + {item.start} + {item.end} + {item.type} + {item.vpi10} + {item.downstream} + {item.male} + {item.female} + {item.total} + + )) return( @@ -63,10 +176,11 @@ export function MEDataEntry() { - setValue(e.value)}> + {/* setValue(e.value)}> */} + {/* padding for checkboxes */} Section Volcano Country @@ -82,38 +196,10 @@ export function MEDataEntry() { - {rows.length === 0 ? ( - - - No data yet - - - ) : ( - rows.map((r) => ( - - - - - - - - {r.section} - {r.volcano} - {r.country} - {r.start} - {r.end} - {r.type} - {r.vpi10} - {r.downstream} - {r.male} - {r.female} - {r.total} - - ))) - } + {rows} - + {/* */} {/* Row actions aligned right */} From dc56ec79f1548357831c6a14804c2d054b5f4cb3 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Fri, 22 Aug 2025 16:55:24 -0700 Subject: [PATCH 5/7] Add initial fill in form boilerplate --- .../Canvas/views/AdminTabs/MEDataEntry.jsx | 128 ++++++++++++------ 1 file changed, 86 insertions(+), 42 deletions(-) diff --git a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx index 75afa54..4ce5580 100644 --- a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx +++ b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx @@ -1,6 +1,7 @@ import { useState } from 'react'; -import { Box, Button, ButtonGroup, Text, List, HStack, RadioGroup, Table, Checkbox, createListCollection } from "@chakra-ui/react" +import { Box, Button, ButtonGroup, Text, Input, List, Field, Stack, HStack, Table, Checkbox, createListCollection } from "@chakra-ui/react" import DropDownMenu from "../../CanvasComponents/DropDownMenu" +import { useForm } from 'react-hook-form'; const startYear = 1970; const currentYear = new Date().getFullYear(); @@ -111,11 +112,21 @@ const items = [ total: 1100, }, ]; - + export function MEDataEntry() { const [value, setValue] = useState(""); - // const [rows, setRows] = useState([]); const [selection, setSelection] = useState([]); + const { + register, + handleSubmit, + watch, + formState: { errors }, + } = useForm(); + + const onSubmit = (data) => { + console.log("Form submitted:", data); + } + const rows = items.map((item) => ( - + // + + @@ -170,46 +182,78 @@ export function MEDataEntry() { Delete entry. Copy entry to form. Then hitting 'Save' will create a new entry. - - - Number of people benefitting from VDAP activities, disaggregate by sex - - - - {/* setValue(e.value)}> */} - - - - {/* padding for checkboxes */} - Section - Volcano - Country - Start Date of Assistance - End Date of Assistance - Assistance Type - VPI10 - Downstream Population - Male - Female - Total - - + + + + + Number of people benefitting from VDAP activities, disaggregate by sex + + + + {/* setValue(e.value)}> */} + + + + {/* padding for checkboxes */} + Section + Volcano + Country + Start Date of Assistance + End Date of Assistance + Assistance Type + VPI10 + Downstream Population + Male + Female + Total + + - - {rows} - - - {/* */} + + {rows} + + + + + {/* Row actions aligned right */} + + + + + + + + + + Fill in Form + + + + User Name + + + + + First Name + + + + + Last Name + + + + + Email + + + + + - {/* Row actions aligned right */} - - - - - - - ); } From ea11372e51e4275f19dbb82a29202320caa1937d Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Fri, 22 Aug 2025 17:31:42 -0700 Subject: [PATCH 6/7] Save point, layout of form section looks decent --- .../Canvas/views/AdminTabs/MEDataEntry.jsx | 83 ++++++++++++++----- 1 file changed, 60 insertions(+), 23 deletions(-) diff --git a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx index 4ce5580..5fe5a80 100644 --- a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx +++ b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Box, Button, ButtonGroup, Text, Input, List, Field, Stack, HStack, Table, Checkbox, createListCollection } from "@chakra-ui/react" +import { Box, Button, ButtonGroup, Text, Input, List, Field, Stack, SimpleGrid, HStack, Table, Checkbox, createListCollection } from "@chakra-ui/react" import DropDownMenu from "../../CanvasComponents/DropDownMenu" import { useForm } from 'react-hook-form'; @@ -167,7 +167,6 @@ export function MEDataEntry() { )) return( - // @@ -190,7 +189,6 @@ export function MEDataEntry() { - {/* setValue(e.value)}> */} @@ -223,32 +221,71 @@ export function MEDataEntry() { + + {/* Form Section */} Fill in Form - - - User Name - + + + + + Country: + + + + + Start Date of Assistance: + + + + + VPI10 (LandScan 2014): + + + + + + + Country: + + + + + Start Date of Assistance: + + + + + VPI10 (LandScan 2014): + + + + + + + Country: + + + + + Start Date of Assistance: + + + + + VPI10 (LandScan 2014): + + + + + + Email + - - First Name - - - - - Last Name - - - - - Email - - - - From 0de3b2c5e7f232d35baf2281ff881fefc1e32f63 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Fri, 22 Aug 2025 18:08:38 -0700 Subject: [PATCH 7/7] Add labels, placeholders, and buttons to the form section --- .../Canvas/views/AdminTabs/MEDataEntry.jsx | 95 ++++++++++--------- 1 file changed, 51 insertions(+), 44 deletions(-) diff --git a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx index 5fe5a80..18ed766 100644 --- a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx +++ b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx @@ -173,10 +173,10 @@ export function MEDataEntry() { - + Use Volcano names as found in GVP and dashboard. (e.g. Nevado del Ruiz, Chiles-Cerro Negro). - + Edit entry. Delete entry. Copy entry to form. Then hitting 'Save' will create a new entry. @@ -189,33 +189,33 @@ export function MEDataEntry() { - - - - {/* padding for checkboxes */} - Section - Volcano - Country - Start Date of Assistance - End Date of Assistance - Assistance Type - VPI10 - Downstream Population - Male - Female - Total - - + + + + {/* padding for checkboxes */} + Section + Volcano + Country + Start Date of Assistance + End Date of Assistance + Assistance Type + VPI10 + Downstream Population + Male + Female + Total + + - - {rows} - - + + {rows} + + {/* Row actions aligned right */} - + @@ -228,7 +228,7 @@ export function MEDataEntry() { Fill in Form - + Country: @@ -248,46 +248,53 @@ export function MEDataEntry() { - Country: - + Volcano: + - Start Date of Assistance: - + End Date of Assistance: + - VPI10 (LandScan 2014): - + Downstream Affected Population: + - Country: - + Male Population: + - Start Date of Assistance: - + Female Population: + - VPI10 (LandScan 2014): - + Total Population: + - - Email - + + Assistance Type: + - - + + + + + + +