feat: compose;

feat: frontend added

Frontend/app/dashboard/page.jsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { Star, Zap, Trophy, ArrowRight, LogOut } from 'lucide-react';
+import useStore from '@/lib/store';
+import MobileNav from '@/components/navigation/mobile-nav';
+import CosmicCard from '@/components/ui/cosmic-card';
+import ProgressBar from '@/components/ui/progress-bar';
+import StatCard from '@/components/ui/stat-card';
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const { user, missions, setUser } = useStore();
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/login');
+    }
+  }, [user, router]);
+
+  if (!user) return null;
+
+  const availableMissions = missions.filter((m) => m.status === 'available').length;
+  const completedMissions = missions.filter((m) => m.status === 'completed').length;
+
+  const handleLogout = () => {
+    setUser(null);
+    router.push('/login');
+  };
+
+  return (
+    <div className="min-h-screen pb-20 md:pb-8 cosmic-bg">
+      <div className="stars-bg fixed inset-0 pointer-events-none" />
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 py-6">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-white mb-1">Главная</h1>
+            <p className="text-slate-400">Добро пожаловать, {user.name}</p>
+          </div>
+          <button
+            onClick={handleLogout}
+            className="p-2 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
+          >
+            <LogOut className="w-5 h-5 text-slate-400" />
+          </button>
+        </div>
+
+        <CosmicCard className="p-6 mb-6">
+          <div className="flex items-center gap-4 mb-4">
+            <div className="p-3 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full">
+              <Trophy className="w-8 h-8 text-white" />
+            </div>
+            <div>
+              <h2 className="text-2xl font-bold text-white">{user.rank}</h2>
+              <p className="text-sm text-slate-400">Следующий ранг: {user.nextRank}</p>
+            </div>
+          </div>
+
+          <ProgressBar
+            value={user.experience}
+            max={user.neededExperience}
+            label="Опыт до следующего ранга"
+            showPercentage
+          />
+
+          <div className="flex items-center justify-between mt-2 text-sm">
+            <span className="text-slate-400">
+              {user.experience} / {user.neededExperience} XP
+            </span>
+          </div>
+        </CosmicCard>
+
+        <div className="grid grid-cols-2 gap-4 mb-6">
+          <StatCard icon={Star} label="Опыт" value={user.experience} color="blue" />
+          <StatCard icon={Zap} label="Мана" value={user.mana} color="purple" />
+        </div>
+
+        <CosmicCard className="p-6 mb-6">
+          <h3 className="text-xl font-bold text-white mb-4">Навыки</h3>
+          <div className="space-y-4">
+            {user.skills.map((skill) => (
+              <motion.div
+                key={skill.id}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.3 }}
+              >
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-slate-300 font-medium">{skill.name}</span>
+                  <span className="text-blue-400 font-semibold">Уровень {skill.level}</span>
+                </div>
+                <ProgressBar value={skill.progress} max={100} />
+              </motion.div>
+            ))}
+          </div>
+        </CosmicCard>
+
+        <CosmicCard className="p-6 mb-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-xl font-bold text-white">Статистика</h3>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="p-4 bg-slate-800/50 rounded-lg border border-slate-700">
+              <p className="text-sm text-slate-400 mb-1">Доступно миссий</p>
+              <p className="text-2xl font-bold text-green-400">{availableMissions}</p>
+            </div>
+            <div className="p-4 bg-slate-800/50 rounded-lg border border-slate-700">
+              <p className="text-sm text-slate-400 mb-1">Завершено миссий</p>
+              <p className="text-2xl font-bold text-blue-400">{completedMissions}</p>
+            </div>
+          </div>
+        </CosmicCard>
+
+        <motion.button
+          onClick={() => router.push('/missions')}
+          className="w-full p-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg font-semibold text-white flex items-center justify-center gap-2 hover:from-blue-600 hover:to-purple-700 transition-all"
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+        >
+          Перейти к миссиям
+          <ArrowRight className="w-5 h-5" />
+        </motion.button>
+      </div>
+
+      <MobileNav />
+    </div>
+  );
+}

