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/components/Tables/notification-history/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { EyeIcon } from "@/assets/icons";
+import { CheckIcon, CrossIcon, EyeIcon } from "@/assets/icons";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
 import Pagination from "@/components/ui/pagination";
 import Status from "@/components/ui/Status";
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
-import { isoStringToDate } from "@/utils/shared";
+import { unixToDate } from "@/utils/shared";
 import Link from "next/link";
 import { Tooltip } from "react-tooltip";
 import useNotificationHistoryTablePresenter from "./useNotificationHistoryTablePresenter";
@@ -59,9 +59,9 @@ const NotificationHistoryTable = () => {
                 <TableCell colSpan={100}>{item.title}</TableCell>
                 <TableCell colSpan={100}>{item.event_type}</TableCell>
                 <TableCell colSpan={100}>
-                  {isoStringToDate({
+                  {unixToDate({
                     hasTime: true,
-                    isoString: item.created_at,
+                    unix: item.created_at,
                   })}
                 </TableCell>
                 <TableCell colSpan={100}>{item.message}</TableCell>
@@ -72,7 +72,7 @@ const NotificationHistoryTable = () => {
                   {item.type}
                 </TableCell>
                 <TableCell className="capitalize" colSpan={100}>
-                  {item.seen ? "Seen" : "Unseen"}
+                  {item.seen ? <CheckIcon fill="green"/> : <CrossIcon width={15} fill="red" />}
                 </TableCell>
                 <TableCell colSpan={100}>
                   <Status status={item.status}>{item.status}</Status>