ui and minor changes for payment page
This commit is contained in:
@@ -1,32 +1,32 @@
|
||||
import express from 'express';
|
||||
import express from "express";
|
||||
import cors from "cors";
|
||||
import routes from './routes';
|
||||
import { errorHandler } from './middlewares/error.middleware';
|
||||
import { apiLogger } from './middlewares/logger.middleware';
|
||||
import authRoutes from './routes/auth'
|
||||
import { authenticateJWT } from './middlewares/auth.middleware';
|
||||
import dotenv from 'dotenv';
|
||||
import routes from "./routes";
|
||||
import { errorHandler } from "./middlewares/error.middleware";
|
||||
import { apiLogger } from "./middlewares/logger.middleware";
|
||||
import authRoutes from "./routes/auth";
|
||||
import { authenticateJWT } from "./middlewares/auth.middleware";
|
||||
import dotenv from "dotenv";
|
||||
|
||||
dotenv.config();
|
||||
const FRONTEND_URL = process.env.FRONTEND_URL;
|
||||
|
||||
|
||||
const app = express();
|
||||
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: true })); // For form data
|
||||
app.use(apiLogger);
|
||||
|
||||
app.use(cors({
|
||||
origin: FRONTEND_URL,
|
||||
methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
|
||||
allowedHeaders: ['Content-Type', 'Authorization'],
|
||||
credentials: true,
|
||||
}));
|
||||
app.use(
|
||||
cors({
|
||||
origin: FRONTEND_URL,
|
||||
methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
|
||||
allowedHeaders: ["Content-Type", "Authorization"],
|
||||
credentials: true,
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
app.use('/api/auth', authRoutes);
|
||||
app.use('/api', authenticateJWT, routes);
|
||||
app.use("/api/auth", authRoutes);
|
||||
app.use("/api", authenticateJWT, routes);
|
||||
|
||||
app.use(errorHandler);
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ import { forwardToSeleniumClaimAgent } from "../services/seleniumClaimClient";
|
||||
import path from "path";
|
||||
import axios from "axios";
|
||||
import { Prisma } from "@repo/db/generated/prisma";
|
||||
import { Decimal } from "@prisma/client/runtime/library";
|
||||
import { Decimal } from "decimal.js";
|
||||
import {
|
||||
ExtendedClaimSchema,
|
||||
InputServiceLine,
|
||||
@@ -255,8 +255,9 @@ router.post("/", async (req: Request, res: Response): Promise<any> => {
|
||||
(line: InputServiceLine) => ({
|
||||
...line,
|
||||
totalBilled: Number(line.totalBilled),
|
||||
totalAdjusted: Number(line.totalAdjusted),
|
||||
totalPaid: Number(line.totalPaid),
|
||||
totalAdjusted: 0,
|
||||
totalPaid: 0,
|
||||
totalDue: Number(line.totalBilled),
|
||||
})
|
||||
);
|
||||
req.body.serviceLines = { create: req.body.serviceLines };
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
} from "@repo/db/types";
|
||||
import Decimal from "decimal.js";
|
||||
import { prisma } from "@repo/db/client";
|
||||
import { PaymentStatusSchema } from "@repo/db/types";
|
||||
|
||||
const paymentFilterSchema = z.object({
|
||||
from: z.string().datetime(),
|
||||
@@ -74,8 +75,8 @@ router.get(
|
||||
const parsedClaimId = parseIntOrError(req.params.claimId, "Claim ID");
|
||||
|
||||
const payments = await storage.getPaymentsByClaimId(
|
||||
userId,
|
||||
parsedClaimId
|
||||
parsedClaimId,
|
||||
userId
|
||||
);
|
||||
if (!payments)
|
||||
return res.status(404).json({ message: "No payments found for claim" });
|
||||
@@ -102,8 +103,8 @@ router.get(
|
||||
);
|
||||
|
||||
const payments = await storage.getPaymentsByPatientId(
|
||||
userId,
|
||||
parsedPatientId
|
||||
parsedPatientId,
|
||||
userId
|
||||
);
|
||||
|
||||
if (!payments)
|
||||
@@ -152,7 +153,7 @@ router.get("/:id", async (req: Request, res: Response): Promise<any> => {
|
||||
|
||||
const id = parseIntOrError(req.params.id, "Payment ID");
|
||||
|
||||
const payment = await storage.getPaymentById(userId, id);
|
||||
const payment = await storage.getPaymentById(id, userId);
|
||||
if (!payment) return res.status(404).json({ message: "Payment not found" });
|
||||
|
||||
res.status(200).json(payment);
|
||||
@@ -309,6 +310,34 @@ router.put("/:id", async (req: Request, res: Response): Promise<any> => {
|
||||
}
|
||||
});
|
||||
|
||||
// PATCH /api/payments/:id/status
|
||||
router.patch(
|
||||
"/:id/status",
|
||||
async (req: Request, res: Response): Promise<any> => {
|
||||
try {
|
||||
const userId = req.user?.id;
|
||||
if (!userId) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
|
||||
const paymentId = parseIntOrError(req.params.id, "Payment ID");
|
||||
|
||||
const status = PaymentStatusSchema.parse(req.body.data.status);
|
||||
|
||||
const updatedPayment = await prisma.payment.update({
|
||||
where: { id: paymentId },
|
||||
data: { status, updatedById: userId },
|
||||
});
|
||||
|
||||
res.json(updatedPayment);
|
||||
} catch (err: unknown) {
|
||||
const message =
|
||||
err instanceof Error ? err.message : "Failed to update payment status";
|
||||
res.status(500).json({ message });
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// DELETE /api/payments/:id
|
||||
router.delete("/:id", async (req: Request, res: Response): Promise<any> => {
|
||||
try {
|
||||
|
||||
@@ -364,7 +364,7 @@ export default function ClaimsRecentTable({
|
||||
)}
|
||||
<TableCell>
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
CML-{claim.id!.toString().padStart(4, "0")}
|
||||
CLM-{claim.id!.toString().padStart(4, "0")}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
|
||||
@@ -29,12 +29,16 @@ import {
|
||||
} from "@/components/ui/select";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
type PaymentEditModalProps = {
|
||||
isOpen: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onClose: () => void;
|
||||
onEditServiceLine: (payload: NewTransactionPayload) => void;
|
||||
isUpdatingServiceLine?: boolean;
|
||||
onUpdateStatus: (paymentId: number, status: PaymentStatus) => void;
|
||||
isUpdatingStatus?: boolean;
|
||||
payment: PaymentWithExtras | null;
|
||||
};
|
||||
|
||||
@@ -44,9 +48,12 @@ export default function PaymentEditModal({
|
||||
onClose,
|
||||
payment,
|
||||
onEditServiceLine,
|
||||
isUpdatingServiceLine,
|
||||
onUpdateStatus,
|
||||
isUpdatingStatus,
|
||||
}: PaymentEditModalProps) {
|
||||
if (!payment) return null;
|
||||
|
||||
|
||||
const [expandedLineId, setExpandedLineId] = useState<number | null>(null);
|
||||
const [paymentStatus, setPaymentStatus] = React.useState<PaymentStatus>(
|
||||
payment.status
|
||||
@@ -99,7 +106,56 @@ export default function PaymentEditModal({
|
||||
|
||||
const handleSavePayment = async () => {
|
||||
if (!formState.serviceLineId) {
|
||||
toast({ title: "Error", description: "No service line selected." });
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "No service line selected.",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const paidAmount = Number(formState.paidAmount) || 0;
|
||||
const adjustedAmount = Number(formState.adjustedAmount) || 0;
|
||||
|
||||
if (paidAmount < 0 || adjustedAmount < 0) {
|
||||
toast({
|
||||
title: "Invalid Amount",
|
||||
description: "Amounts cannot be negative.",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (paidAmount === 0 && adjustedAmount === 0) {
|
||||
toast({
|
||||
title: "Invalid Amount",
|
||||
description:
|
||||
"Either paid or adjusted amount must be greater than zero.",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const line = payment.claim.serviceLines.find(
|
||||
(sl) => sl.id === formState.serviceLineId
|
||||
);
|
||||
if (!line) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Selected service line not found.",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const dueAmount = Number(line.totalDue);
|
||||
if (paidAmount > dueAmount) {
|
||||
toast({
|
||||
title: "Invalid Payment",
|
||||
description: `Paid amount ($${paidAmount.toFixed(
|
||||
2
|
||||
)}) cannot exceed due amount ($${dueAmount.toFixed(2)}).`,
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -114,70 +170,148 @@ export default function PaymentEditModal({
|
||||
adjustedAmount: Number(formState.adjustedAmount) || 0,
|
||||
method: formState.method,
|
||||
receivedDate: parseLocalDate(formState.receivedDate),
|
||||
payerName: formState.payerName || undefined,
|
||||
notes: formState.notes || undefined,
|
||||
payerName: formState.payerName?.trim() || undefined,
|
||||
notes: formState.notes?.trim() || undefined,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
try {
|
||||
await onEditServiceLine(payload);
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Payment Transaction added successfully.",
|
||||
});
|
||||
setExpandedLineId(null);
|
||||
onClose();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast({ title: "Error", description: "Failed to save payment." });
|
||||
}
|
||||
};
|
||||
|
||||
const handlePayFullDue = async (
|
||||
line: (typeof payment.claim.serviceLines)[0]
|
||||
) => {
|
||||
if (!line || !payment) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Service line or payment data missing.",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const dueAmount = Number(line.totalDue);
|
||||
if (isNaN(dueAmount) || dueAmount <= 0) {
|
||||
toast({
|
||||
title: "No Due",
|
||||
description: "This service line has no outstanding balance.",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const payload: NewTransactionPayload = {
|
||||
paymentId: payment.id,
|
||||
status: paymentStatus,
|
||||
serviceLineTransactions: [
|
||||
{
|
||||
serviceLineId: line.id,
|
||||
paidAmount: dueAmount,
|
||||
adjustedAmount: 0,
|
||||
method: paymentMethodOptions[1] as PaymentMethod, // Maybe make dynamic later
|
||||
receivedDate: new Date(),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
try {
|
||||
await onEditServiceLine(payload);
|
||||
toast({
|
||||
title: "Success",
|
||||
description: `Full due amount ($${dueAmount.toFixed(
|
||||
2
|
||||
)}) paid for ${line.procedureCode}`,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to update payment.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Payment</DialogTitle>
|
||||
<DialogDescription>
|
||||
View and manage payments applied to service lines.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="relative">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Payment</DialogTitle>
|
||||
<DialogDescription>
|
||||
View and manage payments applied to service lines.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Close button in top-right */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClose}
|
||||
className="absolute right-0 top-0"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Claim + Patient Info */}
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-xl font-semibold">
|
||||
<div className="space-y-2 border-b border-gray-200 pb-4">
|
||||
<h3 className="text-2xl font-bold text-gray-900">
|
||||
{payment.claim.patientName}
|
||||
</h3>
|
||||
<p className="text-gray-500">
|
||||
Claim ID: {payment.claimId.toString().padStart(4, "0")}
|
||||
</p>
|
||||
<p className="text-gray-500">
|
||||
Service Date:{" "}
|
||||
{formatDateToHumanReadable(payment.claim.serviceDate)}
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-gray-500">Notes:</span>{" "}
|
||||
{payment.notes || "N/A"}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-3 text-sm">
|
||||
<span className="bg-gray-100 text-gray-800 px-2 py-0.5 rounded-full font-medium">
|
||||
Claim #{payment.claimId.toString().padStart(4, "0")}
|
||||
</span>
|
||||
<span className="bg-gray-100 text-gray-800 px-2 py-0.5 rounded-full font-medium">
|
||||
Service Date:{" "}
|
||||
{formatDateToHumanReadable(payment.claim.serviceDate)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Summary */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
|
||||
{/* Payment Summary + Metadata */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Payment Info */}
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Payment Info</h4>
|
||||
<div className="mt-2 space-y-1">
|
||||
<h4 className="font-semibold text-gray-900">Payment Info</h4>
|
||||
<div className="mt-2 space-y-1 text-sm">
|
||||
<p>
|
||||
<span className="text-gray-500">Total Billed:</span> $
|
||||
{Number(payment.totalBilled || 0).toFixed(2)}
|
||||
<span className="text-gray-500">Total Billed:</span>{" "}
|
||||
<span className="font-medium">
|
||||
${Number(payment.totalBilled || 0).toFixed(2)}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-gray-500">Total Paid:</span> $
|
||||
{Number(payment.totalPaid || 0).toFixed(2)}
|
||||
<span className="text-gray-500">Total Paid:</span>{" "}
|
||||
<span className="font-medium text-green-600">
|
||||
${Number(payment.totalPaid || 0).toFixed(2)}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-gray-500">Total Due:</span> $
|
||||
{Number(payment.totalDue || 0).toFixed(2)}
|
||||
<span className="text-gray-500">Total Due:</span>{" "}
|
||||
<span className="font-medium text-red-600">
|
||||
${Number(payment.totalDue || 0).toFixed(2)}
|
||||
</span>
|
||||
</p>
|
||||
<div className="pt-2">
|
||||
<label className="text-sm text-gray-600">Status</label>
|
||||
|
||||
{/* Status Selector */}
|
||||
<div className="pt-3">
|
||||
<label className="block text-sm text-gray-600 mb-1">
|
||||
Payment Status
|
||||
</label>
|
||||
<Select
|
||||
value={paymentStatus}
|
||||
onValueChange={(value: PaymentStatus) =>
|
||||
@@ -196,12 +330,23 @@ export default function PaymentEditModal({
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={isUpdatingStatus}
|
||||
onClick={() =>
|
||||
payment && onUpdateStatus(payment.id, paymentStatus)
|
||||
}
|
||||
>
|
||||
{isUpdatingStatus ? "Updating..." : "Update Status"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Metadata</h4>
|
||||
<div className="mt-2 space-y-1">
|
||||
<h4 className="font-semibold text-gray-900">Metadata</h4>
|
||||
<div className="mt-2 space-y-1 text-sm">
|
||||
<p>
|
||||
<span className="text-gray-500">Created At:</span>{" "}
|
||||
{payment.createdAt
|
||||
@@ -209,7 +354,7 @@ export default function PaymentEditModal({
|
||||
: "N/A"}
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-gray-500">Last Upadated At:</span>{" "}
|
||||
<span className="text-gray-500">Last Updated At:</span>{" "}
|
||||
{payment.updatedAt
|
||||
? formatDateToHumanReadable(payment.updatedAt)
|
||||
: "N/A"}
|
||||
@@ -221,176 +366,186 @@ export default function PaymentEditModal({
|
||||
{/* Service Lines Payments */}
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 pt-4">Service Lines</h4>
|
||||
<div className="mt-2 space-y-3">
|
||||
<div className="mt-3 space-y-4">
|
||||
{payment.claim.serviceLines.length > 0 ? (
|
||||
<>
|
||||
{payment.claim.serviceLines.map((line) => {
|
||||
return (
|
||||
<div
|
||||
key={line.id}
|
||||
className="border p-3 rounded-md bg-gray-50"
|
||||
>
|
||||
payment.claim.serviceLines.map((line) => {
|
||||
const isExpanded = expandedLineId === line.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={line.id}
|
||||
className="border border-gray-200 p-4 rounded-xl bg-white shadow-sm hover:shadow-md transition-shadow duration-200"
|
||||
>
|
||||
{/* Top Info */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
<p>
|
||||
<span className="text-gray-500">Procedure Code:</span>{" "}
|
||||
{line.procedureCode}
|
||||
<span className="font-medium">
|
||||
{line.procedureCode}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-gray-500">Billed:</span> $
|
||||
{Number(line.totalBilled || 0).toFixed(2)}
|
||||
<span className="text-gray-500">Billed:</span>{" "}
|
||||
<span className="font-semibold">
|
||||
${Number(line.totalBilled || 0).toFixed(2)}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-gray-500">Paid:</span> $
|
||||
{Number(line.totalPaid || 0).toFixed(2)}
|
||||
<span className="text-gray-500">Paid:</span>{" "}
|
||||
<span className="font-semibold text-green-600">
|
||||
${Number(line.totalPaid || 0).toFixed(2)}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-gray-500">Adjusted:</span> $
|
||||
{Number(line.totalAdjusted || 0).toFixed(2)}
|
||||
<span className="text-gray-500">Adjusted:</span>{" "}
|
||||
<span className="font-semibold text-yellow-600">
|
||||
${Number(line.totalAdjusted || 0).toFixed(2)}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-gray-500">Due:</span> $
|
||||
{Number(line.totalDue || 0).toFixed(2)}
|
||||
<span className="text-gray-500">Due:</span>{" "}
|
||||
<span className="font-semibold text-red-600">
|
||||
${Number(line.totalDue || 0).toFixed(2)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="pt-4 flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEditServiceLine(line.id)}
|
||||
>
|
||||
{isExpanded ? "Cancel" : "Pay Partially"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={() => handlePayFullDue(line)}
|
||||
>
|
||||
Pay Full Due
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Expanded Partial Payment Form */}
|
||||
{isExpanded && (
|
||||
<div className="mt-4 p-4 border-t border-gray-200 bg-gray-50 rounded-lg space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-medium">
|
||||
Paid Amount
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Paid Amount"
|
||||
defaultValue={formState.paidAmount}
|
||||
onChange={(e) =>
|
||||
updateField(
|
||||
"paidAmount",
|
||||
parseFloat(e.target.value)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-medium">
|
||||
Adjusted Amount
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Adjusted Amount"
|
||||
defaultValue={formState.adjustedAmount}
|
||||
onChange={(e) =>
|
||||
updateField(
|
||||
"adjustedAmount",
|
||||
parseFloat(e.target.value)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-medium">
|
||||
Payment Method
|
||||
</label>
|
||||
<Select
|
||||
value={formState.method}
|
||||
onValueChange={(value: PaymentMethod) =>
|
||||
setFormState((prev) => ({
|
||||
...prev,
|
||||
method: value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a payment method" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{paymentMethodOptions.map((methodOption) => (
|
||||
<SelectItem
|
||||
key={methodOption}
|
||||
value={methodOption}
|
||||
>
|
||||
{methodOption}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-medium">
|
||||
Received Date
|
||||
</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={formState.receivedDate}
|
||||
onChange={(e) =>
|
||||
updateField("receivedDate", e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-medium">
|
||||
Payer Name
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Payer Name"
|
||||
value={formState.payerName}
|
||||
onChange={(e) =>
|
||||
updateField("payerName", e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-medium">Notes</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Notes"
|
||||
onChange={(e) =>
|
||||
updateField("notes", e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEditServiceLine(line.id)}
|
||||
disabled={isUpdatingServiceLine}
|
||||
onClick={() => handleSavePayment()}
|
||||
>
|
||||
{expandedLineId === line.id
|
||||
? "Cancel"
|
||||
: "Edit Payments"}
|
||||
{isUpdatingStatus ? "Updating..." : "Update"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{expandedLineId === line.id && (
|
||||
<div className="mt-3 space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor={`paid-${line.id}`}
|
||||
className="text-sm font-medium"
|
||||
>
|
||||
Paid Amount
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Paid Amount"
|
||||
defaultValue={formState.paidAmount}
|
||||
onChange={(e) =>
|
||||
updateField(
|
||||
"paidAmount",
|
||||
parseFloat(e.target.value)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor={`adjusted-${line.id}`}
|
||||
className="text-sm font-medium"
|
||||
>
|
||||
Adjusted Amount
|
||||
</label>
|
||||
<Input
|
||||
id={`adjusted-${line.id}`}
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Adjusted Amount"
|
||||
defaultValue={formState.adjustedAmount}
|
||||
onChange={(e) =>
|
||||
updateField(
|
||||
"adjustedAmount",
|
||||
parseFloat(e.target.value)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-medium">
|
||||
Payment Method
|
||||
</label>
|
||||
<Select
|
||||
value={formState.method}
|
||||
onValueChange={(value: PaymentMethod) =>
|
||||
setFormState((prev) => ({
|
||||
...prev,
|
||||
method: value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a payment method" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{paymentMethodOptions.map((methodOption) => (
|
||||
<SelectItem
|
||||
key={methodOption}
|
||||
value={methodOption}
|
||||
>
|
||||
{methodOption}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-medium">
|
||||
Received Date
|
||||
</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={formState.receivedDate}
|
||||
onChange={(e) =>
|
||||
updateField("receivedDate", e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-medium">
|
||||
Payer Name
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Payer Name"
|
||||
value={formState.payerName}
|
||||
onChange={(e) =>
|
||||
updateField("payerName", e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor={`notes-${line.id}`}
|
||||
className="text-sm font-medium"
|
||||
>
|
||||
Notes
|
||||
</label>
|
||||
<Input
|
||||
id={`notes-${line.id}`}
|
||||
type="text"
|
||||
placeholder="Notes"
|
||||
onChange={(e) =>
|
||||
updateField("notes", e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => handleSavePayment()}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-gray-500">No service lines available.</p>
|
||||
)}
|
||||
@@ -400,39 +555,82 @@ export default function PaymentEditModal({
|
||||
{/* Transactions Overview */}
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 pt-6">All Transactions</h4>
|
||||
<div className="mt-2 space-y-2">
|
||||
<div className="mt-4 space-y-3">
|
||||
{payment.serviceLineTransactions.length > 0 ? (
|
||||
payment.serviceLineTransactions.map((tx) => (
|
||||
<div
|
||||
key={tx.id}
|
||||
className="border p-3 rounded-md bg-white shadow-sm"
|
||||
className="border border-gray-200 p-4 rounded-xl bg-white shadow-sm hover:shadow-md transition-shadow duration-200"
|
||||
>
|
||||
<p>
|
||||
<span className="text-gray-500">Date:</span>{" "}
|
||||
{formatDateToHumanReadable(tx.receivedDate)}
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-gray-500">Paid Amount:</span> $
|
||||
{Number(tx.paidAmount).toFixed(2)}
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-gray-500">Adjusted Amount:</span> $
|
||||
{Number(tx.adjustedAmount).toFixed(2)}
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-gray-500">Method:</span> {tx.method}
|
||||
</p>
|
||||
{tx.payerName && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-2">
|
||||
{/* Transaction ID */}
|
||||
{tx.id && (
|
||||
<p>
|
||||
<span className="text-gray-500">Transaction ID:</span>{" "}
|
||||
<span className="font-medium">{tx.id}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Procedure Code */}
|
||||
{tx.serviceLine?.procedureCode && (
|
||||
<p>
|
||||
<span className="text-gray-500">Procedure Code:</span>{" "}
|
||||
<span className="font-medium">
|
||||
{tx.serviceLine.procedureCode}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Paid Amount */}
|
||||
<p>
|
||||
<span className="text-gray-500">Payer Name:</span>{" "}
|
||||
{tx.payerName}
|
||||
<span className="text-gray-500">Paid Amount:</span>{" "}
|
||||
<span className="font-semibold text-green-600">
|
||||
${Number(tx.paidAmount).toFixed(2)}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
{tx.notes && (
|
||||
|
||||
{/* Adjusted Amount */}
|
||||
{Number(tx.adjustedAmount) > 0 && (
|
||||
<p>
|
||||
<span className="text-gray-500">
|
||||
Adjusted Amount:
|
||||
</span>{" "}
|
||||
<span className="font-semibold text-yellow-600">
|
||||
${Number(tx.adjustedAmount).toFixed(2)}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Date */}
|
||||
<p>
|
||||
<span className="text-gray-500">Notes:</span> {tx.notes}
|
||||
<span className="text-gray-500">Date:</span>{" "}
|
||||
<span>
|
||||
{formatDateToHumanReadable(tx.receivedDate)}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Method */}
|
||||
<p>
|
||||
<span className="text-gray-500">Method:</span>{" "}
|
||||
<span className="capitalize">{tx.method}</span>
|
||||
</p>
|
||||
|
||||
{/* Payer Name */}
|
||||
{tx.payerName && tx.payerName.trim() !== "" && (
|
||||
<p className="md:col-span-2">
|
||||
<span className="text-gray-500">Payer Name:</span>{" "}
|
||||
<span>{tx.payerName}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Notes */}
|
||||
{tx.notes && tx.notes.trim() !== "" && (
|
||||
<p className="md:col-span-2">
|
||||
<span className="text-gray-500">Notes:</span>{" "}
|
||||
<span>{tx.notes}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
@@ -443,7 +641,7 @@ export default function PaymentEditModal({
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end space-x-2 pt-6">
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
<Button variant="default" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -16,6 +16,9 @@ import {
|
||||
Clock,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
TrendingUp,
|
||||
ThumbsDown,
|
||||
DollarSign,
|
||||
} from "lucide-react";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
@@ -30,15 +33,15 @@ import {
|
||||
} from "@/components/ui/pagination";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { DeleteConfirmationDialog } from "../ui/deleteDialog";
|
||||
import PaymentViewModal from "./payment-view-modal";
|
||||
import LoadingScreen from "../ui/LoadingScreen";
|
||||
import {
|
||||
ClaimStatus,
|
||||
ClaimWithServiceLines,
|
||||
NewTransactionPayload,
|
||||
PaymentStatus,
|
||||
PaymentWithExtras,
|
||||
} from "@repo/db/types";
|
||||
import EditPaymentModal from "./payment-edit-modal";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
|
||||
interface PaymentApiResponse {
|
||||
payments: PaymentWithExtras[];
|
||||
@@ -47,7 +50,6 @@ interface PaymentApiResponse {
|
||||
|
||||
interface PaymentsRecentTableProps {
|
||||
allowEdit?: boolean;
|
||||
allowView?: boolean;
|
||||
allowDelete?: boolean;
|
||||
allowCheckbox?: boolean;
|
||||
onSelectPayment?: (payment: PaymentWithExtras | null) => void;
|
||||
@@ -57,7 +59,6 @@ interface PaymentsRecentTableProps {
|
||||
|
||||
export default function PaymentsRecentTable({
|
||||
allowEdit,
|
||||
allowView,
|
||||
allowDelete,
|
||||
allowCheckbox,
|
||||
onSelectPayment,
|
||||
@@ -66,7 +67,6 @@ export default function PaymentsRecentTable({
|
||||
}: PaymentsRecentTableProps) {
|
||||
const { toast } = useToast();
|
||||
|
||||
const [isViewPaymentOpen, setIsViewPaymentOpen] = useState(false);
|
||||
const [isEditPaymentOpen, setIsEditPaymentOpen] = useState(false);
|
||||
const [isDeletePaymentOpen, setIsDeletePaymentOpen] = useState(false);
|
||||
|
||||
@@ -131,17 +131,25 @@ export default function PaymentsRecentTable({
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
onSuccess: () => {
|
||||
setIsEditPaymentOpen(false);
|
||||
onSuccess: async (updated, { paymentId }) => {
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Payment updated successfully!",
|
||||
variant: "default",
|
||||
});
|
||||
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: getPaymentsQueryKey(),
|
||||
});
|
||||
|
||||
// Fetch updated payment and set into local state
|
||||
const refreshedPayment = await apiRequest(
|
||||
"GET",
|
||||
`/api/payments/${paymentId}`
|
||||
).then((res) => res.json());
|
||||
|
||||
setCurrentPayment(refreshedPayment); // <-- keep modal in sync
|
||||
},
|
||||
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Error",
|
||||
@@ -151,6 +159,57 @@ export default function PaymentsRecentTable({
|
||||
},
|
||||
});
|
||||
|
||||
const updatePaymentStatusMutation = useMutation({
|
||||
mutationFn: async ({
|
||||
paymentId,
|
||||
status,
|
||||
}: {
|
||||
paymentId: number;
|
||||
status: PaymentStatus;
|
||||
}) => {
|
||||
const response = await apiRequest(
|
||||
"PATCH",
|
||||
`/api/payments/${paymentId}/status`,
|
||||
{
|
||||
data: { status },
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || "Failed to update payment status");
|
||||
}
|
||||
|
||||
return response.json();
|
||||
},
|
||||
|
||||
onSuccess: async (updated, { paymentId }) => {
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Payment Status updated successfully!",
|
||||
});
|
||||
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: getPaymentsQueryKey(),
|
||||
});
|
||||
|
||||
// Fetch updated payment and set into local state
|
||||
const refreshedPayment = await apiRequest(
|
||||
"GET",
|
||||
`/api/payments/${paymentId}`
|
||||
).then((res) => res.json());
|
||||
|
||||
setCurrentPayment(refreshedPayment); // <-- keep modal in sync
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `Status update failed: ${error.message}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const deletePaymentMutation = useMutation({
|
||||
mutationFn: async (id: number) => {
|
||||
const res = await apiRequest("DELETE", `/api/payments/${id}`);
|
||||
@@ -182,11 +241,6 @@ export default function PaymentsRecentTable({
|
||||
setIsEditPaymentOpen(true);
|
||||
};
|
||||
|
||||
const handleViewPayment = (payment: PaymentWithExtras) => {
|
||||
setCurrentPayment(payment);
|
||||
setIsViewPaymentOpen(true);
|
||||
};
|
||||
|
||||
const handleDeletePayment = (payment: PaymentWithExtras) => {
|
||||
setCurrentPayment(payment);
|
||||
setIsDeletePaymentOpen(true);
|
||||
@@ -231,7 +285,7 @@ export default function PaymentsRecentTable({
|
||||
paymentsData?.totalCount || 0
|
||||
);
|
||||
|
||||
const getInitialsFromName = (fullName: string) => {
|
||||
const getInitials = (fullName: string) => {
|
||||
const parts = fullName.trim().split(/\s+/);
|
||||
const filteredParts = parts.filter((part) => part.length > 0);
|
||||
if (filteredParts.length === 0) {
|
||||
@@ -260,7 +314,7 @@ export default function PaymentsRecentTable({
|
||||
return colorClasses[id % colorClasses.length];
|
||||
};
|
||||
|
||||
const getStatusInfo = (status?: ClaimStatus) => {
|
||||
const getStatusInfo = (status?: PaymentStatus) => {
|
||||
switch (status) {
|
||||
case "PENDING":
|
||||
return {
|
||||
@@ -268,22 +322,35 @@ export default function PaymentsRecentTable({
|
||||
color: "bg-yellow-100 text-yellow-800",
|
||||
icon: <Clock className="h-3 w-3 mr-1" />,
|
||||
};
|
||||
case "APPROVED":
|
||||
case "PARTIALLY_PAID":
|
||||
return {
|
||||
label: "Approved",
|
||||
label: "Partially Paid",
|
||||
color: "bg-blue-100 text-blue-800",
|
||||
icon: <DollarSign className="h-3 w-3 mr-1" />,
|
||||
};
|
||||
case "PAID":
|
||||
return {
|
||||
label: "Paid",
|
||||
color: "bg-green-100 text-green-800",
|
||||
icon: <CheckCircle className="h-3 w-3 mr-1" />,
|
||||
};
|
||||
case "CANCELLED":
|
||||
case "OVERPAID":
|
||||
return {
|
||||
label: "Cancelled",
|
||||
label: "Overpaid",
|
||||
color: "bg-purple-100 text-purple-800",
|
||||
icon: <TrendingUp className="h-3 w-3 mr-1" />,
|
||||
};
|
||||
case "DENIED":
|
||||
return {
|
||||
label: "Denied",
|
||||
color: "bg-red-100 text-red-800",
|
||||
icon: <AlertCircle className="h-3 w-3 mr-1" />,
|
||||
icon: <ThumbsDown className="h-3 w-3 mr-1" />,
|
||||
};
|
||||
default:
|
||||
return {
|
||||
label: status
|
||||
? status.charAt(0).toUpperCase() + status.slice(1)
|
||||
? (status as string).charAt(0).toUpperCase() +
|
||||
(status as string).slice(1).toLowerCase()
|
||||
: "Unknown",
|
||||
color: "bg-gray-100 text-gray-800",
|
||||
icon: <AlertCircle className="h-3 w-3 mr-1" />,
|
||||
@@ -318,10 +385,11 @@ export default function PaymentsRecentTable({
|
||||
<TableRow>
|
||||
{allowCheckbox && <TableHead>Select</TableHead>}
|
||||
<TableHead>Payment ID</TableHead>
|
||||
<TableHead>Claim ID</TableHead>
|
||||
<TableHead>Patient Name</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
<TableHead>Date</TableHead>
|
||||
<TableHead>Method</TableHead>
|
||||
<TableHead>Claim Submitted on</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
@@ -374,12 +442,39 @@ export default function PaymentsRecentTable({
|
||||
? `PAY-${payment.id.toString().padStart(4, "0")}`
|
||||
: "N/A"}
|
||||
</TableCell>
|
||||
<TableCell>{payment.patientName}</TableCell>
|
||||
|
||||
<TableCell>
|
||||
{typeof payment.claimId === "number"
|
||||
? `CLM-${payment.claimId.toString().padStart(4, "0")}`
|
||||
: "N/A"}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="flex items-center">
|
||||
<Avatar
|
||||
className={`h-10 w-10 ${getAvatarColor(Number(payment.id))}`}
|
||||
>
|
||||
<AvatarFallback className="text-white">
|
||||
{getInitials(payment.patientName)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{payment.patientName}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
PID-{payment.patientId?.toString().padStart(4, "0")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
{/* 💰 Billed / Paid / Due breakdown */}
|
||||
<TableCell>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span>
|
||||
<strong>Total Billed:</strong> $
|
||||
<strong>Total Billed:</strong> $
|
||||
{Number(totalBilled).toFixed(2)}
|
||||
</span>
|
||||
<span>
|
||||
@@ -400,7 +495,27 @@ export default function PaymentsRecentTable({
|
||||
<TableCell>
|
||||
{formatDateToHumanReadable(payment.paymentDate)}
|
||||
</TableCell>
|
||||
<TableCell>{payment.paymentMethod}</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
{(() => {
|
||||
const { label, color, icon } = getStatusInfo(
|
||||
payment.status
|
||||
);
|
||||
return (
|
||||
<span
|
||||
className={`px-2 py-1 text-xs font-medium rounded-full ${color}`}
|
||||
>
|
||||
<span className="flex items-center">
|
||||
{icon}
|
||||
{label}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end space-x-2">
|
||||
{allowDelete && (
|
||||
@@ -428,18 +543,6 @@ export default function PaymentsRecentTable({
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
{allowView && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
handleViewPayment(payment);
|
||||
}}
|
||||
className="text-gray-600 hover:text-gray-800 hover:bg-gray-50"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
@@ -457,17 +560,6 @@ export default function PaymentsRecentTable({
|
||||
entityName={`ClaimID : ${currentPayment?.claimId}`}
|
||||
/>
|
||||
|
||||
{/* /will hanlde both modal later */}
|
||||
{/* {isViewPaymentOpen && currentPayment && (
|
||||
<ClaimPaymentModal
|
||||
isOpen={isViewPaymentOpen}
|
||||
onClose={() => setIsViewPaymentOpen(false)}
|
||||
onOpenChange={(open) => setIsViewPaymentOpen(open)}
|
||||
onEditClaim={(payment) => handleEditPayment(payment)}
|
||||
payment={currentPayment}
|
||||
/>
|
||||
)} */}
|
||||
|
||||
{isEditPaymentOpen && currentPayment && (
|
||||
<EditPaymentModal
|
||||
isOpen={isEditPaymentOpen}
|
||||
@@ -477,6 +569,11 @@ export default function PaymentsRecentTable({
|
||||
onEditServiceLine={(updatedPayment) => {
|
||||
updatePaymentMutation.mutate(updatedPayment);
|
||||
}}
|
||||
isUpdatingServiceLine={updatePaymentMutation.isPending}
|
||||
onUpdateStatus={(paymentId, status) => {
|
||||
updatePaymentStatusMutation.mutate({ paymentId, status });
|
||||
}}
|
||||
isUpdatingStatus={updatePaymentStatusMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
CardTitle,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardDescription,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
@@ -47,7 +48,6 @@ import {
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import PaymentsRecentTable from "@/components/payments/payments-recent-table";
|
||||
import { Appointment, Patient } from "@repo/db/types";
|
||||
|
||||
export default function PaymentsPage() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
@@ -55,122 +55,15 @@ export default function PaymentsPage() {
|
||||
const [uploadedImage, setUploadedImage] = useState<File | null>(null);
|
||||
const [isExtracting, setIsExtracting] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [showReimbursementWindow, setShowReimbursementWindow] = useState(false);
|
||||
const [extractedPaymentData, setExtractedPaymentData] = useState<any[]>([]);
|
||||
const [editableData, setEditableData] = useState<any[]>([]);
|
||||
const [paidItems, setPaidItems] = useState<Record<string, boolean>>({});
|
||||
const [adjustmentValues, setAdjustmentValues] = useState<
|
||||
Record<string, number>
|
||||
>({});
|
||||
const [balanceValues, setBalanceValues] = useState<Record<string, number>>(
|
||||
{}
|
||||
);
|
||||
|
||||
const { toast } = useToast();
|
||||
const { user } = useAuth();
|
||||
|
||||
// Fetch patients
|
||||
const { data: patients = [], isLoading: isLoadingPatients } = useQuery<
|
||||
Patient[]
|
||||
>({
|
||||
queryKey: ["/api/patients"],
|
||||
enabled: !!user,
|
||||
});
|
||||
|
||||
// Fetch appointments
|
||||
const {
|
||||
data: appointments = [] as Appointment[],
|
||||
isLoading: isLoadingAppointments,
|
||||
} = useQuery<Appointment[]>({
|
||||
queryKey: ["/api/appointments"],
|
||||
enabled: !!user,
|
||||
});
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
setIsMobileMenuOpen(!isMobileMenuOpen);
|
||||
};
|
||||
|
||||
// Sample payment data
|
||||
const samplePayments = [
|
||||
{
|
||||
id: "PMT-1001",
|
||||
patientId: patients[0]?.id || 1,
|
||||
amount: 75.0,
|
||||
date: new Date(new Date().setDate(new Date().getDate() - 2)),
|
||||
method: "Credit Card",
|
||||
status: "completed",
|
||||
description: "Co-pay for cleaning",
|
||||
},
|
||||
{
|
||||
id: "PMT-1002",
|
||||
patientId: patients[0]?.id || 1,
|
||||
amount: 150.0,
|
||||
date: new Date(new Date().setDate(new Date().getDate() - 7)),
|
||||
method: "Insurance",
|
||||
status: "processing",
|
||||
description: "Insurance claim for x-rays",
|
||||
},
|
||||
{
|
||||
id: "PMT-1003",
|
||||
patientId: patients[0]?.id || 1,
|
||||
amount: 350.0,
|
||||
date: new Date(new Date().setDate(new Date().getDate() - 14)),
|
||||
method: "Check",
|
||||
status: "completed",
|
||||
description: "Payment for root canal",
|
||||
},
|
||||
{
|
||||
id: "PMT-1004",
|
||||
patientId: patients[0]?.id || 1,
|
||||
amount: 120.0,
|
||||
date: new Date(new Date().setDate(new Date().getDate() - 30)),
|
||||
method: "Credit Card",
|
||||
status: "completed",
|
||||
description: "Filling procedure",
|
||||
},
|
||||
];
|
||||
|
||||
// Sample outstanding balances
|
||||
const sampleOutstanding = [
|
||||
{
|
||||
id: "INV-5001",
|
||||
patientId: patients[0]?.id || 1,
|
||||
amount: 210.5,
|
||||
dueDate: new Date(new Date().setDate(new Date().getDate() + 7)),
|
||||
description: "Crown procedure",
|
||||
created: new Date(new Date().setDate(new Date().getDate() - 10)),
|
||||
status: "pending",
|
||||
},
|
||||
{
|
||||
id: "INV-5002",
|
||||
patientId: patients[0]?.id || 1,
|
||||
amount: 85.0,
|
||||
dueDate: new Date(new Date().setDate(new Date().getDate() - 5)),
|
||||
description: "Diagnostic & preventive",
|
||||
created: new Date(new Date().setDate(new Date().getDate() - 20)),
|
||||
status: "overdue",
|
||||
},
|
||||
];
|
||||
|
||||
// Calculate summary data
|
||||
const totalOutstanding = sampleOutstanding.reduce(
|
||||
(sum, item) => sum + item.amount,
|
||||
0
|
||||
);
|
||||
const totalCollected = samplePayments
|
||||
.filter((payment) => payment.status === "completed")
|
||||
.reduce((sum, payment) => sum + payment.amount, 0);
|
||||
const pendingAmount = samplePayments
|
||||
.filter((payment) => payment.status === "processing")
|
||||
.reduce((sum, payment) => sum + payment.amount, 0);
|
||||
|
||||
const handleRecordPayment = (patientId: number, invoiceId?: string) => {
|
||||
const patient = patients.find((p) => p.id === patientId);
|
||||
toast({
|
||||
title: "Payment form opened",
|
||||
description: `Recording payment for ${patient?.firstName} ${patient?.lastName}${invoiceId ? ` (Invoice: ${invoiceId})` : ""}`,
|
||||
});
|
||||
};
|
||||
|
||||
// Image upload handlers for OCR
|
||||
const handleImageDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
@@ -210,295 +103,6 @@ export default function PaymentsPage() {
|
||||
|
||||
// Simulate OCR extraction process
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
|
||||
// Sample extracted payment data - 20 rows
|
||||
const mockExtractedData = [
|
||||
{
|
||||
memberName: "John Smith",
|
||||
memberId: "123456789",
|
||||
procedureCode: "D1110",
|
||||
dateOfService: "12/15/2024",
|
||||
billedAmount: 150.0,
|
||||
allowedAmount: 120.0,
|
||||
paidAmount: 96.0,
|
||||
},
|
||||
{
|
||||
memberName: "John Smith",
|
||||
memberId: "123456789",
|
||||
procedureCode: "D0120",
|
||||
dateOfService: "12/15/2024",
|
||||
billedAmount: 85.0,
|
||||
allowedAmount: 70.0,
|
||||
paidAmount: 56.0,
|
||||
},
|
||||
{
|
||||
memberName: "Mary Johnson",
|
||||
memberId: "987654321",
|
||||
procedureCode: "D2330",
|
||||
dateOfService: "12/14/2024",
|
||||
billedAmount: 280.0,
|
||||
allowedAmount: 250.0,
|
||||
paidAmount: 200.0,
|
||||
},
|
||||
{
|
||||
memberName: "Robert Brown",
|
||||
memberId: "456789123",
|
||||
procedureCode: "D3320",
|
||||
dateOfService: "12/13/2024",
|
||||
billedAmount: 1050.0,
|
||||
allowedAmount: 900.0,
|
||||
paidAmount: 720.0,
|
||||
},
|
||||
{
|
||||
memberName: "Sarah Davis",
|
||||
memberId: "789123456",
|
||||
procedureCode: "D2140",
|
||||
dateOfService: "12/12/2024",
|
||||
billedAmount: 320.0,
|
||||
allowedAmount: 280.0,
|
||||
paidAmount: 224.0,
|
||||
},
|
||||
{
|
||||
memberName: "Michael Wilson",
|
||||
memberId: "321654987",
|
||||
procedureCode: "D1120",
|
||||
dateOfService: "12/11/2024",
|
||||
billedAmount: 120.0,
|
||||
allowedAmount: 100.0,
|
||||
paidAmount: 80.0,
|
||||
},
|
||||
{
|
||||
memberName: "Jennifer Garcia",
|
||||
memberId: "654987321",
|
||||
procedureCode: "D0150",
|
||||
dateOfService: "12/10/2024",
|
||||
billedAmount: 195.0,
|
||||
allowedAmount: 165.0,
|
||||
paidAmount: 132.0,
|
||||
},
|
||||
{
|
||||
memberName: "David Miller",
|
||||
memberId: "147258369",
|
||||
procedureCode: "D2331",
|
||||
dateOfService: "12/09/2024",
|
||||
billedAmount: 220.0,
|
||||
allowedAmount: 190.0,
|
||||
paidAmount: 152.0,
|
||||
},
|
||||
{
|
||||
memberName: "Lisa Anderson",
|
||||
memberId: "258369147",
|
||||
procedureCode: "D4910",
|
||||
dateOfService: "12/08/2024",
|
||||
billedAmount: 185.0,
|
||||
allowedAmount: 160.0,
|
||||
paidAmount: 128.0,
|
||||
},
|
||||
{
|
||||
memberName: "James Taylor",
|
||||
memberId: "369147258",
|
||||
procedureCode: "D2392",
|
||||
dateOfService: "12/07/2024",
|
||||
billedAmount: 165.0,
|
||||
allowedAmount: 140.0,
|
||||
paidAmount: 112.0,
|
||||
},
|
||||
{
|
||||
memberName: "Patricia Thomas",
|
||||
memberId: "741852963",
|
||||
procedureCode: "D0140",
|
||||
dateOfService: "12/06/2024",
|
||||
billedAmount: 90.0,
|
||||
allowedAmount: 75.0,
|
||||
paidAmount: 60.0,
|
||||
},
|
||||
{
|
||||
memberName: "Christopher Lee",
|
||||
memberId: "852963741",
|
||||
procedureCode: "D2750",
|
||||
dateOfService: "12/05/2024",
|
||||
billedAmount: 1250.0,
|
||||
allowedAmount: 1100.0,
|
||||
paidAmount: 880.0,
|
||||
},
|
||||
{
|
||||
memberName: "Linda White",
|
||||
memberId: "963741852",
|
||||
procedureCode: "D1351",
|
||||
dateOfService: "12/04/2024",
|
||||
billedAmount: 75.0,
|
||||
allowedAmount: 65.0,
|
||||
paidAmount: 52.0,
|
||||
},
|
||||
{
|
||||
memberName: "Mark Harris",
|
||||
memberId: "159753486",
|
||||
procedureCode: "D7140",
|
||||
dateOfService: "12/03/2024",
|
||||
billedAmount: 185.0,
|
||||
allowedAmount: 155.0,
|
||||
paidAmount: 124.0,
|
||||
},
|
||||
{
|
||||
memberName: "Nancy Martin",
|
||||
memberId: "486159753",
|
||||
procedureCode: "D2332",
|
||||
dateOfService: "12/02/2024",
|
||||
billedAmount: 280.0,
|
||||
allowedAmount: 240.0,
|
||||
paidAmount: 192.0,
|
||||
},
|
||||
{
|
||||
memberName: "Kevin Thompson",
|
||||
memberId: "753486159",
|
||||
procedureCode: "D0210",
|
||||
dateOfService: "12/01/2024",
|
||||
billedAmount: 125.0,
|
||||
allowedAmount: 105.0,
|
||||
paidAmount: 84.0,
|
||||
},
|
||||
{
|
||||
memberName: "Helen Garcia",
|
||||
memberId: "357951486",
|
||||
procedureCode: "D4341",
|
||||
dateOfService: "11/30/2024",
|
||||
billedAmount: 210.0,
|
||||
allowedAmount: 180.0,
|
||||
paidAmount: 144.0,
|
||||
},
|
||||
{
|
||||
memberName: "Daniel Rodriguez",
|
||||
memberId: "486357951",
|
||||
procedureCode: "D2394",
|
||||
dateOfService: "11/29/2024",
|
||||
billedAmount: 295.0,
|
||||
allowedAmount: 250.0,
|
||||
paidAmount: 200.0,
|
||||
},
|
||||
{
|
||||
memberName: "Carol Lewis",
|
||||
memberId: "951486357",
|
||||
procedureCode: "D1206",
|
||||
dateOfService: "11/28/2024",
|
||||
billedAmount: 45.0,
|
||||
allowedAmount: 40.0,
|
||||
paidAmount: 32.0,
|
||||
},
|
||||
{
|
||||
memberName: "Paul Clark",
|
||||
memberId: "246813579",
|
||||
procedureCode: "D5110",
|
||||
dateOfService: "11/27/2024",
|
||||
billedAmount: 1200.0,
|
||||
allowedAmount: 1050.0,
|
||||
paidAmount: 840.0,
|
||||
},
|
||||
{
|
||||
memberName: "Susan Young",
|
||||
memberId: "135792468",
|
||||
procedureCode: "D4342",
|
||||
dateOfService: "11/26/2024",
|
||||
billedAmount: 175.0,
|
||||
allowedAmount: 150.0,
|
||||
paidAmount: 120.0,
|
||||
},
|
||||
{
|
||||
memberName: "Richard Allen",
|
||||
memberId: "468135792",
|
||||
procedureCode: "D2160",
|
||||
dateOfService: "11/25/2024",
|
||||
billedAmount: 385.0,
|
||||
allowedAmount: 320.0,
|
||||
paidAmount: 256.0,
|
||||
},
|
||||
{
|
||||
memberName: "Karen Scott",
|
||||
memberId: "792468135",
|
||||
procedureCode: "D0220",
|
||||
dateOfService: "11/24/2024",
|
||||
billedAmount: 95.0,
|
||||
allowedAmount: 80.0,
|
||||
paidAmount: 64.0,
|
||||
},
|
||||
{
|
||||
memberName: "William Green",
|
||||
memberId: "135246879",
|
||||
procedureCode: "D3220",
|
||||
dateOfService: "11/23/2024",
|
||||
billedAmount: 820.0,
|
||||
allowedAmount: 700.0,
|
||||
paidAmount: 560.0,
|
||||
},
|
||||
{
|
||||
memberName: "Betty King",
|
||||
memberId: "579024681",
|
||||
procedureCode: "D1208",
|
||||
dateOfService: "11/22/2024",
|
||||
billedAmount: 55.0,
|
||||
allowedAmount: 45.0,
|
||||
paidAmount: 36.0,
|
||||
},
|
||||
{
|
||||
memberName: "Edward Baker",
|
||||
memberId: "246897531",
|
||||
procedureCode: "D2950",
|
||||
dateOfService: "11/21/2024",
|
||||
billedAmount: 415.0,
|
||||
allowedAmount: 350.0,
|
||||
paidAmount: 280.0,
|
||||
},
|
||||
{
|
||||
memberName: "Dorothy Hall",
|
||||
memberId: "681357924",
|
||||
procedureCode: "D0230",
|
||||
dateOfService: "11/20/2024",
|
||||
billedAmount: 135.0,
|
||||
allowedAmount: 115.0,
|
||||
paidAmount: 92.0,
|
||||
},
|
||||
{
|
||||
memberName: "Joseph Adams",
|
||||
memberId: "924681357",
|
||||
procedureCode: "D2740",
|
||||
dateOfService: "11/19/2024",
|
||||
billedAmount: 1150.0,
|
||||
allowedAmount: 980.0,
|
||||
paidAmount: 784.0,
|
||||
},
|
||||
{
|
||||
memberName: "Sandra Nelson",
|
||||
memberId: "357924681",
|
||||
procedureCode: "D4211",
|
||||
dateOfService: "11/18/2024",
|
||||
billedAmount: 245.0,
|
||||
allowedAmount: 210.0,
|
||||
paidAmount: 168.0,
|
||||
},
|
||||
{
|
||||
memberName: "Kenneth Carter",
|
||||
memberId: "681924357",
|
||||
procedureCode: "D0274",
|
||||
dateOfService: "11/17/2024",
|
||||
billedAmount: 165.0,
|
||||
allowedAmount: 140.0,
|
||||
paidAmount: 112.0,
|
||||
},
|
||||
];
|
||||
|
||||
setExtractedPaymentData(mockExtractedData);
|
||||
setEditableData([...mockExtractedData]);
|
||||
setShowReimbursementWindow(true);
|
||||
|
||||
toast({
|
||||
title: "OCR Extraction Complete",
|
||||
description: "Payment information extracted from image successfully",
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "OCR Extraction Failed",
|
||||
description: "Could not extract information from the image",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsExtracting(false);
|
||||
}
|
||||
@@ -585,12 +189,10 @@ export default function PaymentsPage() {
|
||||
<CardContent>
|
||||
<div className="flex items-center">
|
||||
<DollarSign className="h-5 w-5 text-yellow-500 mr-2" />
|
||||
<div className="text-2xl font-bold">
|
||||
${totalOutstanding.toFixed(2)}
|
||||
</div>
|
||||
<div className="text-2xl font-bold">$0</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
From {sampleOutstanding.length} outstanding invoices
|
||||
From 0 outstanding invoices
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -604,17 +206,10 @@ export default function PaymentsPage() {
|
||||
<CardContent>
|
||||
<div className="flex items-center">
|
||||
<DollarSign className="h-5 w-5 text-green-500 mr-2" />
|
||||
<div className="text-2xl font-bold">
|
||||
${totalCollected.toFixed(2)}
|
||||
</div>
|
||||
<div className="text-2xl font-bold">${0}</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
From{" "}
|
||||
{
|
||||
samplePayments.filter((p) => p.status === "completed")
|
||||
.length
|
||||
}{" "}
|
||||
completed payments
|
||||
From 0 completed payments
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -628,23 +223,16 @@ export default function PaymentsPage() {
|
||||
<CardContent>
|
||||
<div className="flex items-center">
|
||||
<DollarSign className="h-5 w-5 text-blue-500 mr-2" />
|
||||
<div className="text-2xl font-bold">
|
||||
${pendingAmount.toFixed(2)}
|
||||
</div>
|
||||
<div className="text-2xl font-bold">$0</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
From{" "}
|
||||
{
|
||||
samplePayments.filter((p) => p.status === "processing")
|
||||
.length
|
||||
}{" "}
|
||||
pending transactions
|
||||
From 0 pending transactions
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* OCR Image Upload Section */}
|
||||
{/* OCR Image Upload Section - not working rn*/}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-medium text-gray-800">
|
||||
@@ -757,316 +345,20 @@ export default function PaymentsPage() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Outstanding Balances Section */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-medium text-gray-800">
|
||||
Outstanding Balances
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{sampleOutstanding.length > 0 ? (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Patient</TableHead>
|
||||
<TableHead>Claimed procedure codes</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
<TableHead>Paid</TableHead>
|
||||
<TableHead>Adjustment</TableHead>
|
||||
<TableHead>Balance</TableHead>
|
||||
<TableHead className="text-right">Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sampleOutstanding.map((invoice) => {
|
||||
const patient = patients.find(
|
||||
(p) => p.id === invoice.patientId
|
||||
) || { firstName: "Sample", lastName: "Patient" };
|
||||
|
||||
return (
|
||||
<TableRow key={invoice.id}>
|
||||
<TableCell>
|
||||
{patient.firstName} {patient.lastName}
|
||||
</TableCell>
|
||||
<TableCell>{invoice.description}</TableCell>
|
||||
<TableCell>${invoice.amount.toFixed(2)}</TableCell>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={paidItems[invoice.id] || false}
|
||||
onCheckedChange={(checked) => {
|
||||
setPaidItems((prev) => ({
|
||||
...prev,
|
||||
[invoice.id]: !!checked,
|
||||
}));
|
||||
}}
|
||||
className="data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
value={adjustmentValues[invoice.id] || ""}
|
||||
onChange={(e) => {
|
||||
const value = parseFloat(e.target.value) || 0;
|
||||
setAdjustmentValues((prev) => ({
|
||||
...prev,
|
||||
[invoice.id]: value,
|
||||
}));
|
||||
}}
|
||||
className="w-20 h-8"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
value={balanceValues[invoice.id] || ""}
|
||||
onChange={(e) => {
|
||||
const value = parseFloat(e.target.value) || 0;
|
||||
setBalanceValues((prev) => ({
|
||||
...prev,
|
||||
[invoice.id]: value,
|
||||
}));
|
||||
}}
|
||||
className="w-20 h-8"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
handleRecordPayment(
|
||||
invoice.patientId,
|
||||
invoice.id
|
||||
)
|
||||
}
|
||||
>
|
||||
Send an invoice
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<AlertCircle className="h-12 w-12 mx-auto text-gray-400 mb-3" />
|
||||
<h3 className="text-lg font-medium">
|
||||
No outstanding balances
|
||||
</h3>
|
||||
<p className="text-gray-500 mt-1">
|
||||
All patient accounts are current
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
{sampleOutstanding.length > 0 && (
|
||||
<CardFooter className="flex justify-between px-6 py-4 border-t">
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<ArrowDown className="h-4 w-4 mr-1" />
|
||||
<span>Download statement</span>
|
||||
</div>
|
||||
<div className="font-medium">
|
||||
Total: ${totalOutstanding.toFixed(2)}
|
||||
</div>
|
||||
</CardFooter>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<PaymentsRecentTable
|
||||
allowView
|
||||
allowEdit
|
||||
allowDelete
|
||||
/>
|
||||
{/* Recent Payments table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Payment's Records</CardTitle>
|
||||
<CardDescription>
|
||||
View and manage all recents patient's claims payments
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<PaymentsRecentTable allowEdit allowDelete />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Reimbursement Data Popup */}
|
||||
<Dialog
|
||||
open={showReimbursementWindow}
|
||||
onOpenChange={setShowReimbursementWindow}
|
||||
>
|
||||
<DialogContent className="max-w-6xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-xl font-bold">
|
||||
Insurance Reimbursement/Payment Details
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="mt-4">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Member Name</TableHead>
|
||||
<TableHead>Member ID</TableHead>
|
||||
<TableHead>Procedure Code</TableHead>
|
||||
<TableHead>Date of Service</TableHead>
|
||||
<TableHead>Billed Amount</TableHead>
|
||||
<TableHead>Allowed Amount</TableHead>
|
||||
<TableHead>Paid Amount</TableHead>
|
||||
<TableHead>Delete/Save</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{editableData.map((payment, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="font-medium">
|
||||
<Input
|
||||
value={payment.memberName}
|
||||
onChange={(e) =>
|
||||
updateEditableData(
|
||||
index,
|
||||
"memberName",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
className="border-0 p-1 bg-transparent"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Input
|
||||
value={payment.memberId}
|
||||
onChange={(e) =>
|
||||
updateEditableData(index, "memberId", e.target.value)
|
||||
}
|
||||
className="border-0 p-1 bg-transparent"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Input
|
||||
value={payment.procedureCode}
|
||||
onChange={(e) =>
|
||||
updateEditableData(
|
||||
index,
|
||||
"procedureCode",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
className="border-0 p-1 bg-transparent"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Input
|
||||
value={payment.dateOfService}
|
||||
onChange={(e) =>
|
||||
updateEditableData(
|
||||
index,
|
||||
"dateOfService",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
className="border-0 p-1 bg-transparent"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={payment.billedAmount}
|
||||
onChange={(e) =>
|
||||
updateEditableData(
|
||||
index,
|
||||
"billedAmount",
|
||||
parseFloat(e.target.value) || 0
|
||||
)
|
||||
}
|
||||
className="border-0 p-1 bg-transparent"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={payment.allowedAmount}
|
||||
onChange={(e) =>
|
||||
updateEditableData(
|
||||
index,
|
||||
"allowedAmount",
|
||||
parseFloat(e.target.value) || 0
|
||||
)
|
||||
}
|
||||
className="border-0 p-1 bg-transparent"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium text-green-600">
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={payment.paidAmount}
|
||||
onChange={(e) =>
|
||||
updateEditableData(
|
||||
index,
|
||||
"paidAmount",
|
||||
parseFloat(e.target.value) || 0
|
||||
)
|
||||
}
|
||||
className="border-0 p-1 bg-transparent text-green-600 font-medium"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => deleteRow(index)}
|
||||
className="h-8 w-8 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => saveRow(index)}
|
||||
className="h-8 w-8 p-0 text-green-500 hover:text-green-700 hover:bg-green-50"
|
||||
>
|
||||
<Save className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
{extractedPaymentData.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
No payment data extracted
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="mt-6">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowReimbursementWindow(false)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
toast({
|
||||
title: "Data Processed",
|
||||
description:
|
||||
"Payment information has been processed successfully",
|
||||
});
|
||||
setShowReimbursementWindow(false);
|
||||
}}
|
||||
>
|
||||
Process Payments
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user