```javascript
# Documentación de CRM Dreinet - Gestión de Contactos

## Introducción

Este documento describe el sistema de gestión de contactos del CRM Dreinet, que permite asociar múltiples contactos a cada cliente. Los contactos representan personas específicas dentro de las organizaciones cliente con quienes se mantiene comunicación.

## Arquitectura del Sistema de Gestión de Contactos

### Store de Contactos
**Ubicación:** [contacts.js](http://_vscodecontentref_/3)

Gestiona el estado de los contactos utilizando Pinia:
- Lista de contactos por cliente
- Contacto actual seleccionado
- Estados de carga y error

**Acciones principales:**
- `fetchContactsByClientId(clientId)`: Obtiene los contactos de un cliente específico
- `createContact(contactData)`: Crea un nuevo contacto
- `updateContact(id, contactData)`: Actualiza un contacto existente
- `deleteContact(id, clientId)`: Elimina un contacto

### Componentes Principales

#### Formulario de Contactos
**Ubicación:** [ContactForm.vue](http://_vscodecontentref_/4)

Formulario para crear y editar contactos asociados a un cliente.

**Características principales:**
- Validación de campos
- Campos para información personal y profesional
- Notas adicionales

#### Gestión de Contactos en Cliente Nuevo
**Ubicación:** [ClientQuickForm.vue](http://_vscodecontentref_/5) (sección de contactos)

Permite agregar contactos temporales al crear un nuevo cliente.

**Características principales:**
- Lista de contactos temporales
- Opciones para añadir, editar y eliminar contactos
- Gestión local hasta la creación del cliente

## Flujos de Trabajo

### Gestión de Contactos en Nuevo Cliente

1. Mientras se está creando un nuevo cliente:
   - El usuario hace clic en "Agregar Contacto" dentro del formulario de cliente
   - Se abre un modal con el formulario `ContactForm`
   - El usuario completa los datos del contacto
   - Al guardar, el contacto se almacena temporalmente en el formulario principal
   - El usuario puede añadir múltiples contactos, editarlos o eliminarlos
   - Al crear el cliente, todos los contactos se envían secuencialmente al backend

2. Proceso de creación secuencial:
   - Primero se crea el cliente mediante `clientsStore.createClient()`
   - Se obtiene el ID del cliente recién creado
   - Para cada contacto temporal, se llama a `contactsStore.createContact()` con el ID del cliente
   - Si algún contacto falla, los demás continúan creándose

### Gestión de Contactos en Cliente Existente

1. Al ver los detalles de un cliente existente:
   - El sistema carga los contactos mediante `contactsStore.fetchContactsByClientId(clientId)`
   - Se muestra la lista de contactos con sus datos
   - El usuario puede añadir, editar o eliminar contactos directamente

2. Para añadir un nuevo contacto:
   - El usuario hace clic en "Agregar Contacto"
   - Completa el formulario con los campos requeridos
   - Al guardar, se llama directamente a `contactsStore.createContact()`
   - El nuevo contacto aparece en la lista

3. Para editar un contacto:
   - El usuario selecciona "Editar" en un contacto existente
   - El formulario se abre prellenado con los datos actuales
   - Al guardar, se llama a `contactsStore.updateContact()`
   - La lista se actualiza con los cambios

4. Para eliminar un contacto:
   - El usuario selecciona "Eliminar" en un contacto existente
   - Se muestra un cuadro de diálogo de confirmación
   - Al confirmar, se llama a `contactsStore.deleteContact()`
   - El contacto se elimina de la lista

## Estructura de Datos

### Contacto

```typescript
interface Contacto {
  id: number;
  cliente_id: number;
  nombre: string;
  apellido: string;
  email: string;
  telefono: string;
  cargo: string;
  departamento: string;
  notas: string;
  creado_en: string;
  actualizado_en: string;
}