feat: apply new Мои Товары design system across all templates

Replace Pico CSS with custom design: dark sidebar layout, Golos Text +
JetBrains Mono fonts, orange accent (#FF5500), new component classes
(cards, tables, buttons, tags, toggles, alerts, tabs, login split-panel).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mguschin
2026-05-18 12:43:08 +03:00
parent 75513e647d
commit eb4165e48b
25 changed files with 2201 additions and 1889 deletions

View File

@@ -1,173 +1,201 @@
{% extends "base.html" %}
{% block title %}Пользователи — Администрирование — ЭВОСИНК{% endblock %}
{% block title %}Пользователи — Администрирование — Мои Товары{% endblock %}
{% block page_title %}Пользователи{% endblock %}
{% block content %}
<div class="d-flex justify-between align-center mb-3">
<h1 style="font-size:1.3rem; margin:0;"><i class="bi bi-people me-2"></i>Пользователи</h1>
<button onclick="document.getElementById('create-user-dialog').showModal()" class="sm">
<i class="bi bi-person-plus me-1"></i>Создать пользователя
</button>
<div class="pg-title">Пользователи</div>
<div class="pg-sub">Управление аккаунтами и подключениями пользователей</div>
<!-- Topbar action -->
<div style="display:flex;justify-content:flex-end;margin-bottom:16px;">
<button class="btn btn-primary btn-sm" onclick="document.getElementById('create-user-dialog').showModal()">
<i class="bi bi-person-plus"></i> Создать пользователя
</button>
</div>
<!-- Create user dialog -->
<dialog id="create-user-dialog">
<article>
<header>
<button aria-label="Закрыть" rel="prev" onclick="document.getElementById('create-user-dialog').close()"></button>
<h3>Создать пользователя</h3>
</header>
{% if create_errors %}
<div role="alert" class="alert alert-danger mb-3">
{% for e in create_errors %}<p>{{ e }}</p>{% endfor %}
<div class="dialog-hd">
<div class="dialog-title">Создать пользователя</div>
<button class="dialog-close" onclick="document.getElementById('create-user-dialog').close()">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="dialog-body">
{% if create_errors %}
<div class="alert alert-rd" style="margin-bottom:14px;">
<span><i class="bi bi-x-circle"></i></span>
<div>{% for e in create_errors %}<div>{{ e }}</div>{% endfor %}</div>
</div>
{% endif %}
<form method="post" action="/admin/users/create" novalidate>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
<div class="form-row">
<label class="form-lbl" for="cu_first_name">Имя</label>
<input class="inp" type="text" id="cu_first_name" name="first_name"
value="{{ create_form.first_name if create_form else '' }}" required>
</div>
{% endif %}
<form method="post" action="/admin/users/create" novalidate>
<div class="row gap-2 mb-2">
<div class="col">
<label for="cu_first_name">Имя
<input type="text" id="cu_first_name" name="first_name" value="{{ create_form.first_name if create_form else '' }}" required>
</label>
</div>
<div class="col">
<label for="cu_last_name">Фамилия
<input type="text" id="cu_last_name" name="last_name" value="{{ create_form.last_name if create_form else '' }}">
</label>
</div>
</div>
<label for="cu_email">Email
<input type="text" id="cu_email" name="email" value="{{ create_form.email if create_form else '' }}" required>
</label>
<label for="cu_phone">Телефон
<input type="tel" id="cu_phone" name="phone" value="{{ create_form.phone if create_form else '' }}" placeholder="+7 (999) 999-99-99">
</label>
<label for="cu_password">Пароль
<input type="password" id="cu_password" name="password" required>
</label>
{% if user.role == 'system' %}
<label for="cu_role">Роль
<select id="cu_role" name="role">
<option value="user" {% if not create_form or create_form.role == 'user' %}selected{% endif %}>Пользователь</option>
<option value="admin" {% if create_form and create_form.role == 'admin' %}selected{% endif %}>Администратор</option>
</select>
</label>
{% endif %}
<footer class="d-flex gap-2 justify-end">
<button type="button" class="outline secondary" onclick="document.getElementById('create-user-dialog').close()">Отмена</button>
<button type="submit">Создать</button>
</footer>
</form>
</article>
<div class="form-row">
<label class="form-lbl" for="cu_last_name">Фамилия</label>
<input class="inp" type="text" id="cu_last_name" name="last_name"
value="{{ create_form.last_name if create_form else '' }}">
</div>
</div>
<div class="form-row">
<label class="form-lbl" for="cu_email">Email</label>
<input class="inp" type="text" id="cu_email" name="email"
value="{{ create_form.email if create_form else '' }}" required>
</div>
<div class="form-row">
<label class="form-lbl" for="cu_phone">Телефон</label>
<input class="inp" type="tel" id="cu_phone" name="phone"
value="{{ create_form.phone if create_form else '' }}" placeholder="+7 (999) 999-99-99">
</div>
<div class="form-row">
<label class="form-lbl" for="cu_password">Пароль</label>
<input class="inp" type="password" id="cu_password" name="password" required>
</div>
{% if user.role == 'system' %}
<div class="form-row">
<label class="form-lbl" for="cu_role">Роль</label>
<select class="inp" id="cu_role" name="role">
<option value="user" {% if not create_form or create_form.role == 'user' %}selected{% endif %}>Пользователь</option>
<option value="admin" {% if create_form and create_form.role == 'admin' %}selected{% endif %}>Администратор</option>
</select>
</div>
{% endif %}
<div style="display:flex;gap:8px;justify-content:flex-end;margin-top:16px;">
<button type="button" class="btn btn-outline" onclick="document.getElementById('create-user-dialog').close()">Отмена</button>
<button type="submit" class="btn btn-primary">Создать</button>
</div>
</form>
</div>
</dialog>
{% if create_errors %}
<script>document.addEventListener('DOMContentLoaded', () => document.getElementById('create-user-dialog').showModal());</script>
{% endif %}
<article class="card mb-3">
<div class="card-body">
<form method="get" action="/admin/users" class="d-flex gap-2 flex-wrap align-center">
<input type="text" name="search" value="{{ search }}" placeholder="Поиск по имени, email, телефону" style="flex:1; min-width:200px; margin:0;">
<select name="status" style="width:auto; margin:0;">
<option value="">Все статусы</option>
<option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Ожидает</option>
<option value="active" {% if status_filter == 'active' %}selected{% endif %}>Активен</option>
<option value="suspended" {% if status_filter == 'suspended' %}selected{% endif %}>Заблокирован</option>
</select>
<select name="role" style="width:auto; margin:0;">
<option value="">Все роли</option>
<option value="user" {% if role_filter == 'user' %}selected{% endif %}>Пользователь</option>
<option value="admin" {% if role_filter == 'admin' %}selected{% endif %}>Администратор</option>
<option value="system" {% if role_filter == 'system' %}selected{% endif %}>Системный</option>
</select>
<button type="submit" class="sm">Найти</button>
{% if search or status_filter or role_filter %}
<a href="/admin/users" role="button" class="outline secondary sm">Сбросить</a>
{% endif %}
</form>
</div>
</article>
<article class="card">
<div class="table-scroll">
<table class="align-middle">
<thead>
<tr>
<th>ID</th>
<th>Имя</th>
<th>Email</th>
<th>Телефон</th>
<th>Роль</th>
<th>Статус</th>
<th>Эвотор</th>
<th>Дата</th>
<th></th>
</tr>
</thead>
<tbody>
{% for u in users %}
<tr>
<td class="text-muted small">{{ u.id }}</td>
<td>{{ u.first_name }} {{ u.last_name }}</td>
<td title="{{ u.email }}">
{{ u.email }}
{% if not u.is_email_confirmed %}
<span class="badge badge-warning ms-1" title="Email не подтверждён"><i class="bi bi-exclamation-circle"></i></span>
{% endif %}
</td>
<td>{{ u.phone or '—' }}</td>
<td>
{% if u.role == 'system' %}<span class="badge badge-danger">Системный</span>
{% elif u.role == 'admin' %}<span class="badge badge-warning">Админ</span>
{% else %}<span class="badge badge-secondary">Польз.</span>
{% endif %}
</td>
<td>
{% if u.status == 'active' %}<span class="badge badge-success">Активен</span>
{% elif u.status == 'pending' %}<span class="badge badge-warning">Ожидает</span>
{% else %}<span class="badge badge-danger">Заблок.</span>
{% endif %}
</td>
<td>
{% if u.evotor_user_id %}
<i class="bi bi-check-circle text-success" title="{{ u.evotor_user_id }}"></i>
{% else %}
<span class="text-muted"></span>
{% endif %}
</td>
<td class="text-muted small">{{ u.created_at | datefmt }}</td>
<td>
<a href="/admin/users/{{ u.id }}" role="button" class="outline sm">
<i class="bi bi-eye"></i>
</a>
</td>
</tr>
{% else %}
<tr>
<td colspan="9" class="text-center text-muted py-4">Пользователи не найдены</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% if total_pages > 1 %}
<footer>
<div class="d-flex gap-2 justify-center align-center">
{% if page > 1 %}
<a href="?page={{ page - 1 }}&search={{ search }}&status={{ status_filter }}&role={{ role_filter }}" role="button" class="outline sm">«</a>
{% endif %}
<span class="text-muted small">Стр. {{ page }} из {{ total_pages }}</span>
{% if page < total_pages %}
<a href="?page={{ page + 1 }}&search={{ search }}&status={{ status_filter }}&role={{ role_filter }}" role="button" class="outline sm">»</a>
{% endif %}
</div>
</footer>
<!-- Search / filter bar -->
<div class="card" style="margin-bottom:14px;padding:14px 20px;">
<form method="get" action="/admin/users" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
<input class="inp" type="text" name="search" value="{{ search }}"
placeholder="Поиск по имени, email, телефону" style="flex:1;min-width:200px;">
<select class="inp" name="status" style="width:auto;">
<option value="">Все статусы</option>
<option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Ожидает</option>
<option value="active" {% if status_filter == 'active' %}selected{% endif %}>Активен</option>
<option value="suspended" {% if status_filter == 'suspended' %}selected{% endif %}>Заблокирован</option>
</select>
<select class="inp" name="role" style="width:auto;">
<option value="">Все роли</option>
<option value="user" {% if role_filter == 'user' %}selected{% endif %}>Пользователь</option>
<option value="admin" {% if role_filter == 'admin' %}selected{% endif %}>Администратор</option>
<option value="system" {% if role_filter == 'system' %}selected{% endif %}>Системный</option>
</select>
<button type="submit" class="btn btn-primary btn-sm">Найти</button>
{% if search or status_filter or role_filter %}
<a href="/admin/users" class="btn btn-outline btn-sm">Сбросить</a>
{% endif %}
</article>
</form>
</div>
<!-- Users table -->
<div class="card" style="padding:0;">
<div class="table-wrap">
<table class="tbl">
<thead>
<tr>
<th>ID</th>
<th>Пользователь</th>
<th>Телефон</th>
<th>Роль</th>
<th>Статус</th>
<th>Эвотор</th>
<th>Дата</th>
<th></th>
</tr>
</thead>
<tbody>
{% for u in users %}
<tr>
<td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ u.id }}</span></td>
<td>
<div style="display:flex;align-items:center;gap:10px;">
<div class="avatar" style="width:30px;height:30px;font-size:10px;">
{{ u.first_name[0] if u.first_name else '?' }}{{ u.last_name[0] if u.last_name else '' }}
</div>
<div>
<div class="tbl-name">{{ u.first_name }} {{ u.last_name }}</div>
<div class="tbl-sub">
{{ u.email }}
{% if not u.is_email_confirmed %}
<span class="tag tag-yl" style="font-size:9.5px;padding:0 5px;margin-left:4px;"><i class="bi bi-exclamation-circle"></i></span>
{% endif %}
</div>
</div>
</div>
</td>
<td style="font-size:12px;color:#9EA8BE;">{{ u.phone or '—' }}</td>
<td>
{% if u.role == 'system' %}
<span class="tag tag-rd" style="font-size:10.5px;">Системный</span>
{% elif u.role == 'admin' %}
<span class="tag tag-or" style="font-size:10.5px;">Админ</span>
{% else %}
<span class="tag tag-dim" style="font-size:10.5px;">Польз.</span>
{% endif %}
</td>
<td>
{% if u.status == 'active' %}
<span class="tag tag-gr"><span class="dot g"></span>Активен</span>
{% elif u.status == 'pending' %}
<span class="tag tag-yl"><span class="dot y pulse"></span>Ожидает</span>
{% else %}
<span class="tag tag-rd"><span class="dot r"></span>Заблок.</span>
{% endif %}
</td>
<td>
{% if u.evotor_user_id %}
<span class="tag tag-gr" style="font-size:10.5px;"><i class="bi bi-check-circle"></i></span>
{% else %}
<span style="color:#9EA8BE;font-size:12px;"></span>
{% endif %}
</td>
<td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ u.created_at | datefmt }}</span></td>
<td>
<a href="/admin/users/{{ u.id }}" class="btn btn-outline btn-xs">
<i class="bi bi-eye"></i>
</a>
</td>
</tr>
{% else %}
<tr>
<td colspan="8" class="text-center" style="padding:32px;color:#9EA8BE;">Пользователи не найдены</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% if total_pages > 1 %}
<div class="pagination">
{% if page > 1 %}
<a href="?page={{ page - 1 }}&search={{ search }}&status={{ status_filter }}&role={{ role_filter }}" class="btn btn-outline btn-sm">« Назад</a>
{% endif %}
<span style="font-size:12px;color:#9EA8BE;">Стр. {{ page }} из {{ total_pages }}</span>
{% if page < total_pages %}
<a href="?page={{ page + 1 }}&search={{ search }}&status={{ status_filter }}&role={{ role_filter }}" class="btn btn-outline btn-sm">Вперёд »</a>
{% endif %}
</div>
{% endif %}
</div>
{% if user.role == 'system' %}
<div class="mt-3 text-end">
<a href="/admin/roles" role="button" class="outline secondary sm">
<i class="bi bi-shield-lock me-1"></i>Управление ролями
</a>
<div style="margin-top:14px;text-align:right;">
<a href="/admin/roles" class="btn btn-outline btn-sm">
<i class="bi bi-shield-lock"></i> Управление ролями
</a>
</div>
{% endif %}
{% endblock %}