97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import {
|
|
AlertCircle,
|
|
ArrowUpRight,
|
|
CheckCircle2,
|
|
Clock,
|
|
DollarSign
|
|
} from 'lucide-react';
|
|
|
|
export interface PayoutItem {
|
|
id: string;
|
|
date: string;
|
|
amount: string;
|
|
status: 'pending' | 'processing' | 'completed' | 'failed';
|
|
recipient: string;
|
|
description: string;
|
|
}
|
|
|
|
interface SponsorPayoutQueueTableProps {
|
|
payouts: PayoutItem[];
|
|
}
|
|
|
|
const STATUS_CONFIG = {
|
|
pending: { icon: Clock, color: 'text-warning-amber', label: 'Pending' },
|
|
processing: { icon: ArrowUpRight, color: 'text-primary-blue', label: 'Processing' },
|
|
completed: { icon: CheckCircle2, color: 'text-performance-green', label: 'Completed' },
|
|
failed: { icon: AlertCircle, color: 'text-racing-red', label: 'Failed' },
|
|
};
|
|
|
|
/**
|
|
* SponsorPayoutQueueTable
|
|
*
|
|
* High-density table for tracking sponsorship payouts and financial transactions.
|
|
*/
|
|
export function SponsorPayoutQueueTable({ payouts }: SponsorPayoutQueueTableProps) {
|
|
return (
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>Date</TableHeader>
|
|
<TableHeader>Recipient</TableHeader>
|
|
<TableHeader>Description</TableHeader>
|
|
<TableHeader textAlign="right">Amount</TableHeader>
|
|
<TableHeader textAlign="center">Status</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{payouts.map((payout) => {
|
|
const status = STATUS_CONFIG[payout.status];
|
|
return (
|
|
<TableRow key={payout.id}>
|
|
<TableCell>
|
|
<Text size="sm" color="text-gray-300">{payout.date}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text size="sm" weight="medium" color="text-white">{payout.recipient}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text size="sm" color="text-gray-400">{payout.description}</Text>
|
|
</TableCell>
|
|
<TableCell textAlign="right">
|
|
<Stack direction="row" align="center" justify="end" gap={1}>
|
|
<Icon icon={DollarSign} size={3} color="text-gray-500" />
|
|
<Text size="sm" weight="bold" color="text-white">{payout.amount}</Text>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Stack display="flex" justifyContent="center">
|
|
<Badge variant={payout.status === 'completed' ? 'success' : payout.status === 'failed' ? 'danger' : 'warning'}>
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Icon icon={status.icon} size={3} />
|
|
<Text size="xs" weight="bold" uppercase letterSpacing="wider">{status.label}</Text>
|
|
</Stack>
|
|
</Badge>
|
|
</Stack>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})}
|
|
{payouts.length === 0 && (
|
|
<TableRow>
|
|
<TableCell colSpan={5} textAlign="center" py={12}>
|
|
<Text color="text-gray-500">No payouts in queue</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
}
|