2025-07-16 15:12:25 +02:00
{% extends 'base.html' %}
{% load static %}
{% block title %}CSP ROI Calculator{% endblock %}
2025-07-22 08:33:54 +02:00
{% block extra_head %}
< meta name = "csrf-token" content = "{{ csrf_token }}" >
{% endblock %}
2025-07-16 15:12:25 +02:00
{% block extra_css %}
2025-07-21 16:04:53 +02:00
< link rel = "stylesheet" type = "text/css" href = '{% static "css/roi-calculator.css" %}' >
{% endblock %}
2025-07-16 15:15:34 +02:00
2025-07-21 16:04:53 +02:00
{% block extra_js %}
< script src = "{% static " js / chart . umd . min . js " % } " > < / script >
< script src = "{% static " js / jspdf . umd . min . js " % } " > < / script >
2025-07-22 08:50:48 +02:00
<!-- 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 >
2025-07-16 15:12:25 +02:00
{% 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 >
2025-07-21 16:14:32 +02:00
<!-- 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 >
2025-07-16 15:12:25 +02:00
< 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" >
2025-07-16 15:39:06 +02:00
<!-- 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 >
2025-07-22 09:16:40 +02:00
< 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 >
2025-07-16 15:39:06 +02:00
< h6 class = "text-primary mb-2 mt-3" > < i class = "bi bi-gear" > < / i > Key Parameters< / h6 >
< div class = "small" >
2025-07-22 09:16:40 +02:00
< 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 >
2025-07-21 17:06:29 +02:00
< / div >
< h6 class = "text-primary mb-2 mt-3" > < i class = "bi bi-graph-up" > < / i > Investment Models< / h6 >
< div class = "small" >
2025-07-22 09:16:40 +02:00
< 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 >
2025-07-16 15:39:06 +02:00
< / 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" >
2025-07-22 09:16:40 +02:00
< 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 >
2025-07-16 15:39:06 +02:00
< / div >
< / div >
< / div >
< / div >
2025-07-16 15:12:25 +02:00
<!-- Investment Settings -->
< div class = "calculator-section" >
< h4 > < i class = "bi bi-cash-coin" > < / i > Investment Settings< / h4 >
< div class = "input-group-custom" >
2025-07-16 16:41:02 +02:00
< 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 >
2025-07-16 15:12:25 +02:00
< div class = "input-group" >
< span class = "input-group-text currency-symbol" > CHF< / span >
2025-07-16 15:19:04 +02:00
< input type = "text" class = "form-control" id = "investment-amount"
data-value="500000" value="500,000"
oninput="handleInvestmentAmountInput(this)"
2025-07-16 15:12:25 +02:00
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 >
2025-07-16 16:41:02 +02:00
<!-- 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 × < / li >
< li > < strong > New Instances per Month< / strong > = Base Rate × < / li >
< li > < strong > Adjusted Churn Rate< / strong > = Base Churn × < / li >
< / ul >
< p class = "mb-0 text-info" style = "font-size: 0.8rem;" > < strong > Example:< / strong > CHF 1M investment = 1.41× < / p >
< / div >
< / div >
2025-07-16 15:12:25 +02:00
< / 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 >
2025-07-21 17:06:29 +02:00
<!-- 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"
2025-07-22 09:16:40 +02:00
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."
2025-07-21 17:06:29 +02:00
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" >
2025-07-22 09:16:40 +02:00
< i class = "bi bi-bank" > < / i > Loan Model (3-7%)
2025-07-21 17:06:29 +02:00
< / 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" >
2025-07-22 09:16:40 +02:00
< i class = "bi bi-rocket" > < / i > Direct Investment (15-40%)
2025-07-21 17:06:29 +02:00
< / label >
< / div >
< small class = "text-muted mt-1" >
2025-07-22 09:16:40 +02:00
< span id = "model-description" > Direct Investment: Performance-based returns with progressive scaling, bonuses up to 15%, and dynamic grace periods< / span >
2025-07-21 17:06:29 +02:00
< / 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 >
2025-07-16 15:12:25 +02:00
< 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" >
2025-07-21 17:06:29 +02:00
< 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 >
2025-07-16 15:12:25 +02:00
< 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 >
2025-07-21 17:06:29 +02:00
< small class = "text-muted" > 10% - 40% (Direct Investment only)< / small >
2025-07-16 15:12:25 +02:00
< / div >
< div class = "input-group-custom" >
2025-07-21 17:06:29 +02:00
< 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 >
2025-07-16 15:12:25 +02:00
< 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 >
2025-07-21 17:06:29 +02:00
< small class = "text-muted" > 0 - 24 months (100% revenue to CSP - Direct Investment only)< / small >
2025-07-16 15:12:25 +02:00
< / 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 >
2025-07-16 15:31:29 +02:00
< small class = "text-info" > Churn: 2% | New instances: 50-150/month (customizable below)< / small >
2025-07-16 15:12:25 +02:00
< / 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 >
2025-07-16 15:31:29 +02:00
< small class = "text-info" > Churn: 3% | New instances: 100-400/month (customizable below)< / small >
2025-07-16 15:12:25 +02:00
< / 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 >
2025-07-16 15:31:29 +02:00
< small class = "text-info" > Churn: 5% | New instances: 200-800/month (customizable below)< / small >
2025-07-16 15:12:25 +02:00
< / 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" >
2025-07-16 15:31:29 +02:00
< 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 >
2025-07-16 15:12:25 +02:00
< / 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 >
2025-07-22 09:16:40 +02:00
<!-- Enhanced Financial Summary Metrics -->
2025-07-16 15:12:25 +02:00
< div class = "row" id = "summary-metrics" >
< div class = "col-md-3 col-sm-6" >
< div class = "metric-card text-center" >
2025-07-22 09:16:40 +02:00
< div class = "metric-value" id = "net-position" > CHF 0< / div >
2025-07-16 15:59:51 +02:00
< div class = "metric-label" >
2025-07-22 09:16:40 +02:00
Net Position
2025-07-16 15:59:51 +02:00
< i class = "bi bi-question-circle-fill text-muted ms-1"
data-bs-toggle="tooltip"
data-bs-placement="top"
2025-07-22 09:16:40 +02:00
title="Your final financial position: CSP revenue minus initial investment. Shows your actual profit/loss in CHF. Positive values indicate profitable investment."
2025-07-16 15:59:51 +02:00
style="cursor: help; font-size: 0.8rem;">< / i >
< / div >
2025-07-16 15:12:25 +02:00
< / div >
< / div >
< div class = "col-md-3 col-sm-6" >
< div class = "metric-card text-center" >
2025-07-22 09:16:40 +02:00
< div class = "metric-value" id = "csp-revenue" > CHF 0< / div >
2025-07-16 15:59:51 +02:00
< div class = "metric-label" >
2025-07-22 09:16:40 +02:00
Your Revenue
2025-07-16 15:59:51 +02:00
< i class = "bi bi-question-circle-fill text-muted ms-1"
data-bs-toggle="tooltip"
data-bs-placement="top"
2025-07-22 09:16:40 +02:00
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."
2025-07-16 15:59:51 +02:00
style="cursor: help; font-size: 0.8rem;">< / i >
< / div >
2025-07-16 15:12:25 +02:00
< / 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 >
2025-07-16 15:59:51 +02:00
< div class = "metric-label" >
2025-07-22 09:16:40 +02:00
ROI Performance
2025-07-16 15:59:51 +02:00
< i class = "bi bi-question-circle-fill text-muted ms-1"
data-bs-toggle="tooltip"
data-bs-placement="top"
2025-07-22 09:16:40 +02:00
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."
2025-07-16 15:59:51 +02:00
style="cursor: help; font-size: 0.8rem;">< / i >
< / div >
2025-07-16 15:12:25 +02:00
< / 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 >
2025-07-16 15:59:51 +02:00
< div class = "metric-label" >
2025-07-22 09:16:40 +02:00
Break-Even
2025-07-16 15:59:51 +02:00
< i class = "bi bi-question-circle-fill text-muted ms-1"
data-bs-toggle="tooltip"
data-bs-placement="top"
2025-07-22 09:16:40 +02:00
title="Time when you recover your initial investment. Loan model: 12-18 months. Direct investment: 15-24 months, but with unlimited upside potential thereafter."
2025-07-16 15:59:51 +02:00
style="cursor: help; font-size: 0.8rem;">< / i >
< / div >
2025-07-16 15:12:25 +02:00
< / div >
< / div >
< / div >
2025-07-22 09:16:40 +02:00
<!-- Enhanced Financial Charts -->
2025-07-16 15:12:25 +02:00
< div class = "row" >
< div class = "col-12" >
< div class = "chart-container" >
2025-07-22 09:16:40 +02:00
< 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 >
2025-07-16 15:12:25 +02:00
< canvas id = "instanceGrowthChart" > < / canvas >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-6" >
< div class = "chart-container" >
2025-07-22 09:16:40 +02:00
< 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 >
2025-07-16 15:12:25 +02:00
< canvas id = "revenueChart" > < / canvas >
< / div >
< / div >
< div class = "col-md-6" >
< div class = "chart-container" >
2025-07-22 09:16:40 +02:00
< 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 >
2025-07-16 15:12:25 +02:00
< canvas id = "cashFlowChart" > < / canvas >
< / div >
< / div >
< / div >
2025-07-21 17:06:29 +02:00
<!-- 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 >
2025-07-16 15:12:25 +02:00
<!-- Scenario Comparison Table -->
< div class = "row" >
< div class = "col-12" >
< div class = "chart-container" >
2025-07-22 09:16:40 +02:00
< 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 >
2025-07-16 15:12:25 +02:00
< div class = "table-responsive" >
< table class = "table table-striped" id = "comparison-table" >
< thead class = "table-dark" >
< tr >
2025-07-22 09:16:40 +02:00
< th > Scenario & Performance< / th >
< th > Model< / th >
< th > Business Scale< / th >
2025-07-16 15:12:25 +02:00
< th > Total Revenue< / th >
2025-07-22 09:16:40 +02:00
< th > Your Revenue< / th >
< th > Servala Share< / th >
< th > ROI & Bonuses< / th >
2025-07-16 15:12:25 +02:00
< 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" >
2025-07-22 09:16:40 +02:00
< i class = "bi bi-calendar3" > < / i > Monthly Financial Flow Analysis
2025-07-16 15:12:25 +02:00
< i class = "bi bi-chevron-down float-end" > < / i >
< / h5 >
< / div >
< div class = "collapsible-content" id = "monthly-breakdown" >
< div class = "chart-container" >
2025-07-22 09:16:40 +02:00
< p class = "small text-muted mb-3" > Month-by-month financial performance showing revenue distribution, performance bonuses, and progress toward break-even.< / p >
2025-07-16 15:12:25 +02:00
< 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 >
2025-07-22 09:16:40 +02:00
< th > Growth< / th >
< th > Churn< / th >
< th > Scale< / th >
2025-07-16 15:12:25 +02:00
< th > Monthly Revenue< / th >
2025-07-22 09:16:40 +02:00
< th > Your Share< / th >
< th > Servala Share< / th >
< th > Net Position< / th >
2025-07-16 15:12:25 +02:00
< / tr >
< / thead >
< tbody id = "monthly-tbody" >
<!-- Dynamic content -->
< / tbody >
< / table >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
{% endblock %}
