feat: implement core backend API structure and frontend service layer for case management and authentication

2026-05-12 15:41:57 +03:00
parent ee39a3d83b
commit bd73f18d5c
13 changed files with 718 additions and 63 deletions
--- a/frontend/css/styles.css
+++ b/frontend/css/styles.css
@@ -241,3 +241,31 @@ label textarea {
  background: rgba(0,0,0,0.2);
  color: #fff;
 }
+
+.auth-box {
+  max-width: 400px;
+  margin: 4rem auto;
+  padding: 2rem;
+  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);
+  color: #fff;
+}
+
+.auth-box a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+.auth-box a:hover {
+  text-decoration: underline;
+}
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,17 +9,92 @@
 </head>
 <body>
    <header class="header">
-        <h1>AutoMarket</h1>
-        <p>Управление жалобами и интеграциями для 10 маркетплейсов</p>
+        <div style="display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto;">
+            <div>
+                <h1>AutoMarket</h1>
+                <p>Управление жалобами и интеграциями для 10 маркетплейсов</p>
+            </div>
+            <div id="user-info" class="hidden">
+                <span id="username-display" style="margin-right: 1rem;"></span>
+                <button id="logout-btn" class="btn-secondary">Выйти</button>
+            </div>
+        </div>
    </header>

-    <div class="tabs-container">
-        <button class="tab-btn active" data-target="cases-section">Список жалоб</button>
-        <button class="tab-btn" data-target="integrations-section">Настройки интеграций</button>
-    </div>
+    <!-- AUTH SECTION -->
+    <main id="auth-section" class="container">
+        <div class="auth-box">
+            <h2 id="auth-title">Вход в систему</h2>
+            <form id="auth-form">
+                <input type="text" id="auth-username" placeholder="Логин" required />
+                <input type="password" id="auth-password" placeholder="Пароль" required />
+                <button type="submit" class="btn-primary" style="width: 100%; margin-top: 1rem;">Войти</button>
+            </form>
+            <p style="margin-top: 1rem; text-align: center;">
+                <a href="#" id="auth-toggle">Нет аккаунта? Зарегистрироваться</a>
+            </p>
+        </div>
+    </main>

-    <main class="container">
+    <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>
+        </div>
+
+        <main class="container">
        
+        <!-- Dashboard Section -->
+        <section id="dashboard-section" class="section">
+            <h2>Сводная статистика</h2>
+            <div id="stats-grid" class="platforms-grid">
+                <!-- Stats cards will be here -->
+            </div>
+            <div class="section" style="margin-top: 2rem;">
+                <h3>Последняя активность</h3>
+                <table id="recent-activity-table" class="table">
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Площадка</th>
+                            <th>Артикул</th>
+                            <th>Статус</th>
+                            <th>Дата</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+        </section>
+        
+        <!-- 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="platform-card">
+                    <h3>Тариф FREE</h3>
+                    <p class="status">Активен по умолчанию</p>
+                    <ul>
+                        <li>Подключение: Максимум 1 маркетплейс</li>
+                        <li>Базовая поддержка</li>
+                    </ul>
+                    <button class="btn-secondary" disabled style="margin-top:1rem; width:100%;">Уже активирован</button>
+                </div>
+                <div class="platform-card" style="border-color: var(--color-primary);">
+                    <h3 style="color: var(--color-primary);">Тариф PRO</h3>
+                    <p class="status" style="color: var(--color-primary);">Рекомендуемый</p>
+                    <ul>
+                        <li>Подключение: До 10 маркетплейсов</li>
+                        <li>Безлимитное создание жалоб</li>
+                        <li>Приоритетная поддержка</li>
+                    </ul>
+                    <button id="upgrade-btn" class="btn-primary" style="margin-top:1rem; width:100%;">Купить за 990₽</button>
+                </div>
+            </div>
+        </section>
+
        <!-- Integrations List -->
        <section id="integrations-section" class="section hidden">
            <h2>Доступные маркетплейсы</h2>
