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>
This commit is contained in:
Gitead
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user