feat(ui): modern theme, dark/light toggle, polished templates

templates/report.html

@@ -0,0 +1,107 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="row mb-3">
+  <div class="col-12 d-flex justify-content-between align-items-center">
+    <h4 class="m-0">{{ title }}</h4>
+    <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('web.index') }}">На главную</a>
+  </div>
+  </div>
+
+<div class="row g-3">
+  <div class="col-lg-7">
+    <div class="card shadow-sm">
+      <div class="card-body">
+        <div class="chart-wrap">
+          <canvas id="chart"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-5">
+    <div class="card shadow-sm">
+      <div class="card-header">Сводка</div>
+      <div class="card-body">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item d-flex justify-content-between"><span>Всего тикетов</span><strong>{{ overview.total }}</strong></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row mt-4 g-3">
+  <div class="col-lg-6">
+    <div class="card shadow-sm">
+      <div class="card-header">По агентам</div>
+      <div class="card-body p-0">
+        <table class="table table-sm table-hover align-middle m-0">
+          <thead class="table-light"><tr><th>Агент</th><th class="text-end">Количество</th></tr></thead>
+          <tbody>
+            {% for name, count in by_agent %}
+            <tr><td>{{ name }}</td><td class="text-end">{{ count }}</td></tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-6">
+    <div class="card shadow-sm">
+      <div class="card-header">По группам</div>
+      <div class="card-body p-0">
+        <table class="table table-sm table-hover align-middle m-0">
+          <thead class="table-light"><tr><th>Группа</th><th class="text-end">Количество</th></tr></thead>
+          <tbody>
+            {% for name, count in by_group %}
+            <tr><td>{{ name }}</td><td class="text-end">{{ count }}</td></tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+<script>
+  const labels = {{ chart_labels | tojson }};
+  const data = {{ chart_values | tojson }};
+  const ctx = document.getElementById('chart');
+  
+  const css = getComputedStyle(document.documentElement);
+  const primary = css.getPropertyValue('--brand').trim() || '#0d6efd';
+  const primaryFill = 'rgba(79, 140, 255, .25)';
+
+  const isDate = (v) => /^\d{4}-\d{2}-\d{2}$/.test(v);
+  const mode = labels.every(isDate) ? 'line' : 'bar';
+
+  const chart = new Chart(ctx, {
+    type: mode,
+    data: {
+      labels,
+      datasets: [{
+        label: 'Значения',
+        data,
+        borderColor: primary,
+        backgroundColor: mode === 'bar' ? primaryFill : primaryFill,
+        borderWidth: 2,
+        tension: 0.25,
+        fill: mode === 'line',
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        y: { beginAtZero: true, ticks: { precision: 0 } }
+      },
+      plugins: {
+        legend: { display: false }
+      }
+    }
+  });
+</script>
+{% endblock %}
+