From 017d179746a377be8f6971327fa8a0276871a73f Mon Sep 17 00:00:00 2001 From: wasrusgen Date: Sat, 9 May 2026 12:59:41 +0300 Subject: [PATCH] =?UTF-8?q?feat(miniapp):=20manager=20home=20v2=20?= =?UTF-8?q?=E2=80=94=20greeting=20+=20hero=20today-task=20+=202x2=20quick?= =?UTF-8?q?=20actions=20+=20active=20projects=20+=20bottom=20nav?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- design-drafts/A_v2_desktop.html | 608 ++++++++++++++++++++++++++++++++ miniapp/assets/app.js | 201 ++++++++--- miniapp/assets/icons.js | 18 + miniapp/assets/styles.css | 404 +++++++++++++++++++++ miniapp/index.html | 6 +- 5 files changed, 1189 insertions(+), 48 deletions(-) create mode 100644 design-drafts/A_v2_desktop.html diff --git a/design-drafts/A_v2_desktop.html b/design-drafts/A_v2_desktop.html new file mode 100644 index 0000000..307fe7a --- /dev/null +++ b/design-drafts/A_v2_desktop.html @@ -0,0 +1,608 @@ +A _ Editorial Calm _ _ _ _ _
9:41
Проект
№ K-2025-0184

И. Тимирясов

пос. Барвиха, дом 8
Текущий этап
95% · до 11 мая

Монтаж

