User Tile UI (#139)

* styling done, must order.

Co-authored-by: cledi01 <[email protected]>
Co-authored-by: Tyler <[email protected]>
Co-authored-by: Kim Nguyen <[email protected]>
Co-authored-by: Johnny Tan <[email protected]>
Co-authored-by: Won Kim <[email protected]>

* change styling for dropdown position and make role font size smaller

* fix senior tile styling

* small fix

* add sortedStudents function

* add chapter leader and remove president position

* Fix route

---------

Co-authored-by: bellybubjoeOfficial <[email protected]>
Co-authored-by: cledi01 <[email protected]>
Co-authored-by: Tyler <[email protected]>
Co-authored-by: Kim Nguyen <[email protected]>
Co-authored-by: Johnny Tan <[email protected]>
Co-authored-by: Won Kim <[email protected]>
Co-authored-by: wkim10 <[email protected]>
Co-authored-by: nickbar01234 <[email protected]>

src/app/private/[uid]/chapter-leader/layout.tsx

@@ -35,11 +35,6 @@ const UserLayout = ({ children }: IUserLayout) => {
         link: `/private/${user.id}/chapter-leader/seniors`,
         icon: faUserGroup,
       },
-      {
-        name: "Pending",
-        link: `/private/${user.id}/chapter-leader/pending`,
-        icon: faUserPlus,
-      },
       {
         name: "Profile",
         link: `/private/${user.id}/chapter-leader/edit-profile`,

src/app/private/[uid]/chapter-leader/users/MembersHomePage.tsx

@@ -11,6 +11,7 @@ import { faArrowUpFromBracket } from "@fortawesome/free-solid-svg-icons";
 import { Dropdown } from "@components/selector";
 import { Popup } from "@components/container";
 import { useRouter } from "next/navigation";
+import { sortedStudents } from "@utils";
 
 type MembersHomePageProps = {
   members: User[];
@@ -96,7 +97,7 @@ const MembersHomePage = ({ members }: MembersHomePageProps) => {
       )}
       <SearchableContainer
         display={displayMembers}
-        elements={members}
+        elements={sortedStudents(members)}
         emptyNode={
           <h1 className="text-2xl font-light text-[#000022]">
             This chapter has no members.

src/components/DisplayChapterInfo.tsx

@@ -9,6 +9,7 @@ import { UserContext } from "@context/UserProvider";
 import PendingCard from "@components/PendingCard";
 import { fullName } from "@utils";
 import { RoleToUrlSegment } from "@constants/RoleAlias";
+import { sortedStudents } from "@utils";
 
 type ChapterWithUser = Prisma.ChapterGetPayload<{
   include: { students: true };
@@ -91,12 +92,14 @@ const DisplayChapterInfo = ({
                 : "Executive Board"}
             </div>
           }
-          tiles={students.map((student) => {
+          tiles={sortedStudents(students).map((student) => {
             const link =
               user.role === "USER"
                 ? ""
                 : `/private/${user.id}/${RoleToUrlSegment[user.role]}` +
-                  `${user.role === "ADMIN" && `/home/chapters/${chapter.id}`}` +
+                  `${
+                    user.role === "ADMIN" ? `/home/chapters/${chapter.id}` : ""
+                  }` +
                   `/users/${student.id}`;
             return <UserTile key={student.id} student={student} link={link} />;
           })}

src/components/TileGrid/SeniorTile.tsx

@@ -59,12 +59,6 @@ export function SeniorTile({
     },
   ];
 
-  console.log(
-    `${senior.firstname} ${senior.lastname}` +
-      "'s Students: " +
-      senior.StudentIDs.toString()
-  );
-
   return (
     <div className="relative flex aspect-square w-auto flex-col items-center rounded bg-white font-medium drop-shadow-md hover:bg-off-white">
       <TileEdit options={options} />

src/components/TileGrid/UserTile.tsx

@@ -21,8 +21,12 @@ export function UserTile({
   dropdownComponent,
 }: UserTileProps) {
   return (
-    <div className="w-40 rounded-lg bg-white shadow-lg">
-      <div className="h-40 w-40 rounded-lg bg-white drop-shadow-md hover:bg-off-white">
+    <div
+      className={
+        (student ? "w-48 " : "w-40 ") + "rounded-lg bg-white shadow-lg"
+      }
+    >
+      <div className="h-40 w-full rounded-lg bg-white drop-shadow-md hover:bg-off-white">
         <Link
           href={link}
           className={
@@ -50,19 +54,37 @@ export function UserTile({
           </div>
         </Link>
       </div>
-      <div className="relative flex items-center justify-between p-2">
+      <div className="relative flex items-start justify-between px-3 py-4">
         <div className="overflow-hidden">
-          <p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-dark-teal before:invisible before:content-['\200B']">
+          <p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold before:invisible before:content-['\200B']">
             {student
               ? fullName(student)
               : senior
               ? seniorFullName(senior)
               : null}
           </p>
+          {student ? (
+            <p
+              className={
+                (student.position === "" && student.role !== "CHAPTER_LEADER"
+                  ? "bg-med-tan text-dark-teal "
+                  : "bg-[#AE583C] font-bold text-white  ") +
+                "mt-5 inline-block text-ellipsis whitespace-nowrap rounded-3xl px-3.5 py-1.5 text-center text-xs"
+              }
+            >
+              {student.role === "CHAPTER_LEADER"
+                ? "Chapter Leader"
+                : student.position === ""
+                ? "Member"
+                : student.position}
+            </p>
+          ) : null}
           {/* @TODO: Add pronouns once we add to student field  */}
-          <p className="text-md font-base text-neutral-600 mt-[5px] truncate text-[10px] text-dark-teal before:invisible before:content-['\200B']">
-            {senior && senior.location}
-          </p>
+          {senior ? (
+            <p className="text-md font-base text-neutral-600 mt-[5px] truncate text-[10px] text-dark-teal before:invisible before:content-['\200B']">
+              {senior.location}
+            </p>
+          ) : null}
         </div>
         {dropdownComponent}
       </div>

src/utils/index.tsx

@@ -3,6 +3,10 @@ import { Session } from "next-auth";
 import { Resource, Senior, User } from "@prisma/client";
 import moment from "moment";
 
+type PositionOrder = {
+  [position: string]: number;
+};
+
 export const formatUserHomeRoute = (user: NonNullable<Session["user"]>) => {
   return `/private/${user.id}/${RoleToUrlSegment[user.role]}/home`;
 };
@@ -41,3 +45,30 @@ export const fullName = (user: User) => `${user.firstName} ${user.lastName}`;
 
 export const seniorFullName = (senior: Senior) =>
   `${senior.firstname} ${senior.lastname}`;
+
+export const sortedStudents = (students: User[]) => {
+  const positionOrder: PositionOrder = {
+    "Social Coordinator": 0,
+    "Senior Outreach Coordinator": 1,
+    "Head of Media": 2,
+    Secretary: 3,
+    Treasurer: 4,
+    "Match Coordinator": 5,
+  };
+
+  const comparePositions = (a: User, b: User) => {
+    if (a.role === "CHAPTER_LEADER" && b.role !== "CHAPTER_LEADER") {
+      return -1;
+    }
+    if (b.role === "CHAPTER_LEADER" && a.role !== "CHAPTER_LEADER") {
+      return 1;
+    }
+
+    const orderA = positionOrder[a.position] || Infinity;
+    const orderB = positionOrder[b.position] || Infinity;
+
+    return orderA - orderB;
+  };
+
+  return students.sort(comparePositions);
+};