Add new API in the frontend

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

@@ -4,6 +4,7 @@ import { Button, Card, Avatar, Input, Select } from '../../../../components/ui';
 import { PageHeader } from '../../../../components/layout';
 import { useAuthUser } from '../../../../stores/auth.store';
 import { useToast } from '../../../../hooks/ui/useToast';
+import { useAuthProfile, useUpdateProfile, useChangePassword } from '../../../../api/hooks/auth';
 
 interface ProfileFormData {
   first_name: string;
@@ -22,20 +23,38 @@ interface PasswordData {
 
 const ProfilePage: React.FC = () => {
   const user = useAuthUser();
-  const { showToast } = useToast();
+  const { addToast } = useToast();
+  
+  const { data: profile, isLoading: profileLoading, error: profileError } = useAuthProfile();
+  const updateProfileMutation = useUpdateProfile();
+  const changePasswordMutation = useChangePassword();
   
   const [isEditing, setIsEditing] = useState(false);
   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',
+    first_name: '',
+    last_name: '',
+    email: '',
+    phone: '',
     language: 'es',
     timezone: 'Europe/Madrid'
   });
+  
+  // Update profile data when profile is loaded
+  React.useEffect(() => {
+    if (profile) {
+      setProfileData({
+        first_name: profile.first_name || '',
+        last_name: profile.last_name || '',
+        email: profile.email || '',
+        phone: profile.phone || '',
+        language: profile.language || 'es',
+        timezone: profile.timezone || 'Europe/Madrid'
+      });
+    }
+  }, [profile]);
 
   const [passwordData, setPasswordData] = useState<PasswordData>({
     currentPassword: '',
@@ -105,48 +124,34 @@ const ProfilePage: React.FC = () => {
     setIsLoading(true);
     
     try {
-      // Simulate API call
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      await updateProfileMutation.mutateAsync(profileData);
       
       setIsEditing(false);
-      showToast({
-        type: 'success',
-        title: 'Perfil actualizado',
-        message: 'Tu información ha sido guardada correctamente'
-      });
+      addToast('Perfil actualizado correctamente', 'success');
     } catch (error) {
-      showToast({
-        type: 'error',
-        title: 'Error',
-        message: 'No se pudo actualizar tu perfil'
-      });
+      addToast('No se pudo actualizar tu perfil', 'error');
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleChangePassword = async () => {
+  const handleChangePasswordSubmit = async () => {
     if (!validatePassword()) return;
     
     setIsLoading(true);
     
     try {
-      // Simulate API call
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      await changePasswordMutation.mutateAsync({
+        current_password: passwordData.currentPassword,
+        new_password: passwordData.newPassword,
+        confirm_password: passwordData.confirmPassword
+      });
       
       setShowPasswordForm(false);
       setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
-      showToast({
-        type: 'success',
-        title: 'Contraseña actualizada',
-        message: 'Tu contraseña ha sido cambiada correctamente'
-      });
+      addToast('Contraseña actualizada correctamente', 'success');
     } catch (error) {
-      showToast({
-        type: 'error',
-        title: 'Error',
-        message: 'No se pudo cambiar tu contraseña'
-      });
+      addToast('No se pudo cambiar tu contraseña', 'error');
     } finally {
       setIsLoading(false);
     }
@@ -182,7 +187,7 @@ const ProfilePage: React.FC = () => {
         <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"
+              src={profile?.avatar_url}
               name={`${profileData.first_name} ${profileData.last_name}`}
               size="xl"
               className="w-20 h-20"
@@ -362,7 +367,7 @@ const ProfilePage: React.FC = () => {
             </Button>
             <Button
               variant="primary"
-              onClick={handleChangePassword}
+              onClick={handleChangePasswordSubmit}
               isLoading={isLoading}
               loadingText="Cambiando..."
             >