возврат дизайна

frontend/src/views/admin/AdminDashboardView.vue

@@ -1,69 +1,118 @@
 <template>
-  <div class="admin-dashboard">
-    <div class="dashboard-header">
-      <h1>Панель администратора</h1>
-      <button @click="logout" class="logout-button">Выйти</button>
-    </div>
+  <div class="admin-layout">
+    <AdminHeader />
+    <main class="admin-main">
+      <div class="dashboard-container">
+        <h1 class="dashboard-title">Панель управления</h1>
+        
+        <div class="stats-grid">
+          <div class="stat-card">
+            <h3>Всего заявок</h3>
+            <p class="stat-number">{{ statistics.total_requests || 0 }}</p>
+          </div>
+          
+          <div class="stat-card">
+            <h3>Новые заявки</h3>
+            <p class="stat-number">{{ statistics.by_status?.new || 0 }}</p>
+          </div>
+          
+          <div class="stat-card">
+            <h3>В работе</h3>
+            <p class="stat-number">{{ statistics.by_status?.in_progress || 0 }}</p>
+          </div>
+          
+          <div class="stat-card">
+            <h3>Завершенные</h3>
+            <p class="stat-number">{{ statistics.by_status?.completed || 0 }}</p>
+          </div>
+        </div>
 
-    <div class="dashboard-content">
-      <div class="action-buttons">
-        <button @click="showAddEmployeeModal = true" class="action-button">
-          Добавить сотрудника
-        </button>
-        <button @click="showEmployeesModal = true" class="action-button">
-          Список сотрудников
-        </button>
-        <button @click="showRequestsModal = true" class="action-button">
-          Управление заявками
-        </button>
+        <div class="actions-grid">
+          <div class="action-card" @click="showAddEmployeeModal = true">
+            <div class="action-icon">👥</div>
+            <h3>Добавить сотрудника</h3>
+            <p>Регистрация нового сотрудника в системе</p>
+          </div>
+
+          <div class="action-card" @click="showRequestsModal = true">
+            <div class="action-icon">📝</div>
+            <h3>Управление заявками</h3>
+            <p>Просмотр и обработка заявок</p>
+          </div>
+
+          <div class="action-card" @click="showEmployeesModal = true">
+            <div class="action-icon">👤</div>
+            <h3>Список сотрудников</h3>
+            <p>Управление учетными записями</p>
+          </div>
+        </div>
       </div>
+    </main>
+    <AdminFooter />
 
-      <!-- Модальные окна -->
-      <AddEmployeeModal
-        v-if="showAddEmployeeModal"
-        :isOpen="showAddEmployeeModal"
-        @close="showAddEmployeeModal = false"
-        @employee-added="handleEmployeeAdded"
-      />
+    <!-- Модальные окна -->
+    <AddEmployeeModal
+      v-if="showAddEmployeeModal"
+      :isOpen="showAddEmployeeModal"
+      @close="showAddEmployeeModal = false"
+      @employee-added="handleEmployeeAdded"
+    />
 
-      <EmployeesModal
-        v-if="showEmployeesModal"
-        :isOpen="showEmployeesModal"
-        @close="showEmployeesModal = false"
-      />
+    <EmployeesModal
+      v-if="showEmployeesModal"
+      :isOpen="showEmployeesModal"
+      @close="showEmployeesModal = false"
+    />
 
-      <RequestsModal
-        v-if="showRequestsModal"
-        :isOpen="showRequestsModal"
-        @close="showRequestsModal = false"
-      />
-    </div>
+    <RequestsModal
+      v-if="showRequestsModal"
+      :isOpen="showRequestsModal"
+      @close="showRequestsModal = false"
+    />
   </div>
 </template>
 
 <script>
+import AdminHeader from '@/components/AdminHeader.vue'
+import AdminFooter from '@/components/AdminFooter.vue'
 import AddEmployeeModal from '@/components/admin/AddEmployeeModal.vue'
