website refactor

apps/website/templates/AdminUsersTemplate.tsx

@@ -12,6 +12,7 @@ import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
 import { StatusBadge } from '@/ui/StatusBadge';
 import { InfoBox } from '@/ui/InfoBox';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 import {
   RefreshCw,
   Shield,
@@ -193,7 +194,7 @@ export function AdminUsersTemplate({
                     </TableCell>
                     <TableCell>
                       <Text size="sm" color="text-gray-400">
-                        {user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleDateString() : 'Never'}
+                        {user.lastLoginAt ? DateDisplay.formatShort(user.lastLoginAt) : 'Never'}
                       </Text>
                     </TableCell>
                     <TableCell>

apps/website/templates/DriversTemplate.tsx

@@ -24,6 +24,7 @@ import { RecentActivity } from '@/components/feed/RecentActivity';
 import { PageHero } from '@/ui/PageHero';
 import { DriversSearch } from '@/ui/DriversSearch';
 import { EmptyState } from '@/components/shared/state/EmptyState';
+import { NumberDisplay } from '@/lib/display-objects/NumberDisplay';
 import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
 
 interface DriversTemplateProps {
@@ -62,8 +63,8 @@ export function DriversTemplate({
           stats={[
             { label: 'drivers', value: drivers.length, color: 'text-primary-blue' },
             { label: 'active', value: activeCount, color: 'text-performance-green', animate: true },
-            { label: 'total wins', value: totalWins.toLocaleString(), color: 'text-warning-amber' },
-            { label: 'races', value: totalRaces.toLocaleString(), color: 'text-neon-aqua' },
+            { label: 'total wins', value: NumberDisplay.format(totalWins), color: 'text-warning-amber' },
+            { label: 'races', value: NumberDisplay.format(totalRaces), color: 'text-neon-aqua' },
           ]}
           actions={[
             {

apps/website/templates/LeagueSettingsTemplate.tsx

@@ -11,6 +11,7 @@ import { GridItem } from '@/ui/GridItem';
 import { Icon } from '@/ui/Icon';
 import { Surface } from '@/ui/Surface';
 import { Settings, Users, Trophy, Shield, Clock, LucideIcon } from 'lucide-react';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 import type { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';
 
 interface LeagueSettingsTemplateProps {
@@ -47,7 +48,7 @@ export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps
               <GridItem colSpan={2}>
                 <InfoItem label="Description" value={viewData.league.description} />
               </GridItem>
-              <InfoItem label="Created" value={new Date(viewData.league.createdAt).toLocaleDateString()} />
+              <InfoItem label="Created" value={DateDisplay.formatShort(viewData.league.createdAt)} />
               <InfoItem label="Owner ID" value={viewData.league.ownerId} />
             </Grid>
           </Stack>

apps/website/templates/RaceResultsTemplate.tsx

@@ -13,6 +13,7 @@ import { Grid } from '@/ui/Grid';
 import { Icon } from '@/ui/Icon';
 import { Surface } from '@/ui/Surface';
 import { ArrowLeft, Trophy, Zap, type LucideIcon } from 'lucide-react';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 import type { RaceResultsViewData } from '@/lib/view-data/races/RaceResultsViewData';
 import { RaceResultRow } from '@/components/races/RaceResultRow';
 import { RacePenaltyRow } from '@/ui/RacePenaltyRowWrapper';
@@ -45,12 +46,7 @@ export function RaceResultsTemplate({
   importError,
 }: RaceResultsTemplateProps) {
   const formatDate = (date: string) => {
-    return new Date(date).toLocaleDateString('en-US', {
-      weekday: 'long',
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric',
-    });
+    return DateDisplay.formatFull(date);
   };
 
   const formatTime = (ms: number) => {

apps/website/templates/RaceStewardingTemplate.tsx

@@ -23,6 +23,7 @@ import {
   Gavel,
   Scale,
 } from 'lucide-react';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 import type { RaceStewardingViewData } from '@/lib/view-data/races/RaceStewardingViewData';
 
 export type StewardingTab = 'pending' | 'resolved' | 'penalties';
@@ -51,11 +52,7 @@ export function RaceStewardingTemplate({
   setActiveTab,
 }: RaceStewardingTemplateProps) {
   const formatDate = (date: string) => {
-    return new Date(date).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
+    return DateDisplay.formatShort(date);
   };
 
   if (isLoading) {

apps/website/templates/SponsorLeagueDetailTemplate.tsx

@@ -30,6 +30,7 @@ import { Surface } from '@/ui/Surface';
 import { Icon } from '@/ui/Icon';
 import { Badge } from '@/ui/Badge';
 import { SponsorTierCard } from '@/components/sponsors/SponsorTierCard';
+import { NumberDisplay } from '@/lib/display-objects/NumberDisplay';
 import { siteConfig } from '@/lib/siteConfig';
 import { routes } from '@/lib/routing/RouteConfig';
 
@@ -320,7 +321,7 @@ export function SponsorLeagueDetailTemplate({
                     <Box>
                       {race.status === 'completed' ? (
                         <Box textAlign="right">
-                          <Text weight="semibold" color="text-white" block>{race.views.toLocaleString()}</Text>
+                          <Text weight="semibold" color="text-white" block>{NumberDisplay.format(race.views)}</Text>
                           <Text size="xs" color="text-gray-500">views</Text>
                         </Box>
                       ) : (

apps/website/templates/SponsorshipRequestsTemplate.tsx

@@ -9,6 +9,7 @@ import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Surface } from '@/ui/Surface';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
 
 export interface SponsorshipRequestsTemplateProps {
@@ -61,7 +62,7 @@ export function SponsorshipRequestsTemplate({
                             <Text size="xs" color="text-gray-400" block mt={1}>{request.message}</Text>
                           )}
                           <Text size="xs" color="text-gray-500" block mt={2}>
-                            {new Date(request.createdAtIso).toLocaleDateString()}
+                            {DateDisplay.formatShort(request.createdAtIso)}
                           </Text>
                         </Box>
                         <Stack direction="row" gap={2}>

apps/website/templates/TeamDetailTemplate.tsx

@@ -15,6 +15,7 @@ import { Heading } from '@/ui/Heading';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { HorizontalStatItem } from '@/ui/HorizontalStatItem';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 
 import { TeamAdmin } from '@/components/teams/TeamAdmin';
 import { TeamHero } from '@/components/teams/TeamHero';
@@ -169,10 +170,7 @@ export function TeamDetailTemplate({
                       {team.createdAt && (
                         <HorizontalStatItem
                           label="Founded"
-                          value={new Date(team.createdAt).toLocaleDateString('en-US', {
-                            month: 'short',
-                            year: 'numeric',
-                          })}
+                          value={DateDisplay.formatMonthYear(team.createdAt)}
                           color="text-gray-300"
                         />
                       )}