mantenimento-app 2.4.7 → 2.4.9

package/app.js

@@ -30,6 +30,7 @@ const defaultExpenseItems = [
     const SCENARIO_LABELS = ["A", "B", "C", "D", "E", "F"];
     const EXPENSE_DETAIL_MAX_CHARS = 560;
     const EXPENSE_DETAIL_MAX_LINES = 10;
+    const EXPENSE_DETAIL_MAX_ROWS = 8;
 
     const QUOTA_MANTENIMENTO_PERC = 35;
 
@@ -250,6 +251,11 @@ const defaultExpenseItems = [
         expenseDetailBtn: "Dettaglio",
         expenseDetailTitle: "Apri dettaglio voce spesa",
         expenseDetailPlaceholder: "Scrivi qui il dettaglio di questa cifra (es. mesi, quota, riferimento).",
+        expenseDetailColThing: "Cosa",
+        expenseDetailColAmount: "Quanto",
+        expenseDetailColDue: "Scadenza",
+        expenseDetailAddRow: "Aggiungi riga",
+        expenseDetailRemoveRow: "Rimuovi riga",
         expenseDetailCharsRemaining: "Caratteri rimanenti: {count}",
         expenseRemoveTitle: "Rimuovi voce spesa",
         expenseRemoveBtn: "Rimuovi",
@@ -612,6 +618,11 @@ const defaultExpenseItems = [
         expenseDetailBtn: "Detail",
         expenseDetailTitle: "Open expense detail",
         expenseDetailPlaceholder: "Write details for this amount (e.g. months, share, reference).",
+        expenseDetailColThing: "What",
+        expenseDetailColAmount: "How much",
+        expenseDetailColDue: "Due date",
+        expenseDetailAddRow: "Add row",
+        expenseDetailRemoveRow: "Remove row",
         expenseDetailCharsRemaining: "Remaining characters: {count}",
         expenseRemoveTitle: "Remove expense item",
         expenseRemoveBtn: "Remove",
@@ -1457,6 +1468,105 @@ const defaultExpenseItems = [
       if (!textarea) return;
       autoResizeExpenseDetailTextarea(textarea, preferredHeight);
       updateExpenseDetailCounter(textarea);
+      syncExpenseDetailTableFromStore(textarea);
+    }
+
+    function parseExpenseDetailRows(raw) {
+      const lines = String(raw || "")
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter(Boolean);
+      if (!lines.length) return [{ what: "", amount: "", due: "" }];
+      return lines
+        .map((line) => {
+          const cols = line.split("|").map((part) => part.trim());
+          if (cols.length >= 2) {
+            return {
+              what: cols[0] || "",
+              amount: cols[1] || "",
+              due: cols.slice(2).join(" | ") || ""
+            };
+          }
+          return { what: line, amount: "", due: "" };
+        })
+        .slice(0, EXPENSE_DETAIL_MAX_ROWS);
+    }
+
+    function sanitizeExpenseDetailCell(value) {
+      return String(value || "")
+        .replace(/[\r\n]+/g, " ")
+        .replace(/\|/g, "/")
+        .trim();
+    }
+
+    function serializeExpenseDetailRows(rows) {
+      const compact = (Array.isArray(rows) ? rows : [])
+        .map((row) => ({
+          what: sanitizeExpenseDetailCell(row && row.what),
+          amount: sanitizeExpenseDetailCell(row && row.amount),
+          due: sanitizeExpenseDetailCell(row && row.due)
+        }))
+        .filter((row) => row.what || row.amount || row.due);
+      return compact.map((row) => `${row.what} | ${row.amount} | ${row.due}`.trim()).join("\n");
+    }
+
+    function buildExpenseDetailTableHtml(textareaId, rows) {
+      const safeRows = (Array.isArray(rows) && rows.length ? rows : [{ what: "", amount: "", due: "" }])
+        .slice(0, EXPENSE_DETAIL_MAX_ROWS);
+      const rowsHtml = safeRows.map((row) => {
+        const canRemove = safeRows.length > 1;
+        return `<tr>
+          <td><input class="spese-detail-cell-input" data-col="what" type="text" maxlength="120" value="${escapeHtml(row.what || "")}" /></td>
+          <td><input class="spese-detail-cell-input" data-col="amount" type="text" maxlength="80" value="${escapeHtml(row.amount || "")}" /></td>
+          <td><input class="spese-detail-cell-input" data-col="due" type="text" maxlength="80" value="${escapeHtml(row.due || "")}" /></td>
+          <td class="spese-detail-actions-cell"><button type="button" class="spese-detail-row-remove" data-row-remove="1" ${canRemove ? "" : "disabled"} title="${escapeHtml(tr("expenseDetailRemoveRow"))}">-</button></td>
+        </tr>`;
+      }).join("");
+      return `<div class="spese-detail-grid-wrap" data-detail-table="${textareaId}">
+        <table class="spese-detail-grid" aria-label="${escapeHtml(tr("expenseDetailTitle"))}">
+          <thead>
+            <tr>
+              <th>${escapeHtml(tr("expenseDetailColThing"))}</th>
+              <th>${escapeHtml(tr("expenseDetailColAmount"))}</th>
+              <th>${escapeHtml(tr("expenseDetailColDue"))}</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>${rowsHtml}</tbody>
+        </table>
+        <button type="button" class="btn-secondary spese-detail-add-row" data-row-add="${textareaId}">${escapeHtml(tr("expenseDetailAddRow"))}</button>
+      </div>`;
+    }
+
+    function readExpenseDetailRowsFromTable(tableWrap) {
+      if (!tableWrap) return [];
+      return Array.from(tableWrap.querySelectorAll("tbody tr")).map((trEl) => ({
+        what: String(trEl.querySelector('input[data-col="what"]')?.value || "").trim(),
+        amount: String(trEl.querySelector('input[data-col="amount"]')?.value || "").trim(),
+        due: String(trEl.querySelector('input[data-col="due"]')?.value || "").trim()
+      }));
+    }
+
+    function syncExpenseDetailStoreFromTable(tableWrap) {
+      if (!tableWrap) return;
+      const textareaId = String(tableWrap.getAttribute("data-detail-table") || "");
+      const textarea = textareaId ? document.getElementById(textareaId) : null;
+      if (!textarea) return;
+      const serialized = serializeExpenseDetailRows(readExpenseDetailRowsFromTable(tableWrap));
+      textarea.value = serialized.slice(0, EXPENSE_DETAIL_MAX_CHARS);
+      updateExpenseDetailCounter(textarea);
+    }
+
+    function syncExpenseDetailTableFromStore(textarea) {
+      if (!textarea || !textarea.id) return;
+      const host = document.getElementById(`${textarea.id}TableHost`);
+      if (!host) return;
+      const existing = host.querySelector(`[data-detail-table='${textarea.id}']`);
+      const existingSerialized = serializeExpenseDetailRows(existing ? readExpenseDetailRowsFromTable(existing) : []);
+      const storeSerialized = String(textarea.value || "").trim();
+      if (existing && existingSerialized === storeSerialized) return;
+      host.innerHTML = buildExpenseDetailTableHtml(textarea.id, parseExpenseDetailRows(storeSerialized));
+      syncExpenseDetailStoreFromTable(host.querySelector(`[data-detail-table='${textarea.id}']`));
     }
 
     function collectExpenseDetailUiMeta(spouseKey, idx) {
@@ -2938,7 +3048,8 @@ const defaultExpenseItems = [
                 <button class="btn-secondary spese-detail-btn" type="button" data-detail-target="c1d_${idx}" data-detail-wrap="c1dw_${idx}" title="${tr("expenseDetailTitle")}"><span class="spese-detail-label">${tr("expenseDetailBtn")}</span></button>
               </div>
               <div class="spese-detail-wrap is-hidden" id="c1dw_${idx}">
-                <textarea id="c1d_${idx}" class="spese-detail-text" rows="2" maxlength="${EXPENSE_DETAIL_MAX_CHARS}" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}" aria-describedby="c1d_${idx}Counter"></textarea>
+                <div id="c1d_${idx}TableHost"></div>
+                <textarea id="c1d_${idx}" class="spese-detail-text spese-detail-store" rows="2" maxlength="${EXPENSE_DETAIL_MAX_CHARS}" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}" aria-describedby="c1d_${idx}Counter"></textarea>
                 <div class="spese-detail-counter" id="c1d_${idx}Counter" aria-live="polite"></div>
               </div>
               <span class="spese-partial" id="p1_${idx}" title="${tr("expensePartialTitle")}">${tr("expensePartialLabel")}: ${eurTiny(0)}</span>
@@ -2951,7 +3062,8 @@ const defaultExpenseItems = [
                 <button class="btn-secondary spese-detail-btn" type="button" data-detail-target="c2d_${idx}" data-detail-wrap="c2dw_${idx}" title="${tr("expenseDetailTitle")}"><span class="spese-detail-label">${tr("expenseDetailBtn")}</span></button>
               </div>
               <div class="spese-detail-wrap is-hidden" id="c2dw_${idx}">
-                <textarea id="c2d_${idx}" class="spese-detail-text" rows="2" maxlength="${EXPENSE_DETAIL_MAX_CHARS}" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}" aria-describedby="c2d_${idx}Counter"></textarea>
+                <div id="c2d_${idx}TableHost"></div>
+                <textarea id="c2d_${idx}" class="spese-detail-text spese-detail-store" rows="2" maxlength="${EXPENSE_DETAIL_MAX_CHARS}" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}" aria-describedby="c2d_${idx}Counter"></textarea>
                 <div class="spese-detail-counter" id="c2d_${idx}Counter" aria-live="polite"></div>
               </div>
               <span class="spese-partial" id="p2_${idx}" title="${tr("expensePartialTitle")}">${tr("expensePartialLabel")}: ${eurTiny(0)}</span>
@@ -2966,6 +3078,9 @@ const defaultExpenseItems = [
       rowsSpese.querySelectorAll("textarea.spese-detail-text").forEach((el) => {
         updateExpenseDetailTextareaUi(el);
       });
+      rowsSpese.querySelectorAll("textarea.spese-detail-store").forEach((el) => {
+        syncExpenseDetailTableFromStore(el);
+      });
       refreshExpenseDetailButtonState();
     }
 
@@ -4918,8 +5033,10 @@ const defaultExpenseItems = [
         [tr("pdfAmountPerChild"), eur((Math.max(m.assegnoDa1a2, m.assegnoDa2a1)) / m.figli), "warn"]
       ];
 
-      if (benefitsInline) {
-        items.push([tr("calcCompBenefitsLabel"), benefitsInline, "warn"]);
+      const kpiBenefitLines = getCompensativeBenefitRows(m, c1n(), c2n())
+        .map((row) => `${escapeHtml(row.label)}: ${eur(row.amount)}`);
+      if (kpiBenefitLines.length) {
+        items.push([tr("calcCompBenefitsLabel"), kpiBenefitLines.join("<br />"), "warn", true]);
       }
 
       if (m.incomeMode === "cu") {
@@ -4932,13 +5049,20 @@ const defaultExpenseItems = [
         );
       }
 
-      items.forEach(([label, value, cls]) => {
+      items.forEach(([label, value, cls, isHtml = false]) => {
         const el = document.createElement("div");
         el.className = "kpi-item";
-        if (label === tr("calcCompBenefitsLabel")) {
+        const isBenefitsRow = label === tr("calcCompBenefitsLabel");
+        if (isBenefitsRow) {
           el.classList.add("kpi-item--longtext");
         }
-        el.innerHTML = `<span>${label}</span><strong class="${cls}">${value}</strong>`;
+        const safeLabel = escapeHtml(String(label || ""));
+        const safeValue = isHtml ? String(value || "") : escapeHtml(String(value || ""));
+        if (isBenefitsRow) {
+          el.innerHTML = `<span>${safeLabel}</span><p class="kpi-longtext-value ${cls}">${safeValue}</p>`;
+        } else {
+          el.innerHTML = `<span>${safeLabel}</span><strong class="${cls}">${safeValue}</strong>`;
+        }
         kpi.appendChild(el);
       });
     }
@@ -6308,12 +6432,49 @@ ${scenarioLab.length ? `
           detailBtn.classList.toggle("is-open", willOpen);
           if (target) {
             updateExpenseDetailTextareaUi(target);
-            if (willOpen) target.focus();
+            if (willOpen) {
+              const firstField = document.querySelector(`#${targetId}TableHost .spese-detail-cell-input`);
+              if (firstField) firstField.focus();
+            }
           }
         }
         return;
       }
 
+      const addRowBtn = e.target && e.target.closest("button[data-row-add]");
+      if (addRowBtn) {
+        const textareaId = String(addRowBtn.getAttribute("data-row-add") || "");
+        const textarea = textareaId ? document.getElementById(textareaId) : null;
+        if (!textarea) return;
+        const rows = parseExpenseDetailRows(textarea.value);
+        if (rows.length < EXPENSE_DETAIL_MAX_ROWS) {
+          rows.push({ what: "", amount: "", due: "" });
+          textarea.value = serializeExpenseDetailRows(rows);
+          syncExpenseDetailTableFromStore(textarea);
+          refreshExpenseDetailButtonState();
+        }
+        return;
+      }
+
+      const removeRowBtn = e.target && e.target.closest("button[data-row-remove]");
+      if (removeRowBtn) {
+        const tableWrap = removeRowBtn.closest("[data-detail-table]");
+        const rowEl = removeRowBtn.closest("tr");
+        if (!tableWrap || !rowEl) return;
+        const rows = readExpenseDetailRowsFromTable(tableWrap);
+        const rowEls = Array.from(tableWrap.querySelectorAll("tbody tr"));
+        const removeIdx = rowEls.indexOf(rowEl);
+        if (removeIdx >= 0) rows.splice(removeIdx, 1);
+        const nextRows = rows.length ? rows : [{ what: "", amount: "", due: "" }];
+        const textareaId = String(tableWrap.getAttribute("data-detail-table") || "");
+        const textarea = textareaId ? document.getElementById(textareaId) : null;
+        if (!textarea) return;
+        textarea.value = serializeExpenseDetailRows(nextRows);
+        syncExpenseDetailTableFromStore(textarea);
+        refreshExpenseDetailButtonState();
+        return;
+      }
+
       const btn = e.target && e.target.closest("button[data-remove-expense-idx]");
       if (!btn) return;
       const idx = Number(btn.getAttribute("data-remove-expense-idx"));
@@ -6324,6 +6485,12 @@ ${scenarioLab.length ? `
       if (e.target && e.target.matches("textarea.spese-detail-text")) {
         updateExpenseDetailTextareaUi(e.target);
         refreshExpenseDetailButtonState();
+        return;
+      }
+      if (e.target && e.target.matches(".spese-detail-cell-input")) {
+        const tableWrap = e.target.closest("[data-detail-table]");
+        syncExpenseDetailStoreFromTable(tableWrap);
+        refreshExpenseDetailButtonState();
       }
     });
 

package/frontend/public/app.js

@@ -30,6 +30,7 @@ const defaultExpenseItems = [
     const SCENARIO_LABELS = ["A", "B", "C", "D", "E", "F"];
     const EXPENSE_DETAIL_MAX_CHARS = 560;
     const EXPENSE_DETAIL_MAX_LINES = 10;
+    const EXPENSE_DETAIL_MAX_ROWS = 8;
 
     const QUOTA_MANTENIMENTO_PERC = 35;
 
@@ -250,6 +251,11 @@ const defaultExpenseItems = [
         expenseDetailBtn: "Dettaglio",
         expenseDetailTitle: "Apri dettaglio voce spesa",
         expenseDetailPlaceholder: "Scrivi qui il dettaglio di questa cifra (es. mesi, quota, riferimento).",
+        expenseDetailColThing: "Cosa",
+        expenseDetailColAmount: "Quanto",
+        expenseDetailColDue: "Scadenza",
+        expenseDetailAddRow: "Aggiungi riga",
+        expenseDetailRemoveRow: "Rimuovi riga",
         expenseDetailCharsRemaining: "Caratteri rimanenti: {count}",
         expenseRemoveTitle: "Rimuovi voce spesa",
         expenseRemoveBtn: "Rimuovi",
@@ -612,6 +618,11 @@ const defaultExpenseItems = [
         expenseDetailBtn: "Detail",
         expenseDetailTitle: "Open expense detail",
         expenseDetailPlaceholder: "Write details for this amount (e.g. months, share, reference).",
+        expenseDetailColThing: "What",
+        expenseDetailColAmount: "How much",
+        expenseDetailColDue: "Due date",
+        expenseDetailAddRow: "Add row",
+        expenseDetailRemoveRow: "Remove row",
         expenseDetailCharsRemaining: "Remaining characters: {count}",
         expenseRemoveTitle: "Remove expense item",
         expenseRemoveBtn: "Remove",
@@ -1457,6 +1468,105 @@ const defaultExpenseItems = [
       if (!textarea) return;
       autoResizeExpenseDetailTextarea(textarea, preferredHeight);
       updateExpenseDetailCounter(textarea);
+      syncExpenseDetailTableFromStore(textarea);
+    }
+
+    function parseExpenseDetailRows(raw) {
+      const lines = String(raw || "")
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter(Boolean);
+      if (!lines.length) return [{ what: "", amount: "", due: "" }];
+      return lines
+        .map((line) => {
+          const cols = line.split("|").map((part) => part.trim());
+          if (cols.length >= 2) {
+            return {
+              what: cols[0] || "",
+              amount: cols[1] || "",
+              due: cols.slice(2).join(" | ") || ""
+            };
+          }
+          return { what: line, amount: "", due: "" };
+        })
+        .slice(0, EXPENSE_DETAIL_MAX_ROWS);
+    }
+
+    function sanitizeExpenseDetailCell(value) {
+      return String(value || "")
+        .replace(/[\r\n]+/g, " ")
+        .replace(/\|/g, "/")
+        .trim();
+    }
+
+    function serializeExpenseDetailRows(rows) {
+      const compact = (Array.isArray(rows) ? rows : [])
+        .map((row) => ({
+          what: sanitizeExpenseDetailCell(row && row.what),
+          amount: sanitizeExpenseDetailCell(row && row.amount),
+          due: sanitizeExpenseDetailCell(row && row.due)
+        }))
+        .filter((row) => row.what || row.amount || row.due);
+      return compact.map((row) => `${row.what} | ${row.amount} | ${row.due}`.trim()).join("\n");
+    }
+
+    function buildExpenseDetailTableHtml(textareaId, rows) {
+      const safeRows = (Array.isArray(rows) && rows.length ? rows : [{ what: "", amount: "", due: "" }])
+        .slice(0, EXPENSE_DETAIL_MAX_ROWS);
+      const rowsHtml = safeRows.map((row) => {
+        const canRemove = safeRows.length > 1;
+        return `<tr>
+          <td><input class="spese-detail-cell-input" data-col="what" type="text" maxlength="120" value="${escapeHtml(row.what || "")}" /></td>
+          <td><input class="spese-detail-cell-input" data-col="amount" type="text" maxlength="80" value="${escapeHtml(row.amount || "")}" /></td>
+          <td><input class="spese-detail-cell-input" data-col="due" type="text" maxlength="80" value="${escapeHtml(row.due || "")}" /></td>
+          <td class="spese-detail-actions-cell"><button type="button" class="spese-detail-row-remove" data-row-remove="1" ${canRemove ? "" : "disabled"} title="${escapeHtml(tr("expenseDetailRemoveRow"))}">-</button></td>
+        </tr>`;
+      }).join("");
+      return `<div class="spese-detail-grid-wrap" data-detail-table="${textareaId}">
+        <table class="spese-detail-grid" aria-label="${escapeHtml(tr("expenseDetailTitle"))}">
+          <thead>
+            <tr>
+              <th>${escapeHtml(tr("expenseDetailColThing"))}</th>
+              <th>${escapeHtml(tr("expenseDetailColAmount"))}</th>
+              <th>${escapeHtml(tr("expenseDetailColDue"))}</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>${rowsHtml}</tbody>
+        </table>
+        <button type="button" class="btn-secondary spese-detail-add-row" data-row-add="${textareaId}">${escapeHtml(tr("expenseDetailAddRow"))}</button>
+      </div>`;
+    }
+
+    function readExpenseDetailRowsFromTable(tableWrap) {
+      if (!tableWrap) return [];
+      return Array.from(tableWrap.querySelectorAll("tbody tr")).map((trEl) => ({
+        what: String(trEl.querySelector('input[data-col="what"]')?.value || "").trim(),
+        amount: String(trEl.querySelector('input[data-col="amount"]')?.value || "").trim(),
+        due: String(trEl.querySelector('input[data-col="due"]')?.value || "").trim()
+      }));
+    }
+
+    function syncExpenseDetailStoreFromTable(tableWrap) {
+      if (!tableWrap) return;
+      const textareaId = String(tableWrap.getAttribute("data-detail-table") || "");
+      const textarea = textareaId ? document.getElementById(textareaId) : null;
+      if (!textarea) return;
+      const serialized = serializeExpenseDetailRows(readExpenseDetailRowsFromTable(tableWrap));
+      textarea.value = serialized.slice(0, EXPENSE_DETAIL_MAX_CHARS);
+      updateExpenseDetailCounter(textarea);
+    }
+
+    function syncExpenseDetailTableFromStore(textarea) {
+      if (!textarea || !textarea.id) return;
+      const host = document.getElementById(`${textarea.id}TableHost`);
+      if (!host) return;
+      const existing = host.querySelector(`[data-detail-table='${textarea.id}']`);
+      const existingSerialized = serializeExpenseDetailRows(existing ? readExpenseDetailRowsFromTable(existing) : []);
+      const storeSerialized = String(textarea.value || "").trim();
+      if (existing && existingSerialized === storeSerialized) return;
+      host.innerHTML = buildExpenseDetailTableHtml(textarea.id, parseExpenseDetailRows(storeSerialized));
+      syncExpenseDetailStoreFromTable(host.querySelector(`[data-detail-table='${textarea.id}']`));
     }
 
     function collectExpenseDetailUiMeta(spouseKey, idx) {
@@ -2938,7 +3048,8 @@ const defaultExpenseItems = [
                 <button class="btn-secondary spese-detail-btn" type="button" data-detail-target="c1d_${idx}" data-detail-wrap="c1dw_${idx}" title="${tr("expenseDetailTitle")}"><span class="spese-detail-label">${tr("expenseDetailBtn")}</span></button>
               </div>
               <div class="spese-detail-wrap is-hidden" id="c1dw_${idx}">
-                <textarea id="c1d_${idx}" class="spese-detail-text" rows="2" maxlength="${EXPENSE_DETAIL_MAX_CHARS}" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}" aria-describedby="c1d_${idx}Counter"></textarea>
+                <div id="c1d_${idx}TableHost"></div>
+                <textarea id="c1d_${idx}" class="spese-detail-text spese-detail-store" rows="2" maxlength="${EXPENSE_DETAIL_MAX_CHARS}" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}" aria-describedby="c1d_${idx}Counter"></textarea>
                 <div class="spese-detail-counter" id="c1d_${idx}Counter" aria-live="polite"></div>
               </div>
               <span class="spese-partial" id="p1_${idx}" title="${tr("expensePartialTitle")}">${tr("expensePartialLabel")}: ${eurTiny(0)}</span>
@@ -2951,7 +3062,8 @@ const defaultExpenseItems = [
                 <button class="btn-secondary spese-detail-btn" type="button" data-detail-target="c2d_${idx}" data-detail-wrap="c2dw_${idx}" title="${tr("expenseDetailTitle")}"><span class="spese-detail-label">${tr("expenseDetailBtn")}</span></button>
               </div>
               <div class="spese-detail-wrap is-hidden" id="c2dw_${idx}">
-                <textarea id="c2d_${idx}" class="spese-detail-text" rows="2" maxlength="${EXPENSE_DETAIL_MAX_CHARS}" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}" aria-describedby="c2d_${idx}Counter"></textarea>
+                <div id="c2d_${idx}TableHost"></div>
+                <textarea id="c2d_${idx}" class="spese-detail-text spese-detail-store" rows="2" maxlength="${EXPENSE_DETAIL_MAX_CHARS}" placeholder="${escapeHtml(tr("expenseDetailPlaceholder"))}" aria-describedby="c2d_${idx}Counter"></textarea>
                 <div class="spese-detail-counter" id="c2d_${idx}Counter" aria-live="polite"></div>
               </div>
               <span class="spese-partial" id="p2_${idx}" title="${tr("expensePartialTitle")}">${tr("expensePartialLabel")}: ${eurTiny(0)}</span>
@@ -2966,6 +3078,9 @@ const defaultExpenseItems = [
       rowsSpese.querySelectorAll("textarea.spese-detail-text").forEach((el) => {
         updateExpenseDetailTextareaUi(el);
       });
+      rowsSpese.querySelectorAll("textarea.spese-detail-store").forEach((el) => {
+        syncExpenseDetailTableFromStore(el);
+      });
       refreshExpenseDetailButtonState();
     }
 
@@ -4918,8 +5033,10 @@ const defaultExpenseItems = [
         [tr("pdfAmountPerChild"), eur((Math.max(m.assegnoDa1a2, m.assegnoDa2a1)) / m.figli), "warn"]
       ];
 
-      if (benefitsInline) {
-        items.push([tr("calcCompBenefitsLabel"), benefitsInline, "warn"]);
+      const kpiBenefitLines = getCompensativeBenefitRows(m, c1n(), c2n())
+        .map((row) => `${escapeHtml(row.label)}: ${eur(row.amount)}`);
+      if (kpiBenefitLines.length) {
+        items.push([tr("calcCompBenefitsLabel"), kpiBenefitLines.join("<br />"), "warn", true]);
       }
 
       if (m.incomeMode === "cu") {
@@ -4932,13 +5049,20 @@ const defaultExpenseItems = [
         );
       }
 
-      items.forEach(([label, value, cls]) => {
+      items.forEach(([label, value, cls, isHtml = false]) => {
         const el = document.createElement("div");
         el.className = "kpi-item";
-        if (label === tr("calcCompBenefitsLabel")) {
+        const isBenefitsRow = label === tr("calcCompBenefitsLabel");
+        if (isBenefitsRow) {
           el.classList.add("kpi-item--longtext");
         }
-        el.innerHTML = `<span>${label}</span><strong class="${cls}">${value}</strong>`;
+        const safeLabel = escapeHtml(String(label || ""));
+        const safeValue = isHtml ? String(value || "") : escapeHtml(String(value || ""));
+        if (isBenefitsRow) {
+          el.innerHTML = `<span>${safeLabel}</span><p class="kpi-longtext-value ${cls}">${safeValue}</p>`;
+        } else {
+          el.innerHTML = `<span>${safeLabel}</span><strong class="${cls}">${safeValue}</strong>`;
+        }
         kpi.appendChild(el);
       });
     }
@@ -6308,12 +6432,49 @@ ${scenarioLab.length ? `
           detailBtn.classList.toggle("is-open", willOpen);
           if (target) {
             updateExpenseDetailTextareaUi(target);
-            if (willOpen) target.focus();
+            if (willOpen) {
+              const firstField = document.querySelector(`#${targetId}TableHost .spese-detail-cell-input`);
+              if (firstField) firstField.focus();
+            }
           }
         }
         return;
       }
 
+      const addRowBtn = e.target && e.target.closest("button[data-row-add]");
+      if (addRowBtn) {
+        const textareaId = String(addRowBtn.getAttribute("data-row-add") || "");
+        const textarea = textareaId ? document.getElementById(textareaId) : null;
+        if (!textarea) return;
+        const rows = parseExpenseDetailRows(textarea.value);
+        if (rows.length < EXPENSE_DETAIL_MAX_ROWS) {
+          rows.push({ what: "", amount: "", due: "" });
+          textarea.value = serializeExpenseDetailRows(rows);
+          syncExpenseDetailTableFromStore(textarea);
+          refreshExpenseDetailButtonState();
+        }
+        return;
+      }
+
+      const removeRowBtn = e.target && e.target.closest("button[data-row-remove]");
+      if (removeRowBtn) {
+        const tableWrap = removeRowBtn.closest("[data-detail-table]");
+        const rowEl = removeRowBtn.closest("tr");
+        if (!tableWrap || !rowEl) return;
+        const rows = readExpenseDetailRowsFromTable(tableWrap);
+        const rowEls = Array.from(tableWrap.querySelectorAll("tbody tr"));
+        const removeIdx = rowEls.indexOf(rowEl);
+        if (removeIdx >= 0) rows.splice(removeIdx, 1);
+        const nextRows = rows.length ? rows : [{ what: "", amount: "", due: "" }];
+        const textareaId = String(tableWrap.getAttribute("data-detail-table") || "");
+        const textarea = textareaId ? document.getElementById(textareaId) : null;
+        if (!textarea) return;
+        textarea.value = serializeExpenseDetailRows(nextRows);
+        syncExpenseDetailTableFromStore(textarea);
+        refreshExpenseDetailButtonState();
+        return;
+      }
+
       const btn = e.target && e.target.closest("button[data-remove-expense-idx]");
       if (!btn) return;
       const idx = Number(btn.getAttribute("data-remove-expense-idx"));
@@ -6324,6 +6485,12 @@ ${scenarioLab.length ? `
       if (e.target && e.target.matches("textarea.spese-detail-text")) {
         updateExpenseDetailTextareaUi(e.target);
         refreshExpenseDetailButtonState();
+        return;
+      }
+      if (e.target && e.target.matches(".spese-detail-cell-input")) {
+        const tableWrap = e.target.closest("[data-detail-table]");
+        syncExpenseDetailStoreFromTable(tableWrap);
+        refreshExpenseDetailButtonState();
       }
     });
 

package/frontend/public/index.html

@@ -88,7 +88,7 @@
     ]
   }
   </script>
-    <link rel="stylesheet" href="styles.css?v=2.4.7" />
+    <link rel="stylesheet" href="styles.css?v=2.4.8" />
 </head>
 <body>
   <div class="wrap">
@@ -630,7 +630,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.7"></script>
+    <script src="app.js?v=2.4.9"></script>
 </body>
 </html>
 

package/frontend/public/styles.css

@@ -1000,7 +1000,7 @@
         linear-gradient(180deg, #fafffe, #f2f8f7);
       padding: 14px;
       display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(180px, 2fr) minmax(0, 1fr);
+      grid-template-columns: minmax(170px, 0.9fr) minmax(380px, 2.9fr) minmax(170px, 0.9fr);
       gap: 10px;
       align-items: center;
       box-shadow: 0 10px 18px rgba(27, 141, 127, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65);
@@ -1039,7 +1039,9 @@
       min-height: 74px;
       display: grid;
       align-content: center;
+      justify-items: center;
       gap: 4px;
+      text-align: center;
       box-shadow: 0 2px 6px rgba(27, 141, 127, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.7);
       transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
       position: relative;
@@ -1081,7 +1083,7 @@
 
     .mortgage-split-side-right {
       box-shadow: 0 2px 6px rgba(27, 141, 127, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.7), inset -3px 0 0 #d89a35;
-      text-align: right;
+      text-align: center;
       background: linear-gradient(135deg, #fef9f1 0%, #fdf5e8 100%);
     }
 
@@ -1097,6 +1099,7 @@
       overflow-wrap: anywhere;
       letter-spacing: 0.2px;
       text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
+      text-align: center;
     }
 
     .mortgage-split-amount {
@@ -1109,6 +1112,7 @@
       -webkit-text-fill-color: transparent;
       background-clip: text;
       filter: drop-shadow(0 1px 2px rgba(27, 141, 127, 0.2));
+      text-align: center;
     }
 
     .mortgage-split-side-right .mortgage-split-amount {
@@ -1120,7 +1124,7 @@
 
     .mortgage-split-range-wrap {
       position: relative;
-      padding: 20px 0 8px;
+      padding: 30px 0 8px;
       --split-left: 50%;
     }
 
@@ -1231,7 +1235,7 @@
 
     .mortgage-split-center {
       position: absolute;
-      top: 2px;
+      top: -14px;
       left: var(--split-left);
       transform: translateX(-50%);
       font-size: 0.92rem;
@@ -1246,6 +1250,8 @@
       transition: all 0.2s ease;
       letter-spacing: 0.2px;
       animation: split-center-breathe 2.6s ease-in-out infinite;
+      z-index: 3;
+      pointer-events: none;
     }
 
     @keyframes first-home-aurora {
@@ -1517,6 +1523,75 @@
       color: #204644;
     }
 
+    .spese-detail-store {
+      display: none;
+    }
+
+    .spese-detail-grid-wrap {
+      border: 1px solid #c8dad4;
+      border-radius: 8px;
+      background: #f9fcfb;
+      padding: 6px;
+    }
+
+    .spese-detail-grid {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+      font-size: 0.72rem;
+      color: #204644;
+    }
+
+    .spese-detail-grid th {
+      text-align: left;
+      font-size: 0.68rem;
+      font-weight: 800;
+      color: #3b6964;
+      padding: 2px 4px 5px;
+    }
+
+    .spese-detail-grid td {
+      padding: 3px;
+      vertical-align: middle;
+    }
+
+    .spese-detail-cell-input {
+      width: 100%;
+      border: 1px solid #bfd5d0;
+      border-radius: 6px;
+      background: #ffffff;
+      color: #214b47;
+      font-size: 0.72rem;
+      padding: 4px 6px;
+    }
+
+    .spese-detail-actions-cell {
+      width: 30px;
+      text-align: center;
+    }
+
+    .spese-detail-row-remove {
+      width: 24px;
+      height: 24px;
+      border: 1px solid #c4d7d2;
+      border-radius: 6px;
+      background: #ffffff;
+      color: #355b57;
+      font-weight: 800;
+      cursor: pointer;
+    }
+
+    .spese-detail-row-remove:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+
+    .spese-detail-add-row {
+      margin-top: 6px;
+      padding: 3px 8px;
+      font-size: 0.67rem;
+    }
+
     .spese-detail-counter {
       margin-top: 3px;
       font-size: 0.66rem;
@@ -2552,19 +2627,33 @@
     }
 
     .kpi-item--longtext {
+      flex-direction: column;
       align-items: flex-start;
+      gap: 5px;
+    }
+
+    .kpi-item--longtext span {
+      width: 100%;
+      flex: none;
     }
 
-    .kpi-item--longtext strong {
+    .kpi-longtext-value {
+      margin: 0;
+      width: 100%;
       white-space: normal;
       text-align: left;
-      font-size: 0.88rem;
-      line-height: 1.32;
+      font-size: 0.95rem;
+      font-weight: 700;
+      line-height: 1.42;
       overflow-wrap: anywhere;
       word-break: break-word;
-      flex: 1;
+      color: #9a5a00;
     }
 
+    .kpi-longtext-value.ok { color: #0c6c52; }
+    .kpi-longtext-value.warn { color: #9a5a00; }
+    .kpi-longtext-value.bad { color: #b53c2f; }
+
     .spieg-details {
       border: 1px solid #bed9d4;
       border-radius: 12px;

package/package.json

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