trevor/drivers_bot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add admin control center ui and bot commands

Browse Source
This commit is contained in:
VPN SaaS Dev
2026-05-17 21:16:28 +09:00
parent fa703acce1
commit 0f6d6e31e1
7 changed files with 1036 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
web/admin.html Normal file
View File

@@ -0,0 +1,241 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#16806a" />
<title>Admin Control Center</title>
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="stylesheet" href="/static/styles.css" />
<script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body class="auth-required admin-page">
<div class="auth-overlay" id="authOverlay">
<div class="auth-panel">
<p class="eyebrow">CarPass</p>
<h1>Админ-панель</h1>
<p id="authMessage">Откройте страницу через Telegram, чтобы подтвердить права администратора.</p>
<div class="auth-actions">
<a id="telegramLoginLink" class="telegram-login-link hidden" href="#" rel="noreferrer">Открыть в Telegram</a>
<button id="telegramRetryBtn" class="telegram-secondary-btn" type="button">Проверить вход</button>
</div>
</div>
</div>
<main class="shell admin-shell">
<header class="topbar">
<div>
<p class="eyebrow">CarPass Admin</p>
<h1>Control Center</h1>
</div>
<div class="top-actions">
<button class="icon-btn" id="refreshBtn" title="Обновить" aria-label="Обновить">↻</button>
</div>
</header>
<section class="passport-panel admin-hero">
<div class="passport-head">
<div>
<p class="eyebrow">Пилотный контур</p>
<h2>Операционный обзор</h2>
<small id="adminMeta">Загружаю доступ и источники данных...</small>
</div>
<span class="trust-badge" id="adminRoleBadge">Проверка</span>
</div>
</section>
<nav class="admin-tabs" aria-label="Разделы админки">
<button type="button" data-admin-tab="dashboard">Dashboard</button>
<button type="button" data-admin-tab="notifications">Notifications</button>
<button type="button" data-admin-tab="users">Users</button>
<button type="button" data-admin-tab="sto">СТО</button>
<button type="button" data-admin-tab="sto-applications">Заявки СТО</button>
<button type="button" data-admin-tab="vehicles">Авто</button>
<button type="button" data-admin-tab="appointments">Записи</button>
<button type="button" data-admin-tab="work-orders">Заказ-наряды</button>
<button type="button" data-admin-tab="data">Data Explorer</button>
<button type="button" data-admin-tab="audit">Audit Log</button>
<button type="button" data-admin-tab="exports">Exports</button>
</nav>
<section id="panel-dashboard" class="admin-panel workspace">
<div class="section-head">
<div>
<p class="eyebrow">Сервис</p>
<h2>Dashboard</h2>
</div>
</div>
<div class="stats admin-stats" id="dashboardStats"></div>
<div class="admin-grid">
<section>
<h3>Последние события</h3>
<div id="dashboardAlerts" class="stack-list"></div>
</section>
<section>
<h3>Быстрые переходы</h3>
<div id="quickLinks" class="admin-link-grid"></div>
</section>
</div>
</section>
<section id="panel-notifications" class="admin-panel workspace hidden">
<div class="section-head">
<div>
<p class="eyebrow">События</p>
<h2>Admin notifications</h2>
</div>
<button type="button" id="readAllBtn">Прочитать все</button>
</div>
<div id="notificationsList" class="stack-list"></div>
</section>
<section id="panel-users" class="admin-panel workspace hidden">
<div class="section-head">
<div>
<p class="eyebrow">Аккаунты</p>
<h2>Users</h2>
</div>
</div>
<form class="admin-filter" data-list-filter="users">
<input name="search" placeholder="Поиск по имени или username" />
<button type="submit">Найти</button>
</form>
<div id="usersTable" class="admin-table-wrap"></div>
</section>
<section id="panel-sto" class="admin-panel workspace hidden">
<div class="section-head">
<div>
<p class="eyebrow">Партнеры</p>
<h2>СТО</h2>
</div>
</div>
<form class="admin-filter" data-list-filter="sto">
<input name="city" placeholder="Город" />
<select name="status">
<option value="">Любой статус</option>
<option value="pending">pending</option>
<option value="approved">approved</option>
<option value="needs_changes">needs_changes</option>
<option value="rejected">rejected</option>
<option value="suspended">suspended</option>
</select>
<button type="submit">Фильтр</button>
</form>
<div id="stoTable" class="admin-table-wrap"></div>
</section>
<section id="panel-sto-applications" class="admin-panel workspace hidden">
<div class="section-head">
<div>
<p class="eyebrow">Модерация</p>
<h2>Заявки СТО</h2>
</div>
</div>
<div id="applicationsList" class="stack-list"></div>
</section>
<section id="panel-vehicles" class="admin-panel workspace hidden">
<div class="section-head">
<div>
<p class="eyebrow">Гараж</p>
<h2>Автомобили</h2>
</div>
</div>
<div id="vehiclesTable" class="admin-table-wrap"></div>
</section>
<section id="panel-appointments" class="admin-panel workspace hidden">
<div class="section-head">
<div>
<p class="eyebrow">Календарь</p>
<h2>Записи</h2>
</div>
</div>
<div id="appointmentsTable" class="admin-table-wrap"></div>
</section>
<section id="panel-work-orders" class="admin-panel workspace hidden">
<div class="section-head">
<div>
<p class="eyebrow">Работы</p>
<h2>Заказ-наряды</h2>
</div>
</div>
<div id="workOrdersTable" class="admin-table-wrap"></div>
</section>
<section id="panel-data" class="admin-panel workspace hidden">
<div class="section-head">
<div>
<p class="eyebrow">Без SQL</p>
<h2>Data Explorer</h2>
</div>
</div>
<form id="dataForm" class="grid-form admin-data-form">
<label>Тип данных<select name="source" id="sourceSelect"></select></label>
<label>Дата от<input name="date_from" type="date" /></label>
<label>Дата до<input name="date_to" type="date" /></label>
<label>Status<input name="status" /></label>
<label>User ID<input name="user_id" type="number" /></label>
<label>Telegram ID<input name="telegram_id" type="number" /></label>
<label>Vehicle ID<input name="vehicle_id" type="number" /></label>
<label>STO ID<input name="sto_id" type="number" /></label>
<label>City<input name="city" /></label>
<label>Role<input name="role" /></label>
<label>Search<input name="search" /></label>
<label>Sort
<select name="sort" id="sortSelect"></select>
</label>
<label>Limit
<select name="limit">
<option>25</option>
<option selected>50</option>
<option>100</option>
<option>500</option>
</select>
</label>
<label class="check admin-check"><input name="include_sensitive" type="checkbox" /> Show sensitive</label>
<label>Reason<input name="reason" placeholder="Обязательно для sensitive/export" /></label>
<div class="admin-form-actions">
<button type="submit">Запросить</button>
<button type="button" class="ghost-btn" id="exportJsonBtn">JSON export</button>
<button type="button" class="ghost-btn" id="exportCsvBtn">CSV export</button>
</div>
</form>
<div id="dataResult" class="admin-table-wrap"></div>
</section>
<section id="panel-audit" class="admin-panel workspace hidden">
<div class="section-head">
<div>
<p class="eyebrow">Контроль</p>
<h2>Audit Log</h2>
</div>
</div>
<form id="auditForm" class="admin-filter">
<input name="action" placeholder="Action" />
<input name="actor_id" type="number" placeholder="Actor ID" />
<input name="entity_type" placeholder="Entity type" />
<input name="entity_id" placeholder="Entity ID" />
<button type="submit">Показать</button>
</form>
<div id="auditTable" class="admin-table-wrap"></div>
</section>
<section id="panel-exports" class="admin-panel workspace hidden">
<div class="section-head">
<div>
<p class="eyebrow">Выгрузки</p>
<h2>Exports</h2>
</div>
</div>
<div id="exportsTable" class="admin-table-wrap"></div>
</section>
</main>
<div class="toast hidden" id="toast" role="status" aria-live="polite"></div>
<script src="/static/page_common.js"></script>
<script src="/static/admin.js"></script>
</body>
</html>

