# Guía de Migración - MultiClienteMultiPunto

## 🔄 De ContratoMultiClienteMultiPuntoRefactored.tsx a MultiClienteMultiPunto.tsx

Esta guía documenta los cambios realizados durante el refactoring del componente MultiClienteMultiPunto.

## 📊 Resumen de Cambios

### Antes (Componente Antiguo)
```
ContratoMultiClienteMultiPuntoRefactored.tsx
├── 930 líneas
├── Todo en un solo archivo
├── CUPS eléctricos y gas en una sola tabla
└── Lógica mezclada con UI
```

### Después (Componente Refactorizado)
```
MultiClienteMultiPunto/
├── MultiClienteMultiPunto.tsx (330 líneas)
├── components/ (5 componentes)
├── hooks/ (2 hooks nuevos + reutilizados)
├── CUPS eléctricos y gas en tabs separados
└── Separación clara de responsabilidades
```

## 🎯 Cambios Principales

### 1. Separación en Tabs

**ANTES:** Una sola tabla con CUPS eléctricos y gas mezclados
```tsx
<table>
  {data.electrico.map(...)}  // Filas eléctricas
  {data.gas.map(...)}         // Filas gas
</table>
```

**DESPUÉS:** Tabs separados con tablas independientes
```tsx
<TabNavigator activeTab={activeTab} onTabChange={handleTabChange} />

{activeTab === 'electrico' && <CupsElectricosTable ... />}
{activeTab === 'gas' && <CupsGasTable ... />}
```

### 2. Nuevas Columnas Agregadas

**Columnas añadidas en ambas tablas:**

| Columna | Tipo | Posición | Descripción |
|---------|------|----------|-------------|
| GDO | Checkbox | Después de Tipo Precio | Garantía de Origen Verde |
| Permanencia | Checkbox | Después de Anexo | Permanencia del contrato |
| Cambio Titular | Checkbox | Después de CUPS | Indica cambio de titular |
| Cambio Potencia | Checkbox | Después de Cambio Titular | Indica cambio de potencia |

### 3. Reordenamiento de Columnas

**Orden ANTERIOR (ContratoMultiClienteMultiPuntoRefactored):**
1. Cliente CIF/NIF
2. Nombre Cliente
3. CUPS
4. Dirección
5. Tarifa
6. Consumo
7. Comercializadora
8. Producto
9. Anexo
10. Tipo Precio
11. Gasto Operativo
12. Tarifa Corporate
13. Fecha Inicio
14. Fecha Fin
15. Acciones

**Orden NUEVO (MultiClienteMultiPunto):**
1. Cliente CIF/NIF
2. Nombre Cliente
3. Comercializadora
4. Producto
5. Tipo Precio
6. **GDO** ⭐
7. Anexo
8. **Permanencia** ⭐
9. Fecha Inicio
10. Fecha Fin
11. CUPS
12. **Cambio Titular** ⭐
13. **Cambio Potencia** ⭐
14. Dirección
15. Tarifa
16. Consumo
17. Gasto Operativo
18. Tarifa Corporate
19. Acciones

**Lógica del nuevo orden:**
1. **Identificación:** Cliente
2. **Datos Contractuales:** Comercializadora, Producto, Precio, Anexo, Fechas
3. **Datos CUPS:** CUPS, Dirección, Tarifa, Consumo
4. **Datos Comerciales:** Gasto Op., Tarifa Corporate
5. **Acciones:** Editar/Eliminar

### 4. Componentes Extraídos

#### RepresentanteLegalSection
**ANTES:** Inline en el componente principal (líneas 106-212)
```tsx
<Row className="mb-4">
  <Col>
    <Card>
      <Card.Header>...</Card.Header>
      <Card.Body>
        {/* Todo el código del representante legal */}
      </Card.Body>
    </Card>
  </Col>
</Row>
```

**DESPUÉS:** Componente independiente
```tsx
<RepresentanteLegalSection
  contactosOptions={contactosOptions}
  selectedContacto={selectedContacto}
  // ... props
/>
```

#### TabNavigator
**ANTES:** No existía, tabs mezclados en tabla única

