From 4e3f9bca36676d27d5bd7fc88b7e94d3c2c4f873 Mon Sep 17 00:00:00 2001
From: Gauri <agrahariya21@gmail.com>
Date: Sat, 31 Jan 2026 17:43:06 +0530
Subject: [PATCH] Enhance dashboard with advanced search, pagination and
 improved UX

---
 frontend/src/views/Dashboard.vue | 1868 +++++++++++++++++++++++-------
 1 file changed, 1462 insertions(+), 406 deletions(-)

diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index b97d90b9..2c182dd2 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -1,6 +1,8 @@
 <template>
-    <div class="container py-5">
-      <h2 class="mb-4 page-header">Dashboard</h2>
+  <div class="container py-5">
+    <div class="dashboard-header mb-4">
+      <h2 class="page-header">Dashboard</h2>
+    </div>
 
     <!-- Loading State -->
     <div v-if="loading" class="text-center py-5">
@@ -11,160 +13,411 @@
 
     <!-- Dashboard Content -->
     <div v-else-if="dashboardData">
+
       <!-- Statistics Cards -->
-      <div class="row mb-4">
-        <div class="col-12 col-sm-6 col-md-4 mb-3 mb-md-4">
-          <div class="card text-center h-100">
-            <div class="card-body">
-              <h5 class="card-title">Total Score</h5>
-              <h2 class="text-primary">{{ dashboardData.total_score || 0 }}</h2>
+      <div class="row g-3 mb-4">
+        <div class="col-12 col-sm-6 col-lg-4">
+          <div class="stat-card stat-card-primary">
+            <div class="stat-icon">
+              <i class="fas fa-trophy"></i>
+            </div>
+            <div class="stat-content">
+              <h3 class="stat-value">{{ dashboardData.total_score || 0 }}</h3>
+              <p class="stat-label">Total Score</p>
             </div>
           </div>
         </div>
-        <div class="col-12 col-sm-6 col-md-4 mb-3 mb-md-4">
-          <div class="card text-center h-100">
-            <div class="card-body">
-              <h5 class="card-title">Created Contests</h5>
-              <h2 class="text-success">{{ dashboardData.created_contests?.length || 0 }}</h2>
+
+        <div class="col-12 col-sm-6 col-lg-4">
+          <div class="stat-card stat-card-success">
+            <div class="stat-icon">
+              <i class="fas fa-medal"></i>
+            </div>
+            <div class="stat-content">
+              <h3 class="stat-value">{{ dashboardData.created_contests?.length || 0 }}</h3>
+              <p class="stat-label">Created Contests</p>
             </div>
           </div>
         </div>
-        <div class="col-12 col-sm-6 col-md-4 mb-3 mb-md-4">
-          <div class="card text-center h-100">
-            <div class="card-body">
-              <h5 class="card-title">Jury Member</h5>
-              <h2 class="text-warning">{{ dashboardData.jury_contests?.length || 0 }}</h2>
+
+        <div class="col-12 col-sm-6 col-lg-4">
+          <div class="stat-card stat-card-warning">
+            <div class="stat-icon">
+              <i class="fas fa-gavel"></i>
+            </div>
+            <div class="stat-content">
+              <h3 class="stat-value">{{ dashboardData.jury_contests?.length || 0 }}</h3>
+              <p class="stat-label">Jury Member</p>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Submissions and Scores -->
-      <div class="row">
-        <!-- Recent Submissions -->
-        <div class="col-12 col-md-6 mb-3 mb-md-4">
-          <h4 class="mb-3">Recent Submissions</h4>
-          <div class="card h-100">
-            <div class="card-body">
+      <!-- Quick Overview Section -->
+      <div class="row g-3 mb-4">
+        <!-- Recent Submissions -  -->
+        <div class="col-12 col-lg-6">
+          <div class="section-card">
+            <div class="section-header">
+              <h4 class="section-title">
+                <i class="fas fa-file-alt me-2"></i>Recent Submissions
+              </h4>
+              <span class="badge bg-primary">{{ totalSubmissions }}</span>
+            </div>
+
+            <div class="section-body">
               <div v-if="dashboardData.submissions_by_contest?.length > 0">
-                <div
-                  v-for="contest in dashboardData.submissions_by_contest"
-                  :key="contest.contest_id"
-                  class="mb-3"
-                >
-                  <h6>{{ contest.contest_name }}</h6>
+                <!-- Scrollable submissions container -->
+                <div class="submissions-container" :class="{ 'expanded': showAllSubmissions }">
                   <div
-                    v-for="submission in contest.submissions"
-                    :key="submission.id"
-                    class="submission-item d-flex justify-content-between align-items-center mb-2 flex-wrap"
-                    :class="{ 'submission-clickable': submission.reviewed_at }"
-                    @click="handleSubmissionClick(submission)"
-                  >
-                    <span class="me-2 mb-1 submission-title">
-                      {{ submission.article_title }}
-                    </span>
-                    <div class="d-flex align-items-center gap-2">
-                      <span
-                        :class="`badge bg-${getStatusColor(submission.status)}`"
-                      >
-                        {{ submission.status }}
-                      </span>
-                      <!-- View Feedback Button/Icon - Only for reviewed submissions -->
-                      <button
-                        v-if="submission.reviewed_at"
-                        class="btn btn-sm btn-info feedback-btn"
-                        @click.stop="openFeedbackModal(submission)"
-                        title="View Feedback"
-                      >
-                        <i class="fas fa-comment-dots"></i>
-                      </button>
+                    v-for="contest in (showAllSubmissions ? dashboardData.submissions_by_contest : dashboardData.submissions_by_contest.slice(0, 3))"
+                    :key="contest.contest_id" class="submission-group mb-3">
+                    <div class="contest-name-badge">{{ contest.contest_name }}</div>
+
+                    <div v-for="submission in contest.submissions.slice(0, showAllSubmissions ? undefined : 2)"
+                      :key="submission.id" class="submission-item"
+                      :class="{ 'submission-clickable': submission.reviewed_at }"
+                      @click="handleSubmissionClick(submission)">
+                      <div class="submission-info">
+                        <span class="submission-title">{{ submission.article_title }}</span>
+                        <span class="submission-date">{{ formatDateShort(submission.submitted_at) }}</span>
+                      </div>
+                      <div class="submission-actions">
+                        <span :class="`badge badge-${getStatusColor(submission.status)}`">
+                          {{ submission.status }}
+                        </span>
+                        <button v-if="submission.reviewed_at" class="btn-icon btn-feedback"
+                          @click.stop="openFeedbackModal(submission)" title="View Feedback">
+                          <i class="fas fa-comment-dots"></i>
+                        </button>
+                      </div>
                     </div>
                   </div>
                 </div>
+
+                <div v-if="dashboardData.submissions_by_contest.length > 3 || totalSubmissions > 6"
+                  class="text-center mt-3 pt-3 border-top">
+                  <button class="btn btn-sm btn-outline-primary" @click="showAllSubmissions = !showAllSubmissions">
+                    <i class="fas" :class="showAllSubmissions ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+                    {{ showAllSubmissions ? 'Show Less' : `View All (${totalSubmissions})` }}
+                  </button>
+                </div>
+              </div>
+
+              <div v-else class="empty-state">
+                <i class="fas fa-inbox fa-3x mb-3"></i>
+                <p class="text-muted">No submissions yet</p>
               </div>
-              <p v-else class="text-muted no-submissions">No submissions yet.</p>
             </div>
           </div>
         </div>
 
         <!-- Contest Scores -->
-        <div class="col-12 col-md-6 mb-3 mb-md-4">
-          <h4 class="mb-3">Contest Scores</h4>
-          <div class="card h-100">
-            <div class="card-body">
+        <div class="col-12 col-lg-6">
+          <div class="section-card">
+            <div class="section-header">
+              <h4 class="section-title">
+                <i class="fas fa-chart-bar me-2"></i>Contest Scores
+              </h4>
+              <span class="badge bg-success">{{ dashboardData.contest_wise_scores?.length || 0 }}</span>
+            </div>
+
+            <div class="section-body">
               <div v-if="dashboardData.contest_wise_scores?.length > 0">
