# Módulo de Edición de Contratos

Este módulo contiene los componentes refactorizados para la edición de contratos, aplicando principios SOLID y arquitectura modular.

## 📁 Estructura del Proyecto

```
Edicion/
├── hooks/                          # Hooks personalizados reutilizables
│   ├── useContratoState.ts        # Estado general (activeKey, activeTab)
│   ├── useContratoEdition.ts      # Estado de edición de filas
│   ├── useContratoHandlers.ts     # Handlers CRUD (update, delete)
│   └── index.ts                    # Exportación centralizada
│
├── components/                     # Componentes UI reutilizables
│   ├── ContratoHeader.tsx         # Header con acciones de impresión
│   ├── ContratoInfo.tsx           # Información general del contrato
│   ├── ClienteInfo.tsx            # Información de cliente y contacto
│   ├── TabNavigator.tsx           # Navegación por pestañas (CUPS)
│   ├── ActionsColumn.tsx          # Columna de acciones (Edit, Save, Delete)
│   ├── EmptyState.tsx             # Estado vacío (sin CUPS)
│   ├── CupsTable.tsx              # Tabla de CUPS (eléctrico/gas)
│   ├── CupsTableRow.tsx           # Fila de tabla de CUPS
│   └── index.ts                    # Exportación centralizada
│
├── utils/                          # Funciones utilitarias
│   ├── contratoUtils.ts           # Utilidades compartidas
│   └── index.ts                    # Exportación centralizada
│
├── EditarContrato.tsx             # Componente principal (Simple/MultiPunto)
└── EditarContratoMultiClienteMultiPunto.tsx  # Componente Multi-Cliente

```

## 🎯 Principios SOLID Aplicados

### 1. **Single Responsibility Principle (SRP)**
Cada componente y hook tiene una única responsabilidad:
- `useContratoState`: Solo maneja estado de navegación
- `useContratoEdition`: Solo maneja estado de edición
- `useContratoHandlers`: Solo maneja operaciones CRUD
- `CupsTable`: Solo renderiza tabla
- `CupsTableRow`: Solo renderiza fila

### 2. **Open/Closed Principle (OCP)**
Los componentes son extensibles sin modificar el código existente:
- `CupsTable` acepta props para personalizar comportamiento
- `CupsTableRow` funciona tanto para eléctrico como gas

### 3. **Liskov Substitution Principle (LSP)**
Los componentes pueden ser intercambiados sin afectar el funcionamiento:
- `EditarContrato` y `EditarContratoMultiClienteMultiPunto` usan los mismos componentes base

### 4. **Interface Segregation Principle (ISP)**
Las interfaces son específicas y no fuerzan implementaciones innecesarias:
- Props bien definidas y opcionales donde corresponde
- `isMultiCliente` controla columnas adicionales

### 5. **Dependency Inversion Principle (DIP)**
Los componentes dependen de abstracciones, no de implementaciones concretas:
- Hooks abstraen lógica de negocio
- Componentes reciben funciones como props

## 🔧 Hooks Personalizados

### `useContratoState()`
Maneja el estado de navegación del contrato.

```typescript
const { activeKey, setActiveKey, activeTab, setActiveTab } = useContratoState();
```

**Retorna:**
- `activeKey`: Accordion activo (para EditarContrato)
- `setActiveKey`: Función para cambiar accordion
- `activeTab`: Tab activa ('electrico' | 'gas')
- `setActiveTab`: Función para cambiar tab

### `useContratoEdition()`
Maneja el estado de edición inline de filas.

```typescript
const { 
  isEditing, 
  getEditData, 
  startEdit, 
  cancelEdit, 
  updateField, 
  clearEdit 
} = useContratoEdition();
```

**Métodos:**
- `isEditing(rowId)`: Verifica si una fila está en edición
- `getEditData(rowId)`: Obtiene datos editados de una fila
- `startEdit(rowId, currentData)`: Inicia edición de una fila
- `cancelEdit(rowId)`: Cancela edición
- `updateField(rowId, field, value)`: Actualiza campo
- `clearEdit(rowId)`: Limpia datos de edición

### `useContratoHandlers()`
Maneja operaciones CRUD sobre CUPS.

```typescript
const { handleUpdate, handleDelete } = useContratoHandlers();
```

**Métodos:**
- `handleUpdate(rowId, dataToUpdate, onSuccess?)`: Actualiza CUPS
- `handleDelete(rowId)`: Elimina CUPS

## 🧩 Componentes Principales

### `ContratoHeader`
Header del contrato con acciones de impresión y descarga.

```typescript
<ContratoHeader
  refProCom={datos.RefProCom}
  onPrint={handlePrint}
  onDownloadPDF={handleDownloadPDF}
/>
```

### `ContratoInfo`
Información general del contrato (referencia, fecha, tipo, estado).

```typescript
<ContratoInfo
  datos={datos}
  formatFecha={formatFecha}
  getTipoContratoLabel={getTipoContratoLabel}
  getEstadoLabel={getEstadoLabel}
/>
```

### `ClienteInfo`
Información del cliente y contacto (solo para EditarContrato).

```typescript
<ClienteInfo clienteData={clienteData} />
```

### `TabNavigator`
Navegación por pestañas entre CUPS eléctricos y gas.

