initial commit

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

@@ -0,0 +1,83 @@
+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>
+  );
+}