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/app/loading.tsx

@@ -3,10 +3,11 @@ import { cn } from "../lib/utils";
 interface IProps {
   className?: string | null;
 }
+
 const Loading = ({ className = "w-svw h-svh" }: IProps) => {
   return (
     <div className={cn("flex items-center justify-center", className)}>
-      <span className="loading loading-dots loading-xl"></span>
+      <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-primary"></div>
     </div>
   );
 };