788 lines
27 KiB
TypeScript
788 lines
27 KiB
TypeScript
/**
|
|
* Tasks Page - Built with TablePageTemplate
|
|
* Consistent with Keywords page layout, structure and design
|
|
*/
|
|
|
|
import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
|
|
import TablePageTemplate from '../../templates/TablePageTemplate';
|
|
import {
|
|
fetchTasks,
|
|
createTask,
|
|
updateTask,
|
|
deleteTask,
|
|
bulkDeleteTasks,
|
|
bulkUpdateTasksStatus,
|
|
autoGenerateContent,
|
|
autoGenerateImages,
|
|
Task,
|
|
TasksFilters,
|
|
TaskCreateData,
|
|
fetchClusters,
|
|
Cluster,
|
|
} from '../../services/api';
|
|
import FormModal from '../../components/common/FormModal';
|
|
import ProgressModal from '../../components/common/ProgressModal';
|
|
import { useProgressModal } from '../../hooks/useProgressModal';
|
|
import { useResourceDebug } from '../../hooks/useResourceDebug';
|
|
import { useToast } from '../../components/ui/toast/ToastContainer';
|
|
import { TaskIcon, PlusIcon, DownloadIcon, FileIcon, ImageIcon, CheckCircleIcon } from '../../icons';
|
|
import { createTasksPageConfig } from '../../config/pages/tasks.config';
|
|
import { useSectorStore } from '../../store/sectorStore';
|
|
import { usePageSizeStore } from '../../store/pageSizeStore';
|
|
import PageHeader from '../../components/common/PageHeader';
|
|
import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
|
|
|
|
export default function Tasks() {
|
|
const toast = useToast();
|
|
const { activeSector } = useSectorStore();
|
|
const { pageSize } = usePageSizeStore();
|
|
|
|
// Data state
|
|
const [tasks, setTasks] = useState<Task[]>([]);
|
|
const [clusters, setClusters] = useState<Cluster[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Filter state
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState('');
|
|
const [clusterFilter, setClusterFilter] = useState('');
|
|
const [structureFilter, setStructureFilter] = useState('');
|
|
const [typeFilter, setTypeFilter] = useState('');
|
|
const [sourceFilter, setSourceFilter] = useState('');
|
|
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
|
|
// Pagination state
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [totalCount, setTotalCount] = useState(0);
|
|
|
|
// Sorting state
|
|
const [sortBy, setSortBy] = useState<string>('created_at');
|
|
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
|
const [showContent, setShowContent] = useState(false);
|
|
|
|
// Modal state
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [isEditMode, setIsEditMode] = useState(false);
|
|
const [editingTask, setEditingTask] = useState<Task | null>(null);
|
|
const [formData, setFormData] = useState<TaskCreateData>({
|
|
title: '',
|
|
description: '',
|
|
keywords: '',
|
|
cluster_id: null,
|
|
content_structure: 'article',
|
|
content_type: 'post',
|
|
status: 'queued',
|
|
word_count: 0,
|
|
});
|
|
|
|
// Progress modal for AI functions
|
|
const progressModal = useProgressModal();
|
|
|
|
// AI Function Logs state
|
|
const [aiLogs, setAiLogs] = useState<Array<{
|
|
timestamp: string;
|
|
type: 'request' | 'success' | 'error' | 'step';
|
|
action: string;
|
|
data: any;
|
|
stepName?: string;
|
|
percentage?: number;
|
|
}>>([]);
|
|
|
|
// Resource Debug toggle - controls AI Function Logs
|
|
const resourceDebugEnabled = useResourceDebug();
|
|
|
|
// Track last logged step to avoid duplicates
|
|
const lastLoggedStepRef = useRef<string | null>(null);
|
|
const lastLoggedPercentageRef = useRef<number>(-1);
|
|
const hasReloadedRef = useRef<boolean>(false);
|
|
|
|
// Helper function to add log entry (only if Resource Debug is enabled)
|
|
const addAiLog = useCallback((log: {
|
|
timestamp: string;
|
|
type: 'request' | 'success' | 'error' | 'step';
|
|
action: string;
|
|
data: any;
|
|
stepName?: string;
|
|
percentage?: number;
|
|
}) => {
|
|
if (resourceDebugEnabled) {
|
|
setAiLogs(prev => [...prev, log]);
|
|
}
|
|
}, [resourceDebugEnabled]);
|
|
|
|
// Load clusters for filter dropdown
|
|
useEffect(() => {
|
|
const loadClusters = async () => {
|
|
try {
|
|
const data = await fetchClusters({ ordering: 'name' });
|
|
setClusters(data.results || []);
|
|
} catch (error) {
|
|
console.error('Error fetching clusters:', error);
|
|
}
|
|
};
|
|
loadClusters();
|
|
}, []);
|
|
|
|
// Load tasks - wrapped in useCallback
|
|
const loadTasks = useCallback(async () => {
|
|
setLoading(true);
|
|
setShowContent(false);
|
|
try {
|
|
const ordering = sortBy ? `${sortDirection === 'desc' ? '-' : ''}${sortBy}` : '-created_at';
|
|
|
|
// Build search term - combine user search with Site Builder filter if needed
|
|
let finalSearchTerm = searchTerm;
|
|
if (sourceFilter === 'site_builder') {
|
|
// If user has a search term, combine it with Site Builder prefix
|
|
finalSearchTerm = searchTerm ? `[Site Builder] ${searchTerm}` : '[Site Builder]';
|
|
}
|
|
|
|
const filters: TasksFilters = {
|
|
...(finalSearchTerm && { search: finalSearchTerm }),
|
|
...(statusFilter && { status: statusFilter }),
|
|
...(clusterFilter && { cluster_id: clusterFilter }),
|
|
...(structureFilter && { content_structure: structureFilter }),
|
|
...(typeFilter && { content_type: typeFilter }),
|
|
page: currentPage,
|
|
page_size: pageSize,
|
|
ordering,
|
|
};
|
|
|
|
const data = await fetchTasks(filters);
|
|
setTasks(data.results || []);
|
|
setTotalCount(data.count || 0);
|
|
setTotalPages(Math.ceil((data.count || 0) / pageSize));
|
|
|
|
setTimeout(() => {
|
|
setShowContent(true);
|
|
setLoading(false);
|
|
}, 100);
|
|
} catch (error: any) {
|
|
console.error('Error loading tasks:', error);
|
|
toast.error(`Failed to load tasks: ${error.message}`);
|
|
setShowContent(true);
|
|
setLoading(false);
|
|
}
|
|
}, [currentPage, statusFilter, clusterFilter, structureFilter, typeFilter, sortBy, sortDirection, searchTerm, activeSector, pageSize]);
|
|
|
|
useEffect(() => {
|
|
loadTasks();
|
|
}, [loadTasks]);
|
|
|
|
// Listen for site and sector changes and refresh data
|
|
useEffect(() => {
|
|
const handleSiteChange = () => {
|
|
loadTasks();
|
|
};
|
|
|
|
const handleSectorChange = () => {
|
|
loadTasks();
|
|
};
|
|
|
|
window.addEventListener('siteChanged', handleSiteChange);
|
|
window.addEventListener('sectorChanged', handleSectorChange);
|
|
return () => {
|
|
window.removeEventListener('siteChanged', handleSiteChange);
|
|
window.removeEventListener('sectorChanged', handleSectorChange);
|
|
};
|
|
}, [loadTasks]);
|
|
|
|
// Reset to page 1 when pageSize changes
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [pageSize]);
|
|
|
|
|
|
// Debounced search
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
if (currentPage === 1) {
|
|
loadTasks();
|
|
} else {
|
|
setCurrentPage(1);
|
|
}
|
|
}, 500);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [searchTerm, currentPage, loadTasks]);
|
|
|
|
// Handle sorting
|
|
const handleSort = (field: string, direction: 'asc' | 'desc') => {
|
|
setSortBy(field || 'created_at');
|
|
setSortDirection(direction);
|
|
setCurrentPage(1);
|
|
};
|
|
|
|
// Bulk status update handler
|
|
const handleBulkUpdateStatus = useCallback(async (ids: string[], status: string) => {
|
|
try {
|
|
const numIds = ids.map(id => parseInt(id));
|
|
await bulkUpdateTasksStatus(numIds, status);
|
|
await loadTasks();
|
|
} catch (error: any) {
|
|
throw error;
|
|
}
|
|
}, [loadTasks]);
|
|
|
|
// Bulk export handler
|
|
const handleBulkExport = useCallback(async (ids: string[]) => {
|
|
try {
|
|
if (!ids || ids.length === 0) {
|
|
throw new Error('No records selected for export');
|
|
}
|
|
toast.info('Export functionality coming soon');
|
|
} catch (error: any) {
|
|
throw error;
|
|
}
|
|
}, []);
|
|
|
|
// Row action handler for single task actions
|
|
const handleRowAction = useCallback(async (action: string, row: Task) => {
|
|
if (action === 'generate_content') {
|
|
// Validate task has required data
|
|
if (!row.title) {
|
|
toast.error('Task must have a title to generate content');
|
|
return;
|
|
}
|
|
|
|
// Optional: Validate task status (can generate for any status)
|
|
// if (row.status !== 'queued') {
|
|
// toast.error(`Only tasks with status "queued" can generate content. Current status: ${row.status}`);
|
|
// return;
|
|
// }
|
|
|
|
const requestData = {
|
|
ids: [row.id],
|
|
task_title: row.title,
|
|
task_id: row.id,
|
|
};
|
|
|
|
// Log request
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: 'request',
|
|
action: 'generate_content (Row Action)',
|
|
data: requestData,
|
|
});
|
|
|
|
try {
|
|
const result = await autoGenerateContent([row.id]);
|
|
|
|
if (result.success) {
|
|
if (result.task_id) {
|
|
// Log success with task_id
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: 'success',
|
|
action: 'generate_content (Row Action)',
|
|
data: { task_id: result.task_id, message: result.message },
|
|
});
|
|
// Async task - show progress modal
|
|
progressModal.openModal(result.task_id, 'Generating Content', 'ai-generate-content-03');
|
|
toast.success('Content generation started');
|
|
} else {
|
|
// Log success with results
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: 'success',
|
|
action: 'generate_content (Row Action)',
|
|
data: { tasks_updated: result.tasks_updated || 0, message: result.message },
|
|
});
|
|
// Synchronous completion
|
|
toast.success(`Content generated successfully: ${result.tasks_updated || 0} article generated`);
|
|
await loadTasks();
|
|
}
|
|
} else {
|
|
// Log error
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: 'error',
|
|
action: 'generate_content (Row Action)',
|
|
data: { error: result.error || 'Failed to generate content' },
|
|
});
|
|
toast.error(result.error || 'Failed to generate content');
|
|
}
|
|
} catch (error: any) {
|
|
// Log error
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: 'error',
|
|
action: 'generate_content (Row Action)',
|
|
data: { error: error.message || 'Unknown error occurred' },
|
|
});
|
|
toast.error(`Failed to generate content: ${error.message}`);
|
|
}
|
|
}
|
|
}, [toast, loadTasks, progressModal]);
|
|
|
|
// Bulk action handler
|
|
const handleBulkAction = useCallback(async (action: string, ids: string[]) => {
|
|
// generate_content removed from bulk actions - only available as row action
|
|
if (action === 'generate_images') {
|
|
if (ids.length === 0) {
|
|
toast.error('Please select at least one task to generate images');
|
|
return;
|
|
}
|
|
if (ids.length > 10) {
|
|
toast.error('Maximum 10 tasks allowed for image generation');
|
|
return;
|
|
}
|
|
const numIds = ids.map(id => parseInt(id));
|
|
const selectedTasks = tasks.filter(t => numIds.includes(t.id));
|
|
const requestData = {
|
|
ids: numIds,
|
|
task_count: numIds.length,
|
|
task_titles: selectedTasks.map(t => t.title),
|
|
};
|
|
|
|
// Log request
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: 'request',
|
|
action: 'generate_images (Bulk Action)',
|
|
data: requestData,
|
|
});
|
|
|
|
try {
|
|
const result = await autoGenerateImages(numIds);
|
|
if (result.success) {
|
|
if (result.task_id) {
|
|
// Log success with task_id
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: 'success',
|
|
action: 'generate_images (Bulk Action)',
|
|
data: { task_id: result.task_id, message: result.message, task_count: numIds.length },
|
|
});
|
|
// Async task - show progress modal
|
|
progressModal.openModal(result.task_id, 'Generating Images');
|
|
toast.success('Image generation started');
|
|
} else {
|
|
// Log success with results
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: 'success',
|
|
action: 'generate_images (Bulk Action)',
|
|
data: { images_created: result.images_created || 0, message: result.message, task_count: numIds.length },
|
|
});
|
|
// Synchronous completion
|
|
toast.success(`Image generation complete: ${result.images_created || 0} images generated`);
|
|
await loadTasks();
|
|
}
|
|
} else {
|
|
// Log error
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: 'error',
|
|
action: 'generate_images (Bulk Action)',
|
|
data: { error: result.error || 'Failed to generate images', task_count: numIds.length },
|
|
});
|
|
toast.error(result.error || 'Failed to generate images');
|
|
}
|
|
} catch (error: any) {
|
|
// Log error
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: 'error',
|
|
action: 'generate_images (Bulk Action)',
|
|
data: { error: error.message || 'Unknown error occurred', task_count: numIds.length },
|
|
});
|
|
toast.error(`Failed to generate images: ${error.message}`);
|
|
}
|
|
} else {
|
|
toast.info(`Bulk action "${action}" for ${ids.length} items`);
|
|
}
|
|
}, [toast, loadTasks, progressModal, tasks]);
|
|
|
|
// Log AI function progress steps
|
|
useEffect(() => {
|
|
if (!progressModal.taskId || !progressModal.isOpen) {
|
|
return;
|
|
}
|
|
|
|
const progress = progressModal.progress;
|
|
const currentStep = progress.details?.phase || '';
|
|
const currentPercentage = progress.percentage;
|
|
const currentMessage = progress.message;
|
|
const currentStatus = progress.status;
|
|
|
|
// Log step changes
|
|
if (currentStep && currentStep !== lastLoggedStepRef.current) {
|
|
const stepType = currentStatus === 'error' ? 'error' :
|
|
currentStatus === 'completed' ? 'success' : 'step';
|
|
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: stepType,
|
|
action: progressModal.title || 'AI Function',
|
|
stepName: currentStep,
|
|
percentage: currentPercentage,
|
|
data: {
|
|
step: currentStep,
|
|
message: currentMessage,
|
|
percentage: currentPercentage,
|
|
status: currentStatus,
|
|
details: progress.details,
|
|
},
|
|
});
|
|
|
|
lastLoggedStepRef.current = currentStep;
|
|
lastLoggedPercentageRef.current = currentPercentage;
|
|
}
|
|
// Log percentage changes for same step (if significant change)
|
|
else if (currentStep && Math.abs(currentPercentage - lastLoggedPercentageRef.current) >= 10) {
|
|
const stepType = currentStatus === 'error' ? 'error' :
|
|
currentStatus === 'completed' ? 'success' : 'step';
|
|
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: stepType,
|
|
action: progressModal.title || 'AI Function',
|
|
stepName: currentStep,
|
|
percentage: currentPercentage,
|
|
data: {
|
|
step: currentStep,
|
|
message: currentMessage,
|
|
percentage: currentPercentage,
|
|
status: currentStatus,
|
|
details: progress.details,
|
|
},
|
|
});
|
|
|
|
lastLoggedPercentageRef.current = currentPercentage;
|
|
}
|
|
// Log status changes (error, completed)
|
|
else if (currentStatus === 'error' || currentStatus === 'completed') {
|
|
// Only log if we haven't already logged this status for this step
|
|
if (currentStep !== lastLoggedStepRef.current ||
|
|
(currentStatus === 'error' && lastLoggedStepRef.current !== 'error') ||
|
|
(currentStatus === 'completed' && lastLoggedStepRef.current !== 'completed')) {
|
|
const stepType = currentStatus === 'error' ? 'error' : 'success';
|
|
|
|
addAiLog({
|
|
timestamp: new Date().toISOString(),
|
|
type: stepType,
|
|
action: progressModal.title || 'AI Function',
|
|
stepName: currentStep || 'Final',
|
|
percentage: currentPercentage,
|
|
data: {
|
|
step: currentStep || 'Final',
|
|
message: currentMessage,
|
|
percentage: currentPercentage,
|
|
status: currentStatus,
|
|
details: progress.details,
|
|
},
|
|
});
|
|
|
|
lastLoggedStepRef.current = currentStep || currentStatus;
|
|
}
|
|
}
|
|
}, [progressModal.progress, progressModal.taskId, progressModal.isOpen, progressModal.title, addAiLog]);
|
|
|
|
// Reset step tracking when modal closes or opens
|
|
useEffect(() => {
|
|
if (!progressModal.isOpen) {
|
|
lastLoggedStepRef.current = null;
|
|
lastLoggedPercentageRef.current = -1;
|
|
hasReloadedRef.current = false; // Reset reload flag when modal closes
|
|
} else {
|
|
// Reset reload flag when modal opens for a new task
|
|
hasReloadedRef.current = false;
|
|
}
|
|
}, [progressModal.isOpen, progressModal.taskId]);
|
|
|
|
// Create page config
|
|
const pageConfig = useMemo(() => {
|
|
return createTasksPageConfig({
|
|
clusters,
|
|
activeSector,
|
|
formData,
|
|
setFormData,
|
|
searchTerm,
|
|
setSearchTerm,
|
|
statusFilter,
|
|
setStatusFilter,
|
|
clusterFilter,
|
|
sourceFilter,
|
|
setSourceFilter,
|
|
setClusterFilter,
|
|
structureFilter,
|
|
setStructureFilter,
|
|
typeFilter,
|
|
setTypeFilter,
|
|
setCurrentPage,
|
|
});
|
|
}, [clusters, activeSector, formData, searchTerm, statusFilter, clusterFilter, structureFilter, typeFilter, sourceFilter]);
|
|
|
|
// Calculate header metrics
|
|
const headerMetrics = useMemo(() => {
|
|
if (!pageConfig?.headerMetrics) return [];
|
|
return pageConfig.headerMetrics.map((metric) => ({
|
|
label: metric.label,
|
|
value: metric.calculate({ tasks, totalCount }),
|
|
accentColor: metric.accentColor,
|
|
}));
|
|
}, [pageConfig?.headerMetrics, tasks, totalCount]);
|
|
|
|
const resetForm = useCallback(() => {
|
|
setFormData({
|
|
title: '',
|
|
description: '',
|
|
keywords: '',
|
|
cluster_id: null,
|
|
content_structure: 'article',
|
|
content_type: 'post',
|
|
status: 'queued',
|
|
word_count: 0,
|
|
});
|
|
setIsEditMode(false);
|
|
setEditingTask(null);
|
|
}, []);
|
|
|
|
// Handle create/edit
|
|
const handleSave = async () => {
|
|
try {
|
|
if (isEditMode && editingTask) {
|
|
await updateTask(editingTask.id, formData);
|
|
toast.success('Task updated successfully');
|
|
} else {
|
|
await createTask(formData);
|
|
toast.success('Task created successfully');
|
|
}
|
|
setIsModalOpen(false);
|
|
resetForm();
|
|
loadTasks();
|
|
} catch (error: any) {
|
|
toast.error(`Failed to save: ${error.message}`);
|
|
}
|
|
};
|
|
|
|
// Writer navigation tabs
|
|
const writerTabs = [
|
|
{ label: 'Queue', path: '/writer/tasks', icon: <TaskIcon /> },
|
|
{ label: 'Drafts', path: '/writer/content', icon: <FileIcon /> },
|
|
{ label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
|
|
{ label: 'Review', path: '/writer/review', icon: <CheckCircleIcon /> },
|
|
{ label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title="Content Queue"
|
|
badge={{ icon: <TaskIcon />, color: 'indigo' }}
|
|
navigation={<ModuleNavigationTabs tabs={writerTabs} />}
|
|
/>
|
|
<TablePageTemplate
|
|
columns={pageConfig.columns}
|
|
data={tasks}
|
|
loading={loading}
|
|
showContent={showContent}
|
|
filters={pageConfig.filters}
|
|
filterValues={{
|
|
search: searchTerm,
|
|
status: statusFilter,
|
|
cluster_id: clusterFilter,
|
|
content_structure: structureFilter,
|
|
content_type: typeFilter,
|
|
source: sourceFilter,
|
|
}}
|
|
onFilterChange={(key, value) => {
|
|
const stringValue = value === null || value === undefined ? '' : String(value);
|
|
if (key === 'search') {
|
|
setSearchTerm(stringValue);
|
|
} else if (key === 'status') {
|
|
setStatusFilter(stringValue);
|
|
} else if (key === 'cluster_id') {
|
|
setClusterFilter(stringValue);
|
|
} else if (key === 'content_structure') {
|
|
setStructureFilter(stringValue);
|
|
} else if (key === 'content_type') {
|
|
setTypeFilter(stringValue);
|
|
} else if (key === 'source') {
|
|
setSourceFilter(stringValue);
|
|
}
|
|
setCurrentPage(1);
|
|
}}
|
|
onEdit={(row) => {
|
|
setEditingTask(row);
|
|
setFormData({
|
|
title: row.title || '',
|
|
description: row.description || '',
|
|
keywords: row.keywords || '',
|
|
cluster_id: row.cluster_id || null,
|
|
content_structure: row.content_structure || 'article',
|
|
content_type: row.content_type || 'post',
|
|
status: row.status || 'queued',
|
|
word_count: row.word_count || 0,
|
|
});
|
|
setIsEditMode(true);
|
|
setIsModalOpen(true);
|
|
}}
|
|
onCreate={() => {
|
|
resetForm();
|
|
setIsModalOpen(true);
|
|
}}
|
|
createLabel="Add Task"
|
|
onCreateIcon={<PlusIcon />}
|
|
onDelete={async (id: number) => {
|
|
await deleteTask(id);
|
|
loadTasks();
|
|
}}
|
|
onBulkDelete={async (ids: number[]) => {
|
|
const result = await bulkDeleteTasks(ids);
|
|
// Clear selection first
|
|
setSelectedIds([]);
|
|
// Reset to page 1 if we deleted all items on current page
|
|
if (currentPage > 1 && tasks.length <= ids.length) {
|
|
setCurrentPage(1);
|
|
}
|
|
// Always reload data to refresh the table
|
|
await loadTasks();
|
|
return result;
|
|
}}
|
|
onBulkExport={handleBulkExport}
|
|
onBulkUpdateStatus={handleBulkUpdateStatus}
|
|
onBulkAction={handleBulkAction}
|
|
onRowAction={handleRowAction}
|
|
getItemDisplayName={(row: Task) => row.title}
|
|
onExport={async () => {
|
|
toast.info('Export functionality coming soon');
|
|
}}
|
|
onExportIcon={<DownloadIcon />}
|
|
selectionLabel="task"
|
|
pagination={{
|
|
currentPage,
|
|
totalPages,
|
|
totalCount,
|
|
onPageChange: setCurrentPage,
|
|
}}
|
|
selection={{
|
|
selectedIds,
|
|
onSelectionChange: setSelectedIds,
|
|
}}
|
|
sorting={{
|
|
sortBy,
|
|
sortDirection,
|
|
onSort: handleSort,
|
|
}}
|
|
headerMetrics={headerMetrics}
|
|
onFilterReset={() => {
|
|
setSearchTerm('');
|
|
setStatusFilter('');
|
|
setClusterFilter('');
|
|
setStructureFilter('');
|
|
setTypeFilter('');
|
|
setCurrentPage(1);
|
|
}}
|
|
/>
|
|
|
|
{/* Progress Modal for AI Functions */}
|
|
<ProgressModal
|
|
isOpen={progressModal.isOpen}
|
|
title={progressModal.title}
|
|
percentage={progressModal.progress.percentage}
|
|
status={progressModal.progress.status}
|
|
message={progressModal.progress.message}
|
|
details={progressModal.progress.details}
|
|
taskId={progressModal.taskId || undefined}
|
|
functionId={progressModal.functionId}
|
|
onClose={() => {
|
|
const wasCompleted = progressModal.progress.status === 'completed';
|
|
progressModal.closeModal();
|
|
// Reload data after modal closes (if completed)
|
|
if (wasCompleted && !hasReloadedRef.current) {
|
|
hasReloadedRef.current = true;
|
|
loadTasks();
|
|
setTimeout(() => {
|
|
hasReloadedRef.current = false;
|
|
}, 1000);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{/* AI Function Logs - Display below table (only when Resource Debug is enabled) */}
|
|
{resourceDebugEnabled && aiLogs.length > 0 && (
|
|
<div className="mt-6 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
|
AI Function Logs
|
|
</h3>
|
|
<button
|
|
onClick={() => setAiLogs([])}
|
|
className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
|
>
|
|
Clear Logs
|
|
</button>
|
|
</div>
|
|
<div className="space-y-2 max-h-96 overflow-y-auto">
|
|
{aiLogs.slice().reverse().map((log, index) => (
|
|
<div
|
|
key={index}
|
|
className={`p-3 rounded border text-xs font-mono ${
|
|
log.type === 'request'
|
|
? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
|
|
: log.type === 'success'
|
|
? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
|
|
: log.type === 'error'
|
|
? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800'
|
|
: 'bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className={`font-semibold ${
|
|
log.type === 'request'
|
|
? 'text-blue-700 dark:text-blue-300'
|
|
: log.type === 'success'
|
|
? 'text-green-700 dark:text-green-300'
|
|
: log.type === 'error'
|
|
? 'text-red-700 dark:text-red-300'
|
|
: 'text-purple-700 dark:text-purple-300'
|
|
}`}>
|
|
[{log.type.toUpperCase()}]
|
|
</span>
|
|
<span className="text-gray-700 dark:text-gray-300">
|
|
{log.action}
|
|
</span>
|
|
{log.stepName && (
|
|
<span className="text-xs px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
|
|
{log.stepName}
|
|
</span>
|
|
)}
|
|
{log.percentage !== undefined && (
|
|
<span className="text-xs text-gray-500 dark:text-gray-400">
|
|
{log.percentage}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="text-gray-500 dark:text-gray-400">
|
|
{new Date(log.timestamp).toLocaleTimeString()}
|
|
</span>
|
|
</div>
|
|
<pre className="text-xs text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-words">
|
|
{JSON.stringify(log.data, null, 2)}
|
|
</pre>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Create/Edit Modal */}
|
|
<FormModal
|
|
isOpen={isModalOpen}
|
|
onClose={() => {
|
|
setIsModalOpen(false);
|
|
resetForm();
|
|
}}
|
|
onSubmit={handleSave}
|
|
title={isEditMode ? 'Edit Task' : 'Add Task'}
|
|
submitLabel={isEditMode ? 'Update' : 'Create'}
|
|
fields={pageConfig.formFields(clusters)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|