From ba4a12dfc3431375a9baf67653ff247faf7f9da4 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Wed, 1 Oct 2025 11:16:17 +0330
Subject: [PATCH] feat(notifications): Auto-mark as read and enhance UI

This commit improves the user experience for notifications by automatically marking them as read upon viewing and refining the UI.

- Notifications are now marked as read immediately when the modal is opened, removing the need for an extra confirmation click.
- The "Mark as read" button has been removed from the modal to streamline the user flow.
- In the notification history table, a new reusable `Boolean` component is used to display the 'seen' status, replacing the previous icon-based implementation.
- Long messages in the history table are now truncated to improve readability and prevent layout issues.
- Added hover effects to the notification dropdown list for better visual feedback.
- Standardized the required field indicator color to use the `text-error` class for consistency.
---
 .../FormElements/InputGroup/text-area.tsx     |  2 +-
 .../Layouts/header/notification/index.tsx     |  7 ++--
 .../header/notification/notification-list.tsx |  4 +-
 .../Tables/notification-history/index.tsx     | 16 ++++----
 src/components/ui/Boolean.tsx                 | 19 +++++++++
 src/components/ui/modal.tsx                   | 41 +++++++++++--------
 src/css/style.css                             | 10 ++++-
 7 files changed, 64 insertions(+), 35 deletions(-)
 create mode 100644 src/components/ui/Boolean.tsx

