переработка админ панели6

frontend/src/components/admin/AddEmployeeModal.vue

@@ -0,0 +1,265 @@
+<template>
+  <div v-if="isOpen" class="modal-overlay" @click="closeModal">
+    <div class="modal-content" @click.stop>
+      <div class="modal-header">
+        <h2>Добавить сотрудника</h2>
+        <button class="close-button" @click="closeModal">&times;</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit" class="modal-form">
+        <div class="form-group">
+          <label for="first_name">Имя</label>
+          <input
+            type="text"
+            id="first_name"
+            v-model="formData.first_name"
+            required
+            class="form-input"
+            placeholder="Введите имя"
+          >
+        </div>
+
+        <div class="form-group">
+          <label for="last_name">Фамилия</label>
+          <input
+            type="text"
+            id="last_name"
+            v-model="formData.last_name"
+            required
+            class="form-input"
+            placeholder="Введите фамилию"
+          >
+        </div>
+
+        <div class="form-group">
+          <label for="password">Пароль</label>
+          <input
+            type="password"
+            id="password"
+            v-model="formData.password"
+            required
+            class="form-input"
+            placeholder="Введите пароль"
+          >
+        </div>
+
+        <div class="form-group">
+          <label for="department">Отдел</label>
+          <input
+            type="text"
+            id="department"
+            v-model="formData.department"
+            required
+            class="form-input"
+            placeholder="Введите название отдела"
+          >
+        </div>
+
+        <div class="form-actions">
+          <button type="submit" class="submit-button" :disabled="isLoading">
+            {{ isLoading ? 'Добавление...' : 'Добавить' }}
+          </button>
+          <button type="button" class="cancel-button" @click="closeModal">
+            Отмена
+          </button>
+        </div>
+
+        <p v-if="error" class="error-message">{{ error }}</p>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'AddEmployeeModal',
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      formData: {
+        first_name: '',
+        last_name: '',
+        password: '',
+        department: ''
+      },
+      error: '',
+      isLoading: false
+    }
+  },
+  methods: {
+    closeModal() {
+      this.$emit('close')
+      this.resetForm()
+    },
+    resetForm() {
+      this.formData = {
+        first_name: '',
+        last_name: '',
+        password: '',
+        department: ''
+      }
+      this.error = ''
+    },
+    async handleSubmit() {
+      this.error = ''
+      this.isLoading = true
+      
+      try {
+        await axios.post('/api/employees', this.formData, {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('admin_token')}`
+          }
+        })
+        
+        this.$emit('employee-added')
+        this.closeModal()
+      } catch (error) {
+        this.error = error.response?.data?.detail || 'Ошибка при добавлении сотрудника'
+      } finally {
+        this.isLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  width: 100%;
+  max-width: 500px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.modal-header h2 {
+  margin: 0;
+  color: #1a237e;
+  font-size: 1.5rem;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #666;
+  cursor: pointer;
+  padding: 0.5rem;
+  transition: color 0.3s;
+}
+
+.close-button:hover {
+  color: #1a237e;
+}
+
+.modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-group label {
+  color: #1a237e;
+  font-weight: 500;
+}
+
+.form-input {
+  padding: 0.75rem;
+  border: 2px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 1rem;
+  transition: border-color 0.3s;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #1a237e;
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.submit-button {
+  flex: 1;
+  background-color: #1a237e;
+  color: white;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.submit-button:hover:not(:disabled) {
+  background-color: #283593;
+}
+
+.submit-button:disabled {
+  background-color: #9fa8da;
+  cursor: not-allowed;
+}
+
+.cancel-button {
+  flex: 1;
+  background-color: #f5f5f5;
+  color: #666;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.cancel-button:hover {
+  background-color: #e0e0e0;
+  color: #1a237e;
+}
+
+.error-message {
+  color: #d32f2f;
+  text-align: center;
+  margin: 0;
+  font-size: 0.9rem;
+}
+</style> 

frontend/src/router/index.ts

@@ -36,12 +36,6 @@ const router = createRouter({
       component: () => import('@/views/admin/EmployeesView.vue'),
       meta: { requiresAdmin: true }
     },
-    {
-      path: '/admin/employees/add',
-      name: 'admin-employees-add',
-      component: () => import('@/views/admin/AddEmployeeView.vue'),
-      meta: { requiresAdmin: true }
-    },
     {
       path: '/admin/requests',
       name: 'admin-requests',

frontend/src/views/admin/AdminDashboardView.vue

@@ -28,11 +28,11 @@
         </div>
 
         <div class="actions-grid">
-          <router-link to="/admin/employees/add" class="action-card">
+          <div class="action-card" @click="showAddEmployeeModal">
             <div class="action-icon">👥</div>
             <h3>Добавить сотрудника</h3>
             <p>Регистрация нового сотрудника в системе</p>
-          </router-link>
+          </div>
 
           <router-link to="/admin/requests" class="action-card">
             <div class="action-icon">📝</div>
@@ -49,19 +49,27 @@
       </div>
     </main>
     <AdminFooter />
+    
+    <AddEmployeeModal 
+      :is-open="isAddEmployeeModalOpen"
+      @close="closeAddEmployeeModal"
+      @employee-added="handleEmployeeAdded"
+    />
   </div>
 </template>
 
 <script>
 import AdminHeader from '@/components/AdminHeader.vue'
 import AdminFooter from '@/components/AdminFooter.vue'
+import AddEmployeeModal from '@/components/admin/AddEmployeeModal.vue'
 import axios from 'axios'
 
 export default {
   name: 'AdminDashboardView',
   components: {
     AdminHeader,
-    AdminFooter
+    AdminFooter,
+    AddEmployeeModal
   },
   data() {
     return {
@@ -69,20 +77,36 @@ export default {
         total_requests: 0,
         by_status: {},
         by_priority: {}
+      },
+      isAddEmployeeModalOpen: false
+    }
+  },
+  methods: {
+    showAddEmployeeModal() {
+      this.isAddEmployeeModalOpen = true
+    },
+    closeAddEmployeeModal() {
+      this.isAddEmployeeModalOpen = false
+    },
+    handleEmployeeAdded() {
+      // Можно добавить уведомление об успешном добавлении
+      console.log('Сотрудник успешно добавлен')
+    },
+    async fetchStatistics() {
+      try {
+        const response = await axios.get('/api/requests/statistics', {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('admin_token')}`
+          }
+        });
+        this.statistics = response.data;
+      } catch (error) {
+        console.error('Error fetching statistics:', error);
       }
     }
   },
   async created() {
-    try {
+    await this.fetchStatistics()
-      const response = await axios.get('/api/requests/statistics', {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('admin_token')}`
-        }
-      });
-      this.statistics = response.data;
-    } catch (error) {
-      console.error('Error fetching statistics:', error);
-    }
   }
 }
 </script>
@@ -153,6 +177,7 @@ export default {
   text-decoration: none;
   color: inherit;
   transition: transform 0.3s, box-shadow 0.3s;
+  cursor: pointer;
 }
 
 .action-card:hover {