Frontend/app/globals.css

@@ -0,0 +1,92 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: linear-gradient(135deg, #0a0e27 0%, #1a0b2e 50%, #16213e 100%);
+  min-height: 100vh;
+}
+
+.cosmic-bg {
+  background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
+              radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
+              radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
+}
+
+.stars-bg {
+  background-image:
+    radial-gradient(2px 2px at 20px 30px, white, transparent),
+    radial-gradient(2px 2px at 60px 70px, white, transparent),
+    radial-gradient(1px 1px at 50px 50px, white, transparent),
+    radial-gradient(1px 1px at 130px 80px, white, transparent),
+    radial-gradient(2px 2px at 90px 10px, white, transparent);
+  background-size: 200px 200px;
+  background-repeat: repeat;
+  opacity: 0.3;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

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>
+  );
+}

Frontend/app/journal/page.jsx

@@ -0,0 +1,199 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { BookOpen, Trophy, Star, Zap, Clock } from 'lucide-react';
+import * as Icons from 'lucide-react';
+import useStore from '@/lib/store';
+import MobileNav from '@/components/navigation/mobile-nav';
+import CosmicCard from '@/components/ui/cosmic-card';
+
+export default function JournalPage() {
+  const router = useRouter();
+  const { user, completedMissions, inventory } = useStore();
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/login');
+    }
+  }, [user, router]);
+
+  if (!user) return null;
+
+  const sortedMissions = [...completedMissions].sort(
+    (a, b) => new Date(b.completedAt) - new Date(a.completedAt)
+  );
+
+  return (
+    <div className="min-h-screen pb-20 md:pb-8 cosmic-bg">
+      <div className="stars-bg fixed inset-0 pointer-events-none" />
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 py-6">
+        <button
+          onClick={() => router.back()}
+          className="flex items-center gap-2 text-slate-400 hover:text-white mb-6 transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          <span>Назад</span>
+        </button>
+
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-2">
+            <BookOpen 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="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+          <CosmicCard className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="p-3 bg-blue-500/20 rounded-lg">
+                <Trophy className="w-6 h-6 text-blue-400" />
+              </div>
+              <div>
+                <p className="text-sm text-slate-400">Завершено миссий</p>
+                <p className="text-2xl font-bold text-white">{completedMissions.length}</p>
+              </div>
+            </div>
+          </CosmicCard>
+
+          <CosmicCard className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="p-3 bg-purple-500/20 rounded-lg">
+                <Star className="w-6 h-6 text-purple-400" />
+              </div>
+              <div>
+                <p className="text-sm text-slate-400">Текущий опыт</p>
+                <p className="text-2xl font-bold text-white">{user.experience}</p>
+              </div>
+            </div>
+          </CosmicCard>
+
+          <CosmicCard className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="p-3 bg-pink-500/20 rounded-lg">
+                <Zap className="w-6 h-6 text-pink-400" />
+              </div>
+              <div>
+                <p className="text-sm text-slate-400">Предметов получено</p>
+                <p className="text-2xl font-bold text-white">{inventory.length}</p>
+              </div>
+            </div>
+          </CosmicCard>
+        </div>
+
+        <div className="mb-8">
+          <h2 className="text-2xl font-bold text-white mb-4">Завершенные миссии</h2>
+          {sortedMissions.length > 0 ? (
+            <div className="space-y-4">
+              {sortedMissions.map((mission, index) => {
+                const Icon = Icons[mission.icon] || Icons.Target;
+                return (
+                  <motion.div
+                    key={`${mission.id}-${index}`}
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ duration: 0.3, delay: index * 0.05 }}
+                  >
+                    <CosmicCard className="p-5">
+                      <div className="flex items-start gap-4">
+                        <div className="p-3 bg-green-500/20 rounded-lg">
+                          <Icon className="w-6 h-6 text-green-400" />
+                        </div>
+
+                        <div className="flex-1">
+                          <div className="flex items-start justify-between mb-2">
+                            <div>
+                              <h3 className="text-lg font-bold text-white mb-1">
+                                {mission.title}
+                              </h3>
+                              <span className="inline-block px-2 py-1 text-xs font-medium bg-purple-500/20 text-purple-400 rounded">
+                                {mission.category}
+                              </span>
+                            </div>
+                          </div>
+
+                          <div className="flex items-center gap-4 text-sm mb-2">
+                            <div className="flex items-center gap-1 text-blue-400">
+                              <Star className="w-4 h-4" />
+                              <span>+{mission.experienceReward} опыта</span>
+                            </div>
+                            <div className="flex items-center gap-1 text-purple-400">
+                              <Zap className="w-4 h-4" />
+                              <span>+{mission.manaReward} маны</span>
+                            </div>
+                          </div>
+
+                          <div className="flex items-center gap-2 text-xs text-slate-500">
+                            <Clock className="w-3 h-3" />
+                            <span>
+                              Завершено:{' '}
+                              {new Date(mission.completedAt).toLocaleDateString('ru-RU', {
+                                day: 'numeric',
+                                month: 'long',
+                                year: 'numeric',
+                                hour: '2-digit',
+                                minute: '2-digit',
+                              })}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </CosmicCard>
+                  </motion.div>
+                );
+              })}
+            </div>
+          ) : (
+            <CosmicCard className="p-12">
+              <div className="text-center">
+                <div className="inline-block p-4 bg-slate-800 rounded-full mb-4">
+                  <Trophy className="w-8 h-8 text-slate-600" />
+                </div>
+                <p className="text-slate-400 mb-2">Вы еще не завершили ни одной миссии</p>
+                <button
+                  onClick={() => router.push('/missions')}
+                  className="text-blue-400 hover:text-blue-300 font-medium"
+                >
+                  Перейти к миссиям
+                </button>
+              </div>
+            </CosmicCard>
+          )}
+        </div>
+
+        {inventory.length > 0 && (
+          <div>
+            <h2 className="text-2xl font-bold text-white mb-4">Полученные предметы</h2>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              {inventory.map((item, index) => (
+                <motion.div
+                  key={`${item.id}-${index}`}
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.3, delay: index * 0.05 }}
+                >
+                  <CosmicCard className="p-4">
+                    <img
+                      src={item.image}
+                      alt={item.name}
+                      className="w-full h-32 object-cover rounded-lg mb-3"
+                    />
+                    <h3 className="text-sm font-bold text-white mb-1">{item.name}</h3>
+                    <p className="text-xs text-slate-400">{item.category}</p>
+                  </CosmicCard>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <MobileNav />
+    </div>
+  );
+}

Frontend/app/layout.tsx

@@ -0,0 +1,26 @@
+import './globals.css';
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import { Toaster } from '@/components/ui/sonner';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Космический путь - Система геймификации',
+  description: 'Интерактивная система мотивации и развития сотрудников',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ru">
+      <body className={inter.className}>
+        {children}
+        <Toaster position="top-right" richColors />
+      </body>
+    </html>
+  );
+}

