feat(frontend): implement step 1 - entity task detail and scheduler UX
This commit is contained in:
230
frontend/src/pages/EntityDetailPage.tsx
Normal file
230
frontend/src/pages/EntityDetailPage.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Link, useParams } from 'react-router-dom'
|
||||
import { getEntity } from '../api/entitiesApi'
|
||||
import {
|
||||
createTask,
|
||||
generateTaskPreview,
|
||||
getEmailLookbackLabel,
|
||||
getTasksByEntity,
|
||||
type EmailLookback,
|
||||
} from '../api/tasksApi'
|
||||
|
||||
interface TaskFormState {
|
||||
name: string
|
||||
prompt: string
|
||||
scheduleCron: string
|
||||
emailLookback: EmailLookback
|
||||
}
|
||||
|
||||
const DEFAULT_TASK_FORM: TaskFormState = {
|
||||
name: '',
|
||||
prompt: '',
|
||||
scheduleCron: '',
|
||||
emailLookback: 'last_week',
|
||||
}
|
||||
|
||||
export default function EntityDetailPage() {
|
||||
const { entityId = '' } = useParams()
|
||||
const queryClient = useQueryClient()
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
const [taskForm, setTaskForm] = useState<TaskFormState>(DEFAULT_TASK_FORM)
|
||||
const [preview, setPreview] = useState('')
|
||||
|
||||
const { data: entity, isLoading: isLoadingEntity } = useQuery({
|
||||
queryKey: ['entity', entityId],
|
||||
queryFn: () => getEntity(entityId),
|
||||
enabled: Boolean(entityId),
|
||||
})
|
||||
|
||||
const { data: tasks = [], isLoading: isLoadingTasks } = useQuery({
|
||||
queryKey: ['entity-tasks', entityId],
|
||||
queryFn: () => getTasksByEntity(entityId),
|
||||
enabled: Boolean(entityId),
|
||||
})
|
||||
|
||||
const createTaskMutation = useMutation({
|
||||
mutationFn: createTask,
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ['entity-tasks', entityId] })
|
||||
setDialogOpen(false)
|
||||
setTaskForm(DEFAULT_TASK_FORM)
|
||||
setPreview('')
|
||||
},
|
||||
})
|
||||
|
||||
const previewMutation = useMutation({
|
||||
mutationFn: generateTaskPreview,
|
||||
onSuccess: (value) => setPreview(value),
|
||||
})
|
||||
|
||||
const canSubmit = useMemo(
|
||||
() => Boolean(taskForm.name.trim() && taskForm.prompt.trim() && taskForm.scheduleCron.trim()),
|
||||
[taskForm]
|
||||
)
|
||||
|
||||
if (!entityId) {
|
||||
return <div className="p-8 text-sm text-slate-300">Entity identifier is missing.</div>
|
||||
}
|
||||
|
||||
if (isLoadingEntity || isLoadingTasks) {
|
||||
return <div className="p-8 text-sm text-slate-300">Loading entity details...</div>
|
||||
}
|
||||
|
||||
if (!entity) {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<p className="text-sm text-red-300">Entity not found.</p>
|
||||
<Link to="/entities" className="mt-4 inline-block text-sm text-cyan-300 hover:text-cyan-200">
|
||||
Back to Entities
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8 p-8">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-slate-100">{entity.name}</h1>
|
||||
<p className="mt-2 text-sm text-slate-300">{entity.jobTitle} - {entity.email}</p>
|
||||
<p className="mt-1 text-sm text-slate-400">Default scheduler: {entity.scheduleCron || 'Not configured'}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setDialogOpen(true)}
|
||||
className="rounded-md bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-cyan-400"
|
||||
>
|
||||
New Task
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2 className="text-lg font-semibold text-slate-100">Scheduled Tasks</h2>
|
||||
<ul className="mt-3 divide-y divide-slate-800 overflow-hidden rounded-xl border border-slate-800 bg-slate-900/70">
|
||||
{tasks.map((task) => (
|
||||
<li key={task.id} className="space-y-1 px-4 py-3">
|
||||
<p className="font-medium text-slate-100">{task.name}</p>
|
||||
<p className="text-sm text-slate-300">Schedule: {task.scheduleCron}</p>
|
||||
<p className="text-sm text-slate-400">Email context: {getEmailLookbackLabel(task.emailLookback)}</p>
|
||||
</li>
|
||||
))}
|
||||
{tasks.length === 0 && <li className="px-4 py-4 text-sm text-slate-400">No scheduled tasks yet.</li>}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{dialogOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4" role="dialog" aria-modal="true">
|
||||
<div className="w-full max-w-2xl rounded-xl border border-slate-800 bg-slate-950 p-6 shadow-2xl">
|
||||
<h3 className="text-xl font-semibold text-slate-100">Create New Task</h3>
|
||||
<form
|
||||
className="mt-4 space-y-4"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
if (!canSubmit) return
|
||||
createTaskMutation.mutate({
|
||||
entityId,
|
||||
name: taskForm.name,
|
||||
prompt: taskForm.prompt,
|
||||
scheduleCron: taskForm.scheduleCron,
|
||||
emailLookback: taskForm.emailLookback,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<label htmlFor="task-name" className="text-sm font-medium text-slate-200">Task Name</label>
|
||||
<input
|
||||
id="task-name"
|
||||
value={taskForm.name}
|
||||
onChange={(event) => setTaskForm((prev) => ({ ...prev, name: event.target.value }))}
|
||||
className="mt-1 w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="task-prompt" className="text-sm font-medium text-slate-200">Task Prompt</label>
|
||||
<textarea
|
||||
id="task-prompt"
|
||||
value={taskForm.prompt}
|
||||
onChange={(event) => setTaskForm((prev) => ({ ...prev, prompt: event.target.value }))}
|
||||
className="mt-1 min-h-28 w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="task-schedule" className="text-sm font-medium text-slate-200">Task Schedule</label>
|
||||
<input
|
||||
id="task-schedule"
|
||||
value={taskForm.scheduleCron}
|
||||
onChange={(event) => setTaskForm((prev) => ({ ...prev, scheduleCron: event.target.value }))}
|
||||
className="mt-1 w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
|
||||
placeholder="0 9 * * 1"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="task-lookback" className="text-sm font-medium text-slate-200">Email Period</label>
|
||||
<select
|
||||
id="task-lookback"
|
||||
value={taskForm.emailLookback}
|
||||
onChange={(event) => setTaskForm((prev) => ({ ...prev, emailLookback: event.target.value as EmailLookback }))}
|
||||
className="mt-1 w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
|
||||
>
|
||||
<option value="last_day">Last 24 hours</option>
|
||||
<option value="last_week">Last week</option>
|
||||
<option value="last_month">Last month</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border border-slate-800 bg-slate-900 p-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (!canSubmit) return
|
||||
previewMutation.mutate({
|
||||
entityId,
|
||||
name: taskForm.name,
|
||||
prompt: taskForm.prompt,
|
||||
scheduleCron: taskForm.scheduleCron,
|
||||
emailLookback: taskForm.emailLookback,
|
||||
})
|
||||
}}
|
||||
className="rounded-md border border-cyan-500 px-3 py-2 text-sm font-medium text-cyan-300 hover:bg-cyan-500/10"
|
||||
>
|
||||
Generate Test Message
|
||||
</button>
|
||||
|
||||
{preview && (
|
||||
<pre className="mt-3 whitespace-pre-wrap rounded-md bg-slate-950 p-3 text-xs text-slate-200">{preview}</pre>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setDialogOpen(false)
|
||||
setPreview('')
|
||||
}}
|
||||
className="rounded-md border border-slate-700 px-4 py-2 text-sm text-slate-200"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-md bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-cyan-400 disabled:opacity-50"
|
||||
disabled={!canSubmit}
|
||||
>
|
||||
Create Task
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user