371
web/static/admin.js Normal file
View File

@@ -0,0 +1,371 @@
const AdminPage = (() => {
const { api, boot, toast, escapeHtml, formData, formatDateTime } = CarPassPage;
const state = {
active: "dashboard",
sources: [],
sorts: [],
lastDataPayload: null,
};
const panels = {
dashboard: "#panel-dashboard",
notifications: "#panel-notifications",
users: "#panel-users",
sto: "#panel-sto",
"sto-applications": "#panel-sto-applications",
vehicles: "#panel-vehicles",
appointments: "#panel-appointments",
"work-orders": "#panel-work-orders",
data: "#panel-data",
audit: "#panel-audit",
exports: "#panel-exports",
};
const quickLinks = [
["notifications", "Notifications"],
["users", "Users"],
["sto-applications", "Заявки СТО"],
["vehicles", "Авто"],
["data", "Data Explorer"],
["audit", "Audit Log"],
];
function qs(selector) {
return document.querySelector(selector);
}
function valueOrDash(value) {
if (value === null || value === undefined || value === "") return "-";
if (typeof value === "string" && value.includes("T")) return formatDateTime(value);
return escapeHtml(value);
}
function setActive(section) {
state.active = panels[section] ? section : "dashboard";
Object.entries(panels).forEach(([name, selector]) => {
qs(selector)?.classList.toggle("hidden", name !== state.active);
});
document.querySelectorAll("[data-admin-tab]").forEach((button) => {
button.classList.toggle("active", button.dataset.adminTab === state.active);
});
const url = new URL(window.location.href);
url.searchParams.set("section", state.active);
window.history.replaceState({}, "", url);
}
function renderEmpty(root, text = "Нет данных") {
root.innerHTML = `<div class="tip-card">${escapeHtml(text)}</div>`;
}
function renderError(root, error) {
root.innerHTML = `<div class="tip-card error-state">${escapeHtml(error.message || "Ошибка")}</div>`;
}
function renderTable(root, rows, preferredColumns = []) {
if (!rows?.length) {
renderEmpty(root);
return;
}
const columns = preferredColumns.length ? preferredColumns : Object.keys(rows[0]);
root.innerHTML = `
<table class="admin-table">
<thead>
<tr>${columns.map((column) => `<th>${escapeHtml(column)}</th>`).join("")}</tr>
</thead>
<tbody>
${rows
.map(
(row) => `
<tr>
${columns.map((column) => `<td>${valueOrDash(row[column])}</td>`).join("")}
</tr>
`,
)
.join("")}
</tbody>
</table>
`;
}
function badge(value) {
return `<span class="admin-badge">${escapeHtml(value || "-")}</span>`;
}
async function loadDashboard() {
const data = await api("/admin/dashboard");
const statLabels = [
["users_today", "Новые сегодня"],
["users_7d", "Новые 7 дней"],
["users_total", "Всего пользователей"],
["active_users", "Активные"],
["vehicles_total", "Авто"],
["pending_sto_applications", "Pending СТО"],
["approved_sto", "Approved СТО"],
["appointments_today", "Записи сегодня"],
["active_work_orders", "Активные ЗН"],
["completed_work_orders", "Завершенные ЗН"],
["system_errors", "Ошибки"],
["security_events", "Security"],
];
qs("#dashboardStats").innerHTML = statLabels
.map(([key, label]) => `<div class="stat"><span>${label}</span><strong>${data[key] ?? 0}</strong></div>`)
.join("");
const alerts = qs("#dashboardAlerts");
alerts.innerHTML = data.latest_alerts?.length
? data.latest_alerts
.map(
(item) => `
<article class="stack-item">
<div>
<strong>${escapeHtml(item.title)}</strong>
<small>${badge(item.event_type)} ${formatDateTime(item.created_at)}</small>
</div>
</article>
`,
)
.join("")
: `<div class="tip-card">Критичных событий нет</div>`;
qs("#quickLinks").innerHTML = quickLinks
.map(([section, label]) => `<button type="button" data-admin-tab="${section}">${label}</button>`)
.join("");
bindTabButtons();
}
async function loadNotifications() {
const root = qs("#notificationsList");
try {
const data = await api("/admin/notifications?limit=100");
if (!data.rows.length) return renderEmpty(root);
root.innerHTML = data.rows
.map(
(item) => `
<article class="stack-item">
<div>
<strong>${escapeHtml(item.title)}</strong>
<small>${badge(item.event_type)} ${badge(item.severity)} ${badge(item.status)} ${formatDateTime(item.created_at)}</small>
<p>${escapeHtml(item.body || "")}</p>
</div>
<div class="row-actions">
<button type="button" data-read-notification="${item.id}">Read</button>
<button type="button" class="ghost-btn" data-dismiss-notification="${item.id}">Dismiss</button>
</div>
</article>
`,
)
.join("");
root.querySelectorAll("[data-read-notification]").forEach((button) => {
button.addEventListener("click", async () => {
await api(`/admin/notifications/${button.dataset.readNotification}/read`, { method: "POST" });
await loadNotifications();
});
});
root.querySelectorAll("[data-dismiss-notification]").forEach((button) => {
button.addEventListener("click", async () => {
await api(`/admin/notifications/${button.dataset.dismissNotification}/dismiss`, { method: "POST" });
await loadNotifications();
});
});
} catch (error) {
renderError(root, error);
}
}
async function loadUsers(search = "") {
const query = new URLSearchParams();
if (search) query.set("search", search);
const data = await api(`/admin/users?${query.toString()}`);
renderTable(qs("#usersTable"), data.rows, ["id", "telegram_id", "username", "first_name", "platform_role", "created_at"]);
}
async function loadSto(filters = {}) {
const query = new URLSearchParams();
Object.entries(filters).forEach(([key, value]) => {
if (value) query.set(key, value);
});
const data = await api(`/admin/sto?${query.toString()}`);
renderTable(qs("#stoTable"), data.rows, ["id", "display_name", "city", "phone", "verification_status", "owner_user_id", "created_at"]);
}
async function loadApplications() {
const root = qs("#applicationsList");
try {
const data = await api("/admin/sto-applications");
if (!data.rows.length) return renderEmpty(root, "Очередь модерации пуста");
root.innerHTML = data.rows
.map(
(item) => `
<article class="stack-item">
<div>
<strong>${escapeHtml(item.display_name || item.legal_name || `СТО #${item.id}`)}</strong>
<small>${badge(item.verification_status)} ${escapeHtml(item.city || "-")} ${formatDateTime(item.created_at)}</small>
</div>
<div class="row-actions">
<button type="button" data-application-action="approve" data-application-id="${item.id}">Approve</button>
<button type="button" class="ghost-btn" data-application-action="request-changes" data-application-id="${item.id}">Правки</button>
<button type="button" class="danger-btn" data-application-action="reject" data-application-id="${item.id}">Reject</button>
</div>
</article>
`,
)
.join("");
root.querySelectorAll("[data-application-action]").forEach((button) => {
button.addEventListener("click", async () => {
const action = button.dataset.applicationAction;
const reason = action === "approve" ? "Approved in admin panel" : window.prompt("Причина") || "";
if (action !== "approve" && !reason) return;
await api(`/admin/sto-applications/${button.dataset.applicationId}/${action}`, {
method: "POST",
body: JSON.stringify({ reason, comment: reason }),
});
toast("Статус заявки обновлен");
await loadApplications();
});
});
} catch (error) {
renderError(root, error);
}
}
async function loadSourceTable(source, rootSelector, columns) {
const root = qs(rootSelector);
try {
const data = await api("/admin/data/query", {
method: "POST",
body: JSON.stringify({ source, limit: 100 }),
});
renderTable(root, data.rows, columns);
} catch (error) {
renderError(root, error);
}
}
function cleanPayload(payload) {
const cleaned = {};
Object.entries(payload).forEach(([key, value]) => {
if (value === "" || value === null || value === undefined) return;
if (["user_id", "telegram_id", "vehicle_id", "sto_id", "limit"].includes(key)) {
cleaned[key] = Number(value);
} else if (key === "include_sensitive") {
cleaned[key] = value === "on";
} else {
cleaned[key] = value;
}
});
if (!("include_sensitive" in cleaned)) cleaned.include_sensitive = false;
return cleaned;
}
async function submitDataQuery(format = null) {
const payload = cleanPayload(formData(qs("#dataForm")));
state.lastDataPayload = payload;
if (format) {
const result = await api("/admin/data/export", {
method: "POST",
body: JSON.stringify({ ...payload, export_format: format }),
});
toast(`Export #${result.id} готов`);
await loadExports();
return;
}
const data = await api("/admin/data/query", {
method: "POST",
body: JSON.stringify(payload),
});
renderTable(qs("#dataResult"), data.rows);
}
async function loadAudit(params = {}) {
const query = new URLSearchParams();
Object.entries(params).forEach(([key, value]) => {
if (value) query.set(key, value);
});
const rows = await api(`/admin/audit-log?${query.toString()}`);
renderTable(qs("#auditTable"), rows, ["id", "actor_user_id", "actor_role", "action", "target_type", "target_id", "created_at"]);
}
async function loadExports() {
const data = await api("/admin/exports");
renderTable(qs("#exportsTable"), data.rows, ["id", "source", "export_format", "status", "row_count", "reason", "expires_at", "created_at"]);
}
async function loadActiveSection() {
if (state.active === "dashboard") return loadDashboard();
if (state.active === "notifications") return loadNotifications();
if (state.active === "users") return loadUsers();
if (state.active === "sto") return loadSto();
if (state.active === "sto-applications") return loadApplications();
if (state.active === "vehicles") return loadSourceTable("vehicles", "#vehiclesTable", ["id", "owner_id", "name", "make", "model", "year", "vin", "plate_number", "current_odometer", "created_at"]);
if (state.active === "appointments") return loadSourceTable("appointments", "#appointmentsTable", ["id", "service_center_id", "vehicle_id", "owner_user_id", "service_type", "status", "requested_start_at", "created_at"]);
if (state.active === "work-orders") return loadSourceTable("work_orders", "#workOrdersTable", ["id", "service_center_id", "vehicle_id", "owner_user_id", "status", "final_total", "currency", "completed_at"]);
if (state.active === "audit") return loadAudit();
if (state.active === "exports") return loadExports();
return null;
}
function bindTabButtons() {
document.querySelectorAll("[data-admin-tab]").forEach((button) => {
button.addEventListener("click", async () => {
setActive(button.dataset.adminTab);
try {
await loadActiveSection();
} catch (error) {
toast(error.message || "Ошибка", "error");
}
});
});
}
function bindForms() {
qs("#refreshBtn")?.addEventListener("click", () => loadActiveSection().catch((error) => toast(error.message, "error")));
qs("#readAllBtn")?.addEventListener("click", async () => {
await api("/admin/notifications/read-all", { method: "POST" });
await loadNotifications();
});
document.querySelector("[data-list-filter='users']")?.addEventListener("submit", async (event) => {
event.preventDefault();
await loadUsers(formData(event.currentTarget).search || "");
});
document.querySelector("[data-list-filter='sto']")?.addEventListener("submit", async (event) => {
event.preventDefault();
await loadSto(formData(event.currentTarget));
});
qs("#dataForm")?.addEventListener("submit", async (event) => {
event.preventDefault();
await submitDataQuery().catch((error) => toast(error.message, "error"));
});
qs("#exportJsonBtn")?.addEventListener("click", () => submitDataQuery("json").catch((error) => toast(error.message, "error")));
qs("#exportCsvBtn")?.addEventListener("click", () => submitDataQuery("csv").catch((error) => toast(error.message, "error")));
qs("#auditForm")?.addEventListener("submit", async (event) => {
event.preventDefault();
await loadAudit(cleanPayload(formData(event.currentTarget)));
});
}
async function initSources() {
const data = await api("/admin/data/sources");
state.sources = data.sources || [];
state.sorts = data.sorts || [];
qs("#sourceSelect").innerHTML = state.sources
.filter((source) => source.available && source.allowed)
.map((source) => `<option value="${source.name}">${source.name}</option>`)
.join("");
qs("#sortSelect").innerHTML = state.sorts
.map((sort) => `<option value="${sort}">${sort}</option>`)
.join("");
}
async function init() {
qs("#adminRoleBadge").textContent = CarPassPage.state.user?.platform_role || "admin";
qs("#adminMeta").textContent = `User #${CarPassPage.state.user?.id || "-"} · Telegram ${CarPassPage.state.user?.telegram_id || "-"}`;
await initSources();
bindTabButtons();
bindForms();
const urlSection = new URLSearchParams(window.location.search).get("section");
setActive(urlSection || "dashboard");
await loadActiveSection();
}
return { init };
})();
CarPassPage.boot(AdminPage.init);

174
web/static/styles.css
View File

@@ -2069,6 +2069,180 @@ select {
font-size: 12px;
}
.admin-page {
background:
linear-gradient(180deg, #ffffff 0, #edf5f2 220px),
var(--bg);
}
.admin-shell {
width: min(1320px, 100%);
}
.admin-hero {
margin-bottom: 10px;
}
.admin-tabs {
position: sticky;
top: 0;
z-index: 8;
display: flex;
gap: 8px;
padding: 8px 0 12px;
margin-bottom: 6px;
overflow-x: auto;
background: rgba(238, 243, 241, 0.92);
backdrop-filter: blur(10px);
}
.admin-tabs button,
.admin-link-grid button {
flex: 0 0 auto;
min-height: 38px;
padding: 0 12px;
border: 1px solid var(--line);
background: #fff;
color: var(--text);
box-shadow: none;
}
.admin-tabs button.active {
border-color: rgba(22, 128, 106, 0.48);
background: #dff1eb;
color: #0e5d4b;
}
.admin-panel {
margin-bottom: 16px;
}
.admin-stats {
grid-template-columns: repeat(6, minmax(130px, 1fr));
}
.admin-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
gap: 14px;
}
.admin-grid h3 {
margin: 0 0 8px;
font-size: 15px;
}
.admin-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.admin-filter {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
align-items: end;
margin-bottom: 12px;
}
.admin-filter button {
min-width: 112px;
}
.admin-table-wrap {
width: 100%;
overflow: auto;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
}
.admin-table {
width: 100%;
min-width: 720px;
border-collapse: collapse;
font-size: 13px;
}
.admin-table th,
.admin-table td {
padding: 10px;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
overflow-wrap: anywhere;
}
.admin-table th {
position: sticky;
top: 0;
z-index: 1;
background: #f5faf7;
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.admin-table tr:last-child td {
border-bottom: 0;
}
.admin-badge {
display: inline-flex;
min-height: 22px;
align-items: center;
padding: 2px 7px;
border: 1px solid rgba(22, 128, 106, 0.18);
border-radius: 8px;
background: #eef7f3;
color: #0e5d4b;
font-size: 12px;
font-weight: 700;
}
.admin-data-form {
align-items: end;
margin-bottom: 12px;
}
.admin-check {
min-height: 42px;
align-content: center;
}
.admin-form-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.error-state {
color: var(--danger);
background: #fff4f2;
}
@media (max-width: 980px) {
.admin-stats {
display: flex;
overflow-x: auto;
padding-bottom: 2px;
}
.admin-stats .stat {
min-width: 150px;
}
.admin-grid,
.admin-link-grid {
grid-template-columns: 1fr;
}
.admin-tabs {
top: 0;
}
}
.work-order-total strong {
color: #fff;
font-size: clamp(24px, 4vw, 34px);