89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { FileDown } from "lucide-react";
|
|
import jsPDF from "jspdf";
|
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
|
|
|
|
export default function RelatoriosPage() {
|
|
// Dados fictícios para o gráfico financeiro
|
|
const financeiro = [
|
|
{ mes: "Jan", faturamento: 35000, despesas: 12000 },
|
|
{ mes: "Fev", faturamento: 29000, despesas: 15000 },
|
|
{ mes: "Mar", faturamento: 42000, despesas: 18000 },
|
|
{ mes: "Abr", faturamento: 38000, despesas: 14000 },
|
|
{ mes: "Mai", faturamento: 45000, despesas: 20000 },
|
|
{ mes: "Jun", faturamento: 41000, despesas: 17000 },
|
|
];
|
|
// ============================
|
|
// PASSO 3 - Funções de exportar
|
|
// ============================
|
|
const exportConsultasPDF = () => {
|
|
const doc = new jsPDF();
|
|
doc.text("Relatório de Consultas", 10, 10);
|
|
doc.text("Resumo das consultas realizadas.", 10, 20);
|
|
doc.save("relatorio-consultas.pdf");
|
|
};
|
|
|
|
const exportPacientesPDF = () => {
|
|
const doc = new jsPDF();
|
|
doc.text("Relatório de Pacientes", 10, 10);
|
|
doc.text("Informações gerais dos pacientes cadastrados.", 10, 20);
|
|
doc.save("relatorio-pacientes.pdf");
|
|
};
|
|
|
|
const exportFinanceiroPDF = () => {
|
|
const doc = new jsPDF();
|
|
doc.text("Relatório Financeiro", 10, 10);
|
|
doc.text("Receitas e despesas da clínica.", 10, 20);
|
|
doc.save("relatorio-financeiro.pdf");
|
|
};
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<h1 className="text-2xl font-bold mb-6">Relatórios</h1>
|
|
|
|
<div className="grid grid-cols-3 gap-6">
|
|
{/* Card Consultas */}
|
|
<div className="p-4 border rounded-lg shadow">
|
|
<h2 className="font-semibold text-lg">Relatório de Consultas</h2>
|
|
<p className="text-sm text-gray-500">Resumo das consultas realizadas.</p>
|
|
{/* PASSO 4 - Botão chama a função */}
|
|
<Button onClick={exportConsultasPDF} className="mt-4">
|
|
<FileDown className="mr-2 h-4 w-4" /> Exportar PDF
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Card Pacientes */}
|
|
<div className="p-4 border rounded-lg shadow">
|
|
<h2 className="font-semibold text-lg">Relatório de Pacientes</h2>
|
|
<p className="text-sm text-gray-500">Informações gerais dos pacientes cadastrados.</p>
|
|
<Button onClick={exportPacientesPDF} className="mt-4">
|
|
<FileDown className="mr-2 h-4 w-4" /> Exportar PDF
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Card Financeiro com gráfico */}
|
|
<div className="p-4 border rounded-lg shadow col-span-3 md:col-span-3">
|
|
<h2 className="font-semibold text-lg mb-2">Relatório Financeiro</h2>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<BarChart data={financeiro} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="mes" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Bar dataKey="faturamento" fill="#10b981" name="Faturamento" />
|
|
<Bar dataKey="despesas" fill="#ef4444" name="Despesas" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
<Button onClick={exportFinanceiroPDF} className="mt-4">
|
|
<FileDown className="mr-2 h-4 w-4" /> Exportar PDF
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|