Dashboard Overzicht

Dashboard Overzicht

Het dashboard geeft je een direct overzicht van je financiële situatie.

Belangrijke Metrieken

Het dashboard toont zes belangrijke metrieken:

1. Totale Omzet (Groen)

   • Totale omzet over de geselecteerde periode
   • Wordt berekend uit alle verkooptransacties
   • Weergegeven in een groene metric card met grote, vetgedrukte waarde

2. Totale Uitgaven (Rood)

   • Totale uitgaven over de periode
   • Alle kosten en uitgaven bij elkaar
   • Weergegeven in een rode metric card

3. Nettowinst (Blauw)

   • Netto winst (omzet - uitgaven)
   • Belangrijkste indicator voor winstgevendheid
   • Weergegeven in een blauwe metric card

4. Banksaldo (Lichtblauw)

   • Huidige bank saldo
   • Realtime weergave van liquiditeit
   • Weergegeven in een lichtblauwe metric card

5. Debiteuren (Oranje)

   • Totaal openstaande debiteuren
   • Bedragen die je nog moet ontvangen
   • Weergegeven in een oranje metric card

6. Crediteuren (Roze)

   • Totaal openstaande crediteuren
   • Bedragen die je nog moet betalen
   • Weergegeven in een roze metric card

Alle metric cards zijn hoverable en hebben een eigen kleuridentiteit voor snelle herkenning.

Recent Items

Het dashboard toont ook recente items:

Recente Facturen

• Laatste facturen die zijn aangemaakt
• Toont factuurnummer (of ID als nummer ontbreekt), datum, status badge en totaal bedrag inclusief BTW
• Status badges tonen de huidige status van de factuur:
  • DRAFT: Concept factuur (standaard variant)
  • FINAL: Definitieve factuur (final variant)
  • SENT: Verzonden factuur (booked variant)
• Klik op een factuur om direct naar de bewerkpagina te gaan (/invoices/{id}/edit)
• “Alles Bekijken” knop rechtsboven om naar het volledige facturen overzicht te gaan
• Als er geen facturen zijn, wordt een informatieve melding getoond: “Geen facturen gevonden”

Recente Transacties

• Laatste transacties die zijn geregistreerd
• Toont datum, beschrijving en de eerste twee boekingsregels
• Elke regel toont debet/credit indicatie met bedrag (bijv. “D €100.00” voor debet of “C €50.00” voor credit)
• Als er meer dan 2 regels zijn, wordt “+X meer” getoond (bijv. “+2 meer”)
• Klik op een transactie om naar het transactie overzicht te gaan met de transactie gehighlight (/transactions?highlight={id})
• “Alles Bekijken” knop rechtsboven om naar het volledige transactie overzicht te gaan
• Als er geen transacties zijn, wordt een informatieve melding getoond: “Geen transacties gevonden”

Recente Uitgaven

• Laatste uitgaven die zijn geregistreerd
• Toont upload datum, leverancier naam (of e-mail onderwerp of “Onbekende Leverancier”), status en totaal bedrag inclusief BTW
• Status kleurcodering: COLLECTED (grijs #999), UPLOADED (donkergrijs #666), RECOGNIZED (oranje #ff9800), BOOKED/PAID (groen #4caf50)
• Status wordt weergegeven als vetgedrukte tekst in de bijbehorende kleur
• Klik op een uitgave om:
  • Naar de review pagina te gaan als status RECOGNIZED is (/expenses/{id}/review)
  • Naar het uitgaven overzicht te gaan voor andere statussen (/expenses)
• “Alles Bekijken” knop rechtsboven om naar het volledige uitgaven overzicht te gaan
• Als er geen uitgaven zijn, wordt een informatieve melding getoond: “Geen uitgaven gevonden”

Omzetsaldo Grafiek

Een visuele lijn grafiek toont het omzetsaldo over tijd:

• Alleen zichtbaar als een omzetrekening is geconfigureerd in de instellingen
• Als er geen omzetrekening is geconfigureerd, wordt een informatieve melding getoond: “Geen omzetgegevens beschikbaar. Configureer omzetrekening in instellingen.”
• Lijn grafiek met datapunten per dag
• X-as toont datums binnen de geselecteerde periode (geformatteerd als DD-MM-YYYY)
• Y-as toont bedragen in euro’s (geformatteerd als €X)
• Hover over datapunten voor details (datum en exact bedrag in tooltip)
• Blauwe lijn (#1ea7fd) met ronde datapunten (radius 3px)
• Lijn heeft een stroke width van 3px
• Gestippelde grid lijnen (strokeDasharray: “3 3”)
• Helpt bij trendanalyse van de balans ontwikkeling
• Toont de periode van de geselecteerde boekperiode
• Grafiek heeft een vaste hoogte van 200px en is responsive in breedte

Periode Selectie

De periode voor het dashboard wordt geselecteerd via de periode selector in de navigatie:

• De geselecteerde periode wordt gebruikt voor alle metrieken en data
• Periode informatie wordt getoond in de header van het dashboard (bedrijfsnaam • startdatum - einddatum)
• Als er geen periode is geselecteerd, wordt een melding getoond: “Selecteer een boekjaar om het dashboard te bekijken”
• Alle metrieken, grafieken en recente items worden gefilterd op basis van de geselecteerde periode

Layout en Weergave

Het dashboard gebruikt een responsieve grid layout:

• Metrieken worden weergegeven in een grid met automatische kolommen (minimaal 200px per kolom)
• Elke metric is een hoverable card met een eigen kleuridentiteit
• Recente items secties worden naast elkaar weergegeven (responsive)
• Grafiek sectie neemt de volledige breedte in beslag
• Alle secties zijn klikbaar waar van toepassing voor snelle navigatie

Laadstatus

Tijdens het laden van dashboardgegevens:

• Er wordt een laadmelding getoond: “Dashboardgegevens laden…”
• Metrieken tonen een aparte laadmelding: “Metrieken laden…”
• Zodra data beschikbaar is, worden alle secties automatisch bijgewerkt