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

feat(notifications): add notification history page and API

Browse Source 
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
2025-09-25 17:09:42 +03:30
parent b5d3654360
commit 85d95530a8
15 changed files with 400 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(notifications)/notification-history/[id]/page.tsx
+79
View File
@@ -0,0 +1,79 @@
"use client";
import Loading from "@/app/loading";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import IsVisible from "@/components/ui/IsVisible";
import { useGetNotificationDetails } from "@/hooks/queries/useNotificationQueries";
import { BreadcrumbItem } from "@/types/shared";
import { use } from "react";
interface IProps {
params: Promise<{ id: string }>;
}
const NotificationDetailsPage = ({ params }: IProps) => {
const { id } = use(params);
const { data, isLoading } = useGetNotificationDetails(id);
const breadcrumbItems: BreadcrumbItem[] = [
{
href: "/",
name: "Dashboard",
},
{
href: "/notification-history",
name: "Notification history",
},
{
href: `/notification-history/${id}`,
name: "Notification details",
},
];
if (isLoading) return <Loading />;
return (
<>
<Breadcrumb items={breadcrumbItems} />
<ShowcaseSection title={`${data?.data.title}`}>
<div className="mt-4 grid grid-cols-4 gap-15 pb-4">
<IsVisible condition={!!data?.data.message}>
<ShowcaseSection title="Message">
{data?.data.message}
</ShowcaseSection>
</IsVisible>
<IsVisible condition={!!data?.data.event_type}>
<ShowcaseSection title="Event Type">
{data?.data.event_type}
</ShowcaseSection>
</IsVisible>
<IsVisible condition={!!data?.data.link}>
<ShowcaseSection title="Link">{data?.data.link}</ShowcaseSection>
</IsVisible>
<IsVisible condition={!!data?.data.priority}>
<ShowcaseSection title="Priority">
{data?.data.priority}
</ShowcaseSection>
</IsVisible>
<IsVisible condition={!!data?.data.type}>
<ShowcaseSection title="Type">{data?.data.type}</ShowcaseSection>
</IsVisible>
<IsVisible condition={!!data?.data.seen_at}>
<ShowcaseSection title="Seen at">
{data?.data.seen_at}
</ShowcaseSection>
</IsVisible>
<ShowcaseSection title="Is Scheduled">
{data?.data.is_scheduled ? "Yes" : "No"}
</ShowcaseSection>
<ShowcaseSection title="Has seen">
{data?.data.seen ? "Yes" : "No"}
</ShowcaseSection>
</div>
</ShowcaseSection>
</>
);
};
export default NotificationDetailsPage;
src/app/(notifications)/notification-history/page.tsx
+24
View File
@@ -0,0 +1,24 @@
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import NotificationHistoryTable from "@/components/Tables/notification-history";
import { BreadcrumbItem } from "@/types/shared";
const NotificationHistoryPage = () => {
const breadcrumbItems: BreadcrumbItem[] = [
{
href: "/",
name: "Dashboard",
},
{
href: "/notification-history",
name: "Notification history",
},
];
return (
<>
<Breadcrumb items={breadcrumbItems} />
<NotificationHistoryTable />
</>
);
};
export default NotificationHistoryPage;
src/components/Layouts/header/user-info/index.tsx
+8 -5
View File
@@ -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
src/components/Layouts/sidebar/data/index.ts
+7 -1
View File
@@ -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: [],
},
],
},
];
src/components/Layouts/sidebar/icons.tsx
+14
View File
@@ -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 (
src/components/Tables/notification-history/index.tsx
+103
View File
@@ -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;
src/components/Tables/notification-history/useNotificationHistoryTablePresenter.ts
+37
View File
@@ -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;
src/components/ui/Status.tsx
+1
View File
@@ -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"];
src/components/ui/table.tsx
+1 -1
View File
@@ -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}
src/hooks/queries/useNotificationQueries.ts
+27
View File
@@ -0,0 +1,27 @@
import { API_ENDPOINTS } from "@/lib/api";
import { notificationService } from "@/lib/api/services/notification-service";
import { useQuery } from "@tanstack/react-query";
import { useMemo } from "react";
export const useGetNotificationHistoryQuery = (
params?: Record<string, any>,
) => {
const queryKey = useMemo(
() => [API_ENDPOINTS.NOTIFICATIONS.HISTORY, "READ NOTIFICATIONS HISTORY"],
[],
);
return useQuery({
queryKey,
queryFn: () => notificationService.getNotifications(params),
});
};
export const useGetNotificationDetails = (id: string) => {
const queryKey = useMemo(
() => [API_ENDPOINTS.NOTIFICATIONS.DETAILS(id), "NOTIFICATION DETAILS"],
[id],
);
return useQuery({
queryKey,
queryFn: () => notificationService.getNotificationDetails(id),
});
};
src/lib/api/endpoints.ts
+4
View File
@@ -50,4 +50,8 @@ export const API_ENDPOINTS = {
DETAILS: (id: string) => `feedback/${id}`,
DELETE: (id: string) => `feedback/${id}`,
},
NOTIFICATIONS: {
HISTORY: "notifications",
DETAILS: (id: string) => `notifications/view/${id}`,
},
} as const;
src/lib/api/services/notification-service.ts
+37
View File
@@ -0,0 +1,37 @@
import api from "../axios";
import { API_ENDPOINTS } from "../endpoints";
import {
TNotificationDetailsResponse,
TNotificationHistoryResponse,
} from "../types/NotificationHistory";
import { ApiResponse } from "../types/shared";
export const notificationService = {
getNotifications: async (
params?: Record<string, any>,
): Promise<TNotificationHistoryResponse> => {
try {
return (await api.get(API_ENDPOINTS.NOTIFICATIONS.HISTORY, { params }))
.data;
} catch (error) {
console.error(
"ERROR Caught in notification service => getNotifications",
error,
);
throw error;
}
},
getNotificationDetails: async (
id: string,
): Promise<ApiResponse<TNotificationDetailsResponse>> => {
try {
return (await api.get(API_ENDPOINTS.NOTIFICATIONS.DETAILS(id))).data;
} catch (error) {
console.error(
"ERROR Caught in notification service => getNotificationDetails",
error,
);
throw error;
}
},
};
src/lib/api/types/Customers.ts
+3 -3
View File
@@ -31,9 +31,6 @@ const customersSchema = z.object({
username: z.string(),
});
export const customersListResponse = z.object({
customers: z.array(customersSchema),
});
const createCustomerCredentials = z.object({
address: z
.object({
@@ -99,6 +96,9 @@ const createCustomerCredentials = z.object({
"Username must contain only alphanumeric characters",
),
});
export const customersListResponse = z.object({
customers: z.array(customersSchema),
});
const assignCustomerToCompanySchema = z.object({
company_ids: z.array(z.string()),
});
src/lib/api/types/NotificationHistory.ts
+43
View File
@@ -0,0 +1,43 @@
import { z } from "zod";
import { createApiResponseSchema } from "./Factory";
export const notificationSchema = z.object({
created_at: z.string(),
event_type: z.string(),
id: z.string(),
image: z.string(),
is_scheduled: z.boolean(),
link: z.string(),
message: z.string(),
metadata: z.object({
additionalProp1: z.string(),
additionalProp2: z.string(),
additionalProp3: z.string(),
}),
method: z.object({
additionalProp1: z.string(),
additionalProp2: z.string(),
additionalProp3: z.string(),
}),
priority: z.string(),
schedule_at: z.number(),
scheduled_at: z.number(),
seen: z.boolean(),
seen_at: z.number(),
status: z.string(),
title: z.string(),
type: z.string(),
updated_at: z.string(),
user_id: z.string(),
});
const notificationHistoryResponseSchema = createApiResponseSchema(
z.object({
notifications: z.array(notificationSchema),
}),
);
export type TNotificationHistory = z.infer<typeof notificationSchema>;
export type TNotificationDetailsResponse = z.infer<typeof notificationSchema>;
export type TNotificationHistoryResponse = z.infer<
typeof notificationHistoryResponseSchema
>;
src/utils/shared.ts
+12
View File
@@ -6,6 +6,18 @@ export const msToDate = (ms: number) => {
return moment.default(ms).format("YYYY/MM/DD");
};
export const isoStringToDate = ({
hasTime = false,
isoString,
}: {
isoString: string;
hasTime: boolean;
}): string => {
return moment
.default(isoString)
.format(`YYYY/MM/DD ${hasTime ? "HH:MM" : ""}`);
};
export const getStatusColor = <T>(status: T) => {
switch (status) {
case "active":