393 lines
16 KiB
TypeScript
393 lines
16 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
CheckSquare,
|
|
Clock,
|
|
AlertCircle,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Plus,
|
|
Calendar,
|
|
User,
|
|
Play,
|
|
} from 'lucide-react';
|
|
import { toast } from 'react-toastify';
|
|
import { Loading, EmptyState } from '../../components/common';
|
|
import { useAsync } from '../../hooks/useAsync';
|
|
import taskService, { Task, TaskStatistics } from '../../services/api/taskService';
|
|
import { formatDate } from '../../utils/format';
|
|
import TaskDetailModal from '../../components/tasks/TaskDetailModal';
|
|
import CreateTaskModal from '../../components/tasks/CreateTaskModal';
|
|
import TaskFilters from '../../components/tasks/TaskFilters';
|
|
import { logger } from '../../utils/logger';
|
|
|
|
type TaskStatus = 'pending' | 'assigned' | 'in_progress' | 'completed' | 'cancelled' | 'overdue';
|
|
type TaskPriority = 'low' | 'medium' | 'high' | 'urgent';
|
|
|
|
const TaskManagementPage: React.FC = () => {
|
|
const [selectedTask, setSelectedTask] = useState<Task | null>(null);
|
|
const [showTaskDetail, setShowTaskDetail] = useState(false);
|
|
const [showCreateTask, setShowCreateTask] = useState(false);
|
|
const [filters, setFilters] = useState({
|
|
status: '' as string,
|
|
priority: '' as string,
|
|
task_type: '',
|
|
assigned_to: '',
|
|
search: '',
|
|
});
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const itemsPerPage = 20;
|
|
|
|
const { data: tasks, loading: tasksLoading, execute: fetchTasks } = useAsync<Task[]>(
|
|
() => taskService.getTasks({
|
|
status: filters.status || undefined,
|
|
priority: filters.priority || undefined,
|
|
task_type: filters.task_type || undefined,
|
|
assigned_to: filters.assigned_to ? parseInt(filters.assigned_to) : undefined,
|
|
skip: (currentPage - 1) * itemsPerPage,
|
|
limit: itemsPerPage,
|
|
}).then(r => {
|
|
// Handle response structure: { status: 'success', data: [...] }
|
|
// apiClient returns axios response, so r.data is the response body
|
|
const responseData = r.data;
|
|
const tasksArray = responseData?.data || responseData || [];
|
|
return Array.isArray(tasksArray) ? tasksArray : [];
|
|
}).catch(error => {
|
|
logger.error('Error fetching tasks', error);
|
|
return [];
|
|
}),
|
|
{ immediate: true }
|
|
);
|
|
|
|
const { data: statistics, execute: fetchStatistics } = useAsync<TaskStatistics>(
|
|
async () => {
|
|
const r = await taskService.getTaskStatistics();
|
|
return (r as any).data?.data || r.data;
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
useEffect(() => {
|
|
fetchTasks();
|
|
}, [filters, currentPage]);
|
|
|
|
const handleTaskClick = async (task: Task) => {
|
|
try {
|
|
const response = await taskService.getTask(task.id);
|
|
setSelectedTask(response.data.data);
|
|
setShowTaskDetail(true);
|
|
} catch (error: any) {
|
|
toast.error(error.message || 'Failed to load task details');
|
|
}
|
|
};
|
|
|
|
const handleTaskComplete = async (taskId: number) => {
|
|
try {
|
|
await taskService.completeTask(taskId);
|
|
toast.success('Task completed successfully');
|
|
fetchTasks();
|
|
fetchStatistics();
|
|
if (selectedTask?.id === taskId) {
|
|
setShowTaskDetail(false);
|
|
setSelectedTask(null);
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.message || 'Failed to complete task');
|
|
}
|
|
};
|
|
|
|
const handleTaskStart = async (taskId: number) => {
|
|
try {
|
|
await taskService.startTask(taskId);
|
|
toast.success('Task started');
|
|
fetchTasks();
|
|
if (selectedTask?.id === taskId) {
|
|
const response = await taskService.getTask(taskId);
|
|
setSelectedTask(response.data.data);
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.message || 'Failed to start task');
|
|
}
|
|
};
|
|
|
|
const getStatusIcon = (status: TaskStatus) => {
|
|
switch (status) {
|
|
case 'completed':
|
|
return <CheckCircle2 className="w-5 h-5 text-green-500" />;
|
|
case 'in_progress':
|
|
return <Play className="w-5 h-5 text-blue-500" />;
|
|
case 'overdue':
|
|
return <AlertCircle className="w-5 h-5 text-red-500" />;
|
|
case 'cancelled':
|
|
return <XCircle className="w-5 h-5 text-gray-400" />;
|
|
default:
|
|
return <Clock className="w-5 h-5 text-amber-500" />;
|
|
}
|
|
};
|
|
|
|
const getStatusBadge = (status: TaskStatus) => {
|
|
const baseClasses = 'px-3 py-1 rounded-full text-xs font-semibold';
|
|
switch (status) {
|
|
case 'completed':
|
|
return `${baseClasses} bg-green-100 text-green-800 border border-green-200`;
|
|
case 'in_progress':
|
|
return `${baseClasses} bg-blue-100 text-blue-800 border border-blue-200`;
|
|
case 'overdue':
|
|
return `${baseClasses} bg-red-100 text-red-800 border border-red-200`;
|
|
case 'cancelled':
|
|
return `${baseClasses} bg-gray-100 text-gray-800 border border-gray-200`;
|
|
case 'assigned':
|
|
return `${baseClasses} bg-purple-100 text-purple-800 border border-purple-200`;
|
|
default:
|
|
return `${baseClasses} bg-amber-100 text-amber-800 border border-amber-200`;
|
|
}
|
|
};
|
|
|
|
const getPriorityBadge = (priority: TaskPriority) => {
|
|
const baseClasses = 'px-2 py-1 rounded text-xs font-semibold';
|
|
switch (priority) {
|
|
case 'urgent':
|
|
return `${baseClasses} bg-red-100 text-red-800 border border-red-200`;
|
|
case 'high':
|
|
return `${baseClasses} bg-orange-100 text-orange-800 border border-orange-200`;
|
|
case 'medium':
|
|
return `${baseClasses} bg-yellow-100 text-yellow-800 border border-yellow-200`;
|
|
default:
|
|
return `${baseClasses} bg-gray-100 text-gray-800 border border-gray-200`;
|
|
}
|
|
};
|
|
|
|
const isOverdue = (dueDate?: string) => {
|
|
if (!dueDate) return false;
|
|
return new Date(dueDate) < new Date() && !selectedTask?.completed_at;
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
|
|
{/* Header */}
|
|
<div className="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">Task Management</h1>
|
|
<p className="text-gray-600">Manage and track all tasks and workflows</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowCreateTask(true)}
|
|
className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2"
|
|
>
|
|
<Plus className="w-5 h-5" />
|
|
Create Task
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Statistics */}
|
|
{statistics && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div className="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-1">Total Tasks</p>
|
|
<p className="text-2xl font-bold text-gray-900">{statistics.total}</p>
|
|
</div>
|
|
<CheckSquare className="w-8 h-8 text-indigo-500" />
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-1">In Progress</p>
|
|
<p className="text-2xl font-bold text-blue-600">{statistics.in_progress}</p>
|
|
</div>
|
|
<Play className="w-8 h-8 text-blue-500" />
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-1">Completed</p>
|
|
<p className="text-2xl font-bold text-green-600">{statistics.completed}</p>
|
|
</div>
|
|
<CheckCircle2 className="w-8 h-8 text-green-500" />
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-1">Overdue</p>
|
|
<p className="text-2xl font-bold text-red-600">{statistics.overdue}</p>
|
|
</div>
|
|
<AlertCircle className="w-8 h-8 text-red-500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Filters */}
|
|
<TaskFilters filters={filters} onFiltersChange={setFilters} />
|
|
|
|
{/* Tasks List */}
|
|
{tasksLoading ? (
|
|
<Loading fullScreen text="Loading tasks..." />
|
|
) : !tasks || tasks.length === 0 ? (
|
|
<div className="bg-white rounded-xl shadow-lg p-8 border border-gray-100">
|
|
<EmptyState
|
|
title="No tasks found"
|
|
description="Create a new task or adjust your filters"
|
|
action={{
|
|
label: 'Create Task',
|
|
onClick: () => setShowCreateTask(true),
|
|
}}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gradient-to-r from-gray-50 to-gray-100">
|
|
<tr>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Task</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Status</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Priority</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Assigned To</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Due Date</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{(tasks || []).map((task) => (
|
|
<tr
|
|
key={task.id}
|
|
className="hover:bg-gray-50 transition-colors cursor-pointer"
|
|
onClick={() => handleTaskClick(task)}
|
|
>
|
|
<td className="px-6 py-4">
|
|
<div className="flex items-center gap-3">
|
|
{getStatusIcon(task.status)}
|
|
<div>
|
|
<p className="text-sm font-semibold text-gray-900">{task.title}</p>
|
|
{task.description && (
|
|
<p className="text-xs text-gray-500 line-clamp-1">{task.description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className={getStatusBadge(task.status)}>{task.status.replace('_', ' ')}</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className={getPriorityBadge(task.priority)}>{task.priority}</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
{task.assigned_to_name ? (
|
|
<div className="flex items-center gap-2">
|
|
<User className="w-4 h-4 text-gray-400" />
|
|
<span className="text-sm text-gray-700">{task.assigned_to_name}</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-sm text-gray-400">Unassigned</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
{task.due_date ? (
|
|
<div className="flex items-center gap-2">
|
|
<Calendar className={`w-4 h-4 ${isOverdue(task.due_date) ? 'text-red-500' : 'text-gray-400'}`} />
|
|
<span className={`text-sm ${isOverdue(task.due_date) ? 'text-red-600 font-semibold' : 'text-gray-700'}`}>
|
|
{formatDate(new Date(task.due_date), 'short')}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-sm text-gray-400">No due date</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<div className="flex items-center gap-2">
|
|
{task.status === 'assigned' && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleTaskStart(task.id);
|
|
}}
|
|
className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
|
title="Start Task"
|
|
>
|
|
<Play className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
{task.status === 'in_progress' && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleTaskComplete(task.id);
|
|
}}
|
|
className="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
|
|
title="Complete Task"
|
|
>
|
|
<CheckCircle2 className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{tasks && tasks.length > 0 && (
|
|
<div className="flex items-center justify-between">
|
|
<button
|
|
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
|
disabled={currentPage === 1}
|
|
className="px-4 py-2 bg-white border border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Previous
|
|
</button>
|
|
<span className="text-sm text-gray-600">Page {currentPage}</span>
|
|
<button
|
|
onClick={() => setCurrentPage(p => p + 1)}
|
|
disabled={tasks.length < itemsPerPage}
|
|
className="px-4 py-2 bg-white border border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Task Detail Modal */}
|
|
{showTaskDetail && selectedTask && (
|
|
<TaskDetailModal
|
|
task={selectedTask}
|
|
onClose={() => {
|
|
setShowTaskDetail(false);
|
|
setSelectedTask(null);
|
|
}}
|
|
onUpdate={() => {
|
|
fetchTasks();
|
|
fetchStatistics();
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Create Task Modal */}
|
|
{showCreateTask && (
|
|
<CreateTaskModal
|
|
onClose={() => setShowCreateTask(false)}
|
|
onSuccess={() => {
|
|
setShowCreateTask(false);
|
|
fetchTasks();
|
|
fetchStatistics();
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TaskManagementPage;
|
|
|