From 2e74c56f706bdbc87fe93921432ae31104d03f4f Mon Sep 17 00:00:00 2001
From: MoonTestUse1 <crocoman7887@gmail.com>
Date: Thu, 2 Jan 2025 03:27:23 +0600
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=B4=D0=B5=D0=BB?=
 =?UTF-8?q?=D0=BA=D0=B07?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/AdminDashboardView.vue | 201 ++++++++++++----------
 1 file changed, 108 insertions(+), 93 deletions(-)

diff --git a/frontend/src/views/AdminDashboardView.vue b/frontend/src/views/AdminDashboardView.vue
index b69dd15..0516537 100644
--- a/frontend/src/views/AdminDashboardView.vue
+++ b/frontend/src/views/AdminDashboardView.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="min-h-screen bg-gray-100">
+  <div class="min-h-screen bg-gray-900">
     <!-- Верхняя панель -->
-    <header class="bg-white border-b">
+    <header class="bg-navy-900 border-b border-navy-700">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between items-center h-16">
-          <h1 class="text-xl font-medium text-gray-900">Панель администратора</h1>
+          <h1 class="text-xl font-medium text-white">Панель администратора</h1>
           <button 
             @click="handleLogout"
-            class="text-gray-500 hover:text-gray-700 font-medium"
+            class="text-gray-300 hover:text-white font-medium transition-colors"
           >
             Выйти
           </button>
@@ -18,48 +18,48 @@
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <!-- Статистика -->
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 mb-8">
-        <div class="bg-white p-6 rounded-lg">
-          <div class="text-sm font-medium text-gray-500 mb-1">Новые заявки</div>
-          <div class="text-2xl font-medium text-gray-900">{{ statistics.new || 0 }}</div>
+        <div class="bg-navy-800 p-6 rounded-lg border border-navy-700">
+          <div class="text-sm font-medium text-gray-400 mb-1">Новые заявки</div>
+          <div class="text-2xl font-medium text-white">{{ statistics.new || 0 }}</div>
         </div>
-        <div class="bg-white p-6 rounded-lg">
-          <div class="text-sm font-medium text-gray-500 mb-1">В работе</div>
-          <div class="text-2xl font-medium text-gray-900">{{ statistics.inProgress || 0 }}</div>
+        <div class="bg-navy-800 p-6 rounded-lg border border-navy-700">
+          <div class="text-sm font-medium text-gray-400 mb-1">В работе</div>
+          <div class="text-2xl font-medium text-white">{{ statistics.inProgress || 0 }}</div>
         </div>
-        <div class="bg-white p-6 rounded-lg">
-          <div class="text-sm font-medium text-gray-500 mb-1">Решенные</div>
-          <div class="text-2xl font-medium text-gray-900">{{ statistics.resolved || 0 }}</div>
+        <div class="bg-navy-800 p-6 rounded-lg border border-navy-700">
+          <div class="text-sm font-medium text-gray-400 mb-1">Решенные</div>
+          <div class="text-2xl font-medium text-white">{{ statistics.resolved || 0 }}</div>
         </div>
       </div>
 
       <!-- Заявки -->
       <div class="mb-8">
         <div class="flex justify-between items-center mb-4">
-          <h2 class="text-lg font-medium text-gray-900">Заявки</h2>
+          <h2 class="text-lg font-medium text-white">Заявки</h2>
         </div>
-        <div class="bg-white rounded-lg overflow-hidden">
+        <div class="bg-navy-800 rounded-lg overflow-hidden border border-navy-700">
           <div class="overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
+            <table class="min-w-full divide-y divide-navy-700">
               <thead>
                 <tr>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">ID</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Сотрудник</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Отдел</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Тип</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Приоритет</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Статус</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Действия</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">ID</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Сотрудник</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Отдел</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Тип</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Приоритет</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Статус</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Действия</th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-gray-200">
-                <tr v-for="request in requests" :key="request.id" class="hover:bg-gray-50">
-                  <td class="px-6 py-4 text-sm text-gray-900">{{ request.id }}</td>
+              <tbody class="divide-y divide-navy-700">
+                <tr v-for="request in requests" :key="request.id" class="hover:bg-navy-700">
+                  <td class="px-6 py-4 text-sm text-gray-300">{{ request.id }}</td>
                   <td class="px-6 py-4">
-                    <div class="text-sm text-gray-900">{{ request.employee?.last_name }}</div>
-                    <div class="text-sm text-gray-500">{{ request.employee?.first_name }}</div>
+                    <div class="text-sm text-gray-300">{{ request.employee?.last_name }}</div>
+                    <div class="text-sm text-gray-400">{{ request.employee?.first_name }}</div>
                   </td>