-                <div
-                  v-for="score in dashboardData.contest_wise_scores"
-                  :key="score.contest_id"
-                  class="d-flex justify-content-between align-items-center mb-2 flex-wrap"
-                >
-                  <span class="me-2 mb-1">{{ score.contest_name }}</span>
-                  <span class="badge bg-primary">{{ score.contest_score }} points</span>
+                <!-- Scrollable scores container -->
+                <div class="scores-container" :class="{ 'expanded': showAllScores }">
+                  <div
+                    v-for="score in (showAllScores ? dashboardData.contest_wise_scores : dashboardData.contest_wise_scores.slice(0, 6))"
+                    :key="score.contest_id" class="score-item">
+                    <span class="score-contest">{{ score.contest_name }}</span>
+                    <span class="score-points">{{ score.contest_score }} pts</span>
+                  </div>
+                </div>
+
+                <div v-if="dashboardData.contest_wise_scores.length > 6" class="text-center mt-3 pt-3 border-top">
+                  <button class="btn btn-sm btn-outline-primary" @click="showAllScores = !showAllScores">
+                    <i class="fas" :class="showAllScores ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+                    {{ showAllScores ? 'Show Less' : `View All (${dashboardData.contest_wise_scores.length})` }}
+                  </button>
                 </div>
               </div>
