From 576c25f6a9b4d29a40772a3dc97767fd1d464c14 Mon Sep 17 00:00:00 2001 From: Vaibhav Tripathi Date: Sat, 31 May 2025 19:54:56 +0530 Subject: [PATCH 1/4] GFG | feat: Student and Admin Dashboards --- app/dashboard/admin/page.tsx | 679 +++++++++++++++++++++++++++++++++++ app/dashboard/page.tsx | 125 +++++++ 2 files changed, 804 insertions(+) create mode 100644 app/dashboard/admin/page.tsx create mode 100644 app/dashboard/page.tsx diff --git a/app/dashboard/admin/page.tsx b/app/dashboard/admin/page.tsx new file mode 100644 index 0000000..7f5019b --- /dev/null +++ b/app/dashboard/admin/page.tsx @@ -0,0 +1,679 @@ +"use client"; +import React, { useState } from "react"; +import { motion, AnimatePresence } from "framer-motion"; + +// Mock Data +const mockStudents = [ + { + id: 1, + name: "Vaibhav Tripathi", + email: "vxtr@abes.ac.in", + role: "Student", + joinDate: "2024-01-15", + }, + { + id: 2, + name: "Akash Chaudhary", + email: "akash@abes.ac.in", + role: "Student", + joinDate: "2024-02-01", + }, + { + id: 3, + name: "Shreyash Singh", + email: "shreyash@abes.ac.in", + role: "Club Head", + joinDate: "2024-01-20", + }, +]; + +const mockMentors = [ + { + id: 1, + name: "Dewank Rastogi", + expertise: "Frontend", + achievements: "3+ years experience", + status: "Active", + }, + { + id: 2, + name: "Rudraksh Tyagi", + expertise: "Open Source", + achievements: "LFX", + status: "Active", + }, + { + id: 3, + name: "Vandit Singh", + expertise: "DevOps", + achievements: "Google Summer of Code", + status: "Active", + }, +]; + +const mockEvents = [ + { + id: 1, + name: "Binary Vault", + club: "GFG_ABESEC", + date: "2024-03-15", + participants: 450, + }, + { + id: 2, + name: "Hackhaven", + club: "GDG_ABESEC", + date: "2024-03-20", + participants: 320, + }, + { + id: 3, + name: "Some Event", + club: "CodeChef_ABESEC", + date: "2024-03-25", + participants: 280, + }, +]; + +const mockBlogs = [ + { + id: 1, + title: "Future of AI", + author: "Priya Kumari", + status: "Pending", + date: "2024-03-10", + }, + { + id: 2, + title: "Web Development Trends", + author: "Radhika Chauhan", + status: "Approved", + date: "2024-03-08", + }, + { + id: 3, + title: "Cloud Computing Basics", + author: "Granth Agarwal", + status: "Pending", + date: "2024-03-09", + }, +]; + +const AdminDashboard = () => { + const [activeModal, setActiveModal] = useState(null); + const [selectedItem, setSelectedItem] = useState(null); + + const openModal = (modalType: string, item?: any) => { + setActiveModal(modalType); + if (item) setSelectedItem(item); + }; + + const closeModal = () => { + setActiveModal(null); + setSelectedItem(null); + }; + + const Modal = ({ + isOpen, + onClose, + children, + }: { + isOpen: boolean; + onClose: () => void; + children: React.ReactNode; + }) => { + if (!isOpen) return null; + + return ( +
+ +
+

Details

+ +
+ {children} + +
+ ); + }; + + return ( + <> +
+ {/* Welcome Section */} +
+
+
+

+ Admin Dashboard +

+

+ Manage your community and monitor platform metrics. +

+
+
+
+ + {/* Quick Stats */} +
+
+
+ + 1.2k + + Total Students + + ↑ 120 new this month + +
+
+
+
+ + 45 + + Upcoming Events + + Next: 3 days + +
+
+
+
+ + 8 + + Blog Submissions + + 3 pending approval + +
+
+
+
+ + 24 + + Mentors + + 5 new additions + +
+
+
+ + {/* Main Management Sections */} +
+ {/* Student Management */} +
+
+

+ Student Management +

+ +
+
+
+ + + + + + + + + + {mockStudents.slice(0, 3).map((student) => ( + openModal("studentDetails", student)} + className="cursor-pointer hover:bg-white/5 transition-colors" + > + + + + + ))} + +
NameRoleJoin Date
{student.name} + + {student.role} + + + {student.joinDate} +
+
+
+
+ + {/* Event Management */} +
+
+

+ Event Management +

+ +
+
+
+ + + + + + + + + + {mockEvents.slice(0, 3).map((event) => ( + openModal("eventDetails", event)} + className="cursor-pointer hover:bg-white/5 transition-colors" + > + + + + + ))} + +
Event NameClubDate
{event.name}{event.club}{event.date}
+
+
+
+ + {/* Mentor Management */} +
+
+

+ Mentor Management +

+ +
+
+
+ + + + + + + + + + {mockMentors.slice(0, 3).map((mentor) => ( + openModal("mentorDetails", mentor)} + className="cursor-pointer hover:bg-white/5 transition-colors" + > + + + + + ))} + +
NameExpertiseStatus
{mentor.name} + {mentor.expertise} + + + {mentor.status} + +
+
+
+
+ + {/* Content Management */} +
+
+

+ Blog Management +

+ +
+
+
+ + + + + + + + + + {mockBlogs.slice(0, 3).map((blog) => ( + openModal("blogDetails", blog)} + className="cursor-pointer hover:bg-white/5 transition-colors" + > + + + + + ))} + +
TitleAuthorStatus
{blog.title}{blog.author} + + {blog.status} + +
+
+
+
+
+ + {/* Recent Activity */} +
+
+

+ Recent Activity +

+ +
+
    +
  • +
    + ✓ +
    +
    +

    + New student registration: Vansh Gupta +

    +

    2 minutes ago

    +
    +
    • +
  • +
    + 📝 +
    +
    +

    + New blog submission: "Future of AI" +

    +

    1 hour ago

    +
    +
    • +
  • +
    + 👥 +
    +
    +

    New mentor added: Keshav Jha

    +

    3 hours ago

    +
    +
    • +
+
+ + {/* Modals */} + + {activeModal === "studentDetails" && selectedItem && ( + +
+
+
+

Name

+

{selectedItem.name}

+
+
+

Email

+

{selectedItem.email}

+
+
+

Role

+

{selectedItem.role}

+
+
+

Join Date

+

{selectedItem.joinDate}

+
+
+
+ + {selectedItem.role === "Student" && ( + + )} +
+
+ + )} + + {activeModal === "mentorDetails" && selectedItem && ( + +
+
+
+

Name

+

{selectedItem.name}

+
+
+

Expertise

+

{selectedItem.expertise}

+
+
+

Achievements

+

{selectedItem.achievements}

+
+
+

Status

+

{selectedItem.status}

+
+
+
+ + +
+
+ + )} + + {activeModal === "addMentor" && ( + +
+
+
+ + + +
+
+
+ + • + +
+

+ Square image, max 2MB +

+
+
+
+ + +
+
+ + +
+
+ +