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

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>
+  )
+}