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/hooks/queries/useNotificationQueries.ts

@@ -16,6 +16,38 @@ export const useGetNotificationHistoryQuery = (
     queryFn: () => notificationService.getNotifications(params),
   });
 };
+export const useGetMyNotifications = (params?: Record<string, any>) => {
+  const queryKey = useMemo(
+    () => [API_ENDPOINTS.NOTIFICATIONS.MY_NOTIFICATIONS, params],
+    [params],
+  );
+  return useQuery({
+    queryKey,
+    queryFn: () => notificationService.getMyNotifications(params),
+  });
+};
+export const useMarkNotificationAsSeen = (
+  id: string,
+  successCallback?: () => void,
+) => {
+  const queryClient = useQueryClient();
+  const mutationKey = useMemo(
+    () => [API_ENDPOINTS.NOTIFICATIONS.MARK_AS_SEEN(id), id],
+    [id],
+  );
+  return useMutation({
+    mutationKey,
+    mutationFn: () => notificationService.markNotificationAsSeen(id),
+    onSuccess: () => {
+      if (successCallback) {
+        successCallback();
+      }
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.NOTIFICATIONS.MY_NOTIFICATIONS],
+      });
+    },
+  });
+};
 export const useGetNotificationDetails = (id: string) => {
   const queryKey = useMemo(
     () => [API_ENDPOINTS.NOTIFICATIONS.DETAILS(id), "NOTIFICATION DETAILS"],
@@ -40,6 +72,9 @@ export const useCreateNotificationQuery = (successCallback?: () => void) => {
       queryClient.invalidateQueries({
         queryKey: [API_ENDPOINTS.NOTIFICATIONS.HISTORY],
       });
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.NOTIFICATIONS.MY_NOTIFICATIONS],
+      });
       if (successCallback) {
         successCallback();
       }