Ujednolicenie układu Card+header, PinList w panelach i pliki tras zawsze dostępne

Filip Borkowski, Backend/Frontend/Fullstack Engineer

Spójny pattern Card+header w 14 stronach dashboardu

Strona Mapa stała się wzorcem layoutu dla całego dashboardu. Każda strona ma teraz jeden <Card> opakowujący zawartość, sięgający do dołu okna, z headerem w postaci <div> z szarym tłem bg-neutral-100 dark:bg-neutral-800 i border-b. Tam gdzie istnieje Dock (Plan 2.0, Workdesk 2.0) — pływa wewnątrz Card jako absolutny overlay, zamiast zabierać wysokość pod ekranem.

Ujednolicone strony: Plan 2.0, Workdesk 2.0, Zadania, Zlecenia Baza, Zgłoszenia, Komunikacja, Czas pracy, Kalendarz, Rozkład.

Mniejsze ulepszenia wizualne:

  • Zlecenia Email — ujednolicona czcionka tabeli (Saira 12px, koniec mieszania text-[9px]/[10px]/font-mono w komórkach).
  • Pracownicy — animacja Status pulsuje razem z etykietą (cały badge, nie tylko kropka).
  • Park Maszyn (Fleet) i Raporty — badge Status bez border/wypełnienia, tylko kropka + animowana etykieta (wzorzec z Parametry/Analityka).
  • Kontrahenci — toolbar z przyciskami Import/Export/Czcionka/Dodaj w jednej linii zamiast dwóch.

PinList w panelach Plan 2.0

Wszystkie cztery boczne panele (Zlecenia, Kierowcy, Pojazdy, Naczepy) używają teraz tego samego komponentu PinList z biblioteki animate-ui — z animacją spring physics przy zmianie statusu. Przypięte/przypisane elementy automatycznie animują pozycję między grupami przez LayoutGroup + layoutId z motion/react.

Dla Pojazdów i Naczep "pinned" znaczy "przypisany do kierowcy" — zmiana w <select> wewnątrz wiersza wyzwala migrację między sekcjami z miękką animacją (~500ms).

AI FAB — drag prawym przyciskiem

Pływająca ikona czata AI (FAB) miała problem: lewy klik często otwierał czat zamiast pozwolić na przesunięcie. Rozdzieliliśmy interakcje:

  • Lewy klik — niezawodnie otwiera czat.
  • Prawy klik + przeciąganie — przesuwa ikonę po ekranie.

Tip ze wskazówką pojawia się przy hover: "Lewy klik — otwórz · Prawy klik + przeciągnij — przesuń".

Tablica z wyborem stylu tła

Strona Tablica ma nowy przycisk Ustawienia w headerze z wyborem 5 stylów tła pola roboczego:

  • Pure — brak tła (domyślny)
  • Graph Paper — siatka 20px, geometryczna
  • Dot Grid LG — kropkowana siatka 22px
  • Blueprint — granatowe tło z liniami inżynierskimi
  • Floor Tiles — dekoracyjne kafle 20px z punktami

Wybór jest zapisywany w localStorage, każdy użytkownik ma własne preferencje.

Pracownicy — historia zmian w Sheet

W kolumnie AKCJE dodaliśmy ikonę zegara/historii. Klik otwiera Sheet z prawej strony ze szczegółami:

  • Kiedy pracownik został utworzony
  • Przez kogo
  • Kiedy ostatnia modyfikacja

W przyszłości: pełna historia zmian (kto co zmienił) — wymaga audit log w bazie.

Mapa — domyślnie widoczne pojazdy w ruchu

W przycisku Ustawienia mapy dodaliśmy sekcję Pojazdy z dwoma checkboxami (zielony "w ruchu" domyślnie zaznaczony, szary "stojące"). Dotychczas opcja istniała tylko w panelu pojazdów po prawej, teraz dostępna z poziomu szybkich ustawień.

Pliki tras zawsze dostępne — fundament pod polyline na mapie

Cron aggregate-daily-routes przeszedł poważny refaktor:

Co usunęliśmy:

  • Archiwizację route_data → null po 30 dniach
  • DELETE wpisów po 180 dniach

Co dodaliśmy:

  • Dla pojazdów bez ruchu w danym dniu — pusty wpis + plik JSON z empty: true i adnotacją "Brak danych GPS w tym dniu — pojazd nieaktywny lub box wyłączony". Każdy pojazd ma plik na każdy dzień, bez luk w timeline.

Co zostało:

  • DELETE bufora vehicle_positions_points po 7 dniach (raw GPS, już zagregowane do route_data + Storage).

Nowy endpoint GET /api/fleet/route-file?registration=X&date=YYYY-MM-DD zwraca:

  • Dla pliku z trasą: {registration, date, polyline: [{lat, lng, t, v, eng}], stops, summary, empty: false}
  • Dla pustego: {registration, date, empty: true, note, points_count: 0}

Format polyline jest gotowy do wczytania w Mapbox/Leaflet — to fundament pod feature rysowania trasy historycznej na mapie (kolejna iteracja).

W Bibliotece danych → Pliki tras kliknięcie pliku pobiera JSON i pokazuje toast z podsumowaniem (km + liczba punktów GPS).

Procesy — przycisk Pobierz faktycznie pobiera plik

Przycisk Pobierz w kolumnie AKCJE strony Procesy dotychczas tylko kopiował wiersz TSV do schowka (mylące, bo ikona to IconDownload). Teraz pobiera plik JSON z pełnymi szczegółami zadania.

Zaplecze techniczne

  • Nowy komponent src/components/ui/pin-list.jsx (animate-ui community).
  • Nowy endpoint src/app/api/fleet/route-file/route.js.
  • Refaktor src/app/api/cron/aggregate-daily-routes/route.js — czyściejsza logika, brak retencji wpisów.
  • 16 plików stron dashboardu zaktualizowanych (jeden pattern Card+header).

Więcej artykułów

Release 20260510_01 — Matrix auto-spaces, BoxGrupy kolumn, mapa tras GPS, edycja statusów inline

Pierwszy release dnia: 3-warstwowa redundancja auto-tworzenia Matrix Space dla każdego nowego zlecenia (cron + Realtime + naprawa endpointu), 14 BoxGrup kolumn /zlecenia-baza spójnych z widokiem karty zlecenia, mapa MapLibre z auto-load tras dla pinnymi pojazdów w /trasy-gps, edycja statusów inline w Sheet (KLUCZ vs ETYKIETA + dziedziczenie koloru parent-a), Tree wg statusów głównych (podstatusy bez folderów), breadcrumb wg sidebara, IntegrationsPanel w ustawieniach, Plan TimeLine card, fix konwersji PDF→MD (unpdf + structured post-processing).

Czytaj więcej

Release 20260510_02 — refaktor UI dashboardu, akcje statusów, widoki kolumn

Drugi release dnia: refaktor UI 28 stron dashboardu (sidebar z motion layoutId, headers bez podtytułów, tabela trasy na DataTable29, MapControls, wszędzie spójne padding/borders). Parametry Logiki dostają trzy widoki (Tabela / Diagram / Akcje) z schemą akcji statusów (5 typów × 3 triggery × JSON config). Edycja klucza statusu z AlertDialog potwierdzającym + endpoint migracji DB. Nowy widoki kolumn w /zlecenia-baza (zapisz/wczytaj/usuń presety per-user). Edytowalne user-tabele w /tablica. Blokady ownerAccount w ustawieniach konta.

Czytaj więcej