Skip to content

Instantly share code, notes, and snippets.

@PaulisMatrix
Created December 12, 2025 06:26
Show Gist options
  • Select an option

  • Save PaulisMatrix/8c8507af1899a05f9b0cfbcae60b8d7c to your computer and use it in GitHub Desktop.

Select an option

Save PaulisMatrix/8c8507af1899a05f9b0cfbcae60b8d7c to your computer and use it in GitHub Desktop.
topup decision tree
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TOP-UP SOP Decision Tree</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
padding: 20px;
color: #e0e0e0;
}
h1 {
text-align: center;
color: #00d4ff;
margin-bottom: 30px;
font-size: 2.5em;
text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}
.legend {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.legend-box {
width: 20px;
height: 20px;
border-radius: 4px;
}
.legend-start { background: #00d4ff; }
.legend-decision { background: #ffd700; }
.legend-sop { background: #00ff88; }
.legend-agent { background: #ff6b6b; }
.legend-info { background: #a78bfa; }
.tree-container {
max-width: 1400px;
margin: 0 auto;
}
.section {
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 25px;
margin-bottom: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.section-title {
font-size: 1.5em;
color: #ffd700;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}
.flow-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.node {
padding: 15px 25px;
border-radius: 12px;
text-align: center;
font-weight: 500;
max-width: 400px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.2s, box-shadow 0.2s;
}
.node:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.start-node {
background: linear-gradient(135deg, #00d4ff, #0099cc);
color: #000;
font-weight: 700;
}
.decision-node {
background: linear-gradient(135deg, #ffd700, #ffb800);
color: #000;
border-radius: 12px;
clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
padding: 20px 40px;
}
.sop-node {
background: linear-gradient(135deg, #00ff88, #00cc6a);
color: #000;
}
.agent-node {
background: linear-gradient(135deg, #ff6b6b, #ee5555);
color: #fff;
}
.info-node {
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: #fff;
}
.arrow {
width: 2px;
height: 30px;
background: #666;
position: relative;
}
.arrow::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid #666;
}
.branch-container {
display: flex;
gap: 50px;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
}
.branch {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.branch-label {
background: rgba(255, 255, 255, 0.1);
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
color: #aaa;
margin-bottom: 5px;
}
.yes-label { color: #00ff88; border: 1px solid #00ff88; }
.no-label { color: #ff6b6b; border: 1px solid #ff6b6b; }
.horizontal-flow {
display: flex;
align-items: flex-start;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.horizontal-arrow {
width: 40px;
height: 2px;
background: #666;
align-self: center;
position: relative;
}
.horizontal-arrow::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 10px solid #666;
}
.sub-section {
background: rgba(0, 0, 0, 0.2);
border-radius: 12px;
padding: 20px;
margin: 15px 0;
}
.sub-title {
color: #00d4ff;
font-size: 1.1em;
margin-bottom: 15px;
}
.condition-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.condition-table th,
.condition-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.condition-table th {
background: rgba(0, 212, 255, 0.2);
color: #00d4ff;
font-weight: 600;
}
.condition-table tr:hover {
background: rgba(255, 255, 255, 0.05);
}
.sop-tag {
display: inline-block;
background: rgba(0, 255, 136, 0.2);
color: #00ff88;
padding: 4px 10px;
border-radius: 6px;
font-family: monospace;
font-size: 12px;
}
.agent-tag {
display: inline-block;
background: rgba(255, 107, 107, 0.2);
color: #ff6b6b;
padding: 4px 10px;
border-radius: 6px;
font-family: monospace;
font-size: 12px;
}
.warning-box {
background: rgba(255, 107, 107, 0.1);
border-left: 4px solid #ff6b6b;
padding: 15px;
margin: 15px 0;
border-radius: 0 8px 8px 0;
}
.warning-box strong {
color: #ff6b6b;
}
.info-box {
background: rgba(0, 212, 255, 0.1);
border-left: 4px solid #00d4ff;
padding: 15px;
margin: 15px 0;
border-radius: 0 8px 8px 0;
}
.time-badge {
display: inline-block;
background: rgba(167, 139, 250, 0.2);
color: #a78bfa;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
margin-right: 5px;
}
.flowchart-wrapper {
overflow-x: auto;
padding: 20px 0;
}
@media (max-width: 768px) {
.branch-container {
flex-direction: column;
gap: 20px;
}
.horizontal-flow {
flex-direction: column;
}
.horizontal-arrow {
width: 2px;
height: 30px;
}
.horizontal-arrow::after {
right: 50%;
top: auto;
bottom: 0;
transform: translateX(50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid #666;
border-bottom: none;
}
}
</style>
</head>
<body>
<h1>🔝 TOP-UP SOP Decision Tree</h1>
<div class="legend">
<div class="legend-item">
<div class="legend-box legend-start"></div>
<span>Start/Entry Point</span>
</div>
<div class="legend-item">
<div class="legend-box legend-decision"></div>
<span>Decision Point</span>
</div>
<div class="legend-item">
<div class="legend-box legend-sop"></div>
<span>SOP Response</span>
</div>
<div class="legend-item">
<div class="legend-box legend-agent"></div>
<span>Agent Transfer</span>
</div>
<div class="legend-item">
<div class="legend-box legend-info"></div>
<span>Provide Info</span>
</div>
</div>
<div class="tree-container">
<!-- SECTION 1: FIRST TURN -->
<div class="section">
<h2 class="section-title">🔴 STEP 1: First Turn Check (No previous_sop)</h2>
<div class="warning-box">
<strong>⛔ CRITICAL RULE:</strong> On FIRST message, if orders exist (≥1), ALWAYS ask which order first!
Do NOT route by status, issue type, or timing on first turn!
</div>
<div class="flowchart-wrapper">
<div class="flow-container">
<div class="node start-node">START: User Query About Top-Up</div>
<div class="arrow"></div>
<div class="node decision-node">total_order_records?</div>
<div class="branch-container">
<!-- Branch: 0 Orders -->
<div class="branch">
<span class="branch-label no-label">= 0 (No Orders)</span>
<div class="arrow"></div>
<div class="node decision-node">User mentions timing?</div>
<div class="branch-container">
<div class="branch">
<span class="branch-label">< 48h ago</span>
<div class="arrow"></div>
<div class="node info-node">TOPUP_ORDER_RECORD_NO_MATCH_LESS_THAN_48H</div>
</div>
<div class="branch">
<span class="branch-label">≥ 48h ago</span>
<div class="arrow"></div>
<div class="node agent-node">TOPUP_ORDER_RECORD_NO_MATCH_MORE_THAN_48H</div>
</div>
<div class="branch">
<span class="branch-label">No timing</span>
<div class="arrow"></div>
<div class="node sop-node">TOPUP_ORDER_RECORD_EMPTY<br><small>(Ask for timing)</small></div>
</div>
</div>
</div>
<!-- Branch: ≥1 Orders -->
<div class="branch">
<span class="branch-label yes-label">≥ 1 (Orders Exist)</span>
<div class="arrow"></div>
<div class="node decision-node">User provides matching Order ID?</div>
<div class="branch-container">
<div class="branch">
<span class="branch-label yes-label">YES + Vague Issue</span>
<div class="arrow"></div>
<div class="node sop-node">TOPUP_ISSUE_CLARIFICATION_RESPONSE</div>
</div>
<div class="branch">
<span class="branch-label yes-label">YES + Clear Issue</span>
<div class="arrow"></div>
<div class="node info-node">→ Route by Issue Type<br><small>(Go to Status Routing)</small></div>
</div>
<div class="branch">
<span class="branch-label no-label">NO</span>
<div class="arrow"></div>
<div class="node sop-node">TOPUP_ASK_WHICH_ORDER<br><small>(Show transaction list)</small></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 2: LIST SELECTION RESPONSE -->
<div class="section">
<h2 class="section-title">📋 STEP 2: After Showing Transaction List</h2>
<p style="color: #aaa; margin-bottom: 20px;">Previous SOP = TOPUP_ASK_WHICH_ORDER</p>
<div class="flowchart-wrapper">
<div class="flow-container">
<div class="node start-node">User Response to List</div>
<div class="arrow"></div>
<div class="node decision-node">What did user respond?</div>
<div class="branch-container">
<div class="branch">
<span class="branch-label yes-label">Selected # (1, 2, 3...)</span>
<div class="arrow"></div>
<div class="node info-node">Match Transaction<br>→ Go to Status Routing</div>
</div>
<div class="branch">
<span class="branch-label no-label">"Not in list" / "Bukan"</span>
<div class="arrow"></div>
<div class="node sop-node">TOPUP_NOT_IN_LIST_RESPONSE<br><small>(Ask when they topped up)</small></div>
</div>
<div class="branch">
<span class="branch-label">Vague/Other</span>
<div class="arrow"></div>
<div class="node sop-node">Re-prompt TOPUP_ASK_WHICH_ORDER</div>
</div>
</div>
</div>
</div>
<div class="sub-section">
<h3 class="sub-title">After "Not in List" → User Provides Timing</h3>
<table class="condition-table">
<tr>
<th>User's Timing Response</th>
<th>Example Phrases</th>
<th>SOP</th>
</tr>
<tr>
<td><span class="time-badge">< 48 hours</span></td>
<td>"today", "tadi", "barusan", "kemarin", "this morning"</td>
<td><span class="sop-tag">TOPUP_ORDER_RECORD_NO_MATCH_LESS_THAN_48H</span></td>
</tr>
<tr>
<td><span class="time-badge">≥ 48 hours</span></td>
<td>"3 hari lalu", "seminggu", "last week", "few days ago"</td>
<td><span class="agent-tag">TOPUP_ORDER_RECORD_NO_MATCH_MORE_THAN_48H</span></td>
</tr>
<tr>
<td><span class="time-badge">Unclear</span></td>
<td>No timing mentioned</td>
<td><span class="sop-tag">Re-ask TOPUP_NOT_IN_LIST_RESPONSE</span></td>
</tr>
</table>
</div>
</div>
<!-- SECTION 3: STATUS ROUTING -->
<div class="section">
<h2 class="section-title">🔀 STEP 3: Route by Order Status (After Transaction Confirmed)</h2>
<div class="flowchart-wrapper">
<div class="flow-container">
<div class="node start-node">Transaction Confirmed by User</div>
<div class="arrow"></div>
<div class="node decision-node">order_status?</div>
<div class="branch-container">
<div class="branch">
<span class="branch-label" style="background: rgba(255, 165, 0, 0.2); color: orange;">IN_PROGRESS</span>
<div class="arrow"></div>
<div class="node info-node">→ See Time-Based Routing Below</div>
</div>
<div class="branch">
<span class="branch-label" style="background: rgba(0, 255, 136, 0.2); color: #00ff88;">SUCCESSFUL</span>
<div class="arrow"></div>
<div class="node info-node">→ See Issue-Based Routing Below</div>
</div>
<div class="branch">
<span class="branch-label" style="background: rgba(255, 107, 107, 0.2); color: #ff6b6b;">CANCELLED</span>
<div class="arrow"></div>
<div class="node info-node">TOPUP_CANCELLED</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 3A: IN_PROGRESS TIME ROUTING -->
<div class="section">
<h2 class="section-title">⏱️ IN_PROGRESS: Time-Based Routing</h2>
<div class="warning-box">
<strong>⚠️ IMPORTANT:</strong> Use order_time_elapsed_in_hours from DATA, not user's words!
</div>
<div class="flowchart-wrapper">
<div class="flow-container">
<div class="node start-node">order_status = IN_PROGRESS</div>
<div class="arrow"></div>
<div class="node decision-node">order_time_elapsed_in_hours?</div>
<div class="branch-container">
<div class="branch">
<span class="branch-label" style="color: #00ff88;">< 2 hours</span>
<div class="arrow"></div>
<div class="node info-node">TOPUP_IN_PROGRESS_LESS_THAN_2_HOURS<br><small>"Still processing, usually ~2h"</small></div>
</div>
<div class="branch">
<span class="branch-label" style="color: #ffd700;">2-48 hours</span>
<div class="arrow"></div>
<div class="node info-node">TOPUP_IN_PROGRESS_DELAYED_2_TO_48_HOURS<br><small>"Still processing, bank reconciliation"</small></div>
</div>
<div class="branch">
<span class="branch-label" style="color: #ff6b6b;">≥ 48 hours</span>
<div class="arrow"></div>
<div class="node decision-node">Check order_channel_type</div>
<div class="branch-container" style="margin-top: 10px;">
<div class="branch">
<span class="branch-label">Major Banks<br><small>BCA, BNI, Mandiri, Prima, Permata</small></span>
<div class="arrow"></div>
<div class="node agent-node">TYPE_A<br><small>"Refund in 7 days if fails"</small></div>
</div>
<div class="branch">
<span class="branch-label">Other Channels</span>
<div class="arrow"></div>
<div class="node agent-node">TYPE_B<br><small>"Connect to agent"</small></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 3B: SUCCESSFUL ISSUE ROUTING -->
<div class="section">
<h2 class="section-title">✅ SUCCESSFUL: Issue-Based Routing</h2>
<div class="flowchart-wrapper">
<div class="flow-container">
<div class="node start-node">order_status = SUCCESSFUL</div>
<div class="arrow"></div>
<div class="node decision-node">What is user's stated issue?</div>
</div>
</div>
<table class="condition-table">
<tr>
<th>Issue Category</th>
<th>Trigger Phrases</th>
<th>SOP</th>
</tr>
<tr>
<td><strong>💰 Money Not Received</strong></td>
<td>"belum masuk", "saldo ga nambah", "ga masuk", "not reflecting"</td>
<td><span class="sop-tag">TOPUP_SUCCESSFUL_MONEY_NOT_RECEIVED</span></td>
</tr>
<tr>
<td><strong>💸 Admin Fee Complaint</strong></td>
<td>"kurang", "dipotong", "ada biaya", "potongan", "less than sent"</td>
<td><span class="sop-tag">TOPUP_SUCCESSFUL_ADMIN_FEE_COMPLAINT_THIRD_PARTY_PAYMENT_APP</span></td>
</tr>
<tr>
<td><strong>❌ Wrong Destination</strong></td>
<td>"salah rekening", "salah nomor", "wrong account", "salah kirim"</td>
<td><span class="sop-tag">TOPUP_SUCCESSFUL_INCORRECT_AMOUNT_OR_WRONG_DESTINATION</span></td>
</tr>
<tr>
<td><strong>❓ Unknown Transaction</strong></td>
<td>"bukan saya", "tidak dikenal", "gak tau dari siapa", "unauthorized"</td>
<td><span class="sop-tag">TOPUP_SUCCESSFUL_UNKNOWN_TRANSACTION</span></td>
</tr>
<tr>
<td><strong>🤔 Vague Issue</strong></td>
<td>"ada masalah", "there's a problem", "tolong cek", "butuh bantuan"</td>
<td><span class="sop-tag">TOPUP_ISSUE_CLARIFICATION_RESPONSE</span></td>
</tr>
</table>
<div class="sub-section">
<h3 class="sub-title">Money Not Received Follow-up Flow</h3>
<div class="flow-container">
<div class="node sop-node">TOPUP_SUCCESSFUL_MONEY_NOT_RECEIVED<br><small>"Try refreshing your GoPay screen"</small></div>
<div class="arrow"></div>
<div class="node decision-node">User's response after refresh advice?</div>
<div class="branch-container">
<div class="branch">
<span class="branch-label no-label">"Still not received"</span>
<div class="arrow"></div>
<div class="node agent-node">TOPUP_SUCCESSFUL_MONEY_NOT_RECEIVED_AFTER_REFRESH</div>
</div>
<div class="branch">
<span class="branch-label yes-label">"Now received" / Thanks</span>
<div class="arrow"></div>
<div class="node sop-node">CLOSE_CONVERSATION_ASK_FOR_FEEDBACK</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 4: AGENT TRANSFER FLOW -->
<div class="section">
<h2 class="section-title">🤝 Agent Transfer Response Handling</h2>
<p style="color: #aaa; margin-bottom: 20px;">Previous action_type = AGENT_TRANSFER_PROPOSAL</p>
<div class="flowchart-wrapper">
<div class="flow-container">
<div class="node agent-node">Agent Transfer Offered</div>
<div class="arrow"></div>
<div class="node decision-node">User's response?</div>
<div class="branch-container">
<div class="branch">
<span class="branch-label yes-label">Accepts<br><small>"iya", "mau", "yes", "boleh"</small></span>
<div class="arrow"></div>
<div class="node agent-node">AGENT_TRANSFER_CONFIRMATION<br><small>(action_type=AGENT_TRANSFER)</small></div>
</div>
<div class="branch">
<span class="branch-label no-label">Declines<br><small>"tidak", "jangan", "gak mau"</small></span>
<div class="arrow"></div>
<div class="node sop-node">AGENT_TRANSFER_USER_DECLINED</div>
</div>
<div class="branch">
<span class="branch-label">Thanks<br><small>"makasih", "thanks"</small></span>
<div class="arrow"></div>
<div class="node sop-node">CLOSE_CONVERSATION_ASK_FOR_FEEDBACK</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 5: QUICK REFERENCE -->
<div class="section">
<h2 class="section-title">📚 Quick Reference: All SOPs</h2>
<div class="sub-section">
<h3 class="sub-title">Transaction Matching SOPs</h3>
<table class="condition-table">
<tr>
<th>SOP</th>
<th>When to Use</th>
<th>Action</th>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_ASK_WHICH_ORDER</span></td>
<td>total_order_records ≥ 1, no Order ID provided</td>
<td>ASK_CLARIFICATION</td>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_ORDER_RECORD_EMPTY</span></td>
<td>total_order_records = 0, no timing given</td>
<td>ASK_CLARIFICATION</td>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_NOT_IN_LIST_RESPONSE</span></td>
<td>User says their transaction not in list</td>
<td>ASK_CLARIFICATION</td>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_ORDER_RECORD_NO_MATCH_LESS_THAN_48H</span></td>
<td>No match + topped up < 48h ago</td>
<td>PROVIDE_INFO</td>
</tr>
<tr>
<td><span class="agent-tag">TOPUP_ORDER_RECORD_NO_MATCH_MORE_THAN_48H</span></td>
<td>No match + topped up ≥ 48h ago</td>
<td>AGENT_TRANSFER_PROPOSAL</td>
</tr>
</table>
</div>
<div class="sub-section">
<h3 class="sub-title">IN_PROGRESS SOPs</h3>
<table class="condition-table">
<tr>
<th>SOP</th>
<th>Time Condition</th>
<th>Action</th>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_IN_PROGRESS_LESS_THAN_2_HOURS</span></td>
<td>order_time_elapsed_in_hours < 2</td>
<td>PROVIDE_INFO</td>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_IN_PROGRESS_DELAYED_2_TO_48_HOURS</span></td>
<td>2 ≤ hours < 48</td>
<td>PROVIDE_INFO</td>
</tr>
<tr>
<td><span class="agent-tag">TOPUP_IN_PROGRESS_DELAYED_MORE_THAN_48_HOURS_TYPE_A</span></td>
<td>≥ 48h + Major Bank</td>
<td>AGENT_TRANSFER_PROPOSAL</td>
</tr>
<tr>
<td><span class="agent-tag">TOPUP_IN_PROGRESS_DELAYED_MORE_THAN_48_HOURS_TYPE_B</span></td>
<td>≥ 48h + Other Channel</td>
<td>AGENT_TRANSFER_PROPOSAL</td>
</tr>
</table>
</div>
<div class="sub-section">
<h3 class="sub-title">SUCCESSFUL SOPs</h3>
<table class="condition-table">
<tr>
<th>SOP</th>
<th>Issue Type</th>
<th>Action</th>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_SUCCESSFUL_MONEY_NOT_RECEIVED</span></td>
<td>Balance not updated</td>
<td>PROVIDE_INFO</td>
</tr>
<tr>
<td><span class="agent-tag">TOPUP_SUCCESSFUL_MONEY_NOT_RECEIVED_AFTER_REFRESH</span></td>
<td>Still not received after refresh</td>
<td>AGENT_TRANSFER_PROPOSAL</td>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_SUCCESSFUL_ADMIN_FEE_COMPLAINT...</span></td>
<td>Amount less than expected</td>
<td>PROVIDE_INFO</td>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_SUCCESSFUL_INCORRECT_AMOUNT_OR_WRONG_DESTINATION</span></td>
<td>User error (wrong account)</td>
<td>PROVIDE_INFO</td>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_SUCCESSFUL_UNKNOWN_TRANSACTION</span></td>
<td>User doesn't recognize txn</td>
<td>PROVIDE_INFO</td>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_ISSUE_CLARIFICATION_RESPONSE</span></td>
<td>Vague issue description</td>
<td>ASK_CLARIFICATION</td>
</tr>
</table>
</div>
<div class="sub-section">
<h3 class="sub-title">Other SOPs</h3>
<table class="condition-table">
<tr>
<th>SOP</th>
<th>When to Use</th>
<th>Action</th>
</tr>
<tr>
<td><span class="sop-tag">TOPUP_CANCELLED</span></td>
<td>order_status = CANCELLED</td>
<td>PROVIDE_INFO</td>
</tr>
<tr>
<td><span class="sop-tag">HOW_TO_TOPUP</span></td>
<td>User asks how to top-up</td>
<td>PROVIDE_INFO</td>
</tr>
</table>
</div>
</div>
</div>
<footer style="text-align: center; padding: 20px; color: #666; font-size: 12px;">
TOP-UP SOP Decision Tree Visualization | Generated from prompt_modules
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment