Feat: Inactive Members Timeline #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

TalkySafe143 merged 6 commits into develop from Miembros-Pasados

Aug 5, 2025

bun.lockb

Binary file not shown.

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ @@
         "@radix-ui/react-hover-card": "^1.1.14",
         "@radix-ui/react-slot": "^1.2.3",
         "@tabler/icons-react": "^3.30.0",
+        "@tanstack/react-query": "^5.84.1",
         "@tsparticles/engine": "^3.8.1",
         "@tsparticles/react": "^3.0.0",
         "@tsparticles/slim": "^3.8.1",
@@ Expand Down @@

public/Logo_Oscuro.png

Binary file not shown.

public/favicon.ico

Binary file not shown.

public/file.svg

This file was deleted.

public/globe.svg

This file was deleted.

public/next.svg

This file was deleted.

public/vercel.svg

This file was deleted.

public/window.svg

This file was deleted.

publicfavicons/web-app-manifest-192x192.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

publicfavicons/web-app-manifest-512x512.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

src/app/apple-icon.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

src/app/favicon.ico

Binary file not shown.

src/app/icon0.svg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

src/app/icon1.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

src/app/inactive-members/page.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,23 @@
+    "use client";
+    import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+    import InactiveMembers from "@/components/members/inactive-members";
+    import { CursorWrapper } from "@/components/home/ui/cursor-wrapper";
+    import MainNavbar, { NavLink } from "@/components/shared/main-navbar";
+    const queryClient = new QueryClient();
+    const navlinks: NavLink[] = [];
+    export default function InactiveMembersPage() {
+      return (
+        <>
+          <QueryClientProvider client={queryClient}>
+            <CursorWrapper>
+              <MainNavbar navLinks={navlinks} />
+              <InactiveMembers />
+            </CursorWrapper>
+          </QueryClientProvider>
+        </>
+      );
+    }

