feat: Upload page with drag-and-drop UploadZone and CSV format guide

frontend/src/components/instructor/UploadZone.tsx

@@ -1,3 +1,47 @@
-export default function UploadZone() {
-  return <div>UploadZone</div>
+import { useRef, useState } from 'react'
+
+interface Props {
+  onFile: (file: File) => void
+  uploading: boolean
+}
+
+export default function UploadZone({ onFile, uploading }: Props) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [dragging, setDragging] = useState(false)
+
+  function handleDrop(e: React.DragEvent) {
+    e.preventDefault()
+    setDragging(false)
+    const file = e.dataTransfer.files[0]
+    if (file) onFile(file)
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    if (file) onFile(file)
+  }
+
+  return (
+    <div
+      onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={handleDrop}
+      onClick={() => inputRef.current?.click()}
+      className={`border-2 border-dashed rounded-xl p-12 text-center cursor-pointer transition-colors select-none ${
+        dragging ? 'border-indigo-500 bg-indigo-950' : 'border-gray-700 hover:border-gray-600'
+      } ${uploading ? 'opacity-50 pointer-events-none' : ''}`}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept=".csv"
+        className="hidden"
+        onChange={handleChange}
+      />
+      <p className="text-gray-300 font-medium">
+        {uploading ? 'Uploading...' : 'Drop your CSV here or click to browse'}
+      </p>
+      <p className="text-gray-500 text-sm mt-1">.csv files only</p>
+    </div>
+  )
 }

frontend/src/pages/Upload.tsx

@@ -1,3 +1,80 @@
+import { useState } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import Navbar from '../components/shared/Navbar'
+import UploadZone from '../components/instructor/UploadZone'
+import { uploadCSV } from '../api/upload'
+
 export default function Upload() {
-  return <div>Upload</div>
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const topicId = searchParams.get('topic_id') ?? ''
+  const topicName = searchParams.get('topic_name') ?? 'Unknown topic'
+  const [result, setResult] = useState<{ inserted: number } | null>(null)
+  const [error, setError] = useState('')
+  const [uploading, setUploading] = useState(false)
+
+  async function handleFile(file: File) {
+    if (!topicId) {
+      setError('Missing topic ID — go back to the dashboard.')
+      return
+    }
+    setError('')
+    setUploading(true)
+    try {
+      const res = await uploadCSV(topicId, file)
+      setResult(res)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Upload failed')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-950">
+      <Navbar />
+      <div className="max-w-2xl mx-auto px-6 py-8">
+        <button
+          onClick={() => navigate('/instructor/dashboard')}
+          className="text-sm text-gray-400 hover:text-white mb-6 inline-flex items-center gap-1 transition-colors"
+        >
+          ← Back to dashboard
+        </button>
+
+        <h1 className="text-2xl font-semibold text-white mb-1">Upload questions</h1>
+        <p className="text-gray-400 text-sm mb-6">
+          Topic: <span className="text-indigo-400">{topicName}</span>
+        </p>
+
+        {result ? (
+          <div className="bg-green-950 border border-green-800 rounded-xl p-8 text-center">
+            <p className="text-green-300 text-lg font-semibold">
+              ✓ {result.inserted} questions uploaded
+            </p>
+            <button
+              onClick={() => navigate('/instructor/dashboard')}
+              className="mt-4 text-sm text-gray-400 hover:text-white transition-colors"
+            >
+              Back to dashboard
+            </button>
+          </div>
+        ) : (
+          <>
+            <UploadZone onFile={handleFile} uploading={uploading} />
+            {error && <p className="text-red-400 text-sm mt-3">{error}</p>}
+            <div className="mt-6 bg-gray-900 border border-gray-800 rounded-lg p-4">
+              <p className="text-gray-400 text-sm font-medium mb-2">CSV format</p>
+              <pre className="text-xs text-gray-500 font-mono whitespace-pre">{`question_text,difficulty\nWhat is Python?,easy\nExplain the GIL,hard\nWhat is a decorator?,medium`}</pre>
+              <p className="text-gray-500 text-xs mt-2">
+                Difficulty: <code className="text-gray-400">easy</code> |{' '}
+                <code className="text-gray-400">medium</code> |{' '}
+                <code className="text-gray-400">hard</code>{' '}
+                (defaults to <code className="text-gray-400">medium</code> if missing or invalid)
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
 }