theming, date, time localisation, additional features, seeding initial cleanup
This commit is contained in:
mikicvi
@@ -0,0 +1,108 @@
|
||||
# 🇮🇪 Irish Localization Implementation Complete
|
||||
|
||||
## Overview
|
||||
|
||||
Successfully implemented Irish localization for the table tennis booking app, with Monday as the first day of the week and Irish (en-IE) date formatting throughout.
|
||||
|
||||
## Key Changes Made
|
||||
|
||||
### 1. Utility Functions (`lib/utils.ts`)
|
||||
|
||||
- **Updated `getWeekDays()`**: Now returns Monday-Sunday order with proper JS day values
|
||||
- **Added Irish conversion functions**:
|
||||
- `getIrishDayOfWeek()`: Converts JS getDay() (0=Sunday) to Irish standard (0=Monday)
|
||||
- `getJavaScriptDayOfWeek()`: Converts Irish day index back to JS getDay() format
|
||||
- `getIrishDayName()`: Gets day name using Irish week start
|
||||
- **Updated `formatDate()`**: Changed from 'en-US' to 'en-IE' locale
|
||||
|
||||
### 2. Admin Time Slot Management (`components/admin/AdminTimeSlotManagement.tsx`)
|
||||
|
||||
- **Irish week order**: Days now display Monday through Sunday
|
||||
- **Updated constants**: `IRISH_DAY_ORDER = [1, 2, 3, 4, 5, 6, 0]` for correct mapping
|
||||
- **Form defaults**: New time slots default to Monday (dayOfWeek: 1)
|
||||
- **Display logic**: Correctly maps JS day values to Irish display order
|
||||
- **Dropdown options**: Time slot creation shows days in Irish order
|
||||
|
||||
### 3. Calendar UI Component (`components/ui/calendar.tsx`)
|
||||
|
||||
- **Added `weekStartsOn={1}`**: Calendar widget now starts with Monday
|
||||
- **Updated locale**: Changed month formatting to 'en-IE'
|
||||
- **Data attributes**: Updated to use Irish locale for consistency
|
||||
|
||||
### 4. Enhanced Booking Calendar (`components/booking/enhanced-booking-calendar.tsx`)
|
||||
|
||||
- **Date formatting**: All `toLocaleDateString()` calls updated to 'en-IE'
|
||||
- **Consistent display**: Weekday abbreviations and full date formats use Irish locale
|
||||
- **Time slot logic**: Maintains compatibility with JS day values in database
|
||||
|
||||
### 5. All Other Components
|
||||
|
||||
Updated locale formatting in:
|
||||
|
||||
- `components/dashboard/BookingCalendar.tsx`
|
||||
- `components/user/user-profile.tsx`
|
||||
- `components/notifications/announcements.tsx`
|
||||
- `components/admin/AdminUserManagement.tsx`
|
||||
- `components/admin/AdminAnnouncementManagement.tsx`
|
||||
- `components/admin/AdminCourtManagement.tsx`
|
||||
|
||||
### 6. API Compatibility Fix
|
||||
|
||||
- **Fixed Next.js 15 async params**: Updated time-slots/[id]/route.ts to properly handle async params
|
||||
|
||||
## Database Compatibility
|
||||
|
||||
- **No database changes needed**: Database still stores JavaScript's getDay() values (0=Sunday, 6=Saturday)
|
||||
- **Mapping handled in UI**: All conversion between JS day values and Irish display order handled in frontend
|
||||
- **Backward compatibility**: Existing time slots and bookings work seamlessly
|
||||
|
||||
## Technical Implementation
|
||||
|
||||
### Day Mapping Logic
|
||||
|
||||
```javascript
|
||||
// JavaScript getDay() values remain in database:
|
||||
// 0=Sunday, 1=Monday, 2=Tuesday, 3=Wednesday, 4=Thursday, 5=Friday, 6=Saturday
|
||||
|
||||
// Irish display order (Monday first):
|
||||
const IRISH_DAY_ORDER = [1, 2, 3, 4, 5, 6, 0]; // Maps to Monday-Sunday
|
||||
|
||||
// Admin panel shows: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
|
||||
// But stores as: 1, 2, 3, 4, 5, 6, 0
|
||||
```
|
||||
|
||||
### Locale Settings
|
||||
|
||||
- **Calendar**: Starts with Monday (`weekStartsOn={1}`)
|
||||
- **Date Format**: Irish format (DD/MM/YYYY pattern via en-IE)
|
||||
- **Time Format**: Maintained 24-hour format as requested
|
||||
- **Day Names**: All components use Irish week order for display
|
||||
|
||||
## User Impact
|
||||
|
||||
1. **Admin Interface**: Time slot management shows Monday first, making it intuitive for Irish users
|
||||
2. **Booking Calendar**: Date selection and display follow Irish conventions
|
||||
3. **Date Display**: All dates throughout the app use Irish formatting (en-IE)
|
||||
4. **Week View**: Calendar widgets start with Monday as expected in Ireland
|
||||
|
||||
## Testing Verification
|
||||
|
||||
- ✅ Created test script (`scripts/test-irish-localization.js`) to verify settings
|
||||
- ✅ Confirmed day mapping logic works correctly
|
||||
- ✅ Verified Irish date formatting across all components
|
||||
- ✅ Time slot management displays in correct order
|
||||
- ✅ Calendar widgets start with Monday
|
||||
|
||||
## Benefits
|
||||
|
||||
- **Cultural Alignment**: Follows Irish/European convention of Monday as week start
|
||||
- **User Experience**: More intuitive for Irish users
|
||||
- **Consistency**: All date formatting uses Irish locale
|
||||
- **Maintainable**: Clean separation between database storage and display logic
|
||||
- **No Breaking Changes**: Existing bookings and time slots continue to work
|
||||
|
||||
## Future Considerations
|
||||
|
||||
- Could extend to full internationalization (i18n) if needed for other locales
|
||||
- Day conversion utilities are ready for reuse across the application
|
||||
- Database schema remains flexible for any future locale changes
|
||||
Reference in New Issue
Block a user