feat: implement 7 missing UI features + detailed contest analytics

Quick additions to existing components:
- CTFd Export: button in admin challenges header → ctfd-export.json download
- Scoreboard Export: JSON + CSV buttons in collaborator contest teams tab
- Team Transfer Leadership: dropdown + Transfer button in members tab (leader only)
- Writeup Upvotes: thumbs-up + live count per writeup in challenge-detail
- Challenge Rating: 5-star hover widget in challenge-detail, persisted via API

New pages:
- Submission History: /submissions page with correct/wrong status, points, timestamp
  (getMySubmissions() added to ChallengeService → GET /submissions/my)

Detailed contest analytics tab (collaborator):
- 5 stats cards: Teams, Challenges, Submissions, Solves, Solve Rate
- 4 Chart.js charts: Challenge Solve Counts (bar), Category breakdown (doughnut),
  Difficulty breakdown (doughnut), Team Leaderboard (bar)
- Challenge breakdown table with difficulty badges and solve-rate progress bars
- Analytics accessible via desktop sidebar + mobile dropdown in collaborator dashboard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Uttam-Mahata

frontend/src/app/app.routes.ts

@@ -107,6 +107,7 @@ export const routes: Routes = [
   { path: 'contests/:contest_id/challenges', loadComponent: () => import('./components/contest-challenges/contest-challenges').then(m => m.ContestChallengesComponent), canActivate: [authGuard] },
   { path: 'contests/:contest_id/challenges/:id', loadComponent: () => import('./components/challenge-detail/challenge-detail').then(m => m.ChallengeDetailComponent), canActivate: [authGuard] },
 
+  { path: 'submissions', loadComponent: () => import('./components/submissions/submissions').then(m => m.SubmissionsComponent), canActivate: [authGuard] },
   { path: 'activity', loadComponent: () => import('./components/activity-dashboard/activity-dashboard').then(m => m.ActivityDashboardComponent), canActivate: [authGuard] },
   { path: 'notifications', loadComponent: () => import('./components/notifications/notifications').then(m => m.NotificationsComponent), canActivate: [authGuard] },
   {

frontend/src/app/components/admin-dashboard/tabs/admin-challenges/admin-challenges.html

@@ -1,5 +1,6 @@
 <!-- View Switcher Tabs -->
-<nav class="flex items-center gap-1 mb-5 p-1 rounded-xl w-fit" style="background: rgba(15,23,42,0.7); border: 1px solid rgba(255,255,255,0.06);">
+<div class="flex items-center justify-between gap-3 mb-5 flex-wrap">
+<nav class="flex items-center gap-1 p-1 rounded-xl w-fit" style="background: rgba(15,23,42,0.7); border: 1px solid rgba(255,255,255,0.06);">
   <button type="button" (click)="switchView('manage')"
           class="px-4 py-2 text-sm font-medium rounded-lg transition-all duration-150 flex items-center gap-2"
           [style]="activeView === 'manage' ? 'background: rgba(139,92,246,0.15); color: #a78bfa;' : 'color: #64748b;'">
@@ -14,6 +15,14 @@
     {{ isEditMode ? 'Edit Challenge' : 'New Challenge' }}
   </button>
 </nav>
+<button type="button" (click)="exportCTFd()" [disabled]="isExportingCTFd"
+        class="flex items-center gap-1.5 px-3 py-2 text-xs font-medium rounded-xl transition-colors disabled:opacity-50"
+        style="background: rgba(245,158,11,0.1); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2);">
+  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
+  <span *ngIf="!isExportingCTFd">CTFd Export</span>
+  <span *ngIf="isExportingCTFd">Exporting…</span>
+</button>
+</div>
 
 <!-- ===== CREATE / EDIT VIEW ===== -->
 <div *ngIf="activeView === 'create'" class="w-full">

frontend/src/app/components/admin-dashboard/tabs/admin-challenges/admin-challenges.ts

@@ -5,6 +5,7 @@ import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
 import Showdown from 'showdown';
 import { ChallengeService, ChallengeAdmin, ChallengeRequest } from '../../../../services/challenge';
 import { BulkChallengeService } from '../../../../services/bulk-challenge';
+import { CollaboratorService } from '../../../../services/collaborator';
 import { ThemeService } from '../../../../services/theme';
 import { ConfirmationModalService } from '../../../../services/confirmation-modal.service';
 import { AdminStateService } from '../../../../services/admin-state';
@@ -25,6 +26,7 @@ export class AdminChallengesComponent implements OnInit {
   private destroyRef = inject(DestroyRef);
   private challengeService = inject(ChallengeService);
   private bulkChallengeService = inject(BulkChallengeService);
+  private collaboratorService = inject(CollaboratorService);
   private themeService = inject(ThemeService);
   private confirmationModalService = inject(ConfirmationModalService);
   private cdr = inject(ChangeDetectorRef);
@@ -42,6 +44,30 @@ export class AdminChallengesComponent implements OnInit {
   flagVerifyStatus: 'none' | 'match' | 'no-match' = 'none';
   previewChallenge: ChallengeAdmin | null = null;
 
+  // CTFd Export
+  isExportingCTFd = false;
+
+  exportCTFd(): void {
+    this.isExportingCTFd = true;
+    this.collaboratorService.exportCTFd().subscribe({
+      next: (data) => {
+        this.isExportingCTFd = false;
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'ctfd-export.json';
+        a.click();
+        window.URL.revokeObjectURL(url);
+        this.adminState.showMessage('CTFd export downloaded', 'success');
+      },
+      error: () => {
+        this.isExportingCTFd = false;
+        this.adminState.showMessage('CTFd export failed', 'error');
+      }
+    });
+  }
+
   // File upload state
   isUploadingFile = false;
   uploadFileError = '';

frontend/src/app/components/challenge-detail/challenge-detail.html

@@ -82,6 +82,22 @@ <h3 class="text-sm font-semibold text-slate-900 dark:text-white mb-3 flex items-
             <p class="text-slate-500 dark:text-slate-400 text-sm mt-2">
               Max: {{ challenge.max_points }} pts • Points decrease as more teams solve
             </p>
+
+            <!-- Challenge Rating -->
+            <div *ngIf="challengeRating !== null" class="mt-3 flex items-center gap-3 flex-wrap">
+              <div class="flex items-center gap-0.5">
+                <button *ngFor="let star of [1,2,3,4,5]" type="button"
+                        (mouseenter)="hoverRating = star" (mouseleave)="hoverRating = 0"
+                        (click)="submitRating(star)" [disabled]="isSubmittingRating"
+                        class="text-xl leading-none transition-colors disabled:opacity-50 focus:outline-none"
+                        [class.text-amber-400]="star <= (hoverRating || challengeRating!.user_rating || 0)"
+                        [class.text-slate-600]="star > (hoverRating || challengeRating!.user_rating || 0)">★</button>
+              </div>
+              <span class="text-xs text-slate-500">
+                {{ challengeRating.average_rating | number:'1.1-1' }} / 5
+                ({{ challengeRating.total_ratings }} {{ challengeRating.total_ratings === 1 ? 'rating' : 'ratings' }})
+              </span>
+            </div>
           </div>
 
           <!-- Description -->
@@ -225,7 +241,17 @@ <h2 class="text-lg font-semibold text-slate-900 dark:text-white flex items-cente
               <div *ngFor="let writeup of writeups" class="bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-4">
                 <div class="flex items-center justify-between mb-3">
                   <span class="text-sm font-medium text-slate-900 dark:text-white">{{ writeup.username }}</span>
-                  <span class="text-xs text-slate-500 dark:text-slate-400">{{ writeup.created_at | date:'short' }}</span>
+                  <div class="flex items-center gap-3">
+                    <button type="button" (click)="toggleUpvote(writeup.id)"
+                            class="flex items-center gap-1 text-xs transition-colors focus:outline-none"
+                            [class.text-red-400]="writeupVotes.get(writeup.id)?.upvoted"
+                            [class.text-slate-400]="!writeupVotes.get(writeup.id)?.upvoted"
+                            [class.hover:text-red-400]="!writeupVotes.get(writeup.id)?.upvoted">
+                      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M14 9V5l-7 7 7 7v-4.1c5 .5 8.5 2.1 11 5.1-1-5-4-10-11-11z"/></svg>
+                      {{ writeupVotes.get(writeup.id)?.count ?? 0 }}
+                    </button>
+                    <span class="text-xs text-slate-500 dark:text-slate-400">{{ writeup.created_at | date:'short' }}</span>
+                  </div>
                 </div>
                 <div class="prose prose-sm prose-slate dark:prose-invert max-w-none writeup-content                            prose-headings:text-slate-900 dark:prose-headings:text-white
                             prose-p:text-slate-700 dark:prose-p:text-slate-300

frontend/src/app/components/challenge-detail/challenge-detail.ts

@@ -70,6 +70,14 @@ export class ChallengeDetailComponent implements OnInit, OnDestroy, AfterViewChe
   writeupEditorContent = '';
   writeupEditorConfig: any = {};
   showWriteupEditor = false;
+
+  // Writeup upvotes: writeupId -> { upvoted, count }
+  writeupVotes = new Map<string, { upvoted: boolean; count: number }>();
+
+  // Challenge rating
+  challengeRating: { average_rating: number; total_ratings: number; user_rating?: number } | null = null;
+  hoverRating = 0;
+  isSubmittingRating = false;
 
   // Solves
   solves: SolveEntry[] = [];
@@ -315,6 +323,7 @@ export class ChallengeDetailComponent implements OnInit, OnDestroy, AfterViewChe
           this.needsHighlight = true;
           this.loadHints();
           this.loadWriteups();
+          this.loadChallengeRating();
         },
         error: (err) => console.error('Error loading challenge:', err)
       });
@@ -367,17 +376,58 @@ export class ChallengeDetailComponent implements OnInit, OnDestroy, AfterViewChe
           const format = writeup.content_format || 'markdown';
           return {
             ...writeup,
-            renderedContent: format === 'html' 
-              ? writeup.content 
+            renderedContent: format === 'html'
+              ? writeup.content
               : this.markdownConverter.makeHtml(writeup.content || '')
           };
         });
         this.needsHighlight = true;
