From 1de2e6484e6f415f0246e1c007e168a01a28e0c6 Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:18:33 -0500
Subject: [PATCH 01/13] feat(backend): add change username, password, and clear
 data endpoints

---
 backend/src/handlers/auth.rs | 152 +++++++++++++++++++++++++++++++++++
 1 file changed, 152 insertions(+)

diff --git a/backend/src/handlers/auth.rs b/backend/src/handlers/auth.rs
index 428c960..a624013 100644
--- a/backend/src/handlers/auth.rs
+++ b/backend/src/handlers/auth.rs
@@ -207,3 +207,155 @@ pub async fn export_db(
         data,
     ))
 }
+
+#[derive(Deserialize, ToSchema, Validate)]
+pub struct ChangeUsernameRequest {
+    #[validate(length(min = 3, max = 32))]
+    pub new_username: String,
+}
+
+#[utoipa::path(
+    put,
+    path = "/api/auth/change-username",
+    request_body = ChangeUsernameRequest,
+    responses(
+        (status = 200, description = "Username changed successfully", body = AuthResponse),
+        (status = 409, description = "Username already exists"),
+        (status = 500, description = "Internal server error")
+    ),
+    tag = "Auth",
+    summary = "Change username",
+    description = "Updates the authenticated user's username."
+)]
+pub async fn change_username(
+    State(pool): State<SqlitePool>,
+    axum::Extension(claims): axum::Extension<Claims>,
+    Json(payload): Json<ChangeUsernameRequest>,
+) -> Result<Json<AuthResponse>, PaymeError> {
+    payload.validate()?;
+
+    sqlx::query("UPDATE users SET username = ? WHERE id = ?")
+        .bind(&payload.new_username)
+        .bind(claims.sub)
+        .execute(&pool)
+        .await?;
+
+    Ok(Json(AuthResponse {
+        id: claims.sub,
+        username: payload.new_username,
+    }))
+}
+
+#[derive(Deserialize, ToSchema, Validate)]
+pub struct ChangePasswordRequest {
+    #[validate(length(min = 6, max = 128))]
+    pub current_password: String,
+    #[validate(length(min = 6, max = 128))]
+    pub new_password: String,
+}
+
+#[utoipa::path(
+    put,
+    path = "/api/auth/change-password",
+    request_body = ChangePasswordRequest,
+    responses(
+        (status = 200, description = "Password changed successfully"),
+        (status = 401, description = "Invalid current password"),
+        (status = 500, description = "Internal server error")
+    ),
+    tag = "Auth",
+    summary = "Change password",
+    description = "Updates the authenticated user's password."
+)]
+pub async fn change_password(
+    State(pool): State<SqlitePool>,
+    axum::Extension(claims): axum::Extension<Claims>,
+    Json(payload): Json<ChangePasswordRequest>,
+) -> Result<impl IntoResponse, PaymeError> {
+    payload.validate()?;
+
+    let user: (String,) = sqlx::query_as("SELECT password_hash FROM users WHERE id = ?")
+        .bind(claims.sub)
+        .fetch_optional(&pool)
+        .await?
+        .ok_or(PaymeError::NotFound)?;
+
+    let parsed_hash =
+        PasswordHash::new(&user.0).map_err(|e| PaymeError::Internal(e.to_string()))?;
+    Argon2::default()
+        .verify_password(payload.current_password.as_bytes(), &parsed_hash)
+        .map_err(|_| PaymeError::Unauthorized)?;
+
+    let salt = SaltString::generate(&mut OsRng);
+    let argon2 = Argon2::default();
+    let new_password_hash = argon2
+        .hash_password(payload.new_password.as_bytes(), &salt)
+        .map_err(|e| PaymeError::Internal(e.to_string()))?
+        .to_string();
+
+    sqlx::query("UPDATE users SET password_hash = ? WHERE id = ?")
+        .bind(&new_password_hash)
+        .bind(claims.sub)
+        .execute(&pool)
+        .await?;
+
+    Ok(Json(
+        serde_json::json!({"message": "Password changed successfully"}),
+    ))
+}
+
+#[derive(Deserialize, ToSchema, Validate)]
+pub struct ClearDataRequest {
+    #[validate(length(min = 6, max = 128))]
+    pub password: String,
+}
+
+#[utoipa::path(
+    delete,
+    path = "/api/auth/clear-data",
+    request_body = ClearDataRequest,
+    responses(
+        (status = 200, description = "All data cleared successfully"),
+        (status = 401, description = "Invalid password"),
+        (status = 500, description = "Internal server error")
+    ),
+    tag = "Auth",
+    summary = "Clear all user data",
+    description = "Deletes all data associated with the authenticated user."
+)]
+pub async fn clear_all_data(
+    State(pool): State<SqlitePool>,
+    jar: CookieJar,
+    axum::Extension(claims): axum::Extension<Claims>,
+    Json(payload): Json<ClearDataRequest>,
+) -> Result<impl IntoResponse, PaymeError> {
+    payload.validate()?;
+
+    let user: (String,) = sqlx::query_as("SELECT password_hash FROM users WHERE id = ?")
+        .bind(claims.sub)
+        .fetch_optional(&pool)
+        .await?
+        .ok_or(PaymeError::NotFound)?;
+
+    let parsed_hash =
+        PasswordHash::new(&user.0).map_err(|e| PaymeError::Internal(e.to_string()))?;
+    Argon2::default()
+        .verify_password(payload.password.as_bytes(), &parsed_hash)
+        .map_err(|_| PaymeError::Unauthorized)?;
+
+    sqlx::query("DELETE FROM users WHERE id = ?")
+        .bind(claims.sub)
+        .execute(&pool)
+        .await?;
+
+    let cookie = Cookie::build(("token", ""))
+        .path("/")
+        .http_only(true)
+        .max_age(time::Duration::seconds(0))
+        .build();
+
+    Ok((
+        jar.add(cookie),
+        Json(serde_json::json!({"message": "All data cleared"})),
+    ))
+}

