);
}
diff --git a/apps/Frontend/src/pages/preauthorizations-page.tsx b/apps/Frontend/src/pages/preauthorizations-page.tsx
index 84f3d2e..4fc4779 100644
--- a/apps/Frontend/src/pages/preauthorizations-page.tsx
+++ b/apps/Frontend/src/pages/preauthorizations-page.tsx
@@ -1,7 +1,5 @@
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
-import { TopAppBar } from "@/components/layout/top-app-bar";
-import { Sidebar } from "@/components/layout/sidebar";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useToast } from "@/hooks/use-toast";
@@ -104,13 +102,7 @@ export default function PreAuthorizationsPage() {
];
return (
-
-
-
-
-
-
-
+
{/* Header */}
Pre-authorizations
@@ -342,8 +334,6 @@ export default function PreAuthorizationsPage() {
-
-
);
}
\ No newline at end of file
diff --git a/apps/Frontend/src/pages/reports-page.tsx b/apps/Frontend/src/pages/reports-page.tsx
new file mode 100644
index 0000000..d4189d4
--- /dev/null
+++ b/apps/Frontend/src/pages/reports-page.tsx
@@ -0,0 +1,304 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+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,
+ ChevronRight,
+ Settings,
+} from "lucide-react";
+import { useAuth } from "@/hooks/use-auth";
+import { cn } from "@/lib/utils";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Patient } from "@repo/db/types";
+import { formatDateToHumanReadable } from "@/utils/dateUtils";
+
+export default function ReportsPage() {
+ const { user } = useAuth();
+ const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [searchField, setSearchField] = useState("all");
+ const [currentPage, setCurrentPage] = useState(1);
+ const itemsPerPage = 5;
+
+ // Fetch patients
+ const { data: patients = [], isLoading: isLoadingPatients } = useQuery<
+ Patient[]
+ >({
+ queryKey: ["/api/patients"],
+ enabled: !!user,
+ });
+
+ // Filter patients based on search
+ const filteredPatients = patients.filter((patient) => {
+ if (!searchTerm) return true;
+
+ const searchLower = searchTerm.toLowerCase();
+ const fullName = `${patient.firstName} ${patient.lastName}`.toLowerCase();
+ const patientId = `PID-${patient?.id?.toString().padStart(4, "0")}`;
+
+ switch (searchField) {
+ case "name":
+ return fullName.includes(searchLower);
+ case "id":
+ return patientId.toLowerCase().includes(searchLower);
+ case "phone":
+ return patient.phone?.toLowerCase().includes(searchLower) || false;
+ case "all":
+ default:
+ return (
+ fullName.includes(searchLower) ||
+ patientId.toLowerCase().includes(searchLower) ||
+ patient.phone?.toLowerCase().includes(searchLower) ||
+ patient.email?.toLowerCase().includes(searchLower) ||
+ false
+ );
+ }
+ });
+
+ // Pagination
+ const totalPages = Math.ceil(filteredPatients.length / itemsPerPage);
+ const startIndex = (currentPage - 1) * itemsPerPage;
+ const endIndex = startIndex + itemsPerPage;
+ const currentPatients = filteredPatients.slice(startIndex, endIndex);
+
+ const toggleMobileMenu = () => {
+ setIsMobileMenuOpen(!isMobileMenuOpen);
+ };
+
+ const getPatientInitials = (firstName: string, lastName: string) => {
+ return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+ };
+
+ return (
+
+
+ {/* Header */}
+
+
Reports
+
+ View and manage all patient information
+
+
+
+ {/* Search and Filters */}
+
+
+
+
+
+ setSearchTerm(e.target.value)}
+ className="pl-10"
+ />
+
+
+
+
+
+
+
+ {/* Patient List */}
+
+
+ {isLoadingPatients ? (
+ Loading patients...
+ ) : (
+ <>
+ {/* Table Header */}
+
+
Patient
+
DOB / Gender
+
Contact
+
Insurance
+
Status
+
Actions
+
+ {searchTerm
+ ? "No patients found matching your search."
+ : "No patients available."}
+
+ ) : (
+ currentPatients.map((patient) => (
+
+ {/* Patient Info */}
+
+
+ {getPatientInitials(
+ patient.firstName,
+ patient.lastName
+ )}
+
+
+
+ {patient.firstName} {patient.lastName}
+
+
+ PID-{patient.id?.toString().padStart(4, "0")}
+
+
+
+
+ {/* DOB / Gender */}
+
+
+ {formatDateToHumanReadable(patient.dateOfBirth)}
+
+
+ {patient.gender}
+
+
+
+ {/* Contact */}
+
+
+ {patient.phone || "Not provided"}
+
+
+ {patient.email || "No email"}
+
+
+
+ {/* Insurance */}
+
+
+ {patient.insuranceProvider
+ ? `${patient.insuranceProvider.charAt(0).toUpperCase()}${patient.insuranceProvider.slice(1)}`
+ : "Not specified"}
+
+
+ ID: {patient.insuranceId || "N/A"}
+
+
+
+ {/* Status */}
+
+
+ {patient.status === "active" ? "Active" : "Inactive"}
+
+
+
+ {/* Actions */}
+
+
+
+ Showing {startIndex + 1} to{" "}
+ {Math.min(endIndex, filteredPatients.length)} of{" "}
+ {filteredPatients.length} results
+
+
+
+
+ {/* Page Numbers */}
+ {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+ (page) => (
+
+ )
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/apps/Frontend/src/pages/settings-page.tsx b/apps/Frontend/src/pages/settings-page.tsx
index 806afd6..066fac7 100644
--- a/apps/Frontend/src/pages/settings-page.tsx
+++ b/apps/Frontend/src/pages/settings-page.tsx
@@ -1,7 +1,5 @@
import React, { useState, useEffect } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
-import { TopAppBar } from "@/components/layout/top-app-bar";
-import { Sidebar } from "@/components/layout/sidebar";
import { StaffTable } from "@/components/staffs/staff-table";
import { useToast } from "@/hooks/use-toast";
import { Card, CardContent } from "@/components/ui/card";
@@ -259,14 +257,7 @@ export default function SettingsPage() {
});
return (
-
-
-
-
-
+
@@ -371,8 +362,6 @@ export default function SettingsPage() {
-
-
);
}