document page done

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

@@ -1,19 +1,19 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { TopAppBar } from "@/components/layout/top-app-bar";
 import { Sidebar } from "@/components/layout/sidebar";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { 
-  Search, 
-  Edit, 
-  Eye, 
-  ChevronLeft, 
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Search,
+  Eye,
+  ChevronLeft,
   ChevronRight,
-  Settings 
+  Settings,
+  Trash,
+  Download,
 } from "lucide-react";
-import { PatientUncheckedCreateInputObjectSchema } from "@repo/db/usedSchemas";
 import { useAuth } from "@/hooks/use-auth";
 import { cn } from "@/lib/utils";
 import {
@@ -23,37 +23,19 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {z} from "zod";
-
-
-const PatientSchema = (
-  PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
-).omit({
-  appointments: true,
-});
-type Patient = z.infer<typeof PatientSchema>;
-
-const insertPatientSchema = (
-  PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
-).omit({
-  id: true,
-  createdAt: true,
-  userId: true,
-});
-type InsertPatient = z.infer<typeof insertPatientSchema>;
-
-const updatePatientSchema = (
-  PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
-)
-  .omit({
-    id: true,
-    createdAt: true,
-    userId: true,
-  })
-  .partial();
-
-type UpdatePatient = z.infer<typeof updatePatientSchema>;
+import { ClaimPdfUncheckedCreateInputObjectSchema } from "@repo/db/usedSchemas";
+import { z } from "zod";
+import "@react-pdf-viewer/core/lib/styles/index.css";
+import "@react-pdf-viewer/default-layout/lib/styles/index.css";
+import { Viewer, Worker } from "@react-pdf-viewer/core";
+import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { toast } from "@/hooks/use-toast";
+import { DeleteConfirmationDialog } from "@/components/ui/deleteDialog";
 
+const ClaimPdfSchema =
+  ClaimPdfUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>;
+type ClaimPdf = z.infer<typeof ClaimPdfSchema>;
 
 export default function DocumentsPage() {
   const { user } = useAuth();
@@ -62,24 +44,139 @@ export default function DocumentsPage() {
   const [searchField, setSearchField] = useState("all");
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 5;
+  const [selectedPdfId, setSelectedPdfId] = useState<number | null>(null);
+  const defaultLayoutPluginInstance = defaultLayoutPlugin();
+  const [isDeletePdfOpen, setIsDeletePdfOpen] = useState(false);
+  const [currentPdf, setCurrentPdf] = useState<ClaimPdf | null>(null);
 
-  // Fetch patients
-  const {
-    data: patients = [],
-    isLoading: isLoadingPatients,
-  } = useQuery<Patient[]>({
-    queryKey: ["/api/patients"],
+  const { data: pdfs = [], isLoading } = useQuery<ClaimPdf[]>({
+    queryKey: ["/api/documents/claim-pdf/recent"],
     enabled: !!user,
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/documents/claim-pdf/recent");
+      return res.json();
+    },
   });
 
-  // Filter patients based on search
-  const filteredPatients = patients.filter(patient => {
-    if (!searchTerm) return true;
-    
+  const deletePdfMutation = useMutation({
+    mutationFn: async (id: number) => {
+      await apiRequest("DELETE", `/api/documents/claim-pdf/${id}`);
+    },
+    onSuccess: () => {
+      setIsDeletePdfOpen(false);
+      setCurrentPdf(null);
+      queryClient.invalidateQueries({
+        queryKey: ["/api/documents/claim-pdf/recent"],
+      });
+
+      toast({
+        title: "Success",
+        description: "PDF deleted successfully!",
+        variant: "default",
+      });
+    },
+    onError: (error: any) => {
+      console.error("Error deleting PDF:", error);
+      toast({
+        title: "Error",
+        description: `Failed to delete PDF: ${error.message || error}`,
+        variant: "destructive",
+      });
+    },
+  });
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  };
+
+  const getPatientInitials = (first: string, last: string) =>
+    `${first[0]}${last[0]}`.toUpperCase();
+
+  const [fileBlobUrl, setFileBlobUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!selectedPdfId) return;
+    let url: string | null = null;
+
+    const fetchPdf = async () => {
+      try {
+        const res = await apiRequest(
+          "GET",
+          `/api/documents/claim-pdf/${selectedPdfId}`
+        );
+
+        const arrayBuffer = await res.arrayBuffer();
+        const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+        const objectUrl = URL.createObjectURL(blob);
+        setFileBlobUrl(objectUrl);
+        url = objectUrl;
+      } catch (err) {
+        console.error("Failed to load PDF", err);
+      }
+    };
+
+    fetchPdf();
+
+    return () => {
+      if (url) {
+        URL.revokeObjectURL(url);
+      }
+    };
+  }, [selectedPdfId]);
+
+  const toggleMobileMenu = () => setIsMobileMenuOpen((prev) => !prev);
+
+  const viewPdf = (pdfId: number) => {
+    setSelectedPdfId(pdfId);
+  };
+
+  const downloadPdf = async (pdfId: number, filename: string) => {
+    try {
+      const res = await apiRequest("GET", `/api/documents/claim-pdf/${pdfId}`);
+      const arrayBuffer = await res.arrayBuffer();
+      const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+      const url = URL.createObjectURL(blob);
+
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Failed to download PDF:", err);
+    }
+  };
+
+  const handleDeletePdf = (pdf: ClaimPdf) => {
+    setCurrentPdf(pdf);
+    setIsDeletePdfOpen(true);
+  };
+
+  const handleConfirmDeletePdf = () => {
+    if (currentPdf) {
+      deletePdfMutation.mutate(currentPdf.id);
+    } else {
+      toast({
+        title: "Error",
+        description: "No PDF selected for deletion.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const filteredPdfs = pdfs.filter((pdf) => {
+    const patient = pdf.patient;
     const searchLower = searchTerm.toLowerCase();
     const fullName = `${patient.firstName} ${patient.lastName}`.toLowerCase();
-    const patientId = `PID-${patient.id.toString().padStart(4, '0')}`;
-    
+    const patientId = `PID-${patient.id.toString().padStart(4, "0")}`;
+
     switch (searchField) {
       case "name":
         return fullName.includes(searchLower);
@@ -91,7 +188,7 @@ export default function DocumentsPage() {
       default:
         return (
           fullName.includes(searchLower) ||
-          patientId.toLowerCase().includes(searchLower) ||
+          patientId.includes(searchLower) ||
           patient.phone?.toLowerCase().includes(searchLower) ||
           patient.email?.toLowerCase().includes(searchLower) ||
           false
@@ -99,45 +196,31 @@ export default function DocumentsPage() {
     }
   });
 
-  // Pagination
-  const totalPages = Math.ceil(filteredPatients.length / itemsPerPage);
+  const totalPages = Math.ceil(filteredPdfs.length / itemsPerPage);
   const startIndex = (currentPage - 1) * itemsPerPage;
-  const endIndex = startIndex + itemsPerPage;
-  const currentPatients = filteredPatients.slice(startIndex, endIndex);
-
-  const toggleMobileMenu = () => {
-    setIsMobileMenuOpen(!isMobileMenuOpen);
-  };
-
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric'
-    });
-  };
-
-  const getPatientInitials = (firstName: string, lastName: string) => {
-    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
-  };
+  const currentPdfs = filteredPdfs.slice(startIndex, startIndex + itemsPerPage);
 
   return (
     <div className="flex h-screen bg-gray-50">
-      <Sidebar isMobileOpen={isMobileMenuOpen} setIsMobileOpen={setIsMobileMenuOpen} />
-      
+      <Sidebar
+        isMobileOpen={isMobileMenuOpen}
+        setIsMobileOpen={setIsMobileMenuOpen}
+      />
+
       <div className="flex-1 flex flex-col overflow-hidden">
         <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-        
+
         <main className="flex-1 overflow-auto p-6">
           <div className="max-w-7xl mx-auto">
-            {/* Header */}
             <div className="mb-6">
-              <h1 className="text-2xl font-semibold text-gray-900 mb-2">Documents</h1>
-              <p className="text-gray-600">View and manage all patient information</p>
+              <h1 className="text-2xl font-semibold text-gray-900 mb-2">
+                Documents
+              </h1>
+              <p className="text-gray-600">
+                View and manage recent uploaded claim PDFs
+              </p>
             </div>
 
-            {/* Search and Filters */}
             <Card className="mb-6">
               <CardContent className="p-4">
                 <div className="flex flex-col md:flex-row gap-4">
@@ -171,14 +254,18 @@ export default function DocumentsPage() {
               </CardContent>
             </Card>
 
-            {/* Patient List */}
             <Card>
               <CardContent className="p-0">
-                {isLoadingPatients ? (
-                  <div className="text-center py-8">Loading patients...</div>
+                {isLoading ? (
+                  <div className="text-center py-8">Loading data...</div>
+                ) : currentPdfs.length === 0 ? (
+                  <div className="text-center py-8 text-gray-500">
+                    {searchTerm
+                      ? "No results matching your search."
+                      : "No recent claim PDFs available."}
+                  </div>
                 ) : (
                   <>
-                    {/* Table Header */}
                     <div className="grid grid-cols-12 gap-4 p-4 bg-gray-50 border-b text-sm font-medium text-gray-600">
                       <div className="col-span-3">Patient</div>
                       <div className="col-span-2">DOB / Gender</div>
@@ -188,33 +275,30 @@ export default function DocumentsPage() {
                       <div className="col-span-1">Actions</div>
                     </div>
 
-                    {/* Table Rows */}
-                    {currentPatients.length === 0 ? (
-                      <div className="text-center py-8 text-gray-500">
-                        {searchTerm ? "No patients found matching your search." : "No patients available."}
-                      </div>
-                    ) : (
-                      currentPatients.map((patient) => (
-                        <div 
-                          key={patient.id} 
-                          className="grid grid-cols-12 gap-4 p-4 border-b hover:bg-gray-50 transition-colors"
+                    {currentPdfs.map((pdf) => {
+                      const patient = pdf.patient;
+                      return (
+                        <div
+                          key={pdf.id}
+                          className="grid grid-cols-12 gap-4 p-4 border-b hover:bg-gray-50"
                         >
-                          {/* Patient Info */}
                           <div className="col-span-3 flex items-center space-x-3">
                             <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-sm font-medium text-gray-600">
-                              {getPatientInitials(patient.firstName, patient.lastName)}
+                              {getPatientInitials(
+                                patient.firstName,
+                                patient.lastName
+                              )}
                             </div>
                             <div>
                               <div className="font-medium text-gray-900">
                                 {patient.firstName} {patient.lastName}
                               </div>
                               <div className="text-sm text-gray-500">
-                                PID-{patient.id.toString().padStart(4, '0')}
+                                PID-{patient.id.toString().padStart(4, "0")}
                               </div>
                             </div>
                           </div>
 
-                          {/* DOB / Gender */}
                           <div className="col-span-2">
                             <div className="text-sm text-gray-900">
                               {formatDate(patient.dateOfBirth)}
@@ -224,78 +308,141 @@ export default function DocumentsPage() {
                             </div>
                           </div>
 
-                          {/* Contact */}
                           <div className="col-span-2">
                             <div className="text-sm text-gray-900">
-                              {patient.phone || 'Not provided'}
+                              {patient.phone || "Not provided"}
                             </div>
                             <div className="text-sm text-gray-500">
-                              {patient.email || 'No email'}
+                              {patient.email || "No email"}
                             </div>
                           </div>
 
-                          {/* Insurance */}
                           <div className="col-span-2">
                             <div className="text-sm text-gray-900">
-                              {patient.insuranceProvider ? 
-                                `${patient.insuranceProvider.charAt(0).toUpperCase()}${patient.insuranceProvider.slice(1)}` : 
-                                'Not specified'
-                              }
+                              {patient.insuranceProvider
+                                ? `${patient.insuranceProvider.charAt(0).toUpperCase()}${patient.insuranceProvider.slice(1)}`
+                                : "Not specified"}
                             </div>
                             <div className="text-sm text-gray-500">
-                              ID: {patient.insuranceId || 'N/A'}
+                              ID: {patient.insuranceId || "N/A"}
                             </div>
                           </div>
 
-                          {/* Status */}
                           <div className="col-span-2">
-                            <span className={cn(
-                              "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
-                              patient.status === 'active' 
-                                ? "bg-green-100 text-green-800" 
-                                : "bg-gray-100 text-gray-800"
-                            )}>
-                              {patient.status === 'active' ? 'Active' : 'Inactive'}
+                            <span
+                              className={cn(
+                                "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
+                                patient.status === "active"
+                                  ? "bg-green-100 text-green-800"
+                                  : "bg-gray-100 text-gray-800"
+                              )}
+                            >
+                              {patient.status === "active"
+                                ? "Active"
+                                : "Inactive"}
                             </span>
                           </div>
 
-                          {/* Actions */}
                           <div className="col-span-1">
                             <div className="flex space-x-1">
-                              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                                <Edit className="h-4 w-4 text-blue-600" />
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-8 w-8 p-0"
+                                onClick={() => handleDeletePdf(pdf)}
+                              >
+                                <Trash className="h-4 w-4 text-red-600" />
                               </Button>
-                              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-8 w-8 p-0"
+                                onClick={() =>
+                                  downloadPdf(pdf.id, pdf.filename)
+                                }
+                              >
+                                <Download className="h-4 w-4 text-blue-600" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-8 w-8 p-0"
+                                onClick={() => viewPdf(pdf.id)}
+                              >
                                 <Eye className="h-4 w-4 text-gray-600" />
                               </Button>
                             </div>
                           </div>
                         </div>
-                      ))
+                      );
+                    })}
+
+                    <DeleteConfirmationDialog
+                      isOpen={isDeletePdfOpen}
+                      onConfirm={handleConfirmDeletePdf}
+                      onCancel={() => setIsDeletePdfOpen(false)}
+                      entityName={`PDF #${currentPdf?.id}`}
+                    />
+
+                    {/* PDF Viewer */}
+                    {selectedPdfId && fileBlobUrl && (
+                      <div className="mt-6 border rounded-lg shadow-sm p-4 bg-white">
+                        <div className="flex justify-between items-center mb-4">
+                          <h2 className="text-lg font-semibold text-gray-700">
+                            Viewing PDF #{selectedPdfId}
+                          </h2>
+                          <Button
+                            variant="ghost"
+                            onClick={() => {
+                              setSelectedPdfId(null);
+                              setFileBlobUrl(null);
+                            }}
+                          >
+                            Close
+                          </Button>
+                        </div>
+                        <div className="h-[80vh] border">
+                          <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
+                            <Viewer
+                              fileUrl={fileBlobUrl}
+                              plugins={[defaultLayoutPluginInstance]}
+                            />
+                          </Worker>
+                        </div>
+                      </div>
                     )}
 
                     {/* Pagination */}
                     {totalPages > 1 && (
                       <div className="flex items-center justify-between p-4 border-t bg-gray-50">
                         <div className="text-sm text-gray-700">
-                          Showing {startIndex + 1} to {Math.min(endIndex, filteredPatients.length)} of {filteredPatients.length} results
+                          Showing {startIndex + 1} to{" "}
+                          {Math.min(
+                            startIndex + itemsPerPage,
+                            filteredPdfs.length
+                          )}{" "}
+                          of {filteredPdfs.length} results
                         </div>
                         <div className="flex items-center space-x-2">
                           <Button
                             variant="outline"
                             size="sm"
-                            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+                            onClick={() => setCurrentPage(currentPage - 1)}
                             disabled={currentPage === 1}
                           >
                             <ChevronLeft className="h-4 w-4 mr-1" />
                             Previous
                           </Button>
-                          
-                          {/* Page Numbers */}
-                          {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                          {Array.from(
+                            { length: totalPages },
+                            (_, i) => i + 1
+                          ).map((page) => (
                             <Button
                               key={page}
-                              variant={currentPage === page ? "default" : "outline"}
+                              variant={
+                                currentPage === page ? "default" : "outline"
+                              }
                               size="sm"
                               onClick={() => setCurrentPage(page)}
                               className="w-8 h-8 p-0"
@@ -303,11 +450,10 @@ export default function DocumentsPage() {
                               {page}
                             </Button>
                           ))}
-                          
                           <Button
                             variant="outline"
                             size="sm"
-                            onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+                            onClick={() => setCurrentPage(currentPage + 1)}
                             disabled={currentPage === totalPages}
                           >
                             Next
@@ -325,4 +471,4 @@ export default function DocumentsPage() {
       </div>
     </div>
   );
-}
+}