mirror of
https://github.com/wasrusgen/wasrusgen1-crm.git
synced 2026-06-03 15:04:47 +00:00
init: CRM mockups — ГД и Коммерческий директор
This commit is contained in:
wasrusgen
commit
0e8330874f
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
*.ps1
|
||||
*.py
|
||||
backups/
|
||||
desktop.ini
|
||||
Thumbs.db
|
||||
.DS_Store
|
||||
*.log
|
||||
64
Mokap/index.html
Normal file
64
Mokap/index.html
Normal file
@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>@wasrusgen1 CRM — Мокапы</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:'Inter',sans-serif;background:#F5F6F8;min-height:100vh;padding:40px 20px}
|
||||
h1{font-size:22px;font-weight:800;color:#1A1A2E;margin-bottom:4px}
|
||||
.sub{font-size:13px;color:#8A94A6;margin-bottom:32px}
|
||||
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;max-width:900px;margin:0 auto}
|
||||
.card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 1px 4px rgba(0,0,0,.08);transition:box-shadow .15s,transform .15s;text-decoration:none;display:block}
|
||||
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.12);transform:translateY(-2px)}
|
||||
.role{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#8A94A6;margin-bottom:8px}
|
||||
.title{font-size:17px;font-weight:800;color:#1A1A2E;margin-bottom:6px}
|
||||
.desc{font-size:12px;color:#8A94A6;line-height:1.5}
|
||||
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;margin-top:14px}
|
||||
.done{background:#F0FDF4;color:#16A34A}
|
||||
.wip{background:#FFFBEB;color:#D97706}
|
||||
.soon{background:#F1F5F9;color:#8A94A6}
|
||||
.header{max-width:900px;margin:0 auto 28px}
|
||||
.logo{font-size:13px;font-weight:700;color:#003E7E;margin-bottom:16px;display:flex;align-items:center;gap:8px}
|
||||
.logo span{color:#76BD22}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="logo">@wasrusgen1 <span>CRM</span></div>
|
||||
<h1>Мокапы кабинетов</h1>
|
||||
<div class="sub">Telegram MiniApp · Мебельный дилер · ИП Васильев Р.Г.</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<a class="card" href="mockup_owner.html">
|
||||
<div class="role">Роль 1</div>
|
||||
<div class="title">Генеральный директор</div>
|
||||
<div class="desc">Выручка по салонам, финансы, команда агрегированно, склад (статус поставок)</div>
|
||||
<div class="badge done">✓ Принято как база</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="mockup_commercial.html">
|
||||
<div class="role">Роль 2</div>
|
||||
<div class="title">Коммерческий директор</div>
|
||||
<div class="desc">Воронка продаж, заказы, персонал (администраторы), закупки, финансы план/факт</div>
|
||||
<div class="badge wip">⚙ В разработке</div>
|
||||
</a>
|
||||
|
||||
<div class="card" style="opacity:.55;cursor:default">
|
||||
<div class="role">Роль 3</div>
|
||||
<div class="title">Директор по сервису</div>
|
||||
<div class="desc">Доставки, монтажники, замерщики, рекламации, NPS</div>
|
||||
<div class="badge soon">Скоро</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="opacity:.55;cursor:default">
|
||||
<div class="role">Роль 4</div>
|
||||
<div class="title">Администратор салона</div>
|
||||
<div class="desc">Оперативное управление салоном: заказы, менеджеры, закупки, смена</div>
|
||||
<div class="badge soon">Скоро</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
Mokap/logo_w1_blue.png
Normal file
BIN
Mokap/logo_w1_blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
Mokap/logo_w1_white.png
Normal file
BIN
Mokap/logo_w1_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
728
Mokap/mockup_commercial.html
Normal file
728
Mokap/mockup_commercial.html
Normal file
@ -0,0 +1,728 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>@wasrusgen1 CRM — Коммерческий директор</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{background:#C8CACD;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px;font-family:'Inter',sans-serif}
|
||||
body{--accent:#003E7E;--accent2:#76BD22;--bg:#F5F6F8;--card:#FFFFFF;--ink:#1A1A2E;--muted:#8A94A6;--danger:#EF4444;--warn:#F59E0B;--success:#10B981;--s-success-bg:#ECFDF5;--s-warning-bg:#FFFBEB;--s-danger-bg:#FEF2F2;--s-info:#3B82F6;--s-info-bg:#EFF6FF}
|
||||
body[data-theme="radar"]{--accent:#4338CA;--accent2:#6366F1;--bg:#F9FAFB;--card:#FFFFFF;--ink:#111827;--muted:#6B7280}
|
||||
body[data-theme="dark"]{--accent:#4338CA;--accent2:#6366F1;--bg:#111827;--card:#1F2937;--ink:#F9FAFB;--muted:#9CA3AF}
|
||||
|
||||
#controls{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;justify-content:center;width:100%;max-width:600px}
|
||||
#controls label{color:#fff;font-size:13px;font-weight:600}
|
||||
#themeButtons{display:flex;gap:6px}
|
||||
.theme-btn{padding:7px 14px;border-radius:9px;border:2px solid transparent;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s}
|
||||
.theme-btn.active{border-color:#fff;transform:scale(1.05)}
|
||||
.theme-btn[data-t="zov"]{background:#003E7E;color:#fff}
|
||||
.theme-btn[data-t="radar"]{background:linear-gradient(135deg,#1E1B4B,#4338CA);color:#fff}
|
||||
.theme-btn[data-t="dark"]{background:#111827;color:#6366F1}
|
||||
|
||||
#phoneFrame{width:390px;height:844px;background:var(--bg);border-radius:44px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.15);position:relative;display:flex;flex-direction:column}
|
||||
#statusBar{height:44px;background:var(--card);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0;font-size:13px;font-weight:600;color:var(--ink);z-index:10}
|
||||
.sb-r{display:flex;align-items:center;gap:6px}
|
||||
#screen{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;background:var(--bg)}
|
||||
#screen::-webkit-scrollbar{display:none}
|
||||
|
||||
.bottom-nav{height:60px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-around;flex-shrink:0;z-index:100}
|
||||
[data-theme="dark"] .bottom-nav{background:rgba(31,41,55,.95)}
|
||||
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:5px 4px;border-radius:10px;transition:all .18s;flex:1;position:relative}
|
||||
.nav-item svg{width:22px;height:22px;color:var(--muted);transition:color .18s}
|
||||
.nav-item span{font-size:9px;color:var(--muted);font-weight:500;transition:color .18s}
|
||||
.nav-item.active{background:rgba(0,62,126,.07)}
|
||||
.nav-item.active svg,.nav-item.active span{color:var(--accent)}
|
||||
.nav-item.active::after{content:'';position:absolute;bottom:4px;width:16px;height:3px;border-radius:2px;background:var(--accent);opacity:.6}
|
||||
|
||||
.page{padding:0 0 80px;min-height:100%}
|
||||
.card{background:var(--card);border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.07);padding:16px;margin-bottom:12px}
|
||||
.section-label{text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:var(--muted);margin:20px 16px 8px;font-weight:600}
|
||||
.hero-grad{background:linear-gradient(135deg,var(--accent) 0%,#005BB5 100%);padding:24px 20px 20px;color:#fff}
|
||||
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px}
|
||||
.kpi-card{background:var(--card);border-radius:16px;padding:14px 16px;box-shadow:0 2px 10px rgba(0,0,0,.07);border:1px solid rgba(0,0,0,.05)}
|
||||
.kpi-value{font-size:23px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-0.03em}
|
||||
.kpi-label{font-size:11px;color:var(--muted);margin-top:5px;font-weight:500}
|
||||
.kpi-delta{font-size:11px;font-weight:700;margin-top:7px}
|
||||
.kpi-delta.up{color:var(--success)}
|
||||
.kpi-delta.dn{color:var(--danger)}
|
||||
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.05)}
|
||||
.stat-row:last-child{border:none;padding-bottom:0}
|
||||
.stat-l{font-size:13px;color:var(--muted);font-weight:500}
|
||||
.stat-v{font-size:14px;font-weight:700;color:var(--ink)}
|
||||
.stat-v.g{color:var(--success)}
|
||||
.stat-v.r{color:var(--danger)}
|
||||
.stat-v.b{color:var(--accent)}
|
||||
.prog-bg{background:rgba(0,0,0,.07);border-radius:4px;height:6px;flex:1;margin:0 10px;overflow:hidden}
|
||||
.badge-sm{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap}
|
||||
.bg{background:var(--s-success-bg);color:#065F46}
|
||||
.bw{background:var(--s-warning-bg);color:#92400E}
|
||||
.br{background:var(--s-danger-bg);color:#991B1B}
|
||||
.bb{background:var(--s-info-bg);color:#1D4ED8}
|
||||
.pill-row{display:flex;gap:6px;padding:0 16px;margin-bottom:12px;flex-wrap:wrap}
|
||||
.pill{padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;transition:all .18s;border:1.5px solid transparent}
|
||||
.pill.active{background:var(--accent);color:#fff}
|
||||
.pill.inactive{background:rgba(0,0,0,.05);color:var(--muted)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="controls">
|
||||
<label>Тема:</label>
|
||||
<div id="themeButtons">
|
||||
<button class="theme-btn active" data-t="zov" onclick="setTheme('zov',this)">Синяя</button>
|
||||
<button class="theme-btn" data-t="radar" onclick="setTheme('radar',this)">CRM</button>
|
||||
<button class="theme-btn" data-t="dark" onclick="setTheme('dark',this)">Dark</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="phoneFrame">
|
||||
<div id="statusBar">
|
||||
<span>9:41</span>
|
||||
<div class="sb-r">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1.42 9a16 16 0 0 1 21.16 0M5 12.55a11 11 0 0 1 14.08 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/></svg>
|
||||
<svg width="18" height="12" viewBox="0 0 27 12"><rect x="0" y="0" width="6" height="12" rx="1" fill="currentColor" opacity=".35"/><rect x="8" y="0" width="6" height="12" rx="1" fill="currentColor" opacity=".55"/><rect x="16" y="0" width="6" height="12" rx="1" fill="currentColor"/><rect x="23" y="3" width="3" height="6" rx="1" fill="currentColor" opacity=".4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div id="screen"></div>
|
||||
<div class="bottom-nav" id="nav"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window._sc = window._sc || 'home';
|
||||
window._ordFilter = window._ordFilter || 'all';
|
||||
window._ordSalon = window._ordSalon || 'all';
|
||||
window._prcFilter = window._prcFilter || 'pending';
|
||||
window._mgrExp = window._mgrExp || null;
|
||||
|
||||
function setTheme(t,btn){
|
||||
document.body.removeAttribute('data-theme');
|
||||
if(t!=='zov') document.body.setAttribute('data-theme',t);
|
||||
document.querySelectorAll('.theme-btn').forEach(b=>b.classList.remove('active'));
|
||||
if(btn) btn.classList.add('active');
|
||||
}
|
||||
|
||||
function _nav(s){window._sc=s;_render();}
|
||||
function _render(){
|
||||
var sc=document.getElementById('screen');
|
||||
sc.innerHTML=_rs();
|
||||
sc.scrollTop=0;
|
||||
document.getElementById('nav').innerHTML=_nb();
|
||||
}
|
||||
|
||||
// ─── ИКОНКИ ────────────────────────────────────────────────────────
|
||||
var _ICONS={
|
||||
chart:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="2" y1="20" x2="22" y2="20"/></svg>',
|
||||
funnel:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>',
|
||||
list:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>',
|
||||
users:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
|
||||
bag:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>',
|
||||
wallet:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><circle cx="18" cy="14" r="1.5"/></svg>',
|
||||
check:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
|
||||
alert:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><triangle/><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
|
||||
};
|
||||
|
||||
// ─── НАВ ────────────────────────────────────────────────────────────
|
||||
function _nb(){
|
||||
var items=[
|
||||
{id:'home', icon:'chart', label:'Главная'},
|
||||
{id:'funnel', icon:'funnel', label:'Воронка'},
|
||||
{id:'orders', icon:'list', label:'Заказы'},
|
||||
{id:'managers',icon:'users', label:'Персонал'},
|
||||
{id:'purchases',icon:'bag', label:'Закупки'},
|
||||
{id:'finance', icon:'wallet', label:'Финансы'},
|
||||
];
|
||||
return items.map(it=>'<div class="nav-item'+(window._sc===it.id?' active':'')+'" onclick="_nav(\''+it.id+'\')">'
|
||||
+_ICONS[it.icon]+'<span>'+it.label+'</span></div>').join('');
|
||||
}
|
||||
|
||||
function _rs(){
|
||||
if(window._sc==='home') return _sHome();
|
||||
if(window._sc==='funnel') return _sFunnel();
|
||||
if(window._sc==='orders') return _sOrders();
|
||||
if(window._sc==='managers') return _sManagers();
|
||||
if(window._sc==='purchases')return _sPurchases();
|
||||
if(window._sc==='finance') return _sFinance();
|
||||
return _sHome();
|
||||
}
|
||||
|
||||
// ─── ДАННЫЕ ─────────────────────────────────────────────────────────
|
||||
var _orders=[
|
||||
{id:'КЧ-2847', client:'ООО «РемСтрой»', sum:187000, stage:'mount', salon:'Ленина', mgr:'Дмитрий К.', date:'22 мая', overdue:false},
|
||||
{id:'ЗМ-2831', client:'Надежда Орлова', sum:142000, stage:'contract',salon:'Победы', mgr:'Ольга Р.', date:'19 мая', overdue:false},
|
||||
{id:'КЧ-2819', client:'ИП Сидоров', sum:128500, stage:'kp', salon:'Ленина', mgr:'Ольга Р.', date:'18 мая', overdue:false},
|
||||
{id:'ЗМ-2841', client:'Анна Белова', sum:113000, stage:'mount', salon:'Победы', mgr:'Ольга Р.', date:'14 мая', overdue:true},
|
||||
{id:'КЧ-2798', client:'Сергей Павлов', sum:98500, stage:'mount', salon:'Ленина', mgr:'Дмитрий К.', date:'13 мая', overdue:true},
|
||||
{id:'ЗМ-2856', client:'Марина Фролова', sum:87000, stage:'kp', salon:'Победы', mgr:'Дмитрий К.', date:'24 мая', overdue:false},
|
||||
{id:'КЧ-2861', client:'ООО «ДомСтрой»', sum:76500, stage:'contract',salon:'Ленина', mgr:'Дмитрий К.', date:'23 мая', overdue:false},
|
||||
{id:'ЗМ-2863', client:'Алексей Громов', sum:68000, stage:'lead', salon:'Победы', mgr:'Ольга Р.', date:'25 мая', overdue:false},
|
||||
{id:'КЧ-2867', client:'Татьяна Соколова', sum:54000, stage:'kp', salon:'Ленина', mgr:'Дмитрий К.', date:'26 мая', overdue:false},
|
||||
{id:'ЗМ-2871', client:'Виктор Попов', sum:48500, stage:'lead', salon:'Победы', mgr:'Ольга Р.', date:'27 мая', overdue:false},
|
||||
];
|
||||
|
||||
var _stageMap={
|
||||
lead: {label:'Лид', color:'#94A3B8', bg:'#F1F5F9'},
|
||||
kp: {label:'КП', color:'#F59E0B', bg:'#FFFBEB'},
|
||||
contract:{label:'Договор', color:'#3B82F6', bg:'#EFF6FF'},
|
||||
mount: {label:'Монтаж', color:'#10B981', bg:'#ECFDF5'},
|
||||
done: {label:'Выполнен', color:'#76BD22', bg:'#F0FDF4'},
|
||||
};
|
||||
|
||||
// ─── ГЛАВНАЯ ────────────────────────────────────────────────────────
|
||||
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 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},
|
||||
];
|
||||
|
||||
return '<div class="page">'
|
||||
+'<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: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="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>'
|
||||
+ '<span style="font-size:12px;font-weight:800;color:'+(pct>=90?'#76BD22':'#FCD34D')+'">'+pct+'%</span>'
|
||||
+ '</div>'
|
||||
+ '<div style="height:6px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden">'
|
||||
+ '<div style="height:100%;width:'+pct+'%;background:'+(pct>=90?'#76BD22':'#FCD34D')+';border-radius:3px;transition:.4s"></div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+'</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" 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>'
|
||||
|
||||
// Конверсии — быстрый взгляд
|
||||
+'<div class="section-label">Конверсии · май</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){
|
||||
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>'
|
||||
+'<div style="flex:1;height:5px;background:rgba(0,0,0,.07);border-radius:3px;overflow:hidden;margin:0 10px">'
|
||||
+ '<div style="height:100%;width:'+c.pct+'%;background:'+(ok?'var(--success)':'var(--danger)')+';border-radius:3px"></div>'
|
||||
+'</div>'
|
||||
+'<div style="font-size:13px;font-weight:800;color:'+(ok?'var(--success)':'var(--danger)')+'">'+c.pct+'%</div>'
|
||||
+'<div style="font-size:10px;color:var(--muted);margin-left:4px;width:46px">норма '+c.norm+'%</div>'
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div></div>'
|
||||
|
||||
// Источники лидов
|
||||
+'<div class="section-label">Источники лидов</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">'
|
||||
+'<div style="width:100px;font-size:12px;color:var(--muted);font-weight:500">'+s.name+'</div>'
|
||||
+'<div style="flex:1;height:6px;background:rgba(0,0,0,.07);border-radius:3px;overflow:hidden">'
|
||||
+ '<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>';
|
||||
}).join('')
|
||||
+'</div></div>'
|
||||
|
||||
// Просроченные заказы
|
||||
+(overdue>0
|
||||
? '<div class="section-label">🔴 Просроченные заказы</div>'
|
||||
+'<div style="padding:0 16px">'
|
||||
+_orders.filter(o=>o.overdue).map(function(o){
|
||||
return '<div class="card" style="padding:12px 14px;margin-bottom:8px;border-left:3px solid var(--danger)">'
|
||||
+'<div style="display:flex;justify-content:space-between;align-items:flex-start">'
|
||||
+ '<div>'
|
||||
+ '<div style="display:flex;align-items:center;gap:6px">'
|
||||
+ '<span style="font-size:12px;font-weight:700;color:var(--accent)">'+o.id+'</span>'
|
||||
+ '<span style="font-size:10px;font-weight:700;color:var(--danger)">⚠ просрочка</span>'
|
||||
+ '</div>'
|
||||
+ '<div style="font-size:13px;font-weight:600;color:var(--ink);margin-top:2px">'+o.client+'</div>'
|
||||
+ '<div style="font-size:11px;color:var(--muted);margin-top:1px">'+o.mgr+' · Салон '+o.salon+'</div>'
|
||||
+ '</div>'
|
||||
+ '<div style="text-align:right">'
|
||||
+ '<div style="font-size:13px;font-weight:700;color:var(--ink)">'+o.sum.toLocaleString('ru')+' ₽</div>'
|
||||
+ '<div style="font-size:10px;color:var(--muted);margin-top:2px">с '+o.date+'</div>'
|
||||
+ '</div>'
|
||||
+'</div>'
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
: '')
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
// ─── ВОРОНКА ────────────────────────────────────────────────────────
|
||||
function _sFunnel(){
|
||||
var stages=[
|
||||
{id:'lead', label:'Лиды', cnt:26, sum:1340000, norm:null, conv:null, normConv:null},
|
||||
{id:'kp', label:'КП', cnt:16, sum:877500, norm:null, conv:61, normConv:65},
|
||||
{id:'contract',label:'Договор', cnt:11, sum:624000, norm:null, conv:48, normConv:55},
|
||||
{id:'mount', label:'Монтаж', cnt:10, sum:568000, norm:null, conv:91, normConv:85},
|
||||
{id:'done', label:'Выполнен', cnt:47, sum:2847000, norm:null, conv:100, normConv:95},
|
||||
];
|
||||
var maxCnt=stages[0].cnt;
|
||||
|
||||
return '<div class="page">'
|
||||
+'<div style="padding:20px 16px 12px;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">'
|
||||
+ '<div style="font-size:17px;font-weight:800;color:var(--ink)">Воронка продаж</div>'
|
||||
+ '<div style="font-size:12px;color:var(--muted);margin-top:2px">Май 2026 · оба салона</div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="kpi-grid">'
|
||||
+ '<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" style="color:'+(48>=55?'var(--success)':'var(--danger)')+'">48%</div><div class="kpi-label">КП→Договор</div><div class="kpi-delta dn">норма 55%</div></div>'
|
||||
+ '<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">9.2</div><div class="kpi-label">Дней до договора</div><div class="kpi-delta up">▼ −1.3 дн</div></div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="section-label">Стадии воронки</div>'
|
||||
+'<div style="padding:0 16px">'
|
||||
+stages.map(function(st,i){
|
||||
var w=Math.round(st.cnt/maxCnt*100);
|
||||
var sc=_stageMap[st.id];
|
||||
var convOk=st.conv===null?null:st.conv>=st.normConv;
|
||||
return '<div style="margin-bottom:6px">'
|
||||
// Бар воронки
|
||||
+'<div style="display:flex;align-items:center;gap:10px;margin-bottom:4px">'
|
||||
+ '<div style="width:72px;font-size:11px;font-weight:700;color:'+sc.color+'">'+st.label+'</div>'
|
||||
+ '<div style="flex:1;height:32px;background:'+sc.bg+';border-radius:8px;overflow:hidden;position:relative">'
|
||||
+ '<div style="height:100%;width:'+w+'%;background:'+sc.color+'22;border-radius:8px;position:absolute"></div>'
|
||||
+ '<div style="position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;align-items:baseline;gap:6px">'
|
||||
+ '<span style="font-size:15px;font-weight:800;color:'+sc.color+'">'+st.cnt+'</span>'
|
||||
+ '<span style="font-size:10px;color:var(--muted)">заказов</span>'
|
||||
+ '</div>'
|
||||
+ '<div style="position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:var(--muted)">'+Math.round(st.sum/1000)+' тыс ₽</div>'
|
||||
+ '</div>'
|
||||
+'</div>'
|
||||
// Конверсия между стадиями
|
||||
+(i>0 && st.conv!==null
|
||||
? '<div style="display:flex;align-items:center;gap:6px;padding:0 0 4px 76px">'
|
||||
+ '<div style="width:1px;height:10px;background:rgba(0,0,0,.1);margin-left:16px"></div>'
|
||||
+ '<span style="font-size:11px;font-weight:700;color:'+(convOk?'var(--success)':'var(--danger)')+'">'+st.conv+'%</span>'
|
||||
+ '<span style="font-size:10px;color:var(--muted)">конверсия · норма '+st.normConv+'%</span>'
|
||||
+ '<span style="font-size:10px;font-weight:700;color:'+(convOk?'var(--success)':'var(--danger)')+'">'+( convOk?'✓':'↓ -'+(st.normConv-st.conv)+'пп')+'</span>'
|
||||
+'</div>'
|
||||
: '')
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
|
||||
// По салонам
|
||||
+'<div class="section-label">Воронка по салонам</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:14px 16px">'
|
||||
+[
|
||||
{name:'Салон Ленина', color:'#3B82F6', leads:15, kp:9, contracts:7, done:27, conv:47},
|
||||
{name:'Салон Победы', color:'#8B5CF6', leads:11, kp:7, contracts:4, done:20, conv:36},
|
||||
].map(function(s){
|
||||
return '<div style="margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.05)">'
|
||||
+'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">'
|
||||
+ '<span style="font-size:13px;font-weight:700;color:'+s.color+'">'+s.name+'</span>'
|
||||
+ '<span style="font-size:11px;color:var(--muted)">КП→Дог: <b style="color:'+(s.conv>=55?'var(--success)':'var(--danger)')+'">'+s.conv+'%</b></span>'
|
||||
+'</div>'
|
||||
+'<div style="display:flex;gap:6px">'
|
||||
+[
|
||||
{l:'Лиды', v:s.leads, c:'#94A3B8'},
|
||||
{l:'КП', v:s.kp, c:'#F59E0B'},
|
||||
{l:'Дог.', v:s.contracts,c:'#3B82F6'},
|
||||
{l:'Сдано', v:s.done, c:'#10B981'},
|
||||
].map(function(st){
|
||||
return '<div style="flex:1;text-align:center">'
|
||||
+'<div style="font-size:16px;font-weight:800;color:'+st.c+'">'+st.v+'</div>'
|
||||
+'<div style="font-size:9px;color:var(--muted);margin-top:2px">'+st.l+'</div>'
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div></div>'
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
// ─── ЗАКАЗЫ ─────────────────────────────────────────────────────────
|
||||
function _sOrders(){
|
||||
var stageFilters=[
|
||||
{id:'all', label:'Все'},
|
||||
{id:'overdue', label:'⚠ Просрочка'},
|
||||
{id:'mount', label:'Монтаж'},
|
||||
{id:'contract', label:'Договор'},
|
||||
{id:'kp', label:'КП'},
|
||||
{id:'lead', label:'Лид'},
|
||||
];
|
||||
var salons=[{id:'all',label:'Все салоны'},{id:'Ленина',label:'Ленина'},{id:'Победы',label:'Победы'}];
|
||||
|
||||
var filtered=_orders.filter(function(o){
|
||||
var sf=window._ordFilter;
|
||||
var ss=window._ordSalon;
|
||||
var stageOk = sf==='all' ? true : sf==='overdue' ? o.overdue : o.stage===sf;
|
||||
var salonOk = ss==='all' ? true : o.salon===ss;
|
||||
return stageOk && salonOk;
|
||||
});
|
||||
|
||||
return '<div class="page">'
|
||||
+'<div style="padding:20px 16px 12px;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">'
|
||||
+ '<div style="font-size:17px;font-weight:800;color:var(--ink)">Заказы в работе</div>'
|
||||
+ '<div style="font-size:12px;color:var(--muted);margin-top:2px">'+filtered.length+' из '+_orders.length+' · май 2026</div>'
|
||||
+'</div>'
|
||||
|
||||
// Фильтр по стадии
|
||||
+'<div style="overflow-x:auto;scrollbar-width:none;padding:10px 16px 0">'
|
||||
+'<div style="display:flex;gap:6px;width:max-content">'
|
||||
+stageFilters.map(function(f){
|
||||
var act=window._ordFilter===f.id;
|
||||
return '<div onclick="window._ordFilter=\''+f.id+'\';_render()" style="padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;'
|
||||
+(act?'background:var(--accent);color:#fff':'background:rgba(0,0,0,.06);color:var(--muted)')+'">'+f.label+'</div>';
|
||||
}).join('')
|
||||
+'</div></div>'
|
||||
|
||||
// Фильтр по салону
|
||||
+'<div style="display:flex;gap:6px;padding:8px 16px 12px">'
|
||||
+salons.map(function(s){
|
||||
var act=window._ordSalon===s.id;
|
||||
return '<div onclick="window._ordSalon=\''+s.id+'\';_render()" style="padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;'
|
||||
+(act?'background:var(--accent);color:#fff':'background:rgba(0,0,0,.06);color:var(--muted)')+'">'+s.label+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
|
||||
// Список
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:0">'
|
||||
+(filtered.length===0
|
||||
? '<div style="padding:24px;text-align:center;color:var(--muted);font-size:13px">Нет заказов по фильтру</div>'
|
||||
: filtered.map(function(o,i){
|
||||
var sc=_stageMap[o.stage];
|
||||
return '<div style="display:flex;align-items:center;padding:12px 14px;border-bottom:'+(i<filtered.length-1?'1px solid rgba(0,0,0,.05)':'none')+';cursor:pointer">'
|
||||
+'<div style="flex:1;min-width:0">'
|
||||
+ '<div style="display:flex;align-items:center;gap:6px">'
|
||||
+ '<span style="font-size:12px;font-weight:700;color:var(--accent)">'+o.id+'</span>'
|
||||
+ (o.overdue?'<span style="font-size:10px;font-weight:700;color:var(--danger)">⚠ просрочка</span>':'')
|
||||
+ '</div>'
|
||||
+ '<div style="font-size:13px;font-weight:600;color:var(--ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">'+o.client+'</div>'
|
||||
+ '<div style="font-size:11px;color:var(--muted);margin-top:1px">'+o.mgr+' · Салон '+o.salon+'</div>'
|
||||
+'</div>'
|
||||
+'<div style="text-align:right;flex-shrink:0;margin-left:8px">'
|
||||
+ '<div style="font-size:13px;font-weight:700;color:var(--ink)">'+o.sum.toLocaleString('ru')+' ₽</div>'
|
||||
+ '<div style="display:inline-flex;margin-top:3px;background:'+sc.bg+';border-radius:6px;padding:2px 7px">'
|
||||
+ '<span style="font-size:10px;font-weight:700;color:'+sc.color+'">'+sc.label+'</span>'
|
||||
+ '</div>'
|
||||
+'</div>'
|
||||
+'</div>';
|
||||
}).join(''))
|
||||
+'</div></div>'
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
// ─── МЕНЕДЖЕРЫ ──────────────────────────────────────────────────────
|
||||
function _sManagers(){
|
||||
var admins=[
|
||||
{name:'Анна М.', salon:'Салон Ленина', role:'Администратор',
|
||||
orders:27, ordersPlan:30, revenue:1537000, revenuePlan:1700000,
|
||||
overdue:1, overdueRisk:98500, purchases:2, managers:2, newLeads:14, status:'warn'},
|
||||
{name:'Ирина С.', salon:'Салон Победы', role:'Администратор',
|
||||
orders:20, ordersPlan:22, revenue:1310000, revenuePlan:1500000,
|
||||
overdue:1, overdueRisk:113000, purchases:1, managers:1, newLeads:12, status:'warn'},
|
||||
];
|
||||
var sc={ok:'var(--success)',bad:'var(--danger)',warn:'var(--warn)'};
|
||||
var bg={ok:'#F0FDF4',bad:'#FEF2F2',warn:'#FFFBEB'};
|
||||
var totOrders =admins.reduce(function(s,a){return s+a.orders;},0);
|
||||
var totPlan =admins.reduce(function(s,a){return s+a.ordersPlan;},0);
|
||||
var totRev =admins.reduce(function(s,a){return s+a.revenue;},0);
|
||||
var totRevPlan=admins.reduce(function(s,a){return s+a.revenuePlan;},0);
|
||||
var totOverdue=admins.reduce(function(s,a){return s+a.overdue;},0);
|
||||
var totPurch =admins.reduce(function(s,a){return s+a.purchases;},0);
|
||||
var revPct =Math.round(totRev/totRevPlan*100);
|
||||
|
||||
return '<div class="page">'
|
||||
+'<div style="padding:20px 16px 12px;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">'
|
||||
+ '<div style="font-size:17px;font-weight:800;color:var(--ink)">Персонал</div>'
|
||||
+ '<div style="font-size:12px;color:var(--muted);margin-top:2px">'+admins.length+' администратора · май 2026</div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="kpi-grid">'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">'+totOrders+'</div><div class="kpi-label">Заказов всего</div>'
|
||||
+ '<div class="kpi-delta '+(totOrders>=totPlan?'up':'dn')+'">'+totOrders+' из '+totPlan+' по плану</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value" style="font-size:18px">'+(totRev/1000000).toFixed(1)+' млн</div>'
|
||||
+ '<div class="kpi-label">Выручка факт</div>'
|
||||
+ '<div class="kpi-delta '+(revPct>=100?'up':'dn')+'">'+revPct+'% от плана</div></div>'
|
||||
+'</div>'
|
||||
|
||||
+(totOverdue>0||totPurch>0
|
||||
? '<div style="padding:0 16px 4px"><div style="background:#FFFBEB;border-radius:12px;padding:11px 14px;display:flex;gap:16px;flex-wrap:wrap">'
|
||||
+(totOverdue>0?'<span style="font-size:12px;color:#92400E">⚠ Просрочено: <b>'+totOverdue+'</b> заказа</span>':'')
|
||||
+(totPurch>0?'<span style="font-size:12px;color:#1D4ED8">📋 Закупки: <b>'+totPurch+'</b> ждут</span>':'')
|
||||
+'</div></div>'
|
||||
: '')
|
||||
|
||||
+'<div class="section-label">Администраторы салонов</div>'
|
||||
+'<div style="padding:0 16px">'
|
||||
+admins.map(function(a){
|
||||
var ordPct =Math.round(a.orders/a.ordersPlan*100);
|
||||
var revPctA=Math.round(a.revenue/a.revenuePlan*100);
|
||||
var sColor =sc[a.status];
|
||||
return '<div class="card" style="padding:14px 16px;margin-bottom:10px;border-left:3px solid '+sColor+'">'
|
||||
|
||||
+'<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px">'
|
||||
+ '<div><div style="font-size:15px;font-weight:700;color:var(--ink)">'+a.name+'</div>'
|
||||
+ '<div style="font-size:11px;color:var(--muted);margin-top:1px">'+a.role+' · '+a.salon+'</div></div>'
|
||||
+ '<div style="background:'+bg[a.status]+';color:'+sColor+';border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600">'
|
||||
+ (a.status==='ok'?'✓ Норма':a.status==='warn'?'⚠ Внимание':'✕ Проблема')
|
||||
+ '</div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px">'
|
||||
+ '<div style="background:var(--bg);border-radius:10px;padding:9px 10px;text-align:center">'
|
||||
+ '<div style="font-size:20px;font-weight:800;color:var(--ink);line-height:1">'+a.orders+'</div>'
|
||||
+ '<div style="font-size:9px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.04em">заказов</div>'
|
||||
+ '<div style="font-size:10px;color:'+(ordPct>=100?'var(--success)':'var(--danger)')+';font-weight:600;margin-top:1px">'+ordPct+'% плана</div>'
|
||||
+ '</div>'
|
||||
+ '<div style="background:var(--bg);border-radius:10px;padding:9px 10px;text-align:center">'
|
||||
+ '<div style="font-size:15px;font-weight:800;color:var(--ink);line-height:1">'+(a.revenue/1000).toLocaleString()+' тыс</div>'
|
||||
+ '<div style="font-size:9px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.04em">выручка ₽</div>'
|
||||
+ '<div style="font-size:10px;color:'+(revPctA>=100?'var(--success)':'var(--danger)')+';font-weight:600;margin-top:1px">'+revPctA+'% плана</div>'
|
||||
+ '</div>'
|
||||
+ '<div style="background:var(--bg);border-radius:10px;padding:9px 10px;text-align:center">'
|
||||
+ '<div style="font-size:20px;font-weight:800;color:var(--accent);line-height:1">'+a.newLeads+'</div>'
|
||||
+ '<div style="font-size:9px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.04em">лидов</div>'
|
||||
+ '<div style="font-size:10px;color:var(--muted);margin-top:1px">'+a.managers+' менедж.</div>'
|
||||
+ '</div>'
|
||||
+'</div>'
|
||||
|
||||
+(a.overdue>0||a.purchases>0
|
||||
? '<div style="display:flex;gap:8px;flex-wrap:wrap">'
|
||||
+(a.overdue>0?'<div style="display:flex;align-items:center;gap:4px;background:#FEF2F2;border-radius:8px;padding:5px 10px">'
|
||||
+'<span style="font-size:11px">⚠️</span>'
|
||||
+'<span style="font-size:11px;color:#991B1B">Просрочено: <b>'+a.overdue+'</b> · риск '+Math.round(a.overdueRisk/1000)+' тыс ₽</span></div>':'')
|
||||
+(a.purchases>0?'<div style="display:flex;align-items:center;gap:4px;background:#EFF6FF;border-radius:8px;padding:5px 10px">'
|
||||
+'<span style="font-size:11px">📋</span>'
|
||||
+'<span style="font-size:11px;color:#1E40AF">Закупки: <b>'+a.purchases+'</b> заявки</span></div>':'')
|
||||
+'</div>'
|
||||
: '<div style="padding:5px 10px;background:#F0FDF4;border-radius:8px;font-size:11px;color:var(--success);font-weight:600">✅ Всё в норме</div>')
|
||||
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
// ─── ЗАКУПКИ ─────────────────────────────────────────────────────────
|
||||
function _sPurchases(){
|
||||
var pending=[
|
||||
{id:'ЗАК-041', salon:'Ленина', who:'Анна М.', item:'Расходники (скотч, упаковка)', sum:4800, date:'26 мая', urgent:false},
|
||||
{id:'ЗАК-042', salon:'Победы', who:'Ирина С.', item:'Картридж + бумага А4 (3 пач)', sum:3200, date:'27 мая', urgent:false},
|
||||
{id:'ЗАК-043', salon:'Ленина', who:'Анна М.', item:'Чистящие средства · 12 позиций', sum:6700, date:'27 мая', urgent:true},
|
||||
];
|
||||
|
||||
// Расходы по категориям: апрель vs май
|
||||
var cats=[
|
||||
{name:'Расходники', apr:18400, may:44200, norm:20000},
|
||||
{name:'Хозтовары', apr:8200, may:9100, norm:10000},
|
||||
{name:'Канцелярия', apr:3100, may:2800, norm:4000},
|
||||
{name:'Реклама/ПОС', apr:12000, may:14500, norm:15000},
|
||||
];
|
||||
var maxVal=Math.max.apply(null, cats.map(function(c){return Math.max(c.apr,c.may);}));
|
||||
|
||||
// Аномалии
|
||||
var anomalies=cats.filter(function(c){return c.may>c.norm*1.2;});
|
||||
|
||||
var tabs=[{id:'pending',label:'На согласовании ('+pending.length+')'},{id:'analytics',label:'Аналитика'}];
|
||||
|
||||
return '<div class="page">'
|
||||
+'<div style="padding:20px 16px 12px;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">'
|
||||
+ '<div style="font-size:17px;font-weight:800;color:var(--ink)">Закупки</div>'
|
||||
+ '<div style="font-size:12px;color:var(--muted);margin-top:2px">Контроль расходов · май 2026</div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="kpi-grid">'
|
||||
+ '<div class="kpi-card"><div class="kpi-value" style="color:var(--warn)">'+pending.length+'</div><div class="kpi-label">Ожидают решения</div><div class="kpi-delta dn">14 700 ₽ суммарно</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value" style="color:var(--danger)">'+anomalies.length+'</div><div class="kpi-label">Аномалий расходов</div><div class="kpi-delta dn">выше нормы на 20%+</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">74 300 ₽</div><div class="kpi-label">Расходов за май</div><div class="kpi-delta dn">▲ +34% к апр.</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">55 400 ₽</div><div class="kpi-label">Расходов за апрель</div><div class="kpi-delta up">В норме</div></div>'
|
||||
+'</div>'
|
||||
|
||||
// Таб-переключатель
|
||||
+'<div style="display:flex;padding:0 16px;gap:6px;margin-bottom:4px">'
|
||||
+tabs.map(function(t){
|
||||
var act=window._prcFilter===t.id;
|
||||
return '<div onclick="window._prcFilter=\''+t.id+'\';_render()" style="padding:7px 14px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;'
|
||||
+(act?'background:var(--accent);color:#fff':'background:rgba(0,0,0,.06);color:var(--muted)')+'">'+t.label+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
|
||||
// Заявки на согласование
|
||||
+(window._prcFilter==='pending'
|
||||
? '<div style="padding:0 16px">'
|
||||
+pending.map(function(p){
|
||||
return '<div class="card" style="padding:14px;margin-bottom:8px;'+(p.urgent?'border-left:3px solid var(--warn)':'')+'">'
|
||||
+'<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px">'
|
||||
+ '<div>'
|
||||
+ '<div style="display:flex;align-items:center;gap:6px">'
|
||||
+ '<span style="font-size:12px;font-weight:700;color:var(--accent)">'+p.id+'</span>'
|
||||
+ (p.urgent?'<span style="font-size:10px;font-weight:700;color:var(--warn)">⚡ срочно</span>':'')
|
||||
+ '</div>'
|
||||
+ '<div style="font-size:11px;color:var(--muted);margin-top:2px">Салон '+p.salon+' · '+p.who+' · '+p.date+'</div>'
|
||||
+ '</div>'
|
||||
+ '<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>'
|
||||
+'</div>'
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
|
||||
// Аналитика расходов
|
||||
: '<div style="padding:0 16px">'
|
||||
|
||||
// Аномалии
|
||||
+(anomalies.length>0
|
||||
? '<div style="margin-bottom:12px">'
|
||||
+anomalies.map(function(a){
|
||||
var diff=Math.round((a.may-a.norm)/a.norm*100);
|
||||
return '<div style="display:flex;align-items:center;gap:10px;background:#FEF2F2;border-radius:12px;padding:10px 12px;margin-bottom:6px">'
|
||||
+'<span style="font-size:20px">🚨</span>'
|
||||
+'<div style="flex:1">'
|
||||
+ '<div style="font-size:13px;font-weight:700;color:var(--ink)">'+a.name+': +'+diff+'% выше нормы</div>'
|
||||
+ '<div style="font-size:11px;color:var(--muted);margin-top:1px">'+a.may.toLocaleString('ru')+' ₽ / норма '+a.norm.toLocaleString('ru')+' ₽</div>'
|
||||
+'</div>'
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
: '')
|
||||
|
||||
// График категорий апр vs май
|
||||
+'<div class="card" style="padding:14px 16px">'
|
||||
+ '<div style="font-size:12px;font-weight:700;color:var(--ink);margin-bottom:12px">Расходы по категориям</div>'
|
||||
+ '<div style="display:flex;gap:12px;margin-bottom:8px">'
|
||||
+ '<div style="display:flex;align-items:center;gap:5px"><span style="width:8px;height:8px;border-radius:2px;background:#94A3B8;display:inline-block"></span><span style="font-size:10px;color:var(--muted)">Апрель</span></div>'
|
||||
+ '<div style="display:flex;align-items:center;gap:5px"><span style="width:8px;height:8px;border-radius:2px;background:var(--accent);display:inline-block"></span><span style="font-size:10px;color:var(--muted)">Май</span></div>'
|
||||
+ '<div style="display:flex;align-items:center;gap:5px"><span style="width:8px;height:8px;border-radius:2px;background:var(--warn);display:inline-block;opacity:.5"></span><span style="font-size:10px;color:var(--muted)">Норма</span></div>'
|
||||
+ '</div>'
|
||||
+cats.map(function(c){
|
||||
var aprW=Math.round(c.apr/maxVal*100);
|
||||
var mayW=Math.round(c.may/maxVal*100);
|
||||
var normW=Math.round(c.norm/maxVal*100);
|
||||
var over=c.may>c.norm*1.2;
|
||||
return '<div style="margin-bottom:12px">'
|
||||
+'<div style="display:flex;justify-content:space-between;margin-bottom:4px">'
|
||||
+ '<span style="font-size:12px;font-weight:600;color:var(--ink)">'+c.name+'</span>'
|
||||
+ '<span style="font-size:11px;font-weight:700;color:'+(over?'var(--danger)':'var(--muted)')+'">'+c.may.toLocaleString('ru')+' ₽'+(over?' ⚠':'')+'</span>'
|
||||
+'</div>'
|
||||
// Апрель
|
||||
+'<div style="height:5px;background:rgba(0,0,0,.06);border-radius:3px;margin-bottom:3px;overflow:hidden">'
|
||||
+ '<div style="height:100%;width:'+aprW+'%;background:#94A3B8;border-radius:3px"></div>'
|
||||
+'</div>'
|
||||
// Май
|
||||
+'<div style="height:5px;background:rgba(0,0,0,.06);border-radius:3px;margin-bottom:3px;overflow:hidden">'
|
||||
+ '<div style="height:100%;width:'+mayW+'%;background:'+(over?'var(--danger)':'var(--accent)')+';border-radius:3px"></div>'
|
||||
+'</div>'
|
||||
// Норма-маркер
|
||||
+'<div style="position:relative;height:2px">'
|
||||
+ '<div style="position:absolute;left:'+normW+'%;top:-4px;width:2px;height:10px;background:var(--warn);border-radius:1px"></div>'
|
||||
+'</div>'
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
+'</div>')
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
// ─── ФИНАНСЫ ────────────────────────────────────────────────────────
|
||||
function _sFinance(){
|
||||
var salons=[
|
||||
{name:'Салон Ленина', color:'#3B82F6', plan:1700000, fact:1537000, prev:1280000},
|
||||
{name:'Салон Победы', color:'#8B5CF6', plan:1500000, fact:1310000, prev:1180000},
|
||||
];
|
||||
var debitors=[
|
||||
{name:'ООО «ДомСтрой»', sum:89000, days:21, mgr:'Дмитрий К.'},
|
||||
{name:'Козлов А.С.', sum:54000, days:18, mgr:'Ольга Р.'},
|
||||
{name:'Белова Н.В.', sum:38000, days:16, mgr:'Ольга Р.'},
|
||||
{name:'Прочие (4)', sum:106000,days:14, mgr:'—'},
|
||||
];
|
||||
var totalDebt=debitors.reduce(function(s,d){return s+d.sum;},0);
|
||||
|
||||
return '<div class="page">'
|
||||
+'<div style="padding:20px 16px 12px;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">'
|
||||
+ '<div style="font-size:17px;font-weight:800;color:var(--ink)">Финансы</div>'
|
||||
+ '<div style="font-size:12px;color:var(--muted);margin-top:2px">План / Факт · май 2026</div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="kpi-grid">'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">2 847 000 ₽</div><div class="kpi-label">Выручка факт</div><div class="kpi-delta dn">▼ −11% к плану</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">3 200 000 ₽</div><div class="kpi-label">Выручка план</div><div class="kpi-delta up">▲ +18% к апр.</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value" style="color:var(--danger)">'+Math.round(totalDebt/1000)+' тыс</div><div class="kpi-label">Дебиторка</div><div class="kpi-delta dn">7 клиентов</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>'
|
||||
|
||||
// План/факт по салонам
|
||||
+'<div class="section-label">Выполнение плана по салонам</div>'
|
||||
+'<div style="padding:0 16px">'
|
||||
+salons.map(function(s){
|
||||
var pct=Math.round(s.fact/s.plan*100);
|
||||
var growth=Math.round((s.fact-s.prev)/s.prev*100);
|
||||
return '<div class="card" style="padding:14px 16px;margin-bottom:10px">'
|
||||
+'<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px">'
|
||||
+ '<div>'
|
||||
+ '<div style="font-size:14px;font-weight:700;color:'+s.color+'">'+s.name+'</div>'
|
||||
+ '<div style="font-size:11px;color:var(--muted);margin-top:2px">Факт: <b style="color:var(--ink)">'+s.fact.toLocaleString('ru')+' ₽</b></div>'
|
||||
+ '</div>'
|
||||
+ '<div style="text-align:right">'
|
||||
+ '<div style="font-size:20px;font-weight:800;color:'+(pct>=95?'var(--success)':pct>=80?'var(--warn)':'var(--danger)')+'">'+pct+'%</div>'
|
||||
+ '<div style="font-size:10px;color:var(--muted)">от плана</div>'
|
||||
+ '</div>'
|
||||
+'</div>'
|
||||
// Прогресс
|
||||
+'<div style="height:8px;background:rgba(0,0,0,.07);border-radius:4px;overflow:hidden;margin-bottom:6px">'
|
||||
+ '<div style="height:100%;width:'+Math.min(pct,100)+'%;background:'+s.color+';border-radius:4px;transition:.4s"></div>'
|
||||
+'</div>'
|
||||
+'<div style="display:flex;justify-content:space-between">'
|
||||
+ '<span style="font-size:10px;color:var(--muted)">План: '+s.plan.toLocaleString('ru')+' ₽</span>'
|
||||
+ '<span style="font-size:10px;font-weight:700;color:'+(growth>0?'var(--success)':'var(--danger)')+'">'+( growth>0?'▲ +':'')+growth+'% к апр.</span>'
|
||||
+'</div>'
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
|
||||
// Дебиторка
|
||||
+'<div class="section-label">Дебиторская задолженность · '+totalDebt.toLocaleString('ru')+' ₽</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:0">'
|
||||
+debitors.map(function(d,i){
|
||||
var urgentColor=d.days>=21?'var(--danger)':d.days>=16?'var(--warn)':'var(--muted)';
|
||||
return '<div style="display:flex;align-items:center;padding:12px 14px;border-bottom:'+(i<debitors.length-1?'1px solid rgba(0,0,0,.05)':'none')+'">'
|
||||
+'<div style="flex:1;min-width:0">'
|
||||
+ '<div style="font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">'+d.name+'</div>'
|
||||
+ '<div style="font-size:11px;color:var(--muted);margin-top:1px">'+d.mgr+'</div>'
|
||||
+'</div>'
|
||||
+'<div style="text-align:right;flex-shrink:0;margin-left:8px">'
|
||||
+ '<div style="font-size:13px;font-weight:700;color:var(--ink)">'+d.sum.toLocaleString('ru')+' ₽</div>'
|
||||
+ '<div style="font-size:10px;font-weight:700;color:'+urgentColor+';margin-top:1px">'+d.days+' дней</div>'
|
||||
+'</div>'
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div></div>'
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
// ─── СТАРТ ──────────────────────────────────────────────────────────
|
||||
window.addEventListener('DOMContentLoaded', function(){_render();});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
918
Mokap/mockup_owner.html
Normal file
918
Mokap/mockup_owner.html
Normal file
@ -0,0 +1,918 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>@wasrusgen1 CRM — Генеральный директор</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{background:#C8CACD;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px;font-family:'Inter',sans-serif}
|
||||
|
||||
body{--accent:#003E7E;--accent2:#76BD22;--bg:#F5F6F8;--card:#FFFFFF;--ink:#1A1A2E;--muted:#8A94A6;--danger:#EF4444;--warn:#F59E0B;--success:#10B981;--s-success-bg:#ECFDF5;--s-warning-bg:#FFFBEB;--s-danger-bg:#FEF2F2;--s-info:#3B82F6;--s-info-bg:#EFF6FF}
|
||||
body[data-theme="radar"]{--accent:#4338CA;--accent2:#6366F1;--bg:#F9FAFB;--card:#FFFFFF;--ink:#111827;--muted:#6B7280}
|
||||
body[data-theme="dark"]{--accent:#4338CA;--accent2:#6366F1;--bg:#111827;--card:#1F2937;--ink:#F9FAFB;--muted:#9CA3AF}
|
||||
|
||||
#controls{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;justify-content:center;width:100%;max-width:600px}
|
||||
#controls label{color:#fff;font-size:13px;font-weight:600}
|
||||
#themeButtons{display:flex;gap:6px}
|
||||
.theme-btn{padding:7px 14px;border-radius:9px;border:2px solid transparent;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s}
|
||||
.theme-btn.active{border-color:#fff;transform:scale(1.05)}
|
||||
.theme-btn[data-t="zov"]{background:#003E7E;color:#fff}
|
||||
.theme-btn[data-t="radar"]{background:linear-gradient(135deg,#1E1B4B,#4338CA);color:#fff}
|
||||
.theme-btn[data-t="dark"]{background:#111827;color:#6366F1}
|
||||
|
||||
#phoneFrame{width:390px;height:844px;background:var(--bg);border-radius:44px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.15);position:relative;display:flex;flex-direction:column}
|
||||
#statusBar{height:44px;background:var(--card);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0;font-size:13px;font-weight:600;color:var(--ink);z-index:10}
|
||||
.sb-r{display:flex;align-items:center;gap:6px}
|
||||
#screen{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;background:var(--bg)}
|
||||
#screen::-webkit-scrollbar{display:none}
|
||||
|
||||
.bottom-nav{height:60px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-around;flex-shrink:0;z-index:100}
|
||||
[data-theme="dark"] .bottom-nav{background:rgba(31,41,55,.95)}
|
||||
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:5px 6px;border-radius:10px;transition:all .18s;flex:1;position:relative}
|
||||
.nav-item svg{width:22px;height:22px;color:var(--muted);transition:color .18s}
|
||||
.nav-item span{font-size:10px;color:var(--muted);font-weight:500;transition:color .18s}
|
||||
.nav-item.active{background:rgba(0,62,126,.07)}
|
||||
.nav-item.active svg,.nav-item.active span{color:var(--accent)}
|
||||
.nav-item.active::after{content:'';position:absolute;bottom:4px;width:16px;height:3px;border-radius:2px;background:var(--accent);opacity:.6}
|
||||
[data-theme="radar"] .nav-item.active{background:rgba(67,56,202,.07)}
|
||||
[data-theme="dark"] .nav-item.active{background:rgba(99,102,241,.12)}
|
||||
|
||||
.page{padding:0 0 80px;min-height:100%}
|
||||
.card{background:var(--card);border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.07);padding:16px;margin-bottom:12px}
|
||||
.card.warn-b{border-left:4px solid var(--warn)}
|
||||
.card.ok-b{border-left:4px solid var(--success)}
|
||||
.card.danger-b{border-left:4px solid var(--danger)}
|
||||
.card.accent-b{border-left:4px solid var(--accent)}
|
||||
|
||||
.section-label{text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:var(--muted);margin:20px 16px 8px;font-weight:600}
|
||||
|
||||
.hero-grad{background:linear-gradient(135deg,var(--accent) 0%,#005BB5 100%);padding:24px 20px 20px;color:#fff}
|
||||
[data-theme="radar"] .hero-grad{background:linear-gradient(135deg,#312E81 0%,#4338CA 100%)}
|
||||
[data-theme="dark"] .hero-grad{background:linear-gradient(135deg,#1E293B 0%,#312E81 100%)}
|
||||
|
||||
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px}
|
||||
.kpi-card{background:var(--card);border-radius:16px;padding:14px 16px;box-shadow:0 2px 10px rgba(0,0,0,.07);border:1px solid rgba(0,0,0,.05)}
|
||||
.kpi-value{font-size:23px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-0.03em}
|
||||
.kpi-label{font-size:11px;color:var(--muted);margin-top:5px;font-weight:500;letter-spacing:.01em}
|
||||
.kpi-delta{font-size:11px;font-weight:700;margin-top:7px;letter-spacing:.01em}
|
||||
.kpi-delta.up{color:var(--success)}
|
||||
.kpi-delta.dn{color:var(--danger)}
|
||||
|
||||
.bar-wrap{display:flex;align-items:flex-end;gap:6px;height:72px;padding:0 16px}
|
||||
.bar{flex:1;border-radius:4px 4px 0 0}
|
||||
.bar.cur{background:var(--accent)}
|
||||
.bar.prev{background:var(--accent);opacity:.25}
|
||||
.bar-labels{display:flex;gap:6px;padding:4px 16px 0}
|
||||
.bar-label{flex:1;text-align:center;font-size:9px;color:var(--muted);font-weight:500}
|
||||
|
||||
.row-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.05)}
|
||||
.row-item:last-child{border:none}
|
||||
.avatar-sm{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
|
||||
.ri-name{font-size:14px;font-weight:600;color:var(--ink)}
|
||||
.ri-sub{font-size:12px;color:var(--muted);margin-top:2px}
|
||||
.badge-sm{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap}
|
||||
.bg{background:var(--s-success-bg);color:#065F46}
|
||||
.bw{background:var(--s-warning-bg);color:#92400E}
|
||||
.br{background:var(--s-danger-bg);color:#991B1B}
|
||||
.bb{background:var(--s-info-bg);color:#1D4ED8}
|
||||
|
||||
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.05)}
|
||||
.stat-row:last-child{border:none;padding-bottom:0}
|
||||
.stat-l{font-size:13px;color:var(--muted);font-weight:500}
|
||||
.stat-v{font-size:14px;font-weight:700;color:var(--ink)}
|
||||
.stat-v.g{color:var(--success)}
|
||||
.stat-v.r{color:var(--danger)}
|
||||
.stat-v.b{color:var(--accent)}
|
||||
|
||||
.prog-bg{background:rgba(0,0,0,.07);border-radius:4px;height:6px;flex:1;margin:0 10px;overflow:hidden}
|
||||
.prog-fill{height:100%;border-radius:4px;background:var(--accent2)}
|
||||
|
||||
.btn-p{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;margin-top:12px}
|
||||
.btn-s{width:100%;padding:10px;background:transparent;color:var(--accent);border:1.5px solid var(--accent);border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;margin-top:8px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="controls">
|
||||
<label>Тема:</label>
|
||||
<div id="themeButtons">
|
||||
<button class="theme-btn active" data-t="zov" onclick="setTheme('zov',this)">Синяя</button>
|
||||
<button class="theme-btn" data-t="radar" onclick="setTheme('radar',this)">CRM</button>
|
||||
<button class="theme-btn" data-t="dark" onclick="setTheme('dark',this)">Dark</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="phoneFrame">
|
||||
<div id="statusBar">
|
||||
<span>9:41</span>
|
||||
<div class="sb-r">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1.42 9a16 16 0 0 1 21.16 0M5 12.55a11 11 0 0 1 14.08 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/></svg>
|
||||
<svg width="18" height="12" viewBox="0 0 27 12"><rect x="0" y="0" width="6" height="12" rx="1" fill="currentColor" opacity=".35"/><rect x="8" y="0" width="6" height="12" rx="1" fill="currentColor" opacity=".55"/><rect x="16" y="0" width="6" height="12" rx="1" fill="currentColor"/><rect x="23" y="3" width="3" height="6" rx="1" fill="currentColor" opacity=".4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div id="screen"></div>
|
||||
<div class="bottom-nav" id="nav"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window._sc = window._sc || 'home';
|
||||
|
||||
function setTheme(t,btn){
|
||||
document.body.removeAttribute('data-theme');
|
||||
if(t!=='zov') document.body.setAttribute('data-theme',t);
|
||||
document.querySelectorAll('.theme-btn').forEach(b=>b.classList.remove('active'));
|
||||
if(btn) btn.classList.add('active');
|
||||
}
|
||||
|
||||
function _nav(s){window._sc=s;_render();}
|
||||
|
||||
function _render(){
|
||||
var sc=document.getElementById('screen');
|
||||
sc.innerHTML=_rs();
|
||||
sc.scrollTop=0;
|
||||
document.getElementById('nav').innerHTML=_nb();
|
||||
}
|
||||
|
||||
window._finTab = window._finTab || 'fact';
|
||||
window._probExp = window._probExp || null;
|
||||
if(window._monthDrill===undefined) window._monthDrill=null; // 0-5 = selected bar, null = closed
|
||||
if(!window._drillSalon) window._drillSalon='all'; // 'all'|'s1'|'s2'
|
||||
if(!window._salonVis) window._salonVis={s1:true,s2:true}; // toggle per salon
|
||||
|
||||
var _ICONS = {
|
||||
// BarChart2 — floor line + clean bars
|
||||
chart:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="2" y1="20" x2="22" y2="20"/></svg>',
|
||||
truck:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v3"/><rect x="9" y="11" width="14" height="10" rx="1"/><circle cx="12" cy="21" r="1"/><circle cx="20" cy="21" r="1"/></svg>',
|
||||
// Wallet — clean, stroked coin slot
|
||||
wallet:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><circle cx="18" cy="14" r="1.5"/></svg>',
|
||||
// Users — two figures, cleaner arcs
|
||||
users:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
|
||||
// User single
|
||||
person:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
|
||||
// Sliders — modern "settings" / controls icon
|
||||
gear:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>',
|
||||
// TrendingUp — clean arrow
|
||||
trend:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>'
|
||||
};
|
||||
|
||||
// ─── ДАННЫЕ МЕСЯЦЕВ (с разбивкой по салонам) ───────────────────────
|
||||
var _mdata=[
|
||||
{m:'Дек',v:1.42,s1:.62,d:31,seed:1},
|
||||
{m:'Янв',v:1.78,s1:.58,d:31,seed:2},
|
||||
{m:'Фев',v:2.08,s1:.55,d:28,seed:3},
|
||||
{m:'Мар',v:1.91,s1:.60,d:31,seed:4},
|
||||
{m:'Апр',v:2.41,s1:.57,d:30,seed:5},
|
||||
{m:'Май',v:2.85,s1:.54,d:31,seed:6},
|
||||
];
|
||||
|
||||
function _genDaily(seed,totalM,ndays){
|
||||
var r=[]; for(var i=0;i<ndays;i++){var s=(Math.sin(seed*31+i*17+3)*0.5+0.5)*0.8+0.1;r.push(Math.round(s*((i+seed)%7>=5?.28:1.18)*100000+18000));}
|
||||
var sum=r.reduce((a,b)=>a+b,0); var sc=totalM*1e6/sum; return r.map(d=>Math.round(d*sc));
|
||||
}
|
||||
|
||||
function _dayChart(days,color,idx){
|
||||
var W=330,H=68,n=days.length;
|
||||
var mx=Math.max.apply(null,days),mn=Math.min(mx*.02,Math.min.apply(null,days));
|
||||
var rng=mx-mn||1;
|
||||
var pts=days.map((v,i)=>[(Math.round(i/(n-1)*(W-12)+6)),Math.round(H-6-(v-mn)/rng*(H-18))]);
|
||||
var line=pts.map(p=>p[0]+','+p[1]).join(' ');
|
||||
var area='6,'+(H-6)+' '+line+' '+(W-6)+','+(H-6);
|
||||
var bi=days.indexOf(mx); var bp=pts[bi];
|
||||
return '<svg viewBox="0 0 '+W+' '+H+'" style="width:100%;height:'+H+'px;display:block">'
|
||||
+'<defs><linearGradient id="dcg'+idx+'" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="'+color+'" stop-opacity=".2"/><stop offset="100%" stop-color="'+color+'" stop-opacity="0"/></linearGradient></defs>'
|
||||
+'<polygon points="'+area+'" fill="url(#dcg'+idx+')"/>'
|
||||
+'<polyline points="'+line+'" fill="none" stroke="'+color+'" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
+'<circle cx="'+bp[0]+'" cy="'+bp[1]+'" r="5" fill="'+color+'" opacity=".2"/>'
|
||||
+'<circle cx="'+bp[0]+'" cy="'+bp[1]+'" r="3" fill="'+color+'"/>'
|
||||
+'<text x="'+Math.min(bp[0]+6,W-40)+'" y="'+(bp[1]-6)+'" font-size="9" font-weight="800" fill="'+color+'">'+Math.round(mx/1000)+'тыс</text>'
|
||||
+'</svg>';
|
||||
}
|
||||
|
||||
function _drillPanel(idx){
|
||||
var md=_mdata[idx];
|
||||
var all=_genDaily(md.seed,md.v,md.d);
|
||||
var s1=all.map(d=>Math.round(d*md.s1));
|
||||
var s2=all.map((d,i)=>d-s1[i]);
|
||||
var clrs={all:'#003E7E',s1:'#3B82F6',s2:'#8B5CF6'};
|
||||
var days=window._drillSalon==='s1'?s1:window._drillSalon==='s2'?s2:all;
|
||||
var clr=clrs[window._drillSalon]||'#003E7E';
|
||||
var tot=days.reduce((a,b)=>a+b,0);
|
||||
var mx=Math.max.apply(null,days);
|
||||
var bestDay=days.indexOf(mx)+1;
|
||||
var pills=[{k:'all',l:'Все салоны'},{k:'s1',l:'Салон Ленина'},{k:'s2',l:'Салон Победы'}]
|
||||
.map(f=>{var a=window._drillSalon===f.k;return '<span onclick="window._drillSalon=\''+f.k+'\';_render()" style="display:inline-flex;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;margin-right:6px;margin-bottom:6px;background:'+(a?clr:'rgba(0,0,0,.07)')+';color:'+(a?'#fff':'var(--muted)')+'">'+f.l+'</span>';}).join('');
|
||||
var t1=s1.reduce((a,b)=>a+b,0),t2=s2.reduce((a,b)=>a+b,0),tAll=all.reduce((a,b)=>a+b,0);
|
||||
return '<div style="border-top:2px solid rgba(0,62,126,.12);padding:14px 16px 4px;background:rgba(0,62,126,.03)">'
|
||||
+'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">'
|
||||
+ '<div style="font-size:14px;font-weight:800;color:var(--ink)">'+md.m+' — по дням</div>'
|
||||
+ '<span onclick="window._monthDrill=null;_render()" style="width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,.08);border-radius:50%;font-size:16px;color:var(--muted);cursor:pointer">×</span>'
|
||||
+'</div>'
|
||||
+'<div style="margin-bottom:8px">'+pills+'</div>'
|
||||
+_dayChart(days,clr,idx)
|
||||
+'<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:10px">'
|
||||
+[{l:'Выручка',v:(tot/1e6).toFixed(2)+' М ₽'},{l:'Среднедн.',v:Math.round(tot/days.length/1000)+' тыс ₽'},{l:'Пик · '+bestDay+' '+md.m,v:Math.round(mx/1000)+' тыс ₽'}]
|
||||
.map(s=>'<div style="background:var(--card);border-radius:10px;padding:8px 10px;border:1px solid rgba(0,0,0,.06)"><div style="font-size:10px;color:var(--muted);font-weight:500;margin-bottom:3px">'+s.l+'</div><div style="font-size:12px;font-weight:800;color:var(--ink);letter-spacing:-.02em">'+s.v+'</div></div>')
|
||||
.join('')+'</div>'
|
||||
+(window._drillSalon==='all'
|
||||
?'<div style="margin-top:10px">'
|
||||
+[{l:'Салон Ленина',v:t1,c:'#3B82F6'},{l:'Салон Победы',v:t2,c:'#8B5CF6'}].map(s=>{var pct=Math.round(s.v/tAll*100);return '<div style="margin-bottom:8px"><div style="display:flex;justify-content:space-between;margin-bottom:4px"><span style="font-size:12px;color:var(--ink);font-weight:600">'+s.l+'</span><span style="font-size:12px;font-weight:700;color:var(--ink)">'+(s.v/1e6).toFixed(2)+' М · '+pct+'%</span></div><div style="height:5px;background:rgba(0,0,0,.07);border-radius:3px"><div style="height:100%;background:'+s.c+';border-radius:3px;width:'+pct+'%"></div></div></div>';}).join('')
|
||||
+'</div>'
|
||||
:'')
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
function _nb(){
|
||||
var items=[
|
||||
{id:'home', icon:'chart', label:'Главная'},
|
||||
{id:'sales', icon:'trend', label:'Продажи'},
|
||||
{id:'finance', icon:'wallet',label:'Финансы'},
|
||||
{id:'team', icon:'users', label:'Команда'},
|
||||
{id:'sklad', icon:'truck', label:'Склад'},
|
||||
{id:'settings',icon:'gear', label:'Настройки'},
|
||||
];
|
||||
return items.map(it=>'<div class="nav-item'+(window._sc===it.id?' active':'')+'" onclick="_nav(\''+it.id+'\')">'+_ICONS[it.icon]+'<span>'+it.label+'</span></div>').join('');
|
||||
}
|
||||
|
||||
function _rs(){
|
||||
if(window._sc==='home') return _sHome();
|
||||
if(window._sc==='sales') return _sSales();
|
||||
if(window._sc==='finance') return _sFinance();
|
||||
if(window._sc==='team') return _sTeam();
|
||||
if(window._sc==='clients') return _sClients();
|
||||
if(window._sc==='sklad') return _sSklad();
|
||||
if(window._sc==='settings') return _sSettings();
|
||||
return _sHome();
|
||||
}
|
||||
|
||||
// ─── ГЛАВНАЯ ───────────────────────────────────────────────────────
|
||||
function _sHome(){
|
||||
var vis=window._salonVis;
|
||||
// Grouped bars: max по отдельным значениям каждого салона
|
||||
var allVals=_mdata.map(m=>[m.v*m.s1, m.v*(1-m.s1)]).reduce(function(a,b){return a.concat(b);},[]);
|
||||
var mx=Math.max.apply(null,allVals);
|
||||
var CHART_H=80; // px
|
||||
|
||||
// Toggle pills — клик включает/выключает салон
|
||||
var toggles='<div style="display:flex;gap:7px;padding:2px 16px 12px">'
|
||||
+'<div onclick="window._salonVis.s1=!window._salonVis.s1;window._monthDrill=null;_render()" style="cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;transition:.18s;background:'+(vis.s1?'#3B82F6':'rgba(0,0,0,.07)')+';border:1.5px solid '+(vis.s1?'#3B82F6':'rgba(0,0,0,.1)')+'"><span style="width:7px;height:7px;border-radius:50%;background:'+(vis.s1?'#fff':'#94A3B8')+';flex-shrink:0"></span><span style="font-size:11px;font-weight:700;color:'+(vis.s1?'#fff':'var(--muted)')+'">Салон Ленина</span></div>'
|
||||
+'<div onclick="window._salonVis.s2=!window._salonVis.s2;window._monthDrill=null;_render()" style="cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;transition:.18s;background:'+(vis.s2?'#8B5CF6':'rgba(0,0,0,.07)')+';border:1.5px solid '+(vis.s2?'#8B5CF6':'rgba(0,0,0,.1)')+'"><span style="width:7px;height:7px;border-radius:50%;background:'+(vis.s2?'#fff':'#94A3B8')+';flex-shrink:0"></span><span style="font-size:11px;font-weight:700;color:'+(vis.s2?'#fff':'var(--muted)')+'">Салон Победы</span></div>'
|
||||
+'</div>';
|
||||
|
||||
var bars=toggles
|
||||
+'<div style="display:flex;align-items:flex-end;gap:4px;height:'+CHART_H+'px;padding:0 16px">'
|
||||
+_mdata.map((m,i)=>{
|
||||
var sel=window._monthDrill===i;
|
||||
var hasOther=window._monthDrill!==null&&!sel;
|
||||
var op=sel?'1':hasOther?'0.2':(i===_mdata.length-1?'1':'0.7');
|
||||
var v1=m.v*m.s1; var v2=m.v*(1-m.s1);
|
||||
var h1=Math.round(v1/mx*CHART_H); var h2=Math.round(v2/mx*CHART_H);
|
||||
var selBorder=sel?'outline:2px solid var(--accent2);outline-offset:2px;':'';
|
||||
// Группа месяца
|
||||
return '<div style="flex:1;display:flex;align-items:flex-end;gap:2px;cursor:pointer;opacity:'+op+';transition:opacity .2s" onclick="window._monthDrill=(window._monthDrill==='+i+'?null:'+i+');window._drillSalon=\'all\';_render()">'
|
||||
// Бар Ленина
|
||||
+(vis.s1?'<div style="flex:1;height:'+h1+'px;background:#3B82F6;border-radius:3px 3px 0 0;'+selBorder+'"></div>':'<div style="flex:1"></div>')
|
||||
// Бар Победы
|
||||
+(vis.s2?'<div style="flex:1;height:'+h2+'px;background:#8B5CF6;border-radius:3px 3px 0 0;'+selBorder+'"></div>':'<div style="flex:1"></div>')
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
+'<div class="bar-labels">'+_mdata.map((m,i)=>{
|
||||
var sel=window._monthDrill===i;
|
||||
return '<div class="bar-label" style="cursor:pointer;'+(sel?'color:var(--accent);font-weight:800;':'')+'" onclick="window._monthDrill=(window._monthDrill==='+i+'?null:'+i+');window._drillSalon=\'all\';_render()">'
|
||||
+(sel?m.v.toFixed(2)+'М':m.m)+'</div>';
|
||||
}).join('')+'</div>';
|
||||
return '<div class="page">'
|
||||
+'<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:30px;font-weight:800;letter-spacing:-.04em">2 847 000 ₽</div>'
|
||||
+ '<div style="font-size:13px;opacity:.8;margin-top:5px">Выручка · <span style="color:#76BD22;font-weight:700">▲ +18%</span> к апрелю</div>'
|
||||
+ '<div style="display:flex;gap:20px;margin-top:16px;font-size:13px;opacity:.85">'
|
||||
+ '<div><div style="opacity:.65;font-size:11px">Прибыль</div><div style="font-weight:700">988 000 ₽</div></div>'
|
||||
+ '<div><div style="opacity:.65;font-size:11px">Маржа</div><div style="font-weight:700;color:#76BD22">34.7%</div></div>'
|
||||
+ '<div><div style="opacity:.65;font-size:11px">Заказов</div><div style="font-weight:700">47</div></div>'
|
||||
+ '</div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="kpi-grid">'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">34.7%</div><div class="kpi-label">Маржа (EBITDA)</div><div class="kpi-delta up">▲ +2.1 пп к апр.</div></div>'
|
||||
+ '<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">4.8 / 5</div><div class="kpi-label">NPS клиентов</div><div class="kpi-delta up">▲ +0.1 пункт</div></div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="section-label" style="cursor:default">Выручка · последние 6 месяцев <span style="font-size:10px;color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0">нажмите на бар</span></div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:16px 0 10px">'+bars+'</div></div>'
|
||||
+(window._monthDrill!==null ? '<div style="padding:0 16px">'+_drillPanel(window._monthDrill)+'</div>' : '')
|
||||
|
||||
// ── ПАЙПЛАЙН (одна строка-сигнал)
|
||||
+'<div style="padding:0 16px;margin-bottom:4px">'
|
||||
+'<div class="card" style="padding:13px 16px;cursor:pointer;display:flex;align-items:center;gap:12px" onclick="_nav(\'sales\')">'
|
||||
+ '<div style="flex:1">'
|
||||
+ '<div style="font-size:13px;font-weight:700;color:var(--ink)">Пайплайн продаж · 47 заказов</div>'
|
||||
+ '<div style="display:flex;gap:12px;margin-top:5px">'
|
||||
+ '<span style="font-size:11px;color:var(--muted)">В работе: <b style="color:var(--ink)">2 847 000 ₽</b></span>'
|
||||
+ '<span style="font-size:11px;color:var(--danger);font-weight:700">⚠ 3 просрочки · 385 тыс риск</span>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<span style="font-size:18px;color:var(--muted)">›</span>'
|
||||
+'</div></div>'
|
||||
|
||||
// ── ПРОБЛЕМЫ (кликабельные)
|
||||
+'<div class="section-label">🚨 Проблемы и срывы</div>'
|
||||
+'<div style="padding:0 16px">'
|
||||
+_problems().map(p=>{
|
||||
var exp = window._probExp===p.id;
|
||||
var border = p.sev==='red'?'var(--danger)':p.sev==='warn'?'var(--warn)':'var(--success)';
|
||||
var badgeCls = p.sev==='red'?'br':p.sev==='warn'?'bw':'bg';
|
||||
return '<div class="card" style="margin-bottom:8px;border-left:3px solid '+border+';cursor:pointer;padding:12px 14px" onclick="window._probExp=(window._probExp===\''+p.id+'\'?null:\''+p.id+'\');_render()">'
|
||||
+'<div style="display:flex;justify-content:space-between;align-items:flex-start">'
|
||||
+ '<div style="flex:1">'
|
||||
+ '<div style="font-size:13px;font-weight:700;color:var(--ink)">'+p.title+'</div>'
|
||||
+ '<div style="font-size:12px;color:var(--muted);margin-top:3px">'+p.sub+'</div>'
|
||||
+ '</div>'
|
||||
+ '<div style="display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:8px">'
|
||||
+ '<span class="badge-sm '+badgeCls+'">'+p.badge+'</span>'
|
||||
+ '<span style="font-size:14px;color:var(--muted);transition:.2s;'+(exp?'transform:rotate(180deg)':'')+'">'+(exp?'▲':'▼')+'</span>'
|
||||
+ '</div>'
|
||||
+'</div>'
|
||||
+(exp
|
||||
? '<div style="margin-top:10px;padding-top:10px;border-top:1px solid rgba(0,0,0,.07)">'
|
||||
+p.detail.map(d=>'<div style="font-size:12px;color:var(--ink);line-height:1.6;margin-bottom:4px">'+d+'</div>').join('')
|
||||
+(p.action?'<button style="margin-top:8px;padding:7px 14px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer">'+p.action+'</button>':'')
|
||||
+'</div>'
|
||||
: '')
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div>'
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
function _problems(){
|
||||
return [
|
||||
{id:'p1', sev:'red', badge:'3', title:'3 заказа с просрочкой монтажа',
|
||||
sub:'Самый старый — 8 дней. Причина: Иван Т. заболел',
|
||||
detail:['🔴 КЧ-2841 · Просрочка 8 дн · Иван Т. (болеет)','🔴 КЧ-2798 · Просрочка 5 дн · не назначен исполнитель','🟡 ЗМ-1902 · Просрочка 3 дн · перенесён клиентом'],
|
||||
action:'Назначить исполнителей →'},
|
||||
{id:'p2', sev:'red', badge:'!', title:'Рекламация — ЗМ-1891',
|
||||
sub:'Клиент требует переделки фасадов · 3 дня без ответа',
|
||||
detail:['Клиент: Антонова Т.В.','Сборщик: Иван Т. (сейчас болеет)','Суть: перекос фасадов, зазоры > 3 мм','Статус: открыта 22.05, ответа нет'],
|
||||
action:'Открыть рекламацию →'},
|
||||
{id:'p3', sev:'warn', badge:'7', title:'Дебиторка: 287 000 ₽',
|
||||
sub:'7 клиентов · авансы > 14 дней',
|
||||
detail:['ООО «ДомСтрой» · 89 000 ₽ · 21 день','Козлов А. · 54 000 ₽ · 18 дней','Белова Н. · 38 000 ₽ · 16 дней','+ ещё 4 клиента на сумму 106 000 ₽'],
|
||||
action:'Поставить задачу менеджеру →'},
|
||||
{id:'p4', sev:'warn', badge:'79', title:'KPI Ольги Р. ниже нормы',
|
||||
sub:'Менеджер · KPI 79 · 2-й месяц подряд',
|
||||
detail:['Норма: ≥ 80','Апрель: 81 → Май: 79 (тренд вниз)','Причина: 3 потерянных лида на этапе КП','Рекомендация: встреча-разбор по скриптам'],
|
||||
action:'Поставить задачу директору →'},
|
||||
{id:'p5', sev:'warn', badge:'4', title:'Нет замерщика 28–30 мая',
|
||||
sub:'Марина С. в отпуске · 4 замера без исполнителя',
|
||||
detail:['28 мая: Иванов С. (Кировский р-н)','28 мая: ООО «МебельПлюс» (Центр)','29 мая: Петрова Н. (Советский р-н)','30 мая: Зайцев И. (Ленинский р-н)'],
|
||||
action:'Назначить Светлану М. →'},
|
||||
{id:'p6', sev:'ok', badge:'✅', title:'Кассовый разрыв — нет',
|
||||
sub:'Баланс в норме · Склад укомплектован',
|
||||
detail:['Остаток на счёте: 1 240 000 ₽','Ожидаемые поступления 7 дней: +680 000 ₽','Плановые выплаты 7 дней: −320 000 ₽','Склад: 97% позиций в наличии'],
|
||||
action:null},
|
||||
];
|
||||
}
|
||||
|
||||
// ─── ФИНАНСЫ ───────────────────────────────────────────────────────
|
||||
function _finTabBar(){
|
||||
return '<div style="display:flex;gap:0;padding:0 16px 0;margin-top:12px">'
|
||||
+['fact','forecast'].map((t,i)=>{
|
||||
var lbl = t==='fact'?'📊 Факт':'🔮 Прогноз';
|
||||
var act = window._finTab===t;
|
||||
return '<div onclick="window._finTab=\''+t+'\';_render()" style="flex:1;text-align:center;padding:9px 0;font-size:13px;font-weight:700;cursor:pointer;border-bottom:2px solid '+(act?'var(--accent)':'rgba(0,0,0,.1)')+';color:'+(act?'var(--accent)':'var(--muted)')+'">'+lbl+'</div>';
|
||||
}).join('')
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
function _sFinance(){
|
||||
var exp=[
|
||||
{label:'ФОТ', val:456000, pct:70, color:'#3B82F6'},
|
||||
{label:'Логистика', val:89000, pct:14, color:'#8B5CF6'},
|
||||
{label:'Аренда', val:48000, pct:7, color:'#F59E0B'},
|
||||
{label:'Реклама', val:78000, pct:12, color:'#10B981'},
|
||||
{label:'Прочие', val:58000, pct:9, color:'#EF4444'},
|
||||
];
|
||||
var hist=[
|
||||
{m:'Фев',rev:2.1, pr:672},
|
||||
{m:'Мар',rev:1.9, pr:589},
|
||||
{m:'Апр',rev:2.4, pr:792},
|
||||
{m:'Май',rev:2.85,pr:988,cur:true},
|
||||
];
|
||||
var header = '<div style="padding:20px 16px 0;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">'
|
||||
+'<div style="font-size:17px;font-weight:800;color:var(--ink)">Финансы</div>'
|
||||
+'<div style="font-size:12px;color:var(--muted);margin-top:2px">Май 2026</div>'
|
||||
+_finTabBar()
|
||||
+'</div>';
|
||||
|
||||
if(window._finTab==='forecast') return _sFinanceForecast(header);
|
||||
|
||||
// ── ФАКТ ──
|
||||
return '<div class="page">'+header
|
||||
+'<div style="padding:16px 16px 0">'
|
||||
+'<div class="card" style="background:linear-gradient(135deg,var(--accent),#005BB5);color:#fff;padding:20px 20px 16px">'
|
||||
+ '<div style="font-size:11px;opacity:.7;font-weight:700;text-transform:uppercase;letter-spacing:.08em">Чистая прибыль · Май</div>'
|
||||
+ '<div style="font-size:34px;font-weight:800;letter-spacing:-.04em;margin-top:4px">988 000 ₽</div>'
|
||||
+ '<div style="display:flex;gap:20px;margin-top:12px;font-size:12px;opacity:.85">'
|
||||
+ '<div><div style="opacity:.65">Выручка</div><div style="font-weight:700">2 847 000 ₽</div></div>'
|
||||
+ '<div><div style="opacity:.65">Расходы</div><div style="font-weight:700">1 859 000 ₽</div></div>'
|
||||
+ '<div><div style="opacity:.65">Маржа</div><div style="font-weight:700;color:#76BD22">34.7%</div></div>'
|
||||
+ '</div>'
|
||||
+'</div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="section-label">Структура расходов</div>'
|
||||
+'<div style="padding:0 16px"><div class="card">'
|
||||
+exp.map(e=>'<div style="margin-bottom:12px">'
|
||||
+'<div style="display:flex;justify-content:space-between;margin-bottom:5px">'
|
||||
+ '<span style="font-size:13px;color:var(--ink);font-weight:500">'+e.label+'</span>'
|
||||
+ '<span style="font-size:13px;font-weight:700;color:var(--ink)">'+(e.val/1000).toFixed(0)+' тыс ₽</span>'
|
||||
+'</div>'
|
||||
+'<div class="prog-bg" style="margin:0"><div style="height:100%;border-radius:4px;background:'+e.color+';width:'+e.pct+'%"></div></div>'
|
||||
+'</div>').join('')
|
||||
+'</div></div>'
|
||||
|
||||
+'<div class="section-label">Динамика по месяцам</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:0">'
|
||||
+hist.map(h=>'<div style="display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.05);'+(h.cur?'background:var(--s-info-bg)':'')+'">'
|
||||
+'<div style="font-size:13px;font-weight:700;color:var(--ink);width:34px">'+h.m+'</div>'
|
||||
+'<div style="flex:1;padding-left:10px">'
|
||||
+ '<div style="font-size:11px;color:var(--muted)">Выручка</div>'
|
||||
+ '<div style="font-size:14px;font-weight:700;color:var(--ink)">'+h.rev.toFixed(2)+' М ₽</div>'
|
||||
+'</div>'
|
||||
+'<div style="text-align:right">'
|
||||
+ '<div style="font-size:11px;color:var(--muted)">Прибыль</div>'
|
||||
+ '<div style="font-size:14px;font-weight:700;color:var(--success)">'+h.pr+' тыс</div>'
|
||||
+'</div>'
|
||||
+(h.cur?'<div style="margin-left:8px"><span class="badge-sm bb">тек.</span></div>':'')
|
||||
+'</div>').join('')
|
||||
+'</div></div>'
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
function _sFinanceForecast(header){
|
||||
var cf=[
|
||||
{label:'Остаток на счёте', val:'+1 240 000', color:'var(--success)', note:'сегодня'},
|
||||
{label:'Ожидаемые поступления', val:'+1 680 000', color:'var(--success)', note:'7 дн · из воронки'},
|
||||
{label:'ФОТ (аванс 1 июня)', val:'−228 000', color:'var(--danger)', note:'через 5 дней'},
|
||||
{label:'Подрядчики / доставка',val:'−147 000', color:'var(--danger)', note:'7 дн · 3 счёта'},
|
||||
{label:'Аренда + хоз.', val:'−48 000', color:'var(--danger)', note:'1 июня'},
|
||||
];
|
||||
var pipe=[
|
||||
{stage:'Договор → Монтаж', cnt:8, sum:'684 000', prob:90, color:'#10B981'},
|
||||
{stage:'КП отправлено', cnt:11,sum:'912 000', prob:55, color:'#3B82F6'},
|
||||
{stage:'На замере', cnt:7, sum:'490 000', prob:35, color:'#F59E0B'},
|
||||
{stage:'Новые лиды', cnt:14,sum:'1 120 000',prob:15,color:'#8B5CF6'},
|
||||
];
|
||||
var expected = 684*0.9 + 912*0.55 + 490*0.35 + 1120*0.15;
|
||||
return '<div class="page">'+header
|
||||
+'<div style="padding:16px 16px 0">'
|
||||
+'<div class="card" style="background:linear-gradient(135deg,#065F46,#10B981);color:#fff;padding:20px 20px 16px">'
|
||||
+ '<div style="font-size:11px;opacity:.7;font-weight:700;text-transform:uppercase;letter-spacing:.08em">Прогноз · следующие 30 дней</div>'
|
||||
+ '<div style="font-size:34px;font-weight:800;letter-spacing:-.04em;margin-top:4px">+2 497 000 ₽</div>'
|
||||
+ '<div style="font-size:13px;opacity:.85;margin-top:6px">Ожидаемый баланс с учётом поступлений и выплат</div>'
|
||||
+ '<div style="display:flex;gap:20px;margin-top:12px;font-size:12px;opacity:.85">'
|
||||
+ '<div><div style="opacity:.65">Взвешенный пайплайн</div><div style="font-weight:700">'+Math.round(expected)+' тыс ₽</div></div>'
|
||||
+ '<div><div style="opacity:.65">Выплаты</div><div style="font-weight:700">−423 тыс ₽</div></div>'
|
||||
+ '</div>'
|
||||
+'</div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="section-label">Cash flow · 30 дней</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:0">'
|
||||
+cf.map(r=>'<div style="display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.05)">'
|
||||
+'<div style="flex:1"><div style="font-size:13px;color:var(--ink);font-weight:500">'+r.label+'</div><div style="font-size:11px;color:var(--muted);margin-top:1px">'+r.note+'</div></div>'
|
||||
+'<div style="font-size:14px;font-weight:800;color:'+r.color+'">'+r.val+' ₽</div>'
|
||||
+'</div>').join('')
|
||||
+'<div style="padding:12px 16px;border-top:2px solid rgba(0,0,0,.08);display:flex;justify-content:space-between">'
|
||||
+ '<span style="font-size:13px;font-weight:700;color:var(--ink)">Итого через 30 дней</span>'
|
||||
+ '<span style="font-size:14px;font-weight:800;color:var(--success)">+2 497 000 ₽</span>'
|
||||
+'</div>'
|
||||
+'</div></div>'
|
||||
|
||||
+'<div class="section-label">Взвешенный пайплайн</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:0">'
|
||||
+pipe.map(p=>'<div style="padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.05)">'
|
||||
+'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">'
|
||||
+ '<div><div style="font-size:13px;font-weight:600;color:var(--ink)">'+p.stage+'</div>'
|
||||
+ '<div style="font-size:11px;color:var(--muted)">'+p.cnt+' заказов · вероятность '+p.prob+'%</div></div>'
|
||||
+ '<div style="text-align:right"><div style="font-size:13px;font-weight:700;color:var(--ink)">'+p.sum+' ₽</div>'
|
||||
+ '<div style="font-size:11px;color:'+p.color+';font-weight:700">≈'+(parseInt(p.sum.replace(/\s/g,''))/1000*p.prob/100).toFixed(0)+' тыс</div></div>'
|
||||
+'</div>'
|
||||
+'<div class="prog-bg" style="margin:0"><div style="height:100%;border-radius:4px;background:'+p.color+';width:'+p.prob+'%"></div></div>'
|
||||
+'</div>').join('')
|
||||
+'</div></div>'
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
// ─── ПРОДАЖИ ───────────────────────────────────────────────────────
|
||||
function _sSales(){
|
||||
var stages=[
|
||||
{id:'new', label:'Новые лиды', cnt:14, sum:'1 120 000', color:'#8B5CF6', pct:100},
|
||||
{id:'meet', label:'На замере', cnt:7, sum:'490 000', color:'#3B82F6', pct:50},
|
||||
{id:'kp', label:'КП отправлено',cnt:11,sum:'912 000', color:'#F59E0B', pct:79},
|
||||
{id:'think', label:'Думает', cnt:5, sum:'380 000', color:'#F97316', pct:36},
|
||||
{id:'deal', label:'Договор', cnt:8, sum:'684 000', color:'#10B981', pct:57},
|
||||
{id:'mount', label:'Монтаж', cnt:6, sum:'512 000', color:'#059669', pct:43},
|
||||
{id:'lost', label:'Потерян', cnt:4, sum:'290 000', color:'#EF4444', pct:29},
|
||||
];
|
||||
var conv=[
|
||||
{from:'Лид → Замер', pct:58, good:true},
|
||||
{from:'Замер → КП', pct:94, good:true},
|
||||
{from:'КП → Договор', pct:48, good:false},
|
||||
{from:'Договор → Монтаж',pct:100,good:true},
|
||||
];
|
||||
var orders=[
|
||||
{id:'КЧ-2847', client:'ООО «РемСтрой»', sum:'187 000', stage:'Монтаж', days:2, mgr:'Дмитрий К.', salon:'Ленина', warn:false},
|
||||
{id:'ЗМ-2831', client:'Надежда Орлова', sum:'142 000', stage:'Договор', days:5, mgr:'Дмитрий К.', salon:'Победы', warn:false},
|
||||
{id:'КЧ-2819', client:'ИП Сидоров', sum:'128 500', stage:'КП', days:1, mgr:'Ольга Р.', salon:'Ленина', warn:false},
|
||||
{id:'ЗМ-2841', client:'Анна Белова', sum:'113 000', stage:'Монтаж', days:0, mgr:'Ольга Р.', salon:'Победы', warn:true},
|
||||
{id:'КЧ-2798', client:'Сергей Павлов', sum:'98 500', stage:'Монтаж', days:-5, mgr:'Дмитрий К.', salon:'Ленина', warn:true},
|
||||
{id:'КЧ-2789', client:'Тамара Н.', sum:'94 000', stage:'Думает', days:8, mgr:'Ольга Р.', salon:'Ленина', warn:false},
|
||||
{id:'ЗМ-2774', client:'ООО «МебельПлюс»', sum:'88 000', stage:'КП', days:3, mgr:'Дмитрий К.', salon:'Победы', warn:false},
|
||||
];
|
||||
var stageColor={Монтаж:'#10B981',Договор:'#3B82F6',КП:'#F59E0B',Думает:'#F97316','Новый':'#8B5CF6'};
|
||||
|
||||
return '<div class="page">'
|
||||
+'<div style="padding:20px 16px 12px;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">'
|
||||
+ '<div style="font-size:17px;font-weight:800;color:var(--ink)">Продажи</div>'
|
||||
+ '<div style="font-size:12px;color:var(--muted);margin-top:2px">Май 2026 · активная воронка</div>'
|
||||
+'</div>'
|
||||
|
||||
// KPI strip
|
||||
+'<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">3.6 М</div><div class="kpi-label">Сумма воронки, ₽</div><div class="kpi-delta up">▲ +14%</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">48%</div><div class="kpi-label">Конверсия КП→Дог.</div><div class="kpi-delta dn">▼ −5 пп</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">21 дн</div><div class="kpi-label">Ср. цикл сделки</div><div class="kpi-delta up">▼ −2 дня</div></div>'
|
||||
+'</div>'
|
||||
|
||||
// Воронка
|
||||
+'<div class="section-label">Воронка продаж</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:12px 16px">'
|
||||
+stages.map(s=>'<div style="margin-bottom:10px">'
|
||||
+'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px">'
|
||||
+ '<div style="display:flex;align-items:center;gap:8px">'
|
||||
+ '<span style="width:8px;height:8px;border-radius:50%;background:'+s.color+';display:inline-block;flex-shrink:0"></span>'
|
||||
+ '<span style="font-size:13px;color:var(--ink);font-weight:500">'+s.label+'</span>'
|
||||
+ '<span class="badge-sm" style="background:'+s.color+'18;color:'+s.color+'">'+s.cnt+'</span>'
|
||||
+ '</div>'
|
||||
+ '<span style="font-size:12px;font-weight:700;color:var(--ink)">'+s.sum+' ₽</span>'
|
||||
+'</div>'
|
||||
+'<div class="prog-bg" style="margin:0"><div style="height:100%;border-radius:4px;background:'+s.color+';width:'+s.pct+'%"></div></div>'
|
||||
+'</div>').join('')
|
||||
+'</div></div>'
|
||||
|
||||
// Конверсия
|
||||
+'<div class="section-label">Конверсия по этапам</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:0">'
|
||||
+conv.map(c=>'<div style="display:flex;align-items:center;padding:11px 16px;border-bottom:1px solid rgba(0,0,0,.05)">'
|
||||
+'<div style="flex:1;font-size:13px;color:var(--ink)">'+c.from+'</div>'
|
||||
+'<div style="font-size:16px;font-weight:800;color:'+(c.good?'var(--success)':'var(--danger)')+'">'+c.pct+'%</div>'
|
||||
+'</div>').join('')
|
||||
+'<div style="padding:10px 16px;background:var(--s-warning-bg);border-radius:0 0 12px 12px">'
|
||||
+ '<div style="font-size:12px;color:#92400E;font-weight:600">⚠️ КП→Договор 48% — ниже нормы 55%. Разобрать с менеджерами скрипты КП.</div>'
|
||||
+'</div>'
|
||||
+'</div></div>'
|
||||
|
||||
// Список заказов
|
||||
+'<div class="section-label">Все заказы в работе</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:0">'
|
||||
+orders.map(o=>'<div style="display:flex;align-items:center;padding:11px 16px;border-bottom:1px solid rgba(0,0,0,.05)">'
|
||||
+'<div style="flex:1;min-width:0">'
|
||||
+ '<div style="display:flex;align-items:center;gap:6px">'
|
||||
+ '<span style="font-size:12px;font-weight:700;color:var(--accent)">'+o.id+'</span>'
|
||||
+ (o.warn?'<span style="font-size:10px;font-weight:700;color:var(--danger)">⚠ просрочка</span>':'')
|
||||
+ '</div>'
|
||||
+ '<div style="font-size:12px;color:var(--ink);font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">'+o.client+'</div>'
|
||||
+ '<div style="font-size:11px;color:var(--muted);margin-top:1px">Салон '+o.salon+' · '+o.mgr+'</div>'
|
||||
+'</div>'
|
||||
+'<div style="text-align:right;flex-shrink:0;margin-left:8px">'
|
||||
+ '<div style="font-size:13px;font-weight:700;color:var(--ink)">'+o.sum+' ₽</div>'
|
||||
+ '<div style="display:inline-flex;margin-top:3px;background:'+(stageColor[o.stage]||'var(--accent)')+'18;border-radius:6px;padding:2px 7px">'
|
||||
+ '<span style="font-size:10px;font-weight:700;color:'+(stageColor[o.stage]||'var(--accent)')+'">'+o.stage+'</span>'
|
||||
+ '</div>'
|
||||
+'</div>'
|
||||
+'</div>').join('')
|
||||
+'</div></div>'
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
// ─── КОМАНДА (executive view для ГД) ──────────────────────────────
|
||||
function _sTeam(){
|
||||
// Данные по салонам
|
||||
var salons=[
|
||||
{name:'Салон Ленина', color:'#3B82F6', bg:'#EFF6FF',
|
||||
staff:4, rev:'1 537 000', revMgr:'768 500', orders:27, conv:54, kpiAvg:88,
|
||||
flags:1, flagDesc:'Ольга Р. · KPI 79 · 2-й мес'},
|
||||
{name:'Салон Победы', color:'#8B5CF6', bg:'#F5F3FF',
|
||||
staff:4, rev:'1 310 000', revMgr:'655 000', orders:20, conv:48, kpiAvg:81,
|
||||
flags:2, flagDesc:'Иван Т. болеет · просрочки'},
|
||||
];
|
||||
// Роли агрегированно
|
||||
var roles=[
|
||||
{role:'Менеджеры', icon:'📋', count:2, kpi:87, norm:80, flags:1, flagDesc:'Ольга Р. ниже нормы 2 мес'},
|
||||
{role:'Сборщики', icon:'🔧', count:3, kpi:83, norm:80, flags:1, flagDesc:'Иван Т. болеет · 3 просрочки'},
|
||||
{role:'Замерщики', icon:'📐', count:2, kpi:89, norm:80, flags:0, flagDesc:''},
|
||||
{role:'Руководство', icon:'🏢', count:1, kpi:88, norm:80, flags:1, flagDesc:'Не перераспределил заказы'},
|
||||
];
|
||||
// Критические флаги — только для ГД
|
||||
var critFlags=[
|
||||
{sev:'danger', text:'Иван Т. болеет 3-й день', sub:'3 просрочки монтажа · рекламация ЗМ-1891 без ответа'},
|
||||
{sev:'warn', text:'Ольга Р. · KPI 79 · 2-й месяц подряд', sub:'Салон Победы · план/факт: 12/15'},
|
||||
{sev:'warn', text:'Марина С. в отпуске 28–30 мая', sub:'4 замера без замены · риск переноса'},
|
||||
];
|
||||
var sc={danger:{c:'var(--danger)',bg:'#FEF2F2',ic:'🔴'},warn:{c:'var(--warn)',bg:'#FFFBEB',ic:'🟡'}};
|
||||
|
||||
return '<div class="page">'
|
||||
+'<div style="padding:20px 16px 12px;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">'
|
||||
+ '<div style="font-size:17px;font-weight:800;color:var(--ink)">Команда</div>'
|
||||
+ '<div style="font-size:12px;color:var(--muted);margin-top:2px">8 сотрудников · ФОТ 456 000 ₽/мес</div>'
|
||||
+'</div>'
|
||||
|
||||
// KPI сводка
|
||||
+'<div class="kpi-grid">'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">16%</div><div class="kpi-label">ФОТ / выручка</div><div class="kpi-delta up">▼ −1.2 пп к апр.</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">85</div><div class="kpi-label">Средний KPI</div><div class="kpi-delta up">▲ +2 к апр.</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value" style="color:var(--danger)">3</div><div class="kpi-label">Требуют внимания</div><div class="kpi-delta dn">из 8 сотрудников</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">8 / 8</div><div class="kpi-label">Укомплектованность</div><div class="kpi-delta up">Вакансий нет</div></div>'
|
||||
+'</div>'
|
||||
|
||||
// Сравнение салонов
|
||||
+'<div class="section-label">Эффективность по салонам</div>'
|
||||
+'<div style="padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px">'
|
||||
+salons.map(s=>`
|
||||
<div class="card" style="padding:14px;border-top:3px solid ${s.color}">
|
||||
<div style="font-size:12px;font-weight:800;color:${s.color};margin-bottom:8px">${s.name}</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-bottom:2px">Выручка/мес</div>
|
||||
<div style="font-size:15px;font-weight:800;color:var(--ink);margin-bottom:6px">${s.rev} ₽</div>
|
||||
<div class="stat-row" style="padding:4px 0"><span class="stat-l" style="font-size:11px">Выр./менеджер</span><span class="stat-v" style="font-size:11px">${s.revMgr} ₽</span></div>
|
||||
<div class="stat-row" style="padding:4px 0"><span class="stat-l" style="font-size:11px">Конверсия</span><span class="stat-v ${s.conv>=50?'g':'r'}" style="font-size:11px">${s.conv}%</span></div>
|
||||
<div class="stat-row" style="padding:4px 0;border:none"><span class="stat-l" style="font-size:11px">Ср. KPI</span><span class="stat-v ${s.kpiAvg>=85?'g':'r'}" style="font-size:11px">${s.kpiAvg}</span></div>
|
||||
${s.flags>0?`<div style="margin-top:6px;padding:5px 8px;background:#FEF2F2;border-radius:8px;font-size:10px;color:var(--danger);font-weight:600">⚠ ${s.flagDesc}</div>`:'<div style="margin-top:6px;padding:5px 8px;background:#ECFDF5;border-radius:8px;font-size:10px;color:var(--success);font-weight:600">✅ Всё в порядке</div>'}
|
||||
</div>`).join('')
|
||||
+'</div>'
|
||||
|
||||
// Команда по ролям
|
||||
+'<div class="section-label">Команда по ролям</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:0">'
|
||||
+roles.map((r,i)=>{
|
||||
var kpiColor=r.kpi>=r.norm?'var(--success)':'var(--danger)';
|
||||
return '<div style="display:flex;align-items:center;padding:12px 14px;border-bottom:'+(i<roles.length-1?'1px solid rgba(0,0,0,.05)':'none')+'">'
|
||||
+'<div style="font-size:20px;margin-right:10px;line-height:1">'+r.icon+'</div>'
|
||||
+'<div style="flex:1">'
|
||||
+ '<div style="font-size:13px;font-weight:700;color:var(--ink)">'+r.role+'</div>'
|
||||
+ '<div style="font-size:11px;color:var(--muted);margin-top:1px">'+r.count+' чел</div>'
|
||||
+'</div>'
|
||||
+'<div style="text-align:right;margin-right:10px">'
|
||||
+ '<div style="font-size:15px;font-weight:800;color:'+kpiColor+'">'+r.kpi+'</div>'
|
||||
+ '<div style="font-size:9px;color:var(--muted);text-transform:uppercase">KPI</div>'
|
||||
+'</div>'
|
||||
+(r.flags>0
|
||||
? '<div style="background:#FEF2F288;border-radius:8px;padding:4px 8px;max-width:110px;text-align:right"><div style="font-size:10px;color:var(--danger);font-weight:600;line-height:1.3">'+r.flagDesc+'</div></div>'
|
||||
: '<div style="background:#ECFDF588;border-radius:8px;padding:4px 8px"><div style="font-size:10px;color:var(--success);font-weight:600">Всё ок</div></div>')
|
||||
+'</div>';
|
||||
}).join('')
|
||||
+'</div></div>'
|
||||
|
||||
// Критические флаги
|
||||
+'<div class="section-label">Требует решения</div>'
|
||||
+'<div style="padding:0 16px">'
|
||||
+critFlags.map(f=>`
|
||||
<div style="display:flex;align-items:flex-start;gap:10px;background:${sc[f.sev].bg};border-radius:14px;padding:12px 14px;margin-bottom:8px">
|
||||
<span style="font-size:16px;flex-shrink:0;margin-top:1px">${sc[f.sev].ic}</span>
|
||||
<div style="flex:1">
|
||||
<div style="font-size:13px;font-weight:600;color:var(--ink);line-height:1.35">${f.text}</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:3px">${f.sub}</div>
|
||||
</div>
|
||||
</div>`).join('')
|
||||
+'</div>'
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
// ─── КЛИЕНТЫ ───────────────────────────────────────────────────────
|
||||
function _sClients(){
|
||||
var top=[
|
||||
{name:'ООО «РемСтрой»', orders:8, ltv:'587 000', em:'🏢'},
|
||||
{name:'Надежда Орлова', orders:5, ltv:'312 000', em:'👩'},
|
||||
{name:'Анна Белова', orders:4, ltv:'243 000', em:'👩'},
|
||||
{name:'Сергей Павлов', orders:3, ltv:'178 000', em:'👨'},
|
||||
];
|
||||
var src=[['Рекомендации',42,'#10B981'],['Авито',28,'#3B82F6'],['Instagram',18,'#8B5CF6'],['Сайт / SEO',12,'#F59E0B']];
|
||||
return '<div class="page">'
|
||||
+'<div style="padding:20px 16px 12px;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">'
|
||||
+ '<div style="font-size:17px;font-weight:800;color:var(--ink)">Клиенты</div>'
|
||||
+ '<div style="font-size:12px;color:var(--muted);margin-top:2px">Май 2026</div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="kpi-grid">'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">312</div><div class="kpi-label">Всего клиентов</div><div class="kpi-delta up">▲ +23 за месяц</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">4.8 / 5</div><div class="kpi-label">Средний NPS</div><div class="kpi-delta up">▲ +0.1 пункт</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">89 000</div><div class="kpi-label">Средний LTV, ₽</div><div class="kpi-delta up">▲ +4 200</div></div>'
|
||||
+ '<div class="kpi-card"><div class="kpi-value">1.8%</div><div class="kpi-label">Отток</div><div class="kpi-delta up">▼ −0.4 пп</div></div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="section-label">Источники привлечения</div>'
|
||||
+'<div style="padding:0 16px"><div class="card">'
|
||||
+src.map(s=>'<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px">'
|
||||
+'<div style="font-size:12px;color:var(--muted);font-weight:500;width:110px">'+s[0]+'</div>'
|
||||
+'<div class="prog-bg" style="margin:0"><div style="height:100%;border-radius:4px;background:'+s[2]+';width:'+s[1]+'%"></div></div>'
|
||||
+'<div style="font-size:13px;font-weight:700;color:var(--ink);width:32px;text-align:right">'+s[1]+'%</div>'
|
||||
+'</div>').join('')
|
||||
+'</div></div>'
|
||||
|
||||
+'<div class="section-label">Топ по LTV</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:8px 16px">'
|
||||
+top.map(c=>'<div class="row-item">'
|
||||
+'<div class="avatar-sm" style="background:var(--s-info-bg);font-size:19px">'+c.em+'</div>'
|
||||
+'<div style="flex:1"><div class="ri-name">'+c.name+'</div><div class="ri-sub">'+c.orders+' заказов</div></div>'
|
||||
+'<div style="text-align:right"><div style="font-size:13px;font-weight:700;color:var(--ink)">'+c.ltv+' ₽</div><div style="font-size:10px;color:var(--muted)">LTV</div></div>'
|
||||
+'</div>').join('')
|
||||
+'</div></div>'
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
// ─── СКЛАД И ДОСТАВКА (executive view для ГД) ──────────────────────
|
||||
function _sSklad(){
|
||||
// Факторы риска от фабрик
|
||||
var factories=[
|
||||
{name:'МебельМастер', orders:14, delayed:2, delayDays:3, sum:'184 000'},
|
||||
{name:'КорпусПро', orders:9, delayed:0, delayDays:0, sum:'97 000'},
|
||||
{name:'СтильДом', orders:5, delayed:1, delayDays:6, sum:'63 000'},
|
||||
];
|
||||
// Критические ситуации — только для ГД
|
||||
var alerts=[
|
||||
{type:'danger', text:'СтильДом задерживает ЗАК-1839 на 6 дней — монтаж под угрозой', sub:'Клиент Иванова Т. · 63 000 ₽'},
|
||||
{type:'warn', text:'МебельМастер: 2 заказа без подтверждения даты отгрузки', sub:'ЗАК-1855, ЗАК-1862 · до 30 мая'},
|
||||
{type:'ok', text:'Доставки сегодня: 3/5 выполнено, 1 просрочка на 2ч', sub:'ДОС-288 · Сергей Павлов · Алексей Г.'},
|
||||
];
|
||||
var ac={danger:{c:'var(--danger)',bg:'#FEF2F2',ic:'🔴'},warn:{c:'var(--warn)',bg:'#FFFBEB',ic:'🟡'},ok:{c:'var(--success)',bg:'#ECFDF5',ic:'🟢'}};
|
||||
|
||||
return `<div class="page">
|
||||
<div style="padding:20px 16px 12px;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">
|
||||
<div style="font-size:17px;font-weight:800;color:var(--ink)">Склад и доставка</div>
|
||||
<div style="font-size:12px;color:var(--muted);margin-top:2px">Май 2026</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI сводка -->
|
||||
<div class="kpi-grid">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-value">78%</div>
|
||||
<div class="kpi-label">В срок за май</div>
|
||||
<div class="kpi-delta dn">▼ план 90%</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-value" style="color:var(--danger)">3</div>
|
||||
<div class="kpi-label">Задержки фабрик</div>
|
||||
<div class="kpi-delta dn">риск 147 тыс ₽</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-value">28</div>
|
||||
<div class="kpi-label">Заказов в работе</div>
|
||||
<div class="kpi-delta up">↑ 4 vs прош. мес</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-value">4.7</div>
|
||||
<div class="kpi-label">Рейтинг доставки</div>
|
||||
<div class="kpi-delta up">▲ 4.5 прош. мес</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Требует внимания -->
|
||||
<div class="section-label">Требует внимания</div>
|
||||
<div style="padding:0 16px">
|
||||
${alerts.map(a=>`
|
||||
<div style="display:flex;align-items:flex-start;gap:10px;background:${ac[a.type].bg};border-radius:14px;padding:12px 14px;margin-bottom:8px">
|
||||
<span style="font-size:16px;flex-shrink:0;margin-top:1px">${ac[a.type].ic}</span>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-size:13px;font-weight:600;color:var(--ink);line-height:1.35">${a.text}</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:3px">${a.sub}</div>
|
||||
</div>
|
||||
</div>`).join('')}
|
||||
</div>
|
||||
|
||||
<!-- Фабрики-поставщики -->
|
||||
<div class="section-label">Фабрики-поставщики</div>
|
||||
<div style="padding:0 16px">
|
||||
<div class="card" style="padding:0">
|
||||
${factories.map((f,i)=>`
|
||||
<div style="padding:13px 14px;border-bottom:${i<factories.length-1?'1px solid rgba(0,0,0,.05)':'none'}">
|
||||
<div style="display:flex;justify-content:space-between;align-items:flex-start">
|
||||
<div>
|
||||
<div style="font-size:14px;font-weight:700;color:var(--ink)">${f.name}</div>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:2px">${f.orders} заказов · ${f.sum} ₽</div>
|
||||
</div>
|
||||
${f.delayed>0
|
||||
? `<div style="background:#FEF2F2;border-radius:10px;padding:4px 10px;text-align:right">
|
||||
<div style="font-size:13px;font-weight:800;color:var(--danger)">${f.delayed} задерж.</div>
|
||||
<div style="font-size:10px;color:#991B1B">+${f.delayDays} дн avg</div>
|
||||
</div>`
|
||||
: `<div style="background:#ECFDF5;border-radius:10px;padding:4px 10px">
|
||||
<div style="font-size:12px;font-weight:700;color:var(--success)">В норме</div>
|
||||
</div>`
|
||||
}
|
||||
</div>
|
||||
<!-- Прогресс-бар исполнения -->
|
||||
<div style="margin-top:8px">
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:3px">
|
||||
<span style="font-size:10px;color:var(--muted)">Исполнение в срок</span>
|
||||
<span style="font-size:10px;font-weight:700;color:${f.delayed>0?'var(--warn)':'var(--success)'}">${Math.round((f.orders-f.delayed)/f.orders*100)}%</span>
|
||||
</div>
|
||||
<div style="height:4px;background:rgba(0,0,0,.07);border-radius:2px">
|
||||
<div style="height:100%;background:${f.delayed>0?'var(--warn)':'var(--success)'};border-radius:2px;width:${Math.round((f.orders-f.delayed)/f.orders*100)}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Доставки сегодня (только сводка) -->
|
||||
<div class="section-label">Доставки сегодня</div>
|
||||
<div style="padding:0 16px">
|
||||
<div class="card" style="padding:14px 16px">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
|
||||
<span style="font-size:14px;font-weight:700;color:var(--ink)">5 доставок</span>
|
||||
<span style="font-size:12px;color:var(--muted)">2 экспедитора</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:0;height:8px;border-radius:6px;overflow:hidden">
|
||||
<div style="flex:3;background:#10B981" title="3 доставлено"></div>
|
||||
<div style="flex:1;background:#3B82F6;margin-left:2px" title="1 в пути"></div>
|
||||
<div style="flex:1;background:#94A3B8;margin-left:2px" title="1 запланировано"></div>
|
||||
<div style="flex:1;background:#EF4444;margin-left:2px" title="1 просрочка"></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-top:8px">
|
||||
${[{c:'#10B981',l:'3 выполнено'},{c:'#3B82F6',l:'1 в пути'},{c:'#94A3B8',l:'1 план.'},{c:'#EF4444',l:'1 просрочка'}]
|
||||
.map(s=>`<span style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--muted)"><span style="width:6px;height:6px;border-radius:50%;background:${s.c};display:inline-block"></span>${s.l}</span>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// ─── НАСТРОЙКИ ─────────────────────────────────────────────────────
|
||||
function _sSettings(){
|
||||
var roles=[
|
||||
['👤','Собственник','Полный доступ, все отчёты','1'],
|
||||
['🏢','Директор', 'Все модули, кроме биллинга','1'],
|
||||
['📋','Менеджер', 'Заказы, клиенты, KB','2'],
|
||||
['🔧','Сборщик', 'Свои сборки, замеры','3'],
|
||||
['📐','Замерщик', 'Объекты, замеры','2'],
|
||||
['👤','Клиент', 'Статус заказа, акты','—'],
|
||||
];
|
||||
var notifs=[
|
||||
['Просрочки монтажа','Вкл','g'],
|
||||
['Крупные заказы > 100 тыс','Вкл','g'],
|
||||
['Дебиторка > 30 дней','Вкл','g'],
|
||||
['Еженедельный P&L','Пн 09:00','b'],
|
||||
['Новый крупный клиент','Вкл','g'],
|
||||
];
|
||||
return '<div class="page">'
|
||||
+'<div style="padding:20px 16px 12px;background:var(--card);border-bottom:1px solid rgba(0,0,0,.06)">'
|
||||
+ '<div style="font-size:17px;font-weight:800;color:var(--ink)">Настройки</div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="section-label">Тарифный план</div>'
|
||||
+'<div style="padding:0 16px"><div class="card ok-b">'
|
||||
+ '<div style="display:flex;justify-content:space-between;align-items:center">'
|
||||
+ '<div>'
|
||||
+ '<div style="font-size:15px;font-weight:700;color:var(--ink)">Тариф «Профи»</div>'
|
||||
+ '<div style="font-size:12px;color:var(--muted);margin-top:2px">До 20 сотрудников · Все модули</div>'
|
||||
+ '</div>'
|
||||
+ '<span class="badge-sm bg">Активен</span>'
|
||||
+ '</div>'
|
||||
+ '<div class="stat-row" style="margin-top:12px"><span class="stat-l">Следующий платёж</span><span class="stat-v">01.06.2026</span></div>'
|
||||
+ '<div class="stat-row"><span class="stat-l">Сумма</span><span class="stat-v b">4 900 ₽/мес</span></div>'
|
||||
+ '<div class="stat-row"><span class="stat-l">Сотрудников</span><span class="stat-v">8 / 20</span></div>'
|
||||
+'</div></div>'
|
||||
|
||||
+'<div class="section-label">Роли и доступ</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:0">'
|
||||
+roles.map(r=>'<div style="display:flex;align-items:center;padding:11px 16px;border-bottom:1px solid rgba(0,0,0,.05)">'
|
||||
+'<div style="font-size:18px;margin-right:10px">'+r[0]+'</div>'
|
||||
+'<div style="flex:1">'
|
||||
+ '<div style="font-size:13px;font-weight:600;color:var(--ink)">'+r[1]+'</div>'
|
||||
+ '<div style="font-size:11px;color:var(--muted);margin-top:1px">'+r[2]+'</div>'
|
||||
+'</div>'
|
||||
+'<span class="badge-sm" style="background:var(--bg);color:var(--muted);border:1px solid rgba(0,0,0,.09)">'+r[3]+'</span>'
|
||||
+'</div>').join('')
|
||||
+'</div></div>'
|
||||
|
||||
+'<div class="section-label">Уведомления</div>'
|
||||
+'<div style="padding:0 16px"><div class="card" style="padding:0">'
|
||||
+notifs.map(n=>'<div style="display:flex;align-items:center;padding:11px 16px;border-bottom:1px solid rgba(0,0,0,.05)">'
|
||||
+'<div style="flex:1;font-size:13px;color:var(--ink)">'+n[0]+'</div>'
|
||||
+'<span class="badge-sm '+(n[2]==='g'?'bg':'bb')+'">'+n[1]+'</span>'
|
||||
+'</div>').join('')
|
||||
+'</div></div>'
|
||||
+'</div>';
|
||||
}
|
||||
|
||||
_render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
33
Mokap/tokens.css
Normal file
33
Mokap/tokens.css
Normal file
@ -0,0 +1,33 @@
|
||||
/* ============================================================
|
||||
ЗАЩИТА — ЕДИНЫЙ ИСТОЧНИК ТОКЕНОВ (цвет + шрифт).
|
||||
Все экраны и брендбук берут значения ТОЛЬКО отсюда.
|
||||
Никаких локальных hex и сторонних шрифтов — без исключений.
|
||||
============================================================ */
|
||||
:root{
|
||||
/* — шрифты — */
|
||||
--font-ui: 'Inter', system-ui, sans-serif; /* весь интерфейс */
|
||||
--font-logo: 'Montserrat', sans-serif; /* только логотип */
|
||||
|
||||
/* — бренд (Burgundy) — */
|
||||
--bg: #9F1239; /* primary: кнопки, акцент, лого */
|
||||
--bghv: #7A0E2E; /* hover primary (Burgundy 900) */
|
||||
--dark: #3B0212; /* тёмные плашки, градиенты */
|
||||
--tint: #F0E3E6; /* бордо-подложка */
|
||||
--shell: #20181A; /* тёмная оболочка: топбар/сайдбар/тосты */
|
||||
--shell2: #2C1820; /* оболочка — второй стоп градиента */
|
||||
|
||||
/* — нейтральная шкала — */
|
||||
--paper: #F9FAFB; /* полотно (текст договора) */
|
||||
--surf: #F3F4F6; /* фон рабочей области */
|
||||
--card: #FFFFFF; /* карточки */
|
||||
--line: #E5E7EB; /* границы */
|
||||
--ink: #111827; /* основной текст */
|
||||
--mut: #6B7280; /* вторичный текст */
|
||||
--slate: #374151; /* заголовки */
|
||||
--slate2: #4B5563; /* приглушённые подписи */
|
||||
|
||||
/* — приглушённая (muted) семантика — */
|
||||
--ok: #4F856F; --okbg: #E8EFEA;
|
||||
--warn: #A87E3C; --warnbg: #F2EBDD; --warnhv: #EBDFC4;
|
||||
--dng: #A14C5A; --dngbg: #F0E3E6; --dnghv: #E4CDD3;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user