added season filter

Author: JaivinP

app/components/Dashboard.js

@@ -169,21 +169,24 @@ const SeasonFilter = React.memo(
     return (
       <div className={styles.seasonFilterContainer}>
         <div className={styles.seasonButtons}>
-          {availableSeasons.map((season) => (
-            <button
-              key={season}
-              className={`${styles.seasonButton} ${selectedSeason === season ? styles.activeSeason : ''}`}
-              onClick={() => onSeasonChange(season)}
-            >
-              {season}
-            </button>
-          ))}
           <button
             className={`${styles.seasonButton} ${selectedSeason === 'all' ? styles.activeSeason : ''}`}
             onClick={() => onSeasonChange('all')}
           >
             All Seasons
           </button>
+          {availableSeasons
+            .slice()
+            .reverse()
+            .map((season) => (
+              <button
+                key={season}
+                className={`${styles.seasonButton} ${selectedSeason === season ? styles.activeSeason : ''}`}
+                onClick={() => onSeasonChange(season)}
+              >
+                {season}
+              </button>
+            ))}
         </div>
       </div>
     )
@@ -345,7 +348,7 @@ const Dashboard = () => {
 
   const uniqueMatches = useMemo(() => {
     return getUniqueMatches(seasonFilteredMatches, cleanTeamName)
-  }, [])
+  }, [seasonFilteredMatches])
 
   // Mobile detection useEffect
   useEffect(() => {
@@ -448,21 +451,20 @@ const Dashboard = () => {
       <header className={styles.header}>
         <div className={styles.headerContent}>
           <h2>Dashboard</h2>
-          <div className={styles.headerControls}>
-            <SearchBox
-              searchTerm={searchTerm}
-              onSearch={handleSearch}
-              onClear={handleClearSearch}
-            />
-            <SeasonFilter
-              availableSeasons={availableSeasons}
-              selectedSeason={selectedSeason}
-              onSeasonChange={handleSeasonChange}
-            />
-          </div>
+          <SearchBox
+            searchTerm={searchTerm}
+            onSearch={handleSearch}
+            onClear={handleClearSearch}
+          />
         </div>
       </header>
 
+      <SeasonFilter
+        availableSeasons={availableSeasons}
+        selectedSeason={selectedSeason}
+        onSeasonChange={handleSeasonChange}
+      />
+
       <div className={styles.carousel}>
         {!seasonFilteredMatches.length
           ? Array(10)

app/styles/Dashboard.module.css

@@ -391,19 +391,22 @@
   }
 }
 
-/* Header Controls - wraps search and season filter */
+/* Header Controls - wraps search and season filter 
 .headerControls {
   display: flex;
   gap: 20px;
   align-items: center;
   flex-wrap: wrap;
-}
+}*/
 
 /* Season Filter Container */
 .seasonFilterContainer {
   display: flex;
   align-items: center;
   gap: 12px;
+  padding: 10px 0;
+  margin-bottom: 10px;
+  margin-left: 0;
 }
 
 .seasonButtons {