feat: frontend core — auth, layout, transactions, categories

backend/app/auth/router.py

@@ -127,6 +127,11 @@ async def refresh_token(
     return TokenRefresh(access_token=new_access_token, token_type="bearer")
 
 
+@router.get("/me", response_model=UserResponse)
+async def get_me(current_user: User = Depends(get_current_user)) -> UserResponse:
+    return UserResponse.model_validate(current_user)
+
+
 @router.post("/logout", status_code=status.HTTP_204_NO_CONTENT)
 async def logout(
     data: TokenRefreshRequest,

frontend/src/api/client.ts

@@ -1,8 +1,228 @@
-import axios from "axios";
+import axios, {
+  type InternalAxiosRequestConfig,
+  type AxiosResponse,
+} from "axios";
+import type {
+  AuthTokens,
+  User,
+  Transaction,
+  Category,
+  PaginatedResponse,
+  TransactionFilters,
+  CreateTransactionPayload,
+  UpdateTransactionPayload,
+  CreateCategoryPayload,
+  UpdateCategoryPayload,
+} from "./types";
 
+// ---------------------------------------------------------------------------
+// Module-level token state (no circular dependency with auth store)
+// ---------------------------------------------------------------------------
+let _accessToken: string | null = null;
+let _refreshToken: string | null = null;
+let _onAuthFailed: (() => void) | null = null;
+
+export function setClientTokens(
+  access: string | null,
+  refresh: string | null,
+): void {
+  _accessToken = access;
+  _refreshToken = refresh;
+}
+
+export function setOnAuthFailed(cb: () => void): void {
+  _onAuthFailed = cb;
+}
+
+// ---------------------------------------------------------------------------
+// Axios instance
+// ---------------------------------------------------------------------------
 export const apiClient = axios.create({
-  baseURL: "/api",
+  baseURL: "/api/v1",
-  headers: {
+  headers: { "Content-Type": "application/json" },
-    "Content-Type": "application/json",
-  },
 });
+
+// Request interceptor — attach Bearer token
+apiClient.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+  if (_accessToken) {
+    config.headers.Authorization = `Bearer ${_accessToken}`;
+  }
+  return config;
+});
+
+// ---------------------------------------------------------------------------
+// Response interceptor — silent token refresh on 401
+// ---------------------------------------------------------------------------
+let isRefreshing = false;
+let failedQueue: Array<{
+  resolve: (token: string) => void;
+  reject: (err: unknown) => void;
+}> = [];
+
+function processQueue(error: unknown, token: string | null): void {
+  failedQueue.forEach((p) => {
+    if (error) p.reject(error);
+    else if (token) p.resolve(token);
+  });
+  failedQueue = [];
+}
+
+apiClient.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  async (error: unknown) => {
+    if (!axios.isAxiosError(error)) return Promise.reject(error);
+
+    const config = error.config;
+    const status = error.response?.status;
+
+    if (status !== 401 || !config) return Promise.reject(error);
+
+    // Don't retry auth endpoints
+    if (
+      config.url?.includes("/auth/refresh") ||
+      config.url?.includes("/auth/login")
+    ) {
+      return Promise.reject(error);
+    }
+
+    if (isRefreshing) {
+      return new Promise<string>((resolve, reject) => {
+        failedQueue.push({ resolve, reject });
+      }).then((token) => {
+        config.headers.Authorization = `Bearer ${token}`;
+        return apiClient(config);
+      });
+    }
+
+    isRefreshing = true;
+    try {
+      const rt = _refreshToken;
+      if (!rt) throw new Error("No refresh token");
+
+      const { data } = await axios.post<{ access_token: string }>(
+        "/api/v1/auth/refresh",
+        { refresh_token: rt },
+      );
+
+      _accessToken = data.access_token;
+      processQueue(null, data.access_token);
+      config.headers.Authorization = `Bearer ${data.access_token}`;
+      return apiClient(config);
+    } catch (refreshError) {
+      processQueue(refreshError, null);
+      _accessToken = null;
+      _refreshToken = null;
+      _onAuthFailed?.();
+      return Promise.reject(refreshError);
+    } finally {
+      isRefreshing = false;
+    }
+  },
+);
+
+// ---------------------------------------------------------------------------
+// Auth API
+// ---------------------------------------------------------------------------
+export async function loginUser(
+  email: string,
+  password: string,
+): Promise<AuthTokens> {
+  const params = new URLSearchParams();
+  params.append("username", email);
+  params.append("password", password);
+  const { data } = await apiClient.post<AuthTokens>("/auth/login", params, {
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+  });
+  return data;
+}
+
+export async function registerUser(
+  email: string,
+  password: string,
+  full_name: string,
+): Promise<User> {
+  const { data } = await apiClient.post<User>("/auth/register", {
+    email,
+    password,
+    full_name,
+  });
+  return data;
+}
+
+export async function getMe(): Promise<User> {
+  const { data } = await apiClient.get<User>("/auth/me");
+  return data;
+}
+
+export async function logoutUser(refreshToken: string): Promise<void> {
+  await apiClient.post("/auth/logout", { refresh_token: refreshToken });
+}
+
+// ---------------------------------------------------------------------------
+// Transactions API
+// ---------------------------------------------------------------------------
+export async function getTransactions(
+  filters: TransactionFilters,
+): Promise<PaginatedResponse<Transaction>> {
+  const { data } = await apiClient.get<PaginatedResponse<Transaction>>(
+    "/transactions",
+    { params: filters },
+  );
+  return data;
+}
+
+export async function createTransaction(
+  payload: CreateTransactionPayload,
+): Promise<Transaction> {
+  const { data } = await apiClient.post<Transaction>("/transactions", payload);
+  return data;
+}
+
+export async function updateTransaction(
+  id: string,
+  payload: UpdateTransactionPayload,
+): Promise<Transaction> {
+  const { data } = await apiClient.put<Transaction>(
+    `/transactions/${id}`,
+    payload,
+  );
+  return data;
+}
+
+export async function deleteTransaction(id: string): Promise<void> {
+  await apiClient.delete(`/transactions/${id}`);
+}
+
+// ---------------------------------------------------------------------------
+// Categories API
+// ---------------------------------------------------------------------------
+export async function getCategories(
+  type?: string,
+): Promise<Category[]> {
+  const { data } = await apiClient.get<Category[]>("/categories", {
+    params: type ? { type } : undefined,
+  });
+  return data;
+}
+
+export async function createCategory(
+  payload: CreateCategoryPayload,
+): Promise<Category> {
+  const { data } = await apiClient.post<Category>("/categories", payload);
+  return data;
+}
+
+export async function updateCategory(
+  id: string,
+  payload: UpdateCategoryPayload,
+): Promise<Category> {
+  const { data } = await apiClient.put<Category>(
+    `/categories/${id}`,
+    payload,
+  );
+  return data;
+}
+
+export async function deleteCategory(id: string): Promise<void> {
+  await apiClient.delete(`/categories/${id}`);
+}

