fix(frontend): Fix client API calls and improve profile UI

- Fixed proxy configuration in vite.config.js (servicemanager-backend -> backend)
- Added X-Tenant-ID header to client-profile API calls
- Improved error handling with proper authentication checks
- Updated profile page UI to white theme (removed icons and colors)
- Changed all btn-primary buttons to white theme styling
- Enhanced API call error handling in tickets store

frontend-client/src/lib/stores/tickets.ts

@@ -1,8 +1,14 @@
-import { writable, get } from 'svelte/store';
 import type { Writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 import { auth } from './auth';
 
 // Types
+interface FastAPIValidationError {
+  loc: (string | number)[];
+  msg: string;
+  type: string;
+}
+
 export interface Ticket {
   id: string;
   title: string;
@@ -73,12 +79,17 @@ const initialState: TicketsState = {
 // API helper function
 async function apiCall(endpoint: string, options: RequestInit = {}) {
   const authState = get(auth);
-  
+
+  if (!authState.token || !authState.user) {
+    throw new Error('Not authenticated');
+  }
+
   const response = await fetch(`/api/v1${endpoint}`, {
     ...options,
     headers: {
       'Content-Type': 'application/json',
       'Authorization': `Bearer ${authState.token}`,
+      'X-Tenant-ID': authState.user.tenant_id,
       ...options.headers
     }
   });
@@ -88,12 +99,12 @@ async function apiCall(endpoint: string, options: RequestInit = {}) {
     try {
       const error = await response.json();
       console.error('❌ API Error Response:', error);
-      
+
       // Manejar diferentes formatos de error de FastAPI
       if (error.detail) {
         if (Array.isArray(error.detail)) {
           // Errores de validación de FastAPI
-          errorMessage = error.detail.map(e => `${e.loc.join('.')}: ${e.msg}`).join(', ');
+          errorMessage = error.detail.map((e: FastAPIValidationError) => `${e.loc.join('.')}: ${e.msg}`).join(', ');
         } else if (typeof error.detail === 'string') {
           errorMessage = error.detail;
         } else {
@@ -105,7 +116,7 @@ async function apiCall(endpoint: string, options: RequestInit = {}) {
     } catch (e) {
       errorMessage = `HTTP ${response.status}: ${response.statusText}`;
     }
-    
+
     throw new Error(errorMessage);
   }
 
@@ -122,15 +133,15 @@ function createTicketsStore() {
     // Load user's tickets
     loadTickets: async () => {
       update((state: TicketsState) => ({ ...state, isLoading: true, error: null }));
-      
+
       try {
         const tickets = await apiCall('/tickets/');
         update((state: TicketsState) => ({ ...state, tickets, isLoading: false }));
       } catch (error) {
-        update((state: TicketsState) => ({ 
-          ...state, 
-          isLoading: false, 
-          error: error instanceof Error ? error.message : 'Failed to load tickets' 
+        update((state: TicketsState) => ({
+          ...state,
+          isLoading: false,
+          error: error instanceof Error ? error.message : 'Failed to load tickets'
         }));
       }
     },
@@ -138,7 +149,7 @@ function createTicketsStore() {
     // Load specific ticket with details
     loadTicket: async (ticketId: string) => {
       update((state: TicketsState) => ({ ...state, isLoading: true, error: null }));
-      
+
       try {
         const [ticket, comments, attachments] = await Promise.all([
           apiCall(`/tickets/${ticketId}`),
@@ -146,18 +157,18 @@ function createTicketsStore() {
           apiCall(`/tickets/${ticketId}/attachments`)
         ]);
 
-        update((state: TicketsState) => ({ 
-          ...state, 
-          currentTicket: ticket, 
-          comments, 
-          attachments, 
-          isLoading: false 
+        update((state: TicketsState) => ({
+          ...state,
+          currentTicket: ticket,
+          comments,
+          attachments,
+          isLoading: false
         }));
       } catch (error) {
-        update((state: TicketsState) => ({ 
-          ...state, 
-          isLoading: false, 
-          error: error instanceof Error ? error.message : 'Failed to load ticket' 
+        update((state: TicketsState) => ({
+          ...state,
+          isLoading: false,
+          error: error instanceof Error ? error.message : 'Failed to load ticket'
         }));
       }
     },
@@ -176,38 +187,38 @@ function createTicketsStore() {
     // Create new ticket
     createTicket: async (ticket: CreateTicketRequest) => {
       update((state: TicketsState) => ({ ...state, isLoading: true, error: null }));
-      
+
       try {
         // Mapear campos del frontend al formato del backend
-    const ticketData = {
-      subject: ticket.title,           // ← Backend espera "subject" no "title"
-      description: ticket.description,
-      category_id: ticket.category_id,
-      priority: ticket.priority,
-      system_id: null                  // ← Opcional
-      };
-    
+        const ticketData = {
+          subject: ticket.title,           // ← Backend espera "subject" no "title"
+          description: ticket.description,
+          category_id: ticket.category_id,
+          priority: ticket.priority,
+          system_id: null                  // ← Opcional
+        };
 
-      console.log('Sending ticket data:', ticketData);
+
+        console.log('Sending ticket data:', ticketData);
 
         const newTicket = await apiCall('/tickets/', {
           method: 'POST',
           body: JSON.stringify(ticketData)
         });
 
-        update((state: TicketsState) => ({ 
-          ...state, 
-          tickets: [newTicket, ...state.tickets], 
-          isLoading: false 
+        update((state: TicketsState) => ({
+          ...state,
+          tickets: [newTicket, ...state.tickets],
+          isLoading: false
         }));
 
         return newTicket;
       } catch (error) {
         console.error('Create ticket error:', error);
-        update((state: TicketsState) => ({ 
-          ...state, 
-          isLoading: false, 
-          error: error instanceof Error ? error.message : 'Failed to create ticket' 
+        update((state: TicketsState) => ({
+          ...state,
+          isLoading: false,
+          error: error instanceof Error ? error.message : 'Failed to create ticket'
         }));
         throw error;
       }
@@ -221,16 +232,16 @@ function createTicketsStore() {
           body: JSON.stringify({ content })
         });
 
-        update((state: TicketsState) => ({ 
-          ...state, 
-          comments: [...state.comments, comment] 
+        update((state: TicketsState) => ({
+          ...state,
+          comments: [...state.comments, comment]
         }));
 
         return comment;
       } catch (error) {
-        update((state: TicketsState) => ({ 
-          ...state, 
-          error: error instanceof Error ? error.message : 'Failed to add comment' 
+        update((state: TicketsState) => ({
+          ...state,
+          error: error instanceof Error ? error.message : 'Failed to add comment'
         }));
         throw error;
       }
@@ -243,10 +254,16 @@ function createTicketsStore() {
         formData.append('file', file);
 
         const authState = get(auth);
+
+        if (!authState.token || !authState.user) {
+          throw new Error('Not authenticated');
+        }
+
         const response = await fetch(`/api/v1/tickets/${ticketId}/attachments`, {
           method: 'POST',
           headers: {
-            'Authorization': `Bearer ${authState.token}`
+            'Authorization': `Bearer ${authState.token}`,
+            'X-Tenant-ID': authState.user.tenant_id
           },
           body: formData
         });
@@ -256,18 +273,19 @@ function createTicketsStore() {
           throw new Error(error.detail || 'Upload failed');
         }
 
-        const attachment = await response.json();
-        
-        update((state: TicketsState) => ({ 
-          ...state, 
-          attachments: [...state.attachments, attachment] 
+        const result = await response.json();
+        const attachment = result.data || result;
+
+        update((state: TicketsState) => ({
+          ...state,
+          attachments: [...state.attachments, attachment]
         }));
 
         return attachment;
       } catch (error) {
-        update((state: TicketsState) => ({ 
-          ...state, 
-          error: error instanceof Error ? error.message : 'Failed to upload attachment' 
+        update((state: TicketsState) => ({
+          ...state,
+          error: error instanceof Error ? error.message : 'Failed to upload attachment'
         }));
         throw error;
       }
@@ -289,9 +307,9 @@ function createTicketsStore() {
 
         return updatedTicket;
       } catch (error) {
-        update((state: TicketsState) => ({ 
-          ...state, 
-          error: error instanceof Error ? error.message : 'Failed to close ticket' 
+        update((state: TicketsState) => ({
+          ...state,
+          error: error instanceof Error ? error.message : 'Failed to close ticket'
         }));
         throw error;
       }
@@ -304,11 +322,11 @@ function createTicketsStore() {
 
     // Clear current ticket
     clearCurrentTicket: () => {
-      update((state: TicketsState) => ({ 
-        ...state, 
-        currentTicket: null, 
-        comments: [], 
-        attachments: [] 
+      update((state: TicketsState) => ({
+        ...state,
+        currentTicket: null,
+        comments: [],
+        attachments: []
       }));
     }
   };

frontend-client/src/routes/profile/+page.svelte

@@ -77,9 +77,15 @@
 
   async function loadBusinessProfile() {
     try {
+      if (!$auth.token || !$auth.user) {
+        console.warn('Usuario no autenticado');
+        return;
+      }
+
       const response = await fetch('/api/v1/client-profile/', {
         headers: {
-          Authorization: `Bearer ${$auth.token}`
+          Authorization: `Bearer ${$auth.token}`,
+          'X-Tenant-ID': $auth.user.tenant_id
         }
       });
 
@@ -91,6 +97,12 @@
             businessProfile[key] = profile[key];
           }
         });
+      } else if (response.status === 404) {
+        // No hay perfil aún, esto es normal para nuevos clientes
+        console.info('No se encontró perfil empresarial existente');
+      } else {
+        const error = await response.json().catch(() => ({ detail: 'Error desconocido' }));
+        console.error('Error al cargar perfil empresarial:', error);
       }
     } catch (error) {
       console.warn('No se pudo cargar el perfil empresarial:', error);
@@ -261,7 +273,8 @@
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          Authorization: `Bearer ${$auth.token}`
+          Authorization: `Bearer ${$auth.token}`,
+          'X-Tenant-ID': $auth.user.tenant_id
         },
         body: JSON.stringify(profileData)
       });
@@ -305,51 +318,51 @@
       <button
         class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors {activeTab ===
         'personal'
-          ? 'border-primary-500 text-primary-600'
+          ? 'border-white text-white'
           : ''}"
         on:click={() => (activeTab = 'personal')}
       >
-        👤 Personal
+        Personal
       </button>
 
       <button
         class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors {activeTab ===
         'general'
-          ? 'border-primary-500 text-primary-600'
+          ? 'border-white text-white'
           : ''}"
         on:click={() => (activeTab = 'general')}
       >
-        🏢 General
+        General
       </button>
 
       <button
         class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors {activeTab ===
         'contact'
-          ? 'border-primary-500 text-primary-600'
+          ? 'border-white text-white'
           : ''}"
         on:click={() => (activeTab = 'contact')}
       >
-        📞 Contacto
+        Contacto
       </button>
 
       <button
         class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors {activeTab ===
         'security'
-          ? 'border-primary-500 text-primary-600'
+          ? 'border-white text-white'
           : ''}"
         on:click={() => (activeTab = 'security')}
       >
-        🔐 Seguridad
+        Seguridad
       </button>
 
       <button
         class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors {activeTab ===
         'account'
-          ? 'border-primary-500 text-primary-600'
+          ? 'border-white text-white'
           : ''}"
         on:click={() => (activeTab = 'account')}
       >
-        ℹ️ Cuenta
+        Cuenta
       </button>
     </nav>
   </div>
@@ -417,7 +430,7 @@
             </div>
 
             <div class="flex justify-end">
-              <button type="submit" class="btn-primary px-6 py-2" disabled={isUpdatingProfile}>
+              <button type="submit" class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-md font-medium transition-colors" disabled={isUpdatingProfile}>
                 {#if isUpdatingProfile}
                   <div class="flex items-center space-x-2">
                     <div class="spinner w-4 h-4" />
@@ -517,7 +530,7 @@
             </div>
 
             <!-- Ubicación -->
-            <div class="bg-blue-50 p-4 rounded-lg">
+            <div class="bg-white p-4 rounded-lg border border-gray-200">
               <h3 class="font-medium text-gray-900 mb-4">Ubicación</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 <div>
@@ -602,7 +615,7 @@
             </div>
 
             <!-- Representantes -->
-            <div class="bg-purple-50 p-4 rounded-lg">
+            <div class="bg-white p-4 rounded-lg border border-gray-200">
               <h3 class="font-medium text-gray-900 mb-4">Representantes</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
@@ -628,7 +641,7 @@
             </div>
 
             <!-- Configuración -->
-            <div class="bg-green-50 p-4 rounded-lg">
+            <div class="bg-white p-4 rounded-lg border border-gray-200">
               <h3 class="font-medium text-gray-900 mb-4">Configuración</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
@@ -680,7 +693,7 @@
             <div class="flex justify-end pt-6">
               <button
                 type="submit"
-                class="btn-primary px-8 py-2"
+                class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-8 py-2 rounded-md font-medium transition-colors"
                 disabled={isSavingBusinessProfile}
               >
                 {#if isSavingBusinessProfile}
@@ -689,7 +702,7 @@
                     <span>Guardando...</span>
                   </div>
                 {:else}
-                  💾 Guardar Perfil Empresarial
+                  Guardar Perfil Empresarial
                 {/if}
               </button>
             </div>
@@ -709,8 +722,8 @@
         <div class="card-content">
           <form on:submit|preventDefault={handleBusinessProfileSave} class="space-y-6">
             <!-- Teléfonos -->
-            <div class="bg-blue-50 p-4 rounded-lg">
-              <h3 class="font-medium text-gray-900 mb-4">📞 Teléfonos</h3>
+            <div class="bg-white p-4 rounded-lg border border-gray-200">
+              <h3 class="font-medium text-gray-900 mb-4">Teléfonos</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                   <label class="form-label">Teléfono Principal</label>
@@ -766,8 +779,8 @@
             </div>
 
             <!-- Emails -->
-            <div class="bg-green-50 p-4 rounded-lg">
-              <h3 class="font-medium text-gray-900 mb-4">✉️ Correos Electrónicos</h3>
+            <div class="bg-white p-4 rounded-lg border border-gray-200">
+              <h3 class="font-medium text-gray-900 mb-4">Correos Electrónicos</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                   <label class="form-label">Email Principal</label>
@@ -798,8 +811,8 @@
             </div>
 
             <!-- Web y Horarios -->
-            <div class="bg-purple-50 p-4 rounded-lg">
-              <h3 class="font-medium text-gray-900 mb-4">🌐 Web y Horarios</h3>
+            <div class="bg-white p-4 rounded-lg border border-gray-200">
+              <h3 class="font-medium text-gray-900 mb-4">Web y Horarios</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                   <label class="form-label">Página Web</label>
@@ -836,7 +849,7 @@
             <div class="flex justify-end pt-6">
               <button
                 type="submit"
-                class="btn-primary px-8 py-2"
+                class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-8 py-2 rounded-md font-medium transition-colors"
                 disabled={isSavingBusinessProfile}
               >
                 {#if isSavingBusinessProfile}
@@ -845,7 +858,7 @@
                     <span>Guardando...</span>
                   </div>
                 {:else}
-                  💾 Guardar Información de Contacto
+                  Guardar Información de Contacto
                 {/if}
               </button>
             </div>
@@ -959,7 +972,7 @@
             </div>
 
             <div class="flex justify-end">
-              <button type="submit" class="btn-primary px-6 py-2" disabled={isChangingPassword}>
+              <button type="submit" class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-md font-medium transition-colors" disabled={isChangingPassword}>
                 {#if isChangingPassword}
                   <div class="flex items-center space-x-2">
                     <div class="spinner w-4 h-4" />