BioChemik ·Zlecenia

Propozycja dla zarządu · 2026

Nowa wersja systemu zleceń BioChemik

Przepisana od zera, zaprojektowana pod codzienną pracę laboratorium — szybciej, spójnie, bez chaosu.

Przewiń

Filozofia

Jeden spójny system

Paleta marki + neutralne tło

Navy i pomarańcz jako świadome akcenty na spokojnym, jasnym tle — bez szumu wizualnego.

Motyw jasny / ciemny / auto

Pełne wsparcie trzech trybów — wybór użytkownika jest zapamiętywany.

Ikony wyłącznie z Lucide

Jeden spójny zestaw ikon w całej aplikacji — bez emoji i przypadkowych glifów.

Ta sama zasada rządzi komponentami: jeden konfigurowalny komponent — N instancji (tabela, modal). Zamiast dziesiątek wariantów — jedno źródło prawdy: mniej błędów, szybszy rozwój, niższy koszt utrzymania.

Serce systemu

Tabela, która nie ukrywa danych

Jeden konfigurowalny komponent DataTable — N instancji w całej aplikacji. Sort, filtr, zaznaczanie i akcje w zasięgu ręki, bez chowania kolumn i bez zgadywania, gdzie coś się „schowało”.

Tabela zleceń — pełny widok z kolumnami, filtrami i akcjami

  • Cała tabela zawsze widoczna — poziomy scroll + zamrożone kolumny (bez auto-hide).

  • Ctrl/Cmd+F działa na aktywnej tabeli.

  • Renderery komórek: obraz, ikona, HTML (pasek postępu), akcje.

Tabela przewinięta poziomo — kolumna Data pozostaje na miejscu

Kolumny kluczowe zamrożone — przewijasz poziomo, a data i oznaczenie zostają widoczne.

Menu kontekstowe wiersza — modyfikuj, kopiuj, zwróć zadanie, usuń

Akcje z kontekstu (PPM) i zaznaczanie grupowe — te same renderery, więcej możliwości na wiersz.

Jasny / ciemny

Tabela zleceń — motyw jasny
Tabela zleceń — motyw ciemny

Ten sam komponent, motyw jasny i ciemny — jeden system.

Efekt w codziennej pracy: operator znajduje zlecenie w kilka sekund — bez przełączania widoków i bez przewijania w poszukiwaniu jednej kolumny.

Przegląd zleceń

Zlecenia → Pomiary → Powiązane, bez utraty kontekstu

Master-detail-detail w jednym widoku: lista zleceń, panel Pomiary i powiązane obiekty na żądanie — bez przeładowań i bez gubienia miejsca, w którym byłeś.

Przegląd zleceń — lista z aktywnym wierszem i dokowanym panelem Pomiary

  • Panel Pomiary nieblokujący — master pozostaje żywy, aktywny wiersz podświetlony.

  • Aktywny wiersz ≠ zaznaczenie (checkboxy) — dwie różne intencje.

  • Powiązane na żądanie → modal, bez zaśmiecania widoku.

Panel Pomiary rozwinięty obok listy zleceń

Rozwinięty — panel Pomiary otwarty przy aktywnym zleceniu.

Panel Pomiary zwinięty do wąskiej belki

Zwinięty do belki — lista zajmuje całą szerokość, panel wraca jednym kliknięciem.

Przegląd zleceń w motywie ciemnym

Ten sam układ w motywie ciemnym — spójność bez wyjątków.

Efekt: operator sprawdza pomiary i powiązania kolejnych zleceń bez utraty miejsca w liście — zero przeładowań, zero „gdzie ja byłem”.

Decyzja UX

Duży formularz jako dokowany panel — nie modal

Wybrałem układ offcanvas z belką, bo użytkownik nie traci z oczu bazowej tabeli. Może zerknąć do danych i wrócić do formularza bez utraty pracy — to wprost skraca czas wprowadzania zleceń.

Sekwencja stanów — „zaparkuj i zachowaj” (park-and-preserve)

Formularz zlecenia rozwinięty jako dokowany panel obok pełnej tabeli zleceń, z widoczną walidacją i przypiętą stopką

1. Rozwinięty — pełny formularz w sekcjach, przypięta stopka, walidacja inline.

  • Pola kuriera pojawiają się warunkowo — technika „progressive disclosure”: formularz nie przytłacza wszystkimi polami naraz. Kod kreskowy generowany jest automatycznie (pole tylko do odczytu) — operator niczego nie wpisuje ręcznie.

Formularz zwinięty do wąskiej belki bocznej z podsumowaniem — wskaźnik niezapisanych zmian i licznik wymaganych pól, tabela na pełną szerokość

2. Belka (peek) — podsumowanie: niezapisane + licznik wymaganych pól. Praca zaparkowana.

Tabela zleceń na pełną szerokość po zamknięciu formularza, z podświetlonym aktywnym wierszem

3. Zerkasz w tabelę — klik wiersza tylko podświetla, nie przeładowuje formularza. Wracasz dokładnie do tego, co pisałeś.

Dlaczego to działa

Mniej przełączania kontekstu

Tabela i formularz widoczne razem — operator nie zamyka jednego, by zobaczyć drugie.

Zero utraty danych

Zaparkowany formularz zachowuje każdy wpisany znak — zerknięcie w tabelę niczego nie kasuje.

Szybsze wprowadzanie zleceń

