further refinement of roi calculator
This commit is contained in:
parent
6f6c80480f
commit
493d45bb5d
SSH key fingerprint:
SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
6 changed files with 962 additions and 565 deletions
|
|
@ -40,449 +40,275 @@ function toggleCollapsible(elementId) { window.ROICalculatorApp?.toggleCollapsib
|
|||
function resetCalculator() { window.ROICalculatorApp?.resetCalculator(); }
|
||||
function toggleInvestmentModel() { window.ROICalculatorApp?.toggleInvestmentModel(); }
|
||||
function logout() { window.ROICalculatorApp?.logout(); }
|
||||
|
||||
// Manual toggle functions for collapse elements
|
||||
function toggleAdvancedControls() {
|
||||
const element = document.getElementById('advancedControls');
|
||||
const button = document.getElementById('advancedToggleBtn');
|
||||
|
||||
console.log('Toggling advanced controls, current classes:', element.className);
|
||||
|
||||
if (element.style.display === 'none' || element.style.display === '') {
|
||||
element.style.display = 'block';
|
||||
button.innerHTML = '<i class="bi bi-gear"></i> Less';
|
||||
console.log('Showing advanced controls');
|
||||
} else {
|
||||
element.style.display = 'none';
|
||||
button.innerHTML = '<i class="bi bi-gear"></i> More';
|
||||
console.log('Hiding advanced controls');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDataCollapse() {
|
||||
const element = document.getElementById('dataCollapse');
|
||||
const button = document.getElementById('dataToggleBtn');
|
||||
|
||||
console.log('Toggling data collapse, current style:', element.style.display);
|
||||
|
||||
if (element.style.display === 'none' || element.style.display === '') {
|
||||
element.style.display = 'block';
|
||||
button.classList.remove('collapsed');
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
console.log('Showing data collapse');
|
||||
} else {
|
||||
element.style.display = 'none';
|
||||
button.classList.add('collapsed');
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
console.log('Hiding data collapse');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize collapse states
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Ensure both sections start collapsed
|
||||
const advancedControls = document.getElementById('advancedControls');
|
||||
const dataCollapse = document.getElementById('dataCollapse');
|
||||
|
||||
if (advancedControls) {
|
||||
advancedControls.style.display = 'none';
|
||||
}
|
||||
if (dataCollapse) {
|
||||
dataCollapse.style.display = 'none';
|
||||
}
|
||||
|
||||
console.log('Collapse elements initialized as hidden');
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid my-4">
|
||||
<div class="row">
|
||||
<!-- Header -->
|
||||
<div class="col-12 mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h1 class="h2 mb-1">CSP ROI Calculator</h1>
|
||||
<p class="text-muted">Calculate potential returns from investing in Servala platform</p>
|
||||
<div class="container-fluid p-0" style="min-height: 100vh;">
|
||||
<!-- Minimal Header with Controls -->
|
||||
<div class="bg-light border-bottom sticky-top" style="z-index: 1030;">
|
||||
<div class="container-fluid">
|
||||
<!-- Title Row -->
|
||||
<div class="row py-2 border-bottom">
|
||||
<div class="col-md-6">
|
||||
<h4 class="mb-0">CSP ROI Calculator</h4>
|
||||
<small class="text-muted">Real-time investment analysis</small>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Export Buttons -->
|
||||
<button type="button" class="btn btn-outline-primary btn-sm me-2" onclick="exportToPDF()">
|
||||
<div class="col-md-6 text-end">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary me-1" onclick="exportToPDF()">
|
||||
<i class="bi bi-file-pdf"></i> PDF
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-success btn-sm me-2" onclick="exportToCSV()">
|
||||
<button type="button" class="btn btn-sm btn-outline-success me-1" onclick="exportToCSV()">
|
||||
<i class="bi bi-file-csv"></i> CSV
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary me-2" onclick="resetCalculator()">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary me-1" onclick="resetCalculator()">
|
||||
<i class="bi bi-arrow-clockwise"></i> Reset
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" onclick="logout()">
|
||||
<button type="button" class="btn btn-sm btn-danger" onclick="logout()">
|
||||
<i class="bi bi-box-arrow-right"></i> Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Input Panel -->
|
||||
<div class="col-lg-4">
|
||||
<!-- Help Section -->
|
||||
<div class="collapsible-section mb-3">
|
||||
<div class="collapsible-header" onclick="toggleCollapsible('help-section')">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-question-circle"></i> How the Calculator Works
|
||||
<i class="bi bi-chevron-down float-end"></i>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="collapsible-content" id="help-section">
|
||||
<div class="help-content">
|
||||
<h6 class="text-primary mb-2"><i class="bi bi-lightbulb"></i> Calculator Overview</h6>
|
||||
<p class="small">This ROI calculator models your investment in the Servala platform with two distinct approaches. Choose between guaranteed fixed returns through lending, or performance-based returns through direct investment that rewards your sales capabilities.</p>
|
||||
|
||||
<h6 class="text-primary mb-2 mt-3"><i class="bi bi-gear"></i> Key Parameters</h6>
|
||||
<div class="small">
|
||||
<p><strong>Investment Model:</strong> Loan (3-7% fixed returns) vs Direct Investment (15-40% performance-based returns).</p>
|
||||
<p><strong>Investment Amount:</strong> Higher amounts unlock progressive scaling benefits - 500k = 1.0x, 1M = 1.5x, 2M = 2.0x performance.</p>
|
||||
<p><strong>Dynamic Grace Period:</strong> Larger investments get longer 100% revenue retention (6+ months based on investment size).</p>
|
||||
<p><strong>Performance Bonuses:</strong> Direct Investment CSPs earn up to 15% additional revenue share for exceeding sales targets.</p>
|
||||
<p><strong>Monthly Revenue per Instance:</strong> Recurring revenue from managed services (typically CHF 50-200 per instance).</p>
|
||||
</div>
|
||||
|
||||
<h6 class="text-primary mb-2 mt-3"><i class="bi bi-graph-up"></i> Investment Models</h6>
|
||||
<div class="small">
|
||||
<p><strong>Loan Model:</strong> Lend capital at fixed interest (3-7% annually). Predictable monthly payments, lower risk, but capped returns.</p>
|
||||
<p><strong>Direct Investment:</strong> Invest in operations with revenue sharing. Progressive scaling, performance bonuses, and extended grace periods reward larger investments and active sales participation.</p>
|
||||
</div>
|
||||
|
||||
<h6 class="text-primary mb-2 mt-3"><i class="bi bi-graph-up"></i> Growth Scenarios</h6>
|
||||
<div class="small">
|
||||
<p><strong>Conservative:</strong> Steady growth with low churn (2%), suitable for established markets.</p>
|
||||
<p><strong>Moderate:</strong> Balanced growth with moderate churn (3%), typical for competitive markets.</p>
|
||||
<p><strong>Aggressive:</strong> Rapid expansion with higher churn (5%), for high-growth strategies.</p>
|
||||
<p>Each scenario has 4 growth phases with customizable instance acquisition rates in Advanced Parameters.</p>
|
||||
</div>
|
||||
|
||||
<h6 class="text-primary mb-2 mt-3"><i class="bi bi-bullseye"></i> Understanding Results</h6>
|
||||
<div class="small">
|
||||
<p><strong>Net Position:</strong> Your financial position after accounting for initial investment (above zero = profitable).</p>
|
||||
<p><strong>ROI Progression:</strong> How your returns develop over time - shows when investment becomes profitable.</p>
|
||||
<p><strong>Performance Multiplier:</strong> How much your actual results exceed baseline expectations (1.0x = baseline, 1.5x = 50% better).</p>
|
||||
<p><strong>Model Comparison:</strong> Direct side-by-side comparison of loan vs direct investment returns for your specific scenario.</p>
|
||||
<p><strong>Investment Scaling:</strong> Larger investments unlock operational advantages - better customer acquisition and retention capabilities.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Investment Settings -->
|
||||
<div class="calculator-section">
|
||||
<h4><i class="bi bi-cash-coin"></i> Investment Settings</h4>
|
||||
|
||||
<div class="input-group-custom">
|
||||
<label for="investment-amount">
|
||||
Investment Amount
|
||||
<i class="bi bi-question-circle-fill text-muted ms-1"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Higher investments enable better growth through increased marketing, infrastructure, and customer success capabilities."
|
||||
style="cursor: help; font-size: 0.8rem;"></i>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text currency-symbol">CHF</span>
|
||||
|
||||
<!-- Compact Controls Row -->
|
||||
<div class="row py-3">
|
||||
<!-- Core Investment Parameters -->
|
||||
<div class="col-lg-2 col-md-3 mb-2">
|
||||
<label class="form-label small fw-semibold mb-1">Investment</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text">CHF</span>
|
||||
<input type="text" class="form-control" id="investment-amount"
|
||||
data-value="500000" value="500,000"
|
||||
data-value="500000" value="500,000"
|
||||
oninput="handleInvestmentAmountInput(this)"
|
||||
onchange="updateCalculations()">
|
||||
</div>
|
||||
<div class="slider-container">
|
||||
<input type="range" class="slider" id="investment-slider"
|
||||
min="100000" max="2000000" step="10000" value="500000"
|
||||
onchange="updateInvestmentAmount(this.value)">
|
||||
</div>
|
||||
<small class="text-muted">CHF 100,000 - CHF 2,000,000</small>
|
||||
|
||||
<!-- Investment Impact Details -->
|
||||
<div class="collapsible-section mt-2">
|
||||
<div class="collapsible-header" onclick="toggleCollapsible('investment-impact')" style="padding: 0.5rem; font-size: 0.9rem;">
|
||||
<h6 class="mb-0">
|
||||
<i class="bi bi-info-circle"></i> Investment Impact
|
||||
<i class="bi bi-chevron-down float-end"></i>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="collapsible-content" id="investment-impact" style="padding: 0.75rem; font-size: 0.85rem;">
|
||||
<p class="mb-2"><strong>How Investment Amount Affects Growth</strong></p>
|
||||
<p class="mb-2">Higher investments enable better growth through increased marketing, infrastructure, and customer success capabilities. This affects instance acquisition rates and reduces churn.</p>
|
||||
|
||||
<p class="mb-2"><strong>Mathematical Impact</strong></p>
|
||||
<ul class="mb-2" style="font-size: 0.8rem;">
|
||||
<li><strong>Instance Scaling Factor</strong> = √(Investment Amount / CHF 500,000)</li>
|
||||
<li><strong>Churn Reduction Factor</strong> = max(0.7, 1 - (Investment - CHF 500,000) / CHF 2,000,000 × 0.3)</li>
|
||||
<li><strong>New Instances per Month</strong> = Base Rate × Scaling Factor</li>
|
||||
<li><strong>Adjusted Churn Rate</strong> = Base Churn × Reduction Factor</li>
|
||||
</ul>
|
||||
|
||||
<p class="mb-0 text-info" style="font-size: 0.8rem;"><strong>Example:</strong> CHF 1M investment = 1.41× more instances + 25% lower churn than CHF 500K base.</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="range" class="form-range mt-1" id="investment-slider"
|
||||
min="100000" max="2000000" step="50000" value="500000"
|
||||
onchange="updateInvestmentAmount(this.value)">
|
||||
</div>
|
||||
|
||||
<div class="input-group-custom">
|
||||
<label for="timeframe">Investment Timeframe (Years)</label>
|
||||
<select class="form-select" id="timeframe" onchange="updateCalculations()">
|
||||
<option value="1">1 Year</option>
|
||||
<option value="2">2 Years</option>
|
||||
<option value="3" selected>3 Years</option>
|
||||
<option value="4">4 Years</option>
|
||||
<option value="5">5 Years</option>
|
||||
|
||||
<div class="col-lg-1 col-md-2 mb-2">
|
||||
<label class="form-label small fw-semibold mb-1">Years</label>
|
||||
<select class="form-select form-select-sm" id="timeframe" onchange="updateCalculations()">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3" selected>3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Investment Model Selection -->
|
||||
<div class="input-group-custom">
|
||||
<label class="form-label">
|
||||
Investment Model
|
||||
<i class="bi bi-question-circle-fill text-muted ms-1"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Loan Model: 3-7% guaranteed annual returns with predictable monthly payments. Direct Investment: 15-40% potential returns with progressive scaling, performance bonuses, and extended grace periods."
|
||||
style="cursor: help; font-size: 0.8rem;"></i>
|
||||
</label>
|
||||
|
||||
<!-- Investment Model -->
|
||||
<div class="col-lg-2 col-md-3 mb-2">
|
||||
<label class="form-label small fw-semibold mb-1">Model</label>
|
||||
<div class="btn-group w-100" role="group">
|
||||
<input type="radio" class="btn-check" name="investment-model" id="loan-model" value="loan" onchange="toggleInvestmentModel()">
|
||||
<label class="btn btn-outline-warning" for="loan-model">
|
||||
<i class="bi bi-bank"></i> Loan Model (3-7%)
|
||||
</label>
|
||||
<label class="btn btn-outline-warning btn-sm" for="loan-model">Loan</label>
|
||||
<input type="radio" class="btn-check" name="investment-model" id="direct-model" value="direct" checked onchange="toggleInvestmentModel()">
|
||||
<label class="btn btn-outline-success" for="direct-model">
|
||||
<i class="bi bi-rocket"></i> Direct Investment (15-40%)
|
||||
</label>
|
||||
<label class="btn btn-outline-success btn-sm" for="direct-model">Direct</label>
|
||||
</div>
|
||||
<small class="text-muted mt-1">
|
||||
<span id="model-description">Direct Investment: Performance-based returns with progressive scaling, bonuses up to 15%, and dynamic grace periods</span>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Loan Interest Rate (conditional) -->
|
||||
<div class="input-group-custom" id="loan-rate-section" style="display: none;">
|
||||
<label for="loan-interest-rate">
|
||||
Annual Loan Interest Rate (%)
|
||||
<i class="bi bi-question-circle-fill text-muted ms-1"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Fixed annual interest rate you receive on the loan to Servala. Provides guaranteed monthly payments but limits upside potential."
|
||||
style="cursor: help; font-size: 0.8rem;"></i>
|
||||
</label>
|
||||
<input type="number" class="form-control" id="loan-interest-rate"
|
||||
min="3" max="8" step="0.1" value="5.0"
|
||||
onchange="updateCalculations()">
|
||||
<div class="slider-container">
|
||||
<input type="range" class="slider" id="loan-rate-slider"
|
||||
min="3" max="8" step="0.1" value="5.0"
|
||||
onchange="updateLoanRate(this.value)">
|
||||
</div>
|
||||
<small class="text-muted">3% - 8% annual (fixed monthly payments)</small>
|
||||
</div>
|
||||
|
||||
<div class="input-group-custom">
|
||||
<label for="revenue-per-instance">Monthly Revenue per Instance</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text currency-symbol">CHF</span>
|
||||
|
||||
<!-- Revenue/Instance -->
|
||||
<div class="col-lg-1 col-md-2 mb-2">
|
||||
<label class="form-label small fw-semibold mb-1">Revenue</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="number" class="form-control" id="revenue-per-instance"
|
||||
min="20" max="200" step="5" value="50"
|
||||
onchange="updateCalculations()">
|
||||
min="20" max="200" step="5" value="50" onchange="updateCalculations()">
|
||||
<span class="input-group-text">CHF</span>
|
||||
</div>
|
||||
<div class="slider-container">
|
||||
<input type="range" class="slider" id="revenue-slider"
|
||||
min="20" max="200" step="5" value="50"
|
||||
onchange="updateRevenuePerInstance(this.value)">
|
||||
</div>
|
||||
<small class="text-muted">CHF 20 - CHF 200</small>
|
||||
<input type="range" class="form-range mt-1" id="revenue-slider"
|
||||
min="20" max="200" step="5" value="50"
|
||||
onchange="updateRevenuePerInstance(this.value)">
|
||||
</div>
|
||||
|
||||
<div class="input-group-custom">
|
||||
<label for="servala-share">
|
||||
Servala Revenue Share (%)
|
||||
<i class="bi bi-question-circle-fill text-muted ms-1"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Percentage of revenue shared with Servala after the grace period. Only applies to Direct Investment model."
|
||||
style="cursor: help; font-size: 0.8rem;"></i>
|
||||
</label>
|
||||
<input type="number" class="form-control" id="servala-share"
|
||||
min="10" max="40" step="1" value="25"
|
||||
onchange="updateCalculations()">
|
||||
<div class="slider-container">
|
||||
<input type="range" class="slider" id="share-slider"
|
||||
min="10" max="40" step="1" value="25"
|
||||
onchange="updateServalaShare(this.value)">
|
||||
|
||||
<!-- Scenarios Toggle -->
|
||||
<div class="col-lg-2 col-md-3 mb-2">
|
||||
<label class="form-label small fw-semibold mb-1">Scenarios</label>
|
||||
<div class="d-flex gap-1">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="conservative-enabled" checked onchange="toggleScenario('conservative')">
|
||||
<label class="form-check-label small text-success" for="conservative-enabled" data-bs-toggle="tooltip" title="Conservative: 2% churn, steady growth">Safe</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="moderate-enabled" checked onchange="toggleScenario('moderate')">
|
||||
<label class="form-check-label small text-warning" for="moderate-enabled" data-bs-toggle="tooltip" title="Moderate: 3% churn, balanced growth">Balanced</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="aggressive-enabled" checked onchange="toggleScenario('aggressive')">
|
||||
<label class="form-check-label small text-danger" for="aggressive-enabled" data-bs-toggle="tooltip" title="Aggressive: 5% churn, rapid growth">Fast</label>
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted">10% - 40% (Direct Investment only)</small>
|
||||
</div>
|
||||
|
||||
<div class="input-group-custom">
|
||||
<label for="grace-period">
|
||||
Grace Period (Months)
|
||||
<i class="bi bi-question-circle-fill text-muted ms-1"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Initial months where you keep 100% of revenue before sharing begins with Servala. Critical for maximizing returns in Direct Investment model."
|
||||
style="cursor: help; font-size: 0.8rem;"></i>
|
||||
</label>
|
||||
<input type="number" class="form-control" id="grace-period"
|
||||
min="0" max="24" step="1" value="6"
|
||||
onchange="updateCalculations()">
|
||||
<div class="slider-container">
|
||||
<input type="range" class="slider" id="grace-slider"
|
||||
min="0" max="24" step="1" value="6"
|
||||
onchange="updateGracePeriod(this.value)">
|
||||
|
||||
<!-- Advanced Controls Toggle -->
|
||||
<div class="col-lg-2 col-md-3 mb-2">
|
||||
<label class="form-label small fw-semibold mb-1">Controls</label>
|
||||
<div class="d-flex gap-1">
|
||||
<button class="btn btn-outline-info btn-sm" type="button" onclick="toggleAdvancedControls()" id="advancedToggleBtn">
|
||||
<i class="bi bi-gear"></i> More
|
||||
</button>
|
||||
<a href="{% url 'services:roi_calculator_help' %}" class="btn btn-outline-secondary btn-sm" target="_blank">
|
||||
<i class="bi bi-question-circle"></i> Help
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Remaining space for metrics -->
|
||||
<div class="col-lg-2 col-md-4 mb-2 text-end">
|
||||
<div class="d-flex justify-content-end gap-3">
|
||||
<div class="text-center">
|
||||
<div class="fw-bold text-success" id="net-position" style="font-size: 1.1rem; white-space: nowrap; line-height: 1.2;">CHF 0</div>
|
||||
<div style="font-size: 0.8rem;" class="text-muted">Net Position</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="fw-bold text-primary" id="roi-percentage" style="font-size: 1.1rem; white-space: nowrap; line-height: 1.2;">0%</div>
|
||||
<div style="font-size: 0.8rem;" class="text-muted">ROI</div>
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted">0 - 24 months (100% revenue to CSP - Direct Investment only)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Growth Scenarios -->
|
||||
<div class="calculator-section">
|
||||
<h4><i class="bi bi-speedometer2"></i> Growth Scenarios</h4>
|
||||
|
||||
<div class="scenario-card active" id="conservative-card">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="conservative-enabled" checked onchange="toggleScenario('conservative')">
|
||||
<label class="form-check-label fw-bold" for="conservative-enabled">
|
||||
Conservative Growth
|
||||
</label>
|
||||
|
||||
<!-- Collapsible Advanced Controls -->
|
||||
<div class="collapse" id="advancedControls">
|
||||
<div class="row py-2 bg-white border-top">
|
||||
<!-- Loan Rate (conditional) -->
|
||||
<div class="col-md-2" id="loan-rate-section" style="display: none;">
|
||||
<label class="form-label small mb-1">Loan Rate (%)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="loan-interest-rate"
|
||||
min="3" max="8" step="0.1" value="5.0" onchange="updateCalculations()">
|
||||
<input type="range" class="form-range mt-1" id="loan-rate-slider"
|
||||
min="3" max="8" step="0.1" value="5.0" onchange="updateLoanRate(this.value)">
|
||||
</div>
|
||||
<p class="small text-muted mb-2">Steady, predictable growth with minimal risk</p>
|
||||
<small class="text-info">Churn: 2% | New instances: 50-150/month (customizable below)</small>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card active" id="moderate-card">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="moderate-enabled" checked onchange="toggleScenario('moderate')">
|
||||
<label class="form-check-label fw-bold" for="moderate-enabled">
|
||||
Moderate Growth
|
||||
</label>
|
||||
|
||||
<!-- Servala Share -->
|
||||
<div class="col-md-2">
|
||||
<label class="form-label small mb-1">Servala Share (%)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="servala-share"
|
||||
min="10" max="40" step="1" value="25" onchange="updateCalculations()">
|
||||
<input type="range" class="form-range mt-1" id="share-slider"
|
||||
min="10" max="40" step="1" value="25" onchange="updateServalaShare(this.value)">
|
||||
</div>
|
||||
<p class="small text-muted mb-2">Balanced approach with moderate risk/reward</p>
|
||||
<small class="text-info">Churn: 3% | New instances: 100-400/month (customizable below)</small>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card active" id="aggressive-card">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="aggressive-enabled" checked onchange="toggleScenario('aggressive')">
|
||||
<label class="form-check-label fw-bold" for="aggressive-enabled">
|
||||
Aggressive Growth
|
||||
</label>
|
||||
|
||||
<!-- Grace Period -->
|
||||
<div class="col-md-2">
|
||||
<label class="form-label small mb-1">Grace Period (Mo)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="grace-period"
|
||||
min="0" max="24" step="1" value="6" onchange="updateCalculations()">
|
||||
<input type="range" class="form-range mt-1" id="grace-slider"
|
||||
min="0" max="24" step="1" value="6" onchange="updateGracePeriod(this.value)">
|
||||
</div>
|
||||
<p class="small text-muted mb-2">Rapid expansion with higher risk/reward</p>
|
||||
<small class="text-info">Churn: 5% | New instances: 200-800/month (customizable below)</small>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Parameters -->
|
||||
<div class="collapsible-section">
|
||||
<div class="collapsible-header" onclick="toggleCollapsible('advanced-params')">
|
||||
<h6 class="mb-0">
|
||||
<i class="bi bi-gear"></i> Advanced Parameters
|
||||
<i class="bi bi-chevron-down float-end"></i>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="collapsible-content" id="advanced-params">
|
||||
<div id="scenario-customization">
|
||||
<p class="text-muted small mb-3">Customize growth phases and churn rates for each scenario. Changes apply immediately to calculations.</p>
|
||||
|
||||
<!-- Conservative Scenario Customization -->
|
||||
<div class="phase-settings" id="conservative-advanced" style="display: block;">
|
||||
<h6 class="text-success mb-3"><i class="bi bi-sliders"></i> Conservative Scenario Parameters</h6>
|
||||
|
||||
<div class="row mb-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Monthly Churn Rate (%)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="conservative-churn"
|
||||
min="0" max="10" step="0.1" value="2.0"
|
||||
onchange="updateScenarioChurn('conservative', this.value)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 1 (Mo 1-6)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="conservative-phase-0"
|
||||
min="10" max="500" step="5" value="50"
|
||||
onchange="updateScenarioPhase('conservative', 0, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 2 (Mo 7-12)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="conservative-phase-1"
|
||||
min="10" max="500" step="5" value="75"
|
||||
onchange="updateScenarioPhase('conservative', 1, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 3 (Mo 13-24)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="conservative-phase-2"
|
||||
min="10" max="500" step="5" value="100"
|
||||
onchange="updateScenarioPhase('conservative', 2, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 4 (Mo 25+)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="conservative-phase-3"
|
||||
min="10" max="500" step="5" value="150"
|
||||
onchange="updateScenarioPhase('conservative', 3, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scenario Tuning -->
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<label class="form-label small mb-1">Conservative Churn (%)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="conservative-churn"
|
||||
min="0" max="10" step="0.1" value="2.0" onchange="updateScenarioChurn('conservative', this.value)">
|
||||
</div>
|
||||
|
||||
<!-- Moderate Scenario Customization -->
|
||||
<div class="phase-settings" id="moderate-advanced" style="display: block;">
|
||||
<h6 class="text-warning mb-3"><i class="bi bi-sliders"></i> Moderate Scenario Parameters</h6>
|
||||
|
||||
<div class="row mb-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Monthly Churn Rate (%)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="moderate-churn"
|
||||
min="0" max="10" step="0.1" value="3.0"
|
||||
onchange="updateScenarioChurn('moderate', this.value)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 1 (Mo 1-6)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="moderate-phase-0"
|
||||
min="10" max="1000" step="10" value="100"
|
||||
onchange="updateScenarioPhase('moderate', 0, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 2 (Mo 7-12)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="moderate-phase-1"
|
||||
min="10" max="1000" step="10" value="200"
|
||||
onchange="updateScenarioPhase('moderate', 1, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 3 (Mo 13-24)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="moderate-phase-2"
|
||||
min="10" max="1000" step="10" value="300"
|
||||
onchange="updateScenarioPhase('moderate', 2, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 4 (Mo 25+)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="moderate-phase-3"
|
||||
min="10" max="1000" step="10" value="400"
|
||||
onchange="updateScenarioPhase('moderate', 3, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<label class="form-label small mb-1">Moderate Churn (%)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="moderate-churn"
|
||||
min="0" max="10" step="0.1" value="3.0" onchange="updateScenarioChurn('moderate', this.value)">
|
||||
</div>
|
||||
|
||||
<!-- Aggressive Scenario Customization -->
|
||||
<div class="phase-settings" id="aggressive-advanced" style="display: block;">
|
||||
<h6 class="text-danger mb-3"><i class="bi bi-sliders"></i> Aggressive Scenario Parameters</h6>
|
||||
|
||||
<div class="row mb-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Monthly Churn Rate (%)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="aggressive-churn"
|
||||
min="0" max="15" step="0.1" value="5.0"
|
||||
onchange="updateScenarioChurn('aggressive', this.value)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 1 (Mo 1-6)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="aggressive-phase-0"
|
||||
min="50" max="2000" step="25" value="200"
|
||||
onchange="updateScenarioPhase('aggressive', 0, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 2 (Mo 7-12)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="aggressive-phase-1"
|
||||
min="50" max="2000" step="25" value="400"
|
||||
onchange="updateScenarioPhase('aggressive', 1, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 3 (Mo 13-24)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="aggressive-phase-2"
|
||||
min="50" max="2000" step="25" value="600"
|
||||
onchange="updateScenarioPhase('aggressive', 2, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Phase 4 (Mo 25+)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="aggressive-phase-3"
|
||||
min="50" max="2000" step="25" value="800"
|
||||
onchange="updateScenarioPhase('aggressive', 3, this.value)">
|
||||
<small class="text-muted">instances/month</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<label class="form-label small mb-1">Aggressive Churn (%)</label>
|
||||
<input type="number" class="form-control form-control-sm" id="aggressive-churn"
|
||||
min="0" max="15" step="0.1" value="5.0" onchange="updateScenarioChurn('aggressive', this.value)">
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="resetAdvancedParameters()">
|
||||
<i class="bi bi-arrow-clockwise"></i> Reset to Defaults
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CHARTS - Maximum Space -->
|
||||
<div class="container-fluid px-3 py-3" style="background: #f8f9fa;">
|
||||
<!-- Loading Spinner -->
|
||||
<div class="loading-spinner text-center py-5" id="loading-spinner" style="display: none;">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Calculating...</span>
|
||||
</div>
|
||||
<p class="mt-2">Calculating scenarios...</p>
|
||||
</div>
|
||||
|
||||
<!-- Additional Key Metrics (Horizontal) -->
|
||||
<div class="row mb-3" id="summary-metrics">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body py-3">
|
||||
<div class="row text-center">
|
||||
<div class="col-lg-3 col-md-6 mb-2">
|
||||
<div class="h5 mb-0" id="csp-revenue">CHF 0</div>
|
||||
<div class="small text-muted">Your Total Revenue</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-2">
|
||||
<div class="h5 mb-0" id="breakeven-time">N/A</div>
|
||||
<div class="small text-muted">Break-Even Time</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-2">
|
||||
<div class="h5 mb-0 text-info" id="model-description-display">Direct Investment</div>
|
||||
<div class="small text-muted">Investment Model</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-2">
|
||||
<div class="h5 mb-0 text-secondary">3 Scenarios</div>
|
||||
<div class="small text-muted">Active Comparisons</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -490,153 +316,99 @@ function logout() { window.ROICalculatorApp?.logout(); }
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Display -->
|
||||
<div class="col-lg-8">
|
||||
<!-- Loading Spinner -->
|
||||
<div class="loading-spinner" id="loading-spinner">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Calculating...</span>
|
||||
</div>
|
||||
<p class="mt-2">Calculating scenarios...</p>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Financial Summary Metrics -->
|
||||
<div class="row" id="summary-metrics">
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="metric-card text-center">
|
||||
<div class="metric-value" id="net-position">CHF 0</div>
|
||||
<div class="metric-label">
|
||||
Net Position
|
||||
<i class="bi bi-question-circle-fill text-muted ms-1"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Your final financial position: CSP revenue minus initial investment. Shows your actual profit/loss in CHF. Positive values indicate profitable investment."
|
||||
style="cursor: help; font-size: 0.8rem;"></i>
|
||||
</div>
|
||||
<!-- PRIMARY CHART - Full Width, Large Height -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-0 pb-0">
|
||||
<h5 class="mb-1"><i class="bi bi-graph-up-arrow text-primary"></i> ROI Progression Over Time</h5>
|
||||
<p class="small text-muted mb-0">Investment profitability timeline - when you'll break even and achieve target returns</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="metric-card text-center">
|
||||
<div class="metric-value" id="csp-revenue">CHF 0</div>
|
||||
<div class="metric-label">
|
||||
Your Revenue
|
||||
<i class="bi bi-question-circle-fill text-muted ms-1"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Total revenue you receive as CSP across all scenarios. For loan model: fixed loan payments. For direct investment: your share of business revenue including performance bonuses."
|
||||
style="cursor: help; font-size: 0.8rem;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="metric-card text-center">
|
||||
<div class="metric-value" id="roi-percentage">0%</div>
|
||||
<div class="metric-label">
|
||||
ROI Performance
|
||||
<i class="bi bi-question-circle-fill text-muted ms-1"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Return on Investment: Your net profit as percentage of initial investment. Loan model typically 3-7%, Direct investment potentially 15-40% depending on performance."
|
||||
style="cursor: help; font-size: 0.8rem;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="metric-card text-center">
|
||||
<div class="metric-value" id="breakeven-time">N/A</div>
|
||||
<div class="metric-label">
|
||||
Break-Even
|
||||
<i class="bi bi-question-circle-fill text-muted ms-1"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Time when you recover your initial investment. Loan model: 12-18 months. Direct investment: 15-24 months, but with unlimited upside potential thereafter."
|
||||
style="cursor: help; font-size: 0.8rem;"></i>
|
||||
</div>
|
||||
<div class="card-body pt-3">
|
||||
<canvas id="instanceGrowthChart" style="height: 500px; width: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Financial Charts -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="chart-container">
|
||||
<h5><i class="bi bi-graph-up-arrow"></i> ROI Progression Over Time</h5>
|
||||
<p class="small text-muted mb-3">Shows when your investment becomes profitable (crosses zero line) and how returns develop over time.</p>
|
||||
<canvas id="instanceGrowthChart"></canvas>
|
||||
<!-- SECONDARY CHARTS - Side by Side, Large -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-xl-6 mb-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-white border-0 pb-0">
|
||||
<h5 class="mb-1"><i class="bi bi-cash-stack text-success"></i> Net Financial Position</h5>
|
||||
<p class="small text-muted mb-0">Cumulative profit/loss over time</p>
|
||||
</div>
|
||||
<div class="card-body pt-3">
|
||||
<canvas id="revenueChart" style="height: 400px; width: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="chart-container">
|
||||
<h5><i class="bi bi-cash-stack"></i> Net Financial Position (Break-Even Analysis)</h5>
|
||||
<p class="small text-muted mb-3">Your cumulative profit/loss over time. Above zero = profitable, below zero = recovering investment.</p>
|
||||
<canvas id="revenueChart"></canvas>
|
||||
<div class="col-xl-6 mb-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-white border-0 pb-0">
|
||||
<h5 class="mb-1"><i class="bi bi-bar-chart text-warning"></i> Performance Comparison</h5>
|
||||
<p class="small text-muted mb-0">ROI performance across growth scenarios</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="chart-container">
|
||||
<h5><i class="bi bi-bar-chart"></i> Investment Model Performance Comparison</h5>
|
||||
<p class="small text-muted mb-3">Direct comparison of returns across growth scenarios, showing performance bonuses for direct investment.</p>
|
||||
<canvas id="cashFlowChart"></canvas>
|
||||
<div class="card-body pt-3">
|
||||
<canvas id="cashFlowChart" style="height: 400px; width: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Investment Model Comparison Chart -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="chart-container">
|
||||
<h5><i class="bi bi-graph-up"></i> Investment Model Comparison</h5>
|
||||
<p class="small text-muted mb-3">Compare guaranteed returns from loan model vs performance-based returns from direct investment. Grace period highlighted to show advantage of aggressive sales during 100% revenue retention period.</p>
|
||||
<canvas id="modelComparisonChart"></canvas>
|
||||
<!-- TERTIARY CHART - Full Width -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-0 pb-0">
|
||||
<h5 class="mb-1"><i class="bi bi-graph-up text-info"></i> Investment Model Comparison</h5>
|
||||
<p class="small text-muted mb-0">Net profit comparison: Fixed loan returns vs. performance-based direct investment across scenarios</p>
|
||||
</div>
|
||||
<div class="card-body pt-3">
|
||||
<canvas id="modelComparisonChart" style="height: 400px; width: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scenario Comparison Table -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="chart-container">
|
||||
<h5><i class="bi bi-table"></i> Financial Performance Comparison</h5>
|
||||
<p class="small text-muted mb-3">Detailed comparison of investment returns across growth scenarios. Direct Investment shows performance multipliers and grace period benefits.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="comparison-table">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Scenario & Performance</th>
|
||||
<th>Model</th>
|
||||
<th>Business Scale</th>
|
||||
<th>Total Revenue</th>
|
||||
<th>Your Revenue</th>
|
||||
<th>Servala Share</th>
|
||||
<th>ROI & Bonuses</th>
|
||||
<th>Break-even</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="comparison-tbody">
|
||||
<!-- Dynamic content -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Monthly Breakdown -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="collapsible-section">
|
||||
<div class="collapsible-header" onclick="toggleCollapsible('monthly-breakdown')">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-calendar3"></i> Monthly Financial Flow Analysis
|
||||
<i class="bi bi-chevron-down float-end"></i>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="collapsible-content" id="monthly-breakdown">
|
||||
<div class="chart-container">
|
||||
<p class="small text-muted mb-3">Month-by-month financial performance showing revenue distribution, performance bonuses, and progress toward break-even.</p>
|
||||
<!-- DATA TABLE - Collapsible to Save Space -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="accordion" id="dataAccordion">
|
||||
<div class="accordion-item border-0 shadow-sm">
|
||||
<h2 class="accordion-header" id="dataHeading">
|
||||
<button class="accordion-button collapsed" type="button" onclick="toggleDataCollapse()" id="dataToggleBtn">
|
||||
<i class="bi bi-table me-2"></i> Detailed Financial Analysis
|
||||
<span class="badge bg-secondary ms-2">Optional</span>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="dataCollapse" class="accordion-collapse collapse" aria-labelledby="dataHeading" data-bs-parent="#dataAccordion">
|
||||
<div class="accordion-body">
|
||||
<!-- Comparison Table -->
|
||||
<h6 class="mb-3">Scenario Performance Summary</h6>
|
||||
<div class="table-responsive mb-4">
|
||||
<table class="table table-sm table-striped" id="comparison-table">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Scenario</th>
|
||||
<th>Model</th>
|
||||
<th>Final Scale</th>
|
||||
<th>Total Revenue</th>
|
||||
<th>Your Revenue</th>
|
||||
<th>Servala Share</th>
|
||||
<th>ROI & Bonuses</th>
|
||||
<th>Break-even</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="comparison-tbody">
|
||||
<!-- Dynamic content -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Monthly Breakdown -->
|
||||
<h6 class="mb-3">Monthly Financial Flow</h6>
|
||||
<div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
|
||||
<table class="table table-sm table-striped" id="monthly-table">
|
||||
<thead class="table-dark sticky-top">
|
||||
|
|
@ -665,5 +437,4 @@ function logout() { window.ROICalculatorApp?.logout(); }
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue