import React from "react";
import {
ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip,
BarChart, Bar, Cell,
} from "recharts";
const C = {
cream: "#F7F1E6", sand: "#EFE5D2", ink: "#3A352C", sub: "#8A8170",
sage: "#7FA67E", sageDeep: "#5C8460", coral: "#E07856", coralDeep: "#D9624A",
amber: "#E5A93C", card: "#FFFDF8", line: "rgba(58,53,44,.08)",
};
// ── mock-data: 1 maand, ~100 medewerkers ────────────────────────
const META = { org: "Havensteder", periode: "mei 2026", uitgenodigd: 100, actief: 88 };
const TREND = [
{ d: "1", s: 7.0 }, { d: "2", s: 6.9 }, { d: "3", s: 7.2 }, { d: "4", s: 6.8 }, { d: "5", s: 7.0 },
{ d: "8", s: 6.7 }, { d: "9", s: 6.5 }, { d: "10", s: 6.6 }, { d: "11", s: 6.3 }, { d: "12", s: 6.4 },
{ d: "15", s: 6.1 }, { d: "16", s: 5.9 }, { d: "17", s: 6.0 }, { d: "18", s: 6.2 }, { d: "19", s: 6.0 },
{ d: "22", s: 6.5 }, { d: "23", s: 6.7 }, { d: "24", s: 6.9 }, { d: "25", s: 7.0 }, { d: "26", s: 7.1 },
{ d: "29", s: 7.0 }, { d: "30", s: 6.9 },
];
const DRIVERS_LOW = [
{ t: "Werkdruk & draagkracht", v: 34 },
{ t: "Een lastige situatie", v: 21 },
{ t: "De sfeer in het team", v: 15 },
{ t: "Mijn leidinggevende", v: 12 },
{ t: "Iets privé", v: 11 },
{ t: "Iets anders", v: 7 },
];
const DRIVERS_HIGH = [
{ t: "De sfeer in het team", v: 30 },
{ t: "Iets privé", v: 22 },
{ t: "Mijn leidinggevende", v: 18 },
{ t: "Werkdruk & draagkracht", v: 16 },
{ t: "Iets anders", v: 14 },
];
const TEAMS = [
{ team: "Vastgoedbeheer", n: 14, score: 7.1 },
{ team: "Onderhoud", n: 17, score: 7.0 },
{ team: "Staf & bedrijfsvoering", n: 11, score: 6.8 },
{ team: "Wijkbeheer", n: 20, score: 6.4 },
{ team: "Klantcontact", n: 22, score: 5.9 },
{ team: "Directie", n: 4, score: null }, // < 5 → verborgen
];
const DIST = [
{ label: "Zwaar (1–3)", pct: 8, color: C.coralDeep },
{ label: "Gemiddeld (4–6)", pct: 39, color: C.amber },
{ label: "Goed (7–10)", pct: 53, color: C.sage },
];
function scoreColor(s) {
if (s < 6) return C.coralDeep;
if (s < 6.8) return C.amber;
return C.sage;
}
function SunMark({ size = 30 }) {
return (
{Array.from({ length: 12 }, (_, i) => {
const a = (i / 12) * Math.PI * 2;
return
);
}
function Stat({ label, value, sub, accent }) {
return (
);
}
export default function HRDashboard() {
return (
Welzijnsoverzicht — {META.org}
CareVenture ♡
{META.periode} · {META.actief} van {META.uitgenodigd} medewerkers deden mee · alle cijfers zijn geaggregeerd en anoniem
{/* KPI's */}
{/* trend */}
Welzijn door de maand heen
Gemiddelde dagscore over de hele organisatie. Zichtbare dip in week 3.
[`${v}`, "gem. score"]} labelFormatter={(l) => `Dag ${l}`}
/>
{/* twee drivers-panelen */}
Wat speelt er bij mindere dagen
Gekozen thema bij een score van 1–4
[`${v}%`, "aandeel"]}
contentStyle={{ borderRadius: 12, border: `1px solid ${C.line}`, fontFamily: "Quicksand", fontSize: 13 }} />
Waar mensen energie van krijgen
Gekozen thema bij een score van 7–10
[`${v}%`, "aandeel"]}
contentStyle={{ borderRadius: 12, border: `1px solid ${C.line}`, fontFamily: "Quicksand", fontSize: 13 }} />
{/* teams met anonimiteitsdrempel */}
Per team
Teams met minder dan 5 actieve deelnemers worden verborgen om anonimiteit te beschermen.
{TEAMS.map((t) => (
{t.team}
{t.score === null ? (
) : (
)}
{t.score === null ? (
verborgen (<5)
) : (
{t.score.toFixed(1).replace(".", ",")}
)}
n={t.n}
))}
{/* verdeling */}
Verdeling van alle check-ins
{DIST.map((d) => (
{d.pct}%
))}
{DIST.map((d) => (
{/* inzicht / actie */}
Wat valt op deze maand
Werkdruk is de grootste bron van mindere dagen en piekte in week 3 — diezelfde week zakte de gemiddelde score.
De teamsfeer is juist de grootste energiebron. Bij Klantcontact ligt het welzijn
het laagst (5,9); daar is een gesprek of gerichte CareVenture-sessie het meest waardevol.
🔄
Sluit de cirkel. Koppel binnen twee weken terug aan medewerkers wat je met deze inzichten doet —
dat is dé factor die de deelname volgende maand hooghoudt.
Demo-dashboard · fictieve data · Individuele antwoorden zijn nooit zichtbaar voor de werkgever.
);
}