Grafik — widok dnia (recepcja)

Widok dnia w Grafiku pokazuje jedną kolumnę na każdy kort wybranej lokalizacji. Jest to główny ekran pracy recepcji, dlatego jest zoptymalizowany pod szybkie odczytanie „co, kiedy i na którym korcie”.

👤 Instrukcja dla pracownika (Recepcja / Administracja)

Nagłówek z kortami zostaje na miejscu

Wiersz z nazwami kortów (np. Hala 2 (Dywan)) jest przypięty do góry siatki. Po zescrollowaniu do późniejszych godzin nagłówek nie znika — zawsze widać, która kolumna jest którym kortem. Przewija się wyłącznie siatka godzin; kolumna z godzinami po lewej również pozostaje widoczna przy przewijaniu w poziomie.

Nazwa kortu w nagłówku ma format nazwa (nawierzchnia), np. Hala 2 (Dywan). Nawierzchnia pojawia się tylko wtedy, gdy jest ustawiona w konfiguracji kortu.

Kafelki zajęć są skrócone

Kafelek zajęć w widoku dnia pokazuje:

• nazwę zajęć (lub uczestnika przy rezerwacji kortu),
• godziny,
• prowadzącego,
• ikony statusu (płatności, seria cykliczna, notatka, lista uczestników).

Kort nie jest powtarzany na kafelku — wynika on z kolumny, w której kafelek się znajduje. Pełna informacja o korcie (nazwa · nawierzchnia) jest dostępna w podpowiedzi po najechaniu kursorem na kafelek.

Opis kortu (np. Centrum Tenisowe AcePark Opole) nie jest już pokazywany na kafelkach kalendarza — dla recepcji jest to informacja redundantna, bo widok jest już zawężony do jednej lokalizacji. Opis pozostaje widoczny w Ustawieniach kortów oraz w mailach potwierdzających rezerwację.

🛠 Dokumentacja techniczna

Komponenty

Plik	Rola
app/(dashboard)/dashboard/schedule/components/BookingClient.tsx	Konfiguracja react-big-calendar, mapowanie kortów na resources
app/(dashboard)/dashboard/schedule/components/ScheduleCalendarComponents.tsx	CustomEvent — zawartość kafelka, osobne warianty dla day / month
app/(dashboard)/dashboard/schedule/components/schedule-helpers.ts	formatCourtDisplay — nazwa · nawierzchnia
components/ui/bigCalendar.tsx	Wrapper react-big-calendar (wrapperClassName dla kontroli layoutu)
app/globals.css	Reguły .schedule-view-day

Dlaczego nagłówek wcześniej uciekał

react-big-calendar przewija siatkę wewnątrz .rbc-time-content, a nagłówek (.rbc-time-header) jest jego rodzeństwem — pod warunkiem, że kalendarz ma domkniętą wysokość. Wcześniej wrapper kalendarza był flex-itemem bez min-height: 0, więc jego automatyczne minimum równało się wysokości treści (~1050 px). Kalendarz rósł, .rbc-time-content nigdy nie przewijało się pionowo, a scroll przechodził na CardContent — razem z nagłówkiem.

Naprawa domyka łańcuch wysokości w widoku dnia:

• wrapperClassName="min-h-0" na wrapperze BigCalendar,
• min-h-0 overflow-hidden na .rbc-calendar.

Dzięki temu .rbc-time-content jest jedynym kontenerem przewijania (pionowo i poziomo), a react-big-calendar sam synchronizuje scrollLeft nagłówka z siatką. Widoki miesiąca i agendy zostają na overflow-auto, bo tam wysokość treści jest zmienna i scroll całego kalendarza jest pożądany.

Styl nagłówka

.schedule-view-day .rbc-time-header dostaje nieprzezroczyste tło (hsl(var(--background))), delikatny cień i pogrubioną czcionkę. Tło jest też nadpisane na .rbc-time-header-gutter i .rbc-time-gutter, bo react-big-calendar wpisuje tam background-color: white na sztywno, co psuło tryb ciemny.