**DESPUÉS:** Componente dedicado
```tsx
<TabNavigator
  activeTab={activeTab}
  onTabChange={handleTabChange}
  electricoCount={data.electrico.length}
  gasCount={data.gas.length}
/>
```

#### DatosComunesToggle
**ANTES:** Inline (líneas 225-243)
```tsx
<button
  type="button"
  className={`btn btn-sm${isDatosComunes ? ' active' : ''}`}
  style={{ /* estilos inline */ }}
  onClick={handleDatosComunes}
>
  {/* contenido */}
</button>
```

**DESPUÉS:** Componente reutilizable
```tsx
<DatosComunesToggle
  isDatosComunes={isDatosComunes}
  onToggle={handleDatosComunes}
/>
```

#### CupsElectricosTable
**ANTES:** Tabla inline en el componente principal (líneas 261-538)

**DESPUÉS:** Componente completo con todas sus funcionalidades
```tsx
<CupsElectricosTable
  data={data.electrico}
  setData={setData}
  clientes={clientes}
  // ... todas las props necesarias
/>
```

#### CupsGasTable
**ANTES:** Tabla inline mezclada con eléctricos (líneas 542-822)

**DESPUÉS:** Componente independiente simétrico a CupsElectricosTable
```tsx
<CupsGasTable
  data={data.gas}
  setData={setData}
  clientes={clientes}
  // ... todas las props necesarias
/>
```

### 5. Hooks Extraídos

#### useRepresentanteSelection
**ANTES:** Lógica inline en el hook principal
```tsx
const [contactosOptions, setContactosOptions] = useState([]);
const [selectedContacto, setSelectedContacto] = useState([]);
// Lógica de cambio inline en los handlers
```

**DESPUÉS:** Hook dedicado
```tsx
const {
  contactosOptions,
  selectedContacto,
  handleContactoDocumentoChange,
  handleContactoNombreChange
} = useRepresentanteSelection(contactos, setData);
```

#### useClientesPorFila
**ANTES:** Estado y lógica dentro de useContratoMultiClienteMultiPunto
```tsx
const [selectedClientesElectricoPorFila, setSelectedClientesElectricoPorFila] = useState({});
const [selectedClientesGasPorFila, setSelectedClientesGasPorFila] = useState({});
// Handlers mezclados con otra lógica
```

**DESPUÉS:** Hook especializado
```tsx
const {
  selectedClientesElectricoPorFila,
  selectedClientesGasPorFila,
  handleClienteElectricoChange,
  handleClienteGasChange,
  handleClearClienteElectrico,
  handleClearClienteGas
} = useClientesPorFila();
```

### 6. Hooks Reutilizados

Se reutilizan hooks de `UniClienteMultiPunto`:

```tsx
import {
  useTabNavigation,
  useCupsAntiDuplicados,
  useModalPrecios,
  useServicioIntegracion
} from '../UniClienteMultiPunto/hooks';
```

## 🔧 Cambios en las Interfaces

### FormDataElectrico (Interfaces.ts)

**Campos NUEVOS agregados:**
```typescript
export interface FormDataElectrico {
  // ... campos existentes
  cups_electrico?: string;           // Alias para codigoCups
  GDO?: boolean | string;            // ⭐ NUEVO
  permanencia?: boolean | string;     // ⭐ NUEVO
  cambioTitular?: boolean | string;   // ⭐ NUEVO
  cambioPotencia?: boolean | string;  // ⭐ NUEVO
}
```

### FormDataGas (Interfaces.ts)

**Campos NUEVOS agregados:**
```typescript
export interface FormDataGas {
  // ... campos existentes
  cupsGas?: string;                   // Alias para codigoCups
  GDO?: boolean | string;            // ⭐ NUEVO
  permanencia?: boolean | string;     // ⭐ NUEVO
  cambioTitular?: boolean | string;   // ⭐ NUEVO
  cambioPotencia?: boolean | string;  // ⭐ NUEVO
}
```

## 📁 Mapeo de Archivos

### Archivo Principal

| Antiguo | Nuevo | Estado |
|---------|-------|--------|
| `ContratoMultiClienteMultiPuntoRefactored.tsx` | `MultiClienteMultiPunto.tsx` | ✅ Migrado |

