Notifications System

const createMutation = useMutation({
  mutationFn: alumnosApi.crear,
  onSuccess: (data) => {
    queryClient.invalidateQueries({ queryKey: ["alumnos"] });
    closeEdit();
    const successMsg = data.__successMessage || "Alumno creado correctamente";
    toast.success(successMsg);
  },
});

onError: (error: Error) =>
  toast.error(error.message || "Error al crear el alumno")

try {
  await login({ username: username.trim(), password });
  toast({
    title: "¡Bienvenido!",
    description: `Sesión iniciada como ${username}`,
  });
  navigate(from, { replace: true });
} catch (error) {
  const errorMessage =
    error instanceof Error ? error.message : "Credenciales inválidas";
  setError(errorMessage);
  toast({
    title: "Error de autenticación",
    description: errorMessage,
    variant: "destructive",
  });
}

{error && (
  <div className="px-6">
    <Alert variant="destructive" className="mb-4">
      <AlertDescription>{error}</AlertDescription>
    </Alert>
  </div>
)}

const handleLogout = useCallback(() => {
  const isLogged = getStoredCredentials();
  if (isLogged) {
    clearCredentials();
    navigate("/login");
    toast.info("Sesión cerrada por inactividad");
  }
}, [navigate]);

const isAllowed = await checkEmailWhitelist(email.trim());
if (!isAllowed) {
  setError("Este correo no está autorizado para registrarse");
  toast({
    title: "Email no autorizado",
    description: "Este correo no está en la lista de usuarios autorizados",
    variant: "destructive",
  });
  return;
}

try {
  await register({
    username: username.trim(),
    email: email.trim(),
    password,
    rol: "ADMIN",
    activo: true,
    fechaCreacion: new Date().toISOString(),
  });
  toast({
    title: "Registro exitoso",
    description: "Tu cuenta ha sido creada. Ahora puedes iniciar sesión.",
  });
  navigate("/login");
} catch (error) {
  toast({
    title: "Error al registrar",
    description:
      error instanceof Error ? error.message : "No se pudo crear la cuenta",
    variant: "destructive",
  });
}

if (!username.trim() || !password.trim()) {
  toast({
    title: "Error",
    description: "Por favor completa todos los campos",
    variant: "destructive",
  });
  return;
}

const updateMutation = useMutation({
  mutationFn: ({ id, data }: { id: number; data: Partial<Alumno> }) =>
    alumnosApi.actualizar(id, data),
  onSuccess: (data) => {
    queryClient.invalidateQueries({ queryKey: ["alumnos"] });
    closeEdit();
    const successMsg =
      data.__successMessage || "Alumno actualizado correctamente";
    toast.success(successMsg);
  },
  onError: (error: Error) =>
    toast.error(error.message || "Error al actualizar el alumno"),
});

const deleteMutation = useMutation({
  mutationFn: alumnosApi.eliminar,
  onSuccess: (data) => {
    queryClient.invalidateQueries({ queryKey: ["alumnos"] });
    closeDelete();
    const successMsg =
      data.__successMessage || "Alumno eliminado correctamente";
    toast.success(successMsg);
  },
  onError: (error: Error) =>
    toast.error(error.message || "Error al eliminar el alumno"),
});

**Toast System**:
- Successful action confirmations (green)
- Errors and validations (red)
- Warnings (yellow)
- Information (blue)

**Contextual Messages**:
- Explanatory tooltips on complex fields
- Real-time validation alerts
- Confirmations before destructive actions

{isSubmitting ? (
  <span className="flex items-center gap-2">
    <span className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary-foreground"></span>
    Iniciando sesión...
  </span>
) : (
  <span className="flex items-center gap-2">
    <LogIn className="h-4 w-4" />
    Iniciar Sesión
  </span>
)}

{isCheckingEmail ? (
  <span className="flex items-center gap-2">
    <span className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary-foreground"></span>
    Validando email...
  </span>
) : isSubmitting ? (
  <span className="flex items-center gap-2">
    <span className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary-foreground"></span>
    Registrando...
  </span>
) : (
  <span className="flex items-center gap-2">
    <UserPlus className="h-4 w-4" />
    Crear Cuenta
  </span>
)}