payemnt of paitientss - table added

apps/Backend/src/routes/payments.ts

@@ -94,26 +94,30 @@ router.get(
   "/patient/:patientId",
   async (req: Request, res: Response): Promise<any> => {
     try {
-      const userId = req.user?.id;
+      const patientIdParam = req.params.patientId;
-      if (!userId) return res.status(401).json({ message: "Unauthorized" });
+      if (!patientIdParam) {
+        return res.status(400).json({ message: "Missing patientId" });
+      }
+      const patientId = parseInt(patientIdParam);
+      if (isNaN(patientId)) {
+        return res.status(400).json({ message: "Invalid patientId" });
+      }
+      const limit = parseInt(req.query.limit as string) || 10;
+      const offset = parseInt(req.query.offset as string) || 0;
 
-      const parsedPatientId = parseIntOrError(
+      if (isNaN(patientId)) {
-        req.params.patientId,
+        return res.status(400).json({ message: "Invalid patient ID" });
-        "Patient ID"
+      }
-      );
 
-      const payments = await storage.getPaymentsByPatientId(
+      const [payments, totalCount] = await Promise.all([
-        parsedPatientId,
+        storage.getRecentPaymentsByPatientId(patientId, limit, offset),
-        userId
+        storage.getTotalPaymentCountByPatient(patientId),
-      );
+      ]);
 
-      if (!payments)
+      res.json({ payments, totalCount });
-        return res.status(404).json({ message: "No payments found for claim" });
+    } catch (error) {
-
+      console.error("Failed to retrieve payments for patient:", error);
-      res.status(200).json(payments);
+      res.status(500).json({ message: "Failed to retrieve patient payments" });
-    } catch (err) {
-      console.error("Failed to fetch patient payments:", err);
-      res.status(500).json({ message: "Failed to fetch patient payments" });
     }
   }
 );

apps/Backend/src/storage/index.ts

@@ -183,14 +183,16 @@ export interface IStorage {
   ): Promise<Payment>;
   deletePayment(id: number, userId: number): Promise<void>;
   getPaymentById(id: number, userId: number): Promise<PaymentWithExtras | null>;
+  getRecentPaymentsByPatientId(
+    patientId: number,
+    limit: number,
+    offset: number
+  ): Promise<PaymentWithExtras[] | null>;
+  getTotalPaymentCountByPatient(patientId: number): Promise<number>;
   getPaymentsByClaimId(
     claimId: number,
     userId: number
   ): Promise<PaymentWithExtras | null>;
