Csdd

const { useState, useMemo, useEffect } = React; const TREND_DATA = [ { id: 1, category: "Technologie & AI", trend: "Agentic AI & Convergentie", description: "AI evolueert van een tool naar een vloeibare 'collega' of teamlid; grenzen tussen mens en machine vervagen door mens-achtige interfaces.", period: "2025-2030", adoptionRate: "Hoog", businessImpact: "Transformationeel", recommendedAction: "Integreer AI-agenten in workflow-ontwerp in plaats van alleen als losse tools.", drivers: ["Vooruitgang in LLMs", "Vraag naar 24/7 productiviteit"], barriers: ["Ethische zorgen", "Angst voor jobverlies", "Integratiecomplexiteit"] }, { id: 2, category: "Technologie & AI", trend: "Nieuwe Waardecasus voor Tech", description: "Investeringsbeslissingen verschuiven van louter kostenbesparing naar waardecreatie door mens-machine samenwerking en verbeterd welzijn.", period: "2025-2030", adoptionRate: "Medium", businessImpact: "Hoog", recommendedAction: "Herzie ROI-modellen voor tech-investeringen naar menselijke waarde en welzijn.", drivers: ["ESG-normen", "War for talent", "Holistisch bedrijfsbeleid"], barriers: ["Kortetermijn focus op winst", "Gebrek aan meetmethoden voor welzijn"] }, { id: 3, category: "Werkorganisatie", trend: "Stagility", description: "De noodzaak om stabiliteit voor werknemers te bieden terwijl de organisatie op hoge snelheid (agility) kan blijven bewegen.", period: "2025 en verder", adoptionRate: "Hoog", businessImpact: "Hoog", recommendedAction: "Bouw vaste psychologische veiligheid in terwijl processen continu veranderen.", drivers: ["Marktvolatiliteit", "Behoefte aan mentale rust bij werknemers"], barriers: ["Rigide hiërarchieën", "Gebrek aan veranderingsmanagement"] }, { id: 4, category: "Werkorganisatie", trend: "Pixelatie van Werk", description: "Banen worden afgebroken tot kleine 'pixels' (taken en vaardigheden) die dynamisch worden ingezet op basis van resultaten in plaats van functies.", period: "2025-2030", adoptionRate: "Medium", businessImpact: "Transformationeel", recommendedAction: "Start met taakanalyse en match skills aan specifieke outputs in plaats van functietitels.", drivers: ["Gig economy", "Project-based werk", "Skill-sharing"], barriers: ["Oude functiehuizen", "CAO-beperkingen", "Administratieve last"] }, { id: 5, category: "Werkorganisatie", trend: "Herwinnen van Capaciteit (Slack)", description: "Het creëren van onvoorziene, vrije tijd ('slack') voor werknemers om burnout te voorkomen en ruimte te bieden voor innovatie.", period: "2025-2030", adoptionRate: "Laag", businessImpact: "Hoog", recommendedAction: "Implementeer 'focus-uren' en ongestructureerde tijd in de wekelijkse planning.", drivers: ["Burnout-preventie", "Innovatiedrang", "Focus op creativiteit"], barriers: ["Efficiency-cultuur", "Onderbezetting", "Time-tracking obsessie"] }, { id: 6, category: "Arbeidsmarkt", trend: "Skills-Based Hiring", description: "Vaardigheden en potentieel worden belangrijker dan diploma's of werkverleden; skills zijn de nieuwe 'munteenheid' van carrières.", period: "2025-2027", adoptionRate: "Hoog", businessImpact: "Hoog", recommendedAction: "Verwijder diploma-eisen uit vacatures waar mogelijk en test op concrete skills.", drivers: ["Arbeidskrapte", "Snel veranderende tech-stacks"], barriers: ["Traditionele selectiebias", "Gebrek aan goede assessment tools"] }, { id: 7, category: "Arbeidsmarkt", trend: "De Ervaringskloof overbruggen", description: "Organisaties moeten nieuwe wegen vinden voor instroom nu AI traditionele instapfuncties automatiseert en de 'meester-gezel' modellen eroderen.", period: "2025-2030", adoptionRate: "Medium", businessImpact: "Hoog", recommendedAction: "Ontwikkel nieuwe onboarding-paden waarbij juniors direct met AI leren werken.", drivers: ["AI Automatisering", "Vergrijzing", "Kennisoverdracht risico's"], barriers: ["Gebrek aan tijd voor mentorschap", "Legacy trainingsprogramma's"] }, { id: 8, category: "Arbeidsmarkt", trend: "Polyworking & Flexibiliteit", description: "Een toename in werknemers met meerdere banen tegelijk en de vraag naar radicale flexibiliteit in werktijden en -vormen.", period: "2025-2030", adoptionRate: "Hoog", businessImpact: "Gemiddeld", recommendedAction: "Faciliteer flexibele contractvormen en sta bijbanen transparant toe.", drivers: ["Financiële onafhankelijkheid", "Spreiding van risico", "Autonomie"], barriers: ["Exclusiviteitsclausules", "Conflicterende belangen", "Sociale zekerheid"] }, { id: 9, category: "Talentmanagement", trend: "Interne Talent Marketplaces", description: "Het op schaal matchen van interne medewerkers aan projecten, mentorships en gigs om mobiliteit en retentie te verhogen.", period: "2025-2030", adoptionRate: "Medium", businessImpact: "Hoog", recommendedAction: "Implementeer een platform dat interne skills en projectbehoeften transparant maakt.", drivers: ["Retentiebehoefte", "Kostenbesparing op werving", "Agility"], barriers: ["Silo-mentaliteit", "Angst voor talent-hoarding door managers"] }, { id: 10, category: "Talentmanagement", trend: "Motivatie op de 'Unit of One'", description: "Hyper-personalisatie van arbeidsvoorwaarden en feedback op basis van individuele drijfveren in plaats van brede demografische groepen.", period: "2025-2030", adoptionRate: "Laag", businessImpact: "Hoog", recommendedAction: "Gebruik data-gedreven enquêtes om individuele 'drivers' te identificeren en beloning aan te passen.", drivers: ["Individualisering", "Generatieverschillen", "Personalisatie-trend"], barriers: ["Administratieve complexiteit", "Gelijkheidsbeginsel in HR-beleid"] }, { id: 11, category: "Cultuur & Welzijn", trend: "Neurodiversiteit & AI", description: "AI wordt ingezet als ondersteuning om de unieke talenten van neurodivergente werknemers (zoals autisme of dyslexie) te ontsluiten.", period: "2025-2027", adoptionRate: "Medium", businessImpact: "Gemiddeld", recommendedAction: "Voorzie assistieve AI-tools specifiek voor verschillende cognitieve stijlen.", drivers: ["Inclusie-agenda", "Tekort aan specialistisch talent"], barriers: ["Onbekendheid met neurodiversiteit", "Privacy van gezondheidsdata"] }, { id: 12, category: "Cultuur & Welzijn", trend: "Human-Centric Design", description: "Werkplekken worden herontworpen met focus op mentale gezondheid, menselijke interactie en biofiel ontwerp om vervreemding door tech tegen te gaan.", period: "2026-2030", adoptionRate: "Hoog", businessImpact: "Hoog", recommendedAction: "Investeer in 'human-only' zones en natuurlijke elementen in de kantooromgeving.", drivers: ["Mentale gezondheidscrisis", "Remote work vermoeidheid"], barriers: ["Vastgoedkosten", "Kortetermijn besparingsdrift"] }, { id: 13, category: "Leiderschap", trend: "Heruitvinden van de Manager", description: "Managers transformeren van 'opzichters' naar coaches en 'werk-ontwerpers' die menselijke oordeelsvorming (judgment) centraal stellen.", period: "2025-2030", adoptionRate: "Hoog", businessImpact: "Transformationeel", recommendedAction: "Train managers in coaching-vaardigheden en strategisch werk-ontwerp.", drivers: ["Automatisering van managementtaken", "Behoefte aan zingeving"], barriers: ["Machtshonger", "Gebrek aan soft skills training"] }, { id: 14, category: "Leiderschap", trend: "Dichten van de Leiderschapskloof", description: "Een dringende noodzaak aan leiders met sterke empathie, visie en het vermogen om AI-transformaties ethisch te sturen.", period: "2025-2030", adoptionRate: "Hoog", businessImpact: "Hoog", recommendedAction: "Selecteer leiders op basis van emotionele intelligentie en ethisch kompas.", drivers: ["Technologische disruptie", "Maatschappelijke druk op bedrijven"], barriers: ["Focus op historische prestaties boven potentieel"] } ]; const App = () => { const [filterCategory, setFilterCategory] = useState('Alle'); const [searchTerm, setSearchTerm] = useState(''); const [hoveredTrend, setHoveredTrend] = useState(null); const categories = ['Alle', ...new Set(TREND_DATA.map(t => t.category))]; const filteredTrends = useMemo(() => { return TREND_DATA.filter(t => { const matchCat = filterCategory === 'Alle' || t.category === filterCategory; const matchSearch = t.trend.toLowerCase().includes(searchTerm.toLowerCase()) || t.category.toLowerCase().includes(searchTerm.toLowerCase()); return matchCat && matchSearch; }); }, [filterCategory, searchTerm]); return ( <div className="max-w-6xl mx-auto p-4 md:p-6 bg-white rounded-3xl shadow-2xl border border-slate-100 overflow-hidden"> {/* Header Widget */} <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8"> <div> <h2 className="text-2xl font-extrabold text-slate-900 flex items-center gap-2"> <span className="w-2 h-8 bg-blue-600 rounded-full"></span> Recruitment Trends 2025-2030 </h2> <p className="text-slate-500 text-sm mt-1 font-medium">Strategische inzichten door Oxida</p> </div> <div className="flex flex-wrap gap-2"> <input type="text" placeholder="Zoek trend..." className="px-4 py-2 bg-slate-50 border border-slate-200 rounded-full text-xs outline-none focus:ring-2 focus:ring-blue-500 transition-all w-40" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} /> <select className="px-4 py-2 bg-slate-50 border border-slate-200 rounded-full text-xs outline-none cursor-pointer" value={filterCategory} onChange={(e) => setFilterCategory(e.target.value)} > {categories.map(c => <option key={c} value={c}>{c}</option>)} </select> </div> </div> {/* Cards Grid */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5"> {filteredTrends.map((t) => ( <div key={t.id} onMouseEnter={() => setHoveredTrend(t.id)} onMouseLeave={() => setHoveredTrend(null)} className="relative group bg-slate-50 hover:bg-white p-5 rounded-2xl border border-slate-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300 min-h-[220px] flex flex-col" > <div className="flex justify-between items-start mb-3"> <span className={`text-[9px] font-bold uppercase tracking-widest px-2 py-0.5 rounded ${ t.category === 'Technologie & AI' ? 'bg-purple-100 text-purple-700' : t.category === 'Werkorganisatie' ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700' }`}> {t.category} </span> <span className="text-[10px] font-mono text-slate-400">{t.period}</span> </div> <h3 className="text-base font-bold text-slate-900 mb-2 group-hover:text-blue-600 transition-colors"> {t.trend} </h3> <p className="text-slate-500 text-xs line-clamp-3 leading-relaxed mb-4"> {t.description} </p> <div className="mt-auto pt-3 border-t border-slate-200 flex justify-between items-center"> <div className="flex flex-col"> <span className="text-[8px] uppercase text-slate-400 font-bold">Impact</span> <span className="text-[10px] font-bold text-slate-700">{t.businessImpact}</span> </div> <div className="text-blue-600 opacity-0 group-hover:opacity-100 transition-opacity"> <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="9 5l7 7-7 7" /> </svg> </div> </div> {/* Hover Overlay - Simplified for Widget */} {hoveredTrend === t.id && ( <div className="absolute inset-0 bg-slate-900/95 rounded-2xl p-5 text-white z-10 flex flex-col animate-in fade-in duration-200"> <h4 className="text-xs font-bold text-blue-400 uppercase mb-3">Aanbevolen Actie</h4> <p className="text-xs text-white leading-relaxed mb-4 italic">"{t.recommendedAction}"</p> <div className="mt-auto"> <div className="text-[9px] font-bold text-white/40 uppercase mb-1">Key Driver</div> <div className="text-[10px] text-blue-200">{t.drivers[0]}</div> </div> </div> )} </div> ))} </div> {/* Widget Footer */} <div className="mt-8 pt-4 border-t border-slate-100 flex justify-between items-center"> <div className="text-[10px] font-bold text-slate-400 flex items-center gap-1"> <span className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span> Live Update 2025 </div> <div className="text-[10px] font-black tracking-tighter text-slate-900 uppercase"> #Oxidaengineering </div> </div> </div> ); }; const root = ReactDOM.createRoot(document.getElementById('oxida-trends-root')); root.render(<App />);