+
+
+
+
+
+
+
+
+ @if (isLoading()) {
+
+
+
+
+ }
+
+
+ @if (stats() && !isLoading()) {
+
+
+
+
+ bar_chart
+ Average Quiz Score
+
+
+
+
+
+
+
+ @if (userGrowthData().length > 0) {
+
+
+
+ show_chart
+ User Growth Over Time
+
+
+
+
+
+ }
+
+
+ @if (popularCategories().length > 0) {
+
+
+
+ category
+ Most Popular Categories
+
+
+
+
+
+ }
+
+
+
+
+ analytics
+
+
+ }
+
diff --git a/frontend/src/app/features/admin/admin-dashboard/admin-dashboard.component.scss b/frontend/src/app/features/admin/admin-dashboard/admin-dashboard.component.scss
new file mode 100644
index 0000000..1724fd3
--- /dev/null
+++ b/frontend/src/app/features/admin/admin-dashboard/admin-dashboard.component.scss
@@ -0,0 +1,511 @@
+.admin-dashboard {
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 2rem;
+
+ // Header
+ .dashboard-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 2rem;
+
+ .header-content {
+ h1 {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 2rem;
+ font-weight: 600;
+ margin: 0 0 0.5rem 0;
+ color: #1a237e;
+
+ mat-icon {
+ font-size: 2.5rem;
+ width: 2.5rem;
+ height: 2.5rem;
+ color: #3f51b5;
+ }
+ }
+
+ .subtitle {
+ margin: 0;
+ color: #666;
+ font-size: 1rem;
+ }
+ }
+
+ .header-actions {
+ display: flex;
+ gap: 0.5rem;
+
+ button {
+ mat-icon {
+ transition: transform 0.3s ease;
+ }
+
+ &:hover:not([disabled]) mat-icon {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ }
+
+ // Date Filter Card
+ .filter-card {
+ margin-bottom: 2rem;
+
+ mat-card-content {
+ padding: 1.5rem;
+ }
+
+ .date-filter {
+ h3 {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin: 0 0 1rem 0;
+ font-size: 1.1rem;
+ color: #333;
+
+ mat-icon {
+ color: #3f51b5;
+ }
+ }
+
+ .date-inputs {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ flex-wrap: wrap;
+
+ mat-form-field {
+ flex: 1;
+ min-width: 200px;
+ }
+
+ button {
+ height: 56px;
+ }
+ }
+ }
+ }
+
+ // Loading State
+ .loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ gap: 1.5rem;
+
+ p {
+ font-size: 1.1rem;
+ color: #666;
+ }
+ }
+
+ // Error State
+ .error-card {
+ margin-bottom: 2rem;
+ border-left: 4px solid #f44336;
+
+ .error-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ gap: 1rem;
+
+ mat-icon {
+ font-size: 4rem;
+ width: 4rem;
+ height: 4rem;
+ }
+
+ h3 {
+ margin: 0;
+ font-size: 1.5rem;
+ color: #333;
+ }
+
+ p {
+ margin: 0;
+ color: #666;
+ }
+
+ button {
+ margin-top: 1rem;
+ }
+ }
+ }
+
+ // Statistics Grid
+ .stats-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 1.5rem;
+ margin-bottom: 2rem;
+
+ .stat-card {
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+ &:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+ }
+
+ mat-card-content {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+ padding: 1.5rem;
+
+ .stat-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 60px;
+ height: 60px;
+ border-radius: 12px;
+
+ mat-icon {
+ font-size: 2rem;
+ width: 2rem;
+ height: 2rem;
+ color: white;
+ }
+ }
+
+ .stat-info {
+ flex: 1;
+
+ h3 {
+ margin: 0 0 0.5rem 0;
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: #666;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ .stat-value {
+ margin: 0 0 0.25rem 0;
+ font-size: 2rem;
+ font-weight: 700;
+ color: #333;
+ }
+
+ .stat-detail {
+ margin: 0;
+ font-size: 0.85rem;
+ color: #4caf50;
+ font-weight: 500;
+ }
+ }
+ }
+
+ &.users-card .stat-icon {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ }
+
+ &.active-card .stat-icon {
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+ }
+
+ &.quizzes-card .stat-icon {
+ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+ }
+
+ &.questions-card .stat-icon {
+ background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+ }
+ }
+ }
+
+ // Average Score Card
+ .score-card {
+ margin-bottom: 2rem;
+
+ mat-card-header {
+ padding: 1.5rem 1.5rem 0;
+
+ mat-card-title {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 1.3rem;
+ color: #333;
+
+ mat-icon {
+ color: #3f51b5;
+ }
+ }
+ }
+
+ mat-card-content {
+ padding: 2rem;
+
+ .score-display {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1.5rem;
+
+ .score-circle {
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+
+ .score-value {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: white;
+ }
+ }
+
+ .score-description {
+ margin: 0;
+ font-size: 1.1rem;
+ text-align: center;
+
+ .excellent {
+ color: #4caf50;
+ font-weight: 600;
+ }
+
+ .good {
+ color: #ff9800;
+ font-weight: 600;
+ }
+
+ .needs-improvement {
+ color: #f44336;
+ font-weight: 600;
+ }
+ }
+ }
+ }
+ }
+
+ // Chart Cards
+ .chart-card {
+ margin-bottom: 2rem;
+
+ mat-card-header {
+ padding: 1.5rem 1.5rem 0;
+
+ mat-card-title {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 1.3rem;
+ color: #333;
+
+ mat-icon {
+ color: #3f51b5;
+ }
+ }
+ }
+
+ mat-card-content {
+ padding: 1.5rem;
+
+ .chart-container {
+ overflow-x: auto;
+
+ svg {
+ display: block;
+ margin: 0 auto;
+
+ &.line-chart path {
+ transition: stroke-dashoffset 1s ease;
+ stroke-dasharray: 2000;
+ stroke-dashoffset: 2000;
+ animation: drawLine 2s ease forwards;
+ }
+
+ &.bar-chart rect {
+ transition: opacity 0.3s ease;
+
+ &:hover {
+ opacity: 1 !important;
+ }
+ }
+
+ text {
+ font-family: 'Roboto', sans-serif;
+ }
+ }
+ }
+ }
+ }
+
+ @keyframes drawLine {
+ to {
+ stroke-dashoffset: 0;
+ }
+ }
+
+ // Quick Actions
+ .quick-actions {
+ margin-top: 3rem;
+
+ h2 {
+ font-size: 1.5rem;
+ margin-bottom: 1.5rem;
+ color: #333;
+ }
+
+ .actions-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+
+ button {
+ height: 60px;
+ font-size: 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ mat-icon {
+ font-size: 1.5rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+ }
+ }
+ }
+
+ // Empty State
+ .empty-state {
+ margin-top: 2rem;
+
+ mat-card-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ text-align: center;
+
+ mat-icon {
+ font-size: 5rem;
+ width: 5rem;
+ height: 5rem;
+ color: #bdbdbd;
+ margin-bottom: 1rem;
+ }
+
+ h3 {
+ margin: 0 0 0.5rem 0;
+ font-size: 1.5rem;
+ color: #333;
+ }
+
+ p {
+ margin: 0;
+ color: #666;
+ font-size: 1rem;
+ }
+ }
+ }
+
+ // Responsive Design
+ @media (max-width: 768px) {
+ padding: 1rem;
+
+ .dashboard-header {
+ flex-direction: column;
+ gap: 1rem;
+
+ .header-content h1 {
+ font-size: 1.5rem;
+
+ mat-icon {
+ font-size: 2rem;
+ width: 2rem;
+ height: 2rem;
+ }
+ }
+
+ .header-actions {
+ align-self: flex-end;
+ }
+ }
+
+ .filter-card .date-filter .date-inputs {
+ flex-direction: column;
+ align-items: stretch;
+
+ mat-form-field {
+ width: 100%;
+ }
+
+ button {
+ width: 100%;
+ }
+ }
+
+ .stats-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .chart-card mat-card-content .chart-container {
+ svg {
+ width: 100%;
+ height: auto;
+ }
+ }
+
+ .quick-actions .actions-grid {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ @media (max-width: 1024px) {
+ .stats-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+}
+
+// Dark Mode Support
+@media (prefers-color-scheme: dark) {
+ .admin-dashboard {
+ .dashboard-header .header-content h1 {
+ color: #e3f2fd;
+ }
+
+ .filter-card .date-filter h3,
+ .chart-card mat-card-title,
+ .score-card mat-card-title,
+ .quick-actions h2 {
+ color: #e0e0e0;
+ }
+
+ .stats-grid .stat-card {
+ mat-card-content .stat-info {
+ h3 {
+ color: #bdbdbd;
+ }
+
+ .stat-value {
+ color: #e0e0e0;
+ }
+ }
+ }
+
+ .empty-state mat-card-content h3 {
+ color: #e0e0e0;
+ }
+ }
+}
diff --git a/frontend/src/app/features/admin/admin-dashboard/admin-dashboard.component.ts b/frontend/src/app/features/admin/admin-dashboard/admin-dashboard.component.ts
new file mode 100644
index 0000000..8f06c0b
--- /dev/null
+++ b/frontend/src/app/features/admin/admin-dashboard/admin-dashboard.component.ts
@@ -0,0 +1,285 @@
+import { Component, OnInit, OnDestroy, signal, computed, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatNativeDateModule } from '@angular/material/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { Subject, takeUntil } from 'rxjs';
+import { AdminService } from '../../../core/services/admin.service';
+import { AdminStatistics } from '../../../core/models/admin.model';
+
+/**
+ * AdminDashboardComponent
+ *
+ * Main landing page for administrators featuring:
+ * - System-wide statistics cards (users, quizzes, questions)
+ * - User growth line chart
+ * - Popular categories bar chart
+ * - Average quiz scores display
+ * - Date range filtering
+ * - Responsive layout with loading skeletons
+ *
+ * Features:
+ * - Real-time statistics with 5-min caching
+ * - Interactive charts (using SVG for simplicity)
+ * - Date range picker for filtering
+ * - Auto-refresh capability
+ * - Mobile-responsive grid layout
+ */
+@Component({
+ selector: 'app-admin-dashboard',
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatCardModule,
+ MatButtonModule,
+ MatIconModule,
+ MatProgressSpinnerModule,
+ MatDatepickerModule,
+ MatFormFieldModule,
+ MatInputModule,
+ MatNativeDateModule,
+ ReactiveFormsModule
+ ],
+ templateUrl: './admin-dashboard.component.html',
+ styleUrls: ['./admin-dashboard.component.scss']
+})
+export class AdminDashboardComponent implements OnInit, OnDestroy {
+ private readonly adminService = inject(AdminService);
+ private readonly router = inject(Router);
+ private readonly destroy$ = new Subject
+
+
+
+
+
+
+
+
+ admin_panel_settings
+ Admin Dashboard
+
+ System-wide statistics and analytics
+
+
+
+
+
+ }
+
+
+ @if (error() && !isLoading()) {
+ Loading statistics...
+
+ error_outline
+
+ Failed to Load Statistics
+{{ error() }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Total Users
+{{ formatNumber(totalUsers()) }}
+ @if (stats() && stats()!.stats.newUsersThisWeek) { ++{{ stats()!.stats.newUsersThisWeek }} this week
+ } +
+
+ Active Users
+{{ formatNumber(activeUsers()) }}
+Last 7 days
+
+
+ Total Quizzes
+{{ formatNumber(totalQuizSessions()) }}
+ @if (stats() && stats()!.stats.quizzesThisWeek) { ++{{ stats()!.stats.quizzesThisWeek }} this week
+ } +
+
+ Total Questions
+{{ formatNumber(totalQuestions()) }}
+In database
+
+
+
+ {{ formatPercentage(averageScore()) }}
+
+ + @if (averageScore() >= 80) { + Excellent performance across all quizzes + } @else if (averageScore() >= 60) { + Good performance overall + } @else { + Room for improvement + } +
+
+
+
+
+
+
+
+
+ }
+
+
+ @if (!stats() && !isLoading() && !error()) {
+ Quick Actions
+
+
+
+
+
+
+ No Statistics Available
+Statistics will appear here once users start taking quizzes
+
+
+
diff --git a/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.scss b/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.scss
new file mode 100644
index 0000000..6621032
--- /dev/null
+++ b/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.scss
@@ -0,0 +1,535 @@
+.question-form-container {
+ padding: 24px;
+ max-width: 1400px;
+ margin: 0 auto;
+
+ @media (max-width: 768px) {
+ padding: 16px;
+ }
+}
+
+// ===========================
+// Header
+// ===========================
+.form-header {
+ margin-bottom: 24px;
+
+ h1 {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin: 0 0 8px 0;
+ font-size: 32px;
+ font-weight: 600;
+ color: var(--mat-app-on-surface, #212121);
+
+ mat-icon {
+ font-size: 36px;
+ width: 36px;
+ height: 36px;
+ color: var(--mat-app-primary, #1976d2);
+ }
+ }
+
+ .subtitle {
+ margin: 0;
+ font-size: 16px;
+ color: var(--mat-app-on-surface-variant, #757575);
+ }
+
+ .question-id {
+ margin: 8px 0 0 0;
+ padding: 6px 12px;
+ background-color: rgba(33, 150, 243, 0.1);
+ border-radius: 4px;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--mat-app-primary, #1976d2);
+ width: fit-content;
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 24px;
+
+ mat-icon {
+ font-size: 28px;
+ width: 28px;
+ height: 28px;
+ }
+ }
+
+ .subtitle {
+ font-size: 14px;
+ }
+ }
+}
+
+// ===========================
+// Layout
+// ===========================
+.form-layout {
+ display: grid;
+ grid-template-columns: 1fr 400px;
+ gap: 24px;
+
+ @media (max-width: 1024px) {
+ grid-template-columns: 1fr;
+ }
+}
+
+.form-card,
+.preview-card {
+ height: fit-content;
+
+ mat-card-content {
+ padding: 24px !important;
+ }
+}
+
+.preview-card {
+ position: sticky;
+ top: 24px;
+
+ @media (max-width: 1024px) {
+ position: static;
+ order: -1;
+ }
+
+ mat-card-header {
+ padding: 16px 24px 0;
+
+ mat-card-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 18px;
+ font-weight: 600;
+
+ mat-icon {
+ color: var(--mat-app-primary, #1976d2);
+ }
+ }
+ }
+}
+
+// ===========================
+// Form Elements
+// ===========================
+.full-width {
+ width: 100%;
+}
+
+.half-width {
+ width: calc(50% - 8px);
+
+ @media (max-width: 768px) {
+ width: 100%;
+ }
+}
+
+.form-row {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 16px;
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ gap: 0;
+ }
+}
+
+mat-form-field {
+ margin-bottom: 16px;
+}
+
+mat-divider {
+ margin: 24px 0;
+}
+
+// ===========================
+// Form Sections
+// ===========================
+.options-section,
+.correct-answer-section,
+.tags-section {
+ margin-bottom: 24px;
+
+ h3 {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin: 0 0 16px 0;
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--mat-app-on-surface, #212121);
+
+ mat-icon {
+ font-size: 22px;
+ width: 22px;
+ height: 22px;
+ color: var(--mat-app-primary, #1976d2);
+ }
+ }
+}
+
+// ===========================
+// Options List
+// ===========================
+.options-list {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 16px;
+}
+
+.option-row {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ .option-label {
+ min-width: 70px;
+ font-weight: 500;
+ color: var(--mat-app-on-surface-variant, #757575);
+ }
+
+ .option-input {
+ flex: 1;
+ margin-bottom: 0;
+ }
+
+ @media (max-width: 768px) {
+ flex-wrap: wrap;
+
+ .option-label {
+ width: 100%;
+ margin-bottom: 4px;
+ }
+
+ .option-input {
+ width: calc(100% - 48px);
+ }
+ }
+}
+
+.add-option-btn {
+ width: 100%;
+ border-style: dashed !important;
+}
+
+// ===========================
+// Radio Group
+// ===========================
+.radio-group {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ mat-radio-button {
+ margin: 0;
+ }
+}
+
+// ===========================
+// Checkbox Group
+// ===========================
+.checkbox-group {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin: 24px 0;
+}
+
+// ===========================
+// Form Actions
+// ===========================
+.form-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 12px;
+ margin-top: 24px;
+ padding-top: 24px;
+ border-top: 1px solid var(--mat-app-outline-variant, #e0e0e0);
+
+ button {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ mat-icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ @media (max-width: 768px) {
+ flex-direction: column-reverse;
+
+ button {
+ width: 100%;
+ justify-content: center;
+ }
+ }
+}
+
+// ===========================
+// Form Error
+// ===========================
+.form-error {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 16px;
+ margin-bottom: 16px;
+ background-color: rgba(244, 67, 54, 0.1);
+ border-left: 4px solid var(--mat-warn-main, #f44336);
+ border-radius: 4px;
+ color: var(--mat-warn-dark, #d32f2f);
+
+ mat-icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+
+ span {
+ font-size: 14px;
+ font-weight: 500;
+ }
+}
+
+// ===========================
+// Preview Panel
+// ===========================
+.preview-content {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.preview-section {
+ .preview-label {
+ font-size: 12px;
+ font-weight: 600;
+ text-transform: uppercase;
+ color: var(--mat-app-on-surface-variant, #757575);
+ margin-bottom: 8px;
+ letter-spacing: 0.5px;
+ }
+
+ .preview-text {
+ font-size: 16px;
+ line-height: 1.6;
+ color: var(--mat-app-on-surface, #212121);
+ white-space: pre-wrap;
+ }
+
+ .preview-explanation {
+ padding: 12px;
+ background-color: rgba(33, 150, 243, 0.1);
+ border-left: 3px solid var(--mat-app-primary, #1976d2);
+ border-radius: 4px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--mat-app-on-surface, #212121);
+ }
+}
+
+.preview-meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.preview-badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 4px 12px;
+ border-radius: 12px;
+ font-size: 12px;
+ font-weight: 500;
+
+ &.type-badge {
+ background-color: rgba(33, 150, 243, 0.1);
+ color: #2196f3;
+ }
+
+ &.difficulty-badge {
+ &.difficulty-easy {
+ background-color: rgba(76, 175, 80, 0.1);
+ color: #4caf50;
+ }
+
+ &.difficulty-medium {
+ background-color: rgba(255, 152, 0, 0.1);
+ color: #ff9800;
+ }
+
+ &.difficulty-hard {
+ background-color: rgba(244, 67, 54, 0.1);
+ color: #f44336;
+ }
+ }
+
+ &.points-badge {
+ background-color: rgba(156, 39, 176, 0.1);
+ color: #9c27b0;
+ }
+}
+
+.preview-options {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.preview-option {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px;
+ background-color: var(--mat-app-surface-variant, #f5f5f5);
+ border-radius: 8px;
+ transition: all 0.2s ease;
+
+ mat-icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ color: var(--mat-app-on-surface-variant, #757575);
+ }
+
+ span {
+ flex: 1;
+ font-size: 14px;
+ color: var(--mat-app-on-surface, #212121);
+ }
+
+ &.correct {
+ background-color: rgba(76, 175, 80, 0.1);
+ border: 1px solid rgba(76, 175, 80, 0.3);
+
+ mat-icon {
+ color: #4caf50;
+ }
+
+ span {
+ font-weight: 500;
+ }
+ }
+}
+
+.preview-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.preview-tag {
+ display: inline-block;
+ padding: 4px 12px;
+ background-color: var(--mat-app-surface-variant, #f5f5f5);
+ border-radius: 12px;
+ font-size: 12px;
+ color: var(--mat-app-on-surface, #212121);
+}
+
+.preview-access {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.access-badge {
+ display: inline-block;
+ padding: 4px 12px;
+ border-radius: 12px;
+ font-size: 12px;
+ font-weight: 500;
+
+ &.public {
+ background-color: rgba(76, 175, 80, 0.1);
+ color: #4caf50;
+ border: 1px solid rgba(76, 175, 80, 0.3);
+ }
+
+ &.private {
+ background-color: rgba(158, 158, 158, 0.1);
+ color: #9e9e9e;
+ border: 1px solid rgba(158, 158, 158, 0.3);
+ }
+
+ &.guest {
+ background-color: rgba(33, 150, 243, 0.1);
+ color: #2196f3;
+ border: 1px solid rgba(33, 150, 243, 0.3);
+ }
+}
+
+// ===========================
+// Loading State
+// ===========================
+.loading-card {
+ min-height: 400px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ color: var(--mat-app-on-surface-variant, #757575);
+
+ .loading-icon {
+ font-size: 48px;
+ width: 48px;
+ height: 48px;
+ color: var(--mat-app-primary, #1976d2);
+ animation: spin 2s linear infinite;
+ }
+
+ p {
+ margin: 0;
+ font-size: 16px;
+ }
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+// ===========================
+// Dark Mode Support
+// ===========================
+@media (prefers-color-scheme: dark) {
+ .preview-option {
+ background-color: rgba(255, 255, 255, 0.05);
+
+ &.correct {
+ background-color: rgba(76, 175, 80, 0.15);
+ }
+ }
+
+ .preview-explanation {
+ background-color: rgba(33, 150, 243, 0.15);
+ }
+
+ .preview-tag,
+ .access-badge.private {
+ background-color: rgba(255, 255, 255, 0.05);
+ }
+
+ .form-error {
+ background-color: rgba(244, 67, 54, 0.15);
+ }
+}
diff --git a/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.ts b/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.ts
new file mode 100644
index 0000000..16a8f85
--- /dev/null
+++ b/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.ts
@@ -0,0 +1,480 @@
+import { Component, OnInit, inject, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule, AbstractControl, ValidationErrors } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule, MatChipInputEvent } from '@angular/material/chips';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AdminService } from '../../../core/services/admin.service';
+import { CategoryService } from '../../../core/services/category.service';
+import { Question, QuestionFormData } from '../../../core/models/question.model';
+import { QuestionType, Difficulty } from '../../../core/models/category.model';
+
+/**
+ * AdminQuestionFormComponent
+ *
+ * Comprehensive form for creating new quiz questions.
+ *
+ * Features:
+ * - Dynamic form based on question type
+ * - Real-time validation
+ * - Question preview panel
+ * - Tag input with chips
+ * - Dynamic options for MCQ
+ * - Correct answer validation
+ * - Category selection
+ * - Difficulty levels
+ * - Guest accessibility toggle
+ *
+ * Question Types:
+ * - Multiple Choice: Radio options with dynamic add/remove
+ * - True/False: Pre-defined boolean options
+ * - Written: Text-based answer
+ */
+@Component({
+ selector: 'app-admin-question-form',
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ MatCardModule,
+ MatFormFieldModule,
+ MatInputModule,
+ MatSelectModule,
+ MatButtonModule,
+ MatIconModule,
+ MatChipsModule,
+ MatCheckboxModule,
+ MatRadioModule,
+ MatDividerModule,
+ MatTooltipModule
+ ],
+ templateUrl: './admin-question-form.component.html',
+ styleUrl: './admin-question-form.component.scss'
+})
+export class AdminQuestionFormComponent implements OnInit {
+ private readonly fb = inject(FormBuilder);
+ private readonly adminService = inject(AdminService);
+ private readonly categoryService = inject(CategoryService);
+ private readonly router = inject(Router);
+ private readonly route = inject(ActivatedRoute);
+
+ // Form state
+ questionForm!: FormGroup;
+ isSubmitting = signal(false);
+ isEditMode = signal(false);
+ questionId = signal
+ @if (isEditMode()) {
+
+
+
+
+
+
+
+ edit
+ Edit Question
+
+ Update the details below to modify the quiz question
+ @if (questionId()) { +Question ID: {{ questionId() }}
+ } + } @else { +
+ add_circle
+ Create New Question
+
+ Fill in the details below to create a new quiz question
+ } +
+
+ @if (isLoadingQuestion()) {
+
+
+
+
+ } @else {
+
+
+
+
+
+
+ }
+
+
+
+
+
+ visibility
+ Preview
+
+
+
+
+
+
+
+ hourglass_empty
+
+ Loading question data...
+
+
+
+
+
+
+
+
+
+
+ @if (showOptions() && getOptionTexts().length > 0) {
+ Question:
+
+ {{ questionForm.get('questionText')?.value || 'Your question will appear here...' }}
+
+
+
+ }
+
+
+ @if (showTrueFalse()) {
+ Options:
+
+
+
+ }
+
+
+ @if (questionForm.get('explanation')?.value) {
+ Options:
+
+
+
+ }
+
+
+ @if (tagsArray.length > 0) {
+ Explanation:
+
+ {{ questionForm.get('explanation')?.value }}
+
+
+
+ }
+
+
+ Tags:
+
+
+
+ Access:
+
+ @if (questionForm.get('isPublic')?.value) {
+ Public
+ } @else {
+ Private
+ }
+ @if (questionForm.get('isGuestAccessible')?.value) {
+ Guest Accessible
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (isLoading()) {
+
+
+ }
+
+
diff --git a/frontend/src/app/features/admin/admin-questions/admin-questions.component.scss b/frontend/src/app/features/admin/admin-questions/admin-questions.component.scss
new file mode 100644
index 0000000..97c5d3b
--- /dev/null
+++ b/frontend/src/app/features/admin/admin-questions/admin-questions.component.scss
@@ -0,0 +1,341 @@
+.admin-questions-container {
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 2rem;
+
+ @media (max-width: 768px) {
+ padding: 1rem;
+ }
+}
+
+// Page Header
+.page-header {
+ margin-bottom: 2rem;
+
+ .header-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ }
+
+ .title-section {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+
+ .header-icon {
+ font-size: 2.5rem;
+ width: 2.5rem;
+ height: 2.5rem;
+ color: var(--primary-color);
+ }
+
+ h1 {
+ margin: 0;
+ font-size: 2rem;
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+
+ .subtitle {
+ margin: 0.25rem 0 0 0;
+ font-size: 0.95rem;
+ color: var(--text-secondary);
+ }
+ }
+
+ button {
+ height: 42px;
+ padding: 0 1.5rem;
+
+ @media (max-width: 768px) {
+ width: 100%;
+ }
+
+ mat-icon {
+ margin-right: 0.5rem;
+ }
+ }
+}
+
+// Filters Card
+.filters-card {
+ margin-bottom: 1.5rem;
+
+ .filters-form {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+
+ @media (max-width: 768px) {
+ grid-template-columns: 1fr;
+ }
+
+ .search-field {
+ grid-column: span 2;
+
+ @media (max-width: 768px) {
+ grid-column: span 1;
+ }
+ }
+
+ mat-form-field {
+ width: 100%;
+ }
+ }
+}
+
+// Results Card
+.results-card {
+ min-height: 400px;
+}
+
+// Loading State
+.loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ gap: 1.5rem;
+
+ p {
+ margin: 0;
+ font-size: 1rem;
+ color: var(--text-secondary);
+ }
+}
+
+// Error State
+.error-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ gap: 1rem;
+
+ mat-icon {
+ font-size: 4rem;
+ width: 4rem;
+ height: 4rem;
+ }
+
+ p {
+ margin: 0;
+ font-size: 1rem;
+ color: var(--text-secondary);
+ text-align: center;
+ }
+}
+
+// Empty State
+.empty-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ gap: 1rem;
+
+ mat-icon {
+ font-size: 5rem;
+ width: 5rem;
+ height: 5rem;
+ color: var(--text-disabled);
+ }
+
+ h3 {
+ margin: 0;
+ font-size: 1.5rem;
+ font-weight: 500;
+ color: var(--text-primary);
+ }
+
+ p {
+ margin: 0;
+ font-size: 1rem;
+ color: var(--text-secondary);
+ text-align: center;
+ max-width: 500px;
+ }
+
+ button {
+ margin-top: 1rem;
+ }
+}
+
+// Questions Table
+.table-container {
+ overflow-x: auto;
+
+ @media (max-width: 768px) {
+ margin: -1rem;
+ padding: 1rem;
+ }
+}
+
+.questions-table {
+ width: 100%;
+ background: transparent;
+
+ th {
+ font-weight: 600;
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ color: var(--text-secondary);
+ padding: 1rem;
+ }
+
+ td {
+ padding: 1rem;
+ color: var(--text-primary);
+ }
+
+ tr {
+ border-bottom: 1px solid var(--divider-color);
+
+ &:hover {
+ background-color: var(--hover-background);
+ }
+ }
+
+ .question-text-cell {
+ max-width: 400px;
+ line-height: 1.5;
+ }
+
+ mat-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ font-size: 0.875rem;
+
+ mat-icon {
+ font-size: 1rem;
+ width: 1rem;
+ height: 1rem;
+ }
+ }
+
+ .points-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 2rem;
+ height: 1.5rem;
+ padding: 0 0.5rem;
+ background-color: var(--primary-color);
+ color: white;
+ border-radius: 12px;
+ font-size: 0.875rem;
+ font-weight: 500;
+ }
+
+ .action-buttons {
+ display: flex;
+ gap: 0.25rem;
+
+ button {
+ width: 36px;
+ height: 36px;
+
+ mat-icon {
+ font-size: 1.25rem;
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ }
+ }
+}
+
+// Pagination
+.pagination-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ border-top: 1px solid var(--divider-color);
+ margin-top: 1rem;
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .pagination-info {
+ font-size: 0.875rem;
+ color: var(--text-secondary);
+ }
+
+ .pagination-controls {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+
+ @media (max-width: 768px) {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ button {
+ min-width: 40px;
+ height: 40px;
+
+ &.active {
+ background-color: var(--primary-color);
+ color: white;
+ }
+
+ &:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ }
+ }
+
+ .ellipsis {
+ padding: 0 0.5rem;
+ color: var(--text-secondary);
+ }
+ }
+}
+
+// Dark Mode Support
+@media (prefers-color-scheme: dark) {
+ .admin-questions-container {
+ --text-primary: #e0e0e0;
+ --text-secondary: #a0a0a0;
+ --text-disabled: #606060;
+ --divider-color: #404040;
+ --hover-background: rgba(255, 255, 255, 0.05);
+ }
+
+ .questions-table {
+ tr:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+ }
+ }
+}
+
+// Light Mode Support
+@media (prefers-color-scheme: light) {
+ .admin-questions-container {
+ --text-primary: #212121;
+ --text-secondary: #757575;
+ --text-disabled: #bdbdbd;
+ --divider-color: #e0e0e0;
+ --hover-background: rgba(0, 0, 0, 0.04);
+ }
+
+ .questions-table {
+ tr:hover {
+ background-color: rgba(0, 0, 0, 0.04);
+ }
+ }
+}
diff --git a/frontend/src/app/features/admin/admin-questions/admin-questions.component.ts b/frontend/src/app/features/admin/admin-questions/admin-questions.component.ts
new file mode 100644
index 0000000..7ab9711
--- /dev/null
+++ b/frontend/src/app/features/admin/admin-questions/admin-questions.component.ts
@@ -0,0 +1,304 @@
+import { Component, OnInit, inject, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { debounceTime, distinctUntilChanged, finalize } from 'rxjs/operators';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableModule } from '@angular/material/table';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { AdminService } from '../../../core/services/admin.service';
+import { CategoryService } from '../../../core/services/category.service';
+import { Question } from '../../../core/models/question.model';
+import { Category } from '../../../core/models/category.model';
+import { DeleteConfirmDialogComponent } from '../delete-confirm-dialog/delete-confirm-dialog.component';
+import { PaginationService, PaginationState } from '../../../core/services/pagination.service';
+import { PaginationComponent } from '../../../shared/components/pagination/pagination.component';
+
+/**
+ * AdminQuestionsComponent
+ *
+ * Displays and manages all questions with pagination, filtering, and sorting.
+ *
+ * Features:
+ * - Question table with key columns
+ * - Search by question text
+ * - Filter by category, difficulty, and type
+ * - Sort by various fields
+ * - Pagination controls
+ * - Action buttons (Edit, Delete, View)
+ * - Delete confirmation dialog
+ * - Responsive design (cards on mobile)
+ * - Loading and error states
+ */
+@Component({
+ selector: 'app-admin-questions',
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ MatCardModule,
+ MatButtonModule,
+ MatIconModule,
+ MatTableModule,
+ MatInputModule,
+ MatFormFieldModule,
+ MatSelectModule,
+ MatProgressSpinnerModule,
+ MatTooltipModule,
+ MatChipsModule,
+ MatMenuModule,
+ MatDialogModule,
+ PaginationComponent
+ ],
+ templateUrl: './admin-questions.component.html',
+ styleUrl: './admin-questions.component.scss'
+})
+export class AdminQuestionsComponent implements OnInit {
+ private readonly adminService = inject(AdminService);
+ private readonly categoryService = inject(CategoryService);
+ private readonly router = inject(Router);
+ private readonly fb = inject(FormBuilder);
+ private readonly dialog = inject(MatDialog);
+ private readonly paginationService = inject(PaginationService);
+
+ // State signals
+ readonly questions = signal
+
+
+
+
+
+
+ quiz
+
+
+
+
+ Question Management
+Create, edit, and manage quiz questions
+
+
+ }
+
+
+ @else if (error()) {
+ Loading questions...
+
+ error
+
+ }
+
+
+ @else if (questions().length === 0) {
+ {{ error() }}
+ +
+ quiz
+
+ }
+
+
+ @else {
+ No Questions Found
+No questions match your current filters. Try adjusting your search criteria.
+ +
+
+
+
+
+
+
+ | Question | +
+
+ {{ question.questionText.substring(0, 100) }}{{ question.questionText.length > 100 ? '...' : '' }}
+
+ |
+ Type | +
+ |
+ Category | ++ {{ getCategoryName(question.categoryId) }} + | +Difficulty | +
+ |
+ Points | ++ {{ question.points }} + | +Status | +
+ |
+ Actions | ++ + | +
|---|
+
+
+
+
+
+ }
+
+
+ @if (user() && !isLoading()) {
+
diff --git a/frontend/src/app/features/admin/admin-user-detail/admin-user-detail.component.scss b/frontend/src/app/features/admin/admin-user-detail/admin-user-detail.component.scss
new file mode 100644
index 0000000..0b5046e
--- /dev/null
+++ b/frontend/src/app/features/admin/admin-user-detail/admin-user-detail.component.scss
@@ -0,0 +1,752 @@
+.admin-user-detail-container {
+ padding: 24px;
+ max-width: 1400px;
+ margin: 0 auto;
+}
+
+// ===========================
+// Page Header
+// ===========================
+.page-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16px;
+
+ .header-left {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ }
+
+ .back-button {
+ color: var(--primary-color);
+ }
+
+ .page-title {
+ margin: 0;
+ font-size: 28px;
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+
+ .header-actions {
+ display: flex;
+ gap: 8px;
+ }
+}
+
+// ===========================
+// Breadcrumb
+// ===========================
+.breadcrumb {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 24px;
+ font-size: 14px;
+
+ .breadcrumb-link {
+ color: var(--primary-color);
+ text-decoration: none;
+ transition: opacity 0.2s;
+
+ &:hover {
+ opacity: 0.8;
+ text-decoration: underline;
+ }
+ }
+
+ .breadcrumb-separator {
+ font-size: 18px;
+ color: var(--text-secondary);
+ }
+
+ .breadcrumb-current {
+ color: var(--text-primary);
+ font-weight: 500;
+ }
+}
+
+// ===========================
+// Loading State
+// ===========================
+.loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 64px 24px;
+ gap: 16px;
+
+ .loading-text {
+ color: var(--text-secondary);
+ font-size: 16px;
+ }
+}
+
+// ===========================
+// Error State
+// ===========================
+.error-card {
+ margin-top: 24px;
+
+ .error-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 32px;
+ text-align: center;
+
+ .error-icon {
+ font-size: 64px;
+ width: 64px;
+ height: 64px;
+ color: var(--error-color);
+ margin-bottom: 16px;
+ }
+
+ h2 {
+ margin: 0 0 8px;
+ color: var(--text-primary);
+ }
+
+ p {
+ margin: 0 0 24px;
+ color: var(--text-secondary);
+ }
+
+ button {
+ mat-icon {
+ margin-right: 8px;
+ }
+ }
+ }
+}
+
+// ===========================
+// Detail Content
+// ===========================
+.detail-content {
+ display: grid;
+ gap: 24px;
+}
+
+// ===========================
+// Profile Card
+// ===========================
+.profile-card {
+ .profile-header {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ width: 100%;
+
+ .user-avatar {
+ mat-icon {
+ font-size: 80px;
+ width: 80px;
+ height: 80px;
+ color: var(--primary-color);
+ }
+ }
+
+ .user-info {
+ flex: 1;
+
+ .user-name {
+ margin: 0 0 4px;
+ font-size: 28px;
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+
+ .user-email {
+ margin: 0 0 12px;
+ font-size: 16px;
+ color: var(--text-secondary);
+ }
+
+ .user-badges {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+
+ mat-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+
+ mat-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ }
+
+ &.chip-primary {
+ background-color: var(--primary-light);
+ color: var(--primary-color);
+ }
+
+ &.chip-warn {
+ background-color: var(--warn-light);
+ color: var(--warn-color);
+ }
+
+ &.chip-success {
+ background-color: var(--success-light);
+ color: var(--success-color);
+ }
+
+ &.chip-default {
+ background-color: var(--bg-secondary);
+ color: var(--text-secondary);
+ }
+ }
+ }
+ }
+ }
+
+ .profile-details {
+ margin-top: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ .detail-row {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ > mat-icon {
+ color: var(--text-secondary);
+ }
+
+ .detail-info {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+
+ .detail-label {
+ font-size: 12px;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ .detail-value {
+ font-size: 16px;
+ color: var(--text-primary);
+ font-weight: 500;
+ }
+ }
+ }
+ }
+
+ .profile-actions {
+ display: flex;
+ gap: 12px;
+ padding: 16px;
+ border-top: 1px solid var(--divider-color);
+
+ button {
+ mat-icon {
+ margin-right: 8px;
+ }
+ }
+ }
+}
+
+// ===========================
+// Statistics Grid
+// ===========================
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 16px;
+
+ .stat-card {
+ mat-card-content {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 24px;
+
+ .stat-icon {
+ width: 56px;
+ height: 56px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 12px;
+
+ mat-icon {
+ font-size: 32px;
+ width: 32px;
+ height: 32px;
+ color: white;
+ }
+
+ &.primary {
+ background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+ }
+
+ &.success {
+ background: linear-gradient(135deg, var(--success-color), var(--success-dark));
+ }
+
+ &.accent {
+ background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
+ }
+
+ &.warn {
+ background: linear-gradient(135deg, var(--warn-color), var(--warn-dark));
+ }
+ }
+
+ .stat-info {
+ flex: 1;
+
+ .stat-value {
+ margin: 0 0 4px;
+ font-size: 28px;
+ font-weight: 700;
+ color: var(--text-primary);
+ }
+
+ .stat-label {
+ margin: 0;
+ font-size: 14px;
+ color: var(--text-secondary);
+ font-weight: 500;
+ }
+ }
+ }
+ }
+}
+
+// ===========================
+// Additional Stats Card
+// ===========================
+.additional-stats-card {
+ mat-card-header {
+ mat-card-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 20px;
+ font-weight: 600;
+
+ mat-icon {
+ color: var(--primary-color);
+ }
+ }
+ }
+
+ .stats-details {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ .stat-detail-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px 16px;
+ background-color: var(--bg-secondary);
+ border-radius: 8px;
+
+ .stat-detail-label {
+ font-size: 14px;
+ color: var(--text-secondary);
+ font-weight: 500;
+ }
+
+ .stat-detail-value {
+ font-size: 16px;
+ color: var(--text-primary);
+ font-weight: 600;
+ }
+ }
+ }
+}
+
+// ===========================
+// Quiz History Card
+// ===========================
+.quiz-history-card {
+ mat-card-header {
+ mat-card-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 20px;
+ font-weight: 600;
+
+ mat-icon {
+ color: var(--primary-color);
+ }
+ }
+ }
+
+ .quiz-history-list {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ .quiz-history-item {
+ padding: 16px;
+ border-radius: 8px;
+ background-color: var(--bg-secondary);
+ border: 1px solid var(--divider-color);
+ transition: transform 0.2s, box-shadow 0.2s;
+
+ &:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ }
+
+ .quiz-history-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 12px;
+
+ .quiz-category {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-weight: 600;
+ color: var(--text-primary);
+
+ mat-icon {
+ color: var(--primary-color);
+ }
+ }
+
+ .quiz-date {
+ font-size: 14px;
+ color: var(--text-secondary);
+ }
+ }
+
+ .quiz-history-stats {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ flex-wrap: wrap;
+
+ .quiz-stat {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+
+ mat-icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ color: var(--text-secondary);
+
+ &.score-icon-success {
+ color: var(--success-color);
+ }
+
+ &.score-icon-primary {
+ color: var(--primary-color);
+ }
+
+ &.score-icon-accent {
+ color: var(--accent-color);
+ }
+
+ &.score-icon-warn {
+ color: var(--warn-color);
+ }
+ }
+
+ .quiz-stat-label {
+ color: var(--text-secondary);
+ }
+
+ .quiz-stat-value {
+ font-weight: 600;
+ color: var(--text-primary);
+
+ &.quiz-stat-value-success {
+ color: var(--success-color);
+ }
+
+ &.quiz-stat-value-primary {
+ color: var(--primary-color);
+ }
+
+ &.quiz-stat-value-accent {
+ color: var(--accent-color);
+ }
+
+ &.quiz-stat-value-warn {
+ color: var(--warn-color);
+ }
+ }
+ }
+
+ .quiz-action-btn {
+ margin-left: auto;
+ color: var(--primary-color);
+ }
+ }
+ }
+ }
+}
+
+// ===========================
+// Activity Timeline Card
+// ===========================
+.activity-timeline-card {
+ mat-card-header {
+ mat-card-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 20px;
+ font-weight: 600;
+
+ mat-icon {
+ color: var(--primary-color);
+ }
+ }
+ }
+
+ .activity-list {
+ padding: 0;
+
+ .activity-item {
+ padding: 16px 0;
+
+ .activity-description {
+ font-weight: 500;
+ color: var(--text-primary);
+ }
+
+ .activity-time {
+ font-size: 14px;
+ color: var(--text-secondary);
+ margin-top: 4px;
+ }
+
+ .activity-metadata {
+ display: flex;
+ gap: 16px;
+ margin-top: 8px;
+
+ .metadata-item {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 12px;
+ color: var(--text-secondary);
+
+ mat-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
+
+ mat-icon[matListItemIcon] {
+ &.activity-icon-primary {
+ color: var(--primary-color);
+ }
+
+ &.activity-icon-success {
+ color: var(--success-color);
+ }
+
+ &.activity-icon-accent {
+ color: var(--accent-color);
+ }
+
+ &.activity-icon-warn {
+ color: var(--warn-color);
+ }
+
+ &.activity-icon-default {
+ color: var(--text-secondary);
+ }
+ }
+ }
+ }
+}
+
+// ===========================
+// Empty State
+// ===========================
+.empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 48px 24px;
+ text-align: center;
+
+ mat-icon {
+ font-size: 64px;
+ width: 64px;
+ height: 64px;
+ color: var(--text-disabled);
+ margin-bottom: 16px;
+ }
+
+ p {
+ margin: 0;
+ color: var(--text-secondary);
+ font-size: 16px;
+ }
+}
+
+// ===========================
+// Responsive Design
+// ===========================
+
+// Tablet (768px - 1023px)
+@media (max-width: 1023px) {
+ .stats-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .profile-card .profile-header {
+ .user-avatar mat-icon {
+ font-size: 64px;
+ width: 64px;
+ height: 64px;
+ }
+
+ .user-info .user-name {
+ font-size: 24px;
+ }
+ }
+}
+
+// Mobile (< 768px)
+@media (max-width: 767px) {
+ .admin-user-detail-container {
+ padding: 16px;
+ }
+
+ .page-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+
+ .header-actions {
+ width: 100%;
+ justify-content: flex-end;
+ }
+ }
+
+ .breadcrumb {
+ flex-wrap: wrap;
+ font-size: 12px;
+ }
+
+ .profile-card {
+ .profile-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 16px;
+
+ .user-avatar mat-icon {
+ font-size: 56px;
+ width: 56px;
+ height: 56px;
+ }
+
+ .user-info {
+ width: 100%;
+
+ .user-name {
+ font-size: 20px;
+ }
+
+ .user-email {
+ font-size: 14px;
+ }
+ }
+ }
+
+ .profile-actions {
+ flex-direction: column;
+
+ button {
+ width: 100%;
+ }
+ }
+ }
+
+ .stats-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .stat-card mat-card-content {
+ padding: 16px;
+
+ .stat-icon {
+ width: 48px;
+ height: 48px;
+
+ mat-icon {
+ font-size: 28px;
+ width: 28px;
+ height: 28px;
+ }
+ }
+
+ .stat-info {
+ .stat-value {
+ font-size: 24px;
+ }
+
+ .stat-label {
+ font-size: 13px;
+ }
+ }
+ }
+
+ .quiz-history-item {
+ .quiz-history-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ }
+
+ .quiz-history-stats {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+
+ .quiz-action-btn {
+ margin-left: 0;
+ }
+ }
+ }
+}
+
+// ===========================
+// Dark Mode Support
+// ===========================
+@media (prefers-color-scheme: dark) {
+ .admin-user-detail-container {
+ --text-primary: #e0e0e0;
+ --text-secondary: #a0a0a0;
+ --text-disabled: #606060;
+ --bg-primary: #1e1e1e;
+ --bg-secondary: #2a2a2a;
+ --divider-color: #404040;
+ }
+
+ .quiz-history-item:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ }
+}
diff --git a/frontend/src/app/features/admin/admin-user-detail/admin-user-detail.component.ts b/frontend/src/app/features/admin/admin-user-detail/admin-user-detail.component.ts
new file mode 100644
index 0000000..f1f861f
--- /dev/null
+++ b/frontend/src/app/features/admin/admin-user-detail/admin-user-detail.component.ts
@@ -0,0 +1,362 @@
+import { Component, OnInit, inject, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AdminService } from '../../../core/services/admin.service';
+import { AdminUserDetail } from '../../../core/models/admin.model';
+import { RoleUpdateDialogComponent } from '../role-update-dialog/role-update-dialog.component';
+import { StatusUpdateDialogComponent } from '../status-update-dialog/status-update-dialog.component';
+
+/**
+ * AdminUserDetailComponent
+ *
+ * Displays comprehensive user profile for admin management:
+ * - User information (username, email, role, status)
+ * - Statistics (quizzes, scores, accuracy, streaks)
+ * - Quiz history with detailed breakdown
+ * - Activity timeline showing all user actions
+ * - Action buttons (Edit Role, Deactivate/Activate)
+ * - Breadcrumb navigation
+ *
+ * Features:
+ * - Signal-based reactive state
+ * - Real-time loading states
+ * - Error handling with user feedback
+ * - Responsive design (desktop + mobile)
+ * - Formatted dates and numbers
+ * - Color-coded status indicators
+ */
+@Component({
+ selector: 'app-admin-user-detail',
+ standalone: true,
+ imports: [
+ CommonModule,
+ RouterModule,
+ MatCardModule,
+ MatButtonModule,
+ MatIconModule,
+ MatChipsModule,
+ MatProgressSpinnerModule,
+ MatDividerModule,
+ MatListModule,
+ MatTooltipModule,
+ MatMenuModule,
+ MatDialogModule
+ ],
+ templateUrl: './admin-user-detail.component.html',
+ styleUrl: './admin-user-detail.component.scss'
+})
+export class AdminUserDetailComponent implements OnInit {
+ private readonly adminService = inject(AdminService);
+ private readonly router = inject(Router);
+ private readonly route = inject(ActivatedRoute);
+ private readonly dialog = inject(MatDialog);
+
+ // Expose Math for template
+ Math = Math;
+
+ // State from service
+ readonly user = this.adminService.selectedUserDetail;
+ readonly isLoading = this.adminService.isLoadingUserDetail;
+ readonly error = this.adminService.userDetailError;
+
+ // Component state
+ readonly userId = signal
+
+
+
+
+
+
+ @if (isLoading()) {
+
+
+
+ User Details
+
+
+
+
+
+ }
+
+
+ @if (error() && !isLoading()) {
+ Loading user details...
+
+ error
+
+ Error Loading User
+{{ error() }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ analytics
+ Additional Statistics
+
+
+
+
+
+
+
+
+
+
+ history
+ Quiz History
+
+
+
+ @if (hasQuizHistory()) {
+
+
+
+
+
+
+
+ timeline
+ Activity Timeline
+
+
+
+ @if (hasActivity()) {
+
+ @for (activity of user()!.activityTimeline; track activity.id) {
+
+
+ {{ getActivityIcon(activity.type) }}
+
+
+
+ } @else {
+
+
+
+ }
+
+
+
+ account_circle
+
+
+
+
+
+ event
+
+
+ Member Since
+ {{ memberSince() }}
+
+
+ schedule
+
+ @if (user()!.metadata?.registrationMethod) {
+
+ Last Active
+ {{ lastActive() }}
+
+
+ how_to_reg
+
+ }
+
+ Registration Method
+ {{ user()!.metadata!.registrationMethod === 'guest_conversion' ? 'Guest Conversion' : 'Direct' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ formatNumber(user()!.statistics.totalQuizzes) }}
+Total Quizzes
+
+
+ {{ user()!.statistics.averageScore.toFixed(1) }}%
+Average Score
+
+
+ {{ user()!.statistics.accuracy.toFixed(1) }}%
+Accuracy
+
+
+ {{ user()!.statistics.currentStreak }}
+Current Streak
+
+
+ {{ formatNumber(user()!.statistics.totalQuestionsAnswered) }}
+Questions Answered
+
+
+ {{ formatDuration(user()!.statistics.totalTimeSpent) }}
+Time Spent
+
+
+
+ Correct Answers:
+ {{ formatNumber(user()!.statistics.correctAnswers) }}
+
+
+ Longest Streak:
+ {{ user()!.statistics.longestStreak }} days
+
+ @if (user()!.statistics.favoriteCategory) {
+
+ Favorite Category:
+
+ {{ user()!.statistics.favoriteCategory!.name }}
+ ({{ user()!.statistics.favoriteCategory!.quizCount }} quizzes)
+
+
+ }
+
+ Quizzes This Week:
+ {{ user()!.statistics.recentActivity.quizzesThisWeek }}
+
+
+ Quizzes This Month:
+ {{ user()!.statistics.recentActivity.quizzesThisMonth }}
+
+
+ @for (quiz of user()!.quizHistory; track quiz.id) {
+
+ } @else {
+
+
+ }
+
+
+
+ category
+ {{ quiz.categoryName }}
+
+ {{ formatDateTime(quiz.completedAt) }}
+
+
+
+ grade
+ Score:
+
+ {{ quiz.score }}/{{ quiz.totalQuestions }} ({{ quiz.percentage.toFixed(1) }}%)
+
+
+
+ timer
+ Time:
+ {{ formatDuration(quiz.timeTaken) }}
+
+
+
+ quiz
+
+ }
+ No quiz history available
+{{ activity.description }}
+ {{ formatRelativeTime(activity.timestamp) }}
+ @if (activity.metadata) {
+
+ }
+
+ timeline
+
+ }
+ No activity recorded
+
+
+
+
+
+
+
+
+
+ @if (isLoading() && users().length === 0) {
+
+
+
+
+ }
+
+
+ @if (users().length > 0) {
+
+
+
+
+
+
+ }
+ }
+
+
+ @if (!isLoading() && !error() && users().length === 0) {
+
+
+ people_outline
+
+
+ }
+
diff --git a/frontend/src/app/features/admin/admin-users/admin-users.component.scss b/frontend/src/app/features/admin/admin-users/admin-users.component.scss
new file mode 100644
index 0000000..7013de4
--- /dev/null
+++ b/frontend/src/app/features/admin/admin-users/admin-users.component.scss
@@ -0,0 +1,466 @@
+.admin-users-container {
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+// Header Section
+.users-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 2rem;
+ gap: 1rem;
+ flex-wrap: wrap;
+
+ .header-left {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ flex: 1;
+
+ .header-title {
+ h1 {
+ margin: 0;
+ font-size: 2rem;
+ font-weight: 600;
+ color: #333;
+ }
+
+ .subtitle {
+ margin: 0.25rem 0 0 0;
+ color: #666;
+ font-size: 0.95rem;
+ }
+ }
+ }
+
+ .header-actions {
+ display: flex;
+ gap: 0.75rem;
+
+ button mat-icon {
+ margin-right: 0.5rem;
+ }
+ }
+}
+
+// Filters Card
+.filters-card {
+ margin-bottom: 2rem;
+
+ .filters-form {
+ display: grid;
+ grid-template-columns: 2fr repeat(4, 1fr) auto;
+ gap: 1rem;
+ align-items: start;
+
+ .search-field {
+ grid-column: 1;
+ }
+
+ mat-form-field {
+ width: 100%;
+
+ mat-icon[matPrefix] {
+ margin-right: 0.5rem;
+ color: #666;
+ }
+ }
+
+ button {
+ margin-top: 0.5rem;
+ }
+ }
+}
+
+// Loading State
+.loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ gap: 1.5rem;
+
+ p {
+ color: #666;
+ font-size: 1rem;
+ }
+}
+
+// Error State
+.error-card {
+ margin-bottom: 2rem;
+
+ .error-content {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+
+ mat-icon {
+ font-size: 3rem;
+ width: 3rem;
+ height: 3rem;
+ }
+
+ .error-text {
+ flex: 1;
+
+ h3 {
+ margin: 0 0 0.5rem 0;
+ color: #d32f2f;
+ font-size: 1.25rem;
+ }
+
+ p {
+ margin: 0;
+ color: #666;
+ }
+ }
+ }
+}
+
+// Table Card
+.table-card {
+ margin-bottom: 2rem;
+
+ .table-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 1.5rem;
+ border-bottom: 1px solid #e0e0e0;
+
+ h2 {
+ margin: 0;
+ font-size: 1.5rem;
+ font-weight: 600;
+ }
+
+ .total-count {
+ color: #666;
+ font-size: 0.9rem;
+ }
+ }
+
+ .table-container {
+ overflow-x: auto;
+ }
+
+ .users-table {
+ width: 100%;
+
+ th {
+ font-weight: 600;
+ color: #333;
+ background: #f5f5f5;
+ }
+
+ td, th {
+ padding: 1rem;
+ }
+
+ .username-cell {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ .user-icon {
+ color: #666;
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ }
+ }
+
+ mat-chip {
+ font-size: 0.75rem;
+ min-height: 24px;
+ padding: 0 0.5rem;
+ }
+
+ tr:hover {
+ background: #f9f9f9;
+ }
+ }
+}
+
+// Mobile Cards
+.mobile-cards {
+ display: none;
+ flex-direction: column;
+ gap: 1rem;
+ margin-bottom: 2rem;
+
+ .user-card {
+ mat-card-header {
+ margin-bottom: 1rem;
+
+ .card-avatar {
+ font-size: 40px;
+ width: 40px;
+ height: 40px;
+ color: #666;
+ }
+ }
+
+ .card-info {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+
+ .info-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .label {
+ font-weight: 500;
+ color: #666;
+ }
+ }
+ }
+
+ mat-card-actions {
+ display: flex;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem;
+ border-top: 1px solid #e0e0e0;
+
+ button {
+ flex: 1;
+
+ mat-icon {
+ margin-right: 0.25rem;
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ }
+ }
+ }
+ }
+}
+
+// Pagination
+.pagination-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.5rem;
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+ .pagination-info {
+ color: #666;
+ font-size: 0.9rem;
+ }
+
+ .pagination-controls {
+ display: flex;
+ gap: 0.25rem;
+ align-items: center;
+
+ button {
+ &.active {
+ background: #3f51b5;
+ color: white;
+ }
+ }
+ }
+}
+
+// Empty State
+.empty-card {
+ text-align: center;
+ padding: 4rem 2rem;
+
+ mat-card-content {
+ mat-icon {
+ font-size: 80px;
+ width: 80px;
+ height: 80px;
+ color: #999;
+ margin-bottom: 1rem;
+ }
+
+ h3 {
+ margin: 0 0 0.5rem 0;
+ color: #333;
+ font-size: 1.5rem;
+ }
+
+ p {
+ margin: 0 0 1.5rem 0;
+ color: #666;
+ }
+ }
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+ .admin-users-container {
+ padding: 1rem;
+ }
+
+ .users-header {
+ flex-direction: column;
+ align-items: stretch;
+
+ .header-left {
+ flex-direction: column;
+ align-items: flex-start;
+
+ .header-title h1 {
+ font-size: 1.5rem;
+ }
+ }
+
+ .header-actions {
+ width: 100%;
+
+ button {
+ flex: 1;
+ }
+ }
+ }
+
+ .filters-card .filters-form {
+ grid-template-columns: 1fr;
+
+ .search-field {
+ grid-column: 1;
+ }
+
+ button {
+ width: 100%;
+ }
+ }
+
+ .desktop-table {
+ display: none;
+ }
+
+ .mobile-cards {
+ display: flex;
+ }
+
+ .pagination-container {
+ flex-direction: column;
+ gap: 1rem;
+
+ .pagination-info {
+ text-align: center;
+ }
+
+ .pagination-controls {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ }
+}
+
+@media (max-width: 1024px) and (min-width: 769px) {
+ .filters-card .filters-form {
+ grid-template-columns: 1fr 1fr;
+
+ .search-field {
+ grid-column: 1 / -1;
+ }
+
+ button {
+ grid-column: 1 / -1;
+ }
+ }
+
+ .users-table {
+ font-size: 0.9rem;
+
+ td, th {
+ padding: 0.75rem;
+ }
+ }
+}
+
+@media (max-width: 1200px) {
+ .users-table {
+ th:nth-child(6), // Last Login
+ td:nth-child(6) {
+ display: none;
+ }
+ }
+}
+
+// Dark Mode Support
+@media (prefers-color-scheme: dark) {
+ .users-header .header-title h1 {
+ color: #fff;
+ }
+
+ .users-header .subtitle {
+ color: #aaa;
+ }
+
+ .loading-container p {
+ color: #aaa;
+ }
+
+ .error-card .error-content .error-text p {
+ color: #aaa;
+ }
+
+ .table-card {
+ .table-header {
+ border-bottom-color: #444;
+
+ h2 {
+ color: #fff;
+ }
+
+ .total-count {
+ color: #aaa;
+ }
+ }
+
+ .users-table {
+ th {
+ background: #2a2a2a;
+ color: #fff;
+ }
+
+ tr:hover {
+ background: #2a2a2a;
+ }
+ }
+ }
+
+ .mobile-cards .user-card {
+ mat-card-actions {
+ border-top-color: #444;
+ }
+ }
+
+ .pagination-container {
+ background: #1a1a1a;
+
+ .pagination-info {
+ color: #aaa;
+ }
+ }
+
+ .empty-card mat-card-content {
+ mat-icon {
+ color: #666;
+ }
+
+ h3 {
+ color: #fff;
+ }
+
+ p {
+ color: #aaa;
+ }
+ }
+}
diff --git a/frontend/src/app/features/admin/admin-users/admin-users.component.ts b/frontend/src/app/features/admin/admin-users/admin-users.component.ts
new file mode 100644
index 0000000..e5fd93f
--- /dev/null
+++ b/frontend/src/app/features/admin/admin-users/admin-users.component.ts
@@ -0,0 +1,400 @@
+import { Component, OnInit, inject, DestroyRef, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableModule } from '@angular/material/table';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { AdminService } from '../../../core/services/admin.service';
+import { AdminUser, UserListParams } from '../../../core/models/admin.model';
+import { RoleUpdateDialogComponent } from '../role-update-dialog/role-update-dialog.component';
+import { StatusUpdateDialogComponent } from '../status-update-dialog/status-update-dialog.component';
+import { PaginationService, PaginationState } from '../../../core/services/pagination.service';
+import { PaginationComponent } from '../../../shared/components/pagination/pagination.component';
+
+/**
+ * AdminUsersComponent
+ *
+ * Displays and manages all users with pagination, filtering, and sorting.
+ *
+ * Features:
+ * - User table with key columns
+ * - Search by username/email
+ * - Filter by role and status
+ * - Sort by username, email, or date
+ * - Pagination controls
+ * - Action buttons for each user
+ * - Responsive design (cards on mobile)
+ * - Loading and error states
+ */
+@Component({
+ selector: 'app-admin-users',
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ MatCardModule,
+ MatButtonModule,
+ MatIconModule,
+ MatTableModule,
+ MatInputModule,
+ MatFormFieldModule,
+ MatSelectModule,
+ MatProgressSpinnerModule,
+ MatTooltipModule,
+ MatChipsModule,
+ MatMenuModule,
+ MatDialogModule,
+ PaginationComponent
+ ],
+ templateUrl: './admin-users.component.html',
+ styleUrl: './admin-users.component.scss'
+})
+export class AdminUsersComponent implements OnInit {
+ private readonly adminService = inject(AdminService);
+ private readonly router = inject(Router);
+ private readonly route = inject(ActivatedRoute);
+ private readonly fb = inject(FormBuilder);
+ private readonly destroyRef = inject(DestroyRef);
+ private readonly dialog = inject(MatDialog);
+ private readonly paginationService = inject(PaginationService);
+
+ // Service signals
+ readonly users = this.adminService.adminUsersState;
+ readonly isLoading = this.adminService.isLoadingUsers;
+ readonly error = this.adminService.usersError;
+ readonly pagination = this.adminService.usersPagination;
+
+ // Computed pagination state for reusable component
+ readonly paginationState = computed
+
+
+
+
+
+
+
+
+ User Management
+Manage all users and their permissions
+
+
+
+
+
+ }
+
+
+ @if (error() && !isLoading() && users().length === 0) {
+ Loading users...
+
+ error_outline
+
+
+
+
+ Failed to Load Users
+{{ error() }}
+
+
+ Users
+ @if (pagination()) { + + Total: {{ pagination()?.totalUsers }} user{{ pagination()?.totalUsers !== 1 ? 's' : '' }} + + } +
+
+
+
+
+ | Username | +
+
+
+ |
+ {{ user.email }} | +Role | +
+ |
+ Status | +
+ |
+ Joined | +{{ formatDate(user.createdAt) }} | +Last Login | +{{ formatDateTime(user.lastLoginAt) }} | +Actions | +
+
+ |
+
|---|
+ @for (user of users(); track user.id) {
+
+
+ account_circle
+ {{ user.username }}
+ {{ user.email }}
+
+
+
+
+
+
+
+
+
+ }
+
+
+
+ @if (paginationState()) {
+
+
+
+ Role:
+
+ {{ user.role | uppercase }}
+
+
+
+ Status:
+
+ {{ getStatusText(user.isActive) }}
+
+
+
+ Joined:
+ {{ formatDate(user.createdAt) }}
+
+
+ Last Login:
+ {{ formatDateTime(user.lastLoginAt) }}
+
+ No Users Found
+No users match your current filters.
+ +
+
+
+
+ @if (data.itemName) {
+
+
+
+
+
+
+
+ `,
+ styles: [`
+ .delete-dialog {
+ min-width: 400px;
+
+ @media (max-width: 600px) {
+ min-width: unset;
+ }
+ }
+
+ .dialog-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1rem;
+
+ .warning-icon {
+ font-size: 2.5rem;
+ width: 2.5rem;
+ height: 2.5rem;
+ color: #f44336;
+ }
+
+ h2 {
+ margin: 0;
+ font-size: 1.5rem;
+ font-weight: 500;
+ }
+ }
+
+ mat-dialog-content {
+ padding: 0 1rem 1.5rem 1rem;
+
+ .dialog-message {
+ margin: 0 0 1rem 0;
+ line-height: 1.6;
+ color: var(--text-secondary);
+ }
+
+ .item-preview {
+ margin: 1rem 0;
+ padding: 1rem;
+ background-color: var(--background-light);
+ border-radius: 8px;
+ border-left: 4px solid var(--primary-color);
+
+ strong {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-size: 0.875rem;
+ color: var(--text-secondary);
+ }
+
+ p {
+ margin: 0;
+ font-size: 0.95rem;
+ color: var(--text-primary);
+ word-break: break-word;
+ }
+ }
+
+ .warning-box {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem 1rem;
+ background-color: #fff3e0;
+ border-radius: 6px;
+ border-left: 4px solid #ff9800;
+
+ mat-icon {
+ font-size: 1.25rem;
+ width: 1.25rem;
+ height: 1.25rem;
+ color: #f57c00;
+ }
+
+ span {
+ font-size: 0.875rem;
+ color: #e65100;
+ font-weight: 500;
+ }
+ }
+ }
+
+ mat-dialog-actions {
+ padding: 1rem;
+ gap: 0.75rem;
+
+ button {
+ min-width: 100px;
+
+ mat-icon {
+ margin-right: 0.5rem;
+ font-size: 1.25rem;
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ }
+ }
+
+ // Dark Mode Support
+ @media (prefers-color-scheme: dark) {
+ .delete-dialog {
+ --text-primary: #e0e0e0;
+ --text-secondary: #a0a0a0;
+ --background-light: rgba(255, 255, 255, 0.05);
+ }
+
+ mat-dialog-content {
+ .warning-box {
+ background-color: rgba(255, 152, 0, 0.15);
+ border-left-color: #ff9800;
+
+ mat-icon {
+ color: #ffb74d;
+ }
+
+ span {
+ color: #ffb74d;
+ }
+ }
+ }
+ }
+
+ // Light Mode Support
+ @media (prefers-color-scheme: light) {
+ .delete-dialog {
+ --text-primary: #212121;
+ --text-secondary: #757575;
+ --background-light: #f5f5f5;
+ }
+ }
+ `]
+})
+export class DeleteConfirmDialogComponent {
+ constructor(
+ public dialogRef: MatDialogRef
+ warning
+
+
+ {{ data.title }}
+
+ Item:
+
+ }
+
+ {{ data.itemName }}
+
+ info
+ This action cannot be undone.
+
+
+
+
+
+
+
+ }
+
+
+ @if (analytics() && !isLoading()) {
+
+
+
+
+ show_chart
+ Guest Session Timeline
+
+
+
+
+
+ }
+
+
+ @if (funnelData().length > 0) {
+
+
+
+ filter_alt
+ Conversion Funnel
+
+
+
+
+
+ }
+
+
+
+
+ people_outline
+
+
+ }
+
diff --git a/frontend/src/app/features/admin/guest-analytics/guest-analytics.component.scss b/frontend/src/app/features/admin/guest-analytics/guest-analytics.component.scss
new file mode 100644
index 0000000..398a5bc
--- /dev/null
+++ b/frontend/src/app/features/admin/guest-analytics/guest-analytics.component.scss
@@ -0,0 +1,474 @@
+.guest-analytics {
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 2rem;
+
+ // Header
+ .analytics-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 2rem;
+
+ .header-left {
+ display: flex;
+ align-items: flex-start;
+ gap: 1rem;
+
+ .header-content {
+ h1 {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 2rem;
+ font-weight: 600;
+ margin: 0 0 0.5rem 0;
+ color: #1a237e;
+
+ mat-icon {
+ font-size: 2.5rem;
+ width: 2.5rem;
+ height: 2.5rem;
+ color: #3f51b5;
+ }
+ }
+
+ .subtitle {
+ margin: 0;
+ color: #666;
+ font-size: 1rem;
+ }
+ }
+ }
+
+ .header-actions {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+
+ button mat-icon {
+ transition: transform 0.3s ease;
+ }
+
+ button:hover:not([disabled]) mat-icon {
+ &:first-child {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ }
+
+ // Loading State
+ .loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ gap: 1.5rem;
+
+ p {
+ font-size: 1.1rem;
+ color: #666;
+ }
+ }
+
+ // Error State
+ .error-card {
+ margin-bottom: 2rem;
+ border-left: 4px solid #f44336;
+
+ .error-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ gap: 1rem;
+
+ mat-icon {
+ font-size: 4rem;
+ width: 4rem;
+ height: 4rem;
+ }
+
+ h3 {
+ margin: 0;
+ font-size: 1.5rem;
+ color: #333;
+ }
+
+ p {
+ margin: 0;
+ color: #666;
+ }
+
+ button {
+ margin-top: 1rem;
+ }
+ }
+ }
+
+ // Statistics Grid
+ .stats-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 1.5rem;
+ margin-bottom: 2rem;
+
+ .stat-card {
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+ &:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+ }
+
+ mat-card-content {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+ padding: 1.5rem;
+
+ .stat-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 60px;
+ height: 60px;
+ border-radius: 12px;
+
+ mat-icon {
+ font-size: 2rem;
+ width: 2rem;
+ height: 2rem;
+ color: white;
+ }
+ }
+
+ .stat-info {
+ flex: 1;
+
+ h3 {
+ margin: 0 0 0.5rem 0;
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: #666;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ .stat-value {
+ margin: 0 0 0.25rem 0;
+ font-size: 2rem;
+ font-weight: 700;
+ color: #333;
+ }
+
+ .stat-detail {
+ margin: 0;
+ font-size: 0.85rem;
+ color: #4caf50;
+ font-weight: 500;
+ }
+ }
+ }
+
+ &.sessions-card .stat-icon {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ }
+
+ &.active-card .stat-icon {
+ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+ }
+
+ &.conversion-card .stat-icon {
+ background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+ }
+
+ &.quizzes-card .stat-icon {
+ background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+ }
+ }
+ }
+
+ // Chart Cards
+ .chart-card {
+ margin-bottom: 2rem;
+
+ mat-card-header {
+ padding: 1.5rem 1.5rem 0;
+
+ mat-card-title {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 1.3rem;
+ color: #333;
+
+ mat-icon {
+ color: #3f51b5;
+ }
+ }
+ }
+
+ mat-card-content {
+ padding: 1.5rem;
+
+ .chart-legend {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-bottom: 1rem;
+ padding: 1rem;
+ background: #f5f5f5;
+ border-radius: 8px;
+
+ .legend-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.9rem;
+ color: #666;
+
+ .legend-color {
+ width: 20px;
+ height: 3px;
+ border-radius: 2px;
+
+ &.active {
+ background: #3f51b5;
+ }
+
+ &.new {
+ background: #4caf50;
+ }
+
+ &.converted {
+ background: #ff9800;
+ }
+ }
+ }
+ }
+
+ .chart-container {
+ overflow-x: auto;
+
+ svg {
+ display: block;
+ margin: 0 auto;
+
+ &.timeline-chart path {
+ transition: stroke-dashoffset 1s ease;
+ stroke-dasharray: 2000;
+ stroke-dashoffset: 2000;
+ animation: drawLine 2s ease forwards;
+ }
+
+ &.funnel-chart rect {
+ transition: opacity 0.3s ease;
+
+ &:hover {
+ opacity: 1 !important;
+ }
+ }
+
+ text {
+ font-family: 'Roboto', sans-serif;
+ }
+ }
+ }
+
+ .funnel-insights {
+ margin-top: 1.5rem;
+ padding: 1rem;
+ background: #f5f5f5;
+ border-radius: 8px;
+
+ p {
+ margin: 0 0 0.5rem 0;
+ color: #333;
+ font-weight: 500;
+ }
+
+ ul {
+ margin: 0;
+ padding-left: 1.5rem;
+
+ li {
+ color: #666;
+ margin-bottom: 0.25rem;
+ }
+ }
+ }
+ }
+ }
+
+ @keyframes drawLine {
+ to {
+ stroke-dashoffset: 0;
+ }
+ }
+
+ // Quick Actions
+ .quick-actions {
+ margin-top: 3rem;
+
+ h2 {
+ font-size: 1.5rem;
+ margin-bottom: 1.5rem;
+ color: #333;
+ }
+
+ .actions-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+
+ button {
+ height: 60px;
+ font-size: 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ mat-icon {
+ font-size: 1.5rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+ }
+ }
+ }
+
+ // Empty State
+ .empty-state {
+ margin-top: 2rem;
+
+ mat-card-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ text-align: center;
+
+ mat-icon {
+ font-size: 5rem;
+ width: 5rem;
+ height: 5rem;
+ color: #bdbdbd;
+ margin-bottom: 1rem;
+ }
+
+ h3 {
+ margin: 0 0 0.5rem 0;
+ font-size: 1.5rem;
+ color: #333;
+ }
+
+ p {
+ margin: 0;
+ color: #666;
+ font-size: 1rem;
+ }
+ }
+ }
+
+ // Responsive Design
+ @media (max-width: 768px) {
+ padding: 1rem;
+
+ .analytics-header {
+ flex-direction: column;
+ gap: 1rem;
+
+ .header-left {
+ width: 100%;
+
+ .header-content h1 {
+ font-size: 1.5rem;
+
+ mat-icon {
+ font-size: 2rem;
+ width: 2rem;
+ height: 2rem;
+ }
+ }
+ }
+
+ .header-actions {
+ width: 100%;
+ justify-content: space-between;
+ }
+ }
+
+ .stats-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .chart-card mat-card-content {
+ .chart-legend {
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .chart-container svg {
+ width: 100%;
+ height: auto;
+ }
+ }
+
+ .quick-actions .actions-grid {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ @media (max-width: 1024px) {
+ .stats-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+}
+
+// Dark Mode Support
+@media (prefers-color-scheme: dark) {
+ .guest-analytics {
+ .analytics-header .header-left .header-content h1 {
+ color: #e3f2fd;
+ }
+
+ .chart-card mat-card-title,
+ .quick-actions h2 {
+ color: #e0e0e0;
+ }
+
+ .stats-grid .stat-card {
+ mat-card-content .stat-info {
+ h3 {
+ color: #bdbdbd;
+ }
+
+ .stat-value {
+ color: #e0e0e0;
+ }
+ }
+ }
+
+ .empty-state mat-card-content h3 {
+ color: #e0e0e0;
+ }
+
+ .chart-card mat-card-content {
+ .chart-legend,
+ .funnel-insights {
+ background: #424242;
+
+ .legend-item,
+ p, li {
+ color: #e0e0e0;
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/app/features/admin/guest-analytics/guest-analytics.component.ts b/frontend/src/app/features/admin/guest-analytics/guest-analytics.component.ts
new file mode 100644
index 0000000..e3fa282
--- /dev/null
+++ b/frontend/src/app/features/admin/guest-analytics/guest-analytics.component.ts
@@ -0,0 +1,260 @@
+import { Component, OnInit, OnDestroy, signal, computed, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router } from '@angular/router';
+import { Subject, takeUntil } from 'rxjs';
+import { AdminService } from '../../../core/services/admin.service';
+import { GuestAnalytics } from '../../../core/models/admin.model';
+
+/**
+ * GuestAnalyticsComponent
+ *
+ * Admin page for viewing guest user analytics featuring:
+ * - Guest session statistics (total, active, conversions)
+ * - Conversion rate and funnel visualization
+ * - Guest session timeline chart
+ * - Average quizzes per guest metric
+ * - CSV export functionality
+ *
+ * Features:
+ * - Real-time analytics with 10-min caching
+ * - Interactive SVG charts
+ * - Export data to CSV
+ * - Auto-refresh capability
+ * - Mobile-responsive layout
+ */
+@Component({
+ selector: 'app-guest-analytics',
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatCardModule,
+ MatButtonModule,
+ MatIconModule,
+ MatProgressSpinnerModule,
+ MatTooltipModule
+ ],
+ templateUrl: './guest-analytics.component.html',
+ styleUrls: ['./guest-analytics.component.scss']
+})
+export class GuestAnalyticsComponent implements OnInit, OnDestroy {
+ private readonly adminService = inject(AdminService);
+ private readonly router = inject(Router);
+ private readonly destroy$ = new Subject
+
+
+
+ @if (isLoading()) {
+
+
+
+
+
+
+
+
+ people_outline
+ Guest Analytics
+
+ Guest user behavior and conversion insights
+
+
+
+
+
+
+ }
+
+
+ @if (error() && !isLoading()) {
+ Loading guest analytics...
+
+ error_outline
+
+ Failed to Load Analytics
+{{ error() }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (timelineData().length > 0) {
+
+
+ Total Guest Sessions
+{{ formatNumber(totalSessions()) }}
+ @if (analytics() && analytics()!.stats.sessionsThisWeek) { ++{{ analytics()!.stats.sessionsThisWeek }} this week
+ } +
+
+ Active Sessions
+{{ formatNumber(activeSessions()) }}
+Currently active
+
+
+ Conversion Rate
+{{ formatPercentage(conversionRate()) }}
+ @if (analytics() && analytics()!.totalConversions) { +{{ analytics()!.totalConversions }} conversions
+ } +
+
+ Avg Quizzes per Guest
+{{ avgQuizzes().toFixed(1) }}
+Per guest session
+
+
+
+
+ Active Sessions
+
+
+
+ New Sessions
+
+
+
+ Converted Sessions
+
+
+
+
+
+
+
+
+
+ Conversion Insights:
+-
+ @for (stage of funnelData(); track stage.stage) {
+ @if (stage.dropoff !== undefined) {
+
- {{ formatPercentage(stage.dropoff) }} dropoff from {{ stage.stage }} + } + } +
+
+ }
+
+
+ @if (!analytics() && !isLoading() && !error()) {
+ Guest Management
+
+
+
+
+
+ No Analytics Available
+Guest analytics will appear here once guests start using the platform
+
+
+
+
+
+
+ }
+
+
+ @if (settings() || (!isLoading() && settingsForm)) {
+
+ }
+
diff --git a/frontend/src/app/features/admin/guest-settings-edit/guest-settings-edit.component.scss b/frontend/src/app/features/admin/guest-settings-edit/guest-settings-edit.component.scss
new file mode 100644
index 0000000..9b0c834
--- /dev/null
+++ b/frontend/src/app/features/admin/guest-settings-edit/guest-settings-edit.component.scss
@@ -0,0 +1,468 @@
+.guest-settings-edit-container {
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+// Header Section
+.settings-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 2rem;
+ gap: 1rem;
+
+ .header-left {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ flex: 1;
+
+ .header-title {
+ h1 {
+ margin: 0;
+ font-size: 2rem;
+ font-weight: 600;
+ color: #333;
+ }
+
+ .subtitle {
+ margin: 0.25rem 0 0 0;
+ color: #666;
+ font-size: 0.95rem;
+ }
+ }
+ }
+}
+
+// Loading State
+.loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ gap: 1.5rem;
+
+ p {
+ color: #666;
+ font-size: 1rem;
+ }
+}
+
+// Error State
+.error-card {
+ margin-bottom: 2rem;
+
+ .error-content {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+
+ mat-icon {
+ font-size: 3rem;
+ width: 3rem;
+ height: 3rem;
+ }
+
+ .error-text {
+ flex: 1;
+
+ h3 {
+ margin: 0 0 0.5rem 0;
+ color: #d32f2f;
+ font-size: 1.25rem;
+ }
+
+ p {
+ margin: 0;
+ color: #666;
+ }
+ }
+ }
+}
+
+// Settings Form
+.settings-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+// Form Section Card
+.form-section {
+ mat-card-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1rem;
+
+ .section-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+
+ mat-icon {
+ font-size: 28px;
+ width: 28px;
+ height: 28px;
+ }
+
+ &.access {
+ background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
+ }
+
+ &.limits {
+ background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+ }
+
+ &.session {
+ background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
+ }
+
+ &.message {
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+ }
+
+ &.changes {
+ background: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%);
+ }
+ }
+
+ mat-card-title {
+ margin: 0;
+ font-size: 1.25rem;
+ font-weight: 600;
+ }
+
+ mat-card-subtitle {
+ margin: 0.25rem 0 0 0;
+ font-size: 0.85rem;
+ }
+ }
+
+ mat-card-content {
+ padding-top: 1rem;
+ }
+}
+
+// Toggle Field
+.toggle-field {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ border-radius: 8px;
+ background: #f5f5f5;
+ margin-bottom: 1rem;
+
+ .toggle-info {
+ flex: 1;
+
+ label {
+ display: block;
+ font-weight: 500;
+ color: #333;
+ margin-bottom: 0.25rem;
+ }
+
+ .field-description {
+ margin: 0;
+ font-size: 0.85rem;
+ color: #666;
+ }
+ }
+}
+
+// Warning Banner
+.warning-banner {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem 1rem;
+ background: #fff3cd;
+ border-left: 4px solid #ffc107;
+ border-radius: 4px;
+
+ mat-icon {
+ color: #ff9800;
+ }
+
+ span {
+ color: #856404;
+ font-size: 0.9rem;
+ }
+}
+
+// Form Fields
+.form-row {
+ margin-bottom: 1rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.full-width {
+ width: 100%;
+}
+
+mat-form-field {
+ mat-icon[matPrefix] {
+ margin-right: 0.5rem;
+ color: #666;
+ }
+}
+
+// Message Preview
+.message-preview {
+ margin-top: 1rem;
+ padding: 1rem;
+ background: #f5f5f5;
+ border-radius: 8px;
+ border-left: 4px solid #3f51b5;
+
+ .preview-label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin-bottom: 0.75rem;
+ font-weight: 500;
+ color: #3f51b5;
+
+ mat-icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ .preview-content {
+ padding: 0.75rem;
+ background: white;
+ border-radius: 4px;
+ color: #333;
+ font-style: italic;
+ line-height: 1.6;
+ }
+}
+
+// Changes Preview
+.changes-preview {
+ border: 2px solid #ffa726;
+
+ .changes-list {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .change-item {
+ padding: 1rem;
+ background: #fff3e0;
+ border-radius: 8px;
+
+ .change-label {
+ font-weight: 500;
+ color: #e65100;
+ margin-bottom: 0.5rem;
+ font-size: 0.9rem;
+ }
+
+ .change-values {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+
+ .old-value {
+ padding: 0.25rem 0.75rem;
+ background: white;
+ border-radius: 4px;
+ color: #999;
+ text-decoration: line-through;
+ font-size: 0.9rem;
+ }
+
+ mat-icon {
+ color: #ff9800;
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+
+ .new-value {
+ padding: 0.25rem 0.75rem;
+ background: white;
+ border-radius: 4px;
+ color: #4caf50;
+ font-weight: 600;
+ font-size: 0.9rem;
+ }
+ }
+ }
+ }
+}
+
+// Form Actions
+.form-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.5rem 0;
+ border-top: 1px solid #e0e0e0;
+ gap: 1rem;
+
+ .actions-left,
+ .actions-right {
+ display: flex;
+ gap: 0.75rem;
+ }
+
+ button {
+ mat-icon {
+ margin-right: 0.5rem;
+ }
+
+ mat-spinner {
+ display: inline-block;
+ margin-right: 0.5rem;
+ }
+ }
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+ .guest-settings-edit-container {
+ padding: 1rem;
+ }
+
+ .settings-header {
+ .header-left {
+ flex-direction: column;
+ align-items: flex-start;
+
+ .header-title h1 {
+ font-size: 1.5rem;
+ }
+ }
+ }
+
+ .toggle-field {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 1rem;
+ }
+
+ .form-actions {
+ flex-direction: column;
+ align-items: stretch;
+
+ .actions-left,
+ .actions-right {
+ width: 100%;
+ justify-content: stretch;
+
+ button {
+ flex: 1;
+ }
+ }
+ }
+
+ .changes-preview {
+ .change-item .change-values {
+ flex-direction: column;
+ align-items: flex-start;
+
+ mat-icon {
+ transform: rotate(90deg);
+ }
+ }
+ }
+}
+
+@media (max-width: 1024px) {
+ .form-section {
+ mat-card-header {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ }
+}
+
+// Dark Mode Support
+@media (prefers-color-scheme: dark) {
+ .settings-header .header-title h1 {
+ color: #fff;
+ }
+
+ .settings-header .subtitle {
+ color: #aaa;
+ }
+
+ .loading-container p {
+ color: #aaa;
+ }
+
+ .error-card .error-content .error-text p {
+ color: #aaa;
+ }
+
+ .toggle-field {
+ background: #2a2a2a;
+
+ label {
+ color: #fff;
+ }
+
+ .field-description {
+ color: #aaa;
+ }
+ }
+
+ .warning-banner {
+ background: #4a3f2a;
+
+ span {
+ color: #ffd54f;
+ }
+ }
+
+ mat-form-field mat-icon[matPrefix] {
+ color: #aaa;
+ }
+
+ .message-preview {
+ background: #2a2a2a;
+
+ .preview-content {
+ background: #1a1a1a;
+ color: #fff;
+ }
+ }
+
+ .changes-preview {
+ .changes-list .change-item {
+ background: #3a3a2a;
+
+ .change-label {
+ color: #ffb74d;
+ }
+
+ .change-values {
+ .old-value,
+ .new-value {
+ background: #1a1a1a;
+ }
+ }
+ }
+ }
+
+ .form-actions {
+ border-top-color: #444;
+ }
+}
diff --git a/frontend/src/app/features/admin/guest-settings-edit/guest-settings-edit.component.ts b/frontend/src/app/features/admin/guest-settings-edit/guest-settings-edit.component.ts
new file mode 100644
index 0000000..206c387
--- /dev/null
+++ b/frontend/src/app/features/admin/guest-settings-edit/guest-settings-edit.component.ts
@@ -0,0 +1,276 @@
+import { Component, OnInit, inject, DestroyRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDividerModule } from '@angular/material/divider';
+import { AdminService } from '../../../core/services/admin.service';
+import { GuestSettings } from '../../../core/models/admin.model';
+
+/**
+ * GuestSettingsEditComponent
+ *
+ * Form component for editing guest access settings.
+ * Allows administrators to configure guest user limitations and features.
+ *
+ * Features:
+ * - Reactive form with validation
+ * - Real-time validation errors
+ * - Settings preview before save
+ * - Form reset functionality
+ * - Success/error handling
+ * - Navigation back to view mode
+ */
+@Component({
+ selector: 'app-guest-settings-edit',
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ MatCardModule,
+ MatButtonModule,
+ MatIconModule,
+ MatInputModule,
+ MatFormFieldModule,
+ MatSlideToggleModule,
+ MatProgressSpinnerModule,
+ MatTooltipModule,
+ MatDividerModule
+ ],
+ templateUrl: './guest-settings-edit.component.html',
+ styleUrl: './guest-settings-edit.component.scss'
+})
+export class GuestSettingsEditComponent implements OnInit {
+ private readonly adminService = inject(AdminService);
+ private readonly router = inject(Router);
+ private readonly fb = inject(FormBuilder);
+ private readonly destroyRef = inject(DestroyRef);
+
+ // Service signals
+ readonly settings = this.adminService.guestSettingsState;
+ readonly isLoading = this.adminService.isLoadingSettings;
+ readonly error = this.adminService.settingsError;
+
+ // Form
+ settingsForm!: FormGroup;
+ isSubmitting = false;
+ originalSettings: GuestSettings | null = null;
+
+ ngOnInit(): void {
+ this.initializeForm();
+ this.loadSettings();
+ }
+
+ /**
+ * Initialize the form with validation
+ */
+ private initializeForm(): void {
+ this.settingsForm = this.fb.group({
+ guestAccessEnabled: [false],
+ maxQuizzesPerDay: [3, [Validators.required, Validators.min(1), Validators.max(100)]],
+ maxQuestionsPerQuiz: [10, [Validators.required, Validators.min(1), Validators.max(50)]],
+ sessionExpiryHours: [24, [Validators.required, Validators.min(1), Validators.max(168)]],
+ upgradePromptMessage: [
+ 'You\'ve reached your quiz limit. Sign up for unlimited access!',
+ [Validators.required, Validators.minLength(10), Validators.maxLength(500)]
+ ]
+ });
+ }
+
+ /**
+ * Load existing settings and populate form
+ */
+ private loadSettings(): void {
+ // If settings already loaded, use them
+ if (this.settings()) {
+ this.populateForm(this.settings()!);
+ return;
+ }
+
+ // Otherwise fetch settings
+ this.adminService.getGuestSettings()
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(settings => {
+ this.populateForm(settings);
+ });
+ }
+
+ /**
+ * Populate form with existing settings
+ */
+ private populateForm(settings: GuestSettings): void {
+ this.originalSettings = settings;
+ this.settingsForm.patchValue({
+ guestAccessEnabled: settings.guestAccessEnabled,
+ maxQuizzesPerDay: settings.maxQuizzesPerDay,
+ maxQuestionsPerQuiz: settings.maxQuestionsPerQuiz,
+ sessionExpiryHours: settings.sessionExpiryHours,
+ upgradePromptMessage: settings.upgradePromptMessage
+ });
+ }
+
+ /**
+ * Submit form and update settings
+ */
+ onSubmit(): void {
+ if (this.settingsForm.invalid || this.isSubmitting) {
+ this.settingsForm.markAllAsTouched();
+ return;
+ }
+
+ this.isSubmitting = true;
+ const formData = this.settingsForm.value;
+
+ this.adminService.updateGuestSettings(formData)
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe({
+ next: () => {
+ this.isSubmitting = false;
+ // Navigate back to view page after short delay
+ setTimeout(() => {
+ this.router.navigate(['/admin/guest-settings']);
+ }, 1500);
+ },
+ error: () => {
+ this.isSubmitting = false;
+ }
+ });
+ }
+
+ /**
+ * Cancel editing and return to view page
+ */
+ onCancel(): void {
+ if (this.hasUnsavedChanges()) {
+ if (confirm('You have unsaved changes. Are you sure you want to cancel?')) {
+ this.router.navigate(['/admin/guest-settings']);
+ }
+ } else {
+ this.router.navigate(['/admin/guest-settings']);
+ }
+ }
+
+ /**
+ * Reset form to original values
+ */
+ onReset(): void {
+ if (this.originalSettings) {
+ this.populateForm(this.originalSettings);
+ }
+ }
+
+ /**
+ * Check if form has unsaved changes
+ */
+ hasUnsavedChanges(): boolean {
+ if (!this.originalSettings) return false;
+
+ const formValue = this.settingsForm.value;
+ return (
+ formValue.guestAccessEnabled !== this.originalSettings.guestAccessEnabled ||
+ formValue.maxQuizzesPerDay !== this.originalSettings.maxQuizzesPerDay ||
+ formValue.maxQuestionsPerQuiz !== this.originalSettings.maxQuestionsPerQuiz ||
+ formValue.sessionExpiryHours !== this.originalSettings.sessionExpiryHours ||
+ formValue.upgradePromptMessage !== this.originalSettings.upgradePromptMessage
+ );
+ }
+
+ /**
+ * Get error message for a form field
+ */
+ getErrorMessage(fieldName: string): string {
+ const field = this.settingsForm.get(fieldName);
+ if (!field?.errors || !field.touched) return '';
+
+ if (field.errors['required']) return 'This field is required';
+ if (field.errors['min']) return `Minimum value is ${field.errors['min'].min}`;
+ if (field.errors['max']) return `Maximum value is ${field.errors['max'].max}`;
+ if (field.errors['minlength']) return `Minimum length is ${field.errors['minlength'].requiredLength} characters`;
+ if (field.errors['maxlength']) return `Maximum length is ${field.errors['maxlength'].requiredLength} characters`;
+
+ return 'Invalid value';
+ }
+
+ /**
+ * Check if a field has an error
+ */
+ hasError(fieldName: string): boolean {
+ const field = this.settingsForm.get(fieldName);
+ return !!(field?.invalid && field?.touched);
+ }
+
+ /**
+ * Get preview of changes
+ */
+ getChangesPreview(): Array<{label: string, old: any, new: any}> {
+ if (!this.originalSettings || !this.hasUnsavedChanges()) return [];
+
+ const changes: Array<{label: string, old: any, new: any}> = [];
+ const formValue = this.settingsForm.value;
+
+ if (formValue.guestAccessEnabled !== this.originalSettings.guestAccessEnabled) {
+ changes.push({
+ label: 'Guest Access',
+ old: this.originalSettings.guestAccessEnabled ? 'Enabled' : 'Disabled',
+ new: formValue.guestAccessEnabled ? 'Enabled' : 'Disabled'
+ });
+ }
+
+ if (formValue.maxQuizzesPerDay !== this.originalSettings.maxQuizzesPerDay) {
+ changes.push({
+ label: 'Max Quizzes Per Day',
+ old: this.originalSettings.maxQuizzesPerDay,
+ new: formValue.maxQuizzesPerDay
+ });
+ }
+
+ if (formValue.maxQuestionsPerQuiz !== this.originalSettings.maxQuestionsPerQuiz) {
+ changes.push({
+ label: 'Max Questions Per Quiz',
+ old: this.originalSettings.maxQuestionsPerQuiz,
+ new: formValue.maxQuestionsPerQuiz
+ });
+ }
+
+ if (formValue.sessionExpiryHours !== this.originalSettings.sessionExpiryHours) {
+ changes.push({
+ label: 'Session Expiry Hours',
+ old: this.originalSettings.sessionExpiryHours,
+ new: formValue.sessionExpiryHours
+ });
+ }
+
+ if (formValue.upgradePromptMessage !== this.originalSettings.upgradePromptMessage) {
+ changes.push({
+ label: 'Upgrade Prompt Message',
+ old: this.originalSettings.upgradePromptMessage,
+ new: formValue.upgradePromptMessage
+ });
+ }
+
+ return changes;
+ }
+
+ /**
+ * Format expiry time for display
+ */
+ formatExpiryTime(hours: number): string {
+ if (hours < 24) {
+ return `${hours} hour${hours !== 1 ? 's' : ''}`;
+ }
+ const days = Math.floor(hours / 24);
+ const remainingHours = hours % 24;
+ if (remainingHours === 0) {
+ return `${days} day${days !== 1 ? 's' : ''}`;
+ }
+ return `${days} day${days !== 1 ? 's' : ''} and ${remainingHours} hour${remainingHours !== 1 ? 's' : ''}`;
+ }
+}
diff --git a/frontend/src/app/features/admin/guest-settings/guest-settings.component.html b/frontend/src/app/features/admin/guest-settings/guest-settings.component.html
new file mode 100644
index 0000000..02dd7ba
--- /dev/null
+++ b/frontend/src/app/features/admin/guest-settings/guest-settings.component.html
@@ -0,0 +1,230 @@
+
+
+
+
+ @if (isLoading() && !settings()) {
+
+
+
+
+
+ Edit Guest Settings
+Configure guest user access and limitations
+
+
+ }
+
+
+ @if (error() && !isLoading() && !settings()) {
+ Loading settings...
+
+ error_outline
+
+
+
+
+ Failed to Load Settings
+{{ error() }}
+
+
+
+
+
+
+ }
+
+
+ @if (settings() && !isLoading()) {
+
diff --git a/frontend/src/app/features/admin/guest-settings/guest-settings.component.scss b/frontend/src/app/features/admin/guest-settings/guest-settings.component.scss
new file mode 100644
index 0000000..100b98b
--- /dev/null
+++ b/frontend/src/app/features/admin/guest-settings/guest-settings.component.scss
@@ -0,0 +1,449 @@
+.guest-settings-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+// Header Section
+.settings-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 2rem;
+ gap: 1rem;
+ flex-wrap: wrap;
+
+ .header-left {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ flex: 1;
+
+ .header-title {
+ h1 {
+ margin: 0;
+ font-size: 2rem;
+ font-weight: 600;
+ color: #333;
+ }
+
+ .subtitle {
+ margin: 0.25rem 0 0 0;
+ color: #666;
+ font-size: 0.95rem;
+ }
+ }
+ }
+
+ .header-actions {
+ display: flex;
+ gap: 0.75rem;
+ align-items: center;
+
+ button {
+ mat-icon {
+ margin-right: 0.5rem;
+ }
+ }
+ }
+}
+
+// Loading State
+.loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ gap: 1.5rem;
+
+ p {
+ color: #666;
+ font-size: 1rem;
+ }
+}
+
+// Error State
+.error-card {
+ margin-bottom: 2rem;
+
+ .error-content {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+
+ mat-icon {
+ font-size: 3rem;
+ width: 3rem;
+ height: 3rem;
+ }
+
+ .error-text {
+ flex: 1;
+
+ h3 {
+ margin: 0 0 0.5rem 0;
+ color: #d32f2f;
+ font-size: 1.25rem;
+ }
+
+ p {
+ margin: 0;
+ color: #666;
+ }
+ }
+ }
+}
+
+// Settings Content
+.settings-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ gap: 1.5rem;
+ margin-bottom: 2rem;
+}
+
+// Settings Card
+.settings-card {
+ mat-card-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1rem;
+ position: relative;
+
+ .card-header-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+
+ mat-icon {
+ font-size: 28px;
+ width: 28px;
+ height: 28px;
+ }
+
+ &.enabled {
+ background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
+ }
+
+ &.limits {
+ background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+ }
+
+ &.session {
+ background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
+ }
+
+ &.message {
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+ }
+
+ &.features {
+ background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+ }
+
+ &.categories {
+ background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
+ }
+ }
+
+ mat-card-title {
+ margin: 0;
+ font-size: 1.25rem;
+ font-weight: 600;
+ }
+
+ mat-card-subtitle {
+ margin: 0.25rem 0 0 0;
+ font-size: 0.85rem;
+ }
+ }
+
+ mat-card-content {
+ padding-top: 1rem;
+ }
+}
+
+// Setting Item
+.setting-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ border-radius: 8px;
+ background: #f5f5f5;
+ margin-bottom: 0.75rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ .setting-label {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ font-weight: 500;
+ color: #333;
+
+ mat-icon {
+ color: #666;
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ .setting-value {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ .value-number {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: #3f51b5;
+ }
+
+ .value-unit {
+ font-size: 0.9rem;
+ color: #666;
+ }
+
+ .value-formatted {
+ font-size: 0.85rem;
+ color: #999;
+ }
+ }
+}
+
+// Info Banner
+.info-banner {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem 1rem;
+ background: #fff3cd;
+ border-left: 4px solid #ffc107;
+ border-radius: 4px;
+ margin-top: 1rem;
+
+ mat-icon {
+ color: #ff9800;
+ }
+
+ span {
+ color: #856404;
+ font-size: 0.9rem;
+ }
+}
+
+// Upgrade Message
+.upgrade-message {
+ display: flex;
+ gap: 1rem;
+ padding: 1rem;
+ background: #f5f5f5;
+ border-radius: 8px;
+ border-left: 4px solid #3f51b5;
+
+ mat-icon {
+ color: #3f51b5;
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ }
+
+ p {
+ margin: 0;
+ flex: 1;
+ color: #333;
+ font-style: italic;
+ line-height: 1.6;
+ }
+}
+
+// Features Grid
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: 1rem;
+
+ .feature-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 1rem;
+ border-radius: 8px;
+ background: #f5f5f5;
+ text-align: center;
+
+ mat-icon {
+ font-size: 32px;
+ width: 32px;
+ height: 32px;
+ color: #999;
+ margin-bottom: 0.25rem;
+
+ &.enabled {
+ color: #4caf50;
+ }
+ }
+
+ span {
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: #333;
+ }
+
+ mat-chip {
+ margin-top: 0.25rem;
+ }
+ }
+}
+
+// Categories Chips
+.categories-chips {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+
+ mat-chip {
+ font-size: 0.9rem;
+ }
+}
+
+// Quick Actions
+.quick-actions {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ padding: 1.5rem 0;
+ border-top: 1px solid #e0e0e0;
+
+ button {
+ mat-icon {
+ margin-right: 0.5rem;
+ }
+ }
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+ .guest-settings-container {
+ padding: 1rem;
+ }
+
+ .settings-header {
+ flex-direction: column;
+ align-items: stretch;
+
+ .header-left {
+ flex-direction: column;
+ align-items: flex-start;
+
+ .header-title h1 {
+ font-size: 1.5rem;
+ }
+ }
+
+ .header-actions {
+ width: 100%;
+ justify-content: stretch;
+
+ button {
+ flex: 1;
+ }
+ }
+ }
+
+ .settings-content {
+ grid-template-columns: 1fr;
+ }
+
+ .features-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .quick-actions {
+ flex-direction: column;
+
+ button {
+ width: 100%;
+ }
+ }
+}
+
+@media (max-width: 1024px) {
+ .settings-content {
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ }
+}
+
+// Dark Mode Support
+@media (prefers-color-scheme: dark) {
+ .settings-header {
+ .header-title h1 {
+ color: #fff;
+ }
+
+ .subtitle {
+ color: #aaa;
+ }
+ }
+
+ .loading-container p {
+ color: #aaa;
+ }
+
+ .error-card .error-content .error-text p {
+ color: #aaa;
+ }
+
+ .setting-item {
+ background: #2a2a2a;
+
+ .setting-label {
+ color: #fff;
+
+ mat-icon {
+ color: #aaa;
+ }
+ }
+ }
+
+ .info-banner {
+ background: #4a3f2a;
+
+ span {
+ color: #ffd54f;
+ }
+ }
+
+ .upgrade-message {
+ background: #2a2a2a;
+
+ p {
+ color: #fff;
+ }
+ }
+
+ .features-grid .feature-item {
+ background: #2a2a2a;
+
+ span {
+ color: #fff;
+ }
+ }
+
+ .quick-actions {
+ border-top-color: #444;
+ }
+}
diff --git a/frontend/src/app/features/admin/guest-settings/guest-settings.component.ts b/frontend/src/app/features/admin/guest-settings/guest-settings.component.ts
new file mode 100644
index 0000000..4929e9d
--- /dev/null
+++ b/frontend/src/app/features/admin/guest-settings/guest-settings.component.ts
@@ -0,0 +1,127 @@
+import { Component, OnInit, inject, DestroyRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatChipsModule } from '@angular/material/chips';
+import { AdminService } from '../../../core/services/admin.service';
+import { GuestSettings } from '../../../core/models/admin.model';
+
+/**
+ * GuestSettingsComponent
+ *
+ * Displays guest access settings in read-only mode for admin users.
+ * Allows navigation to edit settings view.
+ *
+ * Features:
+ * - Read-only settings cards with icons
+ * - Categorized settings display (Access, Limits, Session, Features)
+ * - Loading and error states
+ * - Refresh functionality
+ * - Navigation to edit view
+ * - Status indicators for enabled/disabled features
+ */
+@Component({
+ selector: 'app-guest-settings',
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatCardModule,
+ MatButtonModule,
+ MatIconModule,
+ MatProgressSpinnerModule,
+ MatTooltipModule,
+ MatChipsModule
+ ],
+ templateUrl: './guest-settings.component.html',
+ styleUrl: './guest-settings.component.scss'
+})
+export class GuestSettingsComponent implements OnInit {
+ private readonly adminService = inject(AdminService);
+ private readonly router = inject(Router);
+ private readonly destroyRef = inject(DestroyRef);
+
+ // Service signals
+ readonly settings = this.adminService.guestSettingsState;
+ readonly isLoading = this.adminService.isLoadingSettings;
+ readonly error = this.adminService.settingsError;
+
+ ngOnInit(): void {
+ this.loadSettings();
+ }
+
+ /**
+ * Load guest settings from API
+ */
+ loadSettings(): void {
+ this.adminService.getGuestSettings()
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe();
+ }
+
+ /**
+ * Refresh settings (force reload)
+ */
+ refreshSettings(): void {
+ this.adminService.refreshGuestSettings()
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe();
+ }
+
+ /**
+ * Navigate to edit settings page
+ */
+ editSettings(): void {
+ this.router.navigate(['/admin/guest-settings/edit']);
+ }
+
+ /**
+ * Navigate back to admin dashboard
+ */
+ goBack(): void {
+ this.router.navigate(['/admin']);
+ }
+
+ /**
+ * Navigate to guest analytics
+ */
+ goToAnalytics(): void {
+ this.router.navigate(['/admin/analytics']);
+ }
+
+ /**
+ * Get status color for boolean settings
+ */
+ getStatusColor(enabled: boolean): string {
+ return enabled ? 'primary' : 'warn';
+ }
+
+ /**
+ * Get status text for boolean settings
+ */
+ getStatusText(enabled: boolean): string {
+ return enabled ? 'Enabled' : 'Disabled';
+ }
+
+ /**
+ * Get chip color for features
+ */
+ getFeatureColor(enabled: boolean): string {
+ return enabled ? 'accent' : '';
+ }
+
+ /**
+ * Format session expiry hours to readable text
+ */
+ formatExpiryTime(hours: number): string {
+ if (hours < 24) {
+ return `${hours} hour${hours !== 1 ? 's' : ''}`;
+ }
+ const days = Math.floor(hours / 24);
+ return `${days} day${days !== 1 ? 's' : ''}`;
+ }
+}
diff --git a/frontend/src/app/features/admin/role-update-dialog/role-update-dialog.component.html b/frontend/src/app/features/admin/role-update-dialog/role-update-dialog.component.html
new file mode 100644
index 0000000..f2206e1
--- /dev/null
+++ b/frontend/src/app/features/admin/role-update-dialog/role-update-dialog.component.html
@@ -0,0 +1,174 @@
+
+
+
+
+ @if (isLoading()) {
+
+
+
+
+
+ Guest Access Settings
+View and manage guest user access configuration
+
+
+
+
+
+
+ }
+
+
+ @if (error() && !isLoading()) {
+ Loading guest settings...
+
+ error_outline
+
+
+
+
+ Failed to Load Settings
+{{ error() }}
+
+
+
+
+
+ Access Control
+ Guest access configuration
+
+
+
+
+
+
+
+
+
+ Quiz Limits
+ Daily and per-quiz restrictions
+
+
+
+
+
+
+
+
+
+ Session Configuration
+ Session duration and expiry
+
+
+
+
+
+
+
+
+
+ Upgrade Prompt
+ Message shown to guests when limit reached
+
+
+
+
+
+
+
+ @if (settings()?.features) {
+
+
+
+ Guest Features
+ Available features for guest users
+
+
+
+
+ }
+
+
+ @if (settings()?.allowedCategories && settings()!.allowedCategories!.length > 0) {
+
+
+
+ Allowed Categories
+ Categories accessible to guest users
+
+
+
+
+ }
+
+
+
+
+
+ @if (!settings()?.guestAccessEnabled) {
+
+ }
+
+ toggle_on
+ Guest Access
+
+
+
+ {{ getStatusText(settings()?.guestAccessEnabled ?? false) }}
+
+
+
+
+
+ calendar_today
+ Max Quizzes Per Day
+
+
+ {{ settings()?.maxQuizzesPerDay ?? 0 }}
+ quizzes
+
+
+
+
+ quiz
+ Max Questions Per Quiz
+
+
+ {{ settings()?.maxQuestionsPerQuiz ?? 0 }}
+ questions
+
+
+
+
+ timer
+ Session Expiry Time
+
+
+ {{ settings()?.sessionExpiryHours ?? 0 }}
+ hours
+ ({{ formatExpiryTime(settings()?.sessionExpiryHours ?? 0) }})
+
+
+
+
+ bookmark
+ Bookmarking
+
+ {{ getStatusText(settings()?.features?.canBookmark ?? false) }}
+
+
+
+ history
+ View History
+
+ {{ getStatusText(settings()?.features?.canViewHistory ?? false) }}
+
+
+
+ download
+ Export Results
+
+ {{ getStatusText(settings()?.features?.canExportResults ?? false) }}
+
+
+
+ @for (category of settings()?.allowedCategories; track category) {
+ {{ category }}
+ }
+
+
+
+
+
+ }
+
+
+ @if (!showConfirmation()) {
+
diff --git a/frontend/src/app/features/admin/role-update-dialog/role-update-dialog.component.scss b/frontend/src/app/features/admin/role-update-dialog/role-update-dialog.component.scss
new file mode 100644
index 0000000..d573b21
--- /dev/null
+++ b/frontend/src/app/features/admin/role-update-dialog/role-update-dialog.component.scss
@@ -0,0 +1,415 @@
+.role-update-dialog {
+ .dialog-content {
+ min-width: 500px;
+ max-width: 600px;
+ }
+
+ // ===========================
+ // Dialog Header
+ // ===========================
+ .dialog-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 16px;
+
+ .header-icon {
+ font-size: 32px;
+ width: 32px;
+ height: 32px;
+ color: var(--primary-color);
+
+ &.confirm {
+ color: var(--success-color);
+ }
+ }
+
+ h2 {
+ margin: 0;
+ font-size: 24px;
+ font-weight: 600;
+ }
+ }
+
+ // ===========================
+ // User Info Section
+ // ===========================
+ .user-info {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 16px;
+ background-color: var(--bg-secondary);
+ border-radius: 8px;
+ margin-bottom: 24px;
+
+ .user-avatar {
+ mat-icon {
+ font-size: 56px;
+ width: 56px;
+ height: 56px;
+ color: var(--primary-color);
+ }
+ }
+
+ .user-details {
+ flex: 1;
+
+ h3 {
+ margin: 0 0 4px;
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+
+ p {
+ margin: 0 0 8px;
+ font-size: 14px;
+ color: var(--text-secondary);
+ }
+
+ .current-role {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+
+ .label {
+ color: var(--text-secondary);
+ font-weight: 500;
+ }
+ }
+ }
+ }
+
+ // ===========================
+ // Role Selector
+ // ===========================
+ .role-selector {
+ margin-bottom: 24px;
+
+ .selector-title {
+ margin: 0 0 16px;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+
+ .role-options {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ .role-option {
+ padding: 16px;
+ border: 2px solid var(--divider-color);
+ border-radius: 8px;
+ transition: all 0.2s;
+ width: 100%;
+
+ &:hover {
+ border-color: var(--primary-color);
+ background-color: var(--bg-secondary);
+ }
+
+ &.mat-radio-checked {
+ border-color: var(--primary-color);
+ background-color: var(--primary-light);
+ }
+
+ .role-option-content {
+ width: 100%;
+ margin-left: 8px;
+
+ .role-option-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 8px;
+
+ mat-icon {
+ color: var(--primary-color);
+ }
+
+ .role-name {
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+ }
+
+ .role-description {
+ margin: 0;
+ font-size: 14px;
+ color: var(--text-secondary);
+ line-height: 1.5;
+ }
+ }
+ }
+ }
+ }
+
+ // ===========================
+ // Role Badge
+ // ===========================
+ .role-badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 4px 12px;
+ border-radius: 12px;
+ font-size: 12px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+
+ &.role-user {
+ background-color: var(--primary-light);
+ color: var(--primary-color);
+ }
+
+ &.role-admin {
+ background-color: var(--warn-light);
+ color: var(--warn-color);
+ }
+ }
+
+ // ===========================
+ // Warning Box
+ // ===========================
+ .warning-box {
+ display: flex;
+ gap: 12px;
+ padding: 16px;
+ background-color: var(--warn-light);
+ border-left: 4px solid var(--warn-color);
+ border-radius: 4px;
+ margin-top: 16px;
+
+ > mat-icon {
+ color: var(--warn-color);
+ flex-shrink: 0;
+ }
+
+ .warning-content {
+ flex: 1;
+
+ h4 {
+ margin: 0 0 8px;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--warn-dark);
+ }
+
+ p {
+ margin: 0 0 8px;
+ font-size: 14px;
+ color: var(--text-primary);
+ }
+
+ ul {
+ margin: 0;
+ padding-left: 20px;
+ font-size: 13px;
+ color: var(--text-secondary);
+
+ li {
+ margin-bottom: 4px;
+ }
+ }
+ }
+ }
+
+ // ===========================
+ // Info Box
+ // ===========================
+ .info-box {
+ display: flex;
+ gap: 12px;
+ padding: 16px;
+ background-color: var(--info-light);
+ border-left: 4px solid var(--info-color);
+ border-radius: 4px;
+ margin-top: 16px;
+
+ > mat-icon {
+ color: var(--info-color);
+ flex-shrink: 0;
+ }
+
+ .info-content {
+ flex: 1;
+
+ h4 {
+ margin: 0 0 8px;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--info-dark);
+ }
+
+ p {
+ margin: 0 0 8px;
+ font-size: 14px;
+ color: var(--text-primary);
+ }
+
+ ul {
+ margin: 0;
+ padding-left: 20px;
+ font-size: 13px;
+ color: var(--text-secondary);
+
+ li {
+ margin-bottom: 4px;
+ }
+ }
+ }
+ }
+
+ // ===========================
+ // Confirmation Step
+ // ===========================
+ .confirmation-message {
+ .change-summary {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ padding: 24px;
+ background-color: var(--bg-secondary);
+ border-radius: 8px;
+ margin-bottom: 24px;
+
+ .change-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ text-align: center;
+
+ .change-label {
+ font-size: 12px;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ .change-value {
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+ }
+
+ .change-arrow {
+ mat-icon {
+ color: var(--primary-color);
+ font-size: 32px;
+ width: 32px;
+ height: 32px;
+ }
+ }
+ }
+
+ .final-warning {
+ display: flex;
+ gap: 12px;
+ padding: 16px;
+ background-color: var(--error-light);
+ border: 2px solid var(--error-color);
+ border-radius: 8px;
+ margin-bottom: 16px;
+
+ mat-icon {
+ color: var(--error-color);
+ flex-shrink: 0;
+ }
+
+ p {
+ margin: 0;
+ font-size: 14px;
+ color: var(--text-primary);
+ line-height: 1.5;
+
+ strong {
+ color: var(--error-dark);
+ }
+ }
+ }
+
+ .confirmation-question {
+ text-align: center;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin: 16px 0 0;
+ }
+ }
+
+ // ===========================
+ // Dialog Actions
+ // ===========================
+ mat-dialog-actions {
+ padding: 16px 0 0;
+ margin: 0;
+ border-top: 1px solid var(--divider-color);
+
+ button {
+ mat-icon {
+ margin-right: 4px;
+ }
+
+ mat-spinner {
+ display: inline-block;
+ margin-right: 8px;
+ }
+ }
+ }
+}
+
+// ===========================
+// Responsive Design
+// ===========================
+@media (max-width: 767px) {
+ .role-update-dialog {
+ .dialog-content {
+ min-width: unset;
+ max-width: unset;
+ width: 100%;
+ }
+
+ .user-info {
+ flex-direction: column;
+ text-align: center;
+
+ .user-details {
+ width: 100%;
+
+ .current-role {
+ justify-content: center;
+ }
+ }
+ }
+
+ mat-dialog-actions {
+ flex-direction: column;
+ gap: 8px;
+
+ button {
+ width: 100%;
+ }
+ }
+ }
+}
+
+// ===========================
+// Dark Mode Support
+// ===========================
+@media (prefers-color-scheme: dark) {
+ .role-update-dialog {
+ --text-primary: #e0e0e0;
+ --text-secondary: #a0a0a0;
+ --bg-primary: #1e1e1e;
+ --bg-secondary: #2a2a2a;
+ --divider-color: #404040;
+ }
+}
diff --git a/frontend/src/app/features/admin/role-update-dialog/role-update-dialog.component.ts b/frontend/src/app/features/admin/role-update-dialog/role-update-dialog.component.ts
new file mode 100644
index 0000000..4316a16
--- /dev/null
+++ b/frontend/src/app/features/admin/role-update-dialog/role-update-dialog.component.ts
@@ -0,0 +1,132 @@
+import { Component, Inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatRadioModule } from '@angular/material/radio';
+import { FormsModule } from '@angular/forms';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { AdminUser } from '../../../core/models/admin.model';
+
+/**
+ * Dialog data interface
+ */
+export interface RoleUpdateDialogData {
+ user: AdminUser;
+}
+
+/**
+ * RoleUpdateDialogComponent
+ *
+ * Modal dialog for updating user role between User and Admin.
+ *
+ * Features:
+ * - Role selector (User/Admin)
+ * - Current role display
+ * - Warning message when demoting admin
+ * - Confirmation step before applying change
+ * - Loading state during update
+ * - Returns selected role or null on cancel
+ */
+@Component({
+ selector: 'app-role-update-dialog',
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatDialogModule,
+ MatButtonModule,
+ MatIconModule,
+ MatRadioModule,
+ FormsModule,
+ MatProgressSpinnerModule
+ ],
+ templateUrl: './role-update-dialog.component.html',
+ styleUrl: './role-update-dialog.component.scss'
+})
+export class RoleUpdateDialogComponent {
+ // Selected role (initialize with current role)
+ selectedRole: 'user' | 'admin';
+
+ // Component state
+ readonly isLoading = signal
+
+
+
+
+
+
+
+
+
+
+ }
+
+
+ @if (showConfirmation()) {
+
+ admin_panel_settings
+
+
+ Update User Role
+
+
+
+
+
+
+
+
+
+
+ @if (isDemotingAdmin) {
+ Select New Role
+
+
+
+ person
+ Regular User
+
+ {{ getRoleDescription('user') }}
+
+
+
+ admin_panel_settings
+ Administrator
+
+ {{ getRoleDescription('admin') }}
+
+ warning
+
+ }
+
+ @if (isPromotingToAdmin) {
+
+
+ Warning: Demoting Administrator
+This user will lose access to:
+-
+
- Admin dashboard and analytics +
- User management capabilities +
- System settings and configuration +
- Question and category management +
+ info
+
+ }
+
+
+ Promoting to Administrator
+This user will gain access to:
+-
+
- Full admin dashboard and analytics +
- Manage all users and their roles +
- Configure system settings +
- Create and manage questions/categories +
+
+
+
+
+
+
+ @if (isLoading()) {
+
+ } @else {
+
+ }
+
+
+ }
+
+ check_circle
+
+
+ Confirm Role Change
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/features/admin/status-update-dialog/status-update-dialog.component.scss b/frontend/src/app/features/admin/status-update-dialog/status-update-dialog.component.scss
new file mode 100644
index 0000000..3530703
--- /dev/null
+++ b/frontend/src/app/features/admin/status-update-dialog/status-update-dialog.component.scss
@@ -0,0 +1,387 @@
+.status-dialog {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ min-width: 400px;
+ max-width: 550px;
+
+ @media (max-width: 768px) {
+ min-width: 280px;
+ max-width: 100%;
+ }
+}
+
+// ===========================
+// Dialog Header
+// ===========================
+.dialog-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 24px 24px 16px;
+ border-bottom: 2px solid;
+ margin: 0 0 20px 0;
+
+ .dialog-icon {
+ font-size: 32px;
+ width: 32px;
+ height: 32px;
+ }
+
+ h2 {
+ margin: 0;
+ font-size: 24px;
+ font-weight: 600;
+ }
+
+ &.activate-header {
+ border-bottom-color: var(--mat-accent-main, #00bcd4);
+
+ .dialog-icon {
+ color: var(--mat-accent-main, #00bcd4);
+ }
+
+ h2 {
+ color: var(--mat-accent-main, #00bcd4);
+ }
+ }
+
+ &.deactivate-header {
+ border-bottom-color: var(--mat-warn-main, #f44336);
+
+ .dialog-icon {
+ color: var(--mat-warn-main, #f44336);
+ }
+
+ h2 {
+ color: var(--mat-warn-main, #f44336);
+ }
+ }
+}
+
+// ===========================
+// Dialog Content
+// ===========================
+mat-dialog-content {
+ padding: 0 24px 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ overflow-y: auto;
+ max-height: 60vh;
+}
+
+// ===========================
+// User Info
+// ===========================
+.user-info {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 16px;
+ background-color: var(--mat-app-surface-variant, #f5f5f5);
+ border-radius: 8px;
+
+ .user-avatar {
+ flex-shrink: 0;
+
+ img {
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 2px solid var(--mat-app-primary, #1976d2);
+ }
+
+ .avatar-placeholder {
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, var(--mat-app-primary, #1976d2), var(--mat-app-accent, #00bcd4));
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ font-weight: 600;
+ border: 2px solid var(--mat-app-primary, #1976d2);
+ }
+ }
+
+ .user-details {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+
+ .username {
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--mat-app-on-surface, #212121);
+ }
+
+ .email {
+ font-size: 14px;
+ color: var(--mat-app-on-surface-variant, #757575);
+ }
+
+ .role-badge {
+ display: inline-block;
+ padding: 4px 12px;
+ border-radius: 12px;
+ font-size: 12px;
+ font-weight: 500;
+ width: fit-content;
+ margin-top: 4px;
+
+ &.role-admin {
+ background-color: rgba(255, 152, 0, 0.1);
+ color: #ff9800;
+ border: 1px solid rgba(255, 152, 0, 0.3);
+ }
+
+ &.role-user {
+ background-color: rgba(33, 150, 243, 0.1);
+ color: #2196f3;
+ border: 1px solid rgba(33, 150, 243, 0.3);
+ }
+ }
+ }
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ text-align: center;
+ gap: 12px;
+
+ .user-avatar {
+ img,
+ .avatar-placeholder {
+ width: 48px;
+ height: 48px;
+ }
+
+ .avatar-placeholder {
+ font-size: 20px;
+ }
+ }
+
+ .user-details {
+ align-items: center;
+
+ .username {
+ font-size: 16px;
+ }
+
+ .email {
+ font-size: 13px;
+ }
+ }
+ }
+}
+
+// ===========================
+// Warning Box
+// ===========================
+.warning-box {
+ display: flex;
+ gap: 12px;
+ padding: 16px;
+ border-radius: 8px;
+ border-left: 4px solid;
+
+ mat-icon {
+ flex-shrink: 0;
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ }
+
+ .warning-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ .warning-title {
+ font-size: 16px;
+ font-weight: 600;
+ }
+
+ .warning-message {
+ font-size: 14px;
+ line-height: 1.5;
+
+ strong {
+ font-weight: 600;
+ }
+ }
+ }
+
+ &.activate-warning {
+ background-color: rgba(0, 188, 212, 0.1);
+ border-left-color: var(--mat-accent-main, #00bcd4);
+
+ mat-icon {
+ color: var(--mat-accent-main, #00bcd4);
+ }
+
+ .warning-title {
+ color: var(--mat-accent-dark, #0097a7);
+ }
+
+ .warning-message {
+ color: var(--mat-app-on-surface, #212121);
+ }
+ }
+
+ &.deactivate-warning {
+ background-color: rgba(244, 67, 54, 0.1);
+ border-left-color: var(--mat-warn-main, #f44336);
+
+ mat-icon {
+ color: var(--mat-warn-main, #f44336);
+ }
+
+ .warning-title {
+ color: var(--mat-warn-dark, #d32f2f);
+ }
+
+ .warning-message {
+ color: var(--mat-app-on-surface, #212121);
+ }
+ }
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+}
+
+// ===========================
+// Consequences
+// ===========================
+.consequences {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ .consequences-title {
+ font-size: 15px;
+ font-weight: 600;
+ color: var(--mat-app-on-surface, #212121);
+ }
+
+ .consequences-list {
+ margin: 0;
+ padding-left: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ li {
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--mat-app-on-surface-variant, #757575);
+ }
+ }
+}
+
+// ===========================
+// Info Box
+// ===========================
+.info-box {
+ display: flex;
+ gap: 12px;
+ padding: 12px 16px;
+ background-color: rgba(33, 150, 243, 0.1);
+ border-left: 4px solid var(--mat-app-primary, #1976d2);
+ border-radius: 8px;
+
+ mat-icon {
+ flex-shrink: 0;
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ color: var(--mat-app-primary, #1976d2);
+ }
+
+ .info-content {
+ flex: 1;
+ font-size: 13px;
+ line-height: 1.5;
+ color: var(--mat-app-on-surface-variant, #757575);
+
+ strong {
+ font-weight: 600;
+ color: var(--mat-app-on-surface, #212121);
+ }
+ }
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+}
+
+// ===========================
+// Dialog Actions
+// ===========================
+mat-dialog-actions {
+ padding: 16px 24px;
+ border-top: 1px solid var(--mat-app-outline-variant, #e0e0e0);
+ margin: 0;
+ gap: 12px;
+
+ button {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 0 16px;
+
+ mat-icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+
+ span {
+ font-size: 14px;
+ font-weight: 500;
+ }
+ }
+
+ @media (max-width: 768px) {
+ flex-direction: column-reverse;
+ gap: 8px;
+
+ button {
+ width: 100%;
+ justify-content: center;
+ }
+ }
+}
+
+// ===========================
+// Dark Mode Support
+// ===========================
+@media (prefers-color-scheme: dark) {
+ .user-info {
+ background-color: rgba(255, 255, 255, 0.05);
+ }
+
+ .warning-box {
+ &.activate-warning {
+ background-color: rgba(0, 188, 212, 0.15);
+ }
+
+ &.deactivate-warning {
+ background-color: rgba(244, 67, 54, 0.15);
+ }
+ }
+
+ .info-box {
+ background-color: rgba(33, 150, 243, 0.15);
+ }
+}
diff --git a/frontend/src/app/features/admin/status-update-dialog/status-update-dialog.component.ts b/frontend/src/app/features/admin/status-update-dialog/status-update-dialog.component.ts
new file mode 100644
index 0000000..663d8a8
--- /dev/null
+++ b/frontend/src/app/features/admin/status-update-dialog/status-update-dialog.component.ts
@@ -0,0 +1,109 @@
+import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { AdminUser } from '../../../core/models/admin.model';
+
+/**
+ * Dialog data interface
+ */
+export interface StatusUpdateDialogData {
+ user: AdminUser;
+ action: 'activate' | 'deactivate';
+}
+
+/**
+ * StatusUpdateDialogComponent
+ *
+ * Confirmation dialog for activating or deactivating user accounts.
+ *
+ * Features:
+ * - Clear warning message based on action
+ * - User information display
+ * - Consequences explanation
+ * - Confirm/Cancel buttons
+ * - Different colors for activate (success) vs deactivate (warn)
+ */
+@Component({
+ selector: 'app-status-update-dialog',
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatDialogModule,
+ MatButtonModule,
+ MatIconModule
+ ],
+ templateUrl: './status-update-dialog.component.html',
+ styleUrl: './status-update-dialog.component.scss'
+})
+export class StatusUpdateDialogComponent {
+ constructor(
+ public dialogRef: MatDialogRef
+ {{ dialogIcon }}
+
+
+
+ {{ actionVerb }} User Account
+
+
+
+
+
+ @if (data.user.profilePicture) {
+ ![]()
+ } @else {
+
+
+ {{ data.user.username.charAt(0).toUpperCase() }}
+
+ }
+
+
+ {{ data.user.username }}
+ {{ data.user.email }}
+
+ {{ data.user.role }}
+
+
+ {{ data.action === 'activate' ? 'info' : 'warning' }}
+
+
+
+
+
+
+ @if (data.action === 'activate') {
+ Reactivate Account
+ } @else {
+ Deactivate Account
+ }
+
+
+
+
+
+
+ @if (data.action === 'deactivate') {
+ This action will:
+ -
+ @for (consequence of consequences; track consequence) {
+
- {{ consequence }} + } +
+ info
+
+ } @else {
+
+ Note: This is a soft delete. User data is preserved and the account can be reactivated at any time.
+
+
+ check_circle
+
+ }
+
+ Note: The user will be able to access their account immediately after activation.
+
+
+
+
+
+
+
+
+
+ @if (allBookmarks().length === 0) {
+
diff --git a/frontend/src/app/features/bookmarks/bookmarks.component.scss b/frontend/src/app/features/bookmarks/bookmarks.component.scss
new file mode 100644
index 0000000..3cb600c
--- /dev/null
+++ b/frontend/src/app/features/bookmarks/bookmarks.component.scss
@@ -0,0 +1,561 @@
+.bookmarks-container {
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 24px;
+ min-height: calc(100vh - 64px);
+
+ @media (max-width: 768px) {
+ padding: 16px;
+ }
+}
+
+// Header
+.bookmarks-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+ gap: 16px;
+
+ .header-content {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ flex: 1;
+
+ .back-button {
+ color: #666;
+ transition: color 0.3s;
+
+ &:hover {
+ color: #1a237e;
+ }
+ }
+
+ .header-text {
+ h1 {
+ margin: 0;
+ font-size: 2rem;
+ font-weight: 600;
+ color: #1a237e;
+
+ @media (max-width: 768px) {
+ font-size: 1.5rem;
+ }
+ }
+
+ .subtitle {
+ margin: 4px 0 0;
+ font-size: 0.875rem;
+ color: #666;
+ }
+ }
+ }
+
+ .practice-button {
+ height: 48px;
+ padding: 0 24px;
+ font-weight: 600;
+ box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+ transition: all 0.3s;
+
+ mat-icon {
+ margin-right: 8px;
+ }
+
+ &:hover {
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+ transform: translateY(-2px);
+ }
+
+ @media (max-width: 768px) {
+ padding: 0 16px;
+ font-size: 0.875rem;
+ }
+ }
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ align-items: flex-start;
+
+ .practice-button {
+ width: 100%;
+ }
+ }
+}
+
+// Loading State
+.loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+ gap: 1.5rem;
+
+ p {
+ color: #666;
+ font-size: 1rem;
+ }
+}
+
+// Error State
+.error-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+ gap: 1rem;
+ text-align: center;
+ padding: 2rem;
+
+ .error-icon {
+ font-size: 4rem;
+ width: 4rem;
+ height: 4rem;
+ color: #f44336;
+ }
+
+ h2 {
+ margin: 0;
+ color: #333;
+ }
+
+ p {
+ color: #666;
+ margin: 0.5rem 0 1.5rem;
+ }
+}
+
+// Statistics Section
+.stats-section {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 16px;
+ margin-bottom: 24px;
+
+ .stat-card {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ border-radius: 12px;
+ transition: all 0.3s;
+
+ &:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ transform: translateY(-2px);
+ }
+
+ mat-card-content {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 20px;
+
+ .stat-icon {
+ width: 56px;
+ height: 56px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ mat-icon {
+ font-size: 32px;
+ width: 32px;
+ height: 32px;
+ color: white;
+ }
+
+ &.easy {
+ background: linear-gradient(135deg, #4caf50, #8bc34a);
+ }
+
+ &.medium {
+ background: linear-gradient(135deg, #ff9800, #ffc107);
+ }
+
+ &.hard {
+ background: linear-gradient(135deg, #f44336, #ff5722);
+ }
+ }
+
+ .stat-info {
+ display: flex;
+ flex-direction: column;
+
+ .stat-value {
+ font-size: 2rem;
+ font-weight: 700;
+ color: #333;
+ line-height: 1;
+ }
+
+ .stat-label {
+ font-size: 0.875rem;
+ color: #666;
+ margin-top: 4px;
+ }
+ }
+ }
+ }
+}
+
+// Filters Section
+.filters-card {
+ margin-bottom: 24px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ border-radius: 12px;
+
+ mat-card-content {
+ padding: 20px;
+
+ .filters-row {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ flex-wrap: wrap;
+
+ .search-field {
+ flex: 2;
+ min-width: 250px;
+ }
+
+ .filter-field {
+ flex: 1;
+ min-width: 150px;
+ }
+
+ .reset-button {
+ height: 56px;
+ min-width: 100px;
+
+ mat-icon {
+ margin-right: 4px;
+ }
+ }
+
+ @media (max-width: 768px) {
+ .search-field,
+ .filter-field {
+ flex: 1 1 100%;
+ width: 100%;
+ }
+
+ .reset-button {
+ flex: 1 1 100%;
+ width: 100%;
+ }
+ }
+ }
+ }
+}
+
+// Empty State
+.empty-state {
+ text-align: center;
+ padding: 4rem 2rem;
+ animation: fadeIn 0.5s ease-in;
+
+ .empty-icon {
+ font-size: 5rem;
+ width: 5rem;
+ height: 5rem;
+ color: #667eea;
+ opacity: 0.5;
+ margin-bottom: 1rem;
+ }
+
+ h2 {
+ margin: 0 0 1rem;
+ color: #333;
+ font-size: 1.75rem;
+ }
+
+ p {
+ color: #666;
+ margin-bottom: 2rem;
+ font-size: 1rem;
+ }
+
+ button {
+ mat-icon {
+ margin-right: 8px;
+ }
+ }
+}
+
+// Bookmarks Grid
+.bookmarks-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 24px;
+ animation: fadeIn 0.5s ease-in;
+
+ @media (max-width: 768px) {
+ grid-template-columns: 1fr;
+ gap: 16px;
+ }
+}
+
+// Bookmark Card
+.bookmark-card {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ border-radius: 12px;
+ transition: all 0.3s;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ &:hover {
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+ transform: translateY(-4px);
+
+ .remove-button {
+ opacity: 1;
+ }
+ }
+
+ mat-card-header {
+ padding: 16px 16px 0;
+
+ .card-header-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+
+ .difficulty-badge {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 6px 12px;
+ border-radius: 20px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+
+ mat-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ }
+
+ &.difficulty-easy {
+ background: #e8f5e9;
+ color: #2e7d32;
+ }
+
+ &.difficulty-medium {
+ background: #fff3e0;
+ color: #e65100;
+ }
+
+ &.difficulty-hard {
+ background: #ffebee;
+ color: #c62828;
+ }
+ }
+
+ .remove-button {
+ opacity: 0.6;
+ transition: all 0.3s;
+ color: #f44336;
+
+ &:hover {
+ opacity: 1;
+ background: #ffebee;
+ }
+
+ &:disabled {
+ cursor: not-allowed;
+ opacity: 0.4;
+ }
+
+ mat-icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+ }
+ }
+ }
+
+ mat-card-content {
+ padding: 16px;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ .question-text {
+ color: #333;
+ font-size: 0.938rem;
+ line-height: 1.6;
+ margin: 0;
+ flex: 1;
+ }
+
+ .question-meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+
+ mat-chip {
+ height: 28px;
+ font-size: 0.75rem;
+ border-radius: 14px;
+ background: #f5f5f5;
+ color: #666;
+
+ mat-icon {
+ font-size: 14px;
+ width: 14px;
+ height: 14px;
+ margin-right: 4px;
+ }
+
+ &.category-chip {
+ background: #e3f2fd;
+ color: #1976d2;
+ }
+
+ &.tags-chip {
+ background: #f3e5f5;
+ color: #7b1fa2;
+ }
+
+ &.points-chip {
+ background: #fff3e0;
+ color: #e65100;
+ }
+ }
+ }
+
+ .bookmark-date {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 0.75rem;
+ color: #999;
+ margin-top: auto;
+
+ mat-icon {
+ font-size: 14px;
+ width: 14px;
+ height: 14px;
+ }
+ }
+ }
+
+ mat-card-actions {
+ padding: 0 16px 16px;
+ margin: 0;
+ border-top: 1px solid #f0f0f0;
+ padding-top: 12px;
+
+ button {
+ mat-icon {
+ margin-right: 4px;
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ }
+ }
+ }
+}
+
+// Animations
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+// Dark Mode Support
+@media (prefers-color-scheme: dark) {
+ .bookmarks-container {
+ .bookmarks-header {
+ .header-text h1 {
+ color: #90caf9;
+ }
+
+ .header-text .subtitle {
+ color: #bbb;
+ }
+ }
+
+ .error-container h2,
+ .empty-state h2 {
+ color: #e0e0e0;
+ }
+
+ .error-container p,
+ .empty-state p,
+ .loading-container p {
+ color: #bbb;
+ }
+
+ .stat-card,
+ .filters-card,
+ .bookmark-card {
+ background: #1e1e1e;
+ color: #e0e0e0;
+
+ .question-text {
+ color: #e0e0e0;
+ }
+
+ mat-card-actions {
+ border-top-color: #333;
+ }
+ }
+
+ .bookmark-card {
+ .difficulty-badge {
+ &.difficulty-easy {
+ background: #1b5e20;
+ color: #a5d6a7;
+ }
+
+ &.difficulty-medium {
+ background: #e65100;
+ color: #ffcc80;
+ }
+
+ &.difficulty-hard {
+ background: #b71c1c;
+ color: #ef9a9a;
+ }
+ }
+
+ .question-meta mat-chip {
+ background: #2a2a2a;
+ color: #bbb;
+
+ &.category-chip {
+ background: #0d47a1;
+ color: #90caf9;
+ }
+
+ &.tags-chip {
+ background: #4a148c;
+ color: #ce93d8;
+ }
+
+ &.points-chip {
+ background: #e65100;
+ color: #ffcc80;
+ }
+ }
+
+ .bookmark-date {
+ color: #777;
+ }
+ }
+ }
+}
diff --git a/frontend/src/app/features/bookmarks/bookmarks.component.ts b/frontend/src/app/features/bookmarks/bookmarks.component.ts
new file mode 100644
index 0000000..0c4ddb5
--- /dev/null
+++ b/frontend/src/app/features/bookmarks/bookmarks.component.ts
@@ -0,0 +1,275 @@
+import { Component, OnInit, OnDestroy, signal, computed, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router, RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Subject, takeUntil } from 'rxjs';
+import { BookmarkService } from '../../core/services/bookmark.service';
+import { AuthService } from '../../core/services/auth.service';
+import { QuizService } from '../../core/services/quiz.service';
+import { ToastService } from '../../core/services/toast.service';
+import { Bookmark } from '../../core/models/bookmark.model';
+
+@Component({
+ selector: 'app-bookmarks',
+ standalone: true,
+ imports: [
+ CommonModule,
+ FormsModule,
+ RouterLink,
+ MatCardModule,
+ MatButtonModule,
+ MatIconModule,
+ MatChipsModule,
+ MatProgressSpinnerModule,
+ MatFormFieldModule,
+ MatInputModule,
+ MatSelectModule,
+ MatTooltipModule
+ ],
+ templateUrl: './bookmarks.component.html',
+ styleUrls: ['./bookmarks.component.scss']
+})
+export class BookmarksComponent implements OnInit, OnDestroy {
+ private bookmarkService = inject(BookmarkService);
+ private authService = inject(AuthService);
+ private quizService = inject(QuizService);
+ private toastService = inject(ToastService);
+ private router = inject(Router);
+ private destroy$ = new Subject
+
+
+
+ @if (isLoading()) {
+
+
+
+
+ @if (filteredBookmarks().length > 0) {
+
+ }
+
+
+ My Bookmarks
+{{ stats().total }} saved questions
+
+
+ }
+
+
+ @if (error() && !isLoading()) {
+ Loading your bookmarks...
+
+ error_outline
+
+ }
+
+
+ @if (!isLoading() && !error()) {
+
+ Failed to Load Bookmarks
+{{ error() }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ stats().byDifficulty.easy }}
+ Easy
+
+
+ {{ stats().byDifficulty.medium }}
+ Medium
+
+
+ {{ stats().byDifficulty.hard }}
+ Hard
+
+
+
+
+ Search bookmarks
+
+ search
+ @if (searchQuery()) {
+
+ }
+
+
+
+
+ Category
+
+ All Categories
+ @for (category of categories(); track category.id) {
+ {{ category.name }}
+ }
+
+ category
+
+
+
+
+ Difficulty
+
+ All Difficulties
+ @for (difficulty of difficulties; track difficulty) {
+
+ {{ difficulty | titlecase }}
+
+ }
+
+ filter_list
+
+
+
+ @if (searchQuery() || selectedCategory() || selectedDifficulty()) {
+
+ }
+
+
+ bookmark_border
+
+ }
+
+
+ @if (allBookmarks().length > 0 && filteredBookmarks().length === 0) {
+ No Bookmarks Yet
+Start bookmarking questions while taking quizzes to build your study collection.
+ +
+ search_off
+
+ }
+
+
+ @if (filteredBookmarks().length > 0) {
+ No Matching Bookmarks
+Try adjusting your filters or search query.
+ +
+ @for (bookmark of filteredBookmarks(); track bookmark.id) {
+
+
+
+
+
+
+
+
+
+
+
+ }
+
+ }
+ }
+
+
+
+ {{ getDifficultyIcon(bookmark.question.difficulty) }}
+ {{ bookmark.question.difficulty | titlecase }}
+
+
+ + {{ truncateText(bookmark.question.questionText, 200) }} +
+ + + +
+ schedule
+ Bookmarked {{ formatDate(bookmark.createdAt) }}
+
+ Welcome back, {{ username() }}! 👋
Ready to test your knowledge today?
- +
+
+
+
diff --git a/frontend/src/app/features/dashboard/dashboard.component.scss b/frontend/src/app/features/dashboard/dashboard.component.scss
index dd8d9ea..c5eeb43 100644
--- a/frontend/src/app/features/dashboard/dashboard.component.scss
+++ b/frontend/src/app/features/dashboard/dashboard.component.scss
@@ -78,9 +78,14 @@
}
}
- .start-quiz-btn {
- background-color: white;
- color: var(--color-primary);
+ .welcome-actions {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+ }
+
+ .start-quiz-btn,
+ .profile-btn {
font-weight: 600;
padding: 0 2rem;
height: 48px;
@@ -94,6 +99,36 @@
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
}
+
+ .start-quiz-btn {
+ background-color: white;
+ color: var(--color-primary);
+ }
+
+ .profile-btn {
+ background-color: transparent;
+ color: white;
+ border-color: white;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ }
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 1.5rem;
+
+ .welcome-actions {
+ width: 100%;
+
+ button {
+ flex: 1;
+ min-width: 0;
+ }
+ }
+ }
}
// Empty State
diff --git a/frontend/src/app/features/profile/profile-settings.component.html b/frontend/src/app/features/profile/profile-settings.component.html
new file mode 100644
index 0000000..443cdfb
--- /dev/null
+++ b/frontend/src/app/features/profile/profile-settings.component.html
@@ -0,0 +1,277 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/features/profile/profile-settings.component.scss b/frontend/src/app/features/profile/profile-settings.component.scss
new file mode 100644
index 0000000..363ea60
--- /dev/null
+++ b/frontend/src/app/features/profile/profile-settings.component.scss
@@ -0,0 +1,448 @@
+.profile-settings-container {
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 24px;
+ min-height: calc(100vh - 64px);
+
+ @media (max-width: 768px) {
+ padding: 16px;
+ }
+}
+
+.settings-header {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 24px;
+
+ h1 {
+ margin: 0;
+ font-size: 2rem;
+ font-weight: 600;
+ color: #1a237e;
+
+ @media (max-width: 768px) {
+ font-size: 1.5rem;
+ }
+ }
+
+ .back-button {
+ color: #666;
+ transition: color 0.3s;
+
+ &:hover {
+ color: #1a237e;
+ }
+ }
+}
+
+.settings-tabs {
+ ::ng-deep .mat-mdc-tab-labels {
+ background: #fff;
+ border-radius: 8px 8px 0 0;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ ::ng-deep .mat-mdc-tab-label {
+ font-size: 1rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ padding: 0 32px;
+ min-width: 160px;
+
+ @media (max-width: 768px) {
+ font-size: 0.875rem;
+ padding: 0 16px;
+ min-width: 120px;
+ }
+ }
+
+ ::ng-deep .mat-mdc-tab-body-content {
+ padding: 0;
+ }
+}
+
+.tab-content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ padding: 24px 0;
+
+ @media (max-width: 768px) {
+ gap: 16px;
+ padding: 16px 0;
+ }
+}
+
+.settings-card,
+.info-card,
+.tips-card {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+ overflow: hidden;
+ transition: box-shadow 0.3s;
+
+ &:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ }
+
+ mat-card-header {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ padding: 20px 24px;
+ margin: 0 0 24px 0;
+
+ mat-card-title {
+ margin: 0;
+ font-size: 1.25rem;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ mat-icon {
+ font-size: 24px;
+ height: 24px;
+ width: 24px;
+ }
+ }
+ }
+
+ mat-card-content {
+ padding: 0 24px 24px;
+
+ @media (max-width: 768px) {
+ padding: 0 16px 16px;
+ }
+ }
+}
+
+// Form Styles
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+
+ .full-width {
+ width: 100%;
+ }
+
+ mat-form-field {
+ ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+ margin-top: 4px;
+ }
+
+ mat-icon[matPrefix] {
+ margin-right: 8px;
+ color: #666;
+ }
+ }
+
+ mat-divider {
+ margin: 16px 0;
+ }
+}
+
+// Action Buttons
+.action-buttons {
+ display: flex;
+ gap: 12px;
+ margin-top: 8px;
+ flex-wrap: wrap;
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+
+ button {
+ width: 100%;
+ }
+ }
+
+ .save-button {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 0 24px;
+ height: 48px;
+ font-weight: 600;
+ box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+ transition: all 0.3s;
+
+ &:hover:not(:disabled) {
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+ transform: translateY(-2px);
+ }
+
+ &:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+
+ mat-spinner {
+ margin-right: 8px;
+ }
+
+ mat-icon {
+ font-size: 20px;
+ height: 20px;
+ width: 20px;
+ }
+ }
+
+ button[mat-button] {
+ height: 48px;
+ font-weight: 500;
+ }
+}
+
+// Password Strength Indicator
+.password-strength {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 12px;
+
+ .strength-bar {
+ flex: 1;
+ height: 8px;
+ background: #e0e0e0;
+ border-radius: 4px;
+ overflow: hidden;
+
+ .strength-fill {
+ height: 100%;
+ transition: width 0.3s, background-color 0.3s;
+ border-radius: 4px;
+
+ &.warn {
+ background: linear-gradient(90deg, #f44336, #ff5722);
+ }
+
+ &.accent {
+ background: linear-gradient(90deg, #ff9800, #ffc107);
+ }
+
+ &.primary {
+ background: linear-gradient(90deg, #4caf50, #8bc34a);
+ }
+ }
+ }
+
+ .strength-label {
+ font-size: 0.875rem;
+ font-weight: 600;
+ min-width: 60px;
+ text-align: right;
+
+ &.warn {
+ color: #f44336;
+ }
+
+ &.accent {
+ color: #ff9800;
+ }
+
+ &.primary {
+ color: #4caf50;
+ }
+ }
+}
+
+// Form Error
+.form-error {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 16px;
+ background: #ffebee;
+ color: #c62828;
+ border-radius: 4px;
+ font-size: 0.875rem;
+ margin-top: -8px;
+ margin-bottom: 8px;
+ animation: slideDown 0.3s ease;
+
+ mat-icon {
+ font-size: 20px;
+ height: 20px;
+ width: 20px;
+ }
+}
+
+// Info Card
+.info-card {
+ .info-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px 0;
+ border-bottom: 1px solid #e0e0e0;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ .info-label {
+ font-weight: 500;
+ color: #666;
+ font-size: 0.875rem;
+ }
+
+ .info-value {
+ font-weight: 600;
+ color: #333;
+ text-align: right;
+
+ &.role-badge {
+ padding: 4px 12px;
+ border-radius: 12px;
+ background: #e3f2fd;
+ color: #1976d2;
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+
+ &.admin {
+ background: #fce4ec;
+ color: #c2185b;
+ }
+ }
+ }
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
+
+ .info-value {
+ text-align: left;
+ }
+ }
+ }
+}
+
+// Tips Card
+.tips-card {
+ mat-card-header {
+ background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
+ }
+
+ .tips-list {
+ margin: 0;
+ padding-left: 20px;
+ list-style: none;
+
+ li {
+ position: relative;
+ padding: 8px 0 8px 24px;
+ color: #555;
+ font-size: 0.875rem;
+ line-height: 1.6;
+
+ &::before {
+ content: '✓';
+ position: absolute;
+ left: 0;
+ color: #43a047;
+ font-weight: bold;
+ font-size: 1rem;
+ }
+ }
+ }
+}
+
+// Animations
+@keyframes slideDown {
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+// Loading State
+button[disabled] {
+ cursor: not-allowed;
+ opacity: 0.6;
+}
+
+mat-spinner {
+ display: inline-block;
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+ .profile-settings-container {
+ padding: 12px;
+ }
+
+ .settings-card,
+ .info-card,
+ .tips-card {
+ mat-card-header {
+ padding: 16px;
+ }
+
+ mat-card-content {
+ padding: 0 16px 16px;
+ }
+ }
+
+ form {
+ gap: 16px;
+ }
+}
+
+// Dark Mode Support
+@media (prefers-color-scheme: dark) {
+ .profile-settings-container {
+ .settings-header h1 {
+ color: #90caf9;
+ }
+
+ .settings-card,
+ .info-card,
+ .tips-card {
+ background: #1e1e1e;
+ color: #e0e0e0;
+
+ mat-card-header {
+ background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
+ }
+ }
+
+ .info-card .info-row {
+ border-bottom-color: #333;
+
+ .info-label {
+ color: #bbb;
+ }
+
+ .info-value {
+ color: #e0e0e0;
+ }
+ }
+
+ .tips-card .tips-list li {
+ color: #bbb;
+ }
+
+ .form-error {
+ background: #3e2723;
+ color: #ff8a80;
+ }
+ }
+}
diff --git a/frontend/src/app/features/profile/profile-settings.component.ts b/frontend/src/app/features/profile/profile-settings.component.ts
new file mode 100644
index 0000000..3148763
--- /dev/null
+++ b/frontend/src/app/features/profile/profile-settings.component.ts
@@ -0,0 +1,347 @@
+import { Component, OnInit, OnDestroy, signal, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, AbstractControl, ValidationErrors } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatTabsModule } from '@angular/material/tabs';
+import { Subject, takeUntil } from 'rxjs';
+import { AuthService } from '../../core/services/auth.service';
+import { UserService } from '../../core/services/user.service';
+import { ToastService } from '../../core/services/toast.service';
+
+@Component({
+ selector: 'app-profile-settings',
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ RouterLink,
+ MatCardModule,
+ MatFormFieldModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatProgressSpinnerModule,
+ MatDividerModule,
+ MatTabsModule
+ ],
+ templateUrl: './profile-settings.component.html',
+ styleUrls: ['./profile-settings.component.scss']
+})
+export class ProfileSettingsComponent implements OnInit, OnDestroy {
+ private fb = inject(FormBuilder);
+ private authService = inject(AuthService);
+ private userService = inject(UserService);
+ private toastService = inject(ToastService);
+ private router = inject(Router);
+ private destroy$ = new Subject
+
+
+
+ Profile Settings
+
+
+
+ Update Your Profile
+
+
+
+
+
+
+
+
+ @if (currentUser) {
+
+
+ Account Information
+
+
+
+
+ }
+
+
+ Account ID:
+ {{ currentUser.id }}
+
+
+ Role:
+
+ {{ currentUser.role }}
+
+
+
+ Member Since:
+ {{ currentUser.createdAt | date:'medium' }}
+
+
+ Last Updated:
+ {{ currentUser.updatedAt | date:'medium' }}
+
+
+
+
+ Change Your Password
+
+
+
+
+
+
+
+
+
+
+
+ security
+ Security Tips
+
+
+
+
+
+
+ -
+
- Use a strong, unique password that you don't use anywhere else +
- Include a mix of uppercase and lowercase letters, numbers, and symbols +
- Avoid using personal information like your name or birthday +
- Consider using a password manager to generate and store passwords +
- Change your password regularly, especially if you suspect unauthorized access +
+
+
+
+
+
+
+
+
+
+ `,
+ styles: [`
+ .error-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ padding: 1rem;
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+ }
+
+ .error-card {
+ max-width: 600px;
+ width: 100%;
+ text-align: center;
+ padding: 2rem;
+ }
+
+ .error-icon {
+ margin-bottom: 1.5rem;
+ }
+
+ .error-icon mat-icon {
+ font-size: 80px;
+ width: 80px;
+ height: 80px;
+ }
+
+ .error-icon-500 {
+ color: #f44336; /* Red for server errors */
+ }
+
+ .error-icon-404 {
+ color: #ff9800; /* Orange for not found */
+ }
+
+ .error-icon-403 {
+ color: #ff9800; /* Orange for forbidden */
+ }
+
+ .error-icon-401 {
+ color: #ff9800; /* Orange for unauthorized */
+ }
+
+ .error-icon-network {
+ color: #9e9e9e; /* Gray for network errors */
+ }
+
+ .error-icon-default {
+ color: #f44336; /* Red for generic errors */
+ }
+
+ .error-title {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 1rem;
+ }
+
+ .error-message {
+ font-size: 1.125rem;
+ color: #666;
+ margin-bottom: 1rem;
+ line-height: 1.6;
+ }
+
+ .error-code {
+ font-size: 0.875rem;
+ color: #999;
+ font-family: 'Courier New', monospace;
+ margin-bottom: 1.5rem;
+ }
+
+ .error-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: center;
+ margin: 2rem 0;
+ }
+
+ .error-actions button {
+ min-width: 140px;
+ }
+
+ .error-details {
+ margin-top: 2rem;
+ text-align: left;
+ }
+
+ .details-toggle {
+ width: 100%;
+ justify-content: center;
+ margin-bottom: 1rem;
+ }
+
+ .details-content {
+ background: #f5f5f5;
+ border-radius: 4px;
+ padding: 1rem;
+ max-height: 300px;
+ overflow-y: auto;
+ }
+
+ .details-content pre {
+ margin: 0;
+ font-size: 0.875rem;
+ color: #333;
+ white-space: pre-wrap;
+ word-break: break-word;
+ }
+
+ .support-message {
+ margin-top: 2rem;
+ padding-top: 2rem;
+ border-top: 1px solid #e0e0e0;
+ }
+
+ .support-message p {
+ color: #666;
+ font-size: 0.875rem;
+ }
+
+ /* Dark mode support */
+ @media (prefers-color-scheme: dark) {
+ .error-container {
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+ }
+
+ .error-card {
+ background: #1e1e1e;
+ color: #e0e0e0;
+ }
+
+ .error-title {
+ color: #e0e0e0;
+ }
+
+ .error-message {
+ color: #b0b0b0;
+ }
+
+ .details-content {
+ background: #2a2a2a;
+ }
+
+ .details-content pre {
+ color: #e0e0e0;
+ }
+
+ .support-message {
+ border-top-color: #333;
+ }
+ }
+
+ /* Responsive design */
+ @media (max-width: 768px) {
+ .error-card {
+ padding: 1.5rem;
+ }
+
+ .error-icon mat-icon {
+ font-size: 60px;
+ width: 60px;
+ height: 60px;
+ }
+
+ .error-title {
+ font-size: 1.5rem;
+ }
+
+ .error-message {
+ font-size: 1rem;
+ }
+
+ .error-actions {
+ flex-direction: column;
+ }
+
+ .error-actions button {
+ width: 100%;
+ }
+ }
+ `]
+})
+export class ErrorComponent {
+ // Input signals
+ title = input{{ title() }}
+ + + + + + @if (errorCode()) { +Error Code: {{ errorCode() }}
+ } + + +
+ @if (showRetry()) {
+
+ }
+
+ @if (showReload()) {
+
+ }
+
+
+
+ @if (showBack()) {
+
+ }
+
+
+
+ @if (showDetails() && errorDetails()) {
+
+
+
+ @if (detailsExpanded) {
+
+ }
+
+
+ @if (showSupport()) {
+
+ }
+
+
+ }
+ {{ errorDetails() }}
+
+
+
diff --git a/frontend/src/app/shared/components/header/header.scss b/frontend/src/app/shared/components/header/header.scss
index 03cd420..588c76f 100644
--- a/frontend/src/app/shared/components/header/header.scss
+++ b/frontend/src/app/shared/components/header/header.scss
@@ -59,6 +59,17 @@
}
}
+.search-wrapper {
+ flex: 1;
+ max-width: 600px;
+ margin: 0 var(--spacing-lg);
+
+ @media (max-width: 1024px) {
+ max-width: 400px;
+ margin: 0 var(--spacing-md);
+ }
+}
+
.spacer {
flex: 1;
}
diff --git a/frontend/src/app/shared/components/header/header.ts b/frontend/src/app/shared/components/header/header.ts
index 1895c66..79f059e 100644
--- a/frontend/src/app/shared/components/header/header.ts
+++ b/frontend/src/app/shared/components/header/header.ts
@@ -17,6 +17,7 @@ import { GuestService } from '../../../core/services/guest.service';
import { QuizService } from '../../../core/services/quiz.service';
import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog';
import { ResumeQuizDialogComponent } from '../resume-quiz-dialog/resume-quiz-dialog';
+import { SearchComponent } from '../search/search.component';
@Component({
selector: 'app-header',
@@ -31,7 +32,8 @@ import { ResumeQuizDialogComponent } from '../resume-quiz-dialog/resume-quiz-dia
MatDividerModule,
MatDialogModule,
MatProgressSpinnerModule,
- MatChipsModule
+ MatChipsModule,
+ SearchComponent
],
templateUrl: './header.html',
styleUrl: './header.scss'
diff --git a/frontend/src/app/shared/components/loading-spinner/loading-spinner.html b/frontend/src/app/shared/components/loading-spinner/loading-spinner.html
index 108e463..177d9c4 100644
--- a/frontend/src/app/shared/components/loading-spinner/loading-spinner.html
+++ b/frontend/src/app/shared/components/loading-spinner/loading-spinner.html
@@ -1,6 +1,11 @@
-
+
+ *
+ */
+@Component({
+ selector: 'app-pagination',
+ imports: [
+ CommonModule,
+ MatButtonModule,
+ MatIconModule,
+ MatTooltipModule,
+ MatSelectModule,
+ MatFormFieldModule
+ ],
+ template: `
+ ();
+ pageNumbers = input<(number | string)[]>([]);
+ pageSizeOptions = input([10, 25, 50, 100]);
+ showPageSizeSelector = input(true);
+ showFirstLast = input(true);
+ maxVisiblePages = input(5);
+ itemLabel = input('results');
+
+ // Output events
+ pageChange = output();
+ pageSizeChange = output();
+
+ /**
+ * Handle page change
+ */
+ onPageChange(page: number): void {
+ if (page >= 1 && page <= (this.state()?.totalPages ?? 1)) {
+ this.pageChange.emit(page);
+ }
+ }
+
+ /**
+ * Handle page button click (for page numbers)
+ */
+ handlePageClick(page: number | string): void {
+ if (typeof page === 'number') {
+ this.onPageChange(page);
+ }
+ }
+
+ /**
+ * Handle page size change
+ */
+ onPageSizeChange(pageSize: number): void {
+ this.pageSizeChange.emit(pageSize);
+ }
+}
diff --git a/frontend/src/app/shared/components/search/search.component.html b/frontend/src/app/shared/components/search/search.component.html
new file mode 100644
index 0000000..68714ab
--- /dev/null
+++ b/frontend/src/app/shared/components/search/search.component.html
@@ -0,0 +1,166 @@
+;
+
+ // Service signals
+ readonly searchResults = this.searchService.searchResults;
+ readonly isSearching = this.searchService.isSearching;
+ readonly hasSearched = this.searchService.hasSearched;
+
+ // Component state
+ readonly searchQuery = signal('');
+ readonly showDropdown = signal(false);
+ readonly selectedIndex = signal(-1);
+
+ // Search input subject for debouncing
+ private searchSubject = new Subject();
+
+ // Flattened results for keyboard navigation
+ private flatResults: SearchResultItem[] = [];
+
+ ngOnInit(): void {
+ this.setupSearchDebounce();
+ this.setupClickOutside();
+ }
+
+ /**
+ * Setup debounced search
+ */
+ private setupSearchDebounce(): void {
+ this.searchSubject
+ .pipe(
+ debounceTime(500),
+ distinctUntilChanged()
+ )
+ .subscribe((query) => {
+ if (query.trim().length >= 2) {
+ this.searchService.search(query).subscribe(() => {
+ this.showDropdown.set(true);
+ this.updateFlatResults();
+ });
+ } else {
+ this.clearSearch();
+ }
+ });
+ }
+
+ /**
+ * Setup click outside to close dropdown
+ */
+ private setupClickOutside(): void {
+ document.addEventListener('click', (event) => {
+ const target = event.target as HTMLElement;
+ const searchContainer = document.querySelector('.search-container');
+
+ if (searchContainer && !searchContainer.contains(target)) {
+ this.closeDropdown();
+ }
+ });
+ }
+
+ /**
+ * Handle search input change
+ */
+ onSearchInput(query: string): void {
+ this.searchQuery.set(query);
+ this.searchSubject.next(query);
+
+ if (query.trim().length < 2) {
+ this.closeDropdown();
+ }
+ }
+
+ /**
+ * Handle keyboard navigation
+ */
+ onKeyDown(event: KeyboardEvent): void {
+ const key = event.key;
+
+ if (!this.showDropdown()) return;
+
+ switch (key) {
+ case 'ArrowDown':
+ event.preventDefault();
+ this.navigateDown();
+ break;
+ case 'ArrowUp':
+ event.preventDefault();
+ this.navigateUp();
+ break;
+ case 'Enter':
+ event.preventDefault();
+ this.selectCurrentResult();
+ break;
+ case 'Escape':
+ event.preventDefault();
+ this.closeDropdown();
+ break;
+ }
+ }
+
+ /**
+ * Navigate down in results
+ */
+ private navigateDown(): void {
+ const maxIndex = this.flatResults.length - 1;
+ if (this.selectedIndex() < maxIndex) {
+ this.selectedIndex.update(i => i + 1);
+ this.scrollToSelected();
+ }
+ }
+
+ /**
+ * Navigate up in results
+ */
+ private navigateUp(): void {
+ if (this.selectedIndex() > 0) {
+ this.selectedIndex.update(i => i - 1);
+ this.scrollToSelected();
+ }
+ }
+
+ /**
+ * Select current highlighted result
+ */
+ private selectCurrentResult(): void {
+ const index = this.selectedIndex();
+ if (index >= 0 && index < this.flatResults.length) {
+ this.navigateToResult(this.flatResults[index]);
+ }
+ }
+
+ /**
+ * Scroll to selected result in dropdown
+ */
+ private scrollToSelected(): void {
+ setTimeout(() => {
+ const selected = document.querySelector('.result-item.selected');
+ if (selected) {
+ selected.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+ }
+ }, 0);
+ }
+
+ /**
+ * Update flat results array for keyboard navigation
+ */
+ private updateFlatResults(): void {
+ const results = this.searchResults();
+ this.flatResults = [
+ ...results.categories,
+ ...results.questions,
+ ...results.quizzes
+ ];
+ this.selectedIndex.set(-1);
+ }
+
+ /**
+ * Navigate to search result
+ */
+ navigateToResult(result: SearchResultItem): void {
+ if (result.url) {
+ this.router.navigate([result.url]);
+ this.closeDropdown();
+ this.clearSearch();
+ }
+ }
+
+ /**
+ * Navigate to full search results page
+ */
+ viewAllResults(): void {
+ this.router.navigate(['/search'], {
+ queryParams: { q: this.searchQuery() }
+ });
+ this.closeDropdown();
+ }
+
+ /**
+ * Clear search
+ */
+ clearSearch(): void {
+ this.searchQuery.set('');
+ this.searchService.clearResults();
+ this.showDropdown.set(false);
+ this.selectedIndex.set(-1);
+ this.flatResults = [];
+ }
+
+ /**
+ * Close dropdown
+ */
+ closeDropdown(): void {
+ this.showDropdown.set(false);
+ this.selectedIndex.set(-1);
+ }
+
+ /**
+ * Focus search input
+ */
+ focusSearch(): void {
+ this.searchInput?.nativeElement.focus();
+ }
+
+ /**
+ * Get icon for result type
+ */
+ getTypeIcon(type: SearchResultType): string {
+ switch (type) {
+ case 'question':
+ return 'quiz';
+ case 'category':
+ return 'category';
+ case 'quiz':
+ return 'assessment';
+ default:
+ return 'search';
+ }
+ }
+
+ /**
+ * Get chip color for difficulty
+ */
+ getDifficultyColor(difficulty?: string): string {
+ if (!difficulty) return '';
+
+ switch (difficulty.toLowerCase()) {
+ case 'easy':
+ return 'primary';
+ case 'medium':
+ return 'accent';
+ case 'hard':
+ return 'warn';
+ default:
+ return '';
+ }
+ }
+
+ /**
+ * Check if result is selected
+ */
+ isSelected(result: SearchResultItem): boolean {
+ const index = this.selectedIndex();
+ if (index < 0) return false;
+
+ return this.flatResults[index]?.id === result.id &&
+ this.flatResults[index]?.type === result.type;
+ }
+
+ /**
+ * Check if there are any results
+ */
+ hasResults(): boolean {
+ const results = this.searchResults();
+ return results.totalResults > 0;
+ }
+
+ /**
+ * Check if search is empty
+ */
+ isEmptySearch(): boolean {
+ return this.hasSearched() && !this.hasResults() && !this.isSearching();
+ }
+}
+
+
+ `,
+ styles: [`
+ .pagination-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding: 1rem;
+ background: var(--surface-color, #fff);
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ .pagination-info {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .info-text {
+ font-size: 0.875rem;
+ color: var(--text-secondary, #666);
+ }
+
+ .info-text strong {
+ color: var(--text-primary, #333);
+ font-weight: 600;
+ }
+
+ .pagination-actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ flex-wrap: wrap;
+ }
+
+ .page-size-selector {
+ min-width: 140px;
+ }
+
+ .page-size-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+ display: none;
+ }
+
+ .pagination-controls {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ .page-numbers {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+ }
+
+ .page-button {
+ min-width: 40px;
+ height: 40px;
+ padding: 0 8px;
+ border-radius: 4px;
+ transition: all 0.2s ease;
+ }
+
+ .page-button:hover {
+ background-color: var(--hover-color, rgba(0, 0, 0, 0.04));
+ }
+
+ .page-button.active {
+ background-color: var(--primary-color, #1976d2);
+ color: white;
+ font-weight: 600;
+ }
+
+ .page-button.active:hover {
+ background-color: var(--primary-dark, #1565c0);
+ }
+
+ .ellipsis {
+ padding: 0 8px;
+ color: var(--text-secondary, #666);
+ user-select: none;
+ }
+
+ /* Responsive design */
+ @media (max-width: 768px) {
+ .pagination-container {
+ padding: 0.75rem;
+ }
+
+ .pagination-actions {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .page-size-selector {
+ width: 100%;
+ }
+
+ .pagination-controls {
+ justify-content: center;
+ }
+
+ .page-numbers {
+ gap: 0.125rem;
+ }
+
+ .page-button {
+ min-width: 36px;
+ height: 36px;
+ font-size: 0.875rem;
+ }
+
+ /* Hide ellipsis on very small screens */
+ @media (max-width: 480px) {
+ .ellipsis {
+ display: none;
+ }
+ }
+ }
+
+ /* Dark mode support */
+ @media (prefers-color-scheme: dark) {
+ .pagination-container {
+ background: var(--surface-dark, #1e1e1e);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+ }
+
+ .info-text {
+ color: var(--text-secondary-dark, #b0b0b0);
+ }
+
+ .info-text strong {
+ color: var(--text-primary-dark, #e0e0e0);
+ }
+
+ .page-button:hover {
+ background-color: rgba(255, 255, 255, 0.08);
+ }
+
+ .ellipsis {
+ color: var(--text-secondary-dark, #b0b0b0);
+ }
+ }
+
+ /* Focus styles for accessibility */
+ .page-button:focus-visible,
+ button:focus-visible {
+ outline: 2px solid var(--primary-color, #1976d2);
+ outline-offset: 2px;
+ }
+
+ /* Disabled state */
+ button:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ }
+ `]
+})
+export class PaginationComponent {
+ // Input signals
+ state = input.required
+
+ Showing {{ state()!.startIndex }}
+ to {{ state()!.endIndex }}
+ of {{ state()!.totalItems }} {{ itemLabel() }}
+
+
+
+
+
+ @if (showPageSizeSelector()) {
+
+
+ @for (option of pageSizeOptions(); track option) {
+ {{ option }} per page
+ }
+
+
+ }
+
+
+
+
+
+ @if (showFirstLast()) {
+
+ }
+
+
+
+
+
+
+
+ @for (page of pageNumbers(); track page) {
+ @if (page === '...') {
+ {{ page }}
+ } @else {
+
+ }
+ }
+
+
+
+
+
+
+ @if (showFirstLast()) {
+
+ }
+
+
+
diff --git a/frontend/src/app/shared/components/search/search.component.scss b/frontend/src/app/shared/components/search/search.component.scss
new file mode 100644
index 0000000..f2cdf89
--- /dev/null
+++ b/frontend/src/app/shared/components/search/search.component.scss
@@ -0,0 +1,352 @@
+.search-container {
+ position: relative;
+ width: 100%;
+ max-width: 600px;
+
+ @media (max-width: 768px) {
+ max-width: 100%;
+ }
+}
+
+// Search Input
+.search-input-wrapper {
+ position: relative;
+
+ .search-field {
+ width: 100%;
+
+ ::ng-deep {
+ .mat-mdc-form-field-infix {
+ padding: 0.5rem 0;
+ }
+
+ .mat-mdc-text-field-wrapper {
+ padding: 0;
+ }
+
+ input {
+ font-size: 0.95rem;
+ }
+
+ .mat-mdc-form-field-subscript-wrapper {
+ display: none;
+ }
+ }
+ }
+}
+
+// Search Dropdown
+.search-dropdown {
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ left: 0;
+ right: 0;
+ background: var(--surface-color);
+ border-radius: 8px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+ max-height: 500px;
+ overflow-y: auto;
+ z-index: 1000;
+ animation: dropdownSlide 0.2s ease-out;
+
+ @media (max-width: 768px) {
+ max-height: 400px;
+ }
+
+ @keyframes dropdownSlide {
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ // Custom scrollbar
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-color);
+ border-radius: 3px;
+
+ &:hover {
+ background: var(--scrollbar-hover-color);
+ }
+ }
+}
+
+// Loading State
+.search-loading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 3rem 2rem;
+ gap: 1rem;
+
+ p {
+ margin: 0;
+ font-size: 0.95rem;
+ color: var(--text-secondary);
+ }
+}
+
+// Empty State
+.search-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 3rem 2rem;
+ gap: 0.75rem;
+ text-align: center;
+
+ mat-icon {
+ font-size: 3rem;
+ width: 3rem;
+ height: 3rem;
+ color: var(--text-disabled);
+ }
+
+ p {
+ margin: 0;
+ font-size: 0.95rem;
+ color: var(--text-primary);
+
+ strong {
+ color: var(--primary-color);
+ }
+ }
+
+ .hint {
+ font-size: 0.875rem;
+ color: var(--text-secondary);
+ }
+}
+
+// Results
+.search-results {
+ padding: 0.5rem 0;
+}
+
+.results-section {
+ padding: 0.5rem 0;
+
+ .section-header {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem;
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+
+ mat-icon {
+ font-size: 1.25rem;
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+
+ .count {
+ margin-left: auto;
+ padding: 0.125rem 0.5rem;
+ background-color: var(--chip-background);
+ border-radius: 12px;
+ font-size: 0.75rem;
+ }
+ }
+}
+
+// Result Item
+.result-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.75rem 1rem;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+
+ &:hover,
+ &.selected {
+ background-color: var(--hover-background);
+ }
+
+ &.selected {
+ border-left: 3px solid var(--primary-color);
+ padding-left: calc(1rem - 3px);
+ }
+
+ .result-icon {
+ flex-shrink: 0;
+ font-size: 1.5rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ color: var(--icon-color);
+ }
+
+ .result-content {
+ flex: 1;
+ min-width: 0;
+
+ .result-title {
+ font-size: 0.95rem;
+ font-weight: 500;
+ color: var(--text-primary);
+ line-height: 1.4;
+ margin-bottom: 0.25rem;
+
+ // Truncate long titles
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+
+ ::ng-deep mark {
+ background-color: var(--highlight-background);
+ color: var(--highlight-text);
+ padding: 0.125rem 0.25rem;
+ border-radius: 3px;
+ font-weight: 600;
+ }
+ }
+
+ .result-description {
+ font-size: 0.875rem;
+ color: var(--text-secondary);
+ line-height: 1.4;
+ margin-top: 0.25rem;
+
+ // Truncate long descriptions
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+
+ .result-meta {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ margin-top: 0.5rem;
+ flex-wrap: wrap;
+
+ .meta-item {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ font-size: 0.875rem;
+ color: var(--text-secondary);
+
+ mat-icon {
+ font-size: 1rem;
+ width: 1rem;
+ height: 1rem;
+ }
+ }
+
+ .difficulty-chip {
+ height: 20px;
+ font-size: 0.75rem;
+ padding: 0 0.5rem;
+
+ ::ng-deep .mdc-evolution-chip__action--primary {
+ padding: 0 0.5rem;
+ }
+ }
+ }
+ }
+
+ .navigate-icon {
+ flex-shrink: 0;
+ font-size: 1.25rem;
+ width: 1.25rem;
+ height: 1.25rem;
+ color: var(--text-disabled);
+ }
+}
+
+// See All Link
+.see-all-link {
+ padding: 0.5rem 1rem;
+ text-align: center;
+
+ button {
+ width: 100%;
+ justify-content: center;
+
+ mat-icon {
+ margin-right: 0.5rem;
+ }
+ }
+}
+
+// Dark Mode
+@media (prefers-color-scheme: dark) {
+ .search-container {
+ --surface-color: #1e1e1e;
+ --text-primary: #e0e0e0;
+ --text-secondary: #a0a0a0;
+ --text-disabled: #606060;
+ --primary-color: #2196f3;
+ --icon-color: #90caf9;
+ --hover-background: rgba(255, 255, 255, 0.08);
+ --chip-background: rgba(255, 255, 255, 0.1);
+ --highlight-background: rgba(33, 150, 243, 0.3);
+ --highlight-text: #ffffff;
+ --scrollbar-color: rgba(255, 255, 255, 0.2);
+ --scrollbar-hover-color: rgba(255, 255, 255, 0.3);
+ }
+}
+
+// Light Mode
+@media (prefers-color-scheme: light) {
+ .search-container {
+ --surface-color: #ffffff;
+ --text-primary: #212121;
+ --text-secondary: #757575;
+ --text-disabled: #bdbdbd;
+ --primary-color: #1976d2;
+ --icon-color: #1976d2;
+ --hover-background: rgba(0, 0, 0, 0.04);
+ --chip-background: rgba(0, 0, 0, 0.08);
+ --highlight-background: rgba(33, 150, 243, 0.2);
+ --highlight-text: #0d47a1;
+ --scrollbar-color: rgba(0, 0, 0, 0.2);
+ --scrollbar-hover-color: rgba(0, 0, 0, 0.3);
+ }
+}
+
+// Accessibility
+@media (prefers-reduced-motion: reduce) {
+ .search-dropdown {
+ animation: none;
+ }
+
+ .result-item {
+ transition: none;
+ }
+}
+
+// Focus styles
+.search-field {
+ ::ng-deep input:focus {
+ outline: none;
+ }
+}
+
+.result-item:focus {
+ outline: 2px solid var(--primary-color);
+ outline-offset: -2px;
+}
diff --git a/frontend/src/app/shared/components/search/search.component.ts b/frontend/src/app/shared/components/search/search.component.ts
new file mode 100644
index 0000000..c099158
--- /dev/null
+++ b/frontend/src/app/shared/components/search/search.component.ts
@@ -0,0 +1,313 @@
+import { Component, OnInit, inject, signal, effect, ViewChild, ElementRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatChipsModule } from '@angular/material/chips';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { SearchService, SearchResultItem, SearchResultType } from '../../../core/services/search.service';
+
+/**
+ * SearchComponent
+ *
+ * Global search component for searching across questions, categories, and quizzes.
+ *
+ * Features:
+ * - Debounced search input (500ms)
+ * - Dropdown results with grouped sections
+ * - Keyboard navigation (arrow keys, enter, escape)
+ * - Click outside to close
+ * - Loading indicator
+ * - Empty state
+ * - Result highlighting
+ * - "See All Results" link
+ * - Responsive design
+ */
+@Component({
+ selector: 'app-search',
+ standalone: true,
+ imports: [
+ CommonModule,
+ FormsModule,
+ MatFormFieldModule,
+ MatInputModule,
+ MatIconModule,
+ MatButtonModule,
+ MatProgressSpinnerModule,
+ MatDividerModule,
+ MatChipsModule
+ ],
+ templateUrl: './search.component.html',
+ styleUrl: './search.component.scss'
+})
+export class SearchComponent implements OnInit {
+ private readonly searchService = inject(SearchService);
+ private readonly router = inject(Router);
+
+ @ViewChild('searchInput') searchInput!: ElementRef
+
+ search
+
+
+ @if (searchQuery()) {
+
+ }
+
+
+
+
+ @if (showDropdown()) {
+
+
+ @if (isSearching()) {
+
+ }
+
+
+ }
+
+
+ @else if (isEmptySearch()) {
+ Searching...
+
+ search_off
+
+ }
+
+
+ @else if (hasResults()) {
+ No results found for "{{ searchQuery() }}"
+ Try different keywords or check your spelling +
+
+ @if (searchResults().categories.length > 0) {
+
+ }
+
+
+ }
+
+
+ @if (searchResults().questions.length > 0) {
+ @if (searchResults().categories.length > 0) {
+
+ category
+ Categories
+ {{ searchResults().categories.length }}
+
+
+ @for (category of searchResults().categories; track category.id) {
+
+ {{ category.icon || 'category' }}
+ chevron_right
+
+ }
+
+
+ @if (category.description) {
+
+ {{ category.description }}
+ }
+
+
+ }
+
+
+ @if (searchResults().quizzes.length > 0) {
+ @if (searchResults().categories.length > 0 || searchResults().questions.length > 0) {
+
+ quiz
+ Questions
+ {{ searchResults().questions.length }}
+
+
+ @for (question of searchResults().questions; track question.id) {
+
+ quiz
+ chevron_right
+
+ }
+
+
+
+
+
+
+ }
+
+
+
+ assessment
+ Quiz History
+ {{ searchResults().quizzes.length }}
+
+
+ @for (quiz of searchResults().quizzes; track quiz.id) {
+
+ assessment
+ chevron_right
+
+ }
+
+
+ {{ quiz.title }}
+ @if (quiz.description) {
+ {{ quiz.description }}
+ }
+
+
+
+