src/app/league/page.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,7 +1,7 @@
  
    'use client';

    "use client";

    import { HeroUIProvider } from "@heroui/react";

    import MainNavbar from '@/components/shared/main-navbar';

    import MainNavbar from "@/components/shared/main-navbar";

    import { Hero } from "@/components/league/sections/hero";

    import { Rules } from "@/components/league/sections/rules";

    import { UpcomingEvents } from "@/components/league/sections/upcoming-events";

    @@ -15,56 +15,63 @@ import { getContests } from "@/services/contest.service";
  
    const navLinks = [

      { key: "home", label: "Home", href: "/" },

      { key: "rules", label: "Rules", href: "#rules" },

      { key: "upcoming-events", label: "Upcoming Events", href: "#upcoming-events" },

      {

        key: "upcoming-events",

        label: "Upcoming Events",

        href: "#upcoming-events",

      },

      { key: "podium", label: "Podium", href: "#podium" },

    ];

    let contests: Contest[] = [];

    try {

      contests = await getContests()

      contests = await getContests();

    } catch {

      contests = [];

    }

    const hard_coded_league_podium: { student: Student, order: number }[] = [

    const hard_coded_league_podium: { student: Student; order: number }[] = [

      {

        student: {

          _id: "1",

          avatar: "https://userpic.codeforces.org/3372984/avatar/13e0bcb6d6425cfe.jpg",

          avatar:

            "https://userpic.codeforces.org/3372984/avatar/13e0bcb6d6425cfe.jpg",

          level: LevelEnum.Advanced,

          matches_count: 100,

          name: "Acha1",

          surname: "Dev",

          victory_count: 90

          victory_count: 90,

        },

        order: 0

        order: 0,

      },

      {

        student: {

          _id: "1",

          avatar: "https://userpic.codeforces.org/3372984/avatar/13e0bcb6d6425cfe.jpg",

          avatar:

            "https://userpic.codeforces.org/3372984/avatar/13e0bcb6d6425cfe.jpg",

          level: LevelEnum.Advanced,

          matches_count: 100,

          name: "Acha2",

          surname: "Dev",

          victory_count: 90

          victory_count: 90,

        },

        order: 1

        order: 1,

      },

      {

        student: {

          _id: "1",

          avatar: "https://userpic.codeforces.org/3372984/avatar/13e0bcb6d6425cfe.jpg",

          avatar:

            "https://userpic.codeforces.org/3372984/avatar/13e0bcb6d6425cfe.jpg",

          level: LevelEnum.Advanced,

          matches_count: 100,

          name: "Acha3",

          surname: "Dev",

          victory_count: 90

          victory_count: 90,

        },

        order: 2

      }

    ]

        order: 2,

      },

    ];

    export default function LeagueHomePage() {

      return (

src/app/manifest.json

-Original file line number
+Diff line change
@@ -0,0 +1,21 @@
+    {
+      "name": "ACM Javeriana",
+      "short_name": "ACM Javeriana",
+      "icons": [
+        {
+          "src": "/publicfavicons/web-app-manifest-192x192.png",
+          "sizes": "192x192",
+          "type": "image/png",
+          "purpose": "maskable"
+        },
+        {
+          "src": "/publicfavicons/web-app-manifest-512x512.png",
+          "sizes": "512x512",
+          "type": "image/png",
+          "purpose": "maskable"
+        }
+      ],
+      "theme_color": "#ffffff",
+      "background_color": "#ffffff",
+      "display": "standalone"
+    }

src/app/page.tsx

-Original file line number
+Diff line change
@@ -1,7 +1,5 @@
     'use client';
     import { AboutUs } from "@/components/home/sections/about-us";
-    import { Activities } from "@/components/home/sections/activities";
     import { Hero } from "@/components/home/sections/hero";
     import { Members } from "@/components/home/sections/members";
     import { HeroUIProvider } from "@heroui/react";
@@ Expand All / @@ -24,7 +22,6 @@ export default function HomePage() { @@
             <Hero />
             <AboutUs />
             <Members />
-            <Activities />
             <Footer />
           </CursorWrapper>
         </HeroUIProvider>
@@ Expand Down @@

src/components/home/member-card.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -5,13 +5,12 @@ import { User } from "lucide-react";
  
    import Image from "next/image";

    import { Member } from "@/models/member.model";

    interface MemberCardProps {

        member: Member;

        onClick: (member: Member) => void;

    }

    const MemberCard = ({ member, onClick }: MemberCardProps) => {

    const ActiveMemberCard = ({ member, onClick }: MemberCardProps) => {

        const [imageError, setImageError] = useState(false);

        return (

    @@ -94,4 +93,4 @@ const MemberCard = ({ member, onClick }: MemberCardProps) => {
  
        );

    };

    export default MemberCard;

    export default ActiveMemberCard;

src/components/home/member-modal.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -18,7 +18,7 @@ interface MemberModalProps {
  
        onClose: () => void;

    }

    const MemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {

    const ActiveMemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {

        const [imageError, setImageError] = useState(false);

        if (!member) return null;

    @@ -38,7 +38,7 @@ const MemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {
  
                                <div className="w-32 h-32 rounded-2xl overflow-hidden bg-gradient-to-br from-[var(--azul-electrico)] to-[var(--azul-ultramar)] flex items-center justify-center shadow-lg border-2 border-[var(--azul-niebla)]/20 dark:border-[#505050] mx-auto md:mx-0 select-none">

                                    {member.image && !imageError ? (

                                        <Image

                                            src={member.image}

                                           src={member.image}

                                            alt={member.name}

                                            width={1000}

                                            height={1000}

    @@ -110,4 +110,4 @@ const MemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {
  
        );

    };

    export default MemberModal;

    export default ActiveMemberModal;

src/components/home/sections/members.tsx

-Original file line number
+Diff line change
@@ -1,10 +1,13 @@
     "use client";
-    import { useEffect, useState } from 'react';
-    import MemberCard from '../member-card';
-    import MemberModal from '../member-modal';
-    import { Member } from '@/models/member.model';
-    import { getMembersService } from '@/services/member.service';
+    import { useEffect, useState } from "react";
+    import MemberCard from "../member-card";
+    import MemberModal from "../member-modal";
+    import { Member } from "@/models/member.model";
+    import { getMembersService } from "@/services/member.service";
+    import Link from "next/link";
+    import { Card, CardContent } from "../ui/card";
+    import { Users } from "lucide-react";
     export function Members() {
         const [members, setMembers] = useState<Member[]>([]);
@@ Expand All / @@ -27,21 +30,53 @@ export function Members() { @@
         };
         return (
-            <div id="members" className="space-y-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+            <div
+                id="members"
+                className="space-y-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"
+            >
                 <div className="text-center space-y-4 mb-10">
-                    <h1 className="dark:text-white">
-                        Nuestro Equipo
-                    </h1>
+                    <h1 className="dark:text-white">Nuestro Equipo</h1>
                     <p className="text-xl dark:text-white/80">
-                        Conoce a los talentosos individuos que hacen que nuestro capítulo sea excepcional
+                        Conoce a los talentosos individuos que hacen que nuestro capítulo sea
+                        excepcional
                     </p>
                 </div>
                 <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                    {members.map((member) => (
-                        <MemberCard key={member._id} member={member} onClick={() => handleMemberClick(member)} />
+                    {members.filter(member => member.active).map((member) => (
+                        <MemberCard
+                            key={member._id}
+                            member={member}
+                            onClick={() => handleMemberClick(member)}
+                        />
                     ))}
+                    {/* Inactive Members Card */}
+                    <Link href="/inactive-members" className="group">
+                        <Card className="group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:shadow-2xl hover:-translate-y-4 rounded-2xl overflow-hidden border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 shadow-lg aspect-[3/4] relative mx-auto max-w-sm w-full">
+                            <CardContent className="p-0 h-full relative flex flex-col items-center justify-end text-center">
+                                <div className="absolute inset-0 flex flex-col items-center justify-center">
+                                    <div className="w-20 h-20 rounded-full bg-gray-200 flex items-center justify-center group-hover:bg-gray-300 transition-colors duration-300 mb-4">
+                                        <Users className="w-10 h-10 text-gray-500" />
+                                    </div>
+                                    <div className="space-y-2">
+                                        <h3 className="text-2xl font-bold text-gray-700 group-hover:text-gray-900 transition-colors duration-200 italic">
+                                            Ver Miembros Inactivos
+                                        </h3>
+                                        <p className="text-gray-500 text-sm px-4">
+                                            Consulta la lista de miembros que ya no están activos
+                                        </p>
+                                    </div>
+                                </div>
+                                {/* Overlay para efecto hover */}
+                                <div className="absolute inset-0 bg-gradient-to-t from-gray-200/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                            </CardContent>
+                        </Card>
+                    </Link>
                 </div>
-                <MemberModal member={selectedMember} isOpen={isModalOpen} onClose={handleCloseModal} />
+                <MemberModal
+                    member={selectedMember}
+                    isOpen={isModalOpen}
+                    onClose={handleCloseModal}
+                />
             </div>
         );
-    }
+    }

src/components/home/ui/badge.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,37 +1,38 @@
  
    import * as React from "react"

    import { cva, type VariantProps } from "class-variance-authority"

    import {cva, type VariantProps} from "class-variance-authority"

    import { cn } from "@/utils/cn"

    import {cn} from "@/utils/cn"

    const badgeVariants = cva(

      "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

      {

        variants: {

          variant: {

            default:

              "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",

            secondary:

              "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",

            destructive:

              "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",

            outline: "text-foreground",

          },

        },

        defaultVariants: {

          variant: "default",

        },

      }

        "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

        {

            variants: {

                variant: {

                    default:

                        "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",

                    secondary:

                        "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",

                    destructive:

                        "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",

                    outline: "text-foreground",

                },

            },

            defaultVariants: {

                variant: "default",

            },

        }

    )

    export interface BadgeProps

      extends React.HTMLAttributes<HTMLDivElement>,

        VariantProps<typeof badgeVariants> {}

        extends React.HTMLAttributes<HTMLDivElement>,

            VariantProps<typeof badgeVariants> {

    }

    function Badge({ className, variant, ...props }: BadgeProps) {

      return (

        <div className={cn(badgeVariants({ variant }), className)} {...props} />

      )

    function Badge({className, variant, ...props}: BadgeProps) {

        return (

            <div className={cn(badgeVariants({variant}), className)} {...props} />

        )

    }

    export { Badge, badgeVariants }

    export {Badge, badgeVariants}