feat(5.21): Tasks Plugin — activities with status, priority, due dates, ARQ reminders
- New builtin plugin app/plugins/builtins/tasks/ with full CRUD
- Task model with TenantMixin (title, description, status, priority, due_date, assigned_to, contact_id)
- Routes: GET/POST /tasks, GET/PATCH/DELETE /tasks/{id}, POST /tasks/{id}/assign, POST /tasks/{id}/status
- All routes RBAC-protected (tasks:read, tasks:write, tasks:delete)
- ARQ cron job tasks_due_reminder (daily 8:00) sends notifications for due tasks
- Migration 0001_initial.sql creates tasks table with indexes
- Frontend: Tasks.tsx page with list, filter, create/edit modal, detail modal
- Frontend: api/tasks.ts with React Query hooks
- Route /tasks in routes/index.tsx, sidebar entry via plugin manifest
- i18n keys for nav.tasks and tasks.* in de.json and en.json
- Tests: test_tasks.py (11 tests) + Tasks.test.tsx (3 tests)
- Registered TasksPlugin in conftest.py and worker.py
This commit is contained in:
Agent Zero
@@ -0,0 +1,134 @@
|
||||
/**
|
||||
* Tasks page tests — basic rendering and interaction.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { TasksPage } from '@/pages/Tasks';
|
||||
import * as tasksApi from '@/api/tasks';
|
||||
|
||||
// Mock i18n
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({ t: (key: string) => key }),
|
||||
}));
|
||||
|
||||
// Mock toast
|
||||
vi.mock('@/components/ui/Toast', () => ({
|
||||
useToast: () => ({
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
warning: vi.fn(),
|
||||
info: vi.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock UI components
|
||||
vi.mock('@/components/ui/Input', () => ({
|
||||
Input: ({ value, onChange, type, label, ...props }: any) => (
|
||||
<div>
|
||||
{label && <label>{label}</label>}
|
||||
<input
|
||||
data-testid={props['data-testid'] || 'input'}
|
||||
type={type || 'text'}
|
||||
value={value || ''}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/Select', () => ({
|
||||
Select: ({ value, onChange, options, label, ...props }: any) => (
|
||||
<div>
|
||||
{label && <label>{label}</label>}
|
||||
<select data-testid={props['data-testid'] || 'select'} value={value || ''} onChange={onChange}>
|
||||
{options?.map((o: any) => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/Modal', () => ({
|
||||
Modal: ({ open, onClose, title, children }: any) =>
|
||||
open ? (
|
||||
<div data-testid="modal" role="dialog">
|
||||
<h2>{title}</h2>
|
||||
<button onClick={onClose}>Close</button>
|
||||
{children}
|
||||
</div>
|
||||
) : null,
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/Button', () => ({
|
||||
Button: ({ children, onClick, disabled, ...props }: any) => (
|
||||
<button onClick={onClick} disabled={disabled} data-testid={props['data-testid'] || 'button'}>
|
||||
{children}
|
||||
</button>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/Badge', () => ({
|
||||
Badge: ({ children, variant }: any) => <span data-testid="badge" data-variant={variant}>{children}</span>,
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/EmptyState', () => ({
|
||||
EmptyState: ({ title, description }: any) => (
|
||||
<div data-testid="empty-state">
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock tasks API
|
||||
vi.mock('@/api/tasks', () => ({
|
||||
useTasks: vi.fn(() => ({
|
||||
data: {
|
||||
items: [
|
||||
{
|
||||
id: 'task-1',
|
||||
title: 'Test Task',
|
||||
description: 'Test description',
|
||||
status: 'open',
|
||||
priority: 'high',
|
||||
due_date: '2025-12-31T10:00:00Z',
|
||||
assigned_to: null,
|
||||
contact_id: null,
|
||||
created_by: null,
|
||||
created_at: '2025-01-01T00:00:00Z',
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
},
|
||||
],
|
||||
total: 1,
|
||||
page: 1,
|
||||
page_size: 25,
|
||||
},
|
||||
isLoading: false,
|
||||
})),
|
||||
useCreateTask: vi.fn(() => ({ mutateAsync: vi.fn() })),
|
||||
useUpdateTask: vi.fn(() => ({ mutateAsync: vi.fn() })),
|
||||
useDeleteTask: vi.fn(() => ({ mutateAsync: vi.fn() })),
|
||||
useUpdateTaskStatus: vi.fn(() => ({ mutateAsync: vi.fn() })),
|
||||
}));
|
||||
|
||||
describe('TasksPage', () => {
|
||||
it('renders the tasks page with header', () => {
|
||||
render(<TasksPage />);
|
||||
expect(screen.getByTestId('tasks-page')).toBeInTheDocument();
|
||||
expect(screen.getByText('tasks.title')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders task items from API', () => {
|
||||
render(<TasksPage />);
|
||||
expect(screen.getByText('Test Task')).toBeInTheDocument();
|
||||
expect(screen.getByText('Test description')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('opens create modal when create button is clicked', () => {
|
||||
render(<TasksPage />);
|
||||
const createBtn = screen.getByText('tasks.create');
|
||||
fireEvent.click(createBtn);
|
||||
expect(screen.getByTestId('modal')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('task-title-input')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* Tasks API hooks — CRUD, assign, status update.
|
||||
*/
|
||||
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { apiGet, apiPost, apiPatch, apiDelete } from './client';
|
||||
|
||||
export interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
status: 'open' | 'in_progress' | 'done';
|
||||
priority: 'low' | 'medium' | 'high' | 'urgent';
|
||||
due_date: string | null;
|
||||
assigned_to: string | null;
|
||||
contact_id: string | null;
|
||||
created_by: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface TaskListResponse {
|
||||
items: Task[];
|
||||
total: number;
|
||||
page: number;
|
||||
page_size: number;
|
||||
}
|
||||
|
||||
export interface TaskCreateInput {
|
||||
title: string;
|
||||
description?: string | null;
|
||||
status?: string;
|
||||
priority?: string;
|
||||
due_date?: string | null;
|
||||
assigned_to?: string | null;
|
||||
contact_id?: string | null;
|
||||
}
|
||||
|
||||
export interface TaskUpdateInput {
|
||||
title?: string;
|
||||
description?: string | null;
|
||||
status?: string;
|
||||
priority?: string;
|
||||
due_date?: string | null;
|
||||
assigned_to?: string | null;
|
||||
contact_id?: string | null;
|
||||
}
|
||||
|
||||
export interface TaskFilter {
|
||||
status?: string;
|
||||
priority?: string;
|
||||
assigned_to?: string;
|
||||
contact_id?: string;
|
||||
search?: string;
|
||||
}
|
||||
|
||||
export function useTasks(page = 1, pageSize = 25, filter?: TaskFilter) {
|
||||
const params = new URLSearchParams({ page: String(page), page_size: String(pageSize) });
|
||||
if (filter?.status) params.set('status', filter.status);
|
||||
if (filter?.priority) params.set('priority', filter.priority);
|
||||
if (filter?.assigned_to) params.set('assigned_to', filter.assigned_to);
|
||||
if (filter?.contact_id) params.set('contact_id', filter.contact_id);
|
||||
if (filter?.search) params.set('search', filter.search);
|
||||
return useQuery({
|
||||
queryKey: ['tasks', page, pageSize, filter],
|
||||
queryFn: () => apiGet<TaskListResponse>(`/tasks?${params.toString()}`),
|
||||
});
|
||||
}
|
||||
|
||||
export function useTask(id?: string) {
|
||||
return useQuery({
|
||||
queryKey: ['tasks', id],
|
||||
queryFn: () => apiGet<Task>(`/tasks/${id}`),
|
||||
enabled: !!id,
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateTask() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: TaskCreateInput) => apiPost<Task>('/tasks', data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateTask() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, data }: { id: string; data: TaskUpdateInput }) =>
|
||||
apiPatch<Task>(`/tasks/${id}`, data),
|
||||
onSuccess: (_data, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks', variables.id] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteTask() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (id: string) => apiDelete(`/tasks/${id}`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useAssignTask() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, assignedTo }: { id: string; assignedTo: string }) =>
|
||||
apiPost<Task>(`/tasks/${id}/assign`, { assigned_to: assignedTo }),
|
||||
onSuccess: (_data, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks', variables.id] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateTaskStatus() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, status }: { id: string; status: string }) =>
|
||||
apiPost<Task>(`/tasks/${id}/status`, { status }),
|
||||
onSuccess: (_data, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks', variables.id] });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -18,7 +18,8 @@
|
||||
"settings": "Einstellungen",
|
||||
"aiAssistant": "KI Assistent",
|
||||
"mcpSettings": "MCP Einstellungen",
|
||||
"reports": "Reports"
|
||||
"reports": "Reports",
|
||||
"tasks": "Aufgaben"
|
||||
},
|
||||
"auth": {
|
||||
"login": "Anmelden",
|
||||
@@ -996,5 +997,30 @@
|
||||
"selectTemplateHint": "Wählen Sie eine Vorlage aus der Liste",
|
||||
"downloadHistory": "Download-Verlauf",
|
||||
"noDownloads": "Noch keine Downloads"
|
||||
},
|
||||
"tasks": {
|
||||
"title": "Aufgaben",
|
||||
"create": "Neue Aufgabe",
|
||||
"edit": "Aufgabe bearbeiten",
|
||||
"deleteConfirm": "Diese Aufgabe löschen?",
|
||||
"created": "Aufgabe erstellt",
|
||||
"updated": "Aufgabe aktualisiert",
|
||||
"deleted": "Aufgabe gelöscht",
|
||||
"statusUpdated": "Status aktualisiert",
|
||||
"noTasks": "Keine Aufgaben",
|
||||
"noTasksDesc": "Es wurden noch keine Aufgaben erstellt.",
|
||||
"markDone": "Erledigt",
|
||||
"dueDate": "Fälligkeitsdatum",
|
||||
"title_field": "Titel",
|
||||
"description": "Beschreibung",
|
||||
"status_field": "Status",
|
||||
"priority_field": "Priorität",
|
||||
"statusOpen": "Offen",
|
||||
"statusInProgress": "In Bearbeitung",
|
||||
"statusDone": "Erledigt",
|
||||
"priorityLow": "Niedrig",
|
||||
"priorityMedium": "Mittel",
|
||||
"priorityHigh": "Hoch",
|
||||
"priorityUrgent": "Dringend"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,8 @@
|
||||
"settings": "Settings",
|
||||
"aiAssistant": "AI Assistant",
|
||||
"mcpSettings": "MCP Settings",
|
||||
"reports": "Reports"
|
||||
"reports": "Reports",
|
||||
"tasks": "Tasks"
|
||||
},
|
||||
"auth": {
|
||||
"login": "Sign In",
|
||||
@@ -996,5 +997,30 @@
|
||||
"selectTemplateHint": "Select a template from the list",
|
||||
"downloadHistory": "Download History",
|
||||
"noDownloads": "No downloads yet"
|
||||
},
|
||||
"tasks": {
|
||||
"title": "Tasks",
|
||||
"create": "New Task",
|
||||
"edit": "Edit Task",
|
||||
"deleteConfirm": "Delete this task?",
|
||||
"created": "Task created",
|
||||
"updated": "Task updated",
|
||||
"deleted": "Task deleted",
|
||||
"statusUpdated": "Status updated",
|
||||
"noTasks": "No tasks",
|
||||
"noTasksDesc": "No tasks have been created yet.",
|
||||
"markDone": "Mark Done",
|
||||
"dueDate": "Due Date",
|
||||
"title_field": "Title",
|
||||
"description": "Description",
|
||||
"status_field": "Status",
|
||||
"priority_field": "Priority",
|
||||
"statusOpen": "Open",
|
||||
"statusInProgress": "In Progress",
|
||||
"statusDone": "Done",
|
||||
"priorityLow": "Low",
|
||||
"priorityMedium": "Medium",
|
||||
"priorityHigh": "High",
|
||||
"priorityUrgent": "Urgent"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,417 @@
|
||||
/**
|
||||
* Tasks page — list with filter, create modal, detail.
|
||||
*/
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Select } from '@/components/ui/Select';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { Loader2, Plus, CheckSquare, Clock, AlertCircle } from 'lucide-react';
|
||||
import {
|
||||
useTasks,
|
||||
useCreateTask,
|
||||
useUpdateTask,
|
||||
useDeleteTask,
|
||||
useUpdateTaskStatus,
|
||||
type Task,
|
||||
type TaskFilter,
|
||||
} from '@/api/tasks';
|
||||
|
||||
const STATUS_COLORS: Record<string, 'secondary' | 'info' | 'success'> = {
|
||||
open: 'secondary',
|
||||
in_progress: 'info',
|
||||
done: 'success',
|
||||
};
|
||||
|
||||
const PRIORITY_COLORS: Record<string, 'secondary' | 'info' | 'warning' | 'danger'> = {
|
||||
low: 'secondary',
|
||||
medium: 'info',
|
||||
high: 'warning',
|
||||
urgent: 'danger',
|
||||
};
|
||||
|
||||
function formatDate(dateStr: string | null): string {
|
||||
if (!dateStr) return '—';
|
||||
try {
|
||||
return new Date(dateStr).toLocaleDateString();
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
function isOverdue(dateStr: string | null, status: string): boolean {
|
||||
if (!dateStr || status === 'done') return false;
|
||||
try {
|
||||
return new Date(dateStr) < new Date();
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function TasksPage() {
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
|
||||
const [page, setPage] = useState(1);
|
||||
const [filter, setFilter] = useState<TaskFilter>({});
|
||||
const [search, setSearch] = useState('');
|
||||
const [debouncedSearch, setDebouncedSearch] = useState('');
|
||||
const [createModalOpen, setCreateModalOpen] = useState(false);
|
||||
const [editingTask, setEditingTask] = useState<Task | null>(null);
|
||||
const [selectedTask, setSelectedTask] = useState<Task | null>(null);
|
||||
|
||||
// Debounce search
|
||||
React.useEffect(() => {
|
||||
const timer = setTimeout(() => setDebouncedSearch(search), 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [search]);
|
||||
|
||||
const effectiveFilter = useMemo(
|
||||
() => ({ ...filter, search: debouncedSearch || undefined }),
|
||||
[filter, debouncedSearch],
|
||||
);
|
||||
|
||||
const { data, isLoading } = useTasks(page, 25, effectiveFilter);
|
||||
const createMutation = useCreateTask();
|
||||
const updateMutation = useUpdateTask();
|
||||
const deleteMutation = useDeleteTask();
|
||||
const statusMutation = useUpdateTaskStatus();
|
||||
|
||||
const tasks = data?.items || [];
|
||||
|
||||
const handleCreate = async (formData: Partial<Task>) => {
|
||||
try {
|
||||
await createMutation.mutateAsync({
|
||||
title: formData.title || '',
|
||||
description: formData.description || null,
|
||||
priority: formData.priority || 'medium',
|
||||
status: formData.status || 'open',
|
||||
due_date: formData.due_date || null,
|
||||
contact_id: formData.contact_id || null,
|
||||
});
|
||||
toast.success(t('tasks.created'));
|
||||
setCreateModalOpen(false);
|
||||
} catch (err: any) {
|
||||
toast.error(err.message || t('common.error'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (formData: Partial<Task>) => {
|
||||
if (!editingTask) return;
|
||||
try {
|
||||
await updateMutation.mutateAsync({ id: editingTask.id, data: formData });
|
||||
toast.success(t('tasks.updated'));
|
||||
setEditingTask(null);
|
||||
} catch (err: any) {
|
||||
toast.error(err.message || t('common.error'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (task: Task) => {
|
||||
if (!window.confirm(t('tasks.deleteConfirm'))) return;
|
||||
try {
|
||||
await deleteMutation.mutateAsync(task.id);
|
||||
toast.success(t('tasks.deleted'));
|
||||
setSelectedTask(null);
|
||||
} catch (err: any) {
|
||||
toast.error(err.message || t('common.error'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleStatusChange = async (task: Task, newStatus: string) => {
|
||||
try {
|
||||
await statusMutation.mutateAsync({ id: task.id, status: newStatus });
|
||||
toast.success(t('tasks.statusUpdated'));
|
||||
} catch (err: any) {
|
||||
toast.error(err.message || t('common.error'));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full" data-testid="tasks-page">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-secondary-200 bg-white">
|
||||
<h1 className="text-lg font-semibold text-secondary-900 flex items-center gap-2">
|
||||
<CheckSquare className="w-5 h-5" />
|
||||
{t('tasks.title')}
|
||||
</h1>
|
||||
<Button size="sm" onClick={() => { setEditingTask(null); setCreateModalOpen(true); }}>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
{t('tasks.create')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex items-center gap-2 px-4 py-2 border-b border-secondary-200 bg-white flex-wrap">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t('common.search')}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-48"
|
||||
/>
|
||||
<Select
|
||||
options={[
|
||||
{ value: '', label: t('common.all') },
|
||||
{ value: 'open', label: t('tasks.statusOpen') },
|
||||
{ value: 'in_progress', label: t('tasks.statusInProgress') },
|
||||
{ value: 'done', label: t('tasks.statusDone') },
|
||||
]}
|
||||
value={filter.status || ''}
|
||||
onChange={(e) => { setFilter(f => ({ ...f, status: e.target.value || undefined })); setPage(1); }}
|
||||
className="w-40"
|
||||
/>
|
||||
<Select
|
||||
options={[
|
||||
{ value: '', label: t('common.all') },
|
||||
{ value: 'low', label: t('tasks.priorityLow') },
|
||||
{ value: 'medium', label: t('tasks.priorityMedium') },
|
||||
{ value: 'high', label: t('tasks.priorityHigh') },
|
||||
{ value: 'urgent', label: t('tasks.priorityUrgent') },
|
||||
]}
|
||||
value={filter.priority || ''}
|
||||
onChange={(e) => { setFilter(f => ({ ...f, priority: e.target.value || undefined })); setPage(1); }}
|
||||
className="w-40"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* List */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="animate-spin h-5 w-5 text-secondary-400" />
|
||||
</div>
|
||||
) : tasks.length === 0 ? (
|
||||
<EmptyState title={t('tasks.noTasks')} description={t('tasks.noTasksDesc')} />
|
||||
) : (
|
||||
<ul className="divide-y divide-secondary-100" role="list">
|
||||
{tasks.map((task) => {
|
||||
const overdue = isOverdue(task.due_date, task.status);
|
||||
return (
|
||||
<li
|
||||
key={task.id}
|
||||
className="px-4 py-3 hover:bg-secondary-50 cursor-pointer"
|
||||
onClick={() => setSelectedTask(task)}
|
||||
data-testid={`task-item-${task.id}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-secondary-900">{task.title}</span>
|
||||
{overdue && (
|
||||
<AlertCircle className="w-4 h-4 text-danger-500" />
|
||||
)}
|
||||
</div>
|
||||
{task.description && (
|
||||
<p className="text-xs text-secondary-500 truncate mt-0.5">{task.description}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<Badge variant={STATUS_COLORS[task.status] || 'secondary'}>
|
||||
{t(`tasks.status${task.status.charAt(0).toUpperCase() + task.status.slice(1).replace('_', '')}`)}
|
||||
</Badge>
|
||||
<Badge variant={PRIORITY_COLORS[task.priority] || 'secondary'}>
|
||||
{t(`tasks.priority${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}`)}
|
||||
</Badge>
|
||||
{task.due_date && (
|
||||
<span className={`text-xs flex items-center gap-1 ${overdue ? 'text-danger-600' : 'text-secondary-500'}`}>
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatDate(task.due_date)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{task.status !== 'done' && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleStatusChange(task, 'done'); }}
|
||||
className="text-xs text-success-600 hover:text-success-700 px-2 py-1 min-h-touch"
|
||||
>
|
||||
{t('tasks.markDone')}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setEditingTask(task); }}
|
||||
className="text-xs text-primary-600 hover:text-primary-700 px-2 py-1 min-h-touch"
|
||||
>
|
||||
{t('common.edit')}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleDelete(task); }}
|
||||
className="text-xs text-danger-600 hover:text-danger-700 px-2 py-1 min-h-touch"
|
||||
>
|
||||
{t('common.delete')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{data && data.total > 25 && (
|
||||
<div className="flex items-center justify-between px-4 py-2 border-t border-secondary-200">
|
||||
<span className="text-xs text-secondary-500">
|
||||
{((page - 1) * 25) + 1}–{Math.min(page * 25, data.total)} / {data.total}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="secondary" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>
|
||||
{t('common.back')}
|
||||
</Button>
|
||||
<Button size="sm" variant="secondary" disabled={page * 25 >= data.total} onClick={() => setPage(p => p + 1)}>
|
||||
{t('common.next')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Create/Edit Modal */}
|
||||
<TaskModal
|
||||
open={createModalOpen || !!editingTask}
|
||||
onClose={() => { setCreateModalOpen(false); setEditingTask(null); }}
|
||||
task={editingTask}
|
||||
onSubmit={editingTask ? handleUpdate : handleCreate}
|
||||
/>
|
||||
|
||||
{/* Detail Modal */}
|
||||
{selectedTask && (
|
||||
<Modal open={!!selectedTask} onClose={() => setSelectedTask(null)} title={selectedTask.title} size="lg">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={STATUS_COLORS[selectedTask.status] || 'secondary'}>
|
||||
{t(`tasks.status${selectedTask.status.charAt(0).toUpperCase() + selectedTask.status.slice(1).replace('_', '')}`)}
|
||||
</Badge>
|
||||
<Badge variant={PRIORITY_COLORS[selectedTask.priority] || 'secondary'}>
|
||||
{t(`tasks.priority${selectedTask.priority.charAt(0).toUpperCase() + selectedTask.priority.slice(1)}`)}
|
||||
</Badge>
|
||||
</div>
|
||||
{selectedTask.description && (
|
||||
<p className="text-sm text-secondary-700">{selectedTask.description}</p>
|
||||
)}
|
||||
<div className="text-xs text-secondary-500">
|
||||
<span className="font-medium">{t('tasks.dueDate')}:</span> {formatDate(selectedTask.due_date)}
|
||||
</div>
|
||||
<div className="flex gap-2 pt-2">
|
||||
{selectedTask.status !== 'done' && (
|
||||
<Button size="sm" onClick={() => { handleStatusChange(selectedTask, 'done'); setSelectedTask(null); }}>
|
||||
{t('tasks.markDone')}
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" variant="secondary" onClick={() => { setEditingTask(selectedTask); setSelectedTask(null); }}>
|
||||
{t('common.edit')}
|
||||
</Button>
|
||||
<Button size="sm" variant="danger" onClick={() => handleDelete(selectedTask)}>
|
||||
{t('common.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Task Create/Edit Modal ──
|
||||
|
||||
function TaskModal({
|
||||
open,
|
||||
onClose,
|
||||
task,
|
||||
onSubmit,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
task?: Task | null;
|
||||
onSubmit: (data: Partial<Task>) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [title, setTitle] = useState(task?.title || '');
|
||||
const [description, setDescription] = useState(task?.description || '');
|
||||
const [priority, setPriority] = useState<string>(task?.priority || 'medium');
|
||||
const [status, setStatus] = useState<string>(task?.status || 'open');
|
||||
const [dueDate, setDueDate] = useState(task?.due_date ? task.due_date.slice(0, 10) : '');
|
||||
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
setTitle(task?.title || '');
|
||||
setDescription(task?.description || '');
|
||||
setPriority(task?.priority || 'medium');
|
||||
setStatus(task?.status || 'open');
|
||||
setDueDate(task?.due_date ? task.due_date.slice(0, 10) : '');
|
||||
}
|
||||
}, [open, task]);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!title.trim()) return;
|
||||
onSubmit({
|
||||
title: title.trim(),
|
||||
description: description || null,
|
||||
priority: priority as any,
|
||||
status: status as any,
|
||||
due_date: dueDate ? new Date(dueDate).toISOString() : null,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose} title={task ? t('tasks.edit') : t('tasks.create')} size="md">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Input
|
||||
label={t('tasks.title_field')}
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
data-testid="task-title-input"
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary-700 mb-1">{t('tasks.description')}</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full px-3 py-2 text-sm rounded-md border border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-20"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Select
|
||||
label={t('tasks.status_field')}
|
||||
options={[
|
||||
{ value: 'open', label: t('tasks.statusOpen') },
|
||||
{ value: 'in_progress', label: t('tasks.statusInProgress') },
|
||||
{ value: 'done', label: t('tasks.statusDone') },
|
||||
]}
|
||||
value={status}
|
||||
onChange={(e) => setStatus(e.target.value)}
|
||||
/>
|
||||
<Select
|
||||
label={t('tasks.priority_field')}
|
||||
options={[
|
||||
{ value: 'low', label: t('tasks.priorityLow') },
|
||||
{ value: 'medium', label: t('tasks.priorityMedium') },
|
||||
{ value: 'high', label: t('tasks.priorityHigh') },
|
||||
{ value: 'urgent', label: t('tasks.priorityUrgent') },
|
||||
]}
|
||||
value={priority}
|
||||
onChange={(e) => setPriority(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
label={t('tasks.dueDate')}
|
||||
type="date"
|
||||
value={dueDate}
|
||||
onChange={(e) => setDueDate(e.target.value)}
|
||||
/>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button variant="secondary" onClick={onClose}>{t('common.cancel')}</Button>
|
||||
<Button type="submit" data-testid="task-submit-btn">{t('common.save')}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -40,6 +40,7 @@ const AutomationDashboardPage = React.lazy(() => import('@/pages/AutomationDashb
|
||||
const AgentDashboardPage = React.lazy(() => import('@/pages/AgentDashboard').then(m => ({ default: m.AgentDashboardPage })));
|
||||
const AutomationSettingsPage = React.lazy(() => import('@/pages/AutomationSettings').then(m => ({ default: m.AutomationSettingsPage })));
|
||||
const ReportsPage = React.lazy(() => import('@/pages/Reports').then(m => ({ default: m.ReportsPage })));
|
||||
const TasksPage = React.lazy(() => import('@/pages/Tasks').then(m => ({ default: m.TasksPage })));
|
||||
|
||||
/** Centered spinner fallback for lazy-loaded routes */
|
||||
function PageLoader() {
|
||||
@@ -91,6 +92,7 @@ const router = createBrowserRouter([
|
||||
{ path: '/automation', element: withSuspense(<AutomationDashboardPage />) },
|
||||
{ path: '/agents', element: withSuspense(<AgentDashboardPage />) },
|
||||
{ path: '/reports', element: withSuspense(<ReportsPage />) },
|
||||
{ path: '/tasks', element: withSuspense(<TasksPage />) },
|
||||
{ path: '/profile', element: withSuspense(<SettingsProfilePage />) },
|
||||
{
|
||||
path: '/settings',
|
||||
|
||||
Reference in New Issue
Block a user