Frontend/app/login/page.jsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { Rocket, User } from 'lucide-react';
+import useStore from '@/lib/store';
+import { mockUsers, mockMissions, mockStoreItems } from '@/lib/mockData';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { setUser, setMissions, setStoreItems, setIsHR } = useStore();
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [isHRMode, setIsHRMode] = useState(false);
+
+  const handleLogin = () => {
+    if (selectedUser) {
+      setUser(selectedUser);
+      setMissions(mockMissions);
+      setStoreItems(mockStoreItems);
+      setIsHR(isHRMode);
+
+      if (isHRMode) {
+        router.push('/hr/dashboard');
+      } else {
+        router.push('/dashboard');
+      }
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 relative overflow-hidden">
+      <div className="absolute inset-0 cosmic-bg" />
+      <div className="absolute inset-0 stars-bg" />
+
+      <motion.div
+        className="relative z-10 w-full max-w-md bg-gradient-to-br from-slate-900/95 to-slate-800/95 backdrop-blur-sm rounded-2xl border border-slate-600/50 shadow-2xl shadow-blue-500/20 p-8"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        <div className="text-center mb-8">
+          <motion.div
+            className="inline-block p-4 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full mb-4 shadow-lg shadow-blue-500/50"
+            animate={{ rotate: 360 }}
+            transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
+          >
+            <Rocket className="w-12 h-12 text-blue-300" />
+          </motion.div>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent mb-2">
+            Космический путь
+          </h1>
+          <p className="text-slate-300">Начните свое путешествие к звездам</p>
+        </div>
+
+        <div className="space-y-4 mb-6">
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-3">
+              Выберите пользователя
+            </label>
+            <div className="space-y-2">
+              {mockUsers.map((user) => (
+                <motion.button
+                  key={user.id}
+                  onClick={() => setSelectedUser(user)}
+                  className={`w-full p-4 rounded-lg border-2 transition-all ${
+                    selectedUser?.id === user.id
+                      ? 'border-blue-400 bg-gradient-to-r from-blue-500/20 to-purple-500/20 shadow-lg shadow-blue-500/30'
+                      : 'border-slate-600 bg-slate-800/80 hover:border-slate-500 hover:bg-slate-700/80'
+                  }`}
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 bg-slate-700 rounded-full">
+                      <User className="w-5 h-5 text-slate-300" />
+                    </div>
+                    <div className="text-left">
+                      <p className="font-semibold text-white">{user.name}</p>
+                      <p className="text-sm text-slate-400">Ранг: {user.rank}</p>
+                    </div>
+                  </div>
+                </motion.button>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between p-4 bg-slate-800/80 rounded-lg border border-slate-600">
+            <label className="text-sm font-medium text-slate-200">Войти как HR</label>
+            <button
+              onClick={() => setIsHRMode(!isHRMode)}
+              className={`relative w-12 h-6 rounded-full transition-colors ${
+                isHRMode ? '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: isHRMode ? '26px' : '4px' }}
+                transition={{ duration: 0.2 }}
+              />
+            </button>
+          </div>
+        </div>
+
+        <motion.button
+          onClick={handleLogin}
+          disabled={!selectedUser}
+          className="w-full py-3 px-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 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg shadow-blue-500/50"
+          whileHover={{ scale: selectedUser ? 1.02 : 1 }}
+          whileTap={{ scale: selectedUser ? 0.98 : 1 }}
+        >
+          {isHRMode ? 'Войти в HR панель' : 'Начать путешествие'}
+        </motion.button>
+      </motion.div>
+    </div>
+  );
+}

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

@@ -0,0 +1,177 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { ArrowLeft, Star, Zap, CircleCheck as CheckCircle, Trophy } from 'lucide-react';
+import * as Icons from 'lucide-react';
+import useStore from '@/lib/store';
+import CosmicCard from '@/components/ui/cosmic-card';
+import MissionCompleteDialog from '@/components/ui/mission-complete-dialog';
+import { toast } from 'sonner';
+
+export default function MissionDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const { user, missions, completeMission } = useStore();
+  const [isCompleting, setIsCompleting] = useState(false);
+  const [showReward, setShowReward] = useState(false);
+  const [showDialog, setShowDialog] = useState(false);
+
+  const mission = missions.find((m) => m.id === parseInt(params.id));
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/login');
+    }
+  }, [user, router]);
+
+  if (!user || !mission) {
+    return null;
+  }
+
+  const Icon = Icons[mission.icon] || Icons.Target;
+  const isCompleted = mission.status === 'completed';
+
+  const handleCompleteMission = async () => {
+    if (isCompleted) return;
+
+    setIsCompleting(true);
+
+    setTimeout(() => {
+      completeMission(mission.id);
+      setIsCompleting(false);
+      setShowReward(true);
+      setShowDialog(true);
+
+      setTimeout(() => {
+        setShowDialog(false);
+        setTimeout(() => {
+          router.push('/missions');
+        }, 500);
+      }, 4000);
+    }, 1500);
+  };
+
+  return (
+    <div className="min-h-screen pb-20 md:pb-8 cosmic-bg">
+      <div className="stars-bg fixed inset-0 pointer-events-none" />
+
+      <div className="relative z-10 max-w-3xl mx-auto px-4 py-6">
+        <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>
+
+        <CosmicCard className="p-6 mb-6">
+          <div className="flex items-start gap-4 mb-6">
+            <div
+              className={`p-4 rounded-lg ${
+                isCompleted ? 'bg-green-500/20' : 'bg-blue-500/20'
+              }`}
+            >
+              {isCompleted ? (
+                <CheckCircle className="w-8 h-8 text-green-400" />
+              ) : (
+                <Icon className="w-8 h-8 text-blue-400" />
+              )}
+            </div>
+
+            <div className="flex-1">
+              <div className="flex items-start justify-between mb-2">
+                <h1 className="text-2xl font-bold text-white">{mission.title}</h1>
+                {isCompleted && (
+                  <span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm font-medium">
+                    Завершено
+                  </span>
+                )}
+              </div>
+              <span className="inline-block px-3 py-1 text-sm font-medium bg-purple-500/20 text-purple-400 rounded">
+                {mission.category}
+              </span>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <h2 className="text-lg font-semibold text-white mb-2">Описание</h2>
+            <p className="text-slate-300 leading-relaxed">{mission.description}</p>
+          </div>
+
+          <div className="mb-6">
+            <h2 className="text-lg font-semibold text-white mb-3">Требования</h2>
+            <div className="flex items-center gap-2 p-3 bg-slate-800/50 rounded-lg border border-slate-700">
+              <Trophy className="w-5 h-5 text-blue-400" />
+              <span className="text-slate-300">Требуемый ранг: {mission.requiredRank}</span>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <h2 className="text-lg font-semibold text-white mb-3">Награды</h2>
+            <div className="grid grid-cols-2 gap-4">
+              <motion.div
+                className="p-4 bg-gradient-to-br from-blue-500/20 to-blue-600/20 rounded-lg border border-blue-500/50"
+                animate={showReward ? { scale: [1, 1.1, 1] } : {}}
+                transition={{ duration: 0.5 }}
+              >
+                <div className="flex items-center gap-3">
+                  <Star className="w-6 h-6 text-blue-400" />
+                  <div>
+                    <p className="text-xs text-slate-400">Опыт</p>
+                    <p className="text-xl font-bold text-white">+{mission.experienceReward}</p>
+                  </div>
+                </div>
+              </motion.div>
+
+              <motion.div
+                className="p-4 bg-gradient-to-br from-purple-500/20 to-purple-600/20 rounded-lg border border-purple-500/50"
+                animate={showReward ? { scale: [1, 1.1, 1] } : {}}
+                transition={{ duration: 0.5, delay: 0.1 }}
+              >
+                <div className="flex items-center gap-3">
+                  <Zap className="w-6 h-6 text-purple-400" />
+                  <div>
+                    <p className="text-xs text-slate-400">Мана</p>
+                    <p className="text-xl font-bold text-white">+{mission.manaReward}</p>
+                  </div>
+                </div>
+              </motion.div>
+            </div>
+
+            {mission.skills && mission.skills.length > 0 && (
+              <div className="mt-4 p-4 bg-slate-800/50 rounded-lg border border-slate-700">
+                <p className="text-sm text-slate-400 mb-2">Прокачиваемые навыки:</p>
+                <div className="flex flex-wrap gap-2">
+                  {mission.skills.map((skill) => (
+                    <span
+                      key={skill.skillId}
+                      className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm"
+                    >
+                      +{skill.value} уровня
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {!isCompleted && (
+            <motion.button
+              onClick={handleCompleteMission}
+              disabled={isCompleting}
+              className="w-full py-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 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+              whileHover={{ scale: isCompleting ? 1 : 1.02 }}
+              whileTap={{ scale: isCompleting ? 1 : 0.98 }}
+            >
+              {isCompleting ? 'Выполняется...' : 'Выполнить миссию'}
+            </motion.button>
+          )}
+        </CosmicCard>
+      </div>
+
+      <MissionCompleteDialog isOpen={showDialog} mission={mission} onClose={() => setShowDialog(false)} />
+    </div>
+  );
+}

Frontend/app/missions/page.jsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { Filter } from 'lucide-react';
+import useStore from '@/lib/store';
+import MobileNav from '@/components/navigation/mobile-nav';
+import MissionCard from '@/components/missions/mission-card';
+import { categories } from '@/lib/mockData';
+
+export default function MissionsPage() {
+  const router = useRouter();
+  const { user, missions } = useStore();
+  const [selectedCategory, setSelectedCategory] = useState('Все');
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/login');
+    }
+  }, [user, router]);
+
+  if (!user) return null;
+
+  const filteredMissions = missions.filter(
+    (mission) => selectedCategory === 'Все' || mission.category === selectedCategory
+  );
+
+  return (
+    <div className="min-h-screen pb-20 md:pb-8 cosmic-bg">
+      <div className="stars-bg fixed inset-0 pointer-events-none" />
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 py-6">
+        <button
+          onClick={() => router.back()}
+          className="flex items-center gap-2 text-slate-400 hover:text-white mb-6 transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          <span>Назад</span>
+        </button>
+
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-white mb-1">Миссии</h1>
+          <p className="text-slate-400">Выполняйте задания и получайте награды</p>
+        </div>
+
+        <div className="mb-6">
+          <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 className="space-y-4">
+          {filteredMissions.length > 0 ? (
+            filteredMissions.map((mission, index) => (
+              <motion.div
+                key={mission.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.3, delay: index * 0.1 }}
+              >
+                <MissionCard
+                  mission={mission}
+                  onClick={() => router.push(`/missions/${mission.id}`)}
+                  userRank={user.rank}
+                />
+              </motion.div>
+            ))
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-slate-400">Нет доступных миссий в этой категории</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <MobileNav />
+    </div>
+  );
+}

Frontend/app/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function Home() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push('/login');
+  }, [router]);
+
+  return null;
+}

Frontend/app/store/page.jsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { ShoppingBag, Zap, Check, X, Filter } from 'lucide-react';
+import useStore from '@/lib/store';
+import MobileNav from '@/components/navigation/mobile-nav';
+import CosmicCard from '@/components/ui/cosmic-card';
+import Modal from '@/components/ui/modal';
+import { storeCategories } from '@/lib/mockData';
+import { toast } from 'sonner';
+
+export default function StorePage() {
+  const router = useRouter();
+  const { user, storeItems, purchaseItem } = useStore();
+  const [selectedCategory, setSelectedCategory] = useState('Все');
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/login');
+    }
+  }, [user, router]);
+
+  if (!user) return null;
+
+  const filteredItems = storeItems.filter(
+    (item) => selectedCategory === 'Все' || item.category === selectedCategory
+  );
+
+  const handlePurchase = () => {
+    if (selectedItem && user.mana >= selectedItem.price) {
+      const success = purchaseItem(selectedItem.id);
+      if (success) {
+        toast.success('Покупка успешна!', {
+          description: `Вы приобрели ${selectedItem.name}`,
+        });
+        setIsModalOpen(false);
+        setSelectedItem(null);
+      }
+    } else {
+      toast.error('Недостаточно маны', {
+        description: 'Выполняйте миссии, чтобы заработать больше маны',
+      });
+    }
+  };
+
+  return (
+    <div className="min-h-screen pb-20 md:pb-8 cosmic-bg">
+      <div className="stars-bg fixed inset-0 pointer-events-none" />
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 py-6">
+        <button
+          onClick={() => router.back()}
+          className="flex items-center gap-2 text-slate-400 hover:text-white mb-6 transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          <span>Назад</span>
+        </button>
+
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <div className="flex items-center gap-3 mb-2">
+              <ShoppingBag 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="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-purple-500/20 to-purple-600/20 border border-purple-500/50 rounded-lg">
+            <Zap className="w-5 h-5 text-purple-400" />
+            <span className="text-xl font-bold text-white">{user.mana}</span>
+          </div>
+        </div>
+
+        <div className="mb-6">
+          <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">
+            {storeCategories.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-purple-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 className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredItems.map((item, index) => (
+            <motion.div
+              key={item.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, delay: index * 0.1 }}
+            >
+              <CosmicCard
+                className="overflow-hidden"
+                onClick={() => {
+                  setSelectedItem(item);
+                  setIsModalOpen(true);
+                }}
+              >
+                <img
+                  src={item.image}
+                  alt={item.name}
+                  className="w-full h-48 object-cover"
+                />
+                <div className="p-5">
+                  <h3 className="text-lg font-bold text-white mb-1">{item.name}</h3>
+                  <span className="inline-block px-2 py-1 text-xs font-medium bg-purple-500/20 text-purple-400 rounded mb-3">
+                    {item.category}
+                  </span>
+
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <Zap className="w-5 h-5 text-purple-400" />
+                      <span className="text-xl font-bold text-white">{item.price}</span>
+                    </div>
+                    <button
+                      className={`px-4 py-2 rounded-lg font-medium text-sm transition-colors ${
+                        user.mana >= item.price
+                          ? 'bg-purple-500 text-white hover:bg-purple-600'
+                          : 'bg-slate-700 text-slate-400 cursor-not-allowed'
+                      }`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setSelectedItem(item);
+                        setIsModalOpen(true);
+                      }}
+                    >
+                      Купить
+                    </button>
+                  </div>
+                </div>
+              </CosmicCard>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => {
+          setIsModalOpen(false);
+          setSelectedItem(null);
+        }}
+        title="Подтверждение покупки"
+      >
+        {selectedItem && (
+          <div>
+            <img
+              src={selectedItem.image}
+              alt={selectedItem.name}
+              className="w-full h-64 object-cover rounded-lg mb-4"
+            />
+
+            <h3 className="text-2xl font-bold text-white mb-2">{selectedItem.name}</h3>
+            <p className="text-slate-400 mb-4">{selectedItem.description}</p>
+
+            <div className="flex items-center justify-between p-4 bg-slate-800/50 rounded-lg border border-slate-700 mb-6">
+              <span className="text-slate-300 font-medium">Стоимость:</span>
+              <div className="flex items-center gap-2">
+                <Zap className="w-5 h-5 text-purple-400" />
+                <span className="text-2xl font-bold text-white">{selectedItem.price}</span>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between p-4 bg-purple-500/10 rounded-lg border border-purple-500/30 mb-6">
+              <span className="text-slate-300 font-medium">Ваш баланс:</span>
+              <div className="flex items-center gap-2">
+                <Zap className="w-5 h-5 text-purple-400" />
+                <span className="text-2xl font-bold text-white">{user.mana}</span>
+              </div>
+            </div>
+
+            {user.mana < selectedItem.price && (
+              <div className="p-4 bg-red-500/10 border border-red-500/30 rounded-lg mb-6">
+                <p className="text-red-400 text-sm">
+                  Недостаточно маны. Необходимо еще {selectedItem.price - user.mana} маны.
+                </p>
+              </div>
+            )}
+
+            <div className="flex gap-3">
+              <button
+                onClick={() => {
+                  setIsModalOpen(false);
+                  setSelectedItem(null);
+                }}
+                className="flex-1 py-3 px-4 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-lg transition-colors flex items-center justify-center gap-2"
+              >
+                <X className="w-5 h-5" />
+                Отмена
+              </button>
+              <button
+                onClick={handlePurchase}
+                disabled={user.mana < selectedItem.price}
+                className="flex-1 py-3 px-4 bg-gradient-to-r from-purple-500 to-pink-600 text-white font-semibold rounded-lg hover:from-purple-600 hover:to-pink-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2"
+              >
+                <Check className="w-5 h-5" />
+                Купить
+              </button>
+            </div>
+          </div>
+        )}
+      </Modal>
+
+      <MobileNav />
+    </div>
+  );
+}