frontend/src/api/types.ts

@@ -0,0 +1,84 @@
+export type TransactionType = "income" | "expense";
+export type CategoryType = "income" | "expense" | "both";
+
+export interface User {
+  id: string;
+  email: string;
+  full_name: string;
+}
+
+export interface AuthTokens {
+  access_token: string;
+  refresh_token: string;
+  token_type: string;
+}
+
+export interface CategoryBrief {
+  id: string;
+  name: string;
+  color: string | null;
+}
+
+export interface Transaction {
+  id: string;
+  amount_cents: number;
+  type: TransactionType;
+  description: string | null;
+  category: CategoryBrief;
+  transaction_date: string;
+  created_at: string;
+}
+
+export interface Category {
+  id: string;
+  name: string;
+  type: CategoryType;
+  color: string | null;
+  icon: string | null;
+  is_default: boolean;
+  created_at: string;
+}
+
+export interface PaginatedResponse<T> {
+  items: T[];
+  total: number;
+  page: number;
+  per_page: number;
+}
+
+export interface TransactionFilters {
+  month?: string;
+  category_id?: string;
+  type?: TransactionType;
+  page?: number;
+  per_page?: number;
+}
+
+export interface CreateTransactionPayload {
+  amount_cents: number;
+  type: TransactionType;
+  category_id: string;
+  description?: string;
+  transaction_date: string;
+}
+
+export interface UpdateTransactionPayload {
+  amount_cents?: number;
+  type?: TransactionType;
+  category_id?: string | null;
+  description?: string | null;
+  transaction_date?: string;
+}
+
+export interface CreateCategoryPayload {
+  name: string;
+  type: CategoryType;
+  color?: string;
+  icon?: string;
+}
+
+export interface UpdateCategoryPayload {
+  name?: string;
+  color?: string;
+  icon?: string;
+}

