feat(notifications): add notification history page and API
This commit introduces the notification history feature, allowing users to view a log of their past notifications. Key changes include: - Added a "Notifications" link to the sidebar with a new icon. - Defined API endpoints for fetching notification history and details. - Added a "sent" status variant for displaying notification status. Additionally, this commit includes related UI improvements: - The user's full name is now dynamically displayed in the header, replacing the hardcoded placeholder. - Table headers are now styled in uppercase for improved readability and consistency.
This commit is contained in:
AmirReza Jamali
@@ -6,16 +6,16 @@ import {
|
||||
DropdownContent,
|
||||
DropdownTrigger,
|
||||
} from "@/components/ui/dropdown";
|
||||
import { useUser } from "@/contexts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { LogOutIcon, SettingsIcon, UserIcon } from "./icons";
|
||||
import { useUser } from "@/contexts";
|
||||
|
||||
export function UserInfo() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { logout } = useUser();
|
||||
const { logout, user } = useUser();
|
||||
const USER = {
|
||||
name: "John Smith",
|
||||
email: "johnson@nextadmin.com",
|
||||
@@ -28,16 +28,19 @@ export function UserInfo() {
|
||||
<span className="sr-only">My Account</span>
|
||||
|
||||
<figure className="flex items-center gap-3">
|
||||
<Image
|
||||
<div className="rounded-full bg-gray-3 p-3.5 dark:bg-dark-3">
|
||||
<UserIcon />
|
||||
</div>
|
||||
{/* <Image
|
||||
src={USER.img}
|
||||
className="size-12"
|
||||
alt={`Avatar of ${USER.name}`}
|
||||
role="presentation"
|
||||
width={200}
|
||||
height={200}
|
||||
/>
|
||||
/> */}
|
||||
<figcaption className="flex items-center gap-1 font-medium text-dark dark:text-dark-6 max-[1024px]:sr-only">
|
||||
<span>{USER.name}</span>
|
||||
<span>{user?.full_name}</span>
|
||||
|
||||
<ChevronUpIcon
|
||||
aria-hidden
|
||||
|
||||
@@ -6,7 +6,7 @@ const navSubItemSchema: z.ZodType<any> = z.lazy(() =>
|
||||
title: z.string(),
|
||||
url: z.string(),
|
||||
icon: z.any(),
|
||||
items: z.array(navSubItemSchema).default([]),
|
||||
items: z.array(navSubItemSchema),
|
||||
}),
|
||||
);
|
||||
|
||||
@@ -66,6 +66,12 @@ export const NAV_DATA: NavData = [
|
||||
icon: Icons.Table,
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Notifications",
|
||||
url: "/notification-history",
|
||||
icon: Icons.NotificationIcon,
|
||||
items: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -19,6 +19,20 @@ export function ChevronUp(props: PropsType) {
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
export function NotificationIcon(props: PropsType) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
width="24px"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path d="M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function Building(props: PropsType) {
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
import { EyeIcon } from "@/assets/icons";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import Pagination from "@/components/ui/pagination";
|
||||
import Status from "@/components/ui/Status";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { isoStringToDate } from "@/utils/shared";
|
||||
import useNotificationHistoryTablePresenter from "./useNotificationHistoryTablePresenter";
|
||||
|
||||
const NotificationHistoryTable = () => {
|
||||
const {
|
||||
columns,
|
||||
isLoading,
|
||||
metadata,
|
||||
notificationHistory,
|
||||
pathName,
|
||||
router,
|
||||
setParams,
|
||||
} = useNotificationHistoryTablePresenter();
|
||||
|
||||
return (
|
||||
<ShowcaseSection>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{columns.map((column) => (
|
||||
<TableHead colSpan={100} key={column}>
|
||||
{column}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading && <TableSkeleton column={columns.length} />}
|
||||
<TableBody>
|
||||
{!notificationHistory?.length ? (
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<h2>No notifications</h2>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
notificationHistory.map((item, index) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell colSpan={100}>{index + 1}</TableCell>
|
||||
<TableCell colSpan={100}>{item.title}</TableCell>
|
||||
<TableCell colSpan={100}>{item.event_type}</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
{isoStringToDate({
|
||||
hasTime: true,
|
||||
isoString: item.created_at,
|
||||
})}
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>{item.message}</TableCell>
|
||||
<TableCell className="capitalize" colSpan={100}>
|
||||
{item.priority}
|
||||
</TableCell>
|
||||
<TableCell className="capitalize" colSpan={100}>
|
||||
{item.type}
|
||||
</TableCell>
|
||||
<TableCell className="capitalize" colSpan={100}>
|
||||
{item.seen ? "Seen" : "Unseen"}
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
<Status status={item.status}>{item.status}</Status>
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
<button
|
||||
onClick={() => {
|
||||
router.push(`${pathName}/${item.id}`);
|
||||
}}
|
||||
>
|
||||
<EyeIcon />
|
||||
</button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Pagination
|
||||
currentPage={metadata?.page ? metadata?.page - 1 : 1}
|
||||
totalPages={metadata?.pages ?? 1}
|
||||
onPageChange={(e) => {
|
||||
setParams((currentParams) => ({
|
||||
...currentParams,
|
||||
offset: e.selected * (metadata?.limit ?? 10),
|
||||
limit: metadata?.limit ?? 1000,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</ShowcaseSection>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationHistoryTable;
|
||||
@@ -0,0 +1,37 @@
|
||||
"use client";
|
||||
import { apiDefaultParams } from "@/constants/Api_Params";
|
||||
import { useGetNotificationHistoryQuery } from "@/hooks/queries/useNotificationQueries";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
const useNotificationHistoryTablePresenter = () => {
|
||||
const [params, setParams] = useState<Record<string, any>>({
|
||||
...apiDefaultParams,
|
||||
});
|
||||
const { data, isLoading } = useGetNotificationHistoryQuery(params);
|
||||
const columns: string[] = [
|
||||
"row",
|
||||
"title",
|
||||
"channel",
|
||||
"created at",
|
||||
"message",
|
||||
"priority",
|
||||
"type",
|
||||
"seen",
|
||||
"status",
|
||||
"actions",
|
||||
];
|
||||
const pathName = usePathname();
|
||||
const router = useRouter();
|
||||
return {
|
||||
notificationHistory: data?.data.notifications,
|
||||
metadata: data?.meta,
|
||||
isLoading,
|
||||
columns,
|
||||
router,
|
||||
pathName,
|
||||
setParams,
|
||||
};
|
||||
};
|
||||
|
||||
export default useNotificationHistoryTablePresenter;
|
||||
@@ -22,6 +22,7 @@ const Status = ({ status, children }: IProps) => {
|
||||
"success",
|
||||
"verified",
|
||||
"published",
|
||||
"sent"
|
||||
];
|
||||
const blues = ["awarded", "processing", "in-review", "scheduled"];
|
||||
const yellows = ["pending", "warning", "on-hold", "delayed"];
|
||||
|
||||
@@ -70,7 +70,7 @@ export function TableHead({
|
||||
return (
|
||||
<th
|
||||
className={cn(
|
||||
"h-12 px-4 text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0",
|
||||
"h-12 px-4 text-left align-middle font-medium uppercase text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
Reference in New Issue
Block a user