feat(frontend): implement step 11 — pages, components, and routing with React Query

frontend/src/__tests__/api/authApi.test.ts

@@ -9,7 +9,7 @@ vi.mock('@/api/apiClient', () => ({
   },
 }))
 
-const mockedApiClient = apiClient as {
+const mockedApiClient = apiClient as unknown as {
   post: ReturnType<typeof vi.fn>
   get: ReturnType<typeof vi.fn>
 }

frontend/src/__tests__/api/entitiesApi.test.ts

@@ -17,7 +17,7 @@ vi.mock('@/api/apiClient', () => ({
   },
 }))
 
-const mockedApiClient = apiClient as {
+const mockedApiClient = apiClient as unknown as {
   get: ReturnType<typeof vi.fn>
   post: ReturnType<typeof vi.fn>
   put: ReturnType<typeof vi.fn>

frontend/src/__tests__/api/logsApi.test.ts

@@ -8,7 +8,7 @@ vi.mock('@/api/apiClient', () => ({
   },
 }))
 
-const mockedApiClient = apiClient as {
+const mockedApiClient = apiClient as unknown as {
   get: ReturnType<typeof vi.fn>
 }
 

frontend/src/api/logsApi.ts

@@ -5,6 +5,7 @@ export type DispatchStatus = 'PENDING' | 'SENT' | 'FAILED'
 export interface DispatchLogResponse {
   id: string
   entityId: string
+  entityName: string
   promptSent: string
   aiResponse: string
   emailSubject: string

frontend/src/pages/DashboardPage.tsx

@@ -1,11 +1,38 @@
+import { useQuery } from '@tanstack/react-query'
+import { getEntities } from '../api/entitiesApi'
+import { getLogs } from '../api/logsApi'
+
 export default function DashboardPage() {
   const appVersion = __APP_VERSION__
+  const { data: entities = [] } = useQuery({ queryKey: ['entities'], queryFn: getEntities })
+  const { data: logs = [] } = useQuery({ queryKey: ['logs'], queryFn: getLogs })
+
+  const activeCount = entities.filter((e) => e.active).length
 
   return (
     <div className="p-8">
       <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
-      <p className="mt-2 text-sm text-gray-500">Dashboard — coming in Step 11.</p>
       <p className="mt-2 text-xs text-gray-400">Version {appVersion}</p>
+      <div className="mt-6 grid grid-cols-2 gap-4">
+        <div className="rounded-lg border bg-white p-4 shadow-sm">
+          <p className="text-sm text-gray-500">Active Entities</p>
+          <p className="mt-1 text-2xl font-bold">{activeCount} active {activeCount === 1 ? 'entity' : 'entities'}</p>
+        </div>
+      </div>
+      <div className="mt-8">
+        <h2 className="text-lg font-semibold text-gray-800">Recent Dispatches</h2>
+        <ul className="mt-2 divide-y divide-gray-100 rounded-lg border bg-white shadow-sm">
+          {logs.slice(0, 10).map((log) => (
+            <li key={log.id} className="px-4 py-3 text-sm">
+              <span className="font-medium">{log.emailSubject}</span>
+              <span className="ml-2 text-gray-400">{log.entityName}</span>
+            </li>
+          ))}
+          {logs.length === 0 && (
+            <li className="px-4 py-3 text-sm text-gray-400">No dispatches yet.</li>
+          )}
+        </ul>
+      </div>
     </div>
   )
 }

frontend/src/pages/EntitiesPage.tsx

@@ -0,0 +1,150 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  getEntities,
+  createEntity,
+  deleteEntity,
+  VirtualEntityCreateDto,
+} from '../api/entitiesApi'
+
+export default function EntitiesPage() {
+  const queryClient = useQueryClient()
+  const { data: entities = [] } = useQuery({ queryKey: ['entities'], queryFn: getEntities })
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [form, setForm] = useState<VirtualEntityCreateDto>({
+    name: '',
+    email: '',
+    jobTitle: '',
+    personality: '',
+    scheduleCron: '',
+    contextWindowDays: 3,
+  })
+
+  const createMutation = useMutation({
+    mutationFn: createEntity,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['entities'] })
+      setDialogOpen(false)
+      setForm({ name: '', email: '', jobTitle: '', personality: '', scheduleCron: '', contextWindowDays: 3 })
+    },
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteEntity(id),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['entities'] }),
+  })
+
+  return (
+    <div className="p-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900">Virtual Entities</h1>
+        <button
+          onClick={() => setDialogOpen(true)}
+          className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+        >
+          New Entity
+        </button>
+      </div>
+
+      <ul className="mt-6 divide-y divide-gray-100 rounded-lg border bg-white shadow-sm">
+        {entities.map((entity) => (
+          <li key={entity.id} className="flex items-center justify-between px-4 py-3">
+            <div>
+              <p className="font-medium">{entity.name}</p>
+              <p className="text-sm text-gray-500">{entity.jobTitle} — {entity.email}</p>
+            </div>
+            <button
+              onClick={() => deleteMutation.mutate(entity.id)}
+              className="ml-4 rounded border border-red-300 px-3 py-1 text-sm text-red-600 hover:bg-red-50"
+            >
+              Delete
+            </button>
+          </li>
+        ))}
+        {entities.length === 0 && (
+          <li className="px-4 py-3 text-sm text-gray-400">No entities yet.</li>
+        )}
+      </ul>
+
+      {dialogOpen && (
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label="Create Entity"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+        >
+          <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-lg">
+            <h2 className="mb-4 text-lg font-semibold">New Entity</h2>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                createMutation.mutate(form)
+              }}
+              className="space-y-3"
+            >
+              <input
+                placeholder="Name"
+                value={form.name}
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                required
+              />
+              <input
+                placeholder="Email"
+                type="email"
+                value={form.email}
+                onChange={(e) => setForm({ ...form, email: e.target.value })}
+                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                required
+              />
+              <input
+                placeholder="Job Title"
+                value={form.jobTitle}
+                onChange={(e) => setForm({ ...form, jobTitle: e.target.value })}
+                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                required
+              />
+              <textarea
+                placeholder="Personality"
+                value={form.personality}
+                onChange={(e) => setForm({ ...form, personality: e.target.value })}
+                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+              />
+              <input
+                placeholder="Schedule Cron (e.g. 0 9 * * 1)"
+                value={form.scheduleCron}
+                onChange={(e) => setForm({ ...form, scheduleCron: e.target.value })}
+                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                required
+              />
+              <input
+                type="number"
+                placeholder="Context Window Days"
+                value={form.contextWindowDays}
+                onChange={(e) => setForm({ ...form, contextWindowDays: Number(e.target.value) })}
+                className="block w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                min={1}
+                required
+              />
+              <div className="flex justify-end gap-2 pt-2">
+                <button
+                  type="button"
+                  onClick={() => setDialogOpen(false)}
+                  className="rounded border border-gray-300 px-4 py-2 text-sm"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+                >
+                  Create
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/pages/LoginPage.tsx

@@ -1,11 +1,52 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { login } from '../api/authApi'
+
 export default function LoginPage() {
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const navigate = useNavigate()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    try {
+      await login({ password })
+      navigate('/', { replace: true })
+    } catch {
+      setError('Invalid password')
+    }
+  }
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-gray-50">
       <div className="w-full max-w-sm rounded-lg bg-white p-8 shadow">
         <h1 className="mb-6 text-2xl font-bold text-gray-900">
           Condado Abaixo da Média SA
         </h1>
-        <p className="text-sm text-gray-500">Login page — coming in Step 11.</p>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="mt-1 block w-full rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          {error && (
+            <p className="text-sm text-red-600">{error}</p>
+          )}
+          <button
+            type="submit"
+            className="w-full rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+          >
+            Login
+          </button>
+        </form>
       </div>
     </div>
   )

