feat: agregar funcionalidad para marcar notificaciones como leídas y mejorar el diseño del pie de notificaciones

txclient/src/app/components/Header/Header.tsx

@@ -21,6 +21,7 @@ import {
 } from "@core/Models/SystemNotifications.model";
 import {
     findSystemNotifications,
+    setStateNotificationByUser,
     updateSystemNotification,
 } from "@core/app/user/profile/notifications/Notifications.Service";
 import {
@@ -214,6 +215,29 @@ export default function Header(): React.ReactElement {
         goTo(NOTIFICATIONS_ROUTE);
     };
 
+    const markNotificationsAsRead = async () => {
+        if (!SessionInfo.userId || headerState.notificationsCount === 0) {
+            return;
+        }
+
+        try {
+            await setStateNotificationByUser({
+                state: true,
+                sessionUser: SessionInfo.userId,
+            });
+
+            setNotifications((currentNotifications) =>
+                currentNotifications.map((notification) => ({
+                    ...notification,
+                    readed: true,
+                }))
+            );
+            headerState.setNotificationsCount(0);
+        } catch (error) {
+            console.error("Error marking notifications as read", error);
+        }
+    };
+
     const openNotification = async (notification: ISystemNotification) => {
         setNotificationsOpen(false);
 
@@ -392,13 +416,23 @@ export default function Header(): React.ReactElement {
                                         ))}
                                 </div>
 
-                                <button
-                                    type="button"
-                                    className={style.notificationsFooter}
-                                    onClick={viewAllNotifications}
-                                >
-                                    Ver todas las notificaciones
-                                </button>
+                                <div className={style.notificationsFooterActions}>
+                                    <button
+                                        type="button"
+                                        className={style.notificationsFooter}
+                                        onClick={markNotificationsAsRead}
+                                        disabled={headerState.notificationsCount === 0}
+                                    >
+                                        Marcar como leídas
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className={style.notificationsFooter}
+                                        onClick={viewAllNotifications}
+                                    >
+                                        Ver todas las notificaciones
+                                    </button>
+                                </div>
                             </div>
                         )}
                     </div>

txclient/src/app/components/Header/header.module.css

@@ -185,11 +185,16 @@
     font-weight: 600;
 }
 
+.notificationsFooterActions {
+    display: flex;
+    border-top: 1px solid var(--gray-lighter);
+    background: var(--white);
+}
+
 .notificationsFooter {
     width: 100%;
     padding: 14px 18px;
     border: 0;
-    border-top: 1px solid var(--gray-lighter);
     background: var(--white);
     color: var(--wine-dark);
     cursor: pointer;
@@ -198,11 +203,21 @@
     transition: background-color 0.18s ease, color 0.18s ease;
 }
 
-.notificationsFooter:hover {
+.notificationsFooter + .notificationsFooter {
+    border-left: 1px solid var(--gray-lighter);
+}
+
+.notificationsFooter:hover:not(:disabled) {
     background: var(--wine-lighterX2);
     color: var(--wine-darkest);
 }
 
+.notificationsFooter:disabled {
+    color: var(--gray-dark);
+    cursor: default;
+    opacity: 0.65;
+}
+
 @media (max-width: 600px) {
     .header {
         padding-left: 18px;
@@ -212,4 +227,13 @@
     .notificationsMenu {
         right: -48px;
     }
+
+    .notificationsFooterActions {
+        flex-direction: column;
+    }
+
+    .notificationsFooter + .notificationsFooter {
+        border-left: 0;
+        border-top: 1px solid var(--gray-lighter);
+    }
 }