updated help and advanced table
This commit is contained in:
parent
4746cfac25
commit
4f8fb0a448
SSH key fingerprint:
SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
5 changed files with 238 additions and 36 deletions
|
|
@ -495,4 +495,80 @@
|
|||
.table th, .table td {
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Monthly Breakdown Filter Controls */
|
||||
.breakdown-filters {
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.breakdown-filters .form-check {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.breakdown-filters .form-check-input:checked {
|
||||
background-color: #0d6efd;
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
|
||||
.breakdown-filters .form-check-label {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Responsive breakdown filters */
|
||||
@media (max-width: 768px) {
|
||||
.breakdown-filters {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.breakdown-filters .d-flex {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced sticky header for monthly breakdown table */
|
||||
.table-responsive {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-responsive .sticky-top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #212529 !important; /* Ensure dark background stays */
|
||||
}
|
||||
|
||||
.table-responsive .sticky-top th {
|
||||
background-color: #212529 !important;
|
||||
border-color: #454d55 !important;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Ensure sticky header works in scrollable containers */
|
||||
.table-responsive[style*="max-height"] .sticky-top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
/* Additional styling for better visibility */
|
||||
.table-dark th {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-dark th:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-dark th:nth-child(n+4) {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -402,6 +402,16 @@ class ROICalculatorApp {
|
|||
|
||||
// toggleInvestmentModel removed - both models are now calculated simultaneously
|
||||
|
||||
updateMonthlyBreakdownFilters() {
|
||||
try {
|
||||
if (this.uiManager) {
|
||||
this.uiManager.updateMonthlyBreakdown();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating monthly breakdown filters:', error);
|
||||
}
|
||||
}
|
||||
|
||||
logout() {
|
||||
if (!confirm('Are you sure you want to logout?')) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -131,12 +131,21 @@ class UIManager {
|
|||
|
||||
tbody.innerHTML = '';
|
||||
|
||||
// Get filter settings
|
||||
const filters = this.getMonthlyBreakdownFilters();
|
||||
|
||||
// Combine all monthly data and sort by month, then scenario, then model
|
||||
const allData = [];
|
||||
Object.keys(this.calculator.monthlyData).forEach(resultKey => {
|
||||
this.calculator.monthlyData[resultKey].forEach(monthData => {
|
||||
const model = resultKey.includes('_loan') ? 'loan' : 'direct';
|
||||
const scenario = resultKey.replace('_direct', '').replace('_loan', '');
|
||||
|
||||
// Apply filters
|
||||
if (!filters.models[model] || !filters.scenarios[scenario.toLowerCase()]) {
|
||||
return; // Skip this entry if filtered out
|
||||
}
|
||||
|
||||
allData.push({
|
||||
...monthData,
|
||||
model: model,
|
||||
|
|
@ -176,6 +185,7 @@ class UIManager {
|
|||
<td class="text-end">${data.totalInstances ? data.totalInstances.toLocaleString() : '0'}</td>
|
||||
<td class="text-end">${this.formatCurrencyDetailed(data.monthlyRevenue || 0)}</td>
|
||||
<td class="text-end fw-bold">${this.formatCurrencyDetailed(data.cspRevenue || 0)}</td>
|
||||
<td class="text-end text-muted">${this.formatCurrencyDetailed(data.servalaRevenue || 0)}</td>
|
||||
<td class="text-end fw-bold ${netPositionClass}">${this.formatCurrencyDetailed(data.netPosition || 0)}</td>
|
||||
`;
|
||||
});
|
||||
|
|
@ -253,4 +263,27 @@ class UIManager {
|
|||
default: return '#6c757d';
|
||||
}
|
||||
}
|
||||
|
||||
getMonthlyBreakdownFilters() {
|
||||
try {
|
||||
return {
|
||||
models: {
|
||||
direct: document.getElementById('breakdown-direct-enabled')?.checked ?? true,
|
||||
loan: document.getElementById('breakdown-loan-enabled')?.checked ?? true
|
||||
},
|
||||
scenarios: {
|
||||
conservative: document.getElementById('breakdown-conservative-enabled')?.checked ?? true,
|
||||
moderate: document.getElementById('breakdown-moderate-enabled')?.checked ?? true,
|
||||
aggressive: document.getElementById('breakdown-aggressive-enabled')?.checked ?? true
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error getting monthly breakdown filters:', error);
|
||||
// Return default filters if there's an error
|
||||
return {
|
||||
models: { direct: true, loan: true },
|
||||
scenarios: { conservative: true, moderate: true, aggressive: true }
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -36,6 +36,7 @@ function updateScenarioChurn(scenarioKey, churnRate) { window.ROICalculatorApp?.
|
|||
function updateScenarioPhase(scenarioKey, phaseIndex, newInstancesPerMonth) { window.ROICalculatorApp?.updateScenarioPhase(scenarioKey, phaseIndex, newInstancesPerMonth); }
|
||||
function resetAdvancedParameters() { window.ROICalculatorApp?.resetAdvancedParameters(); }
|
||||
function toggleScenario(scenarioKey) { window.ROICalculatorApp?.toggleScenario(scenarioKey); }
|
||||
function updateMonthlyBreakdownFilters() { window.ROICalculatorApp?.updateMonthlyBreakdownFilters(); }
|
||||
function toggleCollapsible(elementId) { window.ROICalculatorApp?.toggleCollapsible(elementId); }
|
||||
function resetCalculator() { window.ROICalculatorApp?.resetCalculator(); }
|
||||
// toggleInvestmentModel function removed - both models calculated simultaneously
|
||||
|
|
@ -392,12 +393,49 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
|
||||
<!-- Monthly Financial Flow -->
|
||||
<h6 class="mb-3">Monthly Financial Breakdown</h6>
|
||||
<div class="alert alert-info alert-sm">
|
||||
<small>
|
||||
<i class="bi bi-info-circle"></i>
|
||||
This table shows month-by-month progression for all enabled scenarios and both investment models.
|
||||
Use the scenario checkboxes above to filter results.
|
||||
</small>
|
||||
|
||||
<!-- Breakdown Filter Controls -->
|
||||
<div class="row mb-3 breakdown-filters">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small fw-semibold mb-2">Investment Models</label>
|
||||
<div class="d-flex gap-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="breakdown-direct-enabled" checked onchange="updateMonthlyBreakdownFilters()">
|
||||
<label class="form-check-label small fw-medium text-success" for="breakdown-direct-enabled">
|
||||
Direct Investment
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="breakdown-loan-enabled" checked onchange="updateMonthlyBreakdownFilters()">
|
||||
<label class="form-check-label small fw-medium text-warning" for="breakdown-loan-enabled">
|
||||
Loan Model
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small fw-semibold mb-2">Growth Scenarios</label>
|
||||
<div class="d-flex gap-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="breakdown-conservative-enabled" checked onchange="updateMonthlyBreakdownFilters()">
|
||||
<label class="form-check-label small fw-medium" for="breakdown-conservative-enabled">
|
||||
<span class="text-success">•</span> Conservative
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="breakdown-moderate-enabled" checked onchange="updateMonthlyBreakdownFilters()">
|
||||
<label class="form-check-label small fw-medium" for="breakdown-moderate-enabled">
|
||||
<span class="text-warning">•</span> Moderate
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="breakdown-aggressive-enabled" checked onchange="updateMonthlyBreakdownFilters()">
|
||||
<label class="form-check-label small fw-medium" for="breakdown-aggressive-enabled">
|
||||
<span class="text-danger">•</span> Aggressive
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
|
||||
<table class="table table-sm table-striped" id="monthly-table">
|
||||
|
|
@ -409,6 +447,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
<th>Instances</th>
|
||||
<th>Monthly Revenue</th>
|
||||
<th>Your Share</th>
|
||||
<th>Servala Share</th>
|
||||
<th>Cumulative Net Position</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
|
|||
|
|
@ -133,13 +133,13 @@ html {
|
|||
<!-- 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>
|
||||
<p>The ROI Calculator provides simultaneous comparison of both investment models, showing real-time results for each scenario. You can instantly see how both models perform without switching between them.</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><strong>3-8% Annual Returns</strong></p>
|
||||
<p>Fixed interest lending with guaranteed monthly payments. Low risk, predictable returns.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -160,21 +160,21 @@ html {
|
|||
<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>
|
||||
<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>Interest Rates:</strong> 3-8% 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>
|
||||
<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>
|
||||
<h4>Best For</h4>
|
||||
<ul>
|
||||
<li>CSPs prioritizing predictable, guaranteed returns</li>
|
||||
<li>Limited capacity for active sales involvement</li>
|
||||
|
|
@ -190,7 +190,7 @@ html {
|
|||
<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>
|
||||
<h4>Progressive Scaling Benefits</h4>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped comparison-table">
|
||||
<thead>
|
||||
|
|
@ -224,7 +224,7 @@ html {
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<h4>Grace Period Benefits:</h4>
|
||||
<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>
|
||||
|
|
@ -232,10 +232,19 @@ html {
|
|||
<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>Performance Bonuses</h4>
|
||||
<p>CSPs exceeding 110% of baseline performance receive up to 15% additional revenue share. This is automatically calculated based on your actual vs. expected instance growth.</p>
|
||||
|
||||
<h4>Performance Multiplier (Automatic)</h4>
|
||||
<p>This metric shows how your actual performance compares to baseline expectations:</p>
|
||||
<ul>
|
||||
<li><strong>1.0x:</strong> Meeting baseline expectations</li>
|
||||
<li><strong>1.5x:</strong> 50% better than baseline (triggers performance bonuses)</li>
|
||||
<li><strong>2.0x:</strong> Double the baseline performance</li>
|
||||
</ul>
|
||||
<p class="text-muted"><small><i class="bi bi-info-circle"></i> This is calculated automatically based on your investment scaling and cannot be manually configured.</small></p>
|
||||
|
||||
<h4>Best For:</h4>
|
||||
<h4>Best For</h4>
|
||||
<ul>
|
||||
<li>CSPs wanting to maximize return potential</li>
|
||||
<li>Ability to actively promote managed services</li>
|
||||
|
|
@ -284,24 +293,44 @@ html {
|
|||
<div class="help-section" id="calculator-guide">
|
||||
<h2><i class="bi bi-calculator"></i> Using the Calculator</h2>
|
||||
|
||||
<h3>Key Parameters:</h3>
|
||||
<h3>Key Parameters</h3>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Investment Settings:</h5>
|
||||
<h5>Primary Settings</h5>
|
||||
<ul>
|
||||
<li><strong>Investment Amount:</strong> CHF 100K - 2M</li>
|
||||
<li><strong>Initial Investment:</strong> CHF 100K - 2M (with slider)</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>
|
||||
<li><strong>Revenue/Instance:</strong> Monthly income per managed service (CHF 20-200)</li>
|
||||
<li><strong>Growth Scenarios:</strong> Conservative, Moderate, Aggressive</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5>Advanced Controls:</h5>
|
||||
<h5>Advanced Controls (Optional)</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>
|
||||
<li><strong>Loan Rate:</strong> Annual interest (3-8%) - affects loan model calculations</li>
|
||||
<li><strong>Servala Share:</strong> Revenue split percentage (10-40%) for direct investment</li>
|
||||
<li><strong>Grace Period:</strong> 100% revenue retention period (0-24 months, direct investment)</li>
|
||||
<li><strong>Churn Rates:</strong> Customer loss percentages by scenario (0-15%)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Understanding the Results</h3>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Real-time Metrics</h5>
|
||||
<ul>
|
||||
<li><strong>Net Position:</strong> Your profit after subtracting initial investment</li>
|
||||
<li><strong>ROI Percentage:</strong> Return on investment as a percentage</li>
|
||||
<li><strong>Performance Multiplier:</strong> How actual results compare to baseline (automatic)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5>Detailed Analysis</h5>
|
||||
<ul>
|
||||
<li><strong>Scenario Comparison:</strong> See results for all enabled growth scenarios</li>
|
||||
<li><strong>Model Distinction:</strong> Clear separation between Loan and Direct investment results</li>
|
||||
<li><strong>Monthly Breakdown:</strong> Month-by-month financial progression</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -356,16 +385,25 @@ html {
|
|||
<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>
|
||||
<p>Shows when your investment becomes profitable (crosses zero line) and how returns develop month by month. Both models are shown with solid lines for Direct Investment and dashed lines for Loan Model.</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>2. Net Financial Position (Break-Even Analysis)</h3>
|
||||
<p>Your cumulative profit/loss over time. Above zero = profitable, below zero = still recovering initial investment. Both models displayed with different styling to distinguish between them.</p>
|
||||
|
||||
<h3>3. Performance Comparison</h3>
|
||||
<p>ROI percentages across different growth scenarios, helping you understand best and worst-case outcomes.</p>
|
||||
<h3>3. Performance Comparison (ROI %)</h3>
|
||||
<p>ROI percentages across different growth scenarios, helping you understand best and worst-case outcomes. Shows both models side-by-side for each scenario.</p>
|
||||
|
||||
<h3>4. Investment Model Comparison</h3>
|
||||
<p>Direct comparison of total returns between loan and direct investment models for your specific parameters.</p>
|
||||
<h3>4. Investment Model Comparison (Net Profit)</h3>
|
||||
<p>Direct comparison of total net profit between loan and direct investment models across all scenarios. Makes it easy to see which model performs better in each growth scenario.</p>
|
||||
|
||||
<h4>Chart Legend</h4>
|
||||
<ul>
|
||||
<li><strong>Solid Lines/Bars:</strong> Direct Investment Model</li>
|
||||
<li><strong>Dashed Lines/Different Color:</strong> Loan Model</li>
|
||||
<li><strong>Green:</strong> Conservative Scenario</li>
|
||||
<li><strong>Yellow:</strong> Moderate Scenario</li>
|
||||
<li><strong>Red:</strong> Aggressive Scenario</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
|
|
@ -376,9 +414,15 @@ html {
|
|||
<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>
|
||||
<p>Bonuses apply when you exceed 110% of baseline instance growth, providing up to 15% additional revenue share. The system automatically tracks your performance multiplier (actual vs. baseline instances) and applies bonuses accordingly.</p>
|
||||
|
||||
<h4>What is the Performance Multiplier?</h4>
|
||||
<p>The Performance Multiplier is an automatically calculated metric showing how your actual results compare to baseline expectations. For example, 1.5x means you're performing 50% better than the baseline scenario. <strong>This cannot be manually configured</strong> - it's calculated based on your investment scaling factors.</p>
|
||||
|
||||
<h4>Can I switch between models?</h4>
|
||||
<h4>Do I need to choose between models?</h4>
|
||||
<p>No! The calculator now shows both models simultaneously, so you can compare them in real-time. You can see exactly how each model performs under different scenarios without switching between them.</p>
|
||||
|
||||
<h4>Can I change my investment model after starting?</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue