Improve capacity analysis presentation

templates/roll_calculator.html

@@ -297,9 +297,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 +329,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;
@@ -807,9 +826,9 @@
       <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-item lo-governing-summary">
+            <span><strong>Governing Constraint:</strong></span>
             <span id="limitingFactorValue" class="lo-value-highlight">–</span>
           </div>
           <div class="lo-summary-item">
@@ -827,18 +846,27 @@
               <div>Product: <span id="productM2Value" class="lo-value-number">–</span> m²</div>
             </div>
           </div>
+          <div class="lo-summary-item">
+            <span><strong>Remaining Capacity:</strong></span>
+            <div class="lo-util-group">
+              <div>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 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>Theoretical Max Rolls</th>
+                <th>Theoretical Total Weight</th>
+                <th>Transported Area [m²]</th>
+                <th>Payload Util. %</th>
               </tr>
             </thead>
             <tbody></tbody>
@@ -1350,6 +1378,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: 'Payload remains available; no additional roll fits geometrically.',
+      weight: 'Payload limit is reached before volume or geometry.',
+      volume: 'Volume capacity is reached before payload or geometry.'
+    };
     document.getElementById('limitingFactorValue').textContent = res.limiting.name;
     document.getElementById('totalRollsValue').textContent     = res.finalRolls;
     document.getElementById('rollsDetailValue').textContent    =
@@ -1357,16 +1393,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>'+