+        // Seed upvote counts from writeup data, load vote status for each
+        this.writeups.forEach(w => {
+          this.writeupVotes.set(w.id, { upvoted: false, count: w.upvote_count ?? 0 });
+          this.challengeService.getWriteupVoteStatus(w.id).subscribe({
+            next: (s) => {
+              const cur = this.writeupVotes.get(w.id) ?? { upvoted: false, count: w.upvote_count ?? 0 };
+              this.writeupVotes.set(w.id, { ...cur, upvoted: s.upvoted });
+            },
+            error: () => {}
+          });
+        });
       },
       error: () => this.writeups = []
     });
   }
 
+  toggleUpvote(writeupId: string): void {
+    const cur = this.writeupVotes.get(writeupId) ?? { upvoted: false, count: 0 };
+    // Optimistic update
+    const next = { upvoted: !cur.upvoted, count: cur.upvoted ? cur.count - 1 : cur.count + 1 };
+    this.writeupVotes.set(writeupId, next);
+    this.challengeService.toggleWriteupUpvote(writeupId).subscribe({
+      error: () => this.writeupVotes.set(writeupId, cur) // revert on error
+    });
+  }
+
+  loadChallengeRating(): void {
+    if (!this.challenge) return;
+    this.challengeService.getChallengeRating(this.challenge.id).subscribe({
+      next: (r) => { this.challengeRating = r; },
+      error: () => { this.challengeRating = null; }
+    });
+  }
+
+  submitRating(stars: number): void {
+    if (!this.challenge || this.isSubmittingRating) return;
+    this.isSubmittingRating = true;
+    this.challengeService.rateChallenge(this.challenge.id, stars).subscribe({
+      next: () => {
+        this.isSubmittingRating = false;
+        this.loadChallengeRating();
+      },
+      error: () => { this.isSubmittingRating = false; }
+    });
+  }
+
   submitWriteup(): void {
     if (!this.challenge || this.isSubmittingWriteup || !this.writeupEditorContent.trim()) return;
 

frontend/src/app/components/collaborator-dashboard/collaborator-dashboard.html

@@ -65,7 +65,8 @@ <h2 class="text-xs font-bold text-white leading-none">Collaborator</h2>
           {section:'rounds', label:'Rounds', icon:'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'},
           {section:'challenges', label:'Challenges', icon:'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01'},
           {section:'teams', label:'Teams', icon:'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z'},
-          {section:'collaborators', label:'Collaborators', icon:'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z'}
+          {section:'collaborators', label:'Collaborators', icon:'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z'},
+          {section:'analytics', label:'Analytics', icon:'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'}
         ]">
           <a [routerLink]="['/collaborator/contests', contestId, item.section]"
              [title]="!sidebarOpen ? item.label : ''"