From a422986dde4993d83ed7173ddd4b2708e36d45de Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:18:34 -0500
Subject: [PATCH 02/13] feat(backend): register settings API routes

---
 backend/src/main.rs | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/backend/src/main.rs b/backend/src/main.rs
index 5a25ddb..3e6db22 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -71,6 +71,9 @@ async fn main() {
     let protected_routes = Router::new()
         .route("/api/auth/logout", post(auth::logout))
         .route("/api/auth/me", get(auth::me))
+        .route("/api/auth/change-username", put(auth::change_username))
+        .route("/api/auth/change-password", put(auth::change_password))
+        .route("/api/auth/clear-data", delete(auth::clear_all_data))
         .route("/api/export", get(auth::export_db))
         .route("/api/audit/logs", get(audit_handlers::list_audit_logs))
         .route(

From 7e47bcc389c867bb82742323df78779df84c0f15 Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:18:35 -0500
Subject: [PATCH 03/13] feat(frontend): add settings API client methods

---
 frontend/src/api/client.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index d4c6500..5545c1c 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -38,6 +38,21 @@ export const api = {
       }),
     logout: () => request<void>("/auth/logout", { method: "POST" }),
     me: () => request<{ id: number; username: string }>("/auth/me"),
+    changeUsername: (newUsername: string) =>
+      request<{ id: number; username: string }>("/auth/change-username", {
+        method: "PUT",
+        body: JSON.stringify({ new_username: newUsername }),
+      }),
+    changePassword: (currentPassword: string, newPassword: string) =>
+      request<{ message: string }>("/auth/change-password", {
+        method: "PUT",
+        body: JSON.stringify({ current_password: currentPassword, new_password: newPassword }),
+      }),
+    clearAllData: (password: string) =>
+      request<{ message: string }>("/auth/clear-data", {
+        method: "DELETE",
+        body: JSON.stringify({ password }),
+      }),
   },
 
   months: {

From f48103c33879332d9c9190cbf82c0a1c4dd8ac97 Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:18:35 -0500
Subject: [PATCH 04/13] feat(frontend): add updateUsername to AuthContext

---
 frontend/src/context/AuthContext.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
index 12e81c7..6fef0c1 100644
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -12,6 +12,7 @@ interface AuthContextType {
   login: (username: string, password: string) => Promise<void>;
   register: (username: string, password: string) => Promise<void>;
   logout: () => Promise<void>;
+  updateUsername: (username: string) => void;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -42,14 +43,19 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     try {
       await api.auth.logout();
     } catch {
-      // Logout failed, ignore
     } finally {
       setUser(null);
     }
   };
 
+  const updateUsername = (username: string) => {
+    if (user) {
+      setUser({ ...user, username });
+    }
+  };
+
   return (
-    <AuthContext.Provider value={{ user, loading, login, register, logout }}>
+    <AuthContext.Provider value={{ user, loading, login, register, logout, updateUsername }}>
       {children}
     </AuthContext.Provider>
   );

From 30ae85d2ebdcc59841b834d26dbf0f505d9f09e5 Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:18:36 -0500
Subject: [PATCH 05/13] feat(frontend): add Settings page component

---
 frontend/src/pages/Settings.tsx | 252 ++++++++++++++++++++++++++++++++
 1 file changed, 252 insertions(+)
 create mode 100644 frontend/src/pages/Settings.tsx

diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
new file mode 100644
index 0000000..e4a90d2
--- /dev/null
+++ b/frontend/src/pages/Settings.tsx
@@ -0,0 +1,252 @@
+import { useState } from "react";
+import { Layout } from "../components/Layout";
+import { Button } from "../components/ui/Button";
+import { Input } from "../components/ui/Input";
+import { Modal } from "../components/ui/Modal";
+import { useAuth } from "../context/AuthContext";
+import { api } from "../api/client";
+import { ArrowLeft } from "lucide-react";
+
+interface SettingsProps {
+  onBack: () => void;
+}
+
+export function Settings({ onBack }: SettingsProps) {
+  const { user, logout, updateUsername } = useAuth();
+  const [newUsername, setNewUsername] = useState(user?.username || "");
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [deletePassword, setDeletePassword] = useState("");
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [usernameLoading, setUsernameLoading] = useState(false);
+  const [passwordLoading, setPasswordLoading] = useState(false);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+  const [usernameError, setUsernameError] = useState("");
+  const [passwordError, setPasswordError] = useState("");
+  const [deleteError, setDeleteError] = useState("");
+  const [usernameSuccess, setUsernameSuccess] = useState(false);
+  const [passwordSuccess, setPasswordSuccess] = useState(false);
+
+  const handleChangeUsername = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setUsernameError("");
+    setUsernameSuccess(false);
+
+    if (newUsername.length < 3 || newUsername.length > 32) {
+      setUsernameError("Username must be 3-32 characters");
+      return;
+    }
+
+    setUsernameLoading(true);
+    try {
+      const response = await api.auth.changeUsername(newUsername);
+      updateUsername(response.username);
+      setUsernameSuccess(true);
+      setTimeout(() => setUsernameSuccess(false), 3000);
+    } catch (error) {
+      setUsernameError("Failed to change username. It may already be taken.");
+    } finally {
+      setUsernameLoading(false);
+    }
+  };
+
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setPasswordError("");
+    setPasswordSuccess(false);
+
+    if (newPassword.length < 6 || newPassword.length > 128) {
+      setPasswordError("Password must be 6-128 characters");
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setPasswordError("Passwords do not match");
+      return;
+    }
+
+    setPasswordLoading(true);
+    try {
+      await api.auth.changePassword(currentPassword, newPassword);
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+      setPasswordSuccess(true);
+      setTimeout(() => setPasswordSuccess(false), 3000);
+    } catch (error) {
+      setPasswordError("Failed to change password. Check your current password.");
+    } finally {
+      setPasswordLoading(false);
+    }
+  };
+
+  const handleClearData = async () => {
+    setDeleteError("");
+
+    if (deletePassword.length < 6) {
+      setDeleteError("Please enter your password");
+      return;
+    }
+
+    setDeleteLoading(true);
+    try {
+      await api.auth.clearAllData(deletePassword);
+      await logout();
+    } catch (error) {
+      setDeleteError("Failed to clear data. Check your password.");
+      setDeleteLoading(false);
+    }
+  };
+
+  return (
+    <Layout>
+      <div className="max-w-2xl mx-auto">
+        <button
+          onClick={onBack}
+          className="mb-6 flex items-center gap-2 text-sm text-charcoal-600 dark:text-charcoal-400 hover:text-charcoal-900 dark:hover:text-sand-100 transition-colors"
+        >
+          <ArrowLeft size={16} />
+          Back to Dashboard
+        </button>
+
+        <h1 className="text-2xl font-semibold mb-8 text-charcoal-800 dark:text-sand-100">
+          Settings
+        </h1>
+
+        <div className="space-y-8">
+          <div className="bg-sand-100 dark:bg-charcoal-900 p-6 border border-sand-200 dark:border-charcoal-800">
+            <h2 className="text-lg font-medium mb-4 text-charcoal-800 dark:text-sand-100">
+              Change Username
+            </h2>
+            <form onSubmit={handleChangeUsername} className="space-y-4">
+              <Input
+                label="New Username"
+                type="text"
+                value={newUsername}
+                onChange={(e) => setNewUsername(e.target.value)}
+                placeholder="Enter new username"
+                disabled={usernameLoading}
+              />
+              {usernameError && (
+                <p className="text-sm text-terracotta-600">{usernameError}</p>
+              )}
+              {usernameSuccess && (
+                <p className="text-sm text-sage-600">Username changed successfully</p>
+              )}
+              <Button type="submit" disabled={usernameLoading || newUsername === user?.username}>
+                {usernameLoading ? "Saving..." : "Save Username"}
+              </Button>
+            </form>
+          </div>
+
+          <div className="bg-sand-100 dark:bg-charcoal-900 p-6 border border-sand-200 dark:border-charcoal-800">
+            <h2 className="text-lg font-medium mb-4 text-charcoal-800 dark:text-sand-100">
+              Change Password
+            </h2>
+            <form onSubmit={handleChangePassword} className="space-y-4">
+              <Input
+                label="Current Password"
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                placeholder="Enter current password"
+                disabled={passwordLoading}
+              />
+              <Input
+                label="New Password"
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                placeholder="Enter new password"
+                disabled={passwordLoading}
+              />
+              <Input
+                label="Confirm New Password"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder="Confirm new password"
+                disabled={passwordLoading}
+              />
+              {passwordError && (
+                <p className="text-sm text-terracotta-600">{passwordError}</p>
+              )}
+              {passwordSuccess && (
+                <p className="text-sm text-sage-600">Password changed successfully</p>
+              )}
+              <Button type="submit" disabled={passwordLoading}>
+                {passwordLoading ? "Changing..." : "Change Password"}
+              </Button>
+            </form>
+          </div>
+
+          <div className="bg-terracotta-50 dark:bg-charcoal-900 p-6 border-2 border-terracotta-300 dark:border-terracotta-800">
+            <h2 className="text-lg font-medium mb-2 text-terracotta-800 dark:text-terracotta-300">
+              Danger Zone
+            </h2>
+            <p className="text-sm text-charcoal-600 dark:text-charcoal-400 mb-4">
+              This action cannot be undone. All your data will be permanently deleted.
+            </p>
+            <Button variant="danger" onClick={() => setShowDeleteModal(true)}>
+              Clear All Data
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <Modal
+        isOpen={showDeleteModal}
+        onClose={() => {
+          setShowDeleteModal(false);
+          setDeletePassword("");
+          setDeleteError("");
+        }}
+        title="Clear All Data"
+      >
+        <div className="space-y-4">
+          <p className="text-sm text-charcoal-600 dark:text-charcoal-300">
+            This will permanently delete all your data including:
+          </p>
+          <ul className="text-sm text-charcoal-600 dark:text-charcoal-300 list-disc list-inside space-y-1">
+            <li>All months and transactions</li>
+            <li>All budget categories</li>
+            <li>All fixed expenses</li>
+            <li>All income entries</li>
+            <li>Your account and settings</li>
+          </ul>
+          <p className="text-sm font-medium text-terracotta-700 dark:text-terracotta-400">
+            This action cannot be undone.
+          </p>
+          <Input
+            label="Confirm your password"
+            type="password"
+            value={deletePassword}
+            onChange={(e) => setDeletePassword(e.target.value)}
+            placeholder="Enter your password"
+            disabled={deleteLoading}
+          />
+          {deleteError && (
+            <p className="text-sm text-terracotta-600">{deleteError}</p>
+          )}
+          <div className="flex gap-2">
+            <Button variant="danger" onClick={handleClearData} disabled={deleteLoading}>
+              {deleteLoading ? "Deleting..." : "Yes, Delete Everything"}
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={() => {
+                setShowDeleteModal(false);
+                setDeletePassword("");
+                setDeleteError("");
+              }}
+              disabled={deleteLoading}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </Layout>
+  );
+}

