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/components/ui/modal.tsx

@@ -8,6 +8,8 @@ interface ModalProps {
   onClose: () => void;
   onConfirm?: () => void;
   children: ReactNode;
+  confirmText?: string;
+  cancelText?: string;
 }
 
 const Modal: React.FC<ModalProps> = ({
@@ -15,6 +17,8 @@ const Modal: React.FC<ModalProps> = ({
   onClose,
   children,
   onConfirm,
+  confirmText = "confirm",
+  cancelText = "close",
 }) => {
   const [mounted, setMounted] = useState(false);
   const isMutating = useIsMutating();
@@ -55,21 +59,21 @@ const Modal: React.FC<ModalProps> = ({
         <div className="flex gap-5">
           <button
             type="submit"
-            className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
+            className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
             onClick={onConfirm}
           >
             {isMutating ? (
               <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
             ) : (
-              "Confirm"
+              <span>{confirmText}</span>
             )}
           </button>
           <button
             type="button"
-            className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
+            className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
             onClick={onClose}
           >
-            Close
+            {cancelText}
           </button>
         </div>
       </div>