wip

apps/website/templates/LeagueWalletTemplate.tsx

@@ -8,9 +8,10 @@ import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Surface } from '@/ui/Surface';
-import { Wallet, Calendar } from 'lucide-react';
+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;
@@ -70,6 +71,22 @@ export function LeagueWalletTemplate({ viewData }: LeagueWalletTemplateProps) {
           </Stack>
         </Card>
 
+        {/* Membership Fees */}
+        <Card>
+          <Stack gap={4}>
+            <Stack direction="row" align="center" gap={3}>
+              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
+                <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}>