From 45c54f0b27f55e85994e589a6d5510cfe52f87db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9D=D0=B0=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=B8=D0=BD?= <igor_26reg@mail.ru>
Date: Sun, 30 Nov 2025 10:22:47 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=BC?=
 =?UTF-8?q?=D0=B5=D1=81=D1=81=D0=B5=D0=BD=D0=B4=D0=B6=D0=B5=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B2=20(WhatsApp,=20Telegram,=20WeChat)=20=D0=B2=20=D0=B1?=
 =?UTF-8?q?=D0=BE=D0=BA=D0=BE=D0=B2=D1=83=D1=8E=20=D0=BF=D0=B0=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BB=D1=8C=20=D1=87=D0=B0=D1=82=D0=BE=D0=B2=20=D1=81=20=D0=BF?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=D0=BE=D0=BC=20=D0=BD=D0=B0?=
 =?UTF-8?q?=20=D1=81=D0=BE=D0=BE=D1=82=D0=B2=D0=B5=D1=82=D1=81=D1=82=D0=B2?=
 =?UTF-8?q?=D1=83=D1=8E=D1=89=D0=B8=D0=B5=20=D1=81=D1=82=D1=80=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=86=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/communications/urls.py                |   5 +
 backend/communications/views.py               |  35 ++++++
 .../css/components/chat-list-enhanced.css     |  34 +++++-
 .../templates/communications/chat_list.html   |  17 +++
 .../communications/messengers/telegram.html   | 102 ++++++++++++++++++
 .../communications/messengers/wechat.html     | 102 ++++++++++++++++++
 .../communications/messengers/whatsapp.html   | 102 ++++++++++++++++++
 7 files changed, 396 insertions(+), 1 deletion(-)
 create mode 100644 backend/templates/communications/messengers/telegram.html
 create mode 100644 backend/templates/communications/messengers/wechat.html
 create mode 100644 backend/templates/communications/messengers/whatsapp.html

diff --git a/backend/communications/urls.py b/backend/communications/urls.py
index 6caffdc2..adca8746 100644
--- a/backend/communications/urls.py
+++ b/backend/communications/urls.py
@@ -22,6 +22,11 @@ urlpatterns = [
         name="start_private_chat"
     ),
     
+    # Messenger Views
+    path("messengers/whatsapp/", views.whatsapp_view, name="whatsapp"),
+    path("messengers/telegram/", views.telegram_view, name="telegram"),
+    path("messengers/wechat/", views.wechat_view, name="wechat"),
+    
     # API Endpoints
     # Chat management
     path("api/chat/create/", api_views.create_chat, name="api_create_chat"),
diff --git a/backend/communications/views.py b/backend/communications/views.py
index 7910d148..dfe24906 100644
--- a/backend/communications/views.py
+++ b/backend/communications/views.py
@@ -452,3 +452,38 @@ def chat_mark_read(request, pk: int):
     return JsonResponse(
         {"ok": True, "last_read_at": int(ts.timestamp() * 1000)}
     )
+
+
+# ===== Messenger Views =====
+
+@login_required
+def whatsapp_view(request):
+    """WhatsApp интеграция"""
+    from django.shortcuts import render
+    return render(request, 'communications/messengers/whatsapp.html', {
+        'messenger_name': 'WhatsApp',
+        'messenger_icon': 'bi-whatsapp',
+        'messenger_color': '#25D366'
+    })
+
+
+@login_required
+def telegram_view(request):
+    """Telegram интеграция"""
+    from django.shortcuts import render
+    return render(request, 'communications/messengers/telegram.html', {
+        'messenger_name': 'Telegram',
+        'messenger_icon': 'bi-telegram',
+        'messenger_color': '#0088cc'
+    })
+
+
+@login_required
+def wechat_view(request):
+    """WeChat интеграция"""
+    from django.shortcuts import render
+    return render(request, 'communications/messengers/wechat.html', {
+        'messenger_name': 'WeChat',
+        'messenger_icon': 'bi-wechat',
+        'messenger_color': '#09B83E'
+    })
diff --git a/backend/static/css/components/chat-list-enhanced.css b/backend/static/css/components/chat-list-enhanced.css
index e892b86f..1ed2c66c 100644
--- a/backend/static/css/components/chat-list-enhanced.css
+++ b/backend/static/css/components/chat-list-enhanced.css
@@ -187,7 +187,39 @@
     color: white;
 }
 
