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;