mirror of
https://github.com/wasrusgen/wasrusgen1-crm.git
synced 2026-06-03 17:44:46 +00:00
update: commercial director — back-nav, period tabs, interactive purchases, P&L section
This commit is contained in:
wasrusgen
parent
5030931dc1
commit
d189756ef7
@ -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>
|
||||
<span style="margin-left:12px;font-family:Inter,system-ui,sans-serif;font-size:12px;color:#8A94A6">@wasrusgen1 CRM</span>
|
||||
← Все кабинеты</a>
|
||||
<span style="margin-left:12px;font-size:12px;color:#8A94A6;font-family:Inter,system-ui,sans-serif">Коммерческий директор</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 totalPlan=3200000, totalFact=2847000;
|
||||
var pct=Math.round(totalFact/totalPlan*100);
|
||||
var overdue=_orders.filter(o=>o.overdue).length;
|
||||
var overdueSum=_orders.filter(o=>o.overdue).reduce(function(s,o){return s+o.sum;},0);
|
||||
var _PERIODS={
|
||||
'Май': {plan:3200000, fact:2847000, orders:47, avgCheck:51800, overdue:2, newLeads:26, growth:18,
|
||||
convs:[{from:'Лид',to:'КП',pct:61,norm:65},{from:'КП',to:'Договор',pct:48,norm:55},{from:'Договор',to:'Монтаж',pct:91,norm:85}],
|
||||
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'}]},
|
||||
'Апр': {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'}]},
|
||||
};
|
||||
|
||||
// Источники лидов
|
||||
var sources=[
|
||||
{name:'Рекомендации', pct:42, color:'#10B981', cnt:11},
|
||||
{name:'Авито', pct:28, color:'#3B82F6', cnt:7},
|
||||
{name:'Instagram', pct:18, color:'#8B5CF6', cnt:5},
|
||||
{name:'Сайт / SEO', pct:12, color:'#F59E0B', cnt:3},
|
||||
];
|
||||
function _sHome(){
|
||||
var d=_PERIODS[window._period]||_PERIODS['Май'];
|
||||
var totalPlan=d.plan, totalFact=d.fact;
|
||||
var pct=Math.round(totalFact/totalPlan*100);
|
||||
var overdue=d.overdue;
|
||||
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">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">'+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">'+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">'
|
||||
+[
|
||||
{from:'Лид', to:'КП', pct:61, norm:65},
|
||||
{from:'КП', to:'Договор', pct:48, norm:55},
|
||||
{from:'Договор',to:'Монтаж', pct:91, norm:85},
|
||||
].map(function(c){
|
||||
+convs.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">'
|
||||
+ '<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>'
|
||||
+ '<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]
|
||||
? '<div style="padding:7px 12px;background:#ECFDF5;border-radius:10px;font-size:12px;font-weight:700;color:var(--success);text-align:center">'
|
||||
+(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&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>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user