Merge branch 'feature/admin-view2' into 'main'
Feature/admin view2 See merge request vkuchenik/website-framework!70
This commit is contained in:
Dan Hansen
@@ -9,8 +9,6 @@ import { chakra } from "@chakra-ui/react";
|
|||||||
import Personal from "./views/Personal";
|
import Personal from "./views/Personal";
|
||||||
import Security from "./views/Security";
|
import Security from "./views/Security";
|
||||||
|
|
||||||
const ADMIN_DEFAULT = "medataentry";
|
|
||||||
|
|
||||||
export default function Canvas(props) {
|
export default function Canvas(props) {
|
||||||
const { view } = props;
|
const { view } = props;
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import { Portal, Select } from '@chakra-ui/react';
|
||||||
|
|
||||||
|
export default function DropDownMenu({ collection, placeholder = "Select...", size = "sm", width = "200px" }) {
|
||||||
|
return (
|
||||||
|
<Select.Root collection={collection} size={size} width={width}>
|
||||||
|
<Select.HiddenSelect />
|
||||||
|
<Select.Control bg="gray.100" _hover={{ bg: "gray.200" }}>
|
||||||
|
<Select.Trigger>
|
||||||
|
<Select.ValueText placeholder={placeholder} />
|
||||||
|
</Select.Trigger>
|
||||||
|
<Select.IndicatorGroup>
|
||||||
|
<Select.ClearTrigger />
|
||||||
|
<Select.Indicator />
|
||||||
|
</Select.IndicatorGroup>
|
||||||
|
</Select.Control>
|
||||||
|
<Portal>
|
||||||
|
<Select.Positioner>
|
||||||
|
<Select.Content>
|
||||||
|
{collection.items.map((item) => (
|
||||||
|
<Select.Item key={item.value} item={item}>
|
||||||
|
{item.label}
|
||||||
|
<Select.ItemIndicator />
|
||||||
|
</Select.Item>
|
||||||
|
))}
|
||||||
|
</Select.Content>
|
||||||
|
</Select.Positioner>
|
||||||
|
</Portal>
|
||||||
|
</Select.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -51,8 +51,8 @@ export default function Admin({ view, onChangeView, onEditWidgets, appendWidget
|
|||||||
</Tabs.List>
|
</Tabs.List>
|
||||||
|
|
||||||
<HStack width="258px" justifyContent="flex-end">
|
<HStack width="258px" justifyContent="flex-end">
|
||||||
<SearchBar />
|
<SearchBar />
|
||||||
<SettingsButton {...settingsButtonProps}/>
|
<SettingsButton {...settingsButtonProps}/>
|
||||||
</HStack>
|
</HStack>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|
||||||
|
|||||||
@@ -1,22 +1,308 @@
|
|||||||
import { Box, Text } from "@chakra-ui/react";
|
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 "../../CanvasComponents/DropDownMenu"
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export function MEDataEntry() {
|
export function MEDataEntry() {
|
||||||
|
const [value, setValue] = useState("");
|
||||||
|
const [selection, setSelection] = useState([]);
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
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(
|
return(
|
||||||
<Box p={8} mt={4} ml="auto" mr="auto" width="600px">
|
<Box>
|
||||||
<Box
|
<HStack spacing={6} m={2}>
|
||||||
bg="bg"
|
<DropDownMenu collection={years} placeholder="Year" width="130px" />
|
||||||
shadow="md"
|
<DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
|
||||||
borderRadius="md"
|
<DropDownMenu collection={sections} placeholder="Section" width="130px" />
|
||||||
p={8}
|
</HStack>
|
||||||
width="600px"
|
<Text fontSize="xs" pl={2} pt={2}>
|
||||||
height="100px"
|
Use Volcano names as found in GVP and dashboard. (e.g. Nevado del Ruiz, Chiles-Cerro Negro).
|
||||||
textAlign="center"
|
</Text>
|
||||||
display="flex"
|
<List.Root as="ul" styleType="circle" fontSize="xs" pl={6}>
|
||||||
alignItems="center"
|
<List.Item>Edit entry.</List.Item>
|
||||||
justifyContent="center"
|
<List.Item>Delete entry.</List.Item>
|
||||||
>
|
<List.Item>Copy entry to form. Then hitting 'Save' will create a new entry.</List.Item>
|
||||||
<Text fontsize="2xl" fontWeight="bold" color="gray.700">M&E Data Entry dashboard coming soon.</Text>
|
</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.300" overflow="hidden">
|
||||||
|
Number of people benefitting from VDAP activities, disaggregate by sex
|
||||||
|
</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.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" size="sm">
|
||||||
|
<Button >EDIT</Button>
|
||||||
|
<Button>COPY</Button>
|
||||||
|
<Button variant="solid" colorPalette="red">DELETE</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
</HStack>
|
||||||
|
|
||||||
|
{/* Form Section */}
|
||||||
|
<Box m={4} border="1px solid">
|
||||||
|
<Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.300" 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")} 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")} placeholder="7/14/2054" />
|
||||||
|
</Field.Root>
|
||||||
|
|
||||||
|
<Field.Root orientation="horizontal" flex="1">
|
||||||
|
<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>Male Population:</Field.Label>
|
||||||
|
<Input {...register("male")} placeholder="1776" />
|
||||||
|
</Field.Root>
|
||||||
|
|
||||||
|
<Field.Root orientation="horizontal" flex="1" minW="260px">
|
||||||
|
<Field.Label>Female Population:</Field.Label>
|
||||||
|
<Input {...register("female")} placeholder="1892" />
|
||||||
|
</Field.Root>
|
||||||
|
|
||||||
|
<Field.Root orientation="horizontal" flex="1">
|
||||||
|
<Field.Label>Total Population:</Field.Label>
|
||||||
|
<Input {...register("total")} 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 type="submit">
|
||||||
|
Reset
|
||||||
|
</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
</HStack>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user