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

import { useState } from 'react';
import { Box, Button, ButtonGroup, Text, List, HStack, RadioGroup, Table, Checkbox, 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" },
    ],
})

// Sample entries for visual reference - remove before flight
const items = [
    {
      id: "r1",
      section: "Com",
      volcano: "Nevado del Ruiz",
      country: "COL",
      start: "2024-01-15",
      end: "2024-01-30",
      type: "Training",
      vpi10: "Yes",
      downstream: 1200,
      male: 600,
      female: 600,
      total: 1200,
    },
    {
      id: "r2",
      section: "Gas",
      volcano: "Etna",
      country: "ITA",
      start: "2024-02-01",
      end: "2024-02-20",
      type: "Assistance",
      vpi10: "No",
      downstream: 900,
      male: 450,
      female: 450,
      total: 900,
    },
    {
      id: "r3",
      section: "Eng",
      volcano: "Kilauea",
      country: "USA",
      start: "2024-03-10",
      end: "2024-03-25",
      type: "Support",
      vpi10: "Yes",
      downstream: 2000,
      male: 1000,
      female: 1000,
      total: 2000,
    },
    {
      id: "r4",
      section: "Geophys",
      volcano: "Fuji",
      country: "JPN",
      start: "2024-04-05",
      end: "2024-04-18",
      type: "Monitoring",
      vpi10: "Yes",
      downstream: 1500,
      male: 700,
      female: 800,
      total: 1500,
    },
    {
      id: "r5",
      section: "IT",
      volcano: "Merapi",
      country: "IDN",
      start: "2024-05-02",
      end: "2024-05-12",
      type: "Deployment",
      vpi10: "No",
      downstream: 1100,
      male: 550,
      female: 550,
      total: 1100,
    },
  ];
  
export function MEDataEntry() {
    const [value, setValue] = useState("");
    // const [rows, setRows] = useState([]);
    const [selection, setSelection] = useState([]);
    const rows = items.map((item) => (
        <Table.Row
            key={item.id}
            data-selected={selection.includes(item.id) ? "" : undefined }
        >
            <Table.Cell>
                <Checkbox.Root
                    size="sm"
                    mt="0.5"
                    aria-label="Select row"
                    checked={selection.includes(item.id)}
                    onCheckedChange={(changes) => {
                        setSelection((prev) => 
                            changes.checked
                            ? [...prev, item.id]
                            : prev.filter((id) => id !== item.id ),
                        );
                    }}
                >
                    <Checkbox.HiddenInput />
                    <Checkbox.Control>
                        <Checkbox.Indicator />
                    </Checkbox.Control>
                </Checkbox.Root>
            </Table.Cell>
            <Table.Cell>{item.section}</Table.Cell>
            <Table.Cell>{item.volcano}</Table.Cell>
            <Table.Cell>{item.country}</Table.Cell>
            <Table.Cell>{item.start}</Table.Cell>
            <Table.Cell>{item.end}</Table.Cell>
            <Table.Cell>{item.type}</Table.Cell>
            <Table.Cell>{item.vpi10}</Table.Cell>
            <Table.Cell isNumeric>{item.downstream}</Table.Cell>
            <Table.Cell isNumeric>{item.male}</Table.Cell>
            <Table.Cell isNumeric>{item.female}</Table.Cell>
            <Table.Cell isNumeric>{item.total}</Table.Cell>
        </Table.Row>
    ))

    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 /> {/* 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> */}
                </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>
    );
}