updates
This commit is contained in:
Iliyan Angelov
398
Frontend/src/pages/admin/TaskManagementPage.tsx
Normal file
398
Frontend/src/pages/admin/TaskManagementPage.tsx
Normal file
@@ -0,0 +1,398 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
CheckSquare,
|
||||
Clock,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Plus,
|
||||
Filter,
|
||||
Search,
|
||||
Calendar,
|
||||
User,
|
||||
Building2,
|
||||
FileText,
|
||||
MessageSquare,
|
||||
TrendingUp,
|
||||
MoreVertical,
|
||||
Edit,
|
||||
Trash2,
|
||||
Play,
|
||||
Pause,
|
||||
} 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';
|
||||
|
||||
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 => {
|
||||
console.error('Error fetching tasks:', error);
|
||||
return [];
|
||||
}),
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const { data: statistics, loading: statsLoading, execute: fetchStatistics } = useAsync<TaskStatistics>(
|
||||
() => taskService.getTaskStatistics().then(r => 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;
|
||||
|
||||
Reference in New Issue
Block a user