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/components/payments/payments-recent-table.tsx

@@ -96,9 +96,8 @@ export default function PaymentsRecentTable({
   const [currentPayment, setCurrentPayment] = useState<
     PaymentWithExtras | undefined
   >(undefined);
-  const [selectedPaymentId, setSelectedPaymentId] = useState<number | null>(
-    null
-  );
+  const [selectedPaymentId, setSelectedPaymentId] = useState<number | null>(null);
+  const [checkedPaymentIds, setCheckedPaymentIds] = useState<Set<number>>(new Set());
 
   const [isRevertOpen, setIsRevertOpen] = useState(false);
   const [revertPaymentId, setRevertPaymentId] = useState<number | null>(null);
@@ -112,6 +111,18 @@ export default function PaymentsRecentTable({
     }
   };
 
+  const handleToggleCheck = (paymentId: number) => {
+    setCheckedPaymentIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(paymentId)) {
+        next.delete(paymentId);
+      } else {
+        next.add(paymentId);
+      }
+      return next;
+    });
+  };
+
   const queryKey = qkPaymentsRecent({
     patientId: patientId ?? undefined,
     page: currentPage,
@@ -138,6 +149,25 @@ export default function PaymentsRecentTable({
     placeholderData: { payments: [], totalCount: 0 },
   });
 
+  const currentPageIds = (paymentsData?.payments ?? []).map((p) => p.id);
+  const allOnPageChecked =
+    currentPageIds.length > 0 &&
+    currentPageIds.every((id) => checkedPaymentIds.has(id));
+  const someOnPageChecked =
+    !allOnPageChecked && currentPageIds.some((id) => checkedPaymentIds.has(id));
+
+  const handleToggleAll = () => {
+    setCheckedPaymentIds((prev) => {
+      const next = new Set(prev);
+      if (allOnPageChecked) {
+        currentPageIds.forEach((id) => next.delete(id));
+      } else {
+        currentPageIds.forEach((id) => next.add(id));
+      }
+      return next;
+    });
+  };
+
   const updatePaymentMutation = useMutation({
     mutationFn: async (data: NewTransactionPayload) => {
       const response = await apiRequest(
@@ -478,11 +508,46 @@ export default function PaymentsRecentTable({
 
   return (
     <div className="bg-white shadow rounded-lg overflow-hidden">
+      {/* Check MH Payment action bar */}
+      {allowCheckbox && checkedPaymentIds.size > 0 && (
+        <div className="flex items-center gap-3 px-4 py-2 bg-blue-50 border-b border-blue-200">
+          <span className="text-sm text-blue-700 font-medium">
+            {checkedPaymentIds.size} record{checkedPaymentIds.size > 1 ? "s" : ""} selected
+          </span>
+          <Button
+            size="sm"
+            variant="default"
+            onClick={() => {
+              // Logic to be defined later
+            }}
+          >
+            Check MH Payment
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="text-blue-600"
+            onClick={() => setCheckedPaymentIds(new Set())}
+          >
+            Clear
+          </Button>
+        </div>
+      )}
+
       <div className="overflow-x-auto">
         <Table>
           <TableHeader>
             <TableRow>
-              {allowCheckbox && <TableHead>Select</TableHead>}
+              {allowCheckbox && (
+                <TableHead className="w-10">
+                  <Checkbox
+                    checked={allOnPageChecked}
+                    data-state={someOnPageChecked ? "indeterminate" : undefined}
+                    onCheckedChange={handleToggleAll}
+                    aria-label="Select all on page"
+                  />
+                </TableHead>
+              )}
               <TableHead>Payment ID</TableHead>
               <TableHead>Claim ID</TableHead>
               <TableHead>Patient Name</TableHead>
@@ -538,10 +603,11 @@ export default function PaymentsRecentTable({
                 return (
                   <TableRow key={payment.id}>
                     {allowCheckbox && (
-                      <TableCell>
+                      <TableCell className="w-10">
                         <Checkbox
-                          checked={selectedPaymentId === payment.id}
-                          onCheckedChange={() => handleSelectPayment(payment)}
+                          checked={checkedPaymentIds.has(payment.id)}
+                          onCheckedChange={() => handleToggleCheck(payment.id)}
+                          aria-label={`Select payment ${payment.id}`}
                         />
                       </TableCell>
                     )}