137 lines
4.7 KiB
TypeScript
137 lines
4.7 KiB
TypeScript
import { Button } from '@/ui/Button';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { AlertTriangle, Check, Clock, Download, Receipt } from 'lucide-react';
|
|
|
|
export interface Transaction {
|
|
id: string;
|
|
formattedDate: string;
|
|
description: string;
|
|
formattedAmount: string;
|
|
status: 'paid' | 'pending' | 'overdue' | 'failed';
|
|
invoiceNumber: string;
|
|
type: string;
|
|
}
|
|
|
|
interface TransactionTableProps {
|
|
transactions: Transaction[];
|
|
onDownload?: (id: string) => void;
|
|
}
|
|
|
|
const STATUS_CONFIG = {
|
|
paid: {
|
|
icon: Check,
|
|
label: 'Paid',
|
|
color: 'text-performance-green',
|
|
bg: 'bg-performance-green/10',
|
|
border: 'border-performance-green/30'
|
|
},
|
|
pending: {
|
|
icon: Clock,
|
|
label: 'Pending',
|
|
color: 'text-warning-amber',
|
|
bg: 'bg-warning-amber/10',
|
|
border: 'border-warning-amber/30'
|
|
},
|
|
overdue: {
|
|
icon: AlertTriangle,
|
|
label: 'Overdue',
|
|
color: 'text-racing-red',
|
|
bg: 'bg-racing-red/10',
|
|
border: 'border-racing-red/30'
|
|
},
|
|
failed: {
|
|
icon: AlertTriangle,
|
|
label: 'Failed',
|
|
color: 'text-racing-red',
|
|
bg: 'bg-racing-red/10',
|
|
border: 'border-racing-red/30'
|
|
},
|
|
};
|
|
|
|
/**
|
|
* TransactionTable
|
|
*
|
|
* A semantic table for displaying financial transactions.
|
|
* Dense layout with thin dividers, optimized for ops panels.
|
|
*/
|
|
export function TransactionTable({ transactions, onDownload }: TransactionTableProps) {
|
|
return (
|
|
<Stack border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
|
|
<Grid className="hidden md:grid" cols={12} gap={4} p={4} bg="bg-iron-gray/30" borderBottom borderColor="border-charcoal-outline/50">
|
|
<Stack colSpan={5}>
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Description</Text>
|
|
</Stack>
|
|
<Stack colSpan={2}>
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Date</Text>
|
|
</Stack>
|
|
<Stack colSpan={2}>
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Amount</Text>
|
|
</Stack>
|
|
<Stack colSpan={2}>
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Status</Text>
|
|
</Stack>
|
|
<Stack colSpan={1} textAlign="right">
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Action</Text>
|
|
</Stack>
|
|
</Grid>
|
|
|
|
<Stack>
|
|
{transactions.map((tx, index) => {
|
|
const status = STATUS_CONFIG[tx.status];
|
|
return (
|
|
<Grid
|
|
key={tx.id}
|
|
cols={{ base: 1, md: 12 }}
|
|
gap={4}
|
|
p={4}
|
|
alignItems="center"
|
|
borderBottom={index !== transactions.length - 1}
|
|
borderColor="border-charcoal-outline/30"
|
|
className="transition-colors hover:bg-bg-iron-gray/20"
|
|
>
|
|
<Stack colSpan={{ base: 1, md: 5 } as any} direction="row" align="center" gap={3}>
|
|
<Stack w="8" h="8" rounded="lg" bg="bg-iron-gray/50" align="center" justify="center">
|
|
<Icon icon={Receipt} size={4} color="text-gray-400" />
|
|
</Stack>
|
|
<Stack>
|
|
<Text weight="medium" color="text-white" block>{tx.description}</Text>
|
|
<Text size="xs" color="text-gray-500">{tx.invoiceNumber} • {tx.type}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack colSpan={{ base: 1, md: 2 } as any}>
|
|
<Text size="sm" color="text-gray-400">{tx.formattedDate}</Text>
|
|
</Stack>
|
|
|
|
<Stack colSpan={{ base: 1, md: 2 } as any}>
|
|
<Text weight="semibold" color="text-white">{tx.formattedAmount}</Text>
|
|
</Stack>
|
|
|
|
<Stack colSpan={{ base: 1, md: 2 } as any}>
|
|
<Stack direction="row" align="center" gap={1.5} px={2} py={0.5} rounded="full" bg={status.bg} border borderColor={status.border}>
|
|
<Icon icon={status.icon} size={3} color={status.color as any} />
|
|
<Text size="xs" weight="medium" color={status.color as any}>{status.label}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack colSpan={{ base: 1, md: 1 } as any} textAlign="right">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onDownload?.(tx.id)}
|
|
icon={<Icon icon={Download} size={3} />}
|
|
>
|
|
PDF
|
|
</Button>
|
|
</Stack>
|
|
</Grid>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|