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