Add Dashboard page and useAuth hook

src/hooks/useAuth.ts

@@ -0,0 +1,24 @@
+import { useState, useCallback } from 'react';
+import { apiClient } from '../api/client';
+
+export function useAuth() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const login = useCallback(async (email: string, password: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const { data } = await apiClient.post('/v1/auth/login', { email, password });
+      localStorage.setItem('access_token', data.token);
+      return true;
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Login failed');
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return { login, loading, error };
+}

src/pages/Dashboard.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '../api/client';
+import { LoadingSpinner } from '../components/LoadingSpinner';
+
+interface User { id: string; username: string; email: string; }
+
+export const Dashboard: React.FC = () => {
+  const { data: users, isLoading } = useQuery<User[]>({
+    queryKey: ['users'],
+    queryFn: () => apiClient.get('/v1/users').then(r => r.data),
+  });
+
+  return (
+    <main>
+      <h1>Dashboard</h1>
+      {isLoading ? <LoadingSpinner /> : (
+        <table>
+          <thead><tr><th>Username</th><th>Email</th></tr></thead>
+          <tbody>
+            {users?.map(u => (
+              <tr key={u.id}><td>{u.username}</td><td>{u.email}</td></tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </main>
+  );
+};