### Componentes Nuevos

| Archivo | Líneas | Descripción |
|---------|--------|-------------|
| `components/RepresentanteLegalSection.tsx` | ~120 | Sección representante legal |
| `components/TabNavigator.tsx` | ~50 | Navegador de tabs |
| `components/DatosComunesToggle.tsx` | ~30 | Toggle datos comunes |
| `components/CupsElectricosTable.tsx` | ~360 | Tabla CUPS eléctricos |
| `components/CupsGasTable.tsx` | ~360 | Tabla CUPS gas |
| `components/index.ts` | ~5 | Barrel export |

### Hooks Nuevos

| Archivo | Líneas | Descripción |
|---------|--------|-------------|
| `hooks/useRepresentanteSelection.ts` | ~45 | Gestión representante |
| `hooks/useClientesPorFila.ts` | ~80 | Gestión clientes por fila |
| `hooks/index.ts` | ~7 | Barrel export + re-exports |

### Archivos Sin Cambios

Estos archivos se mantienen sin modificaciones:
- `ts/useContratoMultiClienteMultiPunto.ts` (hook principal)
- `CupsElectricSectionMultiClienteMultiPunto.tsx` (modal eléctrico)
- `CupsGasSectionMultiClienteMultiPunto.tsx` (modal gas)
- `css/ContratoMultiClienteMultiPuntoRefactored.module.css` (estilos)

## 🚀 Pasos para Migrar

### 1. Actualizar Imports

**ANTES:**
```typescript
import ContratoMultiClienteMultiPuntoRefactored from './ContratoMultiClienteMultiPuntoRefactored';
```

**DESPUÉS:**
```typescript
import MultiClienteMultiPunto from './MultiClienteMultiPunto';
// o
import { MultiClienteMultiPunto } from './MultiClienteMultiPunto';
```

### 2. Actualizar Rutas (Laravel)

**ANTES:**
```php
Inertia::render('Eneon/Contratos/MultiClienteMultiPunto/ContratoMultiClienteMultiPuntoRefactored', [
    // props
]);
```

**DESPUÉS:**
```php
Inertia::render('Eneon/Contratos/MultiClienteMultiPunto/MultiClienteMultiPunto', [
    // props (sin cambios)
]);
```

### 3. Props Sin Cambios

Las props del componente **NO han cambiado**, por lo que no requiere ajustes en el backend:

```typescript
interface MultiClienteMultiPuntoProps {
    comercializadoras: any[];
    productos: any[];
    anexos: any[];
    tipoprecio: any[];
    contactos: Contacto[];
    clientes: Cliente[];
    cupsElectricos: any[];
    cupsGas: any[];
    localidades: Localidad[];
}
```

### 4. Actualizar Base de Datos (si es necesario)

Si los nuevos campos (GDO, permanencia, cambioTitular, cambioPotencia) requieren almacenamiento en BD:

```sql
-- Tabla contratos_electrico
ALTER TABLE contratos_electrico
ADD COLUMN GDO TINYINT(1) DEFAULT 0,
ADD COLUMN permanencia TINYINT(1) DEFAULT 0,
ADD COLUMN cambioTitular TINYINT(1) DEFAULT 0,
ADD COLUMN cambioPotencia TINYINT(1) DEFAULT 0;

-- Tabla contratos_gas
ALTER TABLE contratos_gas
ADD COLUMN GDO TINYINT(1) DEFAULT 0,
ADD COLUMN permanencia TINYINT(1) DEFAULT 0,
ADD COLUMN cambioTitular TINYINT(1) DEFAULT 0,
ADD COLUMN cambioPotencia TINYINT(1) DEFAULT 0;
```

### 5. Actualizar Controlador (si es necesario)

Asegurarse de que el controlador maneje los nuevos campos:

