try to do better
This commit is contained in:
arrelin
@@ -3,13 +3,14 @@ import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { categoryApi, expenseApi, inviteLinkApi } from '../api/client';
|
||||
import { useStore } from '../store/useStore';
|
||||
import type { Category, Expense, InviteLinkResponse } from '../types';
|
||||
import type { Category, Expense, InviteLinkResponse, ExpenseHistoryResponse } from '../types';
|
||||
import {
|
||||
Wallet,
|
||||
TrendingDown,
|
||||
Plus,
|
||||
Trash2,
|
||||
RotateCcw,
|
||||
Archive,
|
||||
Loader2,
|
||||
X,
|
||||
DollarSign,
|
||||
@@ -45,7 +46,9 @@ export default function FamilyView() {
|
||||
const [expenseDescription, setExpenseDescription] = useState('');
|
||||
|
||||
const [showHistory, setShowHistory] = useState<number | null>(null);
|
||||
const [categoryExpenses, setCategoryExpenses] = useState<Expense[]>([]);
|
||||
const [showArchive, setShowArchive] = useState<number | null>(null);
|
||||
const [historyData, setHistoryData] = useState<ExpenseHistoryResponse | null>(null);
|
||||
const [archiveData, setArchiveData] = useState<ExpenseHistoryResponse | null>(null);
|
||||
const [showShoppingList, setShowShoppingList] = useState(false);
|
||||
const [showInviteModal, setShowInviteModal] = useState(false);
|
||||
const [inviteLink, setInviteLink] = useState<InviteLinkResponse | null>(null);
|
||||
@@ -176,12 +179,15 @@ export default function FamilyView() {
|
||||
return;
|
||||
}
|
||||
|
||||
setShowArchive(null);
|
||||
|
||||
try {
|
||||
const response = await expenseApi.getAllByCategory(
|
||||
const response = await expenseApi.getHistory(
|
||||
parseInt(familyId),
|
||||
categoryId
|
||||
categoryId,
|
||||
false
|
||||
);
|
||||
setCategoryExpenses(response.data);
|
||||
setHistoryData(response.data);
|
||||
setShowHistory(categoryId);
|
||||
} catch (err) {
|
||||
alert(t('expense.historyError'));
|
||||
@@ -189,6 +195,30 @@ export default function FamilyView() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleShowArchive = async (categoryId: number) => {
|
||||
if (!familyId) return;
|
||||
|
||||
if (showArchive === categoryId) {
|
||||
setShowArchive(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setShowHistory(null);
|
||||
|
||||
try {
|
||||
const response = await expenseApi.getHistory(
|
||||
parseInt(familyId),
|
||||
categoryId,
|
||||
true
|
||||
);
|
||||
setArchiveData(response.data);
|
||||
setShowArchive(categoryId);
|
||||
} catch (err) {
|
||||
alert(t('expense.archiveError'));
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateInviteLink = async () => {
|
||||
try {
|
||||
setInviteLoading(true);
|
||||
@@ -264,6 +294,15 @@ export default function FamilyView() {
|
||||
});
|
||||
};
|
||||
|
||||
const getMonthName = (month: number) => {
|
||||
const months = [
|
||||
t('months.1'), t('months.2'), t('months.3'), t('months.4'),
|
||||
t('months.5'), t('months.6'), t('months.7'), t('months.8'),
|
||||
t('months.9'), t('months.10'), t('months.11'), t('months.12')
|
||||
];
|
||||
return months[month - 1] || month;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen gradient-bg py-8 sm:py-12 px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
@@ -382,32 +421,39 @@ export default function FamilyView() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 justify-between">
|
||||
<div className="grid grid-cols-2 gap-2 mb-2">
|
||||
<button
|
||||
onClick={() => handleResetLimit(category.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-xl transition-all font-semibold shadow-md hover:shadow-lg text-sm"
|
||||
className="flex items-center justify-center gap-1.5 px-3 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-xl transition-all font-semibold shadow-md hover:shadow-lg text-sm"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
<span>{t('category.reset')}</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleShowHistory(category.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-xl transition-all font-semibold shadow-md hover:shadow-lg text-sm"
|
||||
className="flex items-center justify-center gap-1.5 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-xl transition-all font-semibold shadow-md hover:shadow-lg text-sm"
|
||||
>
|
||||
<History className="w-4 h-4" />
|
||||
<span>{t('category.history')}</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleShowArchive(category.id)}
|
||||
className="flex items-center justify-center gap-1.5 px-3 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-xl transition-all font-semibold shadow-md hover:shadow-lg text-sm"
|
||||
>
|
||||
<Archive className="w-4 h-4" />
|
||||
<span>{t('category.archive')}</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteCategory(category.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-xl transition-all font-semibold shadow-md hover:shadow-lg text-sm"
|
||||
className="flex items-center justify-center gap-1.5 px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-xl transition-all font-semibold shadow-md hover:shadow-lg text-sm"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
<span>{t('common.delete')}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showHistory === category.id && (
|
||||
<div className="mt-4 glass-effect p-4 rounded-2xl border-2 border-gray-200">
|
||||
{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">
|
||||
<h3 className="font-semibold text-gray-800 text-lg flex items-center gap-2">
|
||||
<History className="w-5 h-5" />
|
||||
@@ -421,35 +467,117 @@ export default function FamilyView() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{categoryExpenses.length === 0 ? (
|
||||
{historyData.months.length === 0 ? (
|
||||
<p className="text-center text-gray-500 py-4">{t('expense.noExpenses')}</p>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{categoryExpenses.map((expense) => (
|
||||
<div
|
||||
key={expense.id}
|
||||
className="expense-history-item p-3 rounded-xl shadow-sm border"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 bg-red-100 rounded-lg">
|
||||
<TrendingDown className="w-4 h-4 text-red-600" />
|
||||
</div>
|
||||
<span className="font-bold text-gray-900 text-lg">
|
||||
{parseFloat(expense.amount.toString()).toFixed(2)} ₽
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<Calendar className="w-3 h-3" />
|
||||
<span>{formatDate(expense.created_at)}</span>
|
||||
</div>
|
||||
<div className="space-y-4 max-h-96 overflow-y-auto">
|
||||
{historyData.months.map((monthGroup) => (
|
||||
<div key={`${monthGroup.year}-${monthGroup.month}`} className="border-l-4 border-blue-500 pl-4">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h4 className="font-bold text-gray-900">
|
||||
{getMonthName(monthGroup.month)} {monthGroup.year}
|
||||
</h4>
|
||||
<span className="text-lg font-semibold text-blue-600">
|
||||
{parseFloat(monthGroup.total_amount.toString()).toFixed(2)} ₽
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{monthGroup.expenses.map((expense) => (
|
||||
<div
|
||||
key={expense.id}
|
||||
className="expense-history-item p-3 rounded-xl shadow-sm border bg-white"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 bg-red-100 rounded-lg">
|
||||
<TrendingDown className="w-4 h-4 text-red-600" />
|
||||
</div>
|
||||
<span className="font-bold text-gray-900 text-lg">
|
||||
{parseFloat(expense.amount.toString()).toFixed(2)} ₽
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<Calendar className="w-3 h-3" />
|
||||
<span>{formatDate(expense.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{expense.description && (
|
||||
<div className="flex items-start gap-2 text-sm text-gray-600 expense-description p-2 rounded-lg">
|
||||
<MessageSquare className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>{expense.description}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showArchive === category.id && archiveData && (
|
||||
<div className="mt-4 glass-effect p-4 rounded-2xl border-2 border-purple-200">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-gray-800 text-lg flex items-center gap-2">
|
||||
<Archive className="w-5 h-5" />
|
||||
{t('expense.archiveTitle')}
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setShowArchive(null)}
|
||||
className="p-2 hover:bg-white/50 rounded-xl transition-all"
|
||||
>
|
||||
<X className="w-5 h-5 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{archiveData.months.length === 0 ? (
|
||||
<p className="text-center text-gray-500 py-4">{t('expense.noArchive')}</p>
|
||||
) : (
|
||||
<div className="space-y-4 max-h-96 overflow-y-auto">
|
||||
{archiveData.months.map((monthGroup) => (
|
||||
<div key={`archive-${monthGroup.year}-${monthGroup.month}`} className="border-l-4 border-purple-500 pl-4">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h4 className="font-bold text-gray-700">
|
||||
{getMonthName(monthGroup.month)} {monthGroup.year}
|
||||
</h4>
|
||||
<span className="text-lg font-semibold text-purple-600">
|
||||
{parseFloat(monthGroup.total_amount.toString()).toFixed(2)} ₽
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{monthGroup.expenses.map((expense) => (
|
||||
<div
|
||||
key={expense.id}
|
||||
className="expense-history-item p-3 rounded-xl shadow-sm border bg-gray-50 opacity-75"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 bg-gray-200 rounded-lg">
|
||||
<TrendingDown className="w-4 h-4 text-gray-500" />
|
||||
</div>
|
||||
<span className="font-bold text-gray-600 text-lg line-through">
|
||||
{parseFloat(expense.amount.toString()).toFixed(2)} ₽
|
||||
</span>
|
||||
<span className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full">
|
||||
{t('expense.archived')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<Calendar className="w-3 h-3" />
|
||||
<span>{formatDate(expense.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{expense.description && (
|
||||
<div className="flex items-start gap-2 text-sm text-gray-500 expense-description p-2 rounded-lg">
|
||||
<MessageSquare className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span className="line-through">{expense.description}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{expense.description && (
|
||||
<div className="flex items-start gap-2 text-sm text-gray-600 expense-description p-2 rounded-lg">
|
||||
<MessageSquare className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>{expense.description}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user