mirror of
https://github.com/thecyberlearn/victor-ai.git
synced 2026-08-18 22:53:04 +00:00
477 lines
21 KiB
HTML
477 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Task Agent - AI Task Management</title>
|
|
<!-- External Dependencies -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<!-- Your Custom Files -->
|
|
<link rel="stylesheet" href="assets/css/styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Navigation Header -->
|
|
<nav class="bg-white shadow-sm border-b sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center py-4">
|
|
<div class="flex items-center gap-3">
|
|
<button onclick="goHome()" class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center hover:bg-indigo-200 transition-colors">
|
|
<i class="fas fa-home text-indigo-600"></i>
|
|
</button>
|
|
<div class="w-10 h-10 bg-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i class="fas fa-tasks text-white text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-lg font-bold text-gray-800">Task Agent</h1>
|
|
<p class="text-sm text-gray-500">AI Task Management</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:flex items-center gap-6">
|
|
<div class="text-right">
|
|
<p class="text-sm text-gray-500">Last update</p>
|
|
<p class="font-semibold text-gray-800" id="lastUpdate">Loading...</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
|
<span class="text-sm text-green-600 font-medium">Connected</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 bg-gray-50 min-h-screen">
|
|
|
|
<!-- Header Section -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">AI Task Management</h1>
|
|
</div>
|
|
|
|
<!-- Task Command Center & Search -->
|
|
<div class="bg-white rounded-2xl p-6 mb-8 shadow-lg border border-gray-200">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-orange-600 rounded-lg flex items-center justify-center">
|
|
<i class="fas fa-brain text-white"></i>
|
|
</div>
|
|
<h2 class="text-xl font-bold text-gray-800">Task AI Command & Search</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
|
|
<!-- AI Command -->
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<div class="flex-1">
|
|
<input
|
|
id="taskCommand"
|
|
type="text"
|
|
placeholder="Ask AI: 'Show overdue tasks', 'Prioritize my tasks', 'Create daily standup task'"
|
|
class="w-full px-4 py-3 rounded-xl border border-gray-300 bg-white text-gray-800 placeholder-gray-500 focus:border-orange-400 focus:ring-2 focus:ring-orange-400/50 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
<button
|
|
onclick="executeTaskCommand()"
|
|
class="w-full sm:w-auto bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-xl font-semibold transition-all flex items-center justify-center gap-2 min-w-[120px]"
|
|
id="taskAiBtn"
|
|
>
|
|
<i class="fas fa-robot"></i>
|
|
<span>Execute</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Task Search -->
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<div class="flex-1">
|
|
<input
|
|
id="taskSearchInput"
|
|
type="text"
|
|
placeholder="Search tasks by name or description..."
|
|
class="w-full px-4 py-3 rounded-xl border border-gray-300 bg-white text-gray-800 placeholder-gray-500 focus:border-blue-400 focus:ring-2 focus:ring-blue-400/50 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
<button
|
|
onclick="taskAgent && taskAgent.handleSearch()"
|
|
class="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-semibold transition-all flex items-center justify-center gap-2 min-w-[120px]"
|
|
>
|
|
<i class="fas fa-search"></i>
|
|
<span>Search</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Commands -->
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span class="text-sm text-gray-500 mr-2">Quick commands:</span>
|
|
<button onclick="setTaskCommand('Show overdue tasks')" class="text-xs bg-orange-100 hover:bg-orange-200 text-orange-700 px-3 py-1 rounded-full transition-colors">
|
|
Overdue Tasks
|
|
</button>
|
|
<button onclick="setTaskCommand('Create daily standup task')" class="text-xs bg-orange-100 hover:bg-orange-200 text-orange-700 px-3 py-1 rounded-full transition-colors">
|
|
Create Task
|
|
</button>
|
|
<button onclick="setTaskCommand('Prioritize by deadline')" class="text-xs bg-orange-100 hover:bg-orange-200 text-orange-700 px-3 py-1 rounded-full transition-colors">
|
|
Smart Prioritize
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Status Filters -->
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="text-sm text-gray-500 mr-2">Filter by status:</span>
|
|
<button onclick="taskAgent && taskAgent.handleFilter('all')" class="filter-btn text-xs bg-orange-200 text-orange-800 px-3 py-1 rounded-full transition-colors" data-status="all">
|
|
All Tasks
|
|
</button>
|
|
<button onclick="taskAgent && taskAgent.handleFilter('todo')" class="filter-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition-colors" data-status="todo">
|
|
To Do
|
|
</button>
|
|
<button onclick="taskAgent && taskAgent.handleFilter('inprogress')" class="filter-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition-colors" data-status="inprogress">
|
|
In Progress
|
|
</button>
|
|
<button onclick="taskAgent && taskAgent.handleFilter('done')" class="filter-btn text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition-colors" data-status="done">
|
|
Completed
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Dashboard -->
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-exclamation-triangle text-red-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="overdueCount">0</div>
|
|
<div class="text-sm text-gray-500">Overdue</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-clock text-orange-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="dueTodayCount">0</div>
|
|
<div class="text-sm text-gray-500">Due Today</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-list text-blue-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="totalTasks">0</div>
|
|
<div class="text-sm text-gray-500">Total</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-check-circle text-green-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="completedToday">0</div>
|
|
<div class="text-sm text-gray-500">Completed</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="loadingState" class="hidden bg-white rounded-2xl p-8 shadow-lg border border-gray-200 mb-8">
|
|
<div class="flex items-center justify-center">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-600 mr-3"></div>
|
|
<span class="text-gray-600">Loading tasks...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Task Interface -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
|
|
<!-- Kanban Board -->
|
|
<div class="lg:col-span-3">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
|
<!-- To Do Column -->
|
|
<div id="todoColumn" class="bg-white rounded-2xl p-4 shadow-lg border border-gray-200">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
|
<div class="w-3 h-3 bg-gray-400 rounded-full"></div>
|
|
To Do
|
|
</h3>
|
|
<span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded-full">0</span>
|
|
</div>
|
|
|
|
<div class="space-y-3 kanban-column custom-scrollbar overflow-y-auto" style="min-height: 400px;">
|
|
<!-- Tasks will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- In Progress Column -->
|
|
<div id="inProgressColumn" class="bg-white rounded-2xl p-4 shadow-lg border border-gray-200">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
|
<div class="w-3 h-3 bg-orange-400 rounded-full"></div>
|
|
In Progress
|
|
</h3>
|
|
<span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded-full">0</span>
|
|
</div>
|
|
|
|
<div class="space-y-3 kanban-column custom-scrollbar overflow-y-auto" style="min-height: 400px;">
|
|
<!-- Tasks will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Done Column -->
|
|
<div id="doneColumn" class="bg-white rounded-2xl p-4 shadow-lg border border-gray-200">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
|
<div class="w-3 h-3 bg-green-400 rounded-full"></div>
|
|
Done
|
|
</h3>
|
|
<span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded-full">0</span>
|
|
</div>
|
|
|
|
<div class="space-y-3 kanban-column custom-scrollbar overflow-y-auto" style="min-height: 400px;">
|
|
<!-- Tasks will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Actions Panel -->
|
|
<div class="space-y-6">
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Quick Actions</h3>
|
|
<div class="space-y-3">
|
|
<button onclick="createTask()" class="w-full p-3 bg-orange-600 hover:bg-orange-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-plus"></i>
|
|
<span>Create Task</span>
|
|
</button>
|
|
<button onclick="prioritizeTasks()" class="w-full p-3 bg-purple-600 hover:bg-purple-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-sort-amount-down"></i>
|
|
<span>AI Prioritize</span>
|
|
</button>
|
|
<button onclick="bulkUpdate()" class="w-full p-3 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-edit"></i>
|
|
<span>Bulk Update</span>
|
|
</button>
|
|
<button onclick="generateReport()" class="w-full p-3 bg-green-600 hover:bg-green-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-chart-bar"></i>
|
|
<span>Progress Report</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connection Status -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Data Source</h3>
|
|
<div class="flex items-center gap-3 p-3 bg-green-50 border border-green-200 rounded-lg">
|
|
<div class="w-8 h-8 bg-green-100 rounded flex items-center justify-center">
|
|
<i class="fas fa-table text-green-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-green-800">Sample Data</p>
|
|
<p class="text-xs text-green-600">Demo Mode Active</p>
|
|
</div>
|
|
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
|
</div>
|
|
<button onclick="taskAgent && taskAgent.loadSampleTasks()" class="w-full mt-3 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-3 rounded-lg transition-colors">
|
|
<i class="fas fa-sync-alt mr-1"></i>
|
|
Refresh Data
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Productivity Insights -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Productivity Insights</h3>
|
|
<div class="space-y-4">
|
|
<div class="bg-green-50 rounded-lg p-3 border border-green-200">
|
|
<h4 class="font-medium text-green-700 mb-1">Completion Rate</h4>
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mb-1">
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: 87%"></div>
|
|
</div>
|
|
<p class="text-sm text-green-600">87% (Above average)</p>
|
|
</div>
|
|
<div class="bg-blue-50 rounded-lg p-3 border border-blue-200">
|
|
<h4 class="font-medium text-blue-700 mb-1">Focus Score</h4>
|
|
<div class="text-2xl font-bold text-blue-600">8.2/10</div>
|
|
<p class="text-sm text-blue-600">Excellent focus</p>
|
|
</div>
|
|
<div class="bg-orange-50 rounded-lg p-3 border border-orange-200">
|
|
<h4 class="font-medium text-orange-700 mb-1">Avg Task Time</h4>
|
|
<p class="text-lg font-bold text-orange-600">2.3 days</p>
|
|
<p class="text-sm text-orange-600">15% faster this week</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Recommendations -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">AI Recommendations</h3>
|
|
<div class="space-y-3">
|
|
<div class="bg-red-50 border border-red-200 rounded-lg p-3">
|
|
<h4 class="font-medium text-red-700 mb-1">🚨 Urgent Action</h4>
|
|
<p class="text-sm text-red-600">Security audit is 2 days overdue</p>
|
|
</div>
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
|
<h4 class="font-medium text-blue-700 mb-1">💡 Suggestion</h4>
|
|
<p class="text-sm text-blue-600">Break large tasks into smaller chunks</p>
|
|
</div>
|
|
<div class="bg-green-50 border border-green-200 rounded-lg p-3">
|
|
<h4 class="font-medium text-green-700 mb-1">✨ Optimization</h4>
|
|
<p class="text-sm text-green-600">Batch similar tasks for efficiency</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent AI Actions -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Recent AI Actions</h3>
|
|
<div class="space-y-3 custom-scrollbar max-h-48 overflow-y-auto">
|
|
<div class="flex items-start gap-3 p-2 bg-gray-50 rounded-lg">
|
|
<div class="w-6 h-6 bg-orange-100 rounded flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="fas fa-sort text-orange-600 text-xs"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm text-gray-800">Auto-prioritized 5 tasks</p>
|
|
<p class="text-xs text-gray-500">3 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-3 p-2 bg-gray-50 rounded-lg">
|
|
<div class="w-6 h-6 bg-green-100 rounded flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="fas fa-check text-green-600 text-xs"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm text-gray-800">Marked deployment complete</p>
|
|
<p class="text-xs text-gray-500">2 hours ago</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-3 p-2 bg-gray-50 rounded-lg">
|
|
<div class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="fas fa-plus text-blue-600 text-xs"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm text-gray-800">Created 3 subtasks</p>
|
|
<p class="text-xs text-gray-500">4 hours ago</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Response Modal -->
|
|
<div id="aiModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden">
|
|
<div class="p-6 border-b border-gray-200">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
|
<i class="fas fa-robot text-orange-600"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-800">Task AI Response</h3>
|
|
</div>
|
|
<button onclick="closeAIModal()" class="text-gray-400 hover:text-gray-600">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto custom-scrollbar" id="aiResponse">
|
|
<!-- AI response content will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts in correct order to fix loading issues -->
|
|
<script>
|
|
// Global functions that need to be available immediately
|
|
function goHome() {
|
|
window.location.href = 'index.html';
|
|
}
|
|
|
|
function executeTaskCommand() {
|
|
if (window.taskAgent) {
|
|
window.taskAgent.executeTaskCommand();
|
|
} else {
|
|
console.log('Task agent not ready yet');
|
|
}
|
|
}
|
|
|
|
function setTaskCommand(cmd) {
|
|
if (window.taskAgent) {
|
|
window.taskAgent.setTaskCommand(cmd);
|
|
} else {
|
|
console.log('Task agent not ready yet');
|
|
}
|
|
}
|
|
|
|
function createTask() {
|
|
if (window.taskAgent) {
|
|
window.taskAgent.createTask();
|
|
} else {
|
|
console.log('Task agent not ready yet');
|
|
}
|
|
}
|
|
|
|
function prioritizeTasks() {
|
|
if (window.taskAgent) {
|
|
window.taskAgent.prioritizeTasks();
|
|
} else {
|
|
console.log('Task agent not ready yet');
|
|
}
|
|
}
|
|
|
|
function bulkUpdate() {
|
|
if (window.taskAgent) {
|
|
window.taskAgent.bulkUpdate();
|
|
} else {
|
|
console.log('Task agent not ready yet');
|
|
}
|
|
}
|
|
|
|
function generateReport() {
|
|
if (window.taskAgent) {
|
|
window.taskAgent.generateReport();
|
|
} else {
|
|
console.log('Task agent not ready yet');
|
|
}
|
|
}
|
|
|
|
function closeAIModal() {
|
|
if (window.taskAgent) {
|
|
window.taskAgent.hideAIModal();
|
|
} else {
|
|
const modal = document.getElementById('aiModal');
|
|
if (modal) {
|
|
modal.classList.add('hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
console.log('✅ Global functions loaded');
|
|
</script>
|
|
|
|
<!-- Load Utils first, then Task Agent -->
|
|
<script src="assets/js/utils.js"></script>
|
|
<script src="assets/js/navigation.js"></script>
|
|
<script src="assets/js/task-agent.js"></script>
|
|
|
|
<script>
|
|
// Override API URL for your n8n instance (after task agent loads)
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (window.taskAgent) {
|
|
// Replace this URL with your actual n8n webhook URL
|
|
window.taskAgent.apiUrl = 'https://thecyberlearn.app.n8n.cloud/webhook/tasks';
|
|
console.log('✅ API URL configured');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |