try to do better

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

.env

@@ -7,3 +7,7 @@ DATABASE_URL=postgresql://bd_user:2123@localhost:5432/family_budget
 
 APP_PORT=8080
 RUST_LOG=info
+
+GOOGLE_CLIENT_ID=220924587308-nntk4hgu5rlknpgoq0m1qje8nhjnjmtf.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+GOOGLE_REDIRECT_URL=https://family-budget.duckdns.org/api/auth/google/callback

.env.example

@@ -12,3 +12,10 @@ DOMAIN=yourdomain.com
 EMAIL=your@email.com
 
 ALLOWED_ORIGINS=https://yourdomain.com
+
+GITHUB_USERNAME=your_github_username
+GITHUB_TOKEN=your_github_personal_access_token
+OWNER=your_github_username
+
+REPO_USER=your_github_username
+REPO_PASS=your_github_personal_access_token

.github/workflows/docker-publish.yml

@@ -8,40 +8,31 @@ on:
 jobs:
   build-and-push:
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Compute lowercase owner
-        run: echo "OWNER_LC=${GITHUB_REPOSITORY_OWNER,,}" >> "$GITHUB_ENV"
-
-      - name: Login to GHCR
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Login to Gitea Registry
+        run: echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login 192.168.31.100:3847 -u ${{ secrets.REGISTRY_USER }} --password-stdin
 
       - name: Build and push backend image
-        uses: docker/build-push-action@v6
-        with:
-          context: ./backend
-          push: true
-          tags: |
-            ghcr.io/${{ env.OWNER_LC }}/family_budget-backend:latest
-            ghcr.io/${{ env.OWNER_LC }}/family_budget-backend:${{ github.sha }}
+        run: |
+          docker build -t 192.168.31.100:3847/arrelin/family_budget-backend:latest -t 192.168.31.100:3847/arrelin/family_budget-backend:${{ gitea.sha }} ./backend
+          docker push 192.168.31.100:3847/arrelin/family_budget-backend:latest
+          docker push 192.168.31.100:3847/arrelin/family_budget-backend:${{ gitea.sha }}
 
       - name: Build and push frontend image
-        uses: docker/build-push-action@v6
-        with:
-          context: ./frontend
-          push: true
-          tags: |
-            ghcr.io/${{ env.OWNER_LC }}/family_budget-frontend:latest
-            ghcr.io/${{ env.OWNER_LC }}/family_budget-frontend:${{ github.sha }}
+        run: |
+          docker build -t 192.168.31.100:3847/arrelin/family_budget-frontend:latest -t 192.168.31.100:3847/arrelin/family_budget-frontend:${{ gitea.sha }} ./frontend
+          docker push 192.168.31.100:3847/arrelin/family_budget-frontend:latest
+          docker push 192.168.31.100:3847/arrelin/family_budget-frontend:${{ gitea.sha }}
+
+      - 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,21 +4,24 @@ version = "0.1.0"
 edition = "2024"
 
 [dependencies]
