Files
DentalManagement2025/apps/Frontend/src/pages/reports-page.tsx

84 lines
2.5 KiB
TypeScript

import React, { useState } from "react";
import { useAuth } from "@/hooks/use-auth";
import ReportConfig from "@/components/reports/report-config";
import PatientsWithBalanceReport from "@/components/reports/patients-with-balance-report";
import CollectionsByDoctorReport from "@/components/reports/collections-by-doctor-report";
import SummaryCards from "@/components/reports/summary-cards";
type ReportType =
| "patients_with_balance"
| "patients_no_balance"
| "monthly_collections"
| "collections_by_doctor"
| "procedure_codes_by_doctor"
| "payment_methods"
| "insurance_vs_patient_payments"
| "aging_report";
export default function ReportPage() {
const { user } = useAuth();
const [startDate, setStartDate] = useState<string>(() => {
const d = new Date();
d.setMonth(d.getMonth() - 1);
return d.toISOString().split("T")[0] ?? "";
});
const [endDate, setEndDate] = useState<string>(
() => new Date().toISOString().split("T")[0] ?? ""
);
const [selectedReportType, setSelectedReportType] = useState<ReportType>(
"patients_with_balance"
);
if (!user) {
return (
<div className="text-center py-8">Please sign in to view reports.</div>
);
}
return (
<div className="container mx-auto space-y-6">
{/* Header Section */}
<div className="flex justify-between items-center">
<div>
<h1 className="text-3xl font-bold tracking-tight">
Financial Reports
</h1>
<p className="text-muted-foreground">
Generate comprehensive financial reports for your practice
</p>
</div>
</div>
<div className="mb-4">
<ReportConfig
startDate={startDate}
endDate={endDate}
setStartDate={setStartDate}
setEndDate={setEndDate}
selectedReportType={selectedReportType}
setSelectedReportType={setSelectedReportType}
/>
</div>
{/* SINGLE authoritative SummaryCards instance for the page */}
<div className="mb-4">
<SummaryCards startDate={startDate} endDate={endDate} />
</div>
<div>
{selectedReportType === "patients_with_balance" && (
<PatientsWithBalanceReport startDate={startDate} endDate={endDate} />
)}
{selectedReportType === "collections_by_doctor" && (
<CollectionsByDoctorReport startDate={startDate} endDate={endDate} />
)}
{/* Add other report components here as needed */}
</div>
</div>
);
}