Implement Next Scheduled Change Feature with Upcoming Actions List

[codegen-sh]

🚀 Feature Implementation: Next Scheduled Change & Upcoming Actions

This PR implements the requested "next scheduled change" feature along with a comprehensive list of upcoming actions for the pool control system.

✨ New Features

1. Next Scheduled Change Display

• Replaces the "Coming soon..." placeholder with real-time schedule information
• Shows the next mode change with both absolute time (e.g., "4:00 PM") and relative time (e.g., "in 2 hours 15 minutes")
• Handles edge cases like end-of-day transitions (shows tomorrow's first change)
• Includes visual indicators for tomorrow's changes

2. Today's Upcoming Actions List

• New section displaying all remaining scheduled changes for the current day
• Shows each change with:
  • Mode name
  • Scheduled time (12-hour format)
  • Time remaining (short format: "2h 15m")
  • Visual indicators and hover effects

3. Smart Schedule Calculations

• Monthly Adjustments: Properly applies seasonal scaling factors to schedule times
• Real-time Updates: Schedule information refreshes every 10 seconds with the existing state polling
• Consistent Logic: Uses the same monthly adjustment logic as the main scheduler

🛠 Technical Implementation

New Files Created:

• src/app/api/schedule-utils.js - Core schedule calculation utilities
• src/app/api/schedule/route.js - Dedicated schedule API endpoint
• src/app/utils/time-formatting.js - User-friendly time formatting functions

Enhanced Files:

• src/app/api/state/route.js - Now includes schedule data in state responses
• src/app/page.js - Updated UI to display schedule information

🎯 Key Functions

Schedule Utilities:

• getNextScheduledChange() - Finds the next scheduled mode change
• getUpcomingChanges() - Returns all remaining changes for the day
• applyMonthlyAdjustment() - Applies seasonal scaling to schedule times
• getCurrentScheduledMode() - Determines current mode based on schedule

Time Formatting:

• formatTimeUntil() - "in 2 hours 15 minutes" format
• formatTime12Hour() - "4:30 PM" format
• getShortTimeUntil() - "2h 15m" compact format

🎨 UI Enhancements

Next Scheduled Change Card:

• Clean, informative display showing next mode and timing
• Color-coded indicators for immediate vs. future changes
• Special handling for tomorrow's changes

Upcoming Actions Section:

• Purple gradient header for visual distinction
• List of all remaining changes with hover effects
• Responsive design for mobile and desktop
• Automatically hides when no more changes are scheduled

🔄 Integration

• Seamless Integration: Uses existing state polling mechanism (every 10 seconds)
• No Breaking Changes: All existing functionality remains unchanged
• Consistent Styling: Matches existing design patterns and color scheme
• Error Handling: Graceful fallbacks when schedule data is unavailable

📱 User Experience

• Real-time Updates: Schedule information updates automatically
• Mobile Friendly: Responsive design works on all screen sizes
• Intuitive Display: Clear, easy-to-read time formats
• Visual Hierarchy: Important information is prominently displayed

🧪 Testing

The implementation handles various edge cases:

• ✅ End of day transitions (next change tomorrow)
• ✅ Monthly adjustment calculations
• ✅ Empty schedule scenarios
• ✅ Real-time updates and polling
• ✅ Mobile responsive design

📸 Preview

The feature provides users with:

1. Immediate visibility into the next scheduled change
2. Full day overview of all upcoming actions
3. Time awareness with both absolute and relative time displays
4. Seasonal accuracy through monthly adjustment integration

This enhancement significantly improves the user experience by providing proactive schedule visibility, helping users understand when the pool system will change modes throughout the day.

---

💻 View my work • About Codegen