diff --git a/src/app/(public)/alumni/page.tsx b/src/app/(public)/alumni/page.tsx new file mode 100644 index 0000000..f96c309 --- /dev/null +++ b/src/app/(public)/alumni/page.tsx @@ -0,0 +1,36 @@ +"use client"; + +import React, { useState, useEffect, Suspense } from "react"; +import Alumni from "@/components/pages/Alumni"; +import { useSearchParams } from "next/navigation"; + +function AlumniWrapper() { + const searchParams = useSearchParams(); + const departmentParam = searchParams.get("department"); + const [currentDepartment, setCurrentDepartment] = useState(departmentParam || "Full-Stack"); + + // Optional: if URL changes during client-side navigation, update state + useEffect(() => { + const dept = searchParams.get("department"); + setCurrentDepartment(dept || "Full-Stack"); + }, [searchParams]); + + return ( + + ); +} + +export default function AlumniPage() { + useEffect(() => { + document.title = "Alumni"; + }, []); + + return ( + Loading alumni...}> + + + ); +} diff --git a/src/components/AboutUsHeroBanner.tsx b/src/components/AboutUsHeroBanner.tsx index d839a90..7dcac27 100644 --- a/src/components/AboutUsHeroBanner.tsx +++ b/src/components/AboutUsHeroBanner.tsx @@ -1,17 +1,23 @@ - - +import Image from "next/image"; +import AboutUsHeroBannerBackground from "../../public/images/ABOUT-hero.jpg"; export default function AboutUsHeroBanner() { return ( -
+
+
+ About Us hero background
-
-

+
+

About Us

-

- SYSDEV develops tech solutions for SAMAHAN and the AdDU community, driven by student - collaboration and innovation. +

+ SYSDEV develops tech solutions for SAMAHAN and the AdDU community, + driven by student collaboration and innovation.

diff --git a/src/components/pages/Alumni.tsx b/src/components/pages/Alumni.tsx new file mode 100644 index 0000000..5861033 --- /dev/null +++ b/src/components/pages/Alumni.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { AlumniMeetTheTeamSection } from "../sections/AlumniMeetTheTeamSection"; + +export interface AlumniPageProps { + currentDepartment: string; + setCurrentDepartment: React.Dispatch>; +} + +const Alumni: React.FC = ({ + currentDepartment, + setCurrentDepartment, +}) => { + return ( +
+ + {/* */} +
+ ); +}; + +export default Alumni; diff --git a/src/components/sections/AboutUsMeetTheTeamSection.tsx b/src/components/sections/AboutUsMeetTheTeamSection.tsx index aeb23e0..9d67d98 100644 --- a/src/components/sections/AboutUsMeetTheTeamSection.tsx +++ b/src/components/sections/AboutUsMeetTheTeamSection.tsx @@ -1,7 +1,7 @@ -'use client'; +"use client"; import Link from "next/link"; -import { GetMembers } from '@/lib/features/members/service/GetMembers.api'; +import { GetMembers } from "@/lib/features/members/service/GetMembers.api"; import { RawMember } from "@/lib/features/members/types/members"; import Button from "../ui/Button"; import { OfficerCard } from "../ui/OfficerCard"; @@ -24,9 +24,9 @@ export default function AboutUsMeetTheTeamSection() { "Backend Head", "UI/UX Head", "Creatives Head", - "Public Relations Officer" + "Public Relations Officer", ], - [] + [], ); // Fetch members on mount @@ -45,15 +45,15 @@ export default function AboutUsMeetTheTeamSection() { // Filter and sort officers useEffect(() => { const filteredOfficers = members.filter((member) => - member.roles.some((r) => officerRoles.includes(r.roles.name)) + member.roles.some((r) => officerRoles.includes(r.roles.name)), ); const sortedOfficers = filteredOfficers.sort((a, b) => { const aIndex = officerRoles.findIndex((role) => - a.roles.some((r) => r.roles.name === role) + a.roles.some((r) => r.roles.name === role), ); const bIndex = officerRoles.findIndex((role) => - b.roles.some((r) => r.roles.name === role) + b.roles.some((r) => r.roles.name === role), ); return aIndex - bIndex; }); @@ -65,10 +65,14 @@ export default function AboutUsMeetTheTeamSection() { const getOfficerClass = (index: number) => { // For large screens (xl), we use 4 columns switch (index) { - case 0: return "col-span-2 xl:col-span-4"; // First row single item - case 1: return "col-span-2 xl:col-span-4"; // Second row single item - case officers.length - 1: return "col-span-2 xl:col-span-4"; // Last row single item - default: return "col-span-1"; // All middle items take 1 column each + case 0: + return "col-span-2 xl:col-span-4"; // First row single item + case 1: + return "col-span-2 xl:col-span-4"; // Second row single item + case officers.length - 1: + return "col-span-2 xl:col-span-4"; // Last row single item + default: + return "col-span-1"; // All middle items take 1 column each } }; @@ -81,10 +85,10 @@ export default function AboutUsMeetTheTeamSection() {

