mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(notifications): Auto-mark as read and enhance UI

Browse Source 
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.
This commit is contained in:
AmirReza Jamali
2025-10-01 11:16:17 +03:30
parent 53db465a24
commit ba4a12dfc3
7 changed files with 64 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FormElements/InputGroup/text-area.tsx
+1 -1
View File
@@ -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
+3 -4
View File
@@ -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
+2 -2
View File
@@ -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>
src/components/Tables/notification-history/index.tsx
+8 -8
View File
@@ -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>
src/components/ui/Boolean.tsx
+19
View File
@@ -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
+23 -18
View File
@@ -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>
src/css/style.css
+8 -2
View File
@@ -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,