From 444bfa339adf25ff473cdbe6099b63a2329c9cc4 Mon Sep 17 00:00:00 2001
From: Tobias Brunner <tobias.brunner@vshn.ch>
Date: Mon, 7 Jul 2025 17:18:42 +0200
Subject: [PATCH] better price model description

---
 .../templates/services/pricelist.html         | 273 +++++++++++++++---
 1 file changed, 227 insertions(+), 46 deletions(-)

diff --git a/hub/services/templates/services/pricelist.html b/hub/services/templates/services/pricelist.html
index 12cd5ee..7b4db36 100644
--- a/hub/services/templates/services/pricelist.html
+++ b/hub/services/templates/services/pricelist.html
@@ -159,59 +159,240 @@
         <div class="col-12">
             <h1 class="mb-4">Complete Price List - All Service Variants</h1>
             
-            <!-- Pricing Model Explanation -->
-            <div class="card mb-4">
-                <div class="card-header" data-bs-toggle="collapse" data-bs-target="#pricingExplanation" aria-expanded="false" aria-controls="pricingExplanation" style="cursor: pointer;">
+            <!-- Pricing Model Explanation - Internal Product Manager View -->
+            <div class="card mb-4 border-warning">
+                <div class="card-header text-warning" data-bs-toggle="collapse" data-bs-target="#pricingExplanation" aria-expanded="false" aria-controls="pricingExplanation" style="cursor: pointer;">
                     <h5 class="mb-0">
-                        <i class="bi bi-info-circle me-2"></i>How Our Pricing Works
+                        <i class="bi bi-gear-fill me-2"></i>How Our Pricing Works - Internal Product Manager Documentation
                         <small class="text-muted ms-2">(Click to expand)</small>
+                        <span class="badge text-dark ms-2">Internal Only</span>
                     </h5>
                 </div>
                 <div class="collapse" id="pricingExplanation">
                     <div class="card-body">
