import React from "react"; import { Card, Col, Container, Row, Button, Badge } from "react-bootstrap"; import { Head, router } from "@inertiajs/react"; import { Edit, FileText } from "lucide-react"; import BreadCrumb from "../../../../Components/Common/BreadCrumb"; import Layout from "../../../../Layouts"; import { useLoading } from '../../../../LoadingContext'; import { formatCalendarDateEs } from '../../../../utils/serverCalendarDate'; interface Producto { CodPro: number; DesPro: string; CodigoServicio: string; comercializadora?: { CodCom: number; RazSocCom: string; NumCifCom: string; }; } interface TipoComision { CodTipCom: number; DesTipCom: string; } interface AnexoProducto { CodAnePro: number; DesAnePro: string; CodPro: number; SerGas: number; SerEle: number; TipPre: string; DocAnePro: string; FecCreateDoc: string; ObsAnePro: string; FecIniAne: string; CodTipCom: number; EstCom: number; EstAne: number; producto?: Producto; tipoComision?: TipoComision; created_at: string; updated_at: string; } const ConsultaAnexoProducto = ({ anexoProducto }: { anexoProducto: AnexoProducto }) => { const { showLoading, hideLoading } = useLoading(); const handleEdit = () => { showLoading(); router.visit(route('anexo-productos.edit', anexoProducto.CodAnePro), { onFinish: () => hideLoading() }); }; const handleBack = () => { showLoading(); router.visit(route('anexo-productos.index'), { onFinish: () => hideLoading() }); }; const formatDate = (dateString: string) => { if (!dateString) return 'No especificada'; const s = formatCalendarDateEs(dateString); return s === '-' ? 'No especificada' : s; }; const formatDateTime = (dateString: string) => { if (!dateString) return 'No especificada'; return new Date(dateString).toLocaleString('es-ES', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }); }; return (

Anexo: {anexoProducto.DesAnePro} {anexoProducto.EstAne === 1 ? "Activo" : "Suspendido"}

{/* Información General */}

Información General

ID del Anexo:

{anexoProducto.CodAnePro}

Descripción:

{anexoProducto.DesAnePro}

Tipo de Precio:

{anexoProducto.TipPre || 'No especificado'}

Estado del Anexo:

{anexoProducto.EstAne === 1 ? "Activo" : "Suspendido"}

Estado Comercial:

{anexoProducto.EstCom === 1 ? "Comercial" : "No Comercial"}

Fecha de Inicio:

{formatDate(anexoProducto.FecIniAne)}

{/* Producto Asociado */}

Producto Asociado

Nombre del Producto:

{anexoProducto.producto?.DesPro || 'No asignado'}

Código de Servicio:

{anexoProducto.producto?.CodigoServicio || 'No disponible'}

Comercializadora:

{anexoProducto.producto?.comercializadora?.RazSocCom || 'No disponible'}

{/* Tipo de Comisión */} {anexoProducto.tipoComision && ( <>

Tipo de Comisión

Descripción:

{anexoProducto.tipoComision.DesTipCom}

)} {/* Servicios */}

Servicios del Anexo

Servicio de Gas:

{anexoProducto.SerGas ? "Sí" : "No"}

Servicio Eléctrico:

{anexoProducto.SerEle ? "Sí" : "No"}

{/* Documentación */} {(anexoProducto.DocAnePro || anexoProducto.FecCreateDoc) && ( <>

Documentación

{anexoProducto.DocAnePro && (

Documento:

{anexoProducto.DocAnePro}

)} {anexoProducto.FecCreateDoc && (

Fecha Creación Documento:

{formatDate(anexoProducto.FecCreateDoc)}

)} )} {/* Observaciones */} {anexoProducto.ObsAnePro && ( <>

Observaciones

{anexoProducto.ObsAnePro}

)} {/* Información del Sistema */}

Información del Sistema

Fecha de Creación:

{formatDateTime(anexoProducto.created_at)}

Última Actualización:

{formatDateTime(anexoProducto.updated_at)}

); }; ConsultaAnexoProducto.layout = (page: any) => ; export default ConsultaAnexoProducto;