website refactor

apps/website/components/sponsors/TransactionTable.tsx

@@ -0,0 +1,138 @@
+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>
+  );
+}