front update

frontend/src/pages/AdminPanel.tsx

@@ -2,6 +2,18 @@ import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { authApi, familyApi } from '../api/client';
 import { useStore } from '../store/useStore';
+import {
+  Shield,
+  Home,
+  LogOut,
+  Users,
+  Plus,
+  Trash2,
+  Lock,
+  User,
+  ArrowLeft,
+  X,
+} from 'lucide-react';
 
 export default function AdminPanel() {
   const navigate = useNavigate();
@@ -95,131 +107,203 @@ export default function AdminPanel() {
 
   if (!isAuthenticated) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
-        <div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
-          <h1 className="text-3xl font-bold text-gray-900 mb-6 text-center">
-            Вход в админ панель
-          </h1>
-
-          {loginError && (
-            <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-              {loginError}
+      <div className="min-h-screen gradient-bg flex items-center justify-center py-8 sm:py-12 px-4">
+        <div className="max-w-md w-full">
+          <div className="glass-effect rounded-2xl shadow-2xl p-6 sm:p-8">
+            <div className="flex items-center justify-center mb-6">
+              <div className="p-4 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl">
+                <Shield className="w-10 h-10 sm:w-12 sm:h-12" />
+              </div>
             </div>
-          )}
+            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2 text-center">
+              Админ панель
+            </h1>
+            <p className="text-gray-600 text-center mb-6 text-sm sm:text-base">
+              Войдите для управления системой
+            </p>
 
-          <form onSubmit={handleLogin} className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Логин
-              </label>
-              <input
-                type="text"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                required
-              />
-            </div>
+            {loginError && (
+              <div className="mb-4 p-3 bg-red-100 border-l-4 border-red-500 text-red-700 rounded">
+                <div className="flex items-center gap-2">
+                  <X className="w-4 h-4 flex-shrink-0" />
+                  <span className="text-sm">{loginError}</span>
+                </div>
+              </div>
+            )}
 
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Пароль
-              </label>
-              <input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                required
-              />
-            </div>
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div>
+                <label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
+                  <User className="w-4 h-4" />
+                  Логин
+                </label>
+                <input
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  className="w-full px-4 py-2.5 sm:py-3 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all text-sm sm:text-base"
+                  placeholder="Введите логин"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
+                  <Lock className="w-4 h-4" />
+                  Пароль
+                </label>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-4 py-2.5 sm:py-3 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all text-sm sm:text-base"
+                  placeholder="Введите пароль"
+                  required
+                />
+              </div>
+
+              <button
+                type="submit"
+                className="w-full flex items-center justify-center gap-2 px-4 py-2.5 sm:py-3 bg-linear-to-r from-purple-600 to-blue-600 text-white rounded-xl hover:shadow-lg transition-all duration-300 font-medium text-sm sm:text-base"
+              >
+                <Shield className="w-4 h-4 sm:w-5 sm:h-5" />
+                Войти
+              </button>
+            </form>
 
             <button
-              type="submit"
-              className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+              onClick={() => navigate('/')}
+              className="w-full mt-4 flex items-center justify-center gap-2 px-4 py-2.5 sm:py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-xl transition-all duration-300 font-medium text-sm sm:text-base"
             >
-              Войти
+              <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
+              На главную
             </button>
-          </form>
-
-          <button
-            onClick={() => navigate('/')}
-            className="w-full mt-4 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition"
-          >
-            Назад
-          </button>
+          </div>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 py-12 px-4">
+    <div className="min-h-screen gradient-bg py-8 sm:py-12 px-4">
       <div className="max-w-4xl mx-auto">
-        <div className="flex justify-between items-center mb-8">
-          <h1 className="text-4xl font-bold text-gray-900">
+        <div className="text-center mb-8">
+          <div className="inline-flex p-4 bg-white/20 backdrop-blur-md rounded-2xl mb-4">
+            <Shield className="w-12 h-12 text-white" />
+          </div>
+          <h1 className="text-4xl sm:text-5xl font-bold text-white mb-2">
             Админ панель
           </h1>
-          <button
-            onClick={handleLogout}
-            className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
-          >
-            Выход
-          </button>
-        </div>
-
-        <div className="bg-white rounded-lg shadow-md p-8 mb-6">
-          <h2 className="text-2xl font-semibold text-gray-900 mb-4">
-            Создать новую семью
-          </h2>
-
-          <div className="space-y-3">
-            <input
-              type="text"
-              placeholder="Название семьи"
-              value={newFamilyName}
-              onChange={(e) => setNewFamilyName(e.target.value)}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
-            <input
-              type="password"
-              placeholder="Пароль семьи"
-              value={newFamilyPassword}
-              onChange={(e) => setNewFamilyPassword(e.target.value)}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
+          <p className="text-purple-100 text-base sm:text-lg mb-6">
+            Управление семьями
+          </p>
+          <div className="flex justify-center gap-3">
             <button
-              onClick={handleCreateFamily}
-              className="w-full px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
+              onClick={handleLogout}
+              className="inline-flex items-center gap-2 px-5 py-3 bg-red-500/80 hover:bg-red-600 text-white rounded-2xl backdrop-blur-md transition-all duration-300 hover:shadow-lg font-medium"
             >
-              Создать
+              <LogOut className="w-5 h-5" />
+              Выход
+            </button>
+            <button
+              onClick={() => navigate('/')}
+              className="inline-flex items-center gap-2 px-5 py-3 bg-white/20 hover:bg-white/30 text-white rounded-2xl backdrop-blur-md transition-all duration-300 hover:shadow-lg font-medium"
+            >
+              <Home className="w-5 h-5" />
+              На главную
             </button>
           </div>
         </div>
 
-        <div className="bg-white rounded-lg shadow-md p-8">
-          <h2 className="text-2xl font-semibold text-gray-900 mb-4">
-            Список семей
-          </h2>
+        <div className="glass-effect rounded-3xl shadow-xl p-6 sm:p-10 mb-6 max-w-2xl mx-auto">
+          <div className="flex items-center justify-center gap-3 mb-8">
+            <div className="p-3 bg-linear-to-br from-green-500 to-green-600 rounded-2xl">
+              <Plus className="w-8 h-8 text-white" />
+            </div>
+            <h2 className="text-2xl sm:text-3xl font-bold text-gray-800">
+              Создать новую семью
+            </h2>
+          </div>
+
+          <div className="space-y-5">
+            <div>
+              <label className="flex items-center justify-center gap-2 text-sm font-semibold text-gray-700 mb-3">
+                <Users className="w-5 h-5 text-purple-600" />
+                Название семьи
+              </label>
+              <input
+                type="text"
+                placeholder="Например: Семья Ивановых"
+                value={newFamilyName}
+                onChange={(e) => setNewFamilyName(e.target.value)}
+                className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all font-medium text-center"
+              />
+            </div>
+            <div>
+              <label className="flex items-center justify-center gap-2 text-sm font-semibold text-gray-700 mb-3">
+                <Lock className="w-5 h-5 text-purple-600" />
+                Пароль семьи
+              </label>
+              <input
+                type="password"
+                placeholder="Защитите семью паролем"
+                value={newFamilyPassword}
+                onChange={(e) => setNewFamilyPassword(e.target.value)}
+                className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all font-medium text-center"
+              />
+            </div>
+            <button
+              onClick={handleCreateFamily}
+              className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-linear-to-r from-green-500 to-green-600 text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold text-lg"
+            >
+              <Plus className="w-6 h-6" />
+              Создать семью
+            </button>
+          </div>
+        </div>
+
+        <div className="glass-effect rounded-3xl shadow-xl p-6 sm:p-10 max-w-3xl mx-auto">
+          <div className="flex items-center justify-center gap-3 mb-8">
+            <div className="p-3 bg-linear-to-br from-purple-500 to-blue-500 rounded-2xl">
+              <Users className="w-8 h-8 text-white" />
+            </div>
+            <h2 className="text-2xl sm:text-3xl font-bold text-gray-800">
+              Список семей
+            </h2>
+          </div>
 
           {families.length === 0 ? (
-            <p className="text-gray-500 text-center py-4">
-              Семьи не найдены
-            </p>
+            <div className="text-center py-16 sm:py-20">
+              <div className="inline-flex p-6 bg-linear-to-br from-purple-100 to-blue-100 rounded-3xl mb-6">
+                <Users className="w-20 h-20 text-purple-400" />
+              </div>
+              <p className="text-gray-600 text-lg sm:text-xl mb-2 font-semibold">
+                Семьи не найдены
+              </p>
+              <p className="text-gray-500 text-sm sm:text-base">
+                Создайте первую семью
+              </p>
+            </div>
           ) : (
-            <div className="space-y-2">
+            <div className="space-y-3">
               {families.map((family) => (
                 <div
                   key={family.id}
-                  className="flex justify-between items-center p-4 bg-gray-50 rounded-lg"
+                  className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-5 bg-linear-to-r from-purple-50 to-blue-50 rounded-2xl border-2 border-purple-200 card-hover"
                 >
-                  <span className="text-lg font-medium text-gray-900">
-                    {family.name}
-                  </span>
+                  <div className="flex items-center gap-3">
+                    <div className="p-3 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-xl shadow-md">
+                      <Users className="w-6 h-6" />
+                    </div>
+                    <span className="text-lg sm:text-xl font-bold text-gray-900">
+                      {family.name}
+                    </span>
+                  </div>
                   <button
                     onClick={() => handleDeleteFamily(family.id)}
-                    className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition"
+                    className="w-full sm:w-auto flex items-center justify-center gap-2 px-5 py-3 bg-red-500 hover:bg-red-600 text-white rounded-xl transition-all font-semibold shadow-md hover:shadow-lg"
                   >
+                    <Trash2 className="w-5 h-5" />
                     Удалить
                   </button>
                 </div>
@@ -227,13 +311,6 @@ export default function AdminPanel() {
             </div>
           )}
         </div>
-
-        <button
-          onClick={() => navigate('/')}
-          className="mt-6 px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition"
-        >
-          На главную
-        </button>
       </div>
     </div>
   );