Part 1 of Booking System — Dynamic Calendar, UTC Logic & Test Coverage

[MrAdder]

✈️ Booking System — Calendar & Filtering Overhaul

📋 Summary

This PR introduces a modernised Bookings Calendar to replace the legacy CTS integration.
It provides an improved UI, UTC-based time handling, dynamic filtering, and a cleanly structured backend with test coverage.

---

💡 Motivation

The previous booking calendar was static, CTS-dependent, and lacked timezone awareness or instant filtering.
This overhaul:

• Delivers a responsive, user-friendly booking calendar.
• Brings full UTC consistency across frontend and backend.
• Lays the groundwork for API exposure and Live Map integration.

---

⚙️ Implementation Details

🧱 Core Features

🗓️ Bookings Calendar View

• Fully interactive calendar in resources/views/site/bookings/index.blade.php
• Past bookings hidden on both server-side and client-side
• Live UTC and Local clocks with timezone offset display
• “Display Old Bookings” toggle for expired sessions
• “Show Times in Local Time” toggle to convert all times to the user’s timezone
• Pill-style legend with colour-coded booking types:
  • 🟩 Normal
  • 🟪 Mentoring
  • 🟧 Seminar
  • 🟫 Exam
  • 🟥 Event
• Real-time JavaScript filtering (instant hide/show, no flashing)

---

⚙️ Backend Enhancements

• New Library: App\Libraries\Bookings

  • Adds isPastUtc() helper for consistent UTC-based expiry logic.
  • Shared between backend rendering and potential API use.

• Updated Repository: App\Repositories\Cts\BookingRepository

  • Unified UTC time formatting via Carbon.
  • Returns Eloquent collections with preformatted attributes.
  • Automatically hides member details for exam (EX) bookings.
  • Includes mentor/exam details when available.
  • Ensures bookings are sorted chronologically by from time.

---

🧪 Automated Tests

Type	File	Purpose
🧩 Unit	tests/Unit/Bookings/BookingsTest.php	Tests Bookings::isPastUtc() logic
🧩 Unit	tests/Unit/CTS/BookingsRepositoryTest.php	Ensures correct formatting, ordering, and privacy
🧩 Feature	tests/Feature/Bookings/CalendarViewPastClassTest.php	Verifies .is-past class rendering in Blade templates

---

🖥️ Frontend Improvements

• Added “Bookings Calendar” to navigation (resources/views/components/nav.blade.php)
• Updated homepage route to use internal calendar
• Localised JS for time filtering and conversion
• Added @yield('scripts') to Blade for page-scoped JavaScript
• Tooltip support for mentor/exam data (future expansion)

---

🧩 Developer Notes

• All times are handled in Zulu (UTC) for consistency.
• Past bookings are filtered before rendering (.is-past class).
• JavaScript instantly hides expired bookings — no flash effect.
• The new logic is testable, isolated, and extensible for APIs.

---

✅ Testing Instructions

1. Run Tests

   php artisan test --filter=Bookings
   php artisan test --filter=BookingRepository
   php artisan test --filter=CalendarViewPastClassTest```
   
   

2. Manual Verification

• Visit /bookings/calendar

• ✅ Past bookings hidden by default

• ✅ “Display Old Bookings” toggle works instantly

• ✅ “Show Times in Local Time” converts correctly

• ✅ Filters by type apply instantly

• ✅ Live Local & UTC clocks update every second

🧾 Changelog Summary

Type	Change
➕ Added	App\Libraries\Bookings for UTC-based past booking checks
➕ Added	Unit + Feature tests for new logic
🧩 Updated	BookingRepository with unified formatting & privacy
🧩 Updated	Blade templates for interactive calendar UI
🧩 Updated	Navigation and homepage to internal route
🧹 Cleanup	Formatting, docblocks, and consistent import structure

---

🗂️ Implementation Diff Summary

Click to expand

Added

• app/Libraries/Bookings.php — Shared UTC logic for expired bookings
• tests/Unit/Bookings/BookingsTest.php — Unit test for isPastUtc()
• tests/Feature/Bookings/CalendarViewPastClassTest.php — Blade render test

Modified

• app/Repositories/Cts/BookingRepository.php
  → Improved formatting, consistent time handling, and privacy logic.
• resources/views/site/bookings/index.blade.php
  → Fully reworked calendar layout and dynamic filtering support.
• resources/views/components/nav.blade.php
  → Added “Bookings Calendar” menu entry.

Support

• Added @yield('scripts') for page-specific JS injection
• New JavaScript logic for:
  • Live time updates
  • Dynamic legend filtering
  • Instant local/UTC toggle
  • Hidden expired sessions on load

---

📸 Visual Overview (optional)

Add these when available:

• 
• 
• 
• 
• 

---

🧭 Next Steps / Future Enhancements

• Integrate mentor/exam tooltips dynamically from repository data
• Add REST API endpoints for booking retrieval
• Extend Live Map overlay to include booking visibility
• Support for multi-day or recurring bookings

---

🧱 Technical Summary

• Centralised UTC date logic in App\Libraries\Bookings
• Repository and Blade code fully decoupled
• 100% compatible with the existing Cts\Booking model
• Tests validate ordering, member visibility, and time accuracy

---

🔖 PR Checklist

• Code linted and formatted
• All PHPUnit tests passing
• Timezone handling verified
• No flash of old bookings
• Frontend and backend parity confirmed

---

[MrAdder]

I need to get the Mentor/Examiner Name and Accepted Date to display on the tooltip. However, I am racking my brains about pulling from the CTS side of things. If any of the maintainers wishes to input, they can.

If the above gets sorted and tested with the correct data, I am happy for it to be pulled in.

However, once the above is done, I am going to implement the Register for interest for Events, as a Controller to help list times a controller is available and for what positions are available in the Admin side of things.

Once that is done the plan is to implement booking directly from the main site.

I do not know if you have anyone whom knows the inner workings of CTS within the team @AxonC if you do can you ask them to help with my first issue of the Mentor/Examiner section of this Comment?

[MrAdder]

This is part 1 of the system, then we can discuss it in #4299 regarding the next phase of development for it

[kristiankunc]

Looks great so far, I'll spin it up locally to get a better feel for the UI

[kristiankunc]

1. When the booking in question is at the bottom of the page, the popover stays mostly hidden on hover

2. When I click on a booking, I can then hover over others which overlays the popovers:

3. Display old bookings seems to be buggy:

• Old bookings hidden

- Old bookings shown

(note that the date is question is in the future so the button should not have any effect on them

4. The booking JSON api exposes names of trainees for mentoring sessions, I'd honestly just scrap the API, the already is one at /api/cts/bookings

5. We should probably stick to the CTS naming eg.

• Sessions: FirstName FirstSurnameLetter (cid)
• Exams/Mentoring: show mentor/examiner full name + (cid)

6. Now that the calendar is in core, I think we could implement permissions where staff members can see names on all bookings while normal users can't

[MrAdder]

@kristiankunc 1 to 3 is done I will double check

4. Adding a system in that will prevent that as eventually want to pull this fully into Core rather than the CTS DB however it will implement 6

5. to be fair when I did it didnt think of naming Conventions

[kristiankunc]

Adding a system in that will prevent that as eventually want to pull this fully into Core rather than the CTS DB however it will implement 6

Not sure what you mean by that? The fact that the data is in the CTS DB should not matter as much and the API you created seems to be redundant and not depended on by the calendar.