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/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 (