# History Components

The `@blocklet/payment-react` library provides a suite of history components designed to give your users a clear and detailed view of their past activities. These components are essential for building customer portals, account dashboards, and administrative interfaces where users need to track their billing, payments, and credit usage.

These components fetch and display data directly from the payment service, offering a seamless way to present historical information without needing to build complex data-fetching and rendering logic from scratch.

<x-cards data-columns="2">
  <x-card data-title="CustomerInvoiceList" data-icon="lucide:receipt-text" data-href="/components/history/invoice-list">
    Render a list or table of a customer's invoices, including details on status, amount, and creation date.
  </x-card>
  <x-card data-title="CustomerPaymentList" data-icon="lucide:credit-card" data-href="/components/history/payment-list">
    Display a customer's complete payment history, including transaction details, payment method, and status.
  </x-card>
  <x-card data-title="CreditGrantsList" data-icon="lucide:award" data-href="/components/history/credit-grants-list">
    Show a list of all credit grants for a customer, detailing the status, remaining amount, and effective dates.
  </x-card>
  <x-card data-title="CreditTransactionsList" data-icon="lucide:history" data-href="/components/history/credit-transactions-list">
    List all individual credit transactions, providing a detailed log of credit usage and adjustments over time.
  </x-card>
</x-cards>

## Common Use Case

A typical use case is to create a "Billing History" section in a user's account page. You can use a tabbed interface to switch between different history views, such as Invoices, Payments, and Credits.

Below is a conceptual example of how you might structure such a page.

```jsx MyBillingPage.tsx icon=lucide:user
import React from 'react';
import { CustomerInvoiceList, CustomerPaymentList } from '@blocklet/payment-react';

// Assume you have the customer's ID from your session or context
const customerId = 'cus_xxxxxxxxxxxxxx';

export default function MyBillingPage() {
  // In a real application, you would use state to manage the active tab
  const [activeTab, setActiveTab] = React.useState('invoices');

  return (
    <div>
      <h1>Billing History</h1>
      <nav>
        <button onClick={() => setActiveTab('invoices')}>Invoices</button>
        <button onClick={() => setActiveTab('payments')}>Payments</button>
      </nav>

      <div style={{ marginTop: '20px' }}>
        {activeTab === 'invoices' && (
          <CustomerInvoiceList 
            customer_id={customerId} 
            type="table" 
          />
        )}
        {activeTab === 'payments' && (
          <CustomerPaymentList 
            customer_id={customerId} 
          />
        )}
      </div>
    </div>
  );
}
```

This example demonstrates how you can easily embed the history components to provide comprehensive, self-service billing information to your users. Each component handles its own data fetching, pagination, and display logic.

Explore the detailed documentation for each component to understand its specific props and customization options.