ваше сообщение коммита

2025-06-19 20:19:09 +03:00
parent 90a088e021
commit f728c5f5da
24 changed files with 512 additions and 183 deletions
--- a/backend/app.js
+++ b/backend/app.js
@@ -141,6 +141,18 @@ app.use(async (req, res, next) => {
  next();
 });

+// Middleware для подстановки req.user из сессии
+app.use((req, res, next) => {
+  if (req.session && req.session.userId) {
+    req.user = {
+      id: req.session.userId,
+      isAdmin: req.session.isAdmin,
+      address: req.session.address,
+    };
+  }
+  next();
+});
+
 // Настройка парсеров
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
--- a/backend/db.js
+++ b/backend/db.js
@@ -34,8 +34,12 @@ function getPool() {
  return pool;
 }

+function query(text, params) {
+  return pool.query(text, params);
+}
+
 function getQuery() {
-  return pool.query.bind(pool);
+  return (...args) => pool.query(...args);
 }

 let poolChangeCallback = null;
@@ -77,8 +81,6 @@ if (process.env.NODE_ENV !== 'migration') {
  reinitPoolFromDbSettings();
 }

-const query = (text, params) => pool.query(text, params);
-
 // Функция для сохранения гостевого сообщения в базе данных
 async function saveGuestMessageToDatabase(message, language, guestId) {
  try {
@@ -97,4 +99,4 @@ async function saveGuestMessageToDatabase(message, language, guestId) {
 }

 // Экспортируем функции для работы с базой данных
-module.exports = { query: pool.query.bind(pool), getQuery, pool, getPool, setPoolChangeCallback };
+module.exports = { query, getQuery, pool, getPool, setPoolChangeCallback };
--- a/backend/db/migrations/035_admin_read_messages.sql
+++ b/backend/db/migrations/035_admin_read_messages.sql
@@ -0,0 +1,6 @@
+CREATE TABLE IF NOT EXISTS admin_read_messages (
+  admin_id INTEGER NOT NULL,
+  user_id INTEGER NOT NULL,
+  last_read_at TIMESTAMP NOT NULL,
+  PRIMARY KEY (admin_id, user_id)
+); 
--- a/backend/db/migrations/036_admin_read_contacts.sql
+++ b/backend/db/migrations/036_admin_read_contacts.sql
@@ -0,0 +1,6 @@
+CREATE TABLE IF NOT EXISTS admin_read_contacts (
+  admin_id INTEGER NOT NULL,
+  contact_id INTEGER NOT NULL,
+  read_at TIMESTAMP NOT NULL DEFAULT NOW(),
+  PRIMARY KEY (admin_id, contact_id)
+); 
--- a/backend/routes/messages.js
+++ b/backend/routes/messages.js
@@ -1,6 +1,7 @@
 const express = require('express');
 const router = express.Router();
 const db = require('../db');
+const { broadcastMessagesUpdate } = require('../wsHub');

 // GET /api/messages?userId=123
 router.get('/', async (req, res) => {
@@ -28,4 +29,71 @@ router.get('/', async (req, res) => {
  }
 });

+// POST /api/messages
+router.post('/', async (req, res) => {
+  const { user_id, sender_type, content, channel, role, direction, attachment_filename, attachment_mimetype, attachment_size, attachment_data, metadata } = req.body;
+  try {
+    const result = await db.getQuery()(
+      `INSERT INTO messages (user_id, sender_type, content, channel, role, direction, created_at, attachment_filename, attachment_mimetype, attachment_size, attachment_data, metadata)
+       VALUES ($1,$2,$3,$4,$5,$6,NOW(),$7,$8,$9,$10,$11) RETURNING *`,
+      [user_id, sender_type, content, channel, role, direction, attachment_filename, attachment_mimetype, attachment_size, attachment_data, metadata]
+    );
+    broadcastMessagesUpdate();
+    res.json({ success: true, message: result.rows[0] });
+  } catch (e) {
+    res.status(500).json({ error: 'DB error', details: e.message });
+  }
+});
+
+// POST /api/messages/mark-read
+router.post('/mark-read', async (req, res) => {
+  try {
+    console.log('[DEBUG] /mark-read req.user:', req.user);
+    console.log('[DEBUG] /mark-read req.body:', req.body);
+    const adminId = req.user && req.user.id;
+    const { userId, lastReadAt } = req.body;
+    if (!adminId) {
+      console.error('[ERROR] /mark-read: adminId (req.user.id) is missing');
+      return res.status(401).json({ error: 'Unauthorized: adminId missing' });
+    }
+    if (!userId || !lastReadAt) {
+      console.error('[ERROR] /mark-read: userId or lastReadAt missing');
+      return res.status(400).json({ error: 'userId and lastReadAt required' });
+    }
+    await db.query(`
+      INSERT INTO admin_read_messages (admin_id, user_id, last_read_at)
+      VALUES ($1, $2, $3)
+      ON CONFLICT (admin_id, user_id) DO UPDATE SET last_read_at = EXCLUDED.last_read_at
+    `, [adminId, userId, lastReadAt]);
+    res.json({ success: true });
+  } catch (e) {
+    console.error('[ERROR] /mark-read:', e);
+    res.status(500).json({ error: e.message });
+  }
+});
+
+// GET /api/messages/read-status
+router.get('/read-status', async (req, res) => {
+  try {
+    console.log('[DEBUG] /read-status req.user:', req.user);
+    console.log('[DEBUG] /read-status req.session:', req.session);
+    console.log('[DEBUG] /read-status req.session.userId:', req.session && req.session.userId);
+    const adminId = req.user && req.user.id;
+    if (!adminId) {
+      console.error('[ERROR] /read-status: adminId (req.user.id) is missing');
+      return res.status(401).json({ error: 'Unauthorized: adminId missing' });
+    }
+    const result = await db.query('SELECT user_id, last_read_at FROM admin_read_messages WHERE admin_id = $1', [adminId]);
+    console.log('[DEBUG] /read-status SQL result:', result.rows);
+    const map = {};
+    for (const row of result.rows) {
+      map[row.user_id] = row.last_read_at;
+    }
+    res.json(map);
+  } catch (e) {
+    console.error('[ERROR] /read-status:', e);
+    res.status(500).json({ error: e.message });
+  }
+});
+
 module.exports = router; 
--- a/backend/routes/users.js
+++ b/backend/routes/users.js
@@ -99,6 +99,43 @@ router.get('/', async (req, res) => {
 });
 */

+// Получить просмотренные контакты
+router.get('/read-contacts-status', async (req, res) => {
+  try {
+    const adminId = req.user && req.user.id;
+    if (!adminId) {
+      return res.status(401).json({ error: 'Unauthorized: adminId missing' });
+    }
+    const result = await db.query(
+      'SELECT contact_id FROM admin_read_contacts WHERE admin_id = $1',
+      [adminId]
+    );
+    res.json(result.rows.map(r => r.contact_id));
+  } catch (e) {
+    console.error('[ERROR] /read-contacts-status:', e);
+    res.status(500).json({ error: e.message });
+  }
+});
+
+// Пометить контакт как просмотренный
+router.post('/mark-contact-read', async (req, res) => {
+  try {
+    const adminId = req.user && req.user.id;
+    const { contactId } = req.body;
+    if (!adminId || !contactId) {
+      return res.status(400).json({ error: 'adminId and contactId required' });
+    }
+    await db.query(
+      'INSERT INTO admin_read_contacts (admin_id, contact_id, read_at) VALUES ($1, $2, NOW()) ON CONFLICT (admin_id, contact_id) DO UPDATE SET read_at = NOW()',
+      [adminId, contactId]
+    );
+    res.json({ success: true });
+  } catch (e) {
+    console.error('[ERROR] /mark-contact-read:', e);
+    res.status(500).json({ error: e.message });
+  }
+});
+
 // PATCH /api/users/:id — обновить имя и язык
 router.patch('/:id', async (req, res) => {
  const userId = req.params.id;
@@ -180,4 +217,20 @@ router.get('/:id', async (req, res, next) => {
  }
 });

+// POST /api/users
+router.post('/', async (req, res) => {
+  const { first_name, last_name, preferred_language } = req.body;
+  try {
+    const result = await db.getQuery()(
+      `INSERT INTO users (first_name, last_name, preferred_language, created_at)
+       VALUES ($1, $2, $3, NOW()) RETURNING *`,
+      [first_name, last_name, JSON.stringify(preferred_language || [])]
+    );
+    broadcastContactsUpdate();
+    res.json({ success: true, user: result.rows[0] });
+  } catch (e) {
+    res.status(500).json({ error: 'DB error', details: e.message });
+  }
+});
+
 module.exports = router;
--- a/backend/services/auth-service.js
+++ b/backend/services/auth-service.js
@@ -9,6 +9,7 @@ const authTokenService = require('./authTokenService');
 const rpcProviderService = require('./rpcProviderService');
 const { getLinkedWallet } = require('./wallet-service');
 const { checkAdminRole } = require('./admin-role');
+const { broadcastContactsUpdate } = require('../wsHub');

 const ERC20_ABI = ['function balanceOf(address owner) view returns (uint256)'];

@@ -102,6 +103,8 @@ class AuthService {
        );
      }

+      broadcastContactsUpdate();
+
      return { userId, isAdmin };
    } catch (error) {
      logger.error('Error finding or creating user:', error);
@@ -743,6 +746,8 @@ class AuthService {
      delete session.tempUserId;
      delete session.pendingEmail;

+      broadcastContactsUpdate();
+
      return {
        userId,
        email: normalizedEmail,
--- a/backend/services/emailAuth.js
+++ b/backend/services/emailAuth.js
@@ -5,6 +5,7 @@ const EmailBotService = require('./emailBot.js');
 const db = require('../db');
 const authService = require('./auth-service');
 const { checkAdminRole } = require('./admin-role');
+const { broadcastContactsUpdate } = require('../wsHub');

 class EmailAuth {
  constructor() {
@@ -65,6 +66,9 @@ class EmailAuth {
        `Generated verification code for Email auth for ${email} and sent to user's email`
      );

+      // После каждого успешного создания пользователя:
+      broadcastContactsUpdate();
+
      return { success: true, verificationCode };
    } catch (error) {
      logger.error('Error in email auth initialization:', error);
@@ -201,6 +205,9 @@ class EmailAuth {
        delete session.tempUserId;
      }

+      // После каждого успешного создания пользователя:
+      broadcastContactsUpdate();
+
      return {
        verified: true,
        userId: finalUserId,
--- a/backend/services/emailBot.js
+++ b/backend/services/emailBot.js
@@ -8,6 +8,7 @@ const { inspect } = require('util');
 const logger = require('../utils/logger');
 const identityService = require('./identity-service');
 const aiAssistant = require('./ai-assistant');
+const { broadcastContactsUpdate } = require('../wsHub');

 class EmailBotService {
  constructor() {
@@ -172,6 +173,8 @@ class EmailBotService {
                      );
                      // 5. Отправить ответ на email
                      await this.sendEmail(fromEmail, 'Re: ' + subject, aiResponse);
+                      // После каждого успешного создания пользователя:
+                      broadcastContactsUpdate();
                    } catch (processErr) {
                      logger.error('Error processing incoming email:', processErr);
                    }
--- a/backend/services/identity-service.js
+++ b/backend/services/identity-service.js
@@ -544,6 +544,7 @@ class IdentityService {
      await this.saveIdentity(userId, provider, providerId, true);
      user = { id: userId, role: 'user' };
      isNew = true;
+      logger.info('[WS] broadcastContactsUpdate after new user created');
      broadcastContactsUpdate();
    }
    // Проверяем связь с кошельком
--- a/backend/services/telegramBot.js
+++ b/backend/services/telegramBot.js
@@ -7,6 +7,7 @@ const crypto = require('crypto');
 const identityService = require('./identity-service');
 const aiAssistant = require('./ai-assistant');
 const { checkAdminRole } = require('./admin-role');
+const { broadcastContactsUpdate } = require('../wsHub');

 let botInstance = null;
 let telegramSettingsCache = null;
@@ -252,6 +253,9 @@ async function getBot() {
          } catch (error) {
            logger.warn('Could not delete code message:', error);
          }
+
+          // После каждого успешного создания пользователя:
+          broadcastContactsUpdate();
        } catch (error) {
          logger.error('Error in Telegram auth:', error);
          await ctx.reply('Произошла ошибка при аутентификации. Попробуйте позже.');
--- a/backend/wsHub.js
+++ b/backend/wsHub.js
@@ -19,4 +19,12 @@ function broadcastContactsUpdate() {
  }
 }

-module.exports = { initWSS, broadcastContactsUpdate }; 
+function broadcastMessagesUpdate() {
+  for (const ws of wsClients) {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'messages-updated' }));
+    }
+  }
+}
+
+module.exports = { initWSS, broadcastContactsUpdate, broadcastMessagesUpdate }; 
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -176,8 +176,8 @@ onMounted(() => {
  if (savedSidebarState !== null) {
    showWalletSidebar.value = savedSidebarState;
  } else {
-    showWalletSidebar.value = true;
-    setToStorage('showWalletSidebar', true);
+    showWalletSidebar.value = false; // по умолчанию закрыт
+    setToStorage('showWalletSidebar', false);
  }
 });
 </script>
--- a/frontend/src/components/ContactTable.vue
+++ b/frontend/src/components/ContactTable.vue
@@ -4,6 +4,17 @@
      <h2>Контакты</h2>
      <button class="close-btn" @click="$emit('close')">×</button>
    </div>
+    <div class="filters-panel">
+      <input v-model="filterName" placeholder="Имя" />
+      <input v-model="filterEmail" placeholder="Email" />
+      <input v-model="filterTelegram" placeholder="Telegram" />
+      <input v-model="filterWallet" placeholder="Кошелек" />
+      <input v-model="filterDateFrom" type="date" placeholder="Дата от" />
+      <input v-model="filterDateTo" type="date" placeholder="Дата до" />
+      <label class="checkbox-label">
+        <input type="checkbox" v-model="filterOnlyNewMessages" /> Только с новыми сообщениями
+      </label>
+    </div>
    <table class="contact-table">
      <thead>
        <tr>
@@ -16,13 +27,14 @@
        </tr>
      </thead>
      <tbody>
-        <tr v-for="contact in contacts" :key="contact.id">
+        <tr v-for="contact in filteredContactsArray" :key="contact.id" :class="{ 'new-contact-row': newIds.includes(contact.id) }">
          <td>{{ contact.name || '-' }}</td>
          <td>{{ contact.email || '-' }}</td>
          <td>{{ contact.telegram || '-' }}</td>
          <td>{{ contact.wallet || '-' }}</td>
-          <td>{{ formatDate(contact.created_at) }}</td>
+          <td>{{ contact.created_at ? new Date(contact.created_at).toLocaleString() : '-' }}</td>
          <td>
+            <span v-if="newMsgUserIds.includes(String(contact.id))" class="new-msg-icon" title="Новое сообщение">✉️</span>
            <button class="details-btn" @click="showDetails(contact)">Подробнее</button>
          </td>
        </tr>
@@ -32,17 +44,58 @@
 </template>

 <script setup>
-import { defineProps } from 'vue';
+import { defineProps, computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 const props = defineProps({
-  contacts: { type: Array, required: true }
+  contacts: { type: Array, default: () => [] },
+  newContacts: { type: Array, default: () => [] },
+  newMessages: { type: Array, default: () => [] },
+  markMessagesAsReadForUser: { type: Function, default: null },
+  markContactAsRead: { type: Function, default: null }
 });
+const contactsArray = computed(() => Array.from(props.contacts || []));
+const newIds = computed(() => props.newContacts.map(c => c.id));
+const newMsgUserIds = computed(() => props.newMessages.map(m => String(m.user_id)));
 const router = useRouter();
+
+// Фильтры
+const filterName = ref('');
+const filterEmail = ref('');
+const filterTelegram = ref('');
+const filterWallet = ref('');
+const filterDateFrom = ref('');
+const filterDateTo = ref('');
+const filterOnlyNewMessages = ref(false);
+
+const filteredContactsArray = computed(() => {
+  return contactsArray.value.filter(contact => {
+    const nameMatch = !filterName.value || (contact.name || '').toLowerCase().includes(filterName.value.toLowerCase());
+    const emailMatch = !filterEmail.value || (contact.email || '').toLowerCase().includes(filterEmail.value.toLowerCase());
+    const telegramMatch = !filterTelegram.value || (contact.telegram || '').toLowerCase().includes(filterTelegram.value.toLowerCase());
+    const walletMatch = !filterWallet.value || (contact.wallet || '').toLowerCase().includes(filterWallet.value.toLowerCase());
+    let dateFromMatch = true, dateToMatch = true;
+    if (filterDateFrom.value && contact.created_at) {
+      dateFromMatch = new Date(contact.created_at) >= new Date(filterDateFrom.value);
+    }
+    if (filterDateTo.value && contact.created_at) {
+      dateToMatch = new Date(contact.created_at) <= new Date(filterDateTo.value);
+    }
+    const newMsgMatch = !filterOnlyNewMessages.value || newMsgUserIds.value.includes(String(contact.id));
+    return nameMatch && emailMatch && telegramMatch && walletMatch && dateFromMatch && dateToMatch && newMsgMatch;
+  });
+});
+
 function formatDate(date) {
  if (!date) return '-';
  return new Date(date).toLocaleString();
 }
-function showDetails(contact) {
+async function showDetails(contact) {
+  if (props.markContactAsRead) {
+    await props.markContactAsRead(contact.id);
+  }
+  if (props.markMessagesAsReadForUser) {
+    props.markMessagesAsReadForUser(contact.id);
+  }
  router.push({ name: 'contact-details', params: { id: contact.id } });
 }
 </script>
@@ -144,4 +197,35 @@ function showDetails(contact) {
 .details-btn:hover {
  background: #138496;
 }
+.new-contact-row {
+  background: #e6ffe6 !important;
+  transition: background 0.3s;
+}
+.filters-panel {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 18px;
+  align-items: center;
+}
+.filters-panel input {
+  padding: 6px 10px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  font-size: 1em;
+  min-width: 110px;
+}
+.filters-panel input[type="checkbox"] {
+  margin-right: 4px;
+}
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  font-size: 0.98em;
+  user-select: none;
+}
+.new-msg-icon {
+  color: #ff9800;
+  font-size: 1.2em;
+  margin-left: 4px;
+}
 </style> 
--- a/frontend/src/composables/useContactsWebSocket.js
+++ b/frontend/src/composables/useContactsWebSocket.js
@@ -1,55 +1,150 @@
 import { ref, onMounted, onUnmounted } from 'vue';
 import { getContacts } from '../services/contactsService';
 import { getAllMessages } from '../services/messagesService';
+import axios from 'axios';

 export function useContactsAndMessagesWebSocket() {
  const contacts = ref([]);
  const messages = ref([]);
+  const readContacts = ref([]); // id просмотренных контактов
  const newContacts = ref([]);
  const newMessages = ref([]);
+  const readUserIds = ref([]);
+  const lastReadMessageDate = ref({});
  let ws = null;
-  let lastContactId = null;
-  let lastMessageId = null;
+  let lastMessageDate = null;
+
+  // Загружаем прочитанные userId из localStorage при инициализации
+  try {
+    const stored = localStorage.getItem('readUserIds');
+    if (stored) {
+      readUserIds.value = JSON.parse(stored);
+    }
+  } catch (e) {
+    readUserIds.value = [];
+  }
+
+  // Загружаем lastReadMessageDate из localStorage при инициализации
+  try {
+    const stored = localStorage.getItem('lastReadMessageDate');
+    if (stored) {
+      lastReadMessageDate.value = JSON.parse(stored);
+    }
+  } catch (e) {
+    lastReadMessageDate.value = {};
+  }

  async function fetchContacts() {
    const all = await getContacts();
    contacts.value = all;
-    if (lastContactId) {
-      newContacts.value = all.filter(c => c.id > lastContactId);
-    } else {
-      newContacts.value = [];
+    updateNewContacts();
+  }
+
+  async function fetchContactsReadStatus() {
+    try {
+      const { data } = await axios.get('/api/users/read-contacts-status');
+      readContacts.value = data || [];
+    } catch (e) {
+      readContacts.value = [];
+    }
+    updateNewContacts();
+  }
+
+  function updateNewContacts() {
+    if (!contacts.value.length) {
+      newContacts.value = [];
+      return;
+    }
+    newContacts.value = contacts.value.filter(c => !readContacts.value.includes(c.id));
+  }
+
+  async function markContactAsRead(contactId) {
+    try {
+      await axios.post('/api/users/mark-contact-read', { contactId });
+      if (!readContacts.value.includes(contactId)) {
+        readContacts.value.push(contactId);
+        updateNewContacts();
+      }
+    } catch (e) {}
+  }
+
+  async function fetchReadStatus() {
+    try {
+      const { data } = await axios.get('/api/messages/read-status');
+      lastReadMessageDate.value = data || {};
+    } catch (e) {
+      lastReadMessageDate.value = {};
    }
-    if (all.length) lastContactId = Math.max(...all.map(c => c.id));
  }

  async function fetchMessages() {
    const all = await getAllMessages();
    messages.value = all;
-    if (lastMessageId) {
-      newMessages.value = all.filter(m => m.id > lastMessageId);
-    } else {
-      newMessages.value = [];
-    }
-    if (all.length) lastMessageId = Math.max(...all.map(m => m.id));
+    filterNewMessages();
  }

-  onMounted(() => {
-    fetchContacts();
-    fetchMessages();
+  function markMessagesAsRead() {
+    if (messages.value.length) {
+      lastMessageDate = Math.max(...messages.value.map(m => new Date(m.created_at).getTime()));
+      newMessages.value = [];
+    }
+  }
+
+  async function markMessagesAsReadForUser(userId) {
+    // Найти максимальный created_at для сообщений этого пользователя
+    const userMessages = messages.value.filter(m => m.user_id === userId && m.sender_type === 'user');
+    if (userMessages.length) {
+      const maxDate = Math.max(...userMessages.map(m => new Date(m.created_at).getTime()));
+      const maxDateISO = new Date(maxDate).toISOString();
+      try {
+        await axios.post('/api/messages/mark-read', { userId, lastReadAt: maxDateISO });
+        lastReadMessageDate.value[userId] = maxDateISO;
+      } catch (e) {}
+    }
+    filterNewMessages();
+  }
+
+  function filterNewMessages() {
+    newMessages.value = messages.value.filter(m => {
+      if (m.sender_type !== 'user') return false;
+      const lastRead = lastReadMessageDate.value[m.user_id];
+      if (!lastRead) return true;
+      return new Date(m.created_at).getTime() > new Date(lastRead).getTime();
+    });
+  }
+
+  function setupWebSocket() {
    ws = new WebSocket('ws://localhost:8000');
    ws.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.type === 'contacts-updated') fetchContacts();
-        if (data.type === 'messages-updated') fetchMessages();
-      } catch (e) {}
+      const data = JSON.parse(event.data);
+      if (data.type === 'contacts-updated') {
+        fetchContacts();
+      }
+      if (data.type === 'messages-updated') {
+        fetchMessages();
+      }
    };
+  }
+
+  onMounted(async () => {
+    await fetchContactsReadStatus();
+    await fetchContacts();
+    await fetchReadStatus();
+    await fetchMessages();
+    setupWebSocket();
+  });
+  onUnmounted(() => {
+    if (ws) ws.close();
  });

-  onUnmounted(() => { if (ws) ws.close(); });
-
-  function markContactsAsRead() { newContacts.value = []; }
-  function markMessagesAsRead() { newMessages.value = []; }
-
-  return { contacts, messages, newContacts, newMessages, markContactsAsRead, markMessagesAsRead };
+  return {
+    contacts,
+    newContacts,
+    messages,
+    newMessages,
+    markContactAsRead,
+    markMessagesAsRead,
+    markMessagesAsReadForUser,
+    readUserIds
+  };
 } 
--- a/frontend/src/views/ContactsView.vue
+++ b/frontend/src/views/ContactsView.vue
@@ -1,19 +1,11 @@
 <template>
  <BaseLayout>
-    <div class="contacts-tabs">
-      <button :class="{active: tab==='all'}" @click="tab='all'">Все контакты</button>
-      <button :class="{active: tab==='newContacts'}" @click="tab='newContacts'; markContactsAsRead()">
-        Новые контакты
-        <span v-if="newContacts.length" class="badge">{{ newContacts.length }}</span>
-      </button>
-      <button :class="{active: tab==='newMessages'}" @click="tab='newMessages'; markMessagesAsRead()">
-        Новые сообщения
-        <span v-if="newMessages.length" class="badge">{{ newMessages.length }}</span>
-      </button>
+    <div class="contacts-header">
+      <span>Контакты</span>
+      <span v-if="newContacts.length" class="badge">+{{ newContacts.length }}</span>
    </div>
-    <ContactTable v-if="tab==='all'" :contacts="contacts" />
-    <ContactTable v-if="tab==='newContacts'" :contacts="newContacts" />
-    <MessagesTable v-if="tab==='newMessages'" :messages="newMessages" />
+    <ContactTable :contacts="contacts" :new-contacts="newContacts" :new-messages="newMessages" @markNewAsRead="markContactsAsRead" 
+      :markMessagesAsReadForUser="markMessagesAsReadForUser" :markContactAsRead="markContactAsRead" />
  </BaseLayout>
 </template>

@@ -22,13 +14,11 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import BaseLayout from '../components/BaseLayout.vue';
 import ContactTable from '../components/ContactTable.vue';
-import MessagesTable from '../components/MessagesTable.vue';
 import { useContactsAndMessagesWebSocket } from '../composables/useContactsWebSocket';

-const tab = ref('all');
 const {
  contacts, newContacts, newMessages,
-  markContactsAsRead, markMessagesAsRead
+  markContactsAsRead, markMessagesAsReadForUser, markContactAsRead
 } = useContactsAndMessagesWebSocket();
 const router = useRouter();

@@ -42,26 +32,13 @@ function goBack() {
 </script>

 <style scoped>
-.contacts-tabs {
+.contacts-header {
  display: flex;
+  align-items: center;
  gap: 12px;
-  margin-bottom: 24px;
-}
-.contacts-tabs button {
-  background: #f5f7fa;
-  border: none;
-  border-radius: 8px 8px 0 0;
-  padding: 10px 22px;
-  font-size: 1.08rem;
-  cursor: pointer;
-  position: relative;
-  transition: background 0.18s, color 0.18s;
-}
-.contacts-tabs button.active {
-  background: #fff;
-  color: #17a2b8;
+  font-size: 1.2rem;
  font-weight: 600;
-  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
+  margin-bottom: 24px;
 }
 .badge {
  background: #dc3545;
--- a/frontend/src/views/CrmView.vue
+++ b/frontend/src/views/CrmView.vue
@@ -95,7 +95,6 @@ function connectWebSocket() {

 // Функция для перехода на домашнюю страницу и открытия боковой панели
 const goToHomeAndShowSidebar = () => {
-  setToStorage('showWalletSidebar', true);
  router.push({ name: 'home' });
 };

--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -59,7 +59,6 @@ const handleAuthEvent = (eventData) => {
 };

 const goToHomeAndShowSidebar = () => {
-  setToStorage('showWalletSidebar', true);
  router.push({ name: 'home' });
 };

--- a/frontend/src/views/contacts/ContactDetailsView.vue
+++ b/frontend/src/views/contacts/ContactDetailsView.vue
@@ -1,103 +1,103 @@
 <template>
  <BaseLayout>
-    <div class="contact-details-page">
-      <div v-if="isLoading">Загрузка...</div>
-      <div v-else-if="!contact">Контакт не найден</div>
-      <div v-else class="contact-details-content">
-        <div class="contact-details-header">
-          <h2>Детали контакта</h2>
+  <div class="contact-details-page">
+    <div v-if="isLoading">Загрузка...</div>
+    <div v-else-if="!contact">Контакт не найден</div>
+    <div v-else class="contact-details-content">
+      <div class="contact-details-header">
+        <h2>Детали контакта</h2>
          <button class="close-btn" @click="goBack">×</button>
-        </div>
-        <div class="contact-info-block">
-          <div>
-            <strong>Имя:</strong>
-            <input v-model="editableName" class="edit-input" @blur="saveName" @keyup.enter="saveName" />
-            <span v-if="isSavingName" class="saving">Сохранение...</span>
-          </div>
-          <div><strong>Email:</strong> {{ contact.email || '-' }}</div>
-          <div><strong>Telegram:</strong> {{ contact.telegram || '-' }}</div>
-          <div><strong>Кошелек:</strong> {{ contact.wallet || '-' }}</div>
-          <div>
-            <strong>Язык:</strong>
-            <div class="multi-select">
-              <div class="selected-langs">
-                <span v-for="lang in selectedLanguages" :key="lang" class="lang-tag">
-                  {{ getLanguageLabel(lang) }}
-                  <span class="remove-tag" @click="removeLanguage(lang)">×</span>
-                </span>
-                <input
-                  v-model="langInput"
-                  @focus="showLangDropdown = true"
-                  @input="showLangDropdown = true"
-                  @keydown.enter.prevent="addLanguageFromInput"
-                  class="lang-input"
-                  placeholder="Добавить язык..."
-                />
-              </div>
-              <ul v-if="showLangDropdown" class="lang-dropdown">
-                <li
-                  v-for="lang in filteredLanguages"
-                  :key="lang.value"
-                  @mousedown.prevent="addLanguage(lang.value)"
-                  :class="{ selected: selectedLanguages.includes(lang.value) }"
-                >
-                  {{ lang.label }}
-                </li>
-              </ul>
-            </div>
-            <span v-if="isSavingLangs" class="saving">Сохранение...</span>
-          </div>
-          <div><strong>Дата создания:</strong> {{ formatDate(contact.created_at) }}</div>
-          <div><strong>Дата последнего сообщения:</strong> {{ formatDate(lastMessageDate) }}</div>
-          <div class="user-tags-block">
-            <strong>Теги пользователя:</strong>
-            <span v-for="tag in userTags" :key="tag.id" class="user-tag">
-              {{ tag.name }}
-              <span class="remove-tag" @click="removeUserTag(tag.id)">×</span>
-            </span>
-            <button class="add-tag-btn" @click="openTagModal">Добавить тег</button>
-          </div>
-          <button class="delete-btn" @click="deleteContact">Удалить контакт</button>
-        </div>
-        <div class="messages-block">
-          <h3>История сообщений</h3>
-          <div v-if="isLoadingMessages" class="loading">Загрузка...</div>
-          <div v-else-if="messages.length === 0" class="empty">Нет сообщений</div>
-          <div v-else class="messages-list">
-            <Message v-for="msg in messages" :key="msg.id" :message="msg" />
-          </div>
-        </div>
-        <el-dialog v-model="showTagModal" title="Добавить тег пользователю">
-          <div v-if="allTags.length">
-            <el-select
-              v-model="selectedTags"
-              multiple
-              filterable
-              placeholder="Выберите теги"
-              @change="addTagsToUser"
-            >
-              <el-option
-                v-for="tag in allTags"
-                :key="tag.id"
-                :label="tag.name"
-                :value="tag.id"
-              />
-            </el-select>
-            <div style="margin-top: 1em; color: #888; font-size: 0.95em;">
-              <strong>Существующие теги:</strong>
-              <span v-for="tag in allTags" :key="'list-' + tag.id" style="margin-right: 0.7em;">
-                {{ tag.name }}<span v-if="tag.description"> ({{ tag.description }})</span>
-              </span>
-            </div>
-          </div>
-          <div style="margin-top: 1em;">
-            <el-input v-model="newTagName" placeholder="Новый тег" />
-            <el-input v-model="newTagDescription" placeholder="Описание" />
-            <el-button type="primary" @click="createTag">Создать тег</el-button>
-          </div>
-        </el-dialog>
      </div>
+      <div class="contact-info-block">
+        <div>
+          <strong>Имя:</strong>
+          <input v-model="editableName" class="edit-input" @blur="saveName" @keyup.enter="saveName" />
+          <span v-if="isSavingName" class="saving">Сохранение...</span>
+        </div>
+        <div><strong>Email:</strong> {{ contact.email || '-' }}</div>
+        <div><strong>Telegram:</strong> {{ contact.telegram || '-' }}</div>
+        <div><strong>Кошелек:</strong> {{ contact.wallet || '-' }}</div>
+        <div>
+          <strong>Язык:</strong>
+          <div class="multi-select">
+            <div class="selected-langs">
+              <span v-for="lang in selectedLanguages" :key="lang" class="lang-tag">
+                {{ getLanguageLabel(lang) }}
+                <span class="remove-tag" @click="removeLanguage(lang)">×</span>
+              </span>
+              <input
+                v-model="langInput"
+                @focus="showLangDropdown = true"
+                @input="showLangDropdown = true"
+                @keydown.enter.prevent="addLanguageFromInput"
+                class="lang-input"
+                placeholder="Добавить язык..."
+              />
+            </div>
+            <ul v-if="showLangDropdown" class="lang-dropdown">
+              <li
+                v-for="lang in filteredLanguages"
+                :key="lang.value"
+                @mousedown.prevent="addLanguage(lang.value)"
+                :class="{ selected: selectedLanguages.includes(lang.value) }"
+              >
+                {{ lang.label }}
+              </li>
+            </ul>
+          </div>
+          <span v-if="isSavingLangs" class="saving">Сохранение...</span>
+        </div>
+        <div><strong>Дата создания:</strong> {{ formatDate(contact.created_at) }}</div>
+        <div><strong>Дата последнего сообщения:</strong> {{ formatDate(lastMessageDate) }}</div>
+        <div class="user-tags-block">
+          <strong>Теги пользователя:</strong>
+          <span v-for="tag in userTags" :key="tag.id" class="user-tag">
+            {{ tag.name }}
+            <span class="remove-tag" @click="removeUserTag(tag.id)">×</span>
+          </span>
+          <button class="add-tag-btn" @click="openTagModal">Добавить тег</button>
+        </div>
+        <button class="delete-btn" @click="deleteContact">Удалить контакт</button>
+      </div>
+      <div class="messages-block">
+        <h3>История сообщений</h3>
+        <div v-if="isLoadingMessages" class="loading">Загрузка...</div>
+        <div v-else-if="messages.length === 0" class="empty">Нет сообщений</div>
+        <div v-else class="messages-list">
+          <Message v-for="msg in messages" :key="msg.id" :message="msg" />
+        </div>
+      </div>
+      <el-dialog v-model="showTagModal" title="Добавить тег пользователю">
+        <div v-if="allTags.length">
+          <el-select
+            v-model="selectedTags"
+            multiple
+            filterable
+            placeholder="Выберите теги"
+            @change="addTagsToUser"
+          >
+            <el-option
+              v-for="tag in allTags"
+              :key="tag.id"
+              :label="tag.name"
+              :value="tag.id"
+            />
+          </el-select>
+          <div style="margin-top: 1em; color: #888; font-size: 0.95em;">
+            <strong>Существующие теги:</strong>
+            <span v-for="tag in allTags" :key="'list-' + tag.id" style="margin-right: 0.7em;">
+              {{ tag.name }}<span v-if="tag.description"> ({{ tag.description }})</span>
+            </span>
+          </div>
+        </div>
+        <div style="margin-top: 1em;">
+          <el-input v-model="newTagName" placeholder="Новый тег" />
+          <el-input v-model="newTagDescription" placeholder="Описание" />
+          <el-button type="primary" @click="createTag">Создать тег</el-button>
+        </div>
+      </el-dialog>
    </div>
+  </div>
  </BaseLayout>
 </template>

--- a/frontend/src/views/tables/TableView.vue
+++ b/frontend/src/views/tables/TableView.vue
@@ -1,14 +1,14 @@
 <template>
  <BaseLayout>
    <div class="table-block-wrapper">
-      <div class="tableview-header-row">
-        <button class="nav-btn" @click="goToTables">Таблицы</button>
-        <button class="nav-btn" @click="goToCreate">Создать таблицу</button>
-        <button class="close-btn" @click="closeTable">Закрыть</button>
-        <button class="action-btn" @click="goToEdit">Редактировать</button>
-        <button class="danger-btn" @click="goToDelete">Удалить</button>
-      </div>
-      <UserTableView :table-id="Number($route.params.id)" />
+    <div class="tableview-header-row">
+      <button class="nav-btn" @click="goToTables">Таблицы</button>
+      <button class="nav-btn" @click="goToCreate">Создать таблицу</button>
+      <button class="close-btn" @click="closeTable">Закрыть</button>
+      <button class="action-btn" @click="goToEdit">Редактировать</button>
+      <button class="danger-btn" @click="goToDelete">Удалить</button>
+    </div>
+    <UserTableView :table-id="Number($route.params.id)" />
    </div>
  </BaseLayout>
 </template>
--- a/frontend/src/views/tables/TablesListView.vue
+++ b/frontend/src/views/tables/TablesListView.vue
@@ -2,8 +2,8 @@
  <BaseLayout>
    <div class="tables-list-block">
      <button class="close-btn" @click="goBack">×</button>
-      <h2>Список таблиц</h2>
-      <UserTablesList />
+    <h2>Список таблиц</h2>
+    <UserTablesList />
    </div>
  </BaseLayout>
 </template>