diff --git a/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx b/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
index af905b2..ff51c1a 100644
--- a/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
+++ b/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
@@ -2,10 +2,11 @@
"use client";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
import { Button } from "@/components/ui/button";
import { FileDown, BarChart2, Users, CalendarCheck } from "lucide-react";
import jsPDF from "jspdf";
+import html2canvas from "html2canvas";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
import {
countAppointmentsToday,
@@ -30,10 +31,51 @@ const FALLBACK_MEDICOS = [
// Helper Functions
// ============================================================================
-function exportPDF(title: string, content: string) {
+async function exportPDF(title: string, content: string, chartElementId?: string) {
const doc = new jsPDF();
- doc.text(title, 10, 10);
- doc.text(content, 10, 20);
+ let yPosition = 15;
+
+ // Add title
+ doc.setFontSize(16);
+ doc.setFont(undefined, "bold");
+ doc.text(title, 15, yPosition);
+ yPosition += 10;
+
+ // Add description/content
+ doc.setFontSize(11);
+ doc.setFont(undefined, "normal");
+ const contentLines = doc.splitTextToSize(content, 180);
+ doc.text(contentLines, 15, yPosition);
+ yPosition += contentLines.length * 5 + 15;
+
+ // Capture chart if chartElementId is provided
+ if (chartElementId) {
+ try {
+ const chartElement = document.getElementById(chartElementId);
+ if (chartElement) {
+ // Create a canvas from the chart element
+ const canvas = await html2canvas(chartElement, {
+ backgroundColor: "#ffffff",
+ scale: 2,
+ logging: false,
+ });
+
+ // Convert canvas to image
+ const imgData = canvas.toDataURL("image/png");
+ const imgWidth = 180;
+ const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+ // Add image to PDF
+ doc.addImage(imgData, "PNG", 15, yPosition, imgWidth, imgHeight);
+ yPosition += imgHeight + 10;
+ }
+ } catch (error) {
+ console.error("Error capturing chart:", error);
+ doc.text("(Erro ao capturar gráfico)", 15, yPosition);
+ yPosition += 10;
+ }
+ }
+
doc.save(`${title.toLowerCase().replace(/ /g, "-")}.pdf`);
}
@@ -203,7 +245,7 @@ export default function RelatoriosPage() {
size="sm"
variant="outline"
className="hover:bg-primary! hover:text-white! transition-colors w-full md:w-auto"
- onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.")}
+ onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.", "chart-consultas")}
>
Exportar PDF
@@ -211,15 +253,17 @@ export default function RelatoriosPage() {
{loading ? (
Carregando dados...
) : (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
)}
@@ -229,9 +273,10 @@ export default function RelatoriosPage() {
Pacientes Mais Atendidos
-
+
-
+
+
| Paciente |
@@ -257,15 +302,17 @@ export default function RelatoriosPage() {
)}
+
{/* Médicos mais produtivos */}
Médicos Mais Produtivos
-
+
-
+
+
| Médico |
@@ -291,6 +338,7 @@ export default function RelatoriosPage() {
)}
+