Ga naar inhoud

Nazendingen (Frontend)

UI-Architectuur & Design

De module bestaat uit een enkel scherm op /nazendingen dat op desktop en mobiel hetzelfde gedrag biedt. De pagina rendert een statuskaart voor de KNMP Farmanco-koppeling, een kaart voor de automatische opschoning, een zoek- en filterblok, een pagina-genummerde tabel en een floating action button voor toevoegen. De groothandel-import en het profielbeheer verlopen via een eigen modal-flow.

graph TD
    Screen[NazendingenScreen]
    StatusCard[FarmancoStatusCard]
    PurgeCard[AutoPurgeSettingCard]
    Table[NazendingenTable]
    Detail[NazendingDetailModal]
    Modal[NazendingModal]
    Connect[FarmancoConnectModal]
    Info[FarmancoInfoModal]
    Import[ImportModal]
    Skeleton[NazendingenListSkeleton]

    Screen --> StatusCard
    Screen --> PurgeCard
    Screen --> Table
    Screen --> Detail
    Screen --> Modal
    Screen --> Connect
    Screen --> Info
    Screen --> Import
    Screen --> Skeleton
    Table --> Row[Rij + Farmanco-knop]
    Import --> Configure[ImportConfigureStep]
    Import --> Preview[ImportPreviewStep]
    Import --> Profiles[ProfileManager]

De Farmanco-statuskaart toont drie statusvarianten: nog niet gekoppeld, verlopen, en gekoppeld inclusief vervaldatum ("Geldig tot dd-mm-jjjj"). De tabel toont een SegmentedControl voor Actief / Afgehandeld, een zoekveld, een bronfilter (handmatig / Alliance / Pluripharm) en een sorteerkeuze. Sorteren en filteren gebeuren server-side via queryparameters; de tabel zelf houdt geen sorteerlogica bij. Zodra de tenant geverifieerd is verschijnt een extra kolom Farmanco: per rij met beschikbare context een neutrale pillet-knop met een 6 px-bolletje (amber bij een actief tekort, emerald bij geen tekort). Klikken opent FarmancoInfoModal met statusbanner, reden van tekort, afhandelingslabel, verwachte leverdatum (met disclaimer dat de definitieve datum bij de groothandel ligt), voorgestelde alternatieven en een knop Bekijk op Farmanco (Linking.openURL).

State & Data Flow

De lijst wordt beheerd via usePagedTable, dat pagina, paginagrootte, zoekterm, filters en de totalen bijhoudt en bij elke wijziging opnieuw listNazendingenPaged aanroept. De Farmanco-toegangsstaat wordt apart opgehaald en lokaal onthouden.

sequenceDiagram
    participant User
    participant Screen as NazendingenScreen
    participant API as nazendingenApi
    participant Backend

    User->>Screen: Open module
    par
      Screen->>API: listNazendingenPaged(token, filters)
      API->>Backend: GET /api/nazendingen/?status=&q=&sort=
      Backend-->>API: results + status_counts + farmanco-blokken
    and
      Screen->>API: getFarmancoAccess(token)
      API->>Backend: GET /api/nazendingen/farmanco/access/
      Backend-->>API: access state
    end
    API-->>Screen: vul tabel + access state

    User->>Screen: Open import-modal
    User->>Screen: Kies profiel, bestand en instellingen
    Screen->>API: importPreview(token, FormData)
    API->>Backend: POST /api/nazendingen/import/preview/
    Backend-->>API: counts + reappeared + cleanup_warning
    User->>Screen: Bevestig (selecteer eventueel reappeared regels)
    Screen->>API: importConfirm(token, FormData + reactivate_source_keys)
    API->>Backend: POST /api/nazendingen/import/confirm/
    Backend-->>API: definitieve counts
    API-->>Screen: herlaad lijst

Het wachtwoord uit de Farmanco-koppelmodal wordt na verificatie uit de modal-state gewist en raakt geen lokale opslag. Het importbestand wordt zowel bij preview als bij confirm meegestuurd; de frontend bewaart geen tussenstand.

  • Route: frontend/app/nazendingen.tsx importeert NazendingenScreen en gate't op nazending.view.
  • Modale interacties (toevoegen, bewerken, detail, koppelen, importeren, profielbeheer) gebruiken AppModal. Verwijderen gebruikt een bevestigingsdialoog. Er zijn geen aparte routes; alle dialogen blijven binnen het scherm.

Bestandsstructuur & Verantwoordelijkheden

  • screens/NazendingenScreen.tsx - schermsamenstelling, usePagedTable-koppeling, modal-staat, Farmanco-access en de import-flow.
  • components/NazendingenTable.tsx - tabel met optionele Farmanco-kolom; per rij de pillet-knop die de info-modal opent.
  • components/NazendingModal.tsx - toevoegen/bewerken/verwijderen van een handmatige nazending.
  • components/NazendingDetailModal.tsx - detailweergave van een regel.
  • components/AutoPurgeSettingCard.tsx - instelkaart voor auto_purge_resolved_days.
  • components/FarmancoStatusCard.tsx - statuskaart met "Geldig tot dd-mm-jjjj" en koppel/ontkoppel-actie.
  • components/FarmancoConnectModal.tsx - verzamelt KNMP-nummer en wachtwoord en roept de verificatie aan.
  • components/FarmancoInfoModal.tsx - volledige Farmanco-context per regel.
  • components/import/ImportModal.tsx - meerstaps-modal die ImportConfigureStep, ImportPreviewStep en ProfileManager samenbrengt.
  • components/import/ImportConfigureStep.tsx - groothandelkeuze, profielselectie, exclude-dagen, cleanup-toggle en bestandskeuze.
  • components/import/ImportPreviewStep.tsx - toont de counts, de reappeared-regels met opt-in-selectie en de cleanup-waarschuwing.
  • components/import/ProfileManager.tsx - aanmaken, bewerken en verwijderen van importprofielen.
  • components/skeletons/NazendingenListSkeleton.tsx - laadskelet dat de tabelhoogte volgt.
  • lib/importPickFile.ts - platform-onafhankelijke bestandskeuze voor de import.
  • lib/sourceLabels.ts - labels voor bron-types en groothandels.
  • api/nazendingenApi.ts - fetch-clients voor lijst, CRUD, resolve/reactivate, export, import (wholesalers/preview/confirm), profielen, instellingen en Farmanco.
  • types/nazending.ts - TypeScript-types voor nazending, Farmanco-blok, alternatief, access-state, profiel, instellingen en de import-counts.

Belangrijke bestanden

  • frontend/src/features/nazendingen/screens/NazendingenScreen.tsx
  • frontend/src/features/nazendingen/components/import/ImportModal.tsx
  • frontend/src/features/nazendingen/components/FarmancoConnectModal.tsx
  • frontend/src/features/nazendingen/api/nazendingenApi.ts