17 full dashboard (#49)

* started ticket * assembled dashboard * combine everything together * eslint thing --------- Co-authored-by: wkim10 <[email protected]>
JumboCode · Dec 12, 2024 · f077799 · f077799
1 parent be0a093
commit f077799
Show file tree

Hide file tree

Showing 21 changed files with 823 additions and 467 deletions.
diff --git a/src/app/api/auth/[...nextauth]/options.ts b/src/app/api/auth/[...nextauth]/options.ts
@@ -44,11 +44,9 @@ export const options: NextAuthOptions = {
 
         let volunteerDetails = null;
         if (user.role !== "ADMIN") {
-          console.log("HERE!");
           volunteerDetails = await prisma.volunteerDetails.findUnique({
             where: { userId: user.id },
           });
-          console.log(volunteerDetails);
         }
 
         return {
@@ -67,7 +65,6 @@ export const options: NextAuthOptions = {
   },
   callbacks: {
     async jwt({ token, user }) {
-      console.log({ token, user });
       if (user) {
         token.id = user.id;
         token.role = user.role;
@@ -81,7 +78,6 @@ export const options: NextAuthOptions = {
       return token;
     },
     async session({ session, token }) {
-      console.log({ session, token });
       session.user.id = token.id;
       session.user.role = token.role;
       session.user.firstName = token.firstName;

diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts
@@ -127,7 +127,7 @@ export const GET = async (request: NextRequest) => {
     try {
       const users = await prisma.user.findMany({
         where: { role: role === "ADMIN" ? "ADMIN" : "VOLUNTEER" },
-        include: { volunteerDetails: true },
+        include: { volunteerDetails: role === "VOLUNTEER" },
       });
 
       if (!users || users.length === 0) {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${sofiaPro.variable} antialiased`}>
+      <body className={`${sofiaPro.variable} antialiased overscroll-none`}>
         <AuthProvider>{children}</AuthProvider>
       </body>
     </html>

diff --git a/src/app/private/communication/page.tsx b/src/app/private/communication/page.tsx
@@ -1,9 +1,25 @@
 import React from "react";
+import Image from "next/image";
 
 export default function CommunicationPage() {
   return (
     <div>
-      <h1>Communication Page</h1>
+      <div className="text-4xl font-['Kepler_Std'] font-semibold">
+        Communication
+      </div>
+      <div className="text-center">
+        <div className="relative w-full h-[50vh]">
+          <Image
+            src="/empty_list.png"
+            alt="Empty List"
+            layout="fill"
+            objectFit="contain"
+          />
+        </div>
+        <div className="text-[#344054] font-['Kepler_Std'] text-3xl font-semibold mt-8">
+          Coming Soon!
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/app/private/events/page.tsx b/src/app/private/events/page.tsx
@@ -1,9 +1,23 @@
 import React from "react";
+import Image from "next/image";
 
 export default function EventsPage() {
   return (
     <div>
-      <h1>Events Page</h1>
+      <div className="text-4xl font-['Kepler_Std'] font-semibold">Events</div>
+      <div className="text-center">
+        <div className="relative w-full h-[50vh]">
+          <Image
+            src="/empty_list.png"
+            alt="Empty List"
+            layout="fill"
+            objectFit="contain"
+          />
+        </div>
+        <div className="text-[#344054] font-['Kepler_Std'] text-3xl font-semibold mt-8">
+          Coming Soon!
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/app/private/layout.tsx b/src/app/private/layout.tsx
@@ -1,14 +1,31 @@
+"use client";
+
 import SideNavBar from "@components/SideNavBar";
+import TopHeader from "@components/TopHeader";
+import { useSession } from "next-auth/react";
 
 interface IHomeLayoutProps {
   children: React.ReactNode;
 }
 
 const HomeLayout = ({ children }: IHomeLayoutProps) => {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return (
+      <div className="h-screen flex justify-center items-center text-3xl">
+        Loading...
+      </div>
+    );
+  }
+
   return (
     <div className="flex min-h-screen">
-      <SideNavBar role="admin" />
-      <main className="flex-1 ml-60 p-6">{children}</main>
+      <SideNavBar user={session.user} />
+      <div className="flex-1 ml-60">
+        <TopHeader user={session.user} />
+        <div className="py-6 px-7">{children}</div>
+      </div>
     </div>
   );
 };

diff --git a/src/app/private/page.tsx b/src/app/private/page.tsx
@@ -1,20 +1,195 @@
 "use client";
 
 import { useSession } from "next-auth/react";
+import StatsCard from "@components/StatsCard";
+import EventCard from "@components/EventCard";
+import VolunteerTable from "@components/VolunteerTable";
+import { Role, User } from "@prisma/client";
+import React from "react";
+import { getUsersByRole } from "@api/user/route.client";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useRouter } from "next/navigation";
 
 export default function HomePage() {
+  const router = useRouter();
+
   const { data: session } = useSession();
+  const [users, setUsers] = React.useState<User[]>();
+
+  React.useEffect(() => {
+    const fetchUsers = async () => {
+      try {
+        const response = await getUsersByRole(Role.VOLUNTEER);
+        setUsers(response.data);
+      } catch (error) {
+        console.error("Error fetching volunteers:", error);
+      }
+    };
+
+    fetchUsers();
+  }, []);
 
   if (!session) {
-    return <p>You are not logged in.</p>;
+    return (
+      <div className="h-screen flex justify-center items-center text-3xl">
+        Loading...
+      </div>
+    );
   }
 
-  console.log(session.user);
-
   return (
     <div>
-      <h1>Home Page</h1>
-      <div>Welcome, {session.user?.firstName || "User"}!</div>
+      <div>
+        <h1 className="text-4xl font-semibold	leading-10 font-['Kepler_Std']">
+          Thanks for checking in, {session.user.firstName} 👋
+        </h1>
+        <h1 className="text-lg mt-3 font-normal leading-7 font-serif text-slate-500">
+          What&apos;s the next event you want to join?
+        </h1>
+      </div>
+
+      <div className="flex flex-nowrap gap-x-7 pt-8">
+        <StatsCard
+          heading={
+            session.user.role === Role.ADMIN
+              ? "Total volunteers"
+              : "Personal volunteer hours"
+          }
+          value="50"
+          icon="pepicons-pencil:people"
+          date="October 5th, 2024"
+        />
+        {session.user.role === Role.ADMIN ? (
+          <StatsCard
+            heading="Total volunteer hours"
+            value="200"
+            icon="tabler:clock-check"
+            date="October 5th, 2024"
+          />
+        ) : null}
+        <StatsCard
+          heading={
+            session.user.role === Role.ADMIN
+              ? "Total events"
+              : "Events attended"
+          }
+          value="10"
+          icon="mdi:calendar-outline"
+          date="December 11th, 2024"
+        />
+      </div>
+
+      <div>
+        <div className="flex items-center justify-between mt-8">
+          <h1 className="text-2xl font-semibold leading-8 font-['Kepler_Std']">
+            Upcoming events
+          </h1>
+          <div
+            className="flex items-center gap-2 cursor-pointer"
+            onClick={() => router.push("/private/events")}
+          >
+            <div className="mt-0.5 text-[#145A5A] font-semibold">See all</div>
+            <Icon
+              icon="lucide:arrow-right"
+              width={20}
+              height={20}
+              style={{ color: "#145A5A" }}
+            />
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-x-7">
+          <div className="mt-3">
+            <EventCard
+              title="Dewick Community Meal"
+              start={new Date("December 10, 2024 11:20:00")}
+              end={new Date("December 17, 2024 13:20:00")}
+              address="25 Latin Way, Medford, MA 02155"
+              volunteers={10}
+              maxVolunteers={15}
+            />
+          </div>
+          <div className="mt-3">
+            <EventCard
+              title="Carmichael Grab & Go Meal"
+              start={new Date("December 10, 2024 12:30:00")}
+              end={new Date("December 17, 2024 14:00:00")}
+              address="200 Packard Ave, Medford, MA 02155"
+              volunteers={15}
+              maxVolunteers={15}
+            />
+          </div>
+          <div className="mt-3">
+            <EventCard
+              title="Hodgedon Food-on-the-run"
+              start={new Date("December 10, 2024 14:20:00")}
+              end={new Date("December 17, 2024 14:30:00")}
+              address="103 Talbot Ave. Somerville, MA 02144"
+              volunteers={10}
+              maxVolunteers={15}
+            />
+          </div>
+          {session.user.role === Role.VOLUNTEER ? (
+            <>
+              <div className="mt-3">
+                <EventCard
+                  title="Dewick Community Meal"
+                  start={new Date("December 10, 2024 11:20:00")}
+                  end={new Date("December 17, 2024 13:20:00")}
+                  address="25 Latin Way, Medford, MA 02155"
+                  volunteers={10}
+                  maxVolunteers={15}
+                />
+              </div>
+              <div className="mt-3">
+                <EventCard
+                  title="Carmichael Grab & Go Meal"
+                  start={new Date("December 10, 2024 12:30:00")}
+                  end={new Date("December 17, 2024 14:00:00")}
+                  address="200 Packard Ave, Medford, MA 02155"
+                  volunteers={15}
+                  maxVolunteers={15}
+                />
+              </div>
+              <div className="mt-3">
+                <EventCard
+                  title="Hodgedon Food-on-the-run"
+                  start={new Date("December 10, 2024 14:20:00")}
+                  end={new Date("December 17, 2024 14:30:00")}
+                  address="103 Talbot Ave. Somerville, MA 02144"
+                  volunteers={10}
+                  maxVolunteers={15}
+                />
+              </div>
+            </>
+          ) : null}
+        </div>
+      </div>
+      {session.user.role === Role.ADMIN ? (
+        <>
+          <div className="flex items-center justify-between mt-8">
+            <h1 className="text-2xl font-semibold leading-8 font-['Kepler_Std'] mb-3">
+              Volunteers List
+            </h1>
+            <div
+              className="flex items-center gap-2 cursor-pointer"
+              onClick={() => router.push("/private/volunteers")}
+            >
+              <div className="mt-0.5 text-[#145A5A] font-semibold">See all</div>
+              <Icon
+                icon="lucide:arrow-right"
+                width={20}
+                height={20}
+                style={{ color: "#145A5A" }}
+              />
+            </div>
+          </div>
+          <VolunteerTable
+            showPagination={false}
+            fromVolunteerPage={false}
+            users={users}
+          />
+        </>
+      ) : null}
     </div>
   );
 }
diff --git a/src/app/private/profile/page.tsx b/src/app/private/profile/page.tsx
@@ -1,9 +1,23 @@
 import React from "react";
+import Image from "next/image";
 
 export default function ProfilePage() {
   return (
     <div>
-      <h1>Profile Page</h1>
+      <div className="text-4xl font-['Kepler_Std'] font-semibold">Profile</div>
+      <div className="text-center">
+        <div className="relative w-full h-[50vh]">
+          <Image
+            src="/empty_list.png"
+            alt="Empty List"
+            layout="fill"
+            objectFit="contain"
+          />
+        </div>
+        <div className="text-[#344054] font-['Kepler_Std'] text-3xl font-semibold mt-8">
+          Coming Soon!
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/app/private/volunteers/page.tsx b/src/app/private/volunteers/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import VolunteerTable from "@components/VolunteerTable/VolunteerTable";
+import VolunteerTable from "@components/VolunteerTable";
 import SearchBar from "@components/SearchBar";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { Icon } from "@iconify/react/dist/iconify.js";
@@ -52,7 +52,6 @@ export default function VolunteersPage() {
             : []
         );
         setSelected([]);
-        console.log("All users deleted successfully", responses);
       } else {
         console.error("Not all deletions succeeded");
       }

diff --git a/src/app/public/signIn/page.tsx b/src/app/public/signIn/page.tsx
@@ -1,11 +1,7 @@
 import LoginForm from "@components/Login";
 
 const Login = () => {
-  return (
-    <div style={{ padding: "3rem" }}>
-      <LoginForm />
-    </div>
-  );
+  return <LoginForm />;
 };
 
 export default Login;
diff --git a/src/app/public/signUp/page.tsx b/src/app/public/signUp/page.tsx
@@ -1,11 +1,7 @@
 import SignUp from "@components/SignUp";
 
 const SignUpPage = () => {
-  return (
-    <div style={{ padding: "3rem" }}>
-      <SignUp />
-    </div>
-  );
+  return <SignUp />;
 };
 
 export default SignUpPage;