feat(finance): clinic sees its own pending / rejected payments

Clinics that record a payment now get visibility on what happened to it.
Previously the row went into limbo — clinic clicked 'Ödeme Yap', balance
didn't move (lab approval pending), and the clinic had no in-app place
to confirm the submission landed.

  - /finance clinic-side now renders a new card 'Gönderdiğim Ödemeler'
    listing payments where tenantId == self AND status in (pending,
    rejected). Confirmed rows drop out (they're already reflected in
    the balance above).
  - Each row shows counterpart, amount, date, method, note plus a
    status badge: amber 'Onay bekliyor' or destructive 'Reddedildi'.
  - Pending rows expose a 'Geri al' button — fires deletePaymentAction
    so a clinic can withdraw a submission it sent in error before the
    lab acts on it. Rejected rows stay read-only for audit.
  - Card is hidden when the list is empty so the page stays tidy.
This commit is contained in:
kovakmedya
2026-05-22 16:06:06 +03:00
parent 94e9dffaef
commit 503a98fcb3
2 changed files with 147 additions and 0 deletions
@@ -0,0 +1,129 @@
"use client";
import { useActionState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Loader2, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { deletePaymentAction } from "@/lib/appwrite/payment-actions";
import {
PAYMENT_METHOD_LABELS,
initialPaymentActionState,
} from "@/lib/appwrite/payment-types";
import type { Payment } from "@/lib/appwrite/schema";
const dateFormatter = new Intl.DateTimeFormat("tr-TR", {
day: "2-digit",
month: "2-digit",
year: "numeric",
});
function formatMoney(amount: number, currency: string): string {
try {
return new Intl.NumberFormat("tr-TR", { style: "currency", currency }).format(amount);
} catch {
return `${amount.toFixed(2)} ${currency}`;
}
}
export function MyPendingPaymentsCard({
rows,
counterpartNames,
}: {
rows: Payment[];
counterpartNames: Record<string, string>;
}) {
if (rows.length === 0) return null;
return (
<Card>
<CardHeader>
<CardTitle>Gönderdiğim Ödemeler</CardTitle>
<CardDescription>
Laboratuvar onayı bekleyen veya reddedilen bildirimleriniz. Onaylanan
ödemeler artık burada gözükmez açık bakiyenize işlenir.
</CardDescription>
</CardHeader>
<CardContent>
<ul className="divide-y rounded-md border">
{rows.map((p) => (
<Row
key={p.$id}
payment={p}
counterpartName={counterpartNames[p.counterpartTenantId] ?? "—"}
/>
))}
</ul>
</CardContent>
</Card>
);
}
function Row({
payment,
counterpartName,
}: {
payment: Payment;
counterpartName: string;
}) {
const router = useRouter();
const [state, action, pending] = useActionState(
deletePaymentAction,
initialPaymentActionState,
);
useEffect(() => {
if (state.ok) {
toast.success("Bildirim silindi.");
router.refresh();
} else if (state.error) {
toast.error(state.error);
}
}, [state, router]);
const isPending = payment.status === "pending";
const isRejected = payment.status === "rejected";
return (
<li className="flex flex-wrap items-center gap-3 px-3 py-3">
<div className="min-w-0 flex-1">
<p className="truncate font-medium">{counterpartName}</p>
<p className="text-muted-foreground text-xs">
{dateFormatter.format(new Date(payment.paymentDate))}
{payment.method && (
<> · {PAYMENT_METHOD_LABELS[payment.method] ?? payment.method}</>
)}
{payment.notes && <> · {payment.notes}</>}
</p>
</div>
<div className="text-right">
<p className="text-base font-semibold tabular-nums">
{formatMoney(payment.amount, payment.currency)}
</p>
<Badge
variant="outline"
className={
isPending
? "text-amber-600 dark:text-amber-400"
: isRejected
? "text-destructive"
: ""
}
>
{isPending ? "Onay bekliyor" : isRejected ? "Reddedildi" : "Onaylandı"}
</Badge>
</div>
{isPending && (
<form action={action}>
<input type="hidden" name="id" value={payment.$id} />
<Button type="submit" size="sm" variant="outline" disabled={pending}>
{pending ? <Loader2 className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
Geri al
</Button>
</form>
)}
</li>
);
}
+18
View File
@@ -12,6 +12,7 @@ import {
import { requireTenant } from "@/lib/appwrite/tenant-guard";
import { BalancesCard } from "./components/balances-card";
import { FinanceTable } from "./components/finance-table";
import { MyPendingPaymentsCard } from "./components/my-pending-payments-card";
import { PendingPaymentsCard } from "./components/pending-payments-card";
export const metadata = {
@@ -61,6 +62,16 @@ export default async function FinancePage() {
payments,
});
const pendingForApproval = filterPendingForConfirmation(payments, ctx.tenantId, kind);
// Clinic-side: payments this clinic submitted that are either still waiting
// for the lab to confirm, or were rejected. Both shapes are useful so the
// clinic can chase the lab or fix a wrong submission.
const myPendingOrRejected = payments
.filter(
(p) =>
p.tenantId === ctx.tenantId &&
(p.status === "pending" || p.status === "rejected"),
)
.sort((a, b) => (a.paymentDate < b.paymentDate ? 1 : -1));
const counterpartNames: Record<string, string> = {};
for (const c of connections) {
@@ -117,6 +128,13 @@ export default async function FinancePage() {
<PendingPaymentsCard rows={pendingForApproval} counterpartNames={counterpartNames} />
{!isLab && (
<MyPendingPaymentsCard
rows={myPendingOrRejected}
counterpartNames={counterpartNames}
/>
)}
<BalancesCard
balances={balances}
counterpartNames={counterpartNames}