From 6ae12f48742e39cb286c5abbc8304ef414a59a81 Mon Sep 17 00:00:00 2001
From: aditya singh rathore <rathoreadityasingh40@gmail.com>
Date: Thu, 9 Oct 2025 10:00:22 +0530
Subject: [PATCH] Fix the Spells on the dashboard

Co-Authored-By: Sanjay Viswanathan <sanjay@recodehive.com>
---
 .../dashboard/LeaderBoard/leaderboard.tsx     | 126 ++++++++--------
 src/pages/dashboard/index.tsx                 | 142 +++++++++---------
 2 files changed, 134 insertions(+), 134 deletions(-)

diff --git a/src/components/dashboard/LeaderBoard/leaderboard.tsx b/src/components/dashboard/LeaderBoard/leaderboard.tsx
index e4c105fe..2f1382b6 100644
--- a/src/components/dashboard/LeaderBoard/leaderboard.tsx
+++ b/src/components/dashboard/LeaderBoard/leaderboard.tsx
@@ -16,7 +16,7 @@ import PRListModal from "./PRListModal";
 import { mockContributors } from "./mockData";
 import "./leaderboard.css";
 
-const GITHUB_ORG = "recodehive"; 
+const GITHUB_ORG = "recodehive";
 
 // Users to exclude from the leaderboard
 const EXCLUDED_USERS = ["sanjay-kv", "allcontributors", "allcontributors[bot]"];
@@ -44,15 +44,15 @@ interface Stats {
   flooredTotalPoints: number;
 }
 