-                  <td class="px-6 py-4 text-sm text-gray-900">{{ request.department }}</td>
-                  <td class="px-6 py-4 text-sm text-gray-900">{{ request.request_type }}</td>
+                  <td class="px-6 py-4 text-sm text-gray-300">{{ request.department }}</td>
+                  <td class="px-6 py-4 text-sm text-gray-300">{{ request.request_type }}</td>
                   <td class="px-6 py-4">
                     <span :class="getPriorityClass(request.priority)">{{ request.priority }}</span>
                   </td>
@@ -69,14 +69,14 @@
                   <td class="px-6 py-4 text-sm">
                     <button
                       @click="openRequestDetails(request)"
-                      class="text-gray-700 hover:text-gray-900 mr-3"
+                      class="text-blue-400 hover:text-blue-300 mr-3"
                     >
                       Подробнее
                     </button>
                     <button
                       v-if="request.status !== 'resolved'"
                       @click="updateRequestStatus(request)"
-                      class="text-blue-600 hover:text-blue-700"
+                      class="text-blue-400 hover:text-blue-300"
                     >
                       {{ request.status === 'new' ? 'Взять в работу' : 'Завершить' }}
                     </button>
@@ -91,38 +91,38 @@
       <!-- Сотрудники -->
       <div>
         <div class="flex justify-between items-center mb-4">
-          <h2 class="text-lg font-medium text-gray-900">Сотрудники</h2>
+          <h2 class="text-lg font-medium text-white">Сотрудники</h2>
           <button
             @click="openAddEmployeeModal"
-            class="inline-flex items-center px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700"
+            class="inline-flex items-center px-4 py-2 text-sm font-medium text-blue-400 hover:text-blue-300 transition-colors"
           >
             + Добавить сотрудника
           </button>
         </div>
-        <div class="bg-white rounded-lg overflow-hidden">
+        <div class="bg-navy-800 rounded-lg overflow-hidden border border-navy-700">
           <div class="overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200">
+            <table class="min-w-full divide-y divide-navy-700">
               <thead>
                 <tr>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">ID</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Имя</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Фамилия</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Отдел</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Кабинет</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Действия</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">ID</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Имя</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Фамилия</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Отдел</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Кабинет</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider bg-navy-900">Действия</th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-gray-200">
-                <tr v-for="employee in employees" :key="employee.id" class="hover:bg-gray-50">
-                  <td class="px-6 py-4 text-sm text-gray-900">{{ employee.id }}</td>
-                  <td class="px-6 py-4 text-sm text-gray-900">{{ employee.first_name }}</td>
-                  <td class="px-6 py-4 text-sm text-gray-900">{{ employee.last_name }}</td>
-                  <td class="px-6 py-4 text-sm text-gray-900">{{ employee.department }}</td>
-                  <td class="px-6 py-4 text-sm text-gray-900">{{ employee.office }}</td>
+              <tbody class="divide-y divide-navy-700">
+                <tr v-for="employee in employees" :key="employee.id" class="hover:bg-navy-700">
+                  <td class="px-6 py-4 text-sm text-gray-300">{{ employee.id }}</td>
+                  <td class="px-6 py-4 text-sm text-gray-300">{{ employee.first_name }}</td>
+                  <td class="px-6 py-4 text-sm text-gray-300">{{ employee.last_name }}</td>
+                  <td class="px-6 py-4 text-sm text-gray-300">{{ employee.department }}</td>
+                  <td class="px-6 py-4 text-sm text-gray-300">{{ employee.office }}</td>
                   <td class="px-6 py-4 text-sm">
                     <button
                       @click="openEditEmployeeModal(employee)"
-                      class="text-gray-700 hover:text-gray-900"
+                      class="text-blue-400 hover:text-blue-300"
                     >
                       Редактировать
                     </button>
@@ -136,11 +136,11 @@
     </main>
 
     <!-- Модальное окно для заявки -->
-    <div v-if="showRequestModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
-      <div class="bg-white rounded-lg max-w-2xl w-full">
-        <div class="flex justify-between items-center p-6 border-b">
-          <h3 class="text-lg font-medium text-gray-900">Заявка #{{ selectedRequest?.id }}</h3>
-          <button @click="showRequestModal = false" class="text-gray-400 hover:text-gray-500">
+    <div v-if="showRequestModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4">
+      <div class="bg-navy-800 rounded-lg max-w-2xl w-full border border-navy-700">
+        <div class="flex justify-between items-center p-6 border-b border-navy-700">
+          <h3 class="text-lg font-medium text-white">Заявка #{{ selectedRequest?.id }}</h3>
+          <button @click="showRequestModal = false" class="text-gray-400 hover:text-gray-300">
             <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             </svg>
@@ -149,26 +149,26 @@
         <div class="p-6">
           <div class="space-y-4">
             <div>
-              <div class="text-sm font-medium text-gray-500">Описание</div>
-              <div class="mt-1 text-sm text-gray-900">{{ selectedRequest?.description }}</div>
+              <div class="text-sm font-medium text-gray-400">Описание</div>
+              <div class="mt-1 text-sm text-gray-300">{{ selectedRequest?.description }}</div>
             </div>
             <div class="grid grid-cols-2 gap-4">
               <div>
-                <div class="text-sm font-medium text-gray-500">Сотрудник</div>
-                <div class="mt-1 text-sm text-gray-900">
+                <div class="text-sm font-medium text-gray-400">Сотрудник</div>
+                <div class="mt-1 text-sm text-gray-300">
                   {{ selectedRequest?.employee?.last_name }} {{ selectedRequest?.employee?.first_name }}
                 </div>
               </div>
               <div>
-                <div class="text-sm font-medium text-gray-500">Отдел</div>
-                <div class="mt-1 text-sm text-gray-900">{{ selectedRequest?.department }}</div>
+                <div class="text-sm font-medium text-gray-400">Отдел</div>
+                <div class="mt-1 text-sm text-gray-300">{{ selectedRequest?.department }}</div>
               </div>
               <div>
-                <div class="text-sm font-medium text-gray-500">Тип заявки</div>
-                <div class="mt-1 text-sm text-gray-900">{{ selectedRequest?.request_type }}</div>
+                <div class="text-sm font-medium text-gray-400">Тип заявки</div>
+                <div class="mt-1 text-sm text-gray-300">{{ selectedRequest?.request_type }}</div>
               </div>
               <div>
-                <div class="text-sm font-medium text-gray-500">Приоритет</div>
+                <div class="text-sm font-medium text-gray-400">Приоритет</div>
                 <div class="mt-1">
                   <span :class="getPriorityClass(selectedRequest?.priority)">
                     {{ selectedRequest?.priority }}
@@ -178,17 +178,17 @@
             </div>
           </div>
         </div>
-        <div class="flex justify-end gap-3 p-6 border-t bg-gray-50">
+        <div class="flex justify-end gap-3 p-6 border-t border-navy-700 bg-navy-900">
           <button
             @click="showRequestModal = false"
-            class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
+            class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-gray-300"
           >
             Закрыть
           </button>
           <button
             v-if="selectedRequest?.status !== 'resolved'"
             @click="updateRequestStatus(selectedRequest)"
-            class="px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700"
+            class="px-4 py-2 text-sm font-medium text-blue-400 hover:text-blue-300"
           >
             {{ selectedRequest?.status === 'new' ? 'Взять в работу' : 'Завершить' }}
           </button>
@@ -197,13 +197,13 @@
     </div>
 
     <!-- Модальное окно для сотрудника -->
-    <div v-if="showEmployeeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
-      <div class="bg-white rounded-lg max-w-md w-full">
-        <div class="flex justify-between items-center p-6 border-b">
-          <h3 class="text-lg font-medium text-gray-900">
+    <div v-if="showEmployeeModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4">
+      <div class="bg-navy-800 rounded-lg max-w-md w-full border border-navy-700">
+        <div class="flex justify-between items-center p-6 border-b border-navy-700">
+          <h3 class="text-lg font-medium text-white">
             {{ isEditingEmployee ? 'Редактировать сотрудника' : 'Добавить сотрудника' }}
           </h3>
-          <button @click="showEmployeeModal = false" class="text-gray-400 hover:text-gray-500">
+          <button @click="showEmployeeModal = false" class="text-gray-400 hover:text-gray-300">
             <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             </svg>
@@ -212,65 +212,65 @@
         <form @submit.prevent="handleEmployeeSubmit" class="p-6">
           <div class="space-y-4">
             <div>
-              <label class="block text-sm font-medium text-gray-700">Имя</label>
+              <label class="block text-sm font-medium text-gray-400">Имя</label>
               <input
                 v-model="employeeForm.first_name"
                 type="text"
                 required
