Refine capacity summary and analysis presentation

templates/roll_calculator.html

@@ -289,6 +289,23 @@
       border-left: 4px solid #2BAC70;
     }
     .lo-results-summary h4 { margin-top: 0; color: #333; font-size: 14px; margin-bottom: 12px; }
+    .lo-summary-section {
+      padding-top: 12px;
+      margin-top: 12px;
+      border-top: 1px solid #e6ece9;
+    }
+    .lo-summary-section:first-of-type {
+      padding-top: 0;
+      margin-top: 0;
+      border-top: 0;
+    }
+    .lo-summary-section-title {
+      margin-bottom: 8px;
+      color: #1F5438;
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
     .lo-summary-item {
       display: flex;
       justify-content: space-between;
@@ -297,9 +314,23 @@
       font-size: 13px;
     }
     .lo-summary-item:last-child { margin-bottom: 0; }
+    .lo-summary-item.lo-governing-summary {
+      background: #eef8f2;
+      border-left: 3px solid #2BAC70;
+      padding: 8px 10px;
+      border-radius: 4px;
+    }
     .lo-value-highlight { color: #2BAC70; font-weight: bold; font-size: 16px; }
     .lo-value-number { color: #1F5438; font-weight: bold; }
     .lo-util-group { display: flex; flex-direction: column; gap: 4px; text-align: right; }
+    .lo-reserve-note {
+      margin-top: 4px;
+      color: #666;
+      font-size: 12px;
+      line-height: 1.35;
+      text-align: right;
+      max-width: 300px;
+    }
     .lo-results-table {
       background: white;
       padding: 16px;
@@ -315,10 +346,15 @@
       font-weight: 600;
       color: #333;
       border-bottom: 2px solid #2BAC70;
+      white-space: normal;
     }
     .lo-results-table td { padding: 8px; border-bottom: 1px solid #e0e0e0; }
     .lo-results-table tbody tr:hover { background: #f9f9f9; }
-    .lo-results-table tbody tr.lo-recommended { background: #fffacd; font-weight: bold; }
+    .lo-results-table tbody tr.lo-governing {
+      background: #eef8f2;
+      font-weight: 600;
+      border-left: 3px solid #2BAC70;
+    }
     .lo-warning {
       background: #fff8e1;
       border: 1px solid #f0b429;
@@ -396,6 +432,11 @@
     }
     .lo-sideview-section.show { display: block; }
     .lo-sideview-section h4 { margin: 0 0 12px 0; font-size: 14px; color: #333; }
+    .lo-sideview-context {
+      margin: -6px 0 12px;
+      color: #666;
+      font-size: 12px;
+    }
     .lo-sideview-wrap {
       background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden;
     }
@@ -807,11 +848,17 @@
       <div class="lo-results" id="resultsContainer">
 
         <div class="lo-results-summary">
-          <h4>Results:</h4>
-          <div class="lo-summary-item">
-            <span><strong>Limiting Factor:</strong></span>
+          <h4>Capacity Summary:</h4>
+          <div class="lo-summary-section">
+            <div class="lo-summary-section-title">Governing Constraint</div>
+            <div class="lo-summary-item lo-governing-summary">
+              <span><strong>Constraint:</strong></span>
               <span id="limitingFactorValue" class="lo-value-highlight">–</span>
             </div>
+          </div>
+
+          <div class="lo-summary-section">
+            <div class="lo-summary-section-title">Transport Result</div>
             <div class="lo-summary-item">
               <span><strong>Total Rolls:</strong></span>
               <div style="text-align:right;">
@@ -822,23 +869,37 @@
             <div class="lo-summary-item">
               <span><strong>Utilization:</strong></span>
               <div class="lo-util-group">
-              <div>Weight: <span id="weightUtilValue" class="lo-value-number">–</span> %</div>
-              <div>Volume: <span id="volumeUtilValue" class="lo-value-number">–</span> %</div>
-              <div>Product: <span id="productM2Value" class="lo-value-number">–</span> m²</div>
+                <div>Weight Utilization: <span id="weightUtilValue" class="lo-value-number">–</span> %</div>
+                <div>Volume Utilization: <span id="volumeUtilValue" class="lo-value-number">–</span> %</div>
+                <div>Transported Product Area: <span id="productM2Value" class="lo-value-number">–</span> m²</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="lo-summary-section">
+            <div class="lo-summary-section-title">Remaining Capacity</div>
+            <div class="lo-summary-item">
+              <span><strong>Remaining Capacity:</strong></span>
+              <div class="lo-util-group">
+                <div>Remaining Payload: <span id="remainingPayloadValue" class="lo-value-number">–</span> kg</div>
+                <div>Unused Payload: <span id="unusedPayloadValue" class="lo-value-number">–</span> %</div>
+                <div>Unused Volume: <span id="unusedVolumeValue" class="lo-value-number">–</span> %</div>
+                <div id="capacityInterpretationValue" class="lo-reserve-note"></div>
+              </div>
             </div>
           </div>
         </div>
 
         <div class="lo-results-table">
-          <h4>Comparison Table:</h4>
+          <h4>Capacity Analysis:</h4>
           <table id="comparisonTable">
             <thead>
               <tr>
-                <th>Scenario</th>
-                <th>Rolls</th>
-                <th>kg</th>
-                <th>m²</th>
-                <th>Util. %</th>
+                <th>Constraint</th>
+                <th>Max Rolls</th>
+                <th>Total Weight</th>
+                <th>Transported Area [m²]</th>
+                <th>Payload Util. %</th>
               </tr>
             </thead>
             <tbody></tbody>
@@ -847,6 +908,7 @@
 
         <div class="lo-sideview-section" id="sideViewSection">
           <h4>🔍 Front View – Cross-Section</h4>
+          <p class="lo-sideview-context">Cross-section of the actual loading configuration.</p>
           <div class="lo-sideview-wrap">
             <svg id="sideViewSVG" width="100%" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">
               <text x="400" y="130" text-anchor="middle" fill="#aaa" font-size="14">Run a calculation to see the side view.</text>
@@ -1350,6 +1412,14 @@ class LoadOptimizerUI {
 
   showResults(res, maxW) {
     const m2PerRoll = this.optimizer.state.m2PerRoll || 0;
+    const remainingPayload = Math.max(0, maxW - res.finalWeight);
+    const unusedPayload = Math.max(0, 100 - res.utilizationWeight);
+    const unusedVolume = Math.max(0, 100 - res.utilizationVolume);
+    const interpretations = {
+      geometry: 'Geometry prevents loading additional rolls although payload capacity remains available.',
+      weight: 'Payload limit is reached before the available geometry or volume is fully used.',
+      volume: 'Volume capacity is reached before payload or geometric capacity is fully used.'
+    };
     document.getElementById('limitingFactorValue').textContent = res.limiting.name;
     document.getElementById('totalRollsValue').textContent     = res.finalRolls;
     document.getElementById('rollsDetailValue').textContent    =
@@ -1357,16 +1427,21 @@ class LoadOptimizerUI {
     document.getElementById('weightUtilValue').textContent  = this.optimizer.fmt(res.utilizationWeight);
     document.getElementById('volumeUtilValue').textContent  = this.optimizer.fmt(res.utilizationVolume);
     document.getElementById('productM2Value').textContent   = this.optimizer.fmt(res.finalM2, 0);
+    document.getElementById('remainingPayloadValue').textContent = this.optimizer.fmt(remainingPayload, 0);
+    document.getElementById('unusedPayloadValue').textContent = this.optimizer.fmt(unusedPayload);
+    document.getElementById('unusedVolumeValue').textContent = this.optimizer.fmt(unusedVolume);
+    document.getElementById('capacityInterpretationValue').textContent =
+      interpretations[res.limiting.type] || '';
     const tbody = document.querySelector('#comparisonTable tbody');
     tbody.innerHTML = '';
     res.scenarios.forEach(sc => {
       const tr  = document.createElement('tr');
       const lim = (sc.type === res.limiting.type);
-      if (lim) tr.classList.add('lo-recommended');
+      if (lim) tr.classList.add('lo-governing');
       const util = maxW > 0 ? (sc.weight / maxW * 100).toFixed(1) : '–';
       const scM2 = isFinite(sc.rolls) && m2PerRoll > 0 ? Math.round(sc.rolls * m2PerRoll) : '–';
       tr.innerHTML =
-        '<td>'+ sc.name +(lim?' ★':'')+'</td>'+
+        '<td>'+ sc.name +(lim?' &rarr; Governing Constraint':'')+'</td>'+
         '<td>'+ (sc.rolls === Infinity ? '–' : sc.rolls) +'</td>'+
         '<td>'+ (isFinite(sc.weight) ? Math.round(sc.weight) : '–') +'</td>'+
         '<td>'+ scM2 +'</td>'+