website refactor

2026-01-17 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions
--- a/apps/website/components/sponsors/SponsorPayoutQueueTable.tsx
+++ b/apps/website/components/sponsors/SponsorPayoutQueueTable.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import React from 'react';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Badge } from '@/ui/Badge';
+import { Stack } from '@/ui/Stack';
+import { 
+  Clock, 
+  CheckCircle2, 
+  AlertCircle,
+  ArrowUpRight,
+  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>
+                <Box 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>
+                </Box>
+              </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>
+  );
+}