Go to the "Data Configuration" tab to define your eviction process steps and phases.
';
}
}
// --- Config Render & Management Functions ---
function populatePhaseDropdowns() {
stepPhaseSelect.innerHTML = '';
if (phases.length === 0) {
stepPhaseSelect.innerHTML = '
';
return;
}
phases.forEach(phase => {
const option = new Option(phase.title, phase.id);
stepPhaseSelect.appendChild(option);
});
}
function renderPhaseConfigTable() {
phaseTableBody.innerHTML = '';
phases.forEach(phase => {
const stepCount = steps.filter(s => s.phaseId === phase.id).length;
const row = document.createElement('tr');
row.innerHTML = `
${phase.title} |
${stepCount} |
|
`;
phaseTableBody.appendChild(row);
});
// Add option to add a new phase dynamically
const newRow = document.createElement('tr');
newRow.innerHTML = `
|
N/A |
|
`;
phaseTableBody.appendChild(newRow);
}
window.addPhase = () => {
const titleInput = document.getElementById('new-phase-title');
const title = titleInput.value.trim();
if (title) {
phases.push({ id: `phase_${Date.now()}`, title: title });
renderPhaseConfigTable();
populatePhaseDropdowns();
renderFlowchart();
} else {
alert('Please enter a title for the new phase.');
}
};
window.deletePhase = (id) => {
if (confirm('Are you sure you want to delete this phase? All associated steps will be removed.')) {
phases = phases.filter(p => p.id !== id);
steps = steps.filter(s => s.phaseId !== id);
renderPhaseConfigTable();
renderStepConfigTable();
populatePhaseDropdowns();
renderFlowchart();
}
};
function renderStepConfigTable() {
stepTableBody.innerHTML = '';
// Sort steps by phase order then step ID
const sortedSteps = steps.map(s => {
const phase = phases.find(p => p.id === s.phaseId);
return { ...s, phaseTitle: phase ? phase.title : 'Unassigned', phaseOrder: phases.indexOf(phase) };
}).sort((a, b) => {
if (a.phaseOrder !== b.phaseOrder) return a.phaseOrder - b.phaseOrder;
return a.id.localeCompare(b.id);
});
sortedSteps.forEach(step => {
const row = document.createElement('tr');
row.innerHTML = `
${step.phaseTitle} |
${step.description} |
${step.days} |
${step.responsibility} |
|
`;
stepTableBody.appendChild(row);
});
renderFlowchart();
}
function resetStepForm() {
stepForm.reset();
stepIdToEditInput.value = '';
stepSaveBtn.textContent = 'Add Step';
stepSaveBtn.style.backgroundColor = 'var(--success-color)';
stepDaysInput.value = 1;
}
window.editStep = (id) => {
const step = steps.find(s => s.id === id);
if (step) {
stepIdToEditInput.value = step.id;
stepDescriptionInput.value = step.description;
stepPhaseSelect.value = step.phaseId;
stepResponsibilitySelect.value = step.responsibility;
stepDaysInput.value = step.days;
stepSaveBtn.textContent = 'Update Step';
stepSaveBtn.style.backgroundColor = 'var(--primary-color)';
stepForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
};
function handleSaveStep(e) {
e.preventDefault();
const stepData = {
id: stepIdToEditInput.value || `step_${Date.now()}`,
phaseId: stepPhaseSelect.value,
description: stepDescriptionInput.value,
responsibility: stepResponsibilitySelect.value,
days: parseInt(stepDaysInput.value, 10)
};
if (stepIdToEditInput.value) {
// Update existing
const index = steps.findIndex(s => s.id === stepIdToEditInput.value);
if (index !== -1) {
steps[index] = stepData;
}
} else {
// Add new
steps.push(stepData);
}
renderStepConfigTable();
resetStepForm();
}
window.deleteStep = (id) => {
if (confirm('Are you sure you want to delete this step?')) {
steps = steps.filter(s => s.id !== id);
renderStepConfigTable();
if (stepIdToEditInput.value === id) {
resetStepForm();
}
}
};
// --- PDF Functions ---
function downloadPDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'pt', 'a4');
const finalY = 70; // Starting Y coordinate
doc.setFontSize(20);
doc.text("Eviction Process Report", 30, 40);
const totalDays = steps.reduce((sum, s) => sum + s.days, 0);
doc.setFontSize(12);
doc.text(`Total Estimated Minimum Days: ${totalDays}`, 30, 60);
let tableData = [];
let cumulativeDays = 0;
phases.forEach(phase => {
const stepsInPhase = steps.filter(step => step.phaseId === phase.id).sort((a, b) => a.id.localeCompare(b.id));
if (stepsInPhase.length > 0) {
// Add Phase Header Row
tableData.push([
{ content: phase.title.toUpperCase(), colSpan: 4, styles: { fillColor: [0, 123, 255], textColor: 255, fontStyle: 'bold' } }
]);
// Add steps
stepsInPhase.forEach(step => {
cumulativeDays += step.days;
tableData.push([
step.description,
step.responsibility,
`${step.days} day(s)`,
cumulativeDays
]);
});
}
});
doc.autoTable({
startY: finalY,
head: [['Action/Description', 'Responsibility', 'Days', 'Cumulative Days']],
body: tableData,
theme: 'grid',
headStyles: { fillColor: [108, 117, 125], fontStyle: 'bold' },
columnStyles: {
2: { cellWidth: 70, halign: 'center' },
3: { cellWidth: 70, halign: 'center', fillColor: [240, 248, 255] }
}
});
doc.save('eviction-process-report.pdf');
}
// --- Tab Navigation ---
function switchTab(tabIndex) {
tabs.forEach((tab, index) => {
tab.classList.toggle('active', index === tabIndex);
contents[index].classList.toggle('active', index === tabIndex);
});
currentTab = tabIndex;
updateNavButtons();
}
function updateNavButtons() {
prevBtn.disabled = currentTab === 0;
nextBtn.disabled = currentTab === tabs.length - 1;
}
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => switchTab(index));
});
nextBtn.addEventListener('click', () => { if (currentTab < tabs.length - 1) switchTab(currentTab + 1); });
prevBtn.addEventListener('click', () => { if (currentTab > 0) switchTab(currentTab - 1); });
// --- Event Listeners ---
stepForm.addEventListener('submit', handleSaveStep);
pdfDownloadBtn.addEventListener('click', downloadPDF);
// --- Initial Setup ---
populateDefaultData();
populatePhaseDropdowns();
renderPhaseConfigTable();
renderStepConfigTable();
updateNavButtons();
});
