Add steps using the form.
`;
return;
}
currentWorkflow.steps.forEach((step, index) => {
const isTrigger = step.type === 'trigger';
const bgColor = isTrigger ? 'bg-indigo-600' : 'bg-teal-600';
const stepHtml = `
${ICONS[step.value]}
${step.name}
${index < currentWorkflow.steps.length - 1 ? '
' : ''}
`;
visualizer.innerHTML += stepHtml;
});
};
document.getElementById('workflow-steps-visualizer').addEventListener('click', (e) => {
if (e.target.classList.contains('remove-step-btn')) {
const stepId = parseInt(e.target.dataset.id, 10);
currentWorkflow.steps = currentWorkflow.steps.filter(s => s.id !== stepId);
renderWorkflowVisualizer();
}
});
// --- Dashboard Logic ---
const refreshUI = () => {
renderDashboard();
updateEmptyState();
};
const renderDashboard = () => {
const listEl = document.getElementById('workflow-list-dashboard');
listEl.innerHTML = workflows.map(w => {
const trigger = w.steps.find(s => s.type === 'trigger');
const actions = w.steps.filter(s => s.type === 'action');
return `
${trigger ? ICONS[trigger.value] : ''}
→
${actions.map(a => ICONS[a.value]).join('')}
${actions.length} Action${actions.length !== 1 ? 's' : ''}
`;
}).join('');
document.getElementById('kpi-total-workflows').textContent = workflows.length;
document.getElementById('kpi-active-workflows').textContent = workflows.filter(w => w.active).length;
};
document.getElementById('workflow-list-dashboard').addEventListener('click', (e) => {
const id = parseInt(e.target.dataset.id, 10);
if (e.target.classList.contains('edit-btn')) handleEdit(id);
if (e.target.classList.contains('delete-btn')) handleDelete(id);
});
document.getElementById('workflow-list-dashboard').addEventListener('change', (e) => {
if(e.target.classList.contains('toggle-checkbox')) {
const id = parseInt(e.target.dataset.id, 10);
const index = workflows.findIndex(w => w.id === id);
if (index !== -1) {
workflows[index].active = e.target.checked;
refreshUI();
}
}
});
const handleEdit = (id) => {
const workflow = workflows.find(w => w.id === id);
if (!workflow) return;
editingWorkflowId = id;
currentWorkflow = JSON.parse(JSON.stringify(workflow)); // Deep copy
document.getElementById('workflowName').value = currentWorkflow.name;
document.getElementById('form-title').textContent = 'Edit Workflow';
document.getElementById('cancel-edit-btn').classList.remove('hidden');
renderWorkflowVisualizer();
switchTab('workflow-builder');
};
const handleDelete = (id) => {
workflows = workflows.filter(w => w.id !== id);
refreshUI();
};
const updateEmptyState = () => {
const isEmpty = workflows.length === 0;
document.getElementById('dashboard-content-area').style.display = isEmpty ? 'none' : 'block';
document.getElementById('dashboard-empty-state').style.display = isEmpty ? 'block' : 'none';
downloadPdfBtn.style.display = isEmpty ? 'none' : 'flex';
};
// --- PDF Generation ---
downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
if (!jsPDF || workflows.length === 0) return;
const doc = new jsPDF();
doc.setFillColor(55, 65, 81); // gray-700
doc.rect(0, 0, 210, 25, 'F');
doc.setFont('helvetica', 'bold');
doc.setFontSize(20);
doc.setTextColor(255, 255, 255);
doc.text('Workflow Automation Report', 15, 16);
let yPos = 35;
workflows.forEach(w => {
if (yPos > 260) {
doc.addPage();
yPos = 15;
}
doc.setFontSize(14);
doc.setTextColor(20, 184, 166); // teal-500
doc.text(w.name, 15, yPos);
doc.setFontSize(10);
doc.setTextColor(107, 114, 128);
doc.text(`Status: ${w.active ? 'Active' : 'Inactive'}`, 150, yPos);
yPos += 2;
doc.setDrawColor(229, 231, 235);
doc.line(15, yPos, 195, yPos);
yPos += 8;
const tableData = w.steps.map((step, index) => [
`Step ${index + 1}`,
step.type.charAt(0).toUpperCase() + step.type.slice(1),
step.name
]);
doc.autoTable({
startY: yPos,
head: [['#', 'Type', 'Task']],
body: tableData,
theme: 'grid',
headStyles: { fillColor: '#f3f4f6', textColor: '#1f2937' }
});
yPos = doc.autoTable.previous.finalY + 15;
});
doc.save('Workflow-Automation-Report.pdf');
});
// --- Initialization ---
loadSampleData();
stepTypeSelect.dispatchEvent(new Event('change'));
updateNavButtonsVisibility();
});
