ui fixed

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

@@ -355,7 +355,7 @@ export default function ClaimsPage() {
       .sort(
         (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),
     }));
   };
 
@@ -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">
+          <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-gray-600">
+                <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,16 +139,16 @@ 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">
+        <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 && (
               <Card>

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,17 +250,18 @@ 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">
+        <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-gray-600">
+                <p className="text-muted-foreground">
                   Check insurance eligibility and view patient information
                 </p>
               </div>
+            </div>
 
             {/* Insurance Eligibility Check Form */}
             <Card className="mb-6">

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 className="container mx-auto space-y-6">
+            <div className="flex justify-between items-center">
               <div>
-              <h1 className="text-2xl font-semibold text-gray-800">Payments</h1>
-              <p className="text-gray-600">Manage patient payments and outstanding balances</p>
+                <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">