Jonas Francisco
8536a8dd20
🔧 Correções no Menu Lateral: - Fix: Resolve problema onde clicar em "Relatórios" também ativava "Dashboard" - Ajusta lógica de detecção do item ativo na sidebar - Evita conflito entre rotas /dashboard e /dashboard/relatorios - Funciona corretamente em ambos os modos (claro e escuro) 🎨 Padronização das Páginas de Agendamento: - Padroniza sistema completo de agendamento (agenda, procedimento, financeiro) - Adiciona página /financeiro com informações financeiras e formas de pagamento - Padroniza componentes HeaderAgenda e FooterAgenda para modo escuro - Padroniza ListaEspera com cores responsivas e tabela temática - Padroniza página de calendário principal com dropdown melhorado - Padroniza página de relatórios com cards e gráficos adaptativos 📐 Melhorias no Alinhamento dos Formulários: - Fix: Corrige alinhamento dos campos no formulário de agendamento - Reorganiza layout de "Data de nascimento" e "Telefone" em colunas separadas - Alinha perfeitamente campos "Início" e "Término" em grid 2 colunas - Melhora layout geral da seção "Informações do atendimento" - Ajusta proporções do textarea de observações - Layout mais limpo e profissional em todas as telas ✨ Benefícios: - Navegação precisa no menu lateral - Sistema de agendamento completamente padronizado - Formulários com campos perfeitamente alinhados - Experiência visual consistente em modo claro e escuro - Interface mais profissional e intuitiva
89 lines
3.5 KiB
TypeScript
89 lines
3.5 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 bg-background min-h-screen">
|
|
<h1 className="text-2xl font-bold mb-6 text-foreground">Relatórios</h1>
|
|
|
|
<div className="grid grid-cols-3 gap-6">
|
|
{/* Card Consultas */}
|
|
<div className="p-4 border border-border rounded-lg shadow bg-card">
|
|
<h2 className="font-semibold text-lg text-foreground">Relatório de Consultas</h2>
|
|
<p className="text-sm text-muted-foreground">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 border-border rounded-lg shadow bg-card">
|
|
<h2 className="font-semibold text-lg text-foreground">Relatório de Pacientes</h2>
|
|
<p className="text-sm text-muted-foreground">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 border-border rounded-lg shadow col-span-3 md:col-span-3 bg-card">
|
|
<h2 className="font-semibold text-lg mb-2 text-foreground">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>
|
|
);
|
|
}
|