Improve frontend 5
This commit is contained in:
Urtzi Alfaro
@@ -1,49 +1,173 @@
|
||||
import React, { useState } from 'react';
|
||||
import { User, Mail, Phone, MapPin, Building, Shield, Activity, Settings, Edit3, Lock, Bell, Download } from 'lucide-react';
|
||||
import { Button, Card, Badge, Avatar, Input, ProgressBar } from '../../../../components/ui';
|
||||
import { User, Mail, Phone, Lock, Globe, Clock, Camera, Save, X } from 'lucide-react';
|
||||
import { Button, Card, Avatar, Input, Select } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { ProfileSettings } from '../../../../components/domain/auth';
|
||||
import { useAuthUser } from '../../../../stores/auth.store';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
|
||||
interface ProfileFormData {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
language: string;
|
||||
timezone: string;
|
||||
}
|
||||
|
||||
interface PasswordData {
|
||||
currentPassword: string;
|
||||
newPassword: string;
|
||||
confirmPassword: string;
|
||||
}
|
||||
|
||||
const ProfilePage: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState('profile');
|
||||
const user = useAuthUser();
|
||||
const { showToast } = useToast();
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [userInfo, setUserInfo] = useState({
|
||||
name: 'María González',
|
||||
email: 'maria.gonzalez@panaderia.com',
|
||||
phone: '+34 123 456 789',
|
||||
address: 'Calle Mayor 123, Madrid',
|
||||
bakery: 'Panadería La Tradicional',
|
||||
role: 'Propietario'
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [showPasswordForm, setShowPasswordForm] = useState(false);
|
||||
|
||||
const [profileData, setProfileData] = useState<ProfileFormData>({
|
||||
first_name: 'María',
|
||||
last_name: 'González Pérez',
|
||||
email: 'admin@bakery.com',
|
||||
phone: '+34 612 345 678',
|
||||
language: 'es',
|
||||
timezone: 'Europe/Madrid'
|
||||
});
|
||||
|
||||
const mockProfileStats = {
|
||||
profileCompletion: 85,
|
||||
securityScore: 94,
|
||||
lastLogin: '2 horas',
|
||||
activeSessions: 2,
|
||||
twoFactorEnabled: false,
|
||||
passwordLastChanged: '2 meses'
|
||||
const [passwordData, setPasswordData] = useState<PasswordData>({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
const languageOptions = [
|
||||
{ value: 'es', label: 'Español' },
|
||||
{ value: 'ca', label: 'Català' },
|
||||
{ value: 'en', label: 'English' }
|
||||
];
|
||||
|
||||
const timezoneOptions = [
|
||||
{ value: 'Europe/Madrid', label: 'Madrid (CET/CEST)' },
|
||||
{ value: 'Atlantic/Canary', label: 'Canarias (WET/WEST)' },
|
||||
{ value: 'Europe/London', label: 'Londres (GMT/BST)' }
|
||||
];
|
||||
|
||||
const validateProfile = (): boolean => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!profileData.first_name.trim()) {
|
||||
newErrors.first_name = 'El nombre es requerido';
|
||||
}
|
||||
|
||||
if (!profileData.last_name.trim()) {
|
||||
newErrors.last_name = 'Los apellidos son requeridos';
|
||||
}
|
||||
|
||||
if (!profileData.email.trim()) {
|
||||
newErrors.email = 'El email es requerido';
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(profileData.email)) {
|
||||
newErrors.email = 'Email inválido';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
setIsEditing(false);
|
||||
console.log('Profile updated:', userInfo);
|
||||
const validatePassword = (): boolean => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!passwordData.currentPassword) {
|
||||
newErrors.currentPassword = 'Contraseña actual requerida';
|
||||
}
|
||||
|
||||
if (!passwordData.newPassword) {
|
||||
newErrors.newPassword = 'Nueva contraseña requerida';
|
||||
} else if (passwordData.newPassword.length < 8) {
|
||||
newErrors.newPassword = 'Mínimo 8 caracteres';
|
||||
}
|
||||
|
||||
if (passwordData.newPassword !== passwordData.confirmPassword) {
|
||||
newErrors.confirmPassword = 'Las contraseñas no coinciden';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsEditing(false);
|
||||
const handleSaveProfile = async () => {
|
||||
if (!validateProfile()) return;
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
setIsEditing(false);
|
||||
showToast({
|
||||
type: 'success',
|
||||
title: 'Perfil actualizado',
|
||||
message: 'Tu información ha sido guardada correctamente'
|
||||
});
|
||||
} catch (error) {
|
||||
showToast({
|
||||
type: 'error',
|
||||
title: 'Error',
|
||||
message: 'No se pudo actualizar tu perfil'
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEnable2FA = () => {
|
||||
console.log('Enabling 2FA');
|
||||
const handleChangePassword = async () => {
|
||||
if (!validatePassword()) return;
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
setShowPasswordForm(false);
|
||||
setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
|
||||
showToast({
|
||||
type: 'success',
|
||||
title: 'Contraseña actualizada',
|
||||
message: 'Tu contraseña ha sido cambiada correctamente'
|
||||
});
|
||||
} catch (error) {
|
||||
showToast({
|
||||
type: 'error',
|
||||
title: 'Error',
|
||||
message: 'No se pudo cambiar tu contraseña'
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangePassword = () => {
|
||||
console.log('Change password');
|
||||
const handleInputChange = (field: keyof ProfileFormData) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setProfileData(prev => ({ ...prev, [field]: e.target.value }));
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleManageSessions = () => {
|
||||
console.log('Manage sessions');
|
||||
const handleSelectChange = (field: keyof ProfileFormData) => (value: string) => {
|
||||
setProfileData(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handlePasswordChange = (field: keyof PasswordData) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setPasswordData(prev => ({ ...prev, [field]: e.target.value }));
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -51,329 +175,199 @@ const ProfilePage: React.FC = () => {
|
||||
<PageHeader
|
||||
title="Mi Perfil"
|
||||
description="Gestiona tu información personal y configuración de cuenta"
|
||||
action={
|
||||
<Button onClick={() => setIsEditing(!isEditing)}>
|
||||
<Edit3 className="w-4 h-4 mr-2" />
|
||||
{isEditing ? 'Guardar Cambios' : 'Editar Perfil'}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Profile Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Perfil Completado</p>
|
||||
<p className="text-2xl font-bold text-[var(--color-success)]">{mockProfileStats.profileCompletion}%</p>
|
||||
</div>
|
||||
<User className="h-8 w-8 text-[var(--color-success)]" />
|
||||
{/* Profile Header */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="relative">
|
||||
<Avatar
|
||||
src="https://images.unsplash.com/photo-1494790108755-2616b612b372?w=150&h=150&fit=crop&crop=face"
|
||||
name={`${profileData.first_name} ${profileData.last_name}`}
|
||||
size="xl"
|
||||
className="w-20 h-20"
|
||||
/>
|
||||
<button className="absolute -bottom-1 -right-1 bg-color-primary text-white rounded-full p-2 shadow-lg hover:bg-color-primary-dark transition-colors">
|
||||
<Camera className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Seguridad</p>
|
||||
<p className="text-2xl font-bold text-[var(--color-info)]">{mockProfileStats.securityScore}%</p>
|
||||
</div>
|
||||
<Shield className="h-8 w-8 text-[var(--color-info)]" />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Último Acceso</p>
|
||||
<p className="text-2xl font-bold text-[var(--text-primary)]">{mockProfileStats.lastLogin}</p>
|
||||
</div>
|
||||
<Activity className="h-8 w-8 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Sesiones</p>
|
||||
<p className="text-2xl font-bold text-purple-600">{mockProfileStats.activeSessions}</p>
|
||||
</div>
|
||||
<div className="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
|
||||
<Settings className="h-5 w-5 text-purple-600" />
|
||||
<div className="flex-1">
|
||||
<h1 className="text-2xl font-bold text-text-primary mb-1">
|
||||
{profileData.first_name} {profileData.last_name}
|
||||
</h1>
|
||||
<p className="text-text-secondary">{profileData.email}</p>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<span className="text-sm text-text-tertiary">En línea</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">2FA</p>
|
||||
<p className="text-lg font-bold text-[var(--color-warning)]">{mockProfileStats.twoFactorEnabled ? 'Activo' : 'Pendiente'}</p>
|
||||
</div>
|
||||
<Lock className="h-8 w-8 text-[var(--color-warning)]" />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">Contraseña</p>
|
||||
<p className="text-lg font-bold text-indigo-600">{mockProfileStats.passwordLastChanged}</p>
|
||||
</div>
|
||||
<div className="h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center">
|
||||
<Shield className="h-5 w-5 text-indigo-600" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tabs Navigation */}
|
||||
<div className="border-b border-[var(--border-primary)]">
|
||||
<nav className="-mb-px flex space-x-8">
|
||||
<button
|
||||
onClick={() => setActiveTab('profile')}
|
||||
className={`py-2 px-1 border-b-2 font-medium text-sm ${
|
||||
activeTab === 'profile'
|
||||
? 'border-orange-500 text-[var(--color-primary)]'
|
||||
: 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
|
||||
}`}
|
||||
>
|
||||
Información Personal
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('security')}
|
||||
className={`py-2 px-1 border-b-2 font-medium text-sm ${
|
||||
activeTab === 'security'
|
||||
? 'border-orange-500 text-[var(--color-primary)]'
|
||||
: 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
|
||||
}`}
|
||||
>
|
||||
Seguridad
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('activity')}
|
||||
className={`py-2 px-1 border-b-2 font-medium text-sm ${
|
||||
activeTab === 'activity'
|
||||
? 'border-orange-500 text-[var(--color-primary)]'
|
||||
: 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
|
||||
}`}
|
||||
>
|
||||
Actividad
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
{activeTab === 'profile' && (
|
||||
<Card>
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-lg font-medium text-[var(--text-primary)]">Información Personal</h3>
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Exportar Datos
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Avatar and Basic Info */}
|
||||
<div className="flex items-center gap-6 mb-8">
|
||||
<Avatar
|
||||
src="/api/placeholder/120/120"
|
||||
alt={userInfo.name}
|
||||
size="lg"
|
||||
className="w-20 h-20"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-xl font-semibold text-[var(--text-primary)]">{userInfo.name}</h2>
|
||||
<p className="text-[var(--text-secondary)]">{userInfo.role}</p>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Badge variant="success">Verificado</Badge>
|
||||
<Badge variant="info">Premium</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Fields */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
|
||||
<User className="w-4 h-4 inline mr-2" />
|
||||
Nombre Completo
|
||||
</label>
|
||||
<Input
|
||||
value={userInfo.name}
|
||||
onChange={(e) => setUserInfo({...userInfo, name: e.target.value})}
|
||||
disabled={!isEditing}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
|
||||
<Mail className="w-4 h-4 inline mr-2" />
|
||||
Email
|
||||
</label>
|
||||
<Input
|
||||
value={userInfo.email}
|
||||
onChange={(e) => setUserInfo({...userInfo, email: e.target.value})}
|
||||
disabled={!isEditing}
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
|
||||
<Phone className="w-4 h-4 inline mr-2" />
|
||||
Teléfono
|
||||
</label>
|
||||
<Input
|
||||
value={userInfo.phone}
|
||||
onChange={(e) => setUserInfo({...userInfo, phone: e.target.value})}
|
||||
disabled={!isEditing}
|
||||
type="tel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
|
||||
<Building className="w-4 h-4 inline mr-2" />
|
||||
Panadería
|
||||
</label>
|
||||
<Input
|
||||
value={userInfo.bakery}
|
||||
onChange={(e) => setUserInfo({...userInfo, bakery: e.target.value})}
|
||||
disabled={!isEditing}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
|
||||
<MapPin className="w-4 h-4 inline mr-2" />
|
||||
Dirección
|
||||
</label>
|
||||
<Input
|
||||
value={userInfo.address}
|
||||
onChange={(e) => setUserInfo({...userInfo, address: e.target.value})}
|
||||
disabled={!isEditing}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
{isEditing && (
|
||||
<div className="flex gap-3 pt-6 mt-6 border-t border-[var(--border-primary)]">
|
||||
<Button onClick={handleSave}>Guardar Cambios</Button>
|
||||
<Button variant="outline" onClick={handleCancel}>Cancelar</Button>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{!isEditing && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<User className="w-4 h-4" />
|
||||
Editar Perfil
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowPasswordForm(!showPasswordForm)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Lock className="w-4 h-4" />
|
||||
Cambiar Contraseña
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{activeTab === 'security' && (
|
||||
<Card>
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-lg font-medium text-[var(--text-primary)]">Configuración de Seguridad</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<Shield className="w-5 h-5 text-[var(--color-info)]" />
|
||||
<div>
|
||||
<p className="font-medium text-[var(--text-primary)]">Autenticación de Dos Factores</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">Protege tu cuenta con 2FA</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant={mockProfileStats.twoFactorEnabled ? "success" : "warning"}>
|
||||
{mockProfileStats.twoFactorEnabled ? "Activo" : "Pendiente"}
|
||||
</Badge>
|
||||
<Button variant="outline" size="sm" onClick={handleEnable2FA}>
|
||||
{mockProfileStats.twoFactorEnabled ? "Desactivar" : "Activar"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<Lock className="w-5 h-5 text-[var(--color-primary)]" />
|
||||
<div>
|
||||
<p className="font-medium text-[var(--text-primary)]">Contraseña</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">Actualizada hace {mockProfileStats.passwordLastChanged}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={handleChangePassword}>
|
||||
Cambiar
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<Settings className="w-5 h-5 text-purple-600" />
|
||||
<div>
|
||||
<p className="font-medium text-[var(--text-primary)]">Sesiones Activas</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">{mockProfileStats.activeSessions} dispositivos conectados</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={handleManageSessions}>
|
||||
Gestionar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Profile Form */}
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Información Personal</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
<Input
|
||||
label="Nombre"
|
||||
value={profileData.first_name}
|
||||
onChange={handleInputChange('first_name')}
|
||||
error={errors.first_name}
|
||||
disabled={!isEditing || isLoading}
|
||||
leftIcon={<User className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Apellidos"
|
||||
value={profileData.last_name}
|
||||
onChange={handleInputChange('last_name')}
|
||||
error={errors.last_name}
|
||||
disabled={!isEditing || isLoading}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="email"
|
||||
label="Correo Electrónico"
|
||||
value={profileData.email}
|
||||
onChange={handleInputChange('email')}
|
||||
error={errors.email}
|
||||
disabled={!isEditing || isLoading}
|
||||
leftIcon={<Mail className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="tel"
|
||||
label="Teléfono"
|
||||
value={profileData.phone}
|
||||
onChange={handleInputChange('phone')}
|
||||
error={errors.phone}
|
||||
disabled={!isEditing || isLoading}
|
||||
placeholder="+34 600 000 000"
|
||||
leftIcon={<Phone className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Idioma"
|
||||
options={languageOptions}
|
||||
value={profileData.language}
|
||||
onChange={handleSelectChange('language')}
|
||||
disabled={!isEditing || isLoading}
|
||||
leftIcon={<Globe className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Zona Horaria"
|
||||
options={timezoneOptions}
|
||||
value={profileData.timezone}
|
||||
onChange={handleSelectChange('timezone')}
|
||||
disabled={!isEditing || isLoading}
|
||||
leftIcon={<Clock className="w-4 h-4" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isEditing && (
|
||||
<div className="flex gap-3 mt-6 pt-4 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsEditing(false)}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSaveProfile}
|
||||
isLoading={isLoading}
|
||||
loadingText="Guardando..."
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
Guardar Cambios
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{activeTab === 'activity' && (
|
||||
<Card>
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-lg font-medium text-[var(--text-primary)]">Actividad Reciente</h3>
|
||||
</div>
|
||||
{/* Password Change Form */}
|
||||
{showPasswordForm && (
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Cambiar Contraseña</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 max-w-4xl">
|
||||
<Input
|
||||
type="password"
|
||||
label="Contraseña Actual"
|
||||
value={passwordData.currentPassword}
|
||||
onChange={handlePasswordChange('currentPassword')}
|
||||
error={errors.currentPassword}
|
||||
disabled={isLoading}
|
||||
leftIcon={<Lock className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<Activity className="w-5 h-5 text-green-500" />
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-[var(--text-primary)]">Inicio de sesión</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">Hace 2 horas desde Chrome en Madrid, España</p>
|
||||
</div>
|
||||
<span className="text-xs text-[var(--text-tertiary)]">Hoy 14:30</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||
<User className="w-5 h-5 text-blue-500" />
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-[var(--text-primary)]">Perfil actualizado</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">Se modificó la información de contacto</p>
|
||||
</div>
|
||||
<span className="text-xs text-[var(--text-tertiary)]">Ayer 09:15</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full"></div>
|
||||
<Shield className="w-5 h-5 text-orange-500" />
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-[var(--text-primary)]">Contraseña cambiada</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">Contraseña actualizada exitosamente</p>
|
||||
</div>
|
||||
<span className="text-xs text-[var(--text-tertiary)]">Hace 2 meses</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
|
||||
<div className="w-2 h-2 bg-purple-500 rounded-full"></div>
|
||||
<Bell className="w-5 h-5 text-purple-500" />
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-[var(--text-primary)]">Configuración de notificaciones</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">Se habilitaron las notificaciones por email</p>
|
||||
</div>
|
||||
<span className="text-xs text-[var(--text-tertiary)]">Hace 1 semana</span>
|
||||
</div>
|
||||
</div>
|
||||
<Input
|
||||
type="password"
|
||||
label="Nueva Contraseña"
|
||||
value={passwordData.newPassword}
|
||||
onChange={handlePasswordChange('newPassword')}
|
||||
error={errors.newPassword}
|
||||
disabled={isLoading}
|
||||
leftIcon={<Lock className="w-4 h-4" />}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="password"
|
||||
label="Confirmar Nueva Contraseña"
|
||||
value={passwordData.confirmPassword}
|
||||
onChange={handlePasswordChange('confirmPassword')}
|
||||
error={errors.confirmPassword}
|
||||
disabled={isLoading}
|
||||
leftIcon={<Lock className="w-4 h-4" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-6 mt-6 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setShowPasswordForm(false);
|
||||
setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
|
||||
setErrors({});
|
||||
}}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleChangePassword}
|
||||
isLoading={isLoading}
|
||||
loadingText="Cambiando..."
|
||||
>
|
||||
Cambiar Contraseña
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user