Темная тема

frontend/src/assets/main.css

@@ -1,3 +1,38 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities; 
+@tailwind utilities;
+
+:root {
+  /* Светлая тема */
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f3f4f6;
+  --color-text-primary: #111827;
+  --color-text-secondary: #4b5563;
+  --color-border: #e5e7eb;
+  --color-input-bg: #ffffff;
+  --color-input-border: #d1d5db;
+  --color-button-primary: #3b82f6;
+  --color-button-hover: #2563eb;
+  --color-card-bg: #ffffff;
+  --color-card-shadow: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] {
+  /* Темная тема */
+  --color-bg-primary: #111827;
+  --color-bg-secondary: #1f2937;
+  --color-text-primary: #f9fafb;
+  --color-text-secondary: #9ca3af;
+  --color-border: #374151;
+  --color-input-bg: #1f2937;
+  --color-input-border: #374151;
+  --color-button-primary: #3b82f6;
+  --color-button-hover: #60a5fa;
+  --color-card-bg: #1f2937;
+  --color-card-shadow: rgba(0, 0, 0, 0.3);
+}
+
+/* Плавный переход между темами */
+* {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+} 

frontend/src/components/ThemeToggle.vue

@@ -0,0 +1,70 @@
+<template>
+  <button
+    @click="toggleTheme"
+    class="p-2 rounded-lg hover:bg-opacity-20 hover:bg-gray-500 transition-colors"
+    :title="isDark ? 'Переключить на светлую тему' : 'Переключить на темную тему'"
+  >
+    <!-- Иконка солнца для светлой темы -->
+    <svg
+      v-if="isDark"
+      class="w-6 h-6 text-yellow-400"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+      />
+    </svg>
+    <!-- Иконка луны для темной темы -->
+    <svg
+      v-else
+      class="w-6 h-6 text-gray-600"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+      />
+    </svg>
+  </button>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const isDark = ref(false)
+
+// Функция переключения темы
+const toggleTheme = () => {
+  isDark.value = !isDark.value
+  updateTheme()
+}
+
+// Функция обновления темы
+const updateTheme = () => {
+  // Обновляем атрибут data-theme на html элементе
+  document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : 'light')
+  // Сохраняем выбор в localStorage
+  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
+}
+
+// При монтировании компонента
+onMounted(() => {
+  // Проверяем сохраненную тему
+  const savedTheme = localStorage.getItem('theme')
+  // Проверяем системные настройки
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  
+  // Устанавливаем тему
+  isDark.value = savedTheme ? savedTheme === 'dark' : prefersDark
+  updateTheme()
+})
+</script> 

