ui fixed

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

@@ -353,9 +353,9 @@ export default function ClaimsPage() {
     const patientAppointments = appointments
       .filter((a) => a.patientId === patient.id)
       .sort(
-  (a, b) =>
-    parseLocalDate(b.date).getTime() - parseLocalDate(a.date).getTime()
-);
+        (a, b) =>
+          parseLocalDate(b.date).getTime() - parseLocalDate(a.date).getTime()
+      );
 
     const lastAppointment = patientAppointments[0]; // most recent
 
@@ -366,7 +366,7 @@ export default function ClaimsPage() {
     setClaimFormData((prev: any) => ({
       ...prev,
       patientId: patient.id,
-      serviceDate: formatLocalDate(dateToUse)
+      serviceDate: formatLocalDate(dateToUse),
     }));
   };
 
@@ -386,7 +386,7 @@ export default function ClaimsPage() {
         const lastName = rest.join(" ") || "";
 
         const parsedDob = parse(dob, "M/d/yyyy", new Date()); // robust for "4/17/1964", "12/1/1975", etc.
-        
+
         const newPatient: InsertPatient = {
           firstName,
           lastName,
@@ -425,8 +425,8 @@ export default function ClaimsPage() {
       const patientAppointments = appointments
         .filter((appt) => appt.patientId === patient.id)
         .sort(
-  (a, b) =>
-    parseLocalDate(b.date).getTime() - parseLocalDate(a.date).getTime()
+          (a, b) =>
+            parseLocalDate(b.date).getTime() - parseLocalDate(a.date).getTime()
         ); // Sort descending by date
 
       if (patientAppointments.length > 0) {
@@ -437,7 +437,9 @@ export default function ClaimsPage() {
           appointmentId: latestAppointment!.id,
           insuranceProvider: patient.insuranceProvider || "N/A",
           insuranceId: patient.insuranceId || "N/A",
-          lastAppointment: formatLocalDate(parseLocalDate(latestAppointment!.date)),
+          lastAppointment: formatLocalDate(
+            parseLocalDate(latestAppointment!.date)
+          ),
         });
       }
 
@@ -591,6 +593,7 @@ export default function ClaimsPage() {
 
       <div className="flex-1 flex flex-col overflow-hidden">
         <TopAppBar toggleMobileMenu={toggleMobileMenu} />
+
         <SeleniumTaskBanner
           status={status}
           message={message}
@@ -599,18 +602,21 @@ export default function ClaimsPage() {
         />
 
         <main className="flex-1 overflow-y-auto p-4">
-          {/* Header */}
-          <div className="mb-6">
-            <h1 className="text-2xl font-semibold text-gray-800">
-              Insurance Claims
-            </h1>
-            <p className="text-gray-600">
-              Manage and submit insurance claims for patients
-            </p>
+          <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>
 
           {/* New Claims Section */}
-          <div className="mb-8">
+          <div className="mb-8 mt-8">
             <div className="flex items-center justify-between mb-4">
               <div
                 className="flex items-center cursor-pointer group"

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

@@ -130,7 +130,7 @@ export default function DocumentsPage() {
   };
 
   return (
-    <div className="flex h-screen bg-gray-100">
+    <div className="flex h-screen overflow-hidden bg-gray-100">
       <Sidebar
         isMobileOpen={isMobileMenuOpen}
         setIsMobileOpen={setIsMobileMenuOpen}
@@ -139,15 +139,15 @@ export default function DocumentsPage() {
       <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 space-y-6">
-            <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 recent uploaded claim PDFs
-              </p>
+        <main className="flex-1 overflow-y-auto p-4">
+          <div className="container mx-auto space-y-6">
+            <div className="flex justify-between items-center">
+              <div>
+                <h1 className="text-3xl font-bold tracking-tight">Documents</h1>
+                <p className="text-muted-foreground">
+                  View and manage recent uploaded claim PDFs
+                </p>
+              </div>
             </div>
 
             {selectedPatient && (

apps/Frontend/src/pages/insurance-eligibility-page.tsx

@@ -234,7 +234,7 @@ export default function InsuranceEligibilityPage() {
   };
 
   return (
-    <div className="flex h-screen bg-gray-50">
+    <div className="flex h-screen overflow-hidden bg-gray-100">
       <Sidebar
         isMobileOpen={isMobileMenuOpen}
         setIsMobileOpen={setIsMobileMenuOpen}
@@ -250,16 +250,17 @@ export default function InsuranceEligibilityPage() {
           onClear={() => dispatch(clearTaskStatus())}
         />
 
-        <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">
-                Insurance Eligibility
-              </h1>
-              <p className="text-gray-600">
-                Check insurance eligibility and view patient information
-              </p>
+        <main className="flex-1 overflow-y-auto p-4">
+          <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 Eligibility
+                </h1>
+                <p className="text-muted-foreground">
+                  Check insurance eligibility and view patient information
+                </p>
+              </div>
             </div>
 
             {/* Insurance Eligibility Check Form */}

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

@@ -142,17 +142,23 @@ export default function PaymentsPage() {
 
   return (
     <div className="flex h-screen overflow-hidden bg-gray-100">
-      <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-y-auto p-4">
-          {/* Header */}
-          <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
-            <div>
-              <h1 className="text-2xl font-semibold text-gray-800">Payments</h1>
-              <p className="text-gray-600">Manage patient payments and outstanding balances</p>
+          <div className="container mx-auto space-y-6">
+            <div className="flex justify-between items-center">
+              <div>
+                <h1 className="text-3xl font-bold tracking-tight">Payments</h1>
+                <p className="text-muted-foreground">
+                  Manage patient payments and outstanding balances
+                </p>
+              </div>
             </div>
             
             <div className="mt-4 md:mt-0 flex items-center space-x-2">