front update
This commit is contained in:
arrelin
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="text-blue-600 hover:text-blue-700 mb-2"
|
||||
>
|
||||
← Назад к списку семей
|
||||
</button>
|
||||
<h1 className="text-4xl font-bold text-gray-900">
|
||||
<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="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>
|
||||
<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
|
||||
key={category.id}
|
||||
className="bg-white rounded-lg shadow-md p-6 flex items-center gap-6"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mb-2">
|
||||
{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'} ₽
|
||||
</span>
|
||||
{' / '}
|
||||
{category.limit_amount.toString()} ₽
|
||||
</p>
|
||||
</div>
|
||||
<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);
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{showAddExpense === category.id ? (
|
||||
<div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Сумма"
|
||||
value={expenseAmount}
|
||||
onChange={(e) => setExpenseAmount(e.target.value)}
|
||||
className="w-full mb-2 px-3 py-2 border border-gray-300 rounded"
|
||||
return (
|
||||
<div
|
||||
key={category.id}
|
||||
className="glass-effect rounded-3xl shadow-xl p-6 sm:p-8 card-hover"
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
</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}%` }}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Описание (опционально)"
|
||||
value={expenseDescription}
|
||||
onChange={(e) => setExpenseDescription(e.target.value)}
|
||||
className="w-full mb-2 px-3 py-2 border border-gray-300 rounded"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleAddExpense(category.id)}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
|
||||
>
|
||||
Добавить
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowAddExpense(null)}
|
||||
className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 text-center font-medium">
|
||||
{percentage.toFixed(0)}% осталось
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{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="0.00"
|
||||
value={expenseAmount}
|
||||
onChange={(e) => setExpenseAmount(e.target.value)}
|
||||
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="Опционально"
|
||||
value={expenseDescription}
|
||||
onChange={(e) => setExpenseDescription(e.target.value)}
|
||||
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>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => handleAddExpense(category.id)}
|
||||
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-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>
|
||||
</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 className="mt-8 bg-white rounded-lg shadow-md p-6">
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mb-4">
|
||||
Управление категориями
|
||||
</h2>
|
||||
<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">
|
||||
<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"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Лимит"
|
||||
value={newCategoryLimit}
|
||||
onChange={(e) => setNewCategoryLimit(e.target.value)}
|
||||
className="w-full mb-2 px-4 py-2 border border-gray-300 rounded-lg"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleAddCategory}
|
||||
className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
|
||||
>
|
||||
Создать
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowAddCategory(false)}
|
||||
className="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<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 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="Лимит (₽)"
|
||||
value={newCategoryLimit}
|
||||
onChange={(e) => setNewCategoryLimit(e.target.value)}
|
||||
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-3">
|
||||
<button
|
||||
onClick={handleAddCategory}
|
||||
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-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>
|
||||
|
||||
@@ -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">
|
||||
Выберите семью
|
||||
</h2>
|
||||
|
||||
{families.length === 0 ? (
|
||||
<p className="text-gray-500 text-center py-8">
|
||||
Семьи не найдены. Создайте семью в админ панели.
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{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"
|
||||
>
|
||||
<h3 className="text-xl font-semibold text-gray-900">
|
||||
{family.name}
|
||||
</h3>
|
||||
</button>
|
||||
))}
|
||||
<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 ? (
|
||||
<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="flex flex-row flex-wrap gap-4 justify-center">
|
||||
{families.map((family) => (
|
||||
<button
|
||||
key={family.id}
|
||||
onClick={() => handleSelectFamily(family)}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
|
||||
{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">
|
||||
Введите пароль для семьи
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-6">
|
||||
{selectedFamilyForAuth.name}
|
||||
</p>
|
||||
<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 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>
|
||||
|
||||
Reference in New Issue
Block a user