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.

src/app/(notifications)/notification-history/[id]/page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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