feat: initialize full-stack architecture with backend routes, database schema, and glassmorphic frontend UI

This commit is contained in:
2026-05-13 00:12:19 +03:00
parent bd73f18d5c
commit 0732acbda5
21 changed files with 1937 additions and 307 deletions

View File

@@ -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>';
}