DentalManagementMH06/apps/Frontend/src/components/payments/payments-of-patient-table.jsx

import { forwardRef, useEffect, useState } from "react";
import { PatientTable } from "../patients/patient-table";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card";
import PaymentsRecentTable from "./payments-recent-table";
const PaymentsOfPatientModal = forwardRef(({ initialPatient = null, openInitially = false, onClose }, ref) => {
    const [selectedPatient, setSelectedPatient] = useState(null);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [paymentsPage, setPaymentsPage] = useState(1);
    // minimal, local scroll + cleanup — put inside PaymentsOfPatientModal
    useEffect(() => {
        if (!selectedPatient)
            return;
        const raf = requestAnimationFrame(() => {
            const card = document.getElementById("payments-for-patient-card");
            const main = document.querySelector("main"); // your app's scroll container
            if (card && main instanceof HTMLElement) {
                const parentRect = main.getBoundingClientRect();
                const cardRect = card.getBoundingClientRect();
                const relativeTop = cardRect.top - parentRect.top + main.scrollTop;
                const offset = 8;
                main.scrollTo({
                    top: Math.max(0, relativeTop - offset),
                    behavior: "smooth",
                });
            }
        });
        // cleanup: when selectedPatient changes (ddmodal closes) or component unmounts,
        // reset the main scroll to top so other pages are not left scrolled.
        return () => {
            cancelAnimationFrame(raf);
            const main = document.querySelector("main");
            if (main instanceof HTMLElement) {
                // immediate reset (no animation) so navigation to other pages starts at top
                main.scrollTo({ top: 0, behavior: "auto" });
            }
        };
    }, [selectedPatient]);
    // when parent provides an initialPatient and openInitially flag, apply it
    useEffect(() => {
        if (initialPatient) {
            setSelectedPatient(initialPatient);
            setPaymentsPage(1);
        }
        if (openInitially) {
            setIsModalOpen(true);
        }
    }, [initialPatient, openInitially]);
    const handleSelectPatient = (patient) => {
        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 id="payments-for-patient-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>);
});
export default PaymentsOfPatientModal;