servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

further refinement of roi calculator

Browse source
This commit is contained in:
Tobias Brunner 2025-07-22 17:30:37 +02:00
parent 6f6c80480f
commit 493d45bb5d
Signed by: tobru
SSH key fingerprint: SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
6 changed files with 962 additions and 565 deletions
Download patch file Download diff file Expand all files Collapse all files

99
hub/services/static/css/roi-calculator.css
View file

@ -101,14 +101,109 @@
.chart-container {
position: relative;
height: 400px;
background: white;
border-radius: 8px;
padding: 1rem;
padding: 1.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 1.5rem;
}
/* Enhanced chart sizing for new layout */
.chart-container canvas {
max-height: 400px;
}
/* Full-width chart containers */
.card-body canvas {
width: 100% !important;
}
/* Primary chart gets extra height */
#instanceGrowthChart {
height: 500px !important;
}
/* Secondary charts get good height */
#revenueChart, #cashFlowChart, #modelComparisonChart {
height: 400px !important;
}
/* Enhanced layout styles for new design */
.sticky-top {
z-index: 1020;
}
.card {
transition: box-shadow 0.15s ease-in-out;
}
.card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Compact header controls */
.form-range {
height: 4px;
}
.input-group-sm .form-control,
.form-select-sm,
.btn-sm {
font-size: 0.825rem;
}
/* Clean chart headers */
.card-header {
background: white !important;
border: none !important;
padding-bottom: 0.5rem;
}
.card-body {
padding: 1.5rem;
}
/* Responsive chart heights */
@media (max-width: 768px) {
#instanceGrowthChart {
height: 350px !important;
}
#revenueChart, #cashFlowChart, #modelComparisonChart {
height: 300px !important;
}
.card-body {
padding: 1rem;
}
}
@media (max-width: 576px) {
#instanceGrowthChart {
height: 250px !important;
}
#revenueChart, #cashFlowChart, #modelComparisonChart {
height: 200px !important;
}
}
/* Manual collapse functionality */
.collapse {
display: none;
}
.collapse.show {
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
.export-buttons {
position: sticky;
top: 20px;

172
hub/services/static/js/roi-calculator/chart-manager.js
View file

@ -84,7 +84,7 @@ class ChartManager {
});
// Model Comparison Chart (replaces generic Cash Flow Chart)
const modelComparisonCanvas = document.getElementById('cashFlowChart');
const modelComparisonCanvas = document.getElementById('modelComparisonChart');
if (!modelComparisonCanvas) {
console.error('Model comparison chart canvas not found');
return;
@ -98,7 +98,7 @@ class ChartManager {
maintainAspectRatio: false,
plugins: {
legend: { position: 'top' },
title: { display: true, text: 'Investment Model Performance Comparison' }
title: { display: true, text: 'Investment Model Comparison' }
},
scales: {
y: {
@ -111,6 +111,35 @@ class ChartManager {
}
}
});
// Performance Comparison Chart (for cashFlowChart canvas)
const performanceCanvas = document.getElementById('cashFlowChart');
if (!performanceCanvas) {
console.error('Performance comparison chart canvas not found');
return;
}
const performanceCtx = performanceCanvas.getContext('2d');
this.charts.performance = new Chart(performanceCtx, {
type: 'bar',
data: { labels: [], datasets: [] },
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'top' },
title: { display: true, text: 'Model Performance Comparison' }
},
scales: {
y: {
beginAtZero: true,
title: { display: true, text: 'ROI (%)' }
},
x: {
title: { display: true, text: 'Growth Scenario' }
}
}
}
});
} catch (error) {
console.error('Error initializing charts:', error);
this.showChartError('Failed to initialize charts. Please refresh the page.');
@ -119,7 +148,7 @@ class ChartManager {
showChartError(message) {
// Show error message in place of charts
const chartContainers = ['instanceGrowthChart', 'revenueChart', 'cashFlowChart'];
const chartContainers = ['instanceGrowthChart', 'revenueChart', 'cashFlowChart', 'modelComparisonChart'];
chartContainers.forEach(containerId => {
const container = document.getElementById(containerId);
if (container) {
@ -152,7 +181,7 @@ class ChartManager {
// Update ROI Progression Chart
this.charts.roiProgression.data.labels = monthLabels;
this.charts.roiProgression.data.datasets = scenarios.map(scenario => ({
this.charts.roiProgression.data.datasets = scenarios.filter(s => this.calculator.results[s]).map(scenario => ({
label: `${this.calculator.scenarios[scenario].name} (${this.calculator.results[scenario].investmentModel})`,
data: this.calculator.monthlyData[scenario].map(d => d.roiPercent),
borderColor: colors[scenario],
@ -166,7 +195,7 @@ class ChartManager {
// Update Net Position Chart (Break-Even Analysis)
this.charts.netPosition.data.labels = monthLabels;
this.charts.netPosition.data.datasets = scenarios.map(scenario => ({
this.charts.netPosition.data.datasets = scenarios.filter(s => this.calculator.results[s]).map(scenario => ({
label: `${this.calculator.scenarios[scenario].name} Net Position`,
data: this.calculator.monthlyData[scenario].map(d => d.netPosition),
borderColor: colors[scenario],
@ -180,37 +209,122 @@ class ChartManager {
}));
this.charts.netPosition.update();
// Update Model Comparison Chart
const scenarioLabels = scenarios.map(s => this.calculator.scenarios[s].name);
const currentInvestmentModel = Object.values(this.calculator.results)[0]?.investmentModel || 'direct';
// Update Model Comparison Chart - Side-by-side comparison of both models
const inputs = this.calculator.getInputValues();
// Show comparison with both models for the same scenarios
this.charts.modelComparison.data.labels = scenarioLabels;
this.charts.modelComparison.data.datasets = [{
label: `${currentInvestmentModel === 'loan' ? 'Loan Model' : 'Direct Investment'} - Final Return`,
data: scenarios.map(scenario => this.calculator.results[scenario].cspRevenue),
backgroundColor: scenarios.map(scenario => colors[scenario] + '80'),
borderColor: scenarios.map(scenario => colors[scenario]),
borderWidth: 2
}];
// Calculate loan model net profit (fixed return regardless of scenario)
const loanMonthlyPayment = this.calculateLoanPayment(inputs.investmentAmount, inputs.loanInterestRate, inputs.timeframe);
const loanTotalPayments = loanMonthlyPayment * (inputs.timeframe * 12);
const loanNetProfit = loanTotalPayments - inputs.investmentAmount;
// Add performance metrics for direct investment
if (currentInvestmentModel === 'direct') {
this.charts.modelComparison.data.datasets.push({
label: 'Performance Bonus Impact',
data: scenarios.map(scenario =>
this.calculator.results[scenario].avgPerformanceBonus *
this.calculator.results[scenario].cspRevenue
),
backgroundColor: '#17a2b8',
borderColor: '#17a2b8',
// Prepare scenario-based comparison
const enabledScenarios = scenarios.filter(s => this.calculator.scenarios[s].enabled);
const comparisonLabels = enabledScenarios.map(s => this.calculator.scenarios[s].name);
// Loan model data (same profit for all scenarios since it's fixed)
const loanModelData = enabledScenarios.map(() => loanNetProfit);
// Direct investment data (varies by scenario performance)
const directInvestmentData = enabledScenarios.map(scenario => {
const scenarioResult = this.calculator.results[scenario];
if (!scenarioResult) return 0;
return scenarioResult.cspRevenue - inputs.investmentAmount;
});
// Performance bonus data (shows the additional revenue from performance bonuses)
const performanceBonusData = enabledScenarios.map(scenario => {
const monthlyData = this.calculator.monthlyData[scenario] || [];
const totalPerformanceBonus = monthlyData.reduce((sum, month) => {
// Calculate the bonus revenue (difference from standard share)
const standardRevenue = month.monthlyRevenue * inputs.servalaShare;
const actualServalaRevenue = month.servalaRevenue;
const bonusAmount = Math.max(0, standardRevenue - actualServalaRevenue); // CSP gets this as bonus
return sum + bonusAmount;
}, 0);
return totalPerformanceBonus;
});
this.charts.modelComparison.data.labels = comparisonLabels;
this.charts.modelComparison.data.datasets = [
{
label: `Loan Model (${(inputs.loanInterestRate * 100).toFixed(1)}% fixed return)`,
data: loanModelData,
backgroundColor: '#ffc107',
borderColor: '#e0a800',
borderWidth: 2
});
}
},
{
label: 'Direct Investment (base return)',
data: directInvestmentData,
backgroundColor: enabledScenarios.map(scenario => colors[scenario] + '80'),
borderColor: enabledScenarios.map(scenario => colors[scenario]),
borderWidth: 2
},
{
label: 'Performance Bonus Impact',
data: performanceBonusData,
backgroundColor: enabledScenarios.map(scenario => colors[scenario] + '40'),
borderColor: enabledScenarios.map(scenario => colors[scenario]),
borderWidth: 2,
borderDash: [5, 5]
}
];
this.charts.modelComparison.update();
// Update Performance Comparison Chart (ROI comparison for both models)
this.charts.performance.data.labels = comparisonLabels;
// Calculate ROI for loan model (same for all scenarios)
const loanROI = (loanNetProfit / inputs.investmentAmount) * 100;
const loanROIData = enabledScenarios.map(() => loanROI);
// Get ROI for direct investment (varies by scenario)
const directROIData = enabledScenarios.map(scenario => {
const result = this.calculator.results[scenario];
return result ? result.roi : 0;
});
this.charts.performance.data.datasets = [
{
label: `Loan Model ROI (${(inputs.loanInterestRate * 100).toFixed(1)}% fixed)`,
data: loanROIData,
backgroundColor: '#ffc107',
borderColor: '#e0a800',
borderWidth: 2
},
{
label: 'Direct Investment ROI',
data: directROIData,
backgroundColor: enabledScenarios.map(scenario => colors[scenario] + '80'),
borderColor: enabledScenarios.map(scenario => colors[scenario]),
borderWidth: 2
}
];
this.charts.performance.update();
} catch (error) {
console.error('Error updating charts:', error);
}
}
// Helper method to calculate loan payment
calculateLoanPayment(principal, annualRate, years) {
try {
const monthlyRate = annualRate / 12;
const numberOfPayments = years * 12;
if (monthlyRate === 0) {
return principal / numberOfPayments;
}
const monthlyPayment = principal * (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments)) /
(Math.pow(1 + monthlyRate, numberOfPayments) - 1);
return monthlyPayment;
} catch (error) {
console.error('Error calculating loan payment:', error);
return 0;
}
}
}

839
hub/services/templates/calculator/csp_roi_calculator.html
View file

@ -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 %}

399
hub/services/templates/calculator/roi_calculator_help.html Normal file
View file

@ -0,0 +1,399 @@
{% extends 'base.html' %}
{% load static %}
{% block title %}ROI Calculator Help - Servala Investment Models{% endblock %}
{% block extra_css %}
<link rel="stylesheet" type="text/css" href='{% static "css/roi-calculator.css" %}'>
<style>
.help-section {
margin-bottom: 2rem;
}
.help-section h2 {
color: #007bff;
border-bottom: 2px solid #007bff;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.help-section h3 {
color: #28a745;
margin-top: 1.5rem;
}
.comparison-table {
font-size: 0.9rem;
}
.model-card {
border-left: 4px solid;
padding: 1rem;
margin-bottom: 1rem;
background: #f8f9fa;
}
.loan-model {
border-left-color: #ffc107;
}
.direct-model {
border-left-color: #28a745;
}
/* Enhanced navigation styling */
.list-group-item {
border: none !important;
font-size: 0.9rem;
transition: all 0.2s ease;
display: block !important;
width: 100% !important;
clear: both;
}
.list-group-flush {
display: flex !important;
flex-direction: column !important;
}
.list-group-item:hover {
background-color: #f8f9fa;
padding-left: 1rem !important;
}
.list-group-item.active {
background-color: #007bff;
color: white;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Section spacing */
.help-section {
scroll-margin-top: 2rem;
}
</style>
{% endblock %}
{% block content %}
<div class="container my-4">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h1>ROI Calculator Help</h1>
<p class="text-muted">Understanding Servala's Investment Models</p>
</div>
<div>
<a href="{% url 'services:csp_roi_calculator' %}" class="btn btn-primary">
<i class="bi bi-arrow-left"></i> Back to Calculator
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="sticky-top" style="top: 1rem;">
<div class="card">
<div class="card-header">
<h5 class="mb-0">Quick Navigation</h5>
</div>
<div class="card-body">
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action" href="#overview">
<i class="bi bi-lightbulb me-2"></i>Overview
</a>
<a class="list-group-item list-group-item-action" href="#loan-model">
<i class="bi bi-bank me-2"></i>Loan Model (3-7%)
</a>
<a class="list-group-item list-group-item-action" href="#direct-model">
<i class="bi bi-rocket me-2"></i>Direct Investment (15-40%)
</a>
<a class="list-group-item list-group-item-action" href="#comparison">
<i class="bi bi-bar-chart me-2"></i>Model Comparison
</a>
<a class="list-group-item list-group-item-action" href="#calculator-guide">
<i class="bi bi-calculator me-2"></i>Using the Calculator
</a>
<a class="list-group-item list-group-item-action" href="#scenarios">
<i class="bi bi-speedometer2 me-2"></i>Growth Scenarios
</a>
<a class="list-group-item list-group-item-action" href="#charts">
<i class="bi bi-graph-up me-2"></i>Understanding Charts
</a>
<a class="list-group-item list-group-item-action" href="#faq">
<i class="bi bi-question-circle me-2"></i>FAQ
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<!-- Overview Section -->
<div class="help-section" id="overview">
<h2><i class="bi bi-lightbulb"></i> Overview</h2>
<p>The ROI Calculator helps you analyze potential returns from partnering with Servala through two distinct investment models:</p>
<div class="row">
<div class="col-md-6">
<div class="model-card loan-model">
<h5><i class="bi bi-bank"></i> Loan Model</h5>
<p><strong>3-7% Annual Returns</strong></p>
<p>Fixed interest lending with guaranteed monthly payments. Low risk, predictable returns.</p>
</div>
</div>
<div class="col-md-6">
<div class="model-card direct-model">
<h5><i class="bi bi-rocket"></i> Direct Investment</h5>
<p><strong>15-40% Potential Returns</strong></p>
<p>Performance-based revenue sharing with scaling bonuses and extended grace periods.</p>
</div>
</div>
</div>
</div>
<!-- Loan Model Section -->
<div class="help-section" id="loan-model">
<h2><i class="bi bi-bank"></i> Loan Model (3-7% Returns)</h2>
<h3>How It Works</h3>
<p>You lend capital to Servala at a fixed interest rate, receiving guaranteed monthly payments regardless of business performance.</p>
<h4>Key Features:</h4>
<ul>
<li><strong>Investment Range:</strong> CHF 100,000 - CHF 2,000,000</li>
<li><strong>Interest Rates:</strong> Typically 3-7% annually</li>
<li><strong>Payment Schedule:</strong> Fixed monthly payments</li>
<li><strong>Risk Level:</strong> Very low - contractually guaranteed</li>
<li><strong>Break-even:</strong> Typically 12-18 months</li>
</ul>
<h4>Payment Calculation:</h4>
<p>Monthly payments use standard amortization:</p>
<code>Monthly Payment = P × [r(1+r)^n] / [(1+r)^n - 1]</code>
<p class="small text-muted mt-2">Where P = Principal, r = Monthly rate, n = Total payments</p>
<h4>Best For:</h4>
<ul>
<li>CSPs prioritizing predictable, guaranteed returns</li>
<li>Limited capacity for active sales involvement</li>
<li>Conservative risk tolerance</li>
<li>Need for steady cash flow</li>
</ul>
</div>
<!-- Direct Investment Section -->
<div class="help-section" id="direct-model">
<h2><i class="bi bi-rocket"></i> Direct Investment (15-40% Returns)</h2>
<h3>How It Works</h3>
<p>Invest directly in Servala's operations and earn returns through revenue sharing that scales with performance and investment size.</p>
<h4>Progressive Scaling Benefits:</h4>
<div class="table-responsive">
<table class="table table-striped comparison-table">
<thead>
<tr>
<th>Investment Amount</th>
<th>Scaling Factor</th>
<th>Customer Acquisition</th>
<th>Churn Reduction</th>
</tr>
</thead>
<tbody>
<tr>
<td>CHF 500,000</td>
<td>1.0x</td>
<td>Baseline</td>
<td>0%</td>
</tr>
<tr>
<td>CHF 1,000,000</td>
<td>1.5x</td>
<td>+50% vs baseline</td>
<td>20%</td>
</tr>
<tr>
<td>CHF 2,000,000</td>
<td>2.0x</td>
<td>+100% vs baseline</td>
<td>40%</td>
</tr>
</tbody>
</table>
</div>
<h4>Grace Period Benefits:</h4>
<p>Larger investments get longer periods of 100% revenue retention:</p>
<ul>
<li><strong>CHF 500,000:</strong> 6 months grace period</li>
<li><strong>CHF 1,000,000:</strong> 8 months grace period</li>
<li><strong>CHF 2,000,000:</strong> 12 months grace period</li>
</ul>
<h4>Performance Bonuses:</h4>
<p>CSPs exceeding 110% of baseline performance receive up to 15% additional revenue share.</p>
<h4>Best For:</h4>
<ul>
<li>CSPs wanting to maximize return potential</li>
<li>Ability to actively promote managed services</li>
<li>Moderate to high risk tolerance</li>
<li>Longer investment horizons (2-5 years)</li>
</ul>
</div>
<!-- Model Comparison -->
<div class="help-section" id="comparison">
<h2><i class="bi bi-bar-chart"></i> Model Comparison</h2>
<h3>CHF 1,000,000 Investment Over 3 Years Example:</h3>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Model</th>
<th>Risk Level</th>
<th>Expected ROI</th>
<th>Break-even</th>
<th>Total Return</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Loan Model (5%)</strong></td>
<td><span class="badge bg-success">Low</span></td>
<td>8% over 3 years</td>
<td>12-18 months</td>
<td>CHF 80,000 profit</td>
</tr>
<tr>
<td><strong>Direct Investment</strong></td>
<td><span class="badge bg-warning">Moderate-High</span></td>
<td>35% over 3 years</td>
<td>15-24 months</td>
<td>CHF 540,000+ profit</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Calculator Guide -->
<div class="help-section" id="calculator-guide">
<h2><i class="bi bi-calculator"></i> Using the Calculator</h2>
<h3>Key Parameters:</h3>
<div class="row">
<div class="col-md-6">
<h5>Investment Settings:</h5>
<ul>
<li><strong>Investment Amount:</strong> CHF 100K - 2M</li>
<li><strong>Timeframe:</strong> 1-5 years</li>
<li><strong>Investment Model:</strong> Loan vs Direct</li>
<li><strong>Revenue/Instance:</strong> Monthly income per managed service</li>
</ul>
</div>
<div class="col-md-6">
<h5>Advanced Controls:</h5>
<ul>
<li><strong>Loan Rate:</strong> Annual interest (3-8%)</li>
<li><strong>Servala Share:</strong> Revenue split percentage</li>
<li><strong>Grace Period:</strong> 100% revenue retention period</li>
<li><strong>Churn Rates:</strong> Customer loss percentages</li>
</ul>
</div>
</div>
</div>
<!-- Growth Scenarios -->
<div class="help-section" id="scenarios">
<h2><i class="bi bi-speedometer2"></i> Growth Scenarios</h2>
<div class="row">
<div class="col-md-4">
<div class="card border-success">
<div class="card-header bg-success text-white">
<h5 class="mb-0">Safe (Conservative)</h5>
</div>
<div class="card-body">
<p><strong>2% monthly churn</strong></p>
<p>Steady growth: 50-150 new instances/month</p>
<p>Best for: Established markets, risk-averse CSPs</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-warning">
<div class="card-header bg-warning text-white">
<h5 class="mb-0">Balanced (Moderate)</h5>
</div>
<div class="card-body">
<p><strong>3% monthly churn</strong></p>
<p>Balanced growth: 100-400 new instances/month</p>
<p>Best for: Competitive markets, balanced approach</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-danger">
<div class="card-header bg-danger text-white">
<h5 class="mb-0">Fast (Aggressive)</h5>
</div>
<div class="card-body">
<p><strong>5% monthly churn</strong></p>
<p>Rapid growth: 200-800 new instances/month</p>
<p>Best for: High-growth strategies, active sales</p>
</div>
</div>
</div>
</div>
</div>
<!-- Understanding Charts -->
<div class="help-section" id="charts">
<h2><i class="bi bi-graph-up"></i> Understanding the Charts</h2>
<h3>1. ROI Progression Over Time</h3>
<p>Shows when your investment becomes profitable (crosses zero line) and how returns develop month by month.</p>
<h3>2. Net Financial Position</h3>
<p>Your cumulative profit/loss over time. Above zero = profitable, below zero = still recovering initial investment.</p>
<h3>3. Performance Comparison</h3>
<p>ROI percentages across different growth scenarios, helping you understand best and worst-case outcomes.</p>
<h3>4. Investment Model Comparison</h3>
<p>Direct comparison of total returns between loan and direct investment models for your specific parameters.</p>
</div>
<!-- FAQ Section -->
<div class="help-section" id="faq">
<h2><i class="bi bi-question-circle"></i> Frequently Asked Questions</h2>
<h4>What does "Net Position" mean?</h4>
<p>Your final financial position: total CSP revenue minus your initial investment. Positive values indicate profitable investment.</p>
<h4>How are performance bonuses calculated?</h4>
<p>Bonuses apply when you exceed 110% of baseline instance growth, providing up to 15% additional revenue share.</p>
<h4>Can I switch between models?</h4>
<p>Model changes require mutual agreement and may involve restructuring. Generally evaluated at renewal periods.</p>
<h4>What happens during the grace period?</h4>
<p>You keep 100% of revenue during this period. Grace periods are longer for larger investments (6-12 months).</p>
<h4>How accurate are the projections?</h4>
<p>Projections are based on industry benchmarks and Servala's historical data, but actual results may vary based on market conditions and your sales performance.</p>
</div>
<div class="text-center mt-5">
<a href="{% url 'services:csp_roi_calculator' %}" class="btn btn-primary btn-lg">
<i class="bi bi-calculator"></i> Start Using the Calculator
</a>
</div>
</div>
</div>
</div>
{% endblock %}

5
hub/services/urls.py
View file

@ -36,4 +36,9 @@ urlpatterns = [
views.csp_roi_calculator,
name="csp_roi_calculator",
),
path(
"csp-roi-calculator/help/",
views.roi_calculator_help,
name="roi_calculator_help",
),
]

13
hub/services/views/calculator.py
View file

@ -53,3 +53,16 @@ def csp_roi_calculator(request):
}
return render(request, "calculator/csp_roi_calculator.html", context)
def roi_calculator_help(request):
"""
ROI Calculator Help page - Shows detailed information about investment models
This page is publicly accessible without password protection
"""
context = {
"page_title": "ROI Calculator Help - Investment Models",
"page_description": "Understand Servala's Loan and Direct Investment models with detailed explanations and examples",
}
return render(request, "calculator/roi_calculator_help.html", context)