From 1d9e5c73978e3edcf618c67faa992fbf87ddee77 Mon Sep 17 00:00:00 2001
From: Nick Doan <nickbar01234@gmail.com>
Date: Mon, 25 Mar 2024 16:36:15 -0400
Subject: [PATCH 1/4] Add popup to edit user (#132)

---
 prisma/schema.prisma                          |  2 +-
 src/app/api/route.schema.ts                   | 10 +++
 .../user/[uid]/edit-position/route.client.ts  | 16 ++++
 .../user/[uid]/edit-position/route.schema.ts  | 11 +++
 src/app/api/user/[uid]/edit-position/route.ts | 38 +++++++++
 .../chapter-leader/users/MembersHomePage.tsx  | 81 +++++++++++++++++--
 .../[uid]/chapter-leader/users/page.tsx       | 14 ++--
 src/app/private/[uid]/user/home/page.tsx      |  9 +--
 src/components/DisplayChapterInfo.tsx         |  4 +-
 src/components/TileGrid/InfoTile.tsx          |  2 +-
 src/components/TileGrid/UserTile.tsx          |  2 +-
 src/components/container/Popup.tsx            | 15 ++++
 src/components/container/index.tsx            |  1 +
 src/components/selector/Dropdown.tsx          | 50 ++++++++----
 src/components/senior/assignment/index.tsx    | 48 ++++++-----
 15 files changed, 241 insertions(+), 62 deletions(-)
 create mode 100644 src/app/api/user/[uid]/edit-position/route.client.ts
 create mode 100644 src/app/api/user/[uid]/edit-position/route.schema.ts
 create mode 100644 src/app/api/user/[uid]/edit-position/route.ts
 create mode 100644 src/components/container/Popup.tsx

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 0d4da84c..06ee2645 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -57,7 +57,7 @@ model User {
   email         String?   @unique
   emailVerified DateTime?
   image         String?
-  position      String?
+  position      String    @default("")
 
   // @deprecated Pending for removal when we expand to multiple universities
   admin Boolean @default(false)
diff --git a/src/app/api/route.schema.ts b/src/app/api/route.schema.ts
index 6db30c7c..c5ec230d 100644
--- a/src/app/api/route.schema.ts
+++ b/src/app/api/route.schema.ts
@@ -39,4 +39,14 @@ export const invalidFormReponse = invalidFormErrorSchema.parse({
   message: "The form is not valid",
 });
 
+export const invalidRequestSchema = z.object({
+  code: z.literal("INVALID_REQUEST"),
+  message: z.string(),
+});
+
+export const invalidRequestResponse = invalidRequestSchema.parse({
+  code: "INVALID_REQUEST",
+  message: "Request body is invalid",
+});
+
 export type IUnauthorizedErrorSchema = z.infer<typeof unauthorizedErrorSchema>;
diff --git a/src/app/api/user/[uid]/edit-position/route.client.ts b/src/app/api/user/[uid]/edit-position/route.client.ts
new file mode 100644
index 00000000..c90058f8
--- /dev/null
+++ b/src/app/api/user/[uid]/edit-position/route.client.ts
@@ -0,0 +1,16 @@
+import { TypedRequest } from "@server/type";
+import { z } from "zod";
+import { editPositionRequest, editPositionResponse } from "./route.schema";
+
+export const editPosition = async (
+  request: TypedRequest<z.infer<typeof editPositionRequest>>,
+  uid: string
+) => {
+  const { body, ...options } = request;
+  const response = await fetch(`/api/user/${uid}/edit-position`, {
+    method: "PATCH",
+    body: JSON.stringify(body),
+    ...options,
+  });
+  return editPositionResponse.parse(await response.json());
+};
diff --git a/src/app/api/user/[uid]/edit-position/route.schema.ts b/src/app/api/user/[uid]/edit-position/route.schema.ts
new file mode 100644
index 00000000..38a1b39c
--- /dev/null
+++ b/src/app/api/user/[uid]/edit-position/route.schema.ts
@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const editPositionRequest = z.object({
+  position: z.string(),
+});
+
+export const editPositionResponse = z.discriminatedUnion("code", [
+  z.object({
+    code: z.literal("SUCCESS"),
+  }),
+]);
diff --git a/src/app/api/user/[uid]/edit-position/route.ts b/src/app/api/user/[uid]/edit-position/route.ts
new file mode 100644
index 00000000..7d4421d0
--- /dev/null
+++ b/src/app/api/user/[uid]/edit-position/route.ts
@@ -0,0 +1,38 @@
+import { prisma } from "@server/db/client";
+import { withRole, withSession } from "@server/decorator";
+import { NextResponse } from "next/server";
+import { editPositionRequest, editPositionResponse } from "./route.schema";
+import {
+  invalidRequestResponse,
+  unauthorizedErrorResponse,
+} from "@api/route.schema";
+
+export const PATCH = withSession(
+  withRole(["CHAPTER_LEADER"], async ({ session, req, params }) => {
+    const { user: me } = session;
+    const otherUid: string = params.params.uid;
+    const other = await prisma.user.findUnique({
+      where: { id: otherUid },
+    });
+    const request = editPositionRequest.safeParse(await req.json());
+
+    if (other == null || !request.success) {
+      return NextResponse.json(invalidRequestResponse, { status: 400 });
+    }
+
+    if (me.role !== "CHAPTER_LEADER" || me.ChapterID !== other.ChapterID) {
+      return NextResponse.json(unauthorizedErrorResponse, { status: 401 });
+    }
+
+    await prisma.user.update({
+      where: {
+        id: otherUid,
+      },
+      data: {
+        position: request.data.position,
+      },
+    });
+
+    return NextResponse.json(editPositionResponse.parse({ code: "SUCCESS" }));
+  })
+);
diff --git a/src/app/private/[uid]/chapter-leader/users/MembersHomePage.tsx b/src/app/private/[uid]/chapter-leader/users/MembersHomePage.tsx
index f9dcf72c..03d633ae 100644
--- a/src/app/private/[uid]/chapter-leader/users/MembersHomePage.tsx
+++ b/src/app/private/[uid]/chapter-leader/users/MembersHomePage.tsx
@@ -1,28 +1,99 @@
 "use client";
 
-import { UserTile } from "@components/TileGrid";
+import { TileEdit, UserTile } from "@components/TileGrid";
 import SearchableContainer from "@components/SearchableContainer";
 import { User } from "@prisma/client";
+import { useContext, useState } from "react";
+import { UserContext } from "@context/UserProvider";
+import { editPosition } from "@api/user/[uid]/edit-position/route.client";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowUpFromBracket } from "@fortawesome/free-solid-svg-icons";
+import { Dropdown } from "@components/selector";
+import { Popup } from "@components/container";
+import { useRouter } from "next/navigation";
 
 type MembersHomePageProps = {
   members: User[];
-  user: User;
 };
 
-const MembersHomePage = ({ members, user }: MembersHomePageProps) => {
+const EBOARD_POSITIONS = [
+  "Social Coordinator",
+  "Senior Outreach Coordinator",
+  "Head of Media",
+  "Secretary",
+  "Treasurer",
+  "Match Coordinator",
+].map((position, idx) => ({ id: idx.toString(), position: position }));
+
+const MembersHomePage = ({ members }: MembersHomePageProps) => {
+  const { user } = useContext(UserContext);
+  const [uidToEdit, setUidToEdit] = useState<null | string>(null);
+  const [selectedPosition, setSelectedPosition] = useState<
+    typeof EBOARD_POSITIONS
+  >([]);
+  const router = useRouter();
+
+  const resetAssignment = () => {
+    setUidToEdit(null);
+    setSelectedPosition([]);
+  };
+
   const displayMembers = (elem: User, index: number) => (
     <UserTile
       key={index}
       student={elem}
       link={`/private/${user.id}/chapter-leader/users/${elem.id}`}
+      dropdownComponent={
+        <TileEdit
+          options={[
+            {
+              name: "Edit role",
+              onClick: (e) => {
+                e.stopPropagation();
+                setUidToEdit(elem.id);
+                setSelectedPosition(
+                  EBOARD_POSITIONS.filter(
+                    (position) => position.position === elem.position
+                  )
+                );
+              },
+              icon: <FontAwesomeIcon icon={faArrowUpFromBracket} />,
+              color: "#22555A",
+            },
+          ]}
+        />
+      }
     />
   );
 
   return (
-    <>
+    <div onClick={resetAssignment}>
       <h1 className="font-merriweather pb-6 text-3xl">
         {`Members (${members.length})`}
       </h1>
+      {uidToEdit != null && (
+        <Popup>
+          <div className="text-3xl font-bold text-white">Assign to E-board</div>
+          <Dropdown
+            header="Select position"
+            elements={EBOARD_POSITIONS}
+            display={(element) => <>{element.position}</>}
+            selected={selectedPosition}
+            setSelected={setSelectedPosition}
+            onSave={async () => {
+              await editPosition(
+                {
+                  body: { position: selectedPosition[0]?.position ?? "" },
+                },
+                uidToEdit
+              );
+              resetAssignment();
+              router.refresh();
+            }}
+            multipleChoice={false}
+          />
+        </Popup>
+      )}
       <SearchableContainer
         display={displayMembers}
         elements={members}
@@ -37,7 +108,7 @@ const MembersHomePage = ({ members, user }: MembersHomePageProps) => {
             .includes(filter.toLowerCase())
         }
       />
-    </>
+    </div>
   );
 };
 
diff --git a/src/app/private/[uid]/chapter-leader/users/page.tsx b/src/app/private/[uid]/chapter-leader/users/page.tsx
index 1165f864..93e30e13 100644
--- a/src/app/private/[uid]/chapter-leader/users/page.tsx
+++ b/src/app/private/[uid]/chapter-leader/users/page.tsx
@@ -3,22 +3,20 @@ import { prisma } from "@server/db/client";
 import MembersHomePage from "./MembersHomePage";
 
 const MembersPage = async ({ params }: { params: { uid: string } }) => {
-  const user = await prisma.user.findFirstOrThrow({
-    where: {
-      id: params.uid,
-    },
-  });
-
   const chapter = await prisma.chapter.findFirstOrThrow({
     where: {
-      id: user.ChapterID ?? "",
+      students: {
+        some: {
+          id: params.uid,
+        },
+      },
     },
     include: {
       students: true,
     },
   });
 
-  return <MembersHomePage members={chapter.students} user={user} />;
+  return <MembersHomePage members={chapter.students} />;
 };
 
 export default MembersPage;
diff --git a/src/app/private/[uid]/user/home/page.tsx b/src/app/private/[uid]/user/home/page.tsx
index 87dd88ab..7ceb9441 100644
--- a/src/app/private/[uid]/user/home/page.tsx
+++ b/src/app/private/[uid]/user/home/page.tsx
@@ -29,14 +29,7 @@ const UserHomePage = async ({ params }: UserHomePageParams) => {
     },
   });
 
