diff --git a/client/src/components/Canvas/Canvas.jsx b/client/src/components/Canvas/Canvas.jsx
index 8594742..a254f7b 100644
--- a/client/src/components/Canvas/Canvas.jsx
+++ b/client/src/components/Canvas/Canvas.jsx
@@ -9,8 +9,6 @@ import { chakra } from "@chakra-ui/react";
import Personal from "./views/Personal";
import Security from "./views/Security";
-const ADMIN_DEFAULT = "medataentry";
-
export default function Canvas(props) {
const { view } = props;
diff --git a/client/src/components/Canvas/CanvasComponents/DropDownMenu.jsx b/client/src/components/Canvas/CanvasComponents/DropDownMenu.jsx
new file mode 100644
index 0000000..811fdbb
--- /dev/null
+++ b/client/src/components/Canvas/CanvasComponents/DropDownMenu.jsx
@@ -0,0 +1,30 @@
+import { Portal, Select } from '@chakra-ui/react';
+
+export default function DropDownMenu({ collection, placeholder = "Select...", size = "sm", width = "200px" }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {collection.items.map((item) => (
+
+ {item.label}
+
+
+ ))}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/components/Canvas/views/Admin.jsx b/client/src/components/Canvas/views/Admin.jsx
index 6b27590..b332fc6 100644
--- a/client/src/components/Canvas/views/Admin.jsx
+++ b/client/src/components/Canvas/views/Admin.jsx
@@ -51,8 +51,8 @@ export default function Admin({ view, onChangeView, onEditWidgets, appendWidget
-
-
+
+
diff --git a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
index 98822e6..18ed766 100644
--- a/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
+++ b/client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
@@ -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() {
+ 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) => (
+
+
+ {
+ setSelection((prev) =>
+ changes.checked
+ ? [...prev, item.id]
+ : prev.filter((id) => id !== item.id ),
+ );
+ }}
+ >
+
+
+
+
+
+
+ {item.section}
+ {item.volcano}
+ {item.country}
+ {item.start}
+ {item.end}
+ {item.type}
+ {item.vpi10}
+ {item.downstream}
+ {item.male}
+ {item.female}
+ {item.total}
+
+ ))
+
return(
-
-
- M&E Data Entry dashboard coming soon.
+
+
+
+
+
+
+
+ Use Volcano names as found in GVP and dashboard. (e.g. Nevado del Ruiz, Chiles-Cerro Negro).
+
+
+ Edit entry.
+ Delete entry.
+ Copy entry to form. Then hitting 'Save' will create a new entry.
+
+
+
+
+
+ Number of people benefitting from VDAP activities, disaggregate by sex
+
+
+
+
+
+
+ {/* padding for checkboxes */}
+ Section
+ Volcano
+ Country
+ Start Date of Assistance
+ End Date of Assistance
+ Assistance Type
+ VPI10
+ Downstream Population
+ Male
+ Female
+ Total
+
+
+
+
+ {rows}
+
+
+
+
+ {/* Row actions aligned right */}
+
+
+
+
+
+
+
+
+ {/* Form Section */}
+
+
+ Fill in Form
+
+
+
+
+
+ Country:
+
+
+
+
+ Start Date of Assistance:
+
+
+
+
+ VPI10 (LandScan 2014):
+
+
+
+
+
+
+ Volcano:
+
+
+
+
+ End Date of Assistance:
+
+
+
+
+ Downstream Affected Population:
+
+
+
+
+
+
+ Male Population:
+
+
+
+
+ Female Population:
+
+
+
+
+ Total Population:
+
+
+
+
+
+ Assistance Type:
+
+
+
+
+
+
+
+
+
+
+
);
-}
\ No newline at end of file
+}
+
+
+
+
+