-              <p v-else class="text-muted no-scores">No scores yet.</p>
+
+              <div v-else class="empty-state">
+                <i class="fas fa-chart-line fa-3x mb-3"></i>
+                <p class="text-muted">No scores yet</p>
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Created Contests Table -->
-      <div class="row mt-4">
-        <div class="col-12">
-          <h4 class="mb-3">Your Contests</h4>
-          <div class="card">
-            <div class="card-body p-0">
-              <!-- Table with contests -->
-              <div v-if="dashboardData.created_contests?.length > 0" class="table-responsive">
-                <table class="table table-hover mb-0">
-                  <thead>
-                    <tr>
-                      <th scope="col">Contest Name</th>
-                      <th scope="col">Project</th>
-                      <th scope="col">Status</th>
-                      <th scope="col">Submissions</th>
-                      <th scope="col">Created Date</th>
-                      <th scope="col">Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr
-                      v-for="contest in dashboardData.created_contests"
-                      :key="contest.id"
-                      @click="viewContest(contest.id)"
-                      class="table-row-clickable"
-                    >
-                      <td>
-                        <strong>{{ contest.name }}</strong>
-                      </td>
-                      <td>{{ contest.project_name || 'N/A' }}</td>
-                      <td>
-                        <span
-                          class="badge"
-                          :class="`bg-${getStatusBadgeColor(contest.status)}`"
-                        >
-                          {{ contest.status || 'Unknown' }}
-                        </span>
-                      </td>
-                      <td>{{ contest.submission_count || 0 }}</td>
-                      <td>{{ formatDate(contest.created_at) }}</td>
-                      <td>
-                        <button
-                          class="btn btn-sm btn-outline-primary"
-                          @click.stop="viewContest(contest.id)"
-                        >
-                          <i class="fas fa-eye me-1"></i>View
+      <!-- Contests Management Section -->
+      <div class="contests-section">
+        <div class="section-card">
+          <!-- Section Header with Tabs -->
+          <div class="section-header bordered">
+            <div class="d-flex align-items-center gap-3 flex-wrap">
+              <h4 class="section-title mb-0">
+                <i class="fas fa-trophy me-2"></i>Contests
+              </h4>
+
+              <!-- Tabs -->
+              <div class="btn-group contest-tabs" role="group">
+                <button type="button" class="btn btn-sm"
+                  :class="activeTab === 'created' ? 'btn-primary' : 'btn-outline-primary'"
+                  @click="switchTab('created')">
+                  Your Contests ({{ dashboardData.created_contests?.length || 0 }})
+                </button>
+                <button type="button" class="btn btn-sm"
+                  :class="activeTab === 'jury' ? 'btn-primary' : 'btn-outline-primary'" @click="switchTab('jury')">
+                  Jury Contests ({{ dashboardData.jury_contests?.length || 0 }})
+                </button>
+              </div>
+            </div>
+
+            <!-- Search and Filter Controls -->
+            <div class="controls-row mt-3">
+              <div class="search-box">
+                <i class="fas fa-search search-icon"></i>
+                <input type="text" class="form-control search-input" placeholder="Search contests..."
+                  v-model="searchQuery" @input="handleSearchInput" />
+                <button v-if="searchQuery" class="btn-clear" @click="clearSearch" title="Clear search">
+                  <i class="fas fa-times"></i>
+                </button>
+              </div>
+
+              <div class="filter-buttons">
+                <button v-for="status in ['all', 'current', 'upcoming', 'past']" :key="status" class="btn btn-sm"
+                  :class="filterStatus === status ? 'btn-primary' : 'btn-outline-secondary'"
+                  @click="filterStatus = status; currentPage = 1">
+                  {{ status.charAt(0).toUpperCase() + status.slice(1) }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Contests Content -->
+          <div class="section-body p-0">
+            <!-- Created Contests Tab -->
+            <div v-if="activeTab === 'created'">
+              <div v-if="filteredCreatedContests.length > 0">
+                <!-- Desktop Table View -->
+                <div class="table-responsive d-none d-md-block">
+                  <table class="table table-hover mb-0">
+                    <thead>
+                      <tr>
+                        <th>Contest Name</th>
+                        <th>Project</th>
+                        <th>Status</th>
+                        <th>Submissions</th>
+                        <th>Created</th>
+                        <th class="text-end">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="contest in paginatedCreatedContests" :key="contest.id" @click="viewContest(contest.id)"
+                        class="table-row-clickable">
+                        <td>
+                          <div class="contest-name-cell">
+                            <strong>{{ contest.name }}</strong>
+                          </div>
+                        </td>
+                        <td>{{ contest.project_name || 'N/A' }}</td>
+                        <td>
+                          <span class="badge" :class="`badge-${getStatusBadgeColor(contest.status)}`">
+                            {{ contest.status || 'Unknown' }}
+                          </span>
+                        </td>
+                        <td>
+                          <span class="submission-count">
+                            <i class="fas fa-file-alt me-1"></i>
+                            {{ contest.submission_count || 0 }}
+                          </span>
+                        </td>
+                        <td>{{ formatDate(contest.created_at) }}</td>
+                        <td class="text-end">
+                          <button class="btn btn-sm btn-outline-primary" @click.stop="viewContest(contest.id)">
+                            <i class="fas fa-eye me-1"></i>View
+                          </button>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+
+                <!-- Mobile Card View -->
+                <div class="d-md-none">
+                  <div v-for="contest in paginatedCreatedContests" :key="contest.id" class="contest-card"
+                    @click="viewContest(contest.id)">
+                    <div class="contest-card-header">
+                      <strong>{{ contest.name }}</strong>
+                      <span class="badge" :class="`badge-${getStatusBadgeColor(contest.status)}`">
+                        {{ contest.status }}
+                      </span>
+                    </div>
+                    <div class="contest-card-body">
+                      <div class="contest-card-info">
+                        <span><i class="fas fa-project-diagram me-1"></i>{{ contest.project_name || 'N/A' }}</span>
+                        <span><i class="fas fa-file-alt me-1"></i>{{ contest.submission_count || 0 }} submissions</span>
+                        <span><i class="fas fa-calendar me-1"></i>{{ formatDate(contest.created_at) }}</span>
+                      </div>
+                      <button class="btn btn-sm btn-primary w-100 mt-2" @click.stop="viewContest(contest.id)">
+                        <i class="fas fa-eye me-1"></i>View Details
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Pagination -->
+                <div v-if="filteredCreatedContests.length > itemsPerPage" class="pagination-wrapper">
+                  <nav>
+                    <ul class="pagination pagination-sm mb-0">
+                      <li class="page-item" :class="{ disabled: currentPage === 1 }">
+                        <button class="page-link" @click="currentPage--" :disabled="currentPage === 1">
+                          <i class="fas fa-chevron-left"></i>
+                        </button>
+                      </li>
+
+                      <li v-for="page in totalPagesCreated" :key="page" class="page-item"
+                        :class="{ active: currentPage === page }">
+                        <button class="page-link" @click="currentPage = page">
+                          {{ page }}
+                        </button>
+                      </li>
+
+                      <li class="page-item" :class="{ disabled: currentPage === totalPagesCreated }">
+                        <button class="page-link" @click="currentPage++" :disabled="currentPage === totalPagesCreated">
+                          <i class="fas fa-chevron-right"></i>
+                        </button>
+                      </li>
+                    </ul>
+                  </nav>
+
+                  <div class="pagination-info">
+                    Showing {{ (currentPage - 1) * itemsPerPage + 1 }} -
+                    {{ Math.min(currentPage * itemsPerPage, filteredCreatedContests.length) }}
+                    of {{ filteredCreatedContests.length }} contests
+                  </div>
+                </div>
+              </div>
+
+              <!-- Empty State -->
+              <div v-else class="empty-state-large">
+                <i class="fas fa-trophy fa-4x mb-3"></i>
+                <h5>No Contests Found</h5>
+                <p class="text-muted">
+                  {{ searchQuery ? 'Try adjusting your search or filters' : 'Create your first contest to get started'
+                  }}
+                </p>
+                <button v-if="!searchQuery && !filterStatus" class="btn btn-primary mt-2"
+                  @click="$router.push('/create-contest')">
+                  <i class="fas fa-plus me-2"></i>Create Contest
+                </button>
+              </div>
+            </div>
+
+            <!-- Jury Contests Tab -->
+            <div v-if="activeTab === 'jury'">
+              <div v-if="filteredJuryContests.length > 0">
+                <!-- Desktop Table View -->
+                <div class="table-responsive d-none d-md-block">
+                  <table class="table table-hover mb-0">
+                    <thead>
+                      <tr>
+                        <th>Contest Name</th>
+                        <th>Project</th>
+                        <th>Status</th>
+                        <th>Pending Reviews</th>
+                        <th class="text-end">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="contest in paginatedJuryContests" :key="contest.id" @click="viewContest(contest.id)"
+                        class="table-row-clickable">
+                        <td><strong>{{ contest.name }}</strong></td>
+                        <td>{{ contest.project_name || 'N/A' }}</td>
+                        <td>
+                          <span class="badge" :class="`badge-${getStatusBadgeColor(contest.status)}`">
+                            {{ contest.status }}
+                          </span>
+                        </td>
+                        <td>
+                          <span class="badge bg-warning">
+                            {{ contest.pending_reviews || 0 }}
+                          </span>
+                        </td>
+                        <td class="text-end">
+                          <button class="btn btn-sm btn-outline-primary" @click.stop="viewContest(contest.id)">
+                            <i class="fas fa-gavel me-1"></i>Review
+                          </button>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+
+                <!-- Mobile View -->
+                <div class="d-md-none">
+                  <div v-for="contest in paginatedJuryContests" :key="contest.id" class="contest-card"
+                    @click="viewContest(contest.id)">
+                    <div class="contest-card-header">
+                      <strong>{{ contest.name }}</strong>
+                      <span class="badge" :class="`badge-${getStatusBadgeColor(contest.status)}`">
+                        {{ contest.status }}
+                      </span>
+                    </div>
+                    <div class="contest-card-body">
+                      <div class="contest-card-info">
+                        <span><i class="fas fa-project-diagram me-1"></i>{{ contest.project_name || 'N/A' }}</span>
+                        <span><i class="fas fa-clock me-1"></i>{{ contest.pending_reviews || 0 }} pending</span>
+                      </div>
+                      <button class="btn btn-sm btn-warning w-100 mt-2" @click.stop="viewContest(contest.id)">
+                        <i class="fas fa-gavel me-1"></i>Review Submissions
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Pagination for Jury Contests -->
+                <div v-if="filteredJuryContests.length > itemsPerPage" class="pagination-wrapper">
+                  <nav>
+                    <ul class="pagination pagination-sm mb-0">
+                      <li class="page-item" :class="{ disabled: currentPage === 1 }">
+                        <button class="page-link" @click="currentPage--" :disabled="currentPage === 1">
+                          <i class="fas fa-chevron-left"></i>
+                        </button>
+                      </li>
+
+                      <li v-for="page in totalPagesJury" :key="page" class="page-item"
+                        :class="{ active: currentPage === page }">
+                        <button class="page-link" @click="currentPage = page">
+                          {{ page }}
+                        </button>
+                      </li>
+
+                      <li class="page-item" :class="{ disabled: currentPage === totalPagesJury }">
+                        <button class="page-link" @click="currentPage++" :disabled="currentPage === totalPagesJury">
+                          <i class="fas fa-chevron-right"></i>
                         </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
+                      </li>
+                    </ul>
+                  </nav>
+
+                  <div class="pagination-info">
+                    Showing {{ (currentPage - 1) * itemsPerPage + 1 }} -
+                    {{ Math.min(currentPage * itemsPerPage, filteredJuryContests.length) }}
+                    of {{ filteredJuryContests.length }} contests
+                  </div>
+                </div>
               </div>
-              <!-- Empty state message -->
-              <div v-else class="text-center py-5 px-3">
-                <p class="text-muted mb-0 no-contests">
-                  <i class="fas fa-info-circle me-2"></i>
-                  No contests created yet.
+
+              <!-- Empty State -->
+              <div v-else class="empty-state-large">
+                <i class="fas fa-gavel fa-4x mb-3"></i>
+                <h5>No Jury Assignments</h5>
+                <p class="text-muted">
+                  {{ searchQuery ? 'Try adjusting your search or filters' : `You haven't been assigned as a jury member
+                  yet` }}
                 </p>
               </div>
             </div>
@@ -175,27 +428,22 @@
 
     <!-- Error State -->
     <div v-else-if="error" class="alert alert-danger">
+      <i class="fas fa-exclamation-circle me-2"></i>
       {{ error }}
     </div>
 
     <!-- Submit Article Modal -->
-    <SubmitArticleModal
-      v-if="submittingToContestId"
-      :contest-id="submittingToContestId"
-      @submitted="handleArticleSubmitted"
-    />
+    <SubmitArticleModal v-if="submittingToContestId" :contest-id="submittingToContestId"
+      @submitted="handleArticleSubmitted" />
 
     <!-- Jury Feedback Modal -->
-    <JuryFeedbackModal
-      :submission="selectedSubmission"
-      :reviewer-name="reviewerName"
-      :loading-reviewer="loadingReviewer"
-    />
+    <JuryFeedbackModal v-if="selectedSubmission" :submission="selectedSubmission" :reviewer-name="reviewerName"
+      :loading-reviewer="loadingReviewer" />
   </div>
 </template>
 
 <script>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from '../store'
 import api from '../services/api'
@@ -213,6 +461,8 @@ export default {
   setup() {
     const router = useRouter()
     const store = useStore()
+
+    // State
     const dashboardData = ref(null)
     const loading = ref(true)
     const error = ref(null)
@@ -223,16 +473,179 @@ export default {
     const reviewerName = ref('')
     const loadingReviewer = ref(false)
 
-    // Load dashboard data
+    // UI State
+    const activeTab = ref('created')
+    const searchQuery = ref('')
+    const debouncedSearch = ref('')
+    const filterStatus = ref('all')
+    const currentPage = ref(1)
+    const itemsPerPage = ref(10)
+    const showAllSubmissions = ref(false)
+    const showAllScores = ref(false)
+
+    // Date formatters - memoized for performance
+    const dateFormatterShort = new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric'
+    })
+
+    const dateFormatterFull = new Intl.DateTimeFormat('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    })
+
+    // Debounce search input
+    let searchTimeout = null
+    const handleSearchInput = () => {
+      if (searchTimeout) clearTimeout(searchTimeout)
+      searchTimeout = setTimeout(() => {
+        debouncedSearch.value = searchQuery.value
+        currentPage.value = 1
+      }, 300)
+    }
+
+    // Switch tab and reset state
+    const switchTab = (tab) => {
+      activeTab.value = tab
+      currentPage.value = 1
+      searchQuery.value = ''
+      debouncedSearch.value = ''
+      filterStatus.value = 'all'
+    }
+
+    // - Total submissions count
+    const totalSubmissions = computed(() => {
+      if (!dashboardData.value?.submissions_by_contest) return 0
+      return dashboardData.value.submissions_by_contest.reduce((total, contest) => {
+        return total + (contest.submissions?.length || 0)
+      }, 0)
+    })
+
+    // - Filtered Created Contests
+    const filteredCreatedContests = computed(() => {
+      if (!dashboardData.value?.created_contests) return []
+
+      let contests = [...dashboardData.value.created_contests]
+
+      // Apply search filter with debounced value
+      if (debouncedSearch.value) {
+        const query = debouncedSearch.value.toLowerCase()
+        contests = contests.filter(c =>
+          c.name?.toLowerCase().includes(query) ||
+          c.project_name?.toLowerCase().includes(query)
+        )
+      }
+
+      // Apply status filter
+      if (filterStatus.value !== 'all') {
+        contests = contests.filter(c =>
+          c.status?.toLowerCase() === filterStatus.value
+        )
+      }
+
+      return contests
+    })
+
+    // - Filtered Jury Contests
+    const filteredJuryContests = computed(() => {
+      if (!dashboardData.value?.jury_contests) return []
+
+      let contests = [...dashboardData.value.jury_contests]
+
+      // Apply search filter with debounced value
+      if (debouncedSearch.value) {
+        const query = debouncedSearch.value.toLowerCase()
+        contests = contests.filter(c =>
+          c.name?.toLowerCase().includes(query) ||
+          c.project_name?.toLowerCase().includes(query)
+        )
+      }
+
+      // Apply status filter
+      if (filterStatus.value !== 'all') {
+        contests = contests.filter(c =>
+          c.status?.toLowerCase() === filterStatus.value
+        )
+      }
+
+      return contests
+    })
+
+    // - Paginated Created Contests
+    const paginatedCreatedContests = computed(() => {
+      const start = (currentPage.value - 1) * itemsPerPage.value
+      const end = start + itemsPerPage.value
+      return filteredCreatedContests.value.slice(start, end)
+    })
+
+    // - Paginated Jury Contests
+    const paginatedJuryContests = computed(() => {
+      const start = (currentPage.value - 1) * itemsPerPage.value
+      const end = start + itemsPerPage.value
+      return filteredJuryContests.value.slice(start, end)
+    })
+
+    // - Total Pages for Created Contests (always >= 1)
+    const totalPagesCreated = computed(() => {
+      const total = Math.ceil(filteredCreatedContests.value.length / itemsPerPage.value)
+      return Math.max(1, total)
+    })
+
+    // - Total Pages for Jury Contests (always >= 1)
+    const totalPagesJury = computed(() => {
+      const total = Math.ceil(filteredJuryContests.value.length / itemsPerPage.value)
+      return Math.max(1, total)
+    })
+
+    // Watch current page to ensure it's valid
+    watch([filteredCreatedContests, filteredJuryContests], () => {
+      const maxPage = activeTab.value === 'created' ? totalPagesCreated.value : totalPagesJury.value
+      if (currentPage.value > maxPage) {
+        currentPage.value = maxPage
+      }
+    })
+
+    // Clear search function
+    const clearSearch = () => {
+      searchQuery.value = ''
+      debouncedSearch.value = ''
+      currentPage.value = 1
+    }
+
+    // Load dashboard data with validation
     const loadDashboard = async () => {
       loading.value = true
       error.value = null
       try {
         const data = await api.get('/user/dashboard')
-        dashboardData.value = data
+
+        // Validate data structure
+        if (!data || typeof data !== 'object') {
+          throw new Error('Invalid dashboard data received')
+        }
+
+        // Ensure all arrays exist and are valid
+        dashboardData.value = {
+          total_score: data.total_score || 0,
+          created_contests: Array.isArray(data.created_contests) ? data.created_contests : [],
+          jury_contests: Array.isArray(data.jury_contests) ? data.jury_contests : [],
+          submissions_by_contest: Array.isArray(data.submissions_by_contest) ? data.submissions_by_contest : [],
+          contest_wise_scores: Array.isArray(data.contest_wise_scores) ? data.contest_wise_scores : []
+        }
       } catch (err) {
+        console.error('Dashboard load error:', err)
         error.value = err.message || 'Failed to load dashboard'
         showAlert(error.value, 'danger')
+
+        // Set empty data structure to prevent errors
+        dashboardData.value = {
+          total_score: 0,
+          created_contests: [],
+          jury_contests: [],
+          submissions_by_contest: [],
+          contest_wise_scores: []
+        }
       } finally {
         loading.value = false
       }
@@ -245,7 +658,7 @@ export default {
         rejected: 'danger',
         pending: 'warning'
       }
-      return statusColors[status] || 'secondary'
+      return statusColors[status?.toLowerCase()] || 'secondary'
     }
 
     // Get status badge color for contest status
@@ -260,29 +673,40 @@ export default {
       return statusColors[status?.toLowerCase()] || 'primary'
     }
 
-    // Format date for display
+    // Format date for display (memoized)
     const formatDate = (dateString) => {
       if (!dateString) return 'N/A'
       try {
         const date = new Date(dateString)
-        return date.toLocaleDateString('en-US', {
-          year: 'numeric',
-          month: 'short',
-          day: 'numeric'
-        })
+        if (isNaN(date.getTime())) return dateString
+        return dateFormatterFull.format(date)
       } catch (e) {
+        console.error('Date formatting error:', e)
         return dateString
       }
     }
 
-    // Handle submission click (only if reviewed)
+    // Format date short (memoized)
+    const formatDateShort = (dateString) => {
+      if (!dateString) return ''
+      try {
+        const date = new Date(dateString)
+        if (isNaN(date.getTime())) return dateString
+        return dateFormatterShort.format(date)
+      } catch (e) {
+        console.error('Date formatting error:', e)
+        return dateString
+      }
+    }
+
+    // Handle submission click
     const handleSubmissionClick = (submission) => {
-      if (submission.reviewed_at) {
+      if (submission?.reviewed_at) {
         openFeedbackModal(submission)
       }
     }
 
-    // Fetch reviewer username
+    // Fetch reviewer username with error handling
     const fetchReviewerName = async (reviewerId) => {
       if (!reviewerId) {
         reviewerName.value = 'Jury Member'
@@ -291,9 +715,7 @@ export default {
 
       loadingReviewer.value = true
       try {
-        // Use the new username endpoint to fetch reviewer name
         const userData = await api.get(`/user/${reviewerId}/username`)
-
         if (userData && userData.username) {
           reviewerName.value = userData.username
         } else {
@@ -301,112 +723,179 @@ export default {
         }
       } catch (err) {
         console.warn('Could not fetch reviewer name:', err)
-        // Fallback to generic name if endpoint doesn't exist yet
         reviewerName.value = 'Jury Member'
       } finally {
         loadingReviewer.value = false
       }
     }
 
-    // Open feedback modal
+    // Open feedback modal 
     const openFeedbackModal = async (submission) => {
       if (!submission || !submission.reviewed_at) {
         showAlert('This submission has not been reviewed yet', 'info')
         return
       }
 
-      // Set selected submission
       selectedSubmission.value = submission
 
-      // Fetch reviewer name if available
       if (submission.reviewed_by) {
         await fetchReviewerName(submission.reviewed_by)
       } else {
         reviewerName.value = 'Jury Member'
       }
 
-      // Open modal
+      await nextTick()
+
       const modalEl = document.getElementById('juryFeedbackModal')
       if (!modalEl) {
         console.error('JuryFeedbackModal DOM not found')
+        showAlert('Unable to open feedback modal', 'danger')
+        return
+      }
+
+      // Check if Bootstrap is loaded
+      if (typeof window.bootstrap === 'undefined') {
+        console.error('Bootstrap is not loaded')
+        showAlert('Unable to open feedback modal', 'danger')
         return
       }
 
-      const modal = new window.bootstrap.Modal(modalEl)
-      modal.show()
+      try {
+        const modal = new window.bootstrap.Modal(modalEl)
+        modal.show()
+      } catch (error) {
+        console.error('Error opening modal:', error)
+        showAlert('Error opening feedback modal', 'danger')
+      }
     }
 
-    // View contest details - navigate to full page view
-    const viewContest = (contestId) => {
-      // Find the contest object from dashboard data
+    const viewContest = async (contestId) => {
+      if (!contestId) {
+        showAlert('Invalid contest ID', 'danger')
+        return
+      }
+
       let contestData = null
 
-      // Check in created contests
+      // Try to find contest in dashboard data
       if (dashboardData.value?.created_contests) {
         contestData = dashboardData.value.created_contests.find(c => c.id === contestId)
       }
 
-      // If not found, try to get from store (all contests)
+      if (!contestData && dashboardData.value?.jury_contests) {
+        contestData = dashboardData.value.jury_contests.find(c => c.id === contestId)
+      }
+
+      // Try store data
       if (!contestData) {
-        const allContests = store.getContestsByCategory('current')
-          .concat(store.getContestsByCategory('upcoming'))
-          .concat(store.getContestsByCategory('past'))
-        contestData = allContests.find(c => c.id === contestId)
+        try {
+          const allContests = store.getContestsByCategory('current')
+            .concat(store.getContestsByCategory('upcoming'))
+            .concat(store.getContestsByCategory('past'))
+          contestData = allContests.find(c => c.id === contestId)
+        } catch (err) {
+          console.error('Error getting contests from store:', err)
+        }
       }
 
-      // If still not found, try to fetch it
+      // Fetch from API if not found
       if (!contestData) {
-        // Fallback: fetch contest by ID to get the name
-        api.get(`/contest/${contestId}`)
-          .then(contest => {
-            if (contest && contest.name) {
-              const contestSlug = slugify(contest.name)
-              router.push({ name: 'ContestView', params: { name: contestSlug } })
-            } else {
-              showAlert('Contest not found', 'danger')
-            }
-          })
-          .catch(error => {
-            console.error('Error loading contest:', error)
-            showAlert('Failed to load contest details: ' + error.message, 'danger')
-          })
-        return
+        try {
+          const contest = await api.get(`/contest/${contestId}`)
+          if (contest && contest.name) {
+            const contestSlug = slugify(contest.name)
+            await router.push({ name: 'ContestView', params: { name: contestSlug } })
+            return
+          } else {
+            throw new Error('Invalid contest data')
+          }
+        } catch (error) {
+          console.error('Error loading contest:', error)
+          showAlert('Contest not found or failed to load', 'danger')
+          return
+        }
       }
 
-      // If we have the contest data, navigate to full page
+      // Navigate to contest
       if (contestData && contestData.name) {
-        const contestSlug = slugify(contestData.name)
-        router.push({ name: 'ContestView', params: { name: contestSlug } })
+        try {
+          const contestSlug = slugify(contestData.name)
+          await router.push({ name: 'ContestView', params: { name: contestSlug } })
+        } catch (error) {
+          console.error('Navigation error:', error)
+          showAlert('Failed to navigate to contest', 'danger')
+        }
       } else {
         showAlert('Contest not found', 'danger')
       }
     }
 
-    // Handle submit article
-    const handleSubmitArticle = (contestId) => {
+    // Handle submit article with proper DOM waiting
+    const handleSubmitArticle = async (contestId) => {
       if (!store.isAuthenticated) {
         showAlert('Please login to submit an article', 'warning')
         return
       }
+
       submittingToContestId.value = contestId
 
-      // Show submit modal using Bootstrap
-      setTimeout(() => {
-        const modalElement = document.getElementById('submitArticleModal')
-        if (modalElement) {
-          const modal = new bootstrap.Modal(modalElement)
-          modal.show()
-        }
-      }, 100)
+      // Wait for DOM update
+      await nextTick()
+
+      const modalElement = document.getElementById('submitArticleModal')
+      if (!modalElement) {
+        console.error('Submit article modal not found')
+        showAlert('Unable to open submission form', 'danger')
+        submittingToContestId.value = null
+        return
+      }
+
+      // Check if Bootstrap is loaded
+      if (typeof window.bootstrap === 'undefined') {
+        console.error('Bootstrap not loaded')
+        showAlert('Unable to open submission form', 'danger')
+        submittingToContestId.value = null
+        return
+      }
+
+      try {
+        const modal = new window.bootstrap.Modal(modalElement)
+        modal.show()
+      } catch (error) {
+        console.error('Error opening modal:', error)
+        showAlert('Error opening submission form', 'danger')
+        submittingToContestId.value = null
+      }
     }
 
     // Handle article submitted
     const handleArticleSubmitted = () => {
       submittingToContestId.value = null
-      // Reload dashboard to update data
+      selectedSubmission.value = null
       loadDashboard()
     }
 
+    // Cleanup on unmount
+    onUnmounted(() => {
+      // Clear search timeout
+      if (searchTimeout) {
+        clearTimeout(searchTimeout)
+      }
+
+      // Cleanup any open modals
+      const modals = document.querySelectorAll('.modal.show')
+      modals.forEach(modalEl => {
+        try {
+          const modal = window.bootstrap?.Modal?.getInstance(modalEl)
+          if (modal) {
+            modal.hide()
+            modal.dispose()
+          }
+        } catch (err) {
+          console.error('Error disposing modal:', err)
+        }
+      })
+    })
 
     // Load data on mount
     onMounted(() => {
@@ -421,9 +910,28 @@ export default {
       selectedSubmission,
       reviewerName,
       loadingReviewer,
+      activeTab,
+      searchQuery,
+      debouncedSearch,
+      filterStatus,
+      currentPage,
+      itemsPerPage,
+      showAllSubmissions,
+      showAllScores,
+      totalSubmissions,
+      filteredCreatedContests,
+      filteredJuryContests,
+      paginatedCreatedContests,
+      paginatedJuryContests,
+      totalPagesCreated,
+      totalPagesJury,
+      switchTab,
+      clearSearch,
+      handleSearchInput,
       getStatusColor,
       getStatusBadgeColor,
       formatDate,
+      formatDateShort,
       viewContest,
       handleSubmitArticle,
       handleArticleSubmitted,
@@ -435,396 +943,944 @@ export default {
 </script>
 
 <style scoped>
-/* ==========================================================
-   Professional Dashboard UI - Clean Design
-   ========================================================== */
+:root {
+  --wiki-primary: #006699;
+  --wiki-primary-hover: #004d73;
+  --wiki-primary-light: rgba(0, 102, 153, 0.1);
+  --wiki-success: #28a745;
+  --wiki-warning: #ffc107;
+  --wiki-danger: #dc3545;
+  --wiki-dark: #202122;
+  --wiki-text: #202122;
+  --wiki-text-muted: #6c757d;
+  --wiki-border: #e5e7eb;
+  --wiki-light-bg: #f8f9fa;
+  --wiki-hover-bg: rgba(0, 102, 153, 0.05);
+  --wiki-card-bg: #ffffff;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
+}
+
+[data-theme="dark"] {
+  --wiki-primary: #5db8e6;
+  --wiki-primary-hover: #7cc5ea;
+  --wiki-primary-light: rgba(93, 184, 230, 0.15);
+  --wiki-success: #4ade80;
+  --wiki-warning: #fbbf24;
+  --wiki-danger: #f87171;
+  --wiki-dark: #ffffff;
+  --wiki-text: #e0e0e0;
+  --wiki-text-muted: #a0a0a0;
+  --wiki-border: #404040;
+  --wiki-light-bg: #1f1f1f;
+  --wiki-hover-bg: rgba(93, 184, 230, 0.1);
+  --wiki-card-bg: #2a2a2a;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
+}
 
-/* Page header - professional styling */
-h2.page-header {
+.dashboard-header {
+  margin-bottom: 2rem;
+}
+
+.page-header {
   font-size: 2rem;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--wiki-dark);
-  border-bottom: 2px solid var(--wiki-primary);
-  padding-bottom: 0.5rem;
-  margin-bottom: 2rem;
-  letter-spacing: -0.01em;
+  margin-bottom: 0.5rem;
+  letter-spacing: -0.02em;
 }
 
-/* Ensure page header is visible in dark mode */
-[data-theme="dark"] h2.page-header {
-  color: #ffffff !important; /* White text for page header */
+.dashboard-subtitle {
+  color: var(--wiki-text-muted);
+  font-size: 1rem;
+  margin-bottom: 0;
 }
 
-/* Section Titles */
-h4 {
-  color: var(--wiki-dark);
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-bottom: 1rem;
-  letter-spacing: -0.01em;
+.stat-card {
+  background: var(--wiki-card-bg);
+  border: 1px solid var(--wiki-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  box-shadow: var(--shadow-sm);
+  position: relative;
+  overflow: hidden;
+  will-change: transform;
 }
 
-/* Ensure section titles are visible in dark mode */
-[data-theme="dark"] h4 {
-  color: #ffffff !important; /* White text for section titles */
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
 }
 
-/* ==========================================================
-   Professional Cards
-   ========================================================== */
+.stat-card-primary::before {
+  background: var(--wiki-primary);
+}
 
-.card {
-  border-radius: 4px;
-  border: 1px solid var(--wiki-border);
-  background-color: var(--wiki-card-bg);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+.stat-card-success::before {
+  background: var(--wiki-success);
 }
 
-[data-theme="dark"] .card {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+.stat-card-warning::before {
+  background: var(--wiki-warning);
 }
 
-/* Card hover - subtle */
-.card:hover {
-  border-color: var(--wiki-primary);
-  box-shadow: 0 2px 8px rgba(0, 102, 153, 0.1);
+.stat-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  flex-shrink: 0;
 }
 
-[data-theme="dark"] .card:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+.stat-card-primary .stat-icon {
+  background: var(--wiki-primary-light);
+  color: var(--wiki-primary);
 }
 
-/* Card Body */
-.card-body {
-  padding: 1.5rem;
+.stat-card-success .stat-icon {
+  background: rgba(40, 167, 69, 0.1);
+  color: var(--wiki-success);
 }
 
-/* Card title */
-.card-title {
+.stat-card-warning .stat-icon {
+  background: rgba(255, 193, 7, 0.1);
+  color: var(--wiki-warning);
+}
+
+.stat-content {
+  flex: 1;
+}
+
+.stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--wiki-dark);
+  margin: 0;
+  line-height: 1;
+}
+
+.stat-label {
   color: var(--wiki-text-muted);
+  font-size: 0.875rem;
   font-weight: 500;
-  margin-bottom: 0.75rem;
-  font-size: 0.9rem;
+  margin: 0.25rem 0 0 0;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
-/* Ensure card titles are visible in dark mode */
-[data-theme="dark"] .card-title {
-  color: #b8b8b8 !important; /* Light gray for card titles in dark mode */
+.section-card {
+  background: var(--wiki-card-bg);
+  border: 1px solid var(--wiki-border);
+  border-radius: 12px;
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
 }
 
-/* Statistics numbers - professional */
-h2.text-primary,
-h2.text-success,
-h2.text-warning {
-  font-size: 2.5rem !important;
-  font-weight: 700;
+.section-header {
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.section-header.bordered {
+  border-bottom: 1px solid var(--wiki-border);
+}
+
+.section-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--wiki-dark);
   margin: 0;
+  display: flex;
+  align-items: center;
 }
 
-/* Ensure text colors are visible in dark mode - maintain original colors */
-[data-theme="dark"] h2.text-primary {
-  color: #006699 !important; /* Original blue color */
+.section-body {
+  padding: 1.5rem;
 }
 
-[data-theme="dark"] h2.text-success {
-  color: #339966 !important; /* Original green color */
+.section-body.p-0 {
+  padding: 0;
 }
 
-[data-theme="dark"] h2.text-warning {
-  color: #ffc107 !important; /* Original yellow/amber color */
+.controls-row {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  width: 100%;
 }
 
-/* ==========================================================
-   Submissions Items with Feedback Feature
-   ========================================================== */
+.search-box {
+  position: relative;
+  flex: 1;
+  min-width: 250px;
+}
 
-.submission-item {
-  background-color: var(--wiki-light-bg);
+.search-icon {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--wiki-text-muted);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.5rem 3rem 0.5rem 2.5rem;
   border: 1px solid var(--wiki-border);
-  border-radius: 4px;
-  padding: 0.75rem 1rem;
-  margin-bottom: 0.5rem;
+  border-radius: 8px;
+  background: var(--wiki-light-bg);
+  color: var(--wiki-text);
   transition: all 0.2s ease;
 }
 
-[data-theme="dark"] .submission-item {
-  background-color: rgba(93, 184, 230, 0.05);
+.search-input:focus {
+  outline: none;
+  border-color: var(--wiki-primary);
+  background: var(--wiki-card-bg);
+  box-shadow: 0 0 0 3px var(--wiki-primary-light);
+}
+
+.search-input::placeholder {
+  color: var(--wiki-text-muted);
 }
 
-/* Clickable submissions (reviewed) */
-.submission-clickable {
+.btn-clear {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 28px;
+  height: 28px;
+  background: var(--wiki-danger);
+  border: none;
+  color: white;
+  padding: 0;
   cursor: pointer;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
 }
 
-.submission-clickable:hover {
-  background-color: var(--wiki-hover-bg);
-  border-color: var(--wiki-primary);
-  transform: translateX(2px);
+.btn-clear:hover {
+  background: var(--wiki-danger);
+  transform: translateY(-50%) scale(1.1);
+  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
 }
 
-.submission-clickable:hover .submission-title {
-  color: var(--wiki-primary);
+.btn-clear:active {
+  transform: translateY(-50%) scale(0.95);
 }
 
-/* Ensure text in submission items is visible in dark mode */
-[data-theme="dark"] .submission-item span {
-  color: #ffffff !important; /* White text for submission items */
+.btn-clear i {
+  font-size: 0.75rem;
 }
 
-/* Feedback button in submission items */
-.feedback-btn {
-  color: white;
-  padding: 0.25rem 0.5rem;
+[data-theme="dark"] .btn-clear {
+  background: #f87171;
+}
+
+[data-theme="dark"] .btn-clear:hover {
+  background: #ef4444;
+}
+
+.filter-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.filter-buttons .btn {
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  font-weight: 500;
   font-size: 0.875rem;
-  transition: all 0.2s ease;
 }
 
-.feedback-btn:hover {
-  transform: scale(1.05);
+.contest-tabs {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.contest-tabs .btn {
+  border-radius: 0;
+  font-weight: 500;
+  font-size: 0.875rem;
+  padding: 0.5rem 1rem;
+}
+
+.submissions-container {
+  max-height: 450px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 0.5rem;
+  scrollbar-width: thin;
+  scrollbar-color: var(--wiki-primary) var(--wiki-light-bg);
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.submissions-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.submissions-container::-webkit-scrollbar-track {
+  background: var(--wiki-light-bg);
+  border-radius: 10px;
+}
+
+.submissions-container::-webkit-scrollbar-thumb {
+  background: var(--wiki-primary);
+  border-radius: 10px;
+}
+
+.submissions-container::-webkit-scrollbar-thumb:hover {
+  background: var(--wiki-primary-hover);
+}
+
+.submissions-container.expanded {
+  max-height: 600px;
+}
+
+.submission-group {
+  margin-bottom: 1.5rem;
+}
+
+.submission-group:last-child {
+  margin-bottom: 0.5rem;
 }
 
-.feedback-btn i {
+.contest-name-badge {
+  background: var(--wiki-primary-light);
+  color: var(--wiki-primary);
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  font-weight: 600;
   font-size: 0.875rem;
+  margin-bottom: 0.75rem;
+  display: inline-block;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  backdrop-filter: blur(10px);
 }
 
-/* Score items (no changes) */
-.d-flex.justify-content-between:not(.submission-item) {
-  background-color: var(--wiki-light-bg);
+.submission-item {
+  background: var(--wiki-light-bg);
   border: 1px solid var(--wiki-border);
-  border-radius: 4px;
+  border-radius: 8px;
   padding: 0.75rem 1rem;
   margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
   transition: all 0.2s ease;
 }
 
-[data-theme="dark"] .d-flex.justify-content-between:not(.submission-item) {
-  background-color: rgba(93, 184, 230, 0.05);
+.submission-item.submission-clickable {
+  cursor: pointer;
+  will-change: transform, background-color;
+}
+
+.submission-item.submission-clickable:hover {
+  background: var(--wiki-hover-bg);
+  border-color: var(--wiki-primary);
+  transform: translateX(4px);
 }
 
-/* Ensure text in score items is visible in dark mode */
-[data-theme="dark"] .d-flex.justify-content-between:not(.submission-item) span {
-  color: #ffffff !important; /* White text for score items */
+.submission-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.submission-title {
+  font-weight: 500;
+  color: var(--wiki-dark);
+  font-size: 0.9375rem;
 }
 
-.d-flex.justify-content-between:not(.submission-item):hover {
-  background-color: var(--wiki-hover-bg);
+.submission-date {
+  font-size: 0.8125rem;
+  color: var(--wiki-text-muted);
+}
+
+.submission-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.btn-icon {
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  color: var(--wiki-primary);
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-icon:hover {
+  background: var(--wiki-primary-light);
+  transform: scale(1.1);
+}
+
+.btn-feedback {
+  color: var(--wiki-primary);
+}
+
+.scores-container {
+  max-height: 450px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 0.5rem;
+  scrollbar-width: thin;
+  scrollbar-color: var(--wiki-success) var(--wiki-light-bg);
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.scores-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scores-container::-webkit-scrollbar-track {
+  background: var(--wiki-light-bg);
+  border-radius: 10px;
+}
+
+.scores-container::-webkit-scrollbar-thumb {
+  background: var(--wiki-success);
+  border-radius: 10px;
+}
+
+.scores-container::-webkit-scrollbar-thumb:hover {
+  background: #218838;
+}
+
+.scores-container.expanded {
+  max-height: 600px;
+}
+
+.score-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: var(--wiki-light-bg);
+  border: 1px solid var(--wiki-border);
+  border-radius: 8px;
+  margin-bottom: 0.5rem;
+  transition: all 0.2s ease;
+}
+
+.score-item:last-child {
+  margin-bottom: 0;
+}
+
+.score-item:hover {
+  background: var(--wiki-hover-bg);
   border-color: var(--wiki-primary);
 }
 
-/* Contest Name */
-h6 {
-  font-weight: 600;
+.score-contest {
+  font-weight: 500;
   color: var(--wiki-dark);
-  margin: 0;
-  font-size: 1rem;
+  font-size: 0.9375rem;
 }
 
-/* Ensure contest names are visible in dark mode */
-[data-theme="dark"] h6 {
-  color: #ffffff !important; /* White text for contest names */
+.score-points {
+  font-weight: 600;
+  color: var(--wiki-primary);
+  background: var(--wiki-primary-light);
+  padding: 0.25rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.875rem;
 }
 
-/* Badges - professional */
 .badge {
-  padding: 0.35em 0.7em;
-  border-radius: 4px;
+  padding: 0.35rem 0.75rem;
+  border-radius: 6px;
   font-weight: 500;
-  font-size: 0.85rem;
+  font-size: 0.8125rem;
+  text-transform: capitalize;
+}
+
+.badge-primary {
+  background: var(--wiki-primary);
+  color: white;
 }
 
-/* Ensure badge colors are visible in dark mode - maintain original colors */
-[data-theme="dark"] .badge.bg-primary {
-  background-color: #006699 !important; /* Original blue color */
-  color: #ffffff !important; /* White text */
+.badge-success {
+  background: var(--wiki-success);
+  color: white;
 }
 
-[data-theme="dark"] .badge.bg-success {
-  background-color: #339966 !important; /* Original green color */
-  color: #ffffff !important; /* White text */
+.badge-warning {
+  background: var(--wiki-warning);
+  color: #000;
 }
 
-[data-theme="dark"] .badge.bg-warning {
-  background-color: #ffc107 !important; /* Original yellow/amber color */
-  color: #000000 !important; /* Dark text on bright background */
+.badge-danger {
+  background: var(--wiki-danger);
+  color: white;
 }
 
-[data-theme="dark"] .badge.bg-danger {
-  background-color: #990000 !important; /* Original red color */
-  color: #ffffff !important; /* White text */
+.badge-secondary {
+  background: var(--wiki-text-muted);
+  color: white;
 }
 
-/* ==========================================================
-   Table - Professional
-   ========================================================== */
+.badge-info {
+  background: #17a2b8;
+  color: white;
+}
 
 .table {
-  margin-bottom: 0;
-  color: var(--wiki-dark);
+  margin: 0;
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
 }
 
 .table thead th {
-  background-color: var(--wiki-light-bg);
+  background: var(--wiki-light-bg);
   border-bottom: 2px solid var(--wiki-border);
+  padding: 1rem 1.5rem;
   font-weight: 600;
+  font-size: 0.8125rem;
   text-transform: uppercase;
-  font-size: 0.85rem;
   letter-spacing: 0.5px;
   color: var(--wiki-text-muted);
-  padding: 1rem;
   position: sticky;
   top: 0;
   z-index: 10;
 }
 
-[data-theme="dark"] .table thead th {
-  background-color: rgba(93, 184, 230, 0.1);
-  border-bottom-color: var(--wiki-border);
-  color: #ffffff !important; /* White text for table headers */
-}
-
 .table tbody td {
-  padding: 1rem;
-  vertical-align: middle;
+  padding: 1rem 1.5rem;
   border-bottom: 1px solid var(--wiki-border);
-  background-color: var(--wiki-card-bg);
+  color: var(--wiki-text);
+  vertical-align: middle;
 }
 
-[data-theme="dark"] .table tbody td {
-  background-color: var(--wiki-card-bg);
-  color: #ffffff !important; /* White text for better visibility */
+.table tbody tr {
+  transition: background-color 0.2s ease;
 }
 
-/* Ensure table text is visible in dark mode */
-[data-theme="dark"] .table tbody td strong {
-  color: #ffffff !important; /* White text for contest names */
+.table-row-clickable {
+  cursor: pointer;
 }
 
-/* Ensure all table cell text is visible */
-[data-theme="dark"] .table tbody td span {
-  color: #ffffff !important; /* White text for all spans in table cells */
+.table-row-clickable:hover {
+  background: var(--wiki-hover-bg);
 }
 
-.table tbody tr {
-  transition: all 0.2s ease;
-  background-color: var(--wiki-card-bg);
+.table tbody tr:last-child td {
+  border-bottom: none;
 }
 
-.table-row-clickable {
+.contest-name-cell strong {
+  color: var(--wiki-dark);
+  font-weight: 600;
+}
+
+.submission-count {
+  color: var(--wiki-text-muted);
+  font-size: 0.9375rem;
+}
+
+.contest-card {
+  background: var(--wiki-card-bg);
+  border: 1px solid var(--wiki-border);
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1rem;
   cursor: pointer;
+  transition: all 0.2s ease;
+  will-change: transform, box-shadow;
 }
 
-.table-row-clickable:hover {
-  background-color: var(--wiki-hover-bg);
+.contest-card:hover {
+  border-color: var(--wiki-primary);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
 }
 
-.table-row-clickable:hover td {
-  background-color: var(--wiki-hover-bg);
+.contest-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--wiki-border);
 }
 
-.table tbody tr:last-child td {
-  border-bottom: none;
+.contest-card-header strong {
+  color: var(--wiki-dark);
+  font-weight: 600;
+  font-size: 1rem;
+  flex: 1;
 }
 
-/* Table responsive wrapper */
-.table-responsive {
-  border-radius: 4px;
-  overflow: hidden;
+.contest-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
-/* Table buttons */
-.table .btn-sm {
-  padding: 0.25rem 0.75rem;
+.contest-card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.contest-card-info span {
+  color: var(--wiki-text-muted);
   font-size: 0.875rem;
-  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.contest-card-info i {
+  color: var(--wiki-primary);
+  margin-right: 0.5rem;
 }
 
-.table .btn-outline-primary {
+.pagination-wrapper {
+  padding: 1.5rem;
+  border-top: 1px solid var(--wiki-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  background: var(--wiki-light-bg);
+}
+
+.pagination {
+  margin: 0;
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.page-item .page-link {
+  border: 1px solid var(--wiki-border);
+  color: var(--wiki-text);
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  background: var(--wiki-card-bg);
+  min-width: 40px;
+  text-align: center;
+}
+
+.page-item.active .page-link {
+  background: var(--wiki-primary);
+  border-color: var(--wiki-primary);
+  color: white;
+}
+
+.page-item.disabled .page-link {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.page-item:not(.disabled) .page-link:hover {
+  background: var(--wiki-primary-light);
   border-color: var(--wiki-primary);
   color: var(--wiki-primary);
+}
+
+.pagination-info {
+  color: var(--wiki-text-muted);
+  font-size: 0.875rem;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 2rem;
+}
+
+.empty-state i {
+  color: var(--wiki-text-muted);
+  opacity: 0.5;
+}
+
+.empty-state p {
+  color: var(--wiki-text-muted);
+  margin: 0;
+}
+
+.empty-state-large {
+  text-align: center;
+  padding: 4rem 2rem;
+}
+
+.empty-state-large i {
+  color: var(--wiki-text-muted);
+  opacity: 0.4;
+}
+
+.empty-state-large h5 {
+  color: var(--wiki-dark);
+  font-weight: 600;
+  margin: 1rem 0 0.5rem 0;
+}
+
+.empty-state-large p {
+  color: var(--wiki-text-muted);
+  margin-bottom: 0;
+}
+
+.btn {
+  border-radius: 8px;
+  font-weight: 500;
   transition: all 0.2s ease;
+  border: 1px solid transparent;
 }
 
-.table .btn-outline-primary:hover {
-  background-color: var(--wiki-primary);
+.btn-primary {
+  background: var(--wiki-primary);
   border-color: var(--wiki-primary);
   color: white;
+}
+
+.btn-primary:hover {
+  background: var(--wiki-primary-hover);
+  border-color: var(--wiki-primary-hover);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 102, 153, 0.2);
+  box-shadow: var(--shadow-md);
 }
 
-/* Ensure button colors are visible in dark mode - maintain original colors */
-[data-theme="dark"] .table .btn-outline-primary {
-  border-color: #006699 !important; /* Original blue color */
-  color: #006699 !important; /* Original blue color */
+.btn-outline-primary {
+  border-color: var(--wiki-primary);
+  color: var(--wiki-primary);
+  background: transparent;
 }
 
-[data-theme="dark"] .table .btn-outline-primary:hover {
-  background-color: #006699 !important; /* Original blue color */
-  border-color: #006699 !important; /* Original blue color */
-  color: white !important;
+.btn-outline-primary:hover {
+  background: var(--wiki-primary);
+  color: white;
 }
 
-/* ==========================================================
-   Spinner - Professional
-   ========================================================== */
+.btn-outline-secondary {
+  border-color: var(--wiki-border);
+  color: var(--wiki-text-muted);
+  background: transparent;
+}
+
+.btn-outline-secondary:hover {
+  border-color: var(--wiki-primary);
+  color: var(--wiki-primary);
+  background: var(--wiki-primary-light);
+}
+
+.btn-warning {
+  background: var(--wiki-warning);
+  border-color: var(--wiki-warning);
+  color: #000;
+}
+
+.btn-warning:hover {
+  background: #e0a800;
+  border-color: #e0a800;
+}
 
 .spinner-border.text-primary {
   width: 3rem;
   height: 3rem;
-  border-width: 0.25em;
+  border-width: 0.3em;
   color: var(--wiki-primary);
 }
 
-/* ==========================================================
-   Responsive Design
-   ========================================================== */
+@media (max-width: 992px) {
+  .controls-row {
+    flex-direction: column;
+  }
 
-/* Ensure text-muted elements are visible in dark mode */
-[data-theme="dark"] .text-muted {
-  color: #b8b8b8 !important; /* Light gray for muted text in dark mode */
-}
+  .search-box {
+    width: 100%;
+    min-width: 100%;
+  }
 
-[data-theme="dark"] .no-submissions,
-[data-theme="dark"] .no-scores,
-[data-theme="dark"] .no-contests {
-  color: #b8b8b8 !important; /* Light gray for empty state messages */
+  .filter-buttons {
+    width: 100%;
+  }
 }
 
-@media(max-width: 768px){
-  h2.page-header {
+@media (max-width: 768px) {
+  .dashboard-header {
+    margin-bottom: 1.5rem;
+  }
+
+  .page-header {
     font-size: 1.75rem;
   }
 
-  h4 {
-    font-size: 1.125rem;
+  .dashboard-subtitle {
+    font-size: 0.9375rem;
   }
 
-  .card-body {
+  .stat-card {
     padding: 1.25rem;
   }
 
-  h2.text-primary,
-  h2.text-success,
-  h2.text-warning {
-    font-size: 2rem !important;
+  .stat-icon {
+    width: 50px;
+    height: 50px;
+    font-size: 1.25rem;
+  }
+
+  .stat-value {
+    font-size: 1.75rem;
+  }
+
+  .section-header {
+    padding: 1rem;
+  }
+
+  .section-body {
+    padding: 1rem;
   }
 
   .submission-item {
     flex-direction: column;
-    align-items: flex-start !important;
+    align-items: flex-start;
+    gap: 0.75rem;
   }
 
-  .submission-item > div {
-    margin-top: 0.5rem;
+  .submission-info {
+    width: 100%;
+  }
+
+  .submission-actions {
     width: 100%;
     justify-content: space-between;
+    flex-direction: row;
+  }
+
+  .contest-name-badge {
+    display: block;
+    width: fit-content;
+    margin-bottom: 0.75rem;
+  }
+
+  .submission-group {
+    margin-bottom: 1.25rem;
+  }
+
+  .pagination-wrapper {
+    flex-direction: column;
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  .pagination {
+    width: 100%;
+    justify-content: center;
+    overflow-x: auto;
+    padding: 0.5rem 0;
+  }
+
+  .pagination-info {
+    order: -1;
+    text-align: center;
+    width: 100%;
+  }
+
+  .page-item .page-link {
+    padding: 0.4rem 0.6rem;
+    min-width: 36px;
+    font-size: 0.875rem;
   }
 }
 
-</style>
+@media (max-width: 576px) {
+  .stat-card {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .stat-icon {
+    margin: 0 auto;
+  }
+
+  .contest-tabs {
+    width: 100%;
+  }
+
+  .contest-tabs .btn {
+    flex: 1;
+    font-size: 0.8125rem;
+    padding: 0.5rem;
+  }
+
+  .submission-item {
+    padding: 1rem;
+  }
+
+  .submission-title {
+    font-size: 0.9rem;
+    line-height: 1.4;
+  }
+
+  .submission-date {
+    font-size: 0.75rem;
+  }
+
+  .contest-name-badge {
+    width: 100%;
+    text-align: center;
+    display: block;
+  }
+
+  .score-item {
+    padding: 0.875rem;
+    flex-wrap: wrap;
+  }
+
+  .score-contest {
+    font-size: 0.875rem;
+    flex: 1;
+    min-width: 100%;
+    margin-bottom: 0.5rem;
+  }
+
+  .score-points {
+    width: 100%;
+    text-align: center;
+  }
+}
+</style>
\ No newline at end of file