This commit is contained in:
arrelin
2026-03-10 12:16:00 +03:00
parent 0f72d62d3e
commit 6f679a5066
6 changed files with 92 additions and 50 deletions

View File

@@ -164,7 +164,17 @@ export default function FamilyView() {
setExpenseAmount('');
setExpenseDescription('');
setShowAddExpense(null);
loadCategories();
const limitResponse = await expenseApi.getRemainingLimit(parseInt(familyId), categoryId);
const limitValue = typeof limitResponse.data.remaining_limit === 'string'
? parseFloat(limitResponse.data.remaining_limit)
: limitResponse.data.remaining_limit;
setRemainingLimits(prev => new Map(prev).set(categoryId, limitValue));
if (showHistory === categoryId) {
const historyResponse = await expenseApi.getHistory(parseInt(familyId), categoryId, false);
setHistoryData(historyResponse.data);
}
} catch (err) {
alert(t('expense.addError'));
console.error(err);
@@ -452,6 +462,55 @@ export default function FamilyView() {
</button>
</div>
{showAddExpense === category.id && (
<div className="glass-effect p-6 rounded-2xl border-2 border-gray-200 mt-4">
<h3 className="font-semibold text-gray-800 mb-4 text-center">
{t('expense.addTitle')}
</h3>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
{t('expense.amount')}
</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">
{t('expense.description')}
</label>
<input
type="text"
placeholder={t('expense.descriptionPlaceholder')}
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 btn-success text-white rounded-2xl hover:shadow-xl transition-all font-semibold"
>
<Plus className="w-5 h-5" />
{t('common.add')}
</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>
)}
{showHistory === category.id && historyData && (
<div className="mt-4 glass-effect p-4 rounded-2xl border-2 border-blue-200">
<div className="flex items-center justify-between mb-4">
@@ -585,54 +644,6 @@ export default function FamilyView() {
</div>
)}
{showAddExpense === category.id && (
<div className="glass-effect p-6 rounded-2xl border-2 border-gray-200 mt-4">
<h3 className="font-semibold text-gray-800 mb-4 text-center">
{t('expense.addTitle')}
</h3>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
{t('expense.amount')}
</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">
{t('expense.description')}
</label>
<input
type="text"
placeholder={t('expense.descriptionPlaceholder')}
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 btn-success text-white rounded-2xl hover:shadow-xl transition-all font-semibold"
>
<Plus className="w-5 h-5" />
{t('common.add')}
</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>
)}
</div>
);
})}