Lista faktur — zmiany UX

Dokumentacja zmian UX na liście faktur w firmly Online (stan na 2026-05-25). Środowisko nowe: localhost:7003/faktury; środowisko referencyjne: dev2.fillup.pl/firmly/online/faktury.

Przegląd zmian

Na liście faktur wprowadzono pięć istotnych zmian UX dotyczących wyszukiwania, zarządzania ustawieniami widoku, zapamiętywania konfiguracji, filtrowania dat oraz sortowania.

Zmiana 1 — Ikonka wyszukiwania z rozwijanym polem input

Poprzednie zachowanie (dev2)

Pole tekstowe „Znajdź element" było stale widoczne w pasku narzędzi, zajmując stałą przestrzeń niezależnie od tego, czy użytkownik z niego korzysta.

W pasku narzędzi dev2 widoczne były: selecty dat (Data wystawienia / Miesiąc / Rok), stałe pole „Znajdź element", ikona lupy, ikona lejka (filtry), ikona siatki (kolumny), ikona folderu i ikona odświeżania.

Nowe zachowanie

Ikonka 🔍 jest domyślnie wyświetlana jako sama ikona — bez pola input. Dopiero po kliknięciu ikony pole wyszukiwania animacyjnie rozszerza się w toolbarze. Pojawia się input z fokusem i ikonka × do zamknięcia. Ponowne kliknięcie ikony lub × zamyka pole.

Stan domyślny — pole ukryte:

Po kliknięciu ikony lupy — pole rozwinięte:

Zalety zmiany

• Toolbar jest czystszy i bardziej przestronny
• Wyszukiwanie dostępne on-demand, nie rozprasza przy normalnym przeglądaniu listy

Zmiana 2 — Panel „Ustawienia widoku" zamiast oddzielnych paneli

Poprzednie zachowanie (dev2)

Filtry i kolumny były dostępne jako dwa oddzielne, niezależne panele otwierane przez dwie różne ikony w toolbarze:

• Ikona lejka → panel Filtry (z przyciskami „Filtruj" i „Wyczyść filtry")
• Ikona siatki → panel Kolumny (lista kolumn z checkboxami)

Stary panel Filtry (dev2):

Stary panel Kolumny (dev2):

Każdy panel był niezależnym bocznym okienkiem bez zakładek — brak powiązania między sekcjami.

Nowe zachowanie

Wszystkie ustawienia zostały połączone w jeden spójny panel boczny o nazwie „Ustawienia widoku", wywoływany przez jedną ikonę 🔲🔲 w toolbarze. Panel zawiera cztery zakładki nawigacyjne:

Na dole panelu (we wszystkich zakładkach) zawsze widoczny jest przycisk „Zapisz nowy widok".

Panel Ustawienia widoku — zakładka Filtry (aktywny filtr daty):

Panel Ustawienia widoku — zakładka Kolumny:

Panel Ustawienia widoku — zakładka Grupowanie:

Zalety zmiany

• Jedno miejsce do zarządzania wszystkimi aspektami widoku listy
• Lepsza spójność UI — nie trzeba otwierać wielu osobnych paneli
• Zakładki umożliwiają szybką nawigację między sekcjami bez zamykania panelu
• Przycisk „Zapisz nowy widok" zawsze dostępny w stopce

Zmiana 3 — Belka aktywnych filtrów i grupowania

Poprzednie zachowanie (dev2)

Brak wizualnej informacji o aktywnych filtrach i grupowaniu w widoku listy. Użytkownik nie wiedział na pierwszy rzut oka, że lista jest przefiltrowana lub pogrupowana.

Nowe zachowanie

Pod paskiem narzędzi pojawia się dedykowana belka informacyjna, która pokazuje aktywne filtry i grupowanie w czasie rzeczywistym. Belka jest widoczna tylko wtedy, gdy jakiś filtr lub grupowanie jest włączone.

Belka składa się z dwóch sekcji:

Sekcja FILTRY (lewa strona):

• Ikona lejka + napis FILTRY
• Każdy aktywny filtr wyświetlany jako tag z nazwą pola i wartością, np. Data wystawienia: aktualny miesiąc
• Każdy tag posiada ikonkę ołówka ✏️ (edycja) i × (usunięcie filtra)
• Przycisk × Wyczyść do usunięcia wszystkich filtrów jednocześnie

Sekcja GRUPOWANIE (prawa strona):

• Napis GRUPOWANIE
• Każde aktywne grupowanie wyświetlane jako tag, np. Data faktury (rok)
• Tag posiada × do usunięcia grupowania

Lista faktur jest automatycznie aktualizowana po zmianach w belce.

Zalety zmiany

• Natychmiastowa informacja o stanie filtrowania/grupowania bez otwierania panelu
• Szybkie usuwanie pojedynczych filtrów bezpośrednio z belki (bez wchodzenia w panel)
• Przycisk „Wyczyść" dla szybkiego resetu wszystkich filtrów

Zmiana 4 — Predefiniowane zakresy dat w filtrach

Poprzednie zachowanie (dev2)

W starym panelu Filtry pola dat były zwykłymi polami tekstowymi — użytkownik musiał ręcznie wpisywać daty.

