feat: implemented volunteer information page

app/volunteer-info/ViewVolunteers.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+interface Volunteer {
+    name: string;
+    email: string;
+    studentNumber: number;
+    hours: number;
+}
+
+interface VolunteerRowProps {
+    item: Volunteer;
+}
+
+interface ViewVolunteersProps {
+    data: Volunteer[];
+}
+
+const VolunteerRow: React.FC<VolunteerRowProps> = ({ item }) => {
+    return (
+        <React.Fragment>
+            <div className="p-3 border-r border-b grid items-center">{item.name}</div>
+            <div className="p-3 border-r border-b grid items-center">{item.email}</div>
+            <div className="p-3 border-r border-b grid items-center">{item.studentNumber}</div>
+            <div className="p-3 border-b grid items-center">{item.hours}</div>
+        </React.Fragment>
+    );
+};
+
+const ViewVolunteers: React.FC<ViewVolunteersProps> = ({ data }) => {
+    return (
+        <div className="max-h-[65vh] grid grid-cols-4 border bg-white rounded-lg overflow-scroll text-base">
+            <div className="bg-[#FFC1BE] p-3 font-bold border-r sticky top-0 grid items-center">Name</div>
+            <div className="bg-[#FFC1BE] p-3 font-bold border-r sticky top-0 grid items-center">Email</div>
+            <div className="bg-[#FFC1BE] p-3 font-bold border-r sticky top-0 grid items-center">Student Number</div>
+            <div className="bg-[#FFC1BE] rounded-tr-lg p-3 font-bold sticky top-0 grid items-center">Hours</div>
+
+            {data.map((item, index) => (
+                <VolunteerRow key={index} item={item} />
+            ))}
+        </div>
+    );
+};
+
+export default ViewVolunteers;

app/volunteer-info/layout.tsx

@@ -0,0 +1,35 @@
+import Image from "next/image";
+
+export default function VolunteerInfoLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="bg-[#E7FFF9] flex flex-row items-center justify-center h-screen w-screen">
+
+            <div className="p-5 h-screen w-screen flex flex-col">
+                <div className="flex flew-row">
+                    <div className="w-[3vw] h-[3vw] bg-white rounded-tl-xl flex flex-row items-center justify-center">
+                        <Image 
+                            src="/favicon.svg"
+                            alt="Canadian Blood Services Logo"
+                            width={0}
+                            height={0}
+                            style={{ width: "2.5vw", height: "2.5vw" }}
+                        />
+                    </div>
+                    <div className="w-[94vw] h-[3vw] bg-[#9DE1DA] rounded-r-2xl flex flex-row items-center justify-start">
+                        <h1 className="text-[#FF5555] p-4 font-bold text-lg">Volunteer Information</h1>
+                    </div>
+                </div>
+
+                <div className="flex flex-row h-full">
+                    <div className="w-[3vw] h-full bg-[#2FC1A3] rounded-b-2xl"></div>
+
+                    <div className="p-8 h-full w-full">
+                        {children}
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    )
+
+}

app/volunteer-info/page.tsx

@@ -0,0 +1,82 @@
+'use client'
+import ViewVolunteers from "./ViewVolunteers"
+import { useState, ChangeEvent } from "react"
+import { Select, SelectChangeEvent, MenuItem, FormControl, InputLabel } from '@mui/material'
+
+export default function VolunteerInfo() {
+    const sampleData = [
+        { name: "Steph", email: "[email protected]", studentNumber: 123456, hours: 1 },
+        { name: "Karen", email: "[email protected]", studentNumber: 567890, hours: 10 },
+        { name: "Janaye", email: "[email protected]", studentNumber: 654321, hours: 100 },
+        { name: "Mave", email: "[email protected]", studentNumber: 135791, hours: 1000 },
+        { name: "Heaton", email: "[email protected]", studentNumber: 246800, hours: 10000 },
+        { name: "Rus", email: "[email protected]", studentNumber: 345678, hours: 100000 },
+        { name: "Anshul", email: "[email protected]", studentNumber: 242424, hours: 1000000 }
+    ]
+
+    const [searchField, setSearchField] = useState("")
+    const [searchCategory, setSearchCategory] = useState("name")
+
+    const filtered = sampleData.filter((person) => {
+        const input = String(person[searchCategory as keyof typeof sampleData[0]]).toLowerCase();
+        return (
+            input.includes(searchField.toLowerCase())
+        )
+    })
+
+    function search() {
+        return <ViewVolunteers data={filtered} />
+    }
+
+    function handleChange(e: ChangeEvent<HTMLInputElement>) {
+        setSearchField(e.target.value);
+    }
+
+    function handleSelection(e: SelectChangeEvent) {
+        setSearchCategory(e.target.value)
+    }
+
+    return (
+        <div className="h-full w-full flex flex-col">
+            <div className="flex flex-col mb-8">
+                <h1 className="font-bold text-lg mb-3">Search:</h1>
+
+                <div className="flex flex-row gap-x-5">
+                    <input
+                        className="w-[30vw] h-[8vh] border rounded outline-none p-2 focus:border-[#9DE1DA]"
+                        onChange={handleChange}
+                    />
+
+                    <FormControl sx={selectStyle}>
+                        <InputLabel>Options</InputLabel>
+                        <Select
+                            label="Options"
+                            value={searchCategory}
+                            defaultValue="name"
+                            onChange={handleSelection}
+                            sx={ { backgroundColor:"white" }}
+                        >
+                            <MenuItem value="name">Name</MenuItem>
+                            <MenuItem value="email">Email</MenuItem>
+                            <MenuItem value="studentNumber">Student Number</MenuItem>
+                        </Select>
+                    </FormControl>
+                </div>
+            </div>
+
+            {search()}
+
+        </div>
+    )
+}
+
+const selectStyle = {
+    height: "8vh",
+    width: "15vw",
+    "& label.Mui-focused": { color: "#9DE1DA" },
+    "& .MuiOutlinedInput-root": {
+        "&.Mui-focused fieldset": {
+          borderColor: "#9DE1DA"
+        }
+      }
+}