Mniej kliknięć i przeładowań na jedno zlecenie — czas wprowadzania spada zauważalnie.

Ten sam dokowany formularz zlecenia w motywie ciemnym

Ten sam panel w motywie ciemnym — spójny system niezależnie od trybu.

Efekt w codziennej pracy: operator wypełnia zlecenie i weryfikuje dane w jednym widoku — bez modalnych okien, które zasłaniają pracę.

Planowana funkcja

Praca zespołowa na żywo (WebSockety)

Współdzielony stan bez przypadkowego nadpisywania cudzej pracy — obecność, blokady i odświeżanie danych na żywo w jednym, spójnym mechanizmie.

Pasek u góry aplikacji z listą osób aktualnie zalogowanych w systemie

Widzisz, kto pracuje w systemie — obecność na żywo.

Wiersz zlecenia z plakietką „edytuje Jan Kowalski” — rekord otwarty w trybie tylko do odczytu

Zajęty rekord otwiera się w trybie tylko-do-odczytu: »edytuje Jan Kowalski« — zamiast twardej odmowy.

Wiersz zlecenia podświetlony zaraz po automatycznym odświeżeniu danych, bez przeładowania strony

Zmieniony wiersz dociąga się sam — tylko po ID, bez wycieku innych danych.

Kolejka toastów z powiadomieniami o zmianach w prawym dolnym rogu, z akcją Pokaż

Powiadomienia o zmianach w kolejce, z akcją »Pokaż«.

Efekt: koniec z nadpisywaniem się i konfliktami — transport Laravel Reverb (+ Redis).

Planowana funkcja

Komunikacja wbudowana w system

Rozmowa przy rekordzie, nie w osobnym kanale — na tej samej infrastrukturze czasu rzeczywistego, co obecność i live-refresh.

Pełny widok czatu — lista rozmów, konwersacja grupowa i wiadomość z powiązanym zleceniem

  • Rozmowy 1:1 i grupowe, w jednej liście.

  • Powiązania rekordów — „Wyślij na czat” z dowolnej strony (rozszerzalny rejestr).

  • Ta sama infrastruktura WebSocket co obecność i odświeżanie na żywo.

Dokowany dymek czatu otwarty nad widokiem Przeglądu zleceń

Dokowany dymek — czat pod ręką bez opuszczania widoku.

Efekt: mniej maili i telefonów — kontekst rozmowy zostaje przy rekordzie.

Gotowość

Kompletny system, nie zbiór ekranów

Ten sam zestaw komponentów — modal, tabela, toast, pole formularza — obsługuje cały produkt. Poniżej przegląd tego, co już zaprojektowane i gotowe do budowy.

Modale — jeden komponent, N instancji

Modal potwierdzenia usunięcia zlecenia, z przyciskami Anuluj i Usuń zlecenie

Potwierdzenia i akcje destrukcyjne — wariant „danger” z async handlerem na przycisku.

Modal z osadzonym komponentem Tabeli — wybór zleceń do powiązania z pomiarem

Modal z komponentem Tabeli w środku — ta sama izolowana instancja co w widoku głównym.

Toasty

Stos powiadomień toast w rogu ekranu — typy success, warning, info i error w kolejce

Powiadomienia z kolejką i typami — success / info / warning / error w jednym serwisie.

Form Kit — walidacja native-first

Kontrolka multi-select wyświetlana jako chipsy z licznikiem dodatkowych pozycji

Kontrolki: multi-select z chipsami — ukryty element select z atrybutem required pod spodem.

Formularz z natywnym dymkiem walidacji „Wypełnij to pole” przy pierwszym błędnym polu

Walidacja na żywo — natywne dymki — zero własnej logiki walidacji w JS.

Logowanie

Ekran logowania — układ dwudzielny z prezentacją marki i formularzem logowania

Logowanie — marka i wartość produktu obok formularza.

Ekran weryfikacji dwuskładnikowej — pole na 6-cyfrowy kod uwierzytelniający

Uwierzytelnianie dwuskładnikowe (2FA) — krok 2 z 2, kod z aplikacji uwierzytelniającej.

Słowniki

W przygotowaniu

Słowniki — makieta w przygotowaniu.

Efekt: nowe ekrany powstają szybciej, bo bazują na tych samych, przetestowanych klockach — nie na kolejnym, jednorazowym widoku.

Plan

Od projektu do wdrożenia

Trzy etapy, jeden kierunek. Faza designu jest zamknięta — jej efektem jest ta prezentacja. Kolejne kroki mają już określony stos technologiczny.

  1. Etap 1

    Gotowa

    Faza designu

    Interaktywne makiety — ta prezentacja. Kompletny system komponentów gotowy do przekazania.

  2. Etap 2

    Budowa

    Vue 3 (SPA) + Laravel, REST API + Sanctum, pokryte testami.

  3. Etap 3

    Wdrożenie

    Docker + Redis + MariaDB + Laravel Reverb (realtime).

Kolejny krok: po akceptacji makiet — start budowy w Vue 3 + Laravel, bez fazy pośredniej.

Podsumowanie

Spójny, szybki i zespołowy system zleceń

Jeden zestaw komponentów w całej aplikacji, przemyślane stany UX i realtime od pierwszego dnia — mniej kliknięć, mniej pomyłek, więcej czasu na pracę laboratorium.

Następny krok: warsztat wdrożeniowy — ustalamy zakres, harmonogram i priorytety budowy.

biuro@codeisland.pl