From dc56ec79f1548357831c6a14804c2d054b5f4cb3 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Fri, 22 Aug 2025 16:55:24 -0700
Subject: [PATCH] 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) => (
         <Table.Row
             key={item.id}
@@ -156,8 +167,9 @@ export function MEDataEntry() {
     ))
 
     return(
-        <Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500">
-            <HStack spacing={6} m={2}>
+        // <Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500">
+        <Box>   
+           <HStack spacing={6} m={2}>
                 <DropDownMenu collection={years} placeholder="Year" width="130px" />
                 <DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
                 <DropDownMenu collection={sections} placeholder="Section" width="130px" />
@@ -170,46 +182,78 @@ export function MEDataEntry() {
                 <List.Item>Delete entry.</List.Item>
                 <List.Item>Copy entry to form. Then hitting 'Save' will create a new entry.</List.Item>
             </List.Root>
-            <Box m={4} border="1px solid">
-                <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.300" overflow="hidden">
-                    Number of people benefitting from VDAP activities, disaggregate by sex
-                </Box>
-                
-                <Box overflowX="auto"> 
-                    {/* <RadioGroup.Root value={value} onValueChange={(e) => setValue(e.value)}> */}
-                        <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 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">
+                        Number of people benefitting from VDAP activities, disaggregate by sex
+                    </Box>
+                    
+                    <Box overflowX="auto"> 
+                        {/* <RadioGroup.Root value={value} onValueChange={(e) => setValue(e.value)}> */}
+                            <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>
 
-                            <Table.Body>
-                                {rows}
-                            </Table.Body>
-                        </Table.Root>
-                    {/* </RadioGroup.Root> */}
+                                <Table.Body>
+                                    {rows}
+                                </Table.Body>
+                            </Table.Root>
+                    </Box>
+                </Box>
+                {/* Row actions aligned right */}
+                <HStack justify="flex-end" p={3} pt={0} borderBottom="1px solid" borderColor="gray.300" spacing={3} >
+                    <ButtonGroup variant="surface">  
+                        <Button >EDIT</Button>
+                        <Button>COPY</Button>
+                        <Button variant="solid" colorPalette="red">DELETE</Button>
+                    </ButtonGroup>
+                </HStack>
+                <Box m={4} border="1px solid">
+                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.300" overflow="hidden">
+                        Fill in Form
+                    </Box>
+                    <Stack p={2} gap="2" maxW="sm" css={{ "--field-label-width": "96px" }}>
+                        <Field.Root orientation="horizontal">
+                        <Field.Label>User Name</Field.Label>
+                        <Input {...register("username")} placeholder="David Johnston" flex="1" />
+                        </Field.Root>
+            
+                        <Field.Root orientation="horizontal">
+                        <Field.Label> First Name</Field.Label>
+                        <Input {...register("firstname")} placeholder="David" flex="1" />
+                        </Field.Root>
+            
+                        <Field.Root orientation="horizontal">
+                        <Field.Label>Last Name</Field.Label>
+                        <Input {...register("lastname")} placeholder="Johnston" flex="1" />
+                        </Field.Root>
+            
+                        <Field.Root orientation="horizontal">
+                        <Field.Label>Email</Field.Label>
+                        <Input {...register("email")} placeholder="djohntson@usgs.gov" flex="1" />
+                        </Field.Root>
+            
+                        <Button type="submit">
+                            Save
+                        </Button>
+                    </Stack>
                 </Box>
             </Box>
-            {/* Row actions aligned right */}
-            <HStack justify="flex-end" p={3} borderTop="1px solid" borderColor="gray.300" spacing={3} >
-                <ButtonGroup variant="surface">  
-                    <Button >EDIT</Button>
-                    <Button>COPY</Button>
-                    <Button variant="solid" colorPalette="red">DELETE</Button>
-                </ButtonGroup>
-            </HStack>
         </Box>
     );
 }