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.

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">

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>

src/components/Layouts/header/notification/notification-list.tsx

@@ -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>

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 ? (
+                  <Boolean value={item.seen} />
-                    <CheckIcon fill="green" width={15} height={15} />
-                  ) : (
-                    <CrossIcon width={20} fill="red" />
-                  )}
                 </TableCell>
                 <TableCell colSpan={100}>
                   <Status status={item.status}>{item.status}</Status>

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;

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,6 +60,7 @@ const Modal: React.FC<ModalProps> = ({
         </button>
         <div className="clear-both">{children}</div>
         <div className="flex gap-5">
+          <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"
@@ -75,6 +79,7 @@ const Modal: React.FC<ModalProps> = ({
             >
               {cancelText}
             </button>
+          </IsVisible>
         </div>
       </div>
     </div>

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,