Merge 51c40684fa into 55a03ff3fd

* Add create user endpoint and update model/entity

* Add next route for adding user and add functionality for user table

* Connect create item to backend and add associated frontend routes

.devcontainer/Dockerfile

@@ -44,7 +44,7 @@ RUN mkdir -p /etc/apt/keyrings \
     && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list \
     && apt-get update \
     && apt-get install nodejs -y \
-    && npm install -g npm@latest \
+    && npm install -g npm@10.8.2 \
     && rm -rf /var/lib/apt/lists/*
 
 # Use a non-root user per https://code.visualstudio.com/remote/advancedcontainers/add-nonroot-user

.gitignore

@@ -1,3 +1,4 @@
 /backend/.env
 __pycache__
-node_modules
+.DS_Store
+node_modules

backend/api/resource.py

@@ -19,7 +19,10 @@ openapi_tags = {
 # TODO: Create custom exceptions
 @api.post("", response_model=Resource, tags=["Resource"])
 def create(
-    uuid: str, resource: Resource, user_svc: UserService = Depends(), resource_svc: ResourceService = Depends()
+    uuid: str,
+    resource: Resource,
+    user_svc: UserService = Depends(),
+    resource_svc: ResourceService = Depends(),
 ):
     subject = user_svc.get_user_by_uuid(uuid)
     return resource_svc.create(subject, resource)
@@ -27,14 +30,20 @@ def create(
 
 @api.get("", response_model=List[Resource], tags=["Resource"])
 def get_all(
-    uuid: str, user_svc: UserService = Depends(), resource_svc: ResourceService = Depends()
+    uuid: str,
+    user_svc: UserService = Depends(),
+    resource_svc: ResourceService = Depends(),
 ):
     subject = user_svc.get_user_by_uuid(uuid)
     return resource_svc.get_resource_by_user(subject)
 
+
 @api.get("/{name}", response_model=Resource, tags=["Resource"])
 def get_by_name(
-    name:str, uuid:str, user_svc: UserService = Depends(), resource_svc: ResourceService = Depends()
+    name: str,
+    uuid: str,
+    user_svc: UserService = Depends(),
+    resource_svc: ResourceService = Depends(),
 ):
     subject = user_svc.get_user_by_uuid(uuid)
     return resource_svc.get_resource_by_name(name, subject)
@@ -42,7 +51,10 @@ def get_by_name(
 
 @api.put("", response_model=Resource, tags=["Resource"])
 def update(
-    uuid: str, resource: Resource, user_svc: UserService = Depends(), resource_svc: ResourceService = Depends()
+    uuid: str,
+    resource: Resource,
+    user_svc: UserService = Depends(),
+    resource_svc: ResourceService = Depends(),
 ):
     subject = user_svc.get_user_by_uuid(uuid)
     return resource_svc.update(subject, resource)
@@ -50,7 +62,10 @@ def update(
 
 @api.delete("", response_model=None, tags=["Resource"])
 def delete(
-    uuid: str, resource: Resource, user_svc: UserService = Depends(), resource_svc: ResourceService = Depends()
+    uuid: str,
+    resource: Resource,
+    user_svc: UserService = Depends(),
+    resource_svc: ResourceService = Depends(),
 ):
     subject = user_svc.get_user_by_uuid(uuid)
     resource_svc.delete(subject, resource)

backend/api/user.py

@@ -16,8 +16,8 @@ openapi_tags = {
 # TODO: Enable authorization by passing user uuid to API
 # TODO: Create custom exceptions
 @api.get("/all", response_model=List[User], tags=["Users"])
-def get_all(user_id: str, user_svc: UserService = Depends()):
-    subject = user_svc.get_user_by_uuid(user_id)
+def get_all(uuid: str, user_svc: UserService = Depends()):
+    subject = user_svc.get_user_by_uuid(uuid)
 
     if subject.role != UserTypeEnum.ADMIN:
         raise Exception(f"Insufficient permissions for user {subject.uuid}")
@@ -25,6 +25,24 @@ def get_all(user_id: str, user_svc: UserService = Depends()):
     return user_svc.all()
 
 
-@api.get("/{user_id}", response_model=User, tags=["Users"])
-def get_by_uuid(user_id: str, user_svc: UserService = Depends()):
-    return user_svc.get_user_by_uuid(user_id)
+@api.get("/{uuid}", response_model=User, tags=["Users"])
+def get_by_uuid(uuid: str, user_svc: UserService = Depends()):
+    return user_svc.get_user_by_uuid(uuid)
+
+
+@api.post("/", response_model=User, tags=["Users"])
+def create_user(uuid: str, user: User, user_svc: UserService = Depends()):
+    subject = user_svc.get_user_by_uuid(uuid)
+    if subject.role != UserTypeEnum.ADMIN:
+        raise Exception(f"Insufficient permissions for user {subject.uuid}")
+
+    return user_svc.create(user)
+
+
+@api.put("/", response_model=User, tags=["Users"])
+def update_user(uuid: str, user: User, user_svc: UserService = Depends()):
+    subject = user_svc.get_user_by_uuid(uuid)
+    if subject.role != UserTypeEnum.ADMIN:
+        raise Exception(f"Insufficient permissions for user {subject.uuid}")
+
+    return user_svc.update(user)

backend/entities/user_entity.py

@@ -38,8 +38,8 @@ class UserEntity(EntityBase):
     program: Mapped[list[ProgramTypeEnum]] = mapped_column(
         ARRAY(Enum(ProgramTypeEnum)), nullable=False
     )
-    experience: Mapped[int] = mapped_column(Integer, nullable=False)
-    group: Mapped[str] = mapped_column(String(50))
+    experience: Mapped[int] = mapped_column(Integer, nullable=True)
+    group: Mapped[str] = mapped_column(String(50), nullable=True)
     uuid: Mapped[str] = mapped_column(String, nullable=True)
 
     @classmethod

backend/models/user_model.py

@@ -10,9 +10,9 @@ class User(BaseModel):
     id: int | None = None
     username: str = Field(..., description="The username of the user")
     email: str = Field(..., description="The e-mail of the user")
-    experience: int = Field(..., description="Years of Experience of the User")
-    group: str
-    program: List[ProgramTypeEnum]
-    role: UserTypeEnum
+    experience: int | None = Field(None, description="Years of Experience of the User")
+    group: str | None = Field(None, description="The group of the user")
+    program: List[ProgramTypeEnum] | None = None
+    role: UserTypeEnum | None = None
     created_at: Optional[datetime] = datetime.now()
     uuid: str | None = None

backend/services/resource.py

@@ -17,7 +17,7 @@ class ResourceService:
     def get_resource_by_user(self, subject: User) -> list[Resource]:
         """Resource method getting all of the resources that a user has access to based on role"""
         if subject.role != UserTypeEnum.VOLUNTEER:
-            query = select(ResourceEntity)
+            query = select(ResourceEntity).order_by(ResourceEntity.id)
             entities = self._session.scalars(query).all()
             return [resource.to_model() for resource in entities]
         else:
@@ -86,10 +86,10 @@ class ResourceService:
             raise ResourceNotFoundException(
                 f"No resource found with matching id: {resource.id}"
             )
-        entity.name = resource.name
-        entity.summary = resource.summary
-        entity.link = resource.link
-        entity.program = resource.program
+        entity.name = resource.name if resource.name else entity.name
+        entity.summary = resource.summary if resource.summary else entity.summary
+        entity.link = resource.link if resource.link else entity.link
+        entity.program = resource.program if resource.program else entity.program
         self._session.commit()
         return entity.to_model()
 

backend/services/service.py

@@ -22,14 +22,18 @@ class ServiceService:
     def get_service_by_user(self, subject: User) -> list[Service]:
         """Resource method getting all of the resources that a user has access to based on role"""
         if subject.role != UserTypeEnum.VOLUNTEER:
-            query = select(ServiceEntity)
+            query = select(ServiceEntity).order_by(ServiceEntity.id)
             entities = self._session.scalars(query).all()
             return [service.to_model() for service in entities]
         else:
             programs = subject.program
             services = []
             for program in programs:
-                entities = self._session.query(ServiceEntity).where(ServiceEntity.program == program).all()
+                entities = (
+                    self._session.query(ServiceEntity)
+                    .where(ServiceEntity.program == program)
+                    .all()
+                )
                 for entity in entities:
                     services.append(entity.to_model())
         return [service for service in services]
@@ -37,14 +41,14 @@ class ServiceService:
     def get_service_by_name(self, name: str, subject: User) -> Service:
         """Service method getting services by id."""
         query = select(ServiceEntity).where(
-            and_(
-                ServiceEntity.name == name, ServiceEntity.program.in_(subject.program)
-            )
+            and_(ServiceEntity.name == name, ServiceEntity.program.in_(subject.program))
         )
         entity = self._session.scalars(query).one_or_none()
 
         if entity is None:
-            raise ServiceNotFoundException(f"Service with name: {name} does not exist or program has not been assigned")
+            raise ServiceNotFoundException(
+                f"Service with name: {name} does not exist or program has not been assigned"
+            )
 
         return entity.to_model()
 
@@ -66,7 +70,7 @@ class ServiceService:
             raise ProgramNotAssignedException(
                 f"User is not {UserTypeEnum.ADMIN}, cannot update service"
             )
-        
+
         query = select(ServiceEntity).where(ServiceEntity.id == service.id)
         entity = self._session.scalars(query).one_or_none()
 
@@ -75,11 +79,13 @@ class ServiceService:
                 "The service you are searching for does not exist."
             )
 
-        entity.name = service.name
-        entity.status = service.status
-        entity.summary = service.summary
-        entity.requirements = service.requirements
-        entity.program = service.program
+        entity.name = service.name if service.name else entity.name
+        entity.status = service.status if service.status else entity.status
+        entity.summary = service.summary if service.summary else entity.summary
+        entity.requirements = (
+            service.requirements if service.requirements else entity.requirements
+        )
+        entity.program = service.program if service.program else entity.program
         self._session.commit()
 
         return entity.to_model()
@@ -88,7 +94,7 @@ class ServiceService:
         """Deletes a service from the table."""
         if subject.role != UserTypeEnum.ADMIN:
             raise ProgramNotAssignedException(f"User is not {UserTypeEnum.ADMIN}")
-        
+
         query = select(ServiceEntity).where(ServiceEntity.id == service.id)
         entity = self._session.scalars(query).one_or_none()
 

backend/services/user.py

@@ -43,10 +43,10 @@ class UserService:
 
     def all(self) -> list[User]:
         """
-        Returns a list of all Users
+        Returns a list of all Users ordered by id
 
         """
-        query = select(UserEntity)
+        query = select(UserEntity).order_by(UserEntity.id)
         entities = self._session.scalars(query).all()
 
         return [entity.to_model() for entity in entities]
@@ -61,22 +61,21 @@ class UserService:
 
         """
         try:
-            if (user.id != None):
+            if user.id != None:
                 user = self.get_user_by_id(user.id)
+            else:
+                user_entity = UserEntity.from_model(user)
+                # add new user to table
+                self._session.add(user_entity)
+                self._session.commit()
         except:
-            # if does not exist, create new object
-            user_entity = UserEntity.from_model(user)
+            raise Exception(f"Failed to create user")
 
-            # add new user to table
-            self._session.add(user_entity)
-            self._session.commit()
-        finally:
-            # return added object
-            return user
-        
-    def delete(self, user: User) -> None:   
+        return user
+
+    def delete(self, user: User) -> None:
         """
-        Delete a user 
+        Delete a user
 
         Args: the user to delete
 
@@ -86,34 +85,30 @@ class UserService:
 
         if obj is None:
             raise Exception(f"No matching user found")
-        
+
         self._session.delete(obj)
         self._session.commit()
 
-
-
-    def update(self, user: User) -> User: 
+    def update(self, user: User) -> User:
         """
         Updates a user
 
         Args: User to be updated
 
         Returns: The updated User
-        """   
+        """
         obj = self._session.get(UserEntity, user.id)
 
         if obj is None:
             raise Exception(f"No matching user found")
-        
-        obj.username = user.username
-        obj.role = user.role
-        obj.email = user.email
-        obj.program = user.program
-        obj.experience = user.experience
-        obj.group = user.group
+
+        obj.username = user.username if user.username else obj.username
+        obj.role = user.role if user.role else obj.role
+        obj.email = user.email if user.email else obj.email
+        obj.program = user.program if user.program else obj.program
+        obj.experience = user.experience if user.experience else obj.experience
+        obj.group = user.group if user.group else obj.group
 
         self._session.commit()
 
         return obj.to_model()
-
-

compass/README.md

@@ -24,8 +24,8 @@ This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-opti
 
 To learn more about Next.js, take a look at the following resources:
 
--   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
--   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 

compass/app/admin/page.tsx

@@ -4,41 +4,98 @@ import { PageLayout } from "@/components/PageLayout";
 import UserTable from "@/components/Table/UserTable";
 import User from "@/utils/models/User";
 import { createClient } from "@/utils/supabase/client";
-
 import { UsersIcon } from "@heroicons/react/24/solid";
 import { useEffect, useState } from "react";
 
 export default function Page() {
     const [users, setUsers] = useState<User[]>([]);
+    const [currUser, setCurrUser] = useState<User | undefined>(undefined);
+    const [error, setError] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
-        async function getUser() {
-            const supabase = createClient();
+        async function getUsers() {
+            try {
+                setIsLoading(true);
+                setError(null);
 
-            const { data, error } = await supabase.auth.getUser();
+                const supabase = createClient();
+                const { data: userData, error: authError } =
+                    await supabase.auth.getUser();
 
-            if (error) {
-                console.log("Accessed admin page but not logged in");
-                return;
+                if (authError) {
+                    throw new Error("Authentication failed. Please sign in.");
+                }
+
+                // Fetch users list and current user data in parallel
+                const [usersResponse, userResponse] = await Promise.all([
+                    fetch(`/api/user/all?uuid=${userData.user.id}`),
+                    fetch(`/api/user?uuid=${userData.user.id}`),
+                ]);
+
+                // Check for HTTP errors
+                if (!usersResponse.ok) {
+                    throw new Error(
+                        `Failed to fetch users: ${usersResponse.statusText}`
+                    );
+                }
+                if (!userResponse.ok) {
+                    throw new Error(
+                        `Failed to fetch user data: ${userResponse.statusText}`
+                    );
+                }
+
+                // Parse the responses
+                const [usersAPI, currUserData] = await Promise.all([
+                    usersResponse.json(),
+                    userResponse.json(),
+                ]);
+
+                // Verify admin status
+                if (currUserData.role !== "ADMIN") {
+                    throw new Error("Unauthorized: Admin access required");
+                }
+
+                setUsers(usersAPI);
+                setCurrUser(currUserData);
+            } catch (err) {
+                console.error("Error fetching data:", err);
+                setError(
+                    err instanceof Error
+                        ? err.message
+                        : "An unexpected error occurred"
+                );
+                setUsers([]);
+                setCurrUser(undefined);
+            } finally {
+                setIsLoading(false);
             }
-
-            const userListData = await fetch(
-                `${process.env.NEXT_PUBLIC_HOST}/api/user/all?uuid=${data.user.id}`
-            );
-
-            const users: User[] = await userListData.json();
-
-            setUsers(users);
         }
 
-        getUser();
+        getUsers();
     }, []);
 
     return (
         <div className="min-h-screen flex flex-col">
-            {/* icon + title  */}
             <PageLayout title="Users" icon={<UsersIcon />}>
