fix mark as read and some UI/UX

Author: Fxdonad

README.md

@@ -165,22 +165,18 @@ Dự án Angular này áp dụng nhiều **design pattern chuẩn** để đảm
 - **Guards** (`AuthGuard`, `RoleGuard`) áp dụng strategy để quyết định quyền truy cập.
 - **Environments** (`dev`, `staging`, `prod`) chọn cấu hình phù hợp theo môi trường.
 
-### 6. Facade Pattern
-- **Router Manager** gom logic routing vào 1 chỗ.
-- **NgRx Facade** (nếu sử dụng) để tách component khỏi chi tiết state management.
-
-### 7. Template Pattern
+### 6. Template Pattern
 - Các **layout** (`header`, `sidebar`, `footer`) định nghĩa khung sẵn, feature module nhúng nội dung vào khu vực content.
 
-### 8. Smart & Dumb Components (Container/Presenter)
+### 7. Smart & Dumb Components (Container/Presenter)
 - Component **Smart** xử lý logic, data fetching, và state.
 - Component **Dumb** nhận `@Input()` và emit `@Output()`, chỉ chịu trách nhiệm hiển thị.
 
-### 9. Decorator Pattern
+### 8. Decorator Pattern
 - Angular decorators: `@Component`, `@Directive`, `@Pipe`, `@Injectable`.
 - Cho phép mở rộng chức năng mà không sửa code gốc.
 
-### 10. DTO Pattern
+### 9. DTO Pattern
 - Các **model** trong `core/models` quản lý dữ liệu giữa API và component, đảm bảo type safety.
 
 ---

src/app/core/services/config-service/api.enpoints.ts

@@ -288,7 +288,7 @@ export const API_CONFIG = {
       ADD_ADMIN: '/identity/admin',
       ADD_STUDENT: '/identity/teacher',
       ADD_TEACHER: '/identity/user',
-      MARK_AS_READ_NOTIFICATION: '/my/mark-read',
+      MARK_AS_READ_NOTIFICATION: '/notification/my/mark-read',
     },
     PUT: {
       EDIT_FILE: (id: string) => `/file/api/FileDocument/edit/${id}`,

src/app/features/excercise/exercise-pages/exercise-details/exercise-details.component.html

@@ -158,7 +158,7 @@ <h2>{{ exercise.title }}</h2>
       <div class="stats">
         <span title="Số câu hỏi"
           ><i class="fa-regular fa-question-circle"></i>
-          {{ exercise.quizDetail?.totalElements ?? 0 }}</span
+          {{ exercise.quizDetail?.totalElements ?? 0 }} Câu</span
         >
         <span title="Thời lượng"
           ><i class="fa-regular fa-hourglass-half"></i>
@@ -199,6 +199,8 @@ <h2>{{ exercise.title }}</h2>
         @for (q of exercise.quizDetail?.questions; track q; let i = $index) {
         <div class="question-item">
           <div class="question-header">
+            <div class="question-number-index">Câu hỏi số {{ i + 1 }}</div>
+
             <div class="btn-control">
               @if (isActionActive) {
               <button

src/app/features/excercise/exercise-pages/exercise-details/exercise-details.component.scss

@@ -341,6 +341,10 @@
                 }
               }
             }
+
+            .question-number-index {
+              font-weight: 700;
+            }
           }
           .confirm-modal-overlay {
             position: fixed;

src/app/shared/components/my-shared/header/header.ts

@@ -15,6 +15,7 @@ import { SetPasswordModalComponent } from '../../../../features/auth/components/
 import { NotificationModalComponent } from './notification-modal/notification-modal.component';
 import { NotificationSocketService } from '../../../../core/services/socket-service/notification-socket.service';
 import { NotificationListService } from '../../../../core/services/api-service/notification-list.service';
+import { sendNotification } from '../../../utils/notification';
 
 @Component({
   selector: 'app-header',
@@ -82,18 +83,14 @@ export class HeaderComponent {
       localStorage.getItem('needPasswordSetup') || 'false'
     );
 
-    // 👇 Đăng ký lắng nghe notification từ socket
-    this.notificationService
-      .listenNoticeCount()
-      .subscribe((event: { unread: number }) => {
-        console.log('Header nhận count notification:', event.unread);
-
-        // Tăng counter
-        this.notificationCount = event.unread;
+    //Đăng ký lắng nghe notification từ socket
+    this.notificationService.listenNoticeCount().subscribe((event) => {
+      this.notificationCount = event.unread;
+    });
 
-        // Nếu muốn push vào modal hoặc show toast
-        // this.notifications.unshift(event);
-      });
+    this.notificationService.listenNotifications().subscribe((notice) => {
+      sendNotification(this.store, 'Thông báo mới', notice.body, 'info');
+    });
 
     this.getCountNotice();
   }