-function Badge({ 
-  count, 
-  label, 
-  color, 
+function Badge({
+  count,
+  label,
+  color,
   onClick,
-  clickable = false 
-}: { 
-  count: number; 
-  label: string; 
+  clickable = false
+}: {
+  count: number;
+  label: string;
   color: { background: string; color: string };
   onClick?: () => void;
   clickable?: boolean;
@@ -77,7 +77,7 @@ function Badge({
   };
 
   return (
-    <span 
+    <span
       className={`badge ${clickable ? 'clickable' : ''}`}
       style={badgeStyle}
       onClick={handleClick}
@@ -91,19 +91,19 @@ function Badge({
   );
 }
 
-function TopPerformerCard({ 
-  contributor, 
-  rank, 
-  onPRClick 
-}: { 
-  contributor: Contributor; 
+function TopPerformerCard({
+  contributor,
+  rank,
+  onPRClick
+}: {
+  contributor: Contributor;
   rank: number;
   onPRClick: (contributor: Contributor) => void;
 }) {
   const { colorMode } = useColorMode();
   const isDark = colorMode === "dark";
   const rankClass = rank === 1 ? "top-1" : rank === 2 ? "top-2" : "top-3";
-  
+
   return (
     <div className={`top-performer-card ${isDark ? "dark" : "light"}`}>
       <img src={contributor.avatar} alt={contributor.username} className="avatar large" />
@@ -115,9 +115,9 @@ function TopPerformerCard({
           {contributor.username}
         </a>
         <div className="badges-container">
-          <Badge 
-            count={contributor.prs} 
-            label="PRs" 
+          <Badge
+            count={contributor.prs}
+            label="PRs"
             color={{ background: "#dbeafe", color: "#2563eb" }}
             onClick={() => onPRClick(contributor)}
             clickable={true}
@@ -131,15 +131,15 @@ function TopPerformerCard({
 
 export default function LeaderBoard(): JSX.Element {
   // Get time filter functions from context
-  const { 
-    contributors, 
-    stats, 
-    loading, 
-    error, 
-    currentTimeFilter, 
-    setTimeFilter 
+  const {
+    contributors,
+    stats,
+    loading,
+    error,
+    currentTimeFilter,
+    setTimeFilter
   } = useCommunityStatsContext();
-  
+
   const { colorMode } = useColorMode();
   const isDark = colorMode === "dark";
 
@@ -165,15 +165,15 @@ export default function LeaderBoard(): JSX.Element {
   const displayContributors =
     (error || contributors.length === 0)
       ? (typeof process !== "undefined" && process.env.NODE_ENV === "development"
-          ? mockContributors
-          : [])
+        ? mockContributors
+        : [])
       : contributors;
 
 
   // Filter out excluded users and apply search filter
   const filteredContributors = contributors
-    .filter((contributor) => 
-      !EXCLUDED_USERS.some(excludedUser => 
+    .filter((contributor) =>
+      !EXCLUDED_USERS.some(excludedUser =>
         contributor.username.toLowerCase() === excludedUser.toLowerCase()
       )
     )
@@ -191,7 +191,7 @@ export default function LeaderBoard(): JSX.Element {
   const renderPaginationButtons = () => {
     const pages = [];
     const maxVisibleButtons = 5; // Maximum number of page buttons to show directly
-    
+
     // Special case: if we have 7 or fewer pages, show all of them without ellipsis
     if (totalPages <= 7) {
       for (let i = 1; i <= totalPages; i++) {
@@ -207,9 +207,9 @@ export default function LeaderBoard(): JSX.Element {
       }
       return pages;
     }
-    
+
     // For more than 7 pages, use the ellipsis approach
-    
+
     // Always show first page
     pages.push(
       <button
@@ -220,12 +220,12 @@ export default function LeaderBoard(): JSX.Element {
         1
       </button>
     );
-    
+
     // Calculate the range of pages to show (middle section)
     // We want to show current page and 1-2 pages before and after when possible
     let startPage = Math.max(2, currentPage - 1);
     let endPage = Math.min(totalPages - 1, currentPage + 1);
-    
+
     // Adjust start and end page if we're near the beginning or end
     if (currentPage <= 3) {
       // Near the beginning, show pages 2, 3, 4
@@ -236,14 +236,14 @@ export default function LeaderBoard(): JSX.Element {
       endPage = totalPages - 1;
       startPage = Math.max(2, totalPages - 3);
     }
-    
+
     // Show ellipsis if needed before the middle range
     if (startPage > 2) {
       pages.push(
         <span key="ellipsis-1" className="pagination-ellipsis">...</span>
       );
     }
-    
+
     // Show pages in the middle range
     for (let i = startPage; i <= endPage; i++) {
       pages.push(
@@ -256,14 +256,14 @@ export default function LeaderBoard(): JSX.Element {
         </button>
       );
     }
-    
+
     // Show ellipsis if needed after the middle range
     if (endPage < totalPages - 1) {
       pages.push(
         <span key="ellipsis-2" className="pagination-ellipsis">...</span>
       );
     }
-    
+
     // Always show last page
     pages.push(
       <button
@@ -274,7 +274,7 @@ export default function LeaderBoard(): JSX.Element {
         {totalPages}
       </button>
     );
-    
+
     return pages;
   };
 
@@ -289,7 +289,7 @@ export default function LeaderBoard(): JSX.Element {
   const getTimeFilterLabel = (filter: string) => {
     switch (filter) {
       case 'week': return '📊 This Week';
-      case 'month': return '📆 This Month'; 
+      case 'month': return '📆 This Month';
       case 'year': return '📅 This Year';
       case 'all': return '🏆 All Time';
       default: return '🏆 All Time';
@@ -306,9 +306,9 @@ export default function LeaderBoard(): JSX.Element {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5 }}
         >
-          <h1 className="title">recode hive Leaderboard</h1>
+          <h1 className="title">Recode Hive Leaderboard</h1>
           <p className={`subtitle ${isDark ? "dark" : "light"}`}>
-            Top contributors across the <strong>{GITHUB_ORG}</strong> organization
+            Top contributors across the <strong>Recode Hive</strong> organization
           </p>
         </motion.div>
 
@@ -316,7 +316,7 @@ export default function LeaderBoard(): JSX.Element {
         {!loading && filteredContributors.length > 2 && (
           <div className="top-performers-container">
             <div className="title-filter-container">
-              <h2 className={`top-performers-title ${isDark ? "dark" : "light"}`}>recode hive Top Performers</h2>
+              <h2 className={`top-performers-title ${isDark ? "dark" : "light"}`}>Recode Hive Top Performers</h2>
               <div className="time-filter-wrapper top-title-filter">
                 <label htmlFor="time-period-filter" className="filter-label">Time Period:</label>
                 <select
@@ -440,11 +440,11 @@ export default function LeaderBoard(): JSX.Element {
         {!loading && filteredContributors.length > 0 && (
           <div className={`contributors-container ${isDark ? "dark" : "light"}`}>
             {error && (
-              <div className="error-banner" style={{ 
-                padding: '12px', 
-                backgroundColor: isDark ? '#fee8e7' : '#fee8e7', 
-                color: '#dc2626', 
-                borderRadius: '8px', 
+              <div className="error-banner" style={{
+                padding: '12px',
+                backgroundColor: isDark ? '#fee8e7' : '#fee8e7',
+                color: '#dc2626',
+                borderRadius: '8px',
                 marginBottom: '16px',
                 fontSize: '14px',
                 textAlign: 'center'
@@ -453,11 +453,11 @@ export default function LeaderBoard(): JSX.Element {
               </div>
             )}
             <div className="contributors-header">
-                <div className="contributor-cell rank">Rank</div>
-                <div className="contributor-cell avatar-cell">Avatar</div>
-                <div className="contributor-cell username-cell">User</div>
-                <div className="contributor-cell prs-cell">PRs</div>
-                <div className="contributor-cell points-cell">Points</div>
+              <div className="contributor-cell rank">Rank</div>
+              <div className="contributor-cell avatar-cell">Avatar</div>
+              <div className="contributor-cell username-cell">User</div>
+              <div className="contributor-cell prs-cell">PRs</div>
+              <div className="contributor-cell points-cell">Points</div>
             </div>
             {currentItems.map((contributor, index) => (
               <motion.div
@@ -480,14 +480,14 @@ export default function LeaderBoard(): JSX.Element {
                   />
                 </div>
                 <div className="contributor-cell username-cell">
-                    <a href={contributor.profile} target="_blank" rel="noreferrer" className={`username-link ${isDark ? "dark" : "light"}`}>
-                      {contributor.username}
-                    </a>
+                  <a href={contributor.profile} target="_blank" rel="noreferrer" className={`username-link ${isDark ? "dark" : "light"}`}>
+                    {contributor.username}
+                  </a>
                 </div>
                 <div className="contributor-cell prs-cell">
-                  <Badge 
-                    count={contributor.prs} 
-                    label="PRs" 
+                  <Badge
+                    count={contributor.prs}
+                    label="PRs"
                     color={{ background: "#dbeafe", color: "#2563eb" }}
                     onClick={() => handlePRClick(contributor)}
                     clickable={true}
@@ -523,7 +523,7 @@ export default function LeaderBoard(): JSX.Element {
                 </button>
               </div>
             )}
-            
+
             {/* CTA Footer */}
             <div className={`cta-footer ${isDark ? "dark" : "light"}`}>
               <p className={`cta-text ${isDark ? "dark" : "light"}`}>Want to get on this leaderboard?</p>
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 3fb7c1e6..b7ebbd3f 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -84,9 +84,9 @@ const DashboardContent: React.FC = () => {
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const target = event.target as Element;
-      if (showDashboardMenu && 
-          !target.closest('.dashboard-mobile-menu') && 
-          !target.closest('.dashboard-menu-btn')) {
+      if (showDashboardMenu &&
+        !target.closest('.dashboard-mobile-menu') &&
+        !target.closest('.dashboard-menu-btn')) {
         setShowDashboardMenu(false);
       }
     };
@@ -358,77 +358,77 @@ const DashboardContent: React.FC = () => {
 
   return (
     <div className="dashboard-layout">
-        {/* Dashboard Menu Button - Only visible on mobile */}
-        <button
-          className={`dashboard-menu-btn ${showDashboardMenu ? "open" : ""}`}
-          onClick={() => setShowDashboardMenu(!showDashboardMenu)}
-          aria-label="Toggle dashboard menu"
-        >
-          {showDashboardMenu ? "✕" : "☰"}
-        </button>
-        
-        {/* Dashboard Mobile Menu */}
-        <div className={`dashboard-mobile-menu ${showDashboardMenu ? "show" : ""}`}>
-          {/* Overlay */}
-          {showDashboardMenu && (
-            <div 
-              className="dashboard-menu-overlay"
+      {/* Dashboard Menu Button - Only visible on mobile */}
+      <button
+        className={`dashboard-menu-btn ${showDashboardMenu ? "open" : ""}`}
+        onClick={() => setShowDashboardMenu(!showDashboardMenu)}
+        aria-label="Toggle dashboard menu"
+      >
+        {showDashboardMenu ? "✕" : "☰"}
+      </button>
+
+      {/* Dashboard Mobile Menu */}
+      <div className={`dashboard-mobile-menu ${showDashboardMenu ? "show" : ""}`}>
+        {/* Overlay */}
+        {showDashboardMenu && (
+          <div
+            className="dashboard-menu-overlay"
+            onClick={() => setShowDashboardMenu(false)}
+          />
+        )}
+        <div>
+          <div className="dashboard-menu-header">
+            <h3>Dashboard Menu</h3>
+            <button
+              className="close-menu-btn"
               onClick={() => setShowDashboardMenu(false)}
-            />
-          )}
-          <div>
-            <div className="dashboard-menu-header">
-              <h3>Dashboard Menu</h3>
-              <button
-                className="close-menu-btn"
-                onClick={() => setShowDashboardMenu(false)}
-                aria-label="Close menu"
-              >
-                ✕
-              </button>
+              aria-label="Close menu"
+            >
+              ✕
+            </button>
+          </div>
+
+          {/* Dashboard navigation items */}
+          <div className="dashboard-menu-items">
+            <div
+              className={`menu-item ${activeTab === "home" ? "active" : ""}`}
+              onClick={() => {
+                handleTabChange("home");
+                setShowDashboardMenu(false);
+              }}
+            >
+              <span className="menu-icon"><Home size={18} /></span> Home
             </div>
-            
-            {/* Dashboard navigation items */}
-            <div className="dashboard-menu-items">
-              <div
-                className={`menu-item ${activeTab === "home" ? "active" : ""}`}
-                onClick={() => {
-                  handleTabChange("home");
-                  setShowDashboardMenu(false);
-                }}
-              >
-                <span className="menu-icon"><Home size={18} /></span> Home
-              </div>
-              <div
-                className={`menu-item ${activeTab === "discuss" ? "active" : ""}`}
-                onClick={() => {
-                  handleTabChange("discuss");
-                  setShowDashboardMenu(false);
-                }}
-              >
-                <span className="menu-icon"><MessageCircle size={18} /></span> Discussions
-              </div>
-              <div
-                className={`menu-item ${activeTab === "contributors" ? "active" : ""}`}
-                onClick={() => {
-                  handleTabChange("contributors");
-                  setShowDashboardMenu(false);
-                }}
-              >
-                <span className="menu-icon"><Users size={18} /></span> LeaderBoard
-              </div>
-              <div
-                className={`menu-item ${activeTab === "giveaway" ? "active" : ""}`}
-                onClick={() => {
-                  handleTabChange("giveaway");
-                  setShowDashboardMenu(false);
-                }}
-              >
-                <span className="menu-icon"><Gift size={18} /></span> Giveaways
-              </div>
+            <div
+              className={`menu-item ${activeTab === "discuss" ? "active" : ""}`}
+              onClick={() => {
+                handleTabChange("discuss");
+                setShowDashboardMenu(false);
+              }}
+            >
+              <span className="menu-icon"><MessageCircle size={18} /></span> Discussions
+            </div>
+            <div
+              className={`menu-item ${activeTab === "contributors" ? "active" : ""}`}
+              onClick={() => {
+                handleTabChange("contributors");
+                setShowDashboardMenu(false);
+              }}
+            >
+              <span className="menu-icon"><Users size={18} /></span> LeaderBoard
+            </div>
+            <div
+              className={`menu-item ${activeTab === "giveaway" ? "active" : ""}`}
+              onClick={() => {
+                handleTabChange("giveaway");
+                setShowDashboardMenu(false);
+              }}
+            >
+              <span className="menu-icon"><Gift size={18} /></span> Giveaways
             </div>
           </div>
         </div>
+      </div>
 
       <div className="dashboard-sidebar">
         <div className="sidebar-header">
@@ -481,9 +481,9 @@ const DashboardContent: React.FC = () => {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
           >
-            <h1 className="dashboard-main-title">recode hive Community Dashboard</h1>
+            <h1 className="dashboard-main-title">Recode Hive Community Dashboard</h1>
             <p className="dashboard-description">
-              Welcome to the recode hive community hub! Explore our stats, engage in discussions, and connect with fellow contributors.
+              Welcome to the Recode Hive community hub! Explore our stats, engage in discussions, and connect with fellow contributors.
             </p>
 
             <section className="dashboard-stats-section">