frontend/src/pages/LogsPage.tsx

@@ -0,0 +1,78 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { getLogs, getLogsByEntity } from '../api/logsApi'
+import { getEntities } from '../api/entitiesApi'
+
+export default function LogsPage() {
+  const [selectedEntityId, setSelectedEntityId] = useState<string>('')
+
+  const { data: entities = [] } = useQuery({ queryKey: ['entities'], queryFn: getEntities })
+  const { data: logs = [] } = useQuery({
+    queryKey: ['logs', selectedEntityId],
+    queryFn: () => selectedEntityId ? getLogsByEntity(selectedEntityId) : getLogs(),
+  })
+
+  return (
+    <div className="p-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900">Dispatch Logs</h1>
+        <select
+          value={selectedEntityId}
+          onChange={(e) => setSelectedEntityId(e.target.value)}
+          className="rounded border border-gray-300 px-3 py-2 text-sm"
+        >
+          <option value="">All Entities</option>
+          {entities.map((entity) => (
+            <option key={entity.id} value={entity.id}>
+              {entity.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="mt-6 overflow-hidden rounded-lg border bg-white shadow-sm">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 text-left text-xs font-medium uppercase tracking-wide text-gray-500">
+            <tr>
+              <th className="px-4 py-3">Subject</th>
+              <th className="px-4 py-3">Entity</th>
+              <th className="px-4 py-3">Status</th>
+              <th className="px-4 py-3">Dispatched At</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {logs.map((log) => (
+              <tr key={log.id}>
+                <td className="px-4 py-3 font-medium">{log.emailSubject}</td>
+                <td className="px-4 py-3 text-gray-500">{log.entityName}</td>
+                <td className="px-4 py-3">
+                  <span
+                    className={`rounded-full px-2 py-0.5 text-xs font-medium ${
+                      log.status === 'SENT'
+                        ? 'bg-green-100 text-green-700'
+                        : log.status === 'FAILED'
+                        ? 'bg-red-100 text-red-700'
+                        : 'bg-yellow-100 text-yellow-700'
+                    }`}
+                  >
+                    {log.status}
+                  </span>
+                </td>
+                <td className="px-4 py-3 text-gray-400">
+                  {new Date(log.dispatchedAt).toLocaleString()}
+                </td>
+              </tr>
+            ))}
+            {logs.length === 0 && (
+              <tr>
+                <td colSpan={4} className="px-4 py-6 text-center text-gray-400">
+                  No logs found.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

frontend/src/router/index.tsx

@@ -1,8 +1,19 @@
 import { createBrowserRouter } from 'react-router-dom'
-import { lazy, Suspense } from 'react'
+import { lazy, Suspense, ReactNode } from 'react'
+import ProtectedRoute from '../components/ProtectedRoute'
 
 const LoginPage = lazy(() => import('../pages/LoginPage'))
 const DashboardPage = lazy(() => import('../pages/DashboardPage'))
+const EntitiesPage = lazy(() => import('../pages/EntitiesPage'))
+const LogsPage = lazy(() => import('../pages/LogsPage'))
+
+function Protected({ children }: { children: ReactNode }) {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <ProtectedRoute>{children}</ProtectedRoute>
+    </Suspense>
+  )
+}
 
 export const router = createBrowserRouter([
   {
@@ -16,9 +27,25 @@ export const router = createBrowserRouter([
   {
     path: '/',
     element: (
-      <Suspense fallback={<div>Loading...</div>}>
+      <Protected>
         <DashboardPage />
-      </Suspense>
+      </Protected>
+    ),
+  },
+  {
+    path: '/entities',
+    element: (
+      <Protected>
+        <EntitiesPage />
+      </Protected>
+    ),
+  },
+  {
+    path: '/logs',
+    element: (
+      <Protected>
+        <LogsPage />
+      </Protected>
     ),
   },
 ])