feat: add React frontend with login, signup, dashboard pages and admin seeding support

frontend/src/pages/Login.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+
+export function LoginPage() {
+    const navigate = useNavigate()
+    const [username, setUsername] = useState('')
+    const [password, setPassword] = useState('')
+    const [error, setError] = useState<string | null>(null)
+    const [loading, setLoading] = useState(false)
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault()
+        setError(null)
+        setLoading(true)
+
+        try {
+            const res = await fetch('/api/auth/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ username, password }),
+            })
+
+            if (!res.ok) {
+                if (res.status === 401) {
+                    setError('Invalid username or password')
+                } else {
+                    setError('Login failed. Please try again.')
+                }
+                return
+            }
+
+            // Redirect to dashboard on success
+            navigate('/')
+        } catch {
+            setError('Network error. Is the server running?')
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <div className="login-container">
+            <div className="login-card">
+                <div className="login-header">
+                    <img src="/logo.svg" alt="zhealth" className="login-logo" />
+                    <h1>zhealth</h1>
+                </div>
+                <p className="text-secondary text-sm">Sign in to continue</p>
+
+                <form onSubmit={handleSubmit}>
+                    <div className="form-group">
+                        <label htmlFor="username">Username</label>
+                        <input
+                            id="username"
+                            type="text"
+                            className="input"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            autoComplete="username"
+                            required
+                            autoFocus
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label htmlFor="password">Password</label>
+                        <input
+                            id="password"
+                            type="password"
+                            className="input"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            autoComplete="current-password"
+                            required
+                        />
+                    </div>
+
+                    {error && (
+                        <div className="error-message">
+                            {error}
+                        </div>
+                    )}
+
+                    <button
+                        type="submit"
+                        className="btn btn-primary btn-block"
+                        disabled={loading}
+                    >
+                        {loading ? 'Signing in...' : 'Sign in'}
+                    </button>
+                </form>
+
+                <p className="text-secondary text-sm" style={{ marginTop: 'var(--space-md)', textAlign: 'center' }}>
+                    Don't have an account? <Link to="/signup">Sign up</Link>
+                </p>
+            </div>
+        </div>
+    )
+}