finish notifications featur

src/app/ui/header/notificationsButton.tsx

@@ -8,6 +8,7 @@ import { IconNotification } from '@/app/ui/icons/icons';
 import { useActiveNotifications } from '@/app/hooks/react-query/useActiveNotificationsList';
 import { NotificationBody, notificationsMarkAsRead } from '@/app/actions/notificationActions';
 import { useQueryClient } from '@tanstack/react-query';
+import { formatDate } from '@/app/lib/formatDate';
 
 export default function NotificationsButton() {
 	const [isOpen, setIsOpen] = useState(false);
@@ -77,7 +78,7 @@ export default function NotificationsButton() {
 	return (
 		<div className="notification-wrapper" ref={menuRef}>
 			<button
-				className="icon-btn"
+				className={`icon-btn ${notificationList?.unreadCount ? 'active' : ''}`}
 				id="notifications-btn"
 				title="Уведомления"
 				onClick={handleButtonClick}
@@ -85,6 +86,13 @@ export default function NotificationsButton() {
 				<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "20px", height: "20px" }}>
 					<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path>
 				</svg>
+				{notificationList?.unreadCount && (
+					<span
+						className="notification-unread-count"
+					>
+						{notificationList?.unreadCount ? notificationList?.unreadCount : ''}
+					</span>
+				)}
 			</button>
 			<div className={`notification-dropdown ${isOpen ? 'show' : ''}`}>
 				{error ? (
@@ -118,7 +126,7 @@ export default function NotificationsButton() {
 											>
 												<div className="notification-content">
 													<div className="notification-data">
-														{item.createdAt ? item.createdAt : '#'}
+														{item.createdAt ? formatDate(item.createdAt) : '#'}
 													</div>
 
 													{/* <div className="notification-title">

src/app/ui/notifications/notifications-list.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import { useAllNotifications } from '@/app/hooks/react-query/useAllNotificationsList';
 import { notificationsMarkAsRead } from '@/app/actions/notificationActions';
 import { useQueryClient } from '@tanstack/react-query';
+import { formatDate, formatDateTime } from '@/app/lib/formatDate';
 
 export function NotificationsList() {
 	const t = useTranslations('Global');
@@ -88,12 +89,12 @@ export function NotificationsList() {
 		});
 
 		try {
-			/* 			const response = await notificationsMarkAsRead(ids);
-			
-						if (response.success) {
-							await queryClient.invalidateQueries({ queryKey: ['activeNotifications'] });
-							await queryClient.invalidateQueries({ queryKey: ['allNotifications'] });
-						} */
+			const response = await notificationsMarkAsRead(ids);
+
+			if (response.success) {
+				await queryClient.invalidateQueries({ queryKey: ['activeNotifications'] });
+				await queryClient.invalidateQueries({ queryKey: ['allNotifications'] });
+			}
 		} catch (error) {
 			setError(error instanceof Error ? error.message : 'Failed to mark as read');
 		} finally {
@@ -173,7 +174,7 @@ export function NotificationsList() {
 					allNotifications?.notifications.map(item => {
 						return (
 							<div
-								className="notification-item"
+								className={`notification-item ${loadingIds.has(item.id) ? 'loading' : ''} ${item.status}`}
 								key={item.id}
 							>
 								<div
@@ -199,13 +200,13 @@ export function NotificationsList() {
 										<div
 											className="notification-title"
 										>
-											{item.type}
+											{item.type} {item.id}
 										</div>
-										<div
+										{/* 										<div
 											className="notification-status"
 										>
 											{item.status}
-										</div>
+										</div> */}
 									</div>
 									<div
 										className="notification-text"
@@ -218,7 +219,7 @@ export function NotificationsList() {
 										<div
 											className="notification-date"
 										>
-											{item.createdAt}
+											{item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
 										</div>
 
 										<button
@@ -226,7 +227,7 @@ export function NotificationsList() {
 											onClick={() => {
 												removeHandler(item.id);
 											}}
-											disabled={false}
+											disabled={loadingIds.has(item.id)}
 										>
 											{t('remove')}
 										</button>