139 lines
4.8 KiB
TypeScript
139 lines
4.8 KiB
TypeScript
import React from 'react';
|
|
import { Box, BoxProps } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Button } from '@/ui/Button';
|
|
import { Download, Receipt, Clock, Check, AlertTriangle } from 'lucide-react';
|
|
|
|
export interface Transaction {
|
|
id: string;
|
|
date: string;
|
|
description: string;
|
|
amount: number;
|
|
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 (
|
|
<Box border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
|
|
<Box display={{ base: 'none', md: 'grid' }} gridCols={12} gap={4} p={4} bg="bg-iron-gray/30" borderBottom borderColor="border-charcoal-outline/50">
|
|
<Box colSpan={5}>
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Description</Text>
|
|
</Box>
|
|
<Box colSpan={2}>
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Date</Text>
|
|
</Box>
|
|
<Box colSpan={2}>
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Amount</Text>
|
|
</Box>
|
|
<Box colSpan={2}>
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Status</Text>
|
|
</Box>
|
|
<Box colSpan={1} textAlign="right">
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Action</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box>
|
|
{transactions.map((tx, index) => {
|
|
const status = STATUS_CONFIG[tx.status];
|
|
return (
|
|
<Box
|
|
key={tx.id}
|
|
display="grid"
|
|
gridCols={{ base: 1, md: 12 }}
|
|
gap={4}
|
|
p={4}
|
|
alignItems="center"
|
|
borderBottom={index !== transactions.length - 1}
|
|
borderColor="border-charcoal-outline/30"
|
|
hoverBg="bg-iron-gray/20"
|
|
transition-colors
|
|
>
|
|
<Box colSpan={{ base: 1, md: 5 }} display="flex" alignItems="center" gap={3}>
|
|
<Box w="8" h="8" rounded="lg" bg="bg-iron-gray/50" display="flex" alignItems="center" justifyContent="center">
|
|
<Icon icon={Receipt} size={4} color="text-gray-400" />
|
|
</Box>
|
|
<Box>
|
|
<Text weight="medium" color="text-white" block>{tx.description}</Text>
|
|
<Text size="xs" color="text-gray-500">{tx.invoiceNumber} • {tx.type}</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box colSpan={{ base: 1, md: 2 }}>
|
|
<Text size="sm" color="text-gray-400">{new Date(tx.date).toLocaleDateString()}</Text>
|
|
</Box>
|
|
|
|
<Box colSpan={{ base: 1, md: 2 }}>
|
|
<Text weight="semibold" color="text-white">${tx.amount.toFixed(2)}</Text>
|
|
</Box>
|
|
|
|
<Box colSpan={{ base: 1, md: 2 }}>
|
|
<Box display="inline-flex" alignItems="center" gap={1.5} px={2} py={0.5} rounded="full" bg={status.bg as BoxProps<'div'>['bg']} border borderColor={status.border as BoxProps<'div'>['borderColor']}>
|
|
<Icon icon={status.icon} size={3} color={status.color as any} />
|
|
<Text size="xs" weight="medium" color={status.color as any}>{status.label}</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box colSpan={{ base: 1, md: 1 }} textAlign="right">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onDownload?.(tx.id)}
|
|
icon={<Icon icon={Download} size={3} />}
|
|
>
|
|
PDF
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|