Web-Frontend/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx

import { useState } from 'react';
import { Box, Button, ButtonGroup, Text, List, HStack, RadioGroup, Table, createListCollection } from "@chakra-ui/react"
import DropDownMenu from "../../CanvasComponents/DropDownMenu"

const startYear = 1970;
const currentYear = new Date().getFullYear();

const yearItems = Array.from(
{ length: currentYear - startYear + 1 }, 
(_, i) => {
    const year = startYear + i;
    return { label: String(year), value: String(year) };
}
);

const years = createListCollection({
items: yearItems.reverse(),
});

const quarters = createListCollection({
items: [
    { label: "Q1", value: "quarter_1" },
    { label: "Q2", value: "quarter_2" },
    { label: "Q3", value: "quarter_3" },
    { label: "Q4", value: "quarter_4" },
],
})

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" },
    ],
})

export function MEDataEntry() {
    const [value, setValue] = useState("")
    const [rows, setRows] = useState([]);

    return(
        <Box m={4} mt={1} 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={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.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 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>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} >
                <ButtonGroup variant="surface">  
                    <Button >EDIT</Button>
                    <Button>COPY</Button>
                    <Button variant="solid" colorPalette="red">DELETE</Button>
                </ButtonGroup>
            </HStack>
        </Box>
    );
}