From 0de3b2c5e7f232d35baf2281ff881fefc1e32f63 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Fri, 22 Aug 2025 18:08:38 -0700
Subject: [PATCH] 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() {
                 <DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
                 <DropDownMenu collection={sections} placeholder="Section" width="130px" />
             </HStack>
-            <Text fontSize="sm" pl={2} pt={2}>
+            <Text fontSize="xs" pl={2} pt={2}>
                 Use Volcano names as found in GVP and dashboard. (e.g. Nevado del Ruiz, Chiles-Cerro Negro).
             </Text>
-            <List.Root as="ul" styleType="circle" fontSize="sm" pl={6}>
+            <List.Root as="ul" styleType="circle" fontSize="xs" pl={6}>
                 <List.Item>Edit entry.</List.Item>
                 <List.Item>Delete entry.</List.Item>
                 <List.Item>Copy entry to form. Then hitting 'Save' will create a new entry.</List.Item>
@@ -189,33 +189,33 @@ export function MEDataEntry() {
                     </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>
+                        <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>
+                            <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">  
+                    <ButtonGroup variant="surface" size="sm">  
                         <Button >EDIT</Button>
                         <Button>COPY</Button>
                         <Button variant="solid" colorPalette="red">DELETE</Button>
@@ -228,7 +228,7 @@ export function MEDataEntry() {
                         Fill in Form
                     </Box>
 
-                    <Stack p={2} gap="2" css={{ "--field-label-width": "120px" }}>
+                    <Stack p={2} gap="2" css={{ "--field-label-width": "80px" }}>
                         <HStack spacing={6} align="flex-start" w="100%" flexWrap="wrap"> 
                             <Field.Root orientation="horizontal" flex="1" minW="260px">
                                 <Field.Label>Country:</Field.Label>
@@ -248,46 +248,53 @@ export function MEDataEntry() {
 
                         <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.Label>Volcano:</Field.Label>
+                                <Input {...register("volcano")} placeholder="St Helens" />
                             </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.Label>End Date of Assistance:</Field.Label>
+                                <Input {...register("enddate")} placeholder="7/14/2054" />
                             </Field.Root>
                 
                             <Field.Root orientation="horizontal" flex="1">
-                                <Field.Label>VPI10 (LandScan 2014):</Field.Label>
-                                <Input {...register("lastname")} placeholder="CatPic.jpg" />
+                                <Field.Label>Downstream Affected Population:</Field.Label>
+                                <Input {...register("downstream")} 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>Country:</Field.Label>
-                                <Input {...register("country")} placeholder="US" />
+                                <Field.Label>Male Population:</Field.Label>
+                                <Input {...register("male")} placeholder="1776" />
                             </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.Label>Female Population:</Field.Label>
+                                <Input {...register("female")} placeholder="1892" />
                             </Field.Root>
                 
                             <Field.Root orientation="horizontal" flex="1">
-                                <Field.Label>VPI10 (LandScan 2014):</Field.Label>
-                                <Input {...register("lastname")} placeholder="CatPic.jpg" />
+                                <Field.Label>Total Population:</Field.Label>
+                                <Input {...register("total")} placeholder="3668" />
                             </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 orientation="horizontal" flex="1" pt={2}> 
+                            <Field.Label>Assistance Type:</Field.Label>
+                            <Input {...register("assistance")} placeholder="Monetary" flex="1" />
                         </Field.Root>
-            
-                        <Button type="submit" alignSelf="flex-start">
-                            Save
-                        </Button>
+
+                        <HStack alignSelf="flex-start" pt={2}>
+                            <ButtonGroup variant="surface" size="sm">
+                                <Button type="submit" variant="solid" colorPalette="green" >
+                                    Add
+                                </Button>
+                                <Button type="submit">
+                                    Reset
+                                </Button>
+                            </ButtonGroup>
+                        </HStack>
                     </Stack>
                 </Box>
             </Box>