From 3ef85bbcbff7722271f16eca088015fc83b19d53 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Fri, 22 Aug 2025 09:28:03 -0700
Subject: [PATCH] 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 (
         <Select.Root collection={collection} size={size} width={width}>
             <Select.HiddenSelect />
-            <Select.Control>
+            <Select.Control bg="gray.100" _hover={{ bg: "gray.200" }}>
                 <Select.Trigger>
                     <Select.ValueText placeholder={placeholder} />
                 </Select.Trigger>
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(
-        <HStack spacing={4} m={4}>
-            <DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
-            <DropDownMenu collection={years} placeholder="Year" width="130px" />
-            <DropDownMenu collection={sections} placeholder="Section" width="130px" />
-        </HStack>
+        <Box m={4} border="1px solid" borderRadius="sm" borderColor="gray.500">
+            <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" />
+            </HStack>
+            <Text fontSize="sm" pl={2} pt={4}>
+                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.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>
+            </List.Root>
+            <Box m={4} border="1px solid">
+                <Box 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>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.length === 0 ? (
+                                    <Table.Row>
+                                        <Table.Cell colSpan={12} textAlign="center" py={4} color="gray.500">
+                                            No data yet
+                                        </Table.Cell>
+                                    </Table.Row>
+                                ) : (
+                                    rows.map((r) => (
+                                        <Table.Row key={r.id}>
+                                            <Table.Cell w="40px">
+                                                <RadioGroup.Item value={r.id}>
+                                                    <RadioGroup.ItemHiddenInput />
+                                                    <RadioGroup.ItemIndicator />
+                                                </RadioGroup.Item>
+                                            </Table.Cell>
+                                            <Table.Cell>{r.section}</Table.Cell>
+                                            <Table.Cell>{r.volcano}</Table.Cell>
+                                            <Table.Cell>{r.country}</Table.Cell>
+                                            <Table.Cell>{r.start}</Table.Cell>
+                                            <Table.Cell>{r.end}</Table.Cell>
+                                            <Table.Cell>{r.type}</Table.Cell>
+                                            <Table.Cell>{r.vpi10}</Table.Cell>
+                                            <Table.Cell isNumeric>{r.downstream}</Table.Cell>
+                                            <Table.Cell isNumeric>{r.male}</Table.Cell>
+                                            <Table.Cell isNumberic>{r.female}</Table.Cell>
+                                            <Table.Cell is Numberic fontWeight="semibold">{r.total}</Table.Cell>
+                                        </Table.Row>
+                                    )))   
+                                }
+                            </Table.Body>
+
+                            
+                        </Table.Root>
+                    </RadioGroup.Root>
+                </Box>
+            </Box>
+            {/* Row actions aligned right */}
+            <HStack justify="flex-end" p={3} borderTop="1px solid" borderColor="gray.300" spacing={3} >
+                <Button variant="subtle">EDIT</Button>
+                <Button variant="subtle">COPY</Button>
+                <Button colorScheme="red" variant="solid">DELETE</Button>
+            </HStack>
+        </Box>
     );
 }