-  getPaymentsByPatientId(
-    patientId: number,
-    userId: number
-  ): Promise<PaymentWithExtras[]>;
   getRecentPaymentsByUser(
     userId: number,
     limit: number,
@@ -762,6 +764,45 @@ export const storage: IStorage = {
     await db.payment.delete({ where: { id } });
   },
 
+  async getRecentPaymentsByPatientId(
+    patientId: number,
+    limit: number,
+    offset: number
+  ): Promise<PaymentWithExtras[]> {
+    const payments = await db.payment.findMany({
+      where: { claim: { patientId } },
+      orderBy: { createdAt: "desc" },
+      skip: offset,
+      take: limit,
+      include: {
+        claim: {
+          include: {
+            serviceLines: true,
+          },
+        },
+        serviceLineTransactions: {
+          include: {
+            serviceLine: true,
+          },
+        },
+        updatedBy: true,
+      },
+    });
+
+    return payments.map((payment) => ({
+      ...payment,
+      patientName: payment.claim?.patientName ?? "",
+      paymentDate: payment.createdAt,
+      paymentMethod: payment.serviceLineTransactions[0]?.method ?? "OTHER",
+    }));
+  },
+
+  async getTotalPaymentCountByPatient(patientId: number): Promise<number> {
+    return db.payment.count({
+      where: { claim: { patientId } },
+    });
+  },
+
   async getPaymentById(
     id: number,
     userId: number
@@ -824,35 +865,6 @@ export const storage: IStorage = {
     };
   },
 
-  async getPaymentsByPatientId(
-    patientId: number,
-    userId: number
-  ): Promise<PaymentWithExtras[]> {
-    const payments = await db.payment.findMany({
-      where: { patientId, userId },
-      include: {
-        claim: {
-          include: {
-            serviceLines: true,
-          },
-        },
-        serviceLineTransactions: {
-          include: {
-            serviceLine: true,
-          },
-        },
-        updatedBy: true,
-      },
-    });
-
-    return payments.map((payment) => ({
-      ...payment,
-      patientName: payment.claim?.patientName ?? "",
-      paymentDate: payment.createdAt,
-      paymentMethod: payment.serviceLineTransactions[0]?.method ?? "OTHER",
-    }));
-  },
-
   async getRecentPaymentsByUser(
     userId: number,
     limit: number,

apps/Frontend/src/components/payments/payment-view-modal.tsx

@@ -1,35 +0,0 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { formatDateToHumanReadable } from "@/utils/dateUtils";
-import { z } from "zod";
-import { PaymentUncheckedCreateInputObjectSchema } from "@repo/db/usedSchemas";
-
-type Payment = z.infer<typeof PaymentUncheckedCreateInputObjectSchema>;
-
-interface PaymentViewModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  payment: Payment;
-}
-
-export default function PaymentViewModal({ isOpen, onClose, payment }: PaymentViewModalProps) {
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Payment Details</DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-4 text-sm">
-          <div><strong>Payment ID:</strong> PAY-{payment.id.toString().padStart(4, "0")}</div>
-          <div><strong>Claim ID:</strong> {payment.claimId}</div>
-          <div><strong>Payer Name:</strong> {payment.payerName}</div>
-          <div><strong>Amount Paid:</strong> ${payment.amountPaid.toFixed(2)}</div>
-          <div><strong>Payment Date:</strong> {formatDateToHumanReadable(payment.paymentDate)}</div>
-          <div><strong>Payment Method:</strong> {payment.paymentMethod}</div>
-          <div><strong>Note:</strong> {payment.note || "—"}</div>
-          <div><strong>Created At:</strong> {formatDateToHumanReadable(payment.createdAt)}</div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/Frontend/src/components/payments/payments-of-patient-table.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { PatientTable } from "../patients/patient-table";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Patient } from "@repo/db/types";
+import PaymentsRecentTable from "./payments-recent-table";
+
+export default function PaymentsOfPatientModal() {
+  const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [paymentsPage, setPaymentsPage] = useState(1);
+
+  const handleSelectPatient = (patient: Patient | null) => {
+    if (patient) {
+      setSelectedPatient(patient);
+      setPaymentsPage(1);
+      setIsModalOpen(true);
+    } else {
+      setSelectedPatient(null);
+      setIsModalOpen(false);
+    }
+  };
+
+  return (
+    <div className="space-y-8 py-8">
+      {/* Payments Section */}
+      {selectedPatient && (
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              Payments for {selectedPatient.firstName}{" "}
+              {selectedPatient.lastName}
+            </CardTitle>
+            <CardDescription>
+              Displaying recent payments for the selected patient.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <PaymentsRecentTable
+              patientId={selectedPatient.id}
+              allowEdit
+              allowDelete
+              onPageChange={setPaymentsPage}
+            />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Patients Section */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Patient Records</CardTitle>
+          <CardDescription>
+            Select any patient and View all their recent payments.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <PatientTable
+            allowView
+            allowCheckbox
+            onSelectPatient={handleSelectPatient}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/Frontend/src/components/payments/payments-recent-table.tsx

@@ -54,7 +54,7 @@ interface PaymentsRecentTableProps {
   allowCheckbox?: boolean;
   onSelectPayment?: (payment: PaymentWithExtras | null) => void;
   onPageChange?: (page: number) => void;
-  claimId?: number;
+  patientId?: number;
 }
 
 export default function PaymentsRecentTable({
@@ -63,7 +63,7 @@ export default function PaymentsRecentTable({
   allowCheckbox,
   onSelectPayment,
   onPageChange,
-  claimId,
+  patientId,
 }: PaymentsRecentTableProps) {
   const { toast } = useToast();
 
@@ -91,8 +91,8 @@ export default function PaymentsRecentTable({
   };
 
   const getPaymentsQueryKey = () =>
-    claimId
+    patientId
-      ? ["payments-recent", "claim", claimId, currentPage]
+      ? ["payments-recent", "patient", patientId, currentPage]
       : ["payments-recent", "global", currentPage];
 
   const {
@@ -102,8 +102,8 @@ export default function PaymentsRecentTable({
   } = useQuery<PaymentApiResponse>({
     queryKey: getPaymentsQueryKey(),
     queryFn: async () => {
-      const endpoint = claimId
+      const endpoint = patientId
-        ? `/api/payments/claim/${claimId}?limit=${paymentsPerPage}&offset=${offset}`
+        ? `/api/payments/patient/${patientId}?limit=${paymentsPerPage}&offset=${offset}`
         : `/api/payments/recent?limit=${paymentsPerPage}&offset=${offset}`;
 
       const res = await apiRequest("GET", endpoint);
@@ -272,7 +272,7 @@ export default function PaymentsRecentTable({
 
   useEffect(() => {
     setCurrentPage(1);
-  }, [claimId]);
+  }, [patientId]);
 
   const totalPages = useMemo(
     () => Math.ceil((paymentsData?.totalCount || 0) / paymentsPerPage),
@@ -412,7 +412,7 @@ export default function PaymentsRecentTable({
                   Error loading payments.
                 </TableCell>
               </TableRow>
-            ) : paymentsData?.payments.length === 0 ? (
+            ) : (paymentsData?.payments?.length ?? 0) === 0 ? (
               <TableRow>
                 <TableCell
                   colSpan={8}

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

@@ -48,6 +48,7 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import PaymentsRecentTable from "@/components/payments/payments-recent-table";
+import PaymentsOfPatientModal from "@/components/payments/payments-of-patient-table";
 
 export default function PaymentsPage() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -357,6 +358,9 @@ export default function PaymentsPage() {
               <PaymentsRecentTable allowEdit allowDelete />
             </CardContent>
           </Card>
+          
+          {/* Recent Payments by Patients*/}
+          <PaymentsOfPatientModal/>
         </main>
       </div>
     </div>