Skip to content

User Dashboard/Portal Implementatie

Doel

Een persoonlijke omgeving voor users waar ze alles kunnen beheren: tickets, cursussen, bestellingen, facturen, profiel. Hun 'thuis' binnen het platform.

Huidige Situatie

  • Gin theme actief voor user/account/commerce pagina's
  • Gin Toolbar & Navigation voor authenticated users
  • Profile types: customer (klantgegevens) + openbaar (voor later)
  • Commerce modules actief
  • Menu items in Account menu

Gewenste Functionaliteit

Dashboard Homepage (/user/[uid])

Overzicht widgets: * ~~Aankomende events/cursussen (gekochte tickets met datums)~~ * Recente bestellingen -> Zullen er nooit veel zijn * Winkelwagen status (indien items) * Mededelingen/notificaties van organisatie -> Graag met X button voor wegklikken. Niet weggooien. Heb je een suggestie? * Quick stats: totaal aantal cursussen gevolgd, laatste login, etc. -> Je kunt voorlopig nog geen cursussen boeken via de site. Quick actions: * ~~"Boek nieuwe cursus" knop~~ * "Bekijk al mijn tickets" link * "Profiel bewerken" link

1. Mijn Tickets * Overzicht van alle gekochte tickets * Per ticket: event naam, datum, locatie, status * QR code/barcode voor check-in * Download als PDF functie * Filter: aankomend / afgelopen ~~2. Mijn Cursussen/Opleidingen~~ * ~~Ingeschreven opleidingen~~ * ~~Per cursus: naam, startdatum, voortgang (indien applicable)~~ * ~~Cursusmateriaal downloads~~ * ~~Certificaten (indien afgerond)~~ 3. Bestellingen & Facturen * Alle bestellingen chronologisch * Per bestelling: nummer, datum, bedrag, status * Factuur download (PDF) * Betaalstatus 4. Klantgegevens * Customer profile edit form * Adresgegevens * Bedrijfsgegevens (KVK, BTW) * Contact informatie 5. Betaalwijzen * ~~Opgeslagen betaalmethodes~~ -> Er komt er maar 1 dus behhoeft geen keuze of edit * ~~Toevoegen/verwijderen~~ 6. Winkelwagen * Huidige items * Naar checkout 7. Openbaar Profiel (toekomst) * Voor comments/community features later

Technische Aanpak

Fase 1: Dashboard Page

  1. Custom route en controller voor /user/[uid]
    • In vg_commerce module (of nieuwe vg_user_portal module)
    • Laadt user data en commerce entities
  2. Twig template voor dashboard
    • dashboard-user.html.twig
    • Responsive grid layout
    • Widget-based structuur
  3. Data ophalen via services:
    • Aankomende orders/tickets (via commerce_order query)
    • Recente bestellingen
    • Winkelwagen items
    • User statistics

Fase 2: Views voor Content Overzichten

  1. View: Mijn Tickets
    • Base: Commerce Order Items
    • Filter: current user's orders, product type = ticket
    • Fields: event titel, datum, QR code, status
    • Display: table met actions
  2. ~~View: Mijn Cursussen~~
    • ~~Base: Commerce Order Items~~
    • ~~Filter: current user's orders, product type = cursus/opleiding~~
    • ~~Fields: cursus naam, startdatum, status~~
  3. View: Mijn Bestellingen
    • Base: Commerce Orders
    • Filter: current user
    • Fields: order nummer, datum, totaal, status, factuur link
    • Display: table met pagination

Fase 3: Block Configuration

  1. Verwijder sidebar blokken van user pages:
    • Nieuwsbrief signup
    • Winkelwagen block (behalve op winkelwagen pagina)
    • Andere marketing blokken
  2. Behoud alleen:
    • Gin Toolbar
    • Gin Navigation
    • Main content
    • System messages