-import EmployeesModal from '@/components/admin/EmployeesModal.vue'
 import RequestsModal from '@/components/admin/RequestsModal.vue'
+import EmployeesModal from '@/components/admin/EmployeesModal.vue'
+import axios from 'axios'
 
 export default {
   name: 'AdminDashboardView',
   components: {
+    AdminHeader,
+    AdminFooter,
     AddEmployeeModal,
-    EmployeesModal,
-    RequestsModal
+    RequestsModal,
+    EmployeesModal
   },
   data() {
     return {
+      statistics: {
+        total_requests: 0,
+        by_status: {},
+        by_priority: {}
+      },
       showAddEmployeeModal: false,
-      showEmployeesModal: false,
-      showRequestsModal: false
+      showRequestsModal: false,
+      showEmployeesModal: false
     }
   },
   methods: {
-    logout() {
-      localStorage.removeItem('admin_token')
-      this.$router.push('/admin/login')
+    async fetchStatistics() {
+      try {
+        const response = await axios.get('/api/statistics', {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('admin_token')}`
+          }
+        })
+        this.statistics = response.data
+      } catch (error) {
+        console.error('Error fetching statistics:', error)
+      }
     },
     handleEmployeeAdded() {
       // Обновляем список сотрудников, если модальное окно списка открыто
@@ -71,93 +120,113 @@ export default {
         this.$refs.employeesModal?.fetchEmployees()
       }
     }
+  },
+  async created() {
+    await this.fetchStatistics()
   }
 }
 </script>
 
 <style scoped>
-.admin-dashboard {
+.admin-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+}
+
+.admin-main {
+  flex: 1;
   padding: 2rem;
+}
+
+.dashboard-container {
   max-width: 1200px;
   margin: 0 auto;
 }
 
-.dashboard-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 3rem;
-}
-
-.dashboard-header h1 {
-  margin: 0;
+.dashboard-title {
   color: #1a237e;
+  margin-bottom: 2rem;
   font-size: 2rem;
 }
 
-.logout-button {
-  background-color: #f44336;
-  color: white;
-  padding: 0.75rem 1.5rem;
-  border: none;
-  border-radius: 6px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.logout-button:hover {
-  background-color: #d32f2f;
-}
-
-.action-buttons {
+.stats-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1.5rem;
   margin-bottom: 2rem;
 }
 
-.action-button {
-  background-color: #1a237e;
-  color: white;
+.stat-card {
+  background: white;
   padding: 1.5rem;
-  border: none;
   border-radius: 8px;
-  font-size: 1.1rem;
-  cursor: pointer;
-  transition: all 0.3s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   text-align: center;
-  min-height: 100px;
 }
 
-.action-button:hover {
-  background-color: #283593;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+.stat-card h3 {
+  color: #1a237e;
+  margin: 0 0 1rem 0;
+  font-size: 1.1rem;
+}
+
+.stat-number {
+  font-size: 2rem;
+  font-weight: bold;
+  color: #1a237e;
+  margin: 0;
+}
+
+.actions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.action-card {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  text-decoration: none;
+  color: inherit;
+  transition: transform 0.3s, box-shadow 0.3s;
+  cursor: pointer;
+}
+
+.action-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.action-icon {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.action-card h3 {
+  color: #1a237e;
+  margin: 0 0 0.5rem 0;
+}
+
+.action-card p {
+  margin: 0;
+  color: #666;
 }
 
 @media (max-width: 768px) {
-  .admin-dashboard {
+  .admin-main {
     padding: 1rem;
   }
 
-  .dashboard-header {
-    flex-direction: column;
-    gap: 1rem;
-    text-align: center;
-    margin-bottom: 2rem;
-  }
-
-  .action-buttons {
+  .stats-grid {
     grid-template-columns: 1fr;
   }
 
-  .action-button {
-    padding: 1rem;
-    min-height: 80px;
+  .actions-grid {
+    grid-template-columns: 1fr;
   }
 }
 </style>