Merge pull request 'try to do better' (#22) from feature/history into master

Reviewed-on: http://192.168.31.100:3847/Arrelin/family_budget/pulls/22

backend/src/lib.rs

@@ -50,6 +50,7 @@ pub use middleware::{require_admin, require_family_access};
         routes::expense::update_expense,
         routes::expense::delete_expense,
         routes::expense::get_remaining_limit,
+        routes::expense::get_history,
         routes::shopping_item::create_shopping_item,
         routes::shopping_item::get_shopping_items_by_family,
         routes::shopping_item::get_shopping_item,
@@ -87,6 +88,8 @@ pub use middleware::{require_admin, require_family_access};
             routes::expense::CreateExpenseRequest,
             routes::expense::UpdateExpenseRequest,
             routes::expense::RemainingLimitResponse,
+            routes::expense::ExpenseHistoryResponse,
+            routes::expense::MonthlyExpenseGroup,
             routes::shopping_item::CreateShoppingItemRequest,
             routes::shopping_item::UpdateShoppingItemRequest,
             routes::shopping_item::MarkAsPurchasedRequest,
@@ -187,6 +190,7 @@ pub async fn create_app(db: DatabaseConnection) -> Result<Router, DbErr> {
         .route("/families/{family_id}/categories/{category_id}", delete(routes::category::delete_category))
         .route("/families/{family_id}/categories/{category_id}/expenses", post(routes::expense::create_expense))
         .route("/families/{family_id}/categories/{category_id}/expenses", get(routes::expense::get_expenses_by_category))
+        .route("/families/{family_id}/categories/{category_id}/expenses/history", get(routes::expense::get_history))
         .route("/families/{family_id}/categories/{category_id}/expenses/{expense_id}", get(routes::expense::get_expense))
         .route("/families/{family_id}/categories/{category_id}/expenses/{expense_id}", put(routes::expense::update_expense))
         .route("/families/{family_id}/categories/{category_id}/expenses/{expense_id}", delete(routes::expense::delete_expense))

backend/src/migration/m20260212_000001_add_expense_active.rs

@@ -0,0 +1,40 @@
+use sea_orm_migration::prelude::*;
+
+#[derive(DeriveMigrationName)]
+pub struct Migration;
+
+#[async_trait::async_trait]
+impl MigrationTrait for Migration {
+    async fn up(&self, manager: &SchemaManager) -> Result<(), DbErr> {
+        manager
+            .alter_table(
+                Table::alter()
+                    .table(Expense::Table)
+                    .add_column(
+                        ColumnDef::new(Expense::Active)
+                            .boolean()
+                            .not_null()
+                            .default(true)
+                    )
+                    .to_owned(),
+            )
+            .await
+    }
+
+    async fn down(&self, manager: &SchemaManager) -> Result<(), DbErr> {
+        manager
+            .alter_table(
+                Table::alter()
+                    .table(Expense::Table)
+                    .drop_column(Expense::Active)
+                    .to_owned(),
+            )
+            .await
+    }
+}
+
+#[derive(DeriveIden)]
+enum Expense {
+    Table,
+    Active,
+}

backend/src/migration/mod.rs

@@ -7,6 +7,7 @@ mod m20241215_000001_add_family_password;
 mod m20241224_000001_create_shopping_items;
 mod m20250116_000001_add_oauth_fields;
 mod m20250117_000001_create_invite_links;
+mod m20260212_000001_add_expense_active;
 
 pub struct Migrator;
 
@@ -21,6 +22,7 @@ impl MigratorTrait for Migrator {
             Box::new(m20241224_000001_create_shopping_items::Migration),
             Box::new(m20250116_000001_add_oauth_fields::Migration),
             Box::new(m20250117_000001_create_invite_links::Migration),
+            Box::new(m20260212_000001_add_expense_active::Migration),
         ]
     }
 }

backend/src/models/expense.rs

@@ -11,6 +11,7 @@ pub struct Model {
     pub amount: Decimal,
     pub description: Option<String>,
     pub created_at: DateTime,
+    pub active: bool,
 }
 
 #[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]

backend/src/routes/expense.rs

@@ -1,12 +1,11 @@
 use axum::{
-    extract::{Path, State},
+    extract::{Path, Query, State},
     http::StatusCode,
     Json,
 };
 use sea_orm::{prelude::Decimal, DatabaseConnection};
 use serde::{Deserialize, Serialize};
-use utoipa::ToSchema;
+use utoipa::{IntoParams, ToSchema};
-
 use crate::models::expense::Model as ExpenseModel;
 use crate::services::{CategoryService, ExpenseService};
 
@@ -31,6 +30,27 @@ pub struct RemainingLimitResponse {
     pub remaining_limit: Decimal,
 }
 