```php
// ContratosController.php
public function saveContratoMultiClienteMultiPunto(Request $request)
{
    // ... validación existente
    
    // Para cada CUPS eléctrico
    foreach ($request->electrico as $cups) {
        ContratoCupsElectrico::create([
            // ... campos existentes
            'GDO' => $cups['GDO'] ?? false,
            'permanencia' => $cups['permanencia'] ?? false,
            'cambioTitular' => $cups['cambioTitular'] ?? false,
            'cambioPotencia' => $cups['cambioPotencia'] ?? false,
        ]);
    }
    
    // Para cada CUPS gas
    foreach ($request->gas as $cups) {
        ContratoCupsGas::create([
            // ... campos existentes
            'GDO' => $cups['GDO'] ?? false,
            'permanencia' => $cups['permanencia'] ?? false,
            'cambioTitular' => $cups['cambioTitular'] ?? false,
            'cambioPotencia' => $cups['cambioPotencia'] ?? false,
        ]);
    }
}
```

## ✅ Testing

### Checklist de Funcionalidades a Probar

- [ ] **Representante Legal**
  - [ ] Selección por documento fiscal
  - [ ] Selección por razón social
  - [ ] Fecha de propuesta
  - [ ] Validaciones

- [ ] **Navegación Tabs**
  - [ ] Cambio entre tab eléctrico y gas
  - [ ] Contadores de CUPS actualizados
  - [ ] Visualización correcta en cada tab

- [ ] **CUPS Eléctricos**
  - [ ] Agregar nueva fila
  - [ ] Seleccionar cliente por fila
  - [ ] Seleccionar CUPS (filtrado por cliente)
  - [ ] Edición inline de todos los campos
  - [ ] Nuevos checkboxes funcionando (GDO, Perm., C.T, C.P)
  - [ ] Modal de edición completa
  - [ ] Eliminar fila
  - [ ] Limpiar cliente
  - [ ] Limpiar CUPS
  - [ ] Modal de precios
  - [ ] Anti-duplicados

- [ ] **CUPS Gas**
  - [ ] Todas las funcionalidades de CUPS eléctricos
  - [ ] Campos específicos de gas (cupsGas, direccionGas, consumoGas)

- [ ] **Datos Comunes**
  - [ ] Toggle activo/inactivo
  - [ ] Replicación de cambios cuando está activo
  - [ ] Cambios individuales cuando está inactivo
  - [ ] Campos afectados: comercializadora, producto, anexo, fechas, tipo precio

- [ ] **Validación y Guardado**
  - [ ] Validación de campos requeridos
  - [ ] Mensajes de error
  - [ ] Guardado exitoso
  - [ ] Redirección después de guardar

## 🐛 Problemas Conocidos y Soluciones

### Problema 1: CUPS no se filtran por cliente

**Causa:** Estado de clientes por fila no sincronizado  
**Solución:** Verificar que `handleClienteChange` se llama correctamente

### Problema 2: Datos comunes no se replican

**Causa:** Flag `isDatosComunes` no se pasa correctamente  
**Solución:** Asegurar que las tablas reciben la prop `isDatosComunes`

### Problema 3: Modal de precios no aparece

**Causa:** Estado `showModalPrecios` no manejado correctamente  
**Solución:** Verificar que se pasa tanto el estado como el setter

## 📈 Métricas de Mejora

| Métrica | Antes | Después | Mejora |
|---------|-------|---------|--------|
| **Líneas archivo principal** | 930 | 330 | -65% |
| **Componentes separados** | 0 | 5 | +5 |
| **Hooks personalizados** | 1 | 3 | +2 |
| **Mantenibilidad** | Baja | Alta | +++ |
| **Reutilización** | Baja | Alta | +++ |
| **Legibilidad** | Media | Alta | ++ |

## 🔗 Referencias

- [README.md](./README.md) - Documentación completa del módulo
- [UniClienteMultiPunto](../UniClienteMultiPunto/README.md) - Módulo similar de referencia
- [Interfaces.ts](../Interfaces/Interfaces.ts) - Definiciones de tipos

## 📞 Soporte

Si encuentras algún problema durante la migración:
1. Revisa esta guía completa
2. Compara con el componente antiguo
3. Verifica los logs del navegador
4. Revisa React DevTools para inspeccionar el estado

---

**Fecha de Migración:** 2025  
**Versión Antigua:** ContratoMultiClienteMultiPuntoRefactored  
**Versión Nueva:** MultiClienteMultiPunto v2.0