-                <UserTable data={users} setData={setUsers} />
+                {isLoading ? (
+                    <div className="flex justify-center items-center h-64">
+                        <div className="animate-spin rounded-full h-24 w-24 border-b-2 border-purple-700" />
+                    </div>
+                ) : error ? (
+                    <div className="flex justify-center items-center h-64">
+                        <div className="text-red-500 text-center">
+                            <p className="text-lg font-semibold">Error</p>
+                            <p className="text-sm">{error}</p>
+                        </div>
+                    </div>
+                ) : (
+                    <UserTable
+                        data={users}
+                        setData={setUsers}
+                        user={currUser}
+                    />
+                )}
             </PageLayout>
         </div>
     );

compass/app/api/resource/create/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from "next/server";
+import Resource from "@/utils/models/Resource";
+
+export async function POST(request: Request) {
+    const apiEndpoint = `${process.env.NEXT_PUBLIC_API_HOST}/api/resource`;
+
+    try {
+        const resourceData = await request.json();
+
+        console.log("RESOURCE DATA", JSON.stringify(resourceData));
+
+        const { searchParams } = new URL(request.url);
+        const uuid = searchParams.get("uuid");
+
+        // Send the POST request to the backend
+        const response = await fetch(`${apiEndpoint}?uuid=${uuid}`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(resourceData),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const createdResource: Resource = await response.json();
+        return NextResponse.json(createdResource, { status: response.status });
+    } catch (error) {
+        console.error("Error creating resource:", error);
+        return NextResponse.json(
+            { error: "Failed to create resource" },
+            { status: 500 }
+        );
+    }
+}

compass/app/api/resource/update/route.ts

@@ -0,0 +1,37 @@
+import Resource from "@/utils/models/Resource";
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+    const apiEndpoint = `${process.env.NEXT_PUBLIC_API_HOST}/api/resource`;
+
+    try {
+        const resourceData = await request.json();
+
+        console.log("RESOURCE DATA", JSON.stringify(resourceData));
+
+        const { searchParams } = new URL(request.url);
+        const uuid = searchParams.get("uuid");
+
+        // Send the POST request to the backend
+        const response = await fetch(`${apiEndpoint}?uuid=${uuid}`, {
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(resourceData),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const resource: Resource = await response.json();
+        return NextResponse.json(resource, { status: response.status });
+    } catch (error) {
+        console.error("Error creating user:", error);
+        return NextResponse.json(
+            { error: "Failed to update resource" },
+            { status: 500 }
+        );
+    }
+}

compass/app/api/service/create/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from "next/server";
+import User from "@/utils/models/User";
+
+export async function POST(request: Request) {
+    const apiEndpoint = `${process.env.NEXT_PUBLIC_API_HOST}/api/service`;
+
+    try {
+        const serviceData = await request.json();
+
+        console.log("SERVICE DATA", JSON.stringify(serviceData));
+
+        const { searchParams } = new URL(request.url);
+        const uuid = searchParams.get("uuid");
+
+        // Send the POST request to the backend
+        const response = await fetch(`${apiEndpoint}?uuid=${uuid}`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(serviceData),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const createdService: User = await response.json();
+        return NextResponse.json(createdService, { status: response.status });
+    } catch (error) {
+        console.error("Error creating service:", error);
+        return NextResponse.json(
+            { error: "Failed to create service" },
+            { status: 500 }
+        );
+    }
+}

compass/app/api/service/update/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from "next/server";
+import Service from "@/utils/models/Service";
+
+export async function POST(request: Request) {
+    const apiEndpoint = `${process.env.NEXT_PUBLIC_API_HOST}/api/service`;
+
+    try {
+        const serviceData = await request.json();
+
+        console.log("SERVICE DATA", JSON.stringify(serviceData));
+
+        const { searchParams } = new URL(request.url);
+        const uuid = searchParams.get("uuid");
+
+        // Send the POST request to the backend
+        const response = await fetch(`${apiEndpoint}?uuid=${uuid}`, {
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(serviceData),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const createdService: Service = await response.json();
+        return NextResponse.json(createdService, { status: response.status });
+    } catch (error) {
+        console.error("Error creating service:", error);
+        return NextResponse.json(
+            { error: "Failed to update service" },
+            { status: 500 }
+        );
+    }
+}

compass/app/api/user/all/route.ts

@@ -9,7 +9,7 @@ export async function GET(request: Request) {
     const { searchParams } = new URL(request.url);
     const uuid = searchParams.get("uuid");
 
-    const data = await fetch(`${apiEndpoint}?user_id=${uuid}`);
+    const data = await fetch(`${apiEndpoint}?uuid=${uuid}`);
 
     const userData: User[] = await data.json();
     // TODO: Remove make every user visible

compass/app/api/user/create/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from "next/server";
+import User from "@/utils/models/User";
+
+export async function POST(request: Request) {
+    const apiEndpoint = `${process.env.NEXT_PUBLIC_API_HOST}/api/user`;
+
+    try {
+        const userData = await request.json();
+
+        console.log("USER DATA", JSON.stringify(userData));
+
+        const { searchParams } = new URL(request.url);
+        const uuid = searchParams.get("uuid");
+
+        // Send the POST request to the backend
+        const response = await fetch(`${apiEndpoint}?uuid=${uuid}`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(userData),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const createdUser: User = await response.json();
+        return NextResponse.json(createdUser, { status: response.status });
+    } catch (error) {
+        console.error("Error creating user:", error);
+        return NextResponse.json(
+            { error: "Failed to create user" },
+            { status: 500 }
+        );
+    }
+}

compass/app/api/user/update/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from "next/server";
+import User from "@/utils/models/User";
+
+export async function POST(request: Request) {
+    const apiEndpoint = `${process.env.NEXT_PUBLIC_API_HOST}/api/user`;
+
+    try {
+        const userData = await request.json();
+
+        console.log("USER DATA", JSON.stringify(userData));
+
+        const { searchParams } = new URL(request.url);
+        const uuid = searchParams.get("uuid");
+
+        // Send the POST request to the backend
+        const response = await fetch(`${apiEndpoint}?uuid=${uuid}`, {
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(userData),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const createdUser: User = await response.json();
+        return NextResponse.json(createdUser, { status: response.status });
+    } catch (error) {
+        console.error("Error creating user:", error);
+        return NextResponse.json(
+            { error: "Failed to create user" },
+            { status: 500 }
+        );
+    }
+}

compass/app/auth/login/page.tsx

@@ -77,6 +77,8 @@ export default function Page() {
                 alt="Compass Center logo."
                 width={100}
                 height={91}
+                style={{ height: "auto", width: "auto" }}
+                priority
             />
             <h1 className="font-bold text-2xl text-purple-800">Login</h1>
             <div className="mb-6">

compass/app/resource/page.tsx

@@ -4,31 +4,68 @@ import { PageLayout } from "@/components/PageLayout";
 import Resource from "@/utils/models/Resource";
 import ResourceTable from "@/components/Table/ResourceTable";
 import { createClient } from "@/utils/supabase/client";
-
 import { BookmarkIcon } from "@heroicons/react/24/solid";
 import { useEffect, useState } from "react";
+import User from "@/utils/models/User";
 
 export default function Page() {
     const [resources, setResources] = useState<Resource[]>([]);
+    const [currUser, setCurrUser] = useState<User | undefined>(undefined);
+    const [error, setError] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
         async function getResources() {
-            const supabase = createClient();
+            try {
+                setIsLoading(true);
+                setError(null);
 
-            const { data, error } = await supabase.auth.getUser();
+                const supabase = createClient();
+                const { data: userData, error: authError } =
+                    await supabase.auth.getUser();
 
-            if (error) {
-                console.log("Accessed admin page but not logged in");
-                return;
+                if (authError) {
+                    throw new Error("Authentication failed. Please sign in.");
+                }
+
+                // Fetch resources and user data in parallel
+                const [resourceResponse, userResponse] = await Promise.all([
+                    fetch(`/api/resource/all?uuid=${userData.user.id}`),
+                    fetch(`/api/user?uuid=${userData.user.id}`),
+                ]);
+
+                // Check for HTTP errors
+                if (!resourceResponse.ok) {
+                    throw new Error(
+                        `Failed to fetch resources: ${resourceResponse.statusText}`
+                    );
+                }
+                if (!userResponse.ok) {
+                    throw new Error(
+                        `Failed to fetch user data: ${userResponse.statusText}`
+                    );
+                }
+
+                // Parse the responses
+                const [resourcesAPI, currUserData] = await Promise.all([
+                    resourceResponse.json(),
+                    userResponse.json(),
+                ]);
+
+                setResources(resourcesAPI);
+                setCurrUser(currUserData);
+            } catch (err) {
+                console.error("Error fetching data:", err);
+                setError(
+                    err instanceof Error
+                        ? err.message
+                        : "An unexpected error occurred"
+                );
+                setResources([]);
+                setCurrUser(undefined);
+            } finally {
+                setIsLoading(false);
             }
-
-            const userListData = await fetch(
-                `${process.env.NEXT_PUBLIC_HOST}/api/resource/all?uuid=${data.user.id}`
-            );
-
-            const resourcesAPI: Resource[] = await userListData.json();
-
-            setResources(resourcesAPI);
         }
 
         getResources();
@@ -36,9 +73,25 @@ export default function Page() {
 
     return (
         <div className="min-h-screen flex flex-col">
-            {/* icon + title  */}
             <PageLayout title="Resources" icon={<BookmarkIcon />}>
-                <ResourceTable data={resources} setData={setResources} />
+                {isLoading ? (
+                    <div className="flex justify-center items-center h-64">
+                        <div className="animate-spin rounded-full h-24 w-24 border-b-2 border-purple-700" />
+                    </div>
+                ) : error ? (
+                    <div className="flex justify-center items-center h-64">
+                        <div className="text-red-500 text-center">
+                            <p className="text-lg font-semibold">Error</p>
+                            <p className="text-sm">{error}</p>
+                        </div>
+                    </div>
+                ) : (
+                    <ResourceTable
+                        data={resources}
+                        setData={setResources}
+                        user={currUser}
+                    />
+                )}
             </PageLayout>
         </div>
     );

compass/app/service/page.tsx

@@ -3,31 +3,69 @@
 import { PageLayout } from "@/components/PageLayout";
 import ServiceTable from "@/components/Table/ServiceTable";
 import Service from "@/utils/models/Service";
+import User from "@/utils/models/User";
 import { createClient } from "@/utils/supabase/client";
-
 import { ClipboardIcon } from "@heroicons/react/24/solid";
 import { useEffect, useState } from "react";
 
 export default function Page() {
     const [services, setServices] = useState<Service[]>([]);
+    const [currUser, setCurrUser] = useState<User | undefined>(undefined);
+    const [error, setError] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
         async function getServices() {
-            const supabase = createClient();
+            try {
+                setIsLoading(true);
+                setError(null);
 
-            const { data, error } = await supabase.auth.getUser();
+                const supabase = createClient();
+                const { data: userData, error: authError } =
+                    await supabase.auth.getUser();
 
-            if (error) {
-                console.log("Accessed admin page but not logged in");
-                return;
+                if (authError) {
+                    throw new Error("Authentication failed. Please sign in.");
+                }
+
+                // Fetch services and user data in parallel
+                const [serviceResponse, userResponse] = await Promise.all([
+                    fetch(`/api/service/all?uuid=${userData.user.id}`),
+                    fetch(`/api/user?uuid=${userData.user.id}`),
+                ]);
+
+                // Check for HTTP errors
+                if (!serviceResponse.ok) {
+                    throw new Error(
+                        `Failed to fetch services: ${serviceResponse.statusText}`
+                    );
+                }
+                if (!userResponse.ok) {
+                    throw new Error(
+                        `Failed to fetch user data: ${userResponse.statusText}`
+                    );
+                }
+
+                // Parse the responses
+                const [servicesAPI, currUserData] = await Promise.all([
+                    serviceResponse.json(),
+                    userResponse.json(),
+                ]);
+
+                setCurrUser(currUserData);
+                setServices(servicesAPI);
+            } catch (err) {
+                console.error("Error fetching data:", err);
+                setError(
+                    err instanceof Error
+                        ? err.message
+                        : "An unexpected error occurred"
+                );
+                setServices([]);
+                setCurrUser(undefined);
+            } finally {
+                setIsLoading(false);
             }
-
-            const serviceListData = await fetch(
-                `${process.env.NEXT_PUBLIC_HOST}/api/service/all?uuid=${data.user.id}`
-            );
-
-            const servicesAPI: Service[] = await serviceListData.json();
-            setServices(servicesAPI);
         }
 
         getServices();
@@ -35,9 +73,25 @@ export default function Page() {
 
     return (
         <div className="min-h-screen flex flex-col">
-            {/* icon + title  */}
             <PageLayout title="Services" icon={<ClipboardIcon />}>
-                <ServiceTable data={services} setData={setServices} />
+                {isLoading ? (
+                    <div className="flex justify-center items-center h-64">
+                        <div className="animate-spin rounded-full h-24 w-24 border-b-2 border-purple-700" />
+                    </div>
+                ) : error ? (
+                    <div className="flex justify-center items-center h-64">
+                        <div className="text-red-500 text-center">
+                            <p className="text-lg font-semibold">Error</p>
+                            <p className="text-sm">{error}</p>
+                        </div>
+                    </div>
+                ) : (
+                    <ServiceTable
+                        data={services}
+                        setData={setServices}
+                        user={currUser}
+                    />
+                )}
             </PageLayout>
         </div>
     );

compass/app/test/page.tsx

@@ -76,6 +76,8 @@ export default function Page() {
                 alt="Compass Center logo."
                 width={100}
                 height={91}
+                style={{ height: "auto", width: "auto" }}
+                priority
             />
             <h1 className="font-bold text-2xl text-purple-800">Login</h1>
             <div className="mb-6">

compass/components/Drawer/CreateDrawer.tsx

@@ -0,0 +1,232 @@
+import { Dispatch, FunctionComponent, ReactNode, SetStateAction } from "react";
+import React, { useState } from "react";
+import { ChevronDoubleLeftIcon } from "@heroicons/react/24/solid";
+import {
+    ArrowsPointingOutIcon,
+    ArrowsPointingInIcon,
+} from "@heroicons/react/24/outline";
+import TagsInput from "../TagsInput/Index";
+import { Details } from "./Drawer";
+
+type CreateDrawerProps = {
+    details: Details[];
+    onCreate: (newItem: any) => boolean;
+};
+
+const CreateDrawer: FunctionComponent<CreateDrawerProps> = ({
+    details,
+    onCreate,
+}: CreateDrawerProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFull, setIsFull] = useState(false);
+    const [newItemContent, setNewItemContent] = useState<any>({});
+    const [renderKey, setRenderKey] = useState(0);
+
+    const handleContentChange = (
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+        const { name, value } = e.target;
+        setNewItemContent((prev: any) => ({
+            ...prev,
+            [name]: value,
+        }));
+    };
+
+    const initializeSelectField = (key: string) => {
+        if (!newItemContent[key]) {
+            setNewItemContent((prev: any) => ({
+                ...prev,
+                [key]: [],
+            }));
+        }
+    };
+
+    const handleCreate = () => {
+        if (onCreate(newItemContent)) {
+            console.log("newItemContent", newItemContent);
+            setNewItemContent({});
+            setIsOpen(false);
+        }
+    };
+
+    const toggleDrawer = () => {
+        setIsOpen(!isOpen);
+        if (isFull) {
+            setIsFull(!isFull);
+        }
+        if (!isOpen) {
+            setRenderKey((prev) => prev + 1);
+        }
+    };
+
+    const toggleDrawerFullScreen = () => setIsFull(!isFull);
+
+    const drawerClassName = `fixed top-0 right-0 h-full bg-white transform ease-in-out duration-300 z-20 overflow-y-auto ${
+        isOpen ? "translate-x-0 shadow-2xl" : "translate-x-full"
+    } ${isFull ? "w-full" : "w-[600px]"}`;
+
+    const iconComponent = isFull ? (
+        <ArrowsPointingInIcon className="h-5 w-5" />
+    ) : (
+        <ArrowsPointingOutIcon className="h-5 w-5" />
+    );
+
+    return (
+        <div>
+            <button
+                className="text-sm text-white font-medium bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded-md"
+                onClick={toggleDrawer}
+            >
+                Create New
+            </button>
+            <div className={drawerClassName}>
+                <div className="sticky top-0 flex items-center justify-between p-4 bg-white border-b border-gray-200">
+                    <h2 className="text-xl font-semibold text-gray-800">
+                        Create New Item
+                    </h2>
+                    <div className="flex items-center space-x-2">
+                        <button
+                            onClick={toggleDrawerFullScreen}
+                            className="p-2 text-gray-500 hover:text-gray-800 hover:bg-gray-100 rounded-lg"
+                        >
+                            {iconComponent}
+                        </button>
+                        <button
+                            onClick={toggleDrawer}
+                            className="p-2 text-gray-500 hover:text-gray-800 hover:bg-gray-100 rounded-lg"
+                        >
+                            <ChevronDoubleLeftIcon className="h-5 w-5" />
+                        </button>
+                    </div>
+                </div>
+                <div className="p-6">
+                    <div className="flex flex-col space-y-4">
+                        {details.map((detail, index) => {
+                            const value = newItemContent[detail.key] || "";
+                            let inputField;
+
+                            switch (detail.inputType) {
+                                case "select-one":
+                                    initializeSelectField(detail.key);
+                                    inputField = (
+                                        <TagsInput
+                                            key={`${detail.key}-${renderKey}`}
+                                            presetValue={[]}
+                                            presetOptions={
+                                                detail.presetOptionsValues || []
+                                            }
+                                            setPresetOptions={
+                                                detail.presetOptionsSetter ||
+                                                (() => {})
+                                            }
+                                            singleValue={true}
+                                            onTagsChange={(
+                                                tags: Set<string>
+                                            ) => {
+                                                setNewItemContent(
+                                                    (prev: any) => ({
+                                                        ...prev,
+                                                        [detail.key]:
+                                                            tags.size > 0
+                                                                ? Array.from(
+                                                                      tags
+                                                                  )[0]
+                                                                : null,
+                                                    })
+                                                );
+                                            }}
+                                        />
+                                    );
+                                    break;
+                                case "select-multiple":
+                                    initializeSelectField(detail.key);
+                                    inputField = (
+                                        <TagsInput
+                                            key={`${detail.key}-${renderKey}`}
+                                            presetValue={
+                                                newItemContent[detail.key] || []
+                                            }
+                                            presetOptions={
+                                                detail.presetOptionsValues || []
+                                            }
+                                            setPresetOptions={
+                                                detail.presetOptionsSetter ||
+                                                (() => {})
+                                            }
+                                            onTagsChange={(
+                                                tags: Set<string>
+                                            ) => {
+                                                setNewItemContent(
+                                                    (prev: any) => ({
+                                                        ...prev,
+                                                        [detail.key]:
+                                                            Array.from(tags),
+                                                    })
+                                                );
+                                            }}
+                                        />
+                                    );
+                                    break;
+                                case "textarea":
+                                    inputField = (
+                                        <textarea
+                                            name={detail.key}
+                                            value={value}
+                                            onChange={handleContentChange}
+                                            rows={4}
+                                            onInput={(e) => {
+                                                const target =
+                                                    e.target as HTMLTextAreaElement;
+                                                target.style.height = "auto";
+                                                target.style.height =
+                                                    target.scrollHeight + "px";
+                                            }}
+                                            className="w-full p-2 focus:outline-none border border-gray-200 rounded-md resize-none font-normal"
+                                            placeholder={`Enter ${detail.label.toLowerCase()}...`}
+                                        />
+                                    );
+                                    break;
+                                default:
+                                    inputField = (
+                                        <input
+                                            type={detail.inputType}
+                                            name={detail.key}
+                                            value={value}
+                                            onChange={handleContentChange}
+                                            className="w-full p-2 border border-gray-200 rounded-md focus:outline-none focus:border-purple-500"
+                                            placeholder={`Enter ${detail.label.toLowerCase()}...`}
+                                        />
+                                    );
+                            }
+
+                            return (
+                                <div
+                                    key={index}
+                                    className="flex flex-col gap-2"
+                                >
+                                    <label className="flex items-center text-sm text-gray-700 gap-2">
+                                        <span className="text-gray-500">
+                                            {detail.icon}
+                                        </span>
+                                        {detail.label}
+                                    </label>
+                                    {inputField}
+                                </div>
+                            );
+                        })}
+                    </div>
+                    <div className="mt-6 flex justify-end">
+                        <button
+                            onClick={handleCreate}
+                            className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700"
+                        >
+                            Create
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CreateDrawer;

compass/components/Drawer/Drawer.tsx

@@ -1,78 +1,109 @@
 import { Dispatch, FunctionComponent, ReactNode, SetStateAction } from "react";
 import React, { useState } from "react";
 import { ChevronDoubleLeftIcon } from "@heroicons/react/24/solid";
-import {
-    StarIcon as SolidStarIcon,
-    EnvelopeIcon,
-    UserIcon,
-} from "@heroicons/react/24/solid";
+import { StarIcon as SolidStarIcon, UserIcon } from "@heroicons/react/24/solid";
 import {
     ArrowsPointingOutIcon,
     ArrowsPointingInIcon,
     StarIcon as OutlineStarIcon,
-    ListBulletIcon,
 } from "@heroicons/react/24/outline";
 import TagsInput from "../TagsInput/Index";
+import { Tag } from "../TagsInput/Tag";
 
-type DrawerProps = {
-    title: string;
-    children: ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    type?: "button" | "submit" | "reset"; // specify possible values for type
-    disabled?: boolean;
-    editableContent?: any;
-    onSave?: (content: any) => void;
-    rowContent?: any;
-    setData: Dispatch<SetStateAction<any>>;
-};
+type InputType =
+    | "text"
+    | "email"
+    | "textarea"
+    | "select-one"
+    | "select-multiple";
 
-interface EditContent {
-    content: string;
-    isEditing: boolean;
+export interface Details {
+    key: string;
+    label: string;
+    inputType: InputType;
+    icon: ReactNode;
+    presetOptionsValues?: string[];
+    presetOptionsSetter?: Dispatch<SetStateAction<string[]>>;
 }
 
+type DrawerProps = {
+    titleKey: string;
+    details: Details[];
+    rowContent?: any;
+    setRowContent?: Dispatch<SetStateAction<any>>;
+    isAdmin?: boolean;
+    updateRoute: string;
+};
+
 const Drawer: FunctionComponent<DrawerProps> = ({
-    title,
-    children,
-    onSave,
-    editableContent,
+    titleKey,
+    details,
     rowContent,
-    setData,
-}) => {
+    setRowContent,
+    isAdmin,
+    updateRoute,
+}: DrawerProps) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isFull, setIsFull] = useState(false);
     const [isFavorite, setIsFavorite] = useState(false);
     const [tempRowContent, setTempRowContent] = useState(rowContent);
 
-    const onRowUpdate = (updatedRow: any) => {
-        setData((prevData: any) =>
-            prevData.map((row: any) =>
-                row.id === updatedRow.id ? updatedRow : row
-            )
-        );
+    const handleTempRowContentChangeHTML = (
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+        const { name, value } = e.target;
+        handleTempRowContentChange(name, value);
     };
 
-    const handleTempRowContentChange = (e) => {
-        const { name, value } = e.target;
-        console.log(name);
-        console.log(value);
-        setTempRowContent((prevContent) => ({
-            ...prevContent,
+    const handleTempRowContentChange = (name: string, value: any) => {
+        setTempRowContent((prev: any) => ({
+            ...prev,
             [name]: value,
         }));
     };
 
-    const handleEnterPress = (e) => {
+    const handleEnterPress = (
+        e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
         if (e.key === "Enter") {
-            e.preventDefault();
-            // Update the rowContent with the temporaryRowContent
-            if (onRowUpdate) {
-                onRowUpdate(tempRowContent);
-            }
         }
     };
 
+    const handleUpdate = async () => {
+        const response = await fetch(updateRoute, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(tempRowContent),
+        });
+
+        return response;
+    };
+
     const toggleDrawer = () => {
+        if (setRowContent && isOpen) {
+            // Check if any values have changed
+            const hasChanges = Object.keys(tempRowContent).some(
+                (key) => tempRowContent[key] !== rowContent[key]
+            );
+
+            if (hasChanges) {
+                handleUpdate().then((response) => {
+                    if (response.ok) {
+                        setRowContent((prev: any) => {
+                            return prev.map((row: any) => {
+                                if (row.id === tempRowContent.id) {
+                                    return tempRowContent;
+                                }
+                                return row;
+                            });
+                        });
+                    }
+                });
+            }
+        }
+
         setIsOpen(!isOpen);
         if (isFull) {
             setIsFull(!isFull);
@@ -99,34 +130,6 @@ const Drawer: FunctionComponent<DrawerProps> = ({
         <OutlineStarIcon className="h-5 w-5" />
     );
 
-    const [presetOptions, setPresetOptions] = useState([
-        "administrator",
-        "volunteer",
-        "employee",
-    ]);
-    const [rolePresetOptions, setRolePresetOptions] = useState([
-        "domestic",
-        "community",
-        "economic",
-    ]);
-    const [tagColors, setTagColors] = useState(new Map());
-
-    const getTagColor = (tag: string) => {
-        if (!tagColors.has(tag)) {
-            const colors = [
-                "bg-cyan-100",
-                "bg-blue-100",
-                "bg-green-100",
-                "bg-yellow-100",
-                "bg-purple-100",
-            ];
-            const randomColor =
-                colors[Math.floor(Math.random() * colors.length)];
-            setTagColors(new Map(tagColors).set(tag, randomColor));
-        }
-        return tagColors.get(tag);
-    };
-
     return (
         <div>
             <button
@@ -137,7 +140,6 @@ const Drawer: FunctionComponent<DrawerProps> = ({
             >
                 Open
             </button>
-            <div className={drawerClassName}></div>
             <div className={drawerClassName}>
                 <div className="flex items-center justify-between p-4">
                     <div className="flex flex-row items-center justify-between space-x-2">
@@ -145,7 +147,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({
                             <UserIcon />
                         </span>
                         <h2 className="text-lg text-gray-800 font-semibold">
-                            {rowContent.username}
+                            {rowContent[titleKey]}
                         </h2>
                     </div>
                     <div>
@@ -170,81 +172,202 @@ const Drawer: FunctionComponent<DrawerProps> = ({
                     </div>
                 </div>
                 <div className="p-4">
-                    <table className="p-4">
-                        <tbody className="items-center">
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <UserIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Username</td>
+                    <div className="flex flex-col space-y-3">
+                        {details.map((detail, index) => {
+                            const value = tempRowContent[detail.key];
+                            let valueToRender = <></>;
+
+                            switch (detail.inputType) {
+                                case "select-one":
+                                    valueToRender = (
+                                        <div className="flex-1">
+                                            <div className="rounded-md px-2 py-1">
+                                                {isAdmin ? (
+                                                    <TagsInput
+                                                        presetValue={
+                                                            typeof value ===
+                                                            "string"
+                                                                ? [value]
+                                                                : value || []
+                                                        }
+                                                        presetOptions={
+                                                            detail.presetOptionsValues ||
+                                                            []
+                                                        }
+                                                        setPresetOptions={
+                                                            detail.presetOptionsSetter ||
+                                                            (() => {})
+                                                        }
+                                                        singleValue={true}
+                                                        onTagsChange={(
+                                                            tags: Set<string>
+                                                        ) => {
+                                                            const tagsArray =
+                                                                Array.from(
+                                                                    tags
+                                                                );
+                                                            handleTempRowContentChange(
+                                                                detail.key,
+                                                                tagsArray.length >
+                                                                    0
+                                                                    ? tagsArray[0]
+                                                                    : null
+                                                            );
+                                                        }}
+                                                    />
+                                                ) : (
+                                                    <div className="flex">
+                                                        <Tag>
+                                                            {value
+                                                                ? value
+                                                                : "no value"}
+                                                        </Tag>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </div>
+                                    );
+                                    break;
+                                case "select-multiple":
+                                    valueToRender = (
+                                        <div className="flex-1">
+                                            <div className="rounded-md px-2 py-1">
+                                                {isAdmin ? (
+                                                    <TagsInput
+                                                        presetValue={
+                                                            typeof value ===
+                                                            "string"
+                                                                ? [value]
+                                                                : value || []
+                                                        }
+                                                        presetOptions={
+                                                            detail.presetOptionsValues ||
+                                                            []
+                                                        }
+                                                        setPresetOptions={
+                                                            detail.presetOptionsSetter ||
+                                                            (() => {})
+                                                        }
+                                                        onTagsChange={(
+                                                            tags: Set<string>
+                                                        ) => {
+                                                            handleTempRowContentChange(
+                                                                detail.key,
+                                                                Array.from(tags)
+                                                            );
+                                                        }}
+                                                    />
+                                                ) : (
+                                                    <div className="flex flex-wrap gap-2">
+                                                        {value &&
+                                                        value.length > 0 ? (
+                                                            value.map(
+                                                                (
+                                                                    tag: string,
+                                                                    index: number
+                                                                ) => (
+                                                                    <Tag
+                                                                        key={
+                                                                            index
+                                                                        }
+                                                                    >
+                                                                        {tag}
+                                                                    </Tag>
+                                                                )
+                                                            )
+                                                        ) : (
+                                                            <Tag>
+                                                                no requirements
+                                                            </Tag>
+                                                        )}
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </div>
+                                    );
+                                    break;
+                                case "textarea":
+                                    valueToRender = (
+                                        <div className="flex-1">
+                                            <div className="hover:bg-gray-50 rounded-md px-2 py-1">
+                                                <textarea
+                                                    name={detail.key}
+                                                    value={value}
+                                                    onChange={
+                                                        handleTempRowContentChangeHTML
+                                                    }
+                                                    onKeyDown={handleEnterPress}
+                                                    rows={4}
+                                                    disabled={!isAdmin}
+                                                    onInput={(e) => {
+                                                        const target =
+                                                            e.target as HTMLTextAreaElement;
+                                                        target.style.height =
+                                                            "auto";
+                                                        target.style.height =
+                                                            target.scrollHeight +
+                                                            "px";
+                                                    }}
+                                                    className="w-full p-2 focus:outline-none border border-gray-200 rounded-md resize-none font-normal bg-transparent"
+                                                />
+                                            </div>
+                                        </div>
+                                    );
+                                    break;
+                                case "text":
+                                    valueToRender = (
+                                        <div className="flex-1">
+                                            <div className="hover:bg-gray-50 rounded-md px-2 py-1">
+                                                <input
+                                                    type={detail.inputType}
+                                                    name={detail.key}
+                                                    value={value}
+                                                    disabled={!isAdmin}
+                                                    onChange={
+                                                        handleTempRowContentChangeHTML
+                                                    }
+                                                    onKeyDown={handleEnterPress}
+                                                    className="w-full p-1 focus:outline-gray-200 bg-transparent"
+                                                />
+                                            </div>
+                                        </div>
+                                    );
+                                    break;
+                                case "email":
+                                    valueToRender = (
+                                        <div className="flex-1">
+                                            <div className="hover:bg-gray-50 rounded-md px-2 py-1">
+                                                <input
+                                                    type={detail.inputType}
+                                                    name={detail.key}
+                                                    value={value}
+                                                    onChange={
+                                                        handleTempRowContentChangeHTML
+                                                    }
+                                                    onKeyDown={handleEnterPress}
+                                                    disabled={!isAdmin}
+                                                    className="w-full p-1 font-normal hover:text-gray-400 focus:outline-gray-200 underline text-gray-500 bg-transparent"
+                                                />
+                                            </div>
+                                        </div>
+                                    );
+                                    break;
+                            }
+
+                            return (
+                                <div
+                                    key={index}
+                                    className="flex items-center text-xs gap-3"
+                                >
+                                    <div className="flex items-center text-gray-500">
+                                        {detail.icon}
+                                    </div>
+                                    <div className="w-32">{detail.label}</div>
+                                    {valueToRender}
                                 </div>
-                                <td className="w-3/4 w-3/4 p-2 pl-0">
-                                    <input
-                                        type="text"
-                                        name="username"
-                                        value={tempRowContent.username}
-                                        onChange={handleTempRowContentChange}
-                                        onKeyDown={handleEnterPress}
-                                        className="ml-2 w-full p-1 focus:outline-gray-200  hover:bg-gray-50"
-                                    />
-                                </td>
-                            </tr>
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <ListBulletIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Role</td>
-                                </div>
-                                <td className="w-3/4 hover:bg-gray-50">
-                                    <TagsInput
-                                        presetValue={tempRowContent.role}
-                                        presetOptions={presetOptions}
-                                        setPresetOptions={setPresetOptions}
-                                        getTagColor={getTagColor}
-                                        setTagColors={setTagColors}
-                                    />
-                                </td>
-                            </tr>
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <EnvelopeIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Email</td>
-                                </div>
-                                <td className="w-3/4 p-2 pl-0">
-                                    <input
-                                        type="text"
-                                        name="email"
-                                        value={tempRowContent.email}
-                                        onChange={handleTempRowContentChange}
-                                        onKeyDown={handleEnterPress}
-                                        className="ml-2 w-80 p-1 font-normal hover:text-gray-400 focus:outline-gray-200  hover:bg-gray-50 underline text-gray-500"
-                                    />
-                                </td>
-                            </tr>
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <ListBulletIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Type of Program</td>
-                                </div>
-                                <td className="w-3/4 hover:bg-gray-50">
-                                    {/* {rowContent.program} */}
-                                    <TagsInput
-                                        presetValue={tempRowContent.program}
-                                        presetOptions={rolePresetOptions}
-                                        setPresetOptions={setRolePresetOptions}
-                                        getTagColor={getTagColor}
-                                        setTagColors={setTagColors}
-                                    />
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                            );
+                        })}
+                    </div>
                     <br />
                 </div>
             </div>

compass/components/FilterBox/index.tsx

@@ -33,7 +33,7 @@ export const FilterBox = () => {
             >
                 <span>{tag}</span>
                 <span
-                    className="ml-2 cursor-pointer"
+                    className="cursor-pointer"
                     onClick={() => handleTagChange(tag)}
                 >
                     &times;

compass/components/RootLayout.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import Sidebar from "@/components/Sidebar/Sidebar";
+import React, { useState, useEffect } from "react";
+import { createClient } from "@/utils/supabase/client";
+import { useRouter } from "next/navigation";
+import User, { Role } from "@/utils/models/User";
+import Loading from "@/components/auth/Loading";
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [user, setUser] = useState<User | null>(null); // Initialize user as null
+    const router = useRouter();
+
+    useEffect(() => {
+        async function getUser() {
+            const supabase = createClient();
+
+            const { data, error } = await supabase.auth.getUser();
+
+            if (error || !data?.user) {
+                console.log("User not logged in or error fetching user");
+                router.push("/auth/login");
+                return;
+            }
+
+            const userData = await fetch(
+                `${process.env.NEXT_PUBLIC_HOST}/api/user?uuid=${data.user.id}`
+            );
+
+            const user: User = await userData.json();
+            setUser(user); // Set user data after fetching
+        }
+
+        getUser();
+    }, [router]);
+
+    if (!user) {
+        return <Loading />; // Show loading screen while the user is being fetched
+    }
+
+    return (
+        <div className="flex">
+            {/* Sidebar is shared across all pages */}
+            <Sidebar
+                setIsSidebarOpen={setIsSidebarOpen}
+                isSidebarOpen={isSidebarOpen}
+                name={user.username}
+                email={user.email}
+                isAdmin={user.role === Role.ADMIN}
+            />
+
+            {/* Page content */}
+            <div
+                className={`flex-1 transition duration-300 ease-in-out ${
+                    isSidebarOpen ? "ml-64" : "ml-0"
+                }`}
+            >
+                {children} {/* Render page-specific content here */}
+            </div>
+        </div>
+    );
+}

compass/components/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
     HomeIcon,
     ChevronDoubleLeftIcon,
@@ -26,6 +26,7 @@ const Sidebar: React.FC<SidebarProps> = ({
     email,
     isAdmin: admin,
 }) => {
+    const [isLoading, setIsLoading] = useState(false);
     return (
         <>
             {/* Button to open the sidebar. */}
@@ -62,11 +63,24 @@ const Sidebar: React.FC<SidebarProps> = ({
                     </button>
                 </div>
 
-                <div className="flex flex-col space-y-8">
-                    {/* user + logout button  */}
-                    <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
-                        <UserProfile name={name} email={email} />
+                {/* Loading indicator*/}
+                {isLoading && (
+                    <div className="fixed top-2 left-2">
+                        <div className="flex justify-center items-center">
+                            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-purple-700" />
+                        </div>
                     </div>
+                )}
+
+                <div className="flex flex-col space-y-8">
+                    <div className="flex items-center p-4 space-x-2 border rounded-md">
+                        <UserProfile
+                            name={name}
+                            email={email}
+                            setLoading={setIsLoading}
+                        />
+                    </div>
+
                     {/* navigation menu  */}
                     <div className="flex flex-col space-y-2">
                         <h4 className="text-xs font-semibold text-gray-500">
@@ -79,6 +93,7 @@ const Sidebar: React.FC<SidebarProps> = ({
                                     text="Admin"
                                     active={true}
                                     redirect="/admin"
+                                    onClick={setIsLoading}
                                 />
                             )}
 
@@ -87,24 +102,28 @@ const Sidebar: React.FC<SidebarProps> = ({
                                 text="Home"
                                 active={true}
                                 redirect="/home"
+                                onClick={setIsLoading}
                             />
                             <SidebarItem
                                 icon={<BookmarkIcon />}
                                 text="Resources"
                                 active={true}
                                 redirect="/resource"
+                                onClick={setIsLoading}
                             />
                             <SidebarItem
                                 icon={<ClipboardIcon />}
                                 text="Services"
                                 active={true}
                                 redirect="/service"
+                                onClick={setIsLoading}
                             />
                             <SidebarItem
                                 icon={<BookOpenIcon />}
                                 text="Training Manuals"
                                 active={true}
                                 redirect="/training-manuals"
+                                onClick={setIsLoading}
                             />
                         </nav>
                     </div>

compass/components/Sidebar/SidebarItem.tsx

@@ -1,10 +1,12 @@
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 interface SidebarItemProps {
     icon: React.ReactElement;
     text: string;
     active: boolean;
     redirect: string;
+    onClick: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const SidebarItem: React.FC<SidebarItemProps> = ({
@@ -12,9 +14,15 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
     text,
     active,
     redirect,
+    onClick,
 }) => {
+    const pathname = usePathname();
+
     return (
         <Link
+            onClick={() =>
+                pathname.startsWith(redirect) ? onClick(false) : onClick(true)
+            }
             href={redirect}
             className={
                 active

compass/components/Table/ResourceTable.tsx

@@ -1,15 +1,22 @@
-import { Bars2Icon } from "@heroicons/react/24/solid";
+import {
+    Bars2Icon,
+    DocumentTextIcon,
+    LinkIcon,
+    ListBulletIcon,
+    UserIcon,
+} from "@heroicons/react/24/solid";
 import { Dispatch, SetStateAction, useState } from "react";
-import useTagsHandler from "@/components/TagsInput/TagsHandler";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { RowOpenAction } from "@/components/Table/RowOpenAction";
 import Table from "@/components/Table/Table";
-import TagsInput from "@/components/TagsInput/Index";
 import Resource from "@/utils/models/Resource";
-
+import { Details } from "../Drawer/Drawer";
+import { Tag } from "../TagsInput/Tag";
+import User from "@/utils/models/User";
 type ResourceTableProps = {
     data: Resource[];
     setData: Dispatch<SetStateAction<Resource[]>>;
+    user?: User;
 };
 
 /**
@@ -17,66 +24,126 @@ type ResourceTableProps = {
  * @param props.data Stateful list of resources to be displayed by the table
  * @param props.setData State setter for the list of resources
  */
-export default function ResourceTable({ data, setData }: ResourceTableProps) {
+export default function ResourceTable({
+    data,
+    setData,
+    user,
+}: ResourceTableProps) {
     const columnHelper = createColumnHelper<Resource>();
 
-    // Set up tag handling
-    const programProps = useTagsHandler(["community", "domestic", "economic"]);
+    const [programPresets, setProgramPresets] = useState([
+        "DOMESTIC",
+        "COMMUNITY",
+        "ECONOMIC",
+    ]);
 
+    const resourceDetails: Details[] = [
+        {
+            key: "name",
+            label: "name",
+            inputType: "text",
+            icon: <UserIcon className="h-4 w-4" />,
+        },
+        {
+            key: "link",
+            label: "link",
+            inputType: "email",
+            icon: <LinkIcon className="h-4 w-4" />,
+        },
+        {
+            key: "program",
+            label: "program",
+            inputType: "select-one",
+            icon: <ListBulletIcon className="h-4 w-4" />,
+            presetOptionsValues: programPresets,
+            presetOptionsSetter: setProgramPresets,
+        },
+        {
+            key: "summary",
+            label: "summary",
+            inputType: "textarea",
+            icon: <DocumentTextIcon className="h-4 w-4" />,
+        },
+    ];
     // Define Tanstack columns
     const columns: ColumnDef<Resource, any>[] = [
         columnHelper.accessor("name", {
             header: () => (
                 <>
-                    <Bars2Icon className="inline align-top h-4" /> Name
+                    <UserIcon className="inline align-top h-4" /> Name
                 </>
             ),
             cell: (info) => (
                 <RowOpenAction
                     title={info.getValue()}
+                    titleKey="name"
                     rowData={info.row.original}
                     setData={setData}
+                    details={resourceDetails}
+                    isAdmin={user?.role === "ADMIN"}
+                    updateRoute={`/api/resource/update?uuid=${user?.uuid}`}
                 />
             ),
         }),
         columnHelper.accessor("link", {
             header: () => (
                 <>
-                    <Bars2Icon className="inline align-top h-4" /> Link
+                    <LinkIcon className="inline align-top h-4" /> Link
                 </>
             ),
             cell: (info) => (
-                <a
-                    href={info.getValue()}
-                    target={"_blank"}
-                    className="ml-2 text-gray-500 underline hover:text-gray-400"
-                >
-                    {info.getValue()}
-                </a>
+                <div className="flex items-start gap-2 px-2">
+                    <a
+                        href={info.getValue()}
+                        target="_blank"
+                        className="text-gray-500 underline hover:text-gray-400 break-all"
+                    >
+                        {info.getValue()}
+                    </a>
+                </div>
             ),
         }),
         columnHelper.accessor("program", {
             header: () => (
                 <>
-                    <Bars2Icon className="inline align-top h-4" /> Program
+                    <ListBulletIcon className="inline align-top h-4" /> Program
                 </>
             ),
             cell: (info) => (
-                <TagsInput presetValue={info.getValue()} {...programProps} />
+                <div className="flex flex-wrap gap-2 items-center px-2">
+                    <Tag>
+                        {info.getValue().length != 0
+                            ? info.getValue()
+                            : "no program"}
+                    </Tag>
+                </div>
             ),
         }),
-
         columnHelper.accessor("summary", {
             header: () => (
                 <>
-                    <Bars2Icon className="inline align-top h-4" /> Summary
+                    <DocumentTextIcon className="inline align-top h-4" />{" "}
+                    Summary
                 </>
             ),
             cell: (info) => (
-                <span className="ml-2 text-gray-500">{info.getValue()}</span>
+                <div className="flex items-start gap-2 px-2 py-1">
+                    <span className="text-gray-500 max-h-8 overflow-y-auto">
+                        {info.getValue()}
+                    </span>
+                </div>
             ),
         }),
     ];
 
-    return <Table data={data} setData={setData} columns={columns} />;
+    return (
+        <Table
+            data={data}
+            setData={setData}
+            columns={columns}
+            details={resourceDetails}
+            createEndpoint={`/api/resource/create?uuid=${user?.uuid}`}
+            isAdmin={user?.role === "ADMIN"}
+        />
+    );
 }

compass/components/Table/RowOpenAction.tsx

@@ -1,37 +1,43 @@
-import Drawer from "@/components/Drawer/Drawer";
+import Drawer, { Details } from "@/components/Drawer/Drawer";
 import DataPoint from "@/utils/models/DataPoint";
+import {
+    EnvelopeIcon,
+    ListBulletIcon,
+    UserIcon,
+} from "@heroicons/react/24/solid";
 import { Dispatch, SetStateAction, useState } from "react";
 
 type RowOpenActionProps<T extends DataPoint> = {
     title: string;
+    titleKey: string;
     rowData: T;
     setData: Dispatch<SetStateAction<T[]>>;
+    details: Details[];
+    isAdmin?: boolean;
+    updateRoute: string;
 };
 
 export function RowOpenAction<T extends DataPoint>({
     title,
+    titleKey,
     rowData,
     setData,
+    details,
+    isAdmin,
+    updateRoute,
 }: RowOpenActionProps<T>) {
-    const [pageContent, setPageContent] = useState("");
-
-    const handleDrawerContentChange = (newContent: string) => {
-        setPageContent(newContent);
-    };
-
     return (
         <div className="font-semibold group flex flex-row items-center justify-between pr-2">
             {title}
             <span>
                 <Drawer
-                    title="My Drawer Title"
-                    editableContent={pageContent}
+                    titleKey={titleKey}
                     rowContent={rowData}
-                    onSave={handleDrawerContentChange}
-                    setData={setData}
-                >
-                    {pageContent}
-                </Drawer>
+                    details={details}
+                    setRowContent={setData}
+                    isAdmin={isAdmin}
+                    updateRoute={updateRoute}
+                />
             </span>
         </div>
     );

compass/components/Table/ServiceTable.tsx

@@ -1,15 +1,23 @@
-import { Bars2Icon } from "@heroicons/react/24/solid";
-import { Dispatch, SetStateAction } from "react";
-import useTagsHandler from "@/components/TagsInput/TagsHandler";
+import {
+    Bars2Icon,
+    CheckCircleIcon,
+    DocumentTextIcon,
+    ListBulletIcon,
+    UserIcon,
+} from "@heroicons/react/24/solid";
+import { Dispatch, SetStateAction, useState } from "react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import Table from "@/components/Table/Table";
 import { RowOpenAction } from "@/components/Table/RowOpenAction";
-import TagsInput from "@/components/TagsInput/Index";
 import Service from "@/utils/models/Service";
+import { Details } from "../Drawer/Drawer";
+import { Tag } from "../TagsInput/Tag";
+import User from "@/utils/models/User";
 
 type ServiceTableProps = {
     data: Service[];
     setData: Dispatch<SetStateAction<Service[]>>;
+    user?: User;
 };
 
 /**
@@ -17,87 +25,177 @@ type ServiceTableProps = {
  * @param props.data Stateful list of services to be displayed by the table
  * @param props.setData State setter for the list of services
  */
-export default function ServiceTable({ data, setData }: ServiceTableProps) {
+export default function ServiceTable({
+    data,
+    setData,
+    user,
+}: ServiceTableProps) {
     const columnHelper = createColumnHelper<Service>();
 
-    // Set up tag handling
-    const programProps = useTagsHandler(["community", "domestic", "economic"]);
-
-    // TODO: Dynamically or statically get full list of preset requirement tag options
-    const requirementProps = useTagsHandler([
-        "anonymous",
-        "confidential",
-        "referral required",
-        "safety assessment",
-        "intake required",
-        "income eligibility",
-        "initial assessment",
+    const [programPresets, setProgramPresets] = useState([
+        "DOMESTIC",
+        "COMMUNITY",
+        "ECONOMIC",
     ]);
 
+    const [requirementPresets, setRequirementPresets] = useState([
+        "Anonymous",
+        "Confidential",
+        "Referral required",
+        "Safety assessment",
+        "Intake required",
+        "Income eligibility",
+        "Initial assessment",
+        "Insurance accepted",
+        "Open to parents",
+        "18+",
+        "Application required",
+        "Proof of income",
+        "Background check",
+        "Enrollment required",
+        "Registration required",
+        "Parental consent",
+        "Age-appropriate",
+        "Collaborative",
+        "Open to the public",
+        "Registration preferred",
+        "Legal case",
+        "Scheduling required",
+        "Limited availability",
+        "Eligibility assessment",
+        "Pre-registration required",
+        "Commitment to attend",
+        "Training required",
+        "Based on individual needs",
+    ]);
+
+    const serviceDetails: Details[] = [
+        {
+            key: "name",
+            label: "name",
+            inputType: "text",
+            icon: <UserIcon className="inline align-top h-4" />,
+        },
+        {
+            key: "status",
+            label: "status",
+            inputType: "text",
+            icon: <CheckCircleIcon className="inline align-top h-4" />,
+        },
+        {
+            key: "program",
+            label: "program",
+            inputType: "select-one",
+            icon: <ListBulletIcon className="inline align-top h-4" />,
+            presetOptionsValues: programPresets,
+            presetOptionsSetter: setProgramPresets,
+        },
+        {
+            key: "requirements",
+            label: "requirements",
+            inputType: "select-multiple",
+            icon: <ListBulletIcon className="inline align-top h-4" />,
+            presetOptionsValues: requirementPresets,
+            presetOptionsSetter: setRequirementPresets,
+        },
+        {
+            key: "summary",
+            label: "summary",
+            inputType: "textarea",
+            icon: <DocumentTextIcon className="inline align-top h-4" />,
+        },
+    ];
+
     // Define Tanstack columns
     const columns: ColumnDef<Service, any>[] = [
         columnHelper.accessor("name", {
             header: () => (
                 <>
-                    <Bars2Icon className="inline align-top h-4" /> Name
+                    <UserIcon className="inline align-top h-4" /> Name
                 </>
             ),
             cell: (info) => (
                 <RowOpenAction
                     title={info.getValue()}
+                    titleKey="name"
                     rowData={info.row.original}
                     setData={setData}
+                    details={serviceDetails}
+                    updateRoute={`/api/service/update?uuid=${user?.uuid}`}
+                    isAdmin={user?.role === "ADMIN"}
                 />
             ),
         }),
         columnHelper.accessor("status", {
             header: () => (
                 <>
-                    <Bars2Icon className="inline align-top h-4" /> Status
+                    <CheckCircleIcon className="inline align-top h-4" /> Status
                 </>
             ),
             cell: (info) => (
-                <span className="ml-2 text-gray-500">{info.getValue()}</span>
+                <span className="text-gray-500 px-2">{info.getValue()}</span>
             ),
         }),
         columnHelper.accessor("program", {
             header: () => (
                 <>
-                    <Bars2Icon className="inline align-top h-4" /> Program
+                    <ListBulletIcon className="inline align-top h-4" /> Program
                 </>
             ),
             cell: (info) => (
-                <TagsInput presetValue={info.getValue()} {...programProps} />
+                <div className="flex flex-wrap gap-2 items-center px-2">
+                    <Tag>
+                        {info.getValue().length != 0
+                            ? info.getValue()
+                            : "no program"}
+                    </Tag>
+                </div>
             ),
         }),
         columnHelper.accessor("requirements", {
             header: () => (
                 <>
-                    <Bars2Icon className="inline align-top h-4" /> Requirements
+                    <ListBulletIcon className="inline align-top h-4" />{" "}
+                    Requirements
                 </>
             ),
             cell: (info) => (
-                // TODO: Setup different tag handler for requirements
-                <TagsInput
-                    presetValue={
-                        info.getValue()[0] !== "" ? info.getValue() : ["N/A"]
-                    }
-                    {...requirementProps}
-                />
+                <div className="flex flex-wrap gap-2 items-center p-2">
+                    {info.getValue().length > 0 ? (
+                        info.getValue().map((tag: string, index: number) => {
+                            return <Tag key={index}>{tag}</Tag>;
+                        })
+                    ) : (
+                        <Tag>no requirements</Tag>
+                    )}
+                </div>
             ),
         }),
-
         columnHelper.accessor("summary", {
             header: () => (
                 <>
-                    <Bars2Icon className="inline align-top h-4" /> Summary
+                    <DocumentTextIcon className="inline align-top h-4" />{" "}
+                    Summary
                 </>
             ),
             cell: (info) => (
-                <span className="ml-2 text-gray-500">{info.getValue()}</span>
+                <div className="flex items-start gap-2 px-2 py-1">
+                    <span className="text-gray-500 max-h-8 overflow-y-auto">
+                        {info.getValue()}
+                    </span>
+                </div>
             ),
         }),
     ];
 
-    return <Table data={data} setData={setData} columns={columns} />;
+    return (
+        <Table
+            data={data}
+            setData={setData}
+            columns={columns}
+            details={serviceDetails}
+            createEndpoint={`/api/service/create?uuid=${user?.uuid}`}
+            isAdmin={user?.role === "ADMIN"}
+        />
+    );
 }

compass/components/Table/Table.tsx

@@ -19,11 +19,35 @@ import { PlusIcon } from "@heroicons/react/24/solid";
 import { rankItem } from "@tanstack/match-sorter-utils";
 import { RowOptionMenu } from "./RowOptionMenu";
 import DataPoint from "@/utils/models/DataPoint";
+import CreateDrawer from "../Drawer/CreateDrawer";
+import { Details } from "../Drawer/Drawer";
 
 type TableProps<T extends DataPoint> = {
     data: T[];
     setData: Dispatch<SetStateAction<T[]>>;
     columns: ColumnDef<T, any>[];
+    details: Details[];
+    createEndpoint: string;
+    isAdmin?: boolean;
+};
+
+/** Validates that all required fields in a new item have values */
+const validateNewItem = (newItem: any, details: Details[]): boolean => {
+    const hasEmptyFields = details.some((detail) => {
+        const value = newItem[detail.key];
+        return (
+            value === undefined ||
+            value === null ||
+            value === "" ||
+            (Array.isArray(value) && value.length === 0)
+        );
+    });
+
+    if (hasEmptyFields) {
+        alert("Please fill in all fields before creating a new item");
+        return false;
+    }
+    return true;
 };
 
 /** Fuzzy search function */
@@ -53,46 +77,59 @@ export default function Table<T extends DataPoint>({
     data,
     setData,
     columns,
+    details,
+    createEndpoint,
+    isAdmin = false,
 }: TableProps<T>) {
+    console.log(data);
+
     const columnHelper = createColumnHelper<T>();
 
-    /** Sorting function based on visibility */
-    const visibilitySort = (a: T, b: T) =>
-        a.visible === b.visible ? 0 : a.visible ? -1 : 1;
-
-    // Sort data on load
-    useEffect(() => {
-        setData((prevData) => prevData.sort(visibilitySort));
-    }, [setData]);
-
-    // Data manipulation methods
-    // TODO: Connect data manipulation methods to the database (deleteData, hideData, addData)
-    const deleteData = (dataId: number) => {
-        console.log(data);
-        setData((currentData) =>
-            currentData.filter((data) => data.id !== dataId)
-        );
-    };
-
-    const hideData = (dataId: number) => {
-        console.log(`Toggling visibility for data with ID: ${dataId}`);
-        setData((currentData) => {
-            const newData = currentData
-                .map((data) =>
-                    data.id === dataId
-                        ? { ...data, visible: !data.visible }
-                        : data
-                )
-                .sort(visibilitySort);
-
-            console.log(newData);
-            return newData;
+    const createRow = async (newItem: any) => {
+        const response = await fetch(createEndpoint, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(newItem),
         });
+
+        return response;
     };
 
-    const addData = () => {
-        setData([...data]);
-    };
+    // /** Sorting function based on visibility */
+    // const visibilitySort = (a: T, b: T) =>
+    //     a.visible === b.visible ? 0 : a.visible ? -1 : 1;
+
+    // // Sort data on load
+    // useEffect(() => {
+    //     setData((prevData) => prevData.sort(visibilitySort));
+    // }, [setData]);
+
+    // // Data manipulation methods
+    // // TODO: Connect data manipulation methods to the database (deleteData, hideData, addData)
+    // const deleteData = (dataId: number) => {
+    //     console.log(data);
+    //     setData((currentData) =>
+    //         currentData.filter((data) => data.id !== dataId)
+    //     );
+    // };
+
+    // const hideData = (dataId: number) => {
+    //     console.log(`Toggling visibility for data with ID: ${dataId}`);
+    //     setData((currentData) => {
+    //         const newData = currentData
+    //             .map((data) =>
+    //                 data.id === dataId
+    //                     ? { ...data, visible: !data.visible }
+    //                     : data
+    //             )
+    //             .sort(visibilitySort);
+
+    //         console.log(newData);
+    //         return newData;
+    //     });
+    // };
 
     // Add data manipulation options to the first column
     columns.unshift(
@@ -100,8 +137,10 @@ export default function Table<T extends DataPoint>({
             id: "options",
             cell: (props) => (
                 <RowOptionMenu
-                    onDelete={() => deleteData(props.row.original.id)}
-                    onHide={() => hideData(props.row.original.id)}
+                    onDelete={() => {}}
+                    onHide={() => {}}
+                    // onDelete={() => deleteData(props.row.original.id)}
+                    // onHide={() => hideData(props.row.original.id)}
                 />
             ),
         })
@@ -114,11 +153,6 @@ export default function Table<T extends DataPoint>({
         setQuery(String(target.value));
     };
 
-    const handleCellChange = (e: ChangeEvent, key: Key) => {
-        const target = e.target as HTMLInputElement;
-        console.log(key);
-    };
-
     // TODO: Filtering
 
     // TODO: Sorting
@@ -138,16 +172,6 @@ export default function Table<T extends DataPoint>({
         getCoreRowModel: getCoreRowModel(),
     });
 
-    const handleRowData = (row: any) => {
-        const rowData: any = {};
-        row.cells.forEach((cell: any) => {
-            rowData[cell.column.id] = cell.value;
-        });
-        // Use rowData object containing data from all columns for the current row
-        console.log(rowData);
-        return rowData;
-    };
-
     return (
         <div className="flex flex-col">
             <div className="flex flex-row justify-end">
@@ -206,18 +230,37 @@ export default function Table<T extends DataPoint>({
                     })}
                 </tbody>
                 <tfoot>
-                    <tr>
-                        <td
-                            className="p-3 border-y border-gray-200 text-gray-600 hover:bg-gray-50"
-                            colSpan={100}
-                            onClick={addData}
-                        >
-                            <span className="flex ml-1 text-gray-500">
-                                <PlusIcon className="inline h-4 mr-1" />
-                                New
-                            </span>
-                        </td>
-                    </tr>
+                    {isAdmin && ( // Only show create drawer for admins
+                        <tr>
+                            <td
+                                className="p-3 border-y border-gray-200"
+                                colSpan={100}
+                            >
+                                <CreateDrawer
+                                    details={details}
+                                    onCreate={(newItem) => {
+                                        if (
+                                            !validateNewItem(newItem, details)
+                                        ) {
+                                            return false;
+                                        }
+
+                                        createRow(newItem).then((response) => {
+                                            if (response.ok) {
+                                                newItem.visible = true;
+                                                setData((prev) => [
+                                                    ...prev,
+                                                    newItem,
+                                                ]);
+                                            }
+                                        });
+
+                                        return true;
+                                    }}
+                                />
+                            </td>
+                        </tr>
+                    )}
                 </tfoot>
             </table>
         </div>

compass/components/Table/UserTable.tsx

@@ -1,19 +1,20 @@
 import {
-    ArrowDownCircleIcon,
-    AtSymbolIcon,
-    Bars2Icon,
+    EnvelopeIcon,
+    ListBulletIcon,
+    UserIcon,
 } from "@heroicons/react/24/solid";
-import { Dispatch, SetStateAction } from "react";
-import useTagsHandler from "@/components/TagsInput/TagsHandler";
+import { Dispatch, SetStateAction, useState } from "react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import Table from "@/components/Table/Table";
 import { RowOpenAction } from "@/components/Table/RowOpenAction";
-import TagsInput from "@/components/TagsInput/Index";
 import User from "@/utils/models/User";
+import { Details } from "../Drawer/Drawer";
+import { Tag } from "../TagsInput/Tag";
 
 type UserTableProps = {
     data: User[];
     setData: Dispatch<SetStateAction<User[]>>;
+    user?: User;
 };
 
 /**
@@ -21,49 +22,92 @@ type UserTableProps = {
  * @param props.data Stateful list of users to be displayed by the table
  * @param props.setData State setter for the list of users
  */
-export default function UserTable({ data, setData }: UserTableProps) {
+export default function UserTable({ data, setData, user }: UserTableProps) {
     const columnHelper = createColumnHelper<User>();
 
-    // Set up tag handling
-    const roleProps = useTagsHandler([
-        "administrator",
-        "volunteer",
-        "employee",
+    const [rolePresets, setRolePresets] = useState([
+        "ADMIN",
+        "VOLUNTEER",
+        "EMPLOYEE",
     ]);
 
-    const programProps = useTagsHandler(["community", "domestic", "economic"]);
+    const [programPresets, setProgramPresets] = useState([
+        "DOMESTIC",
+        "COMMUNITY",
+        "ECONOMIC",
+    ]);
+
+    const userDetails: Details[] = [
+        {
+            key: "username",
+            label: "username",
+            inputType: "text",
+            icon: <UserIcon className="h-4 w-4" />,
+        },
+        {
+            key: "role",
+            label: "role",
+            inputType: "select-one",
+            icon: <ListBulletIcon className="h-4 w-4" />,
+            presetOptionsValues: rolePresets,
+            presetOptionsSetter: setRolePresets,
+        },
+        {
+            key: "email",
+            label: "email",
+            inputType: "email",
+            icon: <EnvelopeIcon className="h-4 w-4" />,
+        },
+        {
+            key: "program",
+            label: "program",
+            inputType: "select-multiple",
+            icon: <ListBulletIcon className="h-4 w-4" />,
+            presetOptionsValues: programPresets,
+            presetOptionsSetter: setProgramPresets,
+        },
+    ];
 
     // Define Tanstack columns
     const columns: ColumnDef<User, any>[] = [
         columnHelper.accessor("username", {
             header: () => (
                 <>
-                    <Bars2Icon className="inline align-top h-4" /> Username
+                    <UserIcon className="inline align-top h-4" /> Username
                 </>
             ),
             cell: (info) => (
                 <RowOpenAction
                     title={info.getValue()}
+                    titleKey="username"
                     rowData={info.row.original}
                     setData={setData}
+                    details={userDetails}
+                    isAdmin={user?.role === "ADMIN"}
+                    updateRoute={`/api/user/update?uuid=${user?.uuid}`}
                 />
             ),
         }),
         columnHelper.accessor("role", {
             header: () => (
                 <>
-                    <ArrowDownCircleIcon className="inline align-top h-4" />{" "}
-                    Role
+                    <ListBulletIcon className="inline align-top h-4" /> Role
                 </>
             ),
             cell: (info) => (
-                <TagsInput presetValue={info.getValue()} {...roleProps} />
+                <div className="flex flex-wrap gap-2 items-center px-2">
+                    <Tag>
+                        {info.getValue() && info.getValue().length != 0
+                            ? info.getValue()
+                            : "no role"}
+                    </Tag>
+                </div>
             ),
         }),
         columnHelper.accessor("email", {
             header: () => (
                 <>
-                    <AtSymbolIcon className="inline align-top h-4" /> Email
+                    <EnvelopeIcon className="inline align-top h-4" /> Email
                 </>
             ),
             cell: (info) => (
@@ -75,15 +119,31 @@ export default function UserTable({ data, setData }: UserTableProps) {
         columnHelper.accessor("program", {
             header: () => (
                 <>
-                    <ArrowDownCircleIcon className="inline align-top h-4" />{" "}
-                    Program
+                    <ListBulletIcon className="inline align-top h-4" /> Program
                 </>
             ),
             cell: (info) => (
-                <TagsInput presetValue={info.getValue()} {...programProps} />
+                <div className="flex p-2 flex-wrap gap-2 items-center">
+                    {info.getValue().length > 0 ? (
+                        info.getValue().map((tag: string, index: number) => {
+                            return <Tag key={index}>{tag}</Tag>;
+                        })
+                    ) : (
+                        <Tag>no programs</Tag>
+                    )}
+                </div>
             ),
         }),
     ];
 
-    return <Table<User> data={data} setData={setData} columns={columns} />;
+    return (
+        <Table<User>
+            data={data}
+            setData={setData}
+            columns={columns}
+            details={userDetails}
+            createEndpoint={`/api/user/create?uuid=${user?.uuid}`}
+            isAdmin={user?.role === "ADMIN"}
+        />
+    );
 }

compass/components/TagsInput/CreateNewTagAction.tsx

@@ -1,12 +1,18 @@
 import { Tag } from "./Tag";
 
-export const CreateNewTagAction = ({ input }) => {
+interface NewTagProps {
+    input: string;
+    addTag: () => void;
+}
+
+export const CreateNewTagAction = ({ input, addTag }: NewTagProps) => {
     return (
-        <div className="flex flex-row space-x-2 hover:bg-gray-100 rounded-md py-2 p-2 items-center">
+        <button
+            className="flex flex-row space-x-2 hover:bg-gray-100 rounded-md py-2 p-2 items-center"
+            onClick={addTag}
+        >
             <p className="capitalize">Create</p>
-            <Tag active={false} onDelete={null}>
-                {input}
-            </Tag>
-        </div>
+            <Tag active={false}>{input}</Tag>
+        </button>
     );
 };

compass/components/TagsInput/DropdownAction.tsx

@@ -1,11 +1,21 @@
 import { EllipsisHorizontalIcon, TrashIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
 
-export const DropdownAction = ({ tag, handleDeleteTag, handleEditTag }) => {
+interface DropdownActionProps {
+    tag: string;
+    handleDeleteTag: (tag: string) => void;
+    handleEditTag: (oldTag: string, newTag: string) => void;
+}
+
+export const DropdownAction = ({
+    tag,
+    handleDeleteTag,
+    handleEditTag,
+}: DropdownActionProps) => {
     const [isVisible, setVisible] = useState(false);
     const [inputValue, setInputValue] = useState(tag);
 
-    const editTagOption = (e) => {
+    const editTagOption = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Enter") {
             handleEditTag(tag, inputValue);
             setVisible(false);

compass/components/TagsInput/Index.tsx

@@ -6,51 +6,52 @@ import { CreateNewTagAction } from "./CreateNewTagAction";
 
 interface TagsInputProps {
     presetOptions: string[];
-    presetValue: string | string[];
+    presetValue: string[];
     setPresetOptions: Dispatch<SetStateAction<string[]>>;
-    getTagColor(tag: string): string;
+    onTagsChange?: (tags: Set<string>) => void;
+    singleValue?: boolean;
 }
 
 const TagsInput: React.FC<TagsInputProps> = ({
     presetValue,
     presetOptions,
     setPresetOptions,
-    getTagColor,
+    onTagsChange,
+    singleValue = false,
 }) => {
     const [inputValue, setInputValue] = useState("");
     const [cellSelected, setCellSelected] = useState(false);
-    const [tags, setTags] = useState<Set<string>>(
-        typeof presetValue === "string"
-            ? new Set([presetValue])
-            : new Set(presetValue)
-    );
+
+    // TODO: Add tags to the database and remove the presetValue and lowercasing
+    const [tags, setTags] = useState<Set<string>>(new Set(presetValue));
     const [options, setOptions] = useState<Set<string>>(new Set(presetOptions));
+    const [filteredOptions, setFilteredOptions] = useState<Set<string>>(
+        new Set(presetOptions)
+    );
     const dropdown = useRef<HTMLDivElement>(null);
 
     const handleClick = () => {
         if (!cellSelected) {
             setCellSelected(true);
-            // Add event listener only after setting cellSelected to true
             setTimeout(() => {
                 window.addEventListener("click", handleOutsideClick);
             }, 100);
         }
     };
 
-    // TODO: Fix MouseEvent type and remove the as Node as that is completely wrong
     const handleOutsideClick = (event: MouseEvent) => {
         if (
             dropdown.current &&
             !dropdown.current.contains(event.target as Node)
         ) {
+            console.log("outside");
             setCellSelected(false);
-            // Remove event listener after handling outside click
             window.removeEventListener("click", handleOutsideClick);
         }
     };
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setOptions(() => {
+        setFilteredOptions(() => {
             const newOptions = presetOptions.filter((item) =>
                 item.includes(e.target.value.toLowerCase())
             );
@@ -61,39 +62,58 @@ const TagsInput: React.FC<TagsInputProps> = ({
 
     const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Enter" && inputValue.trim()) {
-            // setPresetOptions((prevPreset) => {
-            //   const uniqueSet = new Set(presetOptions);
-            //   uniqueSet.add(inputValue);
-            //   return Array.from(uniqueSet);
-            // });
-            setTags((prevTags) => new Set(prevTags).add(inputValue));
-            setOptions((prevOptions) => new Set(prevOptions).add(inputValue));
-            setInputValue("");
+            if (singleValue && tags.size >= 1) {
+                // Don't add new tag if we're in single value mode and already have a tag
+                return;
+            }
+            addTag(e);
         }
     };
 
+    const addTag = (e?: React.KeyboardEvent<HTMLInputElement>) => {
+        e?.stopPropagation();
+
+        const newTags = new Set(Array.from(tags).concat(inputValue));
+        setOptions(new Set(Array.from(options).concat(inputValue)));
+        setTags(newTags);
+        setFilteredOptions(new Set(Array.from(options).concat(inputValue)));
+        setInputValue("");
+        onTagsChange?.(newTags);
+    };
+
     const handleSelectTag = (tagToAdd: string) => {
-        if (!tags.has(tagToAdd)) {
-            // Corrected syntax for checking if a Set contains an item
-            setTags((prevTags) => new Set(prevTags).add(tagToAdd));
+        if (singleValue) {
+            const newTags = new Set([tagToAdd]);
+            setTags(newTags);
+            onTagsChange?.(newTags);
+        } else if (!tags.has(tagToAdd)) {
+            const newTags = new Set(Array.from(tags).concat(tagToAdd));
+            setTags(newTags);
+            onTagsChange?.(newTags);
         }
     };
 
     const handleDeleteTag = (tagToDelete: string) => {
-        setTags((prevTags) => {
-            const updatedTags = new Set(prevTags);
-            updatedTags.delete(tagToDelete);
-            return updatedTags;
-        });
+        const newTags = new Set(
+            Array.from(tags).filter((tag) => tag !== tagToDelete)
+        );
+        setTags(newTags);
+        onTagsChange?.(newTags);
     };
 
     const handleDeleteTagOption = (tagToDelete: string) => {
-        // setPresetOptions(presetOptions.filter(tag => tag !== tagToDelete));
-        setOptions((prevOptions) => {
-            const updatedOptions = new Set(prevOptions);
-            updatedOptions.delete(tagToDelete);
-            return updatedOptions;
-        });
+        setOptions(
+            new Set(
+                Array.from(options).filter((option) => option !== tagToDelete)
+            )
+        );
+
+        setFilteredOptions(
+            new Set(
+                Array.from(options).filter((option) => option !== tagToDelete)
+            )
+        );
+
         if (tags.has(tagToDelete)) {
             handleDeleteTag(tagToDelete);
         }
@@ -101,23 +121,20 @@ const TagsInput: React.FC<TagsInputProps> = ({
 
     const handleEditTag = (oldTag: string, newTag: string) => {
         if (oldTag !== newTag) {
-            setTags((prevTags) => {
-                const tagsArray = Array.from(prevTags);
-                const oldTagIndex = tagsArray.indexOf(oldTag);
-                if (oldTagIndex !== -1) {
-                    tagsArray.splice(oldTagIndex, 1, newTag);
-                }
-                return new Set(tagsArray);
-            });
-
-            setOptions((prevOptions) => {
-                const optionsArray = Array.from(prevOptions);
-                const oldTagIndex = optionsArray.indexOf(oldTag);
-                if (oldTagIndex !== -1) {
-                    optionsArray.splice(oldTagIndex, 1, newTag);
-                }
-                return new Set(optionsArray);
-            });
+            setTags(
+                new Set(
+                    Array.from(tags)
+                        .filter((tag) => tag !== oldTag)
+                        .concat(newTag)
+                )
+            );
+            setOptions(
+                new Set(
+                    Array.from(options)
+                        .filter((option) => option !== oldTag)
+                        .concat(newTag)
+                )
+            );
         }
     };
 
@@ -139,28 +156,45 @@ const TagsInput: React.FC<TagsInputProps> = ({
                                     active
                                     tags={tags}
                                 />
-                                <input
-                                    type="text"
-                                    value={inputValue}
-                                    placeholder="Search for an option..."
-                                    onChange={handleInputChange}
-                                    onKeyDown={handleAddTag}
-                                    className="focus:outline-none bg-transparent"
-                                    autoFocus
-                                />
+                                {(!singleValue || tags.size === 0) && (
+                                    <input
+                                        type="text"
+                                        value={inputValue}
+                                        placeholder={
+                                            singleValue && tags.size > 0
+                                                ? ""
+                                                : "Search for an option..."
+                                        }
+                                        onChange={handleInputChange}
+                                        onKeyDown={handleAddTag}
+                                        className="focus:outline-none bg-transparent"
+                                        autoFocus
+                                    />
+                                )}
                             </div>
                             <div className="flex rounded-b-md bg-white flex-col border-t border-gray-100 text-2xs font-medium text-gray-500 p-2">
                                 <p className="capitalize">
-                                    Select an option or create one
+                                    {singleValue && tags.size > 0
+                                        ? "Only one option can be selected"
+                                        : "Select an option or create one"}
                                 </p>
-                                <TagDropdown
-                                    handleDeleteTag={handleDeleteTagOption}
-                                    handleEditTag={handleEditTag}
-                                    handleAdd={handleSelectTag}
-                                    tags={options}
-                                />
-                                {inputValue.length > 0 && (
-                                    <CreateNewTagAction input={inputValue} />
+                                {(!singleValue || tags.size === 0) && (
+                                    <>
+                                        <TagDropdown
+                                            handleDeleteTag={
+                                                handleDeleteTagOption
+                                            }
+                                            handleEditTag={handleEditTag}
+                                            handleAdd={handleSelectTag}
+                                            tags={filteredOptions}
+                                        />
+                                        {inputValue.length > 0 && (
+                                            <CreateNewTagAction
+                                                input={inputValue}
+                                                addTag={addTag}
+                                            />
+                                        )}
+                                    </>
                                 )}
                             </div>
                         </div>

compass/components/TagsInput/Tag.tsx

@@ -1,14 +1,26 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import React, { useState, useEffect } from "react";
 
-export const Tag = ({ children, handleDelete, active = false }) => {
+interface TagProps {
+    children: string;
+    handleDelete?: (tag: string) => void;
+    active?: boolean;
+}
+
+export const Tag = ({ children, handleDelete, active = false }: TagProps) => {
     return (
         <span
             className={`font-normal bg-purple-100 text-gray-800 flex flex-row p-1 px-2 rounded-lg`}
+            style={{ textTransform: "none" }}
         >
             {children}
             {active && handleDelete && (
-                <button onClick={() => handleDelete(children)}>
+                <button
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        handleDelete(children);
+                    }}
+                >
                     <XMarkIcon className={`ml-1 w-3 text-purple-500`} />
                 </button>
             )}

compass/components/TagsInput/TagDropdown.tsx

@@ -1,29 +1,42 @@
 import { Tag } from "./Tag";
 import { DropdownAction } from "./DropdownAction";
 
+interface TagDropdownProps {
+    tags: Set<string>;
+    handleEditTag: (oldTag: string, newTag: string) => void;
+    handleDeleteTag: (tag: string) => void;
+    handleAdd: (tag: string) => void;
+}
+
 export const TagDropdown = ({
     tags,
     handleEditTag,
     handleDeleteTag,
     handleAdd,
-}) => {
+}: TagDropdownProps) => {
     return (
-        <div className="z-50 flex flex-col space-y-2 mt-2">
-            {Array.from(tags).map((tag, index) => (
-                <div
-                    key={index}
-                    className="items-center rounded-md p-1 flex flex-row justify-between hover:bg-gray-100"
-                >
-                    <button onClick={() => handleAdd(tag)}>
-                        <Tag>{tag}</Tag>
-                    </button>
-                    <DropdownAction
-                        handleDeleteTag={handleDeleteTag}
-                        handleEditTag={handleEditTag}
-                        tag={tag}
-                    />
+        <div className="z-50 flex flex-col space-y-2 mt-2 max-h-60 overflow-y-auto scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-300 pr-2">
+            {Array.from(tags).length > 0 ? (
+                Array.from(tags).map((tag, index) => (
+                    <div
+                        key={index}
+                        className="items-center rounded-md p-1 flex flex-row justify-between hover:bg-gray-100"
+                    >
+                        <button onClick={() => handleAdd(tag)}>
+                            <Tag>{tag}</Tag>
+                        </button>
+                        <DropdownAction
+                            handleDeleteTag={handleDeleteTag}
+                            handleEditTag={handleEditTag}
+                            tag={tag}
+                        />
+                    </div>
+                ))
+            ) : (
+                <div className="text-gray-500 text-sm p-1">
+                    No options available. Type to create new ones.
                 </div>
-            ))}
+            )}
         </div>
     );
 };

compass/components/TagsInput/TagsArray.tsx

@@ -7,21 +7,25 @@ export interface Tags {
 }
 
 export const TagsArray = ({ tags, handleDelete, active = false }: Tags) => {
-    // console.log(tags);
-
     return (
-        <div className="flex ml-2 flex-wrap gap-2 items-center">
-            {Array.from(tags).map((tag, index) => {
-                return (
-                    <Tag
-                        handleDelete={handleDelete}
-                        active={active}
-                        key={index}
-                    >
-                        {tag}
-                    </Tag>
-                );
-            })}
+        <div className="flex flex-wrap gap-2 items-center min-h-[24px] min-w-[100px] rounded-md hover:bg-gray-100 p-1">
+            {Array.from(tags).length > 0 ? (
+                Array.from(tags).map((tag, index) => {
+                    return (
+                        <Tag
+                            handleDelete={handleDelete}
+                            active={active}
+                            key={index}
+                        >
+                            {tag}
+                        </Tag>
+                    );
+                })
+            ) : (
+                <span className="text-gray-400 text-sm cursor-pointer">
+                    Click to select tags
+                </span>
+            )}
         </div>
     );
 };

compass/components/auth/Loading.tsx

@@ -11,9 +11,15 @@ const Loading = () => {
                     alt="Compass Center logo."
                     width={100}
                     height={91}
+                    style={{ height: "auto", width: "auto" }}
+                    priority
                 />
-                <h1 className={styles.loadingTitle}>Loading...</h1>
-                <div className={styles.loadingSpinner}></div>
+                <h1 className="text-2xl font-semibold text-gray-700 mt-4 mb-6">
+                    Loading...
+                </h1>
+                <div className="flex justify-center">
+                    <div className="animate-spin rounded-full h-24 w-24 border-b-2 border-gray-700"></div>
+                </div>
             </div>
         </div>
     );

compass/components/auth/LoggingOut.tsx

@@ -0,0 +1,24 @@
+// components/LoggingOut.js
+import styles from "./Loading.module.css";
+import Image from "next/image";
+
+const LoggingOut = () => {
+    return (
+        <div className={styles.loadingOverlay}>
+            <div className={styles.loadingContent}>
+                <Image
+                    src="/logo.png"
+                    alt="Compass Center logo."
+                    width={100}
+                    height={91}
+                    style={{ height: "auto", width: "auto" }}
+                    priority
+                />
+                <h1 className={styles.loadingTitle}>Signing out...</h1>
+                <div className={styles.loadingSpinner}></div>
+            </div>
+        </div>
+    );
+};
+
+export default LoggingOut;

compass/components/page/Drawer.tsx

@@ -1,247 +0,0 @@
-import { FunctionComponent, ReactNode } from "react";
-import React, { useState } from "react";
-import { ChevronDoubleLeftIcon } from "@heroicons/react/24/solid";
-import {
-    StarIcon as SolidStarIcon,
-    EnvelopeIcon,
-    UserIcon,
-} from "@heroicons/react/24/solid";
-import {
-    ArrowsPointingOutIcon,
-    ArrowsPointingInIcon,
-    StarIcon as OutlineStarIcon,
-    ListBulletIcon,
-} from "@heroicons/react/24/outline";
-import TagsInput from "../TagsInput/Index";
-
-type DrawerProps = {
-    title: string;
-    children: ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    type?: "button" | "submit" | "reset"; // specify possible values for type
-    disabled?: boolean;
-    editableContent?: any;
-    onSave?: (content: any) => void;
-    rowContent?: any;
-    onRowUpdate?: (content: any) => void;
-};
-
-interface EditContent {
-    content: string;
-    isEditing: boolean;
-}
-
-const Drawer: FunctionComponent<DrawerProps> = ({
-    title,
-    children,
-    onSave,
-    editableContent,
-    rowContent,
-    onRowUpdate,
-}) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [isFull, setIsFull] = useState(false);
-    const [isFavorite, setIsFavorite] = useState(false);
-    const [tempRowContent, setTempRowContent] = useState(rowContent);
-
-    const handleTempRowContentChange = (e) => {
-        const { name, value } = e.target;
-        console.log(name);
-        console.log(value);
-        setTempRowContent((prevContent) => ({
-            ...prevContent,
-            [name]: value,
-        }));
-    };
-
-    const handleEnterPress = (e) => {
-        if (e.key === "Enter") {
-            e.preventDefault();
-            // Update the rowContent with the temporaryRowContent
-            if (onRowUpdate) {
-                onRowUpdate(tempRowContent);
-            }
-        }
-    };
-
-    const toggleDrawer = () => {
-        setIsOpen(!isOpen);
-        if (isFull) {
-            setIsFull(!isFull);
-        }
-    };
-
-    const toggleDrawerFullScreen = () => setIsFull(!isFull);
-
-    const toggleFavorite = () => setIsFavorite(!isFavorite);
-
-    const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white transform ease-in-out duration-300 z-20 ${
-        isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
-    } ${isFull ? "w-full" : "w-1/2"}`;
-
-    const iconComponent = isFull ? (
-        <ArrowsPointingInIcon className="h-5 w-5" />
-    ) : (
-        <ArrowsPointingOutIcon className="h-5 w-5" />
-    );
-
-    const favoriteIcon = isFavorite ? (
-        <SolidStarIcon className="h-5 w-5" />
-    ) : (
-        <OutlineStarIcon className="h-5 w-5" />
-    );
-
-    const [presetOptions, setPresetOptions] = useState([
-        "administrator",
-        "volunteer",
-        "employee",
-    ]);
-    const [rolePresetOptions, setRolePresetOptions] = useState([
-        "domestic",
-        "community",
-        "economic",
-    ]);
-    const [tagColors, setTagColors] = useState(new Map());
-
-    const getTagColor = (tag: string) => {
-        if (!tagColors.has(tag)) {
-            const colors = [
-                "bg-cyan-100",
-                "bg-blue-100",
-                "bg-green-100",
-                "bg-yellow-100",
-                "bg-purple-100",
-            ];
-            const randomColor =
-                colors[Math.floor(Math.random() * colors.length)];
-            setTagColors(new Map(tagColors).set(tag, randomColor));
-        }
-        return tagColors.get(tag);
-    };
-
-    return (
-        <div>
-            <button
-                className={
-                    "ml-2 text-xs uppercase opacity-0 group-hover:opacity-100 text-gray-500 font-medium border border-gray-200 bg-white shadow hover:bg-gray-50 p-2 rounded-md"
-                }
-                onClick={toggleDrawer}
-            >
-                Open
-            </button>
-            <div className={drawerClassName}></div>
-            <div className={drawerClassName}>
-                <div className="flex items-center justify-between p-4">
-                    <div className="flex flex-row items-center justify-between space-x-2">
-                        <span className="h-5 text-purple-200 w-5">
-                            <UserIcon />
-                        </span>
-                        <h2 className="text-lg text-gray-800 font-semibold">
-                            {rowContent.username}
-                        </h2>
-                    </div>
-                    <div>
-                        <button
-                            onClick={toggleFavorite}
-                            className="py-2 text-gray-500 hover:text-gray-800 mr-2"
-                        >
-                            {favoriteIcon}
-                        </button>
-                        <button
-                            onClick={toggleDrawerFullScreen}
-                            className="py-2 text-gray-500 hover:text-gray-800 mr-2"
-                        >
-                            {iconComponent}
-                        </button>
-                        <button
-                            onClick={toggleDrawer}
-                            className="py-2 text-gray-500 hover:text-gray-800"
-                        >
-                            <ChevronDoubleLeftIcon className="h-5 w-5" />
-                        </button>
-                    </div>
-                </div>
-                <div className="p-4">
-                    <table className="p-4">
-                        <tbody className="items-center">
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <UserIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Username</td>
-                                </div>
-                                <td className="w-3/4 w-3/4 p-2 pl-0">
-                                    <input
-                                        type="text"
-                                        name="username"
-                                        value={tempRowContent.username}
-                                        onChange={handleTempRowContentChange}
-                                        onKeyDown={handleEnterPress}
-                                        className="ml-2 w-full p-1 focus:outline-gray-200  hover:bg-gray-50"
-                                    />
-                                </td>
-                            </tr>
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <ListBulletIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Role</td>
-                                </div>
-                                <td className="w-3/4 hover:bg-gray-50">
-                                    <TagsInput
-                                        presetValue={tempRowContent.role}
-                                        presetOptions={presetOptions}
-                                        setPresetOptions={setPresetOptions}
-                                        getTagColor={getTagColor}
-                                        setTagColors={setTagColors}
-                                    />
-                                </td>
-                            </tr>
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <EnvelopeIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Email</td>
-                                </div>
-                                <td className="w-3/4 p-2 pl-0">
-                                    <input
-                                        type="text"
-                                        name="email"
-                                        value={tempRowContent.email}
-                                        onChange={handleTempRowContentChange}
-                                        onKeyDown={handleEnterPress}
-                                        className="ml-2 w-80 p-1 font-normal hover:text-gray-400 focus:outline-gray-200  hover:bg-gray-50 underline text-gray-500"
-                                    />
-                                </td>
-                            </tr>
-                            <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <ListBulletIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Type of Program</td>
-                                </div>
-                                <td className="w-3/4 hover:bg-gray-50">
-                                    {/* {rowContent.program} */}
-                                    <TagsInput
-                                        presetValue={tempRowContent.program}
-                                        presetOptions={rolePresetOptions}
-                                        setPresetOptions={setRolePresetOptions}
-                                        getTagColor={getTagColor}
-                                        setTagColors={setTagColors}
-                                    />
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <br />
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default Drawer;

compass/components/resource/SearchResult.tsx

@@ -23,8 +23,8 @@ export const SearchResult: React.FC<SearchResultProps> = ({
         type === "resource"
             ? BookmarkIcon
             : type === "service"
-            ? ClipboardIcon
-            : QuestionMarkCircleIcon; // Unknown type
+              ? ClipboardIcon
+              : QuestionMarkCircleIcon; // Unknown type
 
     return (
         <div className="flex justify-between items-center w-full p-2 rounded-md hover:bg-purple-100 cursor-pointer group">

compass/components/resource/UserProfile.tsx

@@ -1,15 +1,21 @@
+import { useState } from "react";
 import { signOut } from "@/app/auth/actions";
 
 interface UserProfileProps {
     name: string;
     email: string;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
+const handleClick = async (
+    event: React.MouseEvent<HTMLButtonElement>,
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+    setLoading(true);
     await signOut();
 };
 
-export const UserProfile = ({ name, email }: UserProfileProps) => {
+export const UserProfile = ({ name, email, setLoading }: UserProfileProps) => {
     return (
         <div className="flex flex-col items-start space-y-2">
             <div className="flex flex-col">
@@ -19,7 +25,7 @@ export const UserProfile = ({ name, email }: UserProfileProps) => {
                 <span className="text-xs text-gray-500">{email}</span>
             </div>
             <button
-                onClick={handleClick}
+                onClick={(event) => handleClick(event, setLoading)}
                 className="text-red-600 font-semibold text-xs hover:underline mt-1"
             >
                 Sign out

compass/components/resource/sample_results.json

@@ -1,32 +1,32 @@
 [
-	{
-		"type": "resource",
-		"name": "example name",
-		"description": "example description"
-	},
-	{
-		"type": "service",
-		"name": "example name",
-		"description": "example description"
-	},
-	{
-		"type": "resource",
-		"name": "National Domestic Violence Hotline",
-		"description": "24/7 confidential support for victims of domestic violence"
-	},
-	{
-		"type": "resource",
-		"name": "Legal Aid Society",
-		"description": "Free legal assistance for low-income individuals"
-	},
-	{
-		"type": "service",
-		"name": "Crisis Hotline",
-		"description": "24/7 support for individuals in crisis"
-	},
-	{
-		"type": "unknown",
-		"name": "unknown thing with a really long name",
-		"description": "and let's also type out a really long description to see how it handles overflow and all that anyways"
-	}
+    {
+        "type": "resource",
+        "name": "example name",
+        "description": "example description"
+    },
+    {
+        "type": "service",
+        "name": "example name",
+        "description": "example description"
+    },
+    {
+        "type": "resource",
+        "name": "National Domestic Violence Hotline",
+        "description": "24/7 confidential support for victims of domestic violence"
+    },
+    {
+        "type": "resource",
+        "name": "Legal Aid Society",
+        "description": "Free legal assistance for low-income individuals"
+    },
+    {
+        "type": "service",
+        "name": "Crisis Hotline",
+        "description": "24/7 support for individuals in crisis"
+    },
+    {
+        "type": "unknown",
+        "name": "unknown thing with a really long name",
+        "description": "and let's also type out a really long description to see how it handles overflow and all that anyways"
+    }
 ]

compass/tailwind.config.ts

@@ -21,7 +21,7 @@ const config: Config = {
             },
         },
     },
-    plugins: [],
+    plugins: [require("tailwind-scrollbar")],
 };
 
 export default config;

compass/utils/supabase/middleware.ts

@@ -1,5 +1,7 @@
 import { createServerClient, type CookieOptions } from "@supabase/ssr";
-import { NextResponse, type NextRequest } from "next/server";
+import { User } from "@supabase/supabase-js";
+import { NextRequest, NextResponse } from "next/server";
+import { Role } from "../models/User";
 
 export async function updateSession(request: NextRequest) {
     let response = NextResponse.next({
@@ -54,7 +56,50 @@ export async function updateSession(request: NextRequest) {
         }
     );
 
-    await supabase.auth.getUser();
+    const { data, error } = await supabase.auth.getUser();
+
+    const authenticatedRoutes = ["/admin", "/resource", "/home", "/service"];
+    const pathname = request.nextUrl.pathname;
+
+    for (const route of authenticatedRoutes) {
+        if (error && pathname.startsWith(route)) {
+            console.log("redirected");
+            return NextResponse.redirect(
+                new URL(
+                    "/auth/login",
+                    request.nextUrl.protocol + "//" + request.nextUrl.host
+                )
+            );
+        }
+    }
+
+    if (pathname.startsWith("/admin") && data.user) {
+        // After the previous checks we can assume the user is not empty
+        const userData = await fetch(
+            `${process.env.NEXT_PUBLIC_HOST}/api/user?uuid=${data.user.id}`
+        );
+
+        const user: User = await userData.json();
+
+        if (user.role !== Role.ADMIN) {
+            console.log("redirected as not admin");
+            return NextResponse.redirect(
+                new URL(
+                    "/home",
+                    request.nextUrl.protocol + "//" + request.nextUrl.host
+                )
+            );
+        }
+    }
+
+    if (data.user && pathname.startsWith("/auth/login")) {
+        return NextResponse.redirect(
+            new URL(
+                "/home",
+                request.nextUrl.protocol + "//" + request.nextUrl.host
+            )
+        );
+    }
 
     return response;
 }

package-lock.json

@@ -1,12 +1,13 @@
 {
-  "name": "compass",
+  "name": "workspace",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "devDependencies": {
         "husky": "^9.0.11",
-        "lint-staged": "^15.2.2"
+        "lint-staged": "^15.2.2",
+        "tailwind-scrollbar": "^4.0.0-beta.0"
       }
     },
     "node_modules/ansi-escapes": {
@@ -649,6 +650,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tailwind-scrollbar": {
+      "version": "4.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-4.0.0-beta.0.tgz",
+      "integrity": "sha512-d6qwt3rYDgsKNaQGLW0P6N1TN/87xYZDjH6/PimtFvij2NgC5i3M6mEuVKR4Ixb2u3SvMBT95t7+xzJGJRzXtA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^4.0.0-beta.8"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0-beta.8.tgz",
+      "integrity": "sha512-21HmdRq9tHDLJZavb2cRBGJxBvRODpwb0/t3tRbMOl65hJE6zG6K6lD6lLS3IOC35u4SOjKjdZiJJi9AuWCf+Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

package.json

@@ -1,21 +1,22 @@
 {
   "devDependencies": {
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.2"
+    "lint-staged": "^15.2.2",
+    "tailwind-scrollbar": "^4.0.0-beta.0"
   },
-    "scripts": {
-      "precommit": "lint-staged"
-    },
-    "lint-staged": {
-      "*.ts": [
-        "cd compass",
-        "prettier --write",
-        "git add"
-      ],
-      "*.tsx": [
-        "cd compass",
-        "prettier --write",
-        "git add"
-      ]
-    }
+  "scripts": {
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "cd compass",
+      "prettier --write",
+      "git add"
+    ],
+    "*.tsx": [
+      "cd compass",
+      "prettier --write",
+      "git add"
+    ]
+  }
 }