mantenimento-app 2.4.1 → 2.4.2

package/app.js

@@ -295,6 +295,7 @@ const defaultExpenseItems = [
         calcBenefitFamilyAllowance: "Assegno familiare INPS percepito da {spouse}",
         calcBenefitPrimaryHomeMortgage: "Quota mutuo prima casa ceduta al collocatario ({payer} -> {receiver})",
         calcBenefitPrimaryHomeAssignment: "Assegnazione casa familiare - valore locativo ({receiver})",
+        calcBenefitExcludedFromTotal: "fuori totale",
         pdfCompBenefitsSection: "Benefici compensativi gia allocati",
         pdfCompBenefitsItem: "Beneficio",
         pdfCompBenefitsAmount: "Valore {currency}/mese",
@@ -654,6 +655,7 @@ const defaultExpenseItems = [
         calcBenefitFamilyAllowance: "INPS family allowance received by {spouse}",
         calcBenefitPrimaryHomeMortgage: "Primary-home mortgage share assigned to custodial parent ({payer} -> {receiver})",
         calcBenefitPrimaryHomeAssignment: "Primary home assignment - rental value ({receiver})",
+        calcBenefitExcludedFromTotal: "excluded from total",
         pdfCompBenefitsSection: "Compensative benefits already allocated",
         pdfCompBenefitsItem: "Benefit",
         pdfCompBenefitsAmount: "Value {currency}/month",
@@ -1496,6 +1498,14 @@ const defaultExpenseItems = [
       return { label, help };
     }
 
+    function isLegacyLocativeExpenseLabel(label) {
+      const normalized = String(label || "")
+        .replace(/^[^A-Za-z\u00C0-\u024F]+/, "")
+        .trim()
+        .toLowerCase();
+      return normalized === "casa (valore locativo)";
+    }
+
     function populateSuggestedExpenseOptions() {
       const select = document.getElementById("suggestedExpenseSelect");
       if (!select) return;
@@ -4638,14 +4648,14 @@ const defaultExpenseItems = [
           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 typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
           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 total = getCompensativeBenefitsTotal(benefitRows);
           const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
           resultHtml = `
             <div class="spieg-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>
@@ -4730,21 +4740,32 @@ const defaultExpenseItems = [
           const amount = Number(row.amount || 0);
           if (row.type === "family") {
             const spouse = Number(row.to) === 2 ? name2 : name1;
-            return { label: msg("calcBenefitFamilyAllowance", { spouse }), amount };
+            return { label: msg("calcBenefitFamilyAllowance", { spouse }), amount, includeInTotal: true };
           }
           if (row.type === "primary-home-mortgage") {
             const payer = Number(row.from) === 2 ? name2 : name1;
             const receiver = Number(row.to) === 2 ? name2 : name1;
-            return { label: msg("calcBenefitPrimaryHomeMortgage", { payer, receiver }), amount };
+            return { label: msg("calcBenefitPrimaryHomeMortgage", { payer, receiver }), amount, includeInTotal: true };
           }
           if (row.type === "primary-home-assignment") {
             const receiver = Number(row.to) === 2 ? name2 : name1;
-            return { label: msg("calcBenefitPrimaryHomeAssignment", { receiver }), amount };
+            return {
+              label: `${msg("calcBenefitPrimaryHomeAssignment", { receiver })} (${tr("calcBenefitExcludedFromTotal")})`,
+              amount,
+              includeInTotal: false
+            };
           }
-          return { label: tr("calcCompBenefitsLabel"), amount };
+          return { label: tr("calcCompBenefitsLabel"), amount, includeInTotal: true };
         });
     }
 
+    function getCompensativeBenefitsTotal(rows) {
+      return (rows || []).reduce((sum, row) => {
+        if (!row || row.includeInTotal === false) return sum;
+        return sum + Number(row.amount || 0);
+      }, 0);
+    }
+
     function formatCompensativeBenefitsInline(m, name1 = c1n(), name2 = c2n()) {
       return getCompensativeBenefitRows(m, name1, name2)
         .map((row) => `${row.label}: ${eur(row.amount)}`)
@@ -4851,14 +4872,14 @@ const defaultExpenseItems = [
           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 typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
           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 total = getCompensativeBenefitsTotal(benefitRows);
           const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
           benefitCardsHtml = `
             <div class="result-benefits-box">
@@ -5122,12 +5143,12 @@ const defaultExpenseItems = [
         const rawBenefs = Array.isArray(m.compensativeBenefits)
           ? m.compensativeBenefits.filter((row) => row && Number(row.amount || 0) > 0.005)
           : [];
-        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
         const cardsHtml = compBenefits.map((row, idx) => {
           const icon = (rawBenefs[idx] && typeIcons[rawBenefs[idx].type]) || "\u2726";
           return `<li class="pdf-explain-benefit-card"><span class="pdf-explain-benefit-icon">${icon}</span><span class="pdf-explain-benefit-label">${escapeHtml(row.label)}</span><strong class="pdf-explain-benefit-amount">${eur(row.amount)}</strong></li>`;
         }).join("");
-        const benefitsTotal = compBenefits.reduce((sum, row) => sum + Number(row.amount || 0), 0);
+        const benefitsTotal = getCompensativeBenefitsTotal(compBenefits);
         explainResultHtml = `
           <div class="pdf-explain-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>
           <div class="pdf-explain-benefits-section">
@@ -6050,6 +6071,7 @@ ${scenarioLab.length ? `
 
     function hydrateState(state) {
       if (!state || !state.base || !state.spese) return;
+      let stateSpeseRows = Array.isArray(state.spese) ? state.spese : [];
       Object.entries(state.base).forEach(([k, v]) => {
         const el = document.getElementById(k);
         if (!el) return;
@@ -6065,11 +6087,15 @@ ${scenarioLab.length ? `
         speseConvivenzaAutoMode = Math.max(0, Number(state.base && state.base.speseConvivenza || 0)) <= 0.005;
       }
       if (Array.isArray(state.expenseItems) && state.expenseItems.length) {
-        expenseItems = state.expenseItems.map((item, idx) => normalizeExpenseItem(item, idx));
+        const filteredPairs = state.expenseItems
+          .map((item, idx) => ({ item, row: stateSpeseRows[idx] }))
+          .filter((pair) => !isLegacyLocativeExpenseLabel(pair && pair.item && pair.item.label));
+        expenseItems = filteredPairs.map((pair, idx) => normalizeExpenseItem(pair.item, idx));
+        stateSpeseRows = filteredPairs.map((pair) => pair.row).filter((row) => row !== undefined);
       } else {
         expenseItems = defaultExpenseItems.map((item) => ({ ...item }));
       }
-      while (expenseItems.length < state.spese.length) {
+      while (expenseItems.length < stateSpeseRows.length) {
         expenseItems.push(normalizeExpenseItem(null, expenseItems.length));
       }
       scenarioLab = normalizeScenarioLabState(state.scenarioLab);
@@ -6107,7 +6133,7 @@ ${scenarioLab.length ? `
       updateSpouseLabels();
       buildExpenseRows();
       syncPermanenza("calendar");
-      state.spese.forEach((row, i) => {
+      stateSpeseRows.forEach((row, i) => {
         const c1 = document.getElementById(`c1_${i}`);
         const c2 = document.getElementById(`c2_${i}`);
         const d1 = document.getElementById(`c1d_${i}`);

package/frontend/public/app.js

@@ -295,6 +295,7 @@ const defaultExpenseItems = [
         calcBenefitFamilyAllowance: "Assegno familiare INPS percepito da {spouse}",
         calcBenefitPrimaryHomeMortgage: "Quota mutuo prima casa ceduta al collocatario ({payer} -> {receiver})",
         calcBenefitPrimaryHomeAssignment: "Assegnazione casa familiare - valore locativo ({receiver})",
+        calcBenefitExcludedFromTotal: "fuori totale",
         pdfCompBenefitsSection: "Benefici compensativi gia allocati",
         pdfCompBenefitsItem: "Beneficio",
         pdfCompBenefitsAmount: "Valore {currency}/mese",
@@ -654,6 +655,7 @@ const defaultExpenseItems = [
         calcBenefitFamilyAllowance: "INPS family allowance received by {spouse}",
         calcBenefitPrimaryHomeMortgage: "Primary-home mortgage share assigned to custodial parent ({payer} -> {receiver})",
         calcBenefitPrimaryHomeAssignment: "Primary home assignment - rental value ({receiver})",
+        calcBenefitExcludedFromTotal: "excluded from total",
         pdfCompBenefitsSection: "Compensative benefits already allocated",
         pdfCompBenefitsItem: "Benefit",
         pdfCompBenefitsAmount: "Value {currency}/month",
@@ -1496,6 +1498,14 @@ const defaultExpenseItems = [
       return { label, help };
     }
 
+    function isLegacyLocativeExpenseLabel(label) {
+      const normalized = String(label || "")
+        .replace(/^[^A-Za-z\u00C0-\u024F]+/, "")
+        .trim()
+        .toLowerCase();
+      return normalized === "casa (valore locativo)";
+    }
+
     function populateSuggestedExpenseOptions() {
       const select = document.getElementById("suggestedExpenseSelect");
       if (!select) return;
@@ -4638,14 +4648,14 @@ const defaultExpenseItems = [
           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 typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
           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 total = getCompensativeBenefitsTotal(benefitRows);
           const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
           resultHtml = `
             <div class="spieg-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>
@@ -4730,21 +4740,32 @@ const defaultExpenseItems = [
           const amount = Number(row.amount || 0);
           if (row.type === "family") {
             const spouse = Number(row.to) === 2 ? name2 : name1;
-            return { label: msg("calcBenefitFamilyAllowance", { spouse }), amount };
+            return { label: msg("calcBenefitFamilyAllowance", { spouse }), amount, includeInTotal: true };
           }
           if (row.type === "primary-home-mortgage") {
             const payer = Number(row.from) === 2 ? name2 : name1;
             const receiver = Number(row.to) === 2 ? name2 : name1;
-            return { label: msg("calcBenefitPrimaryHomeMortgage", { payer, receiver }), amount };
+            return { label: msg("calcBenefitPrimaryHomeMortgage", { payer, receiver }), amount, includeInTotal: true };
           }
           if (row.type === "primary-home-assignment") {
             const receiver = Number(row.to) === 2 ? name2 : name1;
-            return { label: msg("calcBenefitPrimaryHomeAssignment", { receiver }), amount };
+            return {
+              label: `${msg("calcBenefitPrimaryHomeAssignment", { receiver })} (${tr("calcBenefitExcludedFromTotal")})`,
+              amount,
+              includeInTotal: false
+            };
           }
-          return { label: tr("calcCompBenefitsLabel"), amount };
+          return { label: tr("calcCompBenefitsLabel"), amount, includeInTotal: true };
         });
     }
 
+    function getCompensativeBenefitsTotal(rows) {
+      return (rows || []).reduce((sum, row) => {
+        if (!row || row.includeInTotal === false) return sum;
+        return sum + Number(row.amount || 0);
+      }, 0);
+    }
+
     function formatCompensativeBenefitsInline(m, name1 = c1n(), name2 = c2n()) {
       return getCompensativeBenefitRows(m, name1, name2)
         .map((row) => `${row.label}: ${eur(row.amount)}`)
@@ -4851,14 +4872,14 @@ const defaultExpenseItems = [
           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 typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
           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 total = getCompensativeBenefitsTotal(benefitRows);
           const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
           benefitCardsHtml = `
             <div class="result-benefits-box">
@@ -5122,12 +5143,12 @@ const defaultExpenseItems = [
         const rawBenefs = Array.isArray(m.compensativeBenefits)
           ? m.compensativeBenefits.filter((row) => row && Number(row.amount || 0) > 0.005)
           : [];
-        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+        const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1", "primary-home-assignment": "\uD83C\uDFE0" };
         const cardsHtml = compBenefits.map((row, idx) => {
           const icon = (rawBenefs[idx] && typeIcons[rawBenefs[idx].type]) || "\u2726";
           return `<li class="pdf-explain-benefit-card"><span class="pdf-explain-benefit-icon">${icon}</span><span class="pdf-explain-benefit-label">${escapeHtml(row.label)}</span><strong class="pdf-explain-benefit-amount">${eur(row.amount)}</strong></li>`;
         }).join("");
-        const benefitsTotal = compBenefits.reduce((sum, row) => sum + Number(row.amount || 0), 0);
+        const benefitsTotal = getCompensativeBenefitsTotal(compBenefits);
         explainResultHtml = `
           <div class="pdf-explain-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>
           <div class="pdf-explain-benefits-section">
@@ -6050,6 +6071,7 @@ ${scenarioLab.length ? `
 
     function hydrateState(state) {
       if (!state || !state.base || !state.spese) return;
+      let stateSpeseRows = Array.isArray(state.spese) ? state.spese : [];
       Object.entries(state.base).forEach(([k, v]) => {
         const el = document.getElementById(k);
         if (!el) return;
@@ -6065,11 +6087,15 @@ ${scenarioLab.length ? `
         speseConvivenzaAutoMode = Math.max(0, Number(state.base && state.base.speseConvivenza || 0)) <= 0.005;
       }
       if (Array.isArray(state.expenseItems) && state.expenseItems.length) {
-        expenseItems = state.expenseItems.map((item, idx) => normalizeExpenseItem(item, idx));
+        const filteredPairs = state.expenseItems
+          .map((item, idx) => ({ item, row: stateSpeseRows[idx] }))
+          .filter((pair) => !isLegacyLocativeExpenseLabel(pair && pair.item && pair.item.label));
+        expenseItems = filteredPairs.map((pair, idx) => normalizeExpenseItem(pair.item, idx));
+        stateSpeseRows = filteredPairs.map((pair) => pair.row).filter((row) => row !== undefined);
       } else {
         expenseItems = defaultExpenseItems.map((item) => ({ ...item }));
       }
-      while (expenseItems.length < state.spese.length) {
+      while (expenseItems.length < stateSpeseRows.length) {
         expenseItems.push(normalizeExpenseItem(null, expenseItems.length));
       }
       scenarioLab = normalizeScenarioLabState(state.scenarioLab);
@@ -6107,7 +6133,7 @@ ${scenarioLab.length ? `
       updateSpouseLabels();
       buildExpenseRows();
       syncPermanenza("calendar");
-      state.spese.forEach((row, i) => {
+      stateSpeseRows.forEach((row, i) => {
         const c1 = document.getElementById(`c1_${i}`);
         const c2 = document.getElementById(`c2_${i}`);
         const d1 = document.getElementById(`c1d_${i}`);

package/frontend/public/index.html

@@ -626,7 +626,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.4.1"></script>
+    <script src="app.js?v=2.4.2"></script>
 </body>
 </html>
 

package/frontend/public/styles.css

@@ -885,21 +885,60 @@
     }
 
     .extra-box-first-home {
+      position: relative;
+      overflow: hidden;
       background: linear-gradient(135deg, #ffffff 0%, #f0fffe 50%, #f5faff 100%);
       border: 1px solid rgba(27, 141, 127, 0.15);
       box-shadow: 0 2px 8px rgba(27, 141, 127, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
     }
 
+    .extra-box-first-home::after {
+      content: "";
+      position: absolute;
+      inset: -40% -20% auto;
+      height: 180px;
+      background: radial-gradient(circle at 50% 50%, rgba(61, 181, 160, 0.16), rgba(216, 154, 53, 0.08) 45%, transparent 70%);
+      pointer-events: none;
+      animation: first-home-aurora 7s ease-in-out infinite alternate;
+    }
+
     .extra-box-first-home .extra-box-title::before {
       content: '🏠 ';
       margin-right: 4px;
     }
 
     .extra-box-first-home .extra-grid {
+      position: relative;
+      z-index: 1;
       gap: 8px 10px;
     }
 
+    .extra-box-first-home .field {
+      transition: transform 0.2s ease, filter 0.2s ease;
+    }
+
+    .extra-box-first-home .field:focus-within {
+      transform: translateY(-1px);
+      filter: saturate(1.04);
+    }
+
+    .extra-box-first-home .field input[type="number"],
+    .extra-box-first-home .field select {
+      border-width: 1.5px;
+      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+    }
+
+    .extra-box-first-home .field input[type="number"]:focus,
+    .extra-box-first-home .field select:focus {
+      border-color: rgba(27, 141, 127, 0.4);
+      box-shadow: 0 0 0 3px rgba(27, 141, 127, 0.14), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
+      background: linear-gradient(180deg, #ffffff, #f4fffd);
+    }
+
     .mortgage-split-slider {
+      position: relative;
+      overflow: hidden;
       margin-top: 12px;
       border: 1.5px solid rgba(27, 141, 127, 0.2);
       border-radius: 16px;
@@ -916,11 +955,25 @@
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
 
+    .mortgage-split-slider::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.55) 46%, transparent 58%);
+      transform: translateX(-120%);
+      transition: transform 0.5s ease;
+      pointer-events: none;
+    }
+
     .mortgage-split-slider:hover {
       box-shadow: 0 8px 20px rgba(27, 141, 127, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
       border-color: rgba(27, 141, 127, 0.3);
     }
 
+    .mortgage-split-slider:hover::after {
+      transform: translateX(120%);
+    }
+
     .mortgage-split-slider.is-disabled {
       opacity: 0.55;
       filter: grayscale(0.4);
@@ -1098,6 +1151,17 @@
       box-shadow: 0 2px 6px rgba(27, 141, 127, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.6);
       transition: all 0.2s ease;
       letter-spacing: 0.2px;
+      animation: split-center-breathe 2.6s ease-in-out infinite;
+    }
+
+    @keyframes first-home-aurora {
+      0% { transform: translate3d(-5%, -12%, 0) scale(1); }
+      100% { transform: translate3d(6%, -6%, 0) scale(1.08); }
+    }
+
+    @keyframes split-center-breathe {
+      0%, 100% { box-shadow: 0 2px 6px rgba(27, 141, 127, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.6); }
+      50% { box-shadow: 0 5px 14px rgba(27, 141, 127, 0.24), inset 0 1px 2px rgba(255, 255, 255, 0.75); }
     }
 
     #primaCasaMutuoSplitInfo {

package/package.json

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