Notifications

Vista ma dwa osobne systemy powiadomień - toasty (ephemeral) i bell notifications (persistent).

---

Notifications Architecture

graph TB
    subgraph ToastSystem["Toast Notifications (Provider-based)"]
        NotificationContext[NotificationContext]
        NotificationProvider[NotificationProvider]
        ToastContainer[NotificationContainer]
        useNotification[useNotification hook]
    end

    subgraph BellSystem["Bell Notifications (Hook-based)"]
        useNotifications1[useNotifications #1<br/>UnifiedTopToolbar]
        useNotifications2[useNotifications #2<br/>Dashboard]
        useNotifications3[useNotifications #3<br/>NotificationPanel]
        useNotifications4[useNotifications #4<br/>useVisitEditor]
        useNotificationsN[useNotifications #N<br/>...więcej instancji]
    end

    subgraph Storage["Storage Layer"]
        LocalStorage[(localStorage<br/>vista-notifications-userId)]
        CustomEvent{{CustomEvent<br/>vista-notifications-changed}}
    end

    NotificationProvider --> NotificationContext
    NotificationContext --> useNotification
    useNotification --> ToastContainer

    useNotifications1 --> LocalStorage
    useNotifications2 --> LocalStorage
    useNotifications3 --> LocalStorage
    useNotifications4 --> LocalStorage
    useNotificationsN --> LocalStorage

    LocalStorage -.-> CustomEvent
    CustomEvent -.-> useNotifications1
    CustomEvent -.-> useNotifications2
    CustomEvent -.-> useNotifications3

Known Issue P2-014

Każda instancja useNotifications ma własny useState! Synchronizacja przez CustomEvent jest krucha i może prowadzić do desync.

---

Notification Types

Toast Notifications

Krótkie, auto-dismissable powiadomienia:

Type	Użycie	Auto-dismiss
success	Operacja zakończona sukcesem	3s
error	Błąd operacji	5s
warning	Ostrzeżenie	4s
info	Informacja	3s

Użycie:

const { showNotification } = useNotification();

showNotification({
  type: 'success',
  title: 'Zapisano',
  message: 'Wizyta została zapisana',
});

Bell Notifications

Persistent powiadomienia w “dzwonku”:

Type	Wyzwalacz	Opis
appointment-reminder	30 min przed wizytą	Przypomnienie o wizycie
soap-missing	Finalizacja wizyty	Wizyta bez pełnego SOAP
ai-suggestions	Po generowaniu	AI wygenerowało sugestie
onboarding-skip	Skip onboarding	Przypomnienie o ustawieniach
info	Różne	Ogólne informacje

---

Bell Notification Flow

sequenceDiagram
    participant Dashboard
    participant Hook1 as useNotifications #1
    participant Hook2 as useNotifications #2
    participant LS as localStorage
    participant Event as CustomEvent

    Dashboard->>Hook1: checkAppointmentReminders()
    Hook1->>Hook1: Check if notif exists in local state
    alt Not exists
        Hook1->>Hook1: addNotification()
        Hook1->>LS: setItem(key, notifications)
        Hook1->>Event: dispatchEvent('vista-notifications-changed')
        Event-->>Hook2: Event received
        Hook2->>LS: getItem(key)
        Hook2->>Hook2: Parse & setState
    end

    Note over Hook1,Hook2: Race condition risk!<br/>If event fails, Hook2 is desync

---

Toast vs Bell

Cecha	Toast	Bell
Persistence	Ephemeral (auto-dismiss)	Persistent (localStorage)
Architecture	Provider-based (single source)	Hook-based (multiple instances)
Sync	Via Context	Via CustomEvent
Storage	In-memory	localStorage
Position	Bottom-right corner	Top toolbar bell icon

---

Komponenty

Component	Typ	Opis
NotificationProvider	Context	Zarządza toast notifications
NotificationContainer	UI	Renderuje toasty
useNotification	Hook	API do pokazywania toastów
useNotifications	Hook	Bell notifications (problematyczny!)
NotificationPanel	UI	Panel po kliknięciu dzwonka
NotificationBell	UI	Ikonka dzwonka z badge

---

Known Issues

ID	Severity	Description
P2-013	MEDIUM	Dwa osobne systemy powiadomień (toasts vs bell)
P2-014	MEDIUM	useNotifications nie jest Provider-based - 11 instancji z własnym state
P2-015	MEDIUM	checkAppointmentReminders może tworzyć duplikaty

---

Proposed Fix Architecture

graph TB
    subgraph UnifiedSystem["Unified Notification System"]
        NotificationsProvider[NotificationsProvider<br/>single source of truth]
        ToastAPI[useToast hook<br/>ephemeral, auto-dismiss]
        BellAPI[useBellNotifications hook<br/>persistent, localStorage]
    end

    subgraph Consumers["Consumers"]
        C1[UnifiedTopToolbar]
        C2[Dashboard]
        C3[NotificationPanel]
        C4[Components...]
    end

    NotificationsProvider --> ToastAPI
    NotificationsProvider --> BellAPI
    ToastAPI --> C1
    BellAPI --> C1
    BellAPI --> C2
    BellAPI --> C3

---

Related

• Email Design - Email templates
• Dashboard - Dashboard notifications
• Settings - Notification preferences