Budget Report - Copy this React, Tailwind Component to your project
{{-`-<html>-<head>-<style>-table-{-border-collapse:-collapse;-width:-100%;-margin-bottom:-20px;-}-table,-th,-td-{-border:-1px-solid-#ccc;-}-th,-td-{-padding:-8px;-text-align:-left;-}-th-{-background-color:-#f4f4f4;-}-</style>-</head>-<body>-<h1>Presupuesto-Generado</h1>-<p><strong>Proyecto:</strong>-{{dropdownProyectos.selectedItem.nombre}}</p>-<p><strong>Cliente:</strong>-{{selectedClienteId.selectedItem.nombre}}</p>-<p><strong>Teléfono:</strong>-{{selectedClienteId.selectedItem.telefono}}</p>-<p><strong>Superficie-Total:</strong>-{{dropdownProyectos.selectedItem.superficie_total}}-m²</p>-<h2>Habitaciones</h2>-{{queryGetHabitacion.data.id.map((_,-index)-=>-{-const-detalles-=-queryBudget.data.detalles[index]-||-[];-return-`-<h3>${queryGetHabitacion.data.nombre[index]}-(${queryGetHabitacion.data.superficie[index]}-m²)</h3>-<table>-<thead>-<tr>-<th>Categoría</th>-<th>Descripción</th>-<th>Cantidad</th>-<th>Unidad</th>-<th>Precio-Unitario</th>-<th>Costo-Total</th>-</tr>-</thead>-<tbody>-${detalles.map(detalle-=>-`-<tr>-<td>${detalle.categoria-||-"N/A"}</td>-<td>${detalle.descripcion-||-"N/A"}</td>-<td>${detalle.cantidad-||-0}</td>-<td>${detalle.unidad-||-"N/A"}</td>-<td>${detalle.precio_unitario-?-detalle.precio_unitario.toFixed(2)-:-"0.00"}</td>-<td>${detalle.costo_total-?-detalle.costo_total.toFixed(2)-:-"0.00"}</td>-</tr>-`).join("")}-</tbody>-</table>-`;-}).join("")}}-</body>-</html>`-}}
