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

src/App.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { Routes, Route, Navigate } from 'react-router-dom'
+import { Routes, Route, Navigate, Link } from 'react-router-dom'
 import { useApp } from './store/AppContext'
 
+import Login from './pages/Login'
+import Dashboard from './pages/Dashboard'
+
 // Placeholder components for routing structure
-const Login = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Login</h1><p className="mt-4">Please log in.</p></div>
-const Dashboard = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Dashboard</h1><p className="mt-4">Welcome to Respellion Leerplatform.</p></div>
 const Admin = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Admin</h1><p className="mt-4">Kennisbeheer and Source Upload.</p></div>
 const Testen = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Weektest</h1><p className="mt-4">Start your weekly test here.</p></div>
 const Leren = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Leren</h1><p className="mt-4">Start your weekly learning session.</p></div>
@@ -12,9 +13,9 @@ const Leaderboard = () => <div className="p-8"><h1 className="text-4xl text-teal
 
 // Protected Route Wrapper
 const ProtectedRoute = ({ children, requireAdmin }) => {
-  const { state } = useApp()
+  const { state, logout } = useApp()
   
-  if (state.isLoading) return <div className="p-8">Loading...</div>
+  if (state.isLoading) return <div className="p-8">Laden...</div>
   
   if (!state.currentUser) {
     return <Navigate to="/login" replace />
@@ -26,20 +27,31 @@ const ProtectedRoute = ({ children, requireAdmin }) => {
 
   return (
     <div className="min-h-screen bg-bg text-fg font-sans flex flex-col">
-      {/* Basic Navigation Bar Placeholder */}
-      <nav className="bg-bg-dark text-paper p-4 shadow-soft flex justify-between items-center">
-        <div className="font-bold text-xl tracking-tight">{`{ r espellion }`}</div>
-        <div className="flex gap-4">
-          <a href="/" className="hover:text-accent-soft">Dashboard</a>
-          <a href="/learn" className="hover:text-accent-soft">Leren</a>
-          <a href="/test" className="hover:text-accent-soft">Testen</a>
-          <a href="/leaderboard" className="hover:text-accent-soft">Leaderboard</a>
+      {/* Navigation Bar */}
+      <nav className="bg-bg-dark text-paper p-4 shadow-soft flex justify-between items-center sticky top-0 z-50">
+        <Link to="/" className="flex items-center">
+          <img src="/images/logo-light.png" alt="Respellion Logo" className="h-8 object-contain" />
+        </Link>
+        <div className="flex items-center gap-6 text-sm font-medium">
+          <Link to="/" className="hover:text-accent-soft transition-colors">Dashboard</Link>
+          <Link to="/learn" className="hover:text-accent-soft transition-colors">Leren</Link>
+          <Link to="/test" className="hover:text-accent-soft transition-colors">Testen</Link>
+          <Link to="/leaderboard" className="hover:text-accent-soft transition-colors">Leaderboard</Link>
           {state.currentUser.role === 'admin' && (
-            <a href="/admin" className="hover:text-accent-soft">Admin</a>
+            <Link to="/admin" className="hover:text-accent-soft transition-colors flex items-center gap-1">
+              <span className="w-2 h-2 rounded-full bg-accent inline-block"></span>
+              Admin
+            </Link>
           )}
+          <button 
+            onClick={logout}
+            className="ml-4 border border-bg-warm/30 rounded-[var(--r-pill)] px-3 py-1 hover:bg-paper/10 transition-colors"
+          >
+            Uitloggen
+          </button>
         </div>
       </nav>
-      <main className="flex-1 max-w-[var(--max)] w-full mx-auto">
+      <main className="flex-1 w-full max-w-[var(--max)] mx-auto">
         {children}
       </main>
     </div>
@@ -49,7 +61,7 @@ const ProtectedRoute = ({ children, requireAdmin }) => {
 function App() {
   const { state } = useApp()
 
-  if (state.isLoading) return <div className="p-8">Loading application state...</div>
+  if (state.isLoading) return <div className="p-8 flex items-center justify-center min-h-screen">De applicatie wordt geladen...</div>
 
   return (
     <Routes>

src/components/ui/Button.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const Button = ({ 
+  children, 
+  variant = 'primary', 
+  size = 'md', 
+  className = '', 
+  ...props 
+}) => {
+  const baseStyles = "inline-flex items-center justify-center font-bold transition-all focus:outline-none focus:ring-2 focus:ring-offset-2";
+  
+  const variants = {
+    primary: "bg-accent text-paper hover:bg-purple-700 focus:ring-accent",
+    secondary: "bg-teal text-paper hover:bg-teal-700 focus:ring-teal",
+    outline: "border-2 border-teal text-teal hover:bg-teal hover:text-paper focus:ring-teal",
+    ghost: "text-teal hover:bg-bg-warm focus:ring-bg-warm"
+  };
+
+  const sizes = {
+    sm: "px-3 py-1.5 text-sm rounded-[var(--r-sm)]",
+    md: "px-5 py-2.5 text-base rounded-[var(--r-md)]",
+    lg: "px-8 py-3.5 text-lg rounded-[var(--r-lg)]",
+    pill: "px-6 py-3 text-base rounded-[var(--r-pill)] shadow-pill"
+  };
+
+  return (
+    <button 
+      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/components/ui/Card.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Card = ({ children, className = '', hoverable = false, ...props }) => {
+  return (
+    <div 
+      className={`
+        bg-paper rounded-[var(--r-md)] shadow-soft p-6
+        ${hoverable ? 'transition-transform hover:-translate-y-1 hover:shadow-pill' : ''}
+        ${className}
+      `}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

src/components/ui/Input.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Input = React.forwardRef(({ label, error, className = '', ...props }, ref) => {
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      {label && (
+        <label className="text-[var(--t-small)] font-medium text-fg-muted">
+          {label}
+        </label>
+      )}
+      <input
+        ref={ref}
+        className={`
+          w-full px-4 py-2.5 bg-paper border border-bg-warm rounded-[var(--r-sm)]
+          text-fg placeholder:text-fg-subtle
+          focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent
+          transition-all
+          ${error ? 'border-red-500 focus:ring-red-500' : ''}
+        `}
+        {...props}
+      />
+      {error && (
+        <span className="text-xs text-red-500 mt-1">{error}</span>
+      )}
+    </div>
+  );
+});
+
+Input.displayName = 'Input';
+
+export default Input;

src/components/ui/Select.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+const Select = React.forwardRef(({ label, error, options, className = '', ...props }, ref) => {
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      {label && (
+        <label className="text-[var(--t-small)] font-medium text-fg-muted">
+          {label}
+        </label>
+      )}
+      <select
+        ref={ref}
+        className={`
+          w-full px-4 py-2.5 bg-paper border border-bg-warm rounded-[var(--r-sm)]
+          text-fg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent
+          transition-all cursor-pointer appearance-none
+          ${error ? 'border-red-500 focus:ring-red-500' : ''}
+        `}
+        style={{
+          backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`,
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'right 1rem center',
+          backgroundSize: '1em'
+        }}
+        {...props}
+      >
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      {error && (
+        <span className="text-xs text-red-500 mt-1">{error}</span>
+      )}
+    </div>
+  );
+});
+
+Select.displayName = 'Select';
+
+export default Select;

src/components/ui/Tag.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const Tag = ({ children, variant = 'default', className = '', ...props }) => {
+  const variants = {
+    default: "bg-bg-warm text-fg",
+    accent: "bg-accent-soft text-purple-700",
+    success: "bg-success text-teal-900",
+    dark: "bg-bg-dark text-paper",
+  };
+
+  return (
+    <span 
+      className={`
+        inline-flex items-center px-2 py-1 rounded-[var(--r-pill)]
+        label whitespace-nowrap
+        ${variants[variant]}
+        ${className}
+      `}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Tag;

src/pages/Dashboard.jsx

@@ -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;

src/pages/Login.jsx

@@ -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;