From caad4e117e284655b14caf37143273edcc213669 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Mon, 25 Aug 2025 14:15:04 -0700
Subject: [PATCH 1/2] Add form type validation for date and number values along
 with interactive row highlighting in the main M&E Data Entry table

---
 .../Canvas/views/AdminTabs/MEDataEntry.jsx    | 92 ++++++++++++-------
 1 file changed, 58 insertions(+), 34 deletions(-)

diff --git a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
index 18ed766..f0f5b21 100644
--- a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
+++ b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
@@ -116,12 +116,29 @@ const items = [
 export function MEDataEntry() {
     const [value, setValue] = useState("");
     const [selection, setSelection] = useState([]);
+    
     const { 
         register, 
         handleSubmit,
+        reset,
         watch,
         formState: { errors },
-    } = useForm();
+    } = useForm({
+        defaultValues: {
+            id: "",
+            section: "",
+            volcano: "",
+            country: "",
+            start: "",
+            end: "",
+            type: "",
+            vpi10: "",
+            downstream: 0,
+            male: 0,
+            female: 0,
+            total: 0,
+        }
+    });
     
     const onSubmit = (data) => {
         console.log("Form submitted:", data);
@@ -184,34 +201,36 @@ export function MEDataEntry() {
             
             <Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500">
                 <Box m={4} border="1px solid">
-                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.300" overflow="hidden">
+                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400" overflow="hidden">
                         Number of people benefitting from VDAP activities, disaggregate by sex
                     </Box>
                     
-                    <Box overflowX="auto"> 
-                        <Table.Root variant="outline" size="sm">
-                            <Table.Header>
-                                <Table.Row>
-                                    <Table.ColumnHeader /> {/* padding for checkboxes */}
-                                    <Table.ColumnHeader>Section</Table.ColumnHeader>
-                                    <Table.ColumnHeader>Volcano</Table.ColumnHeader>
-                                    <Table.ColumnHeader>Country</Table.ColumnHeader>
-                                    <Table.ColumnHeader>Start Date of Assistance</Table.ColumnHeader>
-                                    <Table.ColumnHeader>End Date of Assistance</Table.ColumnHeader>
-                                    <Table.ColumnHeader>Assistance Type</Table.ColumnHeader>
-                                    <Table.ColumnHeader>VPI10</Table.ColumnHeader>
-                                    <Table.ColumnHeader>Downstream Population</Table.ColumnHeader>
-                                    <Table.ColumnHeader>Male</Table.ColumnHeader>
-                                    <Table.ColumnHeader>Female</Table.ColumnHeader>
-                                    <Table.ColumnHeader>Total</Table.ColumnHeader>
-                                </Table.Row>
-                            </Table.Header>
+                    {/* <Box overflowX="auto">  */}
+                        <Table.ScrollArea borderWidth="1px"height="200px">
+                            <Table.Root variant="outline" size="sm" stickyHeader interactive>
+                                <Table.Header>
+                                    <Table.Row>
+                                        <Table.ColumnHeader /> {/* padding for checkboxes */}
+                                        <Table.ColumnHeader>Section</Table.ColumnHeader>
+                                        <Table.ColumnHeader>Volcano</Table.ColumnHeader>
+                                        <Table.ColumnHeader>Country</Table.ColumnHeader>
+                                        <Table.ColumnHeader>Start Date of Assistance</Table.ColumnHeader>
+                                        <Table.ColumnHeader>End Date of Assistance</Table.ColumnHeader>
+                                        <Table.ColumnHeader>Assistance Type</Table.ColumnHeader>
+                                        <Table.ColumnHeader>VPI10</Table.ColumnHeader>
+                                        <Table.ColumnHeader>Downstream Population</Table.ColumnHeader>
+                                        <Table.ColumnHeader>Male</Table.ColumnHeader>
+                                        <Table.ColumnHeader>Female</Table.ColumnHeader>
+                                        <Table.ColumnHeader>Total</Table.ColumnHeader>
+                                    </Table.Row>
+                                </Table.Header>
 
-                            <Table.Body>
-                                {rows}
-                            </Table.Body>
-                        </Table.Root>
-                    </Box>
+                                <Table.Body>
+                                    {rows}
+                                </Table.Body>
+                            </Table.Root>
+                        </Table.ScrollArea>
+                    {/* </Box> */}
                 </Box>
                 {/* Row actions aligned right */}
                 <HStack justify="flex-end" p={3} pt={0} borderBottom="1px solid" borderColor="gray.300" spacing={3} >
@@ -223,8 +242,13 @@ export function MEDataEntry() {
                 </HStack>
                 
                 {/* Form Section */}
-                <Box m={4} border="1px solid">
-                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.300" overflow="hidden">
+                <Box 
+                    as="form"
+                    onSubmit={handleSubmit(onSubmit)}
+                    m={4} 
+                    border="1px solid"
+                >
+                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400" overflow="hidden">
                         Fill in Form
                     </Box>
 
@@ -237,7 +261,7 @@ export function MEDataEntry() {
                 
                             <Field.Root orientation="horizontal" flex="1" minW="260px">
                                 <Field.Label>Start Date of Assistance:</Field.Label>
-                                <Input {...register("startdate")} placeholder="9/6/1987" />
+                                <Input {...register("startdate", { valueAsDate: true })} placeholder="9/6/1987" />
                             </Field.Root>
                 
                             <Field.Root orientation="horizontal" flex="1">
@@ -254,29 +278,29 @@ export function MEDataEntry() {
                 
                             <Field.Root orientation="horizontal" flex="1" minW="260px">
                                 <Field.Label>End Date of Assistance:</Field.Label>
-                                <Input {...register("enddate")} placeholder="7/14/2054" />
+                                <Input {...register("enddate", { valueAsDate: true })} placeholder="7/14/2054" />
                             </Field.Root>
                 
                             <Field.Root orientation="horizontal" flex="1">
                                 <Field.Label>Downstream Affected Population:</Field.Label>
-                                <Input {...register("downstream")} placeholder="1337" />
+                                <Input {...register("downstream", { valueAsNumber: true })} placeholder="1337" />
                             </Field.Root>
                         </HStack> 
 
                         <HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap"> 
                             <Field.Root orientation="horizontal" flex="1" minW="260px">
                                 <Field.Label>Male Population:</Field.Label>
-                                <Input {...register("male")} placeholder="1776" />
+                                <Input {...register("male", { valueAsNumber: true })} placeholder="1776" />
                             </Field.Root>
                 
                             <Field.Root orientation="horizontal" flex="1" minW="260px">
                                 <Field.Label>Female Population:</Field.Label>
-                                <Input {...register("female")} placeholder="1892" />
+                                <Input {...register("female", { valueAsNumber: true })} placeholder="1892" />
                             </Field.Root>
                 
                             <Field.Root orientation="horizontal" flex="1">
                                 <Field.Label>Total Population:</Field.Label>
-                                <Input {...register("total")} placeholder="3668" />
+                                <Input {...register("total", { valueAsNumber: true })} placeholder="3668" />
                             </Field.Root>
                         </HStack> 
 
@@ -290,7 +314,7 @@ export function MEDataEntry() {
                                 <Button type="submit" variant="solid" colorPalette="green" >
                                     Add
                                 </Button>
-                                <Button type="submit">
+                                <Button onClick={() => reset()}>
                                     Reset
                                 </Button>
                             </ButtonGroup>

From bdd92f2f2c4041d11f0255bdd46e58f851e99057 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Mon, 25 Aug 2025 15:12:20 -0700
Subject: [PATCH 2/2] Add ScrollArea to main M&E Data Entry table along with
 sticky header

---
 .../Canvas/views/AdminTabs/MEDataEntry.jsx    | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
index f0f5b21..f3ee9ba 100644
--- a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
+++ b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
@@ -111,6 +111,20 @@ const items = [
       female: 550,
       total: 1100,
     },
+    {
+        id: "r6",
+        section: "Gas",
+        volcano: "Ranier",
+        country: "US",
+        start: "2024-07-02",
+        end: "2027-05-12",
+        type: "Deployment",
+        vpi10: "Yes",
+        downstream: 1200,
+        male: 570,
+        female: 570,
+        total: 1400,
+      },
   ];
  
 export function MEDataEntry() {
@@ -123,22 +137,7 @@ export function MEDataEntry() {
         reset,
         watch,
         formState: { errors },
-    } = useForm({
-        defaultValues: {
-            id: "",
-            section: "",
-            volcano: "",
-            country: "",
-            start: "",
-            end: "",
-            type: "",
-            vpi10: "",
-            downstream: 0,
-            male: 0,
-            female: 0,
-            total: 0,
-        }
-    });
+    } = useForm();
     
     const onSubmit = (data) => {
         console.log("Form submitted:", data);
@@ -201,16 +200,16 @@ export function MEDataEntry() {
             
             <Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500">
                 <Box m={4} border="1px solid">
-                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400" overflow="hidden">
+                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400">
                         Number of people benefitting from VDAP activities, disaggregate by sex
                     </Box>
                     
                     {/* <Box overflowX="auto">  */}
-                        <Table.ScrollArea borderWidth="1px"height="200px">
-                            <Table.Root variant="outline" size="sm" stickyHeader interactive>
+                        <Table.ScrollArea height="240px">
+                            <Table.Root variant="outline" overflow="initial" size="sm" stickyHeader interactive>
                                 <Table.Header>
-                                    <Table.Row>
-                                        <Table.ColumnHeader /> {/* padding for checkboxes */}
+                                    <Table.Row bg="bg.subtle">
+                                        <Table.ColumnHeader w="40px"/> 
                                         <Table.ColumnHeader>Section</Table.ColumnHeader>
                                         <Table.ColumnHeader>Volcano</Table.ColumnHeader>
                                         <Table.ColumnHeader>Country</Table.ColumnHeader>