feat: implement core knowledge graph UI components, extraction pipeline, and initial platform navigation pages

src/components/admin/UploadZone.jsx

@@ -18,9 +18,7 @@ const UploadZone = ({ onUploadComplete }) => {
     setIsDragging(true);
   };
 
-  const handleDragLeave = () => {
-    setIsDragging(false);
-  };
+  const handleDragLeave = () => setIsDragging(false);
 
   const processFile = async (file) => {
     setIsProcessing(true);
@@ -28,10 +26,10 @@ const UploadZone = ({ onUploadComplete }) => {
     try {
       const text = await file.text();
       await processSourceText(text, file.name);
-      setStatus({ type: 'success', msg: `Succesvol verwerkt: ${file.name}` });
+      setStatus({ type: 'success', msg: `Successfully processed: ${file.name}` });
       if (onUploadComplete) onUploadComplete();
     } catch (error) {
-      setStatus({ type: 'error', msg: `Fout bij verwerken: ${error.message}` });
+      setStatus({ type: 'error', msg: `Error processing file: ${error.message}` });
     } finally {
       setIsProcessing(false);
     }
@@ -40,42 +38,29 @@ const UploadZone = ({ onUploadComplete }) => {
   const handleDrop = (e) => {
     e.preventDefault();
     setIsDragging(false);
-    
-    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+    if (e.dataTransfer.files?.length > 0) {
       const file = e.dataTransfer.files[0];
       if (file.type === 'text/plain' || file.name.endsWith('.md')) {
         processFile(file);
       } else {
-        setStatus({ type: 'error', msg: 'Alleen .txt en .md bestanden worden momenteel ondersteund.' });
+        setStatus({ type: 'error', msg: 'Only .txt and .md files are currently supported.' });
       }
     }
   };
 
   const handleFileSelect = (e) => {
-    if (e.target.files && e.target.files.length > 0) {
-      processFile(e.target.files[0]);
-    }
+    if (e.target.files?.length > 0) processFile(e.target.files[0]);
   };
 
   const handleUrlSubmit = async (e) => {
     e.preventDefault();
-    if (!url) return;
-    
-    setIsProcessing(true);
-    setStatus(null);
-    try {
-      // In a real scenario, this would call a backend proxy to bypass CORS.
-      // For this prototype, we'll simulate fetching or only support text URLs.
-      setStatus({ type: 'error', msg: 'URL import is experimenteel en momenteel uitgeschakeld ivm CORS restricties in browser.' });
-    } finally {
-      setIsProcessing(false);
-    }
+    setStatus({ type: 'error', msg: 'URL import is disabled in the browser due to CORS restrictions.' });
   };
 
   return (
     <div className="space-y-6">
       <Card 
-        className={`border-2 border-dashed transition-colors flex flex-col items-center justify-center py-12 ${
+        className={`border-2 border-dashed transition-colors flex flex-col items-center justify-center py-12 cursor-pointer ${
           isDragging ? 'border-teal bg-teal/5' : 'border-bg-warm bg-bg-warm/20'
         } ${isProcessing ? 'opacity-50 pointer-events-none' : ''}`}
         onDragOver={handleDragOver}
@@ -84,10 +69,10 @@ const UploadZone = ({ onUploadComplete }) => {
         onClick={() => fileInputRef.current?.click()}
       >
         <UploadCloud size={48} className="text-teal/40 mb-4" />
-        <p className="font-medium text-lg">Sleep bestanden hierheen</p>
-        <p className="text-sm text-fg-muted mb-4">Ondersteunt .txt en .md (Max 5MB)</p>
+        <p className="font-medium text-lg">Drag files here</p>
+        <p className="text-sm text-fg-muted mb-4">Supports .txt and .md (max 5MB)</p>
         <Button variant="outline" type="button" disabled={isProcessing}>
-          {isProcessing ? 'Bezig met AI extractie...' : 'Bladeren op apparaat'}
+          {isProcessing ? 'AI extraction in progress...' : 'Browse files'}
         </Button>
         <input 
           type="file" 
@@ -100,15 +85,15 @@ const UploadZone = ({ onUploadComplete }) => {
 
       <div className="flex items-center gap-4">
         <div className="flex-1 border-t border-bg-warm"></div>
-        <span className="text-sm text-fg-muted uppercase tracking-wider">OF</span>
+        <span className="text-sm text-fg-muted uppercase tracking-wider">OR</span>
         <div className="flex-1 border-t border-bg-warm"></div>
       </div>
 
       <form onSubmit={handleUrlSubmit} className="flex gap-2 items-end">
         <div className="flex-1">
           <Input 
-            label="Importeer van URL"
-            placeholder="https://wiki.respellion.nl/artikel"
+            label="Import from URL"
+            placeholder="https://wiki.respellion.com/article"
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             disabled={isProcessing}
@@ -125,7 +110,7 @@ const UploadZone = ({ onUploadComplete }) => {
         }`}>
           {status.type === 'error' ? <AlertCircle className="text-red-500 flex-shrink-0" /> : <CheckCircle className="text-teal-600 flex-shrink-0" />}
           <div>
-            <p className="font-medium">{status.type === 'error' ? 'Fout' : 'Succes'}</p>
+            <p className="font-medium">{status.type === 'error' ? 'Error' : 'Success'}</p>
             <p className="text-sm">{status.msg}</p>
           </div>
         </div>