From 48b72268a36a5f98b75653fac7184a8103e2d143 Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:18:36 -0500
Subject: [PATCH 06/13] feat(frontend): add settings gear icon to Layout header

---
 frontend/src/components/Layout.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index ac552a4..5845592 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useRef, useState } from "react";
-import { Moon, Sun, LogOut, Download, Upload } from "lucide-react";
+import { Moon, Sun, LogOut, Download, Upload, Settings } from "lucide-react";
 import { useTheme } from "../context/ThemeContext";
 import { useAuth } from "../context/AuthContext";
 import { api, UserExport } from "../api/client";
@@ -8,9 +8,10 @@ import { Button } from "./ui/Button";
 
 interface LayoutProps {
   children: ReactNode;
+  onSettingsClick?: () => void;
 }
 
-export function Layout({ children }: LayoutProps) {
+export function Layout({ children, onSettingsClick }: LayoutProps) {
   const { isDark, toggle } = useTheme();
   const { user, logout } = useAuth();
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -112,6 +113,15 @@ export function Layout({ children }: LayoutProps) {
             >
               {isDark ? <Sun size={18} /> : <Moon size={18} />}
             </button>
+            {user && onSettingsClick && (
+              <button
+                onClick={onSettingsClick}
+                className="p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 transition-colors cursor-pointer"
+                title="Settings"
+              >
+                <Settings size={18} />
+              </button>
+            )}
             {user && (
               <button
                 onClick={logout}

From dfefdd7ee7c36f7c032aac8eb7a5fb80bffb50c1 Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:18:37 -0500
Subject: [PATCH 07/13] feat(frontend): integrate settings page navigation

---
 frontend/src/App.tsx             |  8 +++++++-
 frontend/src/pages/Dashboard.tsx | 12 ++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cacfd90..304dd46 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,11 +3,13 @@ import { useAuth } from "./context/AuthContext";
 import { Login } from "./pages/Login";
 import { Register } from "./pages/Register";
 import { Dashboard } from "./pages/Dashboard";
+import { Settings } from "./pages/Settings";
 import { Loader2 } from "lucide-react";
 
 export default function App() {
   const { user, loading } = useAuth();
   const [showRegister, setShowRegister] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
 
   if (loading) {
     return (
@@ -25,6 +27,10 @@ export default function App() {
     );
   }
 
-  return <Dashboard />;
+  if (showSettings) {
+    return <Settings onBack={() => setShowSettings(false)} />;
+  }
+
+  return <Dashboard onSettingsClick={() => setShowSettings(true)} />;
 }
 
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 93dfc01..7ddb0e7 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -14,7 +14,11 @@ import { Stats } from "../components/Stats";
 import { useMonth } from "../hooks/useMonth";
 import { Loader2 } from "lucide-react";
 
-export function Dashboard() {
+interface DashboardProps {
+  onSettingsClick: () => void;
+}
+
+export function Dashboard({ onSettingsClick }: DashboardProps) {
   const [savings, setSavings] = useState(0);
   const [showVarianceModal, setShowVarianceModal] = useState(false);
   const {
@@ -35,7 +39,7 @@ export function Dashboard() {
 
   if (loading && !summary) {
     return (
-      <Layout>
+      <Layout onSettingsClick={onSettingsClick}>
         <div className="flex items-center justify-center py-20">
           <Loader2 size={24} className="animate-spin text-charcoal-400" />
         </div>
@@ -45,7 +49,7 @@ export function Dashboard() {
 
   if (!summary) {
     return (
-      <Layout>
+      <Layout onSettingsClick={onSettingsClick}>
         <div className="text-center py-20 text-charcoal-500">
           Unable to load data
         </div>
@@ -56,7 +60,7 @@ export function Dashboard() {
   const isReadOnly = summary.month.is_closed;
 
   return (
-    <Layout>
+    <Layout onSettingsClick={onSettingsClick}>
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-4">
           <MonthNav

From 5c59c3c6bd6ac8dd7a0a7a0f2eef6a603d19b17c Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:22:36 -0500
Subject: [PATCH 08/13] fix: remove unused error variables and empty catch
 block

---
 frontend/src/context/AuthContext.tsx | 1 -
 frontend/src/pages/Settings.tsx      | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
index 6fef0c1..9ca71a1 100644
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -42,7 +42,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const logout = async () => {
     try {
       await api.auth.logout();
-    } catch {
     } finally {
       setUser(null);
     }
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index e4a90d2..b1eac39 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -44,7 +44,7 @@ export function Settings({ onBack }: SettingsProps) {
       updateUsername(response.username);
       setUsernameSuccess(true);
       setTimeout(() => setUsernameSuccess(false), 3000);
-    } catch (error) {
+    } catch {
       setUsernameError("Failed to change username. It may already be taken.");
     } finally {
       setUsernameLoading(false);
@@ -74,7 +74,7 @@ export function Settings({ onBack }: SettingsProps) {
       setConfirmPassword("");
       setPasswordSuccess(true);
       setTimeout(() => setPasswordSuccess(false), 3000);
-    } catch (error) {
+    } catch {
       setPasswordError("Failed to change password. Check your current password.");
     } finally {
       setPasswordLoading(false);
@@ -93,7 +93,7 @@ export function Settings({ onBack }: SettingsProps) {
     try {
       await api.auth.clearAllData(deletePassword);
       await logout();
-    } catch (error) {
+    } catch {
       setDeleteError("Failed to clear data. Check your password.");
       setDeleteLoading(false);
     }

From 157d63f628ee32263014a34e5158e43c7b2c586b Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:28:35 -0500
Subject: [PATCH 09/13] feat(mobile): make Layout header responsive with hidden
 username

---
 frontend/src/components/Layout.tsx | 31 +++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 5845592..84beb86 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -72,16 +72,16 @@ export function Layout({ children, onSettingsClick }: LayoutProps) {
   return (
     <div className="min-h-screen">
       <header className="sticky top-0 z-40 bg-sand-50/80 dark:bg-charcoal-950/80 backdrop-blur-md border-b border-sand-200 dark:border-charcoal-800">
-        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
-          <span className="text-xl font-semibold tracking-tight text-charcoal-800 dark:text-sand-100">
+        <div className="max-w-6xl mx-auto px-4 py-3 sm:py-4 flex items-center justify-between">
+          <span className="text-lg sm:text-xl font-semibold tracking-tight text-charcoal-800 dark:text-sand-100">
             payme
           </span>
           {user && (
-            <span className="text-sm text-charcoal-600 dark:text-charcoal-300">
+            <span className="hidden sm:inline text-sm text-charcoal-600 dark:text-charcoal-300">
               Welcome, {user.username}
             </span>
           )}
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1 sm:gap-2">
             {user && (
               <>
                 <input
@@ -93,15 +93,17 @@ export function Layout({ children, onSettingsClick }: LayoutProps) {
                 />
                 <button
                   onClick={handleImportClick}
-                  className="p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 transition-colors cursor-pointer"
+                  className="p-2 sm:p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 transition-colors cursor-pointer touch-manipulation"
                   title="Import data"
+                  aria-label="Import data"
                 >
                   <Upload size={18} />
                 </button>
                 <button
                   onClick={handleExport}
-                  className="p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 transition-colors cursor-pointer"
+                  className="p-2 sm:p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 transition-colors cursor-pointer touch-manipulation"
                   title="Export data"
+                  aria-label="Export data"
                 >
                   <Download size={18} />
                 </button>
@@ -109,15 +111,17 @@ export function Layout({ children, onSettingsClick }: LayoutProps) {
             )}
             <button
               onClick={toggle}
-              className="p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 transition-colors cursor-pointer"
+              className="p-2 sm:p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 transition-colors cursor-pointer touch-manipulation"
+              aria-label="Toggle theme"
             >
               {isDark ? <Sun size={18} /> : <Moon size={18} />}
             </button>
             {user && onSettingsClick && (
               <button
                 onClick={onSettingsClick}
-                className="p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 transition-colors cursor-pointer"
+                className="p-2 sm:p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 transition-colors cursor-pointer touch-manipulation"
                 title="Settings"
+                aria-label="Settings"
               >
                 <Settings size={18} />
               </button>
@@ -125,7 +129,8 @@ export function Layout({ children, onSettingsClick }: LayoutProps) {
             {user && (
               <button
                 onClick={logout}
-                className="p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 transition-colors cursor-pointer"
+                className="p-2 sm:p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 transition-colors cursor-pointer touch-manipulation"
+                aria-label="Logout"
               >
                 <LogOut size={18} />
               </button>
@@ -133,7 +138,7 @@ export function Layout({ children, onSettingsClick }: LayoutProps) {
           </div>
         </div>
       </header>
-      <main className="max-w-6xl mx-auto px-4 py-8">{children}</main>
+      <main className="max-w-6xl mx-auto px-4 py-4 sm:py-8">{children}</main>
 
       <Modal isOpen={showImportConfirm} onClose={() => setShowImportConfirm(false)} title="Import Data">
         <div className="space-y-4">
@@ -147,11 +152,11 @@ export function Layout({ children, onSettingsClick }: LayoutProps) {
               <div>{pendingImport.months.length} months</div>
             </div>
           )}
-          <div className="flex gap-2">
-            <Button onClick={confirmImport} disabled={importing}>
+          <div className="flex flex-col sm:flex-row gap-2">
+            <Button onClick={confirmImport} disabled={importing} className="w-full sm:w-auto">
               {importing ? "Importing..." : "Replace My Data"}
             </Button>
-            <Button variant="ghost" onClick={() => setShowImportConfirm(false)}>
+            <Button variant="ghost" onClick={() => setShowImportConfirm(false)} className="w-full sm:w-auto">
               Cancel
             </Button>
           </div>

From b2c95229ac51004cfcc28dacdb100a0bb7f25886 Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:28:36 -0500
Subject: [PATCH 10/13] feat(mobile): optimize Settings page for mobile devices

---
 frontend/src/pages/Settings.tsx | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index b1eac39..2919f6a 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -104,19 +104,19 @@ export function Settings({ onBack }: SettingsProps) {
       <div className="max-w-2xl mx-auto">
         <button
           onClick={onBack}
-          className="mb-6 flex items-center gap-2 text-sm text-charcoal-600 dark:text-charcoal-400 hover:text-charcoal-900 dark:hover:text-sand-100 transition-colors"
+          className="mb-4 sm:mb-6 flex items-center gap-2 text-sm text-charcoal-600 dark:text-charcoal-400 hover:text-charcoal-900 dark:hover:text-sand-100 transition-colors touch-manipulation"
         >
           <ArrowLeft size={16} />
           Back to Dashboard
         </button>
 
-        <h1 className="text-2xl font-semibold mb-8 text-charcoal-800 dark:text-sand-100">
+        <h1 className="text-xl sm:text-2xl font-semibold mb-6 sm:mb-8 text-charcoal-800 dark:text-sand-100">
           Settings
         </h1>
 
-        <div className="space-y-8">
-          <div className="bg-sand-100 dark:bg-charcoal-900 p-6 border border-sand-200 dark:border-charcoal-800">
-            <h2 className="text-lg font-medium mb-4 text-charcoal-800 dark:text-sand-100">
+        <div className="space-y-6 sm:space-y-8">
+          <div className="bg-sand-100 dark:bg-charcoal-900 p-4 sm:p-6 border border-sand-200 dark:border-charcoal-800">
+            <h2 className="text-base sm:text-lg font-medium mb-4 text-charcoal-800 dark:text-sand-100">
               Change Username
             </h2>
             <form onSubmit={handleChangeUsername} className="space-y-4">
@@ -140,8 +140,8 @@ export function Settings({ onBack }: SettingsProps) {
             </form>
           </div>
 
-          <div className="bg-sand-100 dark:bg-charcoal-900 p-6 border border-sand-200 dark:border-charcoal-800">
-            <h2 className="text-lg font-medium mb-4 text-charcoal-800 dark:text-sand-100">
+          <div className="bg-sand-100 dark:bg-charcoal-900 p-4 sm:p-6 border border-sand-200 dark:border-charcoal-800">
+            <h2 className="text-base sm:text-lg font-medium mb-4 text-charcoal-800 dark:text-sand-100">
               Change Password
             </h2>
             <form onSubmit={handleChangePassword} className="space-y-4">
@@ -181,8 +181,8 @@ export function Settings({ onBack }: SettingsProps) {
             </form>
           </div>
 
-          <div className="bg-terracotta-50 dark:bg-charcoal-900 p-6 border-2 border-terracotta-300 dark:border-terracotta-800">
-            <h2 className="text-lg font-medium mb-2 text-terracotta-800 dark:text-terracotta-300">
+          <div className="bg-terracotta-50 dark:bg-charcoal-900 p-4 sm:p-6 border-2 border-terracotta-300 dark:border-terracotta-800">
+            <h2 className="text-base sm:text-lg font-medium mb-2 text-terracotta-800 dark:text-terracotta-300">
               Danger Zone
             </h2>
             <p className="text-sm text-charcoal-600 dark:text-charcoal-400 mb-4">
@@ -229,8 +229,8 @@ export function Settings({ onBack }: SettingsProps) {
           {deleteError && (
             <p className="text-sm text-terracotta-600">{deleteError}</p>
           )}
-          <div className="flex gap-2">
-            <Button variant="danger" onClick={handleClearData} disabled={deleteLoading}>
+          <div className="flex flex-col sm:flex-row gap-2">
+            <Button variant="danger" onClick={handleClearData} disabled={deleteLoading} className="w-full sm:w-auto">
               {deleteLoading ? "Deleting..." : "Yes, Delete Everything"}
             </Button>
             <Button
@@ -241,6 +241,7 @@ export function Settings({ onBack }: SettingsProps) {
                 setDeleteError("");
               }}
               disabled={deleteLoading}
+              className="w-full sm:w-auto"
             >
               Cancel
             </Button>

From 173e85146c47990a7f5e4bace5ce3eb75f2485f4 Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:28:37 -0500
Subject: [PATCH 11/13] feat(mobile): make MonthNav responsive with stacked
 layout

---
 frontend/src/components/MonthNav.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/MonthNav.tsx b/frontend/src/components/MonthNav.tsx
index 57e19fc..99d1cdf 100644
--- a/frontend/src/components/MonthNav.tsx
+++ b/frontend/src/components/MonthNav.tsx
@@ -47,17 +47,18 @@ export function MonthNav({
   if (!selectedMonth) return null;
 
   return (
-    <div className="flex items-center justify-between mb-8">
-      <div className="flex items-center gap-4">
+    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 sm:mb-8">
+      <div className="flex items-center gap-2 sm:gap-4">
         <button
           onClick={goPrev}
           disabled={currentIndex >= months.length - 1}
-          className="p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 disabled:opacity-30 transition-colors"
+          className="p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 disabled:opacity-30 transition-colors touch-manipulation"
+          aria-label="Previous month"
         >
           <ChevronLeft size={20} />
         </button>
         <div className="text-center">
-          <div className="text-2xl font-semibold text-charcoal-900 dark:text-sand-50">
+          <div className="text-xl sm:text-2xl font-semibold text-charcoal-900 dark:text-sand-50">
             {MONTH_NAMES[selectedMonth.month - 1]} {selectedMonth.year}
           </div>
           <div className="text-xs text-charcoal-500 dark:text-charcoal-400 flex items-center justify-center gap-1">
@@ -74,21 +75,22 @@ export function MonthNav({
         <button
           onClick={goNext}
           disabled={currentIndex <= 0}
-          className="p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 disabled:opacity-30 transition-colors"
+          className="p-2 hover:bg-sand-200 dark:hover:bg-charcoal-800 disabled:opacity-30 transition-colors touch-manipulation"
+          aria-label="Next month"
         >
           <ChevronRight size={20} />
         </button>
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 w-full sm:w-auto">
         {selectedMonth.is_closed && (
-          <Button variant="ghost" size="sm" onClick={onDownloadPdf}>
+          <Button variant="ghost" size="sm" onClick={onDownloadPdf} className="flex-1 sm:flex-none">
             <FileDown size={16} className="mr-2" />
             PDF
           </Button>
         )}
         {canClose && (
-          <Button variant="primary" size="sm" onClick={onClose}>
+          <Button variant="primary" size="sm" onClick={onClose} className="flex-1 sm:flex-none">
             Close Month
           </Button>
         )}

From 257e0d886b4716539554b29b94e2cc37cc1c0442 Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:28:39 -0500
Subject: [PATCH 12/13] feat(mobile): restructure Dashboard controls for mobile

---
 frontend/src/pages/Dashboard.tsx | 40 ++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 7ddb0e7..def0566 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -61,27 +61,31 @@ export function Dashboard({ onSettingsClick }: DashboardProps) {
 
   return (
     <Layout onSettingsClick={onSettingsClick}>
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-4">
-          <MonthNav
-            months={months}
-            selectedMonthId={selectedMonthId}
-            onSelect={selectMonth}
-            onClose={closeMonth}
-            onDownloadPdf={downloadPdf}
-          />
-          <div className="w-36">
-            <SavingsCard onSavingsChange={handleSavingsChange} />
+      <div className="space-y-4 mb-4">
+        <MonthNav
+          months={months}
+          selectedMonthId={selectedMonthId}
+          onSelect={selectMonth}
+          onClose={closeMonth}
+          onDownloadPdf={downloadPdf}
+        />
+        <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4">
+          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 w-full sm:w-auto">
+            <div className="w-full sm:w-36">
+              <SavingsCard onSavingsChange={handleSavingsChange} />
+            </div>
+            <div className="w-full sm:w-36">
+              <ProjectedSavingsCard
+                savings={savings}
+                remaining={summary.remaining}
+                onAnalyzeClick={() => setShowVarianceModal(true)}
+              />
+            </div>
           </div>
-          <div className="w-36">
-            <ProjectedSavingsCard
-              savings={savings}
-              remaining={summary.remaining}
-              onAnalyzeClick={() => setShowVarianceModal(true)}
-            />
+          <div className="hidden lg:block">
+            <Stats />
           </div>
         </div>
-        <Stats />
       </div>
 
       <div className="space-y-6">

From a773954a6e46cead739a7e800eae9cda5e1f3f98 Mon Sep 17 00:00:00 2001
From: Akrm Al-Hakimi <alhakimiakrmj@gmail.com>
Date: Wed, 14 Jan 2026 19:28:40 -0500
Subject: [PATCH 13/13] feat(mobile): adjust Summary component spacing and
 sizing

---
 frontend/src/components/Summary.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index f5f0fa9..62b16ae 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -52,20 +52,20 @@ export function Summary({ totalIncome, totalFixed, totalSpent, remaining, extraC
           <div className="text-xs text-charcoal-500 dark:text-charcoal-400 mb-1">
             {item.label}
           </div>
-          <div className={`text-xl font-semibold ${item.color}`}>
+          <div className={`text-lg sm:text-xl font-semibold ${item.color}`}>
             ${Math.abs(item.value).toFixed(2)}
             {item.label === "Remaining" && item.value < 0 && (
               <span className="text-xs ml-1">deficit</span>
             )}
           </div>
         </div>
-        <item.icon size={20} className={item.color} />
+        <item.icon size={18} className={`${item.color} sm:w-5 sm:h-5`} />
       </div>
     </Card>
   );
 
   return (
-    <div className={`grid grid-cols-2 gap-4 ${extraCard ? "lg:grid-cols-5" : "lg:grid-cols-4"}`}>
+    <div className={`grid grid-cols-2 gap-3 sm:gap-4 ${extraCard ? "lg:grid-cols-5" : "lg:grid-cols-4"}`}>
       {items.map(renderCard)}
       {extraCard}
       {itemsAfter.map(renderCard)}