npiProvider - v3

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

@@ -39,6 +39,7 @@ import {
   InputServiceLine,
   InsertAppointment,
   MissingTeethStatus,
+  NpiProvider,
   Patient,
   Staff,
   UpdateAppointment,
@@ -134,6 +135,17 @@ export function ClaimForm({
     }
   }, [staffMembersRaw, staff]);
 
+  // fetching npi providers
+  
+  const { data: npiProviders = [] } = useQuery<NpiProvider[]>({
+    queryKey: ["/api/npiProviders/"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/npiProviders/");
+      if (!res.ok) throw new Error("Failed to fetch NPI providers");
+      return res.json();
+    },
+  });
+
   // Service date state
   const [serviceDateValue, setServiceDateValue] = useState<Date>(new Date());
   const [serviceDate, setServiceDate] = useState<string>(
@@ -550,6 +562,16 @@ export function ClaimForm({
       return;
     }
 
+    if (!f.npiProvider?.npiNumber) {
+      toast({
+        title: "NPI Provider Required",
+        description: "Please select a NPI Provider.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+
     // 1. Create or update appointment
     let appointmentIdToUse = appointmentId;
 
@@ -611,6 +633,7 @@ export function ClaimForm({
       dateOfBirth: toMMDDYYYY(f.dateOfBirth),
       serviceLines: filteredServiceLines,
       staffId: Number(staff?.id),
+      npiProvider: f.npiProvider,
       patientId: patientId,
       insuranceProvider: "Mass Health",
       appointmentId: appointmentIdToUse!,
@@ -659,6 +682,16 @@ export function ClaimForm({
       return;
     }
 
+    if (!f.npiProvider?.npiNumber) {
+      toast({
+        title: "NPI Provider Required",
+        description: "Please select a NPI Provider.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+
     // 2. Update patient
     if (patient && typeof patient.id === "number") {
       const { id, createdAt, userId, ...sanitizedFields } = patient;
@@ -682,6 +715,7 @@ export function ClaimForm({
       dateOfBirth: toMMDDYYYY(f.dateOfBirth),
       serviceLines: filteredServiceLines,
       staffId: Number(staff?.id),
+      npiProvider: f.npiProvider,
       patientId: patientId,
       insuranceProvider: "Mass Health",
       insuranceSiteKey: "MH",
@@ -1000,6 +1034,41 @@ export function ClaimForm({
                       </SelectContent>
                     </Select>
 
+                    {/* Rendering Npi Provider */}
+                    <Label className="flex items-center ml-2">
+                      Rendering Provider
+                    </Label>
+
+                    <Select
+                      value={form.npiProvider?.npiNumber || ""}
+                      onValueChange={(npiNumber) => {
+                        const selected = npiProviders.find(
+                          (p) => p.npiNumber === npiNumber,
+                        );
+                        if (!selected) return;
+
+                        setForm((prev) => ({
+                          ...prev,
+                          renderingNpi: {
+                            npiNumber: selected.npiNumber,
+                            providerName: selected.providerName,
+                          },
+                        }));
+                      }}
+                    >
+                      <SelectTrigger className="w-56">
+                        <SelectValue placeholder="Select NPI Provider" />
+                      </SelectTrigger>
+
+                      <SelectContent>
+                        {npiProviders.map((p) => (
+                          <SelectItem key={p.id} value={p.npiNumber}>
+                            {p.npiNumber} — {p.providerName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
                     {/* Map Price Button */}
                     <Button
                       className="ml-4"