feat(report-page) base setup overall

apps/Backend/src/routes/index.ts

@@ -13,6 +13,7 @@ import databaseManagementRoutes from "./database-management";
 import notificationsRoutes from "./notifications";
 import paymentOcrRoutes from "./paymentOcrExtraction";
 import cloudStorageRoutes from "./cloud-storage";
+import paymentsReportsRoutes from "./payments-reports";
 
 const router = Router();
 
@@ -30,5 +31,6 @@ router.use("/database-management", databaseManagementRoutes);
 router.use("/notifications", notificationsRoutes);
 router.use("/payment-ocr", paymentOcrRoutes);
 router.use("/cloud-storage", cloudStorageRoutes);
+router.use("/payments-reports", paymentsReportsRoutes);
 
 export default router;

apps/Backend/src/routes/payments-reports.ts

@@ -0,0 +1,121 @@
+import { Router } from "express";
+import type { Request, Response } from "express";
+import { storage } from "../storage";
+const router = Router();
+
+/**
+ * GET /api/payments-reports/summary
+ * optional query: from=YYYY-MM-DD&to=YYYY-MM-DD (ISO date strings)
+ */
+router.get("/summary", async (req, res) => {
+  try {
+    const from = req.query.from ? new Date(String(req.query.from)) : undefined;
+    const to = req.query.to ? new Date(String(req.query.to)) : undefined;
+
+    const summary = await storage.getSummary(from, to);
+    res.json(summary);
+  } catch (err: any) {
+    console.error(
+      "GET /api/payments-reports/summary error:",
+      err?.message ?? err,
+      err?.stack
+    );
+    res.status(500).json({ message: "Failed to fetch dashboard summary" });
+  }
+});
+/**
+ * GET /api/payments-reports/summary
+ * optional query: from=YYYY-MM-DD&to=YYYY-MM-DD (ISO date strings)
+ */
+router.get("/summary", async (req: Request, res: Response): Promise<any> => {
+  try {
+    const from = req.query.from ? new Date(String(req.query.from)) : undefined;
+    const to = req.query.to ? new Date(String(req.query.to)) : undefined;
+
+    if (req.query.from && isNaN(from?.getTime() ?? NaN))
+      return res.status(400).json({ message: "Invalid 'from' date" });
+    if (req.query.to && isNaN(to?.getTime() ?? NaN))
+      return res.status(400).json({ message: "Invalid 'to' date" });
+
+    const summary = await storage.getSummary(from, to);
+    res.json(summary);
+  } catch (err: any) {
+    console.error(
+      "GET /api/payments-reports/summary error:",
+      err?.message ?? err,
+      err?.stack
+    );
+    res.status(500).json({ message: "Failed to fetch dashboard summary" });
+  }
+});
+
+/**
+ * GET /api/payments-reports/patient-balances
+ * query:
+ *  - limit (default 25)
+ *  - offset (default 0)
+ *  - minBalance (true|false)
+ *  - from / to (optional ISO date strings) - filter payments by createdAt in the range (inclusive)
+ */
+router.get(
+  "/patient-balances",
+  async (req: Request, res: Response): Promise<any> => {
+    try {
+      const limit = Math.max(
+        1,
+        Math.min(200, parseInt(String(req.query.limit || "25"), 10))
+      );
+      const offset = Math.max(0, parseInt(String(req.query.offset || "0"), 10));
+      const minBalance =
+        String(req.query.minBalance || "false").toLowerCase() === "true";
+
+      const from = req.query.from
+        ? new Date(String(req.query.from))
+        : undefined;
+      const to = req.query.to ? new Date(String(req.query.to)) : undefined;
+
+      if (req.query.from && isNaN(from?.getTime() ?? NaN)) {
+        return res.status(400).json({ message: "Invalid 'from' date" });
+      }
+      if (req.query.to && isNaN(to?.getTime() ?? NaN)) {
+        return res.status(400).json({ message: "Invalid 'to' date" });
+      }
+
+      const data = await storage.getPatientBalances(
+        limit,
+        offset,
+        from,
+        to,
+        minBalance
+      );
+      res.json(data);
+    } catch (err: any) {
+      console.error(
+        "GET /api/payments-reports/patient-balances error:",
+        err?.message ?? err,
+        err?.stack
+      );
+      res.status(500).json({ message: "Failed to fetch patient balances" });
+    }
+  }
+);
+
+// // GET /api/payments-by-date?from=ISO&to=ISO&limit=&offset=
+// router.get("/payments-by-date", async (req: Request, res: Response): Promise<any> => {
+//   try {
+//     const from = req.query.from ? new Date(String(req.query.from)) : null;
+//     const to = req.query.to ? new Date(String(req.query.to)) : null;
+//     if (!from || !to) return res.status(400).json({ message: "from and to are required" });
+
+//     const limit = Math.min(parseInt(req.query.limit as string) || 1000, 5000);
+//     const offset = parseInt(req.query.offset as string) || 0;
+
+//     const { payments, totalCount } = await storage.getPaymentsByDateRange(from, to, limit, offset);
+//     res.json({ payments, totalCount });
+//   } catch (err) {
+//     console.error(err);
+//     res.status(500).json({ message: "Failed to fetch payments by date" });
+//   }
+// });
+
+export default router;

apps/Backend/src/storage/index.ts

@@ -11,6 +11,7 @@ import { paymentsStorage } from './payments-storage';
 import { databaseBackupStorage } from './database-backup-storage';
 import { notificationsStorage } from './notifications-storage';
 import { cloudStorageStorage } from './cloudStorage-storage';
+import { paymentsReportsStorage } from './payments-reports-storage';
 
 
 
@@ -26,6 +27,7 @@ export const storage = {
   ...databaseBackupStorage,
   ...notificationsStorage,
   ...cloudStorageStorage,
+  ...paymentsReportsStorage,
 
 };
 

apps/Backend/src/storage/payments-reports-storage.ts

