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

feat: implement Anthropic API integration with simulation mode and a configurable admin dashboard

Browse Source
This commit is contained in:
RaymondVerhoef
2026-05-10 12:07:00 +02:00
parent 260644b41a
commit a626042092
7 changed files with 583 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/Admin/index.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Database, FileText, Settings, Users, Network, Clock, CheckCircle2, AlertCircle, Save } from 'lucide-react';
import { Database, FileText, Settings, Users, Network, Clock, CheckCircle2, AlertCircle, Save, Info } from 'lucide-react';
import Card from '../../components/ui/Card';
import Tag from '../../components/ui/Tag';
import Button from '../../components/ui/Button';
@@ -12,6 +12,8 @@ const Admin = () => {
const [activeTab, setActiveTab] = useState('bronnen');
const [sources, setSources] = useState([]);
const [apiKey, setApiKey] = useState('');
const [model, setModel] = useState('');
const [useSimulation, setUseSimulation] = useState(false);
const [saveStatus, setSaveStatus] = useState(null);
const loadSources = () => {
@@ -24,12 +26,16 @@ const Admin = () => {
}
if (activeTab === 'instellingen') {
setApiKey(storage.get('admin:anthropic_key', ''));
setModel(storage.get('admin:model', 'claude-sonnet-4-20250514'));
setUseSimulation(storage.get('admin:use_simulation', false));
}
}, [activeTab]);
const saveSettings = (e) => {
e.preventDefault();
storage.set('admin:anthropic_key', apiKey);
storage.set('admin:anthropic_key', apiKey.trim());
storage.set('admin:model', model.trim());
storage.set('admin:use_simulation', useSimulation);
setSaveStatus('Opgeslagen!');
setTimeout(() => setSaveStatus(null), 3000);
};
@@ -153,12 +159,45 @@ const Admin = () => {
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
/>
<div className="mt-4">
<Input
label="Model ID"
placeholder="claude-sonnet-4-20250514"
value={model}
onChange={(e) => setModel(e.target.value)}
/>
<p className="text-xs text-fg-muted mt-1">Laat leeg voor de standaard. Controleer je Anthropic Console voor beschikbare modellen.</p>
</div>
<p className="text-xs text-fg-muted mt-2">
Deze sleutel wordt lokaal in je browser opgeslagen (`localStorage`) en wordt gebruikt voor alle AI-interacties.
Deze sleutel wordt lokaal in je browser opgeslagen (`localStorage`).
</p>
</div>
<div className="pt-4 border-t border-bg-warm">
<div className="flex items-center justify-between mb-4">
<div>
<h3 className="text-lg font-medium">Simulatie Mode</h3>
<p className="text-sm text-fg-muted">Gebruik gesimuleerde AI-antwoorden als de API niet werkt.</p>
</div>
<label className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
className="sr-only peer"
checked={useSimulation}
onChange={(e) => setUseSimulation(e.target.checked)}
/>
<div className="w-11 h-6 bg-bg-warm peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal"></div>
</label>
</div>
{useSimulation && (
<div className="p-3 bg-teal/5 border border-teal/20 rounded-[var(--r-sm)] flex gap-3 text-sm text-teal-800">
<Info size={18} className="flex-shrink-0" />
<p>Wanneer ingeschakeld, zal het platform doen alsof de AI teksten verwerkt zonder een echte API-aanroep te doen. Ideaal voor UI testen.</p>
</div>
)}
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-4 pt-4">
<Button type="submit">
<Save size={18} className="mr-2" /> Instellingen Opslaan
</Button>