try to do better

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

.github/workflows/docker-publish.yml

@@ -29,3 +29,10 @@ jobs:
 
       - name: Logout
         run: docker logout 192.168.31.100:3847
+
+      - name: Trigger Coolify redeploy
+        run: |
+            curl -s -H "Authorization: Bearer ${{ secrets.COOLIFY_TOKEN }}" \
+              "http://192.168.31.100:8000/api/v1/deploy?uuid=msoc4skogk44ckc84wokocw0&force=true"
+
+

backend/Cargo.toml

@@ -4,24 +4,24 @@ version = "0.1.0"
 edition = "2024"
 
 [dependencies]
-tokio = { version = "1.48.0", features = ["full"] }
+tokio = { version = "1.49.0", features = ["full"] }
-sea-orm = { version = "1.0", features = ["sqlx-postgres", "runtime-tokio-rustls", "macros"] }
+sea-orm = { version = "1.1.19", features = ["sqlx-postgres", "runtime-tokio-rustls", "macros"] }
-sea-orm-migration = { version = "1.0", default-features = false, features = ["sqlx-postgres", "runtime-tokio-rustls"] }
+sea-orm-migration = { version = "1.1.19", default-features = false, features = ["sqlx-postgres", "runtime-tokio-rustls"] }
 dotenvy = "0.15.7"
-axum = { version = "0.7", features = ["json"] }
+axum = { version = "0.8.8", features = ["json"] }
-tower-http = { version = "0.5", features = ["cors"] }
+tower-http = { version = "0.6.8", features = ["cors"] }
 chrono = { version = "0.4.42", features = ["serde"] }
 serde = { version = "1.0.228", features = ["derive"] }
 serde_json = "1.0"
 utoipa = { version = "5.4.0", features = ["axum_extras", "chrono", "decimal_float"] }
-utoipa-swagger-ui = { version = "8.0", features = ["axum"] }
+utoipa-swagger-ui = { version = "9.0.2", features = ["axum"] }
-axum-login = "0.15"
+axum-login = "0.18.0"
-tower-sessions = "0.12"
+tower-sessions = "0.14.0"
-tower-sessions-sqlx-store = { version = "0.12", features = ["postgres"] }
+tower-sessions-sqlx-store = { version = "0.15.0", features = ["postgres"] }
 argon2 = "0.5"
 async-trait = "0.1"
 thiserror = "2.0"
 time = "0.3"
 oauth2 = { version = "5.0.0", features = ["reqwest"] }
-reqwest = { version = "0.12.28", features = ["json"] }
+reqwest = { version = "0.13.1", features = ["json"] }
-rand = "0.8"
+rand = "0.9.2"

backend/Dockerfile

@@ -1,4 +1,8 @@
-FROM rust:1.92.0 AS builder
+FROM archlinux:latest AS builder
+
+RUN pacman -Syu --noconfirm && \
+    pacman -S --noconfirm rust cargo && \
+    pacman -Scc --noconfirm
 
 WORKDIR /app
 
@@ -11,12 +15,11 @@ COPY src ./src
 RUN touch src/main.rs
 RUN cargo build --release
 
-FROM debian:bookworm-slim
+FROM archlinux:latest
 
-RUN apt-get update && apt-get install -y \
+RUN pacman -Syu --noconfirm && \
-    libssl3 \
+    pacman -S --noconfirm openssl ca-certificates && \
-    ca-certificates \
+    pacman -Scc --noconfirm
-    && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /app
 

backend/src/auth.rs

@@ -40,43 +40,52 @@ pub struct Credentials {
     pub password: String,
 }
 