Nowe zachowanie

Każde pole daty w panelu Filtry zostało zastąpione dropdownem z predefiniowanymi zakresami. Dostępne opcje to:

Opcja „Własny zakres" otwiera dodatkowe pola kalendarza do ręcznego wprowadzenia dat.

Predefiniowane zakresy dostępne są dla czterech pól dat:

• Data wystawienia
• Data sprzedaży / dostawy towarów / wykonania usługi
• Data powstania obowiązku VAT
• Data księgowania PIT

Zalety zmiany

• Szybszy wybór najczęściej używanych zakresów (miesiąc, kwartał)
• Eliminacja błędów ręcznego wpisywania dat
• Opcja „Własny zakres" zachowuje pełną elastyczność
• Filtr daty nie jest zależny od wyboru ‘okresu’ na home. Dla każdego widoku możemy mieć inny zakres dat.

Zmiana 5 — Sortowanie wieloparametrowe

Poprzednie zachowanie (dev2)

Brak dedykowanego panelu sortowania — dostępne było jedynie sortowanie przez kliknięcie nagłówka kolumny (jedno kryterium naraz).

Nowe zachowanie

W panelu „Ustawienia widoku" dodano zakładkę Sortowanie umożliwiającą sortowanie po wielu parametrach jednocześnie.

Sortowanie z jednym kryterium:

Sortowanie z wieloma kryteriami:

Każde kryterium sortowania zawiera:

• Dropdown z polem do sortowania (dostępne: Nr dokumentu, Typ, Kontrahent, Numer zamówienia, Data wystawienia, Data sprzedaży, Kwota netto, Kwota brutto, Waluta, Rok, Miesiąc, Kwota zapłacona, Zapłacono, Do zapłaty, Termin, Data wystawienia w KSeF, Numer KSeF, Skutek księgowy i inne)
• Przycisk kierunku — przełącznik ROSNĄCO / MALEJĄCO
• Przycisk × (usuń) — usunięcie danego kryterium

Pod listą kryteriów widoczny jest przycisk + Dodaj kryterium sortowania, który umożliwia dodanie kolejnego parametru. Kryteria są stosowane w kolejności od 1 do N (priorytet malejący).

Zalety zmiany

• Możliwość sortowania np. najpierw wg kontrahenta, a w ramach jednego kontrahenta wg daty
• Pełna kontrola nad porządkiem listy bez ograniczeń do jednej kolumny
• Wizualna kolejność kryteriów (numery 1, 2, 3…)

Zmiana 6 — Nowa kolumna „L.p."

Poprzednie zachowanie (dev2)

Lista faktur nie posiadała kolumny z numerem porządkowym. Brak możliwości dodania numeru wiersza do widoku.

Nowe zachowanie

W zakładce Kolumny panelu „Ustawienia widoku" na pierwszej pozycji listy dostępnych kolumn dodano nową opcję: L.p. (liczba porządkowa).

Kolumna L.p. domyślnie jest wyłączona (odznaczona). Po jej zaznaczeniu lista faktur zyskuje pierwszą kolumnę z numerem porządkowym każdego wiersza.

Zalety zmiany

• Ułatwia orientację przy długich listach faktur
• Przydatna przy eksporcie listy (np. druk, PDF) — numery wierszy pomagają w weryfikacji

Zmiana 7 — Możliwość zapamiętywania ustawień widoków

Poprzednie zachowanie (dev2)

Brak funkcji zapisanych widoków. Ustawienia filtrów, kolumn i grupowania nie były zachowywane między sesjami.

Nowe zachowanie

Wprowadzono mechanizm Zapisanych widoków. W prawym górnym rogu toolbaru pojawił się przycisk z nazwą aktualnego widoku (np. „nowy") wraz z ikonką dropdown ▾.

Dropdown zawiera:

• Listę wszystkich zapisanych widoków (np. domyślny, iii, nowy, yyyy)
• Aktywny widok oznaczony checkmarkiem ✓ i podświetleniem
• Ikony edycji ✏️ i usunięcia × przy każdym widoku
• Ikonka zapisu 💾 przy aktywnym widoku (jeśli ma niezapisane zmiany)
• Przycisk „Zapisz nowy widok" na dole listy

Widok domyślny posiada tylko ikonkę 🏷️ i nie może być usunięty.

Nowy widok można zapisać również przez przycisk „Zapisz nowy widok" w stopce panelu Ustawienia widoku oraz przez osobny przycisk „Zapisz" w toolbarze (obok przycisku nazwy widoku).

Jak to działa

1. Użytkownik konfiguruje filtry, kolumny, grupowanie i sortowanie
2. Klika „Zapisz nowy widok" → nadaje nazwę
3. Widok pojawia się na liście w dropdownie
4. Przełączanie między widokami jednym kliknięciem

Zalety zmiany

• Dedykowane widoki dla różnych potrzeb (np. „Aktualny miesiąc", „Niezaksięgowane", „Do zapłaty")
• Szybkie przełączanie między różnymi zestawami ustawień
• Widok domyślny nie może być usunięty — zabezpieczenie przed przypadkową utratą

Podsumowanie porównawcze