+#[derive(Debug, Serialize, Deserialize, ToSchema)]
+pub struct MonthlyExpenseGroup {
+    pub year: i32,
+    pub month: u32,
+    pub total_amount: Decimal,
+    pub expenses: Vec<ExpenseModel>,
+}
+
+#[derive(Debug, Serialize, Deserialize, ToSchema)]
+pub struct ExpenseHistoryResponse {
+    pub months: Vec<MonthlyExpenseGroup>,
+}
+
+#[derive(Debug, Deserialize, IntoParams)]
+pub struct HistoryQueryParams {
+    #[serde(default)]
+    pub sort_order: Option<String>,
+    #[serde(default)]
+    pub show_archive: Option<bool>,
+}
+
 #[utoipa::path(
     post,
     path = "/families/{family_id}/categories/{category_id}/expenses",
@@ -183,6 +203,53 @@ pub async fn update_expense(
         .map(Json)
         .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)
 }
+#[utoipa::path(
+    get,
+    path = "/families/{family_id}/categories/{category_id}/expenses/history",
+    tag = "expenses",
+    params(
+        ("family_id" = i32, Path, description = "Family ID"),
+        ("category_id" = i32, Path, description = "Category ID"),
+        HistoryQueryParams
+    ),
+    responses(
+        (status = 200, description = "Expense history grouped by month", body = ExpenseHistoryResponse),
+        (status = 404, description = "Category not found"),
+        (status = 500, description = "Internal server error")
+    )
+)]
+pub async fn get_history(
+    State(db): State<DatabaseConnection>,
+    Path((family_id, category_id)): Path<(i32, i32)>,
+    Query(params): Query<HistoryQueryParams>,
+) -> Result<Json<ExpenseHistoryResponse>, StatusCode> {
+    let category = CategoryService::find_by_id(&db, category_id)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+        .ok_or(StatusCode::NOT_FOUND)?;
+
+    if category.family_id != family_id {
+        return Err(StatusCode::NOT_FOUND);
+    }
+
+    let groups = ExpenseService::get_expense_history(
+            &db,
+            category_id,
+            params.sort_order,
+            params.show_archive.unwrap_or(false)
+        )
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    let months = groups.into_iter().map(|g| MonthlyExpenseGroup {
+        year: g.year,
+        month: g.month,
+        total_amount: g.total_amount,
+        expenses: g.expenses,
+    }).collect();
+
+    Ok(Json(ExpenseHistoryResponse { months }))
+}
 
 #[utoipa::path(
     delete,
@@ -194,7 +261,7 @@ pub async fn update_expense(
         ("expense_id" = i32, Path, description = "Expense ID")
     ),
     responses(
-        (status = 204, description = "Expense deleted successfully"),
+        (status = 200, description = "Expense deactivated successfully", body = ExpenseModel),
         (status = 404, description = "Expense not found"),
         (status = 500, description = "Internal server error")
     )
