feat(notifications): Implement functional header notification dropdown

This commit replaces the static notification dropdown in the header with a fully functional component that fetches live data from the API.

Key features include:
- Fetches and displays the latest notifications.
- Shows a badge with the count of unseen notifications.
- Opens a modal with notification details upon clicking an item.
- Marks notifications as seen when they are viewed.

Additionally, this commit includes several related improvements:
- refactor: Replaced the global loading component with a custom Tailwind CSS spinner for a consistent look and feel.
- feat: Enhanced the DatePicker component to optionally include a time picker.
- style: Improved the layout of the notification details page by moving the message to a dedicated section and capitalizing the 'priority' and 'type' fields for better readability.

src/lib/api/endpoints.ts

@@ -54,5 +54,7 @@ export const API_ENDPOINTS = {
     HISTORY: "notifications",
     CREATE: "notifications",
     DETAILS: (id: string) => `notifications/view/${id}`,
+    MY_NOTIFICATIONS: "notifications/my",
+    MARK_AS_SEEN: (id: string) => `notifications/mark-seen/${id}`,
   },
 } as const;

src/lib/api/services/notification-service.ts

@@ -8,6 +8,32 @@ import {
 import { ApiResponse } from "../types/shared";
 
 export const notificationService = {
+  getMyNotifications: async (
+    params?: Record<string, any>,
+  ): Promise<TNotificationHistoryResponse> => {
+    try {
+      return (
+        await api.get(API_ENDPOINTS.NOTIFICATIONS.MY_NOTIFICATIONS, { params })
+      ).data;
+    } catch (error) {
+      console.error(
+        "ERROR Caught in notification service => getMyNotifications",
+        error,
+      );
+      throw error;
+    }
+  },
+  markNotificationAsSeen: async (id: string) => {
+    try {
+      return (await api.get(API_ENDPOINTS.NOTIFICATIONS.MARK_AS_SEEN(id))).data;
+    } catch (error) {
+      console.error(
+        "ERROR Caught in notification service => markNotificationAsRead",
+        error,
+      );
+      throw error;
+    }
+  },
   getNotifications: async (
     params?: Record<string, any>,
   ): Promise<TNotificationHistoryResponse> => {