rve/learning-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement core UI components and build initial dashboard layout with navigation structure

Browse Source
This commit is contained in:
RaymondVerhoef
2026-05-10 10:52:12 +02:00
parent 2fb50a19c9
commit b988028cf8
13 changed files with 365 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/pages/Dashboard.jsx Normal file
View File

@@ -0,0 +1,104 @@
import React from 'react';
import { useApp } from '../store/AppContext';
import Card from '../components/ui/Card';
import Button from '../components/ui/Button';
import Tag from '../components/ui/Tag';
const Dashboard = () => {
const { state } = useApp();
const { currentUser, weekNumber } = state;
return (
<div className="p-6 md:p-10 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
<header>
<h1 className="text-3xl md:text-5xl mb-2">Welkom, {currentUser?.name}</h1>
<p className="text-fg-muted text-lg">Dit is je overzicht voor week {weekNumber}.</p>
</header>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card className="flex flex-col border border-bg-warm" hoverable>
<div className="flex justify-between items-start mb-4">
<div>
<h3 className="text-xl">Leren</h3>
<p className="text-fg-muted text-sm mt-1">Jouw onderwerp deze week:</p>
</div>
<Tag variant="accent">Te doen</Tag>
</div>
<h2 className="text-2xl mt-2 mb-6">De Rol van de Product Owner</h2>
<Button className="mt-auto">Start Leersessie</Button>
</Card>
<Card className="flex flex-col border border-bg-warm" hoverable>
<div className="flex justify-between items-start mb-4">
<div>
<h3 className="text-xl">Testen</h3>
<p className="text-fg-muted text-sm mt-1">Weektest 10 vragen</p>
</div>
<Tag variant="default">Te doen</Tag>
</div>
<div className="flex-1 flex items-center justify-center py-6 text-fg-subtle">
Rond eerst je leersessie af
</div>
<Button variant="outline" className="mt-auto" disabled>Start Test</Button>
</Card>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2">
<h3 className="text-2xl mb-4">Recente Activiteit</h3>
<Card className="p-0 overflow-hidden border border-bg-warm">
<div className="divide-y divide-bg-warm">
{/* Placeholder activity items */}
<div className="p-4 flex items-center gap-4 hover:bg-bg-warm transition-colors">
<div className="w-10 h-10 rounded-[var(--r-org)] bg-accent-soft flex items-center justify-center text-purple-700 font-bold">
T
</div>
<div>
<p className="font-medium">Test afgerond: Informatiebeveiliging</p>
<p className="text-sm text-fg-muted">Vorige week • Score: 90%</p>
</div>
<div className="ml-auto text-teal font-bold">+15 pt</div>
</div>
<div className="p-4 flex items-center gap-4 hover:bg-bg-warm transition-colors">
<div className="w-10 h-10 rounded-[var(--r-org)] bg-sage flex items-center justify-center text-teal-900 font-bold">
L
</div>
<div>
<p className="font-medium">Leersessie: Informatiebeveiliging</p>
<p className="text-sm text-fg-muted">Vorige week</p>
</div>
<div className="ml-auto text-teal font-bold">+15 pt</div>
</div>
</div>
</Card>
</div>
<div>
<h3 className="text-2xl mb-4">Mini Leaderboard</h3>
<Card className="border border-bg-warm">
<div className="space-y-4">
{/* Placeholder leaderboard items */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span className="font-mono font-bold text-accent">1.</span>
<span className="font-medium">Admin</span>
</div>
<Tag variant="dark">120 pt</Tag>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span className="font-mono font-bold text-teal">2.</span>
<span className="font-medium">{currentUser?.name}</span>
</div>
<Tag variant="default">85 pt</Tag>
</div>
</div>
<Button variant="ghost" className="w-full mt-4 text-sm">Bekijk volledig leaderboard</Button>
</Card>
</div>
</div>
</div>
);
};
export default Dashboard;

80
src/pages/Login.jsx Normal file
View File

@@ -0,0 +1,80 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useApp } from '../store/AppContext';
import Card from '../components/ui/Card';
import Input from '../components/ui/Input';
import Select from '../components/ui/Select';
import Button from '../components/ui/Button';
const Login = () => {
const { state, login } = useApp();
const navigate = useNavigate();
const [selectedUser, setSelectedUser] = useState('');
const [pin, setPin] = useState('');
const [error, setError] = useState('');
const userOptions = [
{ value: '', label: 'Selecteer een gebruiker...' },
...state.users.map(u => ({ value: u.id, label: u.name }))
];
const handleLogin = (e) => {
e.preventDefault();
setError('');
if (!selectedUser || !pin) {
setError('Vul alle velden in.');
return;
}
const success = login(selectedUser, pin);
if (success) {
navigate('/');
} else {
setError('Onjuiste PIN.');
}
};
return (
<div className="min-h-screen bg-bg flex items-center justify-center p-4">
<div className="w-full max-w-md">
<div className="text-center mb-8">
<img src="/images/icon.png" alt="Respellion Icon" className="h-24 mx-auto mb-4" />
<h2 className="text-2xl text-teal font-bold tracking-tight">Respellion</h2>
<p className="text-fg-muted mt-2">Leerplatform Login</p>
</div>
<Card className="border border-bg-warm">
<form onSubmit={handleLogin} className="flex flex-col gap-5">
<Select
label="Gebruiker"
options={userOptions}
value={selectedUser}
onChange={(e) => setSelectedUser(e.target.value)}
/>
<Input
label="PIN Code"
type="password"
inputMode="numeric"
pattern="[0-9]*"
maxLength={4}
placeholder="••••"
value={pin}
onChange={(e) => setPin(e.target.value)}
/>
{error && <div className="text-red-500 text-sm font-medium">{error}</div>}
<Button type="submit" className="mt-2 w-full">
Inloggen
</Button>
</form>
</Card>
</div>
</div>
);
};
export default Login;