Add dropdown menus to M&E Data Entry view

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;
     

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 (
+        <Select.Root collection={collection} size={size} width={width}>
+            <Select.HiddenSelect />
+            <Select.Control>
+                <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>
+    );
+}

client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx

@@ -1,22 +1,53 @@
-import { Box, Text } from "@chakra-ui/react";
+import { HStack, 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() {
     return(
-        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+        <HStack spacing={4} m={4}>
-            <Box
+            <DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
-                bg="bg" 
+            <DropDownMenu collection={years} placeholder="Year" width="130px" />
-                shadow="md" 
+            <DropDownMenu collection={sections} placeholder="Section" width="130px" />
-                borderRadius="md"
+        </HStack>
-                p={8}
-                width="600px"
-                height="100px"
-                textAlign="center"
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-            >
-                <Text fontsize="2xl" fontWeight="bold" color="gray.700">M&E Data Entry dashboard coming soon.</Text>
-            </Box>
-        </Box>
     );
 }
+
+
+
+
+