fix(eligibility page) - UI fixed, txReport pdf added

apps/Frontend/src/App.tsx

@@ -17,8 +17,8 @@ const PatientsPage = lazy(() => import("./pages/patients-page"));
 const SettingsPage = lazy(() => import("./pages/settings-page"));
 const ClaimsPage = lazy(() => import("./pages/claims-page"));
 const PaymentsPage = lazy(() => import("./pages/payments-page"));
-const InsuranceEligibilityPage = lazy(
-  () => import("./pages/insurance-eligibility-page")
+const EligibilityClaimStatusPage = lazy(
+  () => import("./pages/eligibility-claim-status-page")
 );
 const DocumentPage = lazy(() => import("./pages/documents-page"));
 const DatabaseManagementPage = lazy(
@@ -41,8 +41,8 @@ function Router() {
       <ProtectedRoute path="/settings" component={() => <SettingsPage />} />
       <ProtectedRoute path="/claims" component={() => <ClaimsPage />} />
       <ProtectedRoute
-        path="/insurance-eligibility"
-        component={() => <InsuranceEligibilityPage />}
+        path="/eligibility-claim-status"
+        component={() => <EligibilityClaimStatusPage />}
       />
       <ProtectedRoute path="/payments" component={() => <PaymentsPage />} />
       <ProtectedRoute path="/documents" component={() => <DocumentPage />} />

apps/Frontend/src/components/layout/sidebar.tsx

@@ -37,8 +37,8 @@ export function Sidebar() {
         icon: <Users className="h-5 w-5" />,
       },
       {
-        name: "Insurance Eligibility",
-        path: "/insurance-eligibility",
+        name: "Eligibility/Claim Status",
+        path: "/eligibility-claim-status",
         icon: <Shield className="h-5 w-5" />,
       },
       {

apps/Frontend/src/components/ui/dateInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { format } from "date-fns";
 import { Calendar } from "@/components/ui/calendar";
 import {
@@ -21,7 +21,6 @@ interface DateInputProps {
 
 // THIS COMPONENT IS MADE FOR GENERAL FIELD IN PAGE.
 // Here, User can input/paste date in certain format, and also select via calendar
-
 export function DateInput({
   label,
   value,
@@ -32,6 +31,19 @@ export function DateInput({
   const [inputValue, setInputValue] = useState(
     value ? format(value, "MM/dd/yyyy") : ""
   );
+  const [open, setOpen] = useState(false);
+
+  // Keep inputValue in sync when parent 'value' changes.
+  // Only overwrite if different to avoid stomping an in-progress user edit.
+  useEffect(() => {
+    if (value) {
+      const formatted = format(value, "MM/dd/yyyy");
+      setInputValue((prev) => (prev !== formatted ? formatted : prev));
+    } else {
+      // parent cleared the value
+      setInputValue("");
+    }
+  }, [value]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let val = e.target.value.replace(/\D/g, "");
@@ -62,7 +74,7 @@ export function DateInput({
           value={inputValue}
           onChange={handleInputChange}
         />
-        <Popover>
+        <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
             <Button type="button" variant="outline" className={cn("px-3")}>
               <CalendarIcon className="h-4 w-4 opacity-70" />
@@ -77,6 +89,7 @@ export function DateInput({
                 if (date) {
                   setInputValue(format(date, "MM/dd/yyyy"));
                   onChange(date);
+                  setOpen(false);
                 }
               }}
               disabled={

apps/Frontend/src/pages/eligibility-claim-status-page.tsx

@@ -26,7 +26,7 @@ import { InsertPatient, Patient } from "@repo/db/types";
 import { DateInput } from "@/components/ui/dateInput";
 import { QK_PATIENTS_BASE } from "@/components/patients/patient-table";
 
-export default function InsuranceEligibilityPage() {
+export default function EligibilityClaimStatusPage() {
   const { user } = useAuth();
   const { toast } = useToast();
   const dispatch = useAppDispatch();
@@ -34,15 +34,6 @@ export default function InsuranceEligibilityPage() {
     (state) => state.seleniumEligibilityCheckTask
   );
   const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null);
-  const [currentTablePage, setCurrentTablePage] = useState<number | null>(null);
-  const [currentTableSearchTerm, setCurrentTableSearchTerm] = useState<
-    string | null
-  >(null);
-
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const toggleMobileMenu = () => {
-    setIsMobileMenuOpen(!isMobileMenuOpen);
-  };
 
   // Insurance eligibility check form fields
   const [memberId, setMemberId] = useState("");
@@ -213,10 +204,10 @@ export default function InsuranceEligibilityPage() {
         <div className="flex justify-between items-center">
           <div>
             <h1 className="text-3xl font-bold tracking-tight">
-              Insurance Eligibility
+              Insurance Eligibility and Claim Status
             </h1>
             <p className="text-muted-foreground">
-              Check insurance eligibility and view patient information
+              Check insurance eligibility and Claim status.
             </p>
           </div>
         </div>
@@ -224,7 +215,7 @@ export default function InsuranceEligibilityPage() {
         {/* Insurance Eligibility Check Form */}
         <Card className="mb-6">
           <CardHeader>
-            <CardTitle>Check Insurance Eligibility</CardTitle>
+            <CardTitle>Check Insurance Eligibility and Claim Status</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="grid grid-cols-4 md:grid-cols-4 gap-4 mb-4">
@@ -281,7 +272,7 @@ export default function InsuranceEligibilityPage() {
                 ) : (
                   <>
                     <CheckCircle className="h-4 w-4 mr-2" />
-                    MH
+                    MH Eligibility
                   </>
                 )}
               </Button>
@@ -304,8 +295,6 @@ export default function InsuranceEligibilityPage() {
               allowCheckbox={true}
               allowEdit={true}
               onSelectPatient={setSelectedPatient}
-              onPageChange={setCurrentTablePage}
-              onSearchChange={setCurrentTableSearchTerm}
             />
           </CardContent>
         </Card>