From ea11372e51e4275f19dbb82a29202320caa1937d Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Fri, 22 Aug 2025 17:31:42 -0700
Subject: [PATCH] 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(
-        // <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" />
@@ -190,7 +189,6 @@ export function MEDataEntry() {
                     </Box>
                     
                     <Box overflowX="auto"> 
-                        {/* <RadioGroup.Root value={value} onValueChange={(e) => setValue(e.value)}> */}
                             <Table.Root variant="outline" size="sm">
                                 <Table.Header>
                                     <Table.Row>
@@ -223,32 +221,71 @@ export function MEDataEntry() {
                         <Button variant="solid" colorPalette="red">DELETE</Button>
                     </ButtonGroup>
                 </HStack>
+                
+                {/* Form Section */}
                 <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" />
+
+                    <Stack p={2} gap="2" css={{ "--field-label-width": "120px" }}>
+                        <HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap"> 
+                            <Field.Root orientation="horizontal" flex="1" minW="260px">
+                                <Field.Label>Country:</Field.Label>
+                                <Input {...register("country")} placeholder="US" />
+                            </Field.Root>
+                
+                            <Field.Root orientation="horizontal" flex="1" minW="260px">
+                                <Field.Label>Start Date of Assistance:</Field.Label>
+                                <Input {...register("startdate")} placeholder="9/6/1987" />
+                            </Field.Root>
+                
+                            <Field.Root orientation="horizontal" flex="1">
+                                <Field.Label>VPI10 (LandScan 2014):</Field.Label>
+                                <Input {...register("lastname")} placeholder="CatPic.jpg" />
+                            </Field.Root>
+                        </HStack> 
+
+                        <HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap"> 
+                            <Field.Root orientation="horizontal" flex="1" minW="260px">
+                                <Field.Label>Country:</Field.Label>
+                                <Input {...register("country")} placeholder="US" />
+                            </Field.Root>
+                
+                            <Field.Root orientation="horizontal" flex="1" minW="260px">
+                                <Field.Label>Start Date of Assistance:</Field.Label>
+                                <Input {...register("startdate")} placeholder="9/6/1987" />
+                            </Field.Root>
+                
+                            <Field.Root orientation="horizontal" flex="1">
+                                <Field.Label>VPI10 (LandScan 2014):</Field.Label>
+                                <Input {...register("lastname")} placeholder="CatPic.jpg" />
+                            </Field.Root>
+                        </HStack> 
+
+                        <HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap"> 
+                            <Field.Root orientation="horizontal" flex="1" minW="260px">
+                                <Field.Label>Country:</Field.Label>
+                                <Input {...register("country")} placeholder="US" />
+                            </Field.Root>
+                
+                            <Field.Root orientation="horizontal" flex="1" minW="260px">
+                                <Field.Label>Start Date of Assistance:</Field.Label>
+                                <Input {...register("startdate")} placeholder="9/6/1987" />
+                            </Field.Root>
+                
+                            <Field.Root orientation="horizontal" flex="1">
+                                <Field.Label>VPI10 (LandScan 2014):</Field.Label>
+                                <Input {...register("lastname")} placeholder="CatPic.jpg" />
+                            </Field.Root>
+                        </HStack> 
+
+                        <Field.Root orientation="horizontal" flex="1"> 
+                            <Field.Label>Email</Field.Label>
+                            <Input {...register("email")} placeholder="djohntson@usgs.gov" 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">
+                        <Button type="submit" alignSelf="flex-start">
                             Save
                         </Button>
                     </Stack>