Support multiple languages

frontend/src/pages/app/settings/profile/ProfilePage.tsx

@@ -29,7 +29,7 @@ interface PasswordData {
 
 const ProfilePage: React.FC = () => {
   const user = useAuthUser();
-  const { t } = useTranslation('auth');
+  const { t } = useTranslation(['settings', 'auth']);
   const { addToast } = useToast();
   
   const { data: profile, isLoading: profileLoading, error: profileError } = useAuthProfile();
@@ -405,7 +405,7 @@ const ProfilePage: React.FC = () => {
               )}
               <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>
+                <span className="text-sm text-text-tertiary">{t('settings:profile.online', 'En línea')}</span>
               </div>
             </div>
             <div className="flex gap-2">
@@ -416,7 +416,7 @@ const ProfilePage: React.FC = () => {
                   className="flex items-center gap-2"
                 >
                   <User className="w-4 h-4" />
-                  Editar Perfil
+                  {t('settings:profile.edit_profile', 'Editar Perfil')}
                 </Button>
               )}
               <Button
@@ -425,7 +425,7 @@ const ProfilePage: React.FC = () => {
                 className="flex items-center gap-2"
               >
                 <Lock className="w-4 h-4" />
-                Cambiar Contraseña
+                {t('settings:profile.change_password', 'Cambiar Contraseña')}
               </Button>
             </div>
           </div>
@@ -435,11 +435,11 @@ const ProfilePage: React.FC = () => {
       {/* Profile Form */}
       {activeTab === 'profile' && (
         <Card className="p-6">
-          <h2 className="text-lg font-semibold mb-4">Información Personal</h2>
+          <h2 className="text-lg font-semibold mb-4">{t('settings:profile.personal_info', 'Información Personal')}</h2>
         
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
           <Input
-            label="Nombre"
+            label={t('settings:profile.fields.first_name', 'Nombre')}
             value={profileData.first_name}
             onChange={handleInputChange('first_name')}
             error={errors.first_name}
@@ -448,7 +448,7 @@ const ProfilePage: React.FC = () => {
           />
           
           <Input
-            label="Apellidos"
+            label={t('settings:profile.fields.last_name', 'Apellidos')}
             value={profileData.last_name}
             onChange={handleInputChange('last_name')}
             error={errors.last_name}
@@ -457,7 +457,7 @@ const ProfilePage: React.FC = () => {
           
           <Input
             type="email"
-            label="Correo Electrónico"
+            label={t('settings:profile.fields.email', 'Correo Electrónico')}
             value={profileData.email}
             onChange={handleInputChange('email')}
             error={errors.email}
@@ -467,7 +467,7 @@ const ProfilePage: React.FC = () => {
           
           <Input
             type="tel"
-            label="Teléfono"
+            label={t('settings:profile.fields.phone', 'Teléfono')}
             value={profileData.phone}
             onChange={handleInputChange('phone')}
             error={errors.phone}