update: commercial director — back-nav, period tabs, interactive purchases, P&L section

docs/mockup_commercial.html

@@ -72,11 +72,10 @@ body[data-theme="dark"]{--accent:#4338CA;--accent2:#6366F1;--bg:#111827;--card:#
 <div id="crm-back-nav" style="position:fixed;top:0;left:0;right:0;z-index:9999;background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.08);padding:8px 16px;display:flex;align-items:center">
   <a href="https://wasrusgen.github.io/wasrusgen1-crm/" style="display:inline-flex;align-items:center;gap:6px;font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:600;color:#003E7E;text-decoration:none;padding:4px 12px;border-radius:8px;background:#F0F4FF;transition:background .15s" onmouseover="this.style.background='#DDE8FF'" onmouseout="this.style.background='#F0F4FF'">
     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
-    Все кабинеты
+    ← Все кабинеты</a>
-  </a>
+  <span style="margin-left:12px;font-size:12px;color:#8A94A6;font-family:Inter,system-ui,sans-serif">Коммерческий директор</span>
-  <span style="margin-left:12px;font-family:Inter,system-ui,sans-serif;font-size:12px;color:#8A94A6">@wasrusgen1 CRM</span>
 </div>
-<div style="height:40px"></div>
+<div style="height:44px"></div>
 <div id="controls">
   <label>Тема:</label>
   <div id="themeButtons">
@@ -87,7 +86,6 @@ body[data-theme="dark"]{--accent:#4338CA;--accent2:#6366F1;--bg:#111827;--card:#
 </div>
 
 <div id="phoneFrame">
-<a href="./index.html" id="in-frame-back" style="display:flex;align-items:center;gap:6px;padding:5px 14px;background:rgba(0,62,126,.06);border-bottom:1px solid rgba(0,62,126,.09);font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:700;color:#003E7E;text-decoration:none;flex-shrink:0;z-index:200"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>Мокапы кабинетов</a>
   <div id="statusBar">
     <span>9:41</span>
     <div class="sb-r">
@@ -105,6 +103,17 @@ window._ordFilter = window._ordFilter || 'all';
 window._ordSalon  = window._ordSalon  || 'all';
 window._prcFilter = window._prcFilter || 'pending';
 window._mgrExp    = window._mgrExp    || null;
+window._period    = window._period    || 'Май';
+window._prcDone   = window._prcDone   || {};
+
+function _toast(msg,col){
+  var t=document.createElement('div');
+  t.textContent=msg;
+  t.style.cssText='position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:'+(col||'#1A1A2E')+';color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;font-weight:600;z-index:9999;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.25)';
+  document.body.appendChild(t);
+  setTimeout(function(){t.style.opacity='0';t.style.transition='opacity .4s';},1800);
+  setTimeout(function(){t.remove();},2200);
+}
 
 function setTheme(t,btn){
   document.body.removeAttribute('data-theme');
@@ -180,25 +189,41 @@ var _stageMap={
 };
 
 // ─── ГЛАВНАЯ ────────────────────────────────────────────────────────
-function _sHome(){
+var _PERIODS={
-  var totalPlan=3200000, totalFact=2847000;
+  'Май': {plan:3200000, fact:2847000, orders:47, avgCheck:51800, overdue:2, newLeads:26, growth:18,
-  var pct=Math.round(totalFact/totalPlan*100);
+          convs:[{from:'Лид',to:'КП',pct:61,norm:65},{from:'КП',to:'Договор',pct:48,norm:55},{from:'Договор',to:'Монтаж',pct:91,norm:85}],
-  var overdue=_orders.filter(o=>o.overdue).length;
+          sources:[{name:'Рекомендации',pct:42,cnt:11,color:'#10B981'},{name:'Авито',pct:28,cnt:7,color:'#3B82F6'},{name:'Instagram',pct:18,cnt:5,color:'#8B5CF6'},{name:'Сайт / SEO',pct:12,cnt:3,color:'#F59E0B'}]},
-  var overdueSum=_orders.filter(o=>o.overdue).reduce(function(s,o){return s+o.sum;},0);
+  'Апр': {plan:2900000, fact:2410000, orders:41, avgCheck:48600, overdue:1, newLeads:22, growth:8,
+          convs:[{from:'Лид',to:'КП',pct:65,norm:65},{from:'КП',to:'Договор',pct:52,norm:55},{from:'Договор',to:'Монтаж',pct:88,norm:85}],
+          sources:[{name:'Рекомендации',pct:38,cnt:9,color:'#10B981'},{name:'Авито',pct:32,cnt:7,color:'#3B82F6'},{name:'Instagram',pct:20,cnt:5,color:'#8B5CF6'},{name:'Сайт / SEO',pct:10,cnt:2,color:'#F59E0B'}]},
+  'Мар': {plan:2700000, fact:2231000, orders:36, avgCheck:45300, overdue:3, newLeads:18, growth:-2,
+          convs:[{from:'Лид',to:'КП',pct:58,norm:65},{from:'КП',to:'Договор',pct:45,norm:55},{from:'Договор',to:'Монтаж',pct:83,norm:85}],
+          sources:[{name:'Рекомендации',pct:40,cnt:7,color:'#10B981'},{name:'Авито',pct:25,cnt:5,color:'#3B82F6'},{name:'Instagram',pct:22,cnt:4,color:'#8B5CF6'},{name:'Сайт / SEO',pct:13,cnt:2,color:'#F59E0B'}]},
+};
 
-  // Источники лидов
+function _sHome(){
-  var sources=[
+  var d=_PERIODS[window._period]||_PERIODS['Май'];
-    {name:'Рекомендации', pct:42, color:'#10B981', cnt:11},
+  var totalPlan=d.plan, totalFact=d.fact;
-    {name:'Авито',        pct:28, color:'#3B82F6', cnt:7},
+  var pct=Math.round(totalFact/totalPlan*100);
-    {name:'Instagram',    pct:18, color:'#8B5CF6', cnt:5},
+  var overdue=d.overdue;
-    {name:'Сайт / SEO',   pct:12, color:'#F59E0B', cnt:3},
+  var overdueSum=_orders.filter(function(o){return o.overdue;}).reduce(function(s,o){return s+o.sum;},0);
-  ];
+  var sources=d.sources;
+  var convs=d.convs;
+  var periodLabels=['Май','Апр','Мар'];
+  var prevP={'Май':'апрелю','Апр':'марту','Мар':'февралю'};
 
   return '<div class="page">'
+    // Период-свитчер
+    +'<div style="display:flex;gap:6px;padding:10px 16px 0;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">'
+    +periodLabels.map(function(p){
+      var act=window._period===p;
+      return '<div onclick="window._period=\''+p+'\';_render()" style="padding:7px 18px;border-radius:20px 20px 0 0;font-size:12px;font-weight:700;cursor:pointer;border-bottom:2px solid '+(act?'var(--accent)':'transparent')+';color:'+(act?'var(--accent)':'var(--muted)')+'">'+p+'</div>';
+    }).join('')
+    +'</div>'
     +'<div class="hero-grad">'
-    +  '<div style="font-size:11px;font-weight:700;opacity:.65;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px">МАЙ 2026 · Коммерческий директор</div>'
+    +  '<div style="font-size:11px;font-weight:700;opacity:.65;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px">'+window._period.toUpperCase()+' 2026 · Коммерческий директор</div>'
     +  '<div style="font-size:28px;font-weight:800;letter-spacing:-.03em">'+totalFact.toLocaleString('ru')+' ₽</div>'
-    +  '<div style="font-size:13px;opacity:.8;margin-top:4px">Выручка · <span style="color:#76BD22;font-weight:700">▲ +18%</span> к апрелю</div>'
+    +  '<div style="font-size:13px;opacity:.8;margin-top:4px">Выручка · <span style="color:'+(d.growth>=0?'#76BD22':'#FCA5A5')+';font-weight:700">'+(d.growth>=0?'▲ +':'▼ ')+Math.abs(d.growth)+'%</span> к '+prevP[window._period]+'</div>'
     +  '<div style="margin-top:14px">'
     +    '<div style="display:flex;justify-content:space-between;margin-bottom:5px">'
     +      '<span style="font-size:11px;opacity:.7">План: '+totalPlan.toLocaleString('ru')+' ₽</span>'
@@ -211,20 +236,16 @@ function _sHome(){
     +'</div>'
 
     +'<div class="kpi-grid">'
-    +  '<div class="kpi-card"><div class="kpi-value">47</div><div class="kpi-label">Заказов в работе</div><div class="kpi-delta up">▲ +6 к апрелю</div></div>'
+    +  '<div class="kpi-card"><div class="kpi-value">'+d.orders+'</div><div class="kpi-label">Заказов в работе</div><div class="kpi-delta up">план '+Math.round(d.plan/1000)+' тыс</div></div>'
-    +  '<div class="kpi-card"><div class="kpi-value">51 800 ₽</div><div class="kpi-label">Средний чек</div><div class="kpi-delta up">▲ +3 200 ₽</div></div>'
+    +  '<div class="kpi-card"><div class="kpi-value">'+Math.round(d.avgCheck/1000)+' тыс ₽</div><div class="kpi-label">Средний чек</div><div class="kpi-delta up">▲ факт</div></div>'
     +  '<div class="kpi-card"><div class="kpi-value" style="color:var(--danger)">'+overdue+'</div><div class="kpi-label">Просрочено</div><div class="kpi-delta dn">'+Math.round(overdueSum/1000)+' тыс риск</div></div>'
-    +  '<div class="kpi-card"><div class="kpi-value">26</div><div class="kpi-label">Новых лидов</div><div class="kpi-delta up">▲ +4 к апрелю</div></div>'
+    +  '<div class="kpi-card"><div class="kpi-value">'+d.newLeads+'</div><div class="kpi-label">Новых лидов</div><div class="kpi-delta up">за '+window._period+'</div></div>'
     +'</div>'
 
     // Конверсии — быстрый взгляд
-    +'<div class="section-label">Конверсии · май</div>'
+    +'<div class="section-label">Конверсии · '+window._period+'</div>'
     +'<div style="padding:0 16px"><div class="card" style="padding:14px 16px">'
-    +[
+    +convs.map(function(c){
-      {from:'Лид',    to:'КП',      pct:61, norm:65},
-      {from:'КП',     to:'Договор', pct:48, norm:55},
-      {from:'Договор',to:'Монтаж',  pct:91, norm:85},
-    ].map(function(c){
       var ok=c.pct>=c.norm;
       return '<div style="display:flex;align-items:center;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.05)">'
         +'<div style="width:130px;font-size:12px;color:var(--muted)">'+c.from+' → '+c.to+'</div>'
@@ -238,7 +259,7 @@ function _sHome(){
     +'</div></div>'
 
     // Источники лидов
-    +'<div class="section-label">Источники лидов</div>'
+    +'<div class="section-label">Источники лидов · '+window._period+'</div>'
     +'<div style="padding:0 16px"><div class="card" style="padding:14px 16px">'
     +sources.map(function(s){
       return '<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">'
@@ -247,7 +268,7 @@ function _sHome(){
         +  '<div style="height:100%;width:'+s.pct+'%;background:'+s.color+';border-radius:3px"></div>'
         +'</div>'
         +'<div style="font-size:12px;font-weight:700;color:var(--ink);width:28px;text-align:right">'+s.pct+'%</div>'
-        +'<div style="font-size:11px;color:var(--muted);width:28px;text-align:right">'+s.cnt+' лид</div>'
+        +'<div style="font-size:11px;color:var(--muted);width:32px;text-align:right">'+s.cnt+' лид</div>'
         +'</div>';
     }).join('')
     +'</div></div>'
@@ -590,10 +611,14 @@ function _sPurchases(){
             +  '<div style="font-size:15px;font-weight:800;color:var(--ink)">'+p.sum.toLocaleString('ru')+' ₽</div>'
             +'</div>'
             +'<div style="font-size:13px;color:var(--ink);margin-bottom:12px">'+p.item+'</div>'
-            +'<div style="display:flex;gap:8px">'
+            +(window._prcDone[p.id]
-            +  '<button style="flex:1;padding:8px;background:var(--success);color:#fff;border:none;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer">✓ Согласовать</button>'
+              ? '<div style="padding:7px 12px;background:#ECFDF5;border-radius:10px;font-size:12px;font-weight:700;color:var(--success);text-align:center">'
-            +  '<button style="flex:1;padding:8px;background:var(--s-danger-bg);color:var(--danger);border:none;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer">✕ Отклонить</button>'
+                +(window._prcDone[p.id]==='ok'?'✅ Согласовано':'❌ Отклонено')
                 +'</div>'
+              : '<div style="display:flex;gap:8px">'
+                +'<button onclick="window._prcDone[\''+p.id+'\']=\'ok\';_toast(\'✅ Согласовано: '+p.id+'\',\'#10B981\');_render()" style="flex:1;padding:8px;background:var(--success);color:#fff;border:none;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer">✓ Согласовать</button>'
+                +'<button onclick="window._prcDone[\''+p.id+'\']=\'no\';_toast(\'❌ Отклонено: '+p.id+'\',\'#EF4444\');_render()" style="flex:1;padding:8px;background:var(--s-danger-bg);color:var(--danger);border:none;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer">✕ Отклонить</button>'
+                +'</div>')
             +'</div>';
         }).join('')
         +'</div>'
@@ -710,6 +735,42 @@ function _sFinance(){
     }).join('')
     +'</div>'
 
+    // P&L
+    +'<div class="section-label">P&amp;L · май 2026</div>'
+    +'<div style="padding:0 16px"><div class="card" style="padding:14px 16px">'
+    +[
+      {label:'Выручка',          v:2847000, prev:2410000, type:'rev'},
+      {label:'Себестоимость',    v:-1280000,prev:-1090000,type:'cost'},
+      {label:'Валовая прибыль',  v:1567000, prev:1320000, type:'profit',bold:true},
+      {label:'Операц. расходы',  v:-418000, prev:-380000, type:'cost'},
+      {label:'Зарплата и %',     v:-512000, prev:-442000, type:'cost'},
+      {label:'EBITDA',           v:637000,  prev:498000,  type:'ebitda',bold:true},
+    ].map(function(row,i){
+      var delta=row.prev?Math.round((row.v-row.prev)/Math.abs(row.prev)*100):0;
+      var isPos=row.v>=0;
+      var color=row.type==='profit'||row.type==='ebitda'?'var(--accent)':row.type==='rev'?'var(--success)':'var(--muted)';
+      return '<div style="display:flex;align-items:center;padding:8px 0;border-bottom:'+(i<5?'1px solid rgba(0,0,0,.05)':'none')+'">'
+        +'<div style="flex:1;font-size:'+(row.bold?'13':'12')+'px;font-weight:'+(row.bold?'700':'500')+';color:'+(row.bold?'var(--ink)':'var(--muted)')+'">'+row.label+'</div>'
+        +'<div style="font-size:'+(row.bold?'14':'13')+'px;font-weight:'+(row.bold?'800':'600')+';color:'+color+';margin-right:10px">'+(isPos?'':'')+Math.abs(row.v).toLocaleString('ru')+' ₽</div>'
+        +'<div style="font-size:10px;font-weight:700;color:'+(delta>=0?'var(--success)':'var(--danger)');width:46px;text-align:right">'+(delta>=0?'▲ +':'▼ ')+Math.abs(delta)+'%</div>'
+        +'</div>';
+    }).join('')
+    +'</div></div>'
+
+    // Маржинальность
+    +'<div style="padding:0 16px 8px"><div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px">'
+    +[
+      {label:'Валов. маржа',v:'55%',ok:true},
+      {label:'EBITDA маржа',v:'22%',ok:true},
+      {label:'Рост к апр.',v:'+18%',ok:true},
+    ].map(function(m){
+      return '<div style="background:'+(m.ok?'#ECFDF5':'#FEF2F2')+';border-radius:12px;padding:10px;text-align:center">'
+        +'<div style="font-size:18px;font-weight:800;color:'+(m.ok?'var(--success)':'var(--danger)')+'">'+m.v+'</div>'
+        +'<div style="font-size:9px;color:var(--muted);margin-top:2px;font-weight:600">'+m.label+'</div>'
+        +'</div>';
+    }).join('')
+    +'</div></div>'
+
     // Дебиторка
     +'<div class="section-label">Дебиторская задолженность · '+totalDebt.toLocaleString('ru')+' ₽</div>'
     +'<div style="padding:0 16px"><div class="card" style="padding:0">'
@@ -735,5 +796,3 @@ window.addEventListener('DOMContentLoaded', function(){_render();});
 </script>
 </body>
 </html>
-
-