feat(notifications): Implement notification details page and card

This commit introduces a dedicated page for viewing the full details of a notification and refactors the related UI components for better modularity and user experience.

Key changes include:
- Created a new reusable `NotificationDetailsCard` component to display notification details, decoupling the presentation logic from the page.
- Refactored the notification details page (`/notification-history/[id]`) to use the new card component, resulting in cleaner code.
- Made notification items in the header dropdown clickable, linking each to its respective details page.
- Added a dedicated "Mark as Read" button to each notification item in the dropdown for improved usability.
- Updated the application's global title metadata for branding consistency.
- Added a specific page title for the Tenders page to improve SEO and navigation.

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

@@ -1,13 +1,10 @@
 "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 { NotificationDetailsCard } from "@/components/ui/notification-details-card";
 import { useGetNotificationDetails } from "@/hooks/queries/useNotificationQueries";
 import { BreadcrumbItem } from "@/types/shared";
-import { unixToDate } from "@/utils/shared";
 import { use } from "react";
-import { capitalize } from "../../../../utils/shared";
 
 interface IProps {
   params: Promise<{ id: string }>;
@@ -35,48 +32,7 @@ const NotificationDetailsPage = ({ params }: IProps) => {
   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.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">
-              {capitalize(data?.data.priority ?? "")}
-            </ShowcaseSection>
-          </IsVisible>
-
-          <IsVisible condition={!!data?.data.type}>
-            <ShowcaseSection title="Type">
-              {capitalize(data?.data.type ?? "")}
-            </ShowcaseSection>
-          </IsVisible>
-          <IsVisible condition={!!data?.data.seen_at}>
-            <ShowcaseSection title="Seen at">
-              {unixToDate({ unix: data?.data.seen_at ?? 0, hasTime: false })}
-            </ShowcaseSection>
-          </IsVisible>
-
-          <ShowcaseSection title="Is Scheduled">
-            {data?.data.is_scheduled ? "Yes" : "No"}
-          </ShowcaseSection>
-          <ShowcaseSection title="Has seen">
-            {data?.data.seen ? "Yes" : "No"}
-          </ShowcaseSection>
-        </div>
-        <hr className="py-4" />
-        <IsVisible condition={!!data?.data.message}>
-          <ShowcaseSection title="Message">
-            {data?.data.message}
-          </ShowcaseSection>
-        </IsVisible>
-      </ShowcaseSection>
+      {data?.data && <NotificationDetailsCard data={data.data} />}
     </>
   );
 };

src/app/layout.tsx

@@ -12,7 +12,7 @@ import { Providers } from "./providers";
 
 export const metadata: Metadata = {
   title: {
-    template: "%s | NextAdmin - Next.js Dashboard Kit",
+    template: "%s | Opp lens",
     default: "Opp lens - panel",
   },
   description:

src/app/tenders/page.tsx

@@ -1,6 +1,9 @@
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import TendersTable from "@/components/Tables/tenders";
-
+import { Metadata } from "next";
+export const metadata:Metadata = {
+  title: "Tenders Page",
+}
 const TendersPage = () => {
   const breadcrumbItems = [
     { name: "Dashboard", href: "/" },