import React, { useRef, useState, useEffect } from "react"; import { Card, Col, Container, Form, Row, Tab, Button, Table, Badge, Accordion, Nav } from "react-bootstrap"; import BreadCrumb from "../../../../Components/Common/BreadCrumb"; import Swal from "sweetalert2"; import { Head, router, useForm } from "@inertiajs/react"; import Layout from "../../../../Layouts"; import 'react-bootstrap-typeahead/css/Typeahead.css'; import { Printer, Download, FileText, Bolt, Flame, User, Users, MapPin, Zap } from "lucide-react"; import { CupsElectrico, CupsGas, Cliente, PuntoSuministro, Contacto, PropuestaComercialCups, PropuestaComercialCliente, PropuestaComercial } from "../Interfaces/Interfaces"; //import { useDocumentosTramitados } from "../hooks/useDocumentosTramitados"; import { DocumentosTramitadosTable } from "../Edicion/components/DocumentosTramitadosTable"; import { useDocumentosTramitados } from "../Edicion/hooks/useDocumentosTramitados"; import { formatCalendarDateEs } from "../../../../utils/serverCalendarDate"; // Interfaces para tipado // (Eliminar las interfaces locales duplicadas) const ConsultaContratoMultiClienteMultiPunto = ({datos}: { datos: PropuestaComercial }) => { const [activeKey, setActiveKey] = useState("0"); const [activeMainTab, setActiveMainTab] = useState<'puntos-suministro' | 'electrico' | 'gas' | 'documentos'>('puntos-suministro'); const printRef = useRef(null); // Hook de documentos tramitados const { descargarDocumento } = useDocumentosTramitados(); // Imprimir datos recibidos para depuración useEffect(() => { console.log("Datos recibidos en ConsultaContratoMultiClienteMultiPunto:", datos); setActiveMainTab('electrico'); }, [datos]); // Validar si tenemos los datos necesarios const hasClienteData = datos && datos.propuesta_comercial_cliente && Array.isArray(datos.propuesta_comercial_cliente); const handlePrint = () => { if (printRef.current) { const printContents = printRef.current.innerHTML; const originalContents = document.body.innerHTML; document.body.innerHTML = ` Propuesta Comercial ${datos.RefProCom}

Propuesta Comercial: ${datos.RefProCom}

Fecha: ${formatCalendarDateEs(datos.FecProCom)}

