feat(app): dedicated Tijdsloten tab with grouped view and fill rates

Extract time slots from Secties & Shifts into a dedicated Tijdsloten tab.
New tab groups time slots by date with Dutch date headers, person type
filter pills, fill rate progress bars, and sections count. Includes
duplicate, edit, and delete actions with confirmation dialog.

- Create types/timeSlot.ts with enriched TimeSlot interface
- Add Tijdsloten tab to EventTabsNav between Publiekslijsten and Secties
- Create time-slots page with loading, error, and empty states
- Remove time slots panel from SectionsShiftsPanel
- Update CreateShiftDialog to navigate to time slots tab

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-10 15:47:36 +02:00
parent d9f99a4cf1
commit e70904741d
10 changed files with 525 additions and 520 deletions

View File

@@ -54,6 +54,7 @@ const baseTabs = [
{ label: 'Overzicht', icon: 'tabler-layout-dashboard', route: 'events-id' },
{ label: 'Personen', icon: 'tabler-users', route: 'events-id-persons' },
{ label: 'Publiekslijsten', icon: 'tabler-list', route: 'events-id-crowd-lists' },
{ label: 'Tijdsloten', icon: 'tabler-clock', route: 'events-id-time-slots' },
{ label: 'Secties & Shifts', icon: 'tabler-layout-grid', route: 'events-id-sections' },
{ label: 'Artiesten', icon: 'tabler-music', route: 'events-id-artists' },
{ label: 'Briefings', icon: 'tabler-mail', route: 'events-id-briefings' },
@@ -71,7 +72,7 @@ const programmaonderdelenLabel = computed(() => {
const tabs = computed(() => {
if (!event.value?.is_festival) return baseTabs
// Festival tab order: Overzicht | Programmaonderdelen | Secties & Shifts | Personen | Publiekslijsten | Artiesten | Briefings | Instellingen
// Festival tab order: Overzicht | Programmaonderdelen | Tijdsloten | Secties & Shifts | Personen | Publiekslijsten | Artiesten | Briefings | Instellingen
const festivalTab = {
label: programmaonderdelenLabel.value,
icon: 'tabler-calendar-event',
@@ -81,12 +82,13 @@ const tabs = computed(() => {
return [
baseTabs[0], // Overzicht
festivalTab,
baseTabs[3], // Secties & Shifts
baseTabs[3], // Tijdsloten
baseTabs[4], // Secties & Shifts
baseTabs[1], // Personen
baseTabs[2], // Publiekslijsten
baseTabs[4], // Artiesten
baseTabs[5], // Briefings
baseTabs[6], // Instellingen
baseTabs[5], // Artiesten
baseTabs[6], // Briefings
baseTabs[7], // Instellingen
]
})