frontend/src/components/CategoryModal.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+import { useCreateCategory, useUpdateCategory } from "../hooks/useCategories";
+import { useToast } from "../context/ToastContext";
+import type { Category, CategoryType } from "../api/types";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  category?: Category;
+}
+
+interface FormState {
+  name: string;
+  type: CategoryType;
+  color: string;
+  icon: string;
+}
+
+const DEFAULT_FORM: FormState = {
+  name: "",
+  type: "expense",
+  color: "#6366f1",
+  icon: "",
+};
+
+export default function CategoryModal({ isOpen, onClose, category }: Props) {
+  const createMutation = useCreateCategory();
+  const updateMutation = useUpdateCategory();
+  const { addToast } = useToast();
+
+  const [form, setForm] = useState<FormState>(DEFAULT_FORM);
+  const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});
+
+  const isEditing = !!category;
+  const isDefault = category?.is_default ?? false;
+  const isPending = createMutation.isPending || updateMutation.isPending;
+
+  useEffect(() => {
+    if (category) {
+      setForm({
+        name: category.name,
+        type: category.type,
+        color: category.color ?? "#6366f1",
+        icon: category.icon ?? "",
+      });
+    } else {
+      setForm(DEFAULT_FORM);
+    }
+    setErrors({});
+  }, [category, isOpen]);
+
+  function set<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((e) => ({ ...e, [key]: undefined }));
+  }
+
+  function validate(): boolean {
+    const errs: Partial<Record<keyof FormState, string>> = {};
+    if (!form.name.trim()) errs.name = "Nom requis";
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!validate()) return;
+
+    if (isEditing && category) {
+      updateMutation.mutate(
+        {
+          id: category.id,
+          payload: {
+            name: form.name.trim(),
+            color: form.color,
+            icon: form.icon || undefined,
+          },
+        },
+        {
+          onSuccess: () => {
+            addToast({ type: "success", message: "Catégorie modifiée" });
+            onClose();
+          },
+          onError: () =>
+            addToast({ type: "error", message: "Erreur lors de la modification" }),
+        },
+      );
+    } else {
+      createMutation.mutate(
+        {
+          name: form.name.trim(),
+          type: form.type,
+          color: form.color,
+          icon: form.icon || undefined,
+        },
+        {
+          onSuccess: () => {
+            addToast({ type: "success", message: "Catégorie créée" });
+            onClose();
+          },
+          onError: () =>
+            addToast({ type: "error", message: "Erreur lors de la création" }),
+        },
+      );
+    }
+  }
+
+  if (!isOpen) return null;
+
+  const CATEGORY_TYPES: { value: CategoryType; label: string }[] = [
+    { value: "expense", label: "Dépense" },
+    { value: "income", label: "Revenu" },
+    { value: "both", label: "Les deux" },
+  ];
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-md rounded-xl bg-white shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b px-5 py-4">
+          <h2 className="text-base font-semibold text-slate-800">
+            {isEditing ? "Modifier la catégorie" : "Nouvelle catégorie"}
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-700"
+            aria-label="Fermer"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4 p-5">
+          {isDefault && (
+            <p className="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">
+              Les catégories par défaut ne peuvent pas être modifiées en type.
+            </p>
+          )}
+
+          {/* Name */}
+          <div>
+            <label
+              htmlFor="cat-name"
+              className="mb-1.5 block text-sm font-medium text-slate-700"
+            >
+              Nom
+            </label>
+            <input
+              id="cat-name"
+              type="text"
+              value={form.name}
+              onChange={(e) => set("name", e.target.value)}
+              placeholder="Ex. : Alimentation"
+              className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                errors.name ? "border-red-400" : "border-slate-200"
+              }`}
+            />
+            {errors.name && (
+              <p className="mt-1 text-xs text-red-500">{errors.name}</p>
+            )}
+          </div>
+
+          {/* Type */}
+          <div>
+            <label
+              htmlFor="cat-type"
+              className="mb-1.5 block text-sm font-medium text-slate-700"
+            >
+              Type
+            </label>
+            <select
+              id="cat-type"
+              value={form.type}
+              onChange={(e) => set("type", e.target.value as CategoryType)}
+              disabled={isDefault || isEditing}
+              className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 disabled:bg-slate-50 disabled:text-slate-400"
+            >
+              {CATEGORY_TYPES.map((t) => (
+                <option key={t.value} value={t.value}>
+                  {t.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Color */}
+          <div>
+            <label
+              htmlFor="cat-color"
+              className="mb-1.5 block text-sm font-medium text-slate-700"
+            >
+              Couleur
+            </label>
+            <div className="flex items-center gap-3">
+              <input
+                id="cat-color"
+                type="color"
+                value={form.color}
+                onChange={(e) => set("color", e.target.value)}
+                className="h-9 w-14 cursor-pointer rounded border border-slate-200 p-0.5"
+              />
+              <span className="text-sm text-slate-500">{form.color}</span>
+            </div>
+          </div>
+
+          {/* Icon */}
+          <div>
+            <label
+              htmlFor="cat-icon"
+              className="mb-1.5 block text-sm font-medium text-slate-700"
+            >
+              Icône{" "}
+              <span className="font-normal text-slate-400">(optionnel)</span>
+            </label>
+            <input
+              id="cat-icon"
+              type="text"
+              value={form.icon}
+              onChange={(e) => set("icon", e.target.value)}
+              placeholder="Ex. : shopping-cart"
+              className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            >
+              Annuler
+            </button>
+            <button
+              type="submit"
+              disabled={isPending}
+              className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 disabled:opacity-50"
+            >
+              {isPending
+                ? "Enregistrement…"
+                : isEditing
+                  ? "Modifier"
+                  : "Créer"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/components/DeleteConfirmModal.tsx

@@ -0,0 +1,57 @@
+import { AlertTriangle } from "lucide-react";
+
+interface Props {
+  isOpen: boolean;
+  message: string;
+  isLoading?: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export default function DeleteConfirmModal({
+  isOpen,
+  message,
+  isLoading,
+  onConfirm,
+  onClose,
+}: Props) {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-sm rounded-xl bg-white p-6 shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="mb-4 flex items-center gap-3">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-red-100">
+            <AlertTriangle size={20} className="text-red-600" />
+          </div>
+          <h2 className="text-base font-semibold text-slate-800">
+            Confirmer la suppression
+          </h2>
+        </div>
+        <p className="mb-6 text-sm text-slate-600">{message}</p>
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+          >
+            Annuler
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isLoading}
+            className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50"
+          >
+            {isLoading ? "Suppression…" : "Supprimer"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Layout.tsx

@@ -0,0 +1,148 @@
+import { useState } from "react";
+import { NavLink, Outlet, useNavigate } from "react-router-dom";
+import {
+  LayoutDashboard,
+  ArrowLeftRight,
+  Tag,
+  Wallet,
+  History,
+  Menu,
+  X,
+  LogOut,
+  ChevronRight,
+} from "lucide-react";
+import { useAuthStore } from "../stores/auth";
+import { logoutUser } from "../api/client";
+import { useToast } from "../context/ToastContext";
+
+const NAV_ITEMS = [
+  { to: "/", icon: LayoutDashboard, label: "Dashboard", end: true },
+  { to: "/transactions", icon: ArrowLeftRight, label: "Transactions", end: false },
+  { to: "/categories", icon: Tag, label: "Catégories", end: false },
+  { to: "/budgets", icon: Wallet, label: "Budgets", end: false },
+  { to: "/history", icon: History, label: "Historique", end: false },
+];
+
+export default function Layout() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const { user, refreshToken, logout } = useAuthStore();
+  const navigate = useNavigate();
+  const { addToast } = useToast();
+
+  const handleLogout = async () => {
+    try {
+      if (refreshToken) await logoutUser(refreshToken);
+    } catch {
+      // best-effort logout
+    } finally {
+      logout();
+      navigate("/login");
+      addToast({ type: "info", message: "Déconnecté avec succès" });
+    }
+  };
+
+  const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+    `flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+      isActive
+        ? "bg-primary text-white"
+        : "text-slate-300 hover:bg-slate-700 hover:text-white"
+    }`;
+
+  const SidebarContent = () => (
+    <div className="flex h-full flex-col">
+      {/* Logo */}
+      <div className="flex h-16 items-center border-b border-slate-700 px-4">
+        <span className="text-lg font-bold text-white">Budget Tracker</span>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 overflow-y-auto px-3 py-4">
+        <ul className="space-y-1">
+          {NAV_ITEMS.map(({ to, icon: Icon, label, end }) => (
+            <li key={to}>
+              <NavLink
+                to={to}
+                end={end}
+                className={navLinkClass}
+                onClick={() => setSidebarOpen(false)}
+              >
+                <Icon size={18} />
+                {label}
+                <ChevronRight size={14} className="ml-auto opacity-40" />
+              </NavLink>
+            </li>
+          ))}
+        </ul>
+      </nav>
+
+      {/* User / Logout */}
+      <div className="border-t border-slate-700 p-4">
+        <div className="mb-2 truncate text-xs text-slate-400">
+          {user?.full_name ?? user?.email ?? "—"}
+        </div>
+        <button
+          onClick={handleLogout}
+          className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-300 transition-colors hover:bg-slate-700 hover:text-white"
+        >
+          <LogOut size={16} />
+          Déconnexion
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      {/* Desktop sidebar */}
+      <aside className="hidden w-60 shrink-0 bg-slate-800 lg:flex lg:flex-col">
+        <SidebarContent />
+      </aside>
+
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Mobile sidebar */}
+      <aside
+        className={`fixed inset-y-0 left-0 z-50 w-60 transform bg-slate-800 transition-transform duration-200 lg:hidden ${
+          sidebarOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <button
+          onClick={() => setSidebarOpen(false)}
+          className="absolute right-3 top-4 text-slate-400 hover:text-white"
+          aria-label="Fermer le menu"
+        >
+          <X size={20} />
+        </button>
+        <SidebarContent />
+      </aside>
+
+      {/* Main content */}
+      <div className="flex flex-1 flex-col overflow-hidden">
+        {/* Mobile header */}
+        <header className="flex h-14 items-center border-b bg-white px-4 lg:hidden">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="text-slate-600 hover:text-slate-900"
+            aria-label="Ouvrir le menu"
+          >
+            <Menu size={22} />
+          </button>
+          <span className="ml-3 font-semibold text-slate-800">
+            Budget Tracker
+          </span>
+        </header>
+
+        {/* Page content */}
+        <main className="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ProtectedRoute.tsx

@@ -0,0 +1,8 @@
+import { Navigate, Outlet } from "react-router-dom";
+import { useAuthStore } from "../stores/auth";
+
+export default function ProtectedRoute() {
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  if (!isAuthenticated) return <Navigate to="/login" replace />;
+  return <Outlet />;
+}

frontend/src/components/TransactionForm.tsx

@@ -0,0 +1,302 @@
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+import { useCategories } from "../hooks/useCategories";
+import {
+  useCreateTransaction,
+  useUpdateTransaction,
+} from "../hooks/useTransactions";
+import { eurosToCents, centsToEuros } from "../utils/format";
+import { useToast } from "../context/ToastContext";
+import type { Transaction, TransactionType } from "../api/types";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  transaction?: Transaction;
+}
+
+interface FormState {
+  amount: string;
+  type: TransactionType;
+  category_id: string;
+  description: string;
+  transaction_date: string;
+}
+
+function todayISO(): string {
+  return new Date().toISOString().slice(0, 10);
+}
+
+const DEFAULT_FORM: FormState = {
+  amount: "",
+  type: "expense",
+  category_id: "",
+  description: "",
+  transaction_date: todayISO(),
+};
+
+export default function TransactionForm({ isOpen, onClose, transaction }: Props) {
+  const { data: categories = [] } = useCategories();
+  const createMutation = useCreateTransaction();
+  const updateMutation = useUpdateTransaction();
+  const { addToast } = useToast();
+
+  const [form, setForm] = useState<FormState>(DEFAULT_FORM);
+  const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});
+
+  const isEditing = !!transaction;
+  const isPending = createMutation.isPending || updateMutation.isPending;
+
+  // Populate form when editing
+  useEffect(() => {
+    if (transaction) {
+      setForm({
+        amount: String(centsToEuros(transaction.amount_cents)),
+        type: transaction.type,
+        category_id: transaction.category.id,
+        description: transaction.description ?? "",
+        transaction_date: transaction.transaction_date,
+      });
+    } else {
+      setForm(DEFAULT_FORM);
+    }
+    setErrors({});
+  }, [transaction, isOpen]);
+
+  const filteredCategories = categories.filter(
+    (c) => c.type === form.type || c.type === "both",
+  );
+
+  function set<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((prev) => {
+      const next = { ...prev, [key]: value };
+      // Reset category when type changes and current category is incompatible
+      if (key === "type") {
+        const cat = categories.find((c) => c.id === prev.category_id);
+        if (cat && cat.type !== "both" && cat.type !== value) {
+          next.category_id = "";
+        }
+      }
+      return next;
+    });
+    if (errors[key]) setErrors((e) => ({ ...e, [key]: undefined }));
+  }
+
+  function validate(): boolean {
+    const errs: Partial<Record<keyof FormState, string>> = {};
+    const amountNum = parseFloat(form.amount);
+    if (!form.amount || isNaN(amountNum) || amountNum <= 0)
+      errs.amount = "Montant invalide (doit être > 0)";
+    if (!form.category_id) errs.category_id = "Catégorie requise";
+    if (!form.transaction_date) errs.transaction_date = "Date requise";
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!validate()) return;
+
+    const payload = {
+      amount_cents: eurosToCents(parseFloat(form.amount)),
+      type: form.type,
+      category_id: form.category_id,
+      description: form.description || undefined,
+      transaction_date: form.transaction_date,
+    };
+
+    if (isEditing && transaction) {
+      updateMutation.mutate(
+        { id: transaction.id, payload },
+        {
+          onSuccess: () => {
+            addToast({ type: "success", message: "Transaction modifiée" });
+            onClose();
+          },
+          onError: () =>
+            addToast({ type: "error", message: "Erreur lors de la modification" }),
+        },
+      );
+    } else {
+      createMutation.mutate(payload, {
+        onSuccess: () => {
+          addToast({ type: "success", message: "Transaction ajoutée" });
+          onClose();
+        },
+        onError: () =>
+          addToast({ type: "error", message: "Erreur lors de l'ajout" }),
+      });
+    }
+  }
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-md rounded-xl bg-white shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b px-5 py-4">
+          <h2 className="text-base font-semibold text-slate-800">
+            {isEditing ? "Modifier la transaction" : "Nouvelle transaction"}
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-700"
+            aria-label="Fermer"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4 p-5">
+          {/* Type toggle */}
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-slate-700">
+              Type
+            </label>
+            <div className="flex rounded-lg border border-slate-200 p-1">
+              {(["expense", "income"] as TransactionType[]).map((t) => (
+                <button
+                  key={t}
+                  type="button"
+                  onClick={() => set("type", t)}
+                  className={`flex-1 rounded-md py-1.5 text-sm font-medium transition-colors ${
+                    form.type === t
+                      ? t === "expense"
+                        ? "bg-red-100 text-red-700"
+                        : "bg-green-100 text-green-700"
+                      : "text-slate-500 hover:text-slate-700"
+                  }`}
+                >
+                  {t === "expense" ? "Dépense" : "Revenu"}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Amount */}
+          <div>
+            <label
+              htmlFor="tx-amount"
+              className="mb-1.5 block text-sm font-medium text-slate-700"
+            >
+              Montant (€)
+            </label>
+            <input
+              id="tx-amount"
+              type="number"
+              step="0.01"
+              min="0.01"
+              value={form.amount}
+              onChange={(e) => set("amount", e.target.value)}
+              placeholder="0,00"
+              className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                errors.amount ? "border-red-400" : "border-slate-200"
+              }`}
+            />
+            {errors.amount && (
+              <p className="mt-1 text-xs text-red-500">{errors.amount}</p>
+            )}
+          </div>
+
+          {/* Date */}
+          <div>
+            <label
+              htmlFor="tx-date"
+              className="mb-1.5 block text-sm font-medium text-slate-700"
+            >
+              Date
+            </label>
+            <input
+              id="tx-date"
+              type="date"
+              value={form.transaction_date}
+              onChange={(e) => set("transaction_date", e.target.value)}
+              className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                errors.transaction_date ? "border-red-400" : "border-slate-200"
+              }`}
+            />
+            {errors.transaction_date && (
+              <p className="mt-1 text-xs text-red-500">{errors.transaction_date}</p>
+            )}
+          </div>
+
+          {/* Category */}
+          <div>
+            <label
+              htmlFor="tx-category"
+              className="mb-1.5 block text-sm font-medium text-slate-700"
+            >
+              Catégorie
+            </label>
+            <select
+              id="tx-category"
+              value={form.category_id}
+              onChange={(e) => set("category_id", e.target.value)}
+              className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                errors.category_id ? "border-red-400" : "border-slate-200"
+              }`}
+            >
+              <option value="">— Choisir une catégorie —</option>
+              {filteredCategories.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {c.name}
+                </option>
+              ))}
+            </select>
+            {errors.category_id && (
+              <p className="mt-1 text-xs text-red-500">{errors.category_id}</p>
+            )}
+          </div>
+
+          {/* Description */}
+          <div>
+            <label
+              htmlFor="tx-description"
+              className="mb-1.5 block text-sm font-medium text-slate-700"
+            >
+              Description{" "}
+              <span className="font-normal text-slate-400">(optionnel)</span>
+            </label>
+            <input
+              id="tx-description"
+              type="text"
+              value={form.description}
+              onChange={(e) => set("description", e.target.value)}
+              placeholder="Ex. : Courses Carrefour"
+              className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            >
+              Annuler
+            </button>
+            <button
+              type="submit"
+              disabled={isPending}
+              className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 disabled:opacity-50"
+            >
+              {isPending
+                ? "Enregistrement…"
+                : isEditing
+                  ? "Modifier"
+                  : "Ajouter"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/context/ToastContext.tsx

@@ -0,0 +1,112 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useReducer,
+  useEffect,
+} from "react";
+import { X } from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+type ToastType = "success" | "error" | "info";
+
+interface Toast {
+  id: number;
+  type: ToastType;
+  message: string;
+}
+
+interface ToastContextValue {
+  addToast: (toast: Omit<Toast, "id">) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Reducer
+// ---------------------------------------------------------------------------
+type Action =
+  | { type: "ADD"; toast: Toast }
+  | { type: "REMOVE"; id: number };
+
+function reducer(state: Toast[], action: Action): Toast[] {
+  switch (action.type) {
+    case "ADD":
+      return [...state, action.toast];
+    case "REMOVE":
+      return state.filter((t) => t.id !== action.id);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Provider + UI
+// ---------------------------------------------------------------------------
+let nextId = 0;
+
+function ToastItem({
+  toast,
+  onRemove,
+}: {
+  toast: Toast;
+  onRemove: (id: number) => void;
+}) {
+  useEffect(() => {
+    const timer = setTimeout(() => onRemove(toast.id), 4000);
+    return () => clearTimeout(timer);
+  }, [toast.id, onRemove]);
+
+  const colors: Record<ToastType, string> = {
+    success: "bg-green-600",
+    error: "bg-red-600",
+    info: "bg-blue-600",
+  };
+
+  return (
+    <div
+      className={`flex items-center gap-3 rounded-lg px-4 py-3 text-sm text-white shadow-lg ${colors[toast.type]}`}
+    >
+      <span className="flex-1">{toast.message}</span>
+      <button
+        onClick={() => onRemove(toast.id)}
+        className="shrink-0 opacity-80 hover:opacity-100"
+        aria-label="Fermer"
+      >
+        <X size={14} />
+      </button>
+    </div>
+  );
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, dispatch] = useReducer(reducer, []);
+
+  const removeToast = useCallback((id: number) => {
+    dispatch({ type: "REMOVE", id });
+  }, []);
+
+  const addToast = useCallback((toast: Omit<Toast, "id">) => {
+    dispatch({ type: "ADD", toast: { ...toast, id: ++nextId } });
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ addToast }}>
+      {children}
+      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+        {toasts.map((t) => (
+          <ToastItem key={t.id} toast={t} onRemove={removeToast} />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}

frontend/src/hooks/useCategories.ts

@@ -0,0 +1,43 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  createCategory,
+  deleteCategory,
+  getCategories,
+  updateCategory,
+} from "../api/client";
+import type {
+  CreateCategoryPayload,
+  UpdateCategoryPayload,
+} from "../api/types";
+
+export function useCategories() {
+  return useQuery({
+    queryKey: ["categories"],
+    queryFn: () => getCategories(),
+  });
+}
+
+export function useCreateCategory() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: CreateCategoryPayload) => createCategory(payload),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["categories"] }),
+  });
+}
+
+export function useUpdateCategory() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: UpdateCategoryPayload }) =>
+      updateCategory(id, payload),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["categories"] }),
+  });
+}
+
+export function useDeleteCategory() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => deleteCategory(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["categories"] }),
+  });
+}

frontend/src/hooks/useTransactions.ts

@@ -0,0 +1,50 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  createTransaction,
+  deleteTransaction,
+  getTransactions,
+  updateTransaction,
+} from "../api/client";
+import type {
+  CreateTransactionPayload,
+  TransactionFilters,
+  UpdateTransactionPayload,
+} from "../api/types";
+
+export function useTransactions(filters: TransactionFilters) {
+  return useQuery({
+    queryKey: ["transactions", filters],
+    queryFn: () => getTransactions(filters),
+  });
+}
+
+export function useCreateTransaction() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: CreateTransactionPayload) =>
+      createTransaction(payload),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["transactions"] }),
+  });
+}
+
+export function useUpdateTransaction() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+      payload,
+    }: {
+      id: string;
+      payload: UpdateTransactionPayload;
+    }) => updateTransaction(id, payload),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["transactions"] }),
+  });
+}
+
+export function useDeleteTransaction() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => deleteTransaction(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["transactions"] }),
+  });
+}

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,152 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { loginUser, getMe, setClientTokens } from "../api/client";
+import { useAuthStore } from "../stores/auth";
+
+interface FormState {
+  email: string;
+  password: string;
+}
+
+interface Errors {
+  email?: string;
+  password?: string;
+  global?: string;
+}
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const login = useAuthStore((s) => s.login);
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+
+  const [form, setForm] = useState<FormState>({ email: "", password: "" });
+  const [errors, setErrors] = useState<Errors>({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (isAuthenticated) {
+    navigate("/", { replace: true });
+    return null;
+  }
+
+  function validate(): boolean {
+    const errs: Errors = {};
+    if (!form.email) errs.email = "Email requis";
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
+      errs.email = "Email invalide";
+    if (!form.password) errs.password = "Mot de passe requis";
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!validate()) return;
+
+    setIsLoading(true);
+    setErrors({});
+    try {
+      const tokens = await loginUser(form.email, form.password);
+      // Set tokens on the client so getMe() succeeds
+      setClientTokens(tokens.access_token, tokens.refresh_token);
+      const user = await getMe();
+      login(user, tokens.access_token, tokens.refresh_token);
+      navigate("/", { replace: true });
+    } catch (err) {
+      const msg =
+        err instanceof Error && err.message.includes("401")
+          ? "Email ou mot de passe incorrect"
+          : "Erreur de connexion, veuillez réessayer";
+      setErrors({ global: msg });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
+      <div className="w-full max-w-sm">
+        <div className="mb-8 text-center">
+          <h1 className="text-2xl font-bold text-slate-800">Budget Tracker</h1>
+          <p className="mt-1 text-sm text-slate-500">
+            Connectez-vous à votre compte
+          </p>
+        </div>
+
+        <div className="rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
+          {errors.global && (
+            <div className="mb-4 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">
+              {errors.global}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+            <div>
+              <label
+                htmlFor="email"
+                className="mb-1.5 block text-sm font-medium text-slate-700"
+              >
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                autoComplete="email"
+                value={form.email}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, email: e.target.value }))
+                }
+                className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                  errors.email ? "border-red-400" : "border-slate-200"
+                }`}
+                placeholder="vous@exemple.com"
+              />
+              {errors.email && (
+                <p className="mt-1 text-xs text-red-500">{errors.email}</p>
+              )}
+            </div>
+
+            <div>
+              <label
+                htmlFor="password"
+                className="mb-1.5 block text-sm font-medium text-slate-700"
+              >
+                Mot de passe
+              </label>
+              <input
+                id="password"
+                type="password"
+                autoComplete="current-password"
+                value={form.password}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, password: e.target.value }))
+                }
+                className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                  errors.password ? "border-red-400" : "border-slate-200"
+                }`}
+                placeholder="••••••••"
+              />
+              {errors.password && (
+                <p className="mt-1 text-xs text-red-500">{errors.password}</p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full rounded-lg bg-primary py-2 text-sm font-medium text-white hover:bg-primary/90 disabled:opacity-50"
+            >
+              {isLoading ? "Connexion…" : "Se connecter"}
+            </button>
+          </form>
+        </div>
+
+        <p className="mt-4 text-center text-sm text-slate-500">
+          Pas encore de compte ?{" "}
+          <Link to="/register" className="font-medium text-primary hover:underline">
+            S&apos;inscrire
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/RegisterPage.tsx

@@ -0,0 +1,187 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { registerUser, loginUser, getMe, setClientTokens } from "../api/client";
+import { useAuthStore } from "../stores/auth";
+
+interface FormState {
+  full_name: string;
+  email: string;
+  password: string;
+}
+
+interface Errors {
+  full_name?: string;
+  email?: string;
+  password?: string;
+  global?: string;
+}
+
+export default function RegisterPage() {
+  const navigate = useNavigate();
+  const login = useAuthStore((s) => s.login);
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+
+  const [form, setForm] = useState<FormState>({
+    full_name: "",
+    email: "",
+    password: "",
+  });
+  const [errors, setErrors] = useState<Errors>({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (isAuthenticated) {
+    navigate("/", { replace: true });
+    return null;
+  }
+
+  function validate(): boolean {
+    const errs: Errors = {};
+    if (!form.full_name.trim() || form.full_name.trim().length < 2)
+      errs.full_name = "Nom complet requis (2 caractères minimum)";
+    if (!form.email) errs.email = "Email requis";
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
+      errs.email = "Email invalide";
+    if (!form.password || form.password.length < 8)
+      errs.password = "Mot de passe requis (8 caractères minimum)";
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!validate()) return;
+
+    setIsLoading(true);
+    setErrors({});
+    try {
+      await registerUser(form.email, form.password, form.full_name.trim());
+      // Auto-login after registration
+      const tokens = await loginUser(form.email, form.password);
+      setClientTokens(tokens.access_token, tokens.refresh_token);
+      const user = await getMe();
+      login(user, tokens.access_token, tokens.refresh_token);
+      navigate("/", { replace: true });
+    } catch (err) {
+      const isConflict =
+        err instanceof Error && err.message.toLowerCase().includes("409");
+      setErrors({
+        global: isConflict
+          ? "Cet email est déjà utilisé"
+          : "Erreur lors de l'inscription, veuillez réessayer",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
+      <div className="w-full max-w-sm">
+        <div className="mb-8 text-center">
+          <h1 className="text-2xl font-bold text-slate-800">Budget Tracker</h1>
+          <p className="mt-1 text-sm text-slate-500">Créez votre compte</p>
+        </div>
+
+        <div className="rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
+          {errors.global && (
+            <div className="mb-4 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">
+              {errors.global}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+            <div>
+              <label
+                htmlFor="full_name"
+                className="mb-1.5 block text-sm font-medium text-slate-700"
+              >
+                Nom complet
+              </label>
+              <input
+                id="full_name"
+                type="text"
+                autoComplete="name"
+                value={form.full_name}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, full_name: e.target.value }))
+                }
+                className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                  errors.full_name ? "border-red-400" : "border-slate-200"
+                }`}
+                placeholder="Jean Dupont"
+              />
+              {errors.full_name && (
+                <p className="mt-1 text-xs text-red-500">{errors.full_name}</p>
+              )}
+            </div>
+
+            <div>
+              <label
+                htmlFor="email"
+                className="mb-1.5 block text-sm font-medium text-slate-700"
+              >
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                autoComplete="email"
+                value={form.email}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, email: e.target.value }))
+                }
+                className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                  errors.email ? "border-red-400" : "border-slate-200"
+                }`}
+                placeholder="vous@exemple.com"
+              />
+              {errors.email && (
+                <p className="mt-1 text-xs text-red-500">{errors.email}</p>
+              )}
+            </div>
+
+            <div>
+              <label
+                htmlFor="password"
+                className="mb-1.5 block text-sm font-medium text-slate-700"
+              >
+                Mot de passe
+              </label>
+              <input
+                id="password"
+                type="password"
+                autoComplete="new-password"
+                value={form.password}
+                onChange={(e) =>
+                  setForm((f) => ({ ...f, password: e.target.value }))
+                }
+                className={`w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30 ${
+                  errors.password ? "border-red-400" : "border-slate-200"
+                }`}
+                placeholder="8 caractères minimum"
+              />
+              {errors.password && (
+                <p className="mt-1 text-xs text-red-500">{errors.password}</p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full rounded-lg bg-primary py-2 text-sm font-medium text-white hover:bg-primary/90 disabled:opacity-50"
+            >
+              {isLoading ? "Inscription…" : "Créer mon compte"}
+            </button>
+          </form>
+        </div>
+
+        <p className="mt-4 text-center text-sm text-slate-500">
+          Déjà un compte ?{" "}
+          <Link to="/login" className="font-medium text-primary hover:underline">
+            Se connecter
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/TransactionsPage.tsx

@@ -0,0 +1,327 @@
+import { useState } from "react";
+import { Plus, Pencil, Trash2, TrendingUp, TrendingDown, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  useTransactions,
+  useDeleteTransaction,
+} from "../hooks/useTransactions";
+import { useCategories } from "../hooks/useCategories";
+import TransactionForm from "../components/TransactionForm";
+import DeleteConfirmModal from "../components/DeleteConfirmModal";
+import { useToast } from "../context/ToastContext";
+import { formatCurrency, formatDate, currentMonth } from "../utils/format";
+import type { Transaction, TransactionType } from "../api/types";
+
+const PER_PAGE = 20;
+
+// Skeleton row
+function SkeletonRow() {
+  return (
+    <tr>
+      {Array.from({ length: 6 }).map((_, i) => (
+        <td key={i} className="px-4 py-3">
+          <div className="h-4 animate-pulse rounded bg-slate-100" />
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+export default function TransactionsPage() {
+  const { addToast } = useToast();
+  const { data: categoriesData } = useCategories();
+
+  const [month, setMonth] = useState(currentMonth());
+  const [categoryFilter, setCategoryFilter] = useState("");
+  const [typeFilter, setTypeFilter] = useState<TransactionType | "">("");
+  const [page, setPage] = useState(1);
+
+  const [formOpen, setFormOpen] = useState(false);
+  const [editingTx, setEditingTx] = useState<Transaction | undefined>();
+  const [deleteTarget, setDeleteTarget] = useState<Transaction | undefined>();
+
+  const filters = {
+    month: month || undefined,
+    category_id: categoryFilter || undefined,
+    type: typeFilter || undefined,
+    page,
+    per_page: PER_PAGE,
+  };
+
+  const { data, isLoading } = useTransactions(filters);
+  const deleteMutation = useDeleteTransaction();
+
+  const totalPages = data ? Math.ceil(data.total / PER_PAGE) : 0;
+
+  function openCreate() {
+    setEditingTx(undefined);
+    setFormOpen(true);
+  }
+
+  function openEdit(tx: Transaction) {
+    setEditingTx(tx);
+    setFormOpen(true);
+  }
+
+  function handleFilterChange() {
+    setPage(1);
+  }
+
+  function handleDelete() {
+    if (!deleteTarget) return;
+    deleteMutation.mutate(deleteTarget.id, {
+      onSuccess: () => {
+        addToast({ type: "success", message: "Transaction supprimée" });
+        setDeleteTarget(undefined);
+      },
+      onError: () =>
+        addToast({ type: "error", message: "Erreur lors de la suppression" }),
+    });
+  }
+
+  const categories = categoriesData ?? [];
+
+  return (
+    <div>
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-xl font-semibold text-slate-800">Transactions</h1>
+        <button
+          onClick={openCreate}
+          className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90"
+        >
+          <Plus size={16} />
+          Nouvelle
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="mb-4 flex flex-wrap gap-3">
+        <input
+          type="month"
+          value={month}
+          onChange={(e) => {
+            setMonth(e.target.value);
+            handleFilterChange();
+          }}
+          className="rounded-lg border border-slate-200 px-3 py-1.5 text-sm outline-none focus:ring-2 focus:ring-primary/30"
+        />
+
+        <select
+          value={categoryFilter}
+          onChange={(e) => {
+            setCategoryFilter(e.target.value);
+            handleFilterChange();
+          }}
+          className="rounded-lg border border-slate-200 px-3 py-1.5 text-sm outline-none focus:ring-2 focus:ring-primary/30"
+        >
+          <option value="">Toutes les catégories</option>
+          {categories.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.name}
+            </option>
+          ))}
+        </select>
+
+        <div className="flex rounded-lg border border-slate-200">
+          {(
+            [
+              { value: "", label: "Tout" },
+              { value: "income", label: "Revenus" },
+              { value: "expense", label: "Dépenses" },
+            ] as { value: TransactionType | ""; label: string }[]
+          ).map(({ value, label }) => (
+            <button
+              key={value}
+              onClick={() => {
+                setTypeFilter(value);
+                handleFilterChange();
+              }}
+              className={`px-3 py-1.5 text-sm font-medium transition-colors first:rounded-l-lg last:rounded-r-lg ${
+                typeFilter === value
+                  ? "bg-primary text-white"
+                  : "text-slate-600 hover:bg-slate-50"
+              }`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-slate-100 bg-slate-50">
+                <th className="px-4 py-3 text-left font-medium text-slate-500">
+                  Date
+                </th>
+                <th className="px-4 py-3 text-left font-medium text-slate-500">
+                  Description
+                </th>
+                <th className="px-4 py-3 text-left font-medium text-slate-500">
+                  Catégorie
+                </th>
+                <th className="px-4 py-3 text-right font-medium text-slate-500">
+                  Montant
+                </th>
+                <th className="px-4 py-3 text-center font-medium text-slate-500">
+                  Type
+                </th>
+                <th className="px-4 py-3 text-right font-medium text-slate-500">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {isLoading ? (
+                Array.from({ length: 5 }).map((_, i) => <SkeletonRow key={i} />)
+              ) : !data || data.items.length === 0 ? (
+                <tr>
+                  <td
+                    colSpan={6}
+                    className="px-4 py-12 text-center text-slate-400"
+                  >
+                    <p className="font-medium">Aucune transaction</p>
+                    <p className="mt-1 text-xs">
+                      Ajoutez votre première transaction avec le bouton ci-dessus.
+                    </p>
+                  </td>
+                </tr>
+              ) : (
+                data.items.map((tx) => (
+                  <tr
+                    key={tx.id}
+                    className="group transition-colors hover:bg-slate-50"
+                  >
+                    <td className="whitespace-nowrap px-4 py-3 text-slate-600">
+                      {formatDate(tx.transaction_date)}
+                    </td>
+                    <td className="px-4 py-3 text-slate-800">
+                      {tx.description ?? (
+                        <span className="text-slate-400 italic">—</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-3">
+                      <span
+                        className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium"
+                        style={{
+                          backgroundColor: tx.category.color
+                            ? `${tx.category.color}20`
+                            : "#e2e8f0",
+                          color: tx.category.color ?? "#64748b",
+                        }}
+                      >
+                        {tx.category.name}
+                      </span>
+                    </td>
+                    <td
+                      className={`whitespace-nowrap px-4 py-3 text-right font-medium tabular-nums ${
+                        tx.type === "income"
+                          ? "text-green-600"
+                          : "text-slate-800"
+                      }`}
+                    >
+                      {tx.type === "income" ? "+" : "-"}
+                      {formatCurrency(tx.amount_cents)}
+                    </td>
+                    <td className="px-4 py-3 text-center">
+                      {tx.type === "income" ? (
+                        <TrendingUp
+                          size={16}
+                          className="mx-auto text-green-500"
+                        />
+                      ) : (
+                        <TrendingDown
+                          size={16}
+                          className="mx-auto text-red-400"
+                        />
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      <div className="flex items-center justify-end gap-2 opacity-0 transition-opacity group-hover:opacity-100">
+                        <button
+                          onClick={() => openEdit(tx)}
+                          className="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-700"
+                          aria-label="Modifier"
+                        >
+                          <Pencil size={14} />
+                        </button>
+                        <button
+                          onClick={() => setDeleteTarget(tx)}
+                          className="rounded p-1 text-slate-400 hover:bg-red-50 hover:text-red-600"
+                          aria-label="Supprimer"
+                        >
+                          <Trash2 size={14} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        {data && totalPages > 1 && (
+          <div className="flex items-center justify-between border-t border-slate-100 px-4 py-3">
+            <span className="text-xs text-slate-500">
+              {data.total} transaction{data.total > 1 ? "s" : ""} au total
+            </span>
+            <div className="flex items-center gap-1">
+              <button
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                disabled={page === 1}
+                className="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-700 disabled:opacity-30"
+              >
+                <ChevronLeft size={16} />
+              </button>
+              {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+                (p) => (
+                  <button
+                    key={p}
+                    onClick={() => setPage(p)}
+                    className={`min-w-[2rem] rounded px-2 py-1 text-xs font-medium ${
+                      p === page
+                        ? "bg-primary text-white"
+                        : "text-slate-500 hover:bg-slate-100"
+                    }`}
+                  >
+                    {p}
+                  </button>
+                ),
+              )}
+              <button
+                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+                className="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-700 disabled:opacity-30"
+              >
+                <ChevronRight size={16} />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Modals */}
+      <TransactionForm
+        isOpen={formOpen}
+        onClose={() => setFormOpen(false)}
+        transaction={editingTx}
+      />
+
+      <DeleteConfirmModal
+        isOpen={!!deleteTarget}
+        message={
+          deleteTarget
+            ? `Supprimer la transaction "${deleteTarget.description ?? formatCurrency(deleteTarget.amount_cents)}" ?`
+            : ""
+        }
+        isLoading={deleteMutation.isPending}
+        onConfirm={handleDelete}
+        onClose={() => setDeleteTarget(undefined)}
+      />
+    </div>
+  );
+}

frontend/src/stores/auth.ts

@@ -0,0 +1,61 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { setClientTokens, setOnAuthFailed } from "../api/client";
+import type { User } from "../api/types";
+
+interface AuthState {
+  user: User | null;
+  accessToken: string | null;
+  refreshToken: string | null;
+  isAuthenticated: boolean;
+}
+
+interface AuthActions {
+  login: (user: User, accessToken: string, refreshToken: string) => void;
+  updateTokens: (accessToken: string) => void;
+  logout: () => void;
+  registerOnAuthFailed: (cb: () => void) => void;
+}
+
+export const useAuthStore = create<AuthState & AuthActions>()(
+  persist(
+    (set, get) => ({
+      user: null,
+      accessToken: null,
+      refreshToken: null,
+      isAuthenticated: false,
+
+      login(user, accessToken, refreshToken) {
+        setClientTokens(accessToken, refreshToken);
+        set({ user, accessToken, refreshToken, isAuthenticated: true });
+      },
+
+      updateTokens(accessToken) {
+        setClientTokens(accessToken, get().refreshToken);
+        set({ accessToken });
+      },
+
+      logout() {
+        setClientTokens(null, null);
+        set({
+          user: null,
+          accessToken: null,
+          refreshToken: null,
+          isAuthenticated: false,
+        });
+      },
+
+      registerOnAuthFailed(cb) {
+        setOnAuthFailed(cb);
+      },
+    }),
+    {
+      name: "budget-tracker-auth",
+      onRehydrateStorage: () => (state) => {
+        if (state?.accessToken) {
+          setClientTokens(state.accessToken, state.refreshToken);
+        }
+      },
+    },
+  ),
+);

frontend/src/utils/format.ts

@@ -0,0 +1,25 @@
+export function centsToEuros(cents: number): number {
+  return cents / 100;
+}
+
+export function eurosToCents(euros: number): number {
+  return Math.round(euros * 100);
+}
+
+export function formatCurrency(cents: number): string {
+  return new Intl.NumberFormat("fr-FR", {
+    style: "currency",
+    currency: "EUR",
+  }).format(cents / 100);
+}
+
+export function formatDate(dateStr: string): string {
+  return new Intl.DateTimeFormat("fr-FR").format(new Date(dateStr + "T00:00:00"));
+}
+
+export function currentMonth(): string {
+  const now = new Date();
+  const y = now.getFullYear();
+  const m = String(now.getMonth() + 1).padStart(2, "0");
+  return `${y}-${m}`;
+}