65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { apiGet } from "@/lib/api";
|
|
import { useAuthStore } from "@/store/authStore";
|
|
import type { Payment } from "@/lib/types";
|
|
import { formatDateTime, formatMoney } from "@/lib/format";
|
|
|
|
export function PaymentsPage() {
|
|
const selectedPropertyId = useAuthStore((s) => s.selectedPropertyId);
|
|
const [rows, setRows] = useState<Payment[]>([]);
|
|
|
|
useEffect(() => {
|
|
apiGet<{ data: Payment[] }>("/payments").then((r) => setRows(r.data));
|
|
}, [selectedPropertyId]);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-2xl font-bold">Payments</h1>
|
|
<Card className="rounded-2xl">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Payment records</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Booking</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>When</TableHead>
|
|
<TableHead className="text-right">Amount</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{rows.map((p) => (
|
|
<TableRow key={p.id}>
|
|
<TableCell className="text-sm">{p.bookingId}</TableCell>
|
|
<TableCell>
|
|
<Badge>{p.status}</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-xs text-muted-foreground">
|
|
{formatDateTime(p.createdAt)}
|
|
</TableCell>
|
|
<TableCell className="text-right font-medium">
|
|
{formatMoney(p.amount)} {p.last4 && `· ${p.last4}`}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|