@@ -54,6 +129,7 @@
                    <option value="closed">Закрыт</option>
                </select>
                <button id="new-case-btn" class="btn-primary">+ Новый кейс</button>
+                <button id="export-csv-btn" class="btn-secondary">⬇ Экспорт CSV</button>
            </div>
            <table id="cases-table" class="table">
                <thead>
@@ -119,11 +195,15 @@

        <!-- Case detail -->
        <section id="case-detail-section" class="section hidden">
-            <h2>Детали кейса</h2>
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+                <h2>Детали кейса</h2>
+                <button id="download-pdf-btn" class="btn-primary">📄 Скачать PDF-претензию</button>
+            </div>
            <div id="case-detail"></div>
            <button id="back-to-list" class="btn-secondary">← Назад к списку</button>
        </section>
-    </main>
+        </main>
+    </div>

    <script type="module" src="js/app.js"></script>
 </body>
--- a/frontend/js/api.js
+++ b/frontend/js/api.js
@@ -1,39 +1,101 @@
 // frontend/js/api.js
-// Base URL for backend API (adjust if using different host/port)
 const API_BASE = "http://localhost:5000/api";

+function getHeaders() {
+  const token = localStorage.getItem('token');
+  const headers = { "Content-Type": "application/json" };
+  if (token) headers["Authorization"] = `Bearer ${token}`;
+  return headers;
+}
+
+async function handleResponse(res) {
+  if (res.status === 401) {
+      localStorage.removeItem('token');
+      window.location.reload();
+  }
+  const data = await res.json();
+  if (!res.ok) throw new Error(data.error || data.message || 'API Error');
+  return data;
+}
+
+export async function login(username, password) {
+  const res = await fetch(`${API_BASE}/auth/login`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ username, password }),
+  });
+  return await handleResponse(res);
+}
+
+export async function register(username, password) {
+  const res = await fetch(`${API_BASE}/auth/register`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ username, password }),
+  });
+  return await handleResponse(res);
+}
+
+export async function getMe() {
+  const res = await fetch(`${API_BASE}/auth/me`, { headers: getHeaders() });
+  return await handleResponse(res);
+}
+
+export async function upgradePlan() {
+  const res = await fetch(`${API_BASE}/auth/upgrade`, {
+    method: "POST",
+    headers: getHeaders()
+  });
+  return await handleResponse(res);
+}
+
+export async function getDashboardStats() {
+  const res = await fetch(`${API_BASE}/dashboard/stats`, { headers: getHeaders() });
+  return await handleResponse(res);
+}
+
+export function getCaseReportPdfUrl(caseId) {
+    const token = localStorage.getItem('token');
+    return `${API_BASE}/reports/case/${caseId}/pdf?token=${token}`; 
+}
+
+export function getExportCsvUrl() {
+    const token = localStorage.getItem('token');
+    return `${API_BASE}/reports/cases/csv?token=${token}`;
+}
+
 export async function fetchCases(params = {}) {
  const query = new URLSearchParams(params).toString();
-  const res = await fetch(`${API_BASE}/cases${query ? `?${query}` : ''}`);
-  return await res.json();
+  const res = await fetch(`${API_BASE}/cases${query ? `?${query}` : ''}`, { headers: getHeaders() });
+  return await handleResponse(res);
 }

 export async function createCase(data) {
  const res = await fetch(`${API_BASE}/cases`, {
    method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: getHeaders(),
    body: JSON.stringify(data),
  });
-  return await res.json();
+  return await handleResponse(res);
 }

 export async function getCase(id) {
-  const res = await fetch(`${API_BASE}/cases/${id}`);
-  return await res.json();
+  const res = await fetch(`${API_BASE}/cases/${id}`, { headers: getHeaders() });
+  return await handleResponse(res);
 }

 export async function updateCase(id, data) {
  const res = await fetch(`${API_BASE}/cases/${id}`, {
    method: "PUT",
-    headers: { "Content-Type": "application/json" },
+    headers: getHeaders(),
    body: JSON.stringify(data),
  });
-  return await res.json();
+  return await handleResponse(res);
 }

 export async function deleteCase(id) {
-  const res = await fetch(`${API_BASE}/cases/${id}`, { method: "DELETE" });
-  return await res.json();
+  const res = await fetch(`${API_BASE}/cases/${id}`, { method: "DELETE", headers: getHeaders() });
+  return await handleResponse(res);
 }

 export async function uploadFiles(caseId, fileList) {
@@ -41,29 +103,32 @@ export async function uploadFiles(caseId, fileList) {
  for (const f of fileList) {
    form.append("files", f);
  }
+  const headers = getHeaders();
+  delete headers["Content-Type"]; // let browser set boundary
  const res = await fetch(`${API_BASE}/cases/${caseId}/files`, {
    method: "POST",
+    headers: headers,
    body: form,
  });
-  return await res.json();
+  return await handleResponse(res);
 }

 export async function listFiles(caseId) {
-  const res = await fetch(`${API_BASE}/cases/${caseId}/files`);
-  return await res.json();
+  const res = await fetch(`${API_BASE}/cases/${caseId}/files`, { headers: getHeaders() });
+  return await handleResponse(res);
 }

 export async function getConfiguredPlatforms() {
-  const res = await fetch(`${API_BASE}/credentials`);
-  const data = await res.json();
+  const res = await fetch(`${API_BASE}/credentials`, { headers: getHeaders() });
+  const data = await handleResponse(res);
  return data.configured_platforms || [];
 }

 export async function saveCredentials(platform, data) {
  const res = await fetch(`${API_BASE}/credentials/${platform}`, {
    method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: getHeaders(),
    body: JSON.stringify(data),
  });
-  return await res.json();
+  return await handleResponse(res);
 }
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -14,15 +14,156 @@ const PLATFORMS = [
    { id: 'flowwow', name: 'Flowwow' }
 ];

-document.addEventListener("DOMContentLoaded", () => {
+let currentUser = null;
+
+document.addEventListener("DOMContentLoaded", async () => {
+    initAuth();
+    initReports();
+    
+    // Check if logged in
+    const token = localStorage.getItem('token');
+    if (token) {
+        try {
+            currentUser = await api.getMe();
+            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();
+        } catch (e) {
+            showAuth();
+        }
+    } else {
+        showAuth();
+    }
+});
+
+let isLoginMode = true;
+function initAuth() {
+    const authForm = document.getElementById('auth-form');
+    const toggleBtn = document.getElementById('auth-toggle');
+    const title = document.getElementById('auth-title');
+    const logoutBtn = document.getElementById('logout-btn');
+    
+    toggleBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        isLoginMode = !isLoginMode;
+        title.textContent = isLoginMode ? 'Вход в систему' : 'Регистрация';
+        toggleBtn.textContent = isLoginMode ? 'Нет аккаунта? Зарегистрироваться' : 'Уже есть аккаунт? Войти';
+    });
+    
+    authForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const username = document.getElementById('auth-username').value;
+        const password = document.getElementById('auth-password').value;
+        try {
+            if (isLoginMode) {
+                const res = await api.login(username, password);
+                localStorage.setItem('token', res.token);
+            } else {
+                await api.register(username, password);
+                alert('Регистрация успешна! Теперь вы можете войти.');
+                isLoginMode = true;
+                title.textContent = 'Вход в систему';
+                toggleBtn.textContent = 'Нет аккаунта? Зарегистрироваться';
+                return;
+            }
+            window.location.reload();
+        } catch (err) {
+            alert(err.message);
+        }
+    });
+
+    logoutBtn.addEventListener('click', () => {
+        localStorage.removeItem('token');
+        window.location.reload();
+    });
+}
+
+function showAuth() {
+    document.getElementById('auth-section').classList.remove('hidden');
+    document.getElementById('main-app').classList.add('hidden');
+    document.getElementById('user-info').classList.add('hidden');
+}
+
+function showApp() {
+    document.getElementById('auth-section').classList.add('hidden');
+    document.getElementById('main-app').classList.remove('hidden');
+    document.getElementById('user-info').classList.remove('hidden');
    initTabs();
    initCases();
    initIntegrations();
-});
+    initBilling();
+    initDashboard();
+}
+
+function initDashboard() {
+    loadDashboard();
+}
+
+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 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);
+        });
+    } catch (e) {
+        console.error(e);
+    }
+}
+
+function initBilling() {
+    document.getElementById('current-plan-display').textContent = currentUser.plan.toUpperCase();
+    
+    document.getElementById('upgrade-btn').addEventListener('click', async () => {
+        if(currentUser.plan === 'pro') {
+            alert('У вас уже тариф PRO!');
+            return;
+        }
+        
+        if(confirm('Перейти на PRO тариф (симуляция оплаты)?')) {
+            try {
+                await api.upgradePlan();
+                alert('Оплата прошла успешно! Вы теперь PRO.');
+                window.location.reload();
+            } catch (err) {
+                alert(err.message);
+            }
+        }
+    });
+}

 function initTabs() {
    const btns = document.querySelectorAll('.tab-btn');
-    const sections = ['cases-section', 'integrations-section'];
+    const sections = ['dashboard-section', 'cases-section', 'integrations-section', 'billing-section'];
    
    btns.forEach(btn => {
        btn.addEventListener('click', () => {
@@ -31,12 +172,14 @@ function initTabs() {
            
            const target = btn.dataset.target;
            sections.forEach(s => {
-                document.getElementById(s).classList.add('hidden');
+                const el = document.getElementById(s);
+                if (el) el.classList.add('hidden');
            });
            document.getElementById(target).classList.remove('hidden');
            document.getElementById('case-form-section').classList.add('hidden');
            document.getElementById('case-detail-section').classList.add('hidden');
            
+            if(target === 'dashboard-section') loadDashboard();
            if(target === 'cases-section') loadCases();
            if(target === 'integrations-section') loadIntegrations();
        });
@@ -71,9 +214,13 @@ async function loadIntegrations() {
                e.preventDefault();
                const formData = new FormData(e.target);
                const data = Object.fromEntries(formData);
-                await api.saveCredentials(p.id, data);
-                alert(`Настройки для ${p.name} сохранены!`);
-                loadIntegrations();
+                try {
+                    await api.saveCredentials(p.id, data);
+                    alert(`Настройки для ${p.name} сохранены!`);
+                    loadIntegrations();
+                } catch(err) {
+                    alert(err.message);
+                }
            });
            
            grid.appendChild(card);
@@ -130,9 +277,22 @@ async function initCases() {
        }
    });

+    document.getElementById('export-csv-btn').addEventListener('click', () => {
+        window.location.href = api.getExportCsvUrl();
+    });
+
    loadCases();
 }

+let currentViewCaseId = null;
+async function initReports() {
+    document.getElementById('download-pdf-btn').addEventListener('click', () => {
+        if (currentViewCaseId) {
+            window.location.href = api.getCaseReportPdfUrl(currentViewCaseId);
+        }
+    });
+}
+
 async function loadCases() {
    const article = document.getElementById('search-input').value;
    const status = document.getElementById('status-filter').value;
@@ -171,6 +331,7 @@ async function loadCases() {
 }

 window.viewCase = async function(id) {
+    currentViewCaseId = id;
    document.getElementById('cases-section').classList.add('hidden');
    const detailSection = document.getElementById('case-detail-section');
    detailSection.classList.remove('hidden');