buhanka-finance-app 1.63.0 → 1.65.0

package/index.html

@@ -111,8 +111,11 @@ table.stick tr.subtotal .nm{background:var(--subbg)}
 table.wide{border-collapse:separate;border-spacing:0;table-layout:fixed}
 table.wide th,table.wide td{padding:5px 8px;white-space:nowrap;font-size:12.5px;border-bottom:1px solid var(--line)}
 table.wide th.nm,table.wide td.nm{position:sticky;left:0;z-index:3;background:var(--panel);width:230px;min-width:230px;max-width:230px;overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--line2)}
-table.wide thead th{position:sticky;top:0;z-index:4;background:var(--panel2)}
-table.wide thead th.nm{z-index:5;background:var(--panel2)}
+table.wide thead th{position:sticky;top:0;z-index:6;background:var(--panel2)}
+table.wide thead th.nm{z-index:7;background:var(--panel2)}
+/* ячейки тела получают свой слой ниже шапки — иначе поля ввода в Chrome всплывают поверх неё */
+table.wide tbody td{position:relative;z-index:0}
+table.wide tbody td.nm{position:sticky;z-index:3}
 table.wide td.num,table.wide th.num{text-align:right;font-variant-numeric:tabular-nums}
 table.wide tr.sec>td{font-weight:800;background:var(--subbg)}
 table.wide tr.sec>td.nm{color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
@@ -124,7 +127,10 @@ table.wide tr.acc>td{color:var(--muted);font-weight:400}
 table.wide tr.bal>td{background:transparent;color:var(--text);font-weight:400}
 table.wide tr.bal>td.nm{font-weight:700;color:var(--text)}
 table.wide tr.bal.brd>td{border-top:1px solid var(--line2)}
-table.wide col.plan,table.wide th.plan{background:rgba(232,163,61,.06)}
+table.wide col.plan{background:rgba(232,163,61,.06)}
+/* у шапки подсветка кладётся поверх непрозрачного фона, иначе строки просвечивают сквозь неё */
+table.wide thead th.plan{background-color:var(--panel2);
+  background-image:linear-gradient(rgba(232,163,61,.06),rgba(232,163,61,.06))}
 table.wide tr.sec>td.nm,table.wide tr.sub>td.nm{background:var(--subbg)}
 table.wide tr.tot>td.nm{background-color:var(--panel);background-image:linear-gradient(var(--grandbg),var(--grandbg))}
 table.wide tr.bal>td.nm,table.wide tr.val>td.nm,table.wide tr.acc>td.nm{background:var(--panel)}
@@ -301,7 +307,7 @@ tr.subtotal>td:first-child{color:var(--accent);box-shadow:inset 3px 0 0 var(--ac
 
 <script>
 /* ============================================================ БУХАНКА · Финансы v2 ============================================================ */
-const APP_VERSION='9.6';
+const APP_VERSION='9.8';
 const SCHEMA=8;                      /* версия структуры данных; растёт при доработках */
 const STORE_KEY='buhanka_finance_v9';/* НЕ МЕНЯТЬ НИКОГДА — иначе данные «слетят» при обновлении файла */
 const LEGACY_KEYS=['buhanka_finance_v8','buhanka_finance_v7','buhanka_finance_v6','buhanka_finance_v5'];
@@ -1675,16 +1681,22 @@ function renderPoints(C){
   const P=ST.ui.period; const useFact=periodLocked(P);
   document.getElementById('pageSub').textContent=`${P} · ${useFact?'период закрыт — факт':'период открыт — бюджет'}`;
   const struct=ST.structures.point; const comps={}; ST.points.forEach(p=>comps[p]=computePnL(p,P));
-  const colw=130; const minw=240+(ST.points.length+1)*colw;
+  const colw=130, pctw=64; const minw=240+(ST.points.length+1)*(colw+pctw);
+  const revOf={}; ST.points.forEach(p=>{ const r=comps[p].find(x=>x.row.role==='value'&&x.row.sign===1);
+    revOf[p]=r?(useFact?r.fact:r.budget):0; });
+  const revTot=ST.points.reduce((s,p)=>s+revOf[p],0);
+  const pctCell=(v,base)=>`<td class="num pctcell">${base?(v/base*100).toFixed(1).replace('.',',')+'%':'—'}</td>`;
   let html=`<div class="panel"><div class="hd"><h3>Сравнение точек · ${P}</h3><div class="spacer"></div><span class="tag ${useFact?'lock':''}">${useFact?'значения: факт':'значения: бюджет'}</span></div><div class="bd" style="padding:0"><div class="tbl-wrap"><table class="pnl" style="table-layout:fixed;min-width:${minw}px">
-    <colgroup><col style="width:240px">${ST.points.map(()=>`<col style="width:${colw}px">`).join('')}<col style="width:${colw+10}px"></colgroup>
-    <thead><tr><th>Статья</th>${ST.points.map(p=>`<th class="num" style="white-space:normal">${p.replace('Скандинавский','Сканд.')}</th>`).join('')}<th class="num">Итого</th></tr></thead><tbody>`;
+    <colgroup><col style="width:240px">${ST.points.map(()=>`<col style="width:${colw}px"><col style="width:${pctw}px">`).join('')}<col style="width:${colw+10}px"><col style="width:${pctw}px"></colgroup>
+    <thead><tr><th>Статья</th>${ST.points.map(p=>`<th class="num" colspan="2" style="white-space:normal">${p.replace('Скандинавский','Сканд.')}</th>`).join('')}<th class="num" colspan="2">Итого</th></tr></thead><tbody>`;
   struct.forEach((row,i)=>{
-    if(row.role==='spacer'){html+=`<tr class="spacer"><td colspan="${ST.points.length+2}"></td></tr>`;return;}
-    if(row.role==='header'){html+=`<tr class="header"><td colspan="${ST.points.length+2}" class="nmcell">${esc(row.name)}</td></tr>`;return;}
+    const span=(ST.points.length+1)*2+1;
+    if(row.role==='spacer'){html+=`<tr class="spacer"><td colspan="${span}"></td></tr>`;return;}
+    if(row.role==='header'){html+=`<tr class="header"><td colspan="${span}" class="nmcell">${esc(row.name)}</td></tr>`;return;}
     const cls=row.grand?'grand':row.role==='subtotal'?'subtotal':'value'; let tot=0,cells='';
-    ST.points.forEach(p=>{const x=comps[p][i]; const v=x?(useFact?x.fact:x.budget):0; tot+=v; cells+=`<td class="num">${v?fmt(v):'—'}</td>`;});
-    html+=`<tr class="${cls}"><td class="nmcell">${esc(row.name)}</td>${cells}<td class="num">${tot?fmt(tot):'—'}</td></tr>`;
+    ST.points.forEach(p=>{const x=comps[p][i]; const v=x?(useFact?x.fact:x.budget):0; tot+=v;
+      cells+=`<td class="num">${v?fmt(v):'—'}</td>`+pctCell(v,revOf[p]);});
+    html+=`<tr class="${cls}"><td class="nmcell">${esc(row.name)}</td>${cells}<td class="num">${tot?fmt(tot):'—'}</td>${pctCell(tot,revTot)}</tr>`;
   });
   html+=`</tbody></table></div></div></div>`;
   // чеки и средний чек
@@ -1805,7 +1817,7 @@ function renderCF(C){
     const num=v=>v?fmt(v):'—';
     const neg=v=>v?'('+fmt(Math.abs(v))+')':'—';
     const cell=(v,cls)=>`<td class="num ${cls||''}">${v}</td>`;
-    /* out=true — строка расхода: в прогнозе показываем со знаком минус, как и факт */
+    /* out=true — строка расхода: в прогнозе показываем в скобках, как и факт */
     const planCell=(day,key,shown,out)=>{
       if(day.actual) return `<td class="num">${shown}</td>`;
       const cur=planVal(M.mo,day.d,key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buhanka-finance-app",
-  "version": "1.63.0",
+  "version": "1.65.0",
   "description": "Buhanka bakery finance dashboard — single-file web app",
   "license": "MIT",
   "files": [