mantenimento-app 2.1.6 → 2.1.7

package/app.js

@@ -4193,10 +4193,30 @@ const defaultExpenseItems = [
         resultDetail = tr("spiegDetailResultTransfer");
       } else {
         const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
-        const benefitsHtml = benefitRows.length
-          ? `<div class="spieg-line" style="margin-top:6px"><strong>${tr("calcCompBenefitsLabel")}:</strong> ${benefitRows.map((row) => `${escapeHtml(row.label)} (${eur(row.amount)})`).join(" | ")}</div>`
-          : "";
-        resultHtml = `<div class="spieg-result-empty ok">${tr("calcNoTransferSuggested")}</div>${benefitsHtml}`;
+        if (benefitRows.length) {
+          const rawBenefs = Array.isArray(m.compensativeBenefits)
+            ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
+            : [];
+          const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+          const cardsHtml = benefitRows
+            .map((row, i) => {
+              const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
+              return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
+            })
+            .join("");
+          const total = benefitRows.reduce((s, r) => s + r.amount, 0);
+          const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
+          resultHtml = `
+            <div class="spieg-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>
+            <div class="spieg-benefits-section">
+              <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
+              <ul class="spieg-benefits-cards">${cardsHtml}</ul>
+              <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
+            </div>
+          `;
+        } else {
+          resultHtml = `<div class="spieg-result-empty ok">${tr("calcNoTransferSuggested")}</div>`;
+        }
         resultDetail = tr("spiegDetailResultNoTransfer");
       }
 

package/frontend/public/app.js

@@ -4193,10 +4193,30 @@ const defaultExpenseItems = [
         resultDetail = tr("spiegDetailResultTransfer");
       } else {
         const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
-        const benefitsHtml = benefitRows.length
-          ? `<div class="spieg-line" style="margin-top:6px"><strong>${tr("calcCompBenefitsLabel")}:</strong> ${benefitRows.map((row) => `${escapeHtml(row.label)} (${eur(row.amount)})`).join(" | ")}</div>`
-          : "";
-        resultHtml = `<div class="spieg-result-empty ok">${tr("calcNoTransferSuggested")}</div>${benefitsHtml}`;
+        if (benefitRows.length) {
+          const rawBenefs = Array.isArray(m.compensativeBenefits)
+            ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
+            : [];
+          const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+          const cardsHtml = benefitRows
+            .map((row, i) => {
+              const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
+              return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
+            })
+            .join("");
+          const total = benefitRows.reduce((s, r) => s + r.amount, 0);
+          const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
+          resultHtml = `
+            <div class="spieg-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>
+            <div class="spieg-benefits-section">
+              <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
+              <ul class="spieg-benefits-cards">${cardsHtml}</ul>
+              <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
+            </div>
+          `;
+        } else {
+          resultHtml = `<div class="spieg-result-empty ok">${tr("calcNoTransferSuggested")}</div>`;
+        }
         resultDetail = tr("spiegDetailResultNoTransfer");
       }
 

package/frontend/public/index.html

@@ -583,7 +583,7 @@
   <script src="supabase.min.js"></script>
   <script src="fabric.min.js"></script>
   <script src="html2pdf.bundle.min.js"></script>
-    <script src="app.js?v=2.1.6"></script>
+    <script src="app.js?v=2.1.7"></script>
 </body>
 </html>
 

package/frontend/public/styles.css

@@ -1648,11 +1648,11 @@
     }
 
     .spieg-item-body--result {
-      background: #ffffff;
-      border: 1px dashed #9fceb9;
-      border-radius: 10px;
-      padding: 10px 12px;
-      gap: 6px;
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      padding: 0;
+      gap: 8px;
     }
 
     .spieg-result-flow {
@@ -1681,6 +1681,113 @@
       color: #0f6a61;
     }
 
+    .spieg-no-transfer-badge {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      font-size: 1.0rem;
+      font-weight: 900;
+      color: #0a5a52;
+      background: linear-gradient(135deg, #dbf5ed, #c5eedf);
+      border: 1.5px solid #7ec4b2;
+      border-radius: 999px;
+      padding: 9px 20px;
+      letter-spacing: 0.1px;
+      box-shadow: 0 2px 10px rgba(14, 90, 82, 0.14), inset 0 1px 0 rgba(255,255,255,0.7);
+      margin-bottom: 10px;
+    }
+
+    .spieg-benefits-section {
+      display: grid;
+      gap: 6px;
+    }
+
+    .spieg-benefits-label {
+      font-size: 0.71rem;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: #4e7068;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding-left: 2px;
+    }
+
+    .spieg-benefits-cards {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: grid;
+      gap: 5px;
+    }
+
+    .spieg-benefit-card {
+      display: grid;
+      grid-template-columns: 28px 1fr auto;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 10px;
+      border-radius: 10px;
+      border: 1px solid #b8d9cf;
+      background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(240,250,246,0.92));
+      font-size: 0.83rem;
+      line-height: 1.35;
+      box-shadow: 0 1px 4px rgba(16, 74, 68, 0.08);
+    }
+
+    .spieg-benefit-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #e3f5ef, #d0ede5);
+      border: 1px solid #b6d9cf;
+      font-size: 1.0em;
+      flex-shrink: 0;
+    }
+
+    .spieg-benefit-label {
+      font-weight: 600;
+      color: #1f4642;
+      word-break: break-word;
+    }
+
+    .spieg-benefit-amount {
+      white-space: nowrap;
+      font-size: 0.94rem;
+      font-weight: 900;
+      color: #0c5e55;
+      font-variant-numeric: tabular-nums;
+      background: rgba(11, 98, 88, 0.09);
+      border-radius: 7px;
+      padding: 2px 8px;
+      border: 1px solid rgba(11, 98, 88, 0.14);
+    }
+
+    .spieg-benefits-total {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 7px 12px;
+      border-radius: 9px;
+      background: linear-gradient(135deg, #c8eee3, #aee3d4);
+      border: 1.5px solid #7ec9b6;
+      font-size: 0.8rem;
+      font-weight: 700;
+      color: #0a4c47;
+    }
+
+    .spieg-benefits-total strong {
+      font-size: 1.05rem;
+      font-weight: 900;
+      color: #073e3a;
+      font-variant-numeric: tabular-nums;
+    }
+
     @page {
       size: A4 landscape;
       margin: 8mm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantenimento-app",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Frontend + backend architecture for the mantenimento calculator",
   "type": "commonjs",
   "main": "backend/calculate-model.js",