feat: update member listing with new types, sorting, and ribbons

- Include alumni, advisor, supporting, and honorary members in the team list (exclude passive).
- Implement custom sorting order: Board > Advisor > Core/Trainees > Supporting/Honorary > Alumni > Passive.
- Add visual ribbons: Blue for Advisor, Gray for Alumni, Orange for Honorary.

Author: CodeByNikolas

src/app/about/team/Team.tsx

@@ -24,7 +24,8 @@ export const OurTeam = ({ members }: OurTeamProps) => {
 
   const filteredMembers = useMemo(() => {
     return members.filter(member => {
-      const isMemberActive = member.membership_status === 'core' || member.membership_status === 'trainees' ;
+      const allowedStatuses = ['core', 'trainees', 'alumni', 'advisor', 'supporting', 'honorary'];
+      const isMemberActive = member.membership_status && allowedStatuses.includes(member.membership_status);
       const memberDepartments = member.departments?.map(dep => dep.name) || [];
       const matchesDepartment = selectedDepartment
         ? memberDepartments.includes(selectedDepartment)
@@ -33,6 +34,24 @@ export const OurTeam = ({ members }: OurTeamProps) => {
     }).sort((a, b) => {
       if (a.is_board && !b.is_board) return -1;
       if (!a.is_board && b.is_board) return 1;
+
+      const statusOrder: Record<string, number> = {
+        advisor: 1,
+        core: 2,
+        trainees: 2,
+        honorary: 3,
+        supporting: 3,
+        alumni: 4,
+        passive: 5
+      };
+
+      const statusA = a.membership_status ? (statusOrder[a.membership_status] ?? 99) : 99;
+      const statusB = b.membership_status ? (statusOrder[b.membership_status] ?? 99) : 99;
+
+      if (statusA !== statusB) {
+          return statusA - statusB;
+      }
+
       return 0;
     });
   }, [selectedDepartment, members]);

src/components/member_card/MemberCard.tsx

@@ -36,18 +36,22 @@ const ribbonVariants = cva("", {
             blue: "bg-blue-600",
             green: "bg-green-600",
             yellow: "bg-yellow-600",
+            gray: "bg-gray-600",
+            orange: "bg-orange-600",
         },
         borderColor: {
             blue: "border-blue-600",
             green: "border-green-600",
             yellow: "border-yellow-600",
+            gray: "border-gray-600",
+            orange: "border-orange-600",
         }
     }
 })
 
 interface RibbonProps {
     text: string;
-    color: "blue" | "green" | "yellow";
+    color: "blue" | "green" | "yellow" | "gray" | "orange";
 }   
 
 const Ribbon = React.forwardRef<HTMLDivElement, RibbonProps>(({ text, color }, ref) => {
@@ -71,6 +75,9 @@ export const MemberCard = React.forwardRef<HTMLDivElement, MemberCardProps>(({ m
             {/* Ribbons */}
             <div className="absolute top-3 right-0 flex flex-col gap-1 items-end justify-end">
                 {member.is_board && <Ribbon text="Board" color="blue" />}
+                {member.membership_status === 'advisor' && <Ribbon text="Advisor" color="blue" />}
+                {member.membership_status === 'alumni' && <Ribbon text="Alumni" color="gray" />}
+                {member.membership_status === 'honorary' && <Ribbon text="Honorary" color="orange" />}
             </div>
 
             {/* Left column for mobile (Avatar) */}