InvoiceFlow

System zarządzania płatnościami

Aplikacja odpowiada na realną potrzebę freelancerów i małych firm – prostą kontrolę nad fakturami. Zamiast gubić się w mailach i folderach, użytkownik ma w jednym miejscu możliwość wystawiania faktur, śledzenia statusów płatności, generowania raportów i przygotowania plików do księgowości.

Projekt InvoiceFlow pokazuje, jak może wyglądać nowoczesny, przejrzysty system do zarządzania fakturami.


Najważniejsze wartości:

  • prostota dodawania dokumentów,

  • szybka aktualizacja statusów,

  • czytelne raporty finansowe,

  • personalizacja dzięki ustawieniom i logo firmy.

InvoiceFlow to przykład mojego podejścia do projektowania SaaS – proste flow, czytelne dane finansowe i spójny design system.

Klikalny dashboard

Invoice FLow

Flow 1: Dodawanie nowej faktury

  1. Dashboard – użytkownik widzi liczbę wszystkich, opłaconych i zaległych faktur oraz nadchodzące terminy. Klika „Dodaj fakturę”.

  2. Formularz (Nowa faktura) – uzupełnia dane: numer, kontrahent, kwota, waluta, termin płatności i opcjonalny upload PDF.

  3. Po zapisaniu faktura pojawia się na liście faktur z domyślnym statusem Wystawiona.

👉 Ten flow pokazuje prostotę procesu oraz integrację dashboardu z listą.

Flow 2: Aktualizacja statusu płatności

  1. Lista faktur – użytkownik widzi tabelę ze wszystkimi dokumentami, kontrahentami, kwotą i aktualnym statusem.

  2. Kliknięcie w fakturę otwiera widok szczegółowy z pełnymi danymi (podstawowe informacje, kontrahent, pozycje, historia statusów, podgląd PDF).

  3. Użytkownik wybiera „Zmień status” – modal pozwala ustawić nowy status, dodać notatkę i zatwierdzić.

  4. Nowy status aktualizuje się na liście, w historii faktury oraz na dashboardzie.

👉 Ten flow podkreśla przejrzystość statusów i kontrolę nad obiegiem dokumentów.

Flow 3: Raport miesięczny i eksport

  1. Z poziomu głównego menu użytkownik wchodzi w Raporty.

  2. Wybiera miesiąc i rok → widzi zestawienie: przychody, koszty, bilans.

  3. Wykres pokazuje porównanie przychodów i kosztów w ostatnich miesiącach.

  4. Poniżej wyświetla się tabela faktur z danego okresu.

  5. Kliknięcie „Eksport CSV” lub „Eksport PDF” pozwala w jednym kroku przygotować plik dla księgowej.

👉 Ten flow pokazuje analitykę, wizualizację danych i praktyczne funkcje eksportu.

Flow 4: Konfiguracja systemu

  1. W zakładce Ustawienia użytkownik może uzupełnić dane swojej firmy (NIP, REGON, adres, bank, konto).

  2. Może też dodać logo, które będzie automatycznie wyświetlane na fakturach.

  3. Dodatkowe zakładki obejmują: fakturowanie, eksport i powiadomienia.

👉 Ten flow podkreśla elastyczność systemu i możliwość dostosowania faktur do identyfikacji wizualnej firmy.

Kategoria: Interfejsy

Inne projekty