Replace PDF iframe preview with HTML report preview

frontend/src/App.jsx

@@ -264,6 +264,19 @@ function normalizeText(value) {
     .replace(/[^a-z0-9]+/g, '')
 }
 
+function formatReportFieldValue(field, rawValue) {
+  if (field?.key === 'FON' && field?.kind === 'checkbox') {
+    return rawValue ? 'Ofertas' : 'Transações'
+  }
+  if (field?.kind === 'checkbox') {
+    return rawValue ? 'Sim' : 'Não'
+  }
+  if (rawValue === null || rawValue === undefined || rawValue === '') {
+    return '—'
+  }
+  return String(rawValue)
+}
+
 function extractFieldHints(rawDescription) {
   const cleaned = String(rawDescription || '')
     .replace(/^\s*#\s*(?=<)/gm, '')
@@ -524,7 +537,7 @@ export default function App() {
     [calculators, activeId]
   )
   const targetOutput = result?.text_outputs?.[0] || null
-  const previewPdfUrl = result?.pdf_url ? buildFileUrl(`${result.pdf_url}?download=0`) : ''
+  const previewChartUrl = result?.image_url ? buildFileUrl(result.image_url) : ''
   const downloadPdfUrl = result?.pdf_url ? buildFileUrl(`${result.pdf_url}?download=1`) : ''
   const dataSubtitle = useMemo(
     () => extractDataSubtitle(activeCalculator?.description || ''),
@@ -589,6 +602,23 @@ export default function App() {
     }
     return mapping
   }, [groupedFields])
+  const reportInputRows = useMemo(() => {
+    if (!activeCalculator) return []
+    return (activeCalculator.inputs || []).map((field) => ({
+      key: field.key,
+      label: field.label,
+      value: formatReportFieldValue(field, inputs[field.key]),
+    }))
+  }, [activeCalculator, inputs])
+  const reportOutputRows = useMemo(
+    () =>
+      (result?.text_outputs || []).map((entry, index) => ({
+        key: `${index}-${entry?.label || ''}`,
+        label: String(entry?.label || ''),
+        value: String(entry?.value || ''),
+      })),
+    [result]
+  )
 
   useEffect(() => {
     let mounted = true
@@ -762,19 +792,50 @@ export default function App() {
                         <p>{targetOutput.value}</p>
                       </article>
                     ) : null}
+                    <article className="report-html-preview">
+                      <h3 className="report-preview-title">Pré-visualização do Relatório</h3>
+                      <div className="report-preview-grid">
+                        <section className="report-preview-section">
+                          <h4>Parâmetros de Entrada</h4>
+                          <div className="report-table">
+                            {reportInputRows.map((row) => (
+                              <div key={`input-${row.key}`} className="report-row">
+                                <span className="report-cell-label">{row.label}</span>
+                                <span className="report-cell-value">{row.value}</span>
+                              </div>
+                            ))}
+                          </div>
+                        </section>
+
+                        <section className="report-preview-section">
+                          <h4>Resultados</h4>
+                          <div className="report-table">
+                            {reportOutputRows.map((row, index) => (
+                              <div key={`output-${row.key}`} className="report-row">
+                                <span className="report-cell-label">{row.label || `Resultado ${index + 1}`}</span>
+                                <span className="report-cell-value">{row.value || '—'}</span>
+                              </div>
+                            ))}
+                          </div>
+                        </section>
+                      </div>
+                      {previewChartUrl ? (
+                        <section className="report-preview-section">
+                          <h4>Gráfico</h4>
+                          <img
+                            src={previewChartUrl}
+                            alt={`Gráfico ${activeCalculator?.tab_label || ''}`}
+                            className="report-chart-image"
+                          />
+                        </section>
+                      ) : null}
+                    </article>
                     {result.pdf_url ? (
-                      <>
-                        <iframe
-                          title={`Relatório ${activeCalculator?.tab_label || ''}`}
-                          src={previewPdfUrl}
-                          className="pdf-frame"
-                        />
-                        <a className="secondary-btn" href={downloadPdfUrl} target="_blank" rel="noreferrer">
-                          Download relatório PDF
-                        </a>
-                      </>
+                      <a className="secondary-btn" href={downloadPdfUrl} target="_blank" rel="noreferrer">
+                        Download relatório PDF
+                      </a>
                     ) : (
-                      <p className="muted">Não foi possível gerar o PDF.</p>
+                      <p className="muted">Não foi possível gerar o PDF para download.</p>
                     )}
                   </>
                 ) : null}

frontend/src/styles.css

@@ -382,13 +382,82 @@ body {
   cursor: wait;
 }
 
-.pdf-frame {
-  width: 100%;
-  min-height: 640px;
+.report-html-preview {
   border: 1px solid #d8e2ec;
   border-radius: var(--radius-md);
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.report-preview-title {
+  margin: 0;
+  font-family: 'Sora', sans-serif;
+  font-size: 0.9rem;
+  color: #27496a;
+}
+
+.report-preview-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.report-preview-section {
+  border: 1px solid #deebf7;
+  border-radius: 10px;
+  background: #fdfefe;
+  padding: 9px;
+}
+
+.report-preview-section h4 {
+  margin: 0 0 8px;
+  font-size: 0.8rem;
+  font-family: 'Sora', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: #315476;
+}
+
+.report-table {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.report-row {
+  display: grid;
+  grid-template-columns: 1.2fr 0.8fr;
+  gap: 8px;
+  align-items: start;
+  border: 1px solid #e0eaf4;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 6px 8px;
+}
+
+.report-cell-label {
+  font-size: 0.79rem;
+  font-weight: 700;
+  color: #375776;
+}
+
+.report-cell-value {
+  font-size: 0.81rem;
+  color: #243447;
+  text-align: right;
+  word-break: break-word;
+}
+
+.report-chart-image {
+  width: 100%;
+  display: block;
+  border: 1px solid #d8e2ec;
+  border-radius: 10px;
   background: #fff;
-  box-shadow: inset 0 0 0 1px rgba(214, 223, 233, 0.6);
+  box-shadow: inset 0 0 0 1px rgba(214, 223, 233, 0.35);
 }
 
 .secondary-btn {
@@ -419,12 +488,14 @@ body {
     min-height: 560px;
   }
 
-  .pdf-frame {
-    min-height: 460px;
-  }
-
   .description,
-  .fields-section-grid {
+  .fields-section-grid,
+  .report-preview-grid,
+  .report-row {
     grid-template-columns: 1fr;
   }
+
+  .report-cell-value {
+    text-align: left;
+  }
 }