Support multiple languages

frontend/src/pages/app/settings/organizations/OrganizationsPage.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { PageHeader } from '../../../../components/layout';
 import { Button } from '../../../../components/ui/Button';
 import { Card, CardHeader, CardBody } from '../../../../components/ui/Card';
@@ -25,6 +26,7 @@ import {
 } from 'lucide-react';
 
 const OrganizationsPage: React.FC = () => {
+  const { t } = useTranslation(['settings']);
   const navigate = useNavigate();
   const user = useAuthUser();
   const { currentTenant, availableTenants, switchTenant } = useTenant();
@@ -77,8 +79,8 @@ const OrganizationsPage: React.FC = () => {
   return (
     <div className="space-y-6 p-4 sm:p-6">
       <PageHeader
-        title="Mis Organizaciones"
-        description="Gestiona tus panaderías y negocios"
+        title={t('settings:organization.title', 'Mis Organizaciones')}
+        description={t('settings:organization.description', 'Gestiona tus panaderías y negocios')}
         actions={
           <Button
             onClick={handleAddNewOrganization}

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}

frontend/src/pages/app/settings/team/TeamPage.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Users, Plus, Search, Shield, Trash2, Crown, UserCheck } from 'lucide-react';
 import { Button, Card, Input, StatusCard, getStatusColor, StatsGrid } from '../../../../components/ui';
 import AddTeamMemberModal from '../../../../components/domain/team/AddTeamMemberModal';
@@ -11,6 +12,7 @@ import { useToast } from '../../../../hooks/ui/useToast';
 import { TENANT_ROLES } from '../../../../types/roles';
 
 const TeamPage: React.FC = () => {
+  const { t } = useTranslation(['settings']);
   const { addToast } = useToast();
   const currentUser = useAuthUser();
   const currentTenant = useCurrentTenant();
@@ -299,8 +301,8 @@ const TeamPage: React.FC = () => {
   return (
     <div className="p-6 space-y-6">
       <PageHeader
-        title="Gestión de Equipo"
-        description="Administra los miembros del equipo, roles y permisos"
+        title={t('settings:team.title', 'Gestión de Equipo')}
+        description={t('settings:team.description', 'Administra los miembros del equipo, roles y permisos')}
         actions={
           canManageTeam ? [{
             id: 'add-member',