add changes

2025-12-25 00:24:11 +02:00
parent 079c10e843
commit efb4f69e20
64 changed files with 576 additions and 568 deletions
--- a/backend/server.js
+++ b/backend/server.js
@@ -7,7 +7,7 @@ const swaggerSpec = require('./config/swagger');
 const logger = require('./config/logger');
 const { errorHandler, notFoundHandler } = require('./middleware/errorHandler');
 const { testConnection, getDatabaseStats } = require('./config/db');
-const { validateEnvironment } = require('./validate-env');
+const { validateEnvironment } = require('./tests/validate-env');
 const { isRedisConnected } = require('./config/redis');

 // Security middleware
@@ -88,7 +88,7 @@ app.get('/api-docs.json', docsLimiter, (req, res) => {
 // Health check endpoint
 app.get('/health', async (req, res) => {
  const dbStats = await getDatabaseStats();
-  
+
  res.status(200).json({
    status: 'OK',
    message: 'Interview Quiz API is running',
@@ -133,9 +133,9 @@ app.use(errorHandler);
 // Start server
 app.listen(PORT, async () => {
  logger.info('Server starting up...');
-  
+
  const redisStatus = isRedisConnected() ? '✅ Connected' : '⚠️  Not Connected (Optional)';
-  
+
  console.log(`
 ╔════════════════════════════════════════╗
 ║   Interview Quiz API - MySQL Edition  ║
@@ -149,16 +149,16 @@ app.listen(PORT, async () => {
 📝 Logs: backend/logs/
 💾 Cache (Redis): ${redisStatus}
  `);
-  
+
  logger.info(`Server started successfully on port ${PORT}`);
-  
+
  // Test database connection on startup
  console.log('🔌 Testing database connection...');
  const connected = await testConnection();
  if (!connected) {
    console.warn('⚠️  Warning: Database connection failed. Server is running but database operations will fail.');
  }
-  
+
  // Log Redis status
  if (isRedisConnected()) {
    console.log('💾 Redis cache connected and ready');
--- a/backend/tests/check-categories.js
+++ b/backend/tests/check-categories.js
@@ -1,25 +1,25 @@
-const { Category } = require('./models');
+const { Category } = require('../models');

 async function checkCategories() {
  const allActive = await Category.findAll({
    where: { isActive: true },
    order: [['displayOrder', 'ASC']]
  });
-  
+
  console.log(`\nTotal active categories: ${allActive.length}\n`);
-  
+
  allActive.forEach(cat => {
    console.log(`${cat.displayOrder}. ${cat.name}`);
    console.log(`   Guest Accessible: ${cat.guestAccessible}`);
    console.log(`   Question Count: ${cat.questionCount}\n`);
  });
-  
+
  const guestOnly = allActive.filter(c => c.guestAccessible);
  const authOnly = allActive.filter(c => !c.guestAccessible);
-  
+
  console.log(`Guest-accessible: ${guestOnly.length}`);
  console.log(`Auth-only: ${authOnly.length}`);
-  
+
  process.exit(0);
 }

--- a/backend/tests/check-category-ids.js
+++ b/backend/tests/check-category-ids.js
@@ -1,16 +1,16 @@
-const { Category } = require('./models');
+const { Category } = require('../models');

 async function checkCategoryIds() {
  try {
    console.log('\n=== Checking Category IDs ===\n');
-    
+
    const categories = await Category.findAll({
      attributes: ['id', 'name', 'isActive', 'guestAccessible'],
      limit: 10
    });
-    
+
    console.log(`Found ${categories.length} categories:\n`);
-    
+
    categories.forEach(cat => {
      console.log(`ID: ${cat.id} (${typeof cat.id})`);
      console.log(`  Name: ${cat.name}`);
@@ -18,16 +18,16 @@ async function checkCategoryIds() {
      console.log(`  guestAccessible: ${cat.guestAccessible}`);
      console.log('');
    });
-    
+
    // Try to find one by PK
    if (categories.length > 0) {
      const firstId = categories[0].id;
      console.log(`\nTrying findByPk with ID: ${firstId} (${typeof firstId})\n`);
-      
+
      const found = await Category.findByPk(firstId);
      console.log('findByPk result:', found ? found.name : 'NOT FOUND');
    }
-    
+
    process.exit(0);
  } catch (error) {
    console.error('Error:', error);
--- a/backend/tests/check-questions.js
+++ b/backend/tests/check-questions.js
@@ -1,4 +1,4 @@
-const { Question, Category } = require('./models');
+const { Question, Category } = require('../models');

 async function checkQuestions() {
  try {
@@ -12,9 +12,9 @@ async function checkQuestions() {
      attributes: ['id', 'questionText', 'categoryId', 'difficulty'],
      limit: 10
    });
-    
+
    console.log(`\nTotal active questions: ${questions.length}\n`);
-    
+
    if (questions.length === 0) {
      console.log('❌ No questions found in database!');
      console.log('\nYou need to run the questions seeder:');
@@ -27,7 +27,7 @@ async function checkQuestions() {
        console.log(`   Category: ${q.category?.name || 'N/A'} | Difficulty: ${q.difficulty}`);
      });
    }
-    
+
    process.exit(0);
  } catch (error) {
    console.error('Error:', error);
--- a/backend/tests/drop-categories.js
+++ b/backend/tests/drop-categories.js
@@ -1,5 +1,5 @@
 // Script to drop categories table
-const { sequelize } = require('./models');
+const { sequelize } = require('../models');

 async function dropCategoriesTable() {
  try {
--- a/backend/tests/generate-jwt-secret.js
+++ b/backend/tests/generate-jwt-secret.js
--- a/backend/tests/get-category-mapping.js
+++ b/backend/tests/get-category-mapping.js
@@ -1,4 +1,4 @@
-const { Category } = require('./models');
+const { Category } = require('../models');

 async function getCategoryMapping() {
  try {
@@ -7,9 +7,9 @@ async function getCategoryMapping() {
      attributes: ['id', 'name', 'slug', 'guestAccessible'],
      order: [['displayOrder', 'ASC']]
    });
-    
+
    console.log('\n=== Category ID Mapping ===\n');
-    
+
    const mapping = {};
    categories.forEach(cat => {
      mapping[cat.slug] = {
@@ -22,7 +22,7 @@ async function getCategoryMapping() {
      console.log(`  Guest Accessible: ${cat.guestAccessible}`);
      console.log('');
    });
-    
+
    // Export for use in tests
    console.log('\nFor tests, use:');
    console.log('const CATEGORY_IDS = {');
@@ -30,7 +30,7 @@ async function getCategoryMapping() {
      console.log(`  ${slug.toUpperCase().replace(/-/g, '_')}: '${mapping[slug].id}',`);
    });
    console.log('};');
-    
+
    process.exit(0);
  } catch (error) {
    console.error('Error:', error);
--- a/backend/tests/get-question-mapping.js
+++ b/backend/tests/get-question-mapping.js
@@ -1,4 +1,4 @@
-const { Question, Category } = require('./models');
+const { Question, Category } = require('../models');

 async function getQuestionMapping() {
  try {
@@ -14,7 +14,7 @@ async function getQuestionMapping() {
    });

    console.log('=== Question ID Mapping ===\n');
-    
+
    const mapping = {};
    questions.forEach((q, index) => {
      const key = `QUESTION_${index + 1}`;
--- a/backend/tests/test-admin-questions-pagination.js
+++ b/backend/tests/test-admin-questions-pagination.js
--- a/backend/tests/test-admin-statistics.js
+++ b/backend/tests/test-admin-statistics.js
--- a/backend/tests/test-admin-update-question.js
+++ b/backend/tests/test-admin-update-question.js
--- a/backend/tests/test-auth-endpoints.js
+++ b/backend/tests/test-auth-endpoints.js
--- a/backend/tests/test-bookmarks.js
+++ b/backend/tests/test-bookmarks.js
--- a/backend/tests/test-category-admin.js
+++ b/backend/tests/test-category-admin.js
--- a/backend/tests/test-category-details.js
+++ b/backend/tests/test-category-details.js
--- a/backend/tests/test-category-endpoints.js
+++ b/backend/tests/test-category-endpoints.js
--- a/backend/tests/test-category-model.js
+++ b/backend/tests/test-category-model.js
@@ -1,5 +1,5 @@
 // Category Model Tests
-const { sequelize, Category } = require('./models');
+const { sequelize, Category } = require('../models');

 async function runTests() {
  try {
--- a/backend/tests/test-complete-quiz.js
+++ b/backend/tests/test-complete-quiz.js
--- a/backend/tests/test-conversion-quick.js
+++ b/backend/tests/test-conversion-quick.js
--- a/backend/tests/test-create-question.js
+++ b/backend/tests/test-create-question.js
--- a/backend/tests/test-db-connection.js
+++ b/backend/tests/test-db-connection.js
@@ -1,9 +1,9 @@
 require('dotenv').config();
-const db = require('./models');
+const db = require('../models');

 async function testDatabaseConnection() {
  console.log('\n🔍 Testing Database Connection...\n');
-  
+
  console.log('Configuration:');
  console.log('- Host:', process.env.DB_HOST);
  console.log('- Port:', process.env.DB_PORT);
@@ -24,10 +24,10 @@ async function testDatabaseConnection() {
    // Check if database exists
    const [databases] = await db.sequelize.query('SHOW DATABASES');
    const dbExists = databases.some(d => d.Database === process.env.DB_NAME);
-    
+
    if (dbExists) {
      console.log(`✅ Database '${process.env.DB_NAME}' exists.\n`);
-      
+
      // Show tables in database
      const [tables] = await db.sequelize.query(`SHOW TABLES FROM ${process.env.DB_NAME}`);
      console.log(`📋 Tables in '${process.env.DB_NAME}':`, tables.length > 0 ? tables.length : 'No tables yet');
--- a/backend/tests/test-error-handling.js
+++ b/backend/tests/test-error-handling.js
--- a/backend/tests/test-find-by-pk.js
+++ b/backend/tests/test-find-by-pk.js
@@ -1,9 +1,9 @@
-const { Category } = require('./models');
+const { Category } = require('../models');

 async function testFindByPk() {
  try {
    console.log('\n=== Testing Category.findByPk(1) ===\n');
-    
+
    const category = await Category.findByPk(1, {
      attributes: [
        'id',
@@ -18,9 +18,9 @@ async function testFindByPk() {
        'isActive'
      ]
    });
-    
+
    console.log('Result:', JSON.stringify(category, null, 2));
-    
+
    if (category) {
      console.log('\nCategory found:');
      console.log('  Name:', category.name);
@@ -29,7 +29,7 @@ async function testFindByPk() {
    } else {
      console.log('Category not found!');
    }
-    
+
    process.exit(0);
  } catch (error) {
    console.error('Error:', error);
--- a/backend/tests/test-guest-analytics.js
+++ b/backend/tests/test-guest-analytics.js
--- a/backend/tests/test-guest-conversion.js
+++ b/backend/tests/test-guest-conversion.js
--- a/backend/tests/test-guest-endpoints.js
+++ b/backend/tests/test-guest-endpoints.js
--- a/backend/tests/test-guest-quiz-limit.js
+++ b/backend/tests/test-guest-quiz-limit.js
@@ -35,17 +35,17 @@ async function runTests() {
      const response = await axios.post(`${BASE_URL}/guest/start-session`, {
        deviceId: `test_device_${Date.now()}`
      });
-      
+
      if (response.status === 201 && response.data.success) {
        testSession.guestId = response.data.data.guestId;
        testSession.sessionToken = response.data.data.sessionToken;
-        printTestResult(1, 'Guest session created', true, 
+        printTestResult(1, 'Guest session created', true,
          `Guest ID: ${testSession.guestId}\nToken: ${testSession.sessionToken.substring(0, 50)}...`);
      } else {
        throw new Error('Failed to create session');
      }
    } catch (error) {
-      printTestResult(1, 'Guest session creation', false, 
+      printTestResult(1, 'Guest session creation', false,
        `Error: ${error.response?.data?.message || error.message}`);
      return; // Can't continue without session
    }
@@ -58,7 +58,7 @@ async function runTests() {
          'X-Guest-Token': testSession.sessionToken
        }
      });
-      
+
      if (response.status === 200 && response.data.success) {
        const { quizLimit, session } = response.data.data;
        printTestResult(2, 'Quiz limit check with valid token', true,
@@ -79,7 +79,7 @@ async function runTests() {
    printSection('Test 3: Check quiz limit without token (should fail with 401)');
    try {
      const response = await axios.get(`${BASE_URL}/guest/quiz-limit`);
-      printTestResult(3, 'No token provided', false, 
+      printTestResult(3, 'No token provided', false,
        'Should have returned 401 but got: ' + response.status);
    } catch (error) {
      if (error.response?.status === 401) {
@@ -125,13 +125,13 @@ async function runTests() {
    try {
      // Create a token with fake guest ID
      const jwt = require('jsonwebtoken');
-      const config = require('./config/config');
+      const config = require('../config/config');
      const fakeToken = jwt.sign(
        { guestId: 'guest_fake_12345' },
        config.jwt.secret,
        { expiresIn: '24h' }
      );
-      
+
      const response = await axios.get(`${BASE_URL}/guest/quiz-limit`, {
        headers: {
          'X-Guest-Token': fakeToken
@@ -157,9 +157,9 @@ async function runTests() {
          'X-Guest-Token': testSession.sessionToken
        }
      });
-      
+
      const { data } = response.data;
-      const hasCorrectStructure = 
+      const hasCorrectStructure =
        data.guestId &&
        data.quizLimit &&
        typeof data.quizLimit.maxQuizzes === 'number' &&
@@ -169,7 +169,7 @@ async function runTests() {
        data.session &&
        data.session.expiresAt &&
        data.session.timeRemaining;
-      
+
      if (hasCorrectStructure) {
        printTestResult(7, 'Response structure verification', true,
          'All required fields present with correct types');
@@ -190,10 +190,10 @@ async function runTests() {
          'X-Guest-Token': testSession.sessionToken
        }
      });
-      
+
      const { quizLimit } = response.data.data;
      const expectedRemaining = quizLimit.maxQuizzes - quizLimit.quizzesAttempted;
-      
+
      if (quizLimit.quizzesRemaining === expectedRemaining) {
        printTestResult(8, 'Quiz remaining calculation', true,
          `Calculation correct: ${quizLimit.maxQuizzes} - ${quizLimit.quizzesAttempted} = ${quizLimit.quizzesRemaining}`);
--- a/backend/tests/test-guest-session-model.js
+++ b/backend/tests/test-guest-session-model.js
@@ -1,5 +1,5 @@
 // GuestSession Model Tests
-const { sequelize, GuestSession, User } = require('./models');
+const { sequelize, GuestSession, User } = require('../models');

 async function runTests() {
  try {
@@ -119,7 +119,7 @@ async function runTests() {
      password: 'password123',
      role: 'user'
    });
-    
+
    await session1.convertToUser(testUser.id);
    await session1.reload();
    console.log('✅ Session converted to user');
@@ -191,12 +191,12 @@ async function runTests() {
    console.log('\nTest 20: Cleanup expired sessions');
    // Create an expired session by creating a valid one then updating it
    const tempSession = await GuestSession.createSession({ maxQuizzes: 3 });
-    await tempSession.update({ 
+    await tempSession.update({
      expiresAt: new Date(Date.now() - 1000) // Set to expired
-    }, { 
+    }, {
      validate: false // Skip validation
    });
-    
+
    const cleanedCount = await GuestSession.cleanupExpiredSessions();
    console.log('✅ Expired sessions cleaned');
    console.log('   Sessions deleted:', cleanedCount);
--- a/backend/tests/test-guest-settings.js
+++ b/backend/tests/test-guest-settings.js
--- a/backend/tests/test-junction-tables.js
+++ b/backend/tests/test-junction-tables.js
@@ -1,5 +1,5 @@
-const { sequelize } = require('./models');
-const { User, Category, Question, GuestSession, QuizSession } = require('./models');
+const { sequelize } = require('../models');
+const { User, Category, Question, GuestSession, QuizSession } = require('../models');
 const { QueryTypes } = require('sequelize');

 async function runTests() {
@@ -162,7 +162,7 @@ async function runTests() {
    // Test 10: Test user_achievements junction
    console.log('\nTest 10: Test user_achievements junction table');
    const achievementId = achievements[0].id;
-    
+
    await sequelize.query(
      `INSERT INTO user_achievements (id, user_id, achievement_id, notified)
       VALUES (UUID(), ?, ?, 0)`,
@@ -224,9 +224,9 @@ async function runTests() {
      "SELECT COUNT(*) as count FROM quiz_answers WHERE quiz_session_id = ?",
      { replacements: [testQuizSession.id], type: QueryTypes.SELECT }
    );
-    
+
    await QuizSession.destroy({ where: { id: testQuizSession.id } });
-    
+
    const answersAfter = await sequelize.query(
      "SELECT COUNT(*) as count FROM quiz_answers WHERE quiz_session_id = ?",
      { replacements: [testQuizSession.id], type: QueryTypes.SELECT }
@@ -243,9 +243,9 @@ async function runTests() {
      "SELECT COUNT(*) as count FROM user_bookmarks WHERE user_id = ?",
      { replacements: [testUser.id], type: QueryTypes.SELECT }
    );
-    
+
    await User.destroy({ where: { id: testUser.id } });
-    
+
    const bookmarksAfter = await sequelize.query(
      "SELECT COUNT(*) as count FROM user_bookmarks WHERE user_id = ?",
      { replacements: [testUser.id], type: QueryTypes.SELECT }
@@ -258,7 +258,7 @@ async function runTests() {

    // Test 16: Verify all indexes exist
    console.log('\nTest 16: Verify indexes on all tables');
-    
+
    const quizAnswersIndexes = await sequelize.query(
      "SHOW INDEX FROM quiz_answers",
      { type: QueryTypes.SELECT }
@@ -292,7 +292,7 @@ async function runTests() {

    console.log('\n=====================================');
    console.log('🧹 Cleaning up test data...');
-    
+
    // Clean up remaining test data
    await sequelize.query("DELETE FROM user_achievements");
    await sequelize.query("DELETE FROM achievements");
@@ -303,7 +303,7 @@ async function runTests() {
    await sequelize.query("DELETE FROM questions");
    await sequelize.query("DELETE FROM categories");
    await sequelize.query("DELETE FROM users");
-    
+
    console.log('✅ Test data deleted');
    console.log('\n✅ All Junction Tables Tests Completed!');

--- a/backend/tests/test-limit-reached.js
+++ b/backend/tests/test-limit-reached.js
@@ -13,8 +13,8 @@ async function testLimitReached() {

  try {
    // First, update the guest session to simulate reaching limit
-    const { GuestSession } = require('./models');
-    
+    const { GuestSession } = require('../models');
+
    console.log('Step 1: Updating guest session to simulate limit reached...');
    const guestSession = await GuestSession.findOne({
      where: { guestId: GUEST_ID }
@@ -47,7 +47,7 @@ async function testLimitReached() {
    console.log(`✅ Has Reached Limit: ${data.quizLimit.hasReachedLimit}`);
    console.log(`✅ Quizzes Attempted: ${data.quizLimit.quizzesAttempted}`);
    console.log(`✅ Quizzes Remaining: ${data.quizLimit.quizzesRemaining}`);
-    
+
    if (data.upgradePrompt) {
      console.log('\n✅ Upgrade Prompt Present:');
      console.log(`   Message: ${data.upgradePrompt.message}`);
--- a/backend/tests/test-logout-verify.js
+++ b/backend/tests/test-logout-verify.js
--- a/backend/tests/test-performance.js
+++ b/backend/tests/test-performance.js
--- a/backend/tests/test-question-by-id.js
+++ b/backend/tests/test-question-by-id.js
--- a/backend/tests/test-question-model.js
+++ b/backend/tests/test-question-model.js
@@ -1,5 +1,5 @@
 // Question Model Tests
-const { sequelize, Question, Category, User } = require('./models');
+const { sequelize, Question, Category, User } = require('../models');

 async function runTests() {
  try {
--- a/backend/tests/test-question-search.js
+++ b/backend/tests/test-question-search.js
--- a/backend/tests/test-questions-by-category.js
+++ b/backend/tests/test-questions-by-category.js
--- a/backend/tests/test-quiz-history.js
+++ b/backend/tests/test-quiz-history.js
--- a/backend/tests/test-quiz-session-model.js
+++ b/backend/tests/test-quiz-session-model.js
@@ -1,5 +1,5 @@
-const { sequelize } = require('./models');
-const { User, Category, GuestSession, QuizSession } = require('./models');
+const { sequelize } = require('../models');
+const { User, Category, GuestSession, QuizSession } = require('../models');

 async function runTests() {
  console.log('🧪 Running QuizSession Model Tests\n');
@@ -80,8 +80,8 @@ async function runTests() {
    console.log('   Questions answered:', userQuiz.questionsAnswered);
    console.log('   Correct answers:', userQuiz.correctAnswers);
    console.log('   Total points:', userQuiz.totalPoints);
-    console.log('   Match:', userQuiz.questionsAnswered === beforeAnswers + 1 && 
-                            userQuiz.correctAnswers === beforeCorrect + 1 ? '✅' : '❌');
+    console.log('   Match:', userQuiz.questionsAnswered === beforeAnswers + 1 &&
+      userQuiz.correctAnswers === beforeCorrect + 1 ? '✅' : '❌');

    // Test 5: Record incorrect answer
    console.log('\nTest 5: Record incorrect answer');
@@ -92,8 +92,8 @@ async function runTests() {
    console.log('✅ Incorrect answer recorded');
    console.log('   Questions answered:', userQuiz.questionsAnswered);
    console.log('   Correct answers:', userQuiz.correctAnswers);
-    console.log('   Match:', userQuiz.questionsAnswered === beforeAnswers2 + 1 && 
-                            userQuiz.correctAnswers === beforeCorrect2 ? '✅' : '❌');
+    console.log('   Match:', userQuiz.questionsAnswered === beforeAnswers2 + 1 &&
+      userQuiz.correctAnswers === beforeCorrect2 ? '✅' : '❌');

    // Test 6: Get quiz progress
    console.log('\nTest 6: Get quiz progress');
@@ -204,7 +204,7 @@ async function runTests() {
      totalQuestions: 10
    });
    await activeQuiz.start();
-    
+
    const foundActive = await QuizSession.findActiveForUser(testUser.id);
    console.log('✅ Active session found');
    console.log('   Found ID:', foundActive.id);
@@ -360,13 +360,13 @@ async function runTests() {

    console.log('\n=====================================');
    console.log('🧹 Cleaning up test data...');
-    
+
    // Clean up test data
    await QuizSession.destroy({ where: {} });
    await GuestSession.destroy({ where: {} });
    await Category.destroy({ where: {} });
    await User.destroy({ where: {} });
-    
+
    console.log('✅ Test data deleted');
    console.log('\n✅ All QuizSession Model Tests Completed!');

--- a/backend/tests/test-review-quiz.js
+++ b/backend/tests/test-review-quiz.js
--- a/backend/tests/test-security.js
+++ b/backend/tests/test-security.js
--- a/backend/tests/test-session-details.js
+++ b/backend/tests/test-session-details.js
--- a/backend/tests/test-simple-category.js
+++ b/backend/tests/test-simple-category.js
--- a/backend/tests/test-start-quiz.js
+++ b/backend/tests/test-start-quiz.js
--- a/backend/tests/test-submit-answer.js
+++ b/backend/tests/test-submit-answer.js
--- a/backend/tests/test-update-delete-question.js
+++ b/backend/tests/test-update-delete-question.js
--- a/backend/tests/test-update-profile.js
+++ b/backend/tests/test-update-profile.js
--- a/backend/tests/test-user-bookmarks.js
+++ b/backend/tests/test-user-bookmarks.js
--- a/backend/tests/test-user-dashboard.js
+++ b/backend/tests/test-user-dashboard.js
--- a/backend/tests/test-user-management.js
+++ b/backend/tests/test-user-management.js
--- a/backend/tests/test-user-model.js
+++ b/backend/tests/test-user-model.js
@@ -1,5 +1,5 @@
 require('dotenv').config();
-const db = require('./models');
+const db = require('../models');
 const { User } = db;

 async function testUserModel() {
--- a/backend/tests/validate-env.js
+++ b/backend/tests/validate-env.js
--- a/backend/tests/verify-seeded-data.js
+++ b/backend/tests/verify-seeded-data.js
@@ -1,5 +1,5 @@
 const { Sequelize } = require('sequelize');
-const config = require('./config/database');
+const config = require('../config/database');

 const sequelize = new Sequelize(
  config.development.database,
--- a/frontend/src/app/core/models/dashboard.model.ts
+++ b/frontend/src/app/core/models/dashboard.model.ts
@@ -4,17 +4,92 @@ import { QuizSession, QuizSessionHistory } from './quiz.model';
 /**
 * User Dashboard Response
 */
-export interface UserDashboard {
+
+export interface UserDataDashboard {
+  id: string;
+  username: string;
+  email: string;
+  role: string;
+  profileImage: string | null;
+  memberSince: string;
+}
+export interface StatsDashboard {
+  totalQuizzes: number
+  quizzesPassed: number
+  passRate: number
+  totalQuestionsAnswered: number
+  correctAnswers: number
+  overallAccuracy: number
+  currentStreak: number
+  longestStreak: number
+  streakStatus: string;
+  lastActiveDate: string | null
+
+}
+export interface RecentSessionsScoreDashboard {
+  earned: number
+  total: number
+  percentage: number
+}
+export interface RecentSessionsCategoryDashboard {
+  id: string
+  name: string
+  slug: string
+  icon: any
+  color: string
+}
+export interface RecentSessionsDashboard {
+  id: string
+  category: RecentSessionsCategoryDashboard
+  quizType: string
+  difficulty: string
+  status: string
+  score: RecentSessionsScoreDashboard
+  isPassed: boolean
+  questionsAnswered: number
+  correctAnswers: number
+  accuracy: number
+  timeSpent: number
+  completedAt: string
+}
+export interface CategoryPerformanceStats {
+  quizzesTaken: number
+  quizzesPassed: number
+  passRate: number
+  averageScore: number
+  totalQuestions: number
+  correctAnswers: number
+  accuracy: number
+}
+export interface CategoryPerformanceDashboard {
+  category: RecentSessionsCategoryDashboard
+  stats: CategoryPerformanceStats
+  lastAttempt: string
+}
+
+export interface RecentActivityDashboard {
+  date: string
+  quizzesCompleted: number
+}
+export interface UserDashboardResponse {
  success: boolean;
-  totalQuizzes: number;
-  totalQuestionsAnswered: number;
-  overallAccuracy: number;
-  currentStreak: number;
-  longestStreak: number;
-  averageScore: number;
-  recentQuizzes: QuizSession[];
-  categoryPerformance: CategoryPerformance[];
-  achievements?: Achievement[];
+  data: UserDashboard
+}
+export interface UserDashboard {
+  user: UserDataDashboard;
+  stats: StatsDashboard;
+  recentSessions: RecentSessionsDashboard[]
+  categoryPerformance: CategoryPerformanceDashboard[]
+  recentActivity: RecentActivityDashboard[]
+  // totalQuizzes: number;
+  // totalQuestionsAnswered: number;
+  // overallAccuracy: number;
+  // currentStreak: number;
+  // longestStreak: number;
+  // averageScore: number;
+  // recentQuizzes: QuizSession[];
+  // categoryPerformance: CategoryPerformance[];
+  // achievements?: Achievement[];
 }

 /**
@@ -37,14 +112,14 @@ export interface QuizHistoryResponse {
    sessions: QuizSessionHistory[];
    pagination: PaginationInfo;
    filters: {
-      "category": null,
-      "status": null,
-      "startDate": null,
-      "endDate": null
+      category: null,
+      status: null,
+      startDate: null,
+      endDate: null
    }
-    "sorting": {
-      "sortBy": string
-      "sortOrder": string
+    sorting: {
+      sortBy: string
+      sortOrder: string
    }
  };
 }
--- a/frontend/src/app/core/models/quiz.model.ts
+++ b/frontend/src/app/core/models/quiz.model.ts
@@ -263,6 +263,7 @@ export interface QuizQuestionResult {
  // Legacy support
  questionId?: string;
  timeSpent?: number;
+
 }

 /**
--- a/frontend/src/app/core/services/quiz.service.ts
+++ b/frontend/src/app/core/services/quiz.service.ts
@@ -14,7 +14,8 @@ import {
  CompletedQuizResult,
  CompletedQuizResponse,
  QuizReviewResult,
-  QuizReviewResponse
+  QuizReviewResponse,
+  QuizSessionHistory
 } from '../models/quiz.model';
 import { ToastService } from './toast.service';
 import { StorageService } from './storage.service';
@@ -41,8 +42,13 @@ export class QuizService {
  readonly questions = this._questions.asReadonly();

  // Quiz results state
-  private readonly _quizResults = signal<CompletedQuizResult | QuizReviewResult | QuizResults | null>(null);
+  private readonly _quizResults = signal<QuizReviewResult | null>(null);
+  private readonly _completedQuiz = signal<CompletedQuizResult | null>(null);
+  private readonly _sessionHistoryQuiz = signal<QuizSessionHistory | null>(null);
+  //private readonly _quizResults = signal<CompletedQuizResult | QuizReviewResult | QuizResults | null>(null);
  readonly quizResults = this._quizResults.asReadonly();
+  readonly sessionQuizHistory = this._sessionHistoryQuiz.asReadonly();
+  readonly completedQuiz = this._completedQuiz.asReadonly();

  // Loading states
  private readonly _isStartingQuiz = signal<boolean>(false);
@@ -188,7 +194,7 @@ export class QuizService {
    return this.http.post<CompletedQuizResponse>(`${this.apiUrl}/complete`, { sessionId }).pipe(
      tap(results => {
        if (results.success) {
-          this._quizResults.set(results.data);
+          this._completedQuiz.set(results.data);

          // Update session status
          const currentSession = this._activeSession();
--- a/frontend/src/app/core/services/user.service.ts
+++ b/frontend/src/app/core/services/user.service.ts
@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 import { catchError, tap, map } from 'rxjs/operators';
 import { of, Observable } from 'rxjs';
 import { environment } from '../../../environments/environment';
-import { UserDashboard, QuizHistoryResponse, UserProfileUpdate, UserProfileUpdateResponse } from '../models/dashboard.model';
+import { UserDashboard, QuizHistoryResponse, UserProfileUpdate, UserProfileUpdateResponse, UserDashboardResponse } from '../models/dashboard.model';
 import { ToastService } from './toast.service';
 import { AuthService } from './auth.service';
 import { StorageService } from './storage.service';
@@ -23,28 +23,28 @@ export class UserService {
  private toastService = inject(ToastService);
  private authService = inject(AuthService);
  private storageService = inject(StorageService);
-  
+
  private readonly API_URL = `${environment.apiUrl}/users`;
  private readonly CACHE_TTL = 5 * 60 * 1000; // 5 minutes in milliseconds
-  
+
  // Signals
-  dashboardState = signal<UserDashboard | null>(null);
+  dashboardState = signal<UserDashboardResponse | null>(null);
  historyState = signal<QuizHistoryResponse | null>(null);
  isLoading = signal<boolean>(false);
  error = signal<string | null>(null);
-  
+
  // Cache
-  private dashboardCache = new Map<string, CacheEntry<UserDashboard>>();
-  
+  private dashboardCache = new Map<string, CacheEntry<UserDashboardResponse>>();
+
  // Computed values
-  totalQuizzes = computed(() => this.dashboardState()?.totalQuizzes || 0);
-  overallAccuracy = computed(() => this.dashboardState()?.overallAccuracy || 0);
-  currentStreak = computed(() => this.dashboardState()?.currentStreak || 0);
-  
+  totalQuizzes = computed(() => this.dashboardState()?.data.stats.totalQuizzes || 0);
+  overallAccuracy = computed(() => this.dashboardState()?.data.stats.overallAccuracy || 0);
+  currentStreak = computed(() => this.dashboardState()?.data.stats.currentStreak || 0);
+
  /**
   * Get user dashboard with statistics
   */
-  getDashboard(userId: string, forceRefresh = false): Observable<UserDashboard> {
+  getDashboard(userId: string, forceRefresh = false): Observable<UserDashboardResponse> {
    // Check cache if not forcing refresh
    if (!forceRefresh) {
      const cached = this.dashboardCache.get(userId);
@@ -53,11 +53,11 @@ export class UserService {
        return of(cached.data);
      }
    }
-    
+
    this.isLoading.set(true);
    this.error.set(null);
-    
-    return this.http.get<UserDashboard>(`${this.API_URL}/${userId}/dashboard`).pipe(
+
+    return this.http.get<UserDashboardResponse>(`${this.API_URL}/${userId}/dashboard`).pipe(
      tap(response => {
        this.dashboardState.set(response);
        // Cache the response
@@ -71,19 +71,19 @@ export class UserService {
        console.error('Error fetching dashboard:', error);
        this.error.set(error.error?.message || 'Failed to load dashboard');
        this.isLoading.set(false);
-        
+
        if (error.status === 401) {
          this.toastService.error('Please log in to view your dashboard');
          this.router.navigate(['/login']);
        } else {
          this.toastService.error('Failed to load dashboard data');
        }
-        
+
        throw error;
      })
    );
  }
-  
+
  /**
   * Get user quiz history with pagination and filters
   */
@@ -96,12 +96,12 @@ export class UserService {
  ): Observable<QuizHistoryResponse> {
    this.isLoading.set(true);
    this.error.set(null);
-    
+
    let params: any = { page, limit, sortBy };
    if (category) {
      params.category = category;
    }
-    
+
    return this.http.get<QuizHistoryResponse>(`${this.API_URL}/${userId}/history`, { params }).pipe(
      tap(response => {
        this.historyState.set(response);
@@ -111,26 +111,26 @@ export class UserService {
        console.error('Error fetching history:', error);
        this.error.set(error.error?.message || 'Failed to load quiz history');
        this.isLoading.set(false);
-        
+
        if (error.status === 401) {
          this.toastService.error('Please log in to view your history');
          this.router.navigate(['/login']);
        } else {
          this.toastService.error('Failed to load quiz history');
        }
-        
+
        throw error;
      })
    );
  }
-  
+
  /**
   * Update user profile
   */
  updateProfile(userId: string, data: UserProfileUpdate): Observable<UserProfileUpdateResponse> {
    this.isLoading.set(true);
    this.error.set(null);
-    
+
    return this.http.put<UserProfileUpdateResponse>(`${this.API_URL}/${userId}`, data).pipe(
      tap(response => {
        // Update auth state with new user data
@@ -138,12 +138,12 @@ export class UserService {
        if (currentUser && response.data?.user) {
          const updatedUser = { ...currentUser, ...response.data.user };
          this.storageService.setUserData(updatedUser);
-          
+
          // Update auth state by calling a private method reflection
          // Since updateAuthState is private, we update storage directly
          // The auth state will sync on next navigation/refresh
        }
-        
+
        this.isLoading.set(false);
        this.toastService.success('Profile updated successfully');
        // Invalidate dashboard cache
@@ -153,7 +153,7 @@ export class UserService {
        console.error('Error updating profile:', error);
        this.error.set(error.error?.message || 'Failed to update profile');
        this.isLoading.set(false);
-        
+
        if (error.status === 401) {
          this.toastService.error('Please log in to update your profile');
        } else if (error.status === 409) {
@@ -161,12 +161,12 @@ export class UserService {
        } else {
          this.toastService.error('Failed to update profile');
        }
-        
+
        throw error;
      })
    );
  }
-  
+
  /**
   * Clear cache (useful after logout or data updates)
   */
@@ -176,12 +176,12 @@ export class UserService {
    this.historyState.set(null);
    this.error.set(null);
  }
-  
+
  /**
   * Check if dashboard data is empty (no quizzes taken)
   */
  isDashboardEmpty(): boolean {
    const dashboard = this.dashboardState();
-    return dashboard ? dashboard.totalQuizzes === 0 : true;
+    return dashboard ? dashboard.data.stats.totalQuizzes === 0 : true;
  }
 }
--- a/frontend/src/app/features/dashboard/dashboard.component.html
+++ b/frontend/src/app/features/dashboard/dashboard.component.html
@@ -17,7 +17,7 @@

 <!-- Dashboard Content -->
 <div *ngIf="!isLoading() && !error()" class="dashboard-container">
-  
+
  <!-- Welcome Header -->
  <div class="welcome-section">
    <div class="welcome-content">
@@ -35,7 +35,7 @@
      </button>
    </div>
  </div>
-  
+
  <!-- Empty State -->
  <div *ngIf="isEmpty()" class="empty-state">
    <mat-icon class="empty-icon">quiz</mat-icon>
@@ -46,10 +46,10 @@
      Take Your First Quiz
    </button>
  </div>
-  
+
  <!-- Statistics Section -->
  <div *ngIf="!isEmpty()" class="content-section">
-    
+
    <!-- Statistics Cards -->
    <div class="stats-grid">
      <mat-card *ngFor="let stat of statCards()" class="stat-card" [ngClass]="'card-' + stat.color">
@@ -64,7 +64,7 @@
        </mat-card-content>
      </mat-card>
    </div>
-    
+
    <!-- Category Performance Chart -->
    <mat-card class="performance-card" *ngIf="topCategories().length > 0">
      <mat-card-header>
@@ -75,35 +75,32 @@
      </mat-card-header>
      <mat-card-content>
        <div class="category-performance">
-          <div 
-            *ngFor="let category of topCategories()" 
-            class="category-bar"
-            (click)="viewCategory(category.categoryId)"
-          >
+          <div *ngFor="let category of topCategories()" class="category-bar"
+            (click)="viewCategory(category.category.id)">
            <div class="category-info">
-              <span class="category-name">{{ category.categoryName }}</span>
-              <span class="category-stats">
-                {{ category.quizzesTaken }} {{ category.quizzesTaken === 1 ? 'quiz' : 'quizzes' }}
-              </span>
+              <span class="category-name">{{ category.category.name }}</span>
+              <!-- <span class="category-stats">
+                {{ category.category. }} {{ category.quizzesTaken === 1 ? 'quiz' : 'quizzes' }}
+              </span> -->
            </div>
            <div class="progress-bar-container">
-              <div 
+              <!-- <div 
                class="progress-bar" 
-                [style.width.%]="category.accuracy"
-                [ngClass]="getAccuracyColor(category.accuracy)"
-              ></div>
+                [style.width.%]="category.category.accuracy"
+                [ngClass]="getAccuracyColor(category.category.accuracy)"
+              ></div> -->
            </div>
-            <span class="accuracy-value">{{ category.accuracy.toFixed(1) }}%</span>
+            <!-- <span class="accuracy-value">{{ category.accuracy.toFixed(1) }}%</span> -->
          </div>
        </div>
-        
+
        <!-- Empty state for categories -->
        <div *ngIf="topCategories().length === 0" class="empty-section">
          <p>No category data available yet</p>
        </div>
      </mat-card-content>
    </mat-card>
-    
+
    <!-- Recent Quiz Sessions -->
    <mat-card class="recent-quizzes-card" *ngIf="recentSessions().length > 0">
      <mat-card-header>
@@ -111,28 +108,19 @@
          <mat-icon>history</mat-icon>
          Recent Quiz Sessions
        </mat-card-title>
-        <button 
-          mat-button 
-          color="primary" 
-          class="view-all-btn"
-          (click)="viewAllHistory()"
-        >
+        <button mat-button color="primary" class="view-all-btn" (click)="viewAllHistory()">
          View All
          <mat-icon>arrow_forward</mat-icon>
        </button>
      </mat-card-header>
      <mat-card-content>
        <div class="sessions-list">
-          <div 
-            *ngFor="let session of recentSessions()" 
-            class="session-item"
-            (click)="viewQuizResults(session.id)"
-          >
+          <div *ngFor="let session of recentSessions()" class="session-item" (click)="viewQuizResults(session.id)">
            <div class="session-icon">
              <mat-icon>quiz</mat-icon>
            </div>
            <div class="session-info">
-              <div class="session-title">{{ session.categoryName || 'Quiz' }}</div>
+              <div class="session-title">{{ session.category.name }}</div>
              <div class="session-meta">
                <span class="session-date">{{ formatDate(session.completedAt) }}</span>
                <span class="session-separator">•</span>
@@ -144,25 +132,22 @@
              </div>
            </div>
            <div class="session-score">
-              <span 
-                class="score-value"
-                [ngClass]="getScoreColor(session.score, session.totalQuestions)"
-              >
-                {{ session.score }}/{{ session.totalQuestions }}
+              <span class="score-value" [ngClass]="getScoreColor(session.score.earned, session.score.total)">
+                {{ session.score.total }}/{{ session.questionsAnswered }}
              </span>
-              <span class="score-percentage">{{ ((session.score / session.totalQuestions) * 100).toFixed(0) }}%</span>
+              <span class="score-percentage">{{ session.score.percentage }}%</span>
            </div>
            <mat-icon class="session-arrow">chevron_right</mat-icon>
          </div>
        </div>
-        
+
        <!-- Empty state for sessions -->
        <div *ngIf="recentSessions().length === 0" class="empty-section">
          <p>No recent quiz sessions</p>
        </div>
      </mat-card-content>
    </mat-card>
-    
+
    <!-- Achievements Section -->
    <mat-card class="achievements-card" *ngIf="achievements().length > 0">
      <mat-card-header>
@@ -173,28 +158,25 @@
      </mat-card-header>
      <mat-card-content>
        <div class="achievements-grid">
-          <div 
-            *ngFor="let achievement of achievements()" 
-            class="achievement-item"
-            [matTooltip]="achievement.description"
-          >
+          <div *ngFor="let achievement of achievements()" class="achievement-item"
+            [matTooltip]="achievement.category.name">
            <div class="achievement-icon">
-              <mat-icon>{{ achievement.icon }}</mat-icon>
+              <mat-icon>{{ achievement.category.icon }}</mat-icon>
            </div>
-            <div class="achievement-name">{{ achievement.name }}</div>
-            <div class="achievement-date" *ngIf="achievement.earnedAt">
-              {{ formatDate(achievement.earnedAt) }}
+            <div class="achievement-name">{{ achievement.category.name }}</div>
+            <div class="achievement-date" *ngIf="achievement.completedAt">
+              {{ formatDate(achievement.completedAt) }}
            </div>
          </div>
        </div>
-        
+
        <!-- Empty state for achievements -->
        <div *ngIf="achievements().length === 0" class="empty-section">
          <p>No achievements earned yet. Keep taking quizzes to unlock badges!</p>
        </div>
      </mat-card-content>
    </mat-card>
-    
+
    <!-- Quick Actions -->
    <div class="quick-actions">
      <button mat-stroked-button (click)="viewAllHistory()">
@@ -215,4 +197,4 @@
      </button>
    </div>
  </div>
-</div>
+</div>
--- a/frontend/src/app/features/dashboard/dashboard.component.ts
+++ b/frontend/src/app/features/dashboard/dashboard.component.ts
@@ -7,11 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatTooltipModule } from '@angular/material/tooltip';
- 
-import { UserDashboard,   } from '../../core/models/dashboard.model';
- import { UserService } from '../../core/services/user.service';
+
+import { UserDashboard, UserDashboardResponse, } from '../../core/models/dashboard.model';
+import { UserService } from '../../core/services/user.service';
 import { AuthService } from '../../core/services';
- 
+
@Component({
  selector: 'app-dashboard',
  standalone: true,
@@ -32,12 +32,12 @@ export class DashboardComponent implements OnInit {
  private userService = inject(UserService);
  private authService = inject(AuthService);
  private router = inject(Router);
-  
+
  // Signals
  isLoading = signal<boolean>(true);
  dashboard = signal<UserDashboard | null>(null);
  error = signal<string | null>(null);
-  
+
  // Computed values
  username = computed(() => {
    try {
@@ -49,93 +49,93 @@ export class DashboardComponent implements OnInit {
  });
  isEmpty = computed(() => {
    const dash = this.dashboard();
-    return dash ? dash.totalQuizzes === 0 : true;
+    return dash ? dash.stats.totalQuizzes === 0 : true;
  });
-  
+
  // Stat cards computed
  statCards = computed(() => {
    const dash = this.dashboard();
    if (!dash) return [];
-    
+
    return [
      {
        title: 'Total Quizzes',
-        value: dash.totalQuizzes,
+        value: dash.stats.totalQuizzes,
        icon: 'quiz',
        color: 'primary',
        description: 'Quizzes completed'
      },
      {
        title: 'Overall Accuracy',
-        value: `${dash.overallAccuracy.toFixed(1)}%`,
+        value: `${dash.stats.overallAccuracy.toFixed(1)}%`,
        icon: 'percent',
        color: 'success',
        description: 'Correct answers'
      },
      {
        title: 'Current Streak',
-        value: dash.currentStreak,
+        value: dash.stats.currentStreak,
        icon: 'local_fire_department',
        color: 'warning',
        description: 'Days in a row',
-        badge: dash.longestStreak > 0 ? `Best: ${dash.longestStreak}` : undefined
+        badge: dash.stats.longestStreak > 0 ? `Best: ${dash.stats.longestStreak}` : undefined
      },
      {
        title: 'Questions Answered',
-        value: dash.totalQuestionsAnswered,
+        value: dash.stats.totalQuestionsAnswered,
        icon: 'question_answer',
        color: 'accent',
        description: 'Total questions'
      }
    ];
  });
-  
+
  // Top categories computed
  topCategories = computed(() => {
    const dash = this.dashboard();
    if (!dash || !dash.categoryPerformance) return [];
-    
+
    return [...dash.categoryPerformance]
-      .sort((a, b) => b.accuracy - a.accuracy)
+      .sort((a, b) => b.stats.accuracy - a.stats.accuracy)
      .slice(0, 5);
  });
-  
+
  // Recent sessions computed
  recentSessions = computed(() => {
    const dash = this.dashboard();
-    if (!dash || !dash.recentQuizzes) return [];
-    
-    return dash.recentQuizzes.slice(0, 5);
+    if (!dash || !dash.recentSessions) return [];
+
+    return dash.recentSessions.slice(0, 5);
  });
-  
+
  // Achievements computed
  achievements = computed(() => {
    const dash = this.dashboard();
-    return dash?.achievements || [];
+    return dash?.recentSessions || [];
  });
-  
+
  ngOnInit(): void {
    this.loadDashboard();
  }
-  
+
  /**
   * Load dashboard data
   */
  loadDashboard(): void {
    const state: any = (this.authService as any).authState();
    const user = state?.user;
-    
+
    if (!user || !user.id) {
      this.router.navigate(['/login']);
      return;
    }
-    
+
    this.isLoading.set(true);
    this.error.set(null);
-    
+
    (this.userService as any).getDashboard(user.id).subscribe({
-      next: (data: UserDashboard) => {
-        this.dashboard.set(data);
+      next: (res: UserDashboardResponse) => {
+        this.dashboard.set(res.data);
        this.isLoading.set(false);
      },
      error: (err: any) => {
@@ -145,14 +145,14 @@ export class DashboardComponent implements OnInit {
      }
    });
  }
-  
+
  /**
   * Navigate to quiz setup
   */
  startNewQuiz(): void {
    this.router.navigate(['/quiz/setup']);
  }
-  
+
  /**
   * Navigate to category detail
   */
@@ -161,7 +161,7 @@ export class DashboardComponent implements OnInit {
      this.router.navigate(['/categories', categoryId]);
    }
  }
-  
+
  /**
   * Navigate to quiz results
   */
@@ -170,14 +170,14 @@ export class DashboardComponent implements OnInit {
      this.router.navigate(['/quiz', sessionId, 'results']);
    }
  }
-  
+
  /**
   * Navigate to full history
   */
  viewAllHistory(): void {
    this.router.navigate(['/history']);
  }
-  
+
  /**
   * Get color class for accuracy
   */
@@ -186,7 +186,7 @@ export class DashboardComponent implements OnInit {
    if (accuracy >= 60) return 'warning';
    return 'error';
  }
-  
+
  /**
   * Get score display color
   */
@@ -196,45 +196,45 @@ export class DashboardComponent implements OnInit {
    if (percentage >= 60) return 'warning';
    return 'error';
  }
-  
+
  /**
   * Format time duration
   */
  formatDuration(seconds: number | undefined): string {
    if (!seconds) return '0s';
-    
+
    const minutes = Math.floor(seconds / 60);
    const secs = seconds % 60;
-    
+
    if (minutes === 0) {
      return `${secs}s`;
    }
-    
+
    return `${minutes}m ${secs}s`;
  }
-  
+
  /**
   * Format date for display
   */
  formatDate(dateString: string | undefined): string {
    if (!dateString) return 'Unknown';
-    
+
    const date = new Date(dateString);
    const now = new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-    
+
    if (diffDays === 0) return 'Today';
    if (diffDays === 1) return 'Yesterday';
    if (diffDays < 7) return `${diffDays} days ago`;
-    
-    return date.toLocaleDateString('en-US', { 
-      month: 'short', 
+
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
      day: 'numeric',
      year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
    });
  }
-  
+
  /**
   * Refresh dashboard data
   */
--- a/frontend/src/app/features/quiz/quiz-results/quiz-results.html
+++ b/frontend/src/app/features/quiz/quiz-results/quiz-results.html
@@ -1,337 +1,281 @@
 <div class="quiz-results-container">
  <!-- Loading State -->
  @if (isLoading()) {
-    <div class="loading-container">
-      <mat-spinner diameter="50"></mat-spinner>
-      <p>Loading results...</p>
-    </div>
+  <div class="loading-container">
+    <mat-spinner diameter="50"></mat-spinner>
+    <p>Loading results...</p>
+  </div>
  }

  <!-- Results Content -->
  @if (!isLoading() && results()) {
-    <!-- Confetti Animation -->
-    @if (showConfetti()) {
-      <div class="confetti-container">
-        @for (i of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]; track i) {
-          <div class="confetti" [style.left.%]="i * 5" [style.animation-delay.s]="i * 0.1"></div>
+  <!-- Confetti Animation -->
+  @if (showConfetti()) {
+  <div class="confetti-container">
+    @for (i of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]; track i) {
+    <div class="confetti" [style.left.%]="i * 5" [style.animation-delay.s]="i * 0.1"></div>
+    }
+  </div>
+  }
+
+  <div class="results-content">
+    <!-- Header Section -->
+    <div class="results-header">
+      <div class="header-icon" [class]="performanceLevel()">
+        @if (performanceLevel() === 'excellent') {
+        <mat-icon>emoji_events</mat-icon>
+        } @else if (performanceLevel() === 'good') {
+        <mat-icon>thumb_up</mat-icon>
+        } @else if (performanceLevel() === 'average') {
+        <mat-icon>trending_up</mat-icon>
+        } @else {
+        <mat-icon>school</mat-icon>
        }
      </div>
-    }
+      <h1 class="results-title">Quiz Completed!</h1>
+      <p class="performance-message" [class]="performanceLevel()">
+        {{ performanceMessage() }}
+      </p>
+    </div>

-    <div class="results-content">
-      <!-- Header Section -->
-      <div class="results-header">
-        <div class="header-icon" [class]="performanceLevel()">
-          @if (performanceLevel() === 'excellent') {
-            <mat-icon>emoji_events</mat-icon>
-          } @else if (performanceLevel() === 'good') {
-            <mat-icon>thumb_up</mat-icon>
-          } @else if (performanceLevel() === 'average') {
-            <mat-icon>trending_up</mat-icon>
-          } @else {
-            <mat-icon>school</mat-icon>
-          }
-        </div>
-        <h1 class="results-title">Quiz Completed!</h1>
-        <p class="performance-message" [class]="performanceLevel()">
-          {{ performanceMessage() }}
-        </p>
-      </div>
-
-      <!-- Score Card -->
-      <mat-card class="score-card" [class]="performanceLevel()">
-        <mat-card-content>
-          <div class="score-display">
-            <div class="score-circle">
-              <svg viewBox="0 0 100 100">
-                <circle cx="50" cy="50" r="45" class="score-bg"></circle>
-                <circle 
-                  cx="50" 
-                  cy="50" 
-                  r="45" 
-                  class="score-progress"
-                  [style.stroke-dashoffset]="283 - (283 * scorePercentage() / 100)"
-                ></circle>
-              </svg>
-              <div class="score-text">
-                <span class="score-number">{{ scorePercentage() }}%</span>
-                <span class="score-label">Score</span>
-              </div>
-            </div>
-            <div class="score-details">
-              <div class="score-stat">
-                <mat-icon class="stat-icon success">check_circle</mat-icon>
-                <div>
-                  <div class="stat-value">{{ results()!.correctAnswers }}</div>
-                  <div class="stat-label">Correct</div>
-                </div>
-              </div>
-              <div class="score-stat">
-                <mat-icon class="stat-icon error">cancel</mat-icon>
-                <div>
-                  <div class="stat-value">{{ results()!.incorrectAnswers }}</div>
-                  <div class="stat-label">Incorrect</div>
-                </div>
-              </div>
-              @if (results()!.skippedAnswers > 0) {
-                <div class="score-stat">
-                  <mat-icon class="stat-icon warning">remove_circle</mat-icon>
-                  <div>
-                    <div class="stat-value">{{ results()!.skippedAnswers }}</div>
-                    <div class="stat-label">Skipped</div>
-                  </div>
-                </div>
-              }
+    <!-- Score Card -->
+    <mat-card class="score-card" [class]="performanceLevel()">
+      <mat-card-content>
+        <div class="score-display">
+          <div class="score-circle">
+            <svg viewBox="0 0 100 100">
+              <circle cx="50" cy="50" r="45" class="score-bg"></circle>
+              <circle cx="50" cy="50" r="45" class="score-progress"
+                [style.stroke-dashoffset]="283 - (283 * scorePercentage() / 100)"></circle>
+            </svg>
+            <div class="score-text">
+              @let score = results()!.summary.score.total> 0 ? (results()!.summary.score.earned /
+              results()!.summary.score.total) * 100 : 0;
+              <span class="score-number">{{score }}%</span>
+              <span class="score-label ">Score</span>
            </div>
          </div>
-
-          <mat-divider></mat-divider>
-
-          <div class="quiz-metadata">
-            <div class="metadata-item">
-              <mat-icon>timer</mat-icon>
-              <span>Time: {{ formatTime(results()!.timeSpent) }}</span>
-            </div>
-            <div class="metadata-item">
-              <mat-icon>quiz</mat-icon>
-              <span>{{ results()!.totalQuestions }} Questions</span>
-            </div>
-            <div class="metadata-item">
-              @if (results()!.isPassed) {
-                <mat-icon class="success">verified</mat-icon>
-                <span class="success">Passed</span>
-              } @else {
-                <mat-icon class="error">close</mat-icon>
-                <span class="error">Not Passed</span>
-              }
-            </div>
-          </div>
-        </mat-card-content>
-      </mat-card>
-
-      <!-- Pie Chart -->
-      <mat-card class="chart-card">
-        <mat-card-header>
-          <mat-card-title>Performance Breakdown</mat-card-title>
-        </mat-card-header>
-        <mat-card-content>
-          <div class="pie-chart-container">
-            <div class="pie-chart">
-              <svg viewBox="0 0 200 200">
-                <!-- Correct answers slice -->
-                <circle
-                  cx="100"
-                  cy="100"
-                  r="80"
-                  fill="transparent"
-                  stroke="#4caf50"
-                  stroke-width="40"
-                  [style.stroke-dasharray]="chartPercentages().correct * 5.03 + ' 503'"
-                  transform="rotate(-90 100 100)"
-                ></circle>
-                
-                <!-- Incorrect answers slice -->
-                <circle
-                  cx="100"
-                  cy="100"
-                  r="80"
-                  fill="transparent"
-                  stroke="#f44336"
-                  stroke-width="40"
-                  [style.stroke-dasharray]="chartPercentages().incorrect * 5.03 + ' 503'"
-                  [style.stroke-dashoffset]="-chartPercentages().correct * 5.03"
-                  transform="rotate(-90 100 100)"
-                ></circle>
-                
-                <!-- Skipped answers slice (if any) -->
-                @if (chartPercentages().skipped > 0) {
-                  <circle
-                    cx="100"
-                    cy="100"
-                    r="80"
-                    fill="transparent"
-                    stroke="#ff9800"
-                    stroke-width="40"
-                    [style.stroke-dasharray]="chartPercentages().skipped * 5.03 + ' 503'"
-                    [style.stroke-dashoffset]="-(chartPercentages().correct + chartPercentages().incorrect) * 5.03"
-                    transform="rotate(-90 100 100)"
-                  ></circle>
-                }
-              </svg>
-              <div class="chart-center">
-                <span class="chart-total">{{ results()!.totalQuestions }}</span>
-                <span class="chart-label">Questions</span>
+          <div class="score-details">
+            <div class="score-stat">
+              <mat-icon class="stat-icon success">check_circle</mat-icon>
+              <div>
+                <div class="stat-value">{{ results()!.summary.questions.correct }}</div>
+                <div class="stat-label">Correct</div>
              </div>
            </div>
-            
-            <div class="chart-legend">
-              <div class="legend-item">
-                <span class="legend-color correct"></span>
-                <span class="legend-label">Correct ({{ chartData().correct }})</span>
+            <div class="score-stat">
+              <mat-icon class="stat-icon error">cancel</mat-icon>
+              <div>
+                <div class="stat-value">{{ results()!.summary.questions.incorrect }}</div>
+                <div class="stat-label">Incorrect</div>
              </div>
-              <div class="legend-item">
-                <span class="legend-color incorrect"></span>
-                <span class="legend-label">Incorrect ({{ chartData().incorrect }})</span>
-              </div>
-              @if (chartData().skipped > 0) {
-                <div class="legend-item">
-                  <span class="legend-color skipped"></span>
-                  <span class="legend-label">Skipped ({{ chartData().skipped }})</span>
-                </div>
-              }
            </div>
-          </div>
-        </mat-card-content>
-      </mat-card>
-
-      <!-- Questions Review List -->
-      <mat-card class="questions-card">
-        <mat-card-header>
-          <mat-card-title>Question Review</mat-card-title>
-          <mat-card-subtitle>Review all questions and answers</mat-card-subtitle>
-        </mat-card-header>
-        <mat-card-content>
-          <div class="questions-list">
-            @for (question of results()!.questions; track question.questionId; let i = $index) {
-              <div class="question-item" [class.incorrect]="!question.isCorrect">
-                <div class="question-header">
-                  <div class="question-number">
-                    <span>{{ i + 1 }}</span>
-                    @if (question.isCorrect) {
-                      <mat-icon class="status-icon success">check_circle</mat-icon>
-                    } @else {
-                      <mat-icon class="status-icon error">cancel</mat-icon>
-                    }
-                  </div>
-                  <div class="question-meta">
-                    <mat-chip class="type-chip">{{ getQuestionTypeText(question.questionType) }}</mat-chip>
-                    <span class="points">{{ question.points }} pts</span>
-                  </div>
-                </div>
-
-                <div class="question-text">{{ question.questionText }}</div>
-
-                <div class="answer-section">
-                  <div class="answer-row">
-                    <span class="answer-label">Your Answer:</span>
-                    <span class="answer-value" [class.incorrect]="!question.isCorrect">
-                      {{ question.userAnswer || 'Not answered' }}
-                    </span>
-                  </div>
-                  @if (!question.isCorrect) {
-                    <div class="answer-row correct">
-                      <span class="answer-label">Correct Answer:</span>
-                      <span class="answer-value correct">{{ question.correctAnswer }}</span>
-                    </div>
-                  }
-                </div>
-
-                @if (question.explanation) {
-                  <div class="explanation">
-                    <mat-icon>info</mat-icon>
-                    <p>{{ question.explanation }}</p>
-                  </div>
-                }
+            @if (results()!.summary.questions.unanswered > 0) {
+            <div class="score-stat">
+              <mat-icon class="stat-icon warning">remove_circle</mat-icon>
+              <div>
+                <div class="stat-value">{{ results()!.summary.questions.unanswered }}</div>
+                <div class="stat-label">Skipped</div>
              </div>
+            </div>
            }
          </div>
-        </mat-card-content>
-      </mat-card>
+        </div>

-      <!-- Action Buttons -->
-      <div class="action-buttons">
-        <button 
-          mat-raised-button 
-          color="primary" 
-          (click)="retakeQuiz()"
-          class="action-btn"
-        >
-          <mat-icon>refresh</mat-icon>
-          Retake Quiz
-        </button>
+        <mat-divider></mat-divider>

-        @if (hasIncorrectAnswers()) {
-          <button 
-            mat-raised-button 
-            color="accent" 
-            (click)="reviewIncorrect()"
-            class="action-btn"
-          >
-            <mat-icon>rate_review</mat-icon>
-            Review Incorrect Answers
-          </button>
-        }
-
-        <button 
-          mat-raised-button 
-          (click)="goToDashboard()"
-          class="action-btn"
-        >
-          <mat-icon>dashboard</mat-icon>
-          Return to Dashboard
-        </button>
-      </div>
-
-      <!-- Social Share Section -->
-      <mat-card class="share-card">
-        <mat-card-header>
-          <mat-card-title>Share Your Results</mat-card-title>
-        </mat-card-header>
-        <mat-card-content>
-          <div class="share-buttons">
-            <button 
-              mat-mini-fab 
-              color="primary"
-              (click)="shareResults('twitter')"
-              matTooltip="Share on Twitter"
-              class="share-btn twitter"
-            >
-              <mat-icon>
-                <svg viewBox="0 0 24 24" width="24" height="24">
-                  <path fill="currentColor" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.70,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
-                </svg>
-              </mat-icon>
-            </button>
-
-            <button 
-              mat-mini-fab 
-              color="primary"
-              (click)="shareResults('linkedin')"
-              matTooltip="Share on LinkedIn"
-              class="share-btn linkedin"
-            >
-              <mat-icon>
-                <svg viewBox="0 0 24 24" width="24" height="24">
-                  <path fill="currentColor" d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />
-                </svg>
-              </mat-icon>
-            </button>
-
-            <button 
-              mat-mini-fab 
-              color="primary"
-              (click)="shareResults('facebook')"
-              matTooltip="Share on Facebook"
-              class="share-btn facebook"
-            >
-              <mat-icon>
-                <svg viewBox="0 0 24 24" width="24" height="24">
-                  <path fill="currentColor" d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" />
-                </svg>
-              </mat-icon>
-            </button>
-
-            <button 
-              mat-mini-fab 
-              (click)="copyLink()"
-              matTooltip="Copy Link"
-              class="share-btn copy"
-            >
-              <mat-icon>link</mat-icon>
-            </button>
+        <div class="quiz-metadata">
+          <div class="metadata-item">
+            <mat-icon>timer</mat-icon>
+            <span>Time: {{ formatTime(results()!.session.timeSpent) }}</span>
          </div>
-        </mat-card-content>
-      </mat-card>
+          <div class="metadata-item">
+            <mat-icon>quiz</mat-icon>
+            <span>{{ results()!!.summary.questions.total }} Questions</span>
+          </div>
+          <div class="metadata-item">
+            @if (results()!.summary.isPassed) {
+            <mat-icon class="success">verified</mat-icon>
+            <span class="success">Passed</span>
+            } @else {
+            <mat-icon class="error">close</mat-icon>
+            <span class="error">Not Passed</span>
+            }
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Pie Chart -->
+    <mat-card class="chart-card">
+      <mat-card-header>
+        <mat-card-title>Performance Breakdown</mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <div class="pie-chart-container">
+          <div class="pie-chart">
+            <svg viewBox="0 0 200 200">
+              <!-- Correct answers slice -->
+              <circle cx="100" cy="100" r="80" fill="transparent" stroke="#4caf50" stroke-width="40"
+                [style.stroke-dasharray]="chartPercentages().correct * 5.03 + ' 503'" transform="rotate(-90 100 100)">
+              </circle>
+
+              <!-- Incorrect answers slice -->
+              <circle cx="100" cy="100" r="80" fill="transparent" stroke="#f44336" stroke-width="40"
+                [style.stroke-dasharray]="chartPercentages().incorrect * 5.03 + ' 503'"
+                [style.stroke-dashoffset]="-chartPercentages().correct * 5.03" transform="rotate(-90 100 100)"></circle>
+
+              <!-- Skipped answers slice (if any) -->
+              @if (chartPercentages().skipped > 0) {
+              <circle cx="100" cy="100" r="80" fill="transparent" stroke="#ff9800" stroke-width="40"
+                [style.stroke-dasharray]="chartPercentages().skipped * 5.03 + ' 503'"
+                [style.stroke-dashoffset]="-(chartPercentages().correct + chartPercentages().incorrect) * 5.03"
+                transform="rotate(-90 100 100)"></circle>
+              }
+            </svg>
+            <div class="chart-center">
+              <span class="chart-total">{{ results()!.summary.questions.total }}</span>
+              <span class="chart-label">Questions</span>
+            </div>
+          </div>
+
+          <div class="chart-legend">
+            <div class="legend-item">
+              <span class="legend-color correct"></span>
+              <span class="legend-label">Correct ({{ chartData().correct }})</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-color incorrect"></span>
+              <span class="legend-label">Incorrect ({{ chartData().incorrect }})</span>
+            </div>
+            @if (chartData().skipped > 0) {
+            <div class="legend-item">
+              <span class="legend-color skipped"></span>
+              <span class="legend-label">Skipped ({{ chartData().skipped }})</span>
+            </div>
+            }
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Questions Review List -->
+    <mat-card class="questions-card">
+      <mat-card-header>
+        <mat-card-title>Question Review</mat-card-title>
+        <mat-card-subtitle>Review all questions and answers</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <div class="questions-list">
+          @for (question of results()!.questions; track question.questionId; let i = $index) {
+          <div class="question-item" [class.incorrect]="!question.isCorrect">
+            <div class="question-header">
+              <div class="question-number">
+                <span>{{ i + 1 }}</span>
+                @if (question.isCorrect) {
+                <mat-icon class="status-icon success">check_circle</mat-icon>
+                } @else {
+                <mat-icon class="status-icon error">cancel</mat-icon>
+                }
+              </div>
+              <div class="question-meta">
+                <mat-chip class="type-chip">{{ getQuestionTypeText(question.questionType) }}</mat-chip>
+                <span class="points">{{ question.points }} pts</span>
+              </div>
+            </div>
+
+            <div class="question-text">{{ question.questionText }}</div>
+
+            <div class="answer-section">
+              <div class="answer-row">
+                <span class="answer-label">Your Answer:</span>
+                <span class="answer-value" [class.incorrect]="!question.isCorrect">
+                  {{ question.userAnswer || 'Not answered' }}
+                </span>
+              </div>
+              @if (!question.isCorrect) {
+              <div class="answer-row correct">
+                <span class="answer-label">Correct Answer:</span>
+                <span class="answer-value correct">{{ question.correctAnswer }}</span>
+              </div>
+              }
+            </div>
+
+            @if (question.explanation) {
+            <div class="explanation">
+              <mat-icon>info</mat-icon>
+              <p>{{ question.explanation }}</p>
+            </div>
+            }
+          </div>
+          }
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+    <!-- Action Buttons -->
+    <div class="action-buttons">
+      <button mat-raised-button color="primary" (click)="retakeQuiz()" class="action-btn">
+        <mat-icon>refresh</mat-icon>
+        Retake Quiz
+      </button>
+
+      @if (hasIncorrectAnswers()) {
+      <button mat-raised-button color="accent" (click)="reviewIncorrect()" class="action-btn">
+        <mat-icon>rate_review</mat-icon>
+        Review Incorrect Answers
+      </button>
+      }
+
+      <button mat-raised-button (click)="goToDashboard()" class="action-btn">
+        <mat-icon>dashboard</mat-icon>
+        Return to Dashboard
+      </button>
    </div>
+
+    <!-- Social Share Section -->
+    <mat-card class="share-card">
+      <mat-card-header>
+        <mat-card-title>Share Your Results</mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <div class="share-buttons">
+          <button mat-mini-fab color="primary" (click)="shareResults('twitter')" matTooltip="Share on Twitter"
+            class="share-btn twitter">
+            <mat-icon>
+              <svg viewBox="0 0 24 24" width="24" height="24">
+                <path fill="currentColor"
+                  d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.70,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
+              </svg>
+            </mat-icon>
+          </button>
+
+          <button mat-mini-fab color="primary" (click)="shareResults('linkedin')" matTooltip="Share on LinkedIn"
+            class="share-btn linkedin">
+            <mat-icon>
+              <svg viewBox="0 0 24 24" width="24" height="24">
+                <path fill="currentColor"
+                  d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />
+              </svg>
+            </mat-icon>
+          </button>
+
+          <button mat-mini-fab color="primary" (click)="shareResults('facebook')" matTooltip="Share on Facebook"
+            class="share-btn facebook">
+            <mat-icon>
+              <svg viewBox="0 0 24 24" width="24" height="24">
+                <path fill="currentColor"
+                  d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" />
+              </svg>
+            </mat-icon>
+          </button>
+
+          <button mat-mini-fab (click)="copyLink()" matTooltip="Copy Link" class="share-btn copy">
+            <mat-icon>link</mat-icon>
+          </button>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
  }
-</div>
+</div>
--- a/frontend/src/app/features/quiz/quiz-results/quiz-results.scss
+++ b/frontend/src/app/features/quiz/quiz-results/quiz-results.scss
@@ -88,6 +88,7 @@
    opacity: 0;
    transform: translateY(20px);
  }
+
  to {
    opacity: 1;
    transform: translateY(0);
@@ -172,6 +173,7 @@
    transform: scale(0);
    opacity: 0;
  }
+
  to {
    transform: scale(1);
    opacity: 1;
@@ -252,6 +254,7 @@
      }

      .score-label {
+        margin-top: 10px;
        display: block;
        font-size: 1rem;
        color: var(--text-secondary);
@@ -349,6 +352,7 @@
    opacity: 0;
    transform: translateY(30px);
  }
+
  to {
    opacity: 1;
    transform: translateY(0);
@@ -671,4 +675,4 @@
  .explanation {
    background-color: rgba(255, 255, 255, 0.05);
  }
-}
+}
--- a/frontend/src/app/features/quiz/quiz-results/quiz-results.ts
+++ b/frontend/src/app/features/quiz/quiz-results/quiz-results.ts
@@ -42,7 +42,9 @@ export class QuizResultsComponent implements OnInit, OnDestroy {
  // Computed values
  readonly scorePercentage = computed(() => {
    const res = this.results();
-    return res?.percentage ?? 0;
+    console.log(res);
+
+    return res?.summary.score.percentage ?? 0;
  });

  readonly performanceLevel = computed(() => {
@@ -77,20 +79,20 @@ export class QuizResultsComponent implements OnInit, OnDestroy {
  readonly chartData = computed(() => {
    const res = this.results();
    if (!res) return { correct: 0, incorrect: 0, skipped: 0 };
-    
+
    return {
-      correct: res.correctAnswers,
-      incorrect: res.incorrectAnswers,
-      skipped: res.skippedAnswers
+      correct: res.summary.questions.correct,
+      incorrect: res.summary.questions.incorrect,
+      skipped: res.summary.questions.unanswered
    };
  });

  readonly chartPercentages = computed(() => {
    const data = this.chartData();
    const total = data.correct + data.incorrect + data.skipped;
-    
+
    if (total === 0) return { correct: 0, incorrect: 0, skipped: 0 };
-    
+
    return {
      correct: Math.round((data.correct / total) * 100),
      incorrect: Math.round((data.incorrect / total) * 100),
@@ -161,10 +163,10 @@ export class QuizResultsComponent implements OnInit, OnDestroy {
   */
  formatTime(seconds: number): string {
    if (!seconds) return '0s';
-    
+
    const minutes = Math.floor(seconds / 60);
    const secs = seconds % 60;
-    
+
    if (minutes > 0) {
      return `${minutes}m ${secs}s`;
    }
@@ -245,7 +247,7 @@ export class QuizResultsComponent implements OnInit, OnDestroy {
    const results = this.results();
    if (!results) return;

-    const text = `I scored ${results.percentage}% on my quiz! 🎯`;
+    const text = `I scored ${results.summary.score.percentage}% on my quiz! 🎯`;
    const url = window.location.href;

    let shareUrl = '';
--- a/frontend/src/app/features/quiz/quiz-review/quiz-review.html
+++ b/frontend/src/app/features/quiz/quiz-review/quiz-review.html
@@ -65,7 +65,9 @@
            <mat-icon>emoji_events</mat-icon>
          </div>
          <div class="card-info">
-            <div class="card-value">{{ scorePercentage() }}%</div>
+            @let score = results()!.summary.score.total> 0 ? (results()!.summary.score.earned /
+            results()!.summary.score.total) * 100 : 0;
+            <div class="card-value">{{ score }}%</div>
            <div class="card-label">Score</div>
          </div>
        </mat-card-content>
--- a/frontend/src/app/features/quiz/quiz-review/quiz-review.ts
+++ b/frontend/src/app/features/quiz/quiz-review/quiz-review.ts
@@ -87,14 +87,6 @@ export class QuizReviewComponent implements OnInit, OnDestroy {
    this.allQuestions().filter(q => !q.isCorrect).length
  );

-  readonly scorePercentage = computed(() => {
-    const res = this.results();
-    if (res && 'summary' in res) {
-      return res.summary.score.percentage;
-    }
-    return 0;
-  });
-
  readonly sessionInfo = computed(() => {
    const res = this.results();
    if (res && 'session' in res) {