AI Buddies 🤖

Jouw digitale maatje op maat

📌 Prompt voor Gemini 2.5 Pro

      Creëer een gedetailleerd interactief dashboard voor het IT-trainingsbureau "Skills4-IT" als een enkele HTML-pagina.

      Algemene Vereisten:
      
      HTML-Structuur: Zorg voor een semantisch correcte HTML5-structuur.
      
      Styling: Gebruik Tailwind CSS (via CDN) voor de algemene lay-out, responsiviteit en styling. Voeg minimale custom CSS toe in een <​style>-tag indien strikt noodzakelijk voor grafiekspecifieke aanpassingen die niet met Tailwind haalbaar zijn.
      
      Charting Library: Implementeer alle grafieken met Apache ECharts versie 5.6.0, geladen via CDN.
      
      Data: Alle data voor de grafieken moet representatief zijn voor een IT-trainingsbureau en mag hardcoded zijn in het JavaScript-gedeelte. Gebruik realistische (maar fictieve) namen voor opleidingen, categorieën, en opleiders.
      
      Responsiviteit: Het dashboard moet volledig responsive zijn en zich correct aanpassen aan verschillende schermformaten (desktop, tablet, mobiel). Grafieken moeten meeschalen.
      
      Lay-out:
      
      Een duidelijke hoofdtitel: "Skills4-IT Prestatie Dashboard".
      
      Optioneel: een subkop met de huidige datum (dynamisch via JavaScript of statisch).
      
      Een sectie voor Key Performance Indicators (KPI's) bovenaan, weergegeven als opvallende kaarten of blokken.
      
      Een grid-systeem (bijvoorbeeld 2 of 3 kolommen op desktop) voor de weergave van de verschillende grafieken.
      
      Key Performance Indicators (KPI's) - Bovenin Dashboard:
      
      Toon de volgende KPI's prominent (bijvoorbeeld in gestileerde kaarten):
      
      Totaal Actieve Cursisten: Een getal (bijv. 450).
      
      Aantal Opleidingen Aangeboden: Een getal (bijv. 25).
      
      Gemiddelde Klanttevredenheid: Een percentage of score (bijv. 92% of 4.6/5).
      
      Maandelijkse Omzet (Huidige Maand): Een bedrag (bijv. € 35.200).
      
      Gedetailleerde Grafieken (met voorgestelde data en type):
      
      Inschrijvingen per Opleiding (Laatste Kwartaal):
      
      Type: Verticaal Staafdiagram (Bar chart).
      
      Data: Aantal inschrijvingen voor 5-7 populaire opleidingen (bijv. "Python voor Data Analyse", "AWS Certified Solutions Architect", "Cybersecurity Essentials", "Agile Projectmanagement", "Frontend Development Bootcamp").
      
      Assen: X-as: Opleidingsnamen, Y-as: Aantal inschrijvingen.
      
      Omzetontwikkeling per Maand (Afgelopen 12 Maanden):
      
      Type: Lijndiagram (Line chart) met gemarkeerde punten.
      
      Data: Maandelijkse omzet over de laatste 12 maanden. Toon een duidelijke trend.
      
      Assen: X-as: Maanden (bijv. "Jan '23", "Feb '23", ...), Y-as: Omzet in Euro.
      
      Klanttevredenheidsscores:
      
      Type: Meterdiagram (Gauge chart).
      
      Data: Gemiddelde klanttevredenheidsscore (bijv. 85% op een schaal van 0-100%). Geef eventueel met kleuren (rood/oranje/groen) de status aan.
      
      Top 5 Presterende Opleiders (op basis van Cursistbeoordeling):
      
      Type: Horizontaal Staafdiagram (Horizontal Bar chart).
      
      Data: Namen van 5 opleiders en hun gemiddelde beoordelingsscore (schaal 1-5 of 1-10).
      
      Assen: Y-as: Namen opleiders, X-as: Gemiddelde score.
      
      Verdeling Opleidingen per Categorie:
      
      Type: Taartdiagram (Pie chart) of Ringdiagram (Donut chart).
      
      Data: Procentuele verdeling van het totale aantal opleidingen over 3-5 hoofdcategorieën (bijv. "Software Development", "Cloud Computing", "IT Security", "Project & Proces Management", "Data Science"). Toon percentages in de labels of tooltip.
      
      Cursus Voltooiingspercentage per Categorie:
      
      Type: Gegroepeerd Staafdiagram (Grouped Bar chart) of Gestapeld Staafdiagram (Stacked Bar chart) met percentages.
      
      Data: Voor elke opleidingscategorie, toon het percentage gestarte cursisten versus het percentage succesvol voltooide cursisten.
      
      Assen: X-as: Opleidingscategorieën, Y-as: Percentage. Legenda voor "Gestart" en "Voltooid".
      
      Geografische Spreiding van Cursisten (Nederland):
      
      Type: ECharts Kaart (Map chart) van Nederland.
      
      Data: (Vereenvoudigd) Aantal cursisten per provincie. Gebruik een kleurenschaal om de dichtheid aan te geven. Indien te complex, vervang door een eenvoudiger staafdiagram "Aantal Cursisten per Regio (Noord, Midden, Zuid)".
      
      Interactie & Functionaliteit:
      
      Tooltips: Zorg voor informatieve tooltips bij mouse-over op alle grafiekelementen (bijv. exacte waarden, datapunten).
      
      Legenda's: Duidelijke, aanklikbare legenda's waar nodig om series te tonen/verbergen.
      
      Dynamische aspecten (optioneel): Overweeg subtiele animaties bij het laden van de grafieken.
      
      Code Structuur:
      
      Plaats CSS in een <​style>-tag in de .
      
      Plaats JavaScript voor ECharts initialisatie en data aan het einde van de , of in een <​script>-tag in de  met defer.
      
      Zorg voor duidelijke id attributen voor de 
 elementen die als container voor de ECharts grafieken dienen.
      
      Commentaar in de code om de verschillende secties en grafiekinitialisaties te verduidelijken.
      
      Leverbaar:
      
      Een enkele, complete HTML-file (dashboard.html) die direct in een browser geopend kan worden en het beschreven dashboard toont.

Skills4-IT Prestatie Dashboard

Actieve Cursisten

450

Opleidingen

25

Tevredenheid

92%

Omzet (mei)

€35.200