Fase 4: Navigation Menu Updates

  1. Account menu items:
    • Dashboard (home icon)
    • Mijn Tickets
    • ~~Mijn Cursussen~~
    • Bestellingen & Facturen
    • Klantgegevens
    • Betaalwijzen
    • Winkelwagen (met count badge)
  2. Menu gewichten voor logische volgorde

Fase 5: Styling & UX

  1. Dashboard widgets styling:
    • Card-based layout
    • Icons voor sections -> Met de mogelijkheid dat ik die later vormgeef en vervang. Gebruik je een font of een svg?
    • Hover effects
    • Responsive grid (3 kolom desktop, 1 kolom mobile)
  2. Gin custom CSS aanpassingen:
    • Dashboard specifieke styles
    • Widget styling
    • Data visualization (indien stats/grafieken) -> Wellicht later.
  3. Empty states:
    • Geen tickets: "Je hebt nog geen tickets. Bekijk ons aanbod"
    • Geen bestellingen: "Nog geen bestellingen"
    • Call-to-actions -> Wellicht later

Data Structuur

Commerce Setup Vereisten

  1. Product types:
    • Ticket (voor events/VGBC)
    • Cursus/Opleiding
    • Mogelijk: Nieuwsbrief abonnement (toekomst)
  2. Order item velden:
    • Event datum (voor tickets)
    • Locatie (voor physical events)
    • QR code (automatisch genereren bij aankoop)
  3. Order workflows:
    • Pending → Paid → Completed
    • Email confirmaties met tickets/facturen

Prioritering

Must Have (Week 1):

  1. Dashboard homepage met basis widgets
  2. Mijn Bestellingen view
  3. Block configuration (clean layout)
  4. Navigation menu items

Should Have (Week 2):

  1. Mijn Tickets view met QR codes
  2. Mijn Cursussen view
  3. Dashboard styling refinement
  4. Empty states

Nice to Have (Later):

  1. Statistics/charts op dashboard
  2. Persoonlijke mededelingen systeem
  3. Cursus voortgang tracking
  4. Aanbevelingen engine

Technische Overwegingen

  1. Performance:
    • Cache dashboard data (user-specific cache)
    • Lazy load widgets indien mogelijk
    • Optimize queries (eager load relationships)
  2. Security:
    • Access control per widget (check user owns orders/tickets)
    • CSRF tokens op forms
    • Validate all user input
  3. Responsive:
    • Mobile-first dashboard
    • Touch-friendly controls
    • Hamburger menu voor mobile
  4. Accessibility:
    • Semantic HTML
    • ARIA labels
    • Keyboard navigation
    • Screen reader friendly

Testing Plan

  1. Create test users met verschillende scenarios:
    • Nieuwe user (geen orders)
    • User met 1 ticket
    • User met meerdere cursussen
    • User met winkelwagen items
  2. Test flows:
    • Complete purchase → check dashboard update
    • QR code generatie
    • PDF downloads
    • Profile updates
  3. Cross-browser testing (Chrome, Firefox, Safari)
  4. Mobile testing (iOS, Android)

Volgende Stappen

  1. Beslissen: nieuwe module (vg_user_portal) of uitbreiden vg_commerce? -> Alle commerce in volgende fase. We bouwen dat eerst af in dev. Wees wel voorbereid
  2. Database check: welke commerce product types bestaan al? -> Nog geen. In dev alleen 'Los nummer' en we hebben net een roadmap voor VGBC tickets. Dus ook fase twee.
  3. Mockups/wireframes van dashboard layout
  4. Start met dashboard controller en route

Prioriteiten

  • Voor nu een prettige omgeving met functionaliteit die er al is. Wellicht niet zoveel maar is niet erg
  • Als je toch functionaliteit van Commerce nodig hebt dan kan je die halen uit dev site.
  • Keuze custom module: Commerce gerelateerd via vg_commerce. Voor puur user en profiel zaken via vg_userprofielen. Bij twijvel kies voor vg_commerce