Meet the Officers

- (A.Y. '24 - '25) + (A.Y. '25 - '26)

- The minds behind SYSDEV — building solution for a better AdDU. + The minds behind SYSDEV — building solution for a better AdDU .

diff --git a/src/components/sections/AlumniMeetTheTeamSection.tsx b/src/components/sections/AlumniMeetTheTeamSection.tsx new file mode 100644 index 0000000..21d40f9 --- /dev/null +++ b/src/components/sections/AlumniMeetTheTeamSection.tsx @@ -0,0 +1,327 @@ +"use client"; +import { RawMember } from "@/lib/features/members/types/members"; +import { MemberCard } from "../ui/MemberCard"; +import MembersFilter from "../ui/MembersFilter"; +import React, { useEffect } from "react"; +import { useRouter } from "next/navigation"; +import { departmentCards, DepartmentCard } from "../ui/DepartmentCard"; + +// Placeholder alumni data +const placeholderAlumni: Record = { + "Full-Stack": [ + { + id: 1, + name: "John Doe", + email: "john.doe@alumni.addu.edu.ph", + photo: "/images/alumni-placeholder.jpg", + roles: [ + { + roles: { + id: 2, + name: "Full-Stack", + modifiedAt: "", + createdAt: "", + deletedAt: null, + }, + }, + ], + }, + { + id: 2, + name: "Jane Smith", + email: "jane.smith@alumni.addu.edu.ph", + photo: "/images/alumni-placeholder.jpg", + roles: [ + { + roles: { + id: 2, + name: "Full-Stack", + modifiedAt: "", + createdAt: "", + deletedAt: null, + }, + }, + ], + }, + ], + "Front-End": [ + { + id: 3, + name: "Alice Johnson", + email: "alice.johnson@alumni.addu.edu.ph", + photo: "/images/alumni-placeholder.jpg", + roles: [ + { + roles: { + id: 5, + name: "Front-End", + modifiedAt: "", + createdAt: "", + deletedAt: null, + }, + }, + ], + }, + ], + "Back-End": [ + { + id: 4, + name: "Bob Wilson", + email: "bob.wilson@alumni.addu.edu.ph", + photo: "/images/alumni-placeholder.jpg", + roles: [ + { + roles: { + id: 7, + name: "Back-End", + modifiedAt: "", + createdAt: "", + deletedAt: null, + }, + }, + ], + }, + ], + QA: [ + { + id: 5, + name: "Carol Brown", + email: "carol.brown@alumni.addu.edu.ph", + photo: "/images/alumni-placeholder.jpg", + roles: [ + { + roles: { + id: 9, + name: "QA", + modifiedAt: "", + createdAt: "", + deletedAt: null, + }, + }, + ], + }, + ], + DevOps: [ + { + id: 6, + name: "David Lee", + email: "david.lee@alumni.addu.edu.ph", + photo: "/images/alumni-placeholder.jpg", + roles: [ + { + roles: { + id: 1, + name: "DevOps", + modifiedAt: "", + createdAt: "", + deletedAt: null, + }, + }, + ], + }, + ], + "Project Manager": [ + { + id: 7, + name: "Eva Garcia", + email: "eva.garcia@alumni.addu.edu.ph", + photo: "/images/alumni-placeholder.jpg", + roles: [ + { + roles: { + id: 4, + name: "Project Manager", + modifiedAt: "", + createdAt: "", + deletedAt: null, + }, + }, + ], + }, + ], + "UI/UX": [ + { + id: 8, + name: "Frank Miller", + email: "frank.miller@alumni.addu.edu.ph", + photo: "/images/alumni-placeholder.jpg", + roles: [ + { + roles: { + id: 3, + name: "UI/UX", + modifiedAt: "", + createdAt: "", + deletedAt: null, + }, + }, + ], + }, + ], + Creatives: [ + { + id: 9, + name: "Grace Davis", + email: "grace.davis@alumni.addu.edu.ph", + photo: "/images/alumni-placeholder.jpg", + roles: [ + { + roles: { + id: 6, + name: "Creatives", + modifiedAt: "", + createdAt: "", + deletedAt: null, + }, + }, + ], + }, + ], +}; + +export interface AlumniMeetTheTeamSectionProps { + currentDepartment: string; + setCurrentDepartment: React.Dispatch>; +} + +export const AlumniMeetTheTeamSection: React.FC< + AlumniMeetTheTeamSectionProps +> = ({ currentDepartment, setCurrentDepartment }) => { + const router = useRouter(); + const [members, setMembers] = React.useState([]); + + // const officerRoles = [ + // "Director", + // "Deputy Director", + // "Secretary General", + // "Treasurer", + // "Auditor", + // "External Affairs Head", + // "Frontend Head", + // "Backend Head", + // "UI/UX Head", + // "Creatives Head", + // "Public Relations Officer", + // ]; + + // function extractMembers(res: unknown): RawMember[] { + // if ( + // res && + // typeof res === "object" && + // "data" in res && + // Array.isArray((res as { data?: unknown }).data) + // ) { + // return (res as { data: RawMember[] }).data; + // } + // if (Array.isArray(res)) { + // return res as RawMember[]; + // } + // return []; + // } + + useEffect(() => { + window.history.replaceState( + null, + "", + `/alumni?department=${encodeURIComponent(currentDepartment)}`, + ); + }, [currentDepartment]); + + useEffect(() => { + // async function fetchData() { + // let res; + // switch (currentDepartment) { + // case "Full-Stack": + // res = await GetMembers(2); + // break; + // case "Front-End": + // res = await GetMembers(5); + // break; + // case "Back-End": + // res = await GetMembers(7); + // break; + // case "QA": + // res = await GetMembers(9); + // break; + // case "DevOps": + // res = await GetMembers(1); + // break; + // case "Project Manager": + // res = await GetMembers(4); + // break; + // case "UI/UX": + // res = await GetMembers(3); + // break; + // case "Creatives": + // res = await GetMembers(6); + // break; + // default: + // res = await GetMembers(); + // } + + // const membersArray: RawMember[] = extractMembers(res); + + // // ✅ Filter out officers + // const filteredMembers = membersArray.filter( + // (member) => + // !member.roles.some((r) => officerRoles.includes(r.roles.name)) + // ); + + // setMembers(filteredMembers); + // } + + // Placeholder alumni data + const alumniData = placeholderAlumni[currentDepartment] || []; + + setMembers(alumniData); + // fetchData(); + }, [currentDepartment]); + + useEffect(() => { + router.push(`/alumni?department=${encodeURIComponent(currentDepartment)}`); + }, [currentDepartment, router]); + + return ( +
+
+
+
+