frontend/src/views/EmployeeView.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="min-h-screen bg-primary text-primary">
+    <!-- Шапка -->
+    <header class="bg-secondary border-b border-border">
+      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+        <h1 class="text-xl font-semibold">IT Support</h1>
+        <div class="flex items-center space-x-4">
+          <ThemeToggle />
+          <button 
+            @click="handleLogout" 
+            class="text-button-primary hover:text-button-hover transition-colors"
+          >
+            Выйти
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <!-- Основной контент -->
+    <main class="container mx-auto px-4 py-8">
+      <!-- Форма создания заявки -->
+      <div class="bg-card rounded-lg shadow-lg p-6 mb-8">
+        <h2 class="text-lg font-semibold mb-4">Создать заявку</h2>
+        <form @submit.prevent="submitRequest" class="space-y-4">
+          <div>
+            <label class="block text-secondary mb-1">Тема</label>
+            <input
+              v-model="requestForm.title"
+              type="text"
+              required
+              class="w-full px-4 py-2 rounded-lg bg-input text-primary border border-input-border focus:border-button-primary transition-colors"
+              placeholder="Введите тему заявки"
+            >
+          </div>
+          <div>
+            <label class="block text-secondary mb-1">Описание</label>
+            <textarea
+              v-model="requestForm.description"
+              required
+              rows="4"
+              class="w-full px-4 py-2 rounded-lg bg-input text-primary border border-input-border focus:border-button-primary transition-colors"
+              placeholder="Опишите вашу проблему"
+            ></textarea>
+          </div>
+          <div>
+            <label class="block text-secondary mb-1">Приоритет</label>
+            <select
+              v-model="requestForm.priority"
+              required
+              class="w-full px-4 py-2 rounded-lg bg-input text-primary border border-input-border focus:border-button-primary transition-colors"
+            >
+              <option value="low">Низкий</option>
+              <option value="medium">Средний</option>
+              <option value="high">Высокий</option>
+            </select>
+          </div>
+          <button
+            type="submit"
+            class="w-full bg-button-primary hover:bg-button-hover text-white font-medium py-2 px-4 rounded-lg transition-colors"
+            :disabled="isSubmitting"
+          >
+            {{ isSubmitting ? 'Отправка...' : 'Отправить заявку' }}
+          </button>
+        </form>
+      </div>
+
+      <!-- Список заявок -->
+      <div class="bg-card rounded-lg shadow-lg p-6">
+        <h2 class="text-lg font-semibold mb-4">Мои заявки</h2>
+        <div class="space-y-4">
+          <div
+            v-for="request in requests"
+            :key="request.id"
+            class="border border-border rounded-lg p-4"
+          >
+            <div class="flex justify-between items-start">
+              <div>
+                <h3 class="font-medium">{{ request.title }}</h3>
+                <p class="text-secondary mt-1">{{ request.description }}</p>
+              </div>
+              <span 
+                class="px-2 py-1 rounded-full text-sm"
+                :class="getStatusClass(request.status)"
+              >
+                {{ getStatusLabel(request.status) }}
+              </span>
+            </div>
+            <div class="mt-2 text-sm text-secondary">
+              {{ new Date(request.created_at).toLocaleString() }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import ThemeToggle from '@/components/ThemeToggle.vue'
+
+const router = useRouter()
+const requests = ref([])
+const isSubmitting = ref(false)
+
+const requestForm = ref({
+  title: '',
+  description: '',
+  priority: 'low'
+})
+
+// Получение заявок
+const fetchRequests = async () => {
+  try {
+    const token = localStorage.getItem('token')
+    const response = await fetch('/api/requests/', {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    })
+    if (!response.ok) throw new Error('Failed to fetch requests')
+    requests.value = await response.json()
+  } catch (error) {
+    console.error('Error fetching requests:', error)
+  }
+}
+
+// Отправка заявки
+const submitRequest = async () => {
+  try {
+    isSubmitting.value = true
+    const token = localStorage.getItem('token')
+    const response = await fetch('/api/requests/', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+      },
+      body: JSON.stringify(requestForm.value)
+    })
+    
+    if (!response.ok) throw new Error('Failed to create request')
+    
+    // Очищаем форму
+    requestForm.value = {
+      title: '',
+      description: '',
+      priority: 'low'
+    }
+    
+    // Обновляем список заявок
+    await fetchRequests()
+  } catch (error) {
+    console.error('Error creating request:', error)
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// Выход из системы
+const handleLogout = () => {
+  localStorage.removeItem('token')
+  router.push('/login')
+}
+
+// Получение класса для статуса
+const getStatusClass = (status) => {
+  const classes = {
+    new: 'bg-blue-100 text-blue-800',
+    in_progress: 'bg-yellow-100 text-yellow-800',
+    completed: 'bg-green-100 text-green-800',
+    rejected: 'bg-red-100 text-red-800'
+  }
+  return classes[status] || classes.new
+}
+
+// Получение метки для статуса
+const getStatusLabel = (status) => {
+  const labels = {
+    new: 'Новая',
+    in_progress: 'В работе',
+    completed: 'Завершена',
+    rejected: 'Отклонена'
+  }
+  return labels[status] || 'Новая'
+}
+
+onMounted(() => {
+  fetchRequests()
+})
+</script>
+
+<style>
+/* Используем CSS переменные для цветов */
+.bg-primary {
+  background-color: var(--color-bg-primary);
+}
+
+.bg-secondary {
+  background-color: var(--color-bg-secondary);
+}
+
+.bg-card {
+  background-color: var(--color-card-bg);
+}
+
+.bg-input {
+  background-color: var(--color-input-bg);
+}
+
+.text-primary {
+  color: var(--color-text-primary);
+}
+
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+
+.border-border {
+  border-color: var(--color-border);
+}
+
+.border-input-border {
+  border-color: var(--color-input-border);
+}
+
+.bg-button-primary {
+  background-color: var(--color-button-primary);
+}
+
+.hover\:bg-button-hover:hover {
+  background-color: var(--color-button-hover);
+}
+
+.text-button-primary {
+  color: var(--color-button-primary);
+}
+
+.hover\:text-button-hover:hover {
+  color: var(--color-button-hover);
+}
+</style>