фикс

backend/controllers/reportController.js

@@ -119,7 +119,13 @@ const getReportById = async (req, res, next) => {
       return next(error);
     }
 
-    res.json(report);
+    // Преобразуем adminComment в adminNotes для фронтенда
+    const reportResponse = report.toObject();
+    if (reportResponse.adminComment) {
+      reportResponse.adminNotes = reportResponse.adminComment;
+    }
+
+    res.json(reportResponse);
 
   } catch (error) {
     console.error('[REPORT_CTRL] Ошибка при получении деталей жалобы:', error.message);
@@ -133,7 +139,7 @@ const getReportById = async (req, res, next) => {
 const updateReportStatus = async (req, res, next) => {
   try {
     const { id } = req.params;
-    const { status, adminComment, actionTaken } = req.body;
+    const { status, adminNotes } = req.body;
     const adminId = req.user._id;
 
     const report = await Report.findById(id);
@@ -146,43 +152,32 @@ const updateReportStatus = async (req, res, next) => {
     // Обновляем жалобу
     report.status = status;
     report.reviewedBy = adminId;
-    report.reviewedAt = new Date();
     
-    if (adminComment) {
+    if (status === 'resolved' || status === 'dismissed') {
-      report.adminComment = adminComment;
+      report.reviewedAt = new Date();
     }
     
-    if (actionTaken) {
+    if (adminNotes) {
-      report.actionTaken = actionTaken;
+      report.adminComment = adminNotes; // В модели поле называется adminComment
     }
 
     await report.save();
 
-    // Если было предпринято действие, применяем его к пользователю
+    console.log(`[REPORT_CTRL] Жалоба ${id} обновлена администратором ${adminId}, статус: ${status}`);
-    if (actionTaken && actionTaken !== 'none') {
+
-      const reportedUser = await User.findById(report.reportedUser);
+    // Возвращаем обновленную жалобу с заполненными связями
-      if (reportedUser) {
+    const updatedReport = await Report.findById(id)
-        switch (actionTaken) {
+      .populate('reporter', 'name email')
-          case 'temporary_ban':
+      .populate('reportedUser', 'name email isActive')
-          case 'permanent_ban':
+      .populate('reviewedBy', 'name email');
-          case 'profile_removal':
+
-            reportedUser.isActive = false;
+    // Преобразуем adminComment в adminNotes для фронтенда
-            await reportedUser.save();
+    const reportResponse = updatedReport.toObject();
-            console.log(`[REPORT_CTRL] Пользователь ${reportedUser._id} заблокирован по жалобе ${id}`);
+    if (reportResponse.adminComment) {
-            break;
+      reportResponse.adminNotes = reportResponse.adminComment;
-        }
-      }
     }
 
-    console.log(`[REPORT_CTRL] Жалоба ${id} обновлена администратором ${adminId}`);
+    res.json(reportResponse);
-
-    res.json({
-      message: 'Жалоба успешно обновлена',
-      report: await Report.findById(id)
-        .populate('reporter', 'name email')
-        .populate('reportedUser', 'name email isActive')
-        .populate('reviewedBy', 'name email')
-    });
 
   } catch (error) {
     console.error('[REPORT_CTRL] Ошибка при обновлении жалобы:', error.message);

src/router/index.js

@@ -96,6 +96,19 @@ const routes = [
         name: 'AdminStatistics',
         component: () => import('../views/admin/AdminStatistics.vue'),
         meta: { requiresAuth: true, requiresAdmin: true }
+      },
+      {
+        path: 'reports',
+        name: 'AdminReports',
+        component: () => import('../views/admin/AdminReports.vue'),
+        meta: { requiresAuth: true, requiresAdmin: true }
+      },
+      {
+        path: 'reports/:id',
+        name: 'AdminReportDetail',
+        component: () => import('../views/admin/AdminReportDetail.vue'),
+        meta: { requiresAuth: true, requiresAdmin: true },
+        props: true
       }
     ]
   }

src/views/admin/AdminDashboard.vue

@@ -23,6 +23,9 @@
           <router-link :to="{ name: 'AdminConversations' }" active-class="active">
             <i class="bi-chat-dots"></i> Диалоги
           </router-link>
+          <router-link :to="{ name: 'AdminReports' }" active-class="active">
+            <i class="bi-exclamation-triangle"></i> Жалобы
+          </router-link>
           <router-link :to="{ name: 'AdminStatistics' }" active-class="active">
             <i class="bi-graph-up"></i> Статистика
           </router-link>
@@ -48,6 +51,12 @@
         </div>
         <span class="nav-text">Диалоги</span>
       </router-link>
+      <router-link :to="{ name: 'AdminReports' }" class="nav-item" active-class="active">
+        <div class="nav-icon">
+          <i class="bi-exclamation-triangle"></i>
+        </div>
+        <span class="nav-text">Жалобы</span>
+      </router-link>
       <router-link :to="{ name: 'AdminStatistics' }" class="nav-item" active-class="active">
         <div class="nav-icon">
           <i class="bi-graph-up"></i>

src/views/admin/AdminReportDetail.vue

@@ -0,0 +1,627 @@
+<template>
+  <div class="admin-report-detail">
+    <div class="header-controls">
+      <button @click="goBack" class="back-btn">
+        &laquo; Назад к списку жалоб
+      </button>
+    </div>
+    
+    <div v-if="loading" class="loading-indicator">
+      Загрузка информации о жалобе...
+    </div>
+    
+    <div v-if="error" class="error-message">
+      {{ error }}
+    </div>
+    
+    <div v-if="report && !loading" class="report-container">
+      <h2>Детали жалобы</h2>
+      
+      <div class="report-card">
+        <div class="report-header">
+          <div class="report-info">
+            <h3>Жалоба #{{ report._id.substring(0, 8) }}</h3>
+            <span class="status-badge" :class="getStatusClass(report.status)">
+              {{ getStatusText(report.status) }}
+            </span>
+          </div>
+          <div class="report-date">
+            Подана {{ formatDate(report.createdAt) }}
+          </div>
+        </div>
+        
+        <div class="report-content">
+          <div class="info-grid">
+            <div class="info-item">
+              <label>Причина жалобы:</label>
+              <span class="reason-badge" :class="getReasonClass(report.reason)">
+                {{ getReasonText(report.reason) }}
+              </span>
+            </div>
+            
+            <div class="info-item" v-if="report.description">
+              <label>Описание:</label>
+              <p class="description">{{ report.description }}</p>
+            </div>
+            
+            <div class="info-item">
+              <label>Жалующийся:</label>
+              <div class="user-info">
+                <span>{{ report.reporter?.name || 'Пользователь удален' }}</span>
+                <span class="email">{{ report.reporter?.email || '' }}</span>
+              </div>
+            </div>
+            
+            <div class="info-item">
+              <label>На пользователя:</label>
+              <div class="user-info">
+                <span>{{ report.reportedUser?.name || 'Пользователь удален' }}</span>
+                <span class="email">{{ report.reportedUser?.email || '' }}</span>
+                <button 
+                  v-if="report.reportedUser?._id" 
+                  @click="viewUser(report.reportedUser._id)" 
+                  class="btn view-user-btn"
+                >
+                  Просмотр профиля
+                </button>
+              </div>
+            </div>
+            
+            <div class="info-item" v-if="report.adminNotes">
+              <label>Заметки администратора:</label>
+              <p class="admin-notes">{{ report.adminNotes }}</p>
+            </div>
+            
+            <div class="info-item" v-if="report.resolvedAt">
+              <label>Дата рассмотрения:</label>
+              <span>{{ formatDate(report.resolvedAt) }}</span>
+            </div>
+          </div>
+        </div>
+        
+        <div class="report-actions" v-if="report.status === 'pending'">
+          <h4>Действия</h4>
+          <div class="action-buttons">
+            <button @click="showResolveModal = true" class="btn resolve-btn">
+              <i class="bi-check-circle"></i>
+              Рассмотреть
+            </button>
+            <button @click="showDismissModal = true" class="btn dismiss-btn">
+              <i class="bi-x-circle"></i>
+              Отклонить
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Модальное окно для рассмотрения жалобы -->
+    <div v-if="showResolveModal" class="modal-overlay" @click="showResolveModal = false">
+      <div class="modal" @click.stop>
+        <h3>Рассмотрение жалобы</h3>
+        <p>Вы собираетесь отметить эту жалобу как рассмотренную.</p>
+        <div class="form-group">
+          <label>Заметки администратора (необязательно):</label>
+          <textarea v-model="adminNotes" placeholder="Укажите принятые меры или комментарии..."></textarea>
+        </div>
+        <div class="modal-actions">
+          <button @click="updateReportStatus('resolved')" class="btn resolve-btn" :disabled="updating">
+            {{ updating ? 'Обработка...' : 'Рассмотреть' }}
+          </button>
+          <button @click="showResolveModal = false" class="btn cancel-btn">Отмена</button>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Модальное окно для отклонения жалобы -->
+    <div v-if="showDismissModal" class="modal-overlay" @click="showDismissModal = false">
+      <div class="modal" @click.stop>
+        <h3>Отклонение жалобы</h3>
+        <p>Вы собираетесь отклонить эту жалобу.</p>
+        <div class="form-group">
+          <label>Заметки администратора (необязательно):</label>
+          <textarea v-model="adminNotes" placeholder="Укажите причину отклонения..."></textarea>
+        </div>
+        <div class="modal-actions">
+          <button @click="updateReportStatus('dismissed')" class="btn dismiss-btn" :disabled="updating">
+            {{ updating ? 'Обработка...' : 'Отклонить' }}
+          </button>
+          <button @click="showDismissModal = false" class="btn cancel-btn">Отмена</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import axios from 'axios';
+
+export default {
+  name: 'AdminReportDetail',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const router = useRouter();
+    const route = useRoute();
+    const report = ref(null);
+    const loading = ref(false);
+    const error = ref(null);
+    const updating = ref(false);
+    const showResolveModal = ref(false);
+    const showDismissModal = ref(false);
+    const adminNotes = ref('');
+
+    // Загрузка информации о жалобе
+    const loadReport = async () => {
+      loading.value = true;
+      error.value = null;
+      
+      try {
+        const token = localStorage.getItem('userToken');
+        const response = await axios.get(`/api/admin/reports/${props.id}`, {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        });
+        
+        report.value = response.data;
+      } catch (err) {
+        console.error('Ошибка при загрузке жалобы:', err);
+        error.value = 'Ошибка при загрузке информации о жалобе.';
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    // Обновление статуса жалобы
+    const updateReportStatus = async (status) => {
+      updating.value = true;
+      
+      try {
+        const token = localStorage.getItem('userToken');
+        const response = await axios.put(`/api/admin/reports/${props.id}`, {
+          status,
+          adminNotes: adminNotes.value
+        }, {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        });
+        
+        // Обновляем локальные данные
+        report.value = response.data;
+        
+        // Закрываем модальные окна
+        showResolveModal.value = false;
+        showDismissModal.value = false;
+        adminNotes.value = '';
+        
+        alert(`Жалоба успешно ${status === 'resolved' ? 'рассмотрена' : 'отклонена'}`);
+      } catch (err) {
+        console.error('Ошибка при обновлении статуса жалобы:', err);
+        alert('Ошибка при обновлении статуса жалобы');
+      } finally {
+        updating.value = false;
+      }
+    };
+
+    // Возврат к списку жалоб
+    const goBack = () => {
+      router.push({ name: 'AdminReports' });
+    };
+
+    // Просмотр профиля пользователя
+    const viewUser = (userId) => {
+      router.push({ name: 'AdminUserDetail', params: { id: userId } });
+    };
+
+    // Форматирование даты
+    const formatDate = (dateString) => {
+      if (!dateString) return '';
+      
+      const date = new Date(dateString);
+      return date.toLocaleString('ru-RU', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    };
+
+    // Получение текста причины жалобы
+    const getReasonText = (reason) => {
+      const reasons = {
+        inappropriate_content: 'Неподходящий контент',
+        fake_profile: 'Фальшивый профиль',
+        harassment: 'Домогательства',
+        spam: 'Спам',
+        underage: 'Несовершеннолетний',
+        other: 'Другое'
+      };
+      return reasons[reason] || reason;
+    };
+
+    // Получение CSS класса для причины
+    const getReasonClass = (reason) => {
+      const classes = {
+        inappropriate_content: 'reason-inappropriate',
+        fake_profile: 'reason-fake',
+        harassment: 'reason-harassment',
+        spam: 'reason-spam',
+        underage: 'reason-underage',
+        other: 'reason-other'
+      };
+      return classes[reason] || 'reason-other';
+    };
+
+    // Получение текста статуса
+    const getStatusText = (status) => {
+      const statuses = {
+        pending: 'На рассмотрении',
+        resolved: 'Рассмотрена',
+        dismissed: 'Отклонена'
+      };
+      return statuses[status] || status;
+    };
+
+    // Получение CSS класса для статуса
+    const getStatusClass = (status) => {
+      const classes = {
+        pending: 'status-pending',
+        resolved: 'status-resolved',
+        dismissed: 'status-dismissed'
+      };
+      return classes[status] || 'status-pending';
+    };
+
+    onMounted(() => {
+      loadReport();
+    });
+
+    return {
+      report,
+      loading,
+      error,
+      updating,
+      showResolveModal,
+      showDismissModal,
+      adminNotes,
+      loadReport,
+      updateReportStatus,
+      goBack,
+      viewUser,
+      formatDate,
+      getReasonText,
+      getReasonClass,
+      getStatusText,
+      getStatusClass
+    };
+  }
+}
+</script>
+
+<style scoped>
+.admin-report-detail {
+  padding-bottom: 2rem;
+  max-width: 100%;
+}
+
+.header-controls {
+  margin-bottom: 1.5rem;
+}
+
+.back-btn {
+  background: #6c757d;
+  color: white;
+  border: none;
+  padding: 0.6rem 1rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.back-btn:hover {
+  background: #545b62;
+  transform: translateY(-1px);
+}
+
+.loading-indicator {
+  text-align: center;
+  padding: 2rem;
+  color: #666;
+  font-style: italic;
+}
+
+.error-message {
+  background-color: #f8d7da;
+  color: #721c24;
+  padding: 0.75rem 1rem;
+  border-radius: 0.375rem;
+  border: 1px solid #f5c6cb;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  color: #333;
+  font-weight: 600;
+}
+
+.report-card {
+  background: white;
+  border-radius: 0.75rem;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.report-header {
+  padding: 1.5rem;
+  background: linear-gradient(to right, #f8f9fa, #e9ecef);
+  border-bottom: 1px solid #dee2e6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.report-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.report-info h3 {
+  margin: 0;
+  color: #333;
+  font-size: 1.25rem;
+}
+
+.report-date {
+  color: #6c757d;
+  font-size: 0.9rem;
+}
+
+.report-content {
+  padding: 1.5rem;
+}
+
+.info-grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.info-item label {
+  display: block;
+  font-weight: 600;
+  color: #495057;
+  margin-bottom: 0.5rem;
+}
+
+.description,
+.admin-notes {
+  background: #f8f9fa;
+  padding: 1rem;
+  border-radius: 0.375rem;
+  border: 1px solid #e9ecef;
+  margin: 0;
+  line-height: 1.6;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.email {
+  color: #6c757d;
+  font-size: 0.9rem;
+}
+
+.view-user-btn {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 0.4rem 0.75rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 500;
+  margin-top: 0.5rem;
+  align-self: flex-start;
+  transition: all 0.2s ease;
+}
+
+.view-user-btn:hover {
+  background: #0056b3;
+  transform: translateY(-1px);
+}
+
+.reason-badge,
+.status-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  display: inline-block;
+}
+
+.reason-inappropriate { background-color: #f8d7da; color: #721c24; }
+.reason-fake { background-color: #fff3cd; color: #856404; }
+.reason-harassment { background-color: #d1ecf1; color: #0c5460; }
+.reason-spam { background-color: #d4edda; color: #155724; }
+.reason-underage { background-color: #f8d7da; color: #721c24; }
+.reason-other { background-color: #e2e3e5; color: #383d41; }
+
+.status-pending { background-color: #fff3cd; color: #856404; }
+.status-resolved { background-color: #d4edda; color: #155724; }
+.status-dismissed { background-color: #e2e3e5; color: #383d41; }
+
+.report-actions {
+  padding: 1.5rem;
+  border-top: 1px solid #dee2e6;
+  background: #f8f9fa;
+}
+
+.report-actions h4 {
+  margin: 0 0 1rem 0;
+  color: #495057;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 1rem;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1rem;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  text-decoration: none;
+}
+
+.resolve-btn {
+  background: #28a745;
+  color: white;
+}
+
+.resolve-btn:hover:not(:disabled) {
+  background: #218838;
+  transform: translateY(-1px);
+}
+
+.dismiss-btn {
+  background: #dc3545;
+  color: white;
+}
+
+.dismiss-btn:hover:not(:disabled) {
+  background: #c82333;
+  transform: translateY(-1px);
+}
+
+.cancel-btn {
+  background: #6c757d;
+  color: white;
+}
+
+.cancel-btn:hover {
+  background: #545b62;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Модальные окна */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: white;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  max-width: 500px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.modal h3 {
+  margin: 0 0 1rem 0;
+  color: #333;
+}
+
+.form-group {
+  margin: 1rem 0;
+}
+
+.form-group label {
+  display: block;
+  font-weight: 600;
+  color: #495057;
+  margin-bottom: 0.5rem;
+}
+
+.form-group textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: 0.75rem;
+  border: 1px solid #ced4da;
+  border-radius: 0.375rem;
+  font-family: inherit;
+  resize: vertical;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}
+
+/* Адаптивные стили */
+@media (max-width: 767px) {
+  .report-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+  }
+  
+  .modal-actions {
+    flex-direction: column;
+  }
+  
+  .admin-report-detail {
+    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/* Устройства с вырезом (notch) */
+@supports (padding: env(safe-area-inset-bottom)) {
+  .admin-report-detail {
+    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/* Ландшафтная ориентация на мобильных */
+@media (max-height: 450px) and (orientation: landscape) {
+  .admin-report-detail {
+    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
+  }
+}
+</style>

src/views/admin/AdminReports.vue

@@ -0,0 +1,488 @@
+<template>
+  <div class="admin-reports">
+    <h2>Управление жалобами</h2>
+    
+    <div class="search-bar">
+      <div class="filter-options">
+        <label>
+          <input type="radio" v-model="statusFilter" value="all" @change="loadReports">
+          Все
+        </label>
+        <label>
+          <input type="radio" v-model="statusFilter" value="pending" @change="loadReports">
+          На рассмотрении
+        </label>
+        <label>
+          <input type="radio" v-model="statusFilter" value="resolved" @change="loadReports">
+          Рассмотренные
+        </label>
+        <label>
+          <input type="radio" v-model="statusFilter" value="dismissed" @change="loadReports">
+          Отклоненные
+        </label>
+      </div>
+    </div>
+    
+    <div v-if="loading" class="loading-indicator">
+      Загрузка жалоб...
+    </div>
+    
+    <div v-if="error" class="error-message">
+      {{ error }}
+    </div>
+    
+    <div v-if="!loading && !error" class="reports-table-container">
+      <table class="reports-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Причина</th>
+            <th>Жалующийся</th>
+            <th>На пользователя</th>
+            <th class="hide-sm">Дата подачи</th>
+            <th>Статус</th>
+            <th>Действия</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="report in reports" :key="report._id">
+            <td>{{ shortenId(report._id) }}</td>
+            <td>
+              <span class="reason-badge" :class="getReasonClass(report.reason)">
+                {{ getReasonText(report.reason) }}
+              </span>
+            </td>
+            <td>{{ report.reporter?.name || 'Удален' }}</td>
+            <td>{{ report.reportedUser?.name || 'Удален' }}</td>
+            <td class="hide-sm">{{ formatDate(report.createdAt) }}</td>
+            <td>
+              <span class="status-badge" :class="getStatusClass(report.status)">
+                {{ getStatusText(report.status) }}
+              </span>
+            </td>
+            <td class="actions">
+              <button @click="viewReport(report._id)" class="btn view-btn">
+                <span class="btn-text">Просмотр</span>
+                <i class="bi-eye"></i>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      
+      <div v-if="reports.length === 0" class="no-results">
+        Жалобы не найдены
+      </div>
+      
+      <div v-if="pagination.pages > 1" class="pagination">
+        <button 
+          @click="changePage(currentPage - 1)" 
+          :disabled="currentPage === 1"
+          class="pagination-btn"
+        >
+          Назад
+        </button>
+        
+        <span class="pagination-info">
+          Страница {{ currentPage }} из {{ pagination.pages }}
+        </span>
+        
+        <button 
+          @click="changePage(currentPage + 1)" 
+          :disabled="currentPage === pagination.pages"
+          class="pagination-btn"
+        >
+          Далее
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import axios from 'axios';
+
+export default {
+  name: 'AdminReports',
+  setup() {
+    const router = useRouter();
+    const reports = ref([]);
+    const loading = ref(false);
+    const error = ref(null);
+    const statusFilter = ref('all');
+    const currentPage = ref(1);
+    const pagination = ref({
+      page: 1,
+      pages: 1,
+      total: 0,
+      limit: 20
+    });
+
+    // Загрузка списка жалоб
+    const loadReports = async () => {
+      loading.value = true;
+      error.value = null;
+      
+      try {
+        const params = {
+          page: currentPage.value,
+          limit: pagination.value.limit
+        };
+        
+        if (statusFilter.value !== 'all') {
+          params.status = statusFilter.value;
+        }
+        
+        const token = localStorage.getItem('userToken');
+        const response = await axios.get(`/api/admin/reports`, {
+          params,
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        });
+        
+        reports.value = response.data.reports;
+        pagination.value = response.data.pagination;
+      } catch (err) {
+        console.error('Ошибка при загрузке жалоб:', err);
+        error.value = 'Ошибка при загрузке списка жалоб. Пожалуйста, попробуйте позже.';
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    // Функция для сокращения ID
+    const shortenId = (id) => {
+      return id ? id.substring(0, 6) + '...' : '';
+    };
+
+    // Форматирование даты
+    const formatDate = (dateString) => {
+      if (!dateString) return '';
+      
+      const date = new Date(dateString);
+      return date.toLocaleString('ru-RU', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    };
+
+    // Получение текста причины жалобы
+    const getReasonText = (reason) => {
+      const reasons = {
+        inappropriate_content: 'Неподходящий контент',
+        fake_profile: 'Фальшивый профиль',
+        harassment: 'Домогательства',
+        spam: 'Спам',
+        underage: 'Несовершеннолетний',
+        other: 'Другое'
+      };
+      return reasons[reason] || reason;
+    };
+
+    // Получение CSS класса для причины
+    const getReasonClass = (reason) => {
+      const classes = {
+        inappropriate_content: 'reason-inappropriate',
+        fake_profile: 'reason-fake',
+        harassment: 'reason-harassment',
+        spam: 'reason-spam',
+        underage: 'reason-underage',
+        other: 'reason-other'
+      };
+      return classes[reason] || 'reason-other';
+    };
+
+    // Получение текста статуса
+    const getStatusText = (status) => {
+      const statuses = {
+        pending: 'На рассмотрении',
+        resolved: 'Рассмотрена',
+        dismissed: 'Отклонена'
+      };
+      return statuses[status] || status;
+    };
+
+    // Получение CSS класса для статуса
+    const getStatusClass = (status) => {
+      const classes = {
+        pending: 'status-pending',
+        resolved: 'status-resolved',
+        dismissed: 'status-dismissed'
+      };
+      return classes[status] || 'status-pending';
+    };
+
+    // Переход на детальную страницу жалобы
+    const viewReport = (reportId) => {
+      router.push({ name: 'AdminReportDetail', params: { id: reportId } });
+    };
+
+    // Изменение страницы пагинации
+    const changePage = (page) => {
+      if (page < 1 || page > pagination.value.pages) return;
+      
+      currentPage.value = page;
+      loadReports();
+    };
+
+    onMounted(() => {
+      loadReports();
+    });
+
+    return {
+      reports,
+      loading,
+      error,
+      statusFilter,
+      currentPage,
+      pagination,
+      loadReports,
+      shortenId,
+      formatDate,
+      getReasonText,
+      getReasonClass,
+      getStatusText,
+      getStatusClass,
+      viewReport,
+      changePage
+    };
+  }
+}
+</script>
+
+<style scoped>
+.admin-reports {
+  padding-bottom: 2rem;
+  max-width: 100%;
+}
+
+h2 {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  color: #333;
+  font-weight: 600;
+  position: relative;
+  padding-left: 0.5rem;
+  display: inline-block;
+}
+
+h2::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 3px;
+  background: linear-gradient(to bottom, #ff3e68, #ff5252);
+  border-radius: 3px;
+}
+
+.search-bar {
+  margin-bottom: 1.5rem;
+}
+
+.filter-options {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.filter-options label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-weight: 500;
+  color: #555;
+}
+
+.filter-options input[type="radio"] {
+  margin: 0;
+}
+
+.loading-indicator {
+  text-align: center;
+  padding: 2rem;
+  color: #666;
+  font-style: italic;
+}
+
+.error-message {
+  background-color: #f8d7da;
+  color: #721c24;
+  padding: 0.75rem 1rem;
+  border-radius: 0.375rem;
+  border: 1px solid #f5c6cb;
+  margin-bottom: 1rem;
+}
+
+.reports-table-container {
+  background: white;
+  border-radius: 0.75rem;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.reports-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.reports-table th,
+.reports-table td {
+  padding: 0.85rem;
+  text-align: left;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.reports-table th {
+  background: linear-gradient(to right, #f8f9fa, #e9ecef);
+  font-weight: 600;
+  color: #495057;
+  border-bottom: 2px solid #dee2e6;
+}
+
+.reports-table tbody tr:hover {
+  background-color: rgba(255, 62, 104, 0.02);
+}
+
+.reason-badge,
+.status-badge {
+  padding: 0.25rem 0.5rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.reason-inappropriate { background-color: #f8d7da; color: #721c24; }
+.reason-fake { background-color: #fff3cd; color: #856404; }
+.reason-harassment { background-color: #d1ecf1; color: #0c5460; }
+.reason-spam { background-color: #d4edda; color: #155724; }
+.reason-underage { background-color: #f8d7da; color: #721c24; }
+.reason-other { background-color: #e2e3e5; color: #383d41; }
+
+.status-pending { background-color: #fff3cd; color: #856404; }
+.status-resolved { background-color: #d4edda; color: #155724; }
+.status-dismissed { background-color: #e2e3e5; color: #383d41; }
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.4rem 0.75rem;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.view-btn {
+  background-color: #007bff;
+  color: white;
+}
+
+.view-btn:hover {
+  background-color: #0056b3;
+  transform: translateY(-1px);
+}
+
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background-color: #f8f9fa;
+  border-top: 1px solid #dee2e6;
+}
+
+.pagination-btn {
+  padding: 0.5rem 1rem;
+  background-color: white;
+  border: 1px solid #ced4da;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #495057;
+  font-weight: 500;
+}
+
+.pagination-btn:hover:not(:disabled) {
+  background-color: #f8f9fa;
+  border-color: #ced4da;
+}
+
+.pagination-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pagination-info {
+  color: #6c757d;
+}
+
+.no-results {
+  text-align: center;
+  padding: 3rem;
+  color: #6c757d;
+  font-style: italic;
+}
+
+/* Адаптивные стили */
+@media (max-width: 767px) {
+  .hide-sm {
+    display: none;
+  }
+  
+  .reports-table th,
+  .reports-table td {
+    padding: 0.6rem 0.5rem;
+    font-size: 0.85rem;
+  }
+  
+  .btn-text {
+    display: none;
+  }
+  
+  .filter-options {
+    gap: 0.5rem;
+  }
+  
+  h2 {
+    font-size: 1.3rem;
+    margin-bottom: 1rem;
+  }
+  
+  .admin-reports {
+    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/* Устройства с вырезом (notch) */
+@supports (padding: env(safe-area-inset-bottom)) {
+  .admin-reports {
+    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/* Ландшафтная ориентация на мобильных */
+@media (max-height: 450px) and (orientation: landscape) {
+  .admin-reports {
+    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
+  }
+}
+</style>