@@ -0,0 +1,481 @@
+// apps/Backend/src/storage/payments-reports-storage.ts
+import { prisma } from "@repo/db/client";
+
+/**
+ * Row returned to the client
+ */
+export interface PatientBalanceRow {
+  patientId: number;
+  firstName: string | null;
+  lastName: string | null;
+  totalCharges: number;
+  totalPayments: number;
+  totalAdjusted: number;
+  currentBalance: number;
+  lastPaymentDate: string | null;
+  lastAppointmentDate: string | null;
+}
+
+export interface IPaymentsReportsStorage {
+  getPatientBalances(
+    limit: number,
+    offset: number,
+    from?: Date | null,
+    to?: Date | null,
+    minBalanceOnly?: boolean
+  ): Promise<{ balances: PatientBalanceRow[]; totalCount: number }>;
+
+  // summary now returns an extra field patientsWithBalance
+  getSummary(
+    from?: Date | null,
+    to?: Date | null
+  ): Promise<{
+    totalPatients: number;
+    totalOutstanding: number;
+    totalCollected: number;
+    patientsWithBalance: number;
+  }>;
+}
+
+/** Helper: format Date -> SQL literal 'YYYY-MM-DDTHH:mm:ss.sssZ' or null */
+function fmtDateLiteral(d?: Date | null): string | null {
+  if (!d) return null;
+  const iso = new Date(d).toISOString();
+  return `'${iso}'`;
+}
+
+export const paymentsReportsStorage: IPaymentsReportsStorage = {
+  async getPatientBalances(
+    limit = 25,
+    offset = 0,
+    from?: Date | null,
+    to?: Date | null,
+    minBalanceOnly = false
+  ) {
+    try {
+      type RawRow = {
+        patient_id: number;
+        first_name: string | null;
+        last_name: string | null;
+        total_charges: string;
+        total_payments: string;
+        total_adjusted: string;
+        current_balance: string;
+        last_payment_date: Date | null;
+        last_appointment_date: Date | null;
+      };
+
+      const safeLimit = Math.max(1, Math.min(200, Number(limit) || 25));
+      const safeOffset = Math.max(0, Number(offset) || 0);
+
+      const hasFrom = from !== undefined && from !== null;
+      const hasTo = to !== undefined && to !== null;
+      const fromLit = fmtDateLiteral(from);
+      const toLit = fmtDateLiteral(to);
+
+      // Build pm subquery (aggregated payments in the date window) — only Payment table used
+      let pmSubquery = "";
+      if (hasFrom && hasTo) {
+        pmSubquery = `
+          (
+            SELECT
+              pay."patientId" AS patient_id,
+              SUM(pay."totalBilled")::numeric(12,2) AS total_charges,
+              SUM(pay."totalPaid")::numeric(12,2) AS total_paid,
+              SUM(pay."totalAdjusted")::numeric(12,2) AS total_adjusted,
+              MAX(pay."createdAt") AS last_payment_date
+            FROM "Payment" pay
+            WHERE pay."createdAt" >= ${fromLit} AND pay."createdAt" <= ${toLit}
+            GROUP BY pay."patientId"
+          ) pm
+        `;
+      } else if (hasFrom) {
+        pmSubquery = `
+          (
+            SELECT
+              pay."patientId" AS patient_id,
+              SUM(pay."totalBilled")::numeric(12,2) AS total_charges,
+              SUM(pay."totalPaid")::numeric(12,2) AS total_paid,
+              SUM(pay."totalAdjusted")::numeric(12,2) AS total_adjusted,
+              MAX(pay."createdAt") AS last_payment_date
+            FROM "Payment" pay
+            WHERE pay."createdAt" >= ${fromLit}
+            GROUP BY pay."patientId"
+          ) pm
+        `;
+      } else if (hasTo) {
+        pmSubquery = `
+          (
+            SELECT
+              pay."patientId" AS patient_id,
+              SUM(pay."totalBilled")::numeric(12,2) AS total_charges,
+              SUM(pay."totalPaid")::numeric(12,2) AS total_paid,
+              SUM(pay."totalAdjusted")::numeric(12,2) AS total_adjusted,
+              MAX(pay."createdAt") AS last_payment_date
+            FROM "Payment" pay
+            WHERE pay."createdAt" <= ${toLit}
+            GROUP BY pay."patientId"
+          ) pm
+        `;
+      } else {
+        pmSubquery = `
+          (
+            SELECT
+              pay."patientId" AS patient_id,
+              SUM(pay."totalBilled")::numeric(12,2) AS total_charges,
+              SUM(pay."totalPaid")::numeric(12,2) AS total_paid,
+              SUM(pay."totalAdjusted")::numeric(12,2) AS total_adjusted,
+              MAX(pay."createdAt") AS last_payment_date
+            FROM "Payment" pay
+            GROUP BY pay."patientId"
+          ) pm
+        `;
+      }
+
+      const baseQuery = `
+        SELECT
+          p.id AS patient_id,
+          p."firstName" AS first_name,
+          p."lastName" AS last_name,
+          COALESCE(pm.total_charges,0)::numeric(12,2) AS total_charges,
+          COALESCE(pm.total_paid,0)::numeric(12,2) AS total_payments,
+          COALESCE(pm.total_adjusted,0)::numeric(12,2) AS total_adjusted,
+          (COALESCE(pm.total_charges,0) - COALESCE(pm.total_paid,0) - COALESCE(pm.total_adjusted,0))::numeric(12,2) AS current_balance,
+          pm.last_payment_date,
+          apt.last_appointment_date
+        FROM "Patient" p
+        LEFT JOIN ${pmSubquery} ON pm.patient_id = p.id
+        LEFT JOIN (
+          SELECT "patientId" AS patient_id, MAX("date") AS last_appointment_date
+          FROM "Appointment"
+          GROUP BY "patientId"
+        ) apt ON apt.patient_id = p.id
+      `;
+
+      const balanceWhere = `(COALESCE(pm.total_charges,0) - COALESCE(pm.total_paid,0) - COALESCE(pm.total_adjusted,0)) > 0`;
+
+      const finalQuery = minBalanceOnly
+        ? `${baseQuery} WHERE ${balanceWhere} ORDER BY pm.last_payment_date DESC NULLS LAST, p."createdAt" DESC LIMIT ${safeLimit} OFFSET ${safeOffset}`
+        : `${baseQuery} ORDER BY pm.last_payment_date DESC NULLS LAST, p."createdAt" DESC LIMIT ${safeLimit} OFFSET ${safeOffset}`;
+
+      // Execute query
+      const rows = (await prisma.$queryRawUnsafe(finalQuery)) as RawRow[];
+
+      // totalCount — count distinct patients that have payments in the date window (and if minBalanceOnly, only those with positive balance)
+      let countSql = "";
+      if (hasFrom && hasTo) {
+        if (minBalanceOnly) {
+          countSql = `
+            SELECT COUNT(*)::int AS cnt FROM (
+              SELECT pay."patientId" AS patient_id,
+                     SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                     SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                     SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+              FROM "Payment" pay
+              WHERE pay."createdAt" >= ${fromLit} AND pay."createdAt" <= ${toLit}
+              GROUP BY pay."patientId"
+            ) t
+            WHERE (COALESCE(t.total_charges,0) - COALESCE(t.total_paid,0) - COALESCE(t.total_adjusted,0)) > 0
+          `;
+        } else {
+          countSql = `
+            SELECT COUNT(*)::int AS cnt FROM (
+              SELECT pay."patientId" AS patient_id
+              FROM "Payment" pay
+              WHERE pay."createdAt" >= ${fromLit} AND pay."createdAt" <= ${toLit}
+              GROUP BY pay."patientId"
+            ) t
+          `;
+        }
+      } else if (hasFrom) {
+        if (minBalanceOnly) {
+          countSql = `
+            SELECT COUNT(*)::int AS cnt FROM (
+              SELECT pay."patientId" AS patient_id,
+                     SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                     SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                     SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+              FROM "Payment" pay
+              WHERE pay."createdAt" >= ${fromLit}
+              GROUP BY pay."patientId"
+            ) t
+            WHERE (COALESCE(t.total_charges,0) - COALESCE(t.total_paid,0) - COALESCE(t.total_adjusted,0)) > 0
+          `;
+        } else {
+          countSql = `
+            SELECT COUNT(*)::int AS cnt FROM (
+              SELECT pay."patientId" AS patient_id
+              FROM "Payment" pay
+              WHERE pay."createdAt" >= ${fromLit}
+              GROUP BY pay."patientId"
+            ) t
+          `;
+        }
+      } else if (hasTo) {
+        if (minBalanceOnly) {
+          countSql = `
+            SELECT COUNT(*)::int AS cnt FROM (
+              SELECT pay."patientId" AS patient_id,
+                     SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                     SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                     SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+              FROM "Payment" pay
+              WHERE pay."createdAt" <= ${toLit}
+              GROUP BY pay."patientId"
+            ) t
+            WHERE (COALESCE(t.total_charges,0) - COALESCE(t.total_paid,0) - COALESCE(t.total_adjusted,0)) > 0
+          `;
+        } else {
+          countSql = `
+            SELECT COUNT(*)::int AS cnt FROM (
+              SELECT pay."patientId" AS patient_id
+              FROM "Payment" pay
+              WHERE pay."createdAt" <= ${toLit}
+              GROUP BY pay."patientId"
+            ) t
+          `;
+        }
+      } else {
+        if (minBalanceOnly) {
+          countSql = `
+            SELECT COUNT(*)::int AS cnt FROM (
+              SELECT pay."patientId" AS patient_id,
+                     SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                     SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                     SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+              FROM "Payment" pay
+              GROUP BY pay."patientId"
+            ) t
+            WHERE (COALESCE(t.total_charges,0) - COALESCE(t.total_paid,0) - COALESCE(t.total_adjusted,0)) > 0
+          `;
+        } else {
+          countSql = `SELECT COUNT(DISTINCT "patientId")::int AS cnt FROM "Payment"`;
+        }
+      }
+
+      const cntRows = (await prisma.$queryRawUnsafe(countSql)) as {
+        cnt: number;
+      }[];
+      const totalCount = cntRows?.[0]?.cnt ?? 0;
+
+      const balances: PatientBalanceRow[] = rows.map((r) => ({
+        patientId: Number(r.patient_id),
+        firstName: r.first_name,
+        lastName: r.last_name,
+        totalCharges: Number(r.total_charges ?? 0),
+        totalPayments: Number(r.total_payments ?? 0),
+        totalAdjusted: Number(r.total_adjusted ?? 0),
+        currentBalance: Number(r.current_balance ?? 0),
+        lastPaymentDate: r.last_payment_date
+          ? new Date(r.last_payment_date).toISOString()
+          : null,
+        lastAppointmentDate: r.last_appointment_date
+          ? new Date(r.last_appointment_date).toISOString()
+          : null,
+      }));
+
+      return { balances, totalCount };
+    } catch (err) {
+      console.error("[paymentsReportsStorage.getPatientBalances] error:", err);
+      throw err;
+    }
+  },
+
+  async getSummary(from?: Date | null, to?: Date | null) {
+    try {
+      const hasFrom = from !== undefined && from !== null;
+      const hasTo = to !== undefined && to !== null;
+      const fromLit = fmtDateLiteral(from);
+      const toLit = fmtDateLiteral(to);
+
+      // totalPatients: distinct patients who had payments in the date range
+      let patientsCountSql = "";
+      if (hasFrom && hasTo) {
+        patientsCountSql = `
+          SELECT COUNT(*)::int AS cnt FROM (
+            SELECT pay."patientId" AS patient_id
+            FROM "Payment" pay
+            WHERE pay."createdAt" >= ${fromLit} AND pay."createdAt" <= ${toLit}
+            GROUP BY pay."patientId"
+          ) t
+        `;
+      } else if (hasFrom) {
+        patientsCountSql = `
+          SELECT COUNT(*)::int AS cnt FROM (
+            SELECT pay."patientId" AS patient_id
+            FROM "Payment" pay
+            WHERE pay."createdAt" >= ${fromLit}
+            GROUP BY pay."patientId"
+          ) t
+        `;
+      } else if (hasTo) {
+        patientsCountSql = `
+          SELECT COUNT(*)::int AS cnt FROM (
+            SELECT pay."patientId" AS patient_id
+            FROM "Payment" pay
+            WHERE pay."createdAt" <= ${toLit}
+            GROUP BY pay."patientId"
+          ) t
+        `;
+      } else {
+        patientsCountSql = `SELECT COUNT(DISTINCT "patientId")::int AS cnt FROM "Payment"`;
+      }
+      const patientsCntRows = (await prisma.$queryRawUnsafe(
+        patientsCountSql
+      )) as { cnt: number }[];
+      const totalPatients = patientsCntRows?.[0]?.cnt ?? 0;
+
+      // totalOutstanding: sum of (charges - paid - adjusted) across patients, using payments in range
+      let outstandingSql = "";
+      if (hasFrom && hasTo) {
+        outstandingSql = `
+          SELECT COALESCE(SUM(
+            COALESCE(pm.total_charges,0) - COALESCE(pm.total_paid,0) - COALESCE(pm.total_adjusted,0)
+          ),0)::numeric(14,2) AS outstanding
+          FROM (
+            SELECT pay."patientId" AS patient_id,
+                   SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                   SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                   SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+            FROM "Payment" pay
+            WHERE pay."createdAt" >= ${fromLit} AND pay."createdAt" <= ${toLit}
+            GROUP BY pay."patientId"
+          ) pm
+        `;
+      } else if (hasFrom) {
+        outstandingSql = `
+          SELECT COALESCE(SUM(
+            COALESCE(pm.total_charges,0) - COALESCE(pm.total_paid,0) - COALESCE(pm.total_adjusted,0)
+          ),0)::numeric(14,2) AS outstanding
+          FROM (
+            SELECT pay."patientId" AS patient_id,
+                   SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                   SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                   SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+            FROM "Payment" pay
+            WHERE pay."createdAt" >= ${fromLit}
+            GROUP BY pay."patientId"
+          ) pm
+        `;
+      } else if (hasTo) {
+        outstandingSql = `
+          SELECT COALESCE(SUM(
+            COALESCE(pm.total_charges,0) - COALESCE(pm.total_paid,0) - COALESCE(pm.total_adjusted,0)
+          ),0)::numeric(14,2) AS outstanding
+          FROM (
+            SELECT pay."patientId" AS patient_id,
+                   SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                   SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                   SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+            FROM "Payment" pay
+            WHERE pay."createdAt" <= ${toLit}
+            GROUP BY pay."patientId"
+          ) pm
+        `;
+      } else {
+        outstandingSql = `
+          SELECT COALESCE(SUM(
+            COALESCE(pm.total_charges,0) - COALESCE(pm.total_paid,0) - COALESCE(pm.total_adjusted,0)
+          ),0)::numeric(14,2) AS outstanding
+          FROM (
+            SELECT pay."patientId" AS patient_id,
+                   SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                   SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                   SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+            FROM "Payment" pay
+            GROUP BY pay."patientId"
+          ) pm
+        `;
+      }
+      const outstandingRows = (await prisma.$queryRawUnsafe(
+        outstandingSql
+      )) as { outstanding: string }[];
+      const totalOutstanding = Number(outstandingRows?.[0]?.outstanding ?? 0);
+
+      // totalCollected: sum(totalPaid) in the range
+      let collSql = "";
+      if (hasFrom && hasTo) {
+        collSql = `SELECT COALESCE(SUM("totalPaid"),0)::numeric(14,2) AS collected FROM "Payment" WHERE "createdAt" >= ${fromLit} AND "createdAt" <= ${toLit}`;
+      } else if (hasFrom) {
+        collSql = `SELECT COALESCE(SUM("totalPaid"),0)::numeric(14,2) AS collected FROM "Payment" WHERE "createdAt" >= ${fromLit}`;
+      } else if (hasTo) {
+        collSql = `SELECT COALESCE(SUM("totalPaid"),0)::numeric(14,2) AS collected FROM "Payment" WHERE "createdAt" <= ${toLit}`;
+      } else {
+        collSql = `SELECT COALESCE(SUM("totalPaid"),0)::numeric(14,2) AS collected FROM "Payment"`;
+      }
+      const collRows = (await prisma.$queryRawUnsafe(collSql)) as {
+        collected: string;
+      }[];
+      const totalCollected = Number(collRows?.[0]?.collected ?? 0);
+
+      // NEW: patientsWithBalance: number of patients whose (charges - paid - adjusted) > 0, within the date range
+      let patientsWithBalanceSql = "";
+      if (hasFrom && hasTo) {
+        patientsWithBalanceSql = `
+          SELECT COUNT(*)::int AS cnt FROM (
+            SELECT pay."patientId" AS patient_id,
+                   SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                   SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                   SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+            FROM "Payment" pay
+            WHERE pay."createdAt" >= ${fromLit} AND pay."createdAt" <= ${toLit}
+            GROUP BY pay."patientId"
+          ) t
+          WHERE (COALESCE(t.total_charges,0) - COALESCE(t.total_paid,0) - COALESCE(t.total_adjusted,0)) > 0
+        `;
+      } else if (hasFrom) {
+        patientsWithBalanceSql = `
+          SELECT COUNT(*)::int AS cnt FROM (
+            SELECT pay."patientId" AS patient_id,
+                   SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                   SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                   SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+            FROM "Payment" pay
+            WHERE pay."createdAt" >= ${fromLit}
+            GROUP BY pay."patientId"
+          ) t
+          WHERE (COALESCE(t.total_charges,0) - COALESCE(t.total_paid,0) - COALESCE(t.total_adjusted,0)) > 0
+        `;
+      } else if (hasTo) {
+        patientsWithBalanceSql = `
+          SELECT COUNT(*)::int AS cnt FROM (
+            SELECT pay."patientId" AS patient_id,
+                   SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                   SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                   SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+            FROM "Payment" pay
+            WHERE pay."createdAt" <= ${toLit}
+            GROUP BY pay."patientId"
+          ) t
+          WHERE (COALESCE(t.total_charges,0) - COALESCE(t.total_paid,0) - COALESCE(t.total_adjusted,0)) > 0
+        `;
+      } else {
+        patientsWithBalanceSql = `
+          SELECT COUNT(*)::int AS cnt FROM (
+            SELECT pay."patientId" AS patient_id,
+                   SUM(pay."totalBilled")::numeric(14,2) AS total_charges,
+                   SUM(pay."totalPaid")::numeric(14,2) AS total_paid,
+                   SUM(pay."totalAdjusted")::numeric(14,2) AS total_adjusted
+            FROM "Payment" pay
+            GROUP BY pay."patientId"
+          ) t
+          WHERE (COALESCE(t.total_charges,0) - COALESCE(t.total_paid,0) - COALESCE(t.total_adjusted,0)) > 0
+        `;
+      }
+      const pwbRows = (await prisma.$queryRawUnsafe(
+        patientsWithBalanceSql
+      )) as { cnt: number }[];
+      const patientsWithBalance = pwbRows?.[0]?.cnt ?? 0;
+
+      return {
+        totalPatients,
+        totalOutstanding,
+        totalCollected,
+        patientsWithBalance,
+      };
+    } catch (err) {
+      console.error("[paymentsReportsStorage.getSummary] error:", err);
+      throw err;
+    }
+  },
+};

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

