fixed skip clue implimentation

app/(main)/stats/page.js

@@ -79,6 +79,54 @@ export default function StatsPage() {
     });
   };
 
+  const renderCluesList = () => {
+    if (!teamStats) return null;
+
+    const { foundClues, skippedClues } = teamStats;
+
+    return (
+      <div className="clues-section">
+        <h3 className="section-title">Found Clues ({foundClues?.length || 0})</h3>
+        <ul className="clue-list">
+          {foundClues?.length > 0 ? (
+            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-time">
+                    {new Date(clue.found_at).toLocaleTimeString()}
+                  </div>
+                </div>
+              </li>
+            ))
+          ) : (
+            <li className="empty-state">No clues found yet</li>
+          )}
+        </ul>
+
+        <h3 className="section-title">Skipped Clues ({skippedClues?.length || 0})</h3>
+        <ul className="clue-list">
+          {skippedClues?.length > 0 ? (
+            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-time">
+                    Skipped at {new Date(clue.found_at).toLocaleTimeString()}
+                  </div>
+                </div>
+              </li>
+            ))
+          ) : (
+            <li className="empty-state">No clues skipped</li>
+          )}
+        </ul>
+      </div>
+    );
+  };
+
   if (loading) {
     return (
       <div className={styles.container}>
@@ -167,18 +215,7 @@ export default function StatsPage() {
 
           {expanded && (
             <div className={styles.cluesList}>
-              {teamStats.foundClues.length === 0 ? (
-                <p className={styles.emptyMessage}>No clues found yet.</p>
-              ) : (
-                teamStats.foundClues.map((clue) => (
-                  <div key={clue.id} className={styles.clueItem}>
-                    <span className={styles.clueTitle}>{clue.title}</span>
-                    <span className={styles.clueTimestamp}>
-                      {formatTimestamp(clue.found_at)}
-                    </span>
-                  </div>
-                ))
-              )}
+              {renderCluesList()}
             </div>
           )}
         </div>
@@ -205,6 +242,16 @@ export default function StatsPage() {
           <div className={styles.navLabel}>Leaderboard</div>
         </Link>
       </div>
+
+      <style jsx>{`
+        .clue-icon.found {
+          background-color: #2e7d32;
+        }
+
+        .clue-icon.skipped {
+          background-color: #1976d2;
+        }
+      `}</style>
     </div>
   );
 }