feat: compose;

feat: frontend added

Frontend/app/hr/dashboard/page.jsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { Target, Users, CircleCheck as CheckCircle, Clock, TrendingUp, Star } from 'lucide-react';
+import useStore from '@/lib/store';
+import HRSidebar from '@/components/navigation/hr-sidebar';
+import CosmicCard from '@/components/ui/cosmic-card';
+import StatCard from '@/components/ui/stat-card';
+
+export default function HRDashboardPage() {
+  const router = useRouter();
+  const { user, missions, isHR } = useStore();
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/login');
+    } else if (!isHR) {
+      router.push('/dashboard');
+    }
+  }, [user, isHR, router]);
+
+  if (!user || !isHR) return null;
+
+  const totalMissions = missions.length;
+  const completedMissions = missions.filter((m) => m.status === 'completed').length;
+  const availableMissions = missions.filter((m) => m.status === 'available').length;
+  const completionRate = totalMissions > 0 ? Math.round((completedMissions / totalMissions) * 100) : 0;
+
+  const missionsByCategory = missions.reduce((acc, mission) => {
+    acc[mission.category] = (acc[mission.category] || 0) + 1;
+    return acc;
+  }, {});
+
+  return (
+    <div className="flex min-h-screen cosmic-bg">
+      <HRSidebar />
+
+      <main className="flex-1 p-8">
+        <div className="stars-bg fixed inset-0 pointer-events-none" />
+
+        <div className="relative z-10 max-w-7xl mx-auto">
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-white mb-2">HR Дашборд</h1>
+            <p className="text-slate-400">Управление системой геймификации</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <StatCard icon={Target} label="Всего миссий" value={totalMissions} color="blue" />
+            <StatCard
+              icon={CheckCircle}
+              label="Завершено"
+              value={completedMissions}
+              color="green"
+            />
+            <StatCard icon={Clock} label="Доступно" value={availableMissions} color="purple" />
+            <StatCard
+              icon={TrendingUp}
+              label="Процент завершения"
+              value={`${completionRate}%`}
+              color="pink"
+            />
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+            <CosmicCard className="p-6">
+              <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
+                <Target className="w-6 h-6 text-blue-400" />
+                Миссии по категориям
+              </h2>
+              <div className="space-y-4">
+                {Object.entries(missionsByCategory).map(([category, count], index) => (
+                  <motion.div
+                    key={category}
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ duration: 0.3, delay: index * 0.1 }}
+                  >
+                    <div className="flex items-center justify-between p-3 bg-slate-800/50 rounded-lg border border-slate-700">
+                      <span className="text-slate-300 font-medium">{category}</span>
+                      <span className="text-blue-400 font-bold">{count}</span>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+            </CosmicCard>
+
+            <CosmicCard className="p-6">
+              <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
+                <Star className="w-6 h-6 text-purple-400" />
+                Быстрые действия
+              </h2>
+              <div className="space-y-3">
+                <motion.button
+                  onClick={() => router.push('/hr/missions/create')}
+                  className="w-full p-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg font-semibold text-white hover:from-blue-600 hover:to-purple-700 transition-all text-left"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  Создать новую миссию
+                </motion.button>
+
+                <motion.button
+                  onClick={() => router.push('/hr/missions')}
+                  className="w-full p-4 bg-slate-800 rounded-lg font-semibold text-white hover:bg-slate-700 transition-all text-left border border-slate-700"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  Управление миссиями
+                </motion.button>
+
+                <motion.button
+                  onClick={() => router.push('/hr/users')}
+                  className="w-full p-4 bg-slate-800 rounded-lg font-semibold text-white hover:bg-slate-700 transition-all text-left border border-slate-700"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  Просмотр пользователей
+                </motion.button>
+              </div>
+            </CosmicCard>
+          </div>
+
+          <CosmicCard className="p-6">
+            <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
+              <CheckCircle className="w-6 h-6 text-green-400" />
+              Последние завершенные миссии
+            </h2>
+            <div className="space-y-3">
+              {missions
+                .filter((m) => m.status === 'completed')
+                .slice(0, 5)
+                .map((mission, index) => (
+                  <motion.div
+                    key={mission.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.3, delay: index * 0.05 }}
+                    className="p-4 bg-slate-800/50 rounded-lg border border-slate-700"
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="font-medium text-white">{mission.title}</p>
+                        <p className="text-sm text-slate-400">{mission.category}</p>
+                      </div>
+                      <div className="flex items-center gap-4 text-sm">
+                        <div className="flex items-center gap-1 text-blue-400">
+                          <Star className="w-4 h-4" />
+                          <span>+{mission.experienceReward}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </motion.div>
+                ))}
+              {missions.filter((m) => m.status === 'completed').length === 0 && (
+                <p className="text-center text-slate-400 py-8">
+                  Пока нет завершенных миссий
+                </p>
+              )}
+            </div>
+          </CosmicCard>
+        </div>
+      </main>
+    </div>
+  );
+}

