 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.ca/private_html/src/pages/admin/ |
'use client';
import React, { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import {
Clock,
Calendar,
Settings,
Play,
Pause,
RefreshCw,
AlertCircle,
CheckCircle,
XCircle,
Mail,
Bell,
Database,
Shield,
Zap,
History,
Edit,
Save,
Trash2,
Plus,
Eye,
EyeOff
} from 'lucide-react';
interface AutomationTask {
id: string;
name: string;
description: string;
type: 'calendar_reminders' | 'email_notifications' | 'database_cleanup' | 'backup' | 'analytics' | 'custom';
status: 'active' | 'paused' | 'error';
schedule: string; // cron expression
lastRun: string | null;
nextRun: string | null;
successCount: number;
errorCount: number;
lastError: string | null;
enabled: boolean;
config: any;
}
interface SystemMetrics {
totalTasks: number;
activeTasks: number;
failedTasks: number;
lastBackup: string | null;
systemHealth: 'healthy' | 'warning' | 'critical';
uptime: string;
memoryUsage: number;
cpuUsage: number;
}
const SystemAutomationPage: React.FC = () => {
const { data: session, status } = useSession();
const router = useRouter();
const [tasks, setTasks] = useState<AutomationTask[]>([]);
const [metrics, setMetrics] = useState<SystemMetrics | null>(null);
const [loading, setLoading] = useState(true);
const [selectedTask, setSelectedTask] = useState<AutomationTask | null>(null);
const [showTaskModal, setShowTaskModal] = useState(false);
const [showLogs, setShowLogs] = useState(false);
const [logs, setLogs] = useState<string[]>([]);
useEffect(() => {
if (status === 'loading') return;
if (!session?.user) {
router.push('/auth/login');
return;
}
// Check if user is superadmin
if (session.user.role !== 'SUPERADMIN') {
router.push('/dashboard');
return;
}
fetchTasks();
fetchMetrics();
}, [session, status]);
const fetchTasks = async () => {
try {
const response = await fetch('/api/admin/automation/tasks');
if (response.ok) {
const data = await response.json();
setTasks(data.tasks || []);
}
} catch (error) {
console.error('Error fetching automation tasks:', error);
}
};
const fetchMetrics = async () => {
try {
const response = await fetch('/api/admin/automation/metrics');
if (response.ok) {
const data = await response.json();
setMetrics(data.metrics);
}
} catch (error) {
console.error('Error fetching system metrics:', error);
} finally {
setLoading(false);
}
};
const toggleTask = async (taskId: string, enabled: boolean) => {
try {
const response = await fetch(`/api/admin/automation/tasks/${taskId}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ enabled })
});
if (response.ok) {
fetchTasks();
}
} catch (error) {
console.error('Error toggling task:', error);
}
};
const runTaskNow = async (taskId: string) => {
try {
const response = await fetch(`/api/admin/automation/tasks/${taskId}/run`, {
method: 'POST'
});
if (response.ok) {
fetchTasks();
fetchMetrics();
}
} catch (error) {
console.error('Error running task:', error);
}
};
const viewLogs = async (taskId: string) => {
try {
const response = await fetch(`/api/admin/automation/tasks/${taskId}/logs`);
if (response.ok) {
const data = await response.json();
setLogs(data.logs || []);
setShowLogs(true);
}
} catch (error) {
console.error('Error fetching logs:', error);
}
};
const getStatusIcon = (status: string) => {
switch (status) {
case 'active': return <CheckCircle className="w-5 h-5 text-green-500" />;
case 'paused': return <Pause className="w-5 h-5 text-yellow-500" />;
case 'error': return <XCircle className="w-5 h-5 text-red-500" />;
default: return <AlertCircle className="w-5 h-5 text-gray-500" />;
}
};
const getTaskIcon = (type: string) => {
switch (type) {
case 'calendar_reminders': return <Calendar className="w-5 h-5" />;
case 'email_notifications': return <Mail className="w-5 h-5" />;
case 'database_cleanup': return <Database className="w-5 h-5" />;
case 'backup': return <Shield className="w-5 h-5" />;
case 'analytics': return <Zap className="w-5 h-5" />;
default: return <Settings className="w-5 h-5" />;
}
};
if (loading) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
</div>
);
}
return (
<div className="min-h-screen bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Header */}
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900">System Automation</h1>
<p className="text-gray-600 mt-2">Manage automated tasks, cron jobs, and system processes</p>
</div>
{/* System Metrics */}
{metrics && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<div className="flex items-center">
<div className="p-2 bg-blue-100 rounded-lg">
<Clock className="w-6 h-6 text-blue-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Active Tasks</p>
<p className="text-2xl font-bold text-gray-900">{metrics.activeTasks}</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<div className="flex items-center">
<div className="p-2 bg-red-100 rounded-lg">
<AlertCircle className="w-6 h-6 text-red-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Failed Tasks</p>
<p className="text-2xl font-bold text-gray-900">{metrics.failedTasks}</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<div className="flex items-center">
<div className="p-2 bg-green-100 rounded-lg">
<Shield className="w-6 h-6 text-green-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">System Health</p>
<p className={`text-2xl font-bold ${
metrics.systemHealth === 'healthy' ? 'text-green-600' :
metrics.systemHealth === 'warning' ? 'text-yellow-600' : 'text-red-600'
}`}>
{metrics.systemHealth.charAt(0).toUpperCase() + metrics.systemHealth.slice(1)}
</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<div className="flex items-center">
<div className="p-2 bg-purple-100 rounded-lg">
<Zap className="w-6 h-6 text-purple-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Uptime</p>
<p className="text-2xl font-bold text-gray-900">{metrics.uptime}</p>
</div>
</div>
</div>
</div>
)}
{/* Automation Tasks */}
<div className="bg-white rounded-lg shadow-sm border border-gray-200">
<div className="px-6 py-4 border-b border-gray-200">
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold text-gray-900">Automation Tasks</h2>
<button
onClick={() => {
setSelectedTask(null);
setShowTaskModal(true);
}}
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
<Plus className="w-4 h-4" />
Add Task
</button>
</div>
</div>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Task
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Schedule
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Last Run
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Next Run
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 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">
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="flex-shrink-0">
{getTaskIcon(task.type)}
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900">{task.name}</div>
<div className="text-sm text-gray-500">{task.description}</div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
{getStatusIcon(task.status)}
<span className="ml-2 text-sm text-gray-900 capitalize">{task.status}</span>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
{task.schedule}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{task.lastRun ? new Date(task.lastRun).toLocaleString() : 'Never'}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{task.nextRun ? new Date(task.nextRun).toLocaleString() : 'N/A'}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div className="flex items-center gap-2">
<button
onClick={() => toggleTask(task.id, !task.enabled)}
className={`p-2 rounded-full ${
task.enabled
? 'text-green-600 hover:bg-green-50'
: 'text-gray-400 hover:bg-gray-50'
}`}
>
{task.enabled ? <Eye className="w-4 h-4" /> : <EyeOff className="w-4 h-4" />}
</button>
<button
onClick={() => runTaskNow(task.id)}
className="p-2 text-blue-600 hover:bg-blue-50 rounded-full"
>
<Play className="w-4 h-4" />
</button>
<button
onClick={() => viewLogs(task.id)}
className="p-2 text-gray-600 hover:bg-gray-50 rounded-full"
>
<History className="w-4 h-4" />
</button>
<button
onClick={() => {
setSelectedTask(task);
setShowTaskModal(true);
}}
className="p-2 text-gray-600 hover:bg-gray-50 rounded-full"
>
<Edit className="w-4 h-4" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* Logs Modal */}
{showLogs && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[80vh] overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-gray-900">Task Logs</h3>
<button
onClick={() => setShowLogs(false)}
className="p-2 text-gray-400 hover:text-gray-600 rounded-full"
>
×
</button>
</div>
</div>
<div className="p-6 overflow-y-auto max-h-[60vh]">
<div className="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm">
{logs.length > 0 ? (
logs.map((log, index) => (
<div key={index} className="mb-1">{log}</div>
))
) : (
<div>No logs available</div>
)}
</div>
</div>
</div>
</div>
)}
{/* Task Modal */}
{showTaskModal && (
<TaskModal
task={selectedTask}
onSave={() => {
setShowTaskModal(false);
fetchTasks();
}}
onClose={() => setShowTaskModal(false)}
/>
)}
</div>
</div>
);
};
// Task Modal Component
interface TaskModalProps {
task: AutomationTask | null;
onSave: () => void;
onClose: () => void;
}
const TaskModal: React.FC<TaskModalProps> = ({ task, onSave, onClose }) => {
const [formData, setFormData] = useState({
name: task?.name || '',
description: task?.description || '',
type: task?.type || 'calendar_reminders',
schedule: task?.schedule || '0 */30 * * * *', // Every 30 minutes
enabled: task?.enabled ?? true,
config: task?.config || {}
});
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
const url = task
? `/api/admin/automation/tasks/${task.id}`
: '/api/admin/automation/tasks';
const method = task ? 'PUT' : 'POST';
const response = await fetch(url, {
method,
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
if (response.ok) {
onSave();
}
} catch (error) {
console.error('Error saving task:', error);
}
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
<div className="p-6">
<div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold text-gray-900">
{task ? 'Edit Task' : 'Create Task'}
</h2>
<button
onClick={onClose}
className="p-2 text-gray-400 hover:text-gray-600 rounded-full"
>
×
</button>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Task Name
</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Description
</label>
<textarea
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
rows={3}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Task Type
</label>
<select
value={formData.type}
onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="calendar_reminders">Calendar Reminders</option>
<option value="email_notifications">Email Notifications</option>
<option value="database_cleanup">Database Cleanup</option>
<option value="backup">System Backup</option>
<option value="analytics">Analytics Processing</option>
<option value="custom">Custom Task</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Cron Schedule
</label>
<input
type="text"
value={formData.schedule}
onChange={(e) => setFormData({ ...formData, schedule: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="0 */30 * * * * (every 30 minutes)"
required
/>
<p className="text-xs text-gray-500 mt-1">
Format: second minute hour day month weekday
</p>
</div>
<div className="flex items-center">
<input
type="checkbox"
id="enabled"
checked={formData.enabled}
onChange={(e) => setFormData({ ...formData, enabled: e.target.checked })}
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>
<label htmlFor="enabled" className="ml-2 block text-sm text-gray-900">
Enable this task
</label>
</div>
<div className="flex items-center justify-end gap-4 pt-6 border-t border-gray-200">
<button
type="button"
onClick={onClose}
className="px-4 py-2 text-gray-600 hover:text-gray-800"
>
Cancel
</button>
<button
type="submit"
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
{task ? 'Update' : 'Create'}
</button>
</div>
</form>
</div>
</div>
</div>
);
};
export default SystemAutomationPage;