-.chat-type-btn .badge {
+/* Мессенджеры - ссылки */
+.chat-type-btn[data-messenger] {
+    text-decoration: none;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.chat-type-btn[data-messenger]:hover {
+    background-color: var(--bs-light) !important;
+    transform: scale(1.05);
+}
+
+.chat-type-btn[data-messenger] i {
+    transition: transform 0.2s ease;
+}
+
+.chat-type-btn[data-messenger]:hover i {
+    transform: scale(1.1);
+}
+
+/* Цвета иконок мессенджеров */
+.chat-type-btn[data-messenger="whatsapp"] i {
+    color: #25D366 !important;
+}
+
+.chat-type-btn[data-messenger="telegram"] i {
+    color: #0088cc !important;
+}
+
+.chat-type-btn[data-messenger="wechat"] i {
+    color: #09B83E !important;
+}
+
+.chat-type-badge {
     position: absolute;
     top: 0.25rem;
     right: 0.25rem;
diff --git a/backend/templates/communications/chat_list.html b/backend/templates/communications/chat_list.html
index cf01099e..dab7239e 100644
--- a/backend/templates/communications/chat_list.html
+++ b/backend/templates/communications/chat_list.html
@@ -61,6 +61,23 @@
                 <i class="bi-megaphone fs-4 d-block"></i>
                 <span class="badge rounded-pill bg-secondary" data-count="announcement">0</span>
               </button>
+              
+              {# Разделитель #}
+              <div class="list-group-item p-0" style="height: 1px; background-color: var(--bs-border-color);"></div>
+              
+              {# Мессенджеры #}
+              <a href="{% url 'communications:whatsapp' %}" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
+                 title="WhatsApp" data-messenger="whatsapp">
+                <i class="bi-whatsapp fs-4 d-block text-success"></i>
+              </a>
+              <a href="{% url 'communications:telegram' %}" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
+                 title="Telegram" data-messenger="telegram">
+                <i class="bi-telegram fs-4 d-block text-primary"></i>
+              </a>
+              <a href="{% url 'communications:wechat' %}" class="list-group-item list-group-item-action text-center py-3 chat-type-btn" 
+                 title="WeChat" data-messenger="wechat">
+                <i class="bi-wechat fs-4 d-block text-success"></i>
+              </a>
             </div>
           </div>
         </div>
diff --git a/backend/templates/communications/messengers/telegram.html b/backend/templates/communications/messengers/telegram.html
new file mode 100644
index 00000000..dd5dd798
--- /dev/null
+++ b/backend/templates/communications/messengers/telegram.html
@@ -0,0 +1,102 @@
+{# backend/templates/communications/messengers/telegram.html #}
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}{{ messenger_name }}{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/components/page-header.css' %}">
+<style>
+    .messenger-container {
+        min-height: 70vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    
+    .messenger-icon {
+        font-size: 6rem;
+        color: {{ messenger_color }};
+        margin-bottom: 2rem;
+        animation: pulse 2s ease-in-out infinite;
+    }
+    
+    @keyframes pulse {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+    }
+    
+    .messenger-title {
+        font-size: 2.5rem;
+        font-weight: 600;
+        color: {{ messenger_color }};
+        margin-bottom: 1rem;
+    }
+    
+    .messenger-description {
+        font-size: 1.2rem;
+        color: var(--bs-secondary);
+        max-width: 600px;
+        margin: 0 auto 2rem;
+    }
+    
+    .messenger-actions {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .messenger-btn {
+        padding: 0.75rem 2rem;
+        font-size: 1.1rem;
+        border-radius: 0.5rem;
+        transition: all 0.3s ease;
+    }
+    
+    .messenger-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            {% include "includes/components/page_header.html" with icon=messenger_icon title=messenger_name %}
+            
+            <div class="card shadow-sm">
+                <div class="card-body messenger-container">
+                    <i class="{{ messenger_icon }} messenger-icon"></i>
+                    
+                    <h2 class="messenger-title">{{ messenger_name }} интеграция</h2>
+                    
+                    <p class="messenger-description">
+                        Здесь будет отображаться интеграция с {{ messenger_name }}. 
+                        Функционал находится в разработке.
+                    </p>
+                    
+                    <div class="messenger-actions">
+                        <a href="{% url 'communications:chat_list' %}" class="btn btn-outline-secondary messenger-btn">
+                            <i class="bi-arrow-left"></i> Вернуться к чатам
+                        </a>
+                        <button class="btn btn-primary messenger-btn" style="background-color: {{ messenger_color }}; border-color: {{ messenger_color }};" disabled>
+                            <i class="bi-link-45deg"></i> Подключить {{ messenger_name }}
+                        </button>
+                    </div>
+                    
+                    <div class="mt-5">
+                        <div class="alert alert-info d-inline-block">
+                            <i class="bi-info-circle"></i> Для настройки интеграции обратитесь к администратору
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/backend/templates/communications/messengers/wechat.html b/backend/templates/communications/messengers/wechat.html
new file mode 100644
index 00000000..67deec32
--- /dev/null
+++ b/backend/templates/communications/messengers/wechat.html
@@ -0,0 +1,102 @@
+{# backend/templates/communications/messengers/wechat.html #}
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}{{ messenger_name }}{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/components/page-header.css' %}">
+<style>
+    .messenger-container {
+        min-height: 70vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    
+    .messenger-icon {
+        font-size: 6rem;
+        color: {{ messenger_color }};
+        margin-bottom: 2rem;
+        animation: pulse 2s ease-in-out infinite;
+    }
+    
+    @keyframes pulse {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+    }
+    
+    .messenger-title {
+        font-size: 2.5rem;
+        font-weight: 600;
+        color: {{ messenger_color }};
+        margin-bottom: 1rem;
+    }
+    
+    .messenger-description {
+        font-size: 1.2rem;
+        color: var(--bs-secondary);
+        max-width: 600px;
+        margin: 0 auto 2rem;
+    }
+    
+    .messenger-actions {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .messenger-btn {
+        padding: 0.75rem 2rem;
+        font-size: 1.1rem;
+        border-radius: 0.5rem;
+        transition: all 0.3s ease;
+    }
+    
+    .messenger-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            {% include "includes/components/page_header.html" with icon=messenger_icon title=messenger_name %}
+            
+            <div class="card shadow-sm">
+                <div class="card-body messenger-container">
+                    <i class="{{ messenger_icon }} messenger-icon"></i>
+                    
+                    <h2 class="messenger-title">{{ messenger_name }} интеграция</h2>
+                    
+                    <p class="messenger-description">
+                        Здесь будет отображаться интеграция с {{ messenger_name }}. 
+                        Функционал находится в разработке.
+                    </p>
+                    
+                    <div class="messenger-actions">
+                        <a href="{% url 'communications:chat_list' %}" class="btn btn-outline-secondary messenger-btn">
+                            <i class="bi-arrow-left"></i> Вернуться к чатам
+                        </a>
+                        <button class="btn btn-primary messenger-btn" style="background-color: {{ messenger_color }}; border-color: {{ messenger_color }};" disabled>
+                            <i class="bi-link-45deg"></i> Подключить {{ messenger_name }}
+                        </button>
+                    </div>
+                    
+                    <div class="mt-5">
+                        <div class="alert alert-info d-inline-block">
+                            <i class="bi-info-circle"></i> Для настройки интеграции обратитесь к администратору
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/backend/templates/communications/messengers/whatsapp.html b/backend/templates/communications/messengers/whatsapp.html
new file mode 100644
index 00000000..cc35071b
--- /dev/null
+++ b/backend/templates/communications/messengers/whatsapp.html
@@ -0,0 +1,102 @@
+{# backend/templates/communications/messengers/whatsapp.html #}
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}{{ messenger_name }}{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/components/page-header.css' %}">
+<style>
+    .messenger-container {
+        min-height: 70vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    
+    .messenger-icon {
+        font-size: 6rem;
+        color: {{ messenger_color }};
+        margin-bottom: 2rem;
+        animation: pulse 2s ease-in-out infinite;
+    }
+    
+    @keyframes pulse {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+    }
+    
+    .messenger-title {
+        font-size: 2.5rem;
+        font-weight: 600;
+        color: {{ messenger_color }};
+        margin-bottom: 1rem;
+    }
+    
+    .messenger-description {
+        font-size: 1.2rem;
+        color: var(--bs-secondary);
+        max-width: 600px;
+        margin: 0 auto 2rem;
+    }
+    
+    .messenger-actions {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .messenger-btn {
+        padding: 0.75rem 2rem;
+        font-size: 1.1rem;
+        border-radius: 0.5rem;
+        transition: all 0.3s ease;
+    }
+    
+    .messenger-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            {% include "includes/components/page_header.html" with icon=messenger_icon title=messenger_name %}
+            
+            <div class="card shadow-sm">
+                <div class="card-body messenger-container">
+                    <i class="{{ messenger_icon }} messenger-icon"></i>
+                    
+                    <h2 class="messenger-title">{{ messenger_name }} интеграция</h2>
+                    
+                    <p class="messenger-description">
+                        Здесь будет отображаться интеграция с {{ messenger_name }}. 
+                        Функционал находится в разработке.
+                    </p>
+                    
+                    <div class="messenger-actions">
+                        <a href="{% url 'communications:chat_list' %}" class="btn btn-outline-secondary messenger-btn">
+                            <i class="bi-arrow-left"></i> Вернуться к чатам
+                        </a>
+                        <button class="btn btn-primary messenger-btn" style="background-color: {{ messenger_color }}; border-color: {{ messenger_color }};" disabled>
+                            <i class="bi-link-45deg"></i> Подключить {{ messenger_name }}
+                        </button>
+                    </div>
+                    
+                    <div class="mt-5">
+                        <div class="alert alert-info d-inline-block">
+                            <i class="bi-info-circle"></i> Для настройки интеграции обратитесь к администратору
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}