-tokio = { version = "1.48.0", features = ["full"] }
-sea-orm = { version = "1.0", features = ["sqlx-postgres", "runtime-tokio-rustls", "macros"] }
-sea-orm-migration = { version = "1.0", default-features = false, features = ["sqlx-postgres", "runtime-tokio-rustls"] }
+tokio = { version = "1.49.0", features = ["full"] }
+sea-orm = { version = "1.1.19", features = ["sqlx-postgres", "runtime-tokio-rustls", "macros"] }
+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"] }
-tower-http = { version = "0.5", features = ["cors"] }
+axum = { version = "0.8.8", features = ["json"] }
+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"] }
-axum-login = "0.15"
-tower-sessions = "0.12"
-tower-sessions-sqlx-store = { version = "0.12", features = ["postgres"] }
+utoipa-swagger-ui = { version = "9.0.2", features = ["axum"] }
+axum-login = "0.18.0"
+tower-sessions = "0.14.0"
+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.13.1", features = ["json"] }
+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 \
-    libssl3 \
-    ca-certificates \
-    && rm -rf /var/lib/apt/lists/*
+RUN pacman -Syu --noconfirm && \
+    pacman -S --noconfirm openssl ca-certificates && \
+    pacman -Scc --noconfirm
 
 WORKDIR /app
 

backend/src/auth.rs

@@ -20,7 +20,7 @@ impl AuthUser for user::Model {
     }
 
     fn session_auth_hash(&self) -> &[u8] {
-        self.password_hash.as_bytes()
+        self.password_hash.as_deref().unwrap_or("oauth").as_bytes()
     }
 }
 
@@ -40,23 +40,25 @@ 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 db = self.db.clone();
+        async move {
             let user = User::find()
                 .filter(user::Column::Username.eq(&creds.username))
-            .one(&self.db)
+                .one(&db)
                 .await?;
 
             if let Some(user) = user {
-            let parsed_hash = PasswordHash::new(&user.password_hash)
+                let password_hash = user.password_hash.as_ref().ok_or(Error::InvalidCredentials)?;
+                let parsed_hash = PasswordHash::new(password_hash)
                     .map_err(|_| Error::PasswordHash)?;
 
                 let is_valid = Argon2::default()
@@ -72,12 +74,20 @@ impl AuthnBackend for AuthBackend {
                 Err(Error::InvalidCredentials)
             }
         }
+    }
 
-    async fn get_user(&self, user_id: &UserId<Self>) -> Result<Option<Self::User>, Self::Error> {
-        let user = User::find_by_id(*user_id).one(&self.db).await?;
+    fn get_user(
+        &self,
+        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)
         }
     }
+}
 
 pub fn hash_password(password: &str) -> Result<String, Error> {
     let salt = SaltString::generate(&mut OsRng);

backend/src/lib.rs

@@ -7,7 +7,7 @@ use sea_orm_migration::prelude::*;
 use std::net::SocketAddr;
 use utoipa::OpenApi;
 use utoipa_swagger_ui::SwaggerUi;
-use tower_sessions::{Expiry, SessionManagerLayer};
+use tower_sessions::{Expiry, SessionManagerLayer, cookie::SameSite};
 use tower_sessions_sqlx_store::PostgresStore;
 use axum_login::AuthManagerLayerBuilder;
 use time::Duration;
@@ -29,7 +29,12 @@ pub use middleware::{require_admin, require_family_access};
     paths(
         routes::auth::login,
         routes::auth::logout,
+        routes::auth::me,
+        routes::auth::family_login,
+        routes::oauth::google_auth,
+        routes::oauth::google_callback,
         routes::family::create_family,
+        routes::family::create_my_family,
         routes::family::get_family,
         routes::family::get_all_families,
         routes::family::update_family,
@@ -45,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,
@@ -53,6 +59,13 @@ pub use middleware::{require_admin, require_family_access};
         routes::shopping_item::mark_as_purchased,
         routes::shopping_item::mark_all_as_purchased,
         routes::shopping_item::clear_all,
+        routes::invite_link::create_invite_link,
+        routes::invite_link::get_my_invite_links,
+        routes::invite_link::delete_invite_link,
+        routes::invite_link::validate_invite_link,
+        routes::invite_link::join_family_via_invite,
+        routes::user::leave_family,
+        routes::user::get_family_members,
     ),
     components(
         schemas(
@@ -62,17 +75,32 @@ pub use middleware::{require_admin, require_family_access};
             models::shopping_item::Model,
             routes::auth::LoginRequest,
             routes::auth::LoginResponse,
+            routes::auth::MeResponse,
+            routes::auth::FamilyLoginRequest,
+            routes::auth::FamilyLoginResponse,
+            routes::oauth::OAuthUrlResponse,
             routes::family::CreateFamilyRequest,
+            routes::family::CreateMyFamilyRequest,
+            routes::family::CreateMyFamilyResponse,
             routes::family::UpdateFamilyRequest,
             routes::category::CreateCategoryRequest,
             routes::category::UpdateCategoryRequest,
             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,
             routes::shopping_item::BulkOperationResponse,
+            models::invite_link::Model,
+            routes::invite_link::CreateInviteLinkRequest,
+            routes::invite_link::InviteLinkResponse,
+            routes::invite_link::ValidateInviteResponse,
+            routes::invite_link::JoinFamilyResponse,
+            routes::user::LeaveFamilyResponse,
+            routes::user::FamilyMember,
         )
     ),
     tags(
@@ -80,7 +108,9 @@ pub use middleware::{require_admin, require_family_access};
         (name = "families", description = "Family management endpoints"),
         (name = "categories", description = "Category management endpoints"),
         (name = "expenses", description = "Expense management endpoints"),
-        (name = "shopping-items", description = "Shopping list management endpoints")
+        (name = "shopping-items", description = "Shopping list management endpoints"),
+        (name = "invite-links", description = "Family invite link management endpoints"),
+        (name = "user", description = "User profile management endpoints")
     ),
     info(
         title = "Family Budget API",
@@ -114,7 +144,8 @@ pub async fn create_app(db: DatabaseConnection) -> Result<Router, DbErr> {
         .expect("Failed to run session store migrations");
 
     let session_layer = SessionManagerLayer::new(session_store)
-        .with_secure(false)
+        .with_secure(true)
+        .with_same_site(SameSite::Lax)
         .with_expiry(Expiry::OnInactivity(Duration::days(7)));
 
     let backend = auth::AuthBackend { db: db.clone() };
@@ -122,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());
@@ -130,44 +161,67 @@ pub async fn create_app(db: DatabaseConnection) -> Result<Router, DbErr> {
     let auth_routes = Router::new()
         .route("/login", post(routes::auth::login))
         .route("/logout", post(routes::auth::logout))
-        .layer(auth_layer)
+        .route("/me", get(routes::auth::me))
+        .route("/me/leave-family", post(routes::user::leave_family))
+        .route("/my-family", post(routes::family::create_my_family))
+        .route("/auth/family-login", post(routes::auth::family_login))
+        .layer(auth_layer.clone())
+        .with_state(db.clone());
+
+    let oauth_routes = Router::new()
+        .route("/auth/google", get(routes::oauth::google_auth))
+        .route("/auth/google/callback", get(routes::oauth::google_callback))
+        .layer(auth_layer.clone())
+        .with_state(db.clone());
+
+    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("/invite/{token}/join", post(routes::invite_link::join_family_via_invite))
+        .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", 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", put(routes::category::update_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", 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/:expense_id", put(routes::expense::update_expense))
-        .route("/families/:family_id/categories/:category_id/expenses/:expense_id", delete(routes::expense::delete_expense))
-        .route("/families/:family_id/categories/:category_id/remaining", get(routes::expense::get_remaining_limit))
-        .route("/families/:family_id/shopping-items", post(routes::shopping_item::create_shopping_item))
-        .route("/families/:family_id/shopping-items", get(routes::shopping_item::get_shopping_items_by_family))
-        .route("/families/:family_id/shopping-items/:id", get(routes::shopping_item::get_shopping_item))
-        .route("/families/:family_id/shopping-items/:id", put(routes::shopping_item::update_shopping_item))
-        .route("/families/:family_id/shopping-items/:id", delete(routes::shopping_item::delete_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/mark-all-purchased", post(routes::shopping_item::mark_all_as_purchased))
-        .route("/families/:family_id/shopping-items/clear-all", delete(routes::shopping_item::clear_all))
+        .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/{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}", 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))
+        .route("/families/{family_id}/categories/{category_id}/remaining", get(routes::expense::get_remaining_limit))
+        .route("/families/{family_id}/shopping-items", post(routes::shopping_item::create_shopping_item))
+        .route("/families/{family_id}/shopping-items", get(routes::shopping_item::get_shopping_items_by_family))
+        .route("/families/{family_id}/shopping-items/{id}", get(routes::shopping_item::get_shopping_item))
+        .route("/families/{family_id}/shopping-items/{id}", put(routes::shopping_item::update_shopping_item))
+        .route("/families/{family_id}/shopping-items/{id}", delete(routes::shopping_item::delete_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/mark-all-purchased", post(routes::shopping_item::mark_all_as_purchased))
+        .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", put(routes::family::update_family))
-        .route("/families/:id/verify", post(routes::family::verify_family_password))
+        .route("/families/{id}", get(routes::family::get_family))
+        .route("/families/{id}", put(routes::family::update_family))
+        .route("/families/{id}/verify", post(routes::family::verify_family_password))
+        .route("/invite/{token}", get(routes::invite_link::validate_invite_link))
         .layer(session_layer)
         .with_state(db);
 
     let api_routes = Router::new()
         .merge(admin_family_routes)
         .merge(auth_routes)
+        .merge(oauth_routes)
+        .merge(invite_link_routes)
         .merge(family_protected_routes)
         .merge(public_routes);
 

backend/src/main.rs

@@ -1,7 +1,7 @@
 use family_budget::*;
 use sea_orm::DbErr;
 use sea_orm_migration::prelude::*;
-
+//TODO: НЕУДОБНОЕ РАСПОЛОЖЕНИЕ ДОБАВИТЬ РАСХОД + ИСТОРИЯ, ВОЗВРАЩАЕТ В НАЧАЛО ПОСЛЕ ДОБАВЛЕНИЯ РАСХОДА + ЗАКРЫВАЕТ ДОБАВИТЬ РАСХОД, ИСТОРИЯ НЕ ОБНОВЛЯЕТСЯ
 #[tokio::main]
 async fn main() -> Result<(), DbErr> {
     let db = establish_connection().await?;

backend/src/migration/m20250116_000001_add_oauth_fields.rs

@@ -0,0 +1,77 @@
+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(User::Table)
+                    .add_column(ColumnDef::new(User::Email).string().unique_key())
+                    .add_column(ColumnDef::new(User::GoogleId).string().unique_key())
+                    .add_column(ColumnDef::new(User::FamilyId).integer())
+                    .modify_column(ColumnDef::new(User::PasswordHash).string().null())
+                    .modify_column(ColumnDef::new(User::Username).string().null())
+                    .to_owned(),
+            )
+            .await?;
+
+        manager
+            .create_foreign_key(
+                ForeignKey::create()
+                    .name("fk_user_family")
+                    .from(User::Table, User::FamilyId)
+                    .to(Family::Table, Family::Id)
+                    .on_delete(ForeignKeyAction::SetNull)
+                    .to_owned(),
+            )
+            .await?;
+
+        Ok(())
+    }
+
+    async fn down(&self, manager: &SchemaManager) -> Result<(), DbErr> {
+        manager
+            .drop_foreign_key(
+                ForeignKey::drop()
+                    .name("fk_user_family")
+                    .table(User::Table)
+                    .to_owned(),
+            )
+            .await?;
+
+        manager
+            .alter_table(
+                Table::alter()
+                    .table(User::Table)
+                    .drop_column(User::Email)
+                    .drop_column(User::GoogleId)
+                    .drop_column(User::FamilyId)
+                    .modify_column(ColumnDef::new(User::PasswordHash).string().not_null())
+                    .modify_column(ColumnDef::new(User::Username).string().not_null())
+                    .to_owned(),
+            )
+            .await?;
+
+        Ok(())
+    }
+}
+
+#[derive(DeriveIden)]
+enum User {
+    Table,
+    Email,
+    GoogleId,
+    FamilyId,
+    PasswordHash,
+    Username,
+}
+
+#[derive(DeriveIden)]
+enum Family {
+    Table,
+    Id,
+}

backend/src/migration/m20250117_000001_create_invite_links.rs

@@ -0,0 +1,98 @@
+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
+            .create_table(
+                Table::create()
+                    .table(InviteLink::Table)
+                    .if_not_exists()
+                    .col(
+                        ColumnDef::new(InviteLink::Id)
+                            .integer()
+                            .not_null()
+                            .auto_increment()
+                            .primary_key(),
+                    )
+                    .col(ColumnDef::new(InviteLink::FamilyId).integer().not_null())
+                    .col(
+                        ColumnDef::new(InviteLink::Token)
+                            .string()
+                            .not_null()
+                            .unique_key(),
+                    )
+                    .col(
+                        ColumnDef::new(InviteLink::CreatedAt)
+                            .timestamp()
+                            .not_null()
+                            .default(Expr::current_timestamp()),
+                    )
+                    .col(ColumnDef::new(InviteLink::ExpiresAt).timestamp())
+                    .col(ColumnDef::new(InviteLink::MaxUses).integer())
+                    .col(
+                        ColumnDef::new(InviteLink::UsesCount)
+                            .integer()
+                            .not_null()
+                            .default(0),
+                    )
+                    .col(
+                        ColumnDef::new(InviteLink::CreatedBy)
+                            .integer()
+                            .not_null(),
+                    )
+                    .foreign_key(
+                        ForeignKey::create()
+                            .name("fk_invite_link_family")
+                            .from(InviteLink::Table, InviteLink::FamilyId)
+                            .to(Family::Table, Family::Id)
+                            .on_delete(ForeignKeyAction::Cascade)
+                            .on_update(ForeignKeyAction::Cascade),
+                    )
+                    .foreign_key(
+                        ForeignKey::create()
+                            .name("fk_invite_link_created_by")
+                            .from(InviteLink::Table, InviteLink::CreatedBy)
+                            .to(User::Table, User::Id)
+                            .on_delete(ForeignKeyAction::Cascade)
+                            .on_update(ForeignKeyAction::Cascade),
+                    )
+                    .to_owned(),
+            )
+            .await
+    }
+
+    async fn down(&self, manager: &SchemaManager) -> Result<(), DbErr> {
+        manager
+            .drop_table(Table::drop().table(InviteLink::Table).to_owned())
+            .await
+    }
+}
+
+#[derive(DeriveIden)]
+enum InviteLink {
+    Table,
+    Id,
+    FamilyId,
+    Token,
+    CreatedAt,
+    ExpiresAt,
+    MaxUses,
+    UsesCount,
+    CreatedBy,
+}
+
+#[derive(DeriveIden)]
+enum Family {
+    Table,
+    Id,
+}
+
+#[derive(DeriveIden)]
+enum User {
+    Table,
+    Id,
+}

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

@@ -5,6 +5,9 @@ mod m20241209_000002_create_users;
 mod m20241209_000003_seed_admin;
 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;
 
@@ -17,6 +20,9 @@ impl MigratorTrait for Migrator {
             Box::new(m20241209_000003_seed_admin::Migration),
             Box::new(m20241215_000001_add_family_password::Migration),
             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/models/invite_link.rs

@@ -0,0 +1,48 @@
+use sea_orm::entity::prelude::*;
+use serde::{Deserialize, Serialize};
+use utoipa::ToSchema;
+
+#[derive(Clone, Debug, PartialEq, DeriveEntityModel, Serialize, Deserialize, ToSchema)]
+#[sea_orm(table_name = "invite_link")]
+pub struct Model {
+    #[sea_orm(primary_key)]
+    pub id: i32,
+    pub family_id: i32,
+    #[sea_orm(unique)]
+    pub token: String,
+    pub created_at: DateTime,
+    pub expires_at: Option<DateTime>,
+    pub max_uses: Option<i32>,
+    pub uses_count: i32,
+    pub created_by: i32,
+}
+
+#[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]
+pub enum Relation {
+    #[sea_orm(
+        belongs_to = "super::family::Entity",
+        from = "Column::FamilyId",
+        to = "super::family::Column::Id"
+    )]
+    Family,
+    #[sea_orm(
+        belongs_to = "super::user::Entity",
+        from = "Column::CreatedBy",
+        to = "super::user::Column::Id"
+    )]
+    User,
+}
+
+impl Related<super::family::Entity> for Entity {
+    fn to() -> RelationDef {
+        Relation::Family.def()
+    }
+}
+
+impl Related<super::user::Entity> for Entity {
+    fn to() -> RelationDef {
+        Relation::User.def()
+    }
+}
+
+impl ActiveModelBehavior for ActiveModel {}

backend/src/models/mod.rs

@@ -3,9 +3,11 @@ pub mod category;
 pub mod expense;
 pub mod user;
 pub mod shopping_item;
+pub mod invite_link;
 
 pub use family::Entity as Family;
 pub use category::Entity as Category;
 pub use expense::Entity as Expense;
 pub use user::Entity as User;
 pub use shopping_item::Entity as ShoppingItem;
+pub use invite_link::Entity as InviteLink;

backend/src/models/user.rs

@@ -7,12 +7,32 @@ pub struct Model {
     #[sea_orm(primary_key)]
     pub id: i32,
     #[sea_orm(unique)]
-    pub username: String,
-    pub password_hash: String,
+    pub username: Option<String>,
+    #[serde(skip_serializing)]
+    pub password_hash: Option<String>,
     pub is_admin: bool,
+    #[sea_orm(unique)]
+    pub email: Option<String>,
+    #[sea_orm(unique)]
+    #[serde(skip_serializing)]
+    pub google_id: Option<String>,
+    pub family_id: Option<i32>,
 }
 
 #[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]
-pub enum Relation {}
+pub enum Relation {
+    #[sea_orm(
+        belongs_to = "super::family::Entity",
+        from = "Column::FamilyId",
+        to = "super::family::Column::Id"
+    )]
+    Family,
+}
+
+impl Related<super::family::Entity> for Entity {
+    fn to() -> RelationDef {
+        Relation::Family.def()
+    }
+}
 
 impl ActiveModelBehavior for ActiveModel {}

backend/src/routes/auth.rs

@@ -1,12 +1,16 @@
 use axum::{
+    extract::State,
     http::StatusCode,
     Json,
 };
 use axum_login::AuthSession;
+use sea_orm::{DatabaseConnection, EntityTrait, ColumnTrait, QueryFilter, ActiveModelTrait, Set};
 use serde::{Deserialize, Serialize};
 use utoipa::ToSchema;
 
 use crate::auth::{AuthBackend, Credentials};
+use crate::models::{user, User, family, Family};
+use crate::services::FamilyService;
 
 #[derive(Debug, Deserialize, ToSchema)]
 pub struct LoginRequest {
@@ -20,6 +24,15 @@ pub struct LoginResponse {
     pub is_admin: bool,
 }
 
+#[derive(Debug, Serialize, ToSchema)]
+pub struct MeResponse {
+    pub id: i32,
+    pub username: Option<String>,
+    pub email: Option<String>,
+    pub is_admin: bool,
+    pub family_id: Option<i32>,
+}
+
 #[utoipa::path(
     post,
     path = "/login",
@@ -72,3 +85,105 @@ pub async fn logout(
 
     Ok(StatusCode::OK)
 }
+
+#[utoipa::path(
+    get,
+    path = "/me",
+    tag = "auth",
+    responses(
+        (status = 200, description = "Current user info", body = MeResponse),
+        (status = 401, description = "Not authenticated")
+    )
+)]
+pub async fn me(
+    auth_session: AuthSession<AuthBackend>,
+) -> Result<Json<MeResponse>, StatusCode> {
+    let user = auth_session.user.ok_or(StatusCode::UNAUTHORIZED)?;
+
+    Ok(Json(MeResponse {
+        id: user.id,
+        username: user.username,
+        email: user.email,
+        is_admin: user.is_admin,
+        family_id: user.family_id,
+    }))
+}
+
+#[derive(Debug, Deserialize, ToSchema)]
+pub struct FamilyLoginRequest {
+    pub family_name: String,
+    pub password: String,
+}
+
+#[derive(Debug, Serialize, ToSchema)]
+pub struct FamilyLoginResponse {
+    pub success: bool,
+    pub family_id: i32,
+}
+
+#[utoipa::path(
+    post,
+    path = "/auth/family-login",
+    tag = "auth",
+    request_body = FamilyLoginRequest,
+    responses(
+        (status = 200, description = "Login successful", body = FamilyLoginResponse),
+        (status = 401, description = "Invalid credentials"),
+        (status = 404, description = "Family not found")
+    )
+)]
+pub async fn family_login(
+    mut auth_session: AuthSession<AuthBackend>,
+    State(db): State<DatabaseConnection>,
+    Json(payload): Json<FamilyLoginRequest>,
+) -> Result<Json<FamilyLoginResponse>, StatusCode> {
+    let family = Family::find()
+        .filter(family::Column::Name.eq(&payload.family_name))
+        .one(&db)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+        .ok_or(StatusCode::NOT_FOUND)?;
+
+    let valid = FamilyService::verify_password(&db, family.id, payload.password.clone())
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    if !valid {
+        return Err(StatusCode::UNAUTHORIZED);
+    }
+
+    let existing_member = User::find()
+        .filter(user::Column::FamilyId.eq(family.id))
+        .filter(user::Column::GoogleId.is_null())
+        .filter(user::Column::Username.eq(&payload.family_name))
+        .one(&db)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    let member_user = if let Some(user) = existing_member {
+        user
+    } else {
+        let new_member = user::ActiveModel {
+            username: Set(Some(payload.family_name)),
+            email: Set(None),
+            google_id: Set(None),
+            password_hash: Set(None),
+            is_admin: Set(false),
+            family_id: Set(Some(family.id)),
+            ..Default::default()
+        };
+        new_member.insert(&db)
+            .await
+            .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+    };
+
+    auth_session
+        .login(&member_user)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    Ok(Json(FamilyLoginResponse {
+        success: true,
+        family_id: family.id,
+    }))
+}

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/routes/family.rs

@@ -3,12 +3,15 @@ use axum::{
     http::StatusCode,
     Json,
 };
-use sea_orm::DatabaseConnection;
+use axum_login::AuthSession;
+use sea_orm::{DatabaseConnection, EntityTrait, ActiveModelTrait, Set};
 use serde::{Deserialize, Serialize};
 use utoipa::ToSchema;
 use tower_sessions::Session;
 
+use crate::auth::AuthBackend;
 use crate::models::family::Model as FamilyModel;
+use crate::models::{user, User};
 use crate::services::FamilyService;
 
 #[derive(Debug, Deserialize, ToSchema)]
@@ -18,6 +21,14 @@ pub struct CreateFamilyRequest {
     pub password: String,
 }
 
+#[derive(Debug, Deserialize, ToSchema)]
+#[schema(example = json!({"name": "Smith Family", "password": "secret123"}))]
+pub struct CreateMyFamilyRequest {
+    pub name: String,
+    #[serde(default)]
+    pub password: Option<String>,
+}
+
 #[derive(Debug, Deserialize, ToSchema)]
 #[schema(example = json!({"password": "secret123"}))]
 pub struct VerifyFamilyPasswordRequest {
@@ -188,3 +199,69 @@ pub async fn verify_family_password(
         Err(StatusCode::UNAUTHORIZED)
     }
 }
+
+#[derive(Debug, Serialize, ToSchema)]
+pub struct CreateMyFamilyResponse {
+    pub family: FamilyModel,
+    pub user_id: i32,
+    pub family_id: i32,
+}
+
+#[utoipa::path(
+    post,
+    path = "/my-family",
+    tag = "families",
+    request_body = CreateMyFamilyRequest,
+    responses(
+        (status = 200, description = "Family created and linked to user", body = CreateMyFamilyResponse),
+        (status = 401, description = "Not authenticated"),
+        (status = 409, description = "User already has a family"),
+        (status = 500, description = "Internal server error")
+    )
+)]
+pub async fn create_my_family(
+    auth_session: AuthSession<AuthBackend>,
+    session: Session,
+    State(db): State<DatabaseConnection>,
+    Json(payload): Json<CreateMyFamilyRequest>,
+) -> Result<Json<CreateMyFamilyResponse>, StatusCode> {
+    let current_user = auth_session.user.ok_or(StatusCode::UNAUTHORIZED)?;
+
+    if current_user.family_id.is_some() {
+        return Err(StatusCode::CONFLICT);
+    }
+
+    let password = payload.password.unwrap_or_default();
+    let family = FamilyService::create(&db, payload.name, password)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    let mut active_user: user::ActiveModel = User::find_by_id(current_user.id)
+        .one(&db)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+        .ok_or(StatusCode::NOT_FOUND)?
+        .into();
+
+    active_user.family_id = Set(Some(family.id));
+    active_user.update(&db)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    let mut authorized_families: Vec<i32> = session
+        .get("authorized_families")
+        .await
+        .unwrap_or(None)
+        .unwrap_or_default();
+    authorized_families.push(family.id);
+    session
+        .insert("authorized_families", authorized_families)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    Ok(Json(CreateMyFamilyResponse {
+        family_id: family.id,
+        user_id: current_user.id,
+        family,
+    }))
+}

backend/src/routes/invite_link.rs

@@ -0,0 +1,289 @@
+use axum::{
+    extract::{Path, State},
+    http::{StatusCode, HeaderMap},
+    Json,
+};
+use axum_login::AuthSession;
+use sea_orm::DatabaseConnection;
+use serde::{Deserialize, Serialize};
+use tower_sessions::Session;
+use utoipa::ToSchema;
+
+use crate::auth::AuthBackend;
+use crate::models::invite_link::Model as InviteLinkModel;
+use crate::services::InviteLinkService;
+
+#[derive(Debug, Deserialize, ToSchema)]
+#[schema(example = json!({"expires_in_hours": 24, "max_uses": 5}))]
+pub struct CreateInviteLinkRequest {
+    pub expires_in_hours: Option<i64>,
+    pub max_uses: Option<i32>,
+}
+
+#[derive(Debug, Serialize, ToSchema)]
+pub struct InviteLinkResponse {
+    pub id: i32,
+    pub family_id: i32,
+    pub token: String,
+    pub invite_url: String,
+    pub expires_at: Option<String>,
+    pub max_uses: Option<i32>,
+    pub uses_count: i32,
+}
+
+#[derive(Debug, Serialize, ToSchema)]
+pub struct ValidateInviteResponse {
+    pub valid: bool,
+    pub family_id: Option<i32>,
+    pub family_name: Option<String>,
+}
+
+#[derive(Debug, Serialize, ToSchema)]
+pub struct JoinFamilyResponse {
+    pub success: bool,
+    pub family_id: i32,
+    pub message: String,
+}
+
+fn model_to_response(model: InviteLinkModel, base_url: &str) -> InviteLinkResponse {
+    InviteLinkResponse {
+        id: model.id,
+        family_id: model.family_id,
+        token: model.token.clone(),
+        invite_url: format!("{}/invite/{}", base_url, model.token),
+        expires_at: model.expires_at.map(|dt| dt.to_string()),
+        max_uses: model.max_uses,
+        uses_count: model.uses_count,
+    }
+}
+
+#[utoipa::path(
+    post,
+    path = "/my-family/invite-links",
+    tag = "invite-links",
+    request_body = CreateInviteLinkRequest,
+    responses(
+        (status = 200, description = "Invite link created", body = InviteLinkResponse),
+        (status = 401, description = "Not authenticated"),
+        (status = 403, description = "User has no family"),
+        (status = 500, description = "Internal server error")
+    )
+)]
+pub async fn create_invite_link(
+    auth_session: AuthSession<AuthBackend>,
+    headers: HeaderMap,
+    State(db): State<DatabaseConnection>,
+    Json(payload): Json<CreateInviteLinkRequest>,
+) -> Result<Json<InviteLinkResponse>, StatusCode> {
+    let user = auth_session.user.ok_or(StatusCode::UNAUTHORIZED)?;
+    let family_id = user.family_id.ok_or(StatusCode::FORBIDDEN)?;
+
+    let expires_at = payload.expires_in_hours.map(|hours| {
+        chrono::Utc::now().naive_utc() + chrono::Duration::hours(hours)
+    });
+
+    let invite = InviteLinkService::create(&db, family_id, user.id, expires_at, payload.max_uses)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    let base_url = headers
+        .get("origin")
+        .and_then(|v| v.to_str().ok())
+        .map(|s| s.to_string())
+        .unwrap_or_else(|| std::env::var("FRONTEND_URL").unwrap_or_else(|_| "http://localhost:5173".to_string()));
+    Ok(Json(model_to_response(invite, &base_url)))
+}
+
+#[utoipa::path(
+    get,
+    path = "/my-family/invite-links",
+    tag = "invite-links",
+    responses(
+        (status = 200, description = "List of invite links", body = Vec<InviteLinkResponse>),
+        (status = 401, description = "Not authenticated"),
+        (status = 403, description = "User has no family"),
+        (status = 500, description = "Internal server error")
+    )
+)]
+pub async fn get_my_invite_links(
+    auth_session: AuthSession<AuthBackend>,
+    headers: HeaderMap,
+    State(db): State<DatabaseConnection>,
+) -> Result<Json<Vec<InviteLinkResponse>>, StatusCode> {
+    let user = auth_session.user.ok_or(StatusCode::UNAUTHORIZED)?;
+    let family_id = user.family_id.ok_or(StatusCode::FORBIDDEN)?;
+
+    let invites = InviteLinkService::find_by_family(&db, family_id)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    let base_url = headers
+        .get("origin")
+        .and_then(|v| v.to_str().ok())
+        .map(|s| s.to_string())
+        .unwrap_or_else(|| std::env::var("FRONTEND_URL").unwrap_or_else(|_| "http://localhost:5173".to_string()));
+    let responses: Vec<InviteLinkResponse> = invites
+        .into_iter()
+        .map(|i| model_to_response(i, &base_url))
+        .collect();
+
+    Ok(Json(responses))
+}
+
+#[utoipa::path(
+    delete,
+    path = "/my-family/invite-links/{token}",
+    tag = "invite-links",
+    params(
+        ("token" = String, Path, description = "Invite token")
+    ),
+    responses(
+        (status = 204, description = "Invite link deleted"),
+        (status = 401, description = "Not authenticated"),
+        (status = 403, description = "User has no family or not authorized"),
+        (status = 404, description = "Invite link not found"),
+        (status = 500, description = "Internal server error")
+    )
+)]
+pub async fn delete_invite_link(
+    auth_session: AuthSession<AuthBackend>,
+    State(db): State<DatabaseConnection>,
+    Path(token): Path<String>,
+) -> Result<StatusCode, StatusCode> {
+    let user = auth_session.user.ok_or(StatusCode::UNAUTHORIZED)?;
+    let family_id = user.family_id.ok_or(StatusCode::FORBIDDEN)?;
+
+    let invite = InviteLinkService::find_by_token(&db, &token)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+        .ok_or(StatusCode::NOT_FOUND)?;
+
+    if invite.family_id != family_id {
+        return Err(StatusCode::FORBIDDEN);
+    }
+
+    InviteLinkService::delete_by_token(&db, &token)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
+#[utoipa::path(
+    get,
+    path = "/invite/{token}",
+    tag = "invite-links",
+    params(
+        ("token" = String, Path, description = "Invite token")
+    ),
+    responses(
+        (status = 200, description = "Invite link is valid", body = ValidateInviteResponse),
+        (status = 404, description = "Invite link not found or invalid"),
+        (status = 500, description = "Internal server error")
+    )
+)]
+pub async fn validate_invite_link(
+    State(db): State<DatabaseConnection>,
+    Path(token): Path<String>,
+) -> Result<Json<ValidateInviteResponse>, StatusCode> {
+    use crate::models::Family;
+    use sea_orm::EntityTrait;
+
+    let invite = InviteLinkService::find_by_token(&db, &token)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?
+        .ok_or(StatusCode::NOT_FOUND)?;
+
+    if let Some(expires_at) = invite.expires_at {
+        let now = chrono::Utc::now().naive_utc();
+        if now > expires_at {
+            return Ok(Json(ValidateInviteResponse {
+                valid: false,
+                family_id: None,
+                family_name: None,
+            }));
+        }
+    }
+
+    if let Some(max_uses) = invite.max_uses {
+        if invite.uses_count >= max_uses {
+            return Ok(Json(ValidateInviteResponse {
+                valid: false,
+                family_id: None,
+                family_name: None,
+            }));
+        }
+    }
+
+    let family = Family::find_by_id(invite.family_id)
+        .one(&db)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    Ok(Json(ValidateInviteResponse {
+        valid: true,
+        family_id: Some(invite.family_id),
+        family_name: family.map(|f| f.name),
+    }))
+}
+
+#[utoipa::path(
+    post,
+    path = "/invite/{token}/join",
+    tag = "invite-links",
+    params(
+        ("token" = String, Path, description = "Invite token")
+    ),
+    responses(
+        (status = 200, description = "Successfully joined family", body = JoinFamilyResponse),
+        (status = 401, description = "Not authenticated"),
+        (status = 400, description = "User already in a family or invite invalid"),
+        (status = 404, description = "Invite link not found"),
+        (status = 500, description = "Internal server error")
+    )
+)]
+pub async fn join_family_via_invite(
+    auth_session: AuthSession<AuthBackend>,
+    session: Session,
+    State(db): State<DatabaseConnection>,
+    Path(token): Path<String>,
+) -> Result<Json<JoinFamilyResponse>, StatusCode> {
+    let user = auth_session.user.ok_or(StatusCode::UNAUTHORIZED)?;
+
+    if user.family_id.is_some() {
+        return Ok(Json(JoinFamilyResponse {
+            success: false,
+            family_id: 0,
+            message: "You already belong to a family".to_string(),
+        }));
+    }
+
+    let invite = InviteLinkService::validate_and_use(&db, &token, user.id)
+        .await
+        .map_err(|e| match e {
+            sea_orm::DbErr::RecordNotFound(_) => StatusCode::NOT_FOUND,
+            sea_orm::DbErr::Custom(msg) if msg.contains("expired") => StatusCode::BAD_REQUEST,
+            sea_orm::DbErr::Custom(msg) if msg.contains("max uses") => StatusCode::BAD_REQUEST,
+            sea_orm::DbErr::Custom(msg) if msg.contains("already belongs") => StatusCode::BAD_REQUEST,
+            _ => StatusCode::INTERNAL_SERVER_ERROR,
+        })?;
+
+    let mut authorized_families: Vec<i32> = session
+        .get("authorized_families")
+        .await
+        .unwrap_or(None)
+        .unwrap_or_default();
+    if !authorized_families.contains(&invite.family_id) {
+        authorized_families.push(invite.family_id);
+        session
+            .insert("authorized_families", authorized_families)
+            .await
+            .ok();
+    }
+
+    Ok(Json(JoinFamilyResponse {
+        success: true,
+        family_id: invite.family_id,
+        message: "Successfully joined family".to_string(),
+    }))
+}

backend/src/routes/mod.rs

@@ -3,3 +3,6 @@ pub mod category;
 pub mod expense;
 pub mod auth;
 pub mod shopping_item;
+pub mod oauth;
+pub mod invite_link;
+pub mod user;

backend/src/routes/oauth.rs

@@ -0,0 +1,140 @@
+use axum::{
+    extract::{Query, State},
+    http::StatusCode,
+    response::Redirect,
+    Json,
+};
+use axum_login::AuthSession;
+use sea_orm::DatabaseConnection;
+use serde::{Deserialize, Serialize};
+use tower_sessions::Session;
+use utoipa::ToSchema;
+
+use crate::auth::AuthBackend;
+use crate::services::OAuthService;
+
+const CSRF_TOKEN_KEY: &str = "oauth_csrf_token";
+const FRONTEND_URL_KEY: &str = "oauth_frontend_url";
+
+#[derive(Debug, Deserialize, ToSchema)]
+pub struct GoogleAuthQuery {
+    pub redirect_url: Option<String>,
+}
+
+#[derive(Debug, Deserialize)]
+pub struct GoogleCallbackQuery {
+    pub code: String,
+    pub state: String,
+}
+
+#[derive(Debug, Serialize, ToSchema)]
+pub struct OAuthUrlResponse {
+    pub url: String,
+}
+
+#[utoipa::path(
+    get,
+    path = "/auth/google",
+    tag = "auth",
+    params(
+        ("redirect_url" = Option<String>, Query, description = "Frontend URL to redirect after auth")
+    ),
+    responses(
+        (status = 200, description = "Returns Google OAuth URL", body = OAuthUrlResponse)
+    )
+)]
+pub async fn google_auth(
+    session: Session,
+    Query(query): Query<GoogleAuthQuery>,
+) -> Result<Json<OAuthUrlResponse>, StatusCode> {
+    let oauth_service = OAuthService::new();
+    let (auth_url, csrf_token) = oauth_service.get_auth_url();
+
+    session
+        .insert(CSRF_TOKEN_KEY, csrf_token.secret().clone())
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    if let Some(redirect_url) = query.redirect_url {
+        session
+            .insert(FRONTEND_URL_KEY, redirect_url)
+            .await
+            .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+    }
+
+    Ok(Json(OAuthUrlResponse { url: auth_url }))
+}
+
+#[utoipa::path(
+    get,
+    path = "/auth/google/callback",
+    tag = "auth",
+    responses(
+        (status = 302, description = "Redirects to frontend after successful auth"),
+        (status = 401, description = "Authentication failed")
+    )
+)]
+pub async fn google_callback(
+    mut auth_session: AuthSession<AuthBackend>,
+    session: Session,
+    State(db): State<DatabaseConnection>,
+    Query(query): Query<GoogleCallbackQuery>,
+) -> Result<Redirect, StatusCode> {
+    let stored_csrf: Option<String> = session
+        .get(CSRF_TOKEN_KEY)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    let frontend_url: Option<String> = session
+        .get(FRONTEND_URL_KEY)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    session.remove::<String>(CSRF_TOKEN_KEY).await.ok();
+    session.remove::<String>(FRONTEND_URL_KEY).await.ok();
+
+    if stored_csrf.as_deref() != Some(&query.state) {
+        return Err(StatusCode::UNAUTHORIZED);
+    }
+
+    let oauth_service = OAuthService::new();
+
+    let access_token = oauth_service
+        .exchange_code(query.code)
+        .await
+        .map_err(|_| StatusCode::UNAUTHORIZED)?;
+
+    let google_user = oauth_service
+        .get_user_info(&access_token)
+        .await
+        .map_err(|_| StatusCode::UNAUTHORIZED)?;
+
+    let user = oauth_service
+        .find_or_create_user(&db, google_user)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    auth_session
+        .login(&user)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    if let Some(family_id) = user.family_id {
+        let mut authorized_families: Vec<i32> = session
+            .get("authorized_families")
+            .await
+            .unwrap_or(None)
+            .unwrap_or_default();
+        if !authorized_families.contains(&family_id) {
+            authorized_families.push(family_id);
+            session
+                .insert("authorized_families", authorized_families)
+                .await
+                .ok();
+        }
+    }
+
+    let redirect_url = frontend_url.unwrap_or_else(|| "http://localhost:3000".to_string());
+
+    Ok(Redirect::temporary(&redirect_url))
+}

backend/src/routes/user.rs

@@ -0,0 +1,97 @@
+use axum::{
+    extract::{State, Path},
+    http::StatusCode,
+    Json,
+};
+use axum_login::AuthSession;
+use sea_orm::DatabaseConnection;
+use serde::Serialize;
+use utoipa::ToSchema;
+
+use crate::auth::AuthBackend;
+use crate::services::{UserService, FamilyService};
+
+#[derive(Debug, Serialize, ToSchema)]
+pub struct LeaveFamilyResponse {
+    pub family_deleted: bool,
+}
+
+#[derive(Debug, Serialize, ToSchema)]
+pub struct FamilyMember {
+    pub id: i32,
+    pub username: Option<String>,
+    pub email: Option<String>,
+    pub is_admin: bool,
+}
+
+#[utoipa::path(
+    post,
+    path = "/me/leave-family",
+    tag = "user",
+    responses(
+        (status = 200, description = "Left family successfully", body = LeaveFamilyResponse),
+        (status = 400, description = "User is not in a family"),
+        (status = 401, description = "Not authenticated")
+    )
+)]
+pub async fn leave_family(
+    auth_session: AuthSession<AuthBackend>,
+    State(db): State<DatabaseConnection>,
+) -> Result<Json<LeaveFamilyResponse>, StatusCode> {
+    let user = auth_session.user.ok_or(StatusCode::UNAUTHORIZED)?;
+
+    let result = UserService::leave_family(&db, user.id)
+        .await
+        .map_err(|e| {
+            if e.to_string().contains("not in a family") {
+                StatusCode::BAD_REQUEST
+            } else {
+                StatusCode::INTERNAL_SERVER_ERROR
+            }
+        })?;
+
+    Ok(Json(LeaveFamilyResponse {
+        family_deleted: result.family_deleted,
+    }))
+}
+
+#[utoipa::path(
+    get,
+    path = "/families/{family_id}/members",
+    tag = "families",
+    params(
+        ("family_id" = i32, Path, description = "Family ID")
+    ),
+    responses(
+        (status = 200, description = "List of family members", body = Vec<FamilyMember>),
+        (status = 401, description = "Not authenticated"),
+        (status = 403, description = "Access denied")
+    )
+)]
+pub async fn get_family_members(
+    auth_session: AuthSession<AuthBackend>,
+    State(db): State<DatabaseConnection>,
+    Path(family_id): Path<i32>,
+) -> Result<Json<Vec<FamilyMember>>, StatusCode> {
+    let user = auth_session.user.ok_or(StatusCode::UNAUTHORIZED)?;
+
+    if user.family_id != Some(family_id) && !user.is_admin {
+        return Err(StatusCode::FORBIDDEN);
+    }
+
+    let members = FamilyService::get_members(&db, family_id)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    let response: Vec<FamilyMember> = members
+        .into_iter()
+        .map(|m| FamilyMember {
+            id: m.id,
+            username: m.username,
+            email: m.email,
+            is_admin: m.is_admin,
+        })
+        .collect();
+
+    Ok(Json(response))
+}

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();
-        expense.delete(db).await
+        let mut expense: expense::ActiveModel = expense.into();
+        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), mut expenses)| {
+                let total_amount: Decimal = expenses
+                    .iter()
+                    .map(|e| e.amount)
+                    .sum();
+                expenses.sort_by(|a, b| b.created_at.cmp(&a.created_at));
+                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/family_service.rs

@@ -4,6 +4,7 @@ use argon2::{
     Argon2,
 };
 use crate::models::family::{self, Entity as Family, Model as FamilyModel};
+use crate::models::user::{self, Entity as User, Model as UserModel};
 
 pub struct FamilyService;
 
@@ -72,4 +73,11 @@ impl FamilyService {
         let family: family::ActiveModel = family.into();
         family.delete(db).await
     }
+
+    pub async fn get_members(db: &DatabaseConnection, family_id: i32) -> Result<Vec<UserModel>, DbErr> {
+        User::find()
+            .filter(user::Column::FamilyId.eq(family_id))
+            .all(db)
+            .await
+    }
 }

backend/src/services/invite_link_service.rs

@@ -0,0 +1,121 @@
+use sea_orm::*;
+use rand::distr::Alphanumeric;
+use rand::Rng;
+use crate::models::invite_link::{self, Entity as InviteLink, Model as InviteLinkModel};
+use crate::models::{user, User};
+
+pub struct InviteLinkService;
+
+impl InviteLinkService {
+    pub fn generate_token() -> String {
+        rand::rng()
+            .sample_iter(&Alphanumeric)
+            .take(32)
+            .map(char::from)
+            .collect()
+    }
+
+    pub async fn create(
+        db: &DatabaseConnection,
+        family_id: i32,
+        created_by: i32,
+        expires_at: Option<chrono::NaiveDateTime>,
+        max_uses: Option<i32>,
+    ) -> Result<InviteLinkModel, DbErr> {
+        let token = Self::generate_token();
+
+        let invite = invite_link::ActiveModel {
+            family_id: Set(family_id),
+            token: Set(token),
+            created_by: Set(created_by),
+            expires_at: Set(expires_at),
+            max_uses: Set(max_uses),
+            ..Default::default()
+        };
+
+        invite.insert(db).await
+    }
+
+    pub async fn find_by_token(
+        db: &DatabaseConnection,
+        token: &str,
+    ) -> Result<Option<InviteLinkModel>, DbErr> {
+        InviteLink::find()
+            .filter(invite_link::Column::Token.eq(token))
+            .one(db)
+            .await
+    }
+
+    pub async fn find_by_family(
+        db: &DatabaseConnection,
+        family_id: i32,
+    ) -> Result<Vec<InviteLinkModel>, DbErr> {
+        InviteLink::find()
+            .filter(invite_link::Column::FamilyId.eq(family_id))
+            .all(db)
+            .await
+    }
+
+    pub async fn validate_and_use(
+        db: &DatabaseConnection,
+        token: &str,
+        user_id: i32,
+    ) -> Result<InviteLinkModel, DbErr> {
+        let invite = InviteLink::find()
+            .filter(invite_link::Column::Token.eq(token))
+            .one(db)
+            .await?
+            .ok_or(DbErr::RecordNotFound("Invite link not found".to_string()))?;
+
+        if let Some(expires_at) = invite.expires_at {
+            let now = chrono::Utc::now().naive_utc();
+            if now > expires_at {
+                return Err(DbErr::Custom("Invite link has expired".to_string()));
+            }
+        }
+
+        if let Some(max_uses) = invite.max_uses {
+            if invite.uses_count >= max_uses {
+                return Err(DbErr::Custom("Invite link has reached max uses".to_string()));
+            }
+        }
+
+        let user = User::find_by_id(user_id)
+            .one(db)
+            .await?
+            .ok_or(DbErr::RecordNotFound("User not found".to_string()))?;
+
+        if user.family_id.is_some() {
+            return Err(DbErr::Custom("User already belongs to a family".to_string()));
+        }
+
+        let mut active_user: user::ActiveModel = user.into();
+        active_user.family_id = Set(Some(invite.family_id));
+        active_user.update(db).await?;
+
+        let mut active_invite: invite_link::ActiveModel = invite.clone().into();
+        active_invite.uses_count = Set(invite.uses_count + 1);
+        active_invite.update(db).await
+    }
+
+    pub async fn delete(db: &DatabaseConnection, id: i32) -> Result<DeleteResult, DbErr> {
+        let invite = InviteLink::find_by_id(id)
+            .one(db)
+            .await?
+            .ok_or(DbErr::RecordNotFound("Invite link not found".to_string()))?;
+
+        let invite: invite_link::ActiveModel = invite.into();
+        invite.delete(db).await
+    }
+
+    pub async fn delete_by_token(db: &DatabaseConnection, token: &str) -> Result<DeleteResult, DbErr> {
+        let invite = InviteLink::find()
+            .filter(invite_link::Column::Token.eq(token))
+            .one(db)
+            .await?
+            .ok_or(DbErr::RecordNotFound("Invite link not found".to_string()))?;
+
+        let invite: invite_link::ActiveModel = invite.into();
+        invite.delete(db).await
+    }
+}

backend/src/services/mod.rs

@@ -2,8 +2,14 @@ pub mod family_service;
 pub mod category_service;
 pub mod expense_service;
 pub mod shopping_item_service;
+pub mod oauth_service;
+pub mod invite_link_service;
+pub mod user_service;
 
 pub use family_service::FamilyService;
 pub use category_service::CategoryService;
 pub use expense_service::ExpenseService;
 pub use shopping_item_service::ShoppingItemService;
+pub use oauth_service::OAuthService;
+pub use invite_link_service::InviteLinkService;
+pub use user_service::UserService;

backend/src/services/oauth_service.rs

@@ -0,0 +1,155 @@
+use oauth2::{basic::BasicClient, AuthUrl, ClientId, ClientSecret, RedirectUrl, TokenUrl, AuthorizationCode, TokenResponse, Scope, CsrfToken, Client, StandardRevocableToken, EndpointSet, EndpointNotSet};
+use oauth2::basic::{BasicErrorResponse, BasicRevocationErrorResponse, BasicTokenIntrospectionResponse, BasicTokenResponse};
+use reqwest::Client as HttpClient;
+use sea_orm::{DatabaseConnection, EntityTrait, ColumnTrait, QueryFilter, ActiveModelTrait, Set};
+use serde::Deserialize;
+
+use crate::models::{user, User};
+
+#[derive(Debug, Deserialize)]
+pub struct GoogleUserInfo {
+    pub id: String,
+    pub email: String,
+    pub name: Option<String>,
+}
+
+pub struct OAuthService {
+    http_client: HttpClient,
+}
+
+impl OAuthService {
+    pub fn new() -> Self {
+        Self {
+            http_client: HttpClient::new(),
+        }
+    }
+
+    pub fn get_auth_url(&self) -> (String, CsrfToken) {
+        let client_id = std::env::var("GOOGLE_CLIENT_ID")
+            .expect("GOOGLE_CLIENT_ID must be set");
+        let client_secret = std::env::var("GOOGLE_CLIENT_SECRET")
+            .expect("GOOGLE_CLIENT_SECRET must be set");
+        let redirect_url = std::env::var("GOOGLE_REDIRECT_URL")
+            .unwrap_or_else(|_| "http://localhost:8080/api/auth/google/callback".to_string());
+
+        let client = Self::get_client(client_id, client_secret, redirect_url);
+
+        let (auth_url, csrf_token) = client
+            .authorize_url(CsrfToken::new_random)
+            .add_scope(Scope::new("openid".to_string()))
+            .add_scope(Scope::new("email".to_string()))
+            .add_scope(Scope::new("profile".to_string()))
+            .url();
+
+        (auth_url.to_string(), csrf_token)
+    }
+
+    pub async fn exchange_code(&self, code: String) -> Result<String, OAuthError> {
+        let client_id = std::env::var("GOOGLE_CLIENT_ID")
+            .expect("GOOGLE_CLIENT_ID must be set");
+        let client_secret = std::env::var("GOOGLE_CLIENT_SECRET")
+            .expect("GOOGLE_CLIENT_SECRET must be set");
+        let redirect_url = std::env::var("GOOGLE_REDIRECT_URL")
+            .unwrap_or_else(|_| "http://localhost:8080/api/auth/google/callback".to_string());
+
+        let client = Self::get_client(client_id, client_secret, redirect_url);
+
+        let http_client = oauth2::reqwest::ClientBuilder::new()
+            .build()
+            .map_err(|e| OAuthError::TokenExchange(e.to_string()))?;
+
+        let token = client
+            .exchange_code(AuthorizationCode::new(code))
+            .request_async(&http_client)
+            .await
+            .map_err(|e: oauth2::RequestTokenError<_, _>| OAuthError::TokenExchange(e.to_string()))?;
+
+        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")
+            .bearer_auth(access_token)
+            .send()
+            .await
+            .map_err(|e| OAuthError::UserInfo(e.to_string()))?;
+
+        response
+            .json::<GoogleUserInfo>()
+            .await
+            .map_err(|e| OAuthError::UserInfo(e.to_string()))
+    }
+
+    pub async fn find_or_create_user(
+        &self,
+        db: &DatabaseConnection,
+        google_user: GoogleUserInfo,
+    ) -> Result<user::Model, OAuthError> {
+        let existing = User::find()
+            .filter(user::Column::GoogleId.eq(&google_user.id))
+            .one(db)
+            .await
+            .map_err(|e| OAuthError::Database(e.to_string()))?;
+
+        if let Some(user) = existing {
+            return Ok(user);
+        }
+
+        let existing_by_email = User::find()
+            .filter(user::Column::Email.eq(&google_user.email))
+            .one(db)
+            .await
+            .map_err(|e| OAuthError::Database(e.to_string()))?;
+
+        if let Some(user) = existing_by_email {
+            let mut active: user::ActiveModel = user.into();
+            active.google_id = Set(Some(google_user.id));
+            let updated = active.update(db).await
+                .map_err(|e| OAuthError::Database(e.to_string()))?;
+            return Ok(updated);
+        }
+
+        let new_user = user::ActiveModel {
+            email: Set(Some(google_user.email)),
+            google_id: Set(Some(google_user.id)),
+            username: Set(google_user.name),
+            password_hash: Set(None),
+            is_admin: Set(false),
+            family_id: Set(None),
+            ..Default::default()
+        };
+
+        let created = new_user.insert(db).await
+            .map_err(|e| OAuthError::Database(e.to_string()))?;
+
+        Ok(created)
+    }
+}
+
+#[derive(Debug, thiserror::Error)]
+pub enum OAuthError {
+    #[error("Token exchange failed: {0}")]
+    TokenExchange(String),
+    #[error("Failed to get user info: {0}")]
+    UserInfo(String),
+    #[error("Database error: {0}")]
+    Database(String),
+}

backend/src/services/user_service.rs

@@ -0,0 +1,44 @@
+use sea_orm::*;
+use crate::models::user::{self, Entity as User, Model as UserModel};
+use crate::models::family::{Entity as Family};
+
+pub struct UserService;
+
+#[derive(Debug)]
+pub struct LeaveFamilyResult {
+    pub family_deleted: bool,
+}
+
+impl UserService {
+    pub async fn leave_family(db: &DatabaseConnection, user_id: i32) -> Result<LeaveFamilyResult, DbErr> {
+        let user = User::find_by_id(user_id)
+            .one(db)
+            .await?
+            .ok_or(DbErr::RecordNotFound("User not found".to_string()))?;
+
+        let family_id = user.family_id
+            .ok_or(DbErr::Custom("User is not in a family".to_string()))?;
+
+        let mut user_active: user::ActiveModel = user.into();
+        user_active.family_id = Set(None);
+        user_active.update(db).await?;
+
+        let remaining_members = User::find()
+            .filter(user::Column::FamilyId.eq(family_id))
+            .count(db)
+            .await?;
+
+        let family_deleted = if remaining_members == 0 {
+            Family::delete_by_id(family_id).exec(db).await?;
+            true
+        } else {
+            false
+        };
+
+        Ok(LeaveFamilyResult { family_deleted })
+    }
+
+    pub async fn find_by_id(db: &DatabaseConnection, id: i32) -> Result<Option<UserModel>, DbErr> {
+        User::find_by_id(id).one(db).await
+    }
+}

docker-compose.prod.yml

@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   postgres:
     image: postgres:16-alpine
@@ -14,26 +12,33 @@ services:
       - postgres_data:/var/lib/postgresql/data
     networks:
       - app_network
+    restart: unless-stopped
 
   backend:
-    image: ghcr.io/${OWNER:-${COMPOSE_PROJECT_NAME}}/family_budget-backend:latest
+    image: 192.168.31.100:3847/arrelin/family_budget-backend:latest
     container_name: family_budget_backend
     environment:
       DATABASE_URL: postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB}
       RUST_LOG: ${RUST_LOG:-info}
       ALLOWED_ORIGINS: ${ALLOWED_ORIGINS:-http://localhost:3000,http://localhost:5173}
+      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
+      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET}
+      GOOGLE_REDIRECT_URL: ${GOOGLE_REDIRECT_URL}
+      FRONTEND_URL: ${FRONTEND_URL:-https://family-budget.duckdns.org}
     depends_on:
       - postgres
     networks:
       - app_network
+    restart: unless-stopped
 
   frontend:
-    image: ghcr.io/${OWNER:-${COMPOSE_PROJECT_NAME}}/family_budget-frontend:latest
+    image: 192.168.31.100:3847/arrelin/family_budget-frontend:latest
     container_name: family_budget_frontend
     depends_on:
       - backend
     networks:
       - app_network
+    restart: unless-stopped
 
   nginx:
     image: nginx:alpine
@@ -66,6 +71,7 @@ services:
     container_name: family_budget_watchtower
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
+      - ./docker-config.json:/config.json:ro
     environment:
       - WATCHTOWER_POLL_INTERVAL=300
       - WATCHTOWER_CLEANUP=true

frontend/package-lock.json

@@ -10,9 +10,13 @@
       "dependencies": {
         "@tailwindcss/postcss": "^4.1.18",
         "axios": "^1.13.2",
+        "i18next": "^25.8.0",
+        "i18next-browser-languagedetector": "^8.2.0",
         "lucide-react": "^0.561.0",
         "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"
       },
@@ -280,6 +284,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -2988,6 +3001,55 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "25.8.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.8.0.tgz",
+      "integrity": "sha512-urrg4HMFFMQZ2bbKRK7IZ8/CTE7D8H4JRlAwqA2ZwDRFfdd0K/4cdbNNLgfn9mo+I/h9wJu61qJzH7jCFAhUZQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
+      "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3731,6 +3793,42 @@
         "react": "^19.2.1"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "16.5.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.5.3.tgz",
+      "integrity": "sha512-fo+/NNch37zqxOzlBYrWMx0uy/yInPkRfjSuy4lqKdaecR17nvCHnEUt3QyzA8XjQ2B/0iW/5BhaHR3ZmukpGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.6.2",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "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",
@@ -3977,7 +4075,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -4059,6 +4157,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "7.2.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.7.tgz",
@@ -4134,6 +4241,15 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

frontend/package.json

@@ -12,9 +12,13 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.18",
     "axios": "^1.13.2",
+    "i18next": "^25.8.0",
+    "i18next-browser-languagedetector": "^8.2.0",
     "lucide-react": "^0.561.0",
     "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/App.tsx

@@ -1,16 +1,96 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Home from './pages/Home';
+import { useEffect } from 'react';
+import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import Login from './pages/Login';
 import FamilyView from './pages/FamilyView';
 import AdminPanel from './pages/AdminPanel';
+import NoFamily from './pages/NoFamily';
+import InvitePage from './pages/InvitePage';
+import Profile from './pages/Profile';
+import { useStore } from './store/useStore';
+import { authApi } from './api/client';
+import { Loader2 } from 'lucide-react';
+
+function AppContent() {
+  const { t, i18n } = useTranslation();
+  const { user, isAuthenticated, isLoading, setUser, setIsLoading } = useStore();
+  const location = useLocation();
+
+  useEffect(() => {
+    const storedTheme = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-theme', storedTheme);
+
+    const storedLocale = localStorage.getItem('locale');
+    if (storedLocale && storedLocale !== i18n.language) {
+      i18n.changeLanguage(storedLocale);
+    }
+
+    checkAuth();
+  }, []);
+
+  const checkAuth = async () => {
+    try {
+      const response = await authApi.me();
+      setUser(response.data);
+    } catch {
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (location.pathname.startsWith('/invite/')) {
+    return (
+      <Routes>
+        <Route path="/invite/:token" element={<InvitePage />} />
+      </Routes>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center gradient-bg">
+        <div className="flex items-center gap-3 text-white">
+          <Loader2 className="w-8 h-8 animate-spin" />
+          <span className="text-xl font-medium">{t('common.loading')}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <Routes>
+        <Route path="*" element={<Login />} />
+      </Routes>
+    );
+  }
+
+  if (!user?.family_id) {
+    return (
+      <Routes>
+        <Route path="/adminpanel" element={<AdminPanel />} />
+        <Route path="/profile" element={<Profile />} />
+        <Route path="*" element={<NoFamily />} />
+      </Routes>
+    );
+  }
+
+  return (
+    <Routes>
+      <Route path="/" element={<Navigate to={`/family/${user.family_id}`} replace />} />
+      <Route path="/family/:familyId" element={<FamilyView />} />
+      <Route path="/profile" element={<Profile />} />
+      <Route path="/adminpanel" element={<AdminPanel />} />
+      <Route path="*" element={<Navigate to={`/family/${user.family_id}`} replace />} />
+    </Routes>
+  );
+}
 
 function App() {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/family/:familyId" element={<FamilyView />} />
-        <Route path="/adminpanel" element={<AdminPanel />} />
-      </Routes>
+      <AppContent />
     </BrowserRouter>
   );
 }

frontend/src/api/client.ts

@@ -7,6 +7,8 @@ import type {
   LoginRequest,
   LoginResponse,
   CreateFamilyRequest,
+  CreateMyFamilyRequest,
+  CreateMyFamilyResponse,
   CreateCategoryRequest,
   CreateExpenseRequest,
   VerifyFamilyPasswordRequest,
@@ -16,6 +18,15 @@ import type {
   UpdateShoppingItemRequest,
   MarkAsPurchasedRequest,
   BulkOperationResponse,
+  User,
+  OAuthUrlResponse,
+  CreateInviteLinkRequest,
+  InviteLinkResponse,
+  ValidateInviteResponse,
+  JoinFamilyResponse,
+  FamilyMember,
+  LeaveFamilyResponse,
+  ExpenseHistoryResponse,
 } from '../types';
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
@@ -31,6 +42,14 @@ export const authApi = {
 
   logout: () =>
     apiClient.post('/logout'),
+
+  me: () =>
+    apiClient.get<User>('/me'),
+
+  getGoogleAuthUrl: (redirectUrl?: string) =>
+    apiClient.get<OAuthUrlResponse>('/auth/google', {
+      params: redirectUrl ? { redirect_url: redirectUrl } : undefined,
+    }),
 };
 
 export const familyApi = {
@@ -43,6 +62,9 @@ export const familyApi = {
   create: (data: CreateFamilyRequest) =>
     apiClient.post<Family>('/families', data),
 
+  createMyFamily: (data: CreateMyFamilyRequest) =>
+    apiClient.post<CreateMyFamilyResponse>('/my-family', data),
+
   update: (id: number, data: { name: string }) =>
     apiClient.put<Family>(`/families/${id}`, data),
 
@@ -51,6 +73,14 @@ export const familyApi = {
 
   verifyPassword: (id: number, data: VerifyFamilyPasswordRequest) =>
     apiClient.post<VerifyFamilyPasswordResponse>(`/families/${id}/verify`, data),
+
+  getMembers: (familyId: number) =>
+    apiClient.get<FamilyMember[]>(`/families/${familyId}/members`),
+};
+
+export const userApi = {
+  leaveFamily: () =>
+    apiClient.post<LeaveFamilyResponse>('/me/leave-family'),
 };
 
 export const categoryApi = {
@@ -91,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 = {
@@ -118,3 +153,20 @@ export const shoppingItemApi = {
   clearAll: (familyId: number) =>
     apiClient.delete<BulkOperationResponse>(`/families/${familyId}/shopping-items/clear-all`),
 };
+
+export const inviteLinkApi = {
+  create: (data: CreateInviteLinkRequest) =>
+    apiClient.post<InviteLinkResponse>('/my-family/invite-links', data),
+
+  getMyLinks: () =>
+    apiClient.get<InviteLinkResponse[]>('/my-family/invite-links'),
+
+  delete: (token: string) =>
+    apiClient.delete(`/my-family/invite-links/${token}`),
+
+  validate: (token: string) =>
+    apiClient.get<ValidateInviteResponse>(`/invite/${token}`),
+
+  join: (token: string) =>
+    apiClient.post<JoinFamilyResponse>(`/invite/${token}/join`),
+};

frontend/src/components/ConfirmModal.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { X, AlertTriangle } from 'lucide-react';
 
 interface ConfirmModalProps {
@@ -13,18 +14,21 @@ interface ConfirmModalProps {
 export default function ConfirmModal({
   title,
   message,
-  confirmText = 'Подтвердить',
-  cancelText = 'Отмена',
+  confirmText,
+  cancelText,
   onConfirm,
   onCancel,
   variant = 'danger',
 }: ConfirmModalProps) {
+  const { t } = useTranslation();
+  const defaultConfirmText = confirmText || t('common.confirm');
+  const defaultCancelText = cancelText || t('common.cancel');
   const getVariantStyles = () => {
     switch (variant) {
       case 'danger':
         return {
-          icon: 'bg-red-100 text-red-600',
-          confirmButton: 'bg-gradient-to-r from-red-500 to-red-600 hover:shadow-lg',
+          icon: 'btn-danger',
+          confirmButton: 'btn-danger hover:shadow-lg',
         };
       case 'warning':
         return {
@@ -33,8 +37,8 @@ export default function ConfirmModal({
         };
       case 'info':
         return {
-          icon: 'bg-blue-100 text-blue-600',
-          confirmButton: 'bg-gradient-to-r from-blue-500 to-blue-600 hover:shadow-lg',
+          icon: 'btn-primary',
+          confirmButton: 'btn-primary hover:shadow-lg',
         };
     }
   };
@@ -43,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">
@@ -67,13 +71,13 @@ export default function ConfirmModal({
             onClick={onCancel}
             className="flex-1 px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-2xl transition-all font-semibold"
           >
-            {cancelText}
+            {defaultCancelText}
           </button>
           <button
             onClick={onConfirm}
             className={`flex-1 px-6 py-3 text-white rounded-2xl transition-all font-semibold ${styles.confirmButton}`}
           >
-            {confirmText}
+            {defaultConfirmText}
           </button>
         </div>
       </div>

frontend/src/components/ShoppingListModal.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { shoppingItemApi } from '../api/client';
 import type { ShoppingItem } from '../types';
 import {
@@ -23,6 +24,7 @@ type ConfirmAction =
   | { type: 'clear-all' };
 
 export default function ShoppingListModal({ familyId, onClose }: ShoppingListModalProps) {
+  const { t } = useTranslation();
   const [items, setItems] = useState<ShoppingItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [newItemName, setNewItemName] = useState('');
@@ -41,7 +43,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
       setItems(response.data);
     } catch (err) {
       console.error('Error loading shopping items:', err);
-      alert('Ошибка загрузки списка покупок');
+      alert(t('shopping.loadError'));
     } finally {
       setLoading(false);
     }
@@ -56,7 +58,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
       loadItems();
     } catch (err) {
       console.error('Error adding item:', err);
-      alert('Ошибка добавления покупки');
+      alert(t('shopping.addError'));
     }
   };
 
@@ -66,7 +68,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
       loadItems();
     } catch (err) {
       console.error('Error toggling purchased status:', err);
-      alert('Ошибка изменения статуса');
+      alert(t('shopping.toggleError'));
     }
   };
 
@@ -80,7 +82,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
       loadItems();
     } catch (err) {
       console.error('Error deleting item:', err);
-      alert('Ошибка удаления покупки');
+      alert(t('shopping.deleteError'));
     }
   };
 
@@ -99,7 +101,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
       loadItems();
     } catch (err) {
       console.error('Error updating item:', err);
-      alert('Ошибка обновления покупки');
+      alert(t('shopping.updateError'));
     }
   };
 
@@ -118,7 +120,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
       loadItems();
     } catch (err) {
       console.error('Error marking all as purchased:', err);
-      alert('Ошибка обновления списка');
+      alert(t('shopping.markAllError'));
     }
   };
 
@@ -132,7 +134,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
       loadItems();
     } catch (err) {
       console.error('Error clearing all items:', err);
-      alert('Ошибка очистки списка');
+      alert(t('shopping.clearError'));
     }
   };
 
@@ -160,22 +162,22 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
     switch (confirmAction.type) {
       case 'delete-item':
         return {
-          title: 'Удалить покупку?',
-          message: 'Покупка будет удалена из списка безвозвратно.',
-          confirmText: 'Удалить',
+          title: t('confirm.deleteItem'),
+          message: t('confirm.deleteItemMessage'),
+          confirmText: t('common.delete'),
         };
       case 'mark-all':
         return {
-          title: 'Пометить все как купленные?',
-          message: 'Все покупки в списке будут отмечены как купленные.',
-          confirmText: 'Пометить',
+          title: t('confirm.markAll'),
+          message: t('confirm.markAllMessage'),
+          confirmText: t('confirm.markButton'),
           variant: 'info' as const,
         };
       case 'clear-all':
         return {
-          title: 'Очистить список?',
-          message: 'Все покупки будут удалены из списка безвозвратно.',
-          confirmText: 'Очистить',
+          title: t('confirm.clearAll'),
+          message: t('confirm.clearAllMessage'),
+          confirmText: t('shopping.clear'),
         };
     }
   };
@@ -187,13 +189,13 @@ 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="bg-gradient-to-r from-green-500 to-emerald-600 p-6 flex items-center justify-between">
+        <div className="glass-effect rounded-3xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+          <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" />
               </div>
-              <h2 className="text-3xl font-bold text-white">Список покупок</h2>
+              <h2 className="text-3xl font-bold text-white">{t('shopping.title')}</h2>
             </div>
             <button
               onClick={onClose}
@@ -208,7 +210,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
               <div className="flex gap-2">
                 <input
                   type="text"
-                  placeholder="Добавить покупку..."
+                  placeholder={t('shopping.addPlaceholder')}
                   value={newItemName}
                   onChange={(e) => setNewItemName(e.target.value)}
                   onKeyPress={(e) => e.key === 'Enter' && handleAddItem()}
@@ -216,10 +218,10 @@ 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">Добавить</span>
+                  <span className="hidden sm:inline">{t('common.add')}</span>
                 </button>
               </div>
             </div>
@@ -232,7 +234,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
               <div className="space-y-6">
                 {unpurchasedItems.length > 0 && (
                   <div>
-                    <h3 className="text-lg font-semibold text-gray-700 mb-3">К покупке</h3>
+                    <h3 className="text-lg font-semibold text-gray-700 mb-3">{t('shopping.toBuy')}</h3>
                     <div className="space-y-2">
                       {unpurchasedItems.map((item) => (
                         <div
@@ -295,12 +297,12 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
 
                 {purchasedItems.length > 0 && (
                   <div>
-                    <h3 className="text-lg font-semibold text-gray-700 mb-3">Куплено</h3>
+                    <h3 className="text-lg font-semibold text-gray-700 mb-3">{t('shopping.purchased')}</h3>
                     <div className="space-y-2">
                       {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">
@@ -328,7 +330,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
                 {items.length === 0 && (
                   <div className="text-center py-12 text-gray-500">
                     <ShoppingCart className="w-16 h-16 mx-auto mb-4 opacity-30" />
-                    <p className="text-lg">Список покупок пуст</p>
+                    <p className="text-lg">{t('shopping.empty')}</p>
                   </div>
                 )}
               </div>
@@ -340,17 +342,17 @@ 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')}
                 </button>
               </div>
             </div>

frontend/src/i18n/index.ts

@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import ru from './locales/ru.json';
+import en from './locales/en.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      ru: { translation: ru },
+      en: { translation: en },
+    },
+    fallbackLng: 'ru',
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      order: ['navigator', 'htmlTag', 'localStorage'],
+      caches: ['localStorage'],
+    },
+  });
+
+export default i18n;

frontend/src/i18n/locales/en.json

@@ -0,0 +1,191 @@
+{
+  "common": {
+    "loading": "Loading...",
+    "error": "Error",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "delete": "Delete",
+    "add": "Add",
+    "create": "Create",
+    "save": "Save",
+    "back": "Back",
+    "toHome": "Home",
+    "logout": "Log out",
+    "exit": "Exit",
+    "currency": "$"
+  },
+  "login": {
+    "title": "Family Budget",
+    "subtitle": "Sign in to continue",
+    "googleButton": "Sign in with Google",
+    "authError": "Error getting authorization link"
+  },
+  "noFamily": {
+    "welcome": "Welcome!",
+    "createFamily": "Create your family",
+    "familyName": "Family name",
+    "familyNameRequired": "Family name *",
+    "familyNamePlaceholder": "For example: Smith Family",
+    "password": "Password",
+    "passwordOptional": "(optional)",
+    "passwordPlaceholder": "For access protection",
+    "passwordHint": "Password will be needed to access the family budget",
+    "createButton": "Create family",
+    "adminPanel": "Admin panel",
+    "enterFamilyName": "Enter family name",
+    "alreadyInFamily": "You are already in a family",
+    "createError": "Error creating family",
+    "joiningFamily": "Joining family...",
+    "invalidInvite": "Invite link is invalid or expired",
+    "joinError": "Error joining family"
+  },
+  "family": {
+    "defaultName": "Family",
+    "totalLimit": "Total limit",
+    "totalRemaining": "Total remaining",
+    "shoppingList": "Shopping list",
+    "inviteMember": "Invite member",
+    "loadError": "Error loading categories"
+  },
+  "category": {
+    "remaining": "Remaining:",
+    "limit": "Limit:",
+    "percentRemaining": "% remaining",
+    "addExpense": "Add expense",
+    "expense": "Expense",
+    "reset": "Reset",
+    "history": "History",
+    "archive": "Archive",
+    "management": "Category management",
+    "newCategory": "New category",
+    "categoryName": "Category name",
+    "categoryLimit": "Limit ($)",
+    "addCategory": "Add category",
+    "deleteConfirm": "Delete category?",
+    "resetConfirm": "Delete all expenses for this category?",
+    "createError": "Error creating category",
+    "deleteError": "Error deleting category",
+    "resetError": "Error resetting expenses"
+  },
+  "expense": {
+    "addTitle": "Add expense",
+    "amount": "Amount ($)",
+    "amountPlaceholder": "0.00",
+    "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",
+    "archiveError": "Error loading archive"
+  },
+  "invite": {
+    "title": "Invite member",
+    "description": "Create an invite link to add a new member to the family. The link will be valid for 7 days.",
+    "createLink": "Create link",
+    "creating": "Creating...",
+    "sendLink": "Send this link to the person you want to invite:",
+    "copyLink": "Copy link",
+    "copied": "Copied!",
+    "createError": "Error creating invite link",
+    "pageTitle": "Family invitation",
+    "pageDescription": "You have been invited to join a family budget. Sign in with Google to accept the invitation.",
+    "loginAndJoin": "Sign in and join",
+    "validating": "Validating invitation...",
+    "joining": "Joining family...",
+    "invalid": "Link is invalid or has expired",
+    "notFound": "Link not found",
+    "alreadyInFamily": "You are already in a family",
+    "joinError": "Error joining family"
+  },
+  "admin": {
+    "title": "Admin panel",
+    "subtitle": "Family management",
+    "accessDenied": "Access denied",
+    "requiresAdmin": "Administrator rights required",
+    "createFamily": "Create new family",
+    "familyName": "Family name",
+    "familyNamePlaceholder": "For example: Smith Family",
+    "familyPassword": "Family password",
+    "familyPasswordPlaceholder": "Protect your family with a password",
+    "createButton": "Create family",
+    "familyList": "Family list",
+    "noFamilies": "No families found",
+    "createFirst": "Create the first family",
+    "fillNameAndPassword": "Fill in the family name and password",
+    "createError": "Error creating family",
+    "deleteConfirm": "Delete family?",
+    "deleteError": "Error deleting family"
+  },
+  "shopping": {
+    "title": "Shopping list",
+    "addPlaceholder": "Add item...",
+    "toBuy": "To buy",
+    "purchased": "Purchased",
+    "empty": "Shopping list is empty",
+    "allPurchased": "All purchased",
+    "clear": "Clear",
+    "loadError": "Error loading shopping list",
+    "addError": "Error adding item",
+    "toggleError": "Error changing status",
+    "deleteError": "Error deleting item",
+    "updateError": "Error updating item",
+    "markAllError": "Error updating list",
+    "clearError": "Error clearing list"
+  },
+  "confirm": {
+    "deleteItem": "Delete item?",
+    "deleteItemMessage": "The item will be permanently removed from the list.",
+    "markAll": "Mark all as purchased?",
+    "markAllMessage": "All items in the list will be marked as purchased.",
+    "markButton": "Mark",
+    "clearAll": "Clear list?",
+    "clearAllMessage": "All items will be permanently removed from the list."
+  },
+  "profile": {
+    "title": "Profile",
+    "info": "Information",
+    "username": "Username",
+    "email": "Email",
+    "family": "Family",
+    "familyName": "Family name",
+    "members": "Members",
+    "you": "You",
+    "unknownUser": "User",
+    "settings": "Settings",
+    "language": "Language",
+    "theme": "Theme",
+    "dangerZone": "Danger zone",
+    "leaveFamily": "Leave family",
+    "leaveDescription": "If you leave the family, you will lose access to the budget. If you are the last member, the family will be deleted along with all data.",
+    "leaveConfirm": "Are you sure you want to leave the family?",
+    "leaving": "Leaving...",
+    "leaveError": "Error leaving 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

@@ -0,0 +1,191 @@
+{
+  "common": {
+    "loading": "Загрузка...",
+    "error": "Ошибка",
+    "cancel": "Отмена",
+    "confirm": "Подтвердить",
+    "delete": "Удалить",
+    "add": "Добавить",
+    "create": "Создать",
+    "save": "Сохранить",
+    "back": "Назад",
+    "toHome": "На главную",
+    "logout": "Выйти",
+    "exit": "Выход",
+    "currency": "₽"
+  },
+  "login": {
+    "title": "Семейный бюджет",
+    "subtitle": "Войдите, чтобы продолжить",
+    "googleButton": "Войти через Google",
+    "authError": "Ошибка при получении ссылки для авторизации"
+  },
+  "noFamily": {
+    "welcome": "Добро пожаловать!",
+    "createFamily": "Создайте свою семью",
+    "familyName": "Название семьи",
+    "familyNameRequired": "Название семьи *",
+    "familyNamePlaceholder": "Например: Семья Ивановых",
+    "password": "Пароль",
+    "passwordOptional": "(необязательно)",
+    "passwordPlaceholder": "Для защиты доступа",
+    "passwordHint": "Пароль понадобится для доступа к бюджету семьи",
+    "createButton": "Создать семью",
+    "adminPanel": "Админ панель",
+    "enterFamilyName": "Введите название семьи",
+    "alreadyInFamily": "Вы уже состоите в семье",
+    "createError": "Ошибка при создании семьи",
+    "joiningFamily": "Присоединение к семье...",
+    "invalidInvite": "Ссылка-приглашение недействительна или истекла",
+    "joinError": "Ошибка при присоединении к семье"
+  },
+  "family": {
+    "defaultName": "Семья",
+    "totalLimit": "Общий лимит",
+    "totalRemaining": "Общий остаток",
+    "shoppingList": "Список покупок",
+    "inviteMember": "Пригласить участника",
+    "loadError": "Ошибка загрузки категорий"
+  },
+  "category": {
+    "remaining": "Остаток:",
+    "limit": "Лимит:",
+    "percentRemaining": "% осталось",
+    "addExpense": "Добавить расход",
+    "expense": "Расход",
+    "reset": "Обнулить",
+    "history": "История",
+    "archive": "Архив",
+    "management": "Управление категориями",
+    "newCategory": "Новая категория",
+    "categoryName": "Название категории",
+    "categoryLimit": "Лимит (₽)",
+    "addCategory": "Добавить категорию",
+    "deleteConfirm": "Удалить категорию?",
+    "resetConfirm": "Удалить все траты по этой категории?",
+    "createError": "Ошибка создания категории",
+    "deleteError": "Ошибка удаления категории",
+    "resetError": "Ошибка сброса трат"
+  },
+  "expense": {
+    "addTitle": "Добавить расход",
+    "amount": "Сумма (₽)",
+    "amountPlaceholder": "0.00",
+    "description": "Описание",
+    "descriptionPlaceholder": "Опционально",
+    "historyTitle": "История трат",
+    "archiveTitle": "Архив трат",
+    "noExpenses": "Нет трат",
+    "noArchive": "Архив пуст",
+    "archived": "Архив",
+    "addError": "Ошибка добавления расхода",
+    "historyError": "Ошибка загрузки истории трат",
+    "archiveError": "Ошибка загрузки архива"
+  },
+  "invite": {
+    "title": "Пригласить участника",
+    "description": "Создайте ссылку-приглашение, чтобы добавить нового участника в семью. Ссылка будет действительна 7 дней.",
+    "createLink": "Создать ссылку",
+    "creating": "Создание...",
+    "sendLink": "Отправьте эту ссылку участнику, которого хотите пригласить:",
+    "copyLink": "Скопировать ссылку",
+    "copied": "Скопировано!",
+    "createError": "Ошибка создания ссылки-приглашения",
+    "pageTitle": "Приглашение в семью",
+    "pageDescription": "Вас пригласили присоединиться к семейному бюджету. Войдите через Google, чтобы принять приглашение.",
+    "loginAndJoin": "Войти и присоединиться",
+    "validating": "Проверка приглашения...",
+    "joining": "Присоединение к семье...",
+    "invalid": "Ссылка недействительна или срок её действия истёк",
+    "notFound": "Ссылка не найдена",
+    "alreadyInFamily": "Вы уже состоите в семье",
+    "joinError": "Ошибка при присоединении к семье"
+  },
+  "admin": {
+    "title": "Админ панель",
+    "subtitle": "Управление семьями",
+    "accessDenied": "Доступ запрещен",
+    "requiresAdmin": "Требуются права администратора",
+    "createFamily": "Создать новую семью",
+    "familyName": "Название семьи",
+    "familyNamePlaceholder": "Например: Семья Ивановых",
+    "familyPassword": "Пароль семьи",
+    "familyPasswordPlaceholder": "Защитите семью паролем",
+    "createButton": "Создать семью",
+    "familyList": "Список семей",
+    "noFamilies": "Семьи не найдены",
+    "createFirst": "Создайте первую семью",
+    "fillNameAndPassword": "Заполните название и пароль семьи",
+    "createError": "Ошибка создания семьи",
+    "deleteConfirm": "Удалить семью?",
+    "deleteError": "Ошибка удаления семьи"
+  },
+  "shopping": {
+    "title": "Список покупок",
+    "addPlaceholder": "Добавить покупку...",
+    "toBuy": "К покупке",
+    "purchased": "Куплено",
+    "empty": "Список покупок пуст",
+    "allPurchased": "Все куплено",
+    "clear": "Очистить",
+    "loadError": "Ошибка загрузки списка покупок",
+    "addError": "Ошибка добавления покупки",
+    "toggleError": "Ошибка изменения статуса",
+    "deleteError": "Ошибка удаления покупки",
+    "updateError": "Ошибка обновления покупки",
+    "markAllError": "Ошибка обновления списка",
+    "clearError": "Ошибка очистки списка"
+  },
+  "confirm": {
+    "deleteItem": "Удалить покупку?",
+    "deleteItemMessage": "Покупка будет удалена из списка безвозвратно.",
+    "markAll": "Пометить все как купленные?",
+    "markAllMessage": "Все покупки в списке будут отмечены как купленные.",
+    "markButton": "Пометить",
+    "clearAll": "Очистить список?",
+    "clearAllMessage": "Все покупки будут удалены из списка безвозвратно."
+  },
+  "profile": {
+    "title": "Личный кабинет",
+    "info": "Информация",
+    "username": "Имя пользователя",
+    "email": "Email",
+    "family": "Семья",
+    "familyName": "Название семьи",
+    "members": "Участники",
+    "you": "Вы",
+    "unknownUser": "Пользователь",
+    "settings": "Настройки",
+    "language": "Язык",
+    "theme": "Тема",
+    "dangerZone": "Опасная зона",
+    "leaveFamily": "Покинуть семью",
+    "leaveDescription": "Если вы покинете семью, вы потеряете доступ к бюджету. Если вы последний участник, семья будет удалена вместе со всеми данными.",
+    "leaveConfirm": "Вы уверены, что хотите покинуть семью?",
+    "leaving": "Выход...",
+    "leaveError": "Ошибка при выходе из семьи",
+    "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

@@ -1,7 +1,110 @@
 @import "tailwindcss";
 
+:root,
+[data-theme="light"] {
+  --gradient-start: #667eea;
+  --gradient-end: #764ba2;
+  --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: #000000;
+  --gradient-end: #000000;
+  --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"] {
+  --gradient-start: #f97316;
+  --gradient-end: #ec4899;
+  --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"] {
+  --gradient-start: #3b82f6;
+  --gradient-end: #06b6d4;
+  --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"] {
+  --gradient-start: #22c55e;
+  --gradient-end: #14b8a6;
+  --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"] {
+  --gradient-start: #8b5cf6;
+  --gradient-end: #ec4899;
+  --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 {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
 }
 
 .gradient-bg-light {
@@ -18,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/main.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import './i18n'
 import './index.css'
 import App from './App.tsx'
 

frontend/src/pages/AdminPanel.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { authApi, familyApi } from '../api/client';
 import { useStore } from '../store/useStore';
 import {
@@ -10,57 +11,26 @@ import {
   Plus,
   Trash2,
   Lock,
-  User,
   ArrowLeft,
-  X,
 } from 'lucide-react';
 
 export default function AdminPanel() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
-  const { isAdmin, setIsAdmin, logout: storeLogout } = useStore();
-
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [loginError, setLoginError] = useState('');
+  const { user, logout: storeLogout } = useStore();
 
   const [newFamilyName, setNewFamilyName] = useState('');
   const [newFamilyPassword, setNewFamilyPassword] = useState('');
   const [families, setFamilies] = useState<Array<{ id: number; name: string }>>([]);
 
   useEffect(() => {
-    if (isAdmin) {
-      setIsAuthenticated(true);
     loadFamilies();
-    }
-  }, [isAdmin]);
-
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoginError('');
-
-    try {
-      const response = await authApi.login({ username, password });
-      if (response.data.success && response.data.is_admin) {
-        setIsAdmin(true);
-        setIsAuthenticated(true);
-        loadFamilies();
-      } else {
-        setLoginError('Доступ запрещен. Требуются права администратора.');
-      }
-    } catch (err) {
-      setLoginError('Неверные учетные данные');
-      console.error(err);
-    }
-  };
+  }, []);
 
   const handleLogout = async () => {
     try {
       await authApi.logout();
       storeLogout();
-      setIsAuthenticated(false);
-      setUsername('');
-      setPassword('');
       navigate('/');
     } catch (err) {
       console.error('Logout error:', err);
@@ -78,7 +48,7 @@ export default function AdminPanel() {
 
   const handleCreateFamily = async () => {
     if (!newFamilyName.trim() || !newFamilyPassword.trim()) {
-      alert('Заполните название и пароль семьи');
+      alert(t('admin.fillNameAndPassword'));
       return;
     }
 
@@ -88,95 +58,45 @@ export default function AdminPanel() {
       setNewFamilyPassword('');
       loadFamilies();
     } catch (err) {
-      alert('Ошибка создания семьи');
+      alert(t('admin.createError'));
       console.error(err);
     }
   };
 
   const handleDeleteFamily = async (id: number) => {
-    if (!confirm('Удалить семью?')) return;
+    if (!confirm(t('admin.deleteConfirm'))) return;
 
     try {
       await familyApi.delete(id);
       loadFamilies();
     } catch (err) {
-      alert('Ошибка удаления семьи');
+      alert(t('admin.deleteError'));
       console.error(err);
     }
   };
 
-  if (!isAuthenticated) {
+  if (!user?.is_admin) {
     return (
       <div className="min-h-screen gradient-bg flex items-center justify-center py-8 sm:py-12 px-4">
         <div className="max-w-md w-full">
-          <div className="glass-effect rounded-2xl shadow-2xl p-6 sm:p-8">
+          <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-purple-500 to-blue-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>
-            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2 text-center">
-              Админ панель
+            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
+              {t('admin.accessDenied')}
             </h1>
-            <p className="text-gray-600 text-center mb-6 text-sm sm:text-base">
-              Войдите для управления системой
+            <p className="text-gray-600 mb-6 text-sm sm:text-base">
+              {t('admin.requiresAdmin')}
             </p>
-
-            {loginError && (
-              <div className="mb-4 p-3 bg-red-100 border-l-4 border-red-500 text-red-700 rounded">
-                <div className="flex items-center gap-2">
-                  <X className="w-4 h-4 flex-shrink-0" />
-                  <span className="text-sm">{loginError}</span>
-                </div>
-              </div>
-            )}
-
-            <form onSubmit={handleLogin} className="space-y-4">
-              <div>
-                <label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
-                  <User className="w-4 h-4" />
-                  Логин
-                </label>
-                <input
-                  type="text"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  className="w-full px-4 py-2.5 sm:py-3 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all text-sm sm:text-base"
-                  placeholder="Введите логин"
-                  required
-                />
-              </div>
-
-              <div>
-                <label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
-                  <Lock className="w-4 h-4" />
-                  Пароль
-                </label>
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="w-full px-4 py-2.5 sm:py-3 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all text-sm sm:text-base"
-                  placeholder="Введите пароль"
-                  required
-                />
-              </div>
-
-              <button
-                type="submit"
-                className="w-full flex items-center justify-center gap-2 px-4 py-2.5 sm:py-3 bg-linear-to-r from-purple-600 to-blue-600 text-white rounded-xl hover:shadow-lg transition-all duration-300 font-medium text-sm sm:text-base"
-              >
-                <Shield className="w-4 h-4 sm:w-5 sm:h-5" />
-                Войти
-              </button>
-            </form>
-
             <button
               onClick={() => navigate('/')}
-              className="w-full mt-4 flex items-center justify-center gap-2 px-4 py-2.5 sm:py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-xl transition-all duration-300 font-medium text-sm sm:text-base"
+              className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-xl transition-all duration-300 font-medium"
             >
-              <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
-              На главную
+              <ArrowLeft className="w-5 h-5" />
+              {t('common.back')}
             </button>
           </div>
         </div>
@@ -192,10 +112,10 @@ export default function AdminPanel() {
             <Shield className="w-12 h-12 text-white" />
           </div>
           <h1 className="text-4xl sm:text-5xl font-bold text-white mb-2">
-            Админ панель
+            {t('admin.title')}
           </h1>
           <p className="text-purple-100 text-base sm:text-lg mb-6">
-            Управление семьями
+            {t('admin.subtitle')}
           </p>
           <div className="flex justify-center gap-3">
             <button
@@ -203,25 +123,25 @@ export default function AdminPanel() {
               className="inline-flex items-center gap-2 px-5 py-3 bg-red-500/80 hover:bg-red-600 text-white rounded-2xl backdrop-blur-md transition-all duration-300 hover:shadow-lg font-medium"
             >
               <LogOut className="w-5 h-5" />
-              Выход
+              {t('common.exit')}
             </button>
             <button
               onClick={() => navigate('/')}
               className="inline-flex items-center gap-2 px-5 py-3 bg-white/20 hover:bg-white/30 text-white rounded-2xl backdrop-blur-md transition-all duration-300 hover:shadow-lg font-medium"
             >
               <Home className="w-5 h-5" />
-              На главную
+              {t('common.toHome')}
             </button>
           </div>
         </div>
 
         <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">
-              Создать новую семью
+              {t('admin.createFamily')}
             </h2>
           </div>
 
@@ -229,11 +149,11 @@ export default function AdminPanel() {
             <div>
               <label className="flex items-center justify-center gap-2 text-sm font-semibold text-gray-700 mb-3">
                 <Users className="w-5 h-5 text-purple-600" />
-                Название семьи
+                {t('admin.familyName')}
               </label>
               <input
                 type="text"
-                placeholder="Например: Семья Ивановых"
+                placeholder={t('admin.familyNamePlaceholder')}
                 value={newFamilyName}
                 onChange={(e) => setNewFamilyName(e.target.value)}
                 className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all font-medium text-center"
@@ -242,11 +162,11 @@ export default function AdminPanel() {
             <div>
               <label className="flex items-center justify-center gap-2 text-sm font-semibold text-gray-700 mb-3">
                 <Lock className="w-5 h-5 text-purple-600" />
-                Пароль семьи
+                {t('admin.familyPassword')}
               </label>
               <input
                 type="password"
-                placeholder="Защитите семью паролем"
+                placeholder={t('admin.familyPasswordPlaceholder')}
                 value={newFamilyPassword}
                 onChange={(e) => setNewFamilyPassword(e.target.value)}
                 className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all font-medium text-center"
@@ -254,34 +174,34 @@ 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')}
             </button>
           </div>
         </div>
 
         <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">
-              Список семей
+              {t('admin.familyList')}
             </h2>
           </div>
 
           {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">
-                <Users className="w-20 h-20 text-purple-400" />
+              <div className="inline-flex p-6 bg-gray-100 rounded-3xl mb-6">
+                <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')}
               </p>
               <p className="text-gray-500 text-sm sm:text-base">
-                Создайте первую семью
+                {t('admin.createFirst')}
               </p>
             </div>
           ) : (
@@ -289,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">
@@ -301,10 +221,10 @@ 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')}
                   </button>
                 </div>
               ))}

frontend/src/pages/FamilyView.tsx

@@ -1,15 +1,16 @@
 import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { categoryApi, expenseApi } from '../api/client';
+import { useTranslation } from 'react-i18next';
+import { categoryApi, expenseApi, inviteLinkApi } from '../api/client';
 import { useStore } from '../store/useStore';
-import type { Category, Expense } from '../types';
+import type { Category, InviteLinkResponse, ExpenseHistoryResponse } from '../types';
 import {
-  ArrowLeft,
   Wallet,
   TrendingDown,
   Plus,
   Trash2,
   RotateCcw,
+  Archive,
   Loader2,
   X,
   DollarSign,
@@ -18,10 +19,15 @@ import {
   Calendar,
   MessageSquare,
   ShoppingCart,
+  UserPlus,
+  Copy,
+  Check,
+  User,
 } from 'lucide-react';
 import ShoppingListModal from '../components/ShoppingListModal';
 
 export default function FamilyView() {
+  const { t } = useTranslation();
   const { familyId } = useParams<{ familyId: string }>();
   const navigate = useNavigate();
   const { selectedFamily } = useStore();
@@ -40,8 +46,14 @@ 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);
+  const [inviteLoading, setInviteLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
 
   useEffect(() => {
     if (!familyId) {
@@ -76,7 +88,7 @@ export default function FamilyView() {
       setRemainingLimits(limits);
       console.log('All data loaded successfully');
     } catch (err: any) {
-      const errorMsg = err.response?.data?.message || err.message || 'Ошибка загрузки категорий';
+      const errorMsg = err.response?.data?.message || err.message || t('family.loadError');
       setError(errorMsg);
       console.error('Error loading categories:', err);
     } finally {
@@ -97,28 +109,28 @@ export default function FamilyView() {
       setShowAddCategory(false);
       loadCategories();
     } catch (err: any) {
-      const errorMsg = err.response?.data?.message || err.response?.statusText || err.message || 'Ошибка создания категории';
-      alert(`Ошибка создания категории: ${errorMsg} (Статус: ${err.response?.status})`);
+      const errorMsg = err.response?.data?.message || err.response?.statusText || err.message || t('category.createError');
+      alert(`${t('category.createError')}: ${errorMsg}`);
       console.error('Full error:', err);
     }
   };
 
   const handleDeleteCategory = async (categoryId: number) => {
     if (!familyId) return;
-    if (!confirm('Удалить категорию?')) return;
+    if (!confirm(t('category.deleteConfirm'))) return;
 
     try {
       await categoryApi.delete(parseInt(familyId), categoryId);
       loadCategories();
     } catch (err) {
-      alert('Ошибка удаления категории');
+      alert(t('category.deleteError'));
       console.error(err);
     }
   };
 
   const handleResetLimit = async (categoryId: number) => {
     if (!familyId) return;
-    if (!confirm('Удалить все траты по этой категории?')) return;
+    if (!confirm(t('category.resetConfirm'))) return;
 
     try {
       const expensesResponse = await expenseApi.getAllByCategory(
@@ -136,7 +148,7 @@ export default function FamilyView() {
 
       loadCategories();
     } catch (err) {
-      alert('Ошибка сброса трат');
+      alert(t('category.resetError'));
       console.error(err);
     }
   };
@@ -154,7 +166,7 @@ export default function FamilyView() {
       setShowAddExpense(null);
       loadCategories();
     } catch (err) {
-      alert('Ошибка добавления расхода');
+      alert(t('expense.addError'));
       console.error(err);
     }
   };
@@ -167,25 +179,82 @@ 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('Ошибка загрузки истории трат');
+      alert(t('expense.historyError'));
       console.error(err);
     }
   };
 
+  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);
+      const response = await inviteLinkApi.create({ expires_in_hours: 168 });
+      setInviteLink(response.data);
+    } catch (err) {
+      alert(t('invite.createError'));
+      console.error(err);
+    } finally {
+      setInviteLoading(false);
+    }
+  };
+
+  const handleCopyInviteLink = async () => {
+    if (!inviteLink) return;
+    try {
+      await navigator.clipboard.writeText(inviteLink.invite_url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  const handleOpenInviteModal = () => {
+    setShowInviteModal(true);
+    setInviteLink(null);
+    setCopied(false);
+  };
+
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center gradient-bg">
         <div className="flex items-center gap-3 text-white">
           <Loader2 className="w-8 h-8 animate-spin" />
-          <span className="text-xl font-medium">Загрузка...</span>
+          <span className="text-xl font-medium">{t('common.loading')}</span>
         </div>
       </div>
     );
@@ -225,34 +294,52 @@ 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">
         <div className="mb-6 sm:mb-8">
+          <div className="flex items-center gap-3 mb-6">
             <button
-            onClick={() => navigate('/')}
-            className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-2xl backdrop-blur-md mb-6 transition-all duration-300 group"
+              onClick={handleOpenInviteModal}
+              className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-2xl backdrop-blur-md transition-all duration-300 group"
             >
-            <ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
-            <span className="font-medium">Назад к списку семей</span>
+              <UserPlus className="w-5 h-5 group-hover:scale-110 transition-transform" />
+              <span className="font-medium">{t('family.inviteMember')}</span>
             </button>
+            <button
+              onClick={() => navigate('/profile')}
+              className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-2xl backdrop-blur-md transition-all duration-300 group"
+            >
+              <User className="w-5 h-5 group-hover:scale-110 transition-transform" />
+              <span className="font-medium">{t('profile.title')}</span>
+            </button>
+          </div>
           <div className="text-center">
             <div className="inline-flex p-4 bg-white/20 backdrop-blur-md rounded-2xl mb-4">
               <Wallet className="w-12 h-12 text-white" />
             </div>
             <h1 className="text-4xl sm:text-5xl font-bold text-white mb-6">
-              {selectedFamily?.name || 'Семья'}
+              {selectedFamily?.name || t('family.defaultName')}
             </h1>
             <div className="max-w-2xl mx-auto glass-effect rounded-2xl shadow-lg p-5">
               <div className="grid grid-cols-2 gap-4 mb-4">
                 <div className="text-center">
-                  <p className="text-gray-600 font-medium text-sm mb-2">Общий лимит</p>
+                  <p className="text-gray-600 font-medium text-sm mb-2">{t('family.totalLimit')}</p>
                   <p className="text-2xl sm:text-3xl font-bold text-gray-900">
                     {getTotalLimit().toFixed(2)} ₽
                   </p>
                 </div>
                 <div className="text-center border-l-2 border-gray-300">
-                  <p className="text-gray-600 font-medium text-sm mb-2">Общий остаток</p>
+                  <p className="text-gray-600 font-medium text-sm mb-2">{t('family.totalRemaining')}</p>
                   <p className="text-2xl sm:text-3xl font-bold text-gray-900">
                     {getTotalRemaining().toFixed(2)} ₽
                   </p>
@@ -260,10 +347,10 @@ 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')}
               </button>
             </div>
           </div>
@@ -291,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">
@@ -302,24 +389,24 @@ 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">Добавить расход</span>
-                      <span className="sm:hidden">Расход</span>
+                      <span className="hidden sm:inline">{t('category.addExpense')}</span>
+                      <span className="sm:hidden">{t('category.expense')}</span>
                     </button>
                   )}
                 </div>
 
                 <div className="space-y-3 mb-4">
                   <div className="flex justify-between items-baseline">
-                    <span className="text-gray-600 font-medium text-sm">Остаток:</span>
+                    <span className="text-gray-600 font-medium text-sm">{t('category.remaining')}</span>
                     <span className="text-2xl sm:text-3xl font-bold text-gray-900">
                       {remaining.toFixed(2)} ₽
                     </span>
                   </div>
                   <div className="flex justify-between items-baseline text-gray-500 text-sm">
-                    <span>Лимит:</span>
+                    <span>{t('category.limit')}</span>
                     <span className="text-base font-semibold">{limit.toFixed(2)} ₽</span>
                   </div>
 
@@ -330,40 +417,47 @@ export default function FamilyView() {
                     />
                   </div>
                   <p className="text-xs text-gray-500 text-center font-medium">
-                    {percentage.toFixed(0)}% осталось
+                    {percentage.toFixed(0)}{t('category.percentRemaining')}
                   </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>Обнулить</span>
+                    <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>История</span>
+                    <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>Удалить</span>
+                    <span>{t('common.delete')}</span>
                   </button>
                 </div>
 
-                {showHistory === category.id && (
-                  <div className="mt-4 bg-linear-to-br from-blue-50 to-purple-50 p-4 rounded-2xl border-2 border-blue-200">
+                {showHistory === category.id && historyData && (
+                  <div className="mt-4 glass-effect p-4 rounded-2xl border-2 border-blue-200">
                     <div className="flex items-center justify-between mb-4">
                       <h3 className="font-semibold text-gray-800 text-lg flex items-center gap-2">
                         <History className="w-5 h-5" />
-                        История трат
+                        {t('expense.historyTitle')}
                       </h3>
                       <button
                         onClick={() => setShowHistory(null)}
@@ -373,14 +467,25 @@ export default function FamilyView() {
                       </button>
                     </div>
 
-                    {categoryExpenses.length === 0 ? (
-                      <p className="text-center text-gray-500 py-4">Нет трат</p>
+                    {historyData.months.length === 0 ? (
+                      <p className="text-center text-gray-500 py-4">{t('expense.noExpenses')}</p>
                     ) : (
-                      <div className="space-y-2 max-h-96 overflow-y-auto">
-                        {categoryExpenses.map((expense) => (
+                      <div className="space-y-4 max-h-96 overflow-y-auto">
+                        {historyData.months.map((monthGroup) => (
+                          <div key={`${monthGroup.year}-${monthGroup.month}`} className="border-l-4 border-blue-500 pl-4">
+                            <div className="flex justify-between items-center mb-3">
+                              <h4 className="font-bold text-gray-900">
+                                {getMonthName(monthGroup.month)} {monthGroup.year}
+                              </h4>
+                              <span className="text-lg font-semibold text-blue-600">
+                                {parseFloat(monthGroup.total_amount.toString()).toFixed(2)} ₽
+                              </span>
+                            </div>
+                            <div className="space-y-2">
+                              {monthGroup.expenses.map((expense) => (
                                 <div
                                   key={expense.id}
-                            className="bg-white p-3 rounded-xl shadow-sm border border-gray-200"
+                                  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">
@@ -397,7 +502,7 @@ export default function FamilyView() {
                                     </div>
                                   </div>
                                   {expense.description && (
-                              <div className="flex items-start gap-2 text-sm text-gray-600 bg-gray-50 p-2 rounded-lg">
+                                    <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>
@@ -405,19 +510,90 @@ 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>
                 )}
 
                 {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>
                     <div className="space-y-4">
                       <div>
                         <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Сумма (₽)
+                          {t('expense.amount')}
                         </label>
                         <input
                           type="number"
@@ -429,11 +605,11 @@ export default function FamilyView() {
                       </div>
                       <div>
                         <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Описание
+                          {t('expense.description')}
                         </label>
                         <input
                           type="text"
-                          placeholder="Опционально"
+                          placeholder={t('expense.descriptionPlaceholder')}
                           value={expenseDescription}
                           onChange={(e) => setExpenseDescription(e.target.value)}
                           className="w-full px-4 py-3 border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all"
@@ -442,10 +618,10 @@ 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')}
                         </button>
                         <button
                           onClick={() => setShowAddExpense(null)}
@@ -464,30 +640,30 @@ 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">
-              Управление категориями
+              {t('category.management')}
             </h2>
           </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>
               <div className="space-y-4">
                 <input
                   type="text"
-                  placeholder="Название категории"
+                  placeholder={t('category.categoryName')}
                   value={newCategoryName}
                   onChange={(e) => setNewCategoryName(e.target.value)}
                   className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all font-medium"
                 />
                 <input
                   type="number"
-                  placeholder="Лимит (₽)"
+                  placeholder={t('category.categoryLimit')}
                   value={newCategoryLimit}
                   onChange={(e) => setNewCategoryLimit(e.target.value)}
                   className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all font-medium text-center"
@@ -495,16 +671,16 @@ 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')}
                   </button>
                   <button
                     onClick={() => setShowAddCategory(false)}
                     className="px-6 py-4 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-2xl transition-all font-medium"
                   >
-                    Отмена
+                    {t('common.cancel')}
                   </button>
                 </div>
               </div>
@@ -512,10 +688,10 @@ 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')}
             </button>
           )}
         </div>
@@ -527,6 +703,83 @@ export default function FamilyView() {
           onClose={() => setShowShoppingList(false)}
         />
       )}
+
+      {showInviteModal && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <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 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>
+              </div>
+              <button
+                onClick={() => setShowInviteModal(false)}
+                className="p-2 hover:bg-gray-100 rounded-xl transition-all"
+              >
+                <X className="w-5 h-5 text-gray-500" />
+              </button>
+            </div>
+
+            {!inviteLink ? (
+              <div className="text-center">
+                <p className="text-gray-600 mb-6">
+                  {t('invite.description')}
+                </p>
+                <button
+                  onClick={handleCreateInviteLink}
+                  disabled={inviteLoading}
+                  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 ? (
+                    <>
+                      <Loader2 className="w-5 h-5 animate-spin" />
+                      {t('invite.creating')}
+                    </>
+                  ) : (
+                    <>
+                      <UserPlus className="w-5 h-5" />
+                      {t('invite.createLink')}
+                    </>
+                  )}
+                </button>
+              </div>
+            ) : (
+              <div>
+                <p className="text-gray-600 mb-4 text-center">
+                  {t('invite.sendLink')}
+                </p>
+                <div className="bg-gray-100 rounded-2xl p-4 mb-4">
+                  <p className="text-sm text-gray-800 break-all font-mono">
+                    {inviteLink.invite_url}
+                  </p>
+                </div>
+                <button
+                  onClick={handleCopyInviteLink}
+                  className={`w-full flex items-center justify-center gap-2 px-6 py-4 rounded-2xl transition-all font-semibold ${
+                    copied
+                      ? 'btn-success text-white'
+                      : 'btn-primary text-white hover:shadow-xl'
+                  }`}
+                >
+                  {copied ? (
+                    <>
+                      <Check className="w-5 h-5" />
+                      {t('invite.copied')}
+                    </>
+                  ) : (
+                    <>
+                      <Copy className="w-5 h-5" />
+                      {t('invite.copyLink')}
+                    </>
+                  )}
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/pages/Home.tsx

@@ -1,230 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { familyApi, categoryApi } from '../api/client';
-import { useStore } from '../store/useStore';
-import type { Family } from '../types';
-import { Users, Settings, Lock, Loader2, X } from 'lucide-react';
-
-export default function Home() {
-  const navigate = useNavigate();
-  const { families, setFamilies, setSelectedFamily } = useStore();
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-
-  const [showPasswordDialog, setShowPasswordDialog] = useState(false);
-  const [selectedFamilyForAuth, setSelectedFamilyForAuth] = useState<Family | null>(null);
-  const [familyPassword, setFamilyPassword] = useState('');
-  const [passwordError, setPasswordError] = useState('');
-
-  useEffect(() => {
-    loadFamilies();
-  }, []);
-
-  const loadFamilies = async () => {
-    try {
-      setLoading(true);
-      const response = await familyApi.getAll();
-      setFamilies(response.data);
-    } catch (err) {
-      setError('Ошибка загрузки списка семей');
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSelectFamily = async (family: Family) => {
-    try {
-      await categoryApi.getAllByFamily(family.id);
-      setSelectedFamily(family);
-      navigate(`/family/${family.id}`);
-    } catch (err: any) {
-      if (err.response?.status === 403) {
-        setSelectedFamilyForAuth(family);
-        setShowPasswordDialog(true);
-        setPasswordError('');
-        setFamilyPassword('');
-      } else {
-        setError('Ошибка доступа к семье');
-      }
-    }
-  };
-
-  const handleVerifyPassword = async () => {
-    if (!selectedFamilyForAuth || !familyPassword.trim()) {
-      setPasswordError('Введите пароль');
-      return;
-    }
-
-    try {
-      const response = await familyApi.verifyPassword(selectedFamilyForAuth.id, {
-        password: familyPassword,
-      });
-
-      if (response.data.valid) {
-        setSelectedFamily(selectedFamilyForAuth);
-        setShowPasswordDialog(false);
-        navigate(`/family/${selectedFamilyForAuth.id}`);
-      }
-    } catch (err: any) {
-      if (err.response?.status === 401) {
-        setPasswordError('Неверный пароль');
-      } else {
-        setPasswordError('Ошибка проверки пароля');
-      }
-      console.error(err);
-    }
-  };
-
-  const handleCancelPasswordDialog = () => {
-    setShowPasswordDialog(false);
-    setSelectedFamilyForAuth(null);
-    setFamilyPassword('');
-    setPasswordError('');
-  };
-
-  const handleGoToAdmin = () => {
-    navigate('/adminpanel');
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center gradient-bg">
-        <div className="flex items-center gap-3 text-white">
-          <Loader2 className="w-8 h-8 animate-spin" />
-          <span className="text-xl font-medium">Загрузка...</span>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen gradient-bg py-8 sm:py-12 px-4 flex items-center justify-center">
-      <div className="w-full max-w-2xl">
-        <div className="text-center mb-8">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-3">
-            Семейный бюджет
-          </h1>
-          <button
-            onClick={handleGoToAdmin}
-            className="inline-flex items-center gap-2 px-6 py-3 bg-linear-to-r from-orange-400 via-pink-500 to-purple-500 hover:from-orange-500 hover:via-pink-600 hover:to-purple-600 text-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 font-semibold"
-          >
-            <Settings className="w-5 h-5" />
-            <span className="font-medium">Админка</span>
-          </button>
-        </div>
-
-        {error && (
-          <div className="mb-6 p-4 bg-red-500/90 backdrop-blur-md border border-red-300/50 text-white rounded-2xl shadow-lg">
-            <div className="flex items-center gap-2">
-              <X className="w-5 h-5 flex-shrink-0" />
-              <span>{error}</span>
-            </div>
-          </div>
-        )}
-
-        <div className="text-center mb-6">
-          <div className="inline-flex items-center gap-3 mb-6">
-            <div className="p-3 bg-white/20 backdrop-blur-md rounded-2xl">
-              <Users className="w-8 h-8 text-white" />
-            </div>
-            <h2 className="text-2xl sm:text-3xl font-bold text-white">
-              Выберите семью
-            </h2>
-          </div>
-        </div>
-
-        {families.length === 0 ? (
-          <div className="glass-effect rounded-3xl shadow-2xl p-10 text-center">
-            <div className="inline-flex p-6 bg-linear-to-br from-purple-100 to-blue-100 rounded-3xl mb-6">
-              <Users className="w-20 h-20 text-purple-400" />
-            </div>
-            <p className="text-gray-600 text-lg sm:text-xl mb-2 font-semibold">
-              Семьи не найдены
-            </p>
-            <p className="text-gray-500 text-sm sm:text-base">
-              Создайте семью в админ панели
-            </p>
-          </div>
-        ) : (
-          <div className="flex flex-row flex-wrap gap-4 justify-center">
-            {families.map((family) => (
-              <button
-                key={family.id}
-                onClick={() => handleSelectFamily(family)}
-                className="group w-80 p-8 bg-linear-to-br from-pink-200 via-purple-200 to-indigo-200 border-2 border-pink-400 rounded-3xl hover:border-pink-500 hover:shadow-2xl transition-all duration-300 text-center card-hover hover:from-pink-300 hover:via-purple-300 hover:to-indigo-300"
-              >
-                <div className="flex flex-col items-center gap-4">
-                  <div className="p-4 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl group-hover:scale-110 transition-transform duration-300 shadow-lg">
-                    <Users className="w-10 h-10" />
-                  </div>
-                  <div>
-                    <h3 className="text-xl sm:text-2xl font-bold text-gray-900 mb-2">
-                      {family.name}
-                    </h3>
-                    <p className="text-sm text-gray-500">
-                      Нажмите для просмотра
-                    </p>
-                  </div>
-                </div>
-              </button>
-            ))}
-          </div>
-        )}
-
-        {showPasswordDialog && selectedFamilyForAuth && (
-          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50 animate-fadeIn">
-            <div className="glass-effect rounded-3xl shadow-2xl p-8 sm:p-10 max-w-md w-full animate-scaleIn">
-              <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">
-                  <Lock className="w-10 h-10" />
-                </div>
-                <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
-                  Защищённая семья
-                </h2>
-                <p className="text-gray-600 text-sm sm:text-base">
-                  <span className="font-semibold text-purple-600">{selectedFamilyForAuth.name}</span>
-                </p>
-              </div>
-
-              {passwordError && (
-                <div className="mb-6 p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-xl">
-                  <div className="flex items-center gap-2">
-                    <X className="w-5 h-5 flex-shrink-0" />
-                    <span className="text-sm font-medium">{passwordError}</span>
-                  </div>
-                </div>
-              )}
-
-              <input
-                type="password"
-                placeholder="Введите пароль"
-                value={familyPassword}
-                onChange={(e) => setFamilyPassword(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleVerifyPassword()}
-                className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all mb-6 text-base text-center font-medium"
-                autoFocus
-              />
-
-              <div className="flex flex-col gap-3">
-                <button
-                  onClick={handleVerifyPassword}
-                  className="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 text-base"
-                >
-                  <Lock className="w-5 h-5" />
-                  Войти
-                </button>
-                <button
-                  onClick={handleCancelPasswordDialog}
-                  className="px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-2xl transition-all duration-300 font-medium"
-                >
-                  Отмена
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

frontend/src/pages/InvitePage.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { inviteLinkApi, authApi } from '../api/client';
+import { useStore } from '../store/useStore';
+import { Loader2, Users, UserPlus, AlertCircle } from 'lucide-react';
+
+export default function InvitePage() {
+  const { t } = useTranslation();
+  const { token } = useParams<{ token: string }>();
+  const navigate = useNavigate();
+  const { isAuthenticated, setUser } = useStore();
+
+  const [loading, setLoading] = useState(true);
+  const [joining, setJoining] = useState(false);
+  const [error, setError] = useState('');
+  const [familyName, setFamilyName] = useState<string | null>(null);
+  const [isValid, setIsValid] = useState(false);
+
+  useEffect(() => {
+    if (token) {
+      validateInvite();
+    }
+  }, [token]);
+
+  useEffect(() => {
+    if (isAuthenticated && isValid && token) {
+      joinFamily();
+    }
+  }, [isAuthenticated, isValid]);
+
+  const validateInvite = async () => {
+    if (!token) return;
+
+    try {
+      setLoading(true);
+      const response = await inviteLinkApi.validate(token);
+      if (response.data.valid) {
+        setIsValid(true);
+        setFamilyName(response.data.family_name);
+      } else {
+        setError(t('invite.invalid'));
+      }
+    } catch (err) {
+      setError(t('invite.notFound'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const joinFamily = async () => {
+    if (!token) return;
+
+    try {
+      setJoining(true);
+      const response = await inviteLinkApi.join(token);
+      if (response.data.success) {
+        const meResponse = await authApi.me();
+        setUser(meResponse.data);
+        navigate(`/family/${response.data.family_id}`);
+      } else {
+        setError(response.data.message);
+      }
+    } catch (err: any) {
+      if (err.response?.status === 400) {
+        setError(t('invite.alreadyInFamily'));
+      } else {
+        setError(t('invite.joinError'));
+      }
+    } finally {
+      setJoining(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    if (token) {
+      localStorage.setItem('pendingInviteToken', token);
+    }
+    try {
+      const response = await authApi.getGoogleAuthUrl(window.location.href);
+      window.location.href = response.data.url;
+    } catch (err) {
+      setError(t('login.authError'));
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center gradient-bg">
+        <div className="flex items-center gap-3 text-white">
+          <Loader2 className="w-8 h-8 animate-spin" />
+          <span className="text-xl font-medium">{t('invite.validating')}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (joining) {
+    return (
+      <div className="min-h-screen flex items-center justify-center gradient-bg">
+        <div className="flex items-center gap-3 text-white">
+          <Loader2 className="w-8 h-8 animate-spin" />
+          <span className="text-xl font-medium">{t('invite.joining')}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center gradient-bg px-4">
+        <div className="glass-effect rounded-3xl shadow-2xl p-8 max-w-md w-full text-center">
+          <div className="p-4 btn-danger rounded-2xl inline-block mb-6">
+            <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 btn-primary text-white rounded-2xl font-semibold hover:shadow-xl transition-all"
+          >
+            {t('common.toHome')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center gradient-bg px-4">
+      <div className="glass-effect rounded-3xl shadow-2xl p-8 max-w-md w-full text-center">
+        <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-gray-800 mb-6">
+          {familyName}
+        </p>
+        <p className="text-gray-600 mb-8">
+          {t('invite.pageDescription')}
+        </p>
+        <button
+          onClick={handleGoogleLogin}
+          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')}
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Login.tsx

@@ -0,0 +1,66 @@
+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();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleGoogleLogin = async () => {
+    try {
+      setLoading(true);
+      setError('');
+      const currentUrl = window.location.origin;
+      const response = await authApi.getGoogleAuthUrl(currentUrl);
+      window.location.href = response.data.url;
+    } catch (err) {
+      setError(t('login.authError'));
+      console.error(err);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen gradient-bg flex items-center justify-center px-4">
+      <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 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">
+              {t('login.title')}
+            </h1>
+            <p className="text-gray-600">
+              {t('login.subtitle')}
+            </p>
+          </div>
+
+          {error && (
+            <div className="mb-6 p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-xl">
+              <span className="text-sm font-medium">{error}</span>
+            </div>
+          )}
+
+          <button
+            onClick={handleGoogleLogin}
+            disabled={loading}
+            className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-white border-2 border-gray-300 rounded-2xl hover:bg-gray-50 hover:border-gray-400 transition-all duration-300 font-semibold text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <Loader2 className="w-6 h-6 animate-spin" />
+            ) : (
+              <>
+                <FcGoogle className="w-6 h-6" />
+                {t('login.googleButton')}
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/NoFamily.tsx

@@ -0,0 +1,227 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useStore } from '../store/useStore';
+import { authApi, familyApi, inviteLinkApi } from '../api/client';
+import { Users, LogOut, Settings, Plus, Loader2, Eye, EyeOff } from 'lucide-react';
+
+export default function NoFamily() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { user, logout, setUser } = useStore();
+
+  const [familyName, setFamilyName] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [joiningFamily, setJoiningFamily] = useState(false);
+
+  useEffect(() => {
+    checkPendingInvite();
+  }, []);
+
+  const checkPendingInvite = async () => {
+    const pendingToken = localStorage.getItem('pendingInviteToken');
+    if (!pendingToken) return;
+
+    localStorage.removeItem('pendingInviteToken');
+
+    try {
+      setJoiningFamily(true);
+      const response = await inviteLinkApi.join(pendingToken);
+      if (response.data.success) {
+        const meResponse = await authApi.me();
+        setUser(meResponse.data);
+        navigate(`/family/${response.data.family_id}`);
+      } else {
+        setError(response.data.message);
+      }
+    } catch (err: any) {
+      if (err.response?.status === 400) {
+        setError(t('noFamily.invalidInvite'));
+      } else {
+        setError(t('noFamily.joinError'));
+      }
+    } finally {
+      setJoiningFamily(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      await authApi.logout();
+      logout();
+    } catch (err) {
+      console.error(err);
+      logout();
+    }
+  };
+
+  const handleGoToAdmin = () => {
+    navigate('/adminpanel');
+  };
+
+  const handleCreateFamily = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!familyName.trim()) {
+      setError(t('noFamily.enterFamilyName'));
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError('');
+
+      const response = await familyApi.createMyFamily({
+        name: familyName.trim(),
+        password: password || undefined,
+      });
+
+      setUser({
+        ...user!,
+        family_id: response.data.family_id,
+      });
+
+      navigate(`/family/${response.data.family_id}`);
+    } catch (err: unknown) {
+      if (err && typeof err === 'object' && 'response' in err) {
+        const axiosError = err as { response?: { status?: number } };
+        if (axiosError.response?.status === 409) {
+          setError(t('noFamily.alreadyInFamily'));
+        } else {
+          setError(t('noFamily.createError'));
+        }
+      } else {
+        setError(t('noFamily.createError'));
+      }
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (joiningFamily) {
+    return (
+      <div className="min-h-screen flex items-center justify-center gradient-bg">
+        <div className="flex items-center gap-3 text-white">
+          <Loader2 className="w-8 h-8 animate-spin" />
+          <span className="text-xl font-medium">{t('noFamily.joiningFamily')}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen gradient-bg flex items-center justify-center px-4">
+      <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 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">
+              {t('noFamily.welcome')}
+            </h1>
+            <p className="text-gray-600">
+              <span className="font-semibold text-purple-600">{user?.email || user?.username}</span>
+            </p>
+          </div>
+
+          <form onSubmit={handleCreateFamily} className="mb-6">
+            <h2 className="text-lg font-semibold text-gray-800 mb-4 text-center">
+              {t('noFamily.createFamily')}
+            </h2>
+
+            {error && (
+              <div className="mb-4 p-3 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-lg">
+                <span className="text-sm font-medium">{error}</span>
+              </div>
+            )}
+
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="familyName" className="block text-sm font-medium text-gray-700 mb-1">
+                  {t('noFamily.familyNameRequired')}
+                </label>
+                <input
+                  type="text"
+                  id="familyName"
+                  value={familyName}
+                  onChange={(e) => setFamilyName(e.target.value)}
+                  placeholder={t('noFamily.familyNamePlaceholder')}
+                  className="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none transition-colors"
+                  disabled={loading}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+                  {t('noFamily.password')} <span className="text-gray-400">{t('noFamily.passwordOptional')}</span>
+                </label>
+                <div className="relative">
+                  <input
+                    type={showPassword ? 'text' : 'password'}
+                    id="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder={t('noFamily.passwordPlaceholder')}
+                    className="w-full px-4 py-3 pr-12 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none transition-colors"
+                    disabled={loading}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                  >
+                    {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                  </button>
+                </div>
+                <p className="mt-1 text-xs text-gray-500">
+                  {t('noFamily.passwordHint')}
+                </p>
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading || !familyName.trim()}
+                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" />
+                ) : (
+                  <>
+                    <Plus className="w-5 h-5" />
+                    {t('noFamily.createButton')}
+                  </>
+                )}
+              </button>
+            </div>
+          </form>
+
+          <div className="border-t border-gray-200 pt-6">
+            <div className="flex flex-col gap-3">
+              {user?.is_admin && (
+                <button
+                  onClick={handleGoToAdmin}
+                  className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-2xl transition-all duration-300 font-medium"
+                >
+                  <Settings className="w-5 h-5" />
+                  {t('noFamily.adminPanel')}
+                </button>
+              )}
+              <button
+                onClick={handleLogout}
+                className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-2xl transition-all duration-300 font-medium"
+              >
+                <LogOut className="w-5 h-5" />
+                {t('common.logout')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Profile.tsx

@@ -0,0 +1,375 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { familyApi, userApi, authApi } from '../api/client';
+import { useStore } from '../store/useStore';
+import type { Theme } from '../types';
+import {
+  User as UserIcon,
+  Users,
+  Settings,
+  AlertTriangle,
+  ArrowLeft,
+  Loader2,
+  Check,
+  Palette,
+  Languages,
+  LogOut,
+  Edit3,
+  Save,
+  X,
+} from 'lucide-react';
+
+const THEMES: { id: Theme; gradient: string }[] = [
+  { id: 'light', gradient: 'bg-gradient-to-r from-gray-100 to-gray-200' },
+  { id: 'dark', gradient: 'bg-gradient-to-r from-black to-gray-900' },
+  { id: 'sunset', gradient: 'bg-gradient-to-r from-orange-400 to-pink-500' },
+  { id: 'ocean', gradient: 'bg-gradient-to-r from-blue-400 to-cyan-500' },
+  { id: 'forest', gradient: 'bg-gradient-to-r from-green-400 to-teal-500' },
+  { id: 'purple', gradient: 'bg-gradient-to-r from-purple-500 to-pink-500' },
+];
+
+export default function Profile() {
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const { user, selectedFamily, setSelectedFamily, setUser, preferences, setPreferences, familyMembers, setFamilyMembers } = useStore();
+
+  const [membersLoading, setMembersLoading] = useState(false);
+  const [leavingFamily, setLeavingFamily] = useState(false);
+  const [editingName, setEditingName] = useState(false);
+  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);
+    } finally {
+      setMembersLoading(false);
+    }
+  };
+
+  const handleLeaveFamily = async () => {
+    if (!confirm(t('profile.leaveConfirm'))) return;
+
+    try {
+      setLeavingFamily(true);
+      await userApi.leaveFamily();
+
+      const meResponse = await authApi.me();
+      setUser(meResponse.data);
+      setSelectedFamily(null);
+      setFamilyMembers([]);
+
+      navigate('/');
+    } catch (err) {
+      console.error('Error leaving family:', err);
+      alert(t('profile.leaveError'));
+    } finally {
+      setLeavingFamily(false);
+    }
+  };
+
+  const handleThemeChange = (theme: Theme) => {
+    setPreferences({ theme });
+    document.documentElement.setAttribute('data-theme', theme);
+  };
+
+  const handleLocaleChange = (locale: 'ru' | 'en') => {
+    setPreferences({ locale });
+    i18n.changeLanguage(locale);
+  };
+
+  const handleStartEditName = () => {
+    setNewFamilyName(selectedFamily?.name || '');
+    setEditingName(true);
+  };
+
+  const handleSaveName = async () => {
+    if (!selectedFamily || !newFamilyName.trim()) return;
+
+    try {
+      setSavingName(true);
+      const response = await familyApi.update(selectedFamily.id, { name: newFamilyName.trim() });
+      setSelectedFamily(response.data);
+      setEditingName(false);
+    } catch (err) {
+      console.error('Error updating family name:', err);
+      alert(t('profile.renameError'));
+    } finally {
+      setSavingName(false);
+    }
+  };
+
+  const handleBack = () => {
+    if (user?.family_id) {
+      navigate(`/family/${user.family_id}`);
+    } else {
+      navigate('/');
+    }
+  };
+
+  return (
+    <div className="min-h-screen gradient-bg py-8 sm:py-12 px-4">
+      <div className="max-w-2xl mx-auto">
+        <button
+          onClick={handleBack}
+          className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-2xl backdrop-blur-md mb-6 transition-all duration-300"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          <span className="font-medium">{t('common.back')}</span>
+        </button>
+
+        <div className="text-center mb-8">
+          <div className="inline-flex p-4 bg-white/20 backdrop-blur-md rounded-2xl mb-4">
+            <UserIcon className="w-12 h-12 text-white" />
+          </div>
+          <h1 className="text-4xl font-bold text-white mb-2">{t('profile.title')}</h1>
+        </div>
+
+        <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 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>
+            </div>
+            <div className="space-y-3">
+              <div className="flex justify-between items-center py-2 border-b border-gray-200">
+                <span className="text-gray-600">{t('profile.username')}</span>
+                <span className="font-medium text-gray-900">{user?.username || '-'}</span>
+              </div>
+              <div className="flex justify-between items-center py-2 border-b border-gray-200">
+                <span className="text-gray-600">{t('profile.email')}</span>
+                <span className="font-medium text-gray-900">{user?.email || '-'}</span>
+              </div>
+            </div>
+          </div>
+
+          {selectedFamily && (
+            <div className="glass-effect rounded-2xl shadow-lg p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <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>
+              </div>
+
+              <div className="mb-4">
+                <div className="flex justify-between items-center py-2 border-b border-gray-200">
+                  <span className="text-gray-600">{t('profile.familyName')}</span>
+                  {editingName ? (
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="text"
+                        value={newFamilyName}
+                        onChange={(e) => setNewFamilyName(e.target.value)}
+                        className="px-3 py-1 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-1 focus:ring-purple-200"
+                        autoFocus
+                      />
+                      <button
+                        onClick={handleSaveName}
+                        disabled={savingName}
+                        className="p-1.5 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
+                      >
+                        {savingName ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+                      </button>
+                      <button
+                        onClick={() => setEditingName(false)}
+                        className="p-1.5 bg-gray-200 text-gray-600 rounded-lg hover:bg-gray-300 transition-colors"
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-gray-900">{selectedFamily.name}</span>
+                      <button
+                        onClick={handleStartEditName}
+                        className="p-1.5 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
+                      >
+                        <Edit3 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="mb-2">
+                <h3 className="text-sm font-medium text-gray-600 mb-3">{t('profile.members')}</h3>
+                {membersLoading ? (
+                  <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 ? 'member-current border' : 'bg-gray-50'}`}
+                      >
+                        <div className="flex items-center gap-2">
+                          <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">
+                            {member.username || member.email || t('profile.unknownUser')}
+                          </span>
+                          {member.id === user?.id && (
+                            <span className="text-xs bg-purple-200 text-purple-700 px-2 py-0.5 rounded-full">
+                              {t('profile.you')}
+                            </span>
+                          )}
+                        </div>
+                        {member.is_admin && (
+                          <span className="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full">
+                            Admin
+                          </span>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="glass-effect rounded-2xl shadow-lg p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <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>
+            </div>
+
+            <div className="space-y-6">
+              <div>
+                <div className="flex items-center gap-2 mb-3">
+                  <Languages className="w-4 h-4 text-gray-600" />
+                  <h3 className="text-sm font-medium text-gray-600">{t('profile.language')}</h3>
+                </div>
+                <div className="flex gap-3">
+                  <button
+                    onClick={() => handleLocaleChange('ru')}
+                    className={`flex-1 py-3 px-4 rounded-xl font-medium transition-all ${
+                      preferences.locale === 'ru'
+                        ? 'btn-primary text-white shadow-lg'
+                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                    }`}
+                  >
+                    <span className="mr-2">🇷🇺</span>
+                    Русский
+                    {preferences.locale === 'ru' && <Check className="w-4 h-4 inline ml-2" />}
+                  </button>
+                  <button
+                    onClick={() => handleLocaleChange('en')}
+                    className={`flex-1 py-3 px-4 rounded-xl font-medium transition-all ${
+                      preferences.locale === 'en'
+                        ? 'btn-primary text-white shadow-lg'
+                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                    }`}
+                  >
+                    <span className="mr-2">🇬🇧</span>
+                    English
+                    {preferences.locale === 'en' && <Check className="w-4 h-4 inline ml-2" />}
+                  </button>
+                </div>
+              </div>
+
+              <div>
+                <div className="flex items-center gap-2 mb-3">
+                  <Palette className="w-4 h-4 text-gray-600" />
+                  <h3 className="text-sm font-medium text-gray-600">{t('profile.theme')}</h3>
+                </div>
+                <div className="grid grid-cols-3 gap-3">
+                  {THEMES.map((theme) => (
+                    <button
+                      key={theme.id}
+                      onClick={() => handleThemeChange(theme.id)}
+                      className={`relative p-1 rounded-xl transition-all ${
+                        preferences.theme === theme.id
+                          ? 'ring-2 ring-purple-500 ring-offset-2'
+                          : 'hover:scale-105'
+                      }`}
+                    >
+                      <div className={`h-12 rounded-lg ${theme.gradient}`} />
+                      <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" />
+                        </div>
+                      )}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {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 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>
+              </div>
+
+              <p className="text-gray-600 mb-4">{t('profile.leaveDescription')}</p>
+
+              <button
+                onClick={handleLeaveFamily}
+                disabled={leavingFamily}
+                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 ? (
+                  <>
+                    <Loader2 className="w-5 h-5 animate-spin" />
+                    {t('profile.leaving')}
+                  </>
+                ) : (
+                  <>
+                    <LogOut className="w-5 h-5" />
+                    {t('profile.leaveFamily')}
+                  </>
+                )}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/store/useStore.ts

@@ -1,26 +1,45 @@
 import { create } from 'zustand';
-import type { Family, Category } from '../types';
+import type { Family, Category, User, FamilyMember, Theme, Locale } from '../types';
+
+const getStoredPreferences = () => {
+  const theme = (localStorage.getItem('theme') as Theme) || 'light';
+  const locale = (localStorage.getItem('locale') as Locale) || 'ru';
+  return { theme, locale };
+};
 
 interface AppState {
-  isAdmin: boolean;
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
   selectedFamily: Family | null;
   families: Family[];
   categories: Category[];
+  familyMembers: FamilyMember[];
+  preferences: { theme: Theme; locale: Locale };
 
-  setIsAdmin: (isAdmin: boolean) => void;
+  setUser: (user: User | null) => void;
+  setIsLoading: (loading: boolean) => void;
   setSelectedFamily: (family: Family | null) => void;
   setFamilies: (families: Family[]) => void;
   setCategories: (categories: Category[]) => void;
+  setFamilyMembers: (members: FamilyMember[]) => void;
+  setPreferences: (prefs: Partial<{ theme: Theme; locale: Locale }>) => void;
   logout: () => void;
 }
 
 export const useStore = create<AppState>((set) => ({
-  isAdmin: false,
+  user: null,
+  isAuthenticated: false,
+  isLoading: true,
   selectedFamily: null,
   families: [],
   categories: [],
+  familyMembers: [],
+  preferences: getStoredPreferences(),
 
-  setIsAdmin: (isAdmin) => set({ isAdmin }),
+  setUser: (user) => set({ user, isAuthenticated: !!user }),
+
+  setIsLoading: (isLoading) => set({ isLoading }),
 
   setSelectedFamily: (family) => set({ selectedFamily: family }),
 
@@ -28,10 +47,21 @@ export const useStore = create<AppState>((set) => ({
 
   setCategories: (categories) => set({ categories }),
 
+  setFamilyMembers: (familyMembers) => set({ familyMembers }),
+
+  setPreferences: (prefs) => set((state) => {
+    const newPrefs = { ...state.preferences, ...prefs };
+    if (prefs.theme) localStorage.setItem('theme', prefs.theme);
+    if (prefs.locale) localStorage.setItem('locale', prefs.locale);
+    return { preferences: newPrefs };
+  }),
+
   logout: () => set({
-    isAdmin: false,
+    user: null,
+    isAuthenticated: false,
     selectedFamily: null,
     families: [],
-    categories: []
+    categories: [],
+    familyMembers: [],
   }),
 }));

frontend/src/types/index.ts

@@ -3,6 +3,18 @@ export interface Family {
   name: string;
 }
 
+export interface User {
+  id: number;
+  username: string | null;
+  email: string | null;
+  is_admin: boolean;
+  family_id: number | null;
+}
+
+export interface OAuthUrlResponse {
+  url: string;
+}
+
 export interface Category {
   id: number;
   family_id: number;
@@ -17,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 {
@@ -39,6 +63,17 @@ export interface CreateFamilyRequest {
   password: string;
 }
 
+export interface CreateMyFamilyRequest {
+  name: string;
+  password?: string;
+}
+
+export interface CreateMyFamilyResponse {
+  family: Family;
+  user_id: number;
+  family_id: number;
+}
+
 export interface VerifyFamilyPasswordRequest {
   password: string;
 }
@@ -80,3 +115,49 @@ export interface MarkAsPurchasedRequest {
 export interface BulkOperationResponse {
   affected_rows: number;
 }
+
+export interface CreateInviteLinkRequest {
+  expires_in_hours?: number;
+  max_uses?: number;
+}
+
+export interface InviteLinkResponse {
+  id: number;
+  family_id: number;
+  token: string;
+  invite_url: string;
+  expires_at: string | null;
+  max_uses: number | null;
+  uses_count: number;
+}
+
+export interface ValidateInviteResponse {
+  valid: boolean;
+  family_id: number | null;
+  family_name: string | null;
+}
+
+export interface JoinFamilyResponse {
+  success: boolean;
+  family_id: number;
+  message: string;
+}
+
+export type Theme = 'light' | 'dark' | 'sunset' | 'ocean' | 'forest' | 'purple';
+export type Locale = 'ru' | 'en';
+
+export interface FamilyMember {
+  id: number;
+  username: string | null;
+  email: string | null;
+  is_admin: boolean;
+}
+
+export interface UserPreferences {
+  theme: Theme;
+  locale: Locale;
+}
+
+export interface LeaveFamilyResponse {
+  family_deleted: boolean;
+}