website refactor

apps/website/components/leagues/LeagueSponsorshipsSection.tsx

@@ -2,13 +2,20 @@
 
 import { Award, DollarSign, Star, X } from 'lucide-react';
 import { useState } from 'react';
-import PendingSponsorshipRequests, { type PendingRequestDTO } from '../sponsors/PendingSponsorshipRequests';
-import Button from '../ui/Button';
-import Input from '../ui/Input';
+import { PendingSponsorshipRequests } from '../sponsors/PendingSponsorshipRequests';
+import { Button } from '@/ui/Button';
+import { Input } from '@/ui/Input';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { Badge } from '@/ui/Badge';
+import { StatBox } from '@/ui/StatBox';
 
-import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
-import { useLeagueSeasons } from "@/lib/hooks/league/useLeagueSeasons";
-import { useSponsorshipRequests } from "@/lib/hooks/league/useSponsorshipRequests";
+import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
+import { useLeagueSeasons } from "@/hooks/league/useLeagueSeasons";
+import { useSponsorshipRequests } from "@/hooks/league/useSponsorshipRequests";
 import { useInject } from '@/lib/di/hooks/useInject';
 import { SPONSOR_SERVICE_TOKEN } from '@/lib/di/tokens';
 
@@ -43,12 +50,13 @@ export function LeagueSponsorshipsSection({
   const [tempPrice, setTempPrice] = useState<string>('');
 
   // Load season ID if not provided
-  const { data: seasons = [], isLoading: seasonsLoading } = useLeagueSeasons(leagueId);
+  const { data: seasons = [] } = useLeagueSeasons(leagueId);
   const activeSeason = seasons.find((s) => s.status === 'active') ?? seasons[0];
   const seasonId = propSeasonId || activeSeason?.seasonId;
 
   // Load pending sponsorship requests
-  const { data: pendingRequests = [], isLoading: requestsLoading, refetch: refetchRequests } = useSponsorshipRequests('season', seasonId || '');
+  const { data: pendingRequestsData, isLoading: requestsLoading, refetch: refetchRequests } = useSponsorshipRequests('season', seasonId || '');
+  const pendingRequests = pendingRequestsData?.requests || [];
 
   const handleAcceptRequest = async (requestId: string) => {
     if (!currentDriverId) return;
@@ -107,107 +115,111 @@ export function LeagueSponsorshipsSection({
   const netRevenue = totalRevenue - platformFee;
 
   const availableSlots = slots.filter(s => !s.isOccupied).length;
-  const occupiedSlots = slots.filter(s => s.isOccupied).length;
 
   return (
-    <div className="space-y-6">
+    <Stack gap={6}>
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-semibold text-white">Sponsorships</h3>
-          <p className="text-sm text-gray-400 mt-1">
+      <Box display="flex" alignItems="center" justifyContent="between">
+        <Box>
+          <Heading level={3}>Sponsorships</Heading>
+          <Text size="sm" color="text-gray-400" mt={1} block>
             Define pricing for sponsor slots in this league. Sponsors pay per season.
-          </p>
-          <p className="text-xs text-gray-500 mt-1">
+          </Text>
+          <Text size="xs" color="text-gray-500" mt={1} block>
             These sponsors are attached to seasons in this league, so you can change partners from season to season.
-          </p>
-        </div>
+          </Text>
+        </Box>
         {!readOnly && (
-          <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-blue/10 border border-primary-blue/30">
-            <DollarSign className="w-4 h-4 text-primary-blue" />
-            <span className="text-xs font-medium text-primary-blue">
+          <Box display="flex" alignItems="center" gap={2} px={3} py={1.5} rounded="full" bg="bg-primary-blue/10" border borderColor="border-primary-blue/30">
+            <Icon icon={DollarSign} size={4} color="var(--primary-blue)" />
+            <Text size="xs" weight="medium" color="text-primary-blue">
               {availableSlots} slot{availableSlots !== 1 ? 's' : ''} available
-            </span>
-          </div>
+            </Text>
+          </Box>
         )}
-      </div>
+      </Box>
 
       {/* Revenue Summary */}
       {totalRevenue > 0 && (
-        <div className="grid grid-cols-3 gap-4">
-          <div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
-            <div className="text-xs text-gray-400 mb-1">Total Revenue</div>
-            <div className="text-xl font-bold text-white">
-              ${totalRevenue.toFixed(2)}
-            </div>
-          </div>
-          <div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
-            <div className="text-xs text-gray-400 mb-1">Platform Fee (10%)</div>
-            <div className="text-xl font-bold text-warning-amber">
-              -${platformFee.toFixed(2)}
-            </div>
-          </div>
-          <div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
-            <div className="text-xs text-gray-400 mb-1">Net Revenue</div>
-            <div className="text-xl font-bold text-performance-green">
-              ${netRevenue.toFixed(2)}
-            </div>
-          </div>
-        </div>
+        <Box display="grid" gridCols={3} gap={4}>
+          <StatBox
+            icon={DollarSign}
+            label="Total Revenue"
+            value={`$${totalRevenue.toFixed(2)}`}
+            color="var(--primary-blue)"
+          />
+          <StatBox
+            icon={DollarSign}
+            label="Platform Fee (10%)"
+            value={`-$${platformFee.toFixed(2)}`}
+            color="var(--warning-amber)"
+          />
+          <StatBox
+            icon={DollarSign}
+            label="Net Revenue"
+            value={`$${netRevenue.toFixed(2)}`}
+            color="var(--performance-green)"
+          />
+        </Box>
       )}
 
       {/* Sponsorship Slots */}
-      <div className="space-y-3">
+      <Stack gap={3}>
         {slots.map((slot, index) => {
           const isEditing = editingIndex === index;
-          const Icon = slot.tier === 'main' ? Star : Award;
+          const IconComp = slot.tier === 'main' ? Star : Award;
           
           return (
-            <div
+            <Box
               key={index}
-              className="rounded-lg border border-charcoal-outline bg-deep-graphite/70 p-4"
+              rounded="lg"
+              border
+              borderColor="border-charcoal-outline"
+              bg="bg-deep-graphite/70"
+              p={4}
             >
-              <div className="flex items-center justify-between gap-4">
-                <div className="flex items-center gap-3 flex-1">
-                  <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${
-                    slot.tier === 'main' 
-                      ? 'bg-primary-blue/10' 
-                      : 'bg-gray-500/10'
-                  }`}>
-                    <Icon className={`w-5 h-5 ${
-                      slot.tier === 'main' 
-                        ? 'text-primary-blue' 
-                        : 'text-gray-400'
-                    }`} />
-                  </div>
+              <Box display="flex" alignItems="center" justifyContent="between" gap={4}>
+                <Box display="flex" alignItems="center" gap={3} flexGrow={1}>
+                  <Box 
+                    display="flex" 
+                    h="10" 
+                    w="10" 
+                    alignItems="center" 
+                    justifyContent="center" 
+                    rounded="lg" 
+                    bg={slot.tier === 'main' ? 'bg-primary-blue/10' : 'bg-gray-500/10'}
+                  >
+                    <Icon icon={IconComp} size={5} color={slot.tier === 'main' ? 'var(--primary-blue)' : 'var(--gray-400)'} />
+                  </Box>
                   
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      <h4 className="text-sm font-semibold text-white">
+                  <Box flexGrow={1}>
+                    <Box display="flex" alignItems="center" gap={2}>
+                      <Heading level={4}>
                         {slot.tier === 'main' ? 'Main Sponsor' : 'Secondary Sponsor'}
-                      </h4>
+                      </Heading>
                       {slot.isOccupied && (
-                        <span className="px-2 py-0.5 text-xs bg-performance-green/10 text-performance-green border border-performance-green/30 rounded-full">
+                        <Badge variant="success">
                           Occupied
-                        </span>
+                        </Badge>
                       )}
-                    </div>
-                    <p className="text-xs text-gray-500 mt-0.5">
+                    </Box>
+                    <Text size="xs" color="text-gray-500" mt={0.5} block>
                       {slot.tier === 'main' 
                         ? 'Big livery slot • League page logo • Name in league title'
                         : 'Small livery slot • League page logo'}
-                    </p>
-                  </div>
-                </div>
+                    </Text>
+                  </Box>
+                </Box>
 
-                <div className="flex items-center gap-3">
+                <Box display="flex" alignItems="center" gap={3}>
                   {isEditing ? (
-                    <div className="flex items-center gap-2">
+                    <Box display="flex" alignItems="center" gap={2}>
                       <Input
                         type="number"
                         value={tempPrice}
-                        onChange={(e) => setTempPrice(e.target.value)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTempPrice(e.target.value)}
                         placeholder="Price"
+                        // eslint-disable-next-line gridpilot-rules/component-classification
                         className="w-32"
                         min="0"
                         step="0.01"
@@ -215,47 +227,47 @@ export function LeagueSponsorshipsSection({
                       <Button
                         variant="primary"
                         onClick={() => handleSavePrice(index)}
-                        className="px-3 py-1"
+                        size="sm"
                       >
                         Save
                       </Button>
                       <Button
                         variant="secondary"
                         onClick={handleCancelEdit}
-                        className="px-3 py-1"
+                        size="sm"
                       >
-                        <X className="w-4 h-4" />
+                        <Icon icon={X} size={4} />
                       </Button>
-                    </div>
+                    </Box>
                   ) : (
                     <>
-                      <div className="text-right">
-                        <div className="text-lg font-bold text-white">
+                      <Box textAlign="right">
+                        <Text size="lg" weight="bold" color="text-white" block>
                           ${slot.price.toFixed(2)}
-                        </div>
-                        <div className="text-xs text-gray-500">per season</div>
-                      </div>
+                        </Text>
+                        <Text size="xs" color="text-gray-500" block>per season</Text>
+                      </Box>
                       {!readOnly && !slot.isOccupied && (
                         <Button
                           variant="secondary"
                           onClick={() => handleEditPrice(index)}
-                          className="px-3 py-1"
+                          size="sm"
                         >
                           Edit Price
                         </Button>
                       )}
                     </>
                   )}
-                </div>
-              </div>
-            </div>
+                </Box>
+              </Box>
+            </Box>
           );
         })}
-      </div>
+      </Stack>
 
       {/* Pending Sponsorship Requests */}
       {!readOnly && (pendingRequests.length > 0 || requestsLoading) && (
-        <div className="mt-8 pt-6 border-t border-charcoal-outline">
+        <Box mt={8} pt={6} borderTop borderColor="border-charcoal-outline">
           <PendingSponsorshipRequests
             entityType="season"
             entityId={seasonId || ''}
@@ -265,16 +277,16 @@ export function LeagueSponsorshipsSection({
             onReject={handleRejectRequest}
             isLoading={requestsLoading}
           />
-        </div>
+        </Box>
       )}
 
       {/* Alpha Notice */}
-      <div className="rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
-        <p className="text-xs text-gray-400">
-          <strong className="text-warning-amber">Alpha Note:</strong> Sponsorship management is demonstration-only.
+      <Box rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30" p={4}>
+        <Text size="xs" color="text-gray-400" block>
+          <Text weight="bold" color="text-warning-amber">Alpha Note:</Text> Sponsorship management is demonstration-only.
           In production, sponsors can browse leagues, select slots, and complete payment integration.
-        </p>
-      </div>
-    </div>
+        </Text>
+      </Box>
+    </Stack>
   );
 }