Default ROI dashboard inputs to empty placeholders — no pre-filled values

This commit is contained in:
Marty Bostick
2026-07-29 15:36:14 +00:00
parent 485ed974c9
commit c8ac5a62c5
+20 -4
View File
@@ -1343,16 +1343,17 @@
<div class="roi-inputs">
<div class="roi-field">
<label>Total Deposited (out-of-pocket)</label>
<input type="number" id="roiDeposits" value="450" step="10" min="0">
<input type="number" id="roiDeposits" placeholder="e.g. 450" step="10" min="0">
</div>
<div class="roi-field">
<label>Total Earned All Time</label>
<input type="number" id="roiTotalEarned" value="371.33" step="0.01" min="0">
<input type="number" id="roiTotalEarned" placeholder="e.g. 371.33" step="0.01" min="0">
</div>
<div class="roi-field">
<label>Campaign Phase</label>
<select id="roiPhase">
<option value="l4l3" selected>L4 + L3 Hybrid</option>
<option value="" selected disabled>Select your phase...</option>
<option value="l4l3">L4 + L3 Hybrid</option>
<option value="l5l3">L5 + L3 Hybrid</option>
<option value="l6l3">L6 + L3 Hybrid</option>
<option value="l7solo">L7 Solo</option>
@@ -1361,7 +1362,7 @@
</div>
<div class="roi-field">
<label>Cycles Completed This Phase</label>
<input type="number" id="roiCyclesDone" value="0" step="1" min="0">
<input type="number" id="roiCyclesDone" placeholder="e.g. 2" step="1" min="0">
</div>
</div>
@@ -2112,6 +2113,21 @@ function updateROI() {
const phase = document.getElementById('roiPhase').value;
const cyclesDone = parseInt(document.getElementById('roiCyclesDone').value) || 0;
// If no inputs provided, show placeholder state
const hasInput = document.getElementById('roiDeposits').value.trim() !== '' || document.getElementById('roiTotalEarned').value.trim() !== '';
if (!hasInput) {
document.getElementById('roiStatROI').querySelector('.roi-stat-value').textContent = '—';
document.getElementById('roiStatRecouped').querySelector('.roi-stat-value').textContent = '—';
document.getElementById('roiStatRemaining').querySelector('.roi-stat-value').textContent = '—';
document.getElementById('roiBarROI').style.width = '0%';
document.getElementById('roiStatPhase').querySelector('.roi-stat-value').textContent = '—';
document.getElementById('roiBarPhase').style.width = '0%';
document.querySelectorAll('.roi-ladder-step').forEach(el => el.classList.remove('active', 'passed'));
document.getElementById('roiMilestones').innerHTML = '<div style="color:var(--text-muted);font-size:0.85rem;padding:10px 0;">Enter your numbers above to see your progress 🚀</div>';
return;
}
// Phase data: [cycles_this_phase, cycles_needed_for_next, profit_per_cycle, next_phase_label]
const PHASE_DATA = {
l4l3: { cycles: 5, profitPer: 133.20, nextLabel: 'L5+L3', needsCapital: 660 },