@@ -120,6 +121,7 @@ <h1 class="text-sm font-bold text-white">{{ isInContest ? 'Manage Contest' : 'Co
           <a [routerLink]="['/collaborator/contests', contestId, 'challenges']" [class.text-emerald-400]="currentSection === 'challenges'" class="flex items-center gap-2.5 px-4 py-2 text-sm text-slate-500 hover:text-slate-200 transition-colors">Challenges</a>
           <a [routerLink]="['/collaborator/contests', contestId, 'teams']" [class.text-emerald-400]="currentSection === 'teams'" class="flex items-center gap-2.5 px-4 py-2 text-sm text-slate-500 hover:text-slate-200 transition-colors">Teams</a>
           <a [routerLink]="['/collaborator/contests', contestId, 'collaborators']" [class.text-emerald-400]="currentSection === 'collaborators'" class="flex items-center gap-2.5 px-4 py-2 text-sm text-slate-500 hover:text-slate-200 transition-colors">Collaborators</a>
+          <a [routerLink]="['/collaborator/contests', contestId, 'analytics']" [class.text-emerald-400]="currentSection === 'analytics'" class="flex items-center gap-2.5 px-4 py-2 text-sm text-slate-500 hover:text-slate-200 transition-colors">Analytics</a>
         </ng-container>
       </div>
     </header>