mantenimento-app 1.1.2 → 1.1.4

package/README.md

@@ -88,3 +88,39 @@ Opzioni tipiche:
 ## Note
 - Strumento orientativo: non sostituisce valutazione legale/professionale.
 - Per ulteriore hardening: rate limit API, auth server-side, logging audit, WAF/CDN.
+
+## Compliance GDPR e legale (checklist operativa)
+Questa checklist aiuta a ridurre rischi di non conformita per istanze pubblicate in Italia/UE.
+
+1. Governance e ruoli
+- Definisci il titolare del trattamento per ogni istanza pubblicata.
+- Se usi fornitori cloud, verifica nomina a responsabile del trattamento (DPA) dove richiesto.
+
+2. Documentazione minima
+- Mantieni aggiornate `privacy.html`, `cookie.html` e `termini.html`.
+- Mantieni un registro dei trattamenti (art. 30 GDPR) se applicabile alla tua organizzazione.
+
+3. Basi giuridiche e minimizzazione
+- Tratta solo dati necessari al calcolo e alle funzioni richieste.
+- Documenta base giuridica per account, sincronizzazione e sicurezza.
+
+4. Sicurezza
+- Non salvare segreti backend nel frontend.
+- Mantieni cifratura lato client del profilo cloud.
+- Applica controllo accessi, backup e monitoraggio su infrastruttura server.
+
+5. Conservazione e diritti interessati
+- Definisci tempi/criteri di retention per dati cloud e log tecnici.
+- Predisponi processo per richieste di accesso, rettifica, cancellazione e opposizione.
+
+6. Cookie e storage locale
+- Usa storage locale solo per finalita tecniche necessarie.
+- In caso di strumenti analytics/marketing futuri, valuta banner e consenso dove richiesto.
+
+7. Licenze software
+- Verifica compatibilita licenze di dipendenze e librerie terze.
+- Mantieni file `LICENSE` e attribuzioni necessarie nei materiali distribuiti.
+
+8. Ambito medico-legale
+- Questo progetto NON e un dispositivo medico e non fornisce pareri legali.
+- Evita claim diagnostici/clinici o automatismi decisionali su diritti soggettivi.

package/app.js