Frontend/app/hr/missions/[id]/edit/page.jsx

@@ -0,0 +1,226 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { ArrowLeft, Save } from 'lucide-react';
+import useStore from '@/lib/store';
+import HRSidebar from '@/components/navigation/hr-sidebar';
+import CosmicCard from '@/components/ui/cosmic-card';
+import { categories, ranks } from '@/lib/mockData';
+import { toast } from 'sonner';
+
+const icons = [
+  'FileText',
+  'Users',
+  'Code',
+  'Presentation',
+  'BookOpen',
+  'Lightbulb',
+  'Rocket',
+  'TrendingUp',
+  'Target',
+  'Award',
+];
+
+export default function EditMissionPage() {
+  const params = useParams();
+  const router = useRouter();
+  const { user, isHR, missions, updateMission } = useStore();
+  const [formData, setFormData] = useState(null);
+
+  const mission = missions.find((m) => m.id === parseInt(params.id));
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/login');
+    } else if (!isHR) {
+      router.push('/dashboard');
+    } else if (mission) {
+      setFormData({
+        title: mission.title,
+        description: mission.description,
+        category: mission.category,
+        experienceReward: mission.experienceReward,
+        manaReward: mission.manaReward,
+        requiredRank: mission.requiredRank,
+        icon: mission.icon,
+        skills: mission.skills || [],
+      });
+    }
+  }, [user, isHR, mission, router]);
+
+  if (!user || !isHR || !mission || !formData) return null;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!formData.title || !formData.description) {
+      toast.error('Заполните все обязательные поля');
+      return;
+    }
+
+    updateMission(mission.id, formData);
+    toast.success('Миссия обновлена успешно!');
+    router.push('/hr/missions');
+  };
+
+  const handleChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <div className="flex min-h-screen cosmic-bg">
+      <HRSidebar />
+
+      <main className="flex-1 p-8">
+        <div className="stars-bg fixed inset-0 pointer-events-none" />
+
+        <div className="relative z-10 max-w-4xl mx-auto">
+          <button
+            onClick={() => router.back()}
+            className="flex items-center gap-2 text-slate-400 hover:text-white mb-6 transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+            <span>Назад</span>
+          </button>
+
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-white mb-2">Редактирование миссии</h1>
+            <p className="text-slate-400">Внесите изменения в миссию</p>
+          </div>
+
+          <CosmicCard className="p-8">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">
+                  Название миссии *
+                </label>
+                <input
+                  type="text"
+                  value={formData.title}
+                  onChange={(e) => handleChange('title', e.target.value)}
+                  placeholder="Например: Загрузить резюме"
+                  className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 transition-colors"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">
+                  Описание *
+                </label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => handleChange('description', e.target.value)}
+                  placeholder="Подробное описание миссии..."
+                  rows={4}
+                  className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 transition-colors resize-none"
+                  required
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Категория
+                  </label>
+                  <select
+                    value={formData.category}
+                    onChange={(e) => handleChange('category', e.target.value)}
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  >
+                    {categories.filter((c) => c !== 'Все').map((category) => (
+                      <option key={category} value={category}>
+                        {category}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">Иконка</label>
+                  <select
+                    value={formData.icon}
+                    onChange={(e) => handleChange('icon', e.target.value)}
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  >
+                    {icons.map((icon) => (
+                      <option key={icon} value={icon}>
+                        {icon}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Награда: Опыт
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.experienceReward}
+                    onChange={(e) => handleChange('experienceReward', parseInt(e.target.value))}
+                    min="0"
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Награда: Мана
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.manaReward}
+                    onChange={(e) => handleChange('manaReward', parseInt(e.target.value))}
+                    min="0"
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">
+                  Требуемый ранг
+                </label>
+                <select
+                  value={formData.requiredRank}
+                  onChange={(e) => handleChange('requiredRank', e.target.value)}
+                  className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                >
+                  {ranks.map((rank) => (
+                    <option key={rank} value={rank}>
+                      {rank}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="pt-6 border-t border-slate-700 flex gap-4">
+                <button
+                  type="button"
+                  onClick={() => router.back()}
+                  className="flex-1 py-3 px-4 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-lg transition-colors"
+                >
+                  Отмена
+                </button>
+                <motion.button
+                  type="submit"
+                  className="flex-1 py-3 px-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all flex items-center justify-center gap-2"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <Save className="w-5 h-5" />
+                  Сохранить изменения
+                </motion.button>
+              </div>
+            </form>
+          </CosmicCard>
+        </div>
+      </main>
+    </div>
+  );
+}

Frontend/app/hr/missions/create/page.jsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { ArrowLeft, Save } from 'lucide-react';
+import useStore from '@/lib/store';
+import HRSidebar from '@/components/navigation/hr-sidebar';
+import CosmicCard from '@/components/ui/cosmic-card';
+import { categories, ranks } from '@/lib/mockData';
+import { toast } from 'sonner';
+
+const icons = [
+  'FileText',
+  'Users',
+  'Code',
+  'Presentation',
+  'BookOpen',
+  'Lightbulb',
+  'Rocket',
+  'TrendingUp',
+  'Target',
+  'Award',
+];
+
+export default function CreateMissionPage() {
+  const router = useRouter();
+  const { user, isHR, addMission } = useStore();
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    category: 'Рекрутинг',
+    experienceReward: 100,
+    manaReward: 50,
+    requiredRank: 'Искатель',
+    icon: 'Target',
+    skills: [],
+  });
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/login');
+    } else if (!isHR) {
+      router.push('/dashboard');
+    }
+  }, [user, isHR, router]);
+
+  if (!user || !isHR) return null;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!formData.title || !formData.description) {
+      toast.error('Заполните все обязательные поля');
+      return;
+    }
+
+    addMission(formData);
+    toast.success('Миссия создана успешно!');
+    router.push('/hr/missions');
+  };
+
+  const handleChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <div className="flex min-h-screen cosmic-bg">
+      <HRSidebar />
+
+      <main className="flex-1 p-8">
+        <div className="stars-bg fixed inset-0 pointer-events-none" />
+
+        <div className="relative z-10 max-w-4xl mx-auto">
+          <button
+            onClick={() => router.back()}
+            className="flex items-center gap-2 text-slate-400 hover:text-white mb-6 transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+            <span>Назад</span>
+          </button>
+
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-white mb-2">Создание миссии</h1>
+            <p className="text-slate-400">Заполните форму для создания новой миссии</p>
+          </div>
+
+          <CosmicCard className="p-8">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">
+                  Название миссии *
+                </label>
+                <input
+                  type="text"
+                  value={formData.title}
+                  onChange={(e) => handleChange('title', e.target.value)}
+                  placeholder="Например: Загрузить резюме"
+                  className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 transition-colors"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">
+                  Описание *
+                </label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => handleChange('description', e.target.value)}
+                  placeholder="Подробное описание миссии..."
+                  rows={4}
+                  className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 transition-colors resize-none"
+                  required
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Категория
+                  </label>
+                  <select
+                    value={formData.category}
+                    onChange={(e) => handleChange('category', e.target.value)}
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  >
+                    {categories.filter((c) => c !== 'Все').map((category) => (
+                      <option key={category} value={category}>
+                        {category}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">Иконка</label>
+                  <select
+                    value={formData.icon}
+                    onChange={(e) => handleChange('icon', e.target.value)}
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  >
+                    {icons.map((icon) => (
+                      <option key={icon} value={icon}>
+                        {icon}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Награда: Опыт
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.experienceReward}
+                    onChange={(e) => handleChange('experienceReward', parseInt(e.target.value))}
+                    min="0"
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Награда: Мана
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.manaReward}
+                    onChange={(e) => handleChange('manaReward', parseInt(e.target.value))}
+                    min="0"
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">
+                  Требуемый ранг
+                </label>
+                <select
+                  value={formData.requiredRank}
+                  onChange={(e) => handleChange('requiredRank', e.target.value)}
+                  className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                >
+                  {ranks.map((rank) => (
+                    <option key={rank} value={rank}>
+                      {rank}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="pt-6 border-t border-slate-700 flex gap-4">
+                <button
+                  type="button"
+                  onClick={() => router.back()}
+                  className="flex-1 py-3 px-4 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-lg transition-colors"
+                >
+                  Отмена
+                </button>
+                <motion.button
+                  type="submit"
+                  className="flex-1 py-3 px-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all flex items-center justify-center gap-2"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <Save className="w-5 h-5" />
+                  Создать миссию
+                </motion.button>
+              </div>
+            </form>
+          </CosmicCard>
+        </div>
+      </main>
+    </div>
+  );
+}

Frontend/app/hr/missions/page.jsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { Plus, Search, Filter, CreditCard as Edit, Trash2 } from 'lucide-react';
+import * as Icons from 'lucide-react';
+import useStore from '@/lib/store';
+import HRSidebar from '@/components/navigation/hr-sidebar';
+import CosmicCard from '@/components/ui/cosmic-card';
+import { categories } from '@/lib/mockData';
+import { toast } from 'sonner';
+
+export default function HRMissionsPage() {
+  const router = useRouter();
+  const { user, missions, isHR, deleteMission } = useStore();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('Все');
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/login');
+    } else if (!isHR) {
+      router.push('/dashboard');
+    }
+  }, [user, isHR, router]);
+
+  if (!user || !isHR) return null;
+
+  const filteredMissions = missions.filter((mission) => {
+    const matchesSearch = mission.title.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesCategory = selectedCategory === 'Все' || mission.category === selectedCategory;
+    return matchesSearch && matchesCategory;
+  });
+
+  const handleDelete = (missionId, title) => {
+    if (confirm(`Вы уверены, что хотите удалить миссию "${title}"?`)) {
+      deleteMission(missionId);
+      toast.success('Миссия удалена');
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen cosmic-bg">
+      <HRSidebar />
+
+      <main className="flex-1 p-8">
+        <div className="stars-bg fixed inset-0 pointer-events-none" />
+
+        <div className="relative z-10 max-w-7xl mx-auto">
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <h1 className="text-3xl font-bold text-white mb-2">Управление миссиями</h1>
+              <p className="text-slate-400">Создавайте и редактируйте миссии</p>
+            </div>
+
+            <motion.button
+              onClick={() => router.push('/hr/missions/create')}
+              className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg font-semibold text-white hover:from-blue-600 hover:to-purple-700 transition-all flex items-center gap-2"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <Plus className="w-5 h-5" />
+              Создать миссию
+            </motion.button>
+          </div>
+
+          <div className="mb-6 space-y-4">
+            <div className="relative">
+              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
+              <input
+                type="text"
+                placeholder="Поиск миссий..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-12 pr-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 transition-colors"
+              />
+            </div>
+
+            <div>
+              <div className="flex items-center gap-2 mb-3">
+                <Filter className="w-5 h-5 text-slate-400" />
+                <span className="text-sm font-medium text-slate-300">Категория</span>
+              </div>
+              <div className="flex items-center gap-2 overflow-x-auto pb-2">
+                {categories.map((category) => (
+                  <motion.button
+                    key={category}
+                    onClick={() => setSelectedCategory(category)}
+                    className={`px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all ${
+                      selectedCategory === category
+                        ? 'bg-blue-500 text-white'
+                        : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
+                    }`}
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                  >
+                    {category}
+                  </motion.button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            {filteredMissions.length > 0 ? (
+              filteredMissions.map((mission, index) => {
+                const Icon = Icons[mission.icon] || Icons.Target;
+                return (
+                  <motion.div
+                    key={mission.id}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.3, delay: index * 0.05 }}
+                  >
+                    <CosmicCard className="p-6">
+                      <div className="flex items-start gap-4">
+                        <div className="p-3 bg-blue-500/20 rounded-lg">
+                          <Icon className="w-6 h-6 text-blue-400" />
+                        </div>
+
+                        <div className="flex-1">
+                          <div className="flex items-start justify-between mb-2">
+                            <div>
+                              <h3 className="text-xl font-bold text-white mb-1">
+                                {mission.title}
+                              </h3>
+                              <div className="flex items-center gap-2">
+                                <span className="inline-block px-2 py-1 text-xs font-medium bg-purple-500/20 text-purple-400 rounded">
+                                  {mission.category}
+                                </span>
+                                <span
+                                  className={`inline-block px-2 py-1 text-xs font-medium rounded ${
+                                    mission.status === 'completed'
+                                      ? 'bg-green-500/20 text-green-400'
+                                      : 'bg-blue-500/20 text-blue-400'
+                                  }`}
+                                >
+                                  {mission.status === 'completed' ? 'Завершено' : 'Доступно'}
+                                </span>
+                              </div>
+                            </div>
+
+                            <div className="flex items-center gap-2">
+                              <motion.button
+                                onClick={() => router.push(`/hr/missions/${mission.id}/edit`)}
+                                className="p-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors"
+                                whileHover={{ scale: 1.1 }}
+                                whileTap={{ scale: 0.9 }}
+                              >
+                                <Edit className="w-5 h-5 text-blue-400" />
+                              </motion.button>
+
+                              <motion.button
+                                onClick={() => handleDelete(mission.id, mission.title)}
+                                className="p-2 bg-slate-700 hover:bg-red-900/50 rounded-lg transition-colors"
+                                whileHover={{ scale: 1.1 }}
+                                whileTap={{ scale: 0.9 }}
+                              >
+                                <Trash2 className="w-5 h-5 text-red-400" />
+                              </motion.button>
+                            </div>
+                          </div>
+
+                          <p className="text-slate-400 mb-3">{mission.description}</p>
+
+                          <div className="flex items-center gap-4 text-sm">
+                            <div className="text-slate-300">
+                              <span className="text-slate-500">Опыт:</span>{' '}
+                              <span className="font-semibold text-blue-400">
+                                +{mission.experienceReward}
+                              </span>
+                            </div>
+                            <div className="text-slate-300">
+                              <span className="text-slate-500">Мана:</span>{' '}
+                              <span className="font-semibold text-purple-400">
+                                +{mission.manaReward}
+                              </span>
+                            </div>
+                            <div className="text-slate-300">
+                              <span className="text-slate-500">Требуемый ранг:</span>{' '}
+                              <span className="font-semibold">{mission.requiredRank}</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </CosmicCard>
+                  </motion.div>
+                );
+              })
+            ) : (
+              <CosmicCard className="p-12">
+                <div className="text-center">
+                  <p className="text-slate-400">Миссии не найдены</p>
+                </div>
+              </CosmicCard>
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

Frontend/app/hr/settings/page.jsx

@@ -0,0 +1,244 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Settings, Award, Zap, Star, Save } from 'lucide-react';
+import { motion } from 'framer-motion';
+import useStore from '@/lib/store';
+import HRSidebar from '@/components/navigation/hr-sidebar';
+import CosmicCard from '@/components/ui/cosmic-card';
+import { toast } from 'sonner';
+
+export default function HRSettingsPage() {
+  const router = useRouter();
+  const { user, isHR } = useStore();
+
+  const [settings, setSettings] = useState({
+    baseExperienceReward: 100,
+    baseManaReward: 50,
+    experienceMultiplier: 1.5,
+    enableNotifications: true,
+    enableLeaderboard: false,
+    maxDailyMissions: 5,
+    enableAchievements: true,
+  });
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/login');
+    } else if (!isHR) {
+      router.push('/dashboard');
+    }
+  }, [user, isHR, router]);
+
+  if (!user || !isHR) return null;
+
+  const handleSave = () => {
+    toast.success('Настройки сохранены', {
+      description: 'Изменения будут применены ко всем пользователям',
+    });
+  };
+
+  const handleChange = (key, value) => {
+    setSettings((prev) => ({ ...prev, [key]: value }));
+  };
+
+  return (
+    <div className="flex min-h-screen cosmic-bg">
+      <HRSidebar />
+
+      <main className="flex-1 p-8">
+        <div className="stars-bg fixed inset-0 pointer-events-none" />
+
+        <div className="relative z-10 max-w-4xl mx-auto">
+          <div className="mb-8">
+            <div className="flex items-center gap-3 mb-2">
+              <Settings className="w-8 h-8 text-blue-400" />
+              <h1 className="text-3xl font-bold text-white">Настройки системы</h1>
+            </div>
+            <p className="text-slate-400">Конфигурация параметров геймификации</p>
+          </div>
+
+          <div className="space-y-6">
+            <CosmicCard className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <Award className="w-6 h-6 text-blue-400" />
+                <h2 className="text-xl font-bold text-white">Награды и опыт</h2>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Базовая награда за опыт
+                  </label>
+                  <input
+                    type="number"
+                    value={settings.baseExperienceReward}
+                    onChange={(e) =>
+                      handleChange('baseExperienceReward', parseInt(e.target.value))
+                    }
+                    min="0"
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  />
+                  <p className="text-xs text-slate-500 mt-1">
+                    Минимальное количество опыта за выполнение миссии
+                  </p>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Базовая награда за ману
+                  </label>
+                  <input
+                    type="number"
+                    value={settings.baseManaReward}
+                    onChange={(e) => handleChange('baseManaReward', parseInt(e.target.value))}
+                    min="0"
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  />
+                  <p className="text-xs text-slate-500 mt-1">
+                    Минимальное количество маны за выполнение миссии
+                  </p>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Множитель опыта для повышения ранга
+                  </label>
+                  <input
+                    type="number"
+                    value={settings.experienceMultiplier}
+                    onChange={(e) =>
+                      handleChange('experienceMultiplier', parseFloat(e.target.value))
+                    }
+                    step="0.1"
+                    min="1"
+                    max="3"
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  />
+                  <p className="text-xs text-slate-500 mt-1">
+                    Коэффициент увеличения требуемого опыта для следующего ранга
+                  </p>
+                </div>
+              </div>
+            </CosmicCard>
+
+            <CosmicCard className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <Star className="w-6 h-6 text-purple-400" />
+                <h2 className="text-xl font-bold text-white">Функциональность</h2>
+              </div>
+
+              <div className="space-y-4">
+                <div className="flex items-center justify-between p-4 bg-slate-800/50 rounded-lg border border-slate-700">
+                  <div>
+                    <p className="text-slate-200 font-medium">Уведомления</p>
+                    <p className="text-sm text-slate-400">
+                      Отправлять уведомления о новых миссиях и достижениях
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => handleChange('enableNotifications', !settings.enableNotifications)}
+                    className={`relative w-12 h-6 rounded-full transition-colors ${
+                      settings.enableNotifications
+                        ? 'bg-gradient-to-r from-blue-500 to-purple-500'
+                        : 'bg-slate-600'
+                    }`}
+                  >
+                    <motion.div
+                      className="absolute top-1 w-4 h-4 bg-white rounded-full shadow-md"
+                      animate={{ left: settings.enableNotifications ? '26px' : '4px' }}
+                      transition={{ duration: 0.2 }}
+                    />
+                  </button>
+                </div>
+
+                <div className="flex items-center justify-between p-4 bg-slate-800/50 rounded-lg border border-slate-700">
+                  <div>
+                    <p className="text-slate-200 font-medium">Таблица лидеров</p>
+                    <p className="text-sm text-slate-400">
+                      Показывать рейтинг пользователей по опыту
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => handleChange('enableLeaderboard', !settings.enableLeaderboard)}
+                    className={`relative w-12 h-6 rounded-full transition-colors ${
+                      settings.enableLeaderboard
+                        ? 'bg-gradient-to-r from-blue-500 to-purple-500'
+                        : 'bg-slate-600'
+                    }`}
+                  >
+                    <motion.div
+                      className="absolute top-1 w-4 h-4 bg-white rounded-full shadow-md"
+                      animate={{ left: settings.enableLeaderboard ? '26px' : '4px' }}
+                      transition={{ duration: 0.2 }}
+                    />
+                  </button>
+                </div>
+
+                <div className="flex items-center justify-between p-4 bg-slate-800/50 rounded-lg border border-slate-700">
+                  <div>
+                    <p className="text-slate-200 font-medium">Достижения</p>
+                    <p className="text-sm text-slate-400">
+                      Включить систему достижений и значков
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => handleChange('enableAchievements', !settings.enableAchievements)}
+                    className={`relative w-12 h-6 rounded-full transition-colors ${
+                      settings.enableAchievements
+                        ? 'bg-gradient-to-r from-blue-500 to-purple-500'
+                        : 'bg-slate-600'
+                    }`}
+                  >
+                    <motion.div
+                      className="absolute top-1 w-4 h-4 bg-white rounded-full shadow-md"
+                      animate={{ left: settings.enableAchievements ? '26px' : '4px' }}
+                      transition={{ duration: 0.2 }}
+                    />
+                  </button>
+                </div>
+              </div>
+            </CosmicCard>
+
+            <CosmicCard className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <Zap className="w-6 h-6 text-pink-400" />
+                <h2 className="text-xl font-bold text-white">Ограничения</h2>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Максимум миссий в день
+                  </label>
+                  <input
+                    type="number"
+                    value={settings.maxDailyMissions}
+                    onChange={(e) => handleChange('maxDailyMissions', parseInt(e.target.value))}
+                    min="1"
+                    max="20"
+                    className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-blue-500 transition-colors"
+                  />
+                  <p className="text-xs text-slate-500 mt-1">
+                    Максимальное количество миссий, которые может выполнить пользователь за день
+                  </p>
+                </div>
+              </div>
+            </CosmicCard>
+
+            <motion.button
+              onClick={handleSave}
+              className="w-full py-4 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white font-semibold rounded-lg hover:from-blue-600 hover:via-purple-600 hover:to-pink-600 transition-all shadow-lg shadow-blue-500/50 flex items-center justify-center gap-2"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              <Save className="w-5 h-5" />
+              Сохранить настройки
+            </motion.button>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

Frontend/app/hr/users/page.jsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { Users, Star, Zap, Trophy } from 'lucide-react';
+import useStore from '@/lib/store';
+import HRSidebar from '@/components/navigation/hr-sidebar';
+import CosmicCard from '@/components/ui/cosmic-card';
+import { mockUsers } from '@/lib/mockData';
+
+export default function HRUsersPage() {
+  const router = useRouter();
+  const { user, isHR } = useStore();
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/login');
+    } else if (!isHR) {
+      router.push('/dashboard');
+    }
+  }, [user, isHR, router]);
+
+  if (!user || !isHR) return null;
+
+  return (
+    <div className="flex min-h-screen cosmic-bg">
+      <HRSidebar />
+
+      <main className="flex-1 p-8">
+        <div className="stars-bg fixed inset-0 pointer-events-none" />
+
+        <div className="relative z-10 max-w-7xl mx-auto">
+          <div className="mb-8">
+            <div className="flex items-center gap-3 mb-2">
+              <Users className="w-8 h-8 text-blue-400" />
+              <h1 className="text-3xl font-bold text-white">Пользователи</h1>
+            </div>
+            <p className="text-slate-400">Просмотр статистики пользователей</p>
+          </div>
+
+          <div className="space-y-6">
+            {mockUsers.map((userData, index) => (
+              <motion.div
+                key={userData.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.3, delay: index * 0.1 }}
+              >
+                <CosmicCard className="p-6">
+                  <div className="flex items-start justify-between mb-6">
+                    <div>
+                      <h2 className="text-2xl font-bold text-white mb-1">{userData.name}</h2>
+                      <div className="flex items-center gap-2">
+                        <Trophy className="w-5 h-5 text-blue-400" />
+                        <span className="text-blue-400 font-semibold">{userData.rank}</span>
+                        <span className="text-slate-500">→</span>
+                        <span className="text-slate-400">{userData.nextRank}</span>
+                      </div>
+                    </div>
+
+                    <div className="flex gap-4">
+                      <div className="text-right">
+                        <div className="flex items-center gap-2 justify-end mb-1">
+                          <Star className="w-5 h-5 text-blue-400" />
+                          <span className="text-xl font-bold text-white">
+                            {userData.experience}
+                          </span>
+                        </div>
+                        <p className="text-xs text-slate-400">Опыт</p>
+                      </div>
+                      <div className="text-right">
+                        <div className="flex items-center gap-2 justify-end mb-1">
+                          <Zap className="w-5 h-5 text-purple-400" />
+                          <span className="text-xl font-bold text-white">{userData.mana}</span>
+                        </div>
+                        <p className="text-xs text-slate-400">Мана</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="mb-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm text-slate-400">Прогресс до следующего ранга</span>
+                      <span className="text-sm text-blue-400 font-semibold">
+                        {Math.round((userData.experience / userData.neededExperience) * 100)}%
+                      </span>
+                    </div>
+                    <div className="w-full bg-slate-800 rounded-full h-3 overflow-hidden border border-slate-700">
+                      <div
+                        className="h-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-full transition-all"
+                        style={{
+                          width: `${(userData.experience / userData.neededExperience) * 100}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <h3 className="text-lg font-semibold text-white mb-3">Навыки</h3>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                      {userData.skills.map((skill) => (
+                        <div
+                          key={skill.id}
+                          className="p-3 bg-slate-800/50 rounded-lg border border-slate-700"
+                        >
+                          <div className="flex items-center justify-between mb-2">
+                            <span className="text-sm text-slate-300 font-medium">
+                              {skill.name}
+                            </span>
+                            <span className="text-sm text-blue-400 font-semibold">
+                              Ур. {skill.level}
+                            </span>
+                          </div>
+                          <div className="w-full bg-slate-700 rounded-full h-2 overflow-hidden">
+                            <div
+                              className="h-full bg-blue-500 rounded-full transition-all"
+                              style={{ width: `${skill.progress}%` }}
+                            />
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </CosmicCard>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}