-                        <div class="row">
-                            <div class="col-md-6">
-                                <h6>Price Components</h6>
-                                <ul class="list-unstyled">
-                                    <li class="mb-2">
-                                        <span class="badge">Compute Plan Price</span>
-                                        <span class="ms-2">Base infrastructure cost for CPU, memory, and storage</span>
-                                    </li>
-                                    <li class="mb-2">
-                                        <span class="badge">SLA Base</span>
-                                        <span class="ms-2">Fixed cost for the service level agreement</span>
-                                    </li>
-                                    <li class="mb-2">
-                                        <span class="badge">Units × SLA Per Unit</span>
-                                        <span class="ms-2">Variable cost based on scale/usage</span>
-                                    </li>
-                                    <li class="mb-2">
-                                        <span class="badge">Mandatory Add-ons</span>
-                                        <span class="ms-2">Required additional services (backup, monitoring, etc.)</span>
-                                    </li>
-                                </ul>
-                            </div>
-                            <div class="col-md-6">
-                                <h6>Final Price Formula</h6>
-                                <div class="bg-light p-3 rounded">
-                                    <code>
-                                        <span style="color: #0d6efd;">Compute Plan Price</span> + 
-                                        <span style="color: #6f42c1;">SLA Base</span> + 
-                                        <span style="color: #fd7e14;">(Units × SLA Per Unit)</span> + 
-                                        <span style="color: #dc3545;">Mandatory Add-ons</span> = 
-                                        <strong style="color: #198754;">Final Price</strong>
-                                    </code>
+                        <!-- Pricing Model Overview -->
+                        <div class="alert alert-info" role="alert">
+                            <h6 class="alert-heading mt-4"><i class="bi bi-lightbulb"></i> Pricing Model Overview</h6>
+                            <p class="mb-0">Our pricing is built on a multi-dimensional model that combines infrastructure costs, service levels, scaling units, and additional services. This creates transparent, predictable pricing while maintaining flexibility for different use cases.</p>
+                        </div>
+
+                        <!-- Core Price Components -->
+                        <div class="row mb-4">
+                            <div class="col-12">
+                                <h6 class="text-primary mt-4"><i class="bi bi-puzzle"></i> Core Price Components</h6>
+                                <div class="row">
+                                    <div class="col-md-6 col-lg-3 mb-3">
+                                        <div class="card h-100 border-primary">
+                                            <div class="card-header text-primary">
+                                                <h6 class="card-title mb-2">Compute Plan Price</h6>
+                                            </div>
+                                            <div class="card-body">
+                                                <p class="card-text small">
+                                                    <strong>Source:</strong> Cloud provider's raw compute pricing<br>
+                                                    <strong>Includes:</strong> vCPUs, RAM, base storage<br>
+                                                    <strong>Varies by:</strong> Cloud provider, region, term length<br>
+                                                    <strong>Data source:</strong> ComputePlan model with Price objects
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-6 col-lg-3 mb-3">
+                                        <div class="card h-100 border-secondary">
+                                            <div class="card-header text-secondary">
+                                                <h6 class="card-title mb-2">SLA Base</h6>
+                                            </div>
+                                            <div class="card-body">
+                                                <p class="card-text small">
+                                                    <strong>Purpose:</strong> Fixed cost for service level guarantee<br>
+                                                    <strong>Covers:</strong> Basic monitoring, alerting, support<br>
+                                                    <strong>Varies by:</strong> Service level (Standard/Premium)<br>
+                                                    <strong>Data source:</strong> VSHNAppCat model's sla_base field
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-6 col-lg-3 mb-3">
+                                        <div class="card h-100 border-warning">
+                                            <div class="card-header text-warning">
+                                                <h6 class="card-title mb-2">Units × SLA Per Unit</h6>
+                                            </div>
+                                            <div class="card-body">
+                                                <p class="card-text small">
+                                                    <strong>Purpose:</strong> Variable cost based on scale<br>
+                                                    <strong>Units:</strong> Replicas, workers, connections, etc.<br>
+                                                    <strong>Scaling:</strong> Linear or tiered discount models<br>
+                                                    <strong>Data source:</strong> VSHNAppCat.sla_per_unit × calculated units
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-6 col-lg-3 mb-3">
+                                        <div class="card h-100 border-danger">
+                                            <div class="card-header text-danger">
+                                                <h6 class="card-title mb-2">Add-ons</h6>
+                                            </div>
+                                            <div class="card-body">
+                                                <p class="card-text small">
+                                                    <strong>Purpose:</strong> Required or optional additional services<br>
+                                                    <strong>Types:</strong> Commercial licenses, additional features<br>
+                                                    <strong>Pricing:</strong> Base fee or unit rate<br>
+                                                    <strong>Data source:</strong> AddOn model (optional with mandatory=True)
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Pricing Formula Details -->
+                        <div class="row mb-4">
+                            <div class="col-12">
+                                <h6 class="text-success"><i class="bi bi-calculator"></i> Pricing Formula Breakdown</h6>
+                                <div class="price-formula">
+                                    <strong>Final Price Calculation</strong><br>
+                                    <span class="formula-part compute-part">Compute Plan Price</span>
+                                    <span class="math-operator">+</span>
+                                    <span class="formula-part sla-base-part">SLA Base</span>
+                                    <span class="math-operator">+</span>
+                                    <span class="formula-part sla-units-part">Units × SLA Per Unit</span>
+                                    <span class="math-operator">+</span>
+                                    <span class="formula-part addons-part">Mandatory and Optional Add-ons</span>
+                                    <span class="math-operator">=</span>
+                                    <span class="formula-part equals-part">Final Price</span>
+                                </div>
+                                <div class="card border-success">
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-md-4">
+                                                <h6 class="text-muted">Variable Unit Types</h6>
+                                                <ul class="list-unstyled small">
+                                                    <li><span class="text-dark">RAM</span> - Memory (RAM) scaling</li>
+                                                    <li><span class="text-dark">CPU</span> - CPU (vCPU) scaling</li>
+                                                    <li><span class="text-dark">USR</span> - Users scaling</li>
+                                                </ul>
+                                                <small class="text-muted">Based on VSHNAppCatPrice.VariableUnit choices</small>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <h6 class="text-muted">Add-on Types</h6>
+                                                <ul class="list-unstyled small">
+                                                    <li><span class="text-danger">Base Fee</span> - Fixed amount regardless of units</li>
+                                                    <li><span class="text-warning">Unit Rate</span> - Price per unit</li>
+                                                </ul>
+                                                <small class="text-muted">Based on VSHNAppCatAddon.AddonType choices</small>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <h6 class="text-muted">Service Levels</h6>
+                                                <ul class="list-unstyled small">
+                                                    <li><span class="text-success">Best Effort</span> - Basic service level</li>
+                                                    <li><span class="text-primary">Guaranteed Availability</span> - Premium service level</li>
+                                                </ul>
+                                                <small class="text-muted">Based on VSHNAppCatPrice.ServiceLevel choices</small>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Data Model Relationships -->
+                        <div class="row mb-4">
+                            <div class="col-12">
+                                <h6 class="text-dark"><i class="bi bi-diagram-3"></i> Data Model Relationships</h6>
+                                <div class="card border-dark">
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-md-6">
+                                                <h6 class="text-primary">Core Models</h6>
+                                                <ul class="list-unstyled">
+                                                    <li class="mb-2">
+                                                        <span class="formula-part compute-part">ComputePlan</span>
+                                                        <small class="ms-2">Defines vCPUs, RAM, storage specs</small>
+                                                    </li>
+                                                    <li class="mb-2">
+                                                        <span class="formula-part compute-part">Price</span>
+                                                        <small class="ms-2">Links to ComputePlan with amount, currency, term</small>
+                                                    </li>
+                                                    <li class="mb-2">
+                                                        <span class="formula-part sla-base-part">VSHNAppCat</span>
+                                                        <small class="ms-2">Defines SLA base, per-unit pricing, units</small>
+                                                    </li>
+                                                    <li class="mb-2">
+                                                        <span class="formula-part addons-part">AddOn</span>
+                                                        <small class="ms-2">Additional services with pricing models</small>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div class="col-md-6">
+                                                <h6 class="text-success">Calculation Logic</h6>
+                                                <ol class="small">
+                                                    <li>Load ComputePlan and associated Price</li>
+                                                    <li>Find matching VSHNAppCat configuration</li>
+                                                    <li>Calculate units based on service specifications</li>
+                                                    <li>Apply discount model if configured</li>
+                                                    <li>Add mandatory add-ons (base fee + unit rate)</li>
+                                                    <li>Sum all components for final price</li>
+                                                </ol>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Price Comparison System -->
+                        <div class="row mb-4">
+                            <div class="col-12">
+                                <h6 class="text-info"><i class="bi bi-bar-chart"></i> Price Comparison System</h6>
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <div class="card border-secondary">
+                                            <div class="card-header text-secondary">
+                                                <h6 class="card-title mb-2">External Comparisons</h6>
+                                            </div>
+                                            <div class="card-body">
+                                                <p class="card-text small">
+                                                    <strong>Purpose:</strong> Compare against AWS, GCP, Azure, etc.<br>
+                                                    <strong>Data source:</strong> ExternalPriceComparison model<br>
+                                                    <strong>Matching:</strong> Similar specs (vCPUs, RAM, storage)<br>
+                                                    <strong>Display:</strong> Shows price difference and percentage
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <div class="card border-success">
+                                            <div class="card-header text-success">
+                                                <h6 class="card-title mb-2">Internal Comparisons</h6>
+                                            </div>
+                                            <div class="card-body">
+                                                <p class="card-text small">
+                                                    <strong>Purpose:</strong> Compare same service on different cloud providers<br>
+                                                    <strong>Logic:</strong> Same VSHNAppCat config, different ComputePlan<br>
+                                                    <strong>Matching:</strong> Exact service specs and SLA levels<br>
+                                                    <strong>Display:</strong> Shows cost difference between providers
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Pricing Strategy Notes -->
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="alert alert-warning" role="alert">
+                                    <h6 class="alert-heading"><i class="bi bi-exclamation-triangle"></i> Product Manager Notes</h6>
+                                    <ul class="mb-0">
+                                        <li><strong>Profit Margins:</strong> Built into ComputePlan pricing and SLA components</li>
+                                        <li><strong>Competitive Positioning:</strong> Use external comparisons to validate pricing</li>
+                                        <li><strong>Volume Discounts:</strong> Implemented through discount models in VSHNAppCat</li>
+                                        <li><strong>Add-on Strategy:</strong> Mandatory add-ons ensure minimum service quality</li>
+                                        <li><strong>Transparency:</strong> All components visible to build customer trust</li>
+                                        <li><strong>Flexibility:</strong> Multiple cloud providers allow cost optimization</li>
+                                    </ul>
                                 </div>
-                                <p class="mt-3 mb-0">
-                                    <small class="text-muted">
-                                        This transparent pricing model ensures you understand exactly what you're paying for. 
-                                        The table below breaks down each component for every service variant we offer.
-                                        <br><br>
-                                        <strong>Price Comparisons:</strong> When enabled, you'll see:
-                                        <br>• <span class="badge bg-secondary">External Providers</span> - Competitor prices from AWS, Google Cloud, etc.
-                                        <br>• <span class="badge bg-success">Other Servala Providers</span> - Same service specs on different cloud providers within our network
-                                    </small>
-                                </p>
                             </div>
                         </div>
                     </div>