Meet the Alumni

+

+ (A.Y. '23 - '24) +

+

+ The alumni of SYSDEV — former builders of solutions for a + better AdDU. +

+
+
+ +
+ +
+ + {/* Department Card */} + {departmentCards[currentDepartment as keyof typeof departmentCards] && ( + + )} + +
+
    + {members.map((member, idx) => ( +
  • + +
    • + ))} +
+
+
+ ); +}; diff --git a/src/components/sections/MembersMeetTheTeamSection.tsx b/src/components/sections/MembersMeetTheTeamSection.tsx index 4f3b487..f21a775 100644 --- a/src/components/sections/MembersMeetTheTeamSection.tsx +++ b/src/components/sections/MembersMeetTheTeamSection.tsx @@ -12,10 +12,9 @@ export interface MembersMeetTheTeamSectionProps { setCurrentDepartment: React.Dispatch>; } -export const MembersMeetTheTeamSection: React.FC = ({ - currentDepartment, - setCurrentDepartment, -}) => { +export const MembersMeetTheTeamSection: React.FC< + MembersMeetTheTeamSectionProps +> = ({ currentDepartment, setCurrentDepartment }) => { const router = useRouter(); const [members, setMembers] = React.useState([]); @@ -30,7 +29,7 @@ export const MembersMeetTheTeamSection: React.FC "Backend Head", "UI/UX Head", "Creatives Head", - "Public Relations Officer" + "Public Relations Officer", ]; function extractMembers(res: unknown): RawMember[] { @@ -52,7 +51,7 @@ export const MembersMeetTheTeamSection: React.FC window.history.replaceState( null, "", - `/members?department=${encodeURIComponent(currentDepartment)}` + `/members?department=${encodeURIComponent(currentDepartment)}`, ); }, [currentDepartment]); @@ -93,7 +92,7 @@ export const MembersMeetTheTeamSection: React.FC // ✅ Filter out officers const filteredMembers = membersArray.filter( (member) => - !member.roles.some((r) => officerRoles.includes(r.roles.name)) + !member.roles.some((r) => officerRoles.includes(r.roles.name)), ); setMembers(filteredMembers); @@ -107,15 +106,18 @@ export const MembersMeetTheTeamSection: React.FC }, [currentDepartment, router]); return ( -
-
-

