import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Label } from '@/components/ui/label'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { BarChart2, Download, FileSpreadsheet, FileText, Image, Table2 } from 'lucide-react'; import { useState } from 'react'; declare const route: (...args: any[]) => string; // ─── Types ──────────────────────────────────────────────────────────────────── interface ColumnDef { key: string; label: string; sortable: boolean; type: string; } interface FilterValues { [key: string]: any; } interface Props { open: boolean; onOpenChange: (open: boolean) => void; reportLabel: string; columns: ColumnDef[]; filterValues: FilterValues; currentModule: string; exportDataRoute: string; exportGraphRoute: string; hasRun: boolean; } type ExportPath = 'data' | 'graph'; const GRAPH_SECTIONS = [ { id: 'summary', label: 'Summary Cards', desc: '4 top-level KPI cards', domId: 'export-section-summary' }, { id: 'sub_summary', label: 'KPI Metrics', desc: 'Secondary KPI strip', domId: 'export-section-sub-summary' }, { id: 'primary_chart', label: 'Primary Chart', desc: 'Main trend chart', domId: 'export-section-primary-chart' }, { id: 'aux_charts', label: 'Analytics Charts', desc: 'Dual chart analytics panel', domId: 'export-section-aux-charts' }, ]; // ─── SVG → PNG capture ─────────────────────────────────────────────────────── // DomPDF cannot reliably render complex SVG paths (bezier curves from Recharts). // We convert each SVG to a PNG via canvas before sending to the server. async function captureSvgsFromSection(domId: string): Promise { const container = document.getElementById(domId); if (!container) return []; const svgs = Array.from(container.querySelectorAll('svg')); const results: string[] = []; for (const svg of svgs) { try { const bbox = svg.getBoundingClientRect(); const w = Math.round(bbox.width || 600); const h = Math.round(bbox.height || 260); const scale = 2; // retina quality // Clone and fix dimensions for serialization const clone = svg.cloneNode(true) as SVGElement; clone.setAttribute('width', String(w)); clone.setAttribute('height', String(h)); clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); const svgStr = new XMLSerializer().serializeToString(clone); const svgBlob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' }); const svgUrl = URL.createObjectURL(svgBlob); // Draw SVG → canvas → PNG const b64 = await new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { const canvas = document.createElement('canvas'); canvas.width = w * scale; canvas.height = h * scale; const ctx = canvas.getContext('2d')!; ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.scale(scale, scale); ctx.drawImage(img, 0, 0, w, h); URL.revokeObjectURL(svgUrl); // Strip the "data:image/png;base64," prefix resolve(canvas.toDataURL('image/png').split(',')[1]); }; img.onerror = () => { URL.revokeObjectURL(svgUrl); reject(new Error('img load failed')); }; img.src = svgUrl; }); if (b64) results.push(b64); } catch { // skip charts that fail to capture } } return results; } // ─── Component ──────────────────────────────────────────────────────────────── export default function ReportExportModal({ open, onOpenChange, reportLabel, columns, filterValues, currentModule, exportDataRoute, exportGraphRoute, hasRun, }: Props) { const [exportPath, setExportPath] = useState('data'); const [dataFormat, setDataFormat] = useState<'csv' | 'pdf'>('csv'); const [selectedCols, setSelectedCols] = useState(() => columns.map((c) => c.key)); const [selectedSections, setSelectedSections] = useState(GRAPH_SECTIONS.map((s) => s.id)); const [loading, setLoading] = useState(false); const allColsSelected = selectedCols.length === columns.length; const toggleCol = (key: string, checked: boolean) => { setSelectedCols((prev) => checked ? [...prev, key] : prev.filter((k) => k !== key)); }; const toggleSection = (id: string, checked: boolean) => { setSelectedSections((prev) => checked ? [...prev, id] : prev.filter((s) => s !== id)); }; const toggleAllCols = () => { setSelectedCols(allColsSelected ? [] : columns.map((c) => c.key)); }; // ── Data export via form POST (triggers browser download) ───────────────── const submitDataExport = () => { const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? ''; const form = document.createElement('form'); form.method = 'POST'; form.action = exportDataRoute; form.style.display = 'none'; const addHidden = (name: string, val: string) => { const el = document.createElement('input'); el.name = name; el.value = val; form.appendChild(el); }; addHidden('_token', csrf); addHidden('module', currentModule); addHidden('format', dataFormat); // Filter values Object.entries(filterValues).forEach(([k, v]) => { if (Array.isArray(v)) { v.forEach((item) => { if (item !== '' && item != null) addHidden(`${k}[]`, String(item)); }); } else if (v !== '' && v != null) { addHidden(k, String(v)); } }); // Selected columns selectedCols.forEach((col) => addHidden('columns[]', col)); document.body.appendChild(form); form.submit(); document.body.removeChild(form); onOpenChange(false); }; // ── Graph export — capture SVGs → POST JSON → blob download ────────────── const submitGraphExport = async () => { setLoading(true); try { // Capture each section's charts as PNG (async, canvas-based) const svgData: Record = {}; await Promise.all( selectedSections.map(async (sectionId) => { const sec = GRAPH_SECTIONS.find((s) => s.id === sectionId); if (sec) { const captured = await captureSvgsFromSection(sec.domId); if (captured.length) svgData[sectionId] = captured; } }), ); const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? ''; const response = await fetch(exportGraphRoute, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest', }, body: JSON.stringify({ module: currentModule, sections: selectedSections, svg_data: svgData, ...Object.fromEntries( Object.entries(filterValues).filter(([, v]) => v !== '' && v != null), ), }), }); if (!response.ok) throw new Error(`Export failed: ${response.status}`); const blob = await response.blob(); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${currentModule}-graph-report.pdf`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); onOpenChange(false); } catch (err) { console.error(err); alert('Graph export failed. Please try again.'); } finally { setLoading(false); } }; const handleExport = () => { if (exportPath === 'data') submitDataExport(); else submitGraphExport(); }; const canExport = exportPath === 'data' ? selectedCols.length > 0 : selectedSections.length > 0; return ( ); }