feat: initialize full-stack architecture with backend routes, database schema, and glassmorphic frontend UI
This commit is contained in:
@@ -1,22 +1,31 @@
|
||||
/* frontend/css/styles.css */
|
||||
/* Premium dark‑mode + glassmorphism design */
|
||||
/* Ultimate Premium Dark Mode + Glassmorphism */
|
||||
|
||||
:root {
|
||||
--font-family: 'Inter', sans-serif;
|
||||
--color-bg: hsl(220, 10%, 10%);
|
||||
--color-surface: hsla(220, 10%, 15%, 0.8);
|
||||
--color-primary: hsl(210, 80%, 55%);
|
||||
--color-primary-hover: hsl(210, 80%, 45%);
|
||||
--color-success: hsl(140, 60%, 45%);
|
||||
--color-error: hsl(0, 70%, 50%);
|
||||
--color-text: hsl(0, 0%, 90%);
|
||||
--radius: 0.75rem;
|
||||
--shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
--font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
|
||||
/* Palette */
|
||||
--color-bg: #0b0e14;
|
||||
--color-surface: rgba(23, 28, 38, 0.7);
|
||||
--color-surface-hover: rgba(35, 42, 56, 0.85);
|
||||
--color-primary: #3b82f6; /* Modern Blue */
|
||||
--color-primary-glow: rgba(59, 130, 246, 0.5);
|
||||
--color-success: #10b981; /* Emerald */
|
||||
--color-success-glow: rgba(16, 185, 129, 0.4);
|
||||
--color-warning: #f59e0b; /* Amber */
|
||||
--color-error: #ef4444; /* Rose */
|
||||
--color-text: #f3f4f6;
|
||||
--color-text-dim: #9ca3af;
|
||||
|
||||
/* Utils */
|
||||
--radius-lg: 1.25rem;
|
||||
--radius-md: 0.75rem;
|
||||
--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
|
||||
--glass-border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -24,248 +33,307 @@
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
background: var(--color-bg);
|
||||
background-color: var(--color-bg);
|
||||
background-image:
|
||||
radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 40%),
|
||||
radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 40%);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: var(--color-bg); }
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
background: linear-gradient(135deg, hsla(210, 70%, 55%, 0.6), hsla(210, 70%, 35%, 0.6));
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 2.5rem 1rem;
|
||||
background: rgba(11, 14, 20, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: var(--glass-border);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-primary);
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(to right, #60a5fa, #34d399);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
.header p {
|
||||
color: var(--color-text-dim);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
/* Auth Section */
|
||||
.auth-box {
|
||||
max-width: 420px;
|
||||
margin: 6rem auto;
|
||||
padding: 2.5rem;
|
||||
background: var(--color-surface);
|
||||
backdrop-filter: blur(16px);
|
||||
border-radius: var(--radius-lg);
|
||||
border: var(--glass-border);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.auth-box h2 {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.controls input,
|
||||
.controls select {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid hsla(0, 0%, 100%, 0.1);
|
||||
border-radius: var(--radius);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
border: none;
|
||||
.auth-box input {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1.25rem;
|
||||
margin-top: 0.75rem;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: var(--glass-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: #fff;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: hsla(0, 0%, 100%, 0.1);
|
||||
border: none;
|
||||
color: var(--color-text);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: hsla(0, 0%, 100%, 0.2);
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
backdrop-filter: blur(6px);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid hsla(0, 0%, 100%, 0.05);
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: hsla(0, 0%, 100%, 0.05);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.hidden { display: none; }
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
label input,
|
||||
label textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
border: 1px solid hsla(0,0%,100%,0.1);
|
||||
border-radius: var(--radius);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.preview img {
|
||||
max-width: 120px;
|
||||
max-height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
.auth-box input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid hsla(0,0%,100%,0.1);
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
margin-top: 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
color: var(--color-text-dim);
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: var(--color-primary);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--color-primary);
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 12px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Cards & Grid */
|
||||
.platforms-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.platform-card {
|
||||
background: var(--color-surface);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid hsla(0,0%,100%,0.1);
|
||||
transition: transform 0.2s;
|
||||
padding: 1.75rem;
|
||||
border-radius: var(--radius-lg);
|
||||
border: var(--glass-border);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.platform-card:hover {
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(-4px);
|
||||
background: var(--color-surface-hover);
|
||||
border-color: rgba(255,255,255,0.15);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.platform-card h3 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.platform-card .status {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.active-platform {
|
||||
border-color: var(--color-success);
|
||||
.btn-primary:hover {
|
||||
filter: brightness(1.1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 15px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.active-platform h3 {
|
||||
color: var(--color-success);
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--color-text);
|
||||
font-weight: 500;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: var(--glass-border);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.platform-form {
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
border: var(--glass-border);
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
padding: 1rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-dim);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-top: var(--glass-border);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.table tr:hover td {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.status-pill {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.status-new { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
|
||||
.status-closed { background: rgba(16, 185, 129, 0.15); color: #34d399; }
|
||||
|
||||
/* Icons */
|
||||
.icon-sm {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
stroke-width: 2.5px;
|
||||
}
|
||||
|
||||
.icon-sm.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* Form Controls */
|
||||
input, select, textarea {
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
/* Chart Container */
|
||||
canvas {
|
||||
margin-top: 1rem;
|
||||
filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.1));
|
||||
}
|
||||
/* Toast Notifications */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.platform-form input {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid hsla(0,0%,100%,0.1);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(0,0,0,0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.auth-box {
|
||||
max-width: 400px;
|
||||
margin: 4rem auto;
|
||||
padding: 2rem;
|
||||
.toast {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid hsla(0,0%,100%,0.1);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.auth-box input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
border: 1px solid hsla(0,0%,100%,0.1);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(0,0,0,0.2);
|
||||
backdrop-filter: blur(20px);
|
||||
border: var(--glass-border);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-xl);
|
||||
color: #fff;
|
||||
min-width: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-left: 4px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.auth-box a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.auth-box a:hover {
|
||||
text-decoration: underline;
|
||||
@keyframes slideIn {
|
||||
from { opacity: 0; transform: translateX(100%); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
.toast.success { border-left-color: var(--color-success); }
|
||||
.toast.error { border-left-color: var(--color-error); }
|
||||
.toast.info { border-left-color: var(--color-primary); }
|
||||
|
||||
.toast-message { font-size: 0.9rem; font-weight: 500; }
|
||||
|
||||
@@ -5,13 +5,16 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AutoMarket – Универсальная панель управления</title>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto;">
|
||||
<div>
|
||||
<h1>AutoMarket</h1>
|
||||
<h1><i data-lucide="shield-check" style="vertical-align: middle; margin-right: 0.5rem;"></i>AutoMarket</h1>
|
||||
<p>Управление жалобами и интеграциями для 10 маркетплейсов</p>
|
||||
</div>
|
||||
<div id="user-info" class="hidden">
|
||||
@@ -38,10 +41,15 @@
|
||||
|
||||
<div id="main-app" class="hidden">
|
||||
<div class="tabs-container">
|
||||
<button class="tab-btn active" data-target="dashboard-section">Дашборд</button>
|
||||
<button class="tab-btn" data-target="cases-section">Список жалоб</button>
|
||||
<button class="tab-btn" data-target="integrations-section">Настройки интеграций</button>
|
||||
<button class="tab-btn" data-target="billing-section">Тарифы</button>
|
||||
<button class="tab-btn active" data-target="dashboard-section"><i data-lucide="layout-dashboard" class="icon-sm"></i> Дашборд</button>
|
||||
<button class="tab-btn" data-target="cases-section"><i data-lucide="list" class="icon-sm"></i> Список жалоб</button>
|
||||
<button class="tab-btn" data-target="integrations-section"><i data-lucide="settings" class="icon-sm"></i> Настройки</button>
|
||||
<button class="tab-btn" data-target="billing-section"><i data-lucide="credit-card" class="icon-sm"></i> Тарифы</button>
|
||||
<button class="tab-btn" data-target="logs-section"><i data-lucide="activity" class="icon-sm"></i> История</button>
|
||||
<button class="tab-btn" data-target="reviews-section"><i data-lucide="message-square" class="icon-sm"></i> Отзывы</button>
|
||||
<button class="tab-btn" data-target="seo-section"><i data-lucide="trending-up" class="icon-sm"></i> SEO</button>
|
||||
<button class="tab-btn" data-target="content-section"><i data-lucide="image" class="icon-sm"></i> Контент</button>
|
||||
<button class="tab-btn" data-target="finance-section"><i data-lucide="wallet" class="icon-sm"></i> Финансы</button>
|
||||
</div>
|
||||
|
||||
<main class="container">
|
||||
@@ -50,7 +58,43 @@
|
||||
<section id="dashboard-section" class="section">
|
||||
<h2>Сводная статистика</h2>
|
||||
<div id="stats-grid" class="platforms-grid">
|
||||
<!-- Stats cards will be here -->
|
||||
<div class="platform-card">
|
||||
<p style="color: var(--color-text-dim); font-size: 0.9rem;">Всего кейсов</p>
|
||||
<h3 id="stat-cases">0</h3>
|
||||
</div>
|
||||
<div class="platform-card">
|
||||
<p style="color: var(--color-text-dim); font-size: 0.9rem;">Интеграций</p>
|
||||
<h3 id="stat-integrations">0</h3>
|
||||
</div>
|
||||
<div class="platform-card">
|
||||
<p style="color: var(--color-success); font-size: 0.9rem;">Выручка (всего сегодня)</p>
|
||||
<h3 id="stat-sales">0 ₽</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" style="margin-top: 2rem; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 1.5rem;">
|
||||
<h3>Динамика кейсов</h3>
|
||||
<canvas id="casesChart" style="max-height: 300px;"></canvas>
|
||||
</div>
|
||||
<div class="platforms-grid" style="margin-top: 1.5rem;">
|
||||
<div class="platform-card" style="grid-column: 1 / -1;">
|
||||
<h3>Состояние магазинов (Multi-account)</h3>
|
||||
<table id="stores-table" class="table" style="margin-top: 1rem;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Магазин</th>
|
||||
<th>Площадка</th>
|
||||
<th>Статус API</th>
|
||||
<th>Продажи (сегодня)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="platform-card" style="grid-column: 1 / -1;">
|
||||
<h3>Динамика нарушений</h3>
|
||||
<canvas id="caseTrendChart" height="100"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" style="margin-top: 2rem;">
|
||||
<h3>Последняя активность</h3>
|
||||
@@ -72,7 +116,7 @@
|
||||
<!-- Billing / Subscription Section -->
|
||||
<section id="billing-section" class="section hidden">
|
||||
<h2>Ваш тариф: <span id="current-plan-display">Free</span></h2>
|
||||
<div class="platforms-grid">
|
||||
<div class="platforms-grid" style="margin-top: 2rem;">
|
||||
<div class="platform-card">
|
||||
<h3>Тариф FREE</h3>
|
||||
<p class="status">Активен по умолчанию</p>
|
||||
@@ -95,6 +139,180 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Audit Logs List -->
|
||||
<section id="logs-section" class="section hidden">
|
||||
<h2>История действий</h2>
|
||||
<div class="table-container">
|
||||
<table id="logs-table" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Действие</th>
|
||||
<th>Детали</th>
|
||||
<th>Дата</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Reviews Section -->
|
||||
<section id="reviews-section" class="section hidden">
|
||||
<h2>ИИ-Ответчик на отзывы</h2>
|
||||
<div class="platforms-grid">
|
||||
<div class="platform-card" style="grid-column: 1 / -1;">
|
||||
<p style="margin-bottom: 1.5rem; color: var(--color-text-dim);">
|
||||
Введите текст отзыва покупателя и выберите оценку, чтобы ИИ подготовил идеальный ответ.
|
||||
</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 600px;">
|
||||
<label>
|
||||
Текст отзыва
|
||||
<textarea id="review-text-input" rows="4" placeholder="Например: Товар пришел быстро, качество отличное!"></textarea>
|
||||
</label>
|
||||
<label>
|
||||
Оценка (звезды)
|
||||
<select id="review-rating-input">
|
||||
<option value="5">⭐⭐⭐⭐⭐ (5)</option>
|
||||
<option value="4">⭐⭐⭐⭐ (4)</option>
|
||||
<option value="3">⭐⭐⭐ (3)</option>
|
||||
<option value="2">⭐⭐ (2)</option>
|
||||
<option value="1">⭐ (1)</option>
|
||||
</select>
|
||||
</label>
|
||||
<button class="btn-primary" id="ai-review-btn">
|
||||
<i data-lucide="sparkles" class="icon-sm"></i> Сгенерировать ответ
|
||||
</button>
|
||||
|
||||
<div id="ai-reply-container" class="hidden" style="margin-top: 1.5rem; animation: fadeIn 0.3s;">
|
||||
<label>
|
||||
Предложенный ответ ИИ
|
||||
<textarea id="ai-reply-output" rows="5"></textarea>
|
||||
</label>
|
||||
<button class="btn-secondary" onclick="copyReply()">
|
||||
<i data-lucide="copy" class="icon-sm"></i> Копировать в буфер
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SEO Section -->
|
||||
<section id="seo-section" class="section hidden">
|
||||
<h2>SEO Мониторинг позиций</h2>
|
||||
<div class="platforms-grid">
|
||||
<div class="platform-card" style="grid-column: 1 / 1;">
|
||||
<h3>Добавить ключевое слово</h3>
|
||||
<form id="add-seo-form" class="platform-form" style="margin-top: 1rem;">
|
||||
<input type="text" name="keyword" placeholder="Ключевое слово (например: кофемолка)" required>
|
||||
<input type="text" name="article" placeholder="Твой артикул" required>
|
||||
<select name="platform">
|
||||
<option value="ozon">Ozon</option>
|
||||
<option value="wildberries">Wildberries</option>
|
||||
</select>
|
||||
<button type="submit" class="btn-primary">Начать отслеживание</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="platform-card" style="grid-column: 2 / -1;">
|
||||
<h3>Отслеживаемые ключи</h3>
|
||||
<table id="seo-table" class="table" style="margin-top: 1rem;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ключ</th>
|
||||
<th>Артикул</th>
|
||||
<th>Позиция</th>
|
||||
<th>Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="seo-chart-container" class="platform-card hidden" style="margin-top: 1.5rem;">
|
||||
<h3 id="seo-chart-title">История позиции</h3>
|
||||
<canvas id="seoChart" height="150"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Protection Section -->
|
||||
<section id="content-section" class="section hidden">
|
||||
<h2>Защита визуального контента</h2>
|
||||
<div class="platforms-grid">
|
||||
<div class="platform-card">
|
||||
<h3>Загрузить эталон (оригинал)</h3>
|
||||
<form id="add-reference-form" class="platform-form" style="margin-top: 1rem;">
|
||||
<input type="text" name="article" placeholder="Артикул товара" required>
|
||||
<input type="file" name="file" accept="image/*" required style="border: none; padding: 0.5rem 0;">
|
||||
<button type="submit" class="btn-primary">Сохранить эталон</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="platform-card" style="grid-column: 2 / -1;">
|
||||
<h3>Твои оригиналы</h3>
|
||||
<div id="reference-list" class="platforms-grid" style="grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 1rem;">
|
||||
<!-- Reference images here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="clones-detected-container" class="section hidden" style="margin-top: 2rem; border-top: var(--glass-border); padding-top: 2rem;">
|
||||
<h3><i data-lucide="alert-triangle" class="icon-sm" style="color: var(--color-error);"></i> Обнаружены клоны</h3>
|
||||
<div id="clones-list" class="platforms-grid" style="margin-top: 1rem;">
|
||||
<!-- Detected clones here -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Finance Section -->
|
||||
<section id="finance-section" class="section hidden">
|
||||
<h2>Калькулятор чистой прибыли (Unit Economics)</h2>
|
||||
<div class="platforms-grid">
|
||||
<div class="platform-card" style="grid-column: 1 / 1;">
|
||||
<h3>Параметры товара</h3>
|
||||
<form id="pnl-form" class="platform-form" style="margin-top: 1rem; display: flex; flex-direction: column; gap: 0.8rem;">
|
||||
<label>Цена продажи (₽)<input type="number" name="sale_price" value="1000" step="0.1" required></label>
|
||||
<label>Закупка (₽)<input type="number" name="purchase_price" value="400" step="0.1" required></label>
|
||||
<label>Логистика (₽)<input type="number" name="logistics" value="100" step="0.1" required></label>
|
||||
<label>Комиссия (%)<input type="number" name="commission_pct" value="15" step="0.1" required></label>
|
||||
<label>Налог (УСН %)<input type="number" name="tax_pct" value="6" step="0.1" required></label>
|
||||
<label>Реклама на 1 шт (₽)<input type="number" name="adv_per_unit" value="50" step="0.1" required></label>
|
||||
<button type="submit" class="btn-primary">Рассчитать прибыль</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="pnl-results" class="platform-card hidden" style="grid-column: 2 / -1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;">
|
||||
<h3 style="margin-bottom: 2rem;">Результаты расчета</h3>
|
||||
<div style="display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center;">
|
||||
<div>
|
||||
<div style="color: var(--color-text-dim); font-size: 0.9rem;">Чистая прибыль</div>
|
||||
<div id="pnl-net-profit" style="font-size: 2.5rem; font-weight: 800; color: var(--color-success);">0 ₽</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="color: var(--color-text-dim); font-size: 0.9rem;">Маржа</div>
|
||||
<div id="pnl-margin" style="font-size: 2.5rem; font-weight: 800; color: var(--color-primary);">0 %</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="color: var(--color-text-dim); font-size: 0.9rem;">ROI</div>
|
||||
<div id="pnl-roi" style="font-size: 2.5rem; font-weight: 800; color: var(--color-warning);">0 %</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 2rem; width: 100%; max-width: 400px; text-align: left; padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 12px;">
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
||||
<span>Комиссия МП:</span> <span id="pnl-comm-abs">0 ₽</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
||||
<span>Налоги:</span> <span id="pnl-tax-abs">0 ₽</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; font-weight: bold; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 0.5rem;">
|
||||
<span>Себестоимость полная:</span> <span id="pnl-total-costs">0 ₽</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Integrations List -->
|
||||
<section id="integrations-section" class="section hidden">
|
||||
<h2>Доступные маркетплейсы</h2>
|
||||
@@ -179,7 +397,12 @@
|
||||
</label>
|
||||
<label>
|
||||
Комментарий / описание
|
||||
<textarea name="comment" rows="3"></textarea>
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 0.25rem;">
|
||||
<textarea name="comment" id="case-comment" rows="4" style="flex: 1;"></textarea>
|
||||
<button type="button" id="ai-gen-btn" class="btn-secondary" style="height: fit-content; white-space: nowrap;">
|
||||
<i data-lucide="sparkles" class="icon-sm"></i> ИИ Помощник
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
<label>
|
||||
Прикрепить доказательства
|
||||
@@ -206,5 +429,8 @@
|
||||
</div>
|
||||
|
||||
<script type="module" src="js/app.js"></script>
|
||||
|
||||
<!-- Toast Notification Container -->
|
||||
<div id="toast-container" class="toast-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -15,10 +15,55 @@ const PLATFORMS = [
|
||||
];
|
||||
|
||||
let currentUser = null;
|
||||
let socket = null;
|
||||
|
||||
function showToast(message, type = 'info') {
|
||||
const container = document.getElementById('toast-container');
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast ${type}`;
|
||||
|
||||
let icon = 'info';
|
||||
if(type === 'success') icon = 'check-circle';
|
||||
if(type === 'error') icon = 'alert-circle';
|
||||
|
||||
toast.innerHTML = `
|
||||
<i data-lucide="${icon}" class="icon-sm"></i>
|
||||
<div class="toast-message">${message}</div>
|
||||
`;
|
||||
container.appendChild(toast);
|
||||
if (window.lucide) lucide.createIcons();
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
toast.style.transform = 'translateX(100%)';
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
function initSocket() {
|
||||
socket = io('http://localhost:5000');
|
||||
|
||||
socket.on('connect', () => {
|
||||
console.log('Connected to WebSocket server');
|
||||
});
|
||||
|
||||
socket.on('case_created', (data) => {
|
||||
showToast(data.message, 'success');
|
||||
// Refresh dashboard if active
|
||||
if(!document.getElementById('dashboard-section').classList.contains('hidden')) {
|
||||
loadDashboard();
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('scanner_update', (data) => {
|
||||
showToast(data.message, 'info');
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
initAuth();
|
||||
initReports();
|
||||
initSocket();
|
||||
|
||||
// Check if logged in
|
||||
const token = localStorage.getItem('token');
|
||||
@@ -28,6 +73,7 @@ document.addEventListener("DOMContentLoaded", async () => {
|
||||
const planBadge = currentUser.plan === 'pro' ? '<span style="color: gold;">[PRO]</span>' : '<span style="color: gray;">[FREE]</span>';
|
||||
document.getElementById('username-display').innerHTML = `Привет, ${currentUser.username} ${planBadge}`;
|
||||
showApp();
|
||||
if (window.lucide) lucide.createIcons();
|
||||
} catch (e) {
|
||||
showAuth();
|
||||
}
|
||||
@@ -99,44 +145,83 @@ function initDashboard() {
|
||||
loadDashboard();
|
||||
}
|
||||
|
||||
let casesChart = null;
|
||||
async function loadDashboard() {
|
||||
try {
|
||||
const stats = await api.getDashboardStats();
|
||||
const grid = document.getElementById('stats-grid');
|
||||
grid.innerHTML = `
|
||||
<div class="platform-card">
|
||||
<h3>Всего кейсов</h3>
|
||||
<p style="font-size: 2rem; font-weight: bold;">${stats.total_cases}</p>
|
||||
</div>
|
||||
<div class="platform-card">
|
||||
<h3>Активных интеграций</h3>
|
||||
<p style="font-size: 2rem; font-weight: bold;">${stats.total_integrations}</p>
|
||||
<p style="font-size: 0.8rem;">${stats.platforms.join(', ').toUpperCase()}</p>
|
||||
</div>
|
||||
<div class="platform-card">
|
||||
<h3>В работе (Prepared/Sent)</h3>
|
||||
<p style="font-size: 2rem; font-weight: bold;">
|
||||
${(stats.cases_by_status.prepared || 0) + (stats.cases_by_status.sent || 0)}
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
const data = await api.getDashboardStats();
|
||||
|
||||
const tbody = document.querySelector('#recent-activity-table tbody');
|
||||
tbody.innerHTML = '';
|
||||
stats.recent_activity.forEach(a => {
|
||||
const tr = document.createElement('tr');
|
||||
const pName = PLATFORMS.find(p => p.id === a.platform)?.name || a.platform;
|
||||
tr.innerHTML = `
|
||||
<td>${a.id}</td>
|
||||
<td>${pName}</td>
|
||||
<td>${a.article}</td>
|
||||
<td>${a.status}</td>
|
||||
<td>${new Date(a.date).toLocaleDateString()}</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
// Update Counters
|
||||
document.getElementById('stat-cases').innerText = data.total_cases;
|
||||
document.getElementById('stat-integrations').innerText = data.total_integrations;
|
||||
document.getElementById('stat-sales').innerText = `${(data.total_sales || 0).toLocaleString()} ₽`;
|
||||
|
||||
// Update Stores Table (Multi-account)
|
||||
const storesTbody = document.querySelector('#stores-table tbody');
|
||||
if (storesTbody) {
|
||||
storesTbody.innerHTML = '';
|
||||
(data.stores || []).forEach(s => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td><strong>${s.name}</strong></td>
|
||||
<td><span style="text-transform: uppercase;">${s.platform}</span></td>
|
||||
<td><span class="status-pill status-closed" style="background: rgba(16, 185, 129, 0.1); color: #34d399;">● Online</span></td>
|
||||
<td>${(s.daily_sales || 0).toLocaleString()} ₽</td>
|
||||
`;
|
||||
storesTbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
// Render Chart
|
||||
const ctx = document.getElementById('casesChart').getContext('2d');
|
||||
if (casesChart) casesChart.destroy();
|
||||
casesChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: data.trend.map(t => t.date),
|
||||
datasets: [{
|
||||
label: 'Новые кейсы',
|
||||
data: data.trend.map(t => t.count),
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
borderWidth: 3,
|
||||
pointRadius: 4,
|
||||
pointBackgroundColor: '#3b82f6'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' }, border: { display: false } },
|
||||
x: { grid: { display: false }, border: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update Recent Activity Table
|
||||
const tbody = document.querySelector('#recent-activity-table tbody');
|
||||
if (tbody) {
|
||||
tbody.innerHTML = '';
|
||||
data.recent_activity.forEach(a => {
|
||||
const tr = document.createElement('tr');
|
||||
const pName = PLATFORMS.find(p => p.id === a.platform)?.name || a.platform;
|
||||
const statusClass = a.status === 'new' ? 'status-new' : (a.status === 'closed' ? 'status-closed' : '');
|
||||
tr.innerHTML = `
|
||||
<td>#${a.id}</td>
|
||||
<td><strong>${pName}</strong></td>
|
||||
<td><code>${a.article}</code></td>
|
||||
<td><span class="status-pill ${statusClass}">${a.status}</span></td>
|
||||
<td>${new Date(a.date).toLocaleDateString()}</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
if (window.lucide) lucide.createIcons();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
console.error('Dashboard Load Error:', e);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -182,10 +267,269 @@ function initTabs() {
|
||||
if(target === 'dashboard-section') loadDashboard();
|
||||
if(target === 'cases-section') loadCases();
|
||||
if(target === 'integrations-section') loadIntegrations();
|
||||
if(target === 'logs-section') loadLogs();
|
||||
if(target === 'reviews-section') { /* No initial load needed */ }
|
||||
if(target === 'seo-section') loadSEO();
|
||||
if(target === 'content-section') loadReferences();
|
||||
if(target === 'finance-section') { /* No initial load */ }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('pnl-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const fd = new FormData(e.target);
|
||||
const data = Object.fromEntries(fd.entries());
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('http://localhost:5000/api/finance/calculate-pnl', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
const result = await res.json();
|
||||
|
||||
document.getElementById('pnl-results').classList.remove('hidden');
|
||||
document.getElementById('pnl-net-profit').innerText = `${result.net_profit.toLocaleString()} ₽`;
|
||||
document.getElementById('pnl-margin').innerText = `${result.margin} %`;
|
||||
document.getElementById('pnl-roi').innerText = `${result.roi} %`;
|
||||
document.getElementById('pnl-total-costs').innerText = `${result.total_costs.toLocaleString()} ₽`;
|
||||
document.getElementById('pnl-tax-abs').innerText = `${result.tax_amount.toLocaleString()} ₽`;
|
||||
document.getElementById('pnl-comm-abs').innerText = `${result.commission_amount.toLocaleString()} ₽`;
|
||||
|
||||
// Color coding
|
||||
const netProfitEl = document.getElementById('pnl-net-profit');
|
||||
if (result.net_profit > 0) {
|
||||
netProfitEl.style.color = 'var(--color-success)';
|
||||
} else {
|
||||
netProfitEl.style.color = 'var(--color-error)';
|
||||
}
|
||||
|
||||
showToast('Расчет завершен', 'success');
|
||||
} catch (err) {
|
||||
alert('Ошибка расчета');
|
||||
}
|
||||
});
|
||||
|
||||
async function loadReferences() {
|
||||
const list = document.getElementById('reference-list');
|
||||
list.innerHTML = 'Загрузка...';
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('http://localhost:5000/api/content/reference', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
const refs = await res.json();
|
||||
list.innerHTML = '';
|
||||
refs.forEach(r => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'platform-card';
|
||||
div.style.textAlign = 'center';
|
||||
div.innerHTML = `
|
||||
<div style="background: rgba(0,0,0,0.3); padding: 5px; border-radius: 8px;">#${r.article}</div>
|
||||
<div style="font-size: 0.6rem; color: var(--color-text-dim); margin: 5px 0;">Hash: ${r.hash.substring(0, 8)}...</div>
|
||||
<button class="btn-primary" style="padding: 0.3rem 0.6rem; font-size: 0.7rem;" onclick="detectClones(${r.id})">Найти клонов</button>
|
||||
`;
|
||||
list.appendChild(div);
|
||||
});
|
||||
} catch (e) {
|
||||
list.innerHTML = 'Ошибка';
|
||||
}
|
||||
}
|
||||
|
||||
window.detectClones = async (id) => {
|
||||
const container = document.getElementById('clones-detected-container');
|
||||
const list = document.getElementById('clones-list');
|
||||
list.innerHTML = 'Ищу визуальные копии на маркетплейсах...';
|
||||
container.classList.remove('hidden');
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch(`http://localhost:5000/api/content/detect-clones/${id}`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
const clones = await res.json();
|
||||
list.innerHTML = '';
|
||||
clones.forEach(c => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'platform-card';
|
||||
div.style.borderColor = 'var(--color-error)';
|
||||
div.innerHTML = `
|
||||
<img src="${c.image_url}" style="width: 100%; height: 100px; object-fit: cover; border-radius: 8px; margin-bottom: 0.5rem;">
|
||||
<strong>${c.platform.toUpperCase()}</strong>
|
||||
<div style="font-size: 0.8rem;">Артикул: ${c.article}</div>
|
||||
<div style="color: var(--color-error); font-weight: bold;">Сходство: ${c.similarity}</div>
|
||||
<button class="btn-primary" style="margin-top: 0.5rem; width: 100%;" onclick="reportClone('${c.platform}', '${c.url}', '${c.article}')">Подать жалобу</button>
|
||||
`;
|
||||
list.appendChild(div);
|
||||
});
|
||||
} catch (e) {
|
||||
list.innerHTML = 'Ошибка при поиске';
|
||||
}
|
||||
}
|
||||
|
||||
window.reportClone = (platform, url, article) => {
|
||||
// Switch to cases tab and pre-fill form
|
||||
document.querySelector('.tab-btn[data-target="cases-section"]').click();
|
||||
setTimeout(() => {
|
||||
document.getElementById('case-platform').value = platform;
|
||||
document.querySelector('input[name="violator_url"]').value = url;
|
||||
document.querySelector('input[name="violator_article"]').value = article;
|
||||
showToast('Данные нарушителя перенесены в форму жалобы', 'info');
|
||||
}, 100);
|
||||
}
|
||||
|
||||
document.getElementById('add-reference-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.target);
|
||||
const btn = e.target.querySelector('button');
|
||||
btn.disabled = true;
|
||||
btn.innerText = 'Загрузка...';
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('http://localhost:5000/api/content/reference', {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': `Bearer ${token}` },
|
||||
body: formData
|
||||
});
|
||||
if (res.ok) {
|
||||
showToast('Эталон загружен и хеширован', 'success');
|
||||
e.target.reset();
|
||||
loadReferences();
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Ошибка');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.innerText = 'Сохранить эталон';
|
||||
}
|
||||
});
|
||||
|
||||
let seoChart = null;
|
||||
|
||||
async function loadSEO() {
|
||||
const tbody = document.querySelector('#seo-table tbody');
|
||||
tbody.innerHTML = '<tr><td colspan="4">Загрузка...</td></tr>';
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('http://localhost:5000/api/seo/keywords', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
const keywords = await res.json();
|
||||
tbody.innerHTML = '';
|
||||
keywords.forEach(k => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td><strong>${k.keyword}</strong></td>
|
||||
<td><code>${k.article}</code></td>
|
||||
<td><span class="status-pill status-closed" style="background: rgba(59, 130, 246, 0.1); color: #60a5fa;">#${k.last_position || '?'}</span></td>
|
||||
<td>
|
||||
<button class="btn-secondary" onclick="viewSEOHistory(${k.id}, '${k.keyword}')">График</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
} catch (e) {
|
||||
tbody.innerHTML = '<tr><td colspan="4">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
window.viewSEOHistory = async (id, keyword) => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch(`http://localhost:5000/api/seo/history/${id}`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
const history = await res.json();
|
||||
|
||||
document.getElementById('seo-chart-container').classList.remove('hidden');
|
||||
document.getElementById('seo-chart-title').innerText = `История позиции: ${keyword}`;
|
||||
|
||||
const ctx = document.getElementById('seoChart').getContext('2d');
|
||||
if (seoChart) seoChart.destroy();
|
||||
seoChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: history.map(h => h.date),
|
||||
datasets: [{
|
||||
label: 'Место в поиске',
|
||||
data: history.map(h => h.position),
|
||||
borderColor: '#10b981',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||
tension: 0.3,
|
||||
fill: true,
|
||||
reverse: true // Because 1 is better than 100
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: { reverse: true, grid: { color: 'rgba(255,255,255,0.05)' } },
|
||||
x: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
alert('Ошибка загрузки истории');
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('add-seo-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const fd = new FormData(e.target);
|
||||
const data = Object.fromEntries(fd.entries());
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('http://localhost:5000/api/seo/keywords', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
if (res.ok) {
|
||||
e.target.reset();
|
||||
loadSEO();
|
||||
showToast('Ключевое слово добавлено', 'success');
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Ошибка при добавлении');
|
||||
}
|
||||
});
|
||||
|
||||
async function loadLogs() {
|
||||
const tbody = document.querySelector('#logs-table tbody');
|
||||
tbody.innerHTML = '<tr><td colspan="3">Загрузка...</td></tr>';
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('http://localhost:5000/api/dashboard/logs', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
const logs = await res.json();
|
||||
tbody.innerHTML = '';
|
||||
logs.forEach(l => {
|
||||
const tr = document.createElement('tr');
|
||||
const details = l.details ? JSON.stringify(l.details) : '-';
|
||||
tr.innerHTML = `
|
||||
<td><strong>${l.action}</strong></td>
|
||||
<td style="font-size: 0.8rem; color: var(--color-text-dim);">${details}</td>
|
||||
<td>${new Date(l.date).toLocaleString()}</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
} catch (e) {
|
||||
tbody.innerHTML = '<tr><td colspan="3">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
// ---- INTEGRATIONS ----
|
||||
async function loadIntegrations() {
|
||||
const grid = document.getElementById('platforms-grid');
|
||||
@@ -225,6 +569,7 @@ async function loadIntegrations() {
|
||||
|
||||
grid.appendChild(card);
|
||||
});
|
||||
if (window.lucide) lucide.createIcons();
|
||||
} catch (e) {
|
||||
grid.innerHTML = 'Ошибка загрузки интеграций.';
|
||||
console.error(e);
|
||||
@@ -281,6 +626,98 @@ async function initCases() {
|
||||
window.location.href = api.getExportCsvUrl();
|
||||
});
|
||||
|
||||
document.getElementById('ai-gen-btn').addEventListener('click', async () => {
|
||||
const platform = document.getElementById('case-platform').value;
|
||||
const v_art = document.querySelector('input[name="violator_article"]').value;
|
||||
const my_art = document.querySelector('input[name="my_article"]').value;
|
||||
|
||||
if (!v_art) {
|
||||
alert('Сначала введите артикул нарушителя');
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = document.getElementById('ai-gen-btn');
|
||||
const originalText = btn.innerHTML;
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i data-lucide="loader-2" class="icon-sm spin"></i> Генерирую...';
|
||||
if (window.lucide) lucide.createIcons();
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('http://localhost:5000/api/ai/generate-complaint', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({ platform, violator_article: v_art, my_article: my_art })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.text) {
|
||||
document.getElementById('case-comment').value = data.text;
|
||||
showToast('Текст успешно сгенерирован ИИ', 'success');
|
||||
} else {
|
||||
alert(data.error || 'Ошибка генерации');
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Ошибка сети при вызове ИИ');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = originalText;
|
||||
if (window.lucide) lucide.createIcons();
|
||||
}
|
||||
});
|
||||
|
||||
// ---- REVIEWS AI ----
|
||||
document.getElementById('ai-review-btn').addEventListener('click', async () => {
|
||||
const text = document.getElementById('review-text-input').value;
|
||||
const rating = document.getElementById('review-rating-input').value;
|
||||
|
||||
if (!text) {
|
||||
alert('Введите текст отзыва');
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = document.getElementById('ai-review-btn');
|
||||
const originalHTML = btn.innerHTML;
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i data-lucide="loader-2" class="icon-sm spin"></i> Генерирую ответ...';
|
||||
if (window.lucide) lucide.createIcons();
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('http://localhost:5000/api/ai/generate-reply', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({ review_text: text, rating: parseInt(rating) })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.text) {
|
||||
document.getElementById('ai-reply-output').value = data.text;
|
||||
document.getElementById('ai-reply-container').classList.remove('hidden');
|
||||
showToast('Ответ сгенерирован!', 'success');
|
||||
} else {
|
||||
alert(data.error || 'Ошибка');
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Ошибка сети');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = originalHTML;
|
||||
if (window.lucide) lucide.createIcons();
|
||||
}
|
||||
});
|
||||
|
||||
window.copyReply = () => {
|
||||
const output = document.getElementById('ai-reply-output');
|
||||
output.select();
|
||||
document.execCommand('copy');
|
||||
showToast('Скопировано в буфер!', 'info');
|
||||
};
|
||||
|
||||
loadCases();
|
||||
}
|
||||
|
||||
@@ -293,12 +730,28 @@ async function initReports() {
|
||||
});
|
||||
}
|
||||
|
||||
async function loadCases() {
|
||||
const article = document.getElementById('search-input').value;
|
||||
const status = document.getElementById('status-filter').value;
|
||||
const platform = document.getElementById('platform-filter').value;
|
||||
|
||||
const tbody = document.querySelector('#cases-table tbody');
|
||||
async function loadDashboard() {
|
||||
// Update counters
|
||||
document.getElementById('stat-cases').innerText = data.total_cases;
|
||||
document.getElementById('stat-integrations').innerText = data.total_integrations;
|
||||
document.getElementById('stat-sales').innerText = `${data.total_sales.toLocaleString()} ₽`;
|
||||
|
||||
// Update stores table (multi-account)
|
||||
const storesTbody = document.querySelector('#stores-table tbody');
|
||||
storesTbody.innerHTML = '';
|
||||
data.stores.forEach(s => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td><strong>${s.name}</strong></td>
|
||||
<td><span style="text-transform: uppercase;">${s.platform}</span></td>
|
||||
<td><span class="status-pill status-closed" style="background: rgba(16, 185, 129, 0.1); color: #34d399;">● Online</span></td>
|
||||
<td>${s.daily_sales.toLocaleString()} ₽</td>
|
||||
`;
|
||||
storesTbody.appendChild(tr);
|
||||
});
|
||||
|
||||
// Update Activity Table
|
||||
const tbody = document.querySelector('#recent-activity-table tbody');
|
||||
tbody.innerHTML = '<tr><td colspan="6">Загрузка...</td></tr>';
|
||||
|
||||
try {
|
||||
@@ -312,19 +765,22 @@ async function loadCases() {
|
||||
cases.forEach(c => {
|
||||
const tr = document.createElement('tr');
|
||||
const pName = PLATFORMS.find(p => p.id === c.platform)?.name || c.platform;
|
||||
const statusClass = c.status === 'new' ? 'status-new' : (c.status === 'closed' ? 'status-closed' : '');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>${c.id}</td>
|
||||
<td>#${c.id}</td>
|
||||
<td><strong>${pName}</strong></td>
|
||||
<td>${c.violator_article}</td>
|
||||
<td>${c.status}</td>
|
||||
<td>${new Date(c.created_at).toLocaleString()}</td>
|
||||
<td><code>${c.violator_article}</code></td>
|
||||
<td><span class="status-pill ${statusClass}">${c.status}</span></td>
|
||||
<td>${new Date(c.created_at).toLocaleDateString()}</td>
|
||||
<td>
|
||||
<button class="btn-secondary" onclick="window.viewCase(${c.id})">Просмотр</button>
|
||||
<button class="btn-secondary" onclick="window.deleteCase(${c.id})">Удалить</button>
|
||||
<button class="btn-secondary" style="padding: 0.4rem 0.8rem; font-size: 0.8rem;" onclick="window.viewCase(${c.id})">Открыть</button>
|
||||
<button class="btn-secondary" style="padding: 0.4rem 0.8rem; font-size: 0.8rem; color: var(--color-error);" onclick="window.deleteCase(${c.id})">Удалить</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
if (window.lucide) lucide.createIcons();
|
||||
} catch (err) {
|
||||
tbody.innerHTML = '<tr><td colspan="6">Ошибка сети</td></tr>';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user