try to do better

2026-02-12 18:43:36 +03:00
parent 3410786da7
commit 2f4e8af2a0
12 changed files with 439 additions and 52 deletions
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -26,6 +26,7 @@ import type {
  JoinFamilyResponse,
  FamilyMember,
  LeaveFamilyResponse,
+  ExpenseHistoryResponse,
 } from '../types';

 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
@@ -120,6 +121,11 @@ export const expenseApi = {

  getRemainingLimit: (familyId: number, categoryId: number) =>
    apiClient.get<RemainingLimit>(`/families/${familyId}/categories/${categoryId}/remaining`),
+
+  getHistory: (familyId: number, categoryId: number, showArchive: boolean = false, sortOrder: string = 'desc') =>
+    apiClient.get<ExpenseHistoryResponse>(`/families/${familyId}/categories/${categoryId}/expenses/history`, {
+      params: { show_archive: showArchive, sort_order: sortOrder },
+    }),
 };

 export const shoppingItemApi = {
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -55,6 +55,7 @@
    "expense": "Expense",
    "reset": "Reset",
    "history": "History",
+    "archive": "Archive",
    "management": "Category management",
    "newCategory": "New category",
    "categoryName": "Category name",
@@ -73,9 +74,13 @@
    "description": "Description",
    "descriptionPlaceholder": "Optional",
    "historyTitle": "Expense history",
+    "archiveTitle": "Expense archive",
    "noExpenses": "No expenses",
+    "noArchive": "Archive is empty",
+    "archived": "Archived",
    "addError": "Error adding expense",
-    "historyError": "Error loading expense history"
+    "historyError": "Error loading expense history",
+    "archiveError": "Error loading archive"
  },
  "invite": {
    "title": "Invite member",
@@ -168,5 +173,19 @@
      "forest": "Forest",
      "purple": "Purple"
    }
+  },
+  "months": {
+    "1": "January",
+    "2": "February",
+    "3": "March",
+    "4": "April",
+    "5": "May",
+    "6": "June",
+    "7": "July",
+    "8": "August",
+    "9": "September",
+    "10": "October",
+    "11": "November",
+    "12": "December"
  }
 }
--- a/frontend/src/i18n/locales/ru.json
+++ b/frontend/src/i18n/locales/ru.json
@@ -55,6 +55,7 @@
    "expense": "Расход",
    "reset": "Обнулить",
    "history": "История",
+    "archive": "Архив",
    "management": "Управление категориями",
    "newCategory": "Новая категория",
    "categoryName": "Название категории",
@@ -73,9 +74,13 @@
    "description": "Описание",
    "descriptionPlaceholder": "Опционально",
    "historyTitle": "История трат",
+    "archiveTitle": "Архив трат",
    "noExpenses": "Нет трат",
+    "noArchive": "Архив пуст",
+    "archived": "Архив",
    "addError": "Ошибка добавления расхода",
-    "historyError": "Ошибка загрузки истории трат"
+    "historyError": "Ошибка загрузки истории трат",
+    "archiveError": "Ошибка загрузки архива"
  },
  "invite": {
    "title": "Пригласить участника",
@@ -168,5 +173,19 @@
      "forest": "Лес",
      "purple": "Фиолетовая"
    }
+  },
+  "months": {
+    "1": "Январь",
+    "2": "Февраль",
+    "3": "Март",
+    "4": "Апрель",
+    "5": "Май",
+    "6": "Июнь",
+    "7": "Июль",
+    "8": "Август",
+    "9": "Сентябрь",
+    "10": "Октябрь",
+    "11": "Ноябрь",
+    "12": "Декабрь"
  }
 }
--- a/frontend/src/pages/FamilyView.tsx
+++ b/frontend/src/pages/FamilyView.tsx
@@ -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>
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -29,6 +29,18 @@ export interface Expense {
  amount: number;
  description?: string;
  created_at: string;
+  active: boolean;
+}
+
+export interface MonthlyExpenseGroup {
+  year: number;
+  month: number;
+  total_amount: number | string;
+  expenses: Expense[];
+}
+
+export interface ExpenseHistoryResponse {
+  months: MonthlyExpenseGroup[];
 }

 export interface RemainingLimit {