@@ -183,6 +183,8 @@ const defaultExpenseItems = [
         incomeHintAnnual: "Entrate nette annuali di {spouse}: il sistema converte automaticamente in quota mensile (/12).",
         incomeHintMonthly: "Entrate nette mensili disponibili di {spouse}.",
         liveNetAvailablePerson: "Netto disponibile {spouse}",
+        liveNetPostSupportPerson: "Netto post-assegno {spouse}",
+        liveDaysWithSpouse: "{days} gg con {spouse}",
         liveTotalIncome: "Entrate totali (reddito + assegni + INPS)",
         livePaidToOther: "Assegno mantenimento pagato all'altro coniuge",
         livePaidExternal: "Assegno mantenimento pagato esterno",
@@ -379,6 +381,8 @@ const defaultExpenseItems = [
         incomeHintAnnual: "Yearly net income for {spouse}: automatically converted to monthly amount (/12).",
         incomeHintMonthly: "Available monthly net income for {spouse}.",
         liveNetAvailablePerson: "Net available {spouse}",
+        liveNetPostSupportPerson: "Post-support net {spouse}",
+        liveDaysWithSpouse: "{days} days with {spouse}",
         liveTotalIncome: "Total income (income + support + INPS)",
         livePaidToOther: "Support paid to the other spouse",
         livePaidExternal: "External support paid",
@@ -461,6 +465,7 @@ const defaultExpenseItems = [
     let incomeModeLast = "monthly";
     let currentLang = "it";
     let currentCurrency = "EUR";
+    const CALC_API_BASE = String(window.KEYLOCK_CALC_API_BASE || "").trim().replace(/\/+$/, "");
 
     function tr(key) {
       const table = I18N[currentLang] || I18N.it;
@@ -485,6 +490,42 @@ const defaultExpenseItems = [
       return n * rate;
     }
 
+    function resolveCalculationApiUrl() {
+      if (CALC_API_BASE) return `${CALC_API_BASE}/api/calculate`;
+      const host = String((window.location && window.location.hostname) || "").toLowerCase();
+      if (host === "localhost" || host === "127.0.0.1") return "/api/calculate";
+      return null;
+    }
+
+    function patchFabricTextBaselineTypo() {
+      if (!window.fabric || !window.fabric.Text || !window.fabric.Text.prototype) return;
+      const proto = window.fabric.Text.prototype;
+      if (proto.__keylockBaselinePatched) return;
+
+      // Fabric 5 in this bundle uses the non-standard baseline value "alphabetical".
+      proto._setTextStyles = function(ctx, styleDeclaration, forMeasuring) {
+        if (!ctx) return;
+        ctx.textBaseline = "alphabetic";
+        if (this.path) {
+          switch (this.pathAlign) {
+            case "center":
+              ctx.textBaseline = "middle";
+              break;
+            case "ascender":
+              ctx.textBaseline = "top";
+              break;
+            case "descender":
+              ctx.textBaseline = "bottom";
+              break;
+            default:
+              break;
+          }
+        }
+        ctx.font = this._getFontDeclaration(styleDeclaration, forMeasuring);
+      };
+      proto.__keylockBaselinePatched = true;
+    }
+
     function normalizeUiZoom(value) {
       const n = Number(value);
       if (!Number.isFinite(n)) return 1;
@@ -1118,21 +1159,37 @@ const defaultExpenseItems = [
 
     function initCoffeeDonationPicker() {
       const heroCoffeeBtn = document.querySelector(".btn-coffee-hero");
+      const heroDonateWrap = document.querySelector(".hero-donate");
+      const heroDonateMenu = document.querySelector(".hero-donate-menu");
       const coffeeFloat = document.querySelector(".coffee-float");
       const floatBtn = document.querySelector(".coffee-float-btn");
       const floatCard = document.querySelector(".coffee-float-card");
       const donateBanner = document.querySelector(".donate-banner");
       if (!heroCoffeeBtn || !coffeeFloat || !floatBtn || !floatCard) return;
 
+      function setHeroDonateOpen(open) {
+        if (!heroDonateWrap) return;
+        heroDonateWrap.classList.toggle("is-open", !!open);
+        heroCoffeeBtn.setAttribute("aria-expanded", open ? "true" : "false");
+      }
+
       floatBtn.setAttribute("aria-haspopup", "true");
       floatBtn.setAttribute("aria-expanded", "false");
+      heroCoffeeBtn.setAttribute("aria-haspopup", "true");
+      heroCoffeeBtn.setAttribute("aria-expanded", "false");
 
       heroCoffeeBtn.addEventListener("click", (e) => {
-        // Keep the href as no-JS fallback, but open the local payment chooser when JS is active.
         e.preventDefault();
-        setCoffeePickerOpen(true);
+        const willOpen = !(heroDonateWrap && heroDonateWrap.classList.contains("is-open"));
+        setHeroDonateOpen(willOpen);
       });
 
+      if (heroDonateMenu) {
+        heroDonateMenu.addEventListener("click", (e) => {
+          if (e.target && e.target.closest("a")) setHeroDonateOpen(false);
+        });
+      }
+
       if (donateBanner) {
         donateBanner.addEventListener("click", (e) => {
           // Let payment links keep their native behavior.
@@ -1161,12 +1218,16 @@ const defaultExpenseItems = [
       });
 
       document.addEventListener("click", (e) => {
-        if (e.target.closest(".coffee-float") || e.target.closest(".btn-coffee-hero")) return;
+        if (e.target.closest(".coffee-float") || e.target.closest(".hero-donate")) return;
+        setHeroDonateOpen(false);
         setCoffeePickerOpen(false);
       });
 
       document.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") setCoffeePickerOpen(false);
+        if (e.key === "Escape") {
+          setHeroDonateOpen(false);
+          setCoffeePickerOpen(false);
+        }
       });
     }
 
@@ -1474,8 +1535,8 @@ const defaultExpenseItems = [
       expenseItems.forEach((item, idx) => {
         const labelEsc = escapeHtml(item.label);
         const helpEsc = escapeHtml(item.help);
-        const tr = document.createElement("tr");
-        tr.innerHTML = `
+        const rowEl = document.createElement("tr");
+        rowEl.innerHTML = `
           <td><span class="label-row">${labelEsc}<span class="hint" title="${helpEsc}">i</span></span></td>
           <td>
             <div class="spese-input-wrap">
@@ -1493,7 +1554,7 @@ const defaultExpenseItems = [
             <button class="btn-secondary spese-remove-btn" type="button" data-remove-expense-idx="${idx}" title="${tr("expenseRemoveTitle")}">${tr("expenseRemoveBtn")}</button>
           </td>
         `;
-        rowsSpese.appendChild(tr);
+        rowsSpese.appendChild(rowEl);
       });
     }
 
@@ -1746,18 +1807,21 @@ const defaultExpenseItems = [
 
     function computeModel() {
       const payload = collectCalculationPayload();
-      try {
-        const xhr = new XMLHttpRequest();
-        xhr.open("POST", "/api/calculate", false);
-        xhr.setRequestHeader("Content-Type", "application/json");
-        xhr.send(JSON.stringify(payload));
-
-        if (xhr.status >= 200 && xhr.status < 300) {
-          const body = JSON.parse(xhr.responseText || "{}");
-          if (body && body.ok && body.model) return body.model;
+      const apiUrl = resolveCalculationApiUrl();
+      if (apiUrl) {
+        try {
+          const xhr = new XMLHttpRequest();
+          xhr.open("POST", apiUrl, false);
+          xhr.setRequestHeader("Content-Type", "application/json");
+          xhr.send(JSON.stringify(payload));
+
+          if (xhr.status >= 200 && xhr.status < 300) {
+            const body = JSON.parse(xhr.responseText || "{}");
+            if (body && body.ok && body.model) return body.model;
+          }
+        } catch (_) {
+          // Fallback handled below.
         }
-      } catch (_) {
-        // Fallback handled below.
       }
 
       return computeModelLocal(payload);
@@ -1780,21 +1844,27 @@ const defaultExpenseItems = [
     function renderLivePanel(m) {
       const liveNet = document.getElementById("liveNet");
       const liveBreakdown = document.getElementById("liveBreakdown");
+      if (!liveNet || !liveBreakdown) return;
 
       const entrate1 = m.r1 + m.aPerc1 + m.aFam1;
       const entrate2 = m.r2 + m.aPerc2 + m.aFam2;
       const uscite1 = m.match12 + m.esternoPag1 + m.spese1;
       const uscite2 = m.match21 + m.esternoPag2 + m.spese2;
-      const diffDisp = m.disp1 - m.disp2;
+      const hasSuggestedSupport = Math.max(m.assegnoDa1a2, m.assegnoDa2a1) > 0.005;
+      const shownDisp1 = hasSuggestedSupport ? m.post1 : m.disp1;
+      const shownDisp2 = hasSuggestedSupport ? m.post2 : m.disp2;
+      const liveNetLabelKey = hasSuggestedSupport ? "liveNetPostSupportPerson" : "liveNetAvailablePerson";
+      const diffDisp = shownDisp1 - shownDisp2;
       const absDiffDisp = Math.abs(diffDisp);
+
       liveNet.innerHTML = `
         <div class="live-k">
-          ${msg("liveNetAvailablePerson", { spouse: c1n() })}
-          <strong class="${m.disp1 >= 0 ? "ok" : "bad"}">${eur(m.disp1)}</strong>
+          ${msg(liveNetLabelKey, { spouse: c1n() })}
+          <strong class="${shownDisp1 >= 0 ? "ok" : "bad"}">${eur(shownDisp1)}</strong>
         </div>
         <div class="live-k">
-          ${msg("liveNetAvailablePerson", { spouse: c2n() })}
-          <strong class="${m.disp2 >= 0 ? "ok" : "bad"}">${eur(m.disp2)}</strong>
+          ${msg(liveNetLabelKey, { spouse: c2n() })}
+          <strong class="${shownDisp2 >= 0 ? "ok" : "bad"}">${eur(shownDisp2)}</strong>
         </div>
         <div class="live-diff">
           <div class="live-fabric-wrap">
@@ -1814,6 +1884,8 @@ const defaultExpenseItems = [
             <div class="live-row"><span>${tr("livePaidExternal")}</span><strong class="warn">${eur(m.esternoPag1)}</strong></div>
             <div class="live-row"><span>${tr("liveTotalExpensesEntered")}</span><strong class="warn">${eur(m.spese1)}</strong></div>
             <div class="live-row"><span>${tr("liveTotalOutflows")}</span><strong class="warn">${eur(uscite1)}</strong></div>
+            ${hasSuggestedSupport ? `<div class="live-row"><span>${tr("pdfSuggestedSupport")}</span><strong class="warn">-${eur(m.assegnoDa1a2)}${m.assegnoDa2a1 > 0.005 ? ` / +${eur(m.assegnoDa2a1)}` : ""}</strong></div>` : ""}
+            <div class="live-row"><span>${tr("pdfPostSupport")}</span><strong class="${shownDisp1 >= 0 ? "ok" : "bad"}">${eur(shownDisp1)}</strong></div>
           </div>
           <div class="live-col">
             <h4>${c2n()}</h4>
@@ -1822,6 +1894,8 @@ const defaultExpenseItems = [
             <div class="live-row"><span>${tr("livePaidExternal")}</span><strong class="warn">${eur(m.esternoPag2)}</strong></div>
             <div class="live-row"><span>${tr("liveTotalExpensesEntered")}</span><strong class="warn">${eur(m.spese2)}</strong></div>
             <div class="live-row"><span>${tr("liveTotalOutflows")}</span><strong class="warn">${eur(uscite2)}</strong></div>
+            ${hasSuggestedSupport ? `<div class="live-row"><span>${tr("pdfSuggestedSupport")}</span><strong class="warn">-${eur(m.assegnoDa2a1)}${m.assegnoDa1a2 > 0.005 ? ` / +${eur(m.assegnoDa1a2)}` : ""}</strong></div>` : ""}
+            <div class="live-row"><span>${tr("pdfPostSupport")}</span><strong class="${shownDisp2 >= 0 ? "ok" : "bad"}">${eur(shownDisp2)}</strong></div>
           </div>
         </div>
       `;
@@ -1852,6 +1926,13 @@ const defaultExpenseItems = [
       const shift = (diffDisp / totalAbs) * (radius * 1.5);
       const pointerX = Math.max(centerX - radius * 1.6, Math.min(centerX + radius * 1.6, centerX + shift));
 
+      const grad = (x1, y1, x2, y2, stops) => new window.fabric.Gradient({
+        type: "linear",
+        gradientUnits: "pixels",
+        coords: { x1, y1, x2, y2 },
+        colorStops: stops
+      });
+
       fc.add(new window.fabric.Rect({
         left: 8,
         top: 8,
@@ -1886,10 +1967,10 @@ const defaultExpenseItems = [
 
       function addOutcomeFigure(left, top, spouseId, role) {
         const palette = role === "winner"
-          ? { bg: "#ddf2ec", stroke: "#9ccfc2", ink: "#0d625a" }
+          ? { bgA: "#ecfff9", bgB: "#9bd9cb", stroke: "#8ec9bb", ink: "#0d625a" }
           : role === "loser"
-            ? { bg: "#f8ecd9", stroke: "#dfbf8f", ink: "#8a580f" }
-            : { bg: "#eaf2f0", stroke: "#bfd2cd", ink: "#3d5c59" };
+            ? { bgA: "#fff8e8", bgB: "#f2be75", stroke: "#e3b677", ink: "#8a580f" }
+            : { bgA: "#f6faf9", bgB: "#c5dbd6", stroke: "#bfd2cd", ink: "#3d5c59" };
 
         const scale = figRadius / 38;
 
@@ -1897,7 +1978,10 @@ const defaultExpenseItems = [
           left,
           top,
           radius: figRadius,
-          fill: palette.bg,
+          fill: grad(left, top, left, top + (figRadius * 2), [
+            { offset: 0, color: palette.bgA },
+            { offset: 1, color: palette.bgB }
+          ]),
           stroke: palette.stroke,
           strokeWidth: 1.5,
           shadow: "0 2px 6px rgba(0,0,0,0.10)"
@@ -1953,16 +2037,15 @@ const defaultExpenseItems = [
       }
 
       const reservedForFigures = (figDiameter * 2) + (figMargin * 2) + 16;
-      const badgeAvailableW = Math.max(120, Math.min(w - 20, w - reservedForFigures));
-      const badgeW = Math.min(520, badgeAvailableW);
+      const badgeAvailableW = Math.max(132, Math.min(w - 20, w - reservedForFigures));
+      const badgeW = Math.min(500, badgeAvailableW);
       const badgeX = (w - badgeW) / 2;
       const badgeText = `${statusText} | ${tr("pdfDelta")} ${eur(absDiffDisp)}`;
-      const badgeMaxFontSize = isNarrow ? 16 : (w < 560 ? 24 : 28);
-      const badgeMinFontSize = isNarrow ? 12 : 10;
-      const badgeInnerW = badgeW - 36;
-      const badgeBaseHeight = isNarrow ? 46 : (w < 560 ? 56 : 62);
+      const badgeMaxFontSize = isNarrow ? 14 : (w < 560 ? 18 : 22);
+      const badgeMinFontSize = isNarrow ? 10 : 10;
+      const badgeInnerW = badgeW - 28;
+      const badgeBaseHeight = isNarrow ? 42 : (w < 560 ? 48 : 54);
 
-      // Allow multiline on narrow screens: shrink font only if needed, then grow badge height if text still wraps.
       let badgeFontSize = badgeMaxFontSize;
       let badgeProbe = new window.fabric.Textbox(badgeText, {
         width: badgeInnerW,
@@ -1972,7 +2055,7 @@ const defaultExpenseItems = [
         textAlign: "center",
         lineHeight: 1.05
       });
-      while (badgeProbe.height > (badgeBaseHeight - 10) && badgeFontSize > badgeMinFontSize) {
+      while (badgeProbe.height > (badgeBaseHeight - 8) && badgeFontSize > badgeMinFontSize) {
         badgeFontSize -= 1;
         badgeProbe = new window.fabric.Textbox(badgeText, {
           width: badgeInnerW,
@@ -1989,18 +2072,24 @@ const defaultExpenseItems = [
       const badgeHeight = Math.max(badgeBaseHeight, Math.ceil(badgeProbe.height) + 10);
       fc.add(new window.fabric.Rect({
         left: badgeX,
-        top: 18,
+        top: 20,
         width: badgeW,
         height: badgeHeight,
-        rx: 20,
-        ry: 20,
-        fill: "#ffffff",
-        stroke: diffDisp === 0 ? "#98b8b3" : (diffDisp > 0 ? "#8ec3b9" : "#d9b47e"),
-        strokeWidth: 1
+        rx: 18,
+        ry: 18,
+        fill: diffDisp === 0
+          ? grad(badgeX, 20, badgeX, 20 + badgeHeight, [{ offset: 0, color: "#ffffff" }, { offset: 1, color: "#d6ebe6" }])
+          : (diffDisp > 0
+              ? grad(badgeX, 20, badgeX, 20 + badgeHeight, [{ offset: 0, color: "#f4fffc" }, { offset: 1, color: "#a9ddd2" }])
+              : grad(badgeX, 20, badgeX, 20 + badgeHeight, [{ offset: 0, color: "#fffaf0" }, { offset: 1, color: "#f1cd93" }])
+            ),
+        stroke: diffDisp === 0 ? "#98b8b3" : (diffDisp > 0 ? "#7bbdb0" : "#d4a864"),
+        strokeWidth: 1.4,
+        shadow: "0 4px 10px rgba(0,0,0,0.12)"
       }));
       fc.add(new window.fabric.Textbox(badgeText, {
-        left: badgeX + badgeW / 2,
-        top: 18 + (badgeHeight - badgeProbe.height) / 2,
+        left: badgeX + (badgeW / 2),
+        top: 20 + ((badgeHeight - badgeProbe.height) / 2),
         width: badgeInnerW,
         originX: "center",
         textAlign: "center",
@@ -2031,7 +2120,10 @@ const defaultExpenseItems = [
         height: 18,
         rx: 9,
         ry: 9,
-        fill: "#bfe3da"
+        fill: grad(trackLeft, centerY - 9, trackLeft + (trackWidth / 2), centerY + 9, [
+          { offset: 0, color: "#bfe9df" },
+          { offset: 1, color: "#6ec0b0" }
+        ])
       }));
       fc.add(new window.fabric.Rect({
         left: centerX,
@@ -2040,7 +2132,10 @@ const defaultExpenseItems = [
         height: 18,
         rx: 9,
         ry: 9,
-        fill: "#efd7b0"
+        fill: grad(centerX, centerY - 9, centerX + (trackWidth / 2), centerY + 9, [
+          { offset: 0, color: "#f2d8ab" },
+          { offset: 1, color: "#deaa59" }
+        ])
       }));
 
       fc.add(new window.fabric.Rect({
@@ -2063,20 +2158,30 @@ const defaultExpenseItems = [
         left: pointerX - 12,
         top: centerY - 12,
         radius: 12,
-        fill: diffDisp >= 0 ? "#0b6e66" : "#c77a11",
+        fill: diffDisp >= 0
+          ? grad(pointerX - 12, centerY - 12, pointerX - 12, centerY + 12, [{ offset: 0, color: "#1a8f85" }, { offset: 1, color: "#0b6e66" }])
+          : grad(pointerX - 12, centerY - 12, pointerX - 12, centerY + 12, [{ offset: 0, color: "#e39b35" }, { offset: 1, color: "#c77a11" }]),
         stroke: "#ffffff",
         strokeWidth: 3,
         shadow: "0 2px 7px rgba(0,0,0,0.24)"
       }));
 
-      // Side labels: full names, anchored to edges, with adaptive font size.
-      const sideLabelTop = centerY + 21;
+      // Side labels: names plus effective days out of 30.
+      const sideLabelTop = centerY + 18;
+      const sideDaysTop = sideLabelTop + 15;
       const sideLabelMaxW = Math.max(58, trackWidth / 2 - 34);
       const sideBaseFont = 13;
       const sideFontFamily = "Candara";
       const sideFontWeight = "700";
 
       const leftName = c1n();
+      const rightName = c2n();
+      const days1 = Math.round((m.perm1 / 100) * 30 * 10) / 10;
+      const days2 = Math.round((m.perm2 / 100) * 30 * 10) / 10;
+      const fmtDays = (v) => Number.isInteger(v) ? String(v) : v.toFixed(1);
+      const leftDaysLabel = msg("liveDaysWithSpouse", { days: fmtDays(days1), spouse: leftName });
+      const rightDaysLabel = msg("liveDaysWithSpouse", { days: fmtDays(days2), spouse: rightName });
+
       const leftProbe = new window.fabric.Text(leftName, {
         fontSize: sideBaseFont,
         fontFamily: sideFontFamily,
@@ -2086,7 +2191,6 @@ const defaultExpenseItems = [
         ? sideBaseFont
         : Math.max(10, Math.floor(sideBaseFont * sideLabelMaxW / leftProbe.width));
 
-      const rightName = c2n();
       const rightProbe = new window.fabric.Text(rightName, {
         fontSize: sideBaseFont,
         fontFamily: sideFontFamily,
@@ -2096,6 +2200,24 @@ const defaultExpenseItems = [
         ? sideBaseFont
         : Math.max(10, Math.floor(sideBaseFont * sideLabelMaxW / rightProbe.width));
 
+      const leftDaysProbe = new window.fabric.Text(leftDaysLabel, {
+        fontSize: 10,
+        fontFamily: sideFontFamily,
+        fontWeight: "700"
+      });
+      const leftDaysFont = leftDaysProbe.width <= sideLabelMaxW
+        ? 10
+        : Math.max(8, Math.floor(10 * sideLabelMaxW / leftDaysProbe.width));
+
+      const rightDaysProbe = new window.fabric.Text(rightDaysLabel, {
+        fontSize: 10,
+        fontFamily: sideFontFamily,
+        fontWeight: "700"
+      });
+      const rightDaysFont = rightDaysProbe.width <= sideLabelMaxW
+        ? 10
+        : Math.max(8, Math.floor(10 * sideLabelMaxW / rightDaysProbe.width));
+
       fc.add(new window.fabric.Text(leftName, {
         left: trackLeft,
         top: sideLabelTop,
@@ -2114,6 +2236,24 @@ const defaultExpenseItems = [
         fontFamily: sideFontFamily,
         fontWeight: sideFontWeight
       }));
+      fc.add(new window.fabric.Text(leftDaysLabel, {
+        left: trackLeft,
+        top: sideDaysTop,
+        originX: "left",
+        fontSize: leftDaysFont,
+        fill: "#2e6963",
+        fontFamily: sideFontFamily,
+        fontWeight: "700"
+      }));
+      fc.add(new window.fabric.Text(rightDaysLabel, {
+        left: trackLeft + trackWidth,
+        top: sideDaysTop,
+        originX: "right",
+        fontSize: rightDaysFont,
+        fill: "#8a5b1f",
+        fontFamily: sideFontFamily,
+        fontWeight: "700"
+      }));
 
       fc.renderAll();
     }
@@ -2124,9 +2264,12 @@ const defaultExpenseItems = [
       return tr("calcModeGenovaName");
     }
 
-    function calculate() {
-      const m = computeModel();
+    function calculate(model = null) {
+      const m = model || computeModel();
       const formulaNote = document.getElementById("formulaNote");
+      const resultMain = document.getElementById("risultatoMain");
+      const kpi = document.getElementById("kpi");
+      if (!formulaNote || !resultMain || !kpi) return;
 
       const modeName = getModeName(m.mode, m.simplePerc);
 
@@ -2192,9 +2335,8 @@ const defaultExpenseItems = [
       } else if (m.assegnoDa2a1 > 0.005) {
         mainText = `${c2n()} \u2192 ${c1n()}: ${eur(m.assegnoDa2a1)} ${tr("pdfPerMonth")}`;
       }
-      document.getElementById("risultatoMain").textContent = mainText;
+      resultMain.textContent = mainText;
 
-      const kpi = document.getElementById("kpi");
       kpi.innerHTML = "";
 
       const items = [
@@ -2223,7 +2365,7 @@ const defaultExpenseItems = [
       const m = computeModel();
       updateExpensePartials();
       renderLivePanel(m);
-      calculate();
+      calculate(m);
     }
 
     function applyState(state) {
@@ -2955,6 +3097,7 @@ const defaultExpenseItems = [
 
     populateSuggestedExpenseOptions();
     initPreferences();
+    patchFabricTextBaselineTypo();
     applyStaticTranslations();
     buildExpenseRows();
     initUiZoom();