Credit Transaction Table

1'use client';
2
3import { useEffect, useState } from 'react';
4import { TransactionTable } from '@/components/credits';
5
6export function TransactionHistory() {
7  const [transactions, setTransactions] = useState([]);
8
9  useEffect(() => {
10    // Fetch recent transactions
11    fetch('/api/credits/history?limit=20')
12      .then(r => r.json())
13      .then(data => setTransactions(data.transactions));
14  }, []);
15
16  return (
17    <div className="space-y-4">
18      <h3>Recent Transactions</h3>
19      <TransactionTable transactions={transactions} />
20    </div>
21  );
22}

1interface Transaction {
2  id: string;
3  amount: number;          // Positive = added, Negative = deducted
4  type: CreditTransactionType;
5  description: string | null;
6  endpoint: string | null;  // API endpoint that triggered this
7  createdAt: string;        // ISO 8601 date string
8}
9
10enum CreditTransactionType {
11  USAGE,                 // Red down arrow (-)
12  PURCHASE,              // Green up arrow (+)
13  SUBSCRIPTION_REFILL,   // Green refresh icon (+)
14  BONUS,                 // Blue gift icon (+)
15  REFUND,                // Yellow undo icon (+)
16}

1// GET /api/credits/history?limit=20 response
2{
3  "transactions": [
4    {
5      "id": "1",
6      "amount": -10,
7      "type": "USAGE",
8      "description": "Form generation",
9      "endpoint": "/api/ai/generate-form",
10      "createdAt": "2024-12-08T14:55:00.000Z"
11    },
12    {
13      "amount": 500,
14      "type": "PURCHASE",
15      "description": "Purchased 500 credit pack",
16      "endpoint": null,
17      "createdAt": "2024-12-08T13:00:00.000Z"
18    },
19    {
20      "amount": 1000,
21      "type": "SUBSCRIPTION_REFILL",
22      "description": "Monthly refill for starter plan",
23      "endpoint": null,
24      "createdAt": "2024-12-07T15:00:00.000Z"
25    }
26  ],
27  "stats": [...],  // If ?stats=true was passed
28  "totalUsage": 245
29}

1'use client';
2
3import { useState, useEffect } from 'react';
4import { TransactionTable } from '@/components/credits';
5
6export function UsageOnlyHistory() {
7  const [transactions, setTransactions] = useState([]);
8
9  useEffect(() => {
10    // Only fetch USAGE transactions
11    fetch('/api/credits/history?type=USAGE&limit=50')
12      .then(r => r.json())
13      .then(data => setTransactions(data.transactions));
14  }, []);
15
16  return (
17    <div>
18      <h3>Usage History</h3>
19      <TransactionTable transactions={transactions} />
20    </div>
21  );
22}

1// Automatically handles empty state
2<TransactionTable transactions={[]} />
3
4// Renders: "No transactions yet" message