```typescript
<TabNavigator
  activeTab={activeTab}
  onTabChange={setActiveTab}
  electricCount={cupsElectricos.length}
  gasCount={cupsGas.length}
/>
```

### `CupsTable`
Tabla de CUPS (eléctrico o gas) con funcionalidad de edición.

```typescript
<CupsTable
  cupsList={cupsElectricos}
  tipo="electrico"
  isMultiCliente={false}
  isEditing={isEditing}
  getEditData={getEditData}
  formatFecha={formatFecha}
  getEstadoContratoLabel={getEstadoContratoLabel}
  comercializadoras={comercializadoras}
  productos={productos}
  anexos={anexos}
  onFieldChange={updateField}
  onEdit={handleEdit}
  onSave={handleSave}
  onCancel={handleCancel}
  onDelete={handleDelete}
/>
```

### `EmptyState`
Estado vacío cuando no hay CUPS de un tipo.

```typescript
<EmptyState type="electrico" />
```

## 🛠️ Utilidades

### `contratoUtils.ts`

Funciones utilitarias compartidas:

```typescript
import { 
  formatFecha, 
  getTipoContratoLabel, 
  getEstadoLabel, 
  getEstadoContratoLabel,
  handlePrint
} from './utils';
```

**Funciones:**
- `formatFecha(fecha)`: Formatea fecha a string legible
- `getTipoContratoLabel(tipo)`: Retorna etiqueta del tipo de contrato
- `getEstadoLabel(estado)`: Retorna Badge del estado
- `getEstadoContratoLabel(estado)`: Retorna etiqueta del estado de contrato
- `handlePrint(printRef, refProCom, fecProCom)`: Maneja impresión

## 📝 Diferencias entre EditarContrato y EditarContratoMultiClienteMultiPunto

### EditarContrato (Simple/MultiPunto)
- **Estructura**: Un cliente → Accordion → Pestañas CUPS
- **Tabla CUPS**: `isMultiCliente={false}` (sin columnas de cliente)
- **Casos de uso**: 
  - Contrato Simple (1 cliente, 1 CUPS)
  - Contrato Multi-Punto (1 cliente, N CUPS)

### EditarContratoMultiClienteMultiPunto
- **Estructura**: Pestañas CUPS → Tabla global con todos los clientes
- **Tabla CUPS**: `isMultiCliente={true}` (incluye columnas: Cliente, CIF/NIF, Razón Social)
- **Casos de uso**: 
  - Contrato Multi-Cliente Multi-Punto (N clientes, N CUPS)

## 🔄 Flujo de Edición

1. Usuario hace clic en **Editar** (icono lápiz)
2. `startEdit(rowId, cups)` se ejecuta
3. Fila entra en modo edición (campos editables)
4. Usuario modifica campos → `updateField(rowId, field, value)`
5. Usuario hace clic en **Guardar** → `handleSave(rowId)`
6. `handleUpdate` envía datos al backend vía Inertia
7. `clearEdit(rowId)` limpia estado de edición
8. Datos se actualizan en la vista

## 🎨 Características Visuales

### Pestañas
- **CUPS Eléctricos**: Icono ⚡ (Bolt), Badge azul
- **CUPS Gas**: Icono 🔥 (Flame), Badge amarillo
- Contador de CUPS por tipo

### Estados de Fila
- **Modo Vista**: Botones Editar (amarillo) y Eliminar (rojo)
- **Modo Edición**: Botones Guardar (verde) y Cancelar (gris)
- **Alerta**: Fila con fondo amarillo si `NrContratoAudax == "0"`

### Estados de Contrato
- **Activo**: Badge verde
- **Pendiente**: Badge azul
- **En proceso**: Badge amarillo
- **Cancelado**: Badge rojo

## 🚀 Ejemplo de Uso

```typescript
import EditarContrato from './Edicion/EditarContrato';

<EditarContrato
  datos={propuestaComercial}
  comercializadoras={comercializadoras}
  productos={productos}
  anexos={anexos}
  tipoprecio={tipoprecio}
/>
```

## 📦 Dependencias

- React 18+
- React Bootstrap
- Inertia.js
- SweetAlert2
- Lucide React (iconos)

## 🧪 Testing

Para probar los componentes:

```bash
npm run dev
```

Navega a:
- Editar Contrato Simple: `/contratos/editar/{id}`
- Editar Multi-Cliente: `/contratos/editar-multi/{id}`

## 🔧 Mantenimiento

### Agregar nueva columna a la tabla
1. Modificar `CupsTableRow.tsx` para agregar `<td>`
2. Modificar `CupsTable.tsx` para agregar `<th>`

### Agregar nuevo campo editable
1. Actualizar `useContratoEdition.ts` → `startEdit()`
2. Agregar campo en `CupsTableRow.tsx`
3. Actualizar `handleUpdate` en `useContratoHandlers.ts`

### Agregar nuevo hook
1. Crear archivo en `hooks/`
2. Exportar en `hooks/index.ts`
3. Usar en componentes principales

## 📚 Recursos

- [React Hooks](https://react.dev/reference/react)
- [React Bootstrap](https://react-bootstrap.github.io/)
- [Inertia.js](https://inertiajs.com/)
- [SOLID Principles](https://en.wikipedia.org/wiki/SOLID)

---

**Última actualización**: 2025
**Autor**: AI Assistant