PaymentHistory

Displays payment records in a sortable table with filtering by status, payment type, and date range. Summary cards show total revenue, refunds, net revenue, and deposit revenue at a glance.

Install

npx thebookingkit add payment-history

Usage

import { PaymentHistory, type PaymentDisplayRecord } from "@/components/payment-history";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export function PaymentDashboard() {
  const router = useRouter();
  const [payments, setPayments] = useState<PaymentDisplayRecord[]>([]);

  useEffect(() => {
    fetch("/api/payments")
      .then((res) => res.json())
      .then(setPayments);
  }, []);

  return (
    <PaymentHistory
      payments={payments}
      onPaymentClick={(payment) => console.log(payment)}
      onBookingClick={(bookingId) => router.push(`/bookings/${bookingId}`)}
    />
  );
}

The “Type” filter lets a provider drill into deposits specifically — useful for reconciling outstanding balances or auditing deposit revenue separately from full prepayments.

Props

export interface PaymentDisplayRecord {
  id: string;
  bookingId: string;
  customerName?: string;
  customerEmail?: string;
  amountCents: number;
  currency: string;
  status: "pending" | "succeeded" | "failed" | "refunded" | "partially_refunded";
  /** "deposit" was added in v0.3.0 */
  paymentType: "prepayment" | "deposit" | "no_show_hold" | "cancellation_fee";
  refundAmountCents: number;
  createdAt: Date;
}

export interface PaymentHistoryProps {
  /** Payment records to display */
  payments: PaymentDisplayRecord[];
  /** Called when a row is clicked */
  onPaymentClick?: (payment: PaymentDisplayRecord) => void;
  /** Called when the booking link is clicked */
  onBookingClick?: (bookingId: string) => void;
  /** Additional CSS class name */
  className?: string;
  /** Inline styles */
  style?: React.CSSProperties;
}

Styling deposit rows

Each row’s payment-type badge gets a per-type CSS hook so you can color deposits distinctly:

.tbk-payment-type-deposit {
  background: #ecfdf5; /* green-50 */
  color: #047857;       /* green-700 */
}

Source

Run npx thebookingkit add payment-history to copy the source into your project, or browse the latest source on GitHub.