108 lines
3.9 KiB
TypeScript
108 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Wallet, Calendar, DollarSign } from 'lucide-react';
|
|
import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
|
|
import { TransactionRow } from '@/components/leagues/TransactionRow';
|
|
import { LeagueMembershipFeesSection } from '@/components/leagues/LeagueMembershipFeesSection';
|
|
|
|
interface LeagueWalletTemplateProps {
|
|
viewData: LeagueWalletViewData;
|
|
}
|
|
|
|
export function LeagueWalletTemplate({ viewData }: LeagueWalletTemplateProps) {
|
|
return (
|
|
<Stack gap={6}>
|
|
<Box>
|
|
<Heading level={2}>League Wallet</Heading>
|
|
<Text size="sm" color="text-gray-400" block mt={1}>
|
|
Financial overview and transaction history
|
|
</Text>
|
|
</Box>
|
|
|
|
<Stack gap={6}>
|
|
{/* Balance Card */}
|
|
<Card>
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Surface variant="muted" rounded="xl" padding={3} bg="bg-blue-500/10">
|
|
<Icon icon={Wallet} size={6} color="#3b82f6" />
|
|
</Surface>
|
|
<Box>
|
|
<Text size="sm" color="text-gray-400" block>Current Balance</Text>
|
|
<Text size="3xl" weight="bold" color="text-white">
|
|
{viewData.formattedBalance}
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
|
|
{/* Transaction History */}
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={2} bg="bg-amber-500/10">
|
|
<Icon icon={Calendar} size={5} color="#10b981" />
|
|
</Surface>
|
|
<Box>
|
|
<Heading level={3}>Transaction History</Heading>
|
|
<Text size="sm" color="text-gray-400">Recent financial activity</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{viewData.transactions.length === 0 ? (
|
|
<Stack align="center" py={8} gap={4}>
|
|
<Icon icon={Wallet} size={12} color="#525252" />
|
|
<Text color="text-gray-400">No transactions yet</Text>
|
|
</Stack>
|
|
) : (
|
|
<Stack gap={3}>
|
|
{viewData.transactions.map((transaction) => (
|
|
<TransactionRow key={transaction.id} transaction={transaction} />
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
|
|
{/* Membership Fees */}
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={2} bg="bg-green-500/10">
|
|
<Icon icon={DollarSign} size={5} color="#10b981" />
|
|
</Surface>
|
|
<Box>
|
|
<Heading level={3}>Membership Fees</Heading>
|
|
<Text size="sm" color="text-gray-400">Configure how drivers pay for participation</Text>
|
|
</Box>
|
|
</Stack>
|
|
<LeagueMembershipFeesSection leagueId={viewData.leagueId} />
|
|
</Stack>
|
|
</Card>
|
|
|
|
{/* Note about features */}
|
|
<Card>
|
|
<Stack align="center" py={8} gap={4}>
|
|
<Surface variant="muted" rounded="full" padding={4} bg="bg-blue-500/10">
|
|
<Icon icon={Wallet} size={8} color="#3b82f6" />
|
|
</Surface>
|
|
<Box textAlign="center">
|
|
<Heading level={3}>Wallet Management</Heading>
|
|
<Text size="sm" color="text-gray-400" block mt={2}>
|
|
Interactive withdrawal and export features will be implemented in future updates.
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|