@@ -202,7 +269,7 @@ pub async fn update_expense(
 pub async fn delete_expense(
     State(db): State<DatabaseConnection>,
     Path((family_id, category_id, expense_id)): Path<(i32, i32, i32)>,
-) -> Result<StatusCode, StatusCode> {
+) -> Result<Json<ExpenseModel>, StatusCode> {
     let category = CategoryService::find_by_id(&db, category_id)
         .await
         .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
@@ -223,7 +290,7 @@ pub async fn delete_expense(
 
     ExpenseService::delete(&db, expense_id)
         .await
-        .map(|_| StatusCode::NO_CONTENT)
+        .map(Json)
         .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)
 }
 

backend/src/services/expense_service.rs

@@ -1,9 +1,18 @@
 use sea_orm::*;
 use sea_orm::prelude::Decimal;
-use chrono::Utc;
+use chrono::{Utc, Datelike};
+use std::collections::HashMap;
 use crate::models::expense::{self, Entity as Expense, Model as ExpenseModel};
 use crate::models::category::{Entity as Category};
 
+#[derive(Debug, Clone)]
+pub struct MonthlyExpenseGroup {
+    pub year: i32,
+    pub month: u32,
+    pub total_amount: Decimal,
+    pub expenses: Vec<ExpenseModel>,
+}
+
 pub struct ExpenseService;
 
 impl ExpenseService {
@@ -18,6 +27,7 @@ impl ExpenseService {
             amount: Set(amount),
             description: Set(description),
             created_at: Set(Utc::now().naive_utc()),
+            active: Set(true),
             ..Default::default()
         };
 
@@ -38,6 +48,28 @@ impl ExpenseService {
     ) -> Result<Vec<ExpenseModel>, DbErr> {
         Expense::find()
             .filter(expense::Column::CategoryId.eq(category_id))
+            .filter(expense::Column::Active.eq(true))
+            .all(db)
+            .await
+    }
+
+    pub async fn find_all_by_category_id(
+        db: &DatabaseConnection,
+        category_id: i32,
+    ) -> Result<Vec<ExpenseModel>, DbErr> {
+        Expense::find()
+            .filter(expense::Column::CategoryId.eq(category_id))
+            .all(db)
+            .await
+    }
+
+    pub async fn find_inactive_by_category_id(
+        db: &DatabaseConnection,
+        category_id: i32,
+    ) -> Result<Vec<ExpenseModel>, DbErr> {
+        Expense::find()
+            .filter(expense::Column::CategoryId.eq(category_id))
+            .filter(expense::Column::Active.eq(false))
             .all(db)
             .await
     }
@@ -66,14 +98,15 @@ impl ExpenseService {
         expense.update(db).await
     }
 
-    pub async fn delete(db: &DatabaseConnection, id: i32) -> Result<DeleteResult, DbErr> {
+    pub async fn delete(db: &DatabaseConnection, id: i32) -> Result<ExpenseModel, DbErr> {
         let expense = Expense::find_by_id(id)
             .one(db)
             .await?
             .ok_or(DbErr::RecordNotFound("Expense not found".to_string()))?;
 
-        let expense: expense::ActiveModel = expense.into();
+        let mut expense: expense::ActiveModel = expense.into();
-        expense.delete(db).await
+        expense.active = Set(false);
+        expense.update(db).await
     }
 
     pub async fn calculate_remaining_limit(
@@ -92,4 +125,60 @@ impl ExpenseService {
 
         Ok(remaining)
     }
+
+    pub async fn get_expense_history(
+        db: &DatabaseConnection,
+        category_id: i32,
+        sort_order: Option<String>,
+        show_archive: bool,
+    ) -> Result<Vec<MonthlyExpenseGroup>, DbErr> {
+        let expenses = if show_archive {
+            Self::find_inactive_by_category_id(db, category_id).await?
+        } else {
+            Self::find_by_category_id(db, category_id).await?
+        };
+
+        let mut grouped: HashMap<(i32, u32), Vec<ExpenseModel>> = HashMap::new();
+
+        for expense in expenses {
+            let year = expense.created_at.year();
+            let month = expense.created_at.month();
+            grouped.entry((year, month))
+                .or_insert_with(Vec::new)
+                .push(expense);
+        }
+
+        let mut result: Vec<MonthlyExpenseGroup> = grouped
+            .into_iter()
+            .map(|((year, month), expenses)| {
+                let total_amount: Decimal = expenses
+                    .iter()
+                    .filter(|e| e.active)
+                    .map(|e| e.amount)
+                    .sum();
+                MonthlyExpenseGroup {
+                    year,
+                    month,
+                    total_amount,
+                    expenses,
+                }
+            })
+            .collect();
+
+        let sort_desc = sort_order
+            .as_deref()
+            .map(|s| s.to_lowercase() == "desc")
+            .unwrap_or(true);
+
+        result.sort_by(|a, b| {
+            let cmp = a.year.cmp(&b.year).then(a.month.cmp(&b.month));
+            if sort_desc {
+                cmp.reverse()
+            } else {
+                cmp
+            }
+        });
+
+        Ok(result)
+    }
 }

backend/src/services/oauth_service.rs

@@ -32,7 +32,7 @@ impl OAuthService {
         let redirect_url = std::env::var("GOOGLE_REDIRECT_URL")
             .unwrap_or_else(|_| "http://localhost:8080/api/auth/google/callback".to_string());
 
-        let client = Self::getClient(client_id, client_secret, redirect_url);
+        let client = Self::get_client(client_id, client_secret, redirect_url);
 
         let (auth_url, csrf_token) = client
             .authorize_url(CsrfToken::new_random)
@@ -52,7 +52,7 @@ impl OAuthService {
         let redirect_url = std::env::var("GOOGLE_REDIRECT_URL")
             .unwrap_or_else(|_| "http://localhost:8080/api/auth/google/callback".to_string());
 
-        let client = Self::getClient(client_id, client_secret, redirect_url);
+        let client = Self::get_client(client_id, client_secret, redirect_url);
 
         let http_client = oauth2::reqwest::ClientBuilder::new()
             .build()
@@ -67,7 +67,7 @@ impl OAuthService {
         Ok(token.access_token().secret().clone())
     }
 
-    fn getClient(client_id: String, client_secret: String, redirect_url: String) -> Client<BasicErrorResponse,
+    fn get_client(client_id: String, client_secret: String, redirect_url: String) -> Client<BasicErrorResponse,
                                                                                            BasicTokenResponse,
                                                                                            BasicTokenIntrospectionResponse,
                                                                                            StandardRevocableToken,

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 = {

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"
   }
 }

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": "Декабрь"
   }
 }

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 && (
+                {showHistory === category.id && historyData && (
-                  <div className="mt-4 glass-effect p-4 rounded-2xl border-2 border-gray-200">
+                  <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,14 +467,25 @@ 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">
+                      <div className="space-y-4 max-h-96 overflow-y-auto">
-                        {categoryExpenses.map((expense) => (
+                        {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"
+                                  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">
@@ -453,6 +510,77 @@ export default function FamilyView() {
                                 </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>
+                          </div>
+                        ))}
+                      </div>
                     )}
                   </div>
                 )}

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 {