initial commit

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

@@ -0,0 +1,578 @@
+import { useState, useEffect, useMemo } from "react";
+import { useMutation } from "@tanstack/react-query";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardDescription,
+} from "@/components/ui/card";
+import { ClaimForm } from "@/components/claims/claim-form";
+import { useToast } from "@/hooks/use-toast";
+import { useAuth } from "@/hooks/use-auth";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { useLocation } from "wouter";
+import { useAppDispatch, useAppSelector } from "@/redux/hooks";
+import {
+  setTaskStatus,
+  clearTaskStatus,
+} from "@/redux/slices/seleniumClaimSubmitTaskSlice";
+import { SeleniumTaskBanner } from "@/components/ui/selenium-task-banner";
+import ClaimsRecentTable, {
+  QK_CLAIMS_BASE,
+} from "@/components/claims/claims-recent-table";
+import ClaimsOfPatientModal from "@/components/claims/claims-of-patient-table";
+import {
+  Claim,
+  InsertAppointment,
+  UpdateAppointment,
+  UpdatePatient,
+} from "@repo/db/types";
+import ClaimDocumentsUploadMultiple from "@/components/claims/claim-document-upload-modal";
+import { QK_PATIENTS_BASE } from "@/components/patients/patient-table";
+import { PdfPreviewModal } from "@/components/insurance-status/pdf-preview-modal";
+
+export default function ClaimsPage() {
+  const [isClaimFormOpen, setIsClaimFormOpen] = useState(false);
+  const [selectedPatientId, setSelectedPatientId] = useState<number | null>(
+    null
+  );
+  // for redirect from appointment page directly, then passing to claimform
+  const [selectedAppointmentId, setSelectedAppointmentId] = useState<
+    number | null
+  >(null);
+  // PDF preview modal state
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewPdfId, setPreviewPdfId] = useState<number | null>(null);
+  const [previewFallbackFilename, setPreviewFallbackFilename] = useState<string | null>(null);
+  const dispatch = useAppDispatch();
+  const { status, message, show } = useAppSelector(
+    (state) => state.seleniumClaimSubmitTask
+  );
+  const { toast } = useToast();
+  const { user } = useAuth();
+
+  // Update patient mutation
+  const updatePatientMutation = useMutation({
+    mutationFn: async ({
+      id,
+      patient,
+    }: {
+      id: number;
+      patient: UpdatePatient;
+    }) => {
+      const res = await apiRequest("PUT", `/api/patients/${id}`, patient);
+      return res.json();
+    },
+    onSuccess: () => {
+      toast({
+        title: "Success",
+        description: "Patient updated successfully!",
+        variant: "default",
+      });
+      queryClient.invalidateQueries({ queryKey: QK_CLAIMS_BASE });
+      queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
+    },
+    onError: (error) => {
+      toast({
+        title: "Error",
+        description: `Failed to update patient: ${error.message}`,
+        variant: "destructive",
+      });
+    },
+  });
+
+  // Create/upsert appointment mutation
+  const createAppointmentMutation = useMutation({
+    mutationFn: async (appointment: InsertAppointment) => {
+      const res = await apiRequest(
+        "POST",
+        "/api/appointments/upsert",
+        appointment
+      );
+      return await res.json();
+    },
+    onSuccess: (appointment) => {
+      toast({
+        title: "Appointment Scheduled",
+        description: appointment.message || "Appointment created successfully.",
+      });
+    },
+    onError: (error: Error) => {
+      toast({
+        title: "Error",
+        description: `Failed to create appointment: ${error.message}`,
+        variant: "destructive",
+      });
+    },
+  });
+
+  // create claim mutation
+  const createClaimMutation = useMutation({
+    mutationFn: async (claimData: any) => {
+      const res = await apiRequest("POST", "/api/claims/", claimData);
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QK_CLAIMS_BASE });
+
+      toast({
+        title: "Claim created successfully",
+        variant: "default",
+      });
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Error submitting claim",
+        description: error.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  // small helper: remove given query params from the current URL (silent, no reload)
+  const clearUrlParams = (params: string[]) => {
+    try {
+      const url = new URL(window.location.href);
+      let changed = false;
+      for (const p of params) {
+        if (url.searchParams.has(p)) {
+          url.searchParams.delete(p);
+          changed = true;
+        }
+      }
+      if (changed) {
+        window.history.replaceState({}, document.title, url.toString());
+      }
+    } catch (e) {
+      // ignore (URL API or history.replaceState might throw in very old envs)
+    }
+  };
+
+  // case1: - this params are set by pdf extraction/patient page or either by patient-add-form. then used in claim page here.
+  const [location] = useLocation();
+
+  const { newPatient, mode } = useMemo(() => {
+    const params = new URLSearchParams(window.location.search);
+    return {
+      newPatient: params.get("newPatient"),
+      mode: params.get("mode"), // direct | manual | null};
+    };
+  }, [location]);
+
+  const handleNewClaim = (patientId: number, appointmentId?: number) => {
+    setSelectedPatientId(patientId);
+
+    // case: when redirect happerns from appointment page.
+    if (appointmentId) {
+      setSelectedAppointmentId(appointmentId);
+    }
+    setIsClaimFormOpen(true);
+  };
+
+  // if ?newPatient=<id> is present, open claim form directly
+  useEffect(() => {
+    if (!newPatient) return;
+
+    const id = Number(newPatient);
+    if (!Number.isFinite(id) || id <= 0) return;
+
+    handleNewClaim(id);
+    clearUrlParams(["newPatient"]);
+  }, [newPatient]);
+
+  // case2 - redirect from appointment page:
+  // If ?appointmentId= is present (and no ?newPatient param), fetch appointment->patient and open claim form
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const appointmentIdParam = params.get("appointmentId");
+
+    // If newPatient flow is present, prefer it and do nothing here
+    if (newPatient) return;
+    if (!appointmentIdParam) return;
+
+    const appointmentId = Number(appointmentIdParam);
+    if (!Number.isFinite(appointmentId) || appointmentId <= 0) return;
+
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const res = await apiRequest(
+          "GET",
+          `/api/appointments/${appointmentId}`
+        );
+        if (!res.ok) {
+          let body: any = null;
+          try {
+            body = await res.json();
+          } catch {}
+          if (!cancelled) {
+            toast({
+              title: "Failed to load appointment",
+              description:
+                body?.message ??
+                body?.error ??
+                `Could not fetch appointment ${appointmentId}.`,
+              variant: "destructive",
+            });
+          }
+          return;
+        }
+
+        const appointment = await res.json();
+        const patientId = appointment?.patientId;
+
+        if (!cancelled && patientId) {
+          handleNewClaim(patientId, appointmentId);
+          clearUrlParams(["appointmentId"]);
+        }
+      } catch (err: any) {
+        if (!cancelled) {
+          console.error("Error fetching patient for appointment:", err);
+          toast({
+            title: "Error",
+            description: err?.message ?? "Failed to fetch patient.",
+            variant: "destructive",
+          });
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [location, newPatient]);
+
+  // 1. upsert appointment.
+  const handleAppointmentSubmit = async (
+    appointmentData: InsertAppointment | UpdateAppointment
+  ): Promise<number> => {
+    return new Promise<number>((resolve, reject) => {
+      createAppointmentMutation.mutate(
+        {
+          date: appointmentData.date,
+          startTime: "09:00",
+          endTime: "09:30",
+          staffId: appointmentData.staffId,
+          patientId: appointmentData.patientId,
+          userId: user?.id,
+          title: "Scheduled Appointment",
+          type: "checkup",
+        },
+        {
+          onSuccess: (appointment) => {
+            resolve(appointment.id);
+          },
+          onError: (error) => {
+            toast({
+              title: "Error",
+              description: "Could not schedule appointment",
+              variant: "destructive",
+            });
+            reject(error);
+          },
+        }
+      );
+    });
+  };
+
+  // 2. Update Patient ( for insuranceId and Insurance Provider)
+  const handleUpdatePatient = (patient: UpdatePatient & { id?: number }) => {
+    if (patient) {
+      const { id, ...sanitizedPatient } = patient;
+      updatePatientMutation.mutate({
+        id: Number(patient.id),
+        patient: sanitizedPatient,
+      });
+    } else {
+      toast({
+        title: "Error",
+        description: "Cannot update patient: No patient or user found",
+        variant: "destructive",
+      });
+    }
+  };
+
+  // 3. create claim.
+  const handleClaimSubmit = (claimData: any): Promise<Claim> => {
+    return createClaimMutation.mutateAsync(claimData).then((data) => {
+      return data;
+    });
+  };
+
+  // 4. handle selenium sybmiting Mass Health claim
+  const handleMHClaimSubmitSelenium = async (data: any) => {
+    const formData = new FormData();
+    formData.append("data", JSON.stringify(data));
+    const uploadedFiles: File[] = data.uploadedFiles ?? [];
+
+    uploadedFiles.forEach((file: File) => {
+      if (file.type === "application/pdf") {
+        formData.append("pdfs", file);
+      } else if (file.type.startsWith("image/")) {
+        formData.append("images", file);
+      }
+    });
+
+    try {
+      dispatch(
+        setTaskStatus({
+          status: "pending",
+          message: "Submitting claim to Selenium...",
+        })
+      );
+      const response = await apiRequest(
+        "POST",
+        "/api/claims/selenium-claim",
+        formData
+      );
+      const result1 = await response.json();
+      if (result1.error) throw new Error(result1.error);
+
+      if (result1.claimNumber) {
+        await queryClient.invalidateQueries({ queryKey: ["claims-recent"] });
+      }
+
+      dispatch(
+        setTaskStatus({
+          status: "pending",
+          message: "Submitted to Selenium. Awaiting PDF...",
+        })
+      );
+
+      toast({
+        title: "Selenium service notified",
+        description:
+          "Your claim data was successfully sent to Selenium, Waitinig for its response.",
+        variant: "default",
+      });
+
+      const result2 = await handleMHSeleniumPdfDownload(
+        result1,
+        selectedPatientId,
+        "INSURANCE_CLAIM"
+      );
+      return result2;
+    } catch (error: any) {
+      dispatch(
+        setTaskStatus({
+          status: "error",
+          message: error.message || "Selenium submission failed",
+        })
+      );
+      toast({
+        title: "Selenium service error",
+        description: error.message || "An error occurred.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  // 5. selenium pdf download handler
+  const handleMHSeleniumPdfDownload = async (
+    data: any,
+    selectedPatientId: number | null,
+    groupTitleKey: "INSURANCE_CLAIM" | "INSURANCE_CLAIM_PREAUTH"
+  ) => {
+    try {
+      if (!selectedPatientId) {
+        throw new Error("Missing patientId");
+      }
+
+      dispatch(
+        setTaskStatus({
+          status: "pending",
+          message: "Downloading PDF from Selenium...",
+        })
+      );
+
+      const res = await apiRequest("POST", "/api/claims/selenium/fetchpdf", {
+        patientId: selectedPatientId,
+        pdf_url: data.pdf_url,
+        groupTitleKey,
+      });
+      const result = await res.json();
+      if (result.error) throw new Error(result.error);
+
+      // Invalidate queries to refresh the Documents area
+      queryClient.invalidateQueries({ queryKey: ["groupPdfs"] });
+      queryClient.invalidateQueries({ queryKey: ["pdf-groups"] });
+      queryClient.invalidateQueries({ queryKey: ["claims-recent"] });
+
+      dispatch(
+        setTaskStatus({
+          status: "success",
+          message: "Claim submitted & PDF downloaded successfully.",
+        })
+      );
+
+      toast({
+        title: "Success",
+        description: "Claim submitted successfully! PDF saved to Documents page.",
+      });
+
+      // PDF preview popup removed - PDF is still saved to Documents page
+
+      return result;
+    } catch (error: any) {
+      dispatch(
+        setTaskStatus({
+          status: "error",
+          message: error.message || "Failed to download PDF",
+        })
+      );
+      toast({
+        title: "Error",
+        description: error.message || "Failed to fetch PDF",
+        variant: "destructive",
+      });
+    }
+  };
+
+  // 6. close claim
+  const closeClaim = () => {
+    setSelectedPatientId(null);
+    setSelectedAppointmentId(null);
+    setIsClaimFormOpen(false);
+
+    clearUrlParams(["newPatient", "appointmentId"]);
+  };
+
+  // Pre Auth section
+  const handleMHClaimPreAuthSubmitSelenium = async (data: any) => {
+    const formData = new FormData();
+    formData.append("data", JSON.stringify(data));
+    const uploadedFiles: File[] = data.uploadedFiles ?? [];
+
+    uploadedFiles.forEach((file: File) => {
+      if (file.type === "application/pdf") {
+        formData.append("pdfs", file);
+      } else if (file.type.startsWith("image/")) {
+        formData.append("images", file);
+      }
+    });
+
+    try {
+      dispatch(
+        setTaskStatus({
+          status: "pending",
+          message: "Submitting claim pre auth to Selenium...",
+        })
+      );
+      const response = await apiRequest(
+        "POST",
+        "/api/claims/selenium-claim-pre-auth",
+        formData
+      );
+      const result1 = await response.json();
+      if (result1.error) throw new Error(result1.error);
+
+      dispatch(
+        setTaskStatus({
+          status: "pending",
+          message: "Submitted to Selenium. Awaiting PDF...",
+        })
+      );
+
+      toast({
+        title: "Selenium service notified",
+        description:
+          "Your claim pre auth data was successfully sent to Selenium, Waitinig for its response.",
+        variant: "default",
+      });
+
+      const result2 = await handleMHSeleniumPdfDownload(
+        result1,
+        selectedPatientId,
+        "INSURANCE_CLAIM_PREAUTH"
+      );
+      return result2;
+    } catch (error: any) {
+      dispatch(
+        setTaskStatus({
+          status: "error",
+          message: error.message || "Selenium submission failed",
+        })
+      );
+      toast({
+        title: "Selenium service error",
+        description: error.message || "An error occurred.",
+        variant: "destructive",
+      });
+    }
+  };
+  return (
+    <div>
+      <SeleniumTaskBanner
+        status={status}
+        message={message}
+        show={show}
+        onClear={() => dispatch(clearTaskStatus())}
+      />
+
+      <div className="container mx-auto space-y-6">
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">
+              Insurance Claims
+            </h1>
+            <p className="text-muted-foreground">
+              Manage and submit insurance claims for patients
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Recent Claims by Patients also handles new claims */}
+      <ClaimsOfPatientModal onNewClaim={handleNewClaim} />
+
+      {/* Recent Claims Section */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Recently Submitted Claims</CardTitle>
+          <CardDescription>
+            View and manage all recent claims information
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ClaimsRecentTable
+            allowEdit={true}
+            allowView={true}
+            allowDelete={true}
+          />
+        </CardContent>
+      </Card>
+
+      {/* File Upload Zone */}
+      <ClaimDocumentsUploadMultiple />
+
+      {/* Claim Form Modal */}
+      {isClaimFormOpen && selectedPatientId !== null && (
+        <ClaimForm
+          patientId={selectedPatientId}
+          appointmentId={selectedAppointmentId ?? undefined}
+          autoSubmit={mode === "direct"}
+          onClose={closeClaim}
+          onSubmit={handleClaimSubmit}
+          onHandleAppointmentSubmit={handleAppointmentSubmit}
+          onHandleUpdatePatient={handleUpdatePatient}
+          onHandleForMHSeleniumClaim={handleMHClaimSubmitSelenium}
+          onHandleForMHSeleniumClaimPreAuth={handleMHClaimPreAuthSubmitSelenium}
+        />
+      )}
+
+      {/* PDF Preview Modal */}
+      <PdfPreviewModal
+        open={previewOpen}
+        onClose={() => {
+          setPreviewOpen(false);
+          setPreviewPdfId(null);
+          setPreviewFallbackFilename(null);
+        }}
+        pdfId={previewPdfId}
+        fallbackFilename={previewFallbackFilename}
+      />
+    </div>
+  );
+}