npm package: @prix_international/recent-transactions
Description: A reusable React component for displaying recent transactions with pagination
Author: Elver Rodriguez
Latest version: 1.0.0

# @prix_international/recent-transactions

A reusable React component for displaying recent transactions with pagination, built with TypeScript and designed to work with shadcn/ui components.

## Installation

```bash
npm install @prix_international/recent-transactions
# or
yarn add @prix_international/recent-transactions
# or
pnpm add @prix_international/recent-transactions
```

## Usage

### Basic Usage

```tsx
import { RecentTransactions } from "@prix_international/recent-transactions";
import type { Transaction } from "@prix_international/recent-transactions";

const transactions: Transaction[] = [
  {
    id: 1,
    type: "deposit",
    status: "completed",
    amount: 1000,
    currency: "COP",
    createdAt: "2024-01-15T10:30:00Z",
  },
  // ... more transactions
];

function MyComponent() {
  return <RecentTransactions transactions={transactions} />;
}
```

### With Custom Components (shadcn/ui)

If you're using shadcn/ui components, you can pass them as props:

```tsx
import { RecentTransactions } from "@prix_international/recent-transactions";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

function MyComponent() {
  return (
    <RecentTransactions
      transactions={transactions}
      components={{
        Card,
        CardHeader,
        CardTitle,
        CardContent,
        Badge,
        Avatar,
        AvatarFallback,
        Pagination,
        PaginationContent,
        PaginationItem,
        PaginationLink,
        PaginationNext,
        PaginationPrevious,
      }}
    />
  );
}
```

### Custom Items Per Page

```tsx
<RecentTransactions transactions={transactions} itemsPerPage={10} />
```

## Props

### RecentTransactionsProps

| Prop           | Type            | Default      | Description                                                  |
| -------------- | --------------- | ------------ | ------------------------------------------------------------ |
| `transactions` | `Transaction[]` | **required** | Array of transactions to display                             |
| `itemsPerPage` | `number`        | `5`          | Number of transactions per page                              |
| `components`   | `object`        | `undefined`  | Custom UI components (Card, Badge, Avatar, Pagination, etc.) |

## Transaction Type

```typescript
interface Transaction {
  id: number;
  uuid?: string;
  type: "deposit" | "withdraw";
  typeLabel?: string;
  status: TransactionStatus;
  amount: number;
  currency: string;
  createdAt?: string;
  updatedAt?: string;
}

type TransactionStatus =
  | "completed"
  | "pending"
  | "failed"
  | "processing"
  | "in_progress"
  | "pending_approval";
```

## Features

- ✅ Pagination support
- ✅ Currency flag display
- ✅ Status badges with icons
- ✅ Responsive design
- ✅ TypeScript support
- ✅ Customizable with shadcn/ui components
- ✅ Format balance with Intl.NumberFormat

## Styling

The component uses Tailwind CSS classes. Make sure you have Tailwind CSS configured in your project. The component expects these utility classes:

- `text-foreground`, `text-muted-foreground`
- `bg-muted/30`, `bg-muted/50`
- Standard Tailwind spacing, colors, and layout utilities

## License

MIT