-#[async_trait::async_trait]
 impl AuthnBackend for AuthBackend {
     type User = user::Model;
     type Credentials = Credentials;
     type Error = Error;
 
-    async fn authenticate(
+    fn authenticate(
         &self,
         creds: Self::Credentials,
-    ) -> Result<Option<Self::User>, Self::Error> {
+    ) -> impl Future<Output = Result<Option<Self::User>, Self::Error>> + Send {
-        let user = User::find()
+        let db = self.db.clone();
-            .filter(user::Column::Username.eq(&creds.username))
+        async move {
-            .one(&self.db)
+            let user = User::find()
-            .await?;
+                .filter(user::Column::Username.eq(&creds.username))
+                .one(&db)
+                .await?;
 
-        if let Some(user) = user {
+            if let Some(user) = user {
-            let password_hash = user.password_hash.as_ref().ok_or(Error::InvalidCredentials)?;
+                let password_hash = user.password_hash.as_ref().ok_or(Error::InvalidCredentials)?;
-            let parsed_hash = PasswordHash::new(password_hash)
+                let parsed_hash = PasswordHash::new(password_hash)
-                .map_err(|_| Error::PasswordHash)?;
+                    .map_err(|_| Error::PasswordHash)?;
 
-            let is_valid = Argon2::default()
+                let is_valid = Argon2::default()
-                .verify_password(creds.password.as_bytes(), &parsed_hash)
+                    .verify_password(creds.password.as_bytes(), &parsed_hash)
-                .is_ok();
+                    .is_ok();
 
-            if is_valid {
+                if is_valid {
-                Ok(Some(user))
+                    Ok(Some(user))
+                } else {
+                    Err(Error::InvalidCredentials)
+                }
             } else {
                 Err(Error::InvalidCredentials)
             }
-        } else {
-            Err(Error::InvalidCredentials)
         }
     }
 
-    async fn get_user(&self, user_id: &UserId<Self>) -> Result<Option<Self::User>, Self::Error> {
+    fn get_user(
-        let user = User::find_by_id(*user_id).one(&self.db).await?;
+        &self,
-        Ok(user)
+        user_id: &UserId<Self>,
+    ) -> impl Future<Output = Result<Option<Self::User>, Self::Error>> + Send {
+        let db = self.db.clone();
+        let user_id = *user_id;
+        async move {
+            let user = User::find_by_id(user_id).one(&db).await?;
+            Ok(user)
+        }
     }
 }
 

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,
@@ -150,7 +153,7 @@ pub async fn create_app(db: DatabaseConnection) -> Result<Router, DbErr> {
 
     let admin_family_routes = Router::new()
         .route("/families", post(routes::family::create_family))
-        .route("/families/:id", delete(routes::family::delete_family))
+        .route("/families/{id}", delete(routes::family::delete_family))
         .route_layer(axum_middleware::from_fn(middleware::require_admin))
         .layer(auth_layer.clone())
         .with_state(db.clone());
@@ -174,42 +177,43 @@ pub async fn create_app(db: DatabaseConnection) -> Result<Router, DbErr> {
     let invite_link_routes = Router::new()
         .route("/my-family/invite-links", post(routes::invite_link::create_invite_link))
         .route("/my-family/invite-links", get(routes::invite_link::get_my_invite_links))
-        .route("/my-family/invite-links/:token", delete(routes::invite_link::delete_invite_link))
+        .route("/my-family/invite-links/{token}", delete(routes::invite_link::delete_invite_link))
-        .route("/invite/:token/join", post(routes::invite_link::join_family_via_invite))
+        .route("/invite/{token}/join", post(routes::invite_link::join_family_via_invite))
-        .layer(auth_layer)
+        .layer(auth_layer.clone())
         .with_state(db.clone());
 
     let family_protected_routes = Router::new()
-        .route("/families/:family_id/categories", post(routes::category::create_category))
+        .route("/families/{family_id}/categories", post(routes::category::create_category))
-        .route("/families/:family_id/categories", get(routes::category::get_categories_by_family))
+        .route("/families/{family_id}/categories", get(routes::category::get_categories_by_family))
-        .route("/families/:family_id/categories/:category_id", get(routes::category::get_category))
+        .route("/families/{family_id}/categories/{category_id}", get(routes::category::get_category))
-        .route("/families/:family_id/categories/:category_id", put(routes::category::update_category))
+        .route("/families/{family_id}/categories/{category_id}", put(routes::category::update_category))
-        .route("/families/:family_id/categories/:category_id", delete(routes::category::delete_category))
+        .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", 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", get(routes::expense::get_expenses_by_category))
-        .route("/families/:family_id/categories/:category_id/expenses/:expense_id", get(routes::expense::get_expense))
+        .route("/families/{family_id}/categories/{category_id}/expenses/history", get(routes::expense::get_history))
-        .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}", get(routes::expense::get_expense))
-        .route("/families/:family_id/categories/:category_id/expenses/:expense_id", delete(routes::expense::delete_expense))
+        .route("/families/{family_id}/categories/{category_id}/expenses/{expense_id}", put(routes::expense::update_expense))
-        .route("/families/:family_id/categories/:category_id/remaining", get(routes::expense::get_remaining_limit))
+        .route("/families/{family_id}/categories/{category_id}/expenses/{expense_id}", delete(routes::expense::delete_expense))
-        .route("/families/:family_id/shopping-items", post(routes::shopping_item::create_shopping_item))
+        .route("/families/{family_id}/categories/{category_id}/remaining", get(routes::expense::get_remaining_limit))
-        .route("/families/:family_id/shopping-items", get(routes::shopping_item::get_shopping_items_by_family))
+        .route("/families/{family_id}/shopping-items", post(routes::shopping_item::create_shopping_item))
-        .route("/families/:family_id/shopping-items/:id", get(routes::shopping_item::get_shopping_item))
+        .route("/families/{family_id}/shopping-items", get(routes::shopping_item::get_shopping_items_by_family))
-        .route("/families/:family_id/shopping-items/:id", put(routes::shopping_item::update_shopping_item))
+        .route("/families/{family_id}/shopping-items/{id}", get(routes::shopping_item::get_shopping_item))
-        .route("/families/:family_id/shopping-items/:id", delete(routes::shopping_item::delete_shopping_item))
+        .route("/families/{family_id}/shopping-items/{id}", put(routes::shopping_item::update_shopping_item))
-        .route("/families/:family_id/shopping-items/:id/purchased", axum::routing::patch(routes::shopping_item::mark_as_purchased))
+        .route("/families/{family_id}/shopping-items/{id}", delete(routes::shopping_item::delete_shopping_item))
-        .route("/families/:family_id/shopping-items/mark-all-purchased", post(routes::shopping_item::mark_all_as_purchased))
+        .route("/families/{family_id}/shopping-items/{id}/purchased", axum::routing::patch(routes::shopping_item::mark_as_purchased))
-        .route("/families/:family_id/shopping-items/clear-all", delete(routes::shopping_item::clear_all))
+        .route("/families/{family_id}/shopping-items/mark-all-purchased", post(routes::shopping_item::mark_all_as_purchased))
-        .route("/families/:family_id/members", get(routes::user::get_family_members))
+        .route("/families/{family_id}/shopping-items/clear-all", delete(routes::shopping_item::clear_all))
+        .route("/families/{family_id}/members", get(routes::user::get_family_members))
         .route_layer(axum_middleware::from_fn(middleware::require_family_access))
-        .layer(session_layer.clone())
+        .layer(auth_layer.clone())
         .with_state(db.clone());
 
     let public_routes = Router::new()
         .route("/families", get(routes::family::get_all_families))
-        .route("/families/:id", get(routes::family::get_family))
+        .route("/families/{id}", get(routes::family::get_family))
-        .route("/families/:id", put(routes::family::update_family))
+        .route("/families/{id}", put(routes::family::update_family))
-        .route("/families/:id/verify", post(routes::family::verify_family_password))
+        .route("/families/{id}/verify", post(routes::family::verify_family_password))
-        .route("/invite/:token", get(routes::invite_link::validate_invite_link))
+        .route("/invite/{token}", get(routes::invite_link::validate_invite_link))
         .layer(session_layer)
         .with_state(db);
 

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,59 @@ 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()
+                    .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/invite_link_service.rs

@@ -1,5 +1,5 @@
 use sea_orm::*;
-use rand::distributions::Alphanumeric;
+use rand::distr::Alphanumeric;
 use rand::Rng;
 use crate::models::invite_link::{self, Entity as InviteLink, Model as InviteLinkModel};
 use crate::models::{user, User};
@@ -8,7 +8,7 @@ pub struct InviteLinkService;
 
 impl InviteLinkService {
     pub fn generate_token() -> String {
-        rand::thread_rng()
+        rand::rng()
             .sample_iter(&Alphanumeric)
             .take(32)
             .map(char::from)

backend/src/services/oauth_service.rs

@@ -1,7 +1,5 @@
-use oauth2::{
+use oauth2::{basic::BasicClient, AuthUrl, ClientId, ClientSecret, RedirectUrl, TokenUrl, AuthorizationCode, TokenResponse, Scope, CsrfToken, Client, StandardRevocableToken, EndpointSet, EndpointNotSet};
-    basic::BasicClient, AuthUrl, ClientId, ClientSecret, RedirectUrl, TokenUrl,
+use oauth2::basic::{BasicErrorResponse, BasicRevocationErrorResponse, BasicTokenIntrospectionResponse, BasicTokenResponse};
-    AuthorizationCode, TokenResponse, Scope, CsrfToken,
-};
 use reqwest::Client as HttpClient;
 use sea_orm::{DatabaseConnection, EntityTrait, ColumnTrait, QueryFilter, ActiveModelTrait, Set};
 use serde::Deserialize;
@@ -34,11 +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 = BasicClient::new(ClientId::new(client_id))
+        let client = Self::get_client(client_id, client_secret, redirect_url);
-            .set_client_secret(ClientSecret::new(client_secret))
-            .set_auth_uri(AuthUrl::new("https://accounts.google.com/o/oauth2/v2/auth".to_string()).unwrap())
-            .set_token_uri(TokenUrl::new("https://oauth2.googleapis.com/token".to_string()).unwrap())
-            .set_redirect_uri(RedirectUrl::new(redirect_url).unwrap());
 
         let (auth_url, csrf_token) = client
             .authorize_url(CsrfToken::new_random)
@@ -58,11 +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 = BasicClient::new(ClientId::new(client_id))
+        let client = Self::get_client(client_id, client_secret, redirect_url);
-            .set_client_secret(ClientSecret::new(client_secret))
-            .set_auth_uri(AuthUrl::new("https://accounts.google.com/o/oauth2/v2/auth".to_string()).unwrap())
-            .set_token_uri(TokenUrl::new("https://oauth2.googleapis.com/token".to_string()).unwrap())
-            .set_redirect_uri(RedirectUrl::new(redirect_url).unwrap());
 
         let http_client = oauth2::reqwest::ClientBuilder::new()
             .build()
@@ -77,6 +67,23 @@ impl OAuthService {
         Ok(token.access_token().secret().clone())
     }
 
+    fn get_client(client_id: String, client_secret: String, redirect_url: String) -> Client<BasicErrorResponse,
+                                                                                           BasicTokenResponse,
+                                                                                           BasicTokenIntrospectionResponse,
+                                                                                           StandardRevocableToken,
+                                                                                           BasicRevocationErrorResponse,
+                                                                                           EndpointSet,
+                                                                                           EndpointNotSet,
+                                                                                           EndpointNotSet,
+                                                                                           EndpointNotSet,
+                                                                                           EndpointSet> {
+        BasicClient::new(ClientId::new(client_id))
+            .set_client_secret(ClientSecret::new(client_secret))
+            .set_auth_uri(AuthUrl::new("https://accounts.google.com/o/oauth2/v2/auth".to_string()).unwrap())
+            .set_token_uri(TokenUrl::new("https://oauth2.googleapis.com/token".to_string()).unwrap())
+            .set_redirect_uri(RedirectUrl::new(redirect_url).unwrap())
+    }
+
     pub async fn get_user_info(&self, access_token: &str) -> Result<GoogleUserInfo, OAuthError> {
         let response = self.http_client
             .get("https://www.googleapis.com/oauth2/v2/userinfo")

frontend/package-lock.json

@@ -16,6 +16,7 @@
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-i18next": "^16.5.3",
+        "react-icons": "^5.5.0",
         "react-router-dom": "^7.10.1",
         "zustand": "^5.0.9"
       },
@@ -3819,6 +3820,15 @@
         }
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",

frontend/package.json

@@ -18,6 +18,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-i18next": "^16.5.3",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.10.1",
     "zustand": "^5.0.9"
   },

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/components/ConfirmModal.tsx

@@ -27,8 +27,8 @@ export default function ConfirmModal({
     switch (variant) {
       case 'danger':
         return {
-          icon: 'bg-red-100 text-red-600',
+          icon: 'btn-danger',
-          confirmButton: 'bg-gradient-to-r from-red-500 to-red-600 hover:shadow-lg',
+          confirmButton: 'btn-danger hover:shadow-lg',
         };
       case 'warning':
         return {
@@ -37,8 +37,8 @@ export default function ConfirmModal({
         };
       case 'info':
         return {
-          icon: 'bg-blue-100 text-blue-600',
+          icon: 'btn-primary',
-          confirmButton: 'bg-gradient-to-r from-blue-500 to-blue-600 hover:shadow-lg',
+          confirmButton: 'btn-primary hover:shadow-lg',
         };
     }
   };
@@ -47,10 +47,10 @@ export default function ConfirmModal({
 
   return (
     <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-4">
-      <div className="bg-white rounded-3xl shadow-2xl max-w-md w-full overflow-hidden animate-scale-in">
+      <div className="glass-effect rounded-3xl shadow-2xl max-w-md w-full overflow-hidden animate-scale-in">
         <div className="p-6">
           <div className="flex items-start gap-4">
-            <div className={`p-3 rounded-2xl ${styles.icon}`}>
+            <div className={`p-3 rounded-2xl ${styles.icon} text-white`}>
               <AlertTriangle className="w-6 h-6" />
             </div>
             <div className="flex-1">

frontend/src/components/ShoppingListModal.tsx

@@ -189,8 +189,8 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
   return (
     <>
       <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-        <div className="bg-white rounded-3xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+        <div className="glass-effect rounded-3xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
-          <div className="bg-gradient-to-r from-green-500 to-emerald-600 p-6 flex items-center justify-between">
+          <div className="btn-success p-6 flex items-center justify-between">
             <div className="flex items-center gap-3">
               <div className="p-3 bg-white/20 backdrop-blur-md rounded-2xl">
                 <ShoppingCart className="w-8 h-8 text-white" />
@@ -218,7 +218,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
                 />
                 <button
                   onClick={handleAddItem}
-                  className="px-6 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-2xl hover:shadow-lg transition-all font-semibold flex items-center gap-2"
+                  className="px-6 py-3 btn-success text-white rounded-2xl hover:shadow-lg transition-all font-semibold flex items-center gap-2"
                 >
                   <Plus className="w-5 h-5" />
                   <span className="hidden sm:inline">{t('common.add')}</span>
@@ -302,7 +302,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
                       {purchasedItems.map((item) => (
                         <div
                           key={item.id}
-                          className="bg-green-50 p-4 rounded-2xl border-2 border-green-200"
+                          className="shopping-purchased p-4 rounded-2xl border-2"
                         >
                           <div className="flex items-center justify-between">
                             <div className="flex items-center gap-3">
@@ -342,14 +342,14 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
               <div className="flex gap-3">
                 <button
                   onClick={handleMarkAllPurchased}
-                  className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-2xl hover:shadow-lg transition-all font-semibold"
+                  className="flex-1 flex items-center justify-center gap-2 px-4 py-3 btn-success text-white rounded-2xl hover:shadow-lg transition-all font-semibold"
                 >
                   <Check className="w-5 h-5" />
                   {t('shopping.allPurchased')}
                 </button>
                 <button
                   onClick={handleClearAll}
-                  className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-2xl hover:shadow-lg transition-all font-semibold"
+                  className="flex-1 flex items-center justify-center gap-2 px-4 py-3 btn-danger text-white rounded-2xl hover:shadow-lg transition-all font-semibold"
                 >
                   <Trash2 className="w-5 h-5" />
                   {t('shopping.clear')}

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",
@@ -159,6 +164,28 @@
     "leaveConfirm": "Are you sure you want to leave the family?",
     "leaving": "Leaving...",
     "leaveError": "Error leaving family",
-    "renameError": "Error renaming family"
+    "renameError": "Error renaming family",
+    "themes": {
+      "light": "Light",
+      "dark": "Dark",
+      "sunset": "Sunset",
+      "ocean": "Ocean",
+      "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": "Пригласить участника",
@@ -159,6 +164,28 @@
     "leaveConfirm": "Вы уверены, что хотите покинуть семью?",
     "leaving": "Выход...",
     "leaveError": "Ошибка при выходе из семьи",
-    "renameError": "Ошибка при переименовании семьи"
+    "renameError": "Ошибка при переименовании семьи",
+    "themes": {
+      "light": "Светлая",
+      "dark": "Тёмная",
+      "sunset": "Закат",
+      "ocean": "Океан",
+      "forest": "Лес",
+      "purple": "Фиолетовая"
+    }
+  },
+  "months": {
+    "1": "Январь",
+    "2": "Февраль",
+    "3": "Март",
+    "4": "Апрель",
+    "5": "Май",
+    "6": "Июнь",
+    "7": "Июль",
+    "8": "Август",
+    "9": "Сентябрь",
+    "10": "Октябрь",
+    "11": "Ноябрь",
+    "12": "Декабрь"
   }
 }

frontend/src/index.css

@@ -7,14 +7,32 @@
   --glass-bg: rgba(255, 255, 255, 0.8);
   --text-primary: #1f2937;
   --text-secondary: #6b7280;
+  --category-from: #8b5cf6;
+  --category-to: #3b82f6;
+  --btn-primary-from: #8b5cf6;
+  --btn-primary-to: #6366f1;
+  --btn-success-from: #22c55e;
+  --btn-success-to: #16a34a;
+  --btn-danger-from: #ef4444;
+  --btn-danger-to: #ec4899;
+  --card-bg: rgba(255, 255, 255, 0.8);
 }
 
 [data-theme="dark"] {
-  --gradient-start: #1f2937;
+  --gradient-start: #000000;
-  --gradient-end: #111827;
+  --gradient-end: #000000;
-  --glass-bg: rgba(31, 41, 55, 0.9);
+  --glass-bg: rgba(17, 17, 17, 0.95);
   --text-primary: #f9fafb;
   --text-secondary: #d1d5db;
+  --category-from: #6366f1;
+  --category-to: #8b5cf6;
+  --btn-primary-from: #6366f1;
+  --btn-primary-to: #8b5cf6;
+  --btn-success-from: #059669;
+  --btn-success-to: #10b981;
+  --btn-danger-from: #dc2626;
+  --btn-danger-to: #be185d;
+  --card-bg: rgba(31, 31, 31, 0.9);
 }
 
 [data-theme="sunset"] {
@@ -23,6 +41,15 @@
   --glass-bg: rgba(255, 255, 255, 0.85);
   --text-primary: #1f2937;
   --text-secondary: #6b7280;
+  --category-from: #f97316;
+  --category-to: #ec4899;
+  --btn-primary-from: #f97316;
+  --btn-primary-to: #ea580c;
+  --btn-success-from: #22c55e;
+  --btn-success-to: #16a34a;
+  --btn-danger-from: #ef4444;
+  --btn-danger-to: #dc2626;
+  --card-bg: rgba(255, 255, 255, 0.85);
 }
 
 [data-theme="ocean"] {
@@ -31,6 +58,15 @@
   --glass-bg: rgba(255, 255, 255, 0.85);
   --text-primary: #1f2937;
   --text-secondary: #6b7280;
+  --category-from: #3b82f6;
+  --category-to: #06b6d4;
+  --btn-primary-from: #3b82f6;
+  --btn-primary-to: #2563eb;
+  --btn-success-from: #22c55e;
+  --btn-success-to: #16a34a;
+  --btn-danger-from: #ef4444;
+  --btn-danger-to: #dc2626;
+  --card-bg: rgba(255, 255, 255, 0.85);
 }
 
 [data-theme="forest"] {
@@ -39,6 +75,15 @@
   --glass-bg: rgba(255, 255, 255, 0.85);
   --text-primary: #1f2937;
   --text-secondary: #6b7280;
+  --category-from: #22c55e;
+  --category-to: #14b8a6;
+  --btn-primary-from: #22c55e;
+  --btn-primary-to: #16a34a;
+  --btn-success-from: #22c55e;
+  --btn-success-to: #16a34a;
+  --btn-danger-from: #ef4444;
+  --btn-danger-to: #dc2626;
+  --card-bg: rgba(255, 255, 255, 0.85);
 }
 
 [data-theme="purple"] {
@@ -47,6 +92,15 @@
   --glass-bg: rgba(255, 255, 255, 0.85);
   --text-primary: #1f2937;
   --text-secondary: #6b7280;
+  --category-from: #8b5cf6;
+  --category-to: #ec4899;
+  --btn-primary-from: #8b5cf6;
+  --btn-primary-to: #7c3aed;
+  --btn-success-from: #22c55e;
+  --btn-success-to: #16a34a;
+  --btn-danger-from: #ef4444;
+  --btn-danger-to: #dc2626;
+  --card-bg: rgba(255, 255, 255, 0.85);
 }
 
 .gradient-bg {
@@ -67,10 +121,104 @@
 }
 
 .glass-effect {
-  background: rgb(255 255 255 / 0.8);
+  background: var(--glass-bg);
   backdrop-filter: blur(12px);
 }
 
+.category-icon {
+  background: linear-gradient(135deg, var(--category-from) 0%, var(--category-to) 100%);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--btn-primary-from) 0%, var(--btn-primary-to) 100%);
+}
+
+.btn-success {
+  background: linear-gradient(135deg, var(--btn-success-from) 0%, var(--btn-success-to) 100%);
+}
+
+.btn-danger {
+  background: linear-gradient(135deg, var(--btn-danger-from) 0%, var(--btn-danger-to) 100%);
+}
+
+[data-theme="dark"] .glass-effect {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .text-gray-800,
+[data-theme="dark"] .text-gray-900 {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .text-gray-600,
+[data-theme="dark"] .text-gray-500 {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .bg-gray-100,
+[data-theme="dark"] .bg-gray-50 {
+  background-color: rgba(55, 55, 55, 0.5);
+}
+
+[data-theme="dark"] .bg-gray-200 {
+  background-color: rgba(75, 75, 75, 0.5);
+}
+
+[data-theme="dark"] .border-gray-200,
+[data-theme="dark"] .border-gray-300 {
+  border-color: rgba(75, 75, 75, 0.8);
+}
+
+[data-theme="dark"] input,
+[data-theme="dark"] textarea {
+  background-color: rgba(40, 40, 40, 0.9);
+  color: var(--text-primary);
+  border-color: rgba(75, 75, 75, 0.8);
+}
+
+[data-theme="dark"] input::placeholder,
+[data-theme="dark"] textarea::placeholder {
+  color: var(--text-secondary);
+}
+
+.member-current {
+  background-color: rgb(243, 232, 255);
+  border-color: rgb(216, 180, 254);
+}
+
+[data-theme="dark"] .member-current {
+  background-color: rgba(139, 92, 246, 0.2);
+  border-color: rgba(139, 92, 246, 0.5);
+}
+
+.shopping-purchased {
+  background-color: rgb(240, 253, 244);
+  border-color: rgb(187, 247, 208);
+}
+
+[data-theme="dark"] .shopping-purchased {
+  background-color: rgba(34, 197, 94, 0.15);
+  border-color: rgba(34, 197, 94, 0.4);
+}
+
+.expense-history-item {
+  background-color: rgb(255, 255, 255);
+  border-color: rgb(229, 231, 235);
+}
+
+[data-theme="dark"] .expense-history-item {
+  background-color: rgba(55, 55, 55, 0.6);
+  border-color: rgba(75, 75, 75, 0.8);
+}
+
+.expense-description {
+  background-color: rgb(249, 250, 251);
+}
+
+[data-theme="dark"] .expense-description {
+  background-color: rgba(40, 40, 40, 0.8);
+}
+
 .animate-fadeIn {
   animation: fadeIn 0.2s ease-in-out;
 }

frontend/src/pages/AdminPanel.tsx

@@ -81,7 +81,7 @@ export default function AdminPanel() {
         <div className="max-w-md w-full">
           <div className="glass-effect rounded-2xl shadow-2xl p-6 sm:p-8 text-center">
             <div className="flex items-center justify-center mb-6">
-              <div className="p-4 bg-linear-to-br from-red-500 to-orange-500 text-white rounded-2xl">
+              <div className="p-4 btn-danger text-white rounded-2xl">
                 <Shield className="w-10 h-10 sm:w-12 sm:h-12" />
               </div>
             </div>
@@ -137,7 +137,7 @@ export default function AdminPanel() {
 
         <div className="glass-effect rounded-3xl shadow-xl p-6 sm:p-10 mb-6 max-w-2xl mx-auto">
           <div className="flex items-center justify-center gap-3 mb-8">
-            <div className="p-3 bg-linear-to-br from-green-500 to-green-600 rounded-2xl">
+            <div className="p-3 btn-success rounded-2xl">
               <Plus className="w-8 h-8 text-white" />
             </div>
             <h2 className="text-2xl sm:text-3xl font-bold text-gray-800">
@@ -174,7 +174,7 @@ export default function AdminPanel() {
             </div>
             <button
               onClick={handleCreateFamily}
-              className="w-full 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 duration-300 font-semibold text-lg"
+              className="w-full flex items-center justify-center gap-2 px-6 py-4 btn-success text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold text-lg"
             >
               <Plus className="w-6 h-6" />
               {t('admin.createButton')}
@@ -184,7 +184,7 @@ export default function AdminPanel() {
 
         <div className="glass-effect rounded-3xl shadow-xl p-6 sm:p-10 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">
+            <div className="p-3 category-icon rounded-2xl">
               <Users className="w-8 h-8 text-white" />
             </div>
             <h2 className="text-2xl sm:text-3xl font-bold text-gray-800">
@@ -194,8 +194,8 @@ export default function AdminPanel() {
 
           {families.length === 0 ? (
             <div className="text-center py-16 sm:py-20">
-              <div className="inline-flex p-6 bg-linear-to-br from-purple-100 to-blue-100 rounded-3xl mb-6">
+              <div className="inline-flex p-6 bg-gray-100 rounded-3xl mb-6">
-                <Users className="w-20 h-20 text-purple-400" />
+                <Users className="w-20 h-20 text-gray-400" />
               </div>
               <p className="text-gray-600 text-lg sm:text-xl mb-2 font-semibold">
                 {t('admin.noFamilies')}
@@ -209,10 +209,10 @@ export default function AdminPanel() {
               {families.map((family) => (
                 <div
                   key={family.id}
-                  className="flex flex-col sm:flex-row justify-between items-start 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"
+                  className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-5 bg-gray-50 rounded-2xl border-2 border-gray-200 card-hover"
                 >
                   <div className="flex items-center gap-3">
-                    <div className="p-3 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-xl shadow-md">
+                    <div className="p-3 category-icon text-white rounded-xl shadow-md">
                       <Users className="w-6 h-6" />
                     </div>
                     <span className="text-lg sm:text-xl font-bold text-gray-900">
@@ -221,7 +221,7 @@ export default function AdminPanel() {
                   </div>
                   <button
                     onClick={() => handleDeleteFamily(family.id)}
-                    className="w-full sm:w-auto flex items-center justify-center gap-2 px-5 py-3 bg-red-500 hover:bg-red-600 text-white rounded-xl transition-all font-semibold shadow-md hover:shadow-lg"
+                    className="w-full sm:w-auto flex items-center justify-center gap-2 px-5 py-3 btn-danger text-white rounded-xl transition-all font-semibold shadow-md hover:shadow-lg"
                   >
                     <Trash2 className="w-5 h-5" />
                     {t('common.delete')}

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, 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">
@@ -308,7 +347,7 @@ export default function FamilyView() {
               </div>
               <button
                 onClick={() => setShowShoppingList(true)}
-                className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold"
+                className="w-full flex items-center justify-center gap-2 px-6 py-3 btn-success text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold"
               >
                 <ShoppingCart className="w-5 h-5" />
                 {t('family.shoppingList')}
@@ -339,7 +378,7 @@ export default function FamilyView() {
               >
                 <div className="flex items-center justify-between gap-3 mb-4">
                   <div className="flex items-center gap-3">
-                    <div className="p-2 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-xl shadow-lg">
+                    <div className="p-2 category-icon text-white rounded-xl shadow-lg">
                       <Tag className="w-6 h-6" />
                     </div>
                     <h2 className="text-xl sm:text-2xl font-bold text-gray-900">
@@ -350,7 +389,7 @@ export default function FamilyView() {
                   {showAddExpense !== category.id && (
                     <button
                       onClick={() => setShowAddExpense(category.id)}
-                      className="flex items-center gap-2 px-4 py-2 bg-linear-to-r from-red-500 to-pink-500 text-white rounded-xl hover:shadow-lg transition-all duration-300 font-semibold whitespace-nowrap text-sm"
+                      className="flex items-center gap-2 px-4 py-2 btn-danger text-white rounded-xl hover:shadow-lg transition-all duration-300 font-semibold whitespace-nowrap text-sm"
                     >
                       <TrendingDown className="w-4 h-4" />
                       <span className="hidden sm:inline">{t('category.addExpense')}</span>
@@ -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 bg-linear-to-br from-blue-50 to-purple-50 p-4 rounded-2xl border-2 border-blue-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,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">
+                      <div className="space-y-4 max-h-96 overflow-y-auto">
-                        {categoryExpenses.map((expense) => (
+                        {historyData.months.map((monthGroup) => (
-                          <div
+                          <div key={`${monthGroup.year}-${monthGroup.month}`} className="border-l-4 border-blue-500 pl-4">
-                            key={expense.id}
+                            <div className="flex justify-between items-center mb-3">
-                            className="bg-white p-3 rounded-xl shadow-sm border border-gray-200"
+                              <h4 className="font-bold text-gray-900">
-                          >
+                                {getMonthName(monthGroup.month)} {monthGroup.year}
-                            <div className="flex justify-between items-start mb-2">
+                              </h4>
-                              <div className="flex items-center gap-2">
+                              <span className="text-lg font-semibold text-blue-600">
-                                <div className="p-1.5 bg-red-100 rounded-lg">
+                                {parseFloat(monthGroup.total_amount.toString()).toFixed(2)} ₽
-                                  <TrendingDown className="w-4 h-4 text-red-600" />
+                              </span>
-                                </div>
+                            </div>
-                                <span className="font-bold text-gray-900 text-lg">
+                            <div className="space-y-2">
-                                  {parseFloat(expense.amount.toString()).toFixed(2)} ₽
+                              {monthGroup.expenses.map((expense) => (
-                                </span>
+                                <div
-                              </div>
+                                  key={expense.id}
-                              <div className="flex items-center gap-1 text-xs text-gray-500">
+                                  className="expense-history-item p-3 rounded-xl shadow-sm border bg-white"
-                                <Calendar className="w-3 h-3" />
+                                >
-                                <span>{formatDate(expense.created_at)}</span>
+                                  <div className="flex justify-between items-start mb-2">
-                              </div>
+                                    <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 bg-gray-50 p-2 rounded-lg">
-                                <MessageSquare className="w-4 h-4 mt-0.5 flex-shrink-0" />
-                                <span>{expense.description}</span>
-                              </div>
-                            )}
                           </div>
                         ))}
                       </div>
@@ -458,7 +586,7 @@ export default function FamilyView() {
                 )}
 
                 {showAddExpense === category.id && (
-                  <div className="bg-linear-to-br from-purple-50 to-blue-50 p-6 rounded-2xl border-2 border-purple-200">
+                  <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>
@@ -490,7 +618,7 @@ export default function FamilyView() {
                       <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"
+                          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')}
@@ -512,7 +640,7 @@ export default function FamilyView() {
 
         <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">
+            <div className="p-3 category-icon rounded-2xl">
               <DollarSign className="w-8 h-8 text-white" />
             </div>
             <h2 className="text-2xl sm:text-3xl font-bold text-gray-800">
@@ -521,7 +649,7 @@ export default function FamilyView() {
           </div>
 
           {showAddCategory ? (
-            <div className="mb-8 p-6 bg-linear-to-br from-purple-50 to-blue-50 rounded-2xl border-2 border-purple-200">
+            <div className="mb-8 p-6 glass-effect rounded-2xl border-2 border-gray-200">
               <h3 className="font-bold text-gray-800 mb-5 text-center text-lg">
                 {t('category.newCategory')}
               </h3>
@@ -543,7 +671,7 @@ export default function FamilyView() {
                 <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"
+                    className="flex-1 flex items-center justify-center gap-2 px-6 py-4 btn-success text-white rounded-2xl hover:shadow-xl transition-all font-semibold"
                   >
                     <Plus className="w-5 h-5" />
                     {t('common.create')}
@@ -560,7 +688,7 @@ export default function FamilyView() {
           ) : (
             <button
               onClick={() => setShowAddCategory(true)}
-              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"
+              className="w-full flex items-center justify-center gap-2 px-6 py-4 btn-primary text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold"
             >
               <Plus className="w-5 h-5" />
               {t('category.addCategory')}
@@ -578,10 +706,10 @@ export default function FamilyView() {
 
       {showInviteModal && (
         <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md p-6 sm:p-8">
+          <div className="glass-effect rounded-3xl shadow-2xl w-full max-w-md p-6 sm:p-8">
             <div className="flex items-center justify-between mb-6">
               <div className="flex items-center gap-3">
-                <div className="p-3 bg-gradient-to-br from-purple-500 to-blue-500 rounded-2xl">
+                <div className="p-3 category-icon rounded-2xl">
                   <UserPlus className="w-6 h-6 text-white" />
                 </div>
                 <h2 className="text-xl font-bold text-gray-800">{t('invite.title')}</h2>
@@ -602,7 +730,7 @@ export default function FamilyView() {
                 <button
                   onClick={handleCreateInviteLink}
                   disabled={inviteLoading}
-                  className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-2xl hover:shadow-xl transition-all font-semibold disabled:opacity-50"
+                  className="w-full flex items-center justify-center gap-2 px-6 py-4 btn-primary text-white rounded-2xl hover:shadow-xl transition-all font-semibold disabled:opacity-50"
                 >
                   {inviteLoading ? (
                     <>
@@ -631,8 +759,8 @@ export default function FamilyView() {
                   onClick={handleCopyInviteLink}
                   className={`w-full flex items-center justify-center gap-2 px-6 py-4 rounded-2xl transition-all font-semibold ${
                     copied
-                      ? 'bg-green-500 text-white'
+                      ? 'btn-success text-white'
-                      : 'bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:shadow-xl'
+                      : 'btn-primary text-white hover:shadow-xl'
                   }`}
                 >
                   {copied ? (

frontend/src/pages/InvitePage.tsx

@@ -109,15 +109,15 @@ export default function InvitePage() {
   if (error) {
     return (
       <div className="min-h-screen flex items-center justify-center gradient-bg px-4">
-        <div className="bg-white rounded-3xl shadow-2xl p-8 max-w-md w-full text-center">
+        <div className="glass-effect rounded-3xl shadow-2xl p-8 max-w-md w-full text-center">
-          <div className="p-4 bg-red-100 rounded-2xl inline-block mb-6">
+          <div className="p-4 btn-danger rounded-2xl inline-block mb-6">
-            <AlertCircle className="w-12 h-12 text-red-500" />
+            <AlertCircle className="w-12 h-12 text-white" />
           </div>
           <h1 className="text-2xl font-bold text-gray-800 mb-4">{t('common.error')}</h1>
           <p className="text-gray-600 mb-6">{error}</p>
           <button
             onClick={() => navigate('/')}
-            className="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-2xl font-semibold hover:shadow-xl transition-all"
+            className="px-6 py-3 btn-primary text-white rounded-2xl font-semibold hover:shadow-xl transition-all"
           >
             {t('common.toHome')}
           </button>
@@ -128,14 +128,14 @@ export default function InvitePage() {
 
   return (
     <div className="min-h-screen flex items-center justify-center gradient-bg px-4">
-      <div className="bg-white rounded-3xl shadow-2xl p-8 max-w-md w-full text-center">
+      <div className="glass-effect rounded-3xl shadow-2xl p-8 max-w-md w-full text-center">
-        <div className="p-4 bg-gradient-to-br from-purple-500 to-blue-500 rounded-2xl inline-block mb-6">
+        <div className="p-4 category-icon rounded-2xl inline-block mb-6">
           <Users className="w-12 h-12 text-white" />
         </div>
         <h1 className="text-2xl font-bold text-gray-800 mb-2">
           {t('invite.pageTitle')}
         </h1>
-        <p className="text-3xl font-bold text-purple-600 mb-6">
+        <p className="text-3xl font-bold text-gray-800 mb-6">
           {familyName}
         </p>
         <p className="text-gray-600 mb-8">
@@ -143,7 +143,7 @@ export default function InvitePage() {
         </p>
         <button
           onClick={handleGoogleLogin}
-          className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-2xl font-semibold hover:shadow-xl transition-all"
+          className="w-full flex items-center justify-center gap-3 px-6 py-4 btn-primary text-white rounded-2xl font-semibold hover:shadow-xl transition-all"
         >
           <UserPlus className="w-5 h-5" />
           {t('invite.loginAndJoin')}

frontend/src/pages/Login.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { authApi } from '../api/client';
 import { Loader2, Wallet } from 'lucide-react';
+import { FcGoogle } from 'react-icons/fc';
 
 export default function Login() {
   const { t } = useTranslation();
@@ -27,7 +28,7 @@ export default function Login() {
       <div className="w-full max-w-md">
         <div className="glass-effect rounded-3xl shadow-2xl p-8 sm:p-10">
           <div className="flex flex-col items-center text-center mb-8">
-            <div className="p-4 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl mb-4 shadow-lg">
+            <div className="p-4 category-icon text-white rounded-2xl mb-4 shadow-lg">
               <Wallet className="w-12 h-12" />
             </div>
             <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-2">
@@ -53,24 +54,7 @@ export default function Login() {
               <Loader2 className="w-6 h-6 animate-spin" />
             ) : (
               <>
-                <svg className="w-6 h-6" viewBox="0 0 24 24">
+                <FcGoogle className="w-6 h-6" />
-                  <path
-                    fill="#4285F4"
-                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-                  />
-                  <path
-                    fill="#34A853"
-                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                  />
-                  <path
-                    fill="#FBBC05"
-                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                  />
-                  <path
-                    fill="#EA4335"
-                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                  />
-                </svg>
                 {t('login.googleButton')}
               </>
             )}
@@ -79,4 +63,4 @@ export default function Login() {
       </div>
     </div>
   );
-}
+}

frontend/src/pages/NoFamily.tsx

@@ -118,7 +118,7 @@ export default function NoFamily() {
       <div className="w-full max-w-md">
         <div className="glass-effect rounded-3xl shadow-2xl p-8 sm:p-10">
           <div className="flex flex-col items-center text-center mb-6">
-            <div className="p-4 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl mb-4 shadow-lg">
+            <div className="p-4 category-icon text-white rounded-2xl mb-4 shadow-lg">
               <Users className="w-12 h-12" />
             </div>
             <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
@@ -186,7 +186,7 @@ export default function NoFamily() {
               <button
                 type="submit"
                 disabled={loading || !familyName.trim()}
-                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 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full flex items-center justify-center gap-2 px-6 py-4 btn-primary text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {loading ? (
                   <Loader2 className="w-5 h-5 animate-spin" />

frontend/src/pages/Profile.tsx

@@ -20,13 +20,13 @@ import {
   X,
 } from 'lucide-react';
 
-const THEMES: { id: Theme; name: string; gradient: string }[] = [
+const THEMES: { id: Theme; gradient: string }[] = [
-  { id: 'light', name: 'Light', gradient: 'bg-gradient-to-r from-gray-100 to-gray-200' },
+  { id: 'light', gradient: 'bg-gradient-to-r from-gray-100 to-gray-200' },
-  { id: 'dark', name: 'Dark', gradient: 'bg-gradient-to-r from-gray-800 to-gray-900' },
+  { id: 'dark', gradient: 'bg-gradient-to-r from-black to-gray-900' },
-  { id: 'sunset', name: 'Sunset', gradient: 'bg-gradient-to-r from-orange-400 to-pink-500' },
+  { id: 'sunset', gradient: 'bg-gradient-to-r from-orange-400 to-pink-500' },
-  { id: 'ocean', name: 'Ocean', gradient: 'bg-gradient-to-r from-blue-400 to-cyan-500' },
+  { id: 'ocean', gradient: 'bg-gradient-to-r from-blue-400 to-cyan-500' },
-  { id: 'forest', name: 'Forest', gradient: 'bg-gradient-to-r from-green-400 to-teal-500' },
+  { id: 'forest', gradient: 'bg-gradient-to-r from-green-400 to-teal-500' },
-  { id: 'purple', name: 'Purple', gradient: 'bg-gradient-to-r from-purple-500 to-pink-500' },
+  { id: 'purple', gradient: 'bg-gradient-to-r from-purple-500 to-pink-500' },
 ];
 
 export default function Profile() {
@@ -40,17 +40,34 @@ export default function Profile() {
   const [newFamilyName, setNewFamilyName] = useState('');
   const [savingName, setSavingName] = useState(false);
 
+  useEffect(() => {
+    if (user?.family_id) {
+      loadFamily();
+    }
+  }, [user?.family_id]);
+
   useEffect(() => {
     if (user?.family_id && selectedFamily) {
       loadMembers();
     }
   }, [user?.family_id, selectedFamily]);
 
+  const loadFamily = async () => {
+    if (!user?.family_id) return;
+    try {
+      const response = await familyApi.getById(user.family_id);
+      setSelectedFamily(response.data);
+    } catch (err) {
+      console.error('Error loading family:', err);
+    }
+  };
+
   const loadMembers = async () => {
     if (!user?.family_id) return;
     try {
       setMembersLoading(true);
       const response = await familyApi.getMembers(user.family_id);
+      console.log('Loaded members:', response.data);
       setFamilyMembers(response.data);
     } catch (err) {
       console.error('Error loading members:', err);
@@ -140,7 +157,7 @@ export default function Profile() {
         <div className="space-y-6">
           <div className="glass-effect rounded-2xl shadow-lg p-6">
             <div className="flex items-center gap-3 mb-4">
-              <div className="p-2 bg-gradient-to-br from-blue-500 to-purple-500 text-white rounded-xl">
+              <div className="p-2 category-icon text-white rounded-xl">
                 <UserIcon className="w-6 h-6" />
               </div>
               <h2 className="text-xl font-bold text-gray-800">{t('profile.info')}</h2>
@@ -160,7 +177,7 @@ export default function Profile() {
           {selectedFamily && (
             <div className="glass-effect rounded-2xl shadow-lg p-6">
               <div className="flex items-center gap-3 mb-4">
-                <div className="p-2 bg-gradient-to-br from-green-500 to-teal-500 text-white rounded-xl">
+                <div className="p-2 btn-success text-white rounded-xl">
                   <Users className="w-6 h-6" />
                 </div>
                 <h2 className="text-xl font-bold text-gray-800">{t('profile.family')}</h2>
@@ -212,15 +229,19 @@ export default function Profile() {
                   <div className="flex items-center justify-center py-4">
                     <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
                   </div>
+                ) : familyMembers.length === 0 ? (
+                  <div className="text-center py-4 text-gray-500 text-sm">
+                    {t('profile.noMembers') || 'Нет участников'}
+                  </div>
                 ) : (
                   <div className="space-y-2">
                     {familyMembers.map((member) => (
                       <div
                         key={member.id}
-                        className={`flex items-center justify-between p-3 rounded-xl ${member.id === user?.id ? 'bg-purple-50 border border-purple-200' : 'bg-gray-50'}`}
+                        className={`flex items-center justify-between p-3 rounded-xl ${member.id === user?.id ? 'member-current border' : 'bg-gray-50'}`}
                       >
                         <div className="flex items-center gap-2">
-                          <div className="w-8 h-8 bg-gradient-to-br from-purple-400 to-blue-400 rounded-full flex items-center justify-center text-white text-sm font-medium">
+                          <div className="w-8 h-8 category-icon rounded-full flex items-center justify-center text-white text-sm font-medium">
                             {(member.username || member.email || '?')[0].toUpperCase()}
                           </div>
                           <span className="font-medium text-gray-800">
@@ -247,7 +268,7 @@ export default function Profile() {
 
           <div className="glass-effect rounded-2xl shadow-lg p-6">
             <div className="flex items-center gap-3 mb-4">
-              <div className="p-2 bg-gradient-to-br from-purple-500 to-pink-500 text-white rounded-xl">
+              <div className="p-2 btn-primary text-white rounded-xl">
                 <Settings className="w-6 h-6" />
               </div>
               <h2 className="text-xl font-bold text-gray-800">{t('profile.settings')}</h2>
@@ -264,7 +285,7 @@ export default function Profile() {
                     onClick={() => handleLocaleChange('ru')}
                     className={`flex-1 py-3 px-4 rounded-xl font-medium transition-all ${
                       preferences.locale === 'ru'
-                        ? 'bg-purple-500 text-white shadow-lg'
+                        ? 'btn-primary text-white shadow-lg'
                         : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                     }`}
                   >
@@ -276,7 +297,7 @@ export default function Profile() {
                     onClick={() => handleLocaleChange('en')}
                     className={`flex-1 py-3 px-4 rounded-xl font-medium transition-all ${
                       preferences.locale === 'en'
-                        ? 'bg-purple-500 text-white shadow-lg'
+                        ? 'btn-primary text-white shadow-lg'
                         : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                     }`}
                   >
@@ -304,7 +325,7 @@ export default function Profile() {
                       }`}
                     >
                       <div className={`h-12 rounded-lg ${theme.gradient}`} />
-                      <span className="text-xs text-gray-600 mt-1 block">{theme.name}</span>
+                      <span className="text-xs text-gray-600 mt-1 block">{t(`profile.themes.${theme.id}`)}</span>
                       {preferences.theme === theme.id && (
                         <div className="absolute top-2 right-2 w-5 h-5 bg-white rounded-full flex items-center justify-center shadow">
                           <Check className="w-3 h-3 text-purple-600" />
@@ -320,7 +341,7 @@ export default function Profile() {
           {selectedFamily && (
             <div className="glass-effect rounded-2xl shadow-lg p-6 border-2 border-red-200">
               <div className="flex items-center gap-3 mb-4">
-                <div className="p-2 bg-gradient-to-br from-red-500 to-orange-500 text-white rounded-xl">
+                <div className="p-2 btn-danger text-white rounded-xl">
                   <AlertTriangle className="w-6 h-6" />
                 </div>
                 <h2 className="text-xl font-bold text-gray-800">{t('profile.dangerZone')}</h2>
@@ -331,7 +352,7 @@ export default function Profile() {
               <button
                 onClick={handleLeaveFamily}
                 disabled={leavingFamily}
-                className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-red-500 hover:bg-red-600 text-white rounded-xl transition-all font-semibold disabled:opacity-50"
+                className="w-full flex items-center justify-center gap-2 px-6 py-3 btn-danger text-white rounded-xl transition-all font-semibold disabled:opacity-50"
               >
                 {leavingFamily ? (
                   <>

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 {