From 4d59b7a133340e9c2cb17a82d0ce87df4e9f82fa Mon Sep 17 00:00:00 2001
From: Ella Hagen <elhagen@calpoly.edu>
Date: Tue, 4 Mar 2025 17:05:04 -0800
Subject: [PATCH] Fixes: Some updates

---
 src/app/adminDashboard/page.tsx     | 267 +++++++++-------------------
 src/app/layout.tsx                  |   5 +-
 src/app/map/page.tsx                |  37 +---
 src/app/userProfile/page.tsx        |  22 ---
 src/app/volunteerDashboard/page.tsx |  14 +-
 src/components/Map.tsx              |   4 +-
 src/components/ProfileCard.tsx      |   4 +-
 7 files changed, 104 insertions(+), 249 deletions(-)

diff --git a/src/app/adminDashboard/page.tsx b/src/app/adminDashboard/page.tsx
index a6dad7b..7ddf2f4 100644
--- a/src/app/adminDashboard/page.tsx
+++ b/src/app/adminDashboard/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { ArrowUpRight, NotebookPen, SquarePen } from "lucide-react";
 import {
   Grid,
@@ -16,45 +17,34 @@ import {
   Thead,
   Tr,
 } from "@chakra-ui/react";
+import Map from "@/components/Map";
+import { useUser } from "@clerk/nextjs";
 
 function AdminDashboard() {
+  const user = useUser();
   return (
-    <Box position="absolute" width="100vw" height="100vh" transform="translateX(-15rem)" bg="#F4F1E8">
+    <Box width="100%" height="100%" p={{ base: "20px", md: "0 50px 50px 50px" }} pt="0px">
       <Grid
-        minWidth="1024px"
         width="100%"
-        templateRows="repeat(7, 1fr)"
-        templateColumns="repeat(8, 1fr)"
-        gap={5}
-        overflow="scroll"
+        height="100%"
+        templateRows={{ base: "auto auto auto auto", md: "repeat(10, 1fr)" }}
+        templateColumns={{ base: "1fr", md: "repeat(8, 1fr)" }}
+        gap={4}
       >
-        <GridItem
-          colSpan={8}
-          rowSpan={2}
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          position="relative"
-        >
-          <Text ml={-425} fontSize="3xl" fontWeight="bold" color="#596334" mt="auto">
-            Welcome back, Jane!
+        {/* Welcome Message */}
+        <GridItem colSpan={{ base: 1, md: 8 }} rowSpan={1} display="flex" alignItems="center">
+          <Text fontSize="3xl" fontWeight="bold" color="#596334">
+            Welcome back, {user.user?.firstName}!
           </Text>
         </GridItem>
-        <GridItem rowSpan={4} colSpan={4}>
-          <Box
-            borderRadius={"20px"}
-            borderColor="black"
-            bg="white"
-            w="350px"
-            h="270px"
-            alignItems="center"
-            p={10}
-            ml="auto"
-          >
+
+        {/* Trees Logged This Year */}
+        <GridItem rowSpan={{ base: 1, md: 3 }} colSpan={{ base: 1, md: 3 }}>
+          <Box borderRadius="20px" borderColor="black" bg="white" height="100%" p={{ base: 5, md: 10 }}>
             <HStack>
               <Text color="#333333">Trees Logged This Year</Text>
               <Link href="" ml="auto">
-                <ArrowUpRight></ArrowUpRight>
+                <ArrowUpRight />
               </Link>
             </HStack>
             <Text mt={5} mb={5} fontWeight="bold" color="#596334" fontSize="7xl">
@@ -63,192 +53,101 @@ function AdminDashboard() {
             <Text color="#333333">% incr from December</Text>
           </Box>
         </GridItem>
-        <GridItem rowSpan={6} colSpan={4}>
-          <Box
-            mr="auto"
-            borderRadius={"20px"}
-            alignItems="center"
-            borderColor="black"
-            bg="white"
-            w="600px"
-            h="355px"
-            p={10}
-          >
+
+        {/* Trees in Poor Condition */}
+        <GridItem rowSpan={{ base: 2, md: 4 }} colSpan={{ base: 1, md: 5 }}>
+          <Box borderRadius="20px" borderColor="black" bg="white" height="100%" p={{ base: 5, md: 10 }}>
             <HStack>
               <Text color="#333333">Trees in Poor Condition</Text>
               <Link href="" ml="auto">
-                <ArrowUpRight></ArrowUpRight>
+                <ArrowUpRight />
               </Link>
             </HStack>
-            <Box borderRadius="20px" overflow="hidden" border="1px solid" borderColor={"#596334"} mt={10}>
+            <Box borderRadius="20px" overflow="hidden" border="1px solid" borderColor="#596334" mt={10}>
               <Table size="sm" variant="simple">
                 <Thead bg="#DFED98">
-                  <Tr>
-                    <Th width={"20%"}>#</Th>
-                    <Th width={"20%"}>Species</Th>
-                    <Th width={"20%"}>Condition</Th>
-                    <Th width={"20%"}>Date Recorded</Th>
-                    <Th width={"20%"}>Volunteer</Th>
+                  <Tr h="40px">
+                    <Th width="20%">#</Th>
+                    <Th width="20%">Species</Th>
+                    <Th width="20%">Condition</Th>
+                    <Th width="20%">Date Recorded</Th>
+                    <Th width="20%">Volunteer</Th>
                   </Tr>
                 </Thead>
                 <Tbody>
-                  <Tr>
-                    <Td>1</Td>
-                    <Td>
-                      <Box
-                        color="#4A7B90"
-                        bg="#CFEFF9"
-                        height={10}
-                        width={10}
-                        display="flex"
-                        pt={3}
-                        justifyContent="center"
-                        borderRadius={11}
-                      >
-                        VO
-                      </Box>
-                    </Td>
-                    <Td>
-                      <Box
-                        color="white"
-                        bg="#596334"
-                        height={10}
-                        width={10}
-                        display="flex"
-                        pt={3}
-                        justifyContent="center"
-                        borderRadius={11}
-                      >
-                        10
-                      </Box>
-                    </Td>
-                    <Td>12/24/2024</Td>
-                    <Td>
-                      <NotebookPen></NotebookPen>
-                    </Td>
-                  </Tr>
-                  <Tr>
-                    <Td>1</Td>
-                    <Td>
-                      <Box
-                        color="#4A7B90"
-                        bg="#CFEFF9"
-                        height={10}
-                        width={10}
-                        display="flex"
-                        pt={3}
-                        justifyContent="center"
-                        borderRadius={11}
-                      >
-                        VO
-                      </Box>
-                    </Td>
-                    <Td>
-                      <Box
-                        color="white"
-                        bg="#596334"
-                        height={10}
-                        width={10}
-                        display="flex"
-                        pt={3}
-                        justifyContent="center"
-                        borderRadius={11}
-                      >
-                        8
-                      </Box>
-                    </Td>
-                    <Td>1/3/2025</Td>
-                    <Td>
-                      <NotebookPen></NotebookPen>
-                    </Td>
-                  </Tr>
-                  <Tr>
-                    <Td>1</Td>
-                    <Td>
-                      <Box
-                        color="#4A7B90"
-                        bg="#CFEFF9"
-                        height={10}
-                        width={10}
-                        display="flex"
-                        pt={3}
-                        justifyContent="center"
-                        borderRadius={11}
-                      >
-                        VO
-                      </Box>
-                    </Td>
-                    <Td>
-                      <Box
-                        color="white"
-                        bg="#596334"
-                        height={10}
-                        width={10}
-                        display="flex"
-                        pt={3}
-                        justifyContent="center"
-                        borderRadius={11}
-                      >
-                        9
-                      </Box>
-                    </Td>
-                    <Td>2/6/2025</Td>
-                    <Td>
-                      <NotebookPen></NotebookPen>
-                    </Td>
-                  </Tr>
+                  {[1, 2, 3].map((item) => (
+                    <Tr key={item}>
+                      <Td>{item}</Td>
+                      <Td>
+                        <Box
+                          color="#4A7B90"
+                          bg="#CFEFF9"
+                          height={10}
+                          width={10}
+                          display="flex"
+                          pt={3}
+                          justifyContent="center"
+                          borderRadius={11}
+                        >
+                          VO
+                        </Box>
+                      </Td>
+                      <Td>
+                        <Box
+                          color="white"
+                          bg="#596334"
+                          height={10}
+                          width={10}
+                          display="flex"
+                          pt={3}
+                          justifyContent="center"
+                          borderRadius={11}
+                        >
+                          {item === 1 ? 10 : item === 2 ? 8 : 9}
+                        </Box>
+                      </Td>
+                      <Td>{item === 1 ? "12/24/2024" : item === 2 ? "1/3/2025" : "2/6/2025"}</Td>
+                      <Td>
+                        <NotebookPen />
+                      </Td>
+                    </Tr>
+                  ))}
                 </Tbody>
               </Table>
             </Box>
           </Box>
         </GridItem>
-        <GridItem rowSpan={2} colSpan={4}>
+
+        {/* Create New Announcement Button */}
+        <GridItem rowSpan={1} colSpan={{ base: 1, md: 3 }}>
           <Box
-            width={"350px"}
             display="flex"
-            justifyContent={"center"}
+            justifyContent="center"
             alignItems="center"
-            borderRadius={"20px"}
+            borderRadius="20px"
             borderColor="black"
             bg="white"
-            p={9}
-            pl={-2}
-            pr={-2}
-            ml="auto"
-            mt="auto"
-            height={"40px"}
+            height="100%"
           >
             <Button
-              width={"300px"}
-              height={"50px"}
+              width="100%"
+              maxWidth="300px"
+              height="50px"
               color="white"
               bg="#E57300"
-              borderRadius={"50px"}
+              borderRadius="50px"
               fontWeight="bold"
               fontSize="sm"
             >
-              Create new announcement&nbsp;<SquarePen></SquarePen>
+              Create new announcement&nbsp;
+              <SquarePen />
             </Button>
           </Box>
         </GridItem>
-        <GridItem
-          rowSpan={6}
-          colSpan={8}
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          position="relative"
-        >
-          <Image
-            mb={70}
-            mr={-250}
-            src="/map.png"
-            fit="cover"
-            alt="Map not Appearing"
-            height="200px"
-            width="975px"
-            borderRadius="20px"
-          ></Image>
+
+        {/* Map */}
+        <GridItem rowSpan={{ base: 2, md: 5 }} colSpan={{ base: 1, md: 8 }}>
+          <Map />
         </GridItem>
       </Grid>
     </Box>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e0124df..43af428 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -22,7 +22,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 style={{
                   backgroundColor: "#F4F1E8",
                   flexGrow: 1,
-                  marginLeft: pathName !== "/login" && pathName !== "/signup" ? "15rem" : "0",
+                  paddingLeft: pathName !== "/login" && pathName !== "/signup" ? "15rem" : "0",
+                  width: "100%",
+                  height: "100%",
+                  minHeight: "100vh",
                 }}
               >
                 <ProfileCard />
diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
index b7735be..c876c37 100644
--- a/src/app/map/page.tsx
+++ b/src/app/map/page.tsx
@@ -3,43 +3,16 @@ import { useRef, useEffect } from "react";
 import { Tree, treeData } from "./tree_data";
 import styles from "@/styles/map.module.css";
 import dynamic from "next/dynamic";
+import MapComponent from "@/components/Map";
+import { Box } from "@chakra-ui/react";
 //import leaflet in client
 const L = dynamic(() => import("leaflet") as any, {
   ssr: false,
 });
 export default function Map() {
-  const mapRef = useRef(null);
-  useEffect(() => {
-    require("leaflet/dist/leaflet.css");
-    const L = require("leaflet");
-    const DefaultIcon = L.icon({
-      iconUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png",
-      shadowUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png",
-    });
-    L.Marker.prototype.options.icon = DefaultIcon;
-    //initilize the map
-    if (!mapRef.current) {
-      mapRef.current = L.map("map").setView([35.270378, -120.680656], 14.5);
-      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(mapRef.current);
-      //add marker to map
-      treeData.map((tree: Tree) => {
-        const marker = L.marker([tree.gpsCoords[0], tree.gpsCoords[1]]).addTo(mapRef.current);
-        marker.bindPopup(`
-          <strong>${tree.species}</strong><br/>
-          Collected by: ${tree.collectorName}<br/>
-          Date Collected: ${tree.dateCollected.toISOString().split("T")[0]}<br/>
-          Notes: ${tree.notes || "No additional notes"}
-        `);
-      });
-    }
-  }, []);
-
   return (
-    <div>
-      <div className={styles.MapContainer}>
-        Map with 5 points
-        <div id="map" style={{ height: "50vh", width: "75%" }}></div>
-      </div>
-    </div>
+    <Box width="100%" height="90vh" p={{ base: "20px", md: "50px" }}>
+      <MapComponent />
+    </Box>
   );
 }
diff --git a/src/app/userProfile/page.tsx b/src/app/userProfile/page.tsx
index f2b4d95..4f38dd7 100644
--- a/src/app/userProfile/page.tsx
+++ b/src/app/userProfile/page.tsx
@@ -25,28 +25,6 @@ function UserProfile() {
   return (
     <div style={{ backgroundColor: "#F4F1E8", height: "100%", width: "100%", overflowY: "auto" }}>
       <Box maxH="90vh">
-        <Flex direction="row" justify="right">
-          <Box mt={5} mr={5} borderRadius={"15px"} borderColor="black" bg="white" w="250px" h="100px" p={5}>
-            <Image
-              mt={1}
-              boxSize="50px"
-              borderRadius="full"
-              fit="cover"
-              alt="Small Profile Picture Not Appearing"
-              src="/pfp.png"
-              ml={1}
-            ></Image>
-            <Flex direction="row">
-              <Flex mt={-49} ml={20} direction="column">
-                <Text>User Name</Text>
-                <Text color="#868686">Volunteer</Text>
-              </Flex>
-              <Box ml={5} mt={-9}>
-                <ChevronDown></ChevronDown>
-              </Box>
-            </Flex>
-          </Box>
-        </Flex>
         <Center>
           <Flex direction="row">
             <Flex ml={10} mt={25} direction="column">
diff --git a/src/app/volunteerDashboard/page.tsx b/src/app/volunteerDashboard/page.tsx
index 3e5767e..a3ca251 100644
--- a/src/app/volunteerDashboard/page.tsx
+++ b/src/app/volunteerDashboard/page.tsx
@@ -3,9 +3,11 @@ import { Box, Grid, GridItem, Text, Button, HStack, VStack, Link, IconButton, Fl
 import { Plus, ArrowUpRight, EllipsisVertical } from "lucide-react";
 import Map from "@/components/Map";
 import { useRouter } from "next/navigation";
+import { useUser } from "@clerk/nextjs";
 
 export default function VolunteerDashboard() {
   const router = useRouter();
+  const user = useUser();
 
   return (
     <Box
@@ -19,7 +21,7 @@ export default function VolunteerDashboard() {
       justifyContent="center"
       alignItems="center"
     >
-      <Box ml="15rem" width="100%" height="100vh" p={{ base: "20px", md: "50px" }} overflow="scroll">
+      <Box ml="15rem" width="100%" height="100%" p={{ base: "20px", md: "50px" }} overflow="scroll">
         <Grid
           h="100%"
           w="100%"
@@ -30,7 +32,7 @@ export default function VolunteerDashboard() {
           {/* Hello Message */}
           <GridItem rowSpan={1} colSpan={{ base: 1, md: 7 }}>
             <Text fontSize="3xl" color="#596334" fontWeight="bold">
-              Hello Jane 👋
+              Hello {user.user?.firstName} 👋
             </Text>
             <Text fontSize="16px" color="#333" fontWeight={"400"}>
               Thank you so much for your effort, let&#39;s do this!
@@ -57,7 +59,7 @@ export default function VolunteerDashboard() {
                     Add Tree
                   </Text>
                 </Button>
-                <Link href="" position="absolute" top="0px" right="0px">
+                <Link href="/treeTable" position="absolute" top="0px" right="0px">
                   <ArrowUpRight color="#333333" />
                 </Link>
               </HStack>
@@ -117,14 +119,14 @@ export default function VolunteerDashboard() {
 
           {/* Map */}
           <GridItem
-            rowSpan={{ base: 2, md: 7 }} // Adjusted rowSpan for small screens
+            rowSpan={{ base: 2, md: 7 }}
             colSpan={{ base: 1, md: 4 }}
             bg="white"
             borderRadius="16px"
             display="flex"
             justifyContent="center"
             alignItems="center"
-            minHeight="300px" // Ensure the map has a minimum height
+            minHeight="300px"
           >
             <Map />
           </GridItem>
@@ -136,7 +138,7 @@ export default function VolunteerDashboard() {
                 <Text color="#F4F1E8" fontSize="24px" fontWeight="600">
                   Announcements
                 </Text>
-                <Link href="" position="absolute" top="0px" right="0px">
+                <Link href="/messages" position="absolute" top="0px" right="0px">
                   <ArrowUpRight color="#F4F1E8" />
                 </Link>
               </HStack>
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index 711791a..94fb8f8 100644
--- a/src/components/Map.tsx
+++ b/src/components/Map.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useRef, useEffect } from "react";
+import { useRef, useLayoutEffect } from "react";
 import { Tree, treeData } from "./map_data";
 import { Plus, Minus } from "lucide-react";
 import dynamic from "next/dynamic";
@@ -9,7 +9,7 @@ const L = dynamic(() => import("leaflet") as any, {
 });
 export default function Map() {
   const mapRef = useRef(null);
-  useEffect(() => {
+  useLayoutEffect(() => {
     require("leaflet/dist/leaflet.css");
     const L = require("leaflet");
     const DefaultIcon = L.icon({
diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index 536271a..5bdb049 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -13,9 +13,9 @@ export default function ProfileCard() {
 
   return (
     <SignedIn>
-      <Flex justify="flex-end" gap="4" bg="#F4F1E8">
+      <Flex justify="flex-end" gap="4" h="100px" w="100vw" transform={"translate(-15rem)"}>
         {/* <div className={styles.profileCardBox} onClick={() => router.push("/userProfile")}> */}
-        <Box rounded="10" padding="20px" m="20px" bg="white">
+        <Box rounded="10" padding="20px" mt="20px" mr="20px" bg="white" onClick={() => router.push("/userProfile")}>
           <Flex align="center" gap={5}>
             <UserButton></UserButton>
             {/* TODO: Once funcionality is working for profile card drop down then remove user button