Meet the Team

-

- (A.Y. '24 - '25) -

-

- The minds behind SYSDEV — building solution for a better AdDU. -

+
+
+
+
+

Members

+

+ (A.Y. '25 - '26) +

+

+ The minds behind SYSDEV — building solution for a better AdDU. +

+
@@ -127,9 +129,11 @@ export const MembersMeetTheTeamSection: React.FC {/* Department Card */} {departmentCards[currentDepartment as keyof typeof departmentCards] && ( - - - + )}
diff --git a/src/components/ui/ServiceHeroBanner.tsx b/src/components/ui/ServiceHeroBanner.tsx index 25b9700..f9078f5 100644 --- a/src/components/ui/ServiceHeroBanner.tsx +++ b/src/components/ui/ServiceHeroBanner.tsx @@ -1,36 +1,43 @@ -import { withBasePath } from "@/lib/utils" -import Image from "next/image" +import { withBasePath } from "@/lib/utils"; +import Image from "next/image"; const ServiceHeroBanner = () => { - return ( -
-
- {/* Placeholder for blue gradient bg */} - -
-
-

- Services -

-

- See how SYSDEV empowers the community through technology. -

-
+ return ( +
+
+ {/* Placeholder for blue gradient bg */} -
-
- SysDev Mascot -
-
+
+
+
+
+

+ Services +

+

+ See how{" "} + + SYSDEV + {" "} + empowers the community through technology. +

+
+ +
+
+ SysDev Mascot +
+
-
- ) -} +
+
+ ); +}; -export default ServiceHeroBanner \ No newline at end of file +export default ServiceHeroBanner; diff --git a/src/data/navLinks.json b/src/data/navLinks.json index f7c66e2..d897dad 100644 --- a/src/data/navLinks.json +++ b/src/data/navLinks.json @@ -13,16 +13,32 @@ { "href": "/members?department=QA", "label": "QA" }, { "href": "/members?department=DevOps", "label": "DevOps" }, { "href": "/members?department=UI%2FUX", "label": "UI/UX" }, - { "href": "/members?department=Project%20Manager", "label": "Proj. Manager" }, - { "href": "/members?department=Creatives", "label": "Creatives" } + { + "href": "/members?department=Project%20Manager", + "label": "Proj. Manager" + }, + { "href": "/members?department=Creatives", "label": "Creatives" }, + { "href": "/alumni", "label": "Alumni" } ] }, { "href": "/contact-us", "label": "Contact" }, { "href": "/projects", "label": "Projects" } ], "socialMedia": [ - { "type": "email", "href": "mailto:samahan.sd@addu.edu.ph", "label": "Email" }, - { "type": "linkedin", "href": "https://linkedin.com/company/samahan-sysdev", "label": "LinkedIn" }, - { "type": "facebook", "href": "https://facebook.com/samahansysdev", "label": "Facebook" } + { + "type": "email", + "href": "mailto:samahan.sd@addu.edu.ph", + "label": "Email" + }, + { + "type": "linkedin", + "href": "https://linkedin.com/company/samahan-sysdev", + "label": "LinkedIn" + }, + { + "type": "facebook", + "href": "https://facebook.com/samahansysdev", + "label": "Facebook" + } ] -} \ No newline at end of file +}