# Documentación de CRM Dreinet - Gestión de Clientes

## Introducción

Este documento describe el sistema de gestión de clientes del CRM Dreinet, desarrollado con Vue 3, Pinia para gestión de estado y Tailwind CSS para estilos. El sistema permite crear, listar, editar y eliminar clientes de manera eficiente e intuitiva.

## Arquitectura del Sistema de Gestión de Clientes

### Store de Clientes
**Ubicación:** `stores/clients.js`

Gestiona el estado de los clientes utilizando Pinia, incluyendo:
- Lista de clientes
- Cliente actual seleccionado
- Estados de carga y error

**Acciones principales:**
- `fetchClients()`: Obtiene todos los clientes desde el backend
- `fetchClientById(id)`: Obtiene un cliente específico por su ID
- `createClient(clientData)`: Crea un nuevo cliente
- `updateClient(id, clientData)`: Actualiza un cliente existente
- `deleteClient(id)`: Elimina un cliente

### Store de Ubicaciones
**Ubicación:** `stores/locations.js`

Gestiona la información geográfica:
- Provincias
- Localidades
- Códigos postales

**Acciones principales:**
- `fetchProvinces()`: Obtiene todas las provincias
- `fetchAllCities()`: Obtiene todas las localidades
- `fetchCitiesByProvince(provinciaId)`: Obtiene localidades filtradas por provincia

### Componentes Principales

#### Panel de Control
**Ubicación:** `pages/index.vue`

Dashboard principal que muestra resumen de clientes y opciones para gestionar el sistema.

**Características principales:**
- Estadísticas generales
- Acciones rápidas
- Listas de clientes recientes

#### Listado de Clientes
**Ubicación:** `pages/clients/index.vue` o sección dentro de `pages/index.vue`

Muestra la lista de todos los clientes con opciones para filtrar y acciones rápidas.

**Características principales:**
- Tabla paginada con clientes
- Filtros por nombre, CUIT, provincia
- Opciones para crear, editar, ver detalles y eliminar

#### Formulario de Cliente
**Ubicación:** `components/clients/ClientQuickForm.vue`

Formulario para crear y editar clientes.

**Características principales:**
- Validación de campos
- Autocompletado de localidad por código postal
- Selección de provincia y localidad
- Integración con gestión de contactos

## Flujos de Trabajo

### Creación de un Cliente

1. El usuario hace clic en "Nuevo Cliente" desde el dashboard o listado
2. Se abre un modal con el formulario `ClientQuickForm`
3. El usuario completa los campos requeridos:
   - Nombre de cliente (obligatorio)
   - CUIT (obligatorio, formato válido)
   - Dirección
   - Código postal (con autocompletado de provincia y localidad)
   - Provincia (obligatorio)
   - Localidad (obligatorio)
4. Opcionalmente, el usuario puede agregar contactos asociados al cliente
5. Al enviar el formulario, se valida la información
6. Si la validación es exitosa:
   - Se llama a `clientsStore.createClient()` con los datos del cliente
   - Se crean los contactos asociados (si existen)
   - Se muestra notificación de éxito
   - Se cierra el modal y se actualiza la lista de clientes
7. Si hay errores:
   - Se muestran los mensajes de error correspondientes
   - Los datos del formulario se mantienen para corrección

### Visualización de Clientes

1. El usuario accede al listado de clientes
2. El sistema carga los clientes desde el backend mediante `clientsStore.fetchClients()`
3. Se muestran los clientes en formato de tabla con la siguiente información:
   - Nombre del cliente
   - CUIT
   - Ubicación (Provincia, Localidad)
   - Estado
   - Acciones disponibles
4. El usuario puede:
   - Filtrar clientes por diferentes criterios
   - Ordenar la tabla por columnas
   - Acceder a opciones de acción para cada cliente
   - Ver detalles completos de un cliente

### Edición de un Cliente

1. El usuario selecciona "Editar" en un cliente existente
2. Se abre el modal con el formulario precargado con los datos del cliente
3. El usuario realiza las modificaciones necesarias
4. Al enviar el formulario, se valida la información actualizada
5. Si la validación es exitosa:
   - Se llama a `clientsStore.updateClient()` con los datos actualizados
   - Se actualiza la lista de clientes con la nueva información
   - Se muestra notificación de éxito
6. Si hay errores:
   - Se muestran los mensajes de error correspondientes
   - Los datos modificados se mantienen para corrección

### Eliminación de un Cliente

1. El usuario selecciona "Eliminar" en un cliente existente
2. Se muestra un diálogo de confirmación
3. Si el usuario confirma:
   - Se llama a `clientsStore.deleteClient()` con el ID del cliente
   - Se actualiza la lista de clientes
   - Se muestra notificación de éxito
4. Si el usuario cancela:
   - Se cierra el diálogo sin realizar cambios

## Estructura de Datos

### Cliente

```typescript
interface Cliente {
  id: number;
  nombre: string;
  cuit: string;
  direccion: string;
  codigo_postal: string;
  localidad: number;
  provincia: number;
  estado_empresa: number;
  creado_en: string;
  actualizado_en: string;
}