diff --git a/src/components/FormElements/InputGroup/text-area.tsx b/src/components/FormElements/InputGroup/text-area.tsx
index 60ece0a..1f78831 100644
--- a/src/components/FormElements/InputGroup/text-area.tsx
+++ b/src/components/FormElements/InputGroup/text-area.tsx
@@ -52,7 +52,7 @@ export function TextAreaGroup<T extends FieldValues>({
         className="mb-3 block text-body-sm font-medium text-dark dark:text-white"
       >
         {label}
-        {required && <span className="text-red ml-1 select-none">*</span>}
+        {required && <span className="ml-1 select-none text-error">*</span>}
       </label>
 
       <div className="relative mt-3 [&_svg]:pointer-events-none [&_svg]:absolute [&_svg]:left-5.5 [&_svg]:top-5.5">
diff --git a/src/components/Layouts/header/notification/index.tsx b/src/components/Layouts/header/notification/index.tsx
index c8a73d8..82b9163 100644
--- a/src/components/Layouts/header/notification/index.tsx
+++ b/src/components/Layouts/header/notification/index.tsx
@@ -36,6 +36,7 @@ export function Notification() {
     setCurrentNotification(notification);
     setIsModalOpen(true);
     setIsOpen(false);
+    mutate();
   };
 
   return (
@@ -95,15 +96,13 @@ export function Notification() {
 
       <Modal
         isOpen={isModalOpen}
+        showButtons={false}
         onClose={() => {
           setIsModalOpen(false);
         }}
         confirmText="Mark as read"
-        onConfirm={() => {
-          mutate();
-        }}
       >
-        <div className="flex flex-col gap-3 max-w-prose">
+        <div className="flex max-w-prose flex-col gap-3">
           <h2 className="font-lg font-bold">{currentNotification?.title}</h2>
           <p>{currentNotification?.message}</p>
         </div>
diff --git a/src/components/Layouts/header/notification/notification-list.tsx b/src/components/Layouts/header/notification/notification-list.tsx
index d80d11f..0006ac7 100644
--- a/src/components/Layouts/header/notification/notification-list.tsx
+++ b/src/components/Layouts/header/notification/notification-list.tsx
@@ -16,7 +16,7 @@ const NotificationList = ({
   setUnreadNotificationCount,
   onNotificationClick,
 }: IProps) => {
-  const { data, isLoading } = useGetMyNotifications({seen:false});
+  const { data, isLoading } = useGetMyNotifications({ seen: false });
   useEffect(() => {
     setUnreadNotificationCount(data?.data.length ?? 0);
   }, [data, isLoading]);
@@ -34,7 +34,7 @@ const NotificationList = ({
           key={notification.id}
           onClick={() => onNotificationClick(notification)}
         >
-          <div className="cursor-pointer rounded-lg px-1 py-2 hover:bg-gray-2">
+          <div className="cursor-pointer rounded-lg px-1 py-2 transition-all duration-300 hover:bg-gray-2 dark:hover:bg-gray-7">
             <strong className="block text-lg font-medium capitalize text-dark dark:text-white">
               {notification.title}
             </strong>
diff --git a/src/components/Tables/notification-history/index.tsx b/src/components/Tables/notification-history/index.tsx
index 670ff2a..156440f 100644
--- a/src/components/Tables/notification-history/index.tsx
+++ b/src/components/Tables/notification-history/index.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { CheckIcon, CrossIcon, EyeIcon } from "@/assets/icons";
+import { EyeIcon } from "@/assets/icons";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
 import Pagination from "@/components/ui/pagination";
 import Status from "@/components/ui/Status";
@@ -13,9 +13,11 @@ import {
 } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
-import { unixToDate } from "@/utils/shared";
+import { truncateString, unixToDate } from "@/utils/shared";
 import Link from "next/link";
 import { Tooltip } from "react-tooltip";
+
+import Boolean from "@/components/ui/Boolean";
 import useNotificationHistoryTablePresenter from "./useNotificationHistoryTablePresenter";
 
 const NotificationHistoryTable = () => {
@@ -64,7 +66,9 @@ const NotificationHistoryTable = () => {
                     unix: item.created_at,
                   })}
                 </TableCell>
-                <TableCell colSpan={100}>{item.message}</TableCell>
+                <TableCell colSpan={100} className="truncate">
+                  {truncateString(item.message, 20, 20)}
+                </TableCell>
                 <TableCell className="capitalize" colSpan={100}>
                   {item.priority}
                 </TableCell>
@@ -72,11 +76,7 @@ const NotificationHistoryTable = () => {
                   {item.type}
                 </TableCell>
                 <TableCell className="capitalize" colSpan={100}>
-                  {item.seen ? (
-                    <CheckIcon fill="green" width={15} height={15} />
-                  ) : (
-                    <CrossIcon width={20} fill="red" />
-                  )}
+                  <Boolean value={item.seen} />
                 </TableCell>
                 <TableCell colSpan={100}>
                   <Status status={item.status}>{item.status}</Status>
diff --git a/src/components/ui/Boolean.tsx b/src/components/ui/Boolean.tsx
new file mode 100644
index 0000000..90d5d13
--- /dev/null
+++ b/src/components/ui/Boolean.tsx
@@ -0,0 +1,19 @@
+import { CheckIcon, CrossIcon } from "@/assets/icons";
+
+interface IProps {
+  value: boolean;
+}
+
+const Boolean = ({ value }: IProps) => {
+  return (
+    <>
+      {value ? (
+        <CheckIcon fill="green" width={15} height={15} />
+      ) : (
+        <CrossIcon width={20} fill="red" />
+      )}
+    </>
+  );
+};
+
+export default Boolean;
diff --git a/src/components/ui/modal.tsx b/src/components/ui/modal.tsx
index ffb4a80..ae6fe36 100644
--- a/src/components/ui/modal.tsx
+++ b/src/components/ui/modal.tsx
@@ -2,6 +2,7 @@ import { CrossIcon } from "@/assets/icons";
 import { useIsMutating } from "@tanstack/react-query";
 import { ReactNode, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
+import IsVisible from "./IsVisible";
 
 interface ModalProps {
   isOpen: boolean;
@@ -10,6 +11,7 @@ interface ModalProps {
   children: ReactNode;
   confirmText?: string;
   cancelText?: string;
+  showButtons?: boolean;
 }
 
 const Modal: React.FC<ModalProps> = ({
@@ -19,6 +21,7 @@ const Modal: React.FC<ModalProps> = ({
   onConfirm,
   confirmText = "confirm",
   cancelText = "close",
+  showButtons = true,
 }) => {
   const [mounted, setMounted] = useState(false);
   const isMutating = useIsMutating();
@@ -57,24 +60,26 @@ const Modal: React.FC<ModalProps> = ({
         </button>
         <div className="clear-both">{children}</div>
         <div className="flex gap-5">
-          <button
-            type="submit"
-            className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
-            onClick={onConfirm}
-          >
-            {isMutating ? (
-              <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
-            ) : (
-              <span>{confirmText}</span>
-            )}
-          </button>
-          <button
-            type="button"
-            className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
-            onClick={onClose}
-          >
-            {cancelText}
-          </button>
+          <IsVisible condition={showButtons}>
+            <button
+              type="submit"
+              className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
+              onClick={onConfirm}
+            >
+              {isMutating ? (
+                <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
+              ) : (
+                <span>{confirmText}</span>
+              )}
+            </button>
+            <button
+              type="button"
+              className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
+              onClick={onClose}
+            >
+              {cancelText}
+            </button>
+          </IsVisible>
         </div>
       </div>
     </div>
diff --git a/src/css/style.css b/src/css/style.css
index c443050..cca10e3 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -53,6 +53,12 @@
 .rmdp-calendar {
   @apply !p-6 dark:!bg-gray-dark;
 }
+.rmdp-time-picker {
+  @apply dark:!bg-gray-dark;
+}
+.rmdp-time-picker div input {
+  @apply dark:!bg-gray-dark dark:!text-gray-5;
+}
 .rmdp-month-picker {
   @apply dark:!bg-gray-dark;
 }
@@ -95,10 +101,10 @@
   color: inherit !important;
 }
 .rmdp-day.rmdp-range.start {
-  @apply !bg-gray-2 !shadow-none dark:!bg-dark-2 !text-white;
+  @apply !bg-gray-2 !text-white !shadow-none dark:!bg-dark-2;
 }
 .rmdp-day.rmdp-range.end {
-  @apply !bg-gray-2 !shadow-none dark:!bg-dark-2 !text-white;
+  @apply !bg-gray-2 !text-white !shadow-none dark:!bg-dark-2;
 }
 
 .rmdp-day.rmdp-range.start,