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.
2025-09-25 17:09:42 +03:30
parent b5d3654360
commit 85d95530a8
15 changed files with 400 additions and 10 deletions
@@ -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;