Замер
Проект
Согласование
Производство
Доставка
Монтаж
Этапы
ЗамерГотово
Замерил Артём О. · 02 мая
ПроектГотово
Проект v3 · Е. Маркина
СогласованиеГотово
Ожидает подписи клиента
ПроизводствоГотово
Цех №2 · Партия 18
ДоставкаГотово
Курьер выезжает
06
МонтажСейчас
Бригада 4
Действия
\ No newline at end of file diff --git a/miniapp/assets/app.js b/miniapp/assets/app.js index 83daa2c..cdfe284 100644 --- a/miniapp/assets/app.js +++ b/miniapp/assets/app.js @@ -85,66 +85,174 @@ function getInitial(name) { /* ----------------- Renders ----------------- */ function renderManager(me) { - const status = me.status || "active"; - const statusUntil = me.status_until ? `до ${me.status_until}` : ""; - const initial = me.user?.avatar_initial || getInitial(me.user?.full_name); - const tgId = me.user?.tg_id ? `ID ${me.user.tg_id}` : ""; + // Новый главный экран — «утро менеджера» + return renderManagerHome(me); +} +function timeOfDay(date = new Date()) { + const h = date.getHours(); + if (h >= 5 && h < 12) return "Доброе утро"; + if (h >= 12 && h < 18) return "Добрый день"; + if (h >= 18 && h < 23) return "Добрый вечер"; + return "Доброй ночи"; +} + +function pluralRu(n, forms) { + // forms = ["замер", "замера", "замеров"] + const mod10 = n % 10, mod100 = n % 100; + if (mod100 >= 11 && mod100 <= 14) return forms[2]; + if (mod10 === 1) return forms[0]; + if (mod10 >= 2 && mod10 <= 4) return forms[1]; + return forms[2]; +} + +function renderManagerHome(me) { + // === MOCK DATA (Этап 1 — визуал, без реального backend) === + const firstName = (me.user?.full_name || "").split(/\s+/)[0] || "Артём"; + const todayTask = { + time: "15:30", + tag: "ЗАМЕР", + client: "А. Пестова", + address: "ЖК Сады Пекина, корп. 3", + phone: "+7 999 000-00-00", + }; + const projects = [ + { name: "Семья Иваниковых", address: "ул. Орджоникидзе, 14 — 47", stage: "Согласование", date: "14 мая", progress: 0.40, statusLabel: "Ожидает клиента", statusKind: "waiting" }, + { name: "Кабанова И. С.", address: "Никольская набережная, 20", stage: "Производство", date: "21 мая", progress: 0.60, statusLabel: "В работе", statusKind: "active" }, + { name: "Карелин А.", address: "посёлок Сосновый, дом 4", stage: "Замер", date: "сегодня", progress: 0.10, statusLabel: "Срочно", statusKind: "urgent" }, + { name: "Петросян Г.", address: "ул. Лесная, 18 — 12", stage: "Доставка", date: "16 мая", progress: 0.85, statusLabel: "В работе", statusKind: "active" }, + { name: "Тимирясов И.", address: "пос. Барвиха, дом 8", stage: "Монтаж", date: "11 мая", progress: 0.95, statusLabel: "Завершается", statusKind: "active" }, + ]; + const unreadChats = 2; + const tasksTodayCount = todayTask ? 1 : 0; + const taskWord = pluralRu(tasksTodayCount, ["замер", "замера", "замеров"]); + const phraseTail = tasksTodayCount === 0 ? "ничего на сегодня" : `${tasksTodayCount === 1 ? "один" : tasksTodayCount} ${taskWord} сегодня`; + + // === RENDER === app.innerHTML = ""; + document.body.classList.add("has-bottom-nav"); + // Greeting app.appendChild(el(` -
-
Менеджер
-
-
-
${me.user?.full_name || ""}
-
${me.user?.salon || ""}
+
+
+
${timeOfDay()}
+
${firstName},
+ ${phraseTail}
-
${initial}
-
-
- - - ${statusLabel(status)} - - ${statusUntil ? `·${statusUntil}` : ""} - ${tgId ? `·${tgId}` : ""}
+
`)); - const sections = [ - { - label: "Работа с клиентами", - items: [ - { icon: "wrench", color: "green", label: "Подбор техники для клиента", href: "#/m/podbor" }, - { icon: "ruler", color: "blue", label: "Замеры", href: "#/m/measurements" }, - { icon: "clipboard", color: "gold", label: "Заявки клиентов", soon: true }, - { icon: "briefcase", color: "gray", label: "Сделки", soon: true }, - ], - }, - { - label: "Аккаунт", - items: [ - { icon: "wallet", color: "gold", label: "Мой статус и доступ", href: "#/m/status" }, - { icon: "help", color: "blue", label: "Связь с куратором", href: "#/m/help" }, - ], - }, + // Hero task + if (todayTask) { + app.appendChild(el(` +
+
+ + На сегодня—${todayTask.time} + + ${todayTask.tag} +
+
${todayTask.client}
+
${todayTask.address}
+
+ + ${ICONS.phone} +
+
+ `)); + } + + // Quick actions + const quickActions = [ + { icon: "camera", title: "Новый замер", subtitle: "С фото" }, + { icon: "cube", title: "3D просмотр", subtitle: "Проекты" }, + { icon: "bolt", title: "Коммуникации", subtitle: "Чек-лист" }, + { icon: "package", title: "Каталог техники", subtitle: "Встройка" }, ]; - - sections.forEach(section => { - app.appendChild(el(`
${section.label}
`)); - app.appendChild(buildMenu(section.items)); + app.appendChild(el(`
Быстрые действия
`)); + const grid = el(`
`); + quickActions.forEach(qa => { + const card = el(` + + `); + card.addEventListener("click", () => { haptic("impact"); tg?.showAlert?.(`«${qa.title}» — скоро`); }); + grid.appendChild(card); }); + app.appendChild(grid); + // Active projects app.appendChild(el(` -
-
Куратор партнёрской сети — Руслан Васильев
-
- @wasrusgen · ЗОВ -
+
+ Активные проекты · ${projects.length} + Все
`)); + const list = el(`
`); + projects.forEach(p => { + const card = el(` +
+
+
${p.name}
+ ${p.statusLabel} +
+
${p.address}
+
+
+ ${p.stage} + ${p.date} +
+
+ `); + card.addEventListener("click", () => { haptic("impact"); tg?.showAlert?.(`Проект «${p.name}» — скоро`); }); + list.appendChild(card); + }); + app.appendChild(list); + + // Bottom nav (fixed, outside #app) + renderBottomNav("home", { unreadChats }); +} + +function renderBottomNav(active, opts = {}) { + // Удаляем предыдущий, если есть + const old = document.getElementById("bottom-nav"); + if (old) old.remove(); + const tabs = [ + { key: "home", icon: "home", label: "Главная" }, + { key: "projects", icon: "folder", label: "Проекты" }, + { key: "fab", icon: "plus", label: "" }, + { key: "chat", icon: "chat", label: "Чат", badge: opts.unreadChats || 0 }, + { key: "profile", icon: "user", label: "Профиль" }, + ]; + const nav = el(``); + tabs.forEach(t => { + const isFab = t.key === "fab"; + const isActive = t.key === active; + const btn = el(` + + `); + btn.addEventListener("click", () => { + haptic("impact"); + if (t.key !== active) tg?.showAlert?.(`«${t.label || "Новое"}» — скоро`); + }); + nav.appendChild(btn); + }); + document.body.appendChild(nav); } function renderClient(me) { @@ -152,6 +260,9 @@ function renderClient(me) { const greetName = me.user?.full_name || "Здравствуйте"; app.innerHTML = ""; + document.body.classList.remove("has-bottom-nav"); + const oldNav = document.getElementById("bottom-nav"); + if (oldNav) oldNav.remove(); app.appendChild(el(`
diff --git a/miniapp/assets/icons.js b/miniapp/assets/icons.js index 2503e8a..f27ee54 100644 --- a/miniapp/assets/icons.js +++ b/miniapp/assets/icons.js @@ -27,4 +27,22 @@ const ICONS = { user: ``, chevron: ``, + + bell: ``, + + camera: ``, + + cube: ``, + + bolt: ``, + + package: ``, + + folder: ``, + + plus: ``, + + chat: ``, + + home: ``, }; diff --git a/miniapp/assets/styles.css b/miniapp/assets/styles.css index f5c5ebf..a1ee4a2 100644 --- a/miniapp/assets/styles.css +++ b/miniapp/assets/styles.css @@ -517,3 +517,407 @@ button { font: inherit; cursor: pointer; border: none; background: none; color: margin: 0 0 var(--s2); color: var(--ink); } + +/* ============================================================ + HOME — Manager dashboard (mockup v2) + ============================================================ */ + +/* App content needs bottom padding for fixed nav */ +body.has-bottom-nav #app { + padding-bottom: calc(96px + env(safe-area-inset-bottom)); +} + +/* ============= Greeting ============= */ +.greeting { + display: flex; + align-items: flex-start; + gap: var(--s4); + margin-bottom: var(--s5); +} + +.greeting-text { flex: 1; min-width: 0; } + +.greeting-kicker { + font-family: var(--font-mono); + font-size: 10.5px; + font-weight: 500; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--muted); + margin-bottom: var(--s2); +} + +.greeting-headline { + font-family: var(--font-display); + font-style: italic; + font-size: 32px; + font-weight: 400; + line-height: 1.1; + letter-spacing: -0.02em; + color: var(--ink); +} + +.greeting-headline .accent { + color: var(--accent-2); /* walnut акцент на части фразы */ +} + +.bell-btn { + width: 40px; + height: 40px; + border-radius: var(--r-pill); + background: var(--card); + border: 1px solid var(--line-strong); + display: grid; + place-items: center; + position: relative; + flex-shrink: 0; + color: var(--ink); + cursor: pointer; +} + +.bell-btn svg { width: 20px; height: 20px; stroke-width: 1.6; } + +.bell-btn .dot { + position: absolute; + top: 7px; + right: 9px; + width: 7px; + height: 7px; + border-radius: var(--r-pill); + background: #C0392B; + border: 1.5px solid var(--paper); +} + +/* ============= Hero task card ============= */ +.hero { + background: var(--ink); + color: var(--paper); + border-radius: var(--r-card); + padding: var(--s4); + margin-bottom: var(--s6); + position: relative; + overflow: hidden; +} + +.hero::before { + /* тонкая бренд-полоса слева */ + content: ""; + position: absolute; + top: 0; bottom: 0; left: 0; + width: 3px; + background: linear-gradient(180deg, var(--accent-2), var(--status-active)); +} + +.hero-meta { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--s2); + font-family: var(--font-mono); + font-size: 10.5px; + font-weight: 500; + letter-spacing: 0.12em; + text-transform: uppercase; + color: rgba(251, 247, 240, 0.55); + margin-bottom: var(--s3); +} + +.hero-meta .left { display: inline-flex; align-items: center; gap: var(--s2); } +.hero-meta .left .sep { color: rgba(251, 247, 240, 0.30); } + +.hero-tag { + font-family: var(--font-mono); + font-size: 10px; + font-weight: 500; + letter-spacing: 0.14em; + padding: 3px 8px; + border-radius: var(--r-tag); + background: rgba(251, 247, 240, 0.08); + color: rgba(251, 247, 240, 0.85); +} + +.hero-client { + font-family: var(--font-ui); + font-size: 22px; + font-weight: 600; + letter-spacing: -0.01em; + color: var(--paper); + margin-bottom: 4px; +} + +.hero-address { + font-family: var(--font-ui); + font-size: 14px; + color: rgba(251, 247, 240, 0.70); + margin-bottom: var(--s4); +} + +.hero-actions { + display: flex; + gap: var(--s2); +} + +.btn-gold { + flex: 1; + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--s2); + padding: 12px var(--s3); + border-radius: var(--r-btn); + background: #C9985E; + color: #1F1A14; + font-family: var(--font-ui); + font-size: 14px; + font-weight: 600; + letter-spacing: -0.01em; + cursor: pointer; +} + +.btn-gold svg { width: 18px; height: 18px; stroke-width: 1.6; } + +.btn-icon-dark { + width: 48px; + flex-shrink: 0; + display: grid; + place-items: center; + border-radius: var(--r-btn); + background: rgba(251, 247, 240, 0.10); + color: var(--paper); + cursor: pointer; +} + +.btn-icon-dark svg { width: 20px; height: 20px; stroke-width: 1.6; } + +/* ============= Section header (with right-action) ============= */ +.section-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--s3); + padding: 0 var(--s2); + margin: var(--s5) 0 var(--s2); +} + +.section-head .label { + font-family: var(--font-mono); + font-size: 10.5px; + font-weight: 500; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--muted); +} + +.section-head .label .count { + color: var(--ink); + margin-left: 4px; +} + +.section-head .more { + font-family: var(--font-mono); + font-size: 10.5px; + font-weight: 500; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--accent-2); + cursor: pointer; +} + +/* ============= Quick actions (2x2 grid) ============= */ +.quick-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--s3); +} + +.quick-card { + background: var(--card); + border: 1px solid var(--line-strong); + border-radius: var(--r-card); + padding: var(--s3); + min-height: 88px; + display: flex; + flex-direction: column; + justify-content: space-between; + cursor: pointer; + transition: background 0.12s; +} + +.quick-card:active { background: var(--paper-2); } + +.quick-card .icon { + width: 28px; + height: 28px; + display: grid; + place-items: center; + color: var(--accent-2); + margin-bottom: var(--s4); +} + +.quick-card .icon svg { width: 22px; height: 22px; stroke-width: 1.6; } + +.quick-card .title { + font-family: var(--font-ui); + font-size: 14.5px; + font-weight: 600; + letter-spacing: -0.01em; + color: var(--ink); + margin-bottom: 2px; +} + +.quick-card .subtitle { + font-family: var(--font-mono); + font-size: 10px; + font-weight: 500; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--muted); +} + +/* ============= Project card ============= */ +.project-list { + display: flex; + flex-direction: column; + gap: var(--s3); +} + +.project-card { + background: var(--card); + border: 1px solid var(--line-strong); + border-radius: var(--r-card); + padding: var(--s4); + cursor: pointer; +} + +.project-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--s2); + margin-bottom: 4px; +} + +.project-title { + font-family: var(--font-ui); + font-size: 16px; + font-weight: 600; + letter-spacing: -0.01em; + color: var(--ink); + flex: 1; +} + +.project-pill { + font-family: var(--font-mono); + font-size: 9.5px; + font-weight: 500; + letter-spacing: 0.10em; + text-transform: uppercase; + padding: 3px 8px; + border-radius: var(--r-tag); + white-space: nowrap; +} + +.project-pill.waiting { background: var(--paper-2); color: var(--accent-2); } +.project-pill.active { background: var(--paper-2); color: var(--status-active); } +.project-pill.urgent { background: rgba(192,57,43,0.10); color: #8C3F1E; } + +.project-address { + font-family: var(--font-ui); + font-size: 13.5px; + color: var(--muted); + margin-bottom: var(--s3); +} + +.project-progress { + height: 3px; + background: var(--line); + border-radius: var(--r-pill); + overflow: hidden; + margin-bottom: var(--s2); +} + +.project-progress .bar { + height: 100%; + background: var(--accent-2); + border-radius: inherit; +} + +.project-foot { + display: flex; + justify-content: space-between; + font-family: var(--font-mono); + font-size: 10.5px; + font-weight: 500; + letter-spacing: 0.10em; + text-transform: uppercase; + color: var(--muted); +} + +.project-foot .stage { color: var(--ink-2); } + +/* ============= Bottom navigation ============= */ +.bottom-nav { + position: fixed; + left: 0; right: 0; bottom: 0; + z-index: 100; + display: flex; + align-items: flex-end; + justify-content: space-around; + background: var(--paper); + border-top: 1px solid var(--line-strong); + padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); + font-family: var(--font-mono); + font-size: 9.5px; + font-weight: 500; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.bottom-nav button { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + color: var(--muted); + padding: 6px 2px; + position: relative; + cursor: pointer; +} + +.bottom-nav button.active { color: var(--ink); } + +.bottom-nav button svg { width: 22px; height: 22px; stroke-width: 1.6; } + +.bottom-nav .fab { + flex: 0 0 auto; + width: 52px; + height: 52px; + border-radius: var(--r-pill); + background: var(--ink); + color: var(--paper); + display: grid; + place-items: center; + margin: 0 8px; + transform: translateY(-12px); + box-shadow: 0 4px 14px rgba(31, 26, 20, 0.25); +} + +.bottom-nav .fab svg { width: 22px; height: 22px; stroke-width: 2.2; color: var(--paper); } + +.bottom-nav .badge { + position: absolute; + top: 2px; + right: 22%; + min-width: 16px; + height: 16px; + padding: 0 4px; + border-radius: var(--r-pill); + background: #C0392B; + color: var(--paper); + font-size: 10px; + font-weight: 600; + display: grid; + place-items: center; + letter-spacing: 0; +} diff --git a/miniapp/index.html b/miniapp/index.html index a56765c..b92e4bf 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -12,7 +12,7 @@ - +
@@ -20,7 +20,7 @@
- - + +