-                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-400 focus:ring-0"
+                class="mt-1 block w-full rounded-md bg-navy-900 border-navy-700 text-gray-300 focus:border-blue-500 focus:ring-0"
               />
             </div>
             <div>
-              <label class="block text-sm font-medium text-gray-700">Фамилия</label>
+              <label class="block text-sm font-medium text-gray-400">Фамилия</label>
               <input
                 v-model="employeeForm.last_name"
                 type="text"
                 required
-                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-400 focus:ring-0"
+                class="mt-1 block w-full rounded-md bg-navy-900 border-navy-700 text-gray-300 focus:border-blue-500 focus:ring-0"
               />
             </div>
             <div>
-              <label class="block text-sm font-medium text-gray-700">Отдел</label>
+              <label class="block text-sm font-medium text-gray-400">Отдел</label>
               <input
                 v-model="employeeForm.department"
                 type="text"
                 required
-                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-400 focus:ring-0"
+                class="mt-1 block w-full rounded-md bg-navy-900 border-navy-700 text-gray-300 focus:border-blue-500 focus:ring-0"
               />
             </div>
             <div>
-              <label class="block text-sm font-medium text-gray-700">Кабинет</label>
+              <label class="block text-sm font-medium text-gray-400">Кабинет</label>
               <input
                 v-model="employeeForm.office"
                 type="text"
                 required
-                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-400 focus:ring-0"
+                class="mt-1 block w-full rounded-md bg-navy-900 border-navy-700 text-gray-300 focus:border-blue-500 focus:ring-0"
               />
             </div>
             <div>
-              <label class="block text-sm font-medium text-gray-700">
+              <label class="block text-sm font-medium text-gray-400">
                 Пароль {{ isEditingEmployee ? '(оставьте пустым, чтобы не менять)' : '' }}
               </label>
               <input
                 v-model="employeeForm.password"
                 type="password"
                 :required="!isEditingEmployee"
-                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-400 focus:ring-0"
+                class="mt-1 block w-full rounded-md bg-navy-900 border-navy-700 text-gray-300 focus:border-blue-500 focus:ring-0"
               />
             </div>
           </div>
         </form>
-        <div class="flex justify-end gap-3 p-6 border-t bg-gray-50">
+        <div class="flex justify-end gap-3 p-6 border-t border-navy-700 bg-navy-900">
           <button
             type="button"
             @click="showEmployeeModal = false"
-            class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
+            class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-gray-300"
           >
             Отмена
           </button>
           <button
             type="submit"
-            class="px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700"
+            class="px-4 py-2 text-sm font-medium text-blue-400 hover:text-blue-300"
           >
             {{ isEditingEmployee ? 'Сохранить' : 'Добавить' }}
           </button>
@@ -450,16 +450,16 @@ const updateRequestStatus = async (request: Request | null) => {
 }
 
 const priorityClasses = {
-  low: 'px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800',
-  medium: 'px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800',
-  high: 'px-2 py-1 text-xs rounded-full bg-orange-100 text-orange-800',
-  critical: 'px-2 py-1 text-xs rounded-full bg-red-100 text-red-800'
+  low: 'px-2 py-1 text-xs rounded-full bg-navy-700 text-blue-300',
+  medium: 'px-2 py-1 text-xs rounded-full bg-yellow-900 text-yellow-300',
+  high: 'px-2 py-1 text-xs rounded-full bg-orange-900 text-orange-300',
+  critical: 'px-2 py-1 text-xs rounded-full bg-red-900 text-red-300'
 } as const
 
 const statusClasses = {
-  new: 'px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800',
-  in_progress: 'px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800',
-  resolved: 'px-2 py-1 text-xs rounded-full bg-green-100 text-green-800'
+  new: 'px-2 py-1 text-xs rounded-full bg-navy-700 text-blue-300',
+  in_progress: 'px-2 py-1 text-xs rounded-full bg-blue-900 text-blue-300',
+  resolved: 'px-2 py-1 text-xs rounded-full bg-green-900 text-green-300'
 } as const
 
 const getPriorityClass = (priority: Request['priority'] | undefined) => {
@@ -472,4 +472,19 @@ const getStatusClass = (status: Request['status']) => {
 }
 
 onMounted(fetchData)
-</script> 
+</script>
+
+<style>
+.bg-navy-900 {
+  background-color: #1a1f2c;
+}
+.bg-navy-800 {
+  background-color: #1f2937;
+}
+.bg-navy-700 {
+  background-color: #2d3748;
+}
+.border-navy-700 {
+  border-color: #2d3748;
+}
+</style>