feat: add Check Payments Online section and multi-select checkboxes on payments page

- Added Check Payments Online card above Payment's Records with From/To date pickers and Check All MH Payment button (logic TBD)
- Added multi-select checkboxes to each payment record row with select-all header checkbox
- When records are checked, a Check MH Payment action bar appears with count and clear option (logic TBD)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -6,7 +6,8 @@ import {
   CardContent,
   CardDescription,
 } from "@/components/ui/card";
-import { DollarSign } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { DollarSign, CalendarIcon } from "lucide-react";
 import {
   Select,
   SelectContent,
@@ -14,6 +15,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
 import PaymentsRecentTable from "@/components/payments/payments-recent-table";
 import PaymentsOfPatientModal from "@/components/payments/payments-of-patient-table";
 import PaymentOCRBlock from "@/components/payments/payment-ocr-block";
@@ -26,6 +33,12 @@ import PaymentEditModal from "@/components/payments/payment-edit-modal";
 export default function PaymentsPage() {
   const [paymentPeriod, setPaymentPeriod] = useState<string>("all-time");
 
+  // Check Payments Online date range
+  const [mhFromDate, setMhFromDate] = useState<Date | undefined>(undefined);
+  const [mhToDate, setMhToDate] = useState<Date | undefined>(undefined);
+  const [fromCalendarOpen, setFromCalendarOpen] = useState(false);
+  const [toCalendarOpen, setToCalendarOpen] = useState(false);
+
   // for auto-open from appointment redirect
   const [location] = useLocation();
   const [initialPatientForModal, setInitialPatientForModal] =
@@ -212,6 +225,87 @@ export default function PaymentsPage() {
         </Card>
       </div>
 
+      {/* Check Payments Online */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>Check Payments Online</CardTitle>
+          <CardDescription>
+            Select a date range and check MH payment status online
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap items-center gap-4">
+            {/* From date picker */}
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-gray-600 whitespace-nowrap">From:</span>
+              <Popover open={fromCalendarOpen} onOpenChange={setFromCalendarOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    className="w-[160px] justify-start text-left font-normal"
+                  >
+                    <CalendarIcon className="mr-2 h-4 w-4 text-gray-400" />
+                    {mhFromDate
+                      ? mhFromDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+                      : <span className="text-muted-foreground">Pick a date</span>}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={mhFromDate}
+                    onSelect={(d) => {
+                      setMhFromDate(d);
+                      setFromCalendarOpen(false);
+                    }}
+                    onClose={() => setFromCalendarOpen(false)}
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            {/* To date picker */}
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-gray-600 whitespace-nowrap">To:</span>
+              <Popover open={toCalendarOpen} onOpenChange={setToCalendarOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    className="w-[160px] justify-start text-left font-normal"
+                  >
+                    <CalendarIcon className="mr-2 h-4 w-4 text-gray-400" />
+                    {mhToDate
+                      ? mhToDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+                      : <span className="text-muted-foreground">Pick a date</span>}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={mhToDate}
+                    onSelect={(d) => {
+                      setMhToDate(d);
+                      setToCalendarOpen(false);
+                    }}
+                    onClose={() => setToCalendarOpen(false)}
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            {/* Check All MH Payment button */}
+            <Button
+              variant="default"
+              onClick={() => {
+                // Logic to be defined later
+              }}
+            >
+              Check All MH Payment
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
       {/* Recent Payments table  */}
       <Card>
         <CardHeader>
@@ -221,7 +315,7 @@ export default function PaymentsPage() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <PaymentsRecentTable allowEdit allowDelete />
+          <PaymentsRecentTable allowEdit allowDelete allowCheckbox />
         </CardContent>
       </Card>