front update
This commit is contained in:
arrelin
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user