mantenimento-app 2.4.8 → 2.4.10

package/app.js

@@ -30,6 +30,8 @@ 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 EXPENSE_DETAIL_NOTE_SEPARATOR = "\n---\n";
 
     const QUOTA_MANTENIMENTO_PERC = 35;
 
@@ -250,6 +252,12 @@ 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",
+        expenseDetailFreeTextPlaceholder: "Note libere aggiuntive...",
         expenseDetailCharsRemaining: "Caratteri rimanenti: {count}",
         expenseRemoveTitle: "Rimuovi voce spesa",
         expenseRemoveBtn: "Rimuovi",
@@ -612,6 +620,12 @@ 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",
+        expenseDetailFreeTextPlaceholder: "Additional free notes...",
         expenseDetailCharsRemaining: "Remaining characters: {count}",
         expenseRemoveTitle: "Remove expense item",
         expenseRemoveBtn: "Remove",
@@ -1457,6 +1471,140 @@ const defaultExpenseItems = [
       if (!textarea) return;
       autoResizeExpenseDetailTextarea(textarea, preferredHeight);
       updateExpenseDetailCounter(textarea);
+      syncExpenseDetailTableFromStore(textarea);
+    }
+
+    function parseExpenseDetailPayload(raw) {
+      const source = String(raw || "").trim();
+      let tablePart = source;
+      let notePart = "";
+      const sepIdx = source.indexOf(EXPENSE_DETAIL_NOTE_SEPARATOR);
+      if (sepIdx >= 0) {
+        tablePart = source.slice(0, sepIdx).trim();
+        notePart = source.slice(sepIdx + EXPENSE_DETAIL_NOTE_SEPARATOR.length).trim();
+      }
+
+      const tableLines = tablePart
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter(Boolean);
+      const rows = [];
+      const looseNoteLines = [];
+      tableLines.forEach((line) => {
+        const cols = line.split("|").map((part) => part.trim());
+        if (cols.length >= 2) {
+          rows.push({
+            what: cols[0] || "",
+            amount: cols[1] || "",
+            due: cols.slice(2).join(" | ") || ""
+          });
+        } else {
+          looseNoteLines.push(line);
+        }
+      });
+
+      const resolvedNote = [notePart, looseNoteLines.join("\n")]
+        .filter(Boolean)
+        .join(notePart && looseNoteLines.length ? "\n" : "")
+        .trim();
+
+      return {
+        rows: (rows.length ? rows : [{ what: "", amount: "", due: "" }]).slice(0, EXPENSE_DETAIL_MAX_ROWS),
+        note: resolvedNote
+      };
+    }
+
+    function parseExpenseDetailRows(raw) {
+      return parseExpenseDetailPayload(raw).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 serializeExpenseDetailPayload(rows, note) {
+      const tablePart = serializeExpenseDetailRows(rows);
+      const safeNote = String(note || "").trim();
+      if (!safeNote) return tablePart;
+      return `${tablePart}${tablePart ? EXPENSE_DETAIL_NOTE_SEPARATOR : ""}${safeNote}`;
+    }
+
+    function buildExpenseDetailTableHtml(textareaId, rows, note = "") {
+      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>
+        <textarea class="spese-detail-note" data-detail-note-for="${textareaId}" rows="2" maxlength="360" placeholder="${escapeHtml(tr("expenseDetailFreeTextPlaceholder"))}">${escapeHtml(note || "")}</textarea>
+      </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 noteEl = tableWrap.querySelector(`textarea[data-detail-note-for='${textareaId}']`);
+      const note = String(noteEl && noteEl.value ? noteEl.value : "");
+      const serialized = serializeExpenseDetailPayload(readExpenseDetailRowsFromTable(tableWrap), note);
+      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 existingNote = existing ? String(existing.querySelector(`textarea[data-detail-note-for='${textarea.id}']`)?.value || "") : "";
+      const existingSerialized = serializeExpenseDetailPayload(existing ? readExpenseDetailRowsFromTable(existing) : [], existingNote);
+      const storeSerialized = String(textarea.value || "").trim();
+      if (existing && existingSerialized === storeSerialized) return;
+      const payload = parseExpenseDetailPayload(storeSerialized);
+      host.innerHTML = buildExpenseDetailTableHtml(textarea.id, payload.rows, payload.note);
+      syncExpenseDetailStoreFromTable(host.querySelector(`[data-detail-table='${textarea.id}']`));
     }
 
     function collectExpenseDetailUiMeta(spouseKey, idx) {
@@ -2938,7 +3086,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 +3100,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 +3116,9 @@ const defaultExpenseItems = [
       rowsSpese.querySelectorAll("textarea.spese-detail-text").forEach((el) => {
         updateExpenseDetailTextareaUi(el);
       });
+      rowsSpese.querySelectorAll("textarea.spese-detail-store").forEach((el) => {
+        syncExpenseDetailTableFromStore(el);
+      });
       refreshExpenseDetailButtonState();
     }
 
@@ -6317,12 +6470,50 @@ ${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 payload = parseExpenseDetailPayload(textarea.value);
+        const rows = payload.rows;
+        if (rows.length < EXPENSE_DETAIL_MAX_ROWS) {
+          rows.push({ what: "", amount: "", due: "" });
+          textarea.value = serializeExpenseDetailPayload(rows, payload.note);
+          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"));
@@ -6333,6 +6524,18 @@ ${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();
+        return;
+      }
+      if (e.target && e.target.matches(".spese-detail-note")) {
+        const tableWrap = e.target.closest("[data-detail-table]");
+        syncExpenseDetailStoreFromTable(tableWrap);
+        refreshExpenseDetailButtonState();
       }
     });
 

package/frontend/public/app.js

@@ -30,6 +30,8 @@ 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 EXPENSE_DETAIL_NOTE_SEPARATOR = "\n---\n";
 
     const QUOTA_MANTENIMENTO_PERC = 35;
 
@@ -250,6 +252,12 @@ 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",
+        expenseDetailFreeTextPlaceholder: "Note libere aggiuntive...",
         expenseDetailCharsRemaining: "Caratteri rimanenti: {count}",
         expenseRemoveTitle: "Rimuovi voce spesa",
         expenseRemoveBtn: "Rimuovi",
@@ -612,6 +620,12 @@ 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",
+        expenseDetailFreeTextPlaceholder: "Additional free notes...",
         expenseDetailCharsRemaining: "Remaining characters: {count}",
         expenseRemoveTitle: "Remove expense item",
         expenseRemoveBtn: "Remove",
@@ -1457,6 +1471,140 @@ const defaultExpenseItems = [
       if (!textarea) return;
       autoResizeExpenseDetailTextarea(textarea, preferredHeight);
       updateExpenseDetailCounter(textarea);
+      syncExpenseDetailTableFromStore(textarea);
+    }
+
+    function parseExpenseDetailPayload(raw) {
+      const source = String(raw || "").trim();
+      let tablePart = source;
+      let notePart = "";
+      const sepIdx = source.indexOf(EXPENSE_DETAIL_NOTE_SEPARATOR);
+      if (sepIdx >= 0) {
+        tablePart = source.slice(0, sepIdx).trim();
+        notePart = source.slice(sepIdx + EXPENSE_DETAIL_NOTE_SEPARATOR.length).trim();
+      }
+
+      const tableLines = tablePart
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter(Boolean);
+      const rows = [];
+      const looseNoteLines = [];
+      tableLines.forEach((line) => {
+        const cols = line.split("|").map((part) => part.trim());
+        if (cols.length >= 2) {
+          rows.push({
+            what: cols[0] || "",
+            amount: cols[1] || "",
+            due: cols.slice(2).join(" | ") || ""
+          });
+        } else {
+          looseNoteLines.push(line);
+        }
+      });
+
+      const resolvedNote = [notePart, looseNoteLines.join("\n")]
+        .filter(Boolean)
+        .join(notePart && looseNoteLines.length ? "\n" : "")
+        .trim();
+
+      return {
+        rows: (rows.length ? rows : [{ what: "", amount: "", due: "" }]).slice(0, EXPENSE_DETAIL_MAX_ROWS),
+        note: resolvedNote
+      };
+    }
+
+    function parseExpenseDetailRows(raw) {
+      return parseExpenseDetailPayload(raw).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 serializeExpenseDetailPayload(rows, note) {
+      const tablePart = serializeExpenseDetailRows(rows);
+      const safeNote = String(note || "").trim();
+      if (!safeNote) return tablePart;
+      return `${tablePart}${tablePart ? EXPENSE_DETAIL_NOTE_SEPARATOR : ""}${safeNote}`;
+    }
+
+    function buildExpenseDetailTableHtml(textareaId, rows, note = "") {
+      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>
+        <textarea class="spese-detail-note" data-detail-note-for="${textareaId}" rows="2" maxlength="360" placeholder="${escapeHtml(tr("expenseDetailFreeTextPlaceholder"))}">${escapeHtml(note || "")}</textarea>
+      </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 noteEl = tableWrap.querySelector(`textarea[data-detail-note-for='${textareaId}']`);
+      const note = String(noteEl && noteEl.value ? noteEl.value : "");
+      const serialized = serializeExpenseDetailPayload(readExpenseDetailRowsFromTable(tableWrap), note);
+      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 existingNote = existing ? String(existing.querySelector(`textarea[data-detail-note-for='${textarea.id}']`)?.value || "") : "";
+      const existingSerialized = serializeExpenseDetailPayload(existing ? readExpenseDetailRowsFromTable(existing) : [], existingNote);
+      const storeSerialized = String(textarea.value || "").trim();
+      if (existing && existingSerialized === storeSerialized) return;
+      const payload = parseExpenseDetailPayload(storeSerialized);
+      host.innerHTML = buildExpenseDetailTableHtml(textarea.id, payload.rows, payload.note);
+      syncExpenseDetailStoreFromTable(host.querySelector(`[data-detail-table='${textarea.id}']`));
     }
 
     function collectExpenseDetailUiMeta(spouseKey, idx) {
@@ -2938,7 +3086,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 +3100,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 +3116,9 @@ const defaultExpenseItems = [
       rowsSpese.querySelectorAll("textarea.spese-detail-text").forEach((el) => {
         updateExpenseDetailTextareaUi(el);
       });
+      rowsSpese.querySelectorAll("textarea.spese-detail-store").forEach((el) => {
+        syncExpenseDetailTableFromStore(el);
+      });
       refreshExpenseDetailButtonState();
     }
 
@@ -6317,12 +6470,50 @@ ${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 payload = parseExpenseDetailPayload(textarea.value);
+        const rows = payload.rows;
+        if (rows.length < EXPENSE_DETAIL_MAX_ROWS) {
+          rows.push({ what: "", amount: "", due: "" });
+          textarea.value = serializeExpenseDetailPayload(rows, payload.note);
+          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"));
@@ -6333,6 +6524,18 @@ ${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();
+        return;
+      }
+      if (e.target && e.target.matches(".spese-detail-note")) {
+        const tableWrap = e.target.closest("[data-detail-table]");
+        syncExpenseDetailStoreFromTable(tableWrap);
+        refreshExpenseDetailButtonState();
       }
     });
 

package/frontend/public/index.html

@@ -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.8"></script>
+    <script src="app.js?v=2.4.10"></script>
 </body>
 </html>
 

package/frontend/public/styles.css

@@ -1523,6 +1523,89 @@
       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-note {
+      width: 100%;
+      margin-top: 6px;
+      border: 1px solid #bfd5d0;
+      border-radius: 6px;
+      background: #ffffff;
+      color: #214b47;
+      font-size: 0.72rem;
+      line-height: 1.3;
+      padding: 6px 7px;
+      resize: vertical;
+      min-height: 46px;
+    }
+
     .spese-detail-counter {
       margin-top: 3px;
       font-size: 0.66rem;

package/package.json

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