fixed stats page to show correct number of skipped clues. reflected this change accurately in leaderboards for users and admins as to not create a bug where a skipped clue would contribute to progress

app/(main)/clue/[clueId]/page.js

@@ -588,7 +588,7 @@ export default function CluePage({ params }) {
             </div>
           </div>
         )}
-        
+
         {clueSkipped && !clueFound && (
           <div className="clue-skipped-notification">
             <div className="clue-skipped-icon">↷</div>

app/(main)/map/page.js

@@ -338,8 +338,10 @@ export default function MapPage() {
   // Function to determine clue button class based on status
   const getClueButtonClass = (clue) => {
     if (clue.found) return `${styles["clue-button"]} ${styles["clue-found"]}`;
-    if (clue.skipped) return `${styles["clue-button"]} ${styles["clue-skipped"]}`;
-    if (clue.available) return `${styles["clue-button"]} ${styles["clue-available"]}`;
+    if (clue.skipped)
+      return `${styles["clue-button"]} ${styles["clue-skipped"]}`;
+    if (clue.available)
+      return `${styles["clue-button"]} ${styles["clue-available"]}`;
     return `${styles["clue-button"]} ${styles["clue-locked"]}`;
   };
 

app/(main)/stats/page.js

@@ -86,14 +86,18 @@ export default function StatsPage() {
 
     return (
       <div className="clues-section">
-        <h3 className="section-title">Found Clues ({foundClues?.length || 0})</h3>
+        <h3 className="section-title">
+          Found Clues ({foundClues?.length || 0})
+        </h3>
         <ul className="clue-list">
           {foundClues?.length > 0 ? (
-            foundClues.map(clue => (
+            foundClues.map((clue) => (
               <li key={clue.id} className="clue-item">
                 <div className="clue-icon found">✓</div>
                 <div className="clue-details">
-                  <div className="clue-title">{clue.title || `Clue #${clue.id}`}</div>
+                  <div className="clue-title">
+                    {clue.title || `Clue #${clue.id}`}
+                  </div>
                   <div className="clue-time">
                     {new Date(clue.found_at).toLocaleTimeString()}
                   </div>
@@ -105,14 +109,18 @@ export default function StatsPage() {
           )}
         </ul>
 
-        <h3 className="section-title">Skipped Clues ({skippedClues?.length || 0})</h3>
+        <h3 className="section-title">
+          Skipped Clues ({skippedClues?.length || 0})
+        </h3>
         <ul className="clue-list">
           {skippedClues?.length > 0 ? (
-            skippedClues.map(clue => (
+            skippedClues.map((clue) => (
               <li key={clue.id} className="clue-item">
                 <div className="clue-icon skipped">↷</div>
                 <div className="clue-details">
-                  <div className="clue-title">{clue.title || `Clue #${clue.id}`}</div>
+                  <div className="clue-title">
+                    {clue.title || `Clue #${clue.id}`}
+                  </div>
                   <div className="clue-time">
                     Skipped at {new Date(clue.found_at).toLocaleTimeString()}
                   </div>
@@ -182,7 +190,7 @@ export default function StatsPage() {
           <div className={styles.statItem}>
             <span className={styles.statLabel}>Clues Found:</span>
             <span className={styles.statValue}>
-              {teamStats.foundClues.length}
+              {teamStats.foundClues.length} of {teamStats.totalClues}
             </span>
           </div>
           <div className={styles.statItem}>
@@ -191,7 +199,9 @@ export default function StatsPage() {
           </div>
           <div className={styles.statItem}>
             <span className={styles.statLabel}>Clues Skipped:</span>
-            <span className={styles.statValue}>{teamStats.skippedClues}</span>
+            <span className={styles.statValue}>
+              {teamStats.skippedCluesCount}
+            </span>
           </div>
           <div className={`${styles.statItem} ${styles.rankItem}`}>
             <span className={styles.statLabel}>Current Rank:</span>
@@ -214,9 +224,7 @@ export default function StatsPage() {
           </button>
 
           {expanded && (
-            <div className={styles.cluesList}>
-              {renderCluesList()}
-            </div>
+            <div className={styles.cluesList}>{renderCluesList()}</div>
           )}
         </div>
       </div>