first commit

apps/Frontend/src/components/claims/claim-modal.tsx

@@ -0,0 +1,57 @@
+import { useState, useEffect } from "react";
+import { ClaimForm } from "./claim-form";
+import { Patient } from "@shared/schema";
+
+interface ClaimModalProps {
+  open: boolean;
+  onClose: () => void;
+  patientId: number;
+  appointmentId: number;
+}
+
+export function ClaimModal({ 
+  open,
+  onClose,
+  patientId,
+  appointmentId
+}: ClaimModalProps) {
+  const [patient, setPatient] = useState<Patient | null>(null);
+  const [loading, setLoading] = useState(false);
+  
+  useEffect(() => {
+    // Fetch patient data
+    const fetchPatient = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch(`/api/patients/${patientId}`);
+        if (!response.ok) {
+          throw new Error("Failed to fetch patient data");
+        }
+        const data = await response.json();
+        setPatient(data);
+      } catch (error) {
+        console.error("Error fetching patient:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (open && patientId) {
+      fetchPatient();
+    }
+  }, [patientId, open]);
+  
+  if (!open) return null;
+  
+  const patientName = patient ? `${patient.firstName} ${patient.lastName}` : `Patient #${patientId}`;
+  
+  return (
+    <ClaimForm 
+      patientId={patientId} 
+      appointmentId={appointmentId} 
+      patientName={patientName} 
+      onClose={onClose}
+      patientData={patient || undefined} 
+    />
+  );
+}