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/Layouts/header/notification/index.tsx

@@ -103,7 +103,7 @@ export function Notification() {
           mutate();
         }}
       >
-        <div className="flex flex-col gap-3 max-w-29">
+        <div className="flex flex-col gap-3 max-w-prose">
           <h2 className="font-lg font-bold">{currentNotification?.title}</h2>
           <p>{currentNotification?.message}</p>
         </div>

src/components/Layouts/header/notification/notification-list.tsx

@@ -16,7 +16,7 @@ const NotificationList = ({
   setUnreadNotificationCount,
   onNotificationClick,
 }: IProps) => {
-  const { data, isLoading } = useGetMyNotifications({ seen: false });
+  const { data, isLoading } = useGetMyNotifications({seen:false});
   useEffect(() => {
     setUnreadNotificationCount(data?.data.length ?? 0);
   }, [data, isLoading]);