-  return (
-    <div className="mt-6 flex flex-col gap-y-6">
-      <div className="text-2xl font-bold text-[#000022]">
-        {chapter.chapterName}
-      </div>
-      <DisplayChapterInfo chapter={chapter} resources={resources} />
-    </div>
-  );
+  return <DisplayChapterInfo chapter={chapter} resources={resources} />;
 };
 
 export default UserHomePage;
diff --git a/src/components/DisplayChapterInfo.tsx b/src/components/DisplayChapterInfo.tsx
index d0772973..0867ecb3 100644
--- a/src/components/DisplayChapterInfo.tsx
+++ b/src/components/DisplayChapterInfo.tsx
@@ -45,7 +45,9 @@ const DisplayChapterInfo = ({
         <CardGrid
           title={<div className="text-xl text-[#000022]">Executive Board</div>}
           tiles={chapter.students
-            .filter((user) => user.role === "CHAPTER_LEADER")
+            .filter(
+              (user) => user.role === "CHAPTER_LEADER" || user.position !== ""
+            )
             .map((user) => (
               <UserTile
                 key={user.id}
diff --git a/src/components/TileGrid/InfoTile.tsx b/src/components/TileGrid/InfoTile.tsx
index 6bae5721..21e06e4f 100644
--- a/src/components/TileGrid/InfoTile.tsx
+++ b/src/components/TileGrid/InfoTile.tsx
@@ -34,7 +34,7 @@ const InfoTile = (params: InfoTileProps) => {
 
   return (
     <div className="flex h-fit w-full flex-col gap-y-4 rounded-lg bg-white p-6 shadow-lg">
-      <div className="flex justify-between">
+      <div className="relative flex justify-between">
         <Link
           href={href ?? ""}
           className={`href ? "" : "cursor-default" truncate`}
diff --git a/src/components/TileGrid/UserTile.tsx b/src/components/TileGrid/UserTile.tsx
index 349642dd..cc8a0b3d 100644
--- a/src/components/TileGrid/UserTile.tsx
+++ b/src/components/TileGrid/UserTile.tsx
@@ -50,7 +50,7 @@ export function UserTile({
           </div>
         </Link>
       </div>
-      <div className="flex items-center justify-between p-2">
+      <div className="relative flex items-center justify-between p-2">
         <div className="overflow-hidden">
           <p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-dark-teal before:invisible before:content-['\200B']">
             {student
diff --git a/src/components/container/Popup.tsx b/src/components/container/Popup.tsx
new file mode 100644
index 00000000..b0c01a60
--- /dev/null
+++ b/src/components/container/Popup.tsx
@@ -0,0 +1,15 @@
+interface PopupProps {
+  children?: React.ReactNode;
+}
+
+const Popup = (props: PopupProps) => {
+  return (
+    <div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center backdrop-blur-[2px] backdrop-brightness-75">
+      <div className="flex h-48 w-[30rem] flex-col gap-y-6 rounded-[16px] bg-dark-teal px-6 py-9">
+        {props.children}
+      </div>
+    </div>
+  );
+};
+
+export default Popup;
diff --git a/src/components/container/index.tsx b/src/components/container/index.tsx
index b1062046..26caaba4 100644
--- a/src/components/container/index.tsx
+++ b/src/components/container/index.tsx
@@ -1,3 +1,4 @@
 export { default as HeaderContainer } from "./HeaderContainer";
 export { default as CardGrid } from "./CardGrid";
 export { default as CollapsableSidebarContainer } from "./CollapsableSidebarContainer";
+export { default as Popup } from "./Popup";
diff --git a/src/components/selector/Dropdown.tsx b/src/components/selector/Dropdown.tsx
index 2369946f..696a1fb4 100644
--- a/src/components/selector/Dropdown.tsx
+++ b/src/components/selector/Dropdown.tsx
@@ -12,55 +12,75 @@ interface DropdownProps<T extends IdentifiableObject> {
   selected: T[];
   setSelected: React.Dispatch<React.SetStateAction<T[]>>;
   onSave: () => Promise<any>;
+  multipleChoice?: boolean;
 }
 
 const Dropdown = <T extends IdentifiableObject>(props: DropdownProps<T>) => {
   const { header, display, elements, selected, setSelected } = props;
+  const multipleChoice = props.multipleChoice ?? true;
   const [displayDropdown, setDisplayDropdown] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
   const [_, startTransition] = React.useTransition();
 
+  const onDisplayDropdown = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    e.stopPropagation();
+    setDisplayDropdown(!displayDropdown);
+  };
+
   const onSave = () => {
     setLoading(true);
     props.onSave().then(() => setLoading(false));
   };
 
-  const onCheck = (element: T) => {
+  const onCheck = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    element: T
+  ) => {
+    e.stopPropagation();
     startTransition(() => {
       if (selected.some((other) => element.id === other.id)) {
         setSelected((prev) => prev.filter((other) => element.id !== other.id));
-      } else {
+      } else if (multipleChoice) {
         setSelected((prev) => [...prev, element]);
+      } else {
+        setSelected([element]);
       }
     });
   };
 
   // TODO(nickbar01234) - Handle click outside
   return (
-    <div className="relative min-w-[192px]">
+    <div className="relative w-full">
       <div
-        className="flex cursor-pointer items-center justify-between rounded-lg border border-amber-red px-4 py-1.5"
-        onClick={() => setDisplayDropdown(!displayDropdown)}
+        className="flex cursor-pointer items-center justify-between rounded-lg border border-dark-teal bg-[#F5F0EA] px-4 py-1.5"
+        onClick={onDisplayDropdown}
       >
-        <span className="text-amber-red">{header}</span>
-        <FontAwesomeIcon icon={faCaretDown} className="text-amber-red" />
+        <span className="text-dark-teal">{header}</span>
+        <FontAwesomeIcon icon={faCaretDown} className="text-dark-teal" />
       </div>
       {displayDropdown && (
-        <div className="absolute z-50 mt-2 inline-block w-full rounded border border-amber-red bg-white p-4">
+        <div className="absolute z-50 mt-2 inline-block w-full rounded border border-dark-teal bg-[#F5F0EA] p-4">
           <div className="flex min-h-[128px] flex-col justify-between gap-y-3">
             <div className="flex max-h-[128px] flex-col gap-y-3 overflow-y-auto">
               {elements.map((element, idx) => (
                 <div
                   key={idx}
-                  className="flex items-center gap-1.5 text-amber-red"
+                  className="flex cursor-pointer items-center gap-1.5 text-dark-teal"
+                  onClick={(e) => onCheck(e, element)}
                 >
                   <button
-                    className="flex h-4 w-4 items-center justify-center border-2 border-amber-red bg-white"
-                    onClick={() => onCheck(element)}
+                    className={`flex h-4 w-4 items-center justify-center border-2 border-dark-teal ${
+                      !multipleChoice && "rounded-full"
+                    }`}
                   >
-                    {selected.some((other) => element.id === other.id) && (
-                      <FontAwesomeIcon icon={faCheck} size="xs" />
-                    )}
+                    {selected.some((other) => element.id === other.id) &&
+                      (multipleChoice ? (
+                        <FontAwesomeIcon icon={faCheck} size="xs" />
+                      ) : (
+                        <div className="h-full w-full bg-dark-teal" />
+                      ))}
                   </button>
                   <span className="overflow-hidden truncate">
                     {display(element)}
@@ -74,7 +94,7 @@ const Dropdown = <T extends IdentifiableObject>(props: DropdownProps<T>) => {
               </div>
             ) : (
               <button
-                className="rounded bg-amber-red px-6 py-2.5 text-white"
+                className="rounded bg-dark-teal px-6 py-2.5 text-white"
                 onClick={onSave}
               >
                 Save Changes
diff --git a/src/components/senior/assignment/index.tsx b/src/components/senior/assignment/index.tsx
index f5c3164b..e589df1f 100644
--- a/src/components/senior/assignment/index.tsx
+++ b/src/components/senior/assignment/index.tsx
@@ -10,10 +10,11 @@ interface AssignmentProps {
   senior: Prisma.SeniorGetPayload<{
     include: { Files: true; chapter: { include: { students: true } } };
   }>;
+  multipleChoice?: boolean;
 }
 
 const Assignment = (props: AssignmentProps) => {
-  const { senior } = props;
+  const { senior, multipleChoice } = props;
   const router = useRouter();
   const students = React.useMemo(
     () => senior.chapter.students.sort(compareUser),
@@ -28,31 +29,34 @@ const Assignment = (props: AssignmentProps) => {
   return (
     <div className="flex flex-wrap gap-2">
       {props.editable && (
-        <Dropdown<User>
-          header="Assign student"
-          elements={students}
-          selected={assigned}
-          setSelected={setAssigned}
-          display={(user) => fullName(user)}
-          onSave={async () => {
-            await patchSenior({
-              body: {
-                firstname: senior.firstname,
-                lastname: senior.lastname,
-                location: senior.location,
-                description: senior.description,
-                StudentIDs: assigned.map((user) => user.id),
-              },
-              seniorId: senior.id,
-            });
-            router.refresh();
-          }}
-        />
+        <div className="min-w-[192px]">
+          <Dropdown<User>
+            header="Assign student"
+            elements={students}
+            selected={assigned}
+            setSelected={setAssigned}
+            display={(user) => fullName(user)}
+            onSave={async () => {
+              await patchSenior({
+                body: {
+                  firstname: senior.firstname,
+                  lastname: senior.lastname,
+                  location: senior.location,
+                  description: senior.description,
+                  StudentIDs: assigned.map((user) => user.id),
+                },
+                seniorId: senior.id,
+              });
+              router.refresh();
+            }}
+            multipleChoice={multipleChoice}
+          />
+        </div>
       )}
       {getAssignments().map((student) => (
         <div
           key={student.id}
-          className="rounded-3xl bg-amber-red px-4 py-1.5 text-white"
+          className="rounded-3xl bg-dark-teal px-4 py-1.5 text-white"
         >
           {student.name}
         </div>

From 3371be4fee0cc8ef957e4875be90f29581a32ba3 Mon Sep 17 00:00:00 2001
From: Nick Doan <nickbar01234@gmail.com>
Date: Tue, 26 Mar 2024 17:17:33 -0400
Subject: [PATCH 2/4] Centralize popup (#133)

---
 src/components/AddSenior.tsx         | 264 +++++++++++++--------------
 src/components/FilterDropdown.tsx    |  11 +-
 src/components/container/Popup.tsx   |   7 +-
 src/components/selector/Dropdown.tsx |   4 +-
 src/components/user/AddFile.tsx      |  17 +-
 5 files changed, 147 insertions(+), 156 deletions(-)

diff --git a/src/components/AddSenior.tsx b/src/components/AddSenior.tsx
index e5ee092e..3330e89e 100644
--- a/src/components/AddSenior.tsx
+++ b/src/components/AddSenior.tsx
@@ -6,7 +6,6 @@ import React, {
   useState,
 } from "react";
 import Image, { StaticImageData } from "next/legacy/image";
-import cn from "classnames";
 import FilterDropdown from "@components/FilterDropdown";
 import { Senior, User } from "@prisma/client";
 import ImageIcon from "../../public/icons/icon_add_photo.png";
@@ -15,6 +14,7 @@ import { postSenior } from "src/app/api/senior/route.client";
 import z from "zod/lib";
 import { seniorSchema } from "@server/model";
 import { fullName } from "@utils";
+import { Popup } from "./container";
 
 type AddSeniorProps = {
   seniors: Senior[];
@@ -75,7 +75,7 @@ const StudentSelector = ({
 }) => {
   return (
     <div>
-      <div className="text-neutral-600  mb-1 h-[34px] w-full text-lg">
+      <div className="text-neutral-600 h-[34px] w-full text-lg">
         Assign students
       </div>
       <FilterDropdown<User>
@@ -84,7 +84,7 @@ const StudentSelector = ({
         display={(usr: User) => (
           <div className="m-1 flex whitespace-nowrap rounded-full bg-amber-red px-4 py-2 text-white">
             {fullName(usr)}
-            <div className="flex1 ml-3">
+            <div className="ml-3 flex-1">
               <button
                 type="button"
                 onClick={() =>
@@ -225,165 +225,145 @@ const AddSenior = ({
   return (
     <>
       {showAddSeniorPopUp && (
-        <div
-          className="absolute left-1/2 top-1/2 z-50 flex w-screen -translate-x-1/2 -translate-y-1/2 transform
-                        flex-row items-center justify-center text-left md:w-full"
-        >
-          <div
-            className={cn(
-              "top-5%  flex h-[85%] w-[60%] max-w-[495px] flex-col justify-between overflow-auto rounded-lg bg-dark-teal px-6 py-9 text-white",
-              confirm || error
-                ? "top-[5.5%] w-2/5"
-                : "top-[2.5%] sm:w-4/5 md:w-1/2"
-            )}
-          >
-            {!confirm && !error ? (
-              <>
-                <div>
-                  <div className="mb-5 text-xl font-extrabold sm:text-center md:text-left">
-                    {seniorPatch ? "Update" : "Add New"} Senior
-                  </div>
-                  <div>
-                    <div className=" relative mb-4 flex h-2 w-2 flex-col items-center justify-center gap-10 rounded bg-white p-10">
-                      <Image
-                        src={currentImage}
-                        alt="Description"
-                        layout="fill"
-                      />
-                      <input
-                        type="file"
-                        className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
-                        onChange={handleImageReplace}
-                      />
-                    </div>
-                  </div>
+        <Popup className="h-fit w-[36rem]">
+          {!confirm && !error ? (
+            <div className="text-white">
+              <div className="mb-5 text-xl font-extrabold sm:text-center md:text-left">
+                {seniorPatch ? "Update" : "Add New"} Senior
+              </div>
+              <div>
+                <div className=" relative mb-4 flex h-2 w-2 flex-col items-center justify-center gap-10 rounded bg-white p-10">
+                  <Image src={currentImage} alt="Description" layout="fill" />
+                  <input
+                    type="file"
+                    className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
+                    onChange={handleImageReplace}
+                  />
+                </div>
+              </div>
 
-                  {/* Todo: First and Last name values are stored into the seniorData.name field. Seperate into two fields
+              {/* Todo: First and Last name values are stored into the seniorData.name field. Seperate into two fields
                   later as seniorData.name propgates to backend*/}
-                  <div className="flex">
-                    <div className="mr-2 flex-1 flex-col">
-                      <div className=" mb-2 h-[19px] w-full text-base text-white">
-                        {" "}
-                        First name{" "}
-                      </div>
-                      <input
-                        className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-black"
-                        type="text"
-                        value={seniorData.firstname}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                          setSeniorData({
-                            ...seniorData,
-                            firstname: e.target.value,
-                          })
-                        }
-                      />
-                    </div>
-
-                    <div className="ml-2 flex-1 flex-col">
-                      <div className=" mb-2 h-[19px] w-full text-base text-white">
-                        {" "}
-                        Last name{" "}
-                      </div>
-                      <input
-                        className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-black"
-                        type="text"
-                        value={seniorData.lastname}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                          setSeniorData((seniorData) => ({
-                            ...seniorData,
-                            lastname: e.target.value,
-                          }))
-                        }
-                      />
-                    </div>
-                  </div>
-
-                  <div className=" mb-2 h-5 w-full text-base text-white">
-                    {" "}
-                    Location{" "}
+              <div className="flex">
+                <div className="mr-2 flex-1 flex-col">
+                  <div className=" mb-2 h-[19px] w-full text-base text-white">
+                    First name
                   </div>
                   <input
-                    className="mb-3 h-9 w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-black"
+                    className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
                     type="text"
-                    value={seniorData.location}
-                    placeholder="Where are you and your senior meeting?"
+                    value={seniorData.firstname}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      setSeniorData({ ...seniorData, location: e.target.value })
+                      setSeniorData({
+                        ...seniorData,
+                        firstname: e.target.value,
+                      })
                     }
                   />
+                </div>
 
-                  <div className="mb-5 h-2 w-full text-base text-white">
-                    {" "}
-                    Description{" "}
+                <div className="ml-2 flex-1 flex-col">
+                  <div className="mb-2 h-[19px] w-full text-base text-white">
+                    Last name
                   </div>
-                  <textarea
-                    className="h-25 mb-3 min-h-[20px] w-full rounded-md border-2 border-solid border-tan bg-white p-[10px] text-start text-sm text-black"
-                    placeholder="Write a brief description about the senior"
-                    value={seniorData.description}
-                    onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                      setSeniorData({
+                  <input
+                    className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
+                    type="text"
+                    value={seniorData.lastname}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      setSeniorData((seniorData) => ({
                         ...seniorData,
-                        description: e.target.value,
-                      })
+                        lastname: e.target.value,
+                      }))
                     }
                   />
+                </div>
+              </div>
 
-                  <StudentSelector
-                    students={students}
-                    selectedStudents={selectedStudents}
-                    setSelectedStudents={setSelectedStudents}
-                  />
+              <div className="mb-2 h-5 w-full text-base text-white">
+                {" "}
+                Location{" "}
+              </div>
+              <input
+                className="mb-3 h-9 w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
+                type="text"
+                value={seniorData.location}
+                placeholder="Where are you and your senior meeting?"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setSeniorData({ ...seniorData, location: e.target.value })
+                }
+              />
 
-                  <div className="top-0 flex max-h-[36px] w-full flex-row justify-center">
-                    <button
-                      className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white 
+              <div className="mb-5 h-2 w-full text-base text-white">
+                {" "}
+                Description{" "}
+              </div>
+              <textarea
+                className="h-25 mb-3 min-h-[20px] w-full resize-none rounded-md border-2 border-solid border-tan bg-white p-[10px] text-start text-sm text-dark-teal placeholder:text-dark-teal"
+                placeholder="Write a brief description about the senior"
+                value={seniorData.description}
+                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                  setSeniorData({
+                    ...seniorData,
+                    description: e.target.value,
+                  })
+                }
+              />
+
+              <StudentSelector
+                students={students}
+                selectedStudents={selectedStudents}
+                setSelectedStudents={setSelectedStudents}
+              />
+
+              <div className="top-0 mt-6 flex max-h-[36px] w-full flex-row justify-center">
+                <button
+                  className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white 
                                   px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md hover:bg-off-white"
-                      onClick={handlePopUp}
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white 
+                  onClick={handlePopUp}
+                >
+                  Cancel
+                </button>
+                <button
+                  className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white 
                       px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md hover:bg-off-white"
-                      onClick={seniorPatch ? patchAddSenior : postAddSenior}
-                    >
-                      {seniorPatch ? "Update" : "Save"}
-                    </button>
+                  onClick={seniorPatch ? patchAddSenior : postAddSenior}
+                >
+                  {seniorPatch ? "Update" : "Save"}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <>
+              {confirm ? (
+                <div className="flex flex-col items-center">
+                  <div className="mb-8 text-center text-xl text-white">
+                    {seniorPatch ? "Updated" : "Added"} successfully!
                   </div>
+                  <button
+                    className="mx-1 w-full max-w-[10rem] rounded bg-white p-3 text-lg text-dark-teal drop-shadow-md"
+                    onClick={handleConfirm}
+                  >
+                    Confirm
+                  </button>
                 </div>
-              </>
-            ) : (
-              <>
-                {confirm ? (
-                  <div className="flex flex-col items-center">
-                    <div className="mb-8 text-center text-xl">
-                      {seniorPatch ? "Updated" : "Added"} successfully!
-                    </div>
-                    <button
-                      className="mx-1 w-full max-w-[10rem] rounded bg-white p-3 text-lg text-dark-teal drop-shadow-md"
-                      onClick={handleConfirm}
-                    >
-                      Confirm
-                    </button>
+              ) : (
+                <div className="flex flex-col items-center break-words">
+                  <div className="mb-8 text-center text-xl text-white">
+                    There was an error adding your senior. Please reach out to
+                    your club administrator for help.
                   </div>
-                ) : (
-                  <div className="flex flex-col items-center break-words">
-                    <div className="mb-8 text-center text-xl">
-                      There was an error adding your senior. Please reach out to
-                      your club administrator for help.
-                    </div>
-                    <button
-                      className="mx-1 w-full max-w-[10rem] rounded bg-white p-3 text-lg text-dark-teal drop-shadow-md"
-                      onClick={handleConfirm}
-                    >
-                      Confirm
-                    </button>
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-        </div>
+                  <button
+                    className="mx-1 w-full max-w-[10rem] rounded bg-white p-3 text-lg text-dark-teal drop-shadow-md"
+                    onClick={handleConfirm}
+                  >
+                    Confirm
+                  </button>
+                </div>
+              )}
+            </>
+          )}
+        </Popup>
       )}
       <AddSeniorTile
         showAddSeniorPopUp={showAddSeniorPopUp}
diff --git a/src/components/FilterDropdown.tsx b/src/components/FilterDropdown.tsx
index 56b658c8..e30893a6 100644
--- a/src/components/FilterDropdown.tsx
+++ b/src/components/FilterDropdown.tsx
@@ -67,7 +67,7 @@ export default function FilterDropdown<T extends Named>({
           className="mb-2 h-[36px] w-full flex-row items-end justify-end rounded-md border-2 border-tan bg-white px-3 text-gray-400 focus:outline-none"
           onClick={() => setShowOptions(!showOptions)}
         >
-          <div className=" flex h-[32px] flex-row items-center justify-between text-sm">
+          <div className="flex h-[32px] flex-row items-center justify-between text-sm text-dark-teal">
             Select student(s)
             <FontAwesomeIcon icon={faCaretDown} className=" text-dark-teal" />
           </div>
@@ -78,13 +78,10 @@ export default function FilterDropdown<T extends Named>({
             onMouseEnter={() => setShowOptions(true)}
             onMouseLeave={() => setShowOptions(false)}
           >
-            <div
-              className="top-100 \ absolute z-50 flex max-h-[150px] w-full flex-col overflow-y-auto
-                            bg-white"
-            >
+            <div className="top-100 absolute z-50 flex max-h-[150px] w-full flex-col overflow-y-auto bg-white">
               {filteredItems.map((item: T, index: number) => (
                 <span
-                  className="\ hover:bg-legacy-teal flex  flex-row items-center border border-light-gray py-2
+                  className="hover:bg-legacy-teal flex  flex-row items-center border border-light-gray py-2
                             pl-2 text-gray-700 hover:cursor-pointer hover:font-bold"
                   onClick={() => {
                     onItemSelect(index, item);
@@ -99,7 +96,7 @@ export default function FilterDropdown<T extends Named>({
           </div>
         )}
       </div>
-      <div className="my-2 flex flex-row flex-wrap">
+      <div className="my-2 flex flex-row overflow-x-auto">
         {selectedItems.map((item: T, i: number) => (
           <div key={i}>{display(item)}</div>
         ))}
diff --git a/src/components/container/Popup.tsx b/src/components/container/Popup.tsx
index b0c01a60..908f9736 100644
--- a/src/components/container/Popup.tsx
+++ b/src/components/container/Popup.tsx
@@ -1,11 +1,16 @@
 interface PopupProps {
   children?: React.ReactNode;
+  className?: string;
 }
 
 const Popup = (props: PopupProps) => {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center backdrop-blur-[2px] backdrop-brightness-75">
-      <div className="flex h-48 w-[30rem] flex-col gap-y-6 rounded-[16px] bg-dark-teal px-6 py-9">
+      <div
+        className={`flex h-48 w-[30rem] flex-col gap-y-6 rounded-[16px] bg-dark-teal px-6 py-9 ${
+          props.className ?? ""
+        }`}
+      >
         {props.children}
       </div>
     </div>
diff --git a/src/components/selector/Dropdown.tsx b/src/components/selector/Dropdown.tsx
index 696a1fb4..4acdbe81 100644
--- a/src/components/selector/Dropdown.tsx
+++ b/src/components/selector/Dropdown.tsx
@@ -54,14 +54,14 @@ const Dropdown = <T extends IdentifiableObject>(props: DropdownProps<T>) => {
   return (
     <div className="relative w-full">
       <div
-        className="flex cursor-pointer items-center justify-between rounded-lg border border-dark-teal bg-[#F5F0EA] px-4 py-1.5"
+        className="flex cursor-pointer items-center justify-between rounded-lg border border-dark-teal bg-tan px-4 py-1.5"
         onClick={onDisplayDropdown}
       >
         <span className="text-dark-teal">{header}</span>
         <FontAwesomeIcon icon={faCaretDown} className="text-dark-teal" />
       </div>
       {displayDropdown && (
-        <div className="absolute z-50 mt-2 inline-block w-full rounded border border-dark-teal bg-[#F5F0EA] p-4">
+        <div className="absolute z-50 mt-2 inline-block w-full rounded border border-dark-teal bg-tan p-4">
           <div className="flex min-h-[128px] flex-col justify-between gap-y-3">
             <div className="flex max-h-[128px] flex-col gap-y-3 overflow-y-auto">
               {elements.map((element, idx) => (
diff --git a/src/components/user/AddFile.tsx b/src/components/user/AddFile.tsx
index 5a58387b..b3c72202 100644
--- a/src/components/user/AddFile.tsx
+++ b/src/components/user/AddFile.tsx
@@ -6,6 +6,9 @@ import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { createFile } from "@api/file/route.client";
 import { File as PrismaFile } from "@prisma/client";
+import { Popup } from "@components/container";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCalendar } from "@fortawesome/free-solid-svg-icons";
 
 type AddFileProps = {
   showAddFilePopUp: boolean;
@@ -133,9 +136,9 @@ const AddFile = ({
   return (
     <>
       {showAddFilePopUp && (
-        <div className="absolute left-0 top-0 z-50 flex h-screen w-screen flex-row place-content-center items-start justify-center backdrop-blur-[2px] backdrop-brightness-75">
+        <Popup className="h-fit w-[36rem]">
           {!confirm && !error ? (
-            <div className="mt-20 flex h-2/3 w-2/5 flex-col justify-between rounded-[16px] bg-[#22555A] p-10 font-['merriweather'] text-white">
+            <div className="flex flex-col justify-between rounded-[16px] text-white">
               <div className="mb-5 mt-4 text-3xl font-bold">
                 {" "}
                 Create New File{" "}
@@ -147,9 +150,15 @@ const AddFile = ({
                 <div className="text-2xl text-[#22555A]">
                   <DatePicker
                     showIcon
+                    icon={
+                      <FontAwesomeIcon
+                        icon={faCalendar}
+                        className="text-dark-teal"
+                      />
+                    }
                     wrapperClassName="w-full relative"
                     calendarIconClassname="text-3xl text-blue-600 mt-[7px] absolute right-2"
-                    className="mb-4 h-16 w-full rounded-lg pl-[50px] font-['merriweather']"
+                    className="mb-4 h-16 w-full cursor-pointer rounded-lg pl-4"
                     selected={startDate}
                     onChange={(date) => date && setStartDate(date)}
                     dateFormat="dd MMMM yyyy"
@@ -209,7 +218,7 @@ const AddFile = ({
               )}
             </>
           )}
-        </div>
+        </Popup>
       )}
     </>
   );

From aa198c842618d0dbd5bede3fc234c7b9aa3d6b05 Mon Sep 17 00:00:00 2001
From: tylerrlin <tylerrlin@gmail.com>
Date: Sun, 31 Mar 2024 14:20:54 -0400
Subject: [PATCH 3/4] create subfolder on accepted chapter request

---
 prisma/schema.prisma                        | 13 +++---
 src/app/api/handle-chapter-request/route.ts | 48 +++++++++++++++++++--
 2 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 06ee2645..dd0e3a14 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -126,12 +126,13 @@ model ChapterRequest {
 }
 
 model Chapter {
-  id          String   @id @default(auto()) @map("_id") @db.ObjectId
-  chapterName String
-  location    String
-  dateCreated DateTime @default(now())
-  students    User[]
-  seniors     Senior[]
+  id            String   @id @default(auto()) @map("_id") @db.ObjectId
+  chapterName   String
+  location      String
+  chapterFolder String
+  dateCreated   DateTime @default(now())
+  students      User[]
+  seniors       Senior[]
 }
 
 model Resource {
diff --git a/src/app/api/handle-chapter-request/route.ts b/src/app/api/handle-chapter-request/route.ts
index ee815149..87d7887b 100644
--- a/src/app/api/handle-chapter-request/route.ts
+++ b/src/app/api/handle-chapter-request/route.ts
@@ -3,9 +3,13 @@ import {
   HandleChapterRequest,
   HandleChapterRequestResponse,
 } from "./route.schema";
+import { withSession } from "@server/decorator";
+import { randomUUID } from "crypto";
+import { google } from "googleapis";
+import { env } from "process";
 import { prisma } from "@server/db/client";
 
-export const POST = async (request: NextRequest) => {
+export const POST = withSession(async ({ req, session }) => {
   // Validate the data in the request
   // If the data is invalid, return a 400 response
   // with a JSON body containing the validation errors
@@ -13,7 +17,7 @@ export const POST = async (request: NextRequest) => {
   // Validate a proper JSON was passed in as well
   try {
     const handleChapterRequest = HandleChapterRequest.safeParse(
-      await request.json()
+      await req.json()
     );
     if (!handleChapterRequest.success) {
       return NextResponse.json(
@@ -53,10 +57,47 @@ export const POST = async (request: NextRequest) => {
       }
       // If approved, create a new chapter and update approved field of chapter request
       if (body.approved === true) {
+        const baseFolder = "1ydzuZB5oqBTrccSgfCQXqaAwrMhLDwNy"; // TODO: make env variable
+        const fileMetadata = {
+          name: [`${chapterRequest.university}-${randomUUID()}`],
+          mimeType: "application/vnd.google-apps.folder",
+          parents: [baseFolder],
+        };
+        const fileCreateData = {
+          resource: fileMetadata,
+          fields: "id",
+        };
+
+        const { access_token, refresh_token } = (await prisma.account.findFirst(
+          {
+            where: {
+              userId: session.user.id,
+            },
+          }
+        )) ?? { access_token: null };
+        const auth = new google.auth.OAuth2({
+          clientId: env.GOOGLE_CLIENT_ID,
+          clientSecret: env.GOOGLE_CLIENT_SECRET,
+        });
+        auth.setCredentials({
+          access_token,
+          refresh_token,
+        });
+        const service = google.drive({
+          version: "v3",
+          auth,
+        });
+
+        const file = await (
+          service as NonNullable<typeof service>
+        ).files.create(fileCreateData);
+        const googleFolderId = (file as any).data.id;
+
         await prisma.chapter.create({
           data: {
             chapterName: chapterRequest.university,
             location: chapterRequest.universityAddress,
+            chapterFolder: googleFolderId,
           },
         });
         await prisma.chapterRequest.update({
@@ -67,6 +108,7 @@ export const POST = async (request: NextRequest) => {
             approved: "APPROVED",
           },
         });
+
         return NextResponse.json(
           HandleChapterRequestResponse.parse({
             code: "SUCCESS",
@@ -101,4 +143,4 @@ export const POST = async (request: NextRequest) => {
       { status: 500 }
     );
   }
-};
+});

From 7b70c893dcabc644bca8bd9486c6384f14c36aca Mon Sep 17 00:00:00 2001
From: tylerrlin <tylerrlin@gmail.com>
Date: Tue, 2 Apr 2024 16:57:25 -0400
Subject: [PATCH 4/4] created env variable for base folder, create folder on
 new chapter, new senior folder in correct chapter, and update share
 permissions on new member.

---
 prisma/schema.prisma                        |  4 +-
 src/app/api/handle-chapter-request/route.ts | 33 +++++++-----
 src/app/api/senior/route.ts                 | 44 +++++++++++----
 src/app/api/user-request/route.ts           | 60 ++++++++++++++++++++-
 4 files changed, 114 insertions(+), 27 deletions(-)

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index dd0e3a14..b7e799d8 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -92,7 +92,7 @@ model Senior {
   description String
   StudentIDs  String[] @db.ObjectId
   Students    User[]   @relation(fields: [StudentIDs], references: [id])
-  folder      String
+  folder      String   @default("")
   Files       File[]
   ChapterID   String   @db.ObjectId
   chapter     Chapter  @relation(fields: [ChapterID], references: [id])
@@ -129,7 +129,7 @@ model Chapter {
   id            String   @id @default(auto()) @map("_id") @db.ObjectId
   chapterName   String
   location      String
-  chapterFolder String
+  chapterFolder String   @default("")
   dateCreated   DateTime @default(now())
   students      User[]
   seniors       Senior[]
diff --git a/src/app/api/handle-chapter-request/route.ts b/src/app/api/handle-chapter-request/route.ts
index 87d7887b..c2f50844 100644
--- a/src/app/api/handle-chapter-request/route.ts
+++ b/src/app/api/handle-chapter-request/route.ts
@@ -4,7 +4,6 @@ import {
   HandleChapterRequestResponse,
 } from "./route.schema";
 import { withSession } from "@server/decorator";
-import { randomUUID } from "crypto";
 import { google } from "googleapis";
 import { env } from "process";
 import { prisma } from "@server/db/client";
@@ -57,9 +56,24 @@ export const POST = withSession(async ({ req, session }) => {
       }
       // If approved, create a new chapter and update approved field of chapter request
       if (body.approved === true) {
-        const baseFolder = "1ydzuZB5oqBTrccSgfCQXqaAwrMhLDwNy"; // TODO: make env variable
+        const createdChapter = await prisma.chapter.create({
+          data: {
+            chapterName: chapterRequest.university,
+            location: chapterRequest.universityAddress,
+          },
+        });
+        await prisma.chapterRequest.update({
+          where: {
+            id: body.chapterRequestId,
+          },
+          data: {
+            approved: "APPROVED",
+          },
+        });
+
+        const baseFolder = process.env.GOOGLE_BASEFOLDER; // TODO: make env variable
         const fileMetadata = {
-          name: [`${chapterRequest.university}-${randomUUID()}`],
+          name: [`${chapterRequest.university}-${createdChapter.id}`],
           mimeType: "application/vnd.google-apps.folder",
           parents: [baseFolder],
         };
@@ -93,19 +107,12 @@ export const POST = withSession(async ({ req, session }) => {
         ).files.create(fileCreateData);
         const googleFolderId = (file as any).data.id;
 
-        await prisma.chapter.create({
-          data: {
-            chapterName: chapterRequest.university,
-            location: chapterRequest.universityAddress,
-            chapterFolder: googleFolderId,
-          },
-        });
-        await prisma.chapterRequest.update({
+        await prisma.chapter.update({
           where: {
-            id: body.chapterRequestId,
+            id: createdChapter.id,
           },
           data: {
-            approved: "APPROVED",
+            chapterFolder: googleFolderId,
           },
         });
 
diff --git a/src/app/api/senior/route.ts b/src/app/api/senior/route.ts
index 69a8d750..3efdfd5d 100644
--- a/src/app/api/senior/route.ts
+++ b/src/app/api/senior/route.ts
@@ -47,11 +47,36 @@ export const POST = withSessionAndRole(
           })
         );
       }
-      const baseFolder = "1MVyWBeKCd1erNe9gkwBf7yz3wGa40g9a"; // TODO: make env variable
+
+      const chapter = await prisma.chapter.findFirst({
+        where: {
+          id: session.user.ChapterID,
+        },
+      });
+      if (!chapter) {
+        return NextResponse.json(
+          seniorPostResponse.parse({
+            code: "UNKNOWN",
+            message: "Chapter not found",
+          }),
+          { status: 400 }
+        );
+      }
+
+      const senior = await prisma.senior.create({
+        data: {
+          firstname: seniorBody.firstname,
+          lastname: seniorBody.lastname,
+          location: seniorBody.location,
+          description: seniorBody.description,
+          ChapterID: session.user.ChapterID,
+          StudentIDs: seniorBody.StudentIDs,
+        },
+      });
+
+      const baseFolder = chapter.chapterFolder; // TODO: make env variable
       const fileMetadata = {
-        name: [
-          `${seniorBody.firstname}_${seniorBody.lastname}-${randomUUID()}`,
-        ],
+        name: [`${seniorBody.firstname}_${seniorBody.lastname}_${senior.id}`],
         mimeType: "application/vnd.google-apps.folder",
         parents: [baseFolder],
       };
@@ -83,14 +108,11 @@ export const POST = withSessionAndRole(
       );
       const googleFolderId = (file as any).data.id;
 
-      const senior = await prisma.senior.create({
+      await prisma.senior.update({
+        where: {
+          id: senior.id,
+        },
         data: {
-          firstname: seniorBody.firstname,
-          lastname: seniorBody.lastname,
-          location: seniorBody.location,
-          description: seniorBody.description,
-          ChapterID: session.user.ChapterID,
-          StudentIDs: seniorBody.StudentIDs,
           folder: googleFolderId,
         },
       });
diff --git a/src/app/api/user-request/route.ts b/src/app/api/user-request/route.ts
index 0b92423e..bb62ae6c 100644
--- a/src/app/api/user-request/route.ts
+++ b/src/app/api/user-request/route.ts
@@ -7,6 +7,7 @@ import {
 } from "./route.schema";
 import { prisma } from "@server/db/client";
 import { withSession } from "@server/decorator/index";
+import { google } from "googleapis";
 
 export const POST = withSession(async ({ req, session }) => {
   try {
@@ -216,7 +217,7 @@ export const PATCH = withSession(async ({ req, session }) => {
         approved: "APPROVED",
       },
     });
-    await prisma.user.update({
+    const user = await prisma.user.update({
       where: {
         id: targetUID,
       },
@@ -224,7 +225,64 @@ export const PATCH = withSession(async ({ req, session }) => {
         ChapterID: approveChapterRequest.chapterId,
       },
     });
+    const chapter = await prisma.chapter.findFirst({
+      where: {
+        id: approveChapterRequest.chapterId,
+      },
+    });
+
+    if (chapter == null || user == null || user.email == null) {
+      return NextResponse.json(
+        ManageChapterRequestResponse.parse({
+          code: "INVALID_REQUEST",
+          message: "Chapter or user (or email) doesn't exist",
+        }),
+        { status: 400 }
+      );
+    }
+
+    const folderId = chapter.chapterFolder;
+
+    // Next, share the folder with the user that is accepted
+    const shareFolder = async (folderId: string, userEmail: string) => {
+      const { access_token, refresh_token } = (await prisma.account.findFirst({
+        where: {
+          userId: session.user.id,
+        },
+      })) ?? { access_token: null };
+      const auth = new google.auth.OAuth2({
+        clientId: process.env.GOOGLE_CLIENT_ID,
+        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+      });
+      auth.setCredentials({
+        access_token,
+        refresh_token,
+      });
+      const service = google.drive({
+        version: "v3",
+        auth,
+      });
+
+      try {
+        // Define the permission
+        const permission = {
+          type: "user",
+          role: "writer", // Change role as per your requirement
+          emailAddress: userEmail,
+        };
 
+        // Share the folder
+        await service.permissions.create({
+          fileId: folderId,
+          requestBody: permission,
+        });
+
+        console.log("Folder shared successfully!");
+      } catch (error) {
+        console.error("Error sharing folder:", error);
+      }
+    };
+    await shareFolder(folderId, user.email);
     return NextResponse.json(
       ManageChapterRequestResponse.parse({ code: "SUCCESS" })
     );