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/assets/icons.tsx

@@ -228,6 +228,20 @@ export function CalendarIcon(props: IconProps) {
     </svg>
   );
 }
+// export function CheckIcon(props: IconProps) {
+//   return (
+//     <svg
+//       xmlns="http://www.w3.org/2000/svg"
+//       height="24px"
+//       viewBox="0 -960 960 960"
+//       width="24px"
+//       fill="currentColor"
+//       {...props}
+//     >
+//       <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
+//     </svg>
+//   );
+// }
 export function EyeIcon(props: IconProps) {
   return (
     <svg
@@ -415,9 +429,7 @@ export function CrossIcon(props: IconProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      height="24"
       viewBox="0 -960 960 960"
-      width="24"
       fill="currentColor"
       {...props}
     >