ELX | Feat: dashboards (frontend), Ench: performance improvements, revamped mentors page

CONTRIBUTING.md

@@ -0,0 +1,95 @@
+# Contributing Guidelines
+
+Thank you for your interest in contributing to this project! We welcome contributions from the community. Please read the following guidelines to help us maintain a high standard and streamline the contribution process.
+
+## How to Contribute
+
+1. **Fork the Repository**
+
+   - Click the 'Fork' button at the top right of this repository page to create your own copy.
+
+2. **Clone Your Fork**
+
+   - Clone your forked repository to your local machine:
+     ```bash
+     git clone https://github.com/<your-username>/ElixirV3.git
+     cd ElixirV3
+     ```
+
+3. **Create a New Branch**
+
+   - Create a branch for your feature or bugfix:
+     ```bash
+     git checkout -b <branch-name>
+     ```
+
+4. **Make Your Changes**
+
+   - Make your changes or additions. Please ensure your code follows the existing style and conventions.
+
+5. **Test Your Changes**
+
+   - Run the application and ensure your changes work as expected and do not break existing functionality.
+
+6. **Commit Your Changes**
+
+   - Use clear and descriptive commit messages. Follow the commit message format below.
+
+7. **Push to Your Fork**
+
+   - Push your branch to your forked repository:
+     ```bash
+     git push origin <branch-name>
+     ```
+
+8. **Open a Pull Request**
+   - Go to the original repository and open a pull request. Provide a clear description of your changes and reference any related issues.
+
+## Commit Message Format
+
+```
+<TEAM> | <type>(<scope>): <description>
+```
+
+### Examples
+
+```
+GFG | feat(event): new card designs
+GFG | fix(event): api request improve
+GFG | chore(event): title copy change
+GFG | refactor(event): mentor's search logic
+
+ELX | feat(event): new card designs
+GDG | fix(event): api request improve
+CC | chore(event): title copy change
+```
+
+- `<TEAM>`: Team code. If you are a member of one of the Elixir clubs, use your club's code:
+
+  - `GFG` for GeeksforGeeks ABESEC
+  - `GDG` for Google Developer Group ABESEC
+  - `CC` for CodeChef ABESEC
+  - `ELX` for external contributers
+
+- `<type>`: Type of change (feat, fix, chore, refactor, etc.)
+- `<scope>`: Area affected (e.g., event)
+- `<description>`: Short summary of the change
+
+## Code Style & Standards
+
+- Follow the existing code style and formatting.
+- Write clear, concise, and well-documented code.
+- Add comments where necessary, especially for complex logic.
+- Write tests for new features or bug fixes if applicable.
+
+## Community Standards
+
+- Be respectful and inclusive in all interactions.
+- Provide constructive feedback in code reviews.
+- Report issues or bugs using the issue tracker.
+
+## Need Help?
+
+If you have any questions or need guidance, feel free to open an issue or reach out to the maintainers.
+
+Thank you for contributing!

app/dashboard/admin/page.tsx

@@ -0,0 +1,254 @@
+"use client";
+import { useState } from "react";
+import { AnimatePresence } from "framer-motion";
+import WelcomeSection from "../components/WelcomeSection";
+import ManagementSection from "../components/ManagementSection";
+import Modal from "../components/Modal";
+import StatsCards from "../components/StatsCards";
+import { ColorScheme } from "../types";
+
+// 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<string | null>(null);
+  const [selectedItem, setSelectedItem] = useState<any>(null);
+
+  const openModal = (modalType: string, item?: any) => {
+    setActiveModal(modalType);
+    if (item) setSelectedItem(item);
+  };
+
+  const closeModal = () => {
+    setActiveModal(null);
+    setSelectedItem(null);
+  };
+
+  const adminStats = [
+    {
+      heading: "1.2k",
+      subheading: "Total Students",
+      description: "+120 this month",
+      colorScheme: "purple" as ColorScheme,
+    },
+    {
+      heading: "45",
+      subheading: "Upcoming Events",
+      description: "Next: 3 days",
+      colorScheme: "blue" as ColorScheme,
+    },
+    {
+      heading: "8",
+      subheading: "Blog Submissions",
+      description: "3 pending approval",
+      colorScheme: "green" as ColorScheme,
+    },
+    {
+      heading: "24",
+      subheading: "Mentors",
+      description: "5 new additions",
+      colorScheme: "orange" as ColorScheme,
+    },
+  ];
+
+  const renderModalContent = () => {
+    if (!selectedItem) return null;
+    return (
+      <div className="space-y-2">
+        <table className="w-full text-left">
+          <tbody>
+            {Object.entries(selectedItem).map(([key, value]) => (
+              <tr key={key}>
+                <td className="pr-4 font-semibold text-white/80 capitalize">
+                  {key}
+                </td>
+                <td className="text-white/60">{String(value)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-8 w-full max-w-6xl mx-auto lg:mt-38 mt-20">
+        <WelcomeSection
+          title="Admin Dashboard"
+          description="Manage your community and monitor platform metrics."
+        />
+
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+          {adminStats.map((stat, idx) => (
+            <StatsCards
+              key={idx}
+              heading={stat.heading}
+              subheading={stat.subheading}
+              description={stat.description}
+              colorScheme={stat.colorScheme}
+            />
+          ))}
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <ManagementSection
+            title="Student Management"
+            data={mockStudents}
+            columns={[
+              { header: "Name", accessor: (row) => row.name },
+              { header: "Role", accessor: (row) => row.role },
+              { header: "Join Date", accessor: (row) => row.joinDate },
+            ]}
+            onViewAll={() => openModal("students")}
+            onRowClick={(item) => openModal("Student Details", item)}
+          />
+
+          <ManagementSection
+            title="Mentor Management"
+            data={mockMentors}
+            columns={[
+              { header: "Name", accessor: (row) => row.name },
+              { header: "Expertise", accessor: (row) => row.expertise },
+              { header: "Status", accessor: (row) => row.status },
+            ]}
+            onViewAll={() => openModal("mentors")}
+            onRowClick={(item) => openModal("Mentor Details", item)}
+          />
+
+          <ManagementSection
+            title="Event Management"
+            data={mockEvents}
+            columns={[
+              { header: "Event", accessor: (row) => row.name },
+              { header: "Club", accessor: (row) => row.club },
+              { header: "Date", accessor: (row) => row.date },
+            ]}
+            onViewAll={() => openModal("events")}
+            onRowClick={(item) => openModal("Event Details", item)}
+          />
+
+          <ManagementSection
+            title="Blog Management"
+            data={mockBlogs}
+            columns={[
+              { header: "Title", accessor: (row) => row.title },
+              { header: "Author", accessor: (row) => row.author },
+              { header: "Status", accessor: (row) => row.status },
+            ]}
+            onViewAll={() => openModal("blogs")}
+            onRowClick={(item) => openModal("Blog Details", item)}
+          />
+        </div>
+      </div>
+
+      <AnimatePresence>
+        {activeModal && (
+          <Modal
+            isOpen={true}
+            onClose={closeModal}
+            title={activeModal.charAt(0).toUpperCase() + activeModal.slice(1)}
+          >
+            {renderModalContent()}
+          </Modal>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default AdminDashboard;