@@ -1,339 +0,0 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { useToast } from "@/hooks/use-toast";
-import { useAuth } from "@/hooks/use-auth";
-import { Plus, ClipboardCheck, Clock, CheckCircle, AlertCircle } from "lucide-react";
-import { format } from "date-fns";
-import { Appointment, Patient } from "@repo/db/types";
-
-export default function PreAuthorizationsPage() {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [isPreAuthFormOpen, setIsPreAuthFormOpen] = useState(false);
-  const [selectedPatient, setSelectedPatient] = useState<number | null>(null);
-  const [selectedProcedure, setSelectedProcedure] = useState<string | null>(null);
-  
-  const { toast } = useToast();
-  const { user } = useAuth();
-
-  // Fetch patients
-  const { data: patients = [], isLoading: isLoadingPatients } = useQuery<Patient[]>({
-    queryKey: ["/api/patients"],
-    enabled: !!user,
-  });
-  
-  // Fetch appointments
-  const { 
-    data: appointments = [] as Appointment[], 
-    isLoading: isLoadingAppointments 
-  } = useQuery<Appointment[]>({
-    queryKey: ["/api/appointments"],
-    enabled: !!user,
-  });
-
-  const toggleMobileMenu = () => {
-    setIsMobileMenuOpen(!isMobileMenuOpen);
-  };
-
-  const handleNewPreAuth = (patientId: number, procedure: string) => {
-    setSelectedPatient(patientId);
-    setSelectedProcedure(procedure);
-    setIsPreAuthFormOpen(true);
-    
-    // Show a toast notification of success
-    const patient = patients.find(p => p.id === patientId);
-    toast({
-      title: "Pre-authorization Request Started",
-      description: `Started pre-auth for ${patient?.firstName} ${patient?.lastName} - ${procedure}`,
-    });
-  };
-
-  // Common dental procedures requiring pre-authorization
-  const dentalProcedures = [
-    { code: "D2740", name: "Crown - porcelain/ceramic" },
-    { code: "D2950", name: "Core buildup, including any pins" },
-    { code: "D3330", name: "Root Canal - molar" },
-    { code: "D4341", name: "Periodontal scaling & root planing" },
-    { code: "D4910", name: "Periodontal maintenance" },
-    { code: "D5110", name: "Complete denture - maxillary" },
-    { code: "D6010", name: "Surgical placement of implant body" },
-    { code: "D7240", name: "Removal of impacted tooth" },
-  ];
-
-  // Get patients with active insurance
-  const patientsWithInsurance = patients.filter(patient => 
-    patient.insuranceProvider && patient.insuranceId
-  );
-
-  // Sample pre-authorization data
-  const samplePreAuths = [
-    {
-      id: "PA2023-001",
-      patientId: patientsWithInsurance[0]?.id || 1,
-      procedureCode: "D2740",
-      procedureName: "Crown - porcelain/ceramic",
-      requestDate: new Date(new Date().setDate(new Date().getDate() - 14)),
-      status: "approved",
-      approvalDate: new Date(new Date().setDate(new Date().getDate() - 7)),
-      expirationDate: new Date(new Date().setMonth(new Date().getMonth() + 6)),
-    },
-    {
-      id: "PA2023-002",
-      patientId: patientsWithInsurance[0]?.id || 1,
-      procedureCode: "D3330",
-      procedureName: "Root Canal - molar",
-      requestDate: new Date(new Date().setDate(new Date().getDate() - 5)),
-      status: "pending",
-      approvalDate: null,
-      expirationDate: null,
-    },
-    {
-      id: "PA2023-003",
-      patientId: patientsWithInsurance[0]?.id || 1,
-      procedureCode: "D7240",
-      procedureName: "Removal of impacted tooth",
-      requestDate: new Date(new Date().setDate(new Date().getDate() - 30)),
-      status: "denied",
-      approvalDate: null,
-      expirationDate: null,
-      denialReason: "Not medically necessary based on submitted documentation",
-    }
-  ];
-
-  return (
-    <div>
-          {/* Header */}
-          <div className="mb-6">
-            <h1 className="text-2xl font-semibold text-gray-800">Pre-authorizations</h1>
-            <p className="text-gray-600">Manage insurance pre-authorizations for dental procedures</p>
-          </div>
-
-          {/* New Pre-Authorization Request Section */}
-          <div className="mb-8">
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-xl font-medium text-gray-800">New Pre-Authorization Request</h2>
-            </div>
-            
-            <Card>
-              <CardHeader className="pb-2">
-                <CardTitle>Recent Patients for Pre-Authorization</CardTitle>
-              </CardHeader>
-              <CardContent>
-                {isLoadingPatients ? (
-                  <div className="text-center py-4">Loading patients data...</div>
-                ) : patientsWithInsurance.length > 0 ? (
-                  <div className="divide-y">
-                    {patientsWithInsurance.map((patient) => (
-                      <div 
-                        key={patient.id} 
-                        className="py-4 flex items-center justify-between cursor-pointer hover:bg-gray-50"
-                        onClick={() => {
-                          setSelectedPatient(Number(patient.id));
-                          handleNewPreAuth(
-                            patient.id, 
-                            dentalProcedures[Math.floor(Math.random() * 3)].name
-                          );
-                        }}
-                      >
-                        <div>
-                          <h3 className="font-medium">{patient.firstName} {patient.lastName}</h3>
-                          <div className="text-sm text-gray-500">
-                            <span>Insurance: {patient.insuranceProvider === 'delta' 
-                              ? 'Delta Dental' 
-                              : patient.insuranceProvider === 'metlife' 
-                              ? 'MetLife' 
-                              : patient.insuranceProvider === 'cigna' 
-                              ? 'Cigna' 
-                              : patient.insuranceProvider === 'aetna' 
-                              ? 'Aetna' 
-                              : patient.insuranceProvider}</span>
-                            <span className="mx-2">•</span>
-                            <span>ID: {patient.insuranceId}</span>
-                            <span className="mx-2">•</span>
-                            <span>Procedure needed: {dentalProcedures[0].name}</span>
-                          </div>
-                        </div>
-                        <div className="text-primary">
-                          <ClipboardCheck className="h-5 w-5" />
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="text-center py-8">
-                    <ClipboardCheck className="h-12 w-12 mx-auto text-gray-400 mb-3" />
-                    <h3 className="text-lg font-medium">No patients with insurance</h3>
-                    <p className="text-gray-500 mt-1">
-                      Add insurance information to patients to request pre-authorizations
-                    </p>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          </div>
-          
-          {/* Pre-Authorization Submitted Section */}
-          <div className="mb-8">
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-xl font-medium text-gray-800">Pre-Authorization Submitted</h2>
-            </div>
-            
-            <Card>
-              <CardHeader className="pb-2">
-                <CardTitle>Pending Pre-Authorization Requests</CardTitle>
-              </CardHeader>
-              <CardContent>
-                {patientsWithInsurance.length > 0 ? (
-                  <div className="divide-y">
-                    {samplePreAuths.filter(auth => auth.status === 'pending').map((preAuth) => {
-                      const patient = patients.find(p => p.id === preAuth.patientId) || 
-                        { firstName: "Unknown", lastName: "Patient" };
-                        
-                      return (
-                        <div 
-                          key={preAuth.id} 
-                          className="py-4 flex items-center justify-between cursor-pointer hover:bg-gray-50"
-                          onClick={() => toast({
-                            title: "Pre-Authorization Details",
-                            description: `Viewing details for ${preAuth.id}`
-                          })}
-                        >
-                          <div>
-                            <h3 className="font-medium">{patient.firstName} {patient.lastName} - {preAuth.procedureName}</h3>
-                            <div className="text-sm text-gray-500">
-                              <span>ID: {preAuth.id}</span>
-                              <span className="mx-2">•</span>
-                              <span>Submitted: {format(preAuth.requestDate, 'MMM dd, yyyy')}</span>
-                              <span className="mx-2">•</span>
-                              <span>Expected Response: {format(new Date(preAuth.requestDate.getTime() + 7 * 24 * 60 * 60 * 1000), 'MMM dd, yyyy')}</span>
-                            </div>
-                          </div>
-                          <div className="flex items-center gap-2">
-                            <span className="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">
-                              <span className="flex items-center">
-                                <Clock className="h-3 w-3 mr-1" />
-                                Pending
-                              </span>
-                            </span>
-                          </div>
-                        </div>
-                      );
-                    })}
-                    
-                    {samplePreAuths.filter(auth => auth.status === 'pending').length === 0 && (
-                      <div className="text-center py-8">
-                        <Clock className="h-12 w-12 mx-auto text-gray-400 mb-3" />
-                        <h3 className="text-lg font-medium">No pending requests</h3>
-                        <p className="text-gray-500 mt-1">
-                          Submitted pre-authorization requests will appear here
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                ) : (
-                  <div className="text-center py-8">
-                    <Clock className="h-12 w-12 mx-auto text-gray-400 mb-3" />
-                    <h3 className="text-lg font-medium">No pre-authorization history</h3>
-                    <p className="text-gray-500 mt-1">
-                      Submitted pre-authorization requests will appear here
-                    </p>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          </div>
-          
-          {/* Pre-Authorization Results Section */}
-          <div>
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-xl font-medium text-gray-800">Pre-Authorization Results</h2>
-            </div>
-            
-            <Card>
-              <CardHeader className="pb-2">
-                <CardTitle>Completed Pre-Authorization Requests</CardTitle>
-              </CardHeader>
-              <CardContent>
-                {patientsWithInsurance.length > 0 ? (
-                  <div className="divide-y">
-                    {samplePreAuths.filter(auth => auth.status !== 'pending').map((preAuth) => {
-                      const patient = patients.find(p => p.id === preAuth.patientId) || 
-                        { firstName: "Unknown", lastName: "Patient" };
-                        
-                      return (
-                        <div 
-                          key={preAuth.id} 
-                          className="py-4 flex items-center justify-between cursor-pointer hover:bg-gray-50"
-                          onClick={() => toast({
-                            title: "Pre-Authorization Details",
-                            description: `Viewing details for ${preAuth.id}`
-                          })}
-                        >
-                          <div>
-                            <h3 className="font-medium">{patient.firstName} {patient.lastName} - {preAuth.procedureName}</h3>
-                            <div className="text-sm text-gray-500">
-                              <span>ID: {preAuth.id}</span>
-                              <span className="mx-2">•</span>
-                              <span>Requested: {format(preAuth.requestDate, 'MMM dd, yyyy')}</span>
-                              {preAuth.status === 'approved' && (
-                                <>
-                                  <span className="mx-2">•</span>
-                                  <span>Expires: {format(preAuth.expirationDate as Date, 'MMM dd, yyyy')}</span>
-                                </>
-                              )}
-                              {preAuth.status === 'denied' && preAuth.denialReason && (
-                                <>
-                                  <span className="mx-2">•</span>
-                                  <span className="text-red-600">Reason: {preAuth.denialReason}</span>
-                                </>
-                              )}
-                            </div>
-                          </div>
-                          <div className="flex items-center gap-2">
-                            <span className={`px-2 py-1 text-xs font-medium rounded-full ${
-                              preAuth.status === 'approved' ? 'bg-green-100 text-green-800' : 
-                              'bg-red-100 text-red-800'
-                            }`}>
-                              {preAuth.status === 'approved' ? (
-                                <span className="flex items-center">
-                                  <CheckCircle className="h-3 w-3 mr-1" />
-                                  Approved
-                                </span>
-                              ) : (
-                                <span className="flex items-center">
-                                  <AlertCircle className="h-3 w-3 mr-1" />
-                                  Denied
-                                </span>
-                              )}
-                            </span>
-                          </div>
-                        </div>
-                      );
-                    })}
-                    
-                    {samplePreAuths.filter(auth => auth.status !== 'pending').length === 0 && (
-                      <div className="text-center py-8">
-                        <CheckCircle className="h-12 w-12 mx-auto text-gray-400 mb-3" />
-                        <h3 className="text-lg font-medium">No completed requests</h3>
-                        <p className="text-gray-500 mt-1">
-                          Processed pre-authorization results will appear here
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                ) : (
-                  <div className="text-center py-8">
-                    <CheckCircle className="h-12 w-12 mx-auto text-gray-400 mb-3" />
-                    <h3 className="text-lg font-medium">No pre-authorization results</h3>
-                    <p className="text-gray-500 mt-1">
-                      Completed pre-authorization requests will appear here
-                    </p>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          </div>
-    </div>
-  );
-}

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

@@ -1,18 +1,10 @@
+// apps/Frontend/src/pages/reports-page.tsx
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
+import { Button } from "@/components/ui/button";
-  Search,
+import { Input } from "@/components/ui/input";
-  Edit,
+import { Label } from "@/components/ui/label";
-  Eye,
-  ChevronLeft,
-  ChevronRight,
-  Settings,
-} from "lucide-react";
-import { useAuth } from "@/hooks/use-auth";
-import { cn } from "@/lib/utils";
 import {
   Select,
   SelectContent,
@@ -20,285 +12,465 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Patient } from "@repo/db/types";
+import { Badge } from "@/components/ui/badge";
-import { formatDateToHumanReadable } from "@/utils/dateUtils";
+import { Separator } from "@/components/ui/separator";
+import {
+  DollarSign,
+  FileText,
+  Download,
+  AlertCircle,
+  Calendar,
+  Users,
+  TrendingUp,
+} from "lucide-react";
+import { useAuth } from "@/hooks/use-auth";
+import { apiRequest } from "@/lib/queryClient"; // <<-- your helper
+import type { PatientBalanceRow } from "@repo/db/types";
+
+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";
+
+interface PatientBalancesResponse {
+  balances: PatientBalanceRow[];
+  totalCount: number;
+}
 
 export default function ReportsPage() {
   const { user } = useAuth();
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [searchField, setSearchField] = useState("all");
-  const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 5;
 
-  // Fetch patients
+  // pagination state for patient balances
-  const { data: patients = [], isLoading: isLoadingPatients } = useQuery<
+  const [balancesPage, setBalancesPage] = useState<number>(1);
-    Patient[]
+  const balancesPerPage = 10;
-  >({
+
-    queryKey: ["/api/patients"],
+  // date range state (for dashboard summary)
+  const [startDate, setStartDate] = useState(() => {
+    const d = new Date();
+    d.setMonth(d.getMonth() - 1);
+    return d.toISOString().split("T")[0];
+  });
+  const [endDate, setEndDate] = useState(
+    () => new Date().toISOString().split("T")[0]
+  );
+
+  const [selectedReportType, setSelectedReportType] = useState<ReportType>(
+    "patients_with_balance"
+  );
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  // --- 1) patient balances (paginated) using apiRequest ---
+  const {
+    data: patientBalancesResponse,
+    isLoading: isLoadingBalances,
+    isError: isErrorBalances,
+  } = useQuery<PatientBalancesResponse>({
+    queryKey: [
+      "/api/payments-reports/patient-balances",
+      balancesPage,
+      balancesPerPage,
+      startDate,
+      endDate,
+      selectedReportType,
+    ],
+    queryFn: async () => {
+      const offset = (balancesPage - 1) * balancesPerPage;
+      const minBalanceFlag = selectedReportType === "patients_with_balance";
+      const endpoint = `/api/payments-reports/patient-balances?limit=${balancesPerPage}&offset=${offset}&minBalance=${minBalanceFlag}&from=${encodeURIComponent(
+        String(startDate)
+      )}&to=${encodeURIComponent(String(endDate))}`;
+      const res = await apiRequest("GET", endpoint);
+      if (!res.ok) {
+        const body = await res
+          .json()
+          .catch(() => ({ message: "Failed to load patient balances" }));
+        throw new Error(body.message || "Failed to load patient balances");
+      }
+      return res.json();
+    },
     enabled: !!user,
   });
 
-  // Filter patients based on search
+  const patientBalances: PatientBalanceRow[] =
-  const filteredPatients = patients.filter((patient) => {
+    patientBalancesResponse?.balances ?? [];
-    if (!searchTerm) return true;
+  const patientBalancesTotal = patientBalancesResponse?.totalCount ?? 0;
 
-    const searchLower = searchTerm.toLowerCase();
+  // --- 2) dashboard summary (separate route/storage) using apiRequest ---
-    const fullName = `${patient.firstName} ${patient.lastName}`.toLowerCase();
+  const { data: dashboardSummary, isLoading: isLoadingSummary } = useQuery({
-    const patientId = `PID-${patient?.id?.toString().padStart(4, "0")}`;
+    queryKey: [
-
+      "/api/payments-reports/summary",
-    switch (searchField) {
+      String(startDate),
-      case "name":
+      String(endDate),
-        return fullName.includes(searchLower);
+    ],
-      case "id":
+    queryFn: async () => {
-        return patientId.toLowerCase().includes(searchLower);
+      const endpoint = `/api/payments-reports/summary?from=${encodeURIComponent(
-      case "phone":
+        String(startDate)
-        return patient.phone?.toLowerCase().includes(searchLower) || false;
+      )}&to=${encodeURIComponent(String(endDate))}`;
-      case "all":
+      const res = await apiRequest("GET", endpoint);
-      default:
+      if (!res.ok) {
-        return (
+        const body = await res
-          fullName.includes(searchLower) ||
+          .json()
-          patientId.toLowerCase().includes(searchLower) ||
+          .catch(() => ({ message: "Failed to load dashboard summary" }));
-          patient.phone?.toLowerCase().includes(searchLower) ||
+        throw new Error(body.message || "Failed to load dashboard summary");
-          patient.email?.toLowerCase().includes(searchLower) ||
-          false
-        );
       }
+      return res.json();
+    },
+    enabled: !!user,
   });
 
-  // Pagination
+  // format currency for numbers in dollars (storage returns decimal numbers like 123.45)
-  const totalPages = Math.ceil(filteredPatients.length / itemsPerPage);
+  const formatCurrency = (amountDollars: number | undefined | null) => {
-  const startIndex = (currentPage - 1) * itemsPerPage;
+    const value = Number(amountDollars ?? 0);
-  const endIndex = startIndex + itemsPerPage;
+    return new Intl.NumberFormat("en-US", {
-  const currentPatients = filteredPatients.slice(startIndex, endIndex);
+      style: "currency",
-
+      currency: "USD",
-  const toggleMobileMenu = () => {
+    }).format(value);
-    setIsMobileMenuOpen(!isMobileMenuOpen);
   };
 
-  const getPatientInitials = (firstName: string, lastName: string) => {
+  // summary stats: use dashboardSummary for totals (server-driven) and derive other counts from paginated balances
-    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+  const summaryStats = {
+    totalPatients: dashboardSummary?.totalPatients ?? 0,
+    // use the server-provided count of patients with balance inside range
+    patientsWithBalance: dashboardSummary?.patientsWithBalance ?? 0,
+    // patientsNoBalance: based on totalCount - patientsWithBalance (note: totalCount is number of patients with payments in range)
+    patientsNoBalance: Math.max(
+      0,
+      (dashboardSummary?.totalPatients ?? 0) -
+        (dashboardSummary?.patientsWithBalance ?? 0)
+    ),
+    totalOutstanding:
+      dashboardSummary?.totalOutstanding ??
+      patientBalances.reduce((s, b) => s + (b.currentBalance ?? 0), 0),
+    totalCollected: dashboardSummary?.totalCollected ?? 0,
   };
 
+  const generateReport = async () => {
+    setIsGenerating(true);
+    await new Promise((r) => setTimeout(r, 900));
+    setIsGenerating(false);
+  };
+
+  // -------------------- report rendering (only patients_with_balance wired) --------------------
+  // -------------------- report rendering (only patients_with_balance wired) --------------------
+  const renderPatientsWithBalance = () => {
+    // Use patientBalances for the current page list (already minBalance filtered if selectedReportType === 'patients_with_balance')
+    const patientsWithBalance = patientBalances
+      .filter((b) => (b.currentBalance ?? 0) > 0)
+      .map((b) => ({
+        patientId: b.patientId,
+        patientName: `${b.firstName ?? "Unknown"} ${b.lastName ?? ""}`.trim(),
+        currentBalance: b.currentBalance ?? 0,
+        totalCharges: b.totalCharges ?? 0,
+        totalPayments: b.totalPayments ?? 0,
+      }));
+
+    const totalOutstanding = patientsWithBalance.reduce(
+      (s, p) => s + p.currentBalance,
+      0
+    );
+    const avgBalance = patientsWithBalance.length
+      ? totalOutstanding / patientsWithBalance.length
+      : 0;
+
     return (
-    <div>
+      <div className="space-y-4">
-      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-3 gap-4 mb-6">
-        {/* Header */}
+          <Card>
-        <div className="mb-6">
-          <h1 className="text-2xl font-semibold text-gray-900 mb-2">Reports</h1>
-          <p className="text-gray-600">
-            View and manage all patient information
-          </p>
-        </div>
-
-        {/* Search and Filters */}
-        <Card className="mb-6">
             <CardContent className="p-4">
-            <div className="flex flex-col md:flex-row gap-4">
+              <div className="text-2xl font-bold text-red-600">
-              <div className="flex-1 relative">
+                {summaryStats.patientsWithBalance}
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
-                <Input
-                  placeholder="Search patients..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="pl-10"
-                />
-              </div>
-              <div className="flex gap-2">
-                <Select value={searchField} onValueChange={setSearchField}>
-                  <SelectTrigger className="w-32">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Fields</SelectItem>
-                    <SelectItem value="name">Name</SelectItem>
-                    <SelectItem value="id">Patient ID</SelectItem>
-                    <SelectItem value="phone">Phone</SelectItem>
-                  </SelectContent>
-                </Select>
-                <Button variant="outline" size="sm">
-                  <Settings className="h-4 w-4 mr-2" />
-                  Advanced
-                </Button>
-              </div>
               </div>
+              <p className="text-sm text-gray-600">Patients with Balance</p>
             </CardContent>
           </Card>
 
-        {/* Patient List */}
           <Card>
-          <CardContent className="p-0">
+            <CardContent className="p-4">
-            {isLoadingPatients ? (
+              <div className="text-2xl font-bold text-red-600">
-              <div className="text-center py-8">Loading patients...</div>
+                {formatCurrency(summaryStats.totalOutstanding)}
-            ) : (
+              </div>
-              <>
+              <p className="text-sm text-gray-600">Total Outstanding</p>
-                {/* Table Header */}
+            </CardContent>
-                <div className="grid grid-cols-12 gap-4 p-4 bg-gray-50 border-b text-sm font-medium text-gray-600">
+          </Card>
-                  <div className="col-span-3">Patient</div>
+
-                  <div className="col-span-2">DOB / Gender</div>
+          <Card>
-                  <div className="col-span-2">Contact</div>
+            <CardContent className="p-4">
-                  <div className="col-span-2">Insurance</div>
+              <div className="text-2xl font-bold text-blue-600">
-                  <div className="col-span-2">Status</div>
+                {formatCurrency(avgBalance)}
-                  <div className="col-span-1">Actions</div>
+              </div>
+              <p className="text-sm text-gray-600">
+                Average Balance (visible page)
+              </p>
+            </CardContent>
+          </Card>
         </div>
 
-                {/* Table Rows */}
+        <div className="bg-white rounded-lg border">
-                {currentPatients.length === 0 ? (
+          <div className="px-4 py-3 border-b bg-gray-50">
-                  <div className="text-center py-8 text-gray-500">
+            <h3 className="font-medium text-gray-900">
-                    {searchTerm
+              Patients with Outstanding Balances
-                      ? "No patients found matching your search."
+            </h3>
-                      : "No patients available."}
+          </div>
+
+          <div className="divide-y">
+            {patientsWithBalance.length === 0 ? (
+              <div className="p-8 text-center text-gray-500">
+                <DollarSign className="h-12 w-12 mx-auto mb-3 text-gray-300" />
+                <p>No patients have outstanding balances on this page</p>
               </div>
             ) : (
-                  currentPatients.map((patient) => (
+              patientsWithBalance.map((p) => (
-                    <div
+                <div key={p.patientId} className="p-4 hover:bg-gray-50">
-                      key={patient.id}
+                  <div className="flex justify-between items-center">
-                      className="grid grid-cols-12 gap-4 p-4 border-b hover:bg-gray-50 transition-colors"
-                    >
-                      {/* Patient Info */}
-                      <div className="col-span-3 flex items-center space-x-3">
-                        <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-sm font-medium text-gray-600">
-                          {getPatientInitials(
-                            patient.firstName,
-                            patient.lastName
-                          )}
-                        </div>
                     <div>
-                          <div className="font-medium text-gray-900">
+                      <h4 className="font-medium text-gray-900">
-                            {patient.firstName} {patient.lastName}
+                        {p.patientName}
+                      </h4>
+                      <p className="text-sm text-gray-500">
+                        Patient ID: {p.patientId}
+                      </p>
+                    </div>
+
+                    <div className="text-right">
+                      <div className="text-lg font-semibold text-red-600">
+                        {formatCurrency(p.currentBalance)}
                       </div>
                       <div className="text-sm text-gray-500">
-                            PID-{patient.id?.toString().padStart(4, "0")}
+                        Charges: {formatCurrency(p.totalCharges)}
                       </div>
                     </div>
                   </div>
-
-                      {/* DOB / Gender */}
-                      <div className="col-span-2">
-                        <div className="text-sm text-gray-900">
-                          {formatDateToHumanReadable(patient.dateOfBirth)}
-                        </div>
-                        <div className="text-sm text-gray-500 capitalize">
-                          {patient.gender}
-                        </div>
-                      </div>
-
-                      {/* Contact */}
-                      <div className="col-span-2">
-                        <div className="text-sm text-gray-900">
-                          {patient.phone || "Not provided"}
-                        </div>
-                        <div className="text-sm text-gray-500">
-                          {patient.email || "No email"}
-                        </div>
-                      </div>
-
-                      {/* Insurance */}
-                      <div className="col-span-2">
-                        <div className="text-sm text-gray-900">
-                          {patient.insuranceProvider
-                            ? `${patient.insuranceProvider.charAt(0).toUpperCase()}${patient.insuranceProvider.slice(1)}`
-                            : "Not specified"}
-                        </div>
-                        <div className="text-sm text-gray-500">
-                          ID: {patient.insuranceId || "N/A"}
-                        </div>
-                      </div>
-
-                      {/* Status */}
-                      <div className="col-span-2">
-                        <span
-                          className={cn(
-                            "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
-                            patient.status === "active"
-                              ? "bg-green-100 text-green-800"
-                              : "bg-gray-100 text-gray-800"
-                          )}
-                        >
-                          {patient.status === "active" ? "Active" : "Inactive"}
-                        </span>
-                      </div>
-
-                      {/* Actions */}
-                      <div className="col-span-1">
-                        <div className="flex space-x-1">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-8 w-8 p-0"
-                          >
-                            <Edit className="h-4 w-4 text-blue-600" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-8 w-8 p-0"
-                          >
-                            <Eye className="h-4 w-4 text-gray-600" />
-                          </Button>
-                        </div>
-                      </div>
                 </div>
               ))
             )}
-
-                {/* Pagination */}
-                {totalPages > 1 && (
-                  <div className="flex items-center justify-between p-4 border-t bg-gray-50">
-                    <div className="text-sm text-gray-700">
-                      Showing {startIndex + 1} to{" "}
-                      {Math.min(endIndex, filteredPatients.length)} of{" "}
-                      {filteredPatients.length} results
           </div>
-                    <div className="flex items-center space-x-2">
+        </div>
+
+        {/* pagination controls for balances */}
+        <div className="flex items-center justify-between mt-4">
+          <div className="text-sm text-gray-600">
+            Showing {(balancesPage - 1) * balancesPerPage + 1} -{" "}
+            {Math.min(balancesPage * balancesPerPage, patientBalancesTotal)} of{" "}
+            {patientBalancesTotal}
+          </div>
+
+          <div className="space-x-2">
             <Button
-                        variant="outline"
+              disabled={balancesPage <= 1}
-                        size="sm"
+              onClick={() => setBalancesPage((p) => Math.max(1, p - 1))}
-                        onClick={() =>
-                          setCurrentPage(Math.max(1, currentPage - 1))
-                        }
-                        disabled={currentPage === 1}
             >
-                        <ChevronLeft className="h-4 w-4 mr-1" />
               Previous
             </Button>
-
-                      {/* Page Numbers */}
-                      {Array.from({ length: totalPages }, (_, i) => i + 1).map(
-                        (page) => (
             <Button
-                            key={page}
+              disabled={balancesPage * balancesPerPage >= patientBalancesTotal}
-                            variant={
+              onClick={() => setBalancesPage((p) => p + 1)}
-                              currentPage === page ? "default" : "outline"
-                            }
-                            size="sm"
-                            onClick={() => setCurrentPage(page)}
-                            className="w-8 h-8 p-0"
-                          >
-                            {page}
-                          </Button>
-                        )
-                      )}
-
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() =>
-                          setCurrentPage(Math.min(totalPages, currentPage + 1))
-                        }
-                        disabled={currentPage === totalPages}
             >
               Next
-                        <ChevronRight className="h-4 w-4 ml-1" />
             </Button>
           </div>
         </div>
-                )}
+      </div>
-              </>
+    );
-            )}
+  };
-          </CardContent>
+
-        </Card>
+  const renderReportContent = () => {
+    if (isLoadingBalances || isLoadingSummary) {
+      return (
+        <div className="text-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading report data...</p>
+        </div>
+      );
+    }
+
+    if ((patientBalances?.length ?? 0) === 0) {
+      return (
+        <div className="text-center py-12">
+          <AlertCircle className="h-12 w-12 text-amber-500 mx-auto mb-4" />
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Financial Data Not Available
+          </h3>
+          <p className="text-gray-600 mb-4">
+            No patient balance data yet. Add payments/service lines to populate
+            reports.
+          </p>
+          <div className="text-sm text-gray-500">
+            <p>
+              Date range: {startDate} to {endDate}
+            </p>
           </div>
         </div>
       );
     }
+
+    switch (selectedReportType) {
+      case "patients_with_balance":
+        return renderPatientsWithBalance();
+
+      default:
+        return (
+          <div className="text-center py-12">
+            <FileText className="h-12 w-12 text-gray-300 mx-auto mb-4" />
+            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+              Report Type Not Implemented
+            </h3>
+            <p className="text-gray-600">
+              The "{selectedReportType}" report is being developed. For now use
+              "Patients with Outstanding Balance".
+            </p>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div>
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-semibold text-gray-900">
+            Financial Reports
+          </h1>
+          <p className="text-gray-600">
+            Generate comprehensive financial reports for your practice
+          </p>
+        </div>
+
+        <Button
+          onClick={generateReport}
+          disabled={isGenerating}
+          className="mt-4 md:mt-0"
+        >
+          <Download className="h-4 w-4 mr-2" />{" "}
+          {isGenerating ? "Generating..." : "Export Report"}
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Calendar className="h-5 w-5" />
+            Report Configuration
+          </CardTitle>
+        </CardHeader>
+
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="start-date">Start Date</Label>
+              <Input
+                id="start-date"
+                type="date"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="end-date">End Date</Label>
+              <Input
+                id="end-date"
+                type="date"
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="report-type">Report Type</Label>
+              <Select
+                value={selectedReportType}
+                onValueChange={(v) => setSelectedReportType(v as ReportType)}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select report type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="patients_with_balance">
+                    Patients with Outstanding Balance
+                  </SelectItem>
+                  <SelectItem value="patients_no_balance">
+                    Patients with Zero Balance
+                  </SelectItem>
+                  <SelectItem value="monthly_collections">
+                    Monthly Collections Summary
+                  </SelectItem>
+                  <SelectItem value="collections_by_doctor">
+                    Collections by Each Doctor
+                  </SelectItem>
+                  <SelectItem value="procedure_codes_by_doctor">
+                    Procedure Codes Analysis by Doctors
+                  </SelectItem>
+                  <SelectItem value="payment_methods">
+                    Payment Methods Breakdown
+                  </SelectItem>
+                  <SelectItem value="insurance_vs_patient_payments">
+                    Insurance vs Patient Payments
+                  </SelectItem>
+                  <SelectItem value="aging_report">
+                    Accounts Receivable Aging
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+            <div className="text-center">
+              <div className="text-lg font-semibold text-blue-600">
+                {summaryStats.totalPatients}
+              </div>
+              <p className="text-sm text-gray-600">Total Patients</p>
+            </div>
+
+            <div className="text-center">
+              <div className="text-lg font-semibold text-red-600">
+                {summaryStats.patientsWithBalance}
+              </div>
+              <p className="text-sm text-gray-600">With Balance</p>
+            </div>
+
+            <div className="text-center">
+              <div className="text-lg font-semibold text-green-600">
+                {summaryStats.patientsNoBalance}
+              </div>
+              <p className="text-sm text-gray-600">Zero Balance</p>
+            </div>
+
+            <div className="text-center">
+              <div className="text-lg font-semibold text-orange-600">
+                {formatCurrency(summaryStats.totalOutstanding)}
+              </div>
+              <p className="text-sm text-gray-600">Outstanding</p>
+            </div>
+
+            <div className="text-center">
+              <div className="text-lg font-semibold text-purple-600">
+                {formatCurrency(summaryStats.totalCollected)}
+              </div>
+              <p className="text-sm text-gray-600">Collected</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {selectedReportType === "patients_with_balance"
+              ? "Patients with Outstanding Balance"
+              : selectedReportType}
+          </CardTitle>
+        </CardHeader>
+
+        <CardContent>{renderReportContent()}</CardContent>
+      </Card>
+    </div>
+  );
+}

packages/db/types/index.ts

@@ -9,3 +9,4 @@ export * from "./user-types";
 export * from "./databaseBackup-types";
 export * from "./notifications-types";
 export * from "./cloudStorage-types";
+export * from "./payments-reports-types";

packages/db/types/payments-reports-types.ts

@@ -0,0 +1,11 @@
+export interface PatientBalanceRow {
+  patientId: number;
+  firstName: string | null;
+  lastName: string | null;
+  totalCharges: number;
+  totalPayments: number;
+  totalAdjusted: number;
+  currentBalance: number;
+  lastPaymentDate: string | null;
+  lastAppointmentDate: string | null;
+}