${printContents} `; window.print(); document.body.innerHTML = originalContents; } }; const handleDownloadPDF = () => { // Función para descargar como PDF - Se implementaría con una librería como jsPDF Swal.fire({ title: 'Descargando...', text: 'La funcionalidad de descarga PDF será implementada próximamente', icon: 'info', timer: 2000, showConfirmButton: false, }); }; const getEstadoLabel = (estado: string) => { switch (estado) { case 'P': return Pendiente; case 'A': return Aprobado; case 'R': return Rechazado; default: return {estado}; } }; const getTipoContratoLabel = (tipo: number) => { switch (tipo) { case 1: return "Contrato Simple"; case 2: return "Contrato Multi-Punto"; case 3: return "Contrato Multi-Cliente Multi-Punto"; default: return `Tipo ${tipo}`; } }; const formatFecha = (fecha: string | undefined) => { if (!fecha) return "-"; return formatCalendarDateEs(fecha); }; return (

Propuesta Comercial: {datos.RefProCom}
{/* Información general de la propuesta */}
Información General
{datos.ObsProCom && ( )}
Número de Referencia {datos.RefProCom}
Fecha de Propuesta {formatFecha(datos.FecProCom)}
Tipo de Contrato {getTipoContratoLabel(datos.TipProCom)}
Estado {getEstadoLabel(datos.EstProCom)}
Observaciones {datos.ObsProCom}
{/* Contenido del tab: Información de Clientes */} setActiveKey(k as string)} className="mt-3"> {datos.propuesta_comercial_cliente.map((clienteData, clienteIndex) => ( {clienteData?.contacto?.NomConCli || 'Cliente sin nombre'} NIF: {clienteData?.contacto?.NIFConCli || 'N/A'} {/* Datos del cliente */}
Información de Contacto
{clienteData.contacto ? (
Nombre {clienteData.contacto.NomConCli}
NIF {clienteData.contacto.NIFConCli}
Teléfono {clienteData.contacto.TelFijConCli || clienteData.contacto.TelCelConCli || 'N/A'}
Email {clienteData.contacto.EmaConCli || 'N/A'}
Cargo {clienteData.contacto.CarConCli || 'N/A'}
) : (

No hay información de contacto disponible

)}
))} {/* Representante legal */} {hasClienteData && datos.propuesta_comercial_cliente[0]?.contacto && (
Información del Representante Legal
Nombre {datos.propuesta_comercial_cliente[0].contacto.NomConCli}
NIF {datos.propuesta_comercial_cliente[0].contacto.NIFConCli}
Dirección {datos.propuesta_comercial_cliente[0].contacto.NomViaDomFis} {datos.propuesta_comercial_cliente[0].contacto.NumViaDomFis}
Código Postal {datos.propuesta_comercial_cliente[0].contacto.CPLocFis}
Teléfono {datos.propuesta_comercial_cliente[0].contacto.TelFijConCli || datos.propuesta_comercial_cliente[0].contacto.TelCelConCli || 'N/A'}
Email {datos.propuesta_comercial_cliente[0].contacto.EmaConCli || 'N/A'}
Cargo {datos.propuesta_comercial_cliente[0].contacto.CarConCli || 'N/A'}
)} {/* Clientes y sus puntos de suministro */}
{/* Tabs principales con Información de Clientes, CUPS Eléctricos, CUPS Gas y Documentos */}
{/* Contenido del tab: CUPS Eléctricos */} {activeMainTab === 'electrico' && ( <> {/* Tabla de todos los CUPS Eléctricos agrupados */} {hasClienteData && datos.propuesta_comercial_cliente.some(cliente => cliente.propuesta_comercial_cups.some(cups => cups.TipCups === 1) ) ? (
Suministros Eléctricos
{hasClienteData && datos.propuesta_comercial_cliente.map((clienteData, clienteIndex) => ( clienteData.propuesta_comercial_cups .filter(cups => cups.TipCups === 1) .map((cups, cupsIndex) => { // Seguir el mismo patrón que Gas: usar el CUPS eléctrico asociado directamente a la propuesta const puntoSuministro = cups.punto_suministro; const cliente = puntoSuministro?.cliente; // Compatibilidad con distintas formas de exponer la relación desde el backend const cupEle = (cups as any)?.CupEle ?? (cups as any)?.cups_electrico; // Si no hay registro de CUPS Eléctrico asociado, no renderizar fila if (!cupEle) return null; return ( ); }) ))}
CUPS Cliente CIF/NIF Razón Social Dirección Tarifa Consumo Anual Potencias (kW) Comercializadora Producto Anexo Vigencia N° Contrato Comercializadora
{cupEle.CUPsEle || 'N/A'}
{cliente ? (
{cliente.CodCli}
) : 'N/A'} 		{cliente ? cliente.NumCifCli : 'N/A'} {cliente ? cliente.RazSocCli : 'N/A'} {puntoSuministro ? (
{puntoSuministro.NomViaPunSum} {puntoSuministro.NumViaPunSum}
{puntoSuministro.localidad ? `${puntoSuministro.localidad.DesLoc}` : ''} {puntoSuministro.CPLocSoc ? ` (${puntoSuministro.CPLocSoc})` : ''}
) : 'N/A'} 		{(cups as any)?.tarifa_electrica?.NomTarEle ?? (cups as any)?.tarifaElectrica?.NomTarEle ?? 'N/A'} {cupEle.ConAnuCup || (cups as any).ConCup || 'N/A'} kWh
{cups.PotEleConP1 && P1: {cups.PotEleConP1} kW} {cups.PotEleConP2 && P2: {cups.PotEleConP2} kW} {cups.PotEleConP3 && P3: {cups.PotEleConP3} kW} {cups.PotEleConP4 && P4: {cups.PotEleConP4} kW} {cups.PotEleConP5 && P5: {cups.PotEleConP5} kW} {cups.PotEleConP6 && P6: {cups.PotEleConP6} kW} {!cups.PotEleConP1 && !cups.PotEleConP2 && !cups.PotEleConP3 && !cups.PotEleConP4 && !cups.PotEleConP5 && !cups.PotEleConP6 && 'N/A'}
{cups.comercializadora?.RazSocCom || 'N/A'} {cups.producto?.DesPro || 'N/A'} {cups.anexo_producto?.DesAnePro || 'N/A'} {formatFecha(cups.FecActCUPs)} - {formatFecha(cups.FecVenCUPs)}
{cups.NrContratoAudax}
) : (
No hay CUPS eléctricos
No se encontraron suministros eléctricos para este cliente
)} )} {/* Contenido del tab: CUPS Gas */} {activeMainTab === 'gas' && ( <> {/* Tabla de todos los CUPS Gas agrupados */} {hasClienteData && datos.propuesta_comercial_cliente.some(cliente => cliente.propuesta_comercial_cups.some(cups => cups.TipCups === 2) ) ? (
Suministros de Gas
{datos.propuesta_comercial_cliente.map((clienteData, clienteIndex) => ( clienteData.propuesta_comercial_cups .filter(cups => cups.TipCups === 2) .map((cups, cupsIndex) => { // Obtener el punto de suministro y alias del CUPS de gas const puntoSuministro = cups.punto_suministro; const cliente = puntoSuministro?.cliente; const cupGas = (cups as any)?.CupGas ?? (cups as any)?.cups_gas; // Si no hay registro de CUPS Gas asociado, no renderizar fila if (!cupGas) return null; return ( ); }) ))}
CUPS Cliente CIF/NIF Razón Social Dirección Tarifa Consumo Anual Comercializadora Producto Anexo Vigencia N° Contrato Comercializadora
{cupGas.CupsGas || 'N/A'}
{cliente ? (
{cliente.CodCli}
) : 'N/A'} 		{cliente ? cliente.NumCifCli : 'N/A'} {cliente ? cliente.RazSocCli : 'N/A'} {puntoSuministro ? (
{puntoSuministro.NomViaPunSum} {puntoSuministro.NumViaPunSum}
{puntoSuministro.localidad ? `${puntoSuministro.localidad.DesLoc}` : ''} {puntoSuministro.CPLocSoc ? ` (${puntoSuministro.CPLocSoc})` : ''}
) : 'N/A'} 		{(cups as any)?.tarifa_gas?.NomTarGas ?? (cups as any)?.tarifa_gas?.DesTarGas ?? (cups as any)?.tarifaGas?.NomTarGas ?? (cups as any)?.tarifaGas?.DesTarGas ?? 'N/A'} {cupGas.ConAnuCup || cups.ConCup || 'N/A'} m³ {cups.comercializadora?.RazSocCom || 'N/A'} {cups.producto?.DesPro || 'N/A'} {cups.anexo_producto?.DesAnePro || 'N/A'} {formatFecha(cups.FecActCUPs)} - {formatFecha(cups.FecVenCUPs)}
{cups.NrContratoAudax}
) : (
No hay CUPS de gas
No se encontraron suministros de gas para este cliente
)} )} {/* Contenido del tab: Documentos Tramitados */} {activeMainTab === 'documentos' && ( <>
Documentos del Contrato
)}
); }; ConsultaContratoMultiClienteMultiPunto.layout = (page: any) => ; export default ConsultaContratoMultiClienteMultiPunto;