import {
AccountCircle,
AlternateEmail,
CheckCircle,
Email,
Lock,
Person,
Save,
Visibility,
VisibilityOff,
} from "@mui/icons-material";
import {
Avatar,
Box,
Button,
Chip,
CircularProgress,
Divider,
IconButton,
InputAdornment,
Paper,
TextField,
Typography,
} from "@mui/material";
import { useMutation } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "sonner";
import styled from "styled-components";
import { updateUsuario } from "../api/usuarios.service";
import { useAuthStore } from "../store/AuthStore";
import {
TOUR_REGISTRY,
isTourCompleted,
resetAllTours,
resetTour,
} from "../tours/registry";
export const MiPerfil = () => {
const { user } = useAuthStore();
const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const {
control,
handleSubmit,
watch,
reset,
formState: { errors, isDirty },
} = useForm({
defaultValues: {
nombres: user?.nombres || "",
apellidos: user?.apellidos || "",
username: user?.username || "",
email: user?.email || "",
password: "",
confirmPassword: "",
},
});
// Mutation para actualizar perfil
const { mutate, isPending } = useMutation({
mutationFn: (data) => updateUsuario(user?.id, data),
onSuccess: (response) => {
toast.success("Perfil actualizado correctamente");
// Actualizar usuario en localStorage
if (response?.data) {
const updatedUser = { ...user, ...response.data };
localStorage.setItem("user", JSON.stringify(updatedUser));
}
// Limpiar campos de contraseña
reset((prev) => ({
...prev,
password: "",
confirmPassword: "",
}));
},
onError: (error) => {
toast.error(
error.response?.data?.message || "Error al actualizar perfil",
);
},
});
// Cargar datos del usuario cuando estén disponibles
useEffect(() => {
if (user) {
reset({
nombres: user.nombres || "",
apellidos: user.apellidos || "",
username: user.username || "",
email: user.email || "",
password: "",
confirmPassword: "",
});
}
}, [user, reset]);
const password = watch("password");
const onSubmit = (data) => {
const payload = {
nombres: data.nombres,
apellidos: data.apellidos,
email: data.email,
};
// Solo incluir password si se ingresó una nueva
if (data.password && data.password.trim() !== "") {
payload.password = data.password;
}
mutate(payload);
};
// Obtener iniciales para el avatar
const getInitials = (nombres, apellidos) => {
const first = nombres?.charAt(0) || "";
const last = apellidos?.charAt(0) || "";
return (first + last).toUpperCase() || "U";
};
const fullName =
[user?.nombres, user?.apellidos].filter(Boolean).join(" ") || "Usuario";
return (
{/* Header */}
Mi Perfil
Administra tu información personal y seguridad
{/* Profile Card */}
{getInitials(user?.nombres, user?.apellidos)}
{fullName}
@{user?.username || "usuario"}
}
label={user?.estado || "Activo"}
color={user?.active ? "success" : "default"}
size="small"
/>
{user?.verificado && (
)}
{/* Form */}
Información Personal
(
),
}}
/>
)}
/>
(
)}
/>
),
}}
/>
(
),
}}
/>
)}
/>
Cambiar Contraseña (opcional)
(
),
endAdornment: (
setShowPassword(!showPassword)}
edge="end"
>
{showPassword ? : }
),
}}
/>
)}
/>
!password ||
value === password ||
"Las contraseñas no coinciden",
}}
render={({ field }) => (
),
endAdornment: (
setShowConfirmPassword(!showConfirmPassword)
}
edge="end"
disabled={!password}
>
{showConfirmPassword ? (
) : (
)}
),
}}
/>
)}
/>
) : (
)
}
disabled={isPending || !isDirty}
sx={{ minWidth: 200 }}
>
{isPending ? "Guardando..." : "Guardar Cambios"}
);
};
function TutorialesSection() {
const [, setTick] = useState(0);
const rerender = () => setTick((t) => t + 1);
const handleResetOne = (key) => {
resetTour(key);
toast.success("Tutorial reiniciado — se mostrará la próxima vez que entres al módulo");
rerender();
};
const handleResetAll = () => {
resetAllTours();
toast.success("Todos los tutoriales fueron reiniciados");
rerender();
};
const grupos = TOUR_REGISTRY.reduce((acc, t) => {
(acc[t.modulo] ||= []).push(t);
return acc;
}, {});
return (
Tutoriales
Reiniciá un tutorial para que vuelva a abrirse automáticamente la próxima vez que entres al módulo.
{Object.entries(grupos).map(([modulo, tours]) => (
{modulo}
{tours.map((t) => {
const done = isTourCompleted(t.key);
return (
{t.label}
);
})}
))}
);
}
const Container = styled.div`
min-height: calc(100vh - 80px);
margin-top: 50px;
padding: 15px;
`;