669 lines
43 KiB
HTML
669 lines
43 KiB
HTML
{% extends 'base.html' %}
|
||
{% load static %}
|
||
|
||
{% block title %}CSP ROI Calculator{% endblock %}
|
||
|
||
{% block extra_head %}
|
||
<meta name="csrf-token" content="{{ csrf_token }}">
|
||
{% endblock %}
|
||
|
||
{% block extra_css %}
|
||
<link rel="stylesheet" type="text/css" href='{% static "css/roi-calculator.css" %}'>
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script src="{% static "js/chart.umd.min.js" %}"></script>
|
||
<script src="{% static "js/jspdf.umd.min.js" %}"></script>
|
||
<!-- ROI Calculator Modules -->
|
||
<script src="{% static "js/roi-calculator/input-utils.js" %}"></script>
|
||
<script src="{% static "js/roi-calculator/calculator-core.js" %}"></script>
|
||
<script src="{% static "js/roi-calculator/chart-manager.js" %}"></script>
|
||
<script src="{% static "js/roi-calculator/ui-manager.js" %}"></script>
|
||
<script src="{% static "js/roi-calculator/export-manager.js" %}"></script>
|
||
<script src="{% static "js/roi-calculator/roi-calculator-app.js" %}"></script>
|
||
<script>
|
||
// Global function wrappers for HTML onclick handlers
|
||
function updateCalculations() { window.ROICalculatorApp?.updateCalculations(); }
|
||
function exportToPDF() { window.ROICalculatorApp?.exportToPDF(); }
|
||
function exportToCSV() { window.ROICalculatorApp?.exportToCSV(); }
|
||
function handleInvestmentAmountInput(input) { InputUtils.handleInvestmentAmountInput(input); }
|
||
function updateInvestmentAmount(value) { window.ROICalculatorApp?.updateInvestmentAmount(value); }
|
||
function updateRevenuePerInstance(value) { window.ROICalculatorApp?.updateRevenuePerInstance(value); }
|
||
function updateServalaShare(value) { window.ROICalculatorApp?.updateServalaShare(value); }
|
||
function updateGracePeriod(value) { window.ROICalculatorApp?.updateGracePeriod(value); }
|
||
function updateLoanRate(value) { window.ROICalculatorApp?.updateLoanRate(value); }
|
||
function updateScenarioChurn(scenarioKey, churnRate) { window.ROICalculatorApp?.updateScenarioChurn(scenarioKey, churnRate); }
|
||
function updateScenarioPhase(scenarioKey, phaseIndex, newInstancesPerMonth) { window.ROICalculatorApp?.updateScenarioPhase(scenarioKey, phaseIndex, newInstancesPerMonth); }
|
||
function resetAdvancedParameters() { window.ROICalculatorApp?.resetAdvancedParameters(); }
|
||
function toggleScenario(scenarioKey) { window.ROICalculatorApp?.toggleScenario(scenarioKey); }
|
||
function toggleCollapsible(elementId) { window.ROICalculatorApp?.toggleCollapsible(elementId); }
|
||
function resetCalculator() { window.ROICalculatorApp?.resetCalculator(); }
|
||
function toggleInvestmentModel() { window.ROICalculatorApp?.toggleInvestmentModel(); }
|
||
function logout() { window.ROICalculatorApp?.logout(); }
|
||
</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>
|
||
<div>
|
||
<!-- Export Buttons -->
|
||
<button type="button" class="btn btn-outline-primary btn-sm me-2" 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()">
|
||
<i class="bi bi-file-csv"></i> CSV
|
||
</button>
|
||
<button type="button" class="btn btn-outline-secondary me-2" onclick="resetCalculator()">
|
||
<i class="bi bi-arrow-clockwise"></i> Reset
|
||
</button>
|
||
<button type="button" class="btn 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>
|
||
<input type="text" class="form-control" id="investment-amount"
|
||
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>
|
||
</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>
|
||
</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>
|
||
<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>
|
||
<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>
|
||
</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>
|
||
<input type="number" class="form-control" id="revenue-per-instance"
|
||
min="20" max="200" step="5" value="50"
|
||
onchange="updateCalculations()">
|
||
</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>
|
||
</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)">
|
||
</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)">
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
|
||
<!-- 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>
|
||
|
||
<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>
|
||
|
||
<!-- 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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
<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">
|
||
<tr>
|
||
<th>Month</th>
|
||
<th>Scenario</th>
|
||
<th>Growth</th>
|
||
<th>Churn</th>
|
||
<th>Scale</th>
|
||
<th>Monthly Revenue</th>
|
||
<th>Your Share</th>
|
||
<th>Servala Share</th>
|
||
<th>Net Position</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="monthly-tbody">
|
||
<!-- Dynamic content -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|