front update

frontend/.env

@@ -1 +1 @@
-VITE_API_BASE_URL=http://localhost:8080
+VITE_API_BASE_URL=

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@tailwindcss/postcss": "^4.1.18",
         "axios": "^1.13.2",
+        "lucide-react": "^0.561.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.10.1",
@@ -3436,6 +3437,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.561.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.561.0.tgz",
+      "integrity": "sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.18",
     "axios": "^1.13.2",
+    "lucide-react": "^0.561.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.10.1",

frontend/src/api/client.ts

@@ -13,7 +13,7 @@ import type {
   VerifyFamilyPasswordResponse,
 } from '../types';
 
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000';
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
 
 const apiClient = axios.create({
   baseURL: API_BASE_URL,

frontend/src/index.css

@@ -1,3 +1,51 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+.gradient-bg {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.gradient-bg-light {
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.card-hover {
+  transition: all 0.3s;
+}
+
+.card-hover:hover {
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  transform: translateY(-0.25rem);
+}
+
+.glass-effect {
+  background: rgb(255 255 255 / 0.8);
+  backdrop-filter: blur(12px);
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.2s ease-in-out;
+}
+
+.animate-scaleIn {
+  animation: scaleIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

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">
-            Вход в админ панель
+      <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>
 
             {loginError && (
-            <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-              {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>
             )}
 
             <form onSubmit={handleLogin} className="space-y-4">
               <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+                <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 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  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="block text-sm font-medium text-gray-700 mb-1">
+                <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 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  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 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+                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
               onClick={() => navigate('/')}
-            className="w-full mt-4 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition"
+              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>
           </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>
+          <p className="text-purple-100 text-base sm:text-lg mb-6">
+            Управление семьями
+          </p>
+          <div className="flex justify-center gap-3">
             <button
               onClick={handleLogout}
-            className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
+              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>
-        </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"
-            />
             <button
-              onClick={handleCreateFamily}
-              className="w-full px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
+              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">
+        <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">
+            <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">
+                  <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>
   );

frontend/src/pages/FamilyView.tsx

@@ -3,6 +3,18 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { categoryApi, expenseApi } from '../api/client';
 import { useStore } from '../store/useStore';
 import type { Category } from '../types';
+import {
+  ArrowLeft,
+  Wallet,
+  TrendingDown,
+  Plus,
+  Trash2,
+  RotateCcw,
+  Loader2,
+  X,
+  DollarSign,
+  Tag,
+} from 'lucide-react';
 
 export default function FamilyView() {
   const { familyId } = useParams<{ familyId: string }>();
@@ -140,160 +152,255 @@ export default function FamilyView() {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
-        <div className="text-xl text-gray-600">Загрузка...</div>
+      <div className="min-h-screen flex items-center justify-center gradient-bg">
+        <div className="flex items-center gap-3 text-white">
+          <Loader2 className="w-8 h-8 animate-spin" />
+          <span className="text-xl font-medium">Загрузка...</span>
+        </div>
       </div>
     );
   }
 
+  const getProgressColor = (remaining: number, limit: number) => {
+    const percentage = (remaining / limit) * 100;
+    if (percentage > 50) return 'bg-green-500';
+    if (percentage > 25) return 'bg-yellow-500';
+    return 'bg-red-500';
+  };
+
+  const getProgressPercentage = (remaining: number, limit: number) => {
+    return Math.max(0, Math.min(100, (remaining / limit) * 100));
+  };
+
   return (
-    <div className="min-h-screen bg-gray-50 py-12 px-4">
-      <div className="max-w-6xl mx-auto">
-        <div className="flex justify-between items-center mb-8">
-          <div>
+    <div className="min-h-screen gradient-bg py-8 sm:py-12 px-4">
+      <div className="max-w-5xl mx-auto">
+        <div className="mb-6 sm:mb-8">
           <button
             onClick={() => navigate('/')}
-              className="text-blue-600 hover:text-blue-700 mb-2"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-2xl backdrop-blur-md mb-6 transition-all duration-300 group"
           >
-              ← Назад к списку семей
+            <ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
+            <span className="font-medium">Назад к списку семей</span>
           </button>
-            <h1 className="text-4xl font-bold text-gray-900">
+          <div className="text-center">
+            <div className="inline-flex p-4 bg-white/20 backdrop-blur-md rounded-2xl mb-4">
+              <Wallet className="w-12 h-12 text-white" />
+            </div>
+            <h1 className="text-4xl sm:text-5xl font-bold text-white mb-2">
               {selectedFamily?.name || 'Семья'}
             </h1>
+            <p className="text-purple-100 text-base sm:text-lg">
+              Управление категориями и расходами
+            </p>
           </div>
         </div>
 
         {error && (
-          <div className="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
-            {error}
+          <div className="mb-6 p-4 bg-red-500/90 backdrop-blur-md border border-red-300/50 text-white rounded-2xl shadow-lg max-w-2xl mx-auto">
+            <div className="flex items-center gap-2">
+              <X className="w-5 h-5 flex-shrink-0" />
+              <span>{error}</span>
+            </div>
           </div>
         )}
 
-        <div className="space-y-4">
-          {categories.map((category) => (
+        <div className="space-y-5 mb-6 max-w-3xl mx-auto">
+          {categories.map((category) => {
+            const remaining = remainingLimits.get(category.id) || 0;
+            const limit = parseFloat(category.limit_amount.toString());
+            const percentage = getProgressPercentage(remaining, limit);
+
+            return (
               <div
                 key={category.id}
-              className="bg-white rounded-lg shadow-md p-6 flex items-center gap-6"
+                className="glass-effect rounded-3xl shadow-xl p-6 sm:p-8 card-hover"
               >
-              <div className="flex-1">
-                <h2 className="text-2xl font-semibold text-gray-900 mb-2">
+                <div className="flex items-center justify-between gap-4 mb-6">
+                  <div className="flex items-center gap-4">
+                    <div className="p-3 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl shadow-lg">
+                      <Tag className="w-8 h-8" />
+                    </div>
+                    <h2 className="text-2xl sm:text-3xl font-bold text-gray-900">
                       {category.name}
                     </h2>
-                <p className="text-lg text-gray-700">
-                  Остаток: <span className="font-bold text-green-600">
-                    {remainingLimits.get(category.id)?.toFixed(2) || '0.00'} ₽
+                  </div>
+
+                  {showAddExpense !== category.id && (
+                    <button
+                      onClick={() => setShowAddExpense(category.id)}
+                      className="flex items-center gap-2 px-5 py-3 bg-linear-to-r from-red-500 to-pink-500 text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold whitespace-nowrap"
+                    >
+                      <TrendingDown className="w-5 h-5" />
+                      <span className="hidden sm:inline">Добавить расход</span>
+                      <span className="sm:hidden">Расход</span>
+                    </button>
+                  )}
+                </div>
+
+                <div className="space-y-4 mb-6">
+                  <div className="flex justify-between items-baseline">
+                    <span className="text-gray-600 font-medium">Остаток:</span>
+                    <span className="text-3xl sm:text-4xl font-bold text-gray-900">
+                      {remaining.toFixed(2)} ₽
                     </span>
-                  {' / '}
-                  {category.limit_amount.toString()} ₽
+                  </div>
+                  <div className="flex justify-between items-baseline text-gray-500">
+                    <span>Лимит:</span>
+                    <span className="text-lg font-semibold">{limit.toFixed(2)} ₽</span>
+                  </div>
+
+                  <div className="relative h-4 bg-gray-200 rounded-full overflow-hidden">
+                    <div
+                      className={`h-full ${getProgressColor(remaining, limit)} transition-all duration-500 rounded-full shadow-inner`}
+                      style={{ width: `${percentage}%` }}
+                    />
+                  </div>
+                  <p className="text-sm text-gray-500 text-center font-medium">
+                    {percentage.toFixed(0)}% осталось
                   </p>
                 </div>
 
-              <div className="flex flex-col gap-2">
-                {showAddExpense === category.id ? (
-                  <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
+                {showAddExpense === category.id && (
+                  <div className="bg-linear-to-br from-purple-50 to-blue-50 p-6 rounded-2xl border-2 border-purple-200">
+                    <h3 className="font-semibold text-gray-800 mb-4 text-center">
+                      Добавить расход
+                    </h3>
+                    <div className="space-y-4">
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Сумма (₽)
+                        </label>
                         <input
                           type="number"
-                      placeholder="Сумма"
+                          placeholder="0.00"
                           value={expenseAmount}
                           onChange={(e) => setExpenseAmount(e.target.value)}
-                      className="w-full mb-2 px-3 py-2 border border-gray-300 rounded"
+                          className="w-full px-4 py-3 border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all text-center font-semibold text-lg"
                         />
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Описание
+                        </label>
                         <input
                           type="text"
-                      placeholder="Описание (опционально)"
+                          placeholder="Опционально"
                           value={expenseDescription}
                           onChange={(e) => setExpenseDescription(e.target.value)}
-                      className="w-full mb-2 px-3 py-2 border border-gray-300 rounded"
+                          className="w-full px-4 py-3 border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all"
                         />
-                    <div className="flex gap-2">
+                      </div>
+                      <div className="flex gap-3">
                         <button
                           onClick={() => handleAddExpense(category.id)}
-                        className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+                          className="flex-1 flex items-center justify-center gap-2 px-5 py-3 bg-linear-to-r from-green-500 to-green-600 text-white rounded-2xl hover:shadow-xl transition-all font-semibold"
                         >
+                          <Plus className="w-5 h-5" />
                           Добавить
                         </button>
                         <button
                           onClick={() => setShowAddExpense(null)}
-                        className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
+                          className="px-5 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-2xl transition-all font-medium"
                         >
-                        Отмена
+                          <X className="w-5 h-5" />
                         </button>
                       </div>
                     </div>
-                ) : (
-                  <button
-                    onClick={() => setShowAddExpense(category.id)}
-                    className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
-                  >
-                    Вычесть из остатка
-                  </button>
+                  </div>
                 )}
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
 
-        <div className="mt-8 bg-white rounded-lg shadow-md p-6">
-          <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+        <div className="glass-effect rounded-3xl shadow-xl p-6 sm:p-8 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">
+              <DollarSign className="w-8 h-8 text-white" />
+            </div>
+            <h2 className="text-2xl sm:text-3xl font-bold text-gray-800">
               Управление категориями
             </h2>
+          </div>
 
           {showAddCategory ? (
-            <div className="mb-4">
+            <div className="mb-8 p-6 bg-linear-to-br from-purple-50 to-blue-50 rounded-2xl border-2 border-purple-200">
+              <h3 className="font-bold text-gray-800 mb-5 text-center text-lg">
+                Новая категория
+              </h3>
+              <div className="space-y-4">
                 <input
                   type="text"
                   placeholder="Название категории"
                   value={newCategoryName}
                   onChange={(e) => setNewCategoryName(e.target.value)}
-                className="w-full mb-2 px-4 py-2 border border-gray-300 rounded-lg"
+                  className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all font-medium"
                 />
                 <input
                   type="number"
-                placeholder="Лимит"
+                  placeholder="Лимит (₽)"
                   value={newCategoryLimit}
                   onChange={(e) => setNewCategoryLimit(e.target.value)}
-                className="w-full mb-2 px-4 py-2 border border-gray-300 rounded-lg"
+                  className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all font-medium text-center"
                 />
-              <div className="flex gap-2">
+                <div className="flex gap-3">
                   <button
                     onClick={handleAddCategory}
-                  className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+                    className="flex-1 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 font-semibold"
                   >
+                    <Plus className="w-5 h-5" />
                     Создать
                   </button>
                   <button
                     onClick={() => setShowAddCategory(false)}
-                  className="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400"
+                    className="px-6 py-4 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-2xl transition-all font-medium"
                   >
                     Отмена
                   </button>
                 </div>
               </div>
+            </div>
           ) : (
             <button
               onClick={() => setShowAddCategory(true)}
-              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 mb-4"
+              className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-linear-to-r from-purple-600 to-blue-600 text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold mb-8"
             >
+              <Plus className="w-5 h-5" />
               Добавить категорию
             </button>
           )}
 
-          <div className="space-y-2">
+          <div className="space-y-3">
             {categories.map((category) => (
-              <div key={category.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
-                <span className="font-medium">{category.name}</span>
+              <div
+                key={category.id}
+                className="flex flex-col sm:flex-row sm:justify-between 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"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-purple-500 text-white rounded-xl">
+                    <Tag className="w-5 h-5" />
+                  </div>
+                  <span className="font-bold text-gray-800 text-lg">
+                    {category.name}
+                  </span>
+                </div>
                 <div className="flex gap-2">
                   <button
                     onClick={() => handleResetLimit(category.id)}
-                    className="px-4 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600"
+                    className="flex-1 sm:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-yellow-500 hover:bg-yellow-600 text-white rounded-xl transition-all font-medium shadow-md hover:shadow-lg"
                   >
-                    Обнулить траты
+                    <RotateCcw className="w-4 h-4" />
+                    <span className="hidden sm:inline">Обнулить</span>
+                    <span className="sm:hidden">Сброс</span>
                   </button>
                   <button
                     onClick={() => handleDeleteCategory(category.id)}
-                    className="px-4 py-1 bg-red-500 text-white rounded hover:bg-red-600"
+                    className="flex-1 sm:flex-none flex items-center justify-center gap-2 px-4 py-2.5 bg-red-500 hover:bg-red-600 text-white rounded-xl transition-all font-medium shadow-md hover:shadow-lg"
                   >
-                    Удалить
+                    <Trash2 className="w-4 h-4" />
+                    <span className="hidden sm:inline">Удалить</span>
+                    <span className="sm:hidden">X</span>
                   </button>
                 </div>
               </div>

frontend/src/pages/Home.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { familyApi, categoryApi } from '../api/client';
 import { useStore } from '../store/useStore';
 import type { Family } from '../types';
+import { Users, Settings, Lock, Loader2, X } from 'lucide-react';
 
 export default function Home() {
   const navigate = useNavigate();
@@ -88,95 +89,134 @@ export default function Home() {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
-        <div className="text-xl text-gray-600">Загрузка...</div>
+      <div className="min-h-screen flex items-center justify-center gradient-bg">
+        <div className="flex items-center gap-3 text-white">
+          <Loader2 className="w-8 h-8 animate-spin" />
+          <span className="text-xl font-medium">Загрузка...</span>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 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="min-h-screen gradient-bg py-8 sm:py-12 px-4 flex items-center justify-center">
+      <div className="w-full max-w-2xl">
+        <div className="text-center mb-8">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-3">
             Семейный бюджет
           </h1>
           <button
             onClick={handleGoToAdmin}
-            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-linear-to-r from-orange-400 via-pink-500 to-purple-500 hover:from-orange-500 hover:via-pink-600 hover:to-purple-600 text-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 font-semibold"
           >
-            Админка
+            <Settings className="w-5 h-5" />
+            <span className="font-medium">Админка</span>
           </button>
         </div>
 
         {error && (
-          <div className="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
-            {error}
+          <div className="mb-6 p-4 bg-red-500/90 backdrop-blur-md border border-red-300/50 text-white rounded-2xl shadow-lg">
+            <div className="flex items-center gap-2">
+              <X className="w-5 h-5 flex-shrink-0" />
+              <span>{error}</span>
+            </div>
           </div>
         )}
 
-        <div className="bg-white rounded-lg shadow-md p-8">
-          <h2 className="text-2xl font-semibold text-gray-800 mb-6">
+        <div className="text-center mb-6">
+          <div className="inline-flex items-center gap-3 mb-6">
+            <div className="p-3 bg-white/20 backdrop-blur-md rounded-2xl">
+              <Users className="w-8 h-8 text-white" />
+            </div>
+            <h2 className="text-2xl sm:text-3xl font-bold text-white">
               Выберите семью
             </h2>
+          </div>
+        </div>
 
         {families.length === 0 ? (
-            <p className="text-gray-500 text-center py-8">
-              Семьи не найдены. Создайте семью в админ панели.
+          <div className="glass-effect rounded-3xl shadow-2xl p-10 text-center">
+            <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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="flex flex-row flex-wrap gap-4 justify-center">
             {families.map((family) => (
               <button
                 key={family.id}
                 onClick={() => handleSelectFamily(family)}
-                  className="p-6 border-2 border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition text-left"
+                className="group w-80 p-8 bg-linear-to-br from-pink-200 via-purple-200 to-indigo-200 border-2 border-pink-400 rounded-3xl hover:border-pink-500 hover:shadow-2xl transition-all duration-300 text-center card-hover hover:from-pink-300 hover:via-purple-300 hover:to-indigo-300"
               >
-                  <h3 className="text-xl font-semibold text-gray-900">
+                <div className="flex flex-col items-center gap-4">
+                  <div className="p-4 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl group-hover:scale-110 transition-transform duration-300 shadow-lg">
+                    <Users className="w-10 h-10" />
+                  </div>
+                  <div>
+                    <h3 className="text-xl sm:text-2xl font-bold text-gray-900 mb-2">
                       {family.name}
                     </h3>
+                    <p className="text-sm text-gray-500">
+                      Нажмите для просмотра
+                    </p>
+                  </div>
+                </div>
               </button>
             ))}
           </div>
         )}
-        </div>
 
         {showPasswordDialog && selectedFamilyForAuth && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-            <div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full">
-              <h2 className="text-2xl font-bold text-gray-900 mb-4">
-                Введите пароль для семьи
+          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50 animate-fadeIn">
+            <div className="glass-effect rounded-3xl shadow-2xl p-8 sm:p-10 max-w-md w-full animate-scaleIn">
+              <div className="flex flex-col items-center text-center mb-6">
+                <div className="p-4 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl mb-4 shadow-lg">
+                  <Lock className="w-10 h-10" />
+                </div>
+                <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
+                  Защищённая семья
                 </h2>
-              <p className="text-gray-600 mb-6">
-                {selectedFamilyForAuth.name}
+                <p className="text-gray-600 text-sm sm:text-base">
+                  <span className="font-semibold text-purple-600">{selectedFamilyForAuth.name}</span>
                 </p>
+              </div>
 
               {passwordError && (
-                <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-                  {passwordError}
+                <div className="mb-6 p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-xl">
+                  <div className="flex items-center gap-2">
+                    <X className="w-5 h-5 flex-shrink-0" />
+                    <span className="text-sm font-medium">{passwordError}</span>
+                  </div>
                 </div>
               )}
 
               <input
                 type="password"
-                placeholder="Пароль"
+                placeholder="Введите пароль"
                 value={familyPassword}
                 onChange={(e) => setFamilyPassword(e.target.value)}
                 onKeyDown={(e) => e.key === 'Enter' && handleVerifyPassword()}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent mb-4"
+                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 mb-6 text-base text-center font-medium"
                 autoFocus
               />
 
-              <div className="flex gap-2">
+              <div className="flex flex-col gap-3">
                 <button
                   onClick={handleVerifyPassword}
-                  className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+                  className="flex items-center justify-center gap-2 px-6 py-4 bg-linear-to-r from-purple-600 to-blue-600 text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold text-base"
                 >
+                  <Lock className="w-5 h-5" />
                   Войти
                 </button>
                 <button
                   onClick={handleCancelPasswordDialog}
-                  className="flex-1 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition"
+                  className="px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-2xl transition-all duration-300 font-medium"
                 >
                   Отмена
                 </button>

frontend/vite.config.ts

@@ -6,8 +6,16 @@ export default defineConfig({
   server: {
     port: 5173,
     proxy: {
-      '/api': {
-        target: 'http://localhost:3000',
+      '/families': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+      },
+      '/login': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+      },
+      '/logout': {
+        target: 'http://localhost:8080',
         changeOrigin: true,
       }
     }