sancho41/condado-newsletter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): implement step 1 - entity task detail and scheduler UX

Browse Source
This commit is contained in:
Gabriel Sancho
2026-03-26 20:32:06 -03:00
parent 381c6cbfcd
commit 888fb9f665
11 changed files with 470 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/__tests__/pages/DashboardPage.test.tsx
View File

@@ -64,8 +64,8 @@ describe('DashboardPage', () => {
render(<DashboardPage />, { wrapper })
await waitFor(() => {
expect(screen.getByText(/Scheduled Tasks/i)).toBeInTheDocument()
expect(screen.getByText(/Entity A/i)).toBeInTheDocument()
expect(screen.getByRole('heading', { name: /Scheduled Tasks/i })).toBeInTheDocument()
expect(screen.getByText(/Entity A default task/i)).toBeInTheDocument()
expect(screen.getByText(/0 9 \* \* 1/i)).toBeInTheDocument()
})
})

10
frontend/src/__tests__/pages/EntityDetailPage.test.tsx
View File

@@ -21,6 +21,8 @@ const wrapper = ({ children }: { children: React.ReactNode }) => (
describe('EntityDetailPage', () => {
it('should_renderEntityAndTasks_when_pageLoads', async () => {
vi.mocked(tasksApi.getEmailLookbackLabel).mockReturnValue('Last week')
vi.mocked(entitiesApi.getEntity).mockResolvedValue({
id: 'entity-1',
name: 'Entity A',
@@ -54,6 +56,8 @@ describe('EntityDetailPage', () => {
})
it('should_generatePreviewAndCreateTask_when_formSubmitted', async () => {
vi.mocked(tasksApi.getEmailLookbackLabel).mockReturnValue('Last week')
vi.mocked(entitiesApi.getEntity).mockResolvedValue({
id: 'entity-1',
name: 'Entity A',
@@ -89,7 +93,8 @@ describe('EntityDetailPage', () => {
fireEvent.click(screen.getByRole('button', { name: /generate test message/i }))
await waitFor(() => {
expect(tasksApi.generateTaskPreview).toHaveBeenCalledWith(
expect(tasksApi.generateTaskPreview).toHaveBeenCalled()
expect(vi.mocked(tasksApi.generateTaskPreview).mock.calls[0][0]).toEqual(
expect.objectContaining({
entityId: 'entity-1',
name: 'Morning Blast',
@@ -104,7 +109,8 @@ describe('EntityDetailPage', () => {
fireEvent.click(screen.getByRole('button', { name: /create task/i }))
await waitFor(() => {
expect(tasksApi.createTask).toHaveBeenCalledWith(
expect(tasksApi.createTask).toHaveBeenCalled()
expect(vi.mocked(tasksApi.createTask).mock.calls[0][0]).toEqual(
expect.objectContaining({
entityId: 'entity-1',
name: 'Morning Blast',

82
frontend/src/api/tasksApi.ts Normal file
View File

@@ -0,0 +1,82 @@
const STORAGE_KEY = 'condado:entity-tasks'
export type EmailLookback = 'last_day' | 'last_week' | 'last_month'
export interface EntityTaskResponse {
id: string
entityId: string
name: string
prompt: string
scheduleCron: string
emailLookback: EmailLookback
createdAt: string
}
export interface EntityTaskCreateDto {
entityId: string
name: string
prompt: string
scheduleCron: string
emailLookback: EmailLookback
}
function readTasks(): EntityTaskResponse[] {
const raw = localStorage.getItem(STORAGE_KEY)
if (!raw) return []
try {
return JSON.parse(raw) as EntityTaskResponse[]
} catch {
return []
}
}
function writeTasks(tasks: EntityTaskResponse[]): void {
localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks))
}
export function getEmailLookbackLabel(value: EmailLookback): string {
if (value === 'last_day') return 'Last 24 hours'
if (value === 'last_month') return 'Last month'
return 'Last week'
}
/** Simulates a task preview generated from the configured prompt. */
export async function generateTaskPreview(data: EntityTaskCreateDto): Promise<string> {
return [
`SUBJECT: Internal Alignment Update - ${data.name}`,
'BODY:',
`Dear Team,`,
'',
`In strict accordance with our communication standards, this message was generated from the prompt: "${data.prompt}".`,
`Context window considered: ${getEmailLookbackLabel(data.emailLookback)}.`,
'Operational interpretation: please proceed casually, but with ceremonial seriousness.',
'',
'Regards,',
'Automated Task Preview',
].join('\n')
}
/** Returns all scheduled tasks currently configured in local storage. */
export async function getAllTasks(): Promise<EntityTaskResponse[]> {
return readTasks()
}
/** Returns scheduled tasks for a specific entity. */
export async function getTasksByEntity(entityId: string): Promise<EntityTaskResponse[]> {
return readTasks().filter((task) => task.entityId === entityId)
}
/** Creates a scheduled task in local storage. */
export async function createTask(data: EntityTaskCreateDto): Promise<EntityTaskResponse> {
const current = readTasks()
const task: EntityTaskResponse = {
...data,
id: crypto.randomUUID(),
createdAt: new Date().toISOString(),
}
current.push(task)
writeTasks(current)
return task
}

28
frontend/src/components/NavBar.tsx
View File

@@ -1,3 +1,4 @@
import { useEffect, useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
const NAV_LINKS = [
@@ -9,20 +10,41 @@ const NAV_LINKS = [
/** Top navigation bar for authenticated pages. */
export default function NavBar() {
const { pathname } = useLocation()
const [theme, setTheme] = useState<'dark' | 'light'>(() => {
return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
})
useEffect(() => {
if (theme === 'dark') {
document.documentElement.classList.add('dark')
localStorage.setItem('theme', 'dark')
return
}
document.documentElement.classList.remove('dark')
localStorage.setItem('theme', 'light')
}, [theme])
return (
<nav className="border-b bg-white">
<nav className="border-b border-slate-800 bg-slate-900/80 backdrop-blur">
<div className="mx-auto flex max-w-7xl items-center gap-6 px-4 py-3">
<span className="font-semibold text-gray-900">Condado SA</span>
<span className="font-semibold text-slate-100">Condado SA</span>
{NAV_LINKS.map(({ to, label }) => (
<Link
key={to}
to={to}
className={`text-sm ${pathname === to ? 'font-semibold text-blue-600' : 'text-gray-600 hover:text-gray-900'}`}
className={`text-sm ${pathname === to ? 'font-semibold text-cyan-300' : 'text-slate-300 hover:text-slate-100'}`}
>
{label}
</Link>
))}
<button
onClick={() => setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))}
className="ml-auto rounded-md border border-slate-700 px-3 py-1.5 text-xs font-medium text-slate-200 hover:bg-slate-800"
aria-label="Toggle theme"
>
{theme === 'dark' ? 'Light mode' : 'Dark mode'}
</button>
</div>
</nav>
)

6
frontend/src/index.css
View File

@@ -1,3 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply min-h-screen bg-slate-100 text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-100;
}
}

7
frontend/src/main.tsx
View File

@@ -4,6 +4,13 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import App from './App'
import './index.css'
const preferredTheme = localStorage.getItem('theme')
if (preferredTheme === 'light') {
document.documentElement.classList.remove('dark')
} else {
document.documentElement.classList.add('dark')
}
const queryClient = new QueryClient({
defaultOptions: {
queries: {

71
frontend/src/pages/DashboardPage.tsx
View File

@@ -1,38 +1,83 @@
import { useQuery } from '@tanstack/react-query'
import { getEntities } from '../api/entitiesApi'
import { getLogs } from '../api/logsApi'
import { getAllTasks, getEmailLookbackLabel } from '../api/tasksApi'
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 { data: entityTasks = [] } = useQuery({ queryKey: ['entity-tasks'], queryFn: getAllTasks })
const activeCount = entities.filter((e) => e.active).length
const scheduledDefaults = entities
.filter((entity) => entity.active && entity.scheduleCron)
.map((entity) => ({
id: `default-${entity.id}`,
entityName: entity.name,
taskName: `${entity.name} default task`,
scheduleCron: entity.scheduleCron,
emailLookbackLabel: `Last ${entity.contextWindowDays} days`,
}))
const scheduledCustomTasks = entityTasks.map((task) => ({
id: task.id,
entityName: entities.find((entity) => entity.id === task.entityId)?.name ?? 'Unknown entity',
taskName: task.name,
scheduleCron: task.scheduleCron,
emailLookbackLabel: getEmailLookbackLabel(task.emailLookback),
}))
const scheduledTasks = [...scheduledDefaults, ...scheduledCustomTasks]
return (
<div className="p-8">
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
<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>
<div className="space-y-8 p-8">
<div>
<h1 className="text-3xl font-bold text-slate-100">Dashboard</h1>
<p className="mt-2 text-xs text-slate-400">Version {appVersion}</p>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="rounded-xl border border-slate-800 bg-slate-900/70 p-5 shadow-sm">
<p className="text-sm text-slate-400">Active Entities</p>
<p className="mt-1 text-2xl font-bold">{activeCount} active {activeCount === 1 ? 'entity' : 'entities'}</p>
</div>
<div className="rounded-xl border border-slate-800 bg-slate-900/70 p-5 shadow-sm">
<p className="text-sm text-slate-400">Scheduled Tasks</p>
<p className="mt-1 text-2xl font-bold text-slate-100">{scheduledTasks.length}</p>
</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">
</div>
<section>
<h2 className="text-lg font-semibold text-slate-100">Scheduled Tasks</h2>
<ul className="mt-2 divide-y divide-slate-800 overflow-hidden rounded-xl border border-slate-800 bg-slate-900/70 shadow-sm">
{scheduledTasks.map((task) => (
<li key={task.id} className="px-4 py-3 text-sm">
<span className="font-medium text-slate-100">{task.taskName}</span>
<span className="ml-2 text-slate-300">{task.entityName}</span>
<p className="mt-1 text-xs text-slate-400">{task.scheduleCron} - {task.emailLookbackLabel}</p>
</li>
))}
{scheduledTasks.length === 0 && (
<li className="px-4 py-3 text-sm text-slate-400">No scheduled tasks configured yet.</li>
)}
</ul>
</section>
<section>
<h2 className="text-lg font-semibold text-slate-100">Recent Dispatches</h2>
<ul className="mt-2 divide-y divide-slate-800 overflow-hidden rounded-xl border border-slate-800 bg-slate-900/70 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>
<span className="font-medium text-slate-100">{log.emailSubject}</span>
<span className="ml-2 text-slate-400">{log.entityName}</span>
</li>
))}
{logs.length === 0 && (
<li className="px-4 py-3 text-sm text-gray-400">No dispatches yet.</li>
<li className="px-4 py-3 text-sm text-slate-400">No dispatches yet.</li>
)}
</ul>
</div>
</section>
</div>
)
}

49
frontend/src/pages/EntitiesPage.tsx
View File

@@ -1,4 +1,5 @@
import { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import {
getEntities,
@@ -8,6 +9,7 @@ import {
} from '../api/entitiesApi'
export default function EntitiesPage() {
const navigate = useNavigate()
const queryClient = useQueryClient()
const { data: entities = [] } = useQuery({ queryKey: ['entities'], queryFn: getEntities })
const [dialogOpen, setDialogOpen] = useState(false)
@@ -22,10 +24,11 @@ export default function EntitiesPage() {
const createMutation = useMutation({
mutationFn: createEntity,
onSuccess: () => {
onSuccess: (createdEntity) => {
queryClient.invalidateQueries({ queryKey: ['entities'] })
setDialogOpen(false)
setForm({ name: '', email: '', jobTitle: '', personality: '', scheduleCron: '', contextWindowDays: 3 })
navigate(`/entities/${createdEntity.id}`)
},
})
@@ -37,32 +40,40 @@ export default function EntitiesPage() {
return (
<div className="p-8">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold text-gray-900">Virtual Entities</h1>
<h1 className="text-2xl font-bold text-slate-100">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"
className="rounded bg-cyan-500 px-4 py-2 text-sm font-medium text-slate-950 hover:bg-cyan-400"
>
New Entity
</button>
</div>
<ul className="mt-6 divide-y divide-gray-100 rounded-lg border bg-white shadow-sm">
<ul className="mt-6 divide-y divide-slate-800 rounded-lg border border-slate-800 bg-slate-900/70 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>
<p className="font-medium text-slate-100">{entity.name}</p>
<p className="text-sm text-slate-300">{entity.jobTitle} - {entity.email}</p>
</div>
<div className="ml-4 flex items-center gap-2">
<Link
to={`/entities/${entity.id}`}
className="rounded border border-cyan-500 px-3 py-1 text-sm text-cyan-300 hover:bg-cyan-500/10"
>
Open details
</Link>
<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"
className="rounded border border-red-400/60 px-3 py-1 text-sm text-red-300 hover:bg-red-400/10"
>
Delete
</button>
</div>
</li>
))}
{entities.length === 0 && (
<li className="px-4 py-3 text-sm text-gray-400">No entities yet.</li>
<li className="px-4 py-3 text-sm text-slate-400">No entities yet.</li>
)}
</ul>
@@ -71,10 +82,10 @@ export default function EntitiesPage() {
role="dialog"
aria-modal="true"
aria-label="Create Entity"
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70"
>
<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>
<div className="w-full max-w-md rounded-lg border border-slate-800 bg-slate-950 p-6 shadow-lg">
<h2 className="mb-4 text-lg font-semibold text-slate-100">New Entity</h2>
<form
onSubmit={(e) => {
e.preventDefault()
@@ -86,7 +97,7 @@ export default function EntitiesPage() {
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"
className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
required
/>
<input
@@ -94,27 +105,27 @@ export default function EntitiesPage() {
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"
className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
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"
className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
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"
className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
/>
<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"
className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
required
/>
<input
@@ -122,7 +133,7 @@ export default function EntitiesPage() {
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"
className="block w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100"
min={1}
required
/>
@@ -130,13 +141,13 @@ export default function EntitiesPage() {
<button
type="button"
onClick={() => setDialogOpen(false)}
className="rounded border border-gray-300 px-4 py-2 text-sm"
className="rounded border border-slate-700 px-4 py-2 text-sm text-slate-200"
>
Cancel
</button>
<button
type="submit"
className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
className="rounded bg-cyan-500 px-4 py-2 text-sm font-medium text-slate-950 hover:bg-cyan-400"
>
Create
</button>

230
frontend/src/pages/EntityDetailPage.tsx Normal file
View 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>
)
}

17
frontend/src/router/index.tsx
View File

@@ -1,16 +1,23 @@
import { createBrowserRouter } from 'react-router-dom'
import { lazy, Suspense, ReactNode } from 'react'
import ProtectedRoute from '../components/ProtectedRoute'
import NavBar from '../components/NavBar'
const LoginPage = lazy(() => import('../pages/LoginPage'))
const DashboardPage = lazy(() => import('../pages/DashboardPage'))
const EntitiesPage = lazy(() => import('../pages/EntitiesPage'))
const EntityDetailPage = lazy(() => import('../pages/EntityDetailPage'))
const LogsPage = lazy(() => import('../pages/LogsPage'))
function Protected({ children }: { children: ReactNode }) {
return (
<Suspense fallback={<div>Loading...</div>}>
<ProtectedRoute>{children}</ProtectedRoute>
<ProtectedRoute>
<div className="min-h-screen bg-slate-950 text-slate-100">
<NavBar />
{children}
</div>
</ProtectedRoute>
</Suspense>
)
}
@@ -40,6 +47,14 @@ export const router = createBrowserRouter([
</Protected>
),
},
{
path: '/entities/:entityId',
element: (
<Protected>
<EntityDetailPage />
</Protected>
),
},
{
path: '/logs',
element: (

1
frontend/tailwind.config.js
View File

@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
content: [
'./index.html',
'./src/**/*.{ts,tsx}',