Refactor made changes to file structures

2026-06-10 14:00:37 -07:00
parent 305ee4e757
commit baaf162df9
46 changed files with 42 additions and 177 deletions
@@ -0,0 +1,66 @@
+import { Flex, Tabs, HStack } from '@chakra-ui/react';
+import { MEDataEntry } from './tabs/MEDataEntry.jsx';
+import { ProjectCollector } from './tabs/ProjectCollector.jsx';
+import { NASApplication } from './tabs/NASApplication.jsx';
+import { IVANS } from './tabs/IVANS.jsx'
+import { SearchBar } from "../../components/dashboard/SearchBar.jsx";
+import { SettingsButton } from "../../components/dashboard/SettingsButton.jsx";
+import { CanvasHeaderTabs } from '../../components/dashboard/CanvasHeaderTabs.jsx';
+import { ADMIN_TABS } from '@/constants/viewKeys.js';
+
+// TODO - refactor this. Currently Admin doesn't use onEditWidgets or appendWidget
+export default function Admin({ view, onChangeView, onEditWidgets, appendWidget }) {
+  const settingsButtonProps = { onEditWidgets, appendWidget };
+  
+  return (
+    /* HEADER */
+    <Tabs.Root 
+      width="100%"
+      height="100%"
+      lazyMount 
+      value={ view }
+      variant="line"
+      // Prevent navigation away from 'My Dashboard' while in Edit mode
+      onValueChange={(e) => {
+        const nextView = e.value;
+        onChangeView(nextView); 
+      }}
+    >
+      <Flex 
+        as="header"
+        position="sticky"
+        top="0"
+        zIndex="dropdown" // zIndex: 1100
+        bg="base200"
+        pl={5}
+        pr={2}
+        pt={3}
+        pb={2}
+        align="center"
+        justify="space-between"
+        width="100%"
+      >
+        {/* HEADER */}
+        <CanvasHeaderTabs tabs={ADMIN_TABS} />
+        <HStack width="258px" justifyContent="flex-end">
+            <SearchBar />
+            <SettingsButton />
+        </HStack>
+      </Flex>
+
+      {/* CANVAS */}
+      <Tabs.Content value="medataentry">
+          <MEDataEntry />
+        </Tabs.Content>
+        <Tabs.Content value="projectcollector">
+          <ProjectCollector />
+        </Tabs.Content>
+        <Tabs.Content value="nasapplication">
+          <NASApplication />
+        </Tabs.Content>
+        <Tabs.Content value="ivans">
+          <IVANS />
+        </Tabs.Content>
+    </Tabs.Root>
+  );
+}  
@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function IVANS() {
+    return(
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">IVANS dashboard coming soon.</Text>
+            </Box>
+        </Box>
+    );
+}
@@ -0,0 +1,331 @@
+import { useState } from 'react';
+import { Box, Button, ButtonGroup, Text, Input, List, Field, Stack, SimpleGrid, HStack, Table, Checkbox, createListCollection } from "@chakra-ui/react"
+import DropDownMenu from "../../../components/dashboard/DropDownMenu.jsx"
+import { useForm } from 'react-hook-form';
+
+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,
+    },
+    {
+        id: "r6",
+        section: "Gas",
+        volcano: "Ranier",
+        country: "US",
+        start: "2024-07-02",
+        end: "2027-05-12",
+        type: "Deployment",
+        vpi10: "Yes",
+        downstream: 1200,
+        male: 570,
+        female: 570,
+        total: 1400,
+      },
+  ];
+ 
+export function MEDataEntry() {
+    const [value, setValue] = useState("");
+    const [selection, setSelection] = useState([]);
+    
+    const { 
+        register, 
+        handleSubmit,
+        reset,
+        watch,
+        formState: { errors },
+    } = useForm();
+    
+    const onSubmit = (data) => {
+        console.log("Form submitted:", data);
+    }
+
+    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>   
+           <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="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="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>
+            </List.Root>
+            
+            <Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500">
+                <Box m={4} border="1px solid">
+                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400">
+                        Number of people benefitting from VDAP activities, disaggregate by sex
+                    </Box>
+                    
+                    {/* <Box overflowX="auto">  */}
+                        <Table.ScrollArea height="240px">
+                            <Table.Root variant="outline" overflow="initial" size="sm" stickyHeader interactive>
+                                <Table.Header>
+                                    <Table.Row bg="bg.subtle">
+                                        <Table.ColumnHeader w="40px"/> 
+                                        <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.ScrollArea>
+                    {/* </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" size="sm">  
+                        <Button >EDIT</Button>
+                        <Button>COPY</Button>
+                        <Button variant="solid" colorPalette="red">DELETE</Button>
+                    </ButtonGroup>
+                </HStack>
+                
+                {/* Form Section */}
+                <Box 
+                    as="form"
+                    onSubmit={handleSubmit(onSubmit)}
+                    m={4} 
+                    border="1px solid"
+                >
+                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400" overflow="hidden">
+                        Fill in Form
+                    </Box>
+
+                    <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>
+                                <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", { valueAsDate: true })} 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>Volcano:</Field.Label>
+                                <Input {...register("volcano")} placeholder="St Helens" />
+                            </Field.Root>
+                
+                            <Field.Root orientation="horizontal" flex="1" minW="260px">
+                                <Field.Label>End Date of Assistance:</Field.Label>
+                                <Input {...register("enddate", { valueAsDate: true })} placeholder="7/14/2054" />
+                            </Field.Root>
+                
+                            <Field.Root orientation="horizontal" flex="1">
+                                <Field.Label>Downstream Affected Population:</Field.Label>
+                                <Input {...register("downstream", { valueAsNumber: true })} 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>Male Population:</Field.Label>
+                                <Input {...register("male", { valueAsNumber: true })} placeholder="1776" />
+                            </Field.Root>
+                
+                            <Field.Root orientation="horizontal" flex="1" minW="260px">
+                                <Field.Label>Female Population:</Field.Label>
+                                <Input {...register("female", { valueAsNumber: true })} placeholder="1892" />
+                            </Field.Root>
+                
+                            <Field.Root orientation="horizontal" flex="1">
+                                <Field.Label>Total Population:</Field.Label>
+                                <Input {...register("total", { valueAsNumber: true })} placeholder="3668" />
+                            </Field.Root>
+                        </HStack> 
+
+                        <Field.Root orientation="horizontal" flex="1" pt={2}> 
+                            <Field.Label>Assistance Type:</Field.Label>
+                            <Input {...register("assistance")} placeholder="Monetary" flex="1" />
+                        </Field.Root>
+
+                        <HStack alignSelf="flex-start" pt={2}>
+                            <ButtonGroup variant="surface" size="sm">
+                                <Button type="submit" variant="solid" colorPalette="green" >
+                                    Add
+                                </Button>
+                                <Button onClick={() => reset()}>
+                                    Reset
+                                </Button>
+                            </ButtonGroup>
+                        </HStack>
+                    </Stack>
+                </Box>
+            </Box>
+        </Box>
+    );
+}
+
+
+
+
+
@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function NASApplication() {
+    return(
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">NAS Application dashboard coming soon.</Text>
+            </Box>
+        </Box>
+    );
+}
@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function ProjectCollector() {
+    return(
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">Project Collector dashboard coming soon.</Text>
+            </Box>
+        </Box>
+    );
+}