diff --git a/.gitignore b/.gitignore
index 938b48c..539d0f5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
+.pnpm-store/
 dist/
 data/
 playwright-report/
@@ -7,6 +8,7 @@ test-results/
 .DS_Store
 *.log
 release/
+src/.umi-production/
 release-signing.key
 *.key
 *.pem
diff --git a/README.md b/README.md
index 117e6d5..383e6da 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,15 @@ pnpm build
 pnpm start
 ```
 
+默认开发和生产构建都使用腾讯 TDesign React 前端。需要单独检查或构建前端时，可以使用：
+
+```bash
+pnpm check:next
+pnpm build:next
+```
+
+`build:next` 与 `pnpm build` 一样输出到 `dist/web`，可直接由生产 Fastify 服务提供。
+
 首次初始化会要求交互式输入管理员密码。也可以使用 `pnpm admin:init -- --username admin --display-name 管理员 --generate` 生成一次性临时密码。
 
 默认地址为 `http://127.0.0.1:3000`，开发界面为 `http://127.0.0.1:5173`。配置项见 `.env.example`。
@@ -47,7 +56,7 @@ pnpm start
 ```bash
 curl --proto '=https' --tlsv1.2 -fsSL \
   https://git.awaioi.com/awaioi/TallyNote/raw/branch/main/install.sh \
-  | sudo bash -s -- --apply --version 1.0.1 \
+  | sudo bash -s -- --apply --version 1.1.0 \
       --signing-key /root/tallynote-update.pub \
       --update-public-key-file /root/tallynote-update.pub
 ```
@@ -73,17 +82,17 @@ curl --proto '=https' --tlsv1.2 -fsSL \
 
 ```bash
 pnpm install --frozen-lockfile
-pnpm release:build 1.0.1 ./release
+pnpm release:build 1.1.0 ./release
 ```
 
 将生成的 `tallynote-<版本>-linux-<架构>-<libc>.tar.gz` 上传到同一个 Gitea Release。推荐由 `.gitea/workflows/release.yml` 自动执行 `scripts/publish-gitea-release.sh`，统一生成并上传 `SHA256SUMS` 与 `SHA256SUMS.sig`；当前仓库还没有首个 tag/release 时，后台会明确显示不可用，不会下载未验证文件。CI 需要 `GITEA_TOKEN` 和 `TALLYNOTE_RELEASE_SIGNING_KEY` secrets。
 
-版本由 `package.json` 和 Git tag 双重约束：两者必须相同（例如 `1.0.1` 与 `v1.0.1`），workflow 会在构建前拒绝不一致的 tag。发布一个版本：
+版本由 `package.json` 和 Git tag 双重约束：两者必须相同（例如 `1.1.0` 与 `v1.1.0`），workflow 会在构建前拒绝不一致的 tag。发布一个版本：
 
 ```bash
 git add .
-git commit -m "release: 1.0.1"
-git tag -a v1.0.1 -m "TallyNote 1.0.1"
+git commit -m "release: 1.1.0"
+git tag -a v1.1.0 -m "TallyNote 1.1.0"
 git push origin main --follow-tags
 ```
 
diff --git a/docs/release.md b/docs/release.md
index 3995ca9..f67d6e9 100644
--- a/docs/release.md
+++ b/docs/release.md
@@ -6,7 +6,7 @@ TallyNote 的发布包必须在目标 Linux 架构上构建。`better-sqlite3`
 
 ## 自动发布
 
-向 Gitea 推送符合 SemVer 的 tag（例如 `v1.0.1`）会触发 `.gitea/workflows/release.yml`：
+向 Gitea 推送符合 SemVer 的 tag（例如 `v1.1.0`）会触发 `.gitea/workflows/release.yml`：
 
 1. 在 Linux runner 上安装依赖，执行 `pnpm check`、`pnpm test` 和 `pnpm release:build`。
 2. 由 `scripts/publish-gitea-release.sh` 计算所有归档的 `SHA256SUMS`。
@@ -22,14 +22,14 @@ TallyNote 的发布包必须在目标 Linux 架构上构建。`better-sqlite3`
 ```bash
 pnpm install --frozen-lockfile
 pnpm check && pnpm test
-pnpm release:build 1.0.1 ./release
+pnpm release:build 1.1.0 ./release
 GITHUB_REPOSITORY=awaioi/TallyNote \
 GITEA_TOKEN=... \
 TALLYNOTE_RELEASE_SIGNING_KEY_FILE=/root/secrets/tallynote-release.key \
-  ./scripts/publish-gitea-release.sh v1.0.1 ./release
+  ./scripts/publish-gitea-release.sh v1.1.0 ./release
 ```
 
-发布资产名称必须包含当前平台，例如 `tallynote-1.0.1-linux-x64-glibc.tar.gz`。同一个 Release 只保留一个 `SHA256SUMS` 和一个 `SHA256SUMS.sig`，清单签名覆盖其完整原文。
+发布资产名称必须包含当前平台，例如 `tallynote-1.1.0-linux-x64-glibc.tar.gz`。同一个 Release 只保留一个 `SHA256SUMS` 和一个 `SHA256SUMS.sig`，清单签名覆盖其完整原文。
 
 ## curl 安装
 
@@ -38,7 +38,7 @@ TALLYNOTE_RELEASE_SIGNING_KEY_FILE=/root/secrets/tallynote-release.key \
 ```bash
 curl --proto '=https' --tlsv1.2 -fsSL \
   https://git.awaioi.com/awaioi/TallyNote/raw/branch/main/install.sh \
-  | sudo bash -s -- --apply --version 1.0.1 \
+  | sudo bash -s -- --apply --version 1.1.0 \
       --signing-key /root/tallynote-update.pub \
       --update-public-key-file /root/tallynote-update.pub
 ```
diff --git a/package.json b/package.json
index 55fa1dc..4405a12 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tallynote",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "type": "module",
   "packageManager": "pnpm@9.0.6",
@@ -9,13 +9,16 @@
   },
   "scripts": {
     "dev": "concurrently -k -n server,web -c cyan,magenta \"tsx watch server/index.ts\" \"vite\"",
+    "dev:next": "vite --config vite.next.config.ts",
     "build": "tsc -p tsconfig.server.json && vite build",
+    "build:next": "tsc -p tsconfig.web-next.json --noEmit && vite build --config vite.next.config.ts",
     "start": "node dist/server/index.js",
     "admin:init": "tsx server/cli/admin-init.ts",
     "release:build": "bash scripts/build-release.sh",
     "release:publish": "bash scripts/publish-gitea-release.sh",
     "db:generate": "drizzle-kit generate",
-    "check": "tsc -p tsconfig.server.json --noEmit && tsc -p tsconfig.web.json --noEmit",
+    "check": "tsc -p tsconfig.server.json --noEmit && tsc -p tsconfig.web-next.json --noEmit",
+    "check:next": "tsc -p tsconfig.web-next.json --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:e2e": "playwright test"
@@ -25,18 +28,26 @@
     "@fastify/helmet": "^13.0.2",
     "@fastify/multipart": "^9.2.1",
     "@fastify/static": "^10.1.3",
+    "@fontsource-variable/plus-jakarta-sans": "5.3.0",
+    "@reduxjs/toolkit": "2.12.0",
     "archiver": "^8.0.0",
     "argon2": "^0.44.0",
     "better-sqlite3": "^12.2.0",
     "drizzle-orm": "^0.45.2",
+    "echarts": "6.1.0",
+    "echarts-for-react": "3.0.6",
     "exceljs": "^4.4.0",
     "fast-xml-parser": "^5.2.5",
     "fastify": "^5.4.0",
+    "less": "4.4.1",
     "lucide-react": "^0.542.0",
     "pdf-lib": "^1.17.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-redux": "9.2.0",
+    "react-router-dom": "7.18.3",
     "sharp": "^0.35.4",
+    "tdesign-react": "1.18.2",
     "yauzl": "^3.2.0",
     "zod": "^4.1.5"
   },
diff --git a/playwright.config.ts b/playwright.config.ts
index 3dfaa3b..e0f8811 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,25 +1,33 @@
 import { defineConfig, devices } from "@playwright/test";
+import { mkdtempSync } from "node:fs";
+import os from "node:os";
+import path from "node:path";
+
+// Every E2E run must start from an uninitialized ledger. A unique temporary
+// directory keeps the login smoke test independent of previous runs.
+const e2eDataDir = mkdtempSync(path.join(os.tmpdir(), "tallynote-e2e-"));
+const e2ePort = Number(process.env.TALLYNOTE_E2E_PORT ?? 3400);
 
 export default defineConfig({
   testDir: "./tests/e2e",
   timeout: 30_000,
   use: {
-    baseURL: "http://127.0.0.1:3400",
+    baseURL: `http://127.0.0.1:${e2ePort}`,
     trace: "retain-on-failure",
     ...devices["Desktop Chrome"],
   },
   webServer: {
     command: "node dist/server/index.js",
-    url: "http://127.0.0.1:3400/health",
+    url: `http://127.0.0.1:${e2ePort}/health`,
     reuseExistingServer: false,
     timeout: 120_000,
     env: {
       NODE_ENV: "production",
       TALLYNOTE_HOST: "127.0.0.1",
-      TALLYNOTE_PORT: "3400",
-      TALLYNOTE_PUBLIC_ORIGIN: "http://127.0.0.1:3400",
+      TALLYNOTE_PORT: String(e2ePort),
+      TALLYNOTE_PUBLIC_ORIGIN: `http://127.0.0.1:${e2ePort}`,
       TALLYNOTE_COOKIE_SECURE: "false",
-      TALLYNOTE_DATA_DIR: "/tmp/tallynote-e2e",
+      TALLYNOTE_DATA_DIR: e2eDataDir,
     },
   },
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a774ca..8705934 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,12 @@ importers:
       '@fastify/static':
         specifier: ^10.1.3
         version: 10.1.3
+      '@fontsource-variable/plus-jakarta-sans':
+        specifier: 5.3.0
+        version: 5.3.0
+      '@reduxjs/toolkit':
+        specifier: 2.12.0
+        version: 2.12.0(react-redux@9.2.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1))(react@19.2.8)
       archiver:
         specifier: ^8.0.0
         version: 8.0.0
@@ -35,6 +41,12 @@ importers:
       drizzle-orm:
         specifier: ^0.45.2
         version: 0.45.2(@types/better-sqlite3@7.6.13)(better-sqlite3@12.11.1)
+      echarts:
+        specifier: 6.1.0
+        version: 6.1.0
+      echarts-for-react:
+        specifier: 3.0.6
+        version: 3.0.6(echarts@6.1.0)(react@19.2.8)
       exceljs:
         specifier: ^4.4.0
         version: 4.4.0
@@ -44,6 +56,9 @@ importers:
       fastify:
         specifier: ^5.4.0
         version: 5.12.1
+      less:
+        specifier: 4.4.1
+        version: 4.4.1
       lucide-react:
         specifier: ^0.542.0
         version: 0.542.0(react@19.2.8)
@@ -56,9 +71,18 @@ importers:
       react-dom:
         specifier: ^19.1.1
         version: 19.2.8(react@19.2.8)
+      react-redux:
+        specifier: 9.2.0
+        version: 9.2.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1)
+      react-router-dom:
+        specifier: 7.18.3
+        version: 7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       sharp:
         specifier: ^0.35.4
         version: 0.35.4(@types/node@24.13.3)
+      tdesign-react:
+        specifier: 1.18.2
+        version: 1.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       yauzl:
         specifier: ^3.2.0
         version: 3.4.0
@@ -89,7 +113,7 @@ importers:
         version: 2.10.3
       '@vitejs/plugin-react':
         specifier: ^5.0.2
-        version: 5.2.0(vite@7.3.6(@types/node@24.13.3)(tsx@4.23.12))
+        version: 5.2.0(vite@7.3.6(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12))
       concurrently:
         specifier: ^9.2.1
         version: 9.2.4
@@ -104,10 +128,10 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^7.1.3
-        version: 7.3.6(@types/node@24.13.3)(tsx@4.23.12)
+        version: 7.3.6(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.7(@types/node@24.13.3)(tsx@4.23.12)
+        version: 3.2.7(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12)
 
 packages:
 
@@ -182,6 +206,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.26.10':
+    resolution: {integrity: sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.29.7':
     resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
     engines: {node: '>=6.9.0'}
@@ -703,6 +731,9 @@ packages:
   '@fastify/static@10.1.3':
     resolution: {integrity: sha512-W6jqajYS974XjPjB5hQWoxPM8NKM4+p8YmQT6G5IbCa4uhdWSVadZUv75siy1wEA/3ty8RYdpBydfWeu9AqAqQ==}
 
+  '@fontsource-variable/plus-jakarta-sans@5.3.0':
+    resolution: {integrity: sha512-/l/4r0yyWK9JzAlmA0LiYgGgmJe/Gswt4jTJEzr5QhJfwMbvJZDmYWyW0M4X7yCK69BajMVlV/Lx8g7WDc1+sw==}
+
   '@img/colour@1.1.0':
     resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     engines: {node: '>=18'}
@@ -913,6 +944,20 @@ packages:
     engines: {node: '>=20'}
     hasBin: true
 
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
+  '@reduxjs/toolkit@2.12.0':
+    resolution: {integrity: sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+
   '@rolldown/pluginutils@1.0.0-rc.3':
     resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}
 
@@ -1054,6 +1099,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
   '@types/archiver@8.0.0':
     resolution: {integrity: sha512-YpXPbEuv9+eUIPPQWUPahj3cvs9isWRuF+J4z+KbdYVDO3rWorWQFxUVHnwPu2AgKwvgpki5F2VMX0Xx+mX45A==}
 
@@ -1098,6 +1149,15 @@ packages:
   '@types/readdir-glob@1.1.5':
     resolution: {integrity: sha512-raiuEPUYqXu+nvtY2Pe8s8FEmZ3x5yAH4VkLdihcPdalvsHltomrRC9BzuStrJ9yk06470hS0Crw0f1pXqD+Hg==}
 
+  '@types/sortablejs@1.15.9':
+    resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
+
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
+  '@types/validator@13.15.10':
+    resolution: {integrity: sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA==}
+
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
@@ -1343,6 +1403,9 @@ packages:
   chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
 
+  classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+
   cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -1385,6 +1448,9 @@ packages:
     resolution: {integrity: sha512-yuToqVvRrj6pfDXREyQAAv8SkAEk/8GS3jQRTiUMm66TVtBYmqQeoEjL2Lmq8Rpo6271vH76InTChTitEAm65w==}
     engines: {node: '>=22'}
 
+  copy-anything@2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -1413,6 +1479,9 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  dayjs@1.11.10:
+    resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
+
   dayjs@1.11.23:
     resolution: {integrity: sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==}
 
@@ -1449,6 +1518,9 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+
   drizzle-kit@0.31.10:
     resolution: {integrity: sha512-7OZcmQUrdGI+DUNNsKBn1aW8qSoKuTH7d0mYgSP8bAzdFzKoovxEFnoGQp2dVs82EOJeYycqRtciopszwUf8bw==}
     hasBin: true
@@ -1548,6 +1620,15 @@ packages:
   duplexer2@0.1.4:
     resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==}
 
+  echarts-for-react@3.0.6:
+    resolution: {integrity: sha512-4zqLgTGWS3JvkQDXjzkR1k1CHRdpd6by0988TWMJgnvDytegWLbeP/VNZmMa+0VJx2eD7Y632bi2JquXDgiGJg==}
+    peerDependencies:
+      echarts: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+      react: ^15.0.0 || >=16.0.0
+
+  echarts@6.1.0:
+    resolution: {integrity: sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==}
+
   electron-to-chromium@1.5.415:
     resolution: {integrity: sha512-958V+Kbhtgz+SxXeEVKBjrlKRBIDAYvUJfwhjxMZ5S6ut9jAl7l9ZKBkBrvjyjZE36PabLUo2L8kEeV5O4vgJg==}
 
@@ -1557,6 +1638,10 @@ packages:
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
+  errno@0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
@@ -1725,16 +1810,31 @@ packages:
     resolution: {integrity: sha512-Qgpiaws3Sm30Av8Eah6sjMCZZwjlBu+E68rhpCWBshY1lb09HtLwj5GviX0OyQIn+ulUS0iX0AxN5n3tLZzz1w==}
     engines: {node: '>=18.0.0'}
 
+  hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
 
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
+  image-size@0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
   immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
+  immer@11.1.18:
+    resolution: {integrity: sha512-EQyQtLiYW029lyoczMl/Hh4Xu7cDecSc58JRYpHyL4tIAu3eqd1yJzQX04d2BZHDkzFFvm6qJEJWOtfDSWAXbQ==}
+
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -1760,6 +1860,9 @@ packages:
   is-unsafe@2.0.2:
     resolution: {integrity: sha512-HgbIHPBH0KHHCcjLfGsCvhtPTVxjaAZlXjwdz7/GQC40SjSe4sfQsar8J5VFo8JOSbarkpV0OLG95bbaNd9aAQ==}
 
+  is-what@3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -1795,6 +1898,11 @@ packages:
     resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
     engines: {node: '>= 0.6.3'}
 
+  less@4.4.1:
+    resolution: {integrity: sha512-X9HKyiXPi0f/ed0XhgUlBeFfxrlDP3xR4M7768Zl+WXLUViuL9AOPPJP4nCV0tgRWvTYvpNmN0SFhZOQzy16PA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   lie@3.3.0:
     resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
 
@@ -1804,6 +1912,9 @@ packages:
   listenercount@1.0.1:
     resolution: {integrity: sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==}
 
+  lodash-es@4.18.1:
+    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
+
   lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
 
@@ -1844,6 +1955,10 @@ packages:
   lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   loupe@3.2.1:
     resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
@@ -1862,6 +1977,15 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  make-dir@2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+
+  mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   mime@3.0.0:
     resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
     engines: {node: '>=10.0.0'}
@@ -1889,6 +2013,9 @@ packages:
     resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
 
@@ -1907,6 +2034,11 @@ packages:
   napi-build-utils@2.0.0:
     resolution: {integrity: sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==}
 
+  needle@3.5.0:
+    resolution: {integrity: sha512-jaQyPKKk2YokHrEg+vFDYxXIHTCBgiZwSHOoVx/8V3GIBS8/VN6NdVRmg8q1ERtPkMvmOvebsgga4sAj5hls/w==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+
   node-abi@3.95.0:
     resolution: {integrity: sha512-T9iGctuocf0qIWFFOTxPzjT5q0SILqaBYXt272tlBHvTKC5+3JnkMirLxNJNkXHtFyBjU2Jx+NL4Zipr0B/c6Q==}
     engines: {node: '>=10'}
@@ -1927,6 +2059,10 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
   on-exit-leak-free@2.1.2:
     resolution: {integrity: sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==}
     engines: {node: '>=14.0.0'}
@@ -1937,6 +2073,10 @@ packages:
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
+  parse-node-version@1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+
   path-expression-matcher@1.6.2:
     resolution: {integrity: sha512-enSlaiat05iasnzmgNxRj8reFdj3puY2QpNgP1aPIaVfT6nn9ICuPoFlKHk8EN22HcwewshO+mN2DGbkCEOtqQ==}
     engines: {node: '>=14.0.0'}
@@ -1966,6 +2106,9 @@ packages:
   pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
 
+  performance-now@2.1.0:
+    resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1973,6 +2116,10 @@ packages:
     resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
     engines: {node: '>=12'}
 
+  pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+
   pino-abstract-transport@3.0.0:
     resolution: {integrity: sha512-wlfUczU+n7Hy/Ha5j9a/gZNy7We5+cXp8YL+X+PG8S0KXxw7n/JXA3c46Y0zQznIJ83URJiwy7Lh56WLokNuxg==}
 
@@ -2016,12 +2163,21 @@ packages:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
 
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  prr@1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+
   pump@3.0.4:
     resolution: {integrity: sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==}
 
   quick-format-unescaped@4.0.4:
     resolution: {integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==}
 
+  raf@3.4.1:
+    resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==}
+
   rc@1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
@@ -2031,10 +2187,54 @@ packages:
     peerDependencies:
       react: ^19.2.8
 
+  react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  react-redux@9.2.0:
+    resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
+
   react-refresh@0.18.0:
     resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
     engines: {node: '>=0.10.0'}
 
+  react-router-dom@7.18.3:
+    resolution: {integrity: sha512-ytVbyBBM7vMfRCam25r0WMhSVSom909A8p+8m0/f1w853dz/xfFu6etAT2SEbVoSnI+ZoPRDqIsQXVT89gp7kg==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+
+  react-router@7.18.3:
+    resolution: {integrity: sha512-gyXgtdr5uACJ5b1Q4udzjVV+tb/rlHIMJKuJ0e89R4Kzgz47z/rgP0dIKxktqIEUhDHluGTPJJH/wRha7CyqsA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
+  react-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+
   react@19.2.8:
     resolution: {integrity: sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==}
     engines: {node: '>=0.10.0'}
@@ -2064,6 +2264,17 @@ packages:
   real-require@1.0.0:
     resolution: {integrity: sha512-P4nbQYQfePJxRSmY+v/KINxVucm4NF3p3s7pJveMTtom52FR4YGltUQLB8idDXwDDWW+eYrWDFbuzUnjoWHF7g==}
 
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -2072,6 +2283,9 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  reselect@5.3.0:
+    resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
+
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
@@ -2113,6 +2327,13 @@ packages:
     resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
     engines: {node: '>=10'}
 
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sax@1.6.1:
+    resolution: {integrity: sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==}
+    engines: {node: '>=11.0.0'}
+
   saxes@5.0.1:
     resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
     engines: {node: '>=10'}
@@ -2123,6 +2344,10 @@ packages:
   secure-json-parse@4.1.0:
     resolution: {integrity: sha512-l4KnYfEyqYJxDwlNVyRfO2E4NTHfMKAWdUuA8J0yve2Dz/E/PdBepY03RvyJpssIpRFwJoCD55wA+mEDs6ByWA==}
 
+  semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -2171,9 +2396,15 @@ packages:
   simple-get@4.0.1:
     resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
 
+  size-sensor@1.0.3:
+    resolution: {integrity: sha512-+k9mJ2/rQMiRmQUcjn+qznch260leIXY8r4FyYKKyRBO/s5UoeMAHGkCJyE1R/4wrIhTJONfyloY55SkE7ve3A==}
+
   sonic-boom@4.2.1:
     resolution: {integrity: sha512-w6AxtubXa2wTXAUsZMMWERrsIRAdrK0Sc+FUytWvYAhBJLyuI4llrMIC1DtlNSdI99EI86KZum2MMq3EAZlF9Q==}
 
+  sortablejs@1.15.7:
+    resolution: {integrity: sha512-Kk8wLQPlS+yi1ZEf48a4+fzHa4yxjC30M/Sr2AnQu+f/MPwvvX9XjZ6OWejiz8crBsLwSq8GHqaxaET7u6ux0A==}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -2244,6 +2475,18 @@ packages:
   tar-stream@3.2.1:
     resolution: {integrity: sha512-nqsEO8zLZJvrOMdEwkA0QdCLFbetHMn95Zqu4fKwX+hkaTWJPZZOrxx/PwtxoK0MMGQmBQNRW3CPs8IFYQz4cQ==}
 
+  tdesign-icons-react@0.6.11:
+    resolution: {integrity: sha512-zH9Wr7QvX5y3WRF9hvm25ci04SLaPHB9SPN2FfWMHQf9f5ITmli+3abJkGwcePTeTYE4vmNBnAy6dxRSMCui1g==}
+    peerDependencies:
+      react: '>=16.13.1'
+      react-dom: '>=16.13.1'
+
+  tdesign-react@1.18.2:
+    resolution: {integrity: sha512-cjM9qVbMZpguigWkScOG27b8+T7WIx5r4M8z4da5nnPrn38vLUwMMwYBeP+VHJUKEdlHjcPUb8rSiXUCivslKw==}
+    peerDependencies:
+      react: '>=16.13.1'
+      react-dom: '>=16.13.1'
+
   teex@1.0.1:
     resolution: {integrity: sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==}
 
@@ -2298,6 +2541,12 @@ packages:
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
+  tslib@2.3.1:
+    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -2326,6 +2575,11 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -2333,6 +2587,10 @@ packages:
     resolution: {integrity: sha512-vIYxrBCC/N/K+Js3qSN88go7kIfNPssr/hHCesKCQNAjmgvYS2oqr69kIufEG+O4+PfezOH4EbIeHCfFov8ZgQ==}
     hasBin: true
 
+  validator@13.15.35:
+    resolution: {integrity: sha512-TQ5pAGhd5whStmqWvYF4OjQROlmv9SMFVt37qoCBdqRffuuklWYQlCNnEs2ZaIBD1kZRNnikiZOS1eqgkar0iw==}
+    engines: {node: '>= 0.10'}
+
   vite-node@3.2.4:
     resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -2460,6 +2718,9 @@ packages:
   zod@4.4.3:
     resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
+  zrender@6.1.0:
+    resolution: {integrity: sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==}
+
 snapshots:
 
   '@babel/code-frame@7.29.7':
@@ -2551,6 +2812,10 @@ snapshots:
       '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.29.7
 
+  '@babel/runtime@7.26.10':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
   '@babel/template@7.29.7':
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -2899,6 +3164,8 @@ snapshots:
       fastq: 1.20.2
       glob: 13.0.6
 
+  '@fontsource-variable/plus-jakarta-sans@5.3.0': {}
+
   '@img/colour@1.1.0': {}
 
   '@img/sharp-darwin-arm64@0.35.4':
@@ -3047,6 +3314,20 @@ snapshots:
     dependencies:
       playwright: 1.62.1
 
+  '@popperjs/core@2.11.8': {}
+
+  '@reduxjs/toolkit@2.12.0(react-redux@9.2.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1))(react@19.2.8)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@standard-schema/utils': 0.3.0
+      immer: 11.1.18
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.3.0
+    optionalDependencies:
+      react: 19.2.8
+      react-redux: 9.2.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1)
+
   '@rolldown/pluginutils@1.0.0-rc.3': {}
 
   '@rollup/rollup-android-arm-eabi@4.63.0':
@@ -3124,6 +3405,10 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.63.0':
     optional: true
 
+  '@standard-schema/spec@1.1.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
   '@types/archiver@8.0.0':
     dependencies:
       '@types/node': 24.13.3
@@ -3181,11 +3466,17 @@ snapshots:
     dependencies:
       '@types/node': 24.13.3
 
+  '@types/sortablejs@1.15.9': {}
+
+  '@types/use-sync-external-store@0.0.6': {}
+
+  '@types/validator@13.15.10': {}
+
   '@types/yauzl@2.10.3':
     dependencies:
       '@types/node': 24.13.3
 
-  '@vitejs/plugin-react@5.2.0(vite@7.3.6(@types/node@24.13.3)(tsx@4.23.12))':
+  '@vitejs/plugin-react@5.2.0(vite@7.3.6(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12))':
     dependencies:
       '@babel/core': 7.29.7
       '@babel/plugin-transform-react-jsx-self': 7.29.7(@babel/core@7.29.7)
@@ -3193,7 +3484,7 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-rc.3
       '@types/babel__core': 7.20.5
       react-refresh: 0.18.0
-      vite: 7.3.6(@types/node@24.13.3)(tsx@4.23.12)
+      vite: 7.3.6(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12)
     transitivePeerDependencies:
       - supports-color
 
@@ -3205,13 +3496,13 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.7(vite@7.3.6(@types/node@24.13.3)(tsx@4.23.12))':
+  '@vitest/mocker@3.2.7(vite@7.3.6(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12))':
     dependencies:
       '@vitest/spy': 3.2.7
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.3.6(@types/node@24.13.3)(tsx@4.23.12)
+      vite: 7.3.6(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12)
 
   '@vitest/pretty-format@3.2.7':
     dependencies:
@@ -3463,6 +3754,8 @@ snapshots:
 
   chownr@1.1.4: {}
 
+  classnames@2.5.1: {}
+
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
@@ -3509,6 +3802,10 @@ snapshots:
 
   cookie@2.0.1: {}
 
+  copy-anything@2.0.6:
+    dependencies:
+      is-what: 3.14.1
+
   core-util-is@1.0.3: {}
 
   crc-32@1.2.2: {}
@@ -3536,6 +3833,8 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  dayjs@1.11.10: {}
+
   dayjs@1.11.23: {}
 
   debug@4.4.3:
@@ -3556,6 +3855,11 @@ snapshots:
 
   detect-libc@2.1.2: {}
 
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.26.10
+      csstype: 3.2.3
+
   drizzle-kit@0.31.10:
     dependencies:
       '@drizzle-team/brocli': 0.10.2
@@ -3572,6 +3876,18 @@ snapshots:
     dependencies:
       readable-stream: 2.3.8
 
+  echarts-for-react@3.0.6(echarts@6.1.0)(react@19.2.8):
+    dependencies:
+      echarts: 6.1.0
+      fast-deep-equal: 3.1.3
+      react: 19.2.8
+      size-sensor: 1.0.3
+
+  echarts@6.1.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.1.0
+
   electron-to-chromium@1.5.415: {}
 
   emoji-regex@8.0.0: {}
@@ -3580,6 +3896,11 @@ snapshots:
     dependencies:
       once: 1.4.0
 
+  errno@0.1.8:
+    dependencies:
+      prr: 1.0.1
+    optional: true
+
   es-module-lexer@1.7.0: {}
 
   esbuild@0.18.20:
@@ -3831,6 +4152,10 @@ snapshots:
 
   helmet@8.3.0: {}
 
+  hoist-non-react-statics@3.3.2:
+    dependencies:
+      react-is: 16.13.1
+
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -3839,10 +4164,20 @@ snapshots:
       statuses: 2.0.2
       toidentifier: 1.0.1
 
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+    optional: true
+
   ieee754@1.2.1: {}
 
+  image-size@0.5.5:
+    optional: true
+
   immediate@3.0.6: {}
 
+  immer@11.1.18: {}
+
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -3860,6 +4195,8 @@ snapshots:
 
   is-unsafe@2.0.2: {}
 
+  is-what@3.14.1: {}
+
   isarray@1.0.0: {}
 
   isexe@2.0.0: {}
@@ -3889,6 +4226,20 @@ snapshots:
     dependencies:
       readable-stream: 2.3.8
 
+  less@4.4.1:
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.8.1
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.11
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.5.0
+      source-map: 0.6.1
+
   lie@3.3.0:
     dependencies:
       immediate: 3.0.6
@@ -3901,6 +4252,8 @@ snapshots:
 
   listenercount@1.0.1: {}
 
+  lodash-es@4.18.1: {}
+
   lodash.defaults@4.2.0: {}
 
   lodash.difference@4.5.0: {}
@@ -3927,6 +4280,10 @@ snapshots:
 
   lodash.uniq@4.5.0: {}
 
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
   loupe@3.2.1: {}
 
   lru-cache@11.5.2: {}
@@ -3943,6 +4300,15 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  make-dir@2.1.0:
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.2
+    optional: true
+
+  mime@1.6.0:
+    optional: true
+
   mime@3.0.0: {}
 
   mimic-response@3.1.0: {}
@@ -3963,6 +4329,8 @@ snapshots:
 
   minipass@7.1.3: {}
 
+  mitt@3.0.1: {}
+
   mkdirp-classic@0.5.3: {}
 
   mkdirp@0.5.6:
@@ -3975,6 +4343,12 @@ snapshots:
 
   napi-build-utils@2.0.0: {}
 
+  needle@3.5.0:
+    dependencies:
+      iconv-lite: 0.6.3
+      sax: 1.6.1
+    optional: true
+
   node-abi@3.95.0:
     dependencies:
       semver: 7.8.5
@@ -3987,6 +4361,8 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
+  object-assign@4.1.1: {}
+
   on-exit-leak-free@2.1.2: {}
 
   once@1.4.0:
@@ -3995,6 +4371,8 @@ snapshots:
 
   pako@1.0.11: {}
 
+  parse-node-version@1.0.1: {}
+
   path-expression-matcher@1.6.2: {}
 
   path-is-absolute@1.0.1: {}
@@ -4019,10 +4397,15 @@ snapshots:
 
   pend@1.2.0: {}
 
+  performance-now@2.1.0: {}
+
   picocolors@1.1.1: {}
 
   picomatch@4.0.7: {}
 
+  pify@4.0.1:
+    optional: true
+
   pino-abstract-transport@3.0.0:
     dependencies:
       split2: 4.2.0
@@ -4080,6 +4463,15 @@ snapshots:
 
   process@0.11.10: {}
 
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
+  prr@1.0.1:
+    optional: true
+
   pump@3.0.4:
     dependencies:
       end-of-stream: 1.4.5
@@ -4087,6 +4479,10 @@ snapshots:
 
   quick-format-unescaped@4.0.4: {}
 
+  raf@3.4.1:
+    dependencies:
+      performance-now: 2.1.0
+
   rc@1.2.8:
     dependencies:
       deep-extend: 0.6.0
@@ -4099,8 +4495,46 @@ snapshots:
       react: 19.2.8
       scheduler: 0.27.0
 
+  react-fast-compare@3.2.2: {}
+
+  react-is@16.13.1: {}
+
+  react-is@18.3.1: {}
+
+  react-redux@9.2.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1):
+    dependencies:
+      '@types/use-sync-external-store': 0.0.6
+      react: 19.2.8
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      redux: 5.0.1
+
   react-refresh@0.18.0: {}
 
+  react-router-dom@7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-router: 7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+
+  react-router@7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      cookie: 1.1.1
+      react: 19.2.8
+      set-cookie-parser: 2.7.2
+    optionalDependencies:
+      react-dom: 19.2.8(react@19.2.8)
+
+  react-transition-group@4.4.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@babel/runtime': 7.26.10
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
   react@19.2.8: {}
 
   readable-stream@2.3.8:
@@ -4139,10 +4573,20 @@ snapshots:
 
   real-require@1.0.0: {}
 
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
+  regenerator-runtime@0.14.1: {}
+
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
 
+  reselect@5.3.0: {}
+
   resolve-pkg-maps@1.0.0: {}
 
   ret@0.5.0: {}
@@ -4201,6 +4645,12 @@ snapshots:
 
   safe-stable-stringify@2.5.0: {}
 
+  safer-buffer@2.1.2:
+    optional: true
+
+  sax@1.6.1:
+    optional: true
+
   saxes@5.0.1:
     dependencies:
       xmlchars: 2.2.0
@@ -4209,6 +4659,9 @@ snapshots:
 
   secure-json-parse@4.1.0: {}
 
+  semver@5.7.2:
+    optional: true
+
   semver@6.3.1: {}
 
   semver@7.8.5: {}
@@ -4270,10 +4723,14 @@ snapshots:
       once: 1.4.0
       simple-concat: 1.0.1
 
+  size-sensor@1.0.3: {}
+
   sonic-boom@4.2.1:
     dependencies:
       atomic-sleep: 1.0.0
 
+  sortablejs@1.15.7: {}
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
@@ -4362,6 +4819,35 @@ snapshots:
       - bare-buffer
       - react-native-b4a
 
+  tdesign-icons-react@0.6.11(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@babel/runtime': 7.26.10
+      classnames: 2.5.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  tdesign-react@1.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@babel/runtime': 7.26.10
+      '@popperjs/core': 2.11.8
+      '@types/sortablejs': 1.15.9
+      '@types/validator': 13.15.10
+      classnames: 2.5.1
+      dayjs: 1.11.10
+      hoist-non-react-statics: 3.3.2
+      lodash-es: 4.18.1
+      mitt: 3.0.1
+      raf: 3.4.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-fast-compare: 3.2.2
+      react-is: 18.3.1
+      react-transition-group: 4.4.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      sortablejs: 1.15.7
+      tdesign-icons-react: 0.6.11(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      tslib: 2.3.1
+      validator: 13.15.35
+
   teex@1.0.1:
     dependencies:
       streamx: 2.28.1
@@ -4406,6 +4892,10 @@ snapshots:
 
   tslib@1.14.1: {}
 
+  tslib@2.3.0: {}
+
+  tslib@2.3.1: {}
+
   tslib@2.8.1: {}
 
   tsx@4.23.12:
@@ -4441,17 +4931,23 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  use-sync-external-store@1.6.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
   util-deprecate@1.0.2: {}
 
   uuid@11.1.1: {}
 
-  vite-node@3.2.4(@types/node@24.13.3)(tsx@4.23.12):
+  validator@13.15.35: {}
+
+  vite-node@3.2.4(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.3.6(@types/node@24.13.3)(tsx@4.23.12)
+      vite: 7.3.6(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -4466,7 +4962,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite@7.3.6(@types/node@24.13.3)(tsx@4.23.12):
+  vite@7.3.6(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12):
     dependencies:
       esbuild: 0.28.2
       fdir: 6.5.0(picomatch@4.0.7)
@@ -4477,13 +4973,14 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.13.3
       fsevents: 2.3.3
+      less: 4.4.1
       tsx: 4.23.12
 
-  vitest@3.2.7(@types/node@24.13.3)(tsx@4.23.12):
+  vitest@3.2.7(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.7
-      '@vitest/mocker': 3.2.7(vite@7.3.6(@types/node@24.13.3)(tsx@4.23.12))
+      '@vitest/mocker': 3.2.7(vite@7.3.6(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12))
       '@vitest/pretty-format': 3.2.7
       '@vitest/runner': 3.2.7
       '@vitest/snapshot': 3.2.7
@@ -4501,8 +4998,8 @@ snapshots:
       tinyglobby: 0.2.17
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.3.6(@types/node@24.13.3)(tsx@4.23.12)
-      vite-node: 3.2.4(@types/node@24.13.3)(tsx@4.23.12)
+      vite: 7.3.6(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12)
+      vite-node: 3.2.4(@types/node@24.13.3)(less@4.4.1)(tsx@4.23.12)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.13.3
@@ -4574,3 +5071,7 @@ snapshots:
       readable-stream: 4.7.0
 
   zod@4.4.3: {}
+
+  zrender@6.1.0:
+    dependencies:
+      tslib: 2.3.0
diff --git a/server/app.ts b/server/app.ts
index 13acd35..33310e1 100644
--- a/server/app.ts
+++ b/server/app.ts
@@ -1,5 +1,5 @@
 import { existsSync } from "node:fs";
-import { lstat, rm, stat, unlink } from "node:fs/promises";
+import { rm, stat, unlink } from "node:fs/promises";
 import path from "node:path";
 import { randomUUID } from "node:crypto";
 import Fastify, { type FastifyReply, type FastifyRequest } from "fastify";
@@ -393,8 +393,8 @@ function filteredExpenses(database: DatabaseContext, config: AppConfig, query: z
   `).all(query.status, start, end, `%${escaped}%`) as ExpenseRow[];
 }
 
-function enqueueFileDeletion(database: DatabaseContext, storagePath: string, reason: string): void {
-  database.sqlite.prepare(`
+function enqueueFileDeletion(sqlite: DatabaseContext["sqlite"], storagePath: string, reason: string): void {
+  sqlite.prepare(`
     INSERT INTO file_deletions(id, storage_path, reason, status, attempts, created_at)
     VALUES (?, ?, ?, 'pending', 0, ?)
   `).run(randomUUID(), storagePath, reason, Date.now());
@@ -426,13 +426,14 @@ function clearReauthFailures(database: DatabaseContext, request: FastifyRequest,
   database.sqlite.prepare("DELETE FROM login_attempts WHERE key_hash=?").run(reauthKey(request, adminId));
 }
 
-async function parseExpenseMultipart(request: FastifyRequest, config: AppConfig): Promise<{ fields: Record<string, string>; files: StagedFile[] }> {
-  const fields: Record<string, string> = {};
-  const files: StagedFile[] = [];
+async function parseExpenseMultipart(request: FastifyRequest, config: AppConfig, options: { allowVersion?: boolean } = {}): Promise<{ fields: Record<string, string>; files: StagedFile[] }> {
+ const fields: Record<string, string> = {};
+ const files: StagedFile[] = [];
+  const allowedFields = new Set(["paidAt", "amount", "note", "invoiceMissingReason", ...(options.allowVersion ? ["version"] : [])]);
   try {
     for await (const part of request.parts()) {
       if (part.type === "field") {
-        if (!["paidAt", "amount", "note", "invoiceMissingReason"].includes(part.fieldname)) {
+        if (!allowedFields.has(part.fieldname)) {
           throw new AppError(400, "UNKNOWN_FIELD", "存在未知表单字段");
         }
         if (part.fieldname in fields) {
@@ -456,18 +457,127 @@ async function parseExpenseMultipart(request: FastifyRequest, config: AppConfig)
   }
 }
 
-async function promoteAll(config: AppConfig, files: StagedFile[]): Promise<Array<StagedFile & { storagePath: string }>> {
+function promotedRelativePath(file: StagedFile): string {
+  return path.join(file.id.slice(0, 2), `${file.id}.${file.extension}`);
+}
+
+async function cleanupPromotedFiles(sqlite: DatabaseContext["sqlite"] | undefined, config: AppConfig, files: Array<StagedFile & { storagePath?: string }>): Promise<void> {
+  await Promise.all(files.map(async (file) => {
+    const relative = file.storagePath || promotedRelativePath(file);
+    try {
+      await unlink(safeStoragePath(config.filesDir, relative));
+    } catch (error) {
+      const code = (error as NodeJS.ErrnoException).code;
+      if (code === "ENOENT") return;
+      if (sqlite) {
+        try { enqueueFileDeletion(sqlite, relative, "attachment_rollback"); } catch { /* database may already be closing */ }
+      }
+    }
+  }));
+}
+
+async function promoteAll(config: AppConfig, files: StagedFile[], sqlite?: DatabaseContext["sqlite"]): Promise<Array<StagedFile & { storagePath: string }>> {
   const promoted: Array<StagedFile & { storagePath: string }> = [];
   try {
     for (const file of files) promoted.push({ ...file, storagePath: await promoteStagedFile(config, file) });
     return promoted;
   } catch (error) {
-    await Promise.all(promoted.map((file) => unlink(safeStoragePath(config.filesDir, file.storagePath)).catch(() => undefined)));
+    // Include the file currently being promoted: rename() may have succeeded
+    // before a directory sync/close error was raised.
+    await cleanupPromotedFiles(sqlite, config, files);
     await discardStaged(files);
     throw error;
   }
 }
 
+async function updateExpenseMultipart(database: DatabaseContext, config: AppConfig, request: FastifyRequest, id: string) {
+  const { fields, files } = await parseExpenseMultipart(request, config, { allowVersion: true });
+  let input: z.infer<typeof expenseUpdateSchema>;
+  try {
+    input = expenseUpdateSchema.parse({
+      paidAt: fields.paidAt,
+      amount: fields.amount,
+      note: fields.note ?? "",
+      invoiceMissingReason: fields.invoiceMissingReason,
+      version: fields.version === undefined ? undefined : Number(fields.version),
+    });
+  } catch (error) {
+    await discardStaged(files);
+    throw error;
+  }
+
+  const before = getExpense(database, id);
+  if (!before) { await discardStaged(files); notFound("账目不存在"); }
+  if (before.version !== input.version) { await discardStaged(files); conflict(database, id); }
+  const paymentProofs = files.filter((file) => file.kind === "payment_proof");
+  const invoiceFiles = files.filter((file) => file.kind === "invoice");
+  // Adding an invoice supersedes the previous no-invoice explanation. This
+  // mirrors the standalone attachment endpoint and keeps the two states
+  // mutually exclusive even when a client omits the optional field.
+  const requestedReason = invoiceFiles.length > 0
+    ? null
+    : input.invoiceMissingReason === undefined
+      ? before.invoiceMissingReason
+      : normalizeInvoiceMissingReason(input.invoiceMissingReason);
+  const nextInvoiceCount = Number(before.invoiceCount) + invoiceFiles.length;
+  const nextProofCount = Number(before.paymentProofCount) + paymentProofs.length;
+  if (nextProofCount < 1) { await discardStaged(files); throw new AppError(400, "PAYMENT_PROOF_REQUIRED", "至少需要一张付款凭证"); }
+  try { assertInvoiceCoverage(nextInvoiceCount, requestedReason); } catch (error) { await discardStaged(files); throw error; }
+  const addedBytes = files.reduce((sum, file) => sum + file.sizeBytes, 0);
+  const currentBytes = (database.sqlite.prepare("SELECT COALESCE(SUM(size_bytes),0) AS total FROM attachments WHERE expense_id=?").get(id) as { total: number }).total;
+  if (currentBytes + addedBytes > config.maxRecordBytes) { await discardStaged(files); throw new AppError(413, "RECORD_ATTACHMENTS_TOO_LARGE", "该记录的附件总大小超过限制"); }
+  const globalBytes = (database.sqlite.prepare("SELECT COALESCE(SUM(size_bytes),0) AS total FROM attachments").get() as { total: number }).total;
+  if (globalBytes + addedBytes > config.maxTotalBytes) { await discardStaged(files); throw new AppError(413, "TOTAL_STORAGE_LIMIT", "附件存储空间已达到上限，请先清理旧数据"); }
+  const paidAt = Date.parse(input.paidAt);
+  if (!Number.isFinite(paidAt)) { await discardStaged(files); throw new AppError(400, "VALIDATION_ERROR", "支付时间无效"); }
+  let amountCents: number;
+  try {
+    amountCents = amountToCents(input.amount);
+  } catch {
+    await discardStaged(files);
+    throw new AppError(400, "VALIDATION_ERROR", "金额必须为大于零且最多两位小数");
+  }
+  const promoted = await promoteAll(config, files, database.sqlite);
+  const now = Date.now();
+  try {
+    database.sqlite.transaction(() => {
+      const current = getExpense(database, id);
+      if (!current) notFound("账目不存在");
+      if (current.version !== input.version) conflict(database, id);
+      const invoiceCount = Number(current.invoiceCount) + invoiceFiles.length;
+      const proofCount = Number(current.paymentProofCount) + paymentProofs.length;
+      if (proofCount < 1) throw new AppError(400, "PAYMENT_PROOF_REQUIRED", "至少需要一张付款凭证");
+      const invoiceMissingReason = invoiceFiles.length > 0 ? null : (input.invoiceMissingReason === undefined ? current.invoiceMissingReason : normalizeInvoiceMissingReason(input.invoiceMissingReason));
+      assertInvoiceCoverage(invoiceCount, invoiceMissingReason);
+      const liveBytes = (database.sqlite.prepare("SELECT COALESCE(SUM(size_bytes),0) AS total FROM attachments WHERE expense_id=?").get(id) as { total: number }).total;
+      if (liveBytes + addedBytes > config.maxRecordBytes) throw new AppError(413, "RECORD_ATTACHMENTS_TOO_LARGE", "该记录的附件总大小超过限制");
+      const allBytes = (database.sqlite.prepare("SELECT COALESCE(SUM(size_bytes),0) AS total FROM attachments").get() as { total: number }).total;
+      if (allBytes + addedBytes > config.maxTotalBytes) throw new AppError(413, "TOTAL_STORAGE_LIMIT", "附件存储空间已达到上限，请先清理旧数据");
+      const updated = database.sqlite.prepare("UPDATE expenses SET paid_at=?, amount_cents=?, note=?, invoice_missing_reason=?, version=version+1, updated_at=?, updated_by=? WHERE id=? AND version=? AND deleted_at IS NULL")
+        .run(paidAt, amountCents, input.note, invoiceMissingReason, now, request.auth!.admin.id, id, input.version);
+      if (updated.changes !== 1) conflict(database, id);
+      const insert = database.sqlite.prepare("INSERT INTO attachments(id, expense_id, kind, storage_path, original_name, mime_type, size_bytes, sha256, created_at, created_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
+      for (const file of promoted) insert.run(file.id, id, file.kind, file.storagePath, file.originalName, file.mimeType, file.sizeBytes, file.sha256, now, request.auth!.admin.id);
+      writeAudit(database.sqlite, {
+        requestId: request.id, actorAdminId: request.auth!.admin.id, actorUsername: request.auth!.admin.username,
+        action: "expense.updated", targetType: "expense", targetId: id,
+        before: { paidAt: current.paidAt, amountCents: current.amountCents, note: current.note, invoiceMissingReason: current.invoiceMissingReason, version: current.version },
+        after: { paidAt, amountCents, note: input.note, invoiceMissingReason, version: input.version + 1, attachmentCount: promoted.length },
+      });
+      if (promoted.length > 0) writeAudit(database.sqlite, {
+        requestId: request.id, actorAdminId: request.auth!.admin.id, actorUsername: request.auth!.admin.username,
+        action: "expense.attachments_added", targetType: "expense", targetId: id,
+        before: { invoiceCount: Number(current.invoiceCount), paymentProofCount: Number(current.paymentProofCount), version: current.version },
+        after: { invoiceCount, paymentProofCount: proofCount, version: input.version + 1, files: promoted.map((file) => ({ id: file.id, name: file.originalName, size: file.sizeBytes })) },
+      });
+    }).immediate();
+  } catch (error) {
+    await cleanupPromotedFiles(database.sqlite, config, promoted);
+    throw error;
+  }
+  return { expense: publicExpense(database, getExpense(database, id)!, true) };
+}
+
 function conflict(database: DatabaseContext, id: string): never {
   const current = getExpense(database, id, true);
   if (!current) notFound("账目不存在");
@@ -836,7 +946,11 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
 
   app.post("/api/update/check", { preHandler: guard(database, config), bodyLimit: 32 * 1024 }, async (request, reply) => {
     try {
-      enforceUpdateCooldown(database.sqlite, config, request.auth!.admin.id, "check", reply);
+      // Disabled/dev installs do not contact a release endpoint, so repeated
+      // checks are local status reads and should remain immediately usable.
+      if (config.updateStrategy !== "disabled") {
+        enforceUpdateCooldown(database.sqlite, config, request.auth!.admin.id, "check", reply);
+      }
       const result = await checkForUpdate(database.sqlite, config);
       writeAudit(database.sqlite, {
         requestId: request.id,
@@ -1067,7 +1181,7 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
       await discardStaged(files);
       throw new AppError(400, "VALIDATION_ERROR", "金额必须为大于零且最多两位小数");
     }
-    const promoted = await promoteAll(config, files);
+    const promoted = await promoteAll(config, files, database.sqlite);
     const id = randomUUID();
     const now = Date.now();
     try {
@@ -1110,7 +1224,7 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
         });
       }).immediate();
     } catch (error) {
-      await Promise.all(promoted.map((file) => unlink(safeStoragePath(config.filesDir, file.storagePath)).catch(() => undefined)));
+      await cleanupPromotedFiles(database.sqlite, config, promoted);
       throw error;
     }
     const created = getExpense(database, id)!;
@@ -1119,6 +1233,9 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
 
   app.patch("/api/expenses/:id", { preHandler: guard(database, config) }, async (request) => {
     const id = z.string().uuid().parse((request.params as { id: string }).id);
+    if (request.isMultipart()) {
+      return updateExpenseMultipart(database, config, request, id);
+    }
     const input = expenseUpdateSchema.parse(request.body);
     const paidAt = Date.parse(input.paidAt);
     if (!Number.isFinite(paidAt)) throw new AppError(400, "VALIDATION_ERROR", "支付时间无效");
@@ -1228,7 +1345,7 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
       throw error;
     }
     if (staged.length < 1) throw new AppError(400, "FILE_REQUIRED", "请选择至少一个附件");
-    const promoted = await promoteAll(config, staged);
+    const promoted = await promoteAll(config, staged, database.sqlite);
     const now = Date.now();
     try {
       database.sqlite.transaction(() => {
@@ -1276,7 +1393,7 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
         });
       }).immediate();
     } catch (error) {
-      await Promise.all(promoted.map((file) => unlink(safeStoragePath(config.filesDir, file.storagePath)).catch(() => undefined)));
+      await cleanupPromotedFiles(database.sqlite, config, promoted);
       throw error;
     }
     return { expense: publicExpense(database, getExpense(database, id)!, true) };
@@ -1315,7 +1432,7 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
       const updated = database.sqlite.prepare("UPDATE expenses SET invoice_missing_reason=?, version=version+1, updated_at=?, updated_by=? WHERE id=? AND version=? AND deleted_at IS NULL")
         .run(nextInvoiceMissingReason, now, request.auth!.admin.id, expense.id, input.version);
       if (updated.changes !== 1) conflict(database, expense.id);
-      enqueueFileDeletion(database, attachment.storagePath, "attachment_deleted");
+      enqueueFileDeletion(database.sqlite, attachment.storagePath, "attachment_deleted");
       writeAudit(database.sqlite, {
         requestId: request.id,
         actorAdminId: request.auth!.admin.id,
@@ -1355,10 +1472,10 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
       WHERE a.id=? AND e.deleted_at IS NULL
     `).get(id) as AttachmentRow | undefined;
     if (!attachment) notFound("附件不存在");
+    let stream: Awaited<ReturnType<typeof fileReadStream>>;
     try {
-      const fileInfo = await lstat(safeStoragePath(config.filesDir, attachment.storagePath));
-      if (!fileInfo.isFile() || fileInfo.isSymbolicLink()) throw new Error("attachment type");
-    } catch {
+      stream = await fileReadStream(config, attachment.storagePath);
+    } catch (error) {
       writeAudit(database.sqlite, {
         requestId: request.id,
         actorAdminId: request.auth!.admin.id,
@@ -1367,9 +1484,9 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
         targetType: "expense",
         targetId: attachment.expenseId,
         outcome: "failure",
-        metadata: { attachmentId: attachment.id, mode: "missing" },
+        metadata: { attachmentId: attachment.id, mode: "unavailable" },
       });
-      throw new AppError(410, "ATTACHMENT_MISSING", "附件文件已不可用");
+      throw error;
     }
     const download = (request.query as { download?: string }).download === "1";
     const inline = !download && (attachment.mimeType.startsWith("image/") || attachment.mimeType === "application/pdf");
@@ -1393,7 +1510,7 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
       reply.header("X-Frame-Options", "SAMEORIGIN");
     }
     reply.header("Content-Disposition", `${inline ? "inline" : "attachment"}; filename*=UTF-8''${encodeURIComponent(attachment.originalName)}`);
-    return reply.send(await fileReadStream(config, attachment.storagePath));
+    return reply.send(stream);
   });
 
   app.delete("/api/expenses/:id", { preHandler: guard(database, config) }, async (request) => {
@@ -1484,7 +1601,7 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
       const current = database.sqlite.prepare("SELECT version, deleted_at AS deletedAt FROM expenses WHERE id=?").get(id) as { version: number; deletedAt: number | null } | undefined;
       if (!current || !current.deletedAt) notFound("回收站中没有该账目");
       if (current.version !== input.version) conflict(database, id);
-      for (const attachment of attachmentRows) enqueueFileDeletion(database, attachment.storagePath, "expense_purged");
+      for (const attachment of attachmentRows) enqueueFileDeletion(database.sqlite, attachment.storagePath, "expense_purged");
       const jobs = database.sqlite.prepare("SELECT id, status, file_path AS filePath, snapshot_json AS snapshotJson FROM export_jobs WHERE status IN ('queued','building','ready')").all() as Array<{ id: string; status: string; filePath: string | null; snapshotJson: string }>;
       for (const job of jobs) {
         const snapshot = JSON.parse(job.snapshotJson) as ExportSnapshot;
@@ -1642,7 +1759,9 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
 
   const hasWeb = existsSync(config.webDir);
   if (hasWeb) {
-    await app.register(fastifyStatic, { root: config.webDir, wildcard: false });
+    // Serve the Vite asset graph as well as the SPA entry. API routes are
+    // registered above and remain authoritative for /api/* paths.
+    await app.register(fastifyStatic, { root: config.webDir, wildcard: true, index: "index.html" });
   }
   // Keep API errors structured even when the production frontend has not been
   // built yet (for example in a clean CI checkout or an API-only process).
diff --git a/server/exporter.ts b/server/exporter.ts
index af19160..08d5859 100644
--- a/server/exporter.ts
+++ b/server/exporter.ts
@@ -89,7 +89,7 @@ async function workbookBuffer(snapshot: ExportSnapshot, config: AppConfig): Prom
     { header: "无发票原因", key: "invoiceMissingReason", width: 44 },
   ];
   sheet.getRow(1).font = { bold: true, color: { argb: "FFFFFFFF" } };
-  sheet.getRow(1).fill = { type: "pattern", pattern: "solid", fgColor: { argb: "FF1F4D43" } };
+  sheet.getRow(1).fill = { type: "pattern", pattern: "solid", fgColor: { argb: "FF175CD3" } };
   sheet.getRow(1).height = 24;
   snapshot.expenses.forEach((expense, index) => {
     const row = sheet.addRow({
@@ -210,7 +210,8 @@ async function buildExportJobOnce(sqlite: Database.Database, config: AppConfig,
     // Never expose filesystem paths, attachment IDs, or raw OS errors through
     // the export status API. Keep a small allowlist of actionable messages.
     const raw = error instanceof Error ? error.message : "";
-    const safe = raw.startsWith("附件校验失败") || raw.includes("ENOENT")
+    const safe = (error as { code?: unknown } | null)?.code === "ATTACHMENT_MISSING"
+      || raw.startsWith("附件校验失败") || raw.includes("ENOENT")
       ? "导出失败：附件文件缺失或校验不通过"
       : "导出失败：服务器无法生成导出文件";
     sqlite.prepare("UPDATE export_jobs SET status='failed', error_message=? WHERE id=? AND status='building'").run(safe, jobId);
diff --git a/server/files.ts b/server/files.ts
index 56e7eae..4e441cd 100644
--- a/server/files.ts
+++ b/server/files.ts
@@ -226,26 +226,47 @@ export async function fileReadStream(config: AppConfig, storagePath: string) {
   return safeReadStream(config.filesDir, storagePath);
 }
 
+function mapReadError(error: unknown): unknown {
+  if (error instanceof AppError) return error;
+  const code = (error as NodeJS.ErrnoException | undefined)?.code;
+  if (code === "ENOENT" || code === "ENOTDIR" || code === "ELOOP") {
+    return new AppError(410, "ATTACHMENT_MISSING", "附件文件已不可用");
+  }
+  return error;
+}
+
 /** Open a private file by descriptor and keep the no-follow guarantee through
  * the subsequent read. Used for both attachment and export downloads. */
 export async function safeReadStream(root: string, relativePath: string) {
-  const handle = await open(safeStoragePath(root, relativePath), fsConstants.O_RDONLY | (fsConstants.O_NOFOLLOW ?? 0));
+  let handle: Awaited<ReturnType<typeof open>>;
+  try {
+    handle = await open(safeStoragePath(root, relativePath), fsConstants.O_RDONLY | (fsConstants.O_NOFOLLOW ?? 0));
+  } catch (error) {
+    throw mapReadError(error);
+  }
   try {
     const info = await handle.stat();
     if (!info.isFile()) throw new AppError(410, "ATTACHMENT_MISSING", "附件文件已不可用");
     return handle.createReadStream({ autoClose: true });
   } catch (error) {
     await handle.close().catch(() => undefined);
-    throw error;
+    throw mapReadError(error);
   }
 }
 
 export async function readStorageFile(config: AppConfig, storagePath: string): Promise<Buffer> {
-  const handle = await open(safeStoragePath(config.filesDir, storagePath), fsConstants.O_RDONLY | (fsConstants.O_NOFOLLOW ?? 0));
+  let handle: Awaited<ReturnType<typeof open>>;
+  try {
+    handle = await open(safeStoragePath(config.filesDir, storagePath), fsConstants.O_RDONLY | (fsConstants.O_NOFOLLOW ?? 0));
+  } catch (error) {
+    throw mapReadError(error);
+  }
   try {
     const info = await handle.stat();
     if (!info.isFile()) throw new AppError(410, "ATTACHMENT_MISSING", "附件文件已不可用");
     return await handle.readFile();
+  } catch (error) {
+    throw mapReadError(error);
   } finally {
     await handle.close();
   }
diff --git a/shared/contracts.ts b/shared/contracts.ts
index edfee52..a286567 100644
--- a/shared/contracts.ts
+++ b/shared/contracts.ts
@@ -95,7 +95,9 @@ export type UpdateJobStatus = z.infer<typeof updateJobStatusSchema>;
 
 /** The browser never supplies release URLs or filesystem paths. */
 export const updateApplySchema = z.object({
-  version: z.string().trim().regex(/^v?(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)(?:-[0-9A-Za-z.-]+)?$/),
+  // Keep the browser contract aligned with server/update.ts' SemVer parser,
+  // including optional prerelease and build metadata segments.
+  version: z.string().trim().regex(/^v?(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)(?:-(?:0|[1-9A-Za-z-][0-9A-Za-z-]*)(?:\.(?:0|[1-9A-Za-z-][0-9A-Za-z-]*))*)?(?:\+[0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*)?$/),
   confirm: z.literal(true),
 }).strict();
 
diff --git a/tests/api.test.ts b/tests/api.test.ts
index 022e3d6..576c980 100644
--- a/tests/api.test.ts
+++ b/tests/api.test.ts
@@ -392,4 +392,98 @@ describe("TallyNote API", () => {
     expect(deleted.json().expense.invoiceCount).toBe(0);
     expect(deleted.json().expense.invoiceMissingReason).toBe("原始发票文件已丢失，无法重新取得");
   });
+
+  it("组合 multipart 编辑一次提交字段和附件，并只递增一次版本", async () => {
+    const session = await login();
+    const initial = multipart([
+      { name: "paidAt", value: "2026-08-27T12:00:00.000Z" },
+      { name: "amount", value: "12.34" },
+      { name: "note", value: "组合编辑前" },
+      { name: "invoiceMissingReason", value: "供应商暂未开票" },
+      { name: "paymentProofs", filename: "proof-a.png", contentType: "image/png", data: tinyPng },
+    ]);
+    const created = await app.inject({
+      method: "POST",
+      url: "/api/expenses",
+      headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf, "content-type": initial.contentType },
+      payload: initial.body,
+    });
+    expect(created.statusCode).toBe(201);
+    const before = created.json().expense as { id: string; version: number; paymentProofCount: number; invoiceCount: number };
+
+    const edit = multipart([
+      { name: "paidAt", value: "2026-08-28T13:30:00.000Z" },
+      { name: "amount", value: "18.90" },
+      { name: "note", value: "组合编辑后" },
+      { name: "version", value: String(before.version) },
+      { name: "paymentProofs", filename: "proof-b.png", contentType: "image/png", data: tinyPng },
+      { name: "invoices", filename: "invoice.xml", contentType: "application/xml", data: Buffer.from("<invoice />") },
+    ]);
+    const updated = await app.inject({
+      method: "PATCH",
+      url: `/api/expenses/${before.id}`,
+      headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf, "content-type": edit.contentType },
+      payload: edit.body,
+    });
+    expect(updated.statusCode).toBe(200);
+    const result = updated.json().expense as { version: number; amountCents: number; note: string; invoiceMissingReason: string | null; paymentProofCount: number; invoiceCount: number; attachments: Array<{ originalName: string }> };
+    expect(result).toMatchObject({ version: before.version + 1, amountCents: 1890, note: "组合编辑后", invoiceMissingReason: null, paymentProofCount: 2, invoiceCount: 1 });
+    expect(result.attachments.map((item) => item.originalName)).toEqual(expect.arrayContaining(["proof-a.png", "proof-b.png", "invoice.xml"]));
+    const auditCount = (database.sqlite.prepare("SELECT COUNT(*) AS count FROM audit_events WHERE target_id=? AND action='expense.updated'").get(before.id) as { count: number }).count;
+    expect(auditCount).toBe(1);
+  });
+
+  it("组合编辑版本冲突或金额非法时不落附件也不改变账目", async () => {
+    const session = await login();
+    const initial = multipart([
+      { name: "paidAt", value: "2026-08-27T12:00:00.000Z" },
+      { name: "amount", value: "12.34" },
+      { name: "invoiceMissingReason", value: "暂时无法取得" },
+      { name: "paymentProofs", filename: "proof.png", contentType: "image/png", data: tinyPng },
+    ]);
+    const created = await app.inject({
+      method: "POST",
+      url: "/api/expenses",
+      headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf, "content-type": initial.contentType },
+      payload: initial.body,
+    });
+    const before = created.json().expense as { id: string; version: number; amountCents: number; paymentProofCount: number };
+    const conflictForm = multipart([
+      { name: "paidAt", value: "2026-08-29T12:00:00.000Z" },
+      { name: "amount", value: "20.00" },
+      { name: "note", value: "不应保存" },
+      { name: "invoiceMissingReason", value: "暂时无法取得" },
+      { name: "version", value: String(before.version + 1) },
+      { name: "paymentProofs", filename: "orphan.png", contentType: "image/png", data: tinyPng },
+    ]);
+    const conflictResponse = await app.inject({
+      method: "PATCH",
+      url: `/api/expenses/${before.id}`,
+      headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf, "content-type": conflictForm.contentType },
+      payload: conflictForm.body,
+    });
+    expect(conflictResponse.statusCode).toBe(409);
+    const afterConflict = app.inject({ method: "GET", url: `/api/expenses/${before.id}`, headers: { cookie: session.cookies } });
+    const current = (await afterConflict).json().expense;
+    expect(current).toMatchObject({ version: before.version, amountCents: before.amountCents, paymentProofCount: before.paymentProofCount });
+    expect(current.attachments.some((item: { originalName: string }) => item.originalName === "orphan.png")).toBe(false);
+
+    const invalidForm = multipart([
+      { name: "paidAt", value: "2026-08-29T12:00:00.000Z" },
+      { name: "amount", value: "1000000000000.00" },
+      { name: "invoiceMissingReason", value: "暂时无法取得" },
+      { name: "version", value: String(before.version) },
+      { name: "paymentProofs", filename: "invalid.png", contentType: "image/png", data: tinyPng },
+    ]);
+    const invalidResponse = await app.inject({
+      method: "PATCH",
+      url: `/api/expenses/${before.id}`,
+      headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf, "content-type": invalidForm.contentType },
+      payload: invalidForm.body,
+    });
+    expect(invalidResponse.statusCode).toBe(400);
+    const afterInvalid = (await app.inject({ method: "GET", url: `/api/expenses/${before.id}`, headers: { cookie: session.cookies } })).json().expense;
+    expect(afterInvalid).toMatchObject({ version: before.version, amountCents: before.amountCents, paymentProofCount: before.paymentProofCount });
+    expect(afterInvalid.attachments.some((item: { originalName: string }) => item.originalName === "invalid.png")).toBe(false);
+  });
 });
diff --git a/tests/core.test.ts b/tests/core.test.ts
index ed90e43..bfd10f3 100644
--- a/tests/core.test.ts
+++ b/tests/core.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { amountToCents, centsToAmount, exportRequestSchema } from "../shared/contracts.js";
+import { amountToCents, centsToAmount, exportRequestSchema, updateApplySchema } from "../shared/contracts.js";
 import { zonedMonthBounds } from "../server/app.js";
 import { safeExcelText } from "../server/exporter.js";
 import { safeStoragePath, sanitizeOriginalName } from "../server/files.js";
@@ -30,6 +30,13 @@ describe("导出选项", () => {
   });
 });
 
+describe("更新版本", () => {
+  it("接受合法的 prerelease 和 build metadata", () => {
+    expect(updateApplySchema.parse({ version: "1.2.3+build.5", confirm: true }).version).toBe("1.2.3+build.5");
+    expect(updateApplySchema.parse({ version: "v1.2.3-alpha.1+build.5", confirm: true }).version).toBe("v1.2.3-alpha.1+build.5");
+  });
+});
+
 describe("文件和导出安全", () => {
   it("不让用户文件名参与路径", () => {
     expect(sanitizeOriginalName("../../秘密\u0000.png")).toBe("秘密.png");
diff --git a/tests/e2e/smoke.spec.ts b/tests/e2e/smoke.spec.ts
index 7fedfba..26117f4 100644
--- a/tests/e2e/smoke.spec.ts
+++ b/tests/e2e/smoke.spec.ts
@@ -2,8 +2,29 @@ import { expect, test } from "@playwright/test";
 
 test("未登录时显示中文登录入口", async ({ page }) => {
   await page.goto("/");
-  await expect(page.getByText("TallyNote")).toBeVisible();
-  await expect(page.getByLabel("用户名")).toBeVisible();
-  await expect(page.getByLabel("密码")).toBeVisible();
+  await expect(page.getByRole("heading", { name: "登录到 TallyNote", exact: true })).toBeVisible();
+  await expect(page.locator(".tn-login-header")).toHaveCount(0);
+  await expect(page.getByLabel("用户名", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("密码", { exact: true })).toBeVisible();
   await expect(page.getByRole("button", { name: "登录" })).toBeVisible();
 });
+
+for (const viewport of [
+  { width: 320, height: 800 },
+  { width: 375, height: 812 },
+  { width: 768, height: 1024 },
+]) {
+  test(`未登录入口适配 ${viewport.width}px`, async ({ page }) => {
+    await page.setViewportSize(viewport);
+    await page.goto("/");
+    await expect(page.getByRole("heading", { name: "登录到 TallyNote", exact: true })).toBeVisible();
+    await expect(page.getByLabel("用户名", { exact: true })).toBeVisible();
+    await expect(page.getByLabel("密码", { exact: true })).toBeVisible();
+    await expect(page.getByRole("button", { name: "登录" })).toBeVisible();
+    const width = await page.evaluate(() => ({
+      scrollWidth: document.documentElement.scrollWidth,
+      clientWidth: document.documentElement.clientWidth,
+    }));
+    expect(width.scrollWidth).toBeLessThanOrEqual(width.clientWidth);
+  });
+}
diff --git a/tests/update-api.test.ts b/tests/update-api.test.ts
index 6442ddf..2519a38 100644
--- a/tests/update-api.test.ts
+++ b/tests/update-api.test.ts
@@ -59,10 +59,10 @@ describe("更新 API", () => {
 
   function mockRelease() {
     const digest = "c".repeat(64);
-    const asset = `tallynote-1.1.0-${detectPlatform().target}-glibc.tar.gz`;
+    const asset = `tallynote-1.1.1-${detectPlatform().target}-glibc.tar.gz`;
     globalThis.fetch = (async (input: string | URL) => input.toString().endsWith("SHA256SUMS")
       ? new Response(`${digest}  ${asset}\n`, { status: 200 })
-      : new Response(JSON.stringify({ tag_name: "v1.1.0", assets: [{ name: "SHA256SUMS", browser_download_url: "https://updates.example/SHA256SUMS" }, { name: asset, browser_download_url: `https://updates.example/${asset}` }] }), { status: 200 })) as typeof fetch;
+      : new Response(JSON.stringify({ tag_name: "v1.1.1", assets: [{ name: "SHA256SUMS", browser_download_url: "https://updates.example/SHA256SUMS" }, { name: asset, browser_download_url: `https://updates.example/${asset}` }] }), { status: 200 })) as typeof fetch;
   }
 
   it("检查 release、创建受保护请求文件并拒绝重复任务", async () => {
@@ -70,21 +70,21 @@ describe("更新 API", () => {
     mockRelease();
     const checked = await app.inject({ method: "POST", url: "/api/update/check", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: {} });
     expect(checked.statusCode).toBe(200);
-    expect(checked.json().latest).toMatchObject({ version: "1.1.0", compatible: true, integrityReady: true, isNewer: true });
+    expect(checked.json().latest).toMatchObject({ version: "1.1.1", compatible: true, integrityReady: true, isNewer: true });
     expect(checked.headers["cache-control"]).toBe("no-store");
     const tooSoon = await app.inject({ method: "POST", url: "/api/update/check", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: {} });
     expect(tooSoon.statusCode).toBe(429);
     expect(tooSoon.headers["retry-after"]).toBeDefined();
 
-    const applied = await app.inject({ method: "POST", url: "/api/update/apply", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: { version: "1.1.0", confirm: true } });
+    const applied = await app.inject({ method: "POST", url: "/api/update/apply", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: { version: "1.1.1", confirm: true } });
     expect(applied.statusCode).toBe(202);
     const jobId = applied.json().job.id as string;
     const request = JSON.parse(readFileSync(config.updateRequestPath, "utf8")) as { jobId: string; expectedSha256: string; currentLink: string };
-    expect(request).toMatchObject({ jobId, expectedSha256: "c".repeat(64), currentLink: config.currentLink });
+    expect(request).toMatchObject({ jobId, version: "1.1.1", expectedSha256: "c".repeat(64), currentLink: config.currentLink });
     expect(statSync(config.updateRequestPath).mode & 0o777).toBe(0o600);
 
     mockRelease();
-    const duplicate = await app.inject({ method: "POST", url: "/api/update/apply", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: { version: "1.1.0", confirm: true } });
+    const duplicate = await app.inject({ method: "POST", url: "/api/update/apply", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: { version: "1.1.1", confirm: true } });
     expect(duplicate.statusCode).toBe(409);
     expect(duplicate.json().error.code).toBe("UPDATE_IN_PROGRESS");
     const status = await app.inject({ method: "GET", url: "/api/update/status", headers: { cookie: session.cookies } });
@@ -95,7 +95,7 @@ describe("更新 API", () => {
 
   it("缺少确认或未启用 systemd 时不接受更新", async () => {
     const session = await login();
-    const invalid = await app.inject({ method: "POST", url: "/api/update/apply", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: { version: "1.1.0" } });
+    const invalid = await app.inject({ method: "POST", url: "/api/update/apply", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: { version: "1.1.1" } });
     expect(invalid.statusCode).toBe(400);
     process.env.TALLYNOTE_UPDATE_STRATEGY = "disabled";
     const disabledConfig = loadConfig();
@@ -108,7 +108,7 @@ describe("更新 API", () => {
     mockRelease();
     const checked = await app.inject({ method: "POST", url: "/api/update/check", headers: { origin: config.publicOrigin, cookie: owner.cookies, "x-csrf-token": owner.csrf }, payload: {} });
     expect(checked.statusCode).toBe(200);
-    const applied = await app.inject({ method: "POST", url: "/api/update/apply", headers: { origin: config.publicOrigin, cookie: owner.cookies, "x-csrf-token": owner.csrf }, payload: { version: "1.1.0", confirm: true } });
+    const applied = await app.inject({ method: "POST", url: "/api/update/apply", headers: { origin: config.publicOrigin, cookie: owner.cookies, "x-csrf-token": owner.csrf }, payload: { version: "1.1.1", confirm: true } });
     expect(applied.statusCode).toBe(202);
     const jobId = applied.json().job.id as string;
     database.sqlite.prepare("UPDATE update_jobs SET error_message=? WHERE id=?").run("/var/lib/tallynote/secret-command-output", jobId);
@@ -126,7 +126,7 @@ describe("更新 API", () => {
   it("应用前重新校验失败时写入失败审计", async () => {
     const session = await login("update-audit");
     globalThis.fetch = (async () => new Response("upstream unavailable", { status: 503 })) as typeof fetch;
-    const response = await app.inject({ method: "POST", url: "/api/update/apply", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: { version: "1.1.0", confirm: true } });
+    const response = await app.inject({ method: "POST", url: "/api/update/apply", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: { version: "1.1.1", confirm: true } });
     expect(response.statusCode).toBe(502);
     const audit = database.sqlite.prepare("SELECT outcome FROM audit_events WHERE action='update.apply_requested' ORDER BY id DESC LIMIT 1").get() as { outcome: string } | undefined;
     expect(audit?.outcome).toBe("failure");
diff --git a/tests/update.test.ts b/tests/update.test.ts
index 38c6eac..2a1e0ef 100644
--- a/tests/update.test.ts
+++ b/tests/update.test.ts
@@ -273,17 +273,17 @@ describe("更新元数据缓存", () => {
     prepareDataDirectories(config);
     const database = openDatabase(config);
     const digest = "b".repeat(64);
-    const platformAsset = `tallynote-1.1.0-${detectPlatform().target}-glibc.tar.gz`;
+    const platformAsset = `tallynote-1.1.1-${detectPlatform().target}-glibc.tar.gz`;
     const sums = `${digest}  ${platformAsset}\n`;
     const signature = sign(null, Buffer.from(sums), privateKey);
     globalThis.fetch = (async (input: string | URL) => input.toString().endsWith("SHA256SUMS.sig")
       ? new Response(signature)
       : input.toString().endsWith("SHA256SUMS")
       ? new Response(sums)
-      : new Response(JSON.stringify({ tag_name: "v1.1.0", published_at: "2026-08-28T00:00:00Z", assets: [{ name: "SHA256SUMS", browser_download_url: "https://updates.example/SHA256SUMS" }, { name: "SHA256SUMS.sig", browser_download_url: "https://updates.example/SHA256SUMS.sig" }, { name: platformAsset, browser_download_url: `https://updates.example/${platformAsset}` }] }), { status: 200 })) as typeof fetch;
+      : new Response(JSON.stringify({ tag_name: "v1.1.1", published_at: "2026-08-28T00:00:00Z", assets: [{ name: "SHA256SUMS", browser_download_url: "https://updates.example/SHA256SUMS" }, { name: "SHA256SUMS.sig", browser_download_url: "https://updates.example/SHA256SUMS.sig" }, { name: platformAsset, browser_download_url: `https://updates.example/${platformAsset}` }] }), { status: 200 })) as typeof fetch;
     try {
       const result = await checkForUpdate(database.sqlite, config);
-      expect(result.latest).toMatchObject({ version: "1.1.0", compatible: true, integrityReady: true, signatureReady: true, isNewer: true });
+      expect(result.latest).toMatchObject({ version: "1.1.1", compatible: true, integrityReady: true, signatureReady: true, isNewer: true });
       const cached = database.sqlite.prepare("SELECT value FROM system_settings WHERE key='update.release.v1'").get() as { value: string };
       expect(JSON.parse(cached.value).asset.sha256).toBe(digest);
     } finally {
diff --git a/tests/web-foundation.test.ts b/tests/web-foundation.test.ts
new file mode 100644
index 0000000..5329794
--- /dev/null
+++ b/tests/web-foundation.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it, vi } from "vitest";
+import { ApiError, api } from "../web-next/src/services/api";
+import { DEFAULT_ROUTE_ID, routeIdFromPath, routePath } from "../web-next/src/router";
+import sessionReducer, { bootstrapSession, isSessionBootstrapping, loginThunk } from "../web-next/src/store/sessionSlice";
+import type { Admin } from "../web-next/src/types/auth";
+
+describe("前端基础契约", () => {
+  it("将页面路由映射为稳定的 URL，并容忍尾斜杠", () => {
+    expect(routePath(DEFAULT_ROUTE_ID)).toBe("/");
+    expect(routeIdFromPath("/")).toBe("dashboard");
+    expect(routeIdFromPath("/dashboard")).toBe("dashboard");
+    expect(routeIdFromPath("/expenses/")).toBe("expenses");
+    expect(routeIdFromPath("/unknown")).toBeUndefined();
+  });
+
+  it("请求超时会中止并返回可识别的错误", async () => {
+    vi.stubGlobal("fetch", vi.fn((_url: string, init?: RequestInit) => new Promise((_resolve, reject) => {
+      init?.signal?.addEventListener("abort", () => reject(new DOMException("aborted", "AbortError")), { once: true });
+    })));
+    await expect(api("/api/slow", { timeoutMs: 10 })).rejects.toMatchObject<ApiError>({ status: 408, code: "REQUEST_TIMEOUT" });
+    vi.unstubAllGlobals();
+  });
+
+  it("忽略过期的会话初始化结果，避免覆盖较新的认证状态", () => {
+    const admin: Admin = {
+      id: "11111111-1111-4111-8111-111111111111",
+      username: "admin",
+      displayName: "管理员",
+      status: "active",
+      mustChangePassword: false,
+      version: 1,
+      createdAt: 1,
+      lastLoginAt: null,
+      disabledAt: null,
+    };
+    let state = sessionReducer(undefined, bootstrapSession.pending("older", undefined));
+    state = sessionReducer(state, bootstrapSession.pending("newer", undefined));
+    state = sessionReducer(state, bootstrapSession.fulfilled({ initialized: true, timezone: "Asia/Shanghai", admin: null }, "older", undefined));
+    expect(state.status).toBe("loading");
+    expect(state.bootstrapRequestId).toBe("newer");
+    state = sessionReducer(state, loginThunk.fulfilled(admin, "login", { username: "admin", password: "test" }));
+    expect(state.status).toBe("authenticated");
+    expect(state.admin?.id).toBe(admin.id);
+    state = sessionReducer(state, bootstrapSession.fulfilled({ initialized: true, timezone: "Asia/Shanghai", admin: null }, "newer", undefined));
+    expect(state.status).toBe("authenticated");
+    expect(state.admin?.id).toBe(admin.id);
+  });
+
+  it("登录提交时保留登录页面，不误显示启动连接占位", () => {
+    let state = sessionReducer(undefined, bootstrapSession.pending("boot", undefined));
+    expect(isSessionBootstrapping(state)).toBe(true);
+    state = sessionReducer(state, bootstrapSession.fulfilled({ initialized: true, timezone: "Asia/Shanghai", admin: null }, "boot", undefined));
+    state = sessionReducer(state, loginThunk.pending("login", { username: "admin", password: "test" }));
+    expect(state.status).toBe("loading");
+    expect(state.initialized).toBe(true);
+    expect(state.bootstrapRequestId).toBeNull();
+    expect(isSessionBootstrapping(state)).toBe(false);
+  });
+
+  it("启动连接失败时显示可恢复的错误状态", () => {
+    let state = sessionReducer(undefined, bootstrapSession.pending("boot", undefined));
+    state = sessionReducer(state, bootstrapSession.rejected(new Error("服务不可用"), "boot", undefined));
+    expect(state.status).toBe("error");
+    expect(state.initialized).toBeNull();
+    expect(isSessionBootstrapping(state)).toBe(false);
+  });
+});
diff --git a/tsconfig.web-next.json b/tsconfig.web-next.json
new file mode 100644
index 0000000..c0d3937
--- /dev/null
+++ b/tsconfig.web-next.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "exactOptionalPropertyTypes": false,
+    "types": ["vite/client"],
+    "baseUrl": ".",
+    "paths": { "@/*": ["web-next/src/*"] }
+  },
+  "include": ["web-next/src/**/*.ts", "web-next/src/**/*.tsx", "shared/**/*.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
index 18c7ff6..6898b49 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,14 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import path from "node:path";
 
 const apiPort = Number(process.env.TALLYNOTE_PORT ?? 3000);
 
 export default defineConfig({
-  root: "web",
+  root: "web-next",
+  resolve: {
+    alias: { "@": path.resolve(process.cwd(), "web-next/src") },
+  },
   plugins: [react()],
   server: {
     host: "127.0.0.1",
diff --git a/vite.next.config.ts b/vite.next.config.ts
new file mode 100644
index 0000000..27b8a3f
--- /dev/null
+++ b/vite.next.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+
+const apiPort = Number(process.env.TALLYNOTE_PORT ?? 3000);
+
+export default defineConfig({
+  root: 'web-next',
+  plugins: [react()],
+  resolve: {
+    alias: { '@': path.resolve(process.cwd(), 'web-next/src') },
+  },
+  server: {
+    host: '127.0.0.1',
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: `http://127.0.0.1:${apiPort}`,
+        // Preserve the browser Origin so Fastify can validate the configured
+        // public origin and its explicit development origins.
+        changeOrigin: false,
+      },
+      '/health': {
+        target: `http://127.0.0.1:${apiPort}`,
+        changeOrigin: false,
+      },
+    },
+  },
+  build: {
+    outDir: '../dist/web',
+    emptyOutDir: true,
+    cssCodeSplit: true,
+    sourcemap: false,
+  },
+});
diff --git a/web-next/index.html b/web-next/index.html
new file mode 100644
index 0000000..37f53fe
--- /dev/null
+++ b/web-next/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#175CD3" />
+    <title>TallyNote 账目台</title>
+  </head>
+  <body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body>
+</html>
diff --git a/web-next/src/assets/login-background-tech.webp b/web-next/src/assets/login-background-tech.webp
new file mode 100644
index 0000000..523b497
Binary files /dev/null and b/web-next/src/assets/login-background-tech.webp differ
diff --git a/web-next/src/components/AccessibleInput.tsx b/web-next/src/components/AccessibleInput.tsx
new file mode 100644
index 0000000..da086e9
--- /dev/null
+++ b/web-next/src/components/AccessibleInput.tsx
@@ -0,0 +1,28 @@
+import { useEffect, useRef } from "react";
+import { Input, type InputProps, type InputRef } from "tdesign-react";
+
+export interface AccessibleInputProps extends InputProps {
+  inputAriaLabel?: string;
+  inputAriaInvalid?: boolean;
+  inputAriaDescribedby?: string;
+}
+
+/**
+ * TDesign places unknown aria props on its wrapper. This adapter mirrors the
+ * important field attributes onto the native input so labels, errors and
+ * keyboard tooling target the actual editable control.
+ */
+export default function AccessibleInput({ inputAriaLabel, inputAriaInvalid, inputAriaDescribedby, ...props }: AccessibleInputProps) {
+  const ref = useRef<InputRef>(null);
+  useEffect(() => {
+    const input = ref.current?.inputElement;
+    if (!input) return;
+    if (inputAriaLabel) input.setAttribute("aria-label", inputAriaLabel);
+    else input.removeAttribute("aria-label");
+    if (inputAriaInvalid) input.setAttribute("aria-invalid", "true");
+    else input.removeAttribute("aria-invalid");
+    if (inputAriaDescribedby) input.setAttribute("aria-describedby", inputAriaDescribedby);
+    else input.removeAttribute("aria-describedby");
+  }, [inputAriaDescribedby, inputAriaInvalid, inputAriaLabel]);
+  return <Input {...props} ref={ref} />;
+}
diff --git a/web-next/src/contexts/UnsavedChanges.tsx b/web-next/src/contexts/UnsavedChanges.tsx
new file mode 100644
index 0000000..9463940
--- /dev/null
+++ b/web-next/src/contexts/UnsavedChanges.tsx
@@ -0,0 +1,85 @@
+import { useCallback, useContext, useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
+import { Dialog } from "tdesign-react";
+import { useBlocker } from "react-router-dom";
+import { UnsavedContext } from "./UnsavedChangesContext";
+
+// Keep navigation protection state local to the mounted route tree.
+// The context identity itself is kept in the dedicated registry module.
+
+export function UnsavedChangesProvider({ children }: { children: ReactNode }) {
+  const [warning, setWarning] = useState<string | null>(null);
+  const [pendingAction, setPendingAction] = useState<(() => void) | null>(null);
+  const warnings = useRef(new Map<string, string>());
+  const warningRef = useRef<string | null>(null);
+  const blocker = useBlocker(Boolean(warning));
+
+  useEffect(() => {
+    if (!warning) return;
+    const preventUnload = (event: BeforeUnloadEvent) => { event.preventDefault(); event.returnValue = ""; };
+    window.addEventListener("beforeunload", preventUnload);
+    return () => window.removeEventListener("beforeunload", preventUnload);
+  }, [warning]);
+
+  const registerWarning = useCallback((id: string, message: string | null) => {
+    if (message) warnings.current.set(id, message); else warnings.current.delete(id);
+    const nextWarning = warnings.current.values().next().value ?? null;
+    warningRef.current = nextWarning;
+    if (!nextWarning) setPendingAction(null);
+    setWarning(nextWarning);
+  }, []);
+  const clearWarnings = useCallback(() => {
+    warnings.current.clear();
+    warningRef.current = null;
+    setWarning(null);
+  }, []);
+  const requestDiscard = useCallback((action: () => void) => {
+    if (!warningRef.current) { action(); return; }
+    setPendingAction(() => action);
+  }, []);
+
+  const value = useMemo(() => ({ registerWarning, requestDiscard }), [registerWarning, requestDiscard]);
+  const visible = blocker.state === "blocked" || Boolean(pendingAction);
+  useEffect(() => {
+    // A dirty form can disappear for reasons unrelated to navigation (for
+    // example session expiry). Do not leave its stale close callback attached
+    // to the confirmation dialog that belongs to the new screen.
+    if (!warning && pendingAction) setPendingAction(null);
+  }, [pendingAction, warning]);
+  const confirm = () => {
+    const action = pendingAction;
+    setPendingAction(null);
+    if (blocker.state === "blocked") {
+      blocker.proceed();
+    } else {
+      clearWarnings();
+      action?.();
+    }
+  };
+  const cancel = () => {
+    setPendingAction(null);
+    if (blocker.state === "blocked") blocker.reset();
+  };
+
+  return <UnsavedContext.Provider value={value}>
+    {children}
+    <Dialog visible={visible} header="放弃未保存内容？" confirmBtn={{ content: "放弃并离开", theme: "danger" }} cancelBtn="继续编辑" onClose={cancel} onConfirm={confirm} onCancel={cancel}>
+      {warning || "当前页面有未保存的内容，离开后将无法恢复。"}
+    </Dialog>
+  </UnsavedContext.Provider>;
+}
+
+export function useUnsavedChanges(active: boolean, message = "当前表单有未保存的内容，离开后这些内容会丢失。") {
+  const context = useContext(UnsavedContext);
+  if (!context) throw new Error("useUnsavedChanges must be used inside UnsavedChangesProvider");
+  const id = useId();
+  useEffect(() => {
+    context.registerWarning(id, active ? message : null);
+    return () => context.registerWarning(id, null);
+  }, [active, context, id, message]);
+}
+
+export function useUnsavedActions() {
+  const context = useContext(UnsavedContext);
+  if (!context) throw new Error("useUnsavedActions must be used inside UnsavedChangesProvider");
+  return context;
+}
diff --git a/web-next/src/contexts/UnsavedChangesContext.ts b/web-next/src/contexts/UnsavedChangesContext.ts
new file mode 100644
index 0000000..672ab97
--- /dev/null
+++ b/web-next/src/contexts/UnsavedChangesContext.ts
@@ -0,0 +1,19 @@
+import { createContext, type Context } from "react";
+
+export type UnsavedContextValue = {
+  registerWarning: (id: string, message: string | null) => void;
+  requestDiscard: (action: () => void) => void;
+};
+
+/*
+ * Vite Fast Refresh can re-evaluate a module while an existing route tree is
+ * still mounted. Keep the context identity on the browser window so the old
+ * provider and the refreshed consumers continue to refer to the same object.
+ */
+type ContextRegistry = Window & {
+  __tallynoteUnsavedContext?: Context<UnsavedContextValue | null>;
+};
+
+const registry = typeof window === "undefined" ? null : window as ContextRegistry;
+export const UnsavedContext: Context<UnsavedContextValue | null> = registry?.__tallynoteUnsavedContext ?? createContext<UnsavedContextValue | null>(null);
+if (registry && !registry.__tallynoteUnsavedContext) registry.__tallynoteUnsavedContext = UnsavedContext;
diff --git a/web-next/src/hooks/useDialogAccessibility.ts b/web-next/src/hooks/useDialogAccessibility.ts
new file mode 100644
index 0000000..b9acf7d
--- /dev/null
+++ b/web-next/src/hooks/useDialogAccessibility.ts
@@ -0,0 +1,142 @@
+import { useEffect } from "react";
+
+const FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "textarea:not([disabled])",
+  "select:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(",");
+
+let dialogTitleSequence = 0;
+
+function isVisible(node: HTMLElement): boolean {
+  const rect = node.getBoundingClientRect();
+  const style = window.getComputedStyle(node);
+  return rect.width > 0 && rect.height > 0 && style.display !== "none" && style.visibility !== "hidden";
+}
+
+/** Normalizes the semantics and keyboard behavior missing from TDesign Dialog. */
+export function useDialogAccessibility() {
+  useEffect(() => {
+    let lastFocusOutside: HTMLElement | null = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    let scheduledFrame = 0;
+    const enhanced = new Map<HTMLElement, () => void>();
+
+    const onFocusIn = (event: FocusEvent) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement) || target.closest(".t-dialog__ctx")) return;
+      lastFocusOutside = target;
+    };
+
+    const focusableItems = (dialog: HTMLElement) => Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(isVisible);
+
+    const enhance = (dialog: HTMLElement) => {
+      if (enhanced.has(dialog)) return;
+      const context = dialog.closest<HTMLElement>(".t-dialog__ctx") ?? dialog;
+      const returnFocus = lastFocusOutside;
+      dialogTitleSequence += 1;
+      const dialogSequence = dialogTitleSequence;
+      dialog.setAttribute("role", "dialog");
+      dialog.setAttribute("aria-modal", "true");
+      if (!dialog.hasAttribute("tabindex")) dialog.setAttribute("tabindex", "-1");
+
+      const header = dialog.querySelector<HTMLElement>(".t-dialog__header-content, .t-dialog__header");
+      if (header) {
+        if (!header.id) {
+          header.id = `tn-dialog-title-${dialogSequence}`;
+        }
+        dialog.setAttribute("aria-labelledby", header.id);
+      } else {
+        dialog.setAttribute("aria-label", "确认操作");
+      }
+
+      const body = dialog.querySelector<HTMLElement>(".t-dialog__body");
+      if (body?.textContent?.trim()) {
+        if (!body.id) body.id = `tn-dialog-description-${dialogSequence}`;
+        dialog.setAttribute("aria-describedby", body.id);
+      }
+
+      const closeButton = dialog.querySelector<HTMLElement>(".t-dialog__close");
+      const onCloseKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        closeButton?.click();
+      };
+      if (closeButton) {
+        closeButton.setAttribute("role", "button");
+        closeButton.setAttribute("tabindex", "0");
+        closeButton.setAttribute("aria-label", "关闭弹窗");
+        closeButton.addEventListener("keydown", onCloseKeyDown);
+      }
+
+      const onKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== "Tab") return;
+        const items = focusableItems(dialog);
+        if (!items.length) {
+          event.preventDefault();
+          event.stopPropagation();
+          dialog.focus();
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const activeIndex = items.indexOf(document.activeElement as HTMLElement);
+        const nextIndex = event.shiftKey
+          ? activeIndex <= 0 ? items.length - 1 : activeIndex - 1
+          : activeIndex < 0 || activeIndex === items.length - 1 ? 0 : activeIndex + 1;
+        items[nextIndex]!.focus();
+      };
+      context.addEventListener("keydown", onKeyDown, true);
+
+      const focusInitial = () => {
+        if (!isVisible(dialog) || dialog.contains(document.activeElement)) return;
+        const preferred = dialog.querySelector<HTMLElement>(".t-dialog__cancel:not([disabled])")
+          ?? dialog.querySelector<HTMLElement>(".t-dialog__close[tabindex='0']");
+        (preferred && isVisible(preferred) ? preferred : focusableItems(dialog)[0] ?? dialog).focus();
+      };
+      const frame = window.requestAnimationFrame(focusInitial);
+      const timer = window.setTimeout(focusInitial, 80);
+
+      enhanced.set(dialog, () => {
+        window.cancelAnimationFrame(frame);
+        window.clearTimeout(timer);
+        context.removeEventListener("keydown", onKeyDown, true);
+        closeButton?.removeEventListener("keydown", onCloseKeyDown);
+        window.setTimeout(() => {
+          const anotherDialogOpen = Array.from(document.querySelectorAll<HTMLElement>(".t-dialog")).some(candidate => candidate !== dialog && isVisible(candidate));
+          const active = document.activeElement;
+          if (!anotherDialogOpen && returnFocus?.isConnected && (!active || active === document.body || context.contains(active))) returnFocus.focus();
+        }, 0);
+      });
+    };
+
+    const sync = () => {
+      scheduledFrame = 0;
+      const visibleDialogs = new Set(Array.from(document.querySelectorAll<HTMLElement>(".t-dialog")).filter(isVisible));
+      visibleDialogs.forEach(enhance);
+      enhanced.forEach((cleanup, dialog) => {
+        if (visibleDialogs.has(dialog)) return;
+        cleanup();
+        enhanced.delete(dialog);
+      });
+    };
+    const scheduleSync = () => {
+      if (scheduledFrame) return;
+      scheduledFrame = window.requestAnimationFrame(sync);
+    };
+
+    document.addEventListener("focusin", onFocusIn);
+    const observer = new MutationObserver(scheduleSync);
+    observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style"] });
+    scheduleSync();
+    return () => {
+      document.removeEventListener("focusin", onFocusIn);
+      observer.disconnect();
+      window.cancelAnimationFrame(scheduledFrame);
+      enhanced.forEach(cleanup => cleanup());
+      enhanced.clear();
+    };
+  }, []);
+}
diff --git a/web-next/src/hooks/useDrawerFocus.ts b/web-next/src/hooks/useDrawerFocus.ts
new file mode 100644
index 0000000..96fe33e
--- /dev/null
+++ b/web-next/src/hooks/useDrawerFocus.ts
@@ -0,0 +1,152 @@
+import { useEffect, useRef } from "react";
+
+const FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "textarea:not([disabled])",
+  "select:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(",");
+
+let titleSequence = 0;
+
+/** Adds the small amount of focus management TDesign Drawer does not expose. */
+export function useDrawerFocus(active: boolean, selector: string) {
+  const returnFocusRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!active) return;
+    const previous = document.activeElement;
+    if (previous instanceof HTMLElement && !previous.closest(".t-drawer")) {
+      returnFocusRef.current = previous;
+    }
+
+    let disposed = false;
+    let root: HTMLElement | null = null;
+    let cleanupRoot: (() => void) | undefined;
+    let frame = 0;
+    let timer: number | undefined;
+    let focusTimer: number | undefined;
+    let initialized = false;
+    const restoreTimers: number[] = [];
+
+    const focusFirst = () => {
+      if (disposed || !root) return;
+      const current = document.activeElement;
+      if (current && root.contains(current) && current !== root) return;
+      const first = Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).find(node => {
+        const rect = node.getBoundingClientRect();
+        const style = window.getComputedStyle(node);
+        return rect.width > 0 && rect.height > 0 && style.visibility !== "hidden" && style.display !== "none";
+      });
+      (first || root).focus();
+    };
+
+    const setup = () => {
+      if (disposed) return;
+      root = document.querySelector<HTMLElement>(`${selector}.t-drawer--open`) || document.querySelector<HTMLElement>(selector);
+      if (!root) {
+        timer = window.setTimeout(setup, 40);
+        return;
+      }
+
+      if (!root.hasAttribute("tabindex")) root.setAttribute("tabindex", "-1");
+      if (initialized) {
+        // Lazy Drawer content can be inserted after the first animation frame.
+        // Re-run only the initial focus lookup without duplicating listeners.
+        focusTimer = window.setTimeout(focusFirst, 80);
+        return;
+      }
+      initialized = true;
+      root.setAttribute("role", "dialog");
+      root.setAttribute("aria-modal", "true");
+      const header = root.querySelector<HTMLElement>(".t-drawer__header");
+      if (header) {
+        if (!header.id) {
+          titleSequence += 1;
+          header.id = `tn-drawer-title-${titleSequence}`;
+        }
+        root.setAttribute("aria-labelledby", header.id);
+      } else if (!root.getAttribute("aria-label")) {
+        root.setAttribute("aria-label", "抽屉");
+      }
+
+      const closeButton = root.querySelector<HTMLElement>(".t-drawer__close-btn");
+      const onCloseKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        closeButton?.click();
+      };
+      if (closeButton) {
+        closeButton.setAttribute("role", "button");
+        closeButton.setAttribute("tabindex", "0");
+        closeButton.setAttribute("aria-label", "关闭");
+        closeButton.addEventListener("keydown", onCloseKeyDown);
+      }
+
+      const isNestedDialogOpen = () => Array.from(document.querySelectorAll<HTMLElement>(".t-dialog, .t-dialog__wrapper")).some(dialog => {
+        if (dialog === root || root?.contains(dialog)) return false;
+        const style = window.getComputedStyle(dialog);
+        const rect = dialog.getBoundingClientRect();
+        return style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0;
+      });
+      const onKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== "Tab" || !root || isNestedDialogOpen()) return;
+        const items = Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(node => {
+          const rect = node.getBoundingClientRect();
+          const style = window.getComputedStyle(node);
+          return (rect.width > 0 && rect.height > 0 && style.visibility !== "hidden" && style.display !== "none") || node === document.activeElement;
+        });
+        if (!items.length) {
+          event.preventDefault();
+          event.stopPropagation();
+          root.focus();
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const activeIndex = items.indexOf(document.activeElement as HTMLElement);
+        const nextIndex = event.shiftKey
+          ? activeIndex <= 0 ? items.length - 1 : activeIndex - 1
+          : activeIndex < 0 || activeIndex === items.length - 1 ? 0 : activeIndex + 1;
+        items[nextIndex]!.focus();
+      };
+      root.addEventListener("keydown", onKeyDown, true);
+      cleanupRoot = () => {
+        root?.removeEventListener("keydown", onKeyDown, true);
+        closeButton?.removeEventListener("keydown", onCloseKeyDown);
+      };
+
+      frame = window.requestAnimationFrame(() => {
+        focusFirst();
+        focusTimer = window.setTimeout(focusFirst, 90);
+      });
+    };
+
+    frame = window.requestAnimationFrame(setup);
+    timer = window.setTimeout(setup, 180);
+    return () => {
+      disposed = true;
+      window.cancelAnimationFrame(frame);
+      if (timer !== undefined) window.clearTimeout(timer);
+      if (focusTimer !== undefined) window.clearTimeout(focusTimer);
+      cleanupRoot?.();
+      const restore = () => {
+        if (!disposed) return;
+        if (document.querySelector(`${selector}.t-drawer--open`)) return;
+        const target = returnFocusRef.current;
+        const current = document.activeElement;
+        if (!target?.isConnected) return;
+        // Do not steal focus if the user has already moved to another page
+        // control while the close animation was running.
+        if (current && current !== document.body && !current.closest(".t-drawer")) return;
+        target.focus();
+      };
+      [0, 180, 380].forEach(delay => {
+        restoreTimers.push(window.setTimeout(restore, delay));
+      });
+      restore();
+    };
+  }, [active, selector]);
+}
diff --git a/web-next/src/layouts/AppLayout.tsx b/web-next/src/layouts/AppLayout.tsx
new file mode 100644
index 0000000..973d914
--- /dev/null
+++ b/web-next/src/layouts/AppLayout.tsx
@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Button, Drawer, Layout } from "tdesign-react";
+import { X } from "lucide-react";
+import { DEFAULT_ROUTE_ID, type RouteId } from "../router";
+import AppContent from "./Content";
+import AppHeader from "./Header";
+import AppMenu from "./Menu";
+import { useDrawerFocus } from "../hooks/useDrawerFocus";
+
+export interface AppLayoutProps {
+  activeId?: RouteId;
+  adminName?: string;
+  adminUsername?: string;
+  children: ReactNode;
+  onNavigate: (id: RouteId) => void;
+  onLogout?: () => void;
+  onOpenPassword?: () => void;
+}
+
+export default function AppLayout({ activeId = DEFAULT_ROUTE_ID, adminName, adminUsername, children, onNavigate, onLogout, onOpenPassword }: AppLayoutProps) {
+  const [desktopVisible, setDesktopVisible] = useState(true);
+  const [isMobile, setIsMobile] = useState(false);
+  const [mobileVisible, setMobileVisible] = useState(false);
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
+  useDrawerFocus(mobileVisible, ".tn-mobile-drawer");
+
+  useEffect(() => {
+    const media = typeof window.matchMedia === "function" ? window.matchMedia("(max-width: 900px)") : null;
+    const sync = () => {
+      const mobile = media?.matches ?? window.innerWidth <= 900;
+      setIsMobile(mobile);
+      if (!mobile) setMobileVisible(false);
+    };
+    sync();
+    if (!media) return;
+    if (typeof media.addEventListener === "function") {
+      media.addEventListener("change", sync);
+      return () => media.removeEventListener("change", sync);
+    }
+    media.addListener?.(sync);
+    return () => media.removeListener?.(sync);
+  }, []);
+
+  const restoreMenuFocus = () => {
+    window.requestAnimationFrame(() => menuButtonRef.current?.focus());
+  };
+
+  const closeMobileMenu = () => {
+    setMobileVisible(false);
+    restoreMenuFocus();
+  };
+
+  const choose = (id: RouteId) => {
+    onNavigate(id);
+    closeMobileMenu();
+  };
+
+  const toggleMenu = () => {
+    if (isMobile) {
+      setMobileVisible(value => !value);
+      return;
+    }
+    setMobileVisible(false);
+    setDesktopVisible(value => !value);
+  };
+
+  return (
+    <Layout className="tn-shell tn-layout">
+      <nav id="tn-desktop-navigation" className={`tn-desktop-menu ${desktopVisible ? "" : "is-hidden"}`} aria-label="主导航" aria-hidden={!desktopVisible || undefined} inert={!desktopVisible || undefined}>
+        <AppMenu activeId={activeId} onChange={choose} />
+      </nav>
+      <Layout className="tn-layout-main">
+        <AppHeader
+          adminName={adminName}
+          adminUsername={adminUsername}
+          menuButtonRef={menuButtonRef}
+          menuOpen={isMobile ? mobileVisible : desktopVisible}
+          menuControls={isMobile ? "tn-mobile-navigation" : "tn-desktop-navigation"}
+          onToggleMenu={toggleMenu}
+          onLogout={onLogout}
+          onOpenPassword={onOpenPassword}
+        />
+        <AppContent>{children}</AppContent>
+      </Layout>
+      <Drawer
+        className="tn-mobile-drawer"
+        visible={mobileVisible}
+        placement="left"
+        size="216px"
+        closeBtn={false}
+        header={<div className="tn-mobile-drawer-header"><span>主导航</span><Button variant="text" shape="square" aria-label="关闭导航菜单" onClick={closeMobileMenu} icon={<X size={17} />} /></div>}
+        footer={false}
+        destroyOnClose
+        onClose={closeMobileMenu}
+      >
+        <nav id="tn-mobile-navigation" className="tn-mobile-menu-shell" aria-label="主导航">
+          <AppMenu activeId={activeId} onChange={choose} width={["216px", "64px"]} />
+        </nav>
+      </Drawer>
+    </Layout>
+  );
+}
+
+export { AppContent, AppHeader, AppMenu };
diff --git a/web-next/src/layouts/Content.tsx b/web-next/src/layouts/Content.tsx
new file mode 100644
index 0000000..457e9b3
--- /dev/null
+++ b/web-next/src/layouts/Content.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { Layout } from "tdesign-react";
+
+export interface AppContentProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export default function AppContent({ children, className }: AppContentProps) {
+  return (
+    <Layout.Content className={["tn-content", className].filter(Boolean).join(" ")}>
+      <div className="tn-content-inner">{children}</div>
+    </Layout.Content>
+  );
+}
diff --git a/web-next/src/layouts/Header.tsx b/web-next/src/layouts/Header.tsx
new file mode 100644
index 0000000..3e49de8
--- /dev/null
+++ b/web-next/src/layouts/Header.tsx
@@ -0,0 +1,104 @@
+import { ChevronDown, KeyRound, LogOut, Menu as MenuIcon } from "lucide-react";
+import { useEffect, useRef, useState, type KeyboardEvent, type Ref } from "react";
+import { Avatar, Button, Dropdown, Layout, Space, Tooltip, type DropdownOption } from "tdesign-react";
+
+export interface AppHeaderProps {
+  adminName?: string;
+  adminUsername?: string;
+  onToggleMenu?: () => void;
+  menuButtonRef?: Ref<HTMLButtonElement>;
+  menuOpen?: boolean;
+  menuControls?: string;
+  onLogout?: () => void;
+  onOpenPassword?: () => void;
+}
+
+export default function AppHeader({ adminName, adminUsername, onToggleMenu, menuButtonRef, menuOpen = false, menuControls, onLogout, onOpenPassword }: AppHeaderProps) {
+  const displayName = adminName?.trim() || "管理员";
+  const avatarText = [...displayName][0]?.toUpperCase() || "管";
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const userMenuButtonRef = useRef<HTMLButtonElement>(null);
+  const menuItem = (label: string) => <button type="button" role="menuitem" className="tn-user-dropdown-button" onKeyDown={handleMenuKeyDown}>{label}</button>;
+  const userOptions: DropdownOption[] = [
+    ...(onOpenPassword ? [{ value: "password", content: menuItem("修改密码"), prefixIcon: <KeyRound size={16} /> }] : []),
+    ...(onLogout ? [{ value: "logout", content: menuItem("退出登录"), theme: "error" as const, prefixIcon: <LogOut size={16} /> }] : []),
+  ];
+
+  useEffect(() => {
+    if (!userMenuOpen) return;
+    let disposed = false;
+    const focusMenu = () => {
+      if (disposed) return;
+      const menu = document.querySelector<HTMLElement>(".tn-user-dropdown");
+      if (!menu) return;
+      menu.setAttribute("role", "menu");
+      menu.setAttribute("aria-label", "账号操作");
+      menu.querySelector<HTMLElement>("[role='menuitem']")?.focus();
+    };
+    const frame = window.requestAnimationFrame(focusMenu);
+    const timer = window.setTimeout(focusMenu, 80);
+    return () => { disposed = true; window.cancelAnimationFrame(frame); window.clearTimeout(timer); };
+  }, [userMenuOpen]);
+
+  function handleMenuKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+    const items = Array.from(document.querySelectorAll<HTMLButtonElement>(".tn-user-dropdown [role='menuitem']"));
+    const index = items.indexOf(event.currentTarget);
+    if (event.key === "Escape") {
+      event.preventDefault();
+      userMenuButtonRef.current?.click();
+      userMenuButtonRef.current?.focus();
+      return;
+    }
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key) || !items.length) return;
+    event.preventDefault();
+    const nextIndex = event.key === "Home" ? 0
+      : event.key === "End" ? items.length - 1
+      : event.key === "ArrowDown" ? (index + 1) % items.length
+      : (index - 1 + items.length) % items.length;
+    items[nextIndex]?.focus();
+  }
+
+  const handleUserAction = (item: DropdownOption) => {
+    if (item.value === "password") onOpenPassword?.();
+    if (item.value === "logout") onLogout?.();
+  };
+
+  return (
+    <Layout.Header className="tn-header">
+      <Space className="tn-header-leading" align="center" size="small">
+        <Tooltip content="导航菜单" placement="bottom">
+          <Button
+            ref={menuButtonRef}
+            className="tn-header-menu-toggle"
+            shape="square"
+            size="large"
+            variant="text"
+            aria-label="导航菜单"
+            aria-expanded={menuOpen}
+            aria-controls={menuControls}
+            onClick={onToggleMenu}
+            icon={<MenuIcon size={19} />}
+          />
+        </Tooltip>
+        <span className="tn-header-nav-label">主导航</span>
+      </Space>
+      <Space className="tn-header-actions" align="center" size="small">
+        {userOptions.length > 0 && <Dropdown
+          trigger="click"
+          placement="bottom-right"
+          options={userOptions}
+          minColumnWidth={184}
+          maxColumnWidth={240}
+          onClick={handleUserAction}
+          panelTopContent={<div className="tn-user-dropdown-identity"><strong>{displayName}</strong>{adminUsername && <span>{adminUsername}</span>}</div>}
+          popupProps={{ overlayInnerClassName: "tn-user-dropdown", onVisibleChange: setUserMenuOpen }}
+        >
+          <Button ref={userMenuButtonRef} className="tn-user-menu-trigger" variant="text" size="large" aria-label={`${displayName}，打开账号菜单`} aria-haspopup="menu" aria-expanded={userMenuOpen} suffix={<ChevronDown size={16} />}>
+            <Avatar className="tn-user-avatar" size="32px" shape="circle">{avatarText}</Avatar>
+            <span className="tn-header-user">{displayName}</span>
+          </Button>
+        </Dropdown>}
+      </Space>
+    </Layout.Header>
+  );
+}
diff --git a/web-next/src/layouts/Menu.tsx b/web-next/src/layouts/Menu.tsx
new file mode 100644
index 0000000..b5cfd4e
--- /dev/null
+++ b/web-next/src/layouts/Menu.tsx
@@ -0,0 +1,46 @@
+import { Menu as TMenu } from "tdesign-react";
+import type { MenuValue } from "tdesign-react";
+import { APP_ROUTES, routePath, type RouteId } from "../router";
+
+export interface AppMenuProps {
+  activeId: RouteId;
+  collapsed?: boolean;
+  onChange: (id: RouteId) => void;
+  className?: string;
+  showLogo?: boolean;
+  width?: [string, string];
+}
+
+const { MenuItem } = TMenu;
+
+export default function AppMenu({ activeId, collapsed = false, onChange, className, showLogo = true, width = ["232px", "64px"] }: AppMenuProps) {
+  const handleChange = (value: MenuValue) => {
+    if (typeof value === "string") onChange(value as RouteId);
+  };
+
+  return (
+    <TMenu
+      className={className}
+      value={activeId}
+      collapsed={collapsed}
+      width={width}
+      theme="light"
+      logo={showLogo ? <MenuLogo collapsed={collapsed} /> : undefined}
+      onChange={handleChange}
+    >
+      {APP_ROUTES.map(({ id, title, icon: Icon }) => (
+        <MenuItem key={id} value={id} href={routePath(id)} onClick={({ e }) => e.preventDefault()} icon={<Icon className="t-icon tn-menu-icon" size={18} strokeWidth={1.8} />}>
+          {title}
+        </MenuItem>
+      ))}
+    </TMenu>
+  );
+}
+
+function MenuLogo({ collapsed }: { collapsed: boolean }) {
+  return (
+    <div className="tn-menu-logo" aria-label="TallyNote">
+      <span className={collapsed ? "tn-logo-short" : "tn-logo-full"}>{collapsed ? "TN" : "TallyNote"}</span>
+    </div>
+  );
+}
diff --git a/web-next/src/layouts/index.ts b/web-next/src/layouts/index.ts
new file mode 100644
index 0000000..6658b38
--- /dev/null
+++ b/web-next/src/layouts/index.ts
@@ -0,0 +1,8 @@
+export { default as AppLayout } from "./AppLayout";
+export { default as AppContent } from "./Content";
+export { default as AppHeader } from "./Header";
+export { default as AppMenu } from "./Menu";
+export type { AppLayoutProps } from "./AppLayout";
+export type { AppContentProps } from "./Content";
+export type { AppHeaderProps } from "./Header";
+export type { AppMenuProps } from "./Menu";
diff --git a/web-next/src/main.tsx b/web-next/src/main.tsx
new file mode 100644
index 0000000..d1df993
--- /dev/null
+++ b/web-next/src/main.tsx
@@ -0,0 +1,130 @@
+import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import "tdesign-react/es/_util/react-19-adapter";
+import { Button, Loading, NotificationPlugin } from "tdesign-react";
+import { Provider } from "react-redux";
+import { createBrowserRouter, RouterProvider, useLocation, useNavigate, useRouteError } from "react-router-dom";
+import { AUTH_EXPIRED_EVENT } from "./services/api";
+import { store, useAppDispatch, useAppSelector, bootstrapSession, isSessionBootstrapping, logoutThunk, sessionExpired } from "./store";
+import { setAppTimezone } from "./utils/date";
+import { AppLayout } from "./layouts";
+import { DEFAULT_ROUTE_ID, isRouteId, routeIdFromPath, routePath, routeTitle, type RouteId } from "./router";
+import { LoginPage, ChangePasswordPage } from "./pages/auth";
+const ExpensesPage = lazy(() => import("./pages/expenses"));
+const DashboardPage = lazy(() => import("./pages/dashboard"));
+const TrashPage = lazy(() => import("./pages/trash").then(module => ({ default: module.TrashPage })));
+const AdminsPage = lazy(() => import("./pages/admins").then(module => ({ default: module.AdminsPage })));
+const AuditPage = lazy(() => import("./pages/audit").then(module => ({ default: module.AuditPage })));
+const UpdatePage = lazy(() => import("./pages/update").then(module => ({ default: module.UpdatePage })));
+import { UnsavedChangesProvider, useUnsavedActions } from "./contexts/UnsavedChanges";
+import { useDialogAccessibility } from "./hooks/useDialogAccessibility";
+import "./styles/theme.css";
+
+function App() {
+  const dispatch = useAppDispatch();
+  const session = useAppSelector(state => state.session);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { requestDiscard } = useUnsavedActions();
+  const page = routeIdFromPath(location.pathname) ?? DEFAULT_ROUTE_ID;
+  const [passwordOpen, setPasswordOpen] = useState(false);
+  const logoutInFlight = useRef(false);
+  useDialogAccessibility();
+  const notify = useCallback((message: string, kind: "success" | "error" | "info" = "info") => {
+    // The placement container owns the responsive right inset. Keeping the
+    // item offset at zero avoids pushing narrow-screen notices off canvas.
+    const options = { content: message, duration: 4200, placement: "top-right" as const, offset: [0, 76] as [number, number], zIndex: 5000 };
+    const show = kind === "success" ? NotificationPlugin.success : kind === "error" ? NotificationPlugin.error : NotificationPlugin.info;
+    void show(options);
+  }, []);
+
+  useEffect(() => { void dispatch(bootstrapSession()); }, [dispatch]);
+  useEffect(() => {
+    const handleExpired = (event: Event) => { dispatch(sessionExpired((event as CustomEvent<string>).detail)); setPasswordOpen(false); };
+    window.addEventListener(AUTH_EXPIRED_EVENT, handleExpired);
+    return () => window.removeEventListener(AUTH_EXPIRED_EVENT, handleExpired);
+  }, [dispatch]);
+  useEffect(() => { if (session.timezone) setAppTimezone(session.timezone); }, [session.timezone]);
+  useEffect(() => { setPasswordOpen(false); }, [location.pathname]);
+  useEffect(() => {
+    if (!routeIdFromPath(location.pathname)) navigate(routePath(DEFAULT_ROUTE_ID), { replace: true });
+  }, [location.pathname, navigate]);
+  useEffect(() => {
+    const title = session.status === "error"
+      ? "连接失败"
+      : !session.admin
+        ? "登录"
+        : session.admin.mustChangePassword
+          ? "设置密码"
+          : passwordOpen
+            ? "修改密码"
+          : routeTitle(page);
+    document.title = `${title} | TallyNote`;
+  }, [page, passwordOpen, session.admin, session.status]);
+
+  const onLogout = useCallback(() => {
+    requestDiscard(() => {
+      if (logoutInFlight.current) return;
+      logoutInFlight.current = true;
+      void dispatch(logoutThunk()).then(() => {
+        navigate(routePath(DEFAULT_ROUTE_ID), { replace: true });
+        notify("已退出登录", "info");
+      }).finally(() => { logoutInFlight.current = false; });
+    });
+  }, [dispatch, navigate, notify, requestDiscard]);
+  const onNavigate = useCallback((id: RouteId, search = "") => {
+    if (!isRouteId(id)) return;
+    const targetPath = routePath(id);
+    const targetSearch = search && !search.startsWith("?") ? `?${search}` : search;
+    if (location.pathname === targetPath && !search) {
+      if (passwordOpen) requestDiscard(() => setPasswordOpen(false));
+      return;
+    }
+    if (location.pathname !== targetPath || location.search !== targetSearch) navigate(`${targetPath}${targetSearch}`);
+  }, [location.pathname, location.search, navigate, passwordOpen, requestDiscard]);
+
+  // `status` is also used while a login or password request is in flight.
+  // Keep the login form mounted for those requests so the user sees the
+  // button's busy state instead of losing the entire form to a bootstrap
+  // spinner. `bootstrapRequestId` is only set by the initial session check.
+  if (isSessionBootstrapping(session)) return <main className="tn-auth-shell" role="status" aria-live="polite"><Loading text="正在连接本地账本…" /></main>;
+  if (session.status === "error") return <main className="tn-auth-shell"><div className="tn-auth-panel"><h1 className="tn-page-title">无法连接 TallyNote</h1><p className="tn-page-subtitle">{session.error || "请确认本地服务正在运行。"}</p><Button theme="primary" onClick={() => void dispatch(bootstrapSession())}>重新连接</Button></div></main>;
+  if (!session.admin) return <LoginPage
+    notice={session.initialized ? undefined : "尚未初始化管理员，请先在服务器执行 pnpm admin:init。"}
+    onSuccess={() => setPasswordOpen(false)}
+  />;
+  if (session.admin.mustChangePassword) return <ChangePasswordPage admin={session.admin} firstLogin onSuccess={() => notify("密码已更新", "success")} />;
+
+  const content = passwordOpen
+    ? <ChangePasswordPage admin={session.admin} returnLabel={`返回${routeTitle(page)}`} onCancel={() => requestDiscard(() => setPasswordOpen(false))} onSuccess={() => { setPasswordOpen(false); notify("密码已更新", "success"); }} />
+    : page === "dashboard" ? <DashboardPage timezone={session.timezone} onNavigate={onNavigate} />
+    : page === "expenses" ? <ExpensesPage timezone={session.timezone} sessionKey={session.admin.id} notify={notify} />
+    : page === "trash" ? <TrashPage timezone={session.timezone} notify={notify} />
+    : page === "admins" ? <AdminsPage currentAdmin={session.admin} timezone={session.timezone} notify={notify} />
+    : page === "audit" ? <AuditPage timezone={session.timezone} />
+    : <UpdatePage timezone={session.timezone} notify={notify} />;
+
+  return <AppLayout activeId={page} adminName={session.admin.displayName} adminUsername={session.admin.username} onNavigate={onNavigate} onLogout={onLogout} onOpenPassword={() => { if (!passwordOpen) requestDiscard(() => setPasswordOpen(true)); }}><Suspense fallback={<main className="tn-page-loading" role="status" aria-live="polite"><Loading text="正在打开页面…" /></main>}><div key={passwordOpen ? "password" : page} className="tn-page-transition">{content}</div></Suspense></AppLayout>;
+}
+
+function RouteErrorPage() {
+  const error = useRouteError();
+  useEffect(() => { document.title = "页面出现问题 | TallyNote"; }, []);
+  const message = error instanceof Error && error.message.includes("网络")
+    ? "服务连接暂时不可用。"
+    : "页面暂时无法打开，请重新加载后再试。";
+  return <main className="tn-route-error" role="alert"><div className="tn-route-error-panel"><h1>页面出现问题</h1><p>{message}</p><Button theme="primary" onClick={() => window.location.reload()}>重新加载</Button></div></main>;
+}
+
+const router = createBrowserRouter([{ path: "*", element: <Provider store={store}><UnsavedChangesProvider><App /></UnsavedChangesProvider></Provider>, errorElement: <RouteErrorPage /> }]);
+// Vite can re-evaluate this module during Fast Refresh while the existing DOM
+// root is still mounted. Reusing the root prevents duplicate createRoot calls
+// and the removeChild errors that follow a hot update.
+type RootRegistry = Window & { __tallynoteReactRoot?: Root };
+const rootRegistry = window as RootRegistry;
+const rootElement = document.getElementById("root");
+if (!rootElement) throw new Error("TallyNote root element is missing");
+const reactRoot = rootRegistry.__tallynoteReactRoot ?? createRoot(rootElement);
+// Keep the same root across route and component hot updates.
+rootRegistry.__tallynoteReactRoot = reactRoot;
+reactRoot.render(<RouterProvider router={router} />);
diff --git a/web-next/src/pages/admins/AdminsPage.tsx b/web-next/src/pages/admins/AdminsPage.tsx
new file mode 100644
index 0000000..4bdde79
--- /dev/null
+++ b/web-next/src/pages/admins/AdminsPage.tsx
@@ -0,0 +1,115 @@
+import { useEffect, useRef, useState } from "react";
+import { Copy, KeyRound, Plus, RotateCcw, ShieldCheck, UserRound, UserRoundCheck, UserRoundX } from "lucide-react";
+import { Button, Dialog, Drawer, Form, Space, Table, Tooltip } from "tdesign-react";
+import { api } from "../../services/api";
+import AccessibleInput from "../../components/AccessibleInput";
+import { apiFieldErrors } from "../../services/formErrors";
+import type { Admin } from "../../types/auth";
+import { dateText } from "../expenses/date";
+import { AsyncState, BusyIcon, ErrorBanner, Page, StatusTag } from "../common";
+import type { Notify } from "../expenses/types";
+import { useUnsavedActions, useUnsavedChanges } from "../../contexts/UnsavedChanges";
+import { useDrawerFocus } from "../../hooks/useDrawerFocus";
+
+export default function AdminsPage({ currentAdmin, timezone = "Asia/Shanghai", notify }: { currentAdmin: Admin; timezone?: string; notify?: Notify }) {
+  const [items, setItems] = useState<Admin[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [showCreate, setShowCreate] = useState(false);
+  const [form, setForm] = useState({ username: "", displayName: "" });
+  const [formError, setFormError] = useState("");
+  const [formFields, setFormFields] = useState<{ username?: string; displayName?: string }>({});
+  const [action, setAction] = useState<{ kind: "toggle" | "reset"; admin: Admin } | null>(null);
+  const [secret, setSecret] = useState("");
+  const loadSequence = useRef(0);
+  const createInFlight = useRef(false);
+  const { requestDiscard } = useUnsavedActions();
+  useDrawerFocus(showCreate, ".tn-admin-drawer");
+  useUnsavedChanges(showCreate && Boolean(form.username || form.displayName));
+
+  const load = async () => {
+    const sequence = ++loadSequence.current;
+    setLoading(true); setError("");
+    try { const result = await api<{ items: Admin[] }>("/api/admins"); if (sequence === loadSequence.current) setItems(result.items); }
+    catch (e) { if (sequence === loadSequence.current) setError((e as Error).message); }
+    finally { if (sequence === loadSequence.current) setLoading(false); }
+  };
+  useEffect(() => { void load(); }, []);
+
+  const create = async (event?: React.FormEvent) => {
+    if (event && typeof event.preventDefault === "function") event.preventDefault();
+    if (busy || createInFlight.current) return;
+    setFormError("");
+    setFormFields({});
+    const username = form.username.normalize("NFKC").trim();
+    const displayName = form.displayName.trim();
+    const nextFields: typeof formFields = {};
+    if ([...username].length < 3) nextFields.username = "用户名至少需要 3 个字符";
+    if (!displayName) nextFields.displayName = "请输入显示名";
+    if (Object.keys(nextFields).length) { setFormFields(nextFields); focusAdminField(nextFields); return; }
+    createInFlight.current = true;
+    setBusy(true);
+    try { const result = await api<{ temporaryPassword: string }>("/api/admins", { method: "POST", body: JSON.stringify({ username, displayName }) }); setShowCreate(false); setForm({ username: "", displayName: "" }); setSecret(result.temporaryPassword); notify?.("管理员已创建", "success"); await load(); }
+    catch (caught) {
+      const mapped = apiFieldErrors(caught);
+      if (Object.keys(mapped).length) { const fields = { username: mapped.username, displayName: mapped.displayName }; setFormFields(fields); focusAdminField(fields); }
+      else setFormError((caught as Error).message);
+    }
+    finally { createInFlight.current = false; setBusy(false); }
+  };
+  const toggle = async () => {
+    if (!action) return; setBusy(true);
+    try { const next = action.admin.status === "active" ? "disabled" : "active"; await api(`/api/admins/${action.admin.id}/status`, { method: "PUT", body: JSON.stringify({ status: next, version: action.admin.version }) }); setAction(null); notify?.(next === "active" ? "管理员已启用" : "管理员已停用", "success"); await load(); }
+    catch (e) { setError((e as Error).message); setAction(null); }
+    finally { setBusy(false); }
+  };
+  const reset = async () => {
+    if (!action) return; setBusy(true);
+    try { const result = await api<{ temporaryPassword: string }>(`/api/admins/${action.admin.id}/reset-password`, { method: "POST", body: JSON.stringify({ version: action.admin.version }) }); setAction(null); setSecret(result.temporaryPassword); notify?.("密码已重置，现有会话已失效", "success"); await load(); }
+    catch (e) { setError((e as Error).message); setAction(null); }
+    finally { setBusy(false); }
+  };
+
+  const columns = [
+    { colKey: "username", title: "用户名", cell: ({ row }: any) => <span className="tn-code">{row.username}</span> },
+    { colKey: "displayName", title: "显示名" },
+    { colKey: "status", title: "状态", cell: ({ row }: any) => <StatusTag status={row.status} /> },
+    { colKey: "lastLoginAt", title: "最近登录", cell: ({ row }: any) => row.lastLoginAt ? dateText(row.lastLoginAt, timezone) : "从未登录" },
+    { colKey: "version", title: "版本", cell: ({ row }: any) => <span className="tn-code">v{row.version}</span> },
+    { colKey: "actions", title: "操作", width: 250, cell: ({ row }: any) => <Space className="tn-action-group"><Tooltip content={row.id === currentAdmin.id ? "当前账号请使用右上角修改密码" : "生成一次性临时密码"}><Button variant="outline" onClick={() => setAction({ kind: "reset", admin: row })} disabled={busy || row.id === currentAdmin.id} icon={<KeyRound size={15} />}>重置密码</Button></Tooltip><Button variant="outline" theme={row.status === "active" ? "danger" : "primary"} onClick={() => setAction({ kind: "toggle", admin: row })} disabled={busy || row.id === currentAdmin.id} icon={row.status === "active" ? <UserRoundX size={15} /> : <UserRoundCheck size={15} />}>{row.status === "active" ? "停用" : "启用"}</Button></Space> },
+  ];
+
+  return <Page title="管理员" subtitle="多个等权管理员共享同一本地账目，停用会立即撤销该账号的现有会话。" actions={<Space><Button variant="outline" onClick={() => void load()} disabled={loading} icon={<RotateCcw size={15} />}>刷新</Button><Button theme="primary" onClick={() => { setForm({ username: "", displayName: "" }); setFormError(""); setFormFields({}); setShowCreate(true); }} icon={<Plus size={16} />}>新增管理员</Button></Space>}>
+    <AsyncState loading={loading} error={error} empty={items.length === 0 ? <div className="tn-empty"><UserRound size={30} /><p>暂无管理员</p></div> : undefined} onRetry={() => void load()}><div className="tn-table-wrap" role="region" aria-label="管理员列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} hover stripe /></div></AsyncState>
+    <Drawer className="tn-content-drawer tn-admin-drawer" visible={showCreate} destroyOnClose placement="right" size="440px" header="新增管理员" onClose={() => { if (!busy) requestDiscard(() => setShowCreate(false)); }} footer={<Space><Button variant="outline" onClick={() => requestDiscard(() => setShowCreate(false))} disabled={busy}>取消</Button><Button theme="primary" type="button" onClick={() => void create()} disabled={busy} icon={busy ? <BusyIcon /> : <ShieldCheck size={15} />}>创建并生成临时密码</Button></Space>}>
+      <Form id="admin-create-form" layout="vertical" onSubmit={() => { void create(); }}><Form.FormItem label="用户名" help={formFields.username || "至少 3 个字符"} status={formFields.username ? "error" : undefined} rules={[{ required: true, min: 3, max: 64, message: "用户名至少需要 3 个字符" }]}><AccessibleInput disabled={busy} inputAriaLabel="用户名" inputAriaInvalid={Boolean(formFields.username)} value={form.username} onChange={value => { setForm({ ...form, username: value }); setFormFields(current => ({ ...current, username: undefined })); setFormError(""); }} onEnter={(_, context) => { context.e.preventDefault(); void create(); }} maxlength={64} autocomplete="off" /></Form.FormItem><Form.FormItem label="显示名" help={formFields.displayName} status={formFields.displayName ? "error" : undefined} rules={[{ required: true, max: 80, message: "请输入显示名" }]}><AccessibleInput disabled={busy} inputAriaLabel="显示名" inputAriaInvalid={Boolean(formFields.displayName)} value={form.displayName} onChange={value => { setForm({ ...form, displayName: value }); setFormFields(current => ({ ...current, displayName: undefined })); setFormError(""); }} onEnter={(_, context) => { context.e.preventDefault(); void create(); }} maxlength={80} /></Form.FormItem>{formError && <div className="tn-inline-error" role="alert">{formError}</div>}</Form>
+    </Drawer>
+    <Dialog visible={Boolean(action)} header={action?.kind === "reset" ? "重置管理员密码？" : action?.admin.status === "active" ? "停用管理员？" : "启用管理员？"} confirmBtn={{ content: action?.kind === "reset" ? "重置密码" : action?.admin.status === "active" ? "停用" : "启用", theme: action?.kind === "toggle" && action.admin.status === "active" ? "danger" : "primary", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setAction(null); }} onConfirm={() => void (action?.kind === "reset" ? reset() : toggle())} onCancel={() => { if (!busy) setAction(null); }}>
+      {action?.kind === "reset" ? <>将生成一次性临时密码，并立即使“{action.admin.displayName}”的现有会话失效。</> : action?.admin.status === "active" ? "停用后该管理员的现有会话会立即失效。" : "启用后该管理员可以重新登录。"}
+    </Dialog>
+    <Dialog visible={Boolean(secret)} header="临时密码已生成" confirmBtn="关闭" cancelBtn={null} onClose={() => setSecret("")} onConfirm={() => setSecret("")} onCancel={() => setSecret("")}><div className="tn-secret"><code>{secret}</code><Button variant="outline" icon={<Copy size={15} />} onClick={() => { void copySecret(secret); }}>复制</Button></div><p className="tn-dialog-note">请通过安全渠道交给管理员。首次登录必须修改密码。</p></Dialog>
+  </Page>;
+
+  async function copySecret(value: string) {
+    try {
+      if (!navigator.clipboard) throw new Error("clipboard unavailable");
+      await navigator.clipboard.writeText(value);
+      notify?.("临时密码已复制", "info");
+    } catch {
+      notify?.("复制失败，请手动复制临时密码", "error");
+    }
+  }
+}
+
+function focusAdminField(fields: { username?: string; displayName?: string }) {
+  const selector = fields.username ? "[aria-invalid='true'], [aria-invalid='true'] input" : fields.displayName ? "[aria-invalid='true'], [aria-invalid='true'] input" : "";
+  if (!selector) return;
+  const focus = () => {
+    const node = document.querySelector<HTMLElement>(selector);
+    const target = node?.matches("input") ? node : node?.querySelector<HTMLElement>("input");
+    target?.focus();
+  };
+  requestAnimationFrame(focus);
+  window.setTimeout(focus, 60);
+}
diff --git a/web-next/src/pages/admins/index.ts b/web-next/src/pages/admins/index.ts
new file mode 100644
index 0000000..e303b63
--- /dev/null
+++ b/web-next/src/pages/admins/index.ts
@@ -0,0 +1 @@
+export { default as AdminsPage } from "./AdminsPage";
diff --git a/web-next/src/pages/audit/AuditPage.tsx b/web-next/src/pages/audit/AuditPage.tsx
new file mode 100644
index 0000000..2bf540b
--- /dev/null
+++ b/web-next/src/pages/audit/AuditPage.tsx
@@ -0,0 +1,140 @@
+import { useEffect, useRef, useState } from "react";
+import { Archive, RotateCcw, Search } from "lucide-react";
+import { Button, Select, Space, Table, Tag } from "tdesign-react";
+import AccessibleInput from "../../components/AccessibleInput";
+import { useSearchParams } from "react-router-dom";
+import { api } from "../../services/api";
+import { dateText } from "../expenses/date";
+import { AsyncState, ErrorBanner, Page } from "../common";
+
+type AuditItem = { id: number; occurredAt: number; requestId: string; actorUsername?: string | null; action: string; targetType: string; targetId?: string | null; outcome?: string };
+
+function outcomeLabel(outcome?: string): string {
+  if (!outcome || outcome === "success") return "成功";
+  if (outcome === "denied") return "已拒绝";
+  if (outcome === "failure") return "失败";
+  return outcome;
+}
+
+const ACTION_LABELS: Record<string, string> = {
+  deny: "拒绝请求",
+  "auth.login": "登录",
+  "auth.logout": "退出登录",
+  "auth.login_failed": "登录失败",
+  "expense.created": "创建账目",
+  "expense.updated": "更新账目",
+  "expense.status_changed": "切换报销状态",
+  "expense.trashed": "移入回收站",
+  "expense.restored": "恢复账目",
+  "expense.purged": "永久删除账目",
+  "expense.attachments_added": "添加附件",
+  "attachment.added": "添加附件",
+  "attachment.deleted": "删除附件",
+  "attachment.previewed": "预览附件",
+  "attachment.downloaded": "下载附件",
+  "export.created": "创建导出任务",
+  "export.downloaded": "下载导出文件",
+  "admin.created": "创建管理员",
+  "admin.updated": "更新管理员",
+  "admin.status_changed": "切换管理员状态",
+  "admin.password_changed": "修改管理员密码",
+  "admin.password_reset": "重置管理员密码",
+  "expense.attachment_deleted": "删除附件",
+  "expense.attachment_read": "读取附件",
+  "expense.purge": "永久删除账目",
+  "update.checked": "检查更新",
+  "update.apply_requested": "提交更新",
+};
+const TARGET_LABELS: Record<string, string> = {
+  expense: "账目",
+  admin: "管理员",
+  export: "导出任务",
+  session: "会话",
+  update: "更新任务",
+  system: "系统检查",
+};
+const ALLOWED_TARGETS = new Set(["", "expense", "admin", "export", "session", "update", "system"]);
+
+export default function AuditPage({ timezone = "Asia/Shanghai" }: { timezone?: string }) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [items, setItems] = useState<AuditItem[]>([]);
+  const rawAction = searchParams.get("action") || "";
+  const action = rawAction.trim().slice(0, 100);
+  const targetParam = searchParams.get("targetType") || "";
+  const targetType = ALLOWED_TARGETS.has(targetParam) ? targetParam : "";
+  const [actionDraft, setActionDraft] = useState(action);
+  const [targetDraft, setTargetDraft] = useState(targetType);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState("");
+  const [hasMore, setHasMore] = useState(false);
+  const requestSequence = useRef(0);
+  const offsetRef = useRef(0);
+  const appendInFlight = useRef(false);
+  const pageSize = 100;
+
+  const load = async (append = false) => {
+    if (append && appendInFlight.current) return;
+    if (append) appendInFlight.current = true;
+    const sequence = ++requestSequence.current;
+    if (append) setLoadingMore(true); else { setLoading(true); setLoadingMore(false); }
+    setError("");
+    try {
+      const nextOffset = append ? offsetRef.current : 0;
+      const params = new URLSearchParams({ limit: String(pageSize), offset: String(nextOffset) });
+      if (action.trim()) params.set("action", action.trim());
+      if (targetType) params.set("targetType", targetType);
+      const result = await api<{ items: AuditItem[] }>(`/api/audit?${params}`);
+      if (sequence !== requestSequence.current) return;
+      setItems(current => {
+        if (!append) return result.items;
+        const existingIds = new Set(current.map(item => item.id));
+        return [...current, ...result.items.filter(item => !existingIds.has(item.id))];
+      });
+      offsetRef.current = nextOffset + result.items.length;
+      setHasMore(result.items.length === pageSize);
+    } catch (e) {
+      if (sequence === requestSequence.current) setError((e as Error).message);
+    }
+    finally {
+      if (append) appendInFlight.current = false;
+      if (sequence === requestSequence.current) { if (append) setLoadingMore(false); else setLoading(false); }
+    }
+  };
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams);
+    let changed = false;
+    if (rawAction !== action) {
+      if (action) params.set("action", action); else params.delete("action");
+      changed = true;
+    }
+    if (targetParam !== targetType) {
+      params.delete("targetType");
+      changed = true;
+    }
+    if (changed) setSearchParams(params, { replace: true });
+  }, [action, rawAction, searchParams, setSearchParams, targetParam, targetType]);
+  useEffect(() => { setActionDraft(action); setTargetDraft(targetType); }, [action, targetType]);
+  useEffect(() => { void load(); }, [action, targetType]);
+  const applyFilters = () => {
+    const params = new URLSearchParams(searchParams);
+    const nextAction = actionDraft.trim().slice(0, 100);
+    if (nextAction) params.set("action", nextAction); else params.delete("action");
+    if (targetDraft) params.set("targetType", targetDraft); else params.delete("targetType");
+    if (nextAction === action && targetDraft === targetType) void load();
+    else setSearchParams(params);
+  };
+
+  const columns = [
+    { colKey: "occurredAt", title: "时间", cell: ({ row }: any) => dateText(row.occurredAt, timezone) },
+    { colKey: "actorUsername", title: "操作者", cell: ({ row }: any) => row.actorUsername || "系统" },
+    { colKey: "action", title: "动作", cell: ({ row }: any) => <span className="tn-code" title={row.action}>{ACTION_LABELS[row.action] || row.action}</span> },
+    { colKey: "target", title: "目标", cell: ({ row }: any) => <span className="tn-code" title={row.targetId ? `${row.targetType} / ${row.targetId}` : row.targetType}>{TARGET_LABELS[row.targetType] || row.targetType}{row.targetId ? ` / ${row.targetId.slice(0, 8)}` : ""}</span> },
+    { colKey: "outcome", title: "结果", cell: ({ row }: any) => <Tag theme={row.outcome === "success" || !row.outcome ? "success" : row.outcome === "denied" ? "warning" : "danger"}>{outcomeLabel(row.outcome)}</Tag> },
+  ];
+
+  return <Page title="审计日志" subtitle="记录登录、账目、附件、导出、管理员和更新操作。日志只读，永久删除也不会清除它。" actions={<Button variant="outline" onClick={() => void load()} disabled={loading || loadingMore} icon={<RotateCcw size={15} />}>刷新</Button>}>
+    <form className="tn-toolbar tn-audit-toolbar" onSubmit={e => { e.preventDefault(); applyFilters(); }}><AccessibleInput inputAriaLabel="动作筛选" value={actionDraft} onChange={setActionDraft} maxlength={100} placeholder="动作，例如 expense.created" prefixIcon={<Search size={16} />} /><Select aria-label="目标类型" value={targetDraft} onChange={v => setTargetDraft(String(v))} options={[{ label: "全部目标", value: "" }, { label: "账目", value: "expense" }, { label: "管理员", value: "admin" }, { label: "导出", value: "export" }, { label: "会话", value: "session" }, { label: "更新任务", value: "update" }, { label: "系统检查", value: "system" }]} /><Button theme="primary" type="submit" icon={<Search size={15} />}>筛选</Button></form>
+    <AsyncState loading={loading} error={error} empty={items.length === 0 ? <div className="tn-empty"><Archive size={30} /><p>{action || targetType ? "没有符合当前筛选条件的审计记录" : "暂无审计记录"}</p>{(action || targetType) && <Button variant="outline" onClick={() => setSearchParams(new URLSearchParams())}>清除筛选</Button>}</div> : undefined} onRetry={() => void load()}><div className="tn-table-wrap tn-audit-table" role="region" aria-label="审计日志列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} hover stripe /></div>{hasMore && <div className="tn-table-more"><Button variant="outline" onClick={() => void load(true)} disabled={loadingMore} icon={<RotateCcw size={15} />}>{loadingMore ? "加载中…" : "加载更早记录"}</Button></div>}</AsyncState>
+  </Page>;
+}
diff --git a/web-next/src/pages/audit/index.ts b/web-next/src/pages/audit/index.ts
new file mode 100644
index 0000000..11df58d
--- /dev/null
+++ b/web-next/src/pages/audit/index.ts
@@ -0,0 +1 @@
+export { default as AuditPage } from "./AuditPage";
diff --git a/web-next/src/pages/auth/ChangePassword.tsx b/web-next/src/pages/auth/ChangePassword.tsx
new file mode 100644
index 0000000..ae7be45
--- /dev/null
+++ b/web-next/src/pages/auth/ChangePassword.tsx
@@ -0,0 +1,2 @@
+export { default } from "./ChangePasswordPage";
+export * from "./ChangePasswordPage";
diff --git a/web-next/src/pages/auth/ChangePasswordPage.tsx b/web-next/src/pages/auth/ChangePasswordPage.tsx
new file mode 100644
index 0000000..f42227b
--- /dev/null
+++ b/web-next/src/pages/auth/ChangePasswordPage.tsx
@@ -0,0 +1,133 @@
+import { useMemo, useState } from "react";
+import { ArrowLeft, Check, KeyRound, ShieldCheck } from "lucide-react";
+import { Alert, Button, Form } from "tdesign-react";
+import { changePasswordThunk, clearSessionError, useAppDispatch, useAppSelector } from "../../store";
+import type { Admin } from "../../types/auth";
+import { StarterPasswordInput } from "./StarterAuth";
+import { Page } from "../common";
+import { useUnsavedChanges } from "../../contexts/UnsavedChanges";
+
+export interface ChangePasswordPageProps {
+  admin?: Admin | null;
+  onSuccess?: (admin: Admin) => void;
+  onCancel?: () => void;
+  returnLabel?: string;
+  firstLogin?: boolean;
+}
+
+export default function ChangePasswordPage({ admin, onSuccess, onCancel, returnLabel = "返回当前页面", firstLogin = false }: ChangePasswordPageProps) {
+  const dispatch = useAppDispatch();
+  const sessionAdmin = useAppSelector((state) => state.session.admin);
+  const { status, error } = useAppSelector((state) => state.session);
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmation, setConfirmation] = useState("");
+  const [formError, setFormError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<{ newPassword?: string; confirmation?: string }>({});
+  const busy = status === "loading";
+  const dirty = Boolean(currentPassword || newPassword || confirmation);
+  useUnsavedChanges(dirty);
+  const displayAdmin = admin ?? sessionAdmin;
+  const isFirstLogin = firstLogin || Boolean(displayAdmin?.mustChangePassword);
+  const displayName = displayAdmin?.displayName || displayAdmin?.username || "当前管理员";
+  const requirements = useMemo(() => [
+    { label: "至少 12 个字符", valid: newPassword.length >= 12 },
+    { label: "两次输入保持一致", valid: Boolean(confirmation) && newPassword === confirmation },
+  ], [confirmation, newPassword]);
+
+  const submit = async () => {
+    setFormError(null);
+    setFieldErrors({});
+    if (newPassword.length < 12) {
+      setFieldErrors({ newPassword: "新密码至少需要 12 位" });
+      focusPasswordField("新密码");
+      return;
+    }
+    if (newPassword !== confirmation) {
+      setFieldErrors({ confirmation: "两次输入的新密码不一致" });
+      focusPasswordField("确认新密码");
+      return;
+    }
+    try {
+      const updated = await dispatch(changePasswordThunk({ currentPassword, newPassword })).unwrap();
+      // Clear the local draft before notifying the parent. This keeps the
+      // unsaved-changes guard correct even when a host keeps this page mounted.
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmation("");
+      setFieldErrors({});
+      onSuccess?.(updated);
+    } catch {
+      // The rejected thunk exposes its server message through session.error.
+    }
+  };
+
+  const form = <Form
+    className="tn-password-form"
+    labelAlign="top"
+    labelWidth={0}
+    onSubmit={(context) => { if (context.validateResult === true) void submit(); }}
+  >
+      <Form.FormItem label="当前密码" name="currentPassword" rules={[{ required: true, message: "请输入当前密码", type: "error" }]}>
+        <StarterPasswordInput ariaLabel="当前密码" value={currentPassword} onChange={value => { setCurrentPassword(value); setFormError(null); dispatch(clearSessionError()); }} autocomplete="current-password" disabled={busy} placeholder="请输入当前密码" />
+      </Form.FormItem>
+      <Form.FormItem label="新密码" name="newPassword" status={fieldErrors.newPassword ? "error" : undefined} help={fieldErrors.newPassword} rules={[{ required: true, min: 12, message: "新密码至少需要 12 位", type: "error" }]}>
+        <StarterPasswordInput ariaLabel="新密码" ariaInvalid={Boolean(fieldErrors.newPassword)} ariaDescribedby={fieldErrors.newPassword ? "password-new-error" : undefined} value={newPassword} onChange={value => { setNewPassword(value); setFieldErrors(current => ({ ...current, newPassword: undefined })); setFormError(null); dispatch(clearSessionError()); }} autocomplete="new-password" disabled={busy} placeholder="请输入至少 12 位的新密码" />
+        {fieldErrors.newPassword && <span id="password-new-error" className="tn-sr-only">{fieldErrors.newPassword}</span>}
+      </Form.FormItem>
+      <Form.FormItem label="确认新密码" name="confirmation" status={fieldErrors.confirmation ? "error" : undefined} help={fieldErrors.confirmation} rules={[{ required: true, message: "请再次输入新密码", type: "error" }]}>
+        <StarterPasswordInput ariaLabel="确认新密码" ariaInvalid={Boolean(fieldErrors.confirmation)} ariaDescribedby={fieldErrors.confirmation ? "password-confirmation-error" : undefined} value={confirmation} onChange={value => { setConfirmation(value); setFieldErrors(current => ({ ...current, confirmation: undefined })); setFormError(null); dispatch(clearSessionError()); }} autocomplete="new-password" disabled={busy} placeholder="请再次输入新密码" />
+        {fieldErrors.confirmation && <span id="password-confirmation-error" className="tn-sr-only">{fieldErrors.confirmation}</span>}
+      </Form.FormItem>
+      <Form.FormItem className="tn-password-submit">
+        <div className="tn-password-actions">
+          <Button className="tn-password-submit-button" theme="primary" type="submit" loading={busy} disabled={busy}>更新密码</Button>
+        </div>
+      </Form.FormItem>
+    </Form>;
+
+  const panel = <section className={`tn-password-card${isFirstLogin ? " tn-password-card-first" : ""}`} aria-labelledby="password-card-title">
+    <header className="tn-password-card-head">
+      <div className="tn-password-card-icon" aria-hidden="true"><KeyRound size={20} /></div>
+      <div>
+        <h2 id="password-card-title">{isFirstLogin ? "设置登录密码" : "修改登录密码"}</h2>
+        <p>{isFirstLogin ? "首次登录需要先设置一个新的登录密码。" : `当前账号：${displayName}`}</p>
+      </div>
+    </header>
+    {(formError || error) && <div role="alert" aria-live="assertive"><Alert className="tn-password-alert" theme="error" message={formError || error || "密码更新失败"} /></div>}
+    <div className="tn-password-card-body">
+      <div>{form}</div>
+      <aside className="tn-password-guidance" aria-label="密码要求">
+        <div className="tn-password-guidance-title"><ShieldCheck size={18} />密码要求</div>
+        <p>请使用不易猜测且未在其他服务重复使用的密码。</p>
+        <ul>
+          {requirements.map((item) => <li key={item.label} className={item.valid ? "is-valid" : ""}><Check size={14} />{item.label}</li>)}
+        </ul>
+      </aside>
+    </div>
+  </section>;
+
+  if (!isFirstLogin) {
+    return <Page title="修改密码" subtitle="更新当前管理员的登录凭据。" actions={onCancel ? <Button variant="text" type="button" onClick={onCancel} icon={<ArrowLeft size={16} />}>{returnLabel}</Button> : undefined} className="tn-password-page">{panel}</Page>;
+  }
+
+  return <main className="tn-login-page" data-page="change-password">
+    <section className="tn-login-container tn-password-container">
+      <div className="tn-login-heading">
+        <h1 id="password-title" className="tn-login-title">首次登录保护</h1>
+        <p className="tn-login-subtitle">管理员 {displayName} 需要先设置新密码。</p>
+      </div>
+      {panel}
+    </section>
+  </main>;
+}
+
+function focusPasswordField(label: string) {
+  const focus = () => {
+    const nodes = Array.from(document.querySelectorAll<HTMLElement>("[aria-invalid='true'], [aria-invalid='true'] input, [aria-invalid='true'] textarea"));
+    const target = nodes.find(node => node.closest(".t-form__item")?.textContent?.includes(label));
+    target?.focus();
+  };
+  requestAnimationFrame(focus);
+  window.setTimeout(focus, 60);
+}
diff --git a/web-next/src/pages/auth/Login.tsx b/web-next/src/pages/auth/Login.tsx
new file mode 100644
index 0000000..358f81b
--- /dev/null
+++ b/web-next/src/pages/auth/Login.tsx
@@ -0,0 +1,2 @@
+export { default } from "./LoginPage";
+export * from "./LoginPage";
diff --git a/web-next/src/pages/auth/LoginPage.tsx b/web-next/src/pages/auth/LoginPage.tsx
new file mode 100644
index 0000000..9494766
--- /dev/null
+++ b/web-next/src/pages/auth/LoginPage.tsx
@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { Alert, Button, Checkbox, Form } from "tdesign-react";
+import { useAppDispatch, useAppSelector, clearSessionError, loginThunk } from "../../store";
+import type { Admin } from "../../types/auth";
+import { LoginUserIcon, StarterPasswordInput } from "./StarterAuth";
+import AccessibleInput from "../../components/AccessibleInput";
+
+const REMEMBERED_USERNAME_KEY = "tallynote.login.username";
+
+export interface LoginPageProps {
+  notice?: string;
+  onSuccess?: (admin: Admin) => void;
+}
+
+function getRememberedUsername(): string {
+  if (typeof window === "undefined") return "";
+  try {
+    return window.localStorage.getItem(REMEMBERED_USERNAME_KEY) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+export default function LoginPage({ notice, onSuccess }: LoginPageProps) {
+  const dispatch = useAppDispatch();
+  const { status, error } = useAppSelector((state) => state.session);
+  const [username, setUsername] = useState(getRememberedUsername);
+  const [password, setPassword] = useState("");
+  const [rememberAccount, setRememberAccount] = useState(Boolean(username));
+  const [fieldErrors, setFieldErrors] = useState<{ username?: string; password?: string }>({});
+  const busy = status === "loading";
+
+  const updateUsername = (value: string) => {
+    setUsername(value);
+    setFieldErrors(current => ({ ...current, username: undefined }));
+    if (error) dispatch(clearSessionError());
+  };
+
+  const updatePassword = (value: string) => {
+    setPassword(value);
+    setFieldErrors(current => ({ ...current, password: undefined }));
+    if (error) dispatch(clearSessionError());
+  };
+
+  const submit = async () => {
+    const normalizedUsername = username.trim();
+    const nextErrors: { username?: string; password?: string } = {};
+    if (!normalizedUsername) nextErrors.username = "请输入用户名";
+    if (!password) nextErrors.password = "请输入密码";
+    if (Object.keys(nextErrors).length) {
+      setFieldErrors(nextErrors);
+      const focusInvalid = () => document.querySelector<HTMLElement>("[aria-invalid='true'], [aria-invalid='true'] input, [aria-invalid='true'] textarea")?.focus();
+      requestAnimationFrame(focusInvalid);
+      window.setTimeout(focusInvalid, 60);
+      return;
+    }
+    setFieldErrors({});
+    try {
+      if (rememberAccount) {
+        window.localStorage.setItem(REMEMBERED_USERNAME_KEY, normalizedUsername);
+      } else {
+        window.localStorage.removeItem(REMEMBERED_USERNAME_KEY);
+      }
+    } catch {
+      // Private browsing or a locked-down browser may reject localStorage.
+    }
+    try {
+      const admin = await dispatch(loginThunk({ username: normalizedUsername, password })).unwrap();
+      onSuccess?.(admin);
+    } catch {
+      // The rejected thunk exposes its server message through session.error.
+    }
+  };
+
+  return (
+    <main className="tn-login-page" data-page="login">
+      <section className="tn-login-container" aria-labelledby="login-title">
+        <div className="tn-login-heading">
+          <h1 id="login-title" className="tn-login-title">登录到 <span className="tn-login-title-brand">TallyNote</span></h1>
+        </div>
+
+        <Form
+          className="tn-login-form"
+          labelWidth={0}
+          onSubmit={(context) => { context.e?.preventDefault(); void submit(); }}
+        >
+          {notice && <div role="status" aria-live="polite"><Alert className="tn-login-alert" theme="info" message={notice} /></div>}
+          {error && <div role="alert" aria-live="assertive"><Alert className="tn-login-alert" theme="error" message={error} /></div>}
+          <Form.FormItem label="用户名" requiredMark={false} name="username" status={fieldErrors.username ? "error" : undefined} help={fieldErrors.username}>
+            <AccessibleInput
+              inputAriaLabel="用户名"
+              inputAriaInvalid={Boolean(fieldErrors.username)}
+              inputAriaDescribedby={fieldErrors.username ? "login-username-error" : undefined}
+              size="large"
+              value={username}
+              onChange={(value) => updateUsername(String(value))}
+              clearable
+              disabled={busy}
+              autocomplete="username"
+              autofocus
+              prefixIcon={<LoginUserIcon />}
+              placeholder="请输入用户名"
+            />
+            {fieldErrors.username && <span id="login-username-error" className="tn-sr-only">{fieldErrors.username}</span>}
+          </Form.FormItem>
+          <Form.FormItem label="密码" requiredMark={false} name="password" status={fieldErrors.password ? "error" : undefined} help={fieldErrors.password}>
+            <StarterPasswordInput
+              ariaLabel="密码"
+              ariaInvalid={Boolean(fieldErrors.password)}
+              ariaDescribedby={fieldErrors.password ? "login-password-error" : undefined}
+              value={password}
+              onChange={updatePassword}
+              autocomplete="current-password"
+              disabled={busy}
+              placeholder="请输入登录密码"
+            />
+            {fieldErrors.password && <span id="login-password-error" className="tn-sr-only">{fieldErrors.password}</span>}
+          </Form.FormItem>
+          <div className="tn-login-options"><Checkbox checked={rememberAccount} onChange={setRememberAccount} disabled={busy}>记住账号</Checkbox></div>
+          <Form.FormItem className="tn-login-submit">
+            <Button block size="large" theme="primary" type="submit" loading={busy} disabled={busy}>登录</Button>
+          </Form.FormItem>
+        </Form>
+
+      </section>
+    </main>
+  );
+}
diff --git a/web-next/src/pages/auth/StarterAuth.tsx b/web-next/src/pages/auth/StarterAuth.tsx
new file mode 100644
index 0000000..b72ed6f
--- /dev/null
+++ b/web-next/src/pages/auth/StarterAuth.tsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import AccessibleInput from "../../components/AccessibleInput";
+import { Eye, EyeOff, LockKeyhole, UserRound, X } from "lucide-react";
+
+export interface StarterPasswordInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  ariaLabel: string;
+  autocomplete?: string;
+  disabled?: boolean;
+  ariaInvalid?: boolean;
+  ariaDescribedby?: string;
+}
+
+/** Starter-style password field with clear and show/hide affordances. */
+export function StarterPasswordInput({
+  value,
+  onChange,
+  placeholder,
+  ariaLabel,
+  autocomplete,
+  disabled = false,
+  ariaInvalid,
+  ariaDescribedby,
+}: StarterPasswordInputProps) {
+  const [visible, setVisible] = useState(false);
+  const toggle = () => setVisible((current) => !current);
+
+  return (
+    <AccessibleInput
+      inputAriaLabel={ariaLabel}
+      inputAriaInvalid={ariaInvalid}
+      inputAriaDescribedby={ariaDescribedby}
+      size="large"
+      value={value}
+      onChange={(next) => onChange(String(next))}
+      type={visible ? "text" : "password"}
+      disabled={disabled}
+      autocomplete={autocomplete}
+      prefixIcon={<LockKeyhole className="tn-login-input-icon" size={18} />}
+      // A defined (empty) suffix prevents TDesign's password icon from being
+      // added in addition to the Starter-style control below.
+      suffixIcon={<span className="tn-login-suffix-placeholder" aria-hidden="true" />}
+      suffix={<span className="tn-login-suffix-actions">
+        {value && <button type="button" className="tn-login-clear" aria-label="清空密码" onMouseDown={(event) => event.preventDefault()} onClick={() => onChange("")}><X size={15} /></button>}
+        <button type="button" className="tn-login-password-toggle" aria-label={visible ? "隐藏密码" : "显示密码"} aria-pressed={visible} onMouseDown={(event) => event.preventDefault()} onClick={toggle}>
+          {visible ? <Eye size={17} /> : <EyeOff size={17} />}
+        </button>
+      </span>}
+      placeholder={placeholder}
+    />
+  );
+}
+
+export function LoginUserIcon() {
+  return <UserRound className="tn-login-prefix-icon" aria-hidden="true" size={18} />;
+}
diff --git a/web-next/src/pages/auth/index.ts b/web-next/src/pages/auth/index.ts
new file mode 100644
index 0000000..b08fd86
--- /dev/null
+++ b/web-next/src/pages/auth/index.ts
@@ -0,0 +1,4 @@
+export { default as LoginPage } from "./LoginPage";
+export { default as ChangePasswordPage } from "./ChangePasswordPage";
+export type { LoginPageProps } from "./LoginPage";
+export type { ChangePasswordPageProps } from "./ChangePasswordPage";
diff --git a/web-next/src/pages/common.tsx b/web-next/src/pages/common.tsx
new file mode 100644
index 0000000..ad8ee24
--- /dev/null
+++ b/web-next/src/pages/common.tsx
@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import { AlertCircle, Loader2 } from "lucide-react";
+import { Alert, Button, Card, Loading, Space, Tag } from "tdesign-react";
+
+export function Page({ eyebrow, title, subtitle, actions, children, className = "" }: {
+  eyebrow?: string;
+  title: string;
+  subtitle?: string;
+  actions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  return <section className={`tn-page ${className}`}>
+    <div className="tn-page-head">
+      <div>{eyebrow && <div className="tn-eyebrow">{eyebrow}</div>}<h1 className="tn-page-title">{title}</h1>{subtitle && <p className="tn-page-subtitle">{subtitle}</p>}</div>
+      {actions && <div className="tn-page-actions">{actions}</div>}
+    </div>
+    {children}
+  </section>;
+}
+
+export function AsyncState({ loading, error, empty, onRetry, children }: {
+  loading: boolean;
+  error?: string;
+  empty?: ReactNode;
+  onRetry?: () => void;
+  children: ReactNode;
+}) {
+  if (loading && empty) return <div className="tn-empty" role="status" aria-live="polite"><Loading text="加载中…" /></div>;
+  if (error && empty) return <div className="tn-empty" role="alert"><AlertCircle size={28} /><p>{error}</p>{onRetry && <Button variant="outline" onClick={onRetry}>重试</Button>}</div>;
+  return <>
+    {loading && <div className="tn-inline-loading" role="status"><Loader2 size={15} className="tn-spin" aria-hidden="true" />正在更新…</div>}
+    {error && <ErrorBanner message={error} onRetry={onRetry} />}
+    {empty || children}
+  </>;
+}
+
+export function ErrorBanner({ message, onRetry }: { message: string; onRetry?: () => void }) {
+  return <div role="alert"><Alert theme="error" className="tn-alert" icon={<AlertCircle size={16} />} message={<Space size="small"><span>{message}</span>{onRetry && <Button variant="text" onClick={onRetry}>重试</Button>}</Space>} /></div>;
+}
+
+export function BusyIcon() { return <Loader2 size={16} className="tn-spin" aria-hidden="true" />; }
+
+export function StatusTag({ status }: { status: "unreimbursed" | "reimbursed" | "active" | "disabled" }) {
+  const labels = { unreimbursed: "未报销", reimbursed: "已报销", active: "有效", disabled: "已停用" } as const;
+  const themes = { unreimbursed: "warning", reimbursed: "success", active: "success", disabled: "default" } as const;
+  return <Tag theme={themes[status]} variant="light-outline">{labels[status]}</Tag>;
+}
+
+export function Surface({ children, className = "" }: { children: ReactNode; className?: string }) {
+  return <Card bordered className={`tn-flat-section ${className}`}>{children}</Card>;
+}
diff --git a/web-next/src/pages/dashboard/DashboardPage.tsx b/web-next/src/pages/dashboard/DashboardPage.tsx
new file mode 100644
index 0000000..8e3e874
--- /dev/null
+++ b/web-next/src/pages/dashboard/DashboardPage.tsx
@@ -0,0 +1,165 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { AlertCircle, ChevronLeft, ChevronRight, RefreshCw } from "lucide-react";
+import { Alert, Button, Card, DatePicker, Empty, Loading, Space, Statistic, Table, Tag, Tooltip } from "tdesign-react";
+import ReactEChartsCore from "echarts-for-react/lib/core";
+import * as echarts from "echarts/core";
+import { LineChart } from "echarts/charts";
+import { GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import { useSearchParams } from "react-router-dom";
+import { api } from "../../services/api";
+import { dateText, money, monthNow } from "../expenses/date";
+import type { Expense } from "../expenses/types";
+import type { RouteId } from "../../router";
+
+echarts.use([LineChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
+
+type Props = { timezone?: string; onNavigate?: (id: RouteId, search?: string) => void };
+type ExpenseResult = { items: Expense[]; summary: { count: number; amountCents: number } };
+
+function prefersReducedMotion(): boolean {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function"
+    ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    : false;
+}
+
+export default function DashboardPage({ timezone = "Asia/Shanghai", onNavigate }: Props) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const rawMonthParam = searchParams.get("month");
+  const defaultMonth = monthNow(timezone);
+  const month = rawMonthParam && /^\d{4}-(0[1-9]|1[0-2])$/.test(rawMonthParam) ? rawMonthParam : defaultMonth;
+  const [unreimbursed, setUnreimbursed] = useState<ExpenseResult>({ items: [], summary: { count: 0, amountCents: 0 } });
+  const [reimbursed, setReimbursed] = useState<ExpenseResult>({ items: [], summary: { count: 0, amountCents: 0 } });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [loadedMonth, setLoadedMonth] = useState<string | null>(null);
+  const requestSequence = useRef(0);
+  const [reducedMotion, setReducedMotion] = useState(prefersReducedMotion);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => setReducedMotion(media.matches);
+    sync();
+    if (typeof media.addEventListener === "function") {
+      media.addEventListener("change", sync);
+      return () => media.removeEventListener("change", sync);
+    }
+    media.addListener?.(sync);
+    return () => media.removeListener?.(sync);
+  }, []);
+
+  useEffect(() => {
+    if (!rawMonthParam || rawMonthParam === month) return;
+    const params = new URLSearchParams(searchParams);
+    params.set("month", month);
+    setSearchParams(params, { replace: true });
+  }, [month, rawMonthParam, searchParams, setSearchParams]);
+
+  const setDashboardMonth = (nextMonth: string) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("month", nextMonth);
+    setSearchParams(params);
+  };
+  const load = async () => {
+    const sequence = ++requestSequence.current;
+    setLoading(true);
+    setError("");
+    try {
+      const [pending, done] = await Promise.all([
+        api<ExpenseResult>(`/api/expenses?month=${month}&status=unreimbursed&query=&missingInvoice=false`),
+        api<ExpenseResult>(`/api/expenses?month=${month}&status=reimbursed&query=&missingInvoice=false`),
+      ]);
+      if (sequence !== requestSequence.current) return;
+      setUnreimbursed(pending);
+      setReimbursed(done);
+      setLoadedMonth(month);
+    } catch (caught) {
+      if (sequence === requestSequence.current) setError((caught as Error).message);
+    } finally {
+      if (sequence === requestSequence.current) setLoading(false);
+    }
+  };
+  useEffect(() => { void load(); }, [month]);
+
+  const allItems = useMemo(() => [...unreimbursed.items, ...reimbursed.items].sort((a, b) => b.paidAt - a.paidAt), [unreimbursed.items, reimbursed.items]);
+  const totalCents = unreimbursed.summary.amountCents + reimbursed.summary.amountCents;
+  const totalCount = unreimbursed.summary.count + reimbursed.summary.count;
+  const missingInvoiceCount = allItems.filter((item) => item.invoiceCount === 0).length;
+  const recentItems = allItems.slice(0, 8);
+  const reimbursedPercent = totalCount ? Math.round((reimbursed.summary.count / totalCount) * 100) : 0;
+  const hasCurrentSnapshot = loadedMonth === month;
+  const expensesSearch = `?month=${encodeURIComponent(month)}`;
+  const chartDateFormatter = useMemo(() => new Intl.DateTimeFormat("en-CA", { timeZone: timezone, year: "numeric", month: "2-digit", day: "2-digit" }), [timezone]);
+
+  const chartOption = useMemo(() => {
+    const grouped = new Map<string, { label: string; unreimbursed: number; reimbursed: number }>();
+    for (const item of allItems) {
+      const parts = Object.fromEntries(chartDateFormatter.formatToParts(new Date(item.paidAt)).map((part) => [part.type, part.value]));
+      const key = `${parts.year}-${parts.month}-${parts.day}`;
+      const label = `${parts.month}/${parts.day}`;
+      const current = grouped.get(key) ?? { label, unreimbursed: 0, reimbursed: 0 };
+      current[item.status] += item.amountCents / 100;
+      grouped.set(key, current);
+    }
+    const values = [...grouped.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([, value]) => value);
+    return {
+      animation: !reducedMotion,
+      animationDuration: reducedMotion ? 0 : 380,
+      color: ["#175cd3", "#2f7d5c"],
+      tooltip: { trigger: "axis", valueFormatter: (value: number) => `¥${value.toFixed(2)}` },
+      legend: { top: 0, right: 0, textStyle: { color: "#667085" }, data: ["未报销", "已报销"] },
+      grid: { left: 48, right: 20, top: 38, bottom: 30 },
+      xAxis: { type: "category", data: values.map((value) => value.label), boundaryGap: false, axisLine: { lineStyle: { color: "#dce3ec" } }, axisLabel: { color: "#667085" } },
+      yAxis: { type: "value", axisLabel: { color: "#667085", formatter: (value: number) => `¥${value}` }, splitLine: { lineStyle: { color: "#edf1f5" } } },
+      series: [
+        { name: "未报销", type: "line", smooth: true, symbol: "circle", symbolSize: 6, data: values.map((value) => value.unreimbursed), lineStyle: { width: 2 }, areaStyle: { color: "rgba(23,92,211,.08)" } },
+        { name: "已报销", type: "line", smooth: true, symbol: "circle", symbolSize: 6, data: values.map((value) => value.reimbursed), lineStyle: { width: 2 }, areaStyle: { color: "rgba(47,125,92,.06)" } },
+      ],
+    };
+  }, [allItems, chartDateFormatter, reducedMotion]);
+
+  const shiftMonth = (delta: number) => {
+    const [rawYear, rawMonth] = month.split("-").map(Number);
+    const year = rawYear ?? new Date().getFullYear();
+    const monthNumber = rawMonth ?? 1;
+    const next = new Date(year, monthNumber - 1 + delta, 1);
+    setDashboardMonth(`${next.getFullYear()}-${String(next.getMonth() + 1).padStart(2, "0")}`);
+  };
+
+  const columns = [
+    { colKey: "paidAt", title: "支付时间", cell: ({ row }: any) => dateText(row.paidAt, timezone) },
+    { colKey: "amountCents", title: "金额", cell: ({ row }: any) => <strong className="tn-amount">{money(row.amountCents)}</strong> },
+    { colKey: "note", title: "备注", cell: ({ row }: any) => row.note || <span className="tn-muted">无备注</span>, ellipsis: true },
+    { colKey: "status", title: "状态", cell: ({ row }: any) => <Tag theme={row.status === "reimbursed" ? "success" : "warning"}>{row.status === "reimbursed" ? "已报销" : "未报销"}</Tag> },
+  ];
+
+  return <section className="tn-page tn-dashboard-page">
+    <div className="tn-page-head">
+      <div><h1 className="tn-page-title">仪表盘</h1><p className="tn-page-subtitle">快速查看本月采购报销进度和待处理账目。</p></div>
+      <div className="tn-page-actions"><div className="tn-dashboard-actions"><div className="tn-dashboard-month-control"><Tooltip content="上个月"><Button variant="outline" shape="square" onClick={() => shiftMonth(-1)} aria-label="上个月" icon={<ChevronLeft size={16} />} /></Tooltip><DatePicker className="tn-dashboard-month" mode="month" format="YYYY-MM" value={month} onChange={(value: any) => { const next = String(value || "").slice(0, 7); if (/^\d{4}-\d{2}$/.test(next)) setDashboardMonth(next); }} inputProps={{ "aria-label": "仪表盘月份" } as any} /><Tooltip content="下个月"><Button variant="outline" shape="square" onClick={() => shiftMonth(1)} aria-label="下个月" icon={<ChevronRight size={16} />} /></Tooltip></div><div className="tn-dashboard-secondary-actions"><Button className="tn-dashboard-refresh" variant="outline" onClick={() => void load()} disabled={loading} icon={<RefreshCw size={15} />}>刷新</Button><Button className="tn-dashboard-view" theme="primary" onClick={() => onNavigate?.("expenses", expensesSearch)}>查看账目</Button></div></div></div>
+    </div>
+    {error && hasCurrentSnapshot && <Alert theme="error" icon={<AlertCircle size={16} />} message={`刷新失败：${error}。当前展示的是本月最近一次成功加载的数据。`} />}
+    {loading ? <div className="tn-empty" role="status" aria-live="polite"><Loading text="加载仪表盘…" /></div> : !hasCurrentSnapshot ? <div className="tn-empty" role="alert"><Alert theme="error" icon={<AlertCircle size={16} />} message={error || "暂时无法读取仪表盘数据"} /><Button variant="outline" onClick={() => void load()} icon={<RefreshCw size={15} />}>重新加载</Button></div> : <>
+      <div className="tn-dashboard-stats">
+        <Card bordered className="tn-dashboard-stat tn-dashboard-stat-total"><Statistic title="本月总额" value={totalCents / 100} prefix="¥" decimalPlaces={2} /></Card>
+        <Card bordered className="tn-dashboard-stat tn-dashboard-stat-count"><Statistic title="账目笔数" value={totalCount} suffix="笔" /></Card>
+        <Card bordered className="tn-dashboard-stat tn-dashboard-stat-pending"><Statistic title="未报销" value={unreimbursed.summary.amountCents / 100} prefix="¥" decimalPlaces={2} /></Card>
+        <Card bordered className="tn-dashboard-stat tn-dashboard-stat-missing"><Statistic title="缺发票" value={missingInvoiceCount} suffix="笔" /></Card>
+      </div>
+      <div className="tn-dashboard-grid">
+        <Card bordered className="tn-dashboard-chart" title={<DashboardCardTitle title="支付趋势" subtitle="按支付日期汇总本月全部账目" />}>
+          {allItems.length ? <div role="img" aria-label={`${month} 支付趋势：共 ${totalCount} 笔，未报销 ${unreimbursed.summary.count} 笔，已报销 ${reimbursed.summary.count} 笔。`}><ReactEChartsCore echarts={echarts} option={chartOption} style={{ height: 286, width: "100%" }} notMerge lazyUpdate /></div> : <div className="tn-dashboard-chart-empty"><span>本月暂无支付数据</span><small>新增账目后，这里会显示每日支付趋势。</small></div>}
+        </Card>
+        <Card bordered className="tn-dashboard-progress" title={<DashboardCardTitle title="报销进度" subtitle="本月账目状态分布" />}><div className="tn-progress-ring" style={{ background: `conic-gradient(var(--tn-blue-700) ${reimbursedPercent}%, #e7edf3 0)` }} role="img" aria-label={`已报销 ${reimbursedPercent}%`}><div><strong>{reimbursedPercent}%</strong><span>已报销</span></div></div><div className="tn-dashboard-progress-legend"><span><i className="is-blue" />未报销 <strong>{unreimbursed.summary.count} 笔</strong></span><span><i className="is-green" />已报销 <strong>{reimbursed.summary.count} 笔</strong></span></div></Card>
+      </div>
+      <Card bordered className="tn-dashboard-recent" title={<DashboardCardTitle title="最近账目" subtitle="按支付时间倒序排列" />} actions={<Button variant="text" onClick={() => onNavigate?.("expenses", expensesSearch)}>查看全部</Button>}>
+        {recentItems.length ? <div className="tn-table-wrap tn-dashboard-table" role="region" aria-label="最近账目列表，可横向滚动查看更多列"><Table rowKey="id" data={recentItems} columns={columns as any} hover stripe /> </div> : <Empty description="本月暂无账目" />}
+      </Card>
+    </>}
+  </section>;
+}
+
+function DashboardCardTitle({ title, subtitle }: { title: string; subtitle: string }) {
+  return <div className="tn-dashboard-card-title"><span>{title}</span><small>{subtitle}</small></div>;
+}
diff --git a/web-next/src/pages/dashboard/index.ts b/web-next/src/pages/dashboard/index.ts
new file mode 100644
index 0000000..7e1e0a7
--- /dev/null
+++ b/web-next/src/pages/dashboard/index.ts
@@ -0,0 +1,2 @@
+export { default as DashboardPage } from "./DashboardPage";
+export { default } from "./DashboardPage";
diff --git a/web-next/src/pages/expenses/ExpenseDetail.tsx b/web-next/src/pages/expenses/ExpenseDetail.tsx
new file mode 100644
index 0000000..709819a
--- /dev/null
+++ b/web-next/src/pages/expenses/ExpenseDetail.tsx
@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AlertCircle, ArrowDownToLine, FileText, Image as ImageIcon, Loader2, Search, Settings, Trash2, X } from "lucide-react";
+import { Button, Dialog, Drawer, Loading, Space, Tag, Textarea, Tooltip } from "tdesign-react";
+import { api, ApiError } from "../../services/api";
+import { dateText, formatBytes, money } from "./date";
+import type { Attachment, Expense, Notify, TimelineEvent } from "./types";
+import { useDrawerFocus } from "../../hooks/useDrawerFocus";
+
+type Props = { expense: Expense; timezone?: string; onClose: () => void; onUpdated: () => void; onRequestEdit: (expense: Expense) => void; notify?: Notify };
+const TIMELINE_LABELS: Record<string, string> = {
+  "expense.created": "创建账目",
+  "expense.updated": "更新账目",
+  "expense.status_changed": "切换报销状态",
+  "expense.trashed": "移入回收站",
+  "expense.restored": "从回收站恢复",
+  "attachment.added": "添加附件",
+  "attachment.deleted": "删除附件",
+};
+export default function ExpenseDetail({ expense, timezone = "Asia/Shanghai", onClose, onUpdated, onRequestEdit, notify }: Props) {
+  const [detail, setDetail] = useState(expense); const [timeline, setTimeline] = useState<TimelineEvent[]>([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); const [busy, setBusy] = useState(false); const [action, setAction] = useState<"status" | "trash" | null>(null); const [removeTarget, setRemoveTarget] = useState<Attachment | null>(null); const [removeReason, setRemoveReason] = useState(""); const [preview, setPreview] = useState<Attachment | null>(null); const [removeError, setRemoveError] = useState("");
+  const requestSequence = useRef(0);
+  useDrawerFocus(true, ".tn-detail-drawer");
+  const load = useCallback(async () => {
+    const currentSequence = ++requestSequence.current;
+    const currentExpenseId = expense.id;
+    setLoading(true);
+    setError("");
+    try {
+      const result = await api<{ expense: Expense; timeline: TimelineEvent[] }>(`/api/expenses/${currentExpenseId}`);
+      if (currentSequence !== requestSequence.current || result.expense.id !== currentExpenseId) return;
+      setDetail(result.expense);
+      setTimeline(result.timeline || []);
+    } catch (caught) {
+      if (currentSequence === requestSequence.current) setError((caught as Error).message);
+    } finally {
+      if (currentSequence === requestSequence.current) setLoading(false);
+    }
+  }, [expense.id]);
+  useEffect(() => {
+    setDetail(expense);
+    setTimeline([]);
+    setRemoveTarget(null);
+    setPreview(null);
+    void load();
+    return () => { requestSequence.current += 1; };
+  }, [expense.id, load]);
+  const recoverConflict = (caught: unknown, setMessage: (message: string) => void) => {
+    if (!(caught instanceof ApiError) || caught.status !== 409) return false;
+    const current = (caught.details as { current?: Expense } | undefined)?.current;
+    if (!current) return false;
+    setDetail(current);
+    setMessage("这笔账目刚被其他管理员修改，已加载最新版本，请确认后重试。");
+    return true;
+  };
+  const updateStatus = async () => { setBusy(true); try { const next = detail.status === "reimbursed" ? "unreimbursed" : "reimbursed"; const result = await api<{ expense: Expense }>(`/api/expenses/${detail.id}/status`, { method: "POST", body: JSON.stringify({ status: next, version: detail.version }) }); setDetail(result.expense); setAction(null); notify?.(next === "reimbursed" ? "已标记为已报销" : "已改回未报销", "success"); onUpdated(); } catch (caught) { if (!recoverConflict(caught, setError)) setError((caught as Error).message); setAction(null); } finally { setBusy(false); } };
+  const trash = async () => { setBusy(true); try { await api(`/api/expenses/${detail.id}`, { method: "DELETE", body: JSON.stringify({ version: detail.version }) }); notify?.("账目已移入回收站", "success"); setAction(null); onClose(); onUpdated(); } catch (caught) { if (!recoverConflict(caught, setError)) setError((caught as Error).message); setAction(null); } finally { setBusy(false); } };
+  const remove = async () => { if (!removeTarget) return; const requires = removeTarget.kind === "invoice" && detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim(); if (requires && !removeReason.trim()) { setRemoveError("请填写无发票原因"); return; } setBusy(true); setRemoveError(""); try { const body: { version: number; invoiceMissingReason?: string } = { version: detail.version }; if (requires) body.invoiceMissingReason = removeReason.trim(); const result = await api<{ expense: Expense }>(`/api/attachments/${removeTarget.id}`, { method: "DELETE", body: JSON.stringify(body) }); setDetail(result.expense); setRemoveTarget(null); notify?.("附件已删除", "success"); onUpdated(); } catch (caught) { if (!recoverConflict(caught, setRemoveError)) setRemoveError((caught as Error).message); } finally { setBusy(false); } };
+  return <>
+    <Drawer className="tn-content-drawer tn-detail-drawer" placement="right" size="520px" visible destroyOnClose header="账目详情" onClose={onClose} footer={<Space><Button onClick={() => setAction("status")} disabled={busy}>{detail.status === "reimbursed" ? "标记未报销" : "标记已报销"}</Button><Button theme="danger" onClick={() => setAction("trash")} disabled={busy}><Trash2 size={15} />移入回收站</Button></Space>}>
+      {loading ? <div role="status" aria-live="polite"><Loading text="加载详情…" /></div> : error ? <div role="alert" className="expense-error"><AlertCircle size={16} />{error}<Button variant="text" onClick={load}>重试</Button></div> : <div className="expense-detail">
+        <div className="expense-detail-head"><strong>{money(detail.amountCents)}</strong><Button variant="outline" onClick={() => onRequestEdit(detail)}><Settings size={15} />编辑</Button></div>
+        <dl><div><dt>支付时间</dt><dd>{dateText(detail.paidAt, timezone)}</dd></div><div><dt>发票</dt><dd>{detail.invoiceCount > 0 ? `${detail.invoiceCount} 张` : detail.invoiceMissingReason ? <><Tag theme="warning">无发票</Tag>：{detail.invoiceMissingReason}</> : <Tag theme="danger">未说明</Tag>}</dd></div><div><dt>状态</dt><dd><Tag theme={detail.status === "reimbursed" ? "success" : "warning"}>{detail.status === "reimbursed" ? "已报销" : "未报销"}</Tag></dd></div><div><dt>备注</dt><dd>{detail.note || "无"}</dd></div></dl>
+        <h3>附件 <small>{detail.attachments?.length || 0}</small></h3><div className="expense-attachments">{(detail.attachments || []).map(a => { const protectsLastProof = a.kind === "payment_proof" && detail.paymentProofCount <= 1; return <div className="expense-attachment" key={a.id}><span title={a.originalName}>{a.mimeType.startsWith("image/") ? <ImageIcon size={16} /> : <FileText size={16} />} {a.originalName}<small>{formatBytes(a.sizeBytes)}</small></span><Space>{a.previewable && <Tooltip content="预览附件" placement="left"><Button variant="text" shape="circle" onClick={() => setPreview(a)} aria-label={`预览 ${a.originalName}`}><Search size={15} /></Button></Tooltip>}<Tooltip content="下载附件" placement="left"><Button variant="text" shape="circle" onClick={() => { window.location.href = `/api/attachments/${a.id}/content?download=1`; }} aria-label={`下载 ${a.originalName}`}><ArrowDownToLine size={15} /></Button></Tooltip><Tooltip content={protectsLastProof ? "至少保留一张付款凭证" : "删除附件"} placement="left"><Button variant="text" shape="circle" theme="danger" disabled={protectsLastProof} onClick={() => { setRemoveReason(""); setRemoveError(""); setRemoveTarget(a); }} aria-label={protectsLastProof ? `不可删除最后一张付款凭证 ${a.originalName}` : `删除 ${a.originalName}`}><Trash2 size={14} /></Button></Tooltip></Space></div>; })}</div>
+        {timeline.length > 0 && <><h3>操作记录</h3><div className="expense-timeline">{timeline.slice(0, 12).map(t => <div key={t.id}><span>{dateText(t.occurredAt, timezone)}</span><strong title={t.action}>{TIMELINE_LABELS[t.action] || t.action}</strong><small>{t.actorUsername || "系统"}</small></div>)}</div></>}
+      </div>}
+    </Drawer>
+    <Dialog visible={action === "status"} header={detail.status === "reimbursed" ? "改回未报销？" : "标记为已报销？"} confirmBtn={{ content: "确认变更", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setAction(null); }} onConfirm={() => void updateStatus()} onCancel={() => { if (!busy) setAction(null); }}>{detail.status === "reimbursed" ? "这笔账目会重新出现在未报销列表。" : "确认这笔账目已完成报销，并从未报销列表移出？"}</Dialog>
+    <Dialog visible={action === "trash"} header="移入回收站？" confirmBtn={{ content: "移入回收站", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setAction(null); }} onConfirm={() => void trash()} onCancel={() => { if (!busy) setAction(null); }}>账目会从普通列表和导出结果中隐藏，附件会保留，可在回收站恢复。</Dialog>
+    <Dialog visible={Boolean(removeTarget)} header="删除附件？" confirmBtn={{ content: "删除附件", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setRemoveTarget(null); }} onConfirm={() => void remove()} onCancel={() => { if (!busy) setRemoveTarget(null); }}>{removeTarget && <><p>{removeTarget.kind === "payment_proof" ? "账目至少需要保留一张付款凭证。" : detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim() ? "这是最后一张发票。删除后必须填写无发票原因。" : "将删除这张发票。"}</p>{removeTarget.kind === "invoice" && detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim() && <Textarea disabled={busy} aria-label="无发票原因" aria-invalid={Boolean(removeError)} aria-describedby={removeError ? "remove-attachment-error" : undefined} value={removeReason} onChange={value => { setRemoveReason(value); setRemoveError(""); }} placeholder="例如：商家无法开具发票" maxlength={500} />}{removeError && <div id="remove-attachment-error" className="expense-error" role="alert"><AlertCircle size={16} />{removeError}</div>}</>}</Dialog>
+    <Dialog visible={Boolean(preview)} header={preview?.originalName} onClose={() => setPreview(null)} cancelBtn="关闭" footer={null}>{preview && <div className="tn-preview">{preview.mimeType.startsWith("image/") ? <img src={`/api/attachments/${preview.id}/content`} alt={preview.originalName} /> : <iframe src={`/api/attachments/${preview.id}/content`} title={preview.originalName} />}</div>}</Dialog>
+  </>;
+}
diff --git a/web-next/src/pages/expenses/ExpenseDrawer.tsx b/web-next/src/pages/expenses/ExpenseDrawer.tsx
new file mode 100644
index 0000000..ede92a8
--- /dev/null
+++ b/web-next/src/pages/expenses/ExpenseDrawer.tsx
@@ -0,0 +1,169 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { AlertCircle, Check, FileUp, Loader2, X } from "lucide-react";
+import { Button, Checkbox, DatePicker, Dialog, Drawer, Textarea, Tooltip, Upload } from "tdesign-react";
+import AccessibleInput from "../../components/AccessibleInput";
+import { api, ApiError } from "../../services/api";
+import { apiFieldErrors } from "../../services/formErrors";
+import { dateFromInput, dateInputValue, formatBytes } from "./date";
+import type { Expense, Notify } from "./types";
+import { useUnsavedActions, useUnsavedChanges } from "../../contexts/UnsavedChanges";
+import { useDrawerFocus } from "../../hooks/useDrawerFocus";
+
+type Props = { expense?: Expense | null; timezone?: string; onClose: () => void; onSaved: () => void; notify?: Notify };
+type UploadFile = File & { raw?: File };
+type ExpenseField = "paidAt" | "amount" | "note" | "paymentProofs" | "invoices" | "invoiceMissingReason";
+
+export default function ExpenseDrawer({ expense, timezone = "Asia/Shanghai", onClose, onSaved, notify }: Props) {
+  const initial = useMemo(() => ({ amount: expense ? (expense.amountCents / 100).toFixed(2) : "", note: expense?.note || "", paidAt: expense ? dateInputValue(new Date(expense.paidAt), timezone) : dateInputValue(new Date(), timezone), reason: expense?.invoiceMissingReason || "" }), [expense, timezone]);
+  const [amount, setAmount] = useState(initial.amount); const [note, setNote] = useState(initial.note); const [paidAt, setPaidAt] = useState(initial.paidAt);
+  const [proofs, setProofs] = useState<File[]>([]); const [invoices, setInvoices] = useState<File[]>([]); const [missing, setMissing] = useState(Boolean(initial.reason)); const [reason, setReason] = useState(initial.reason);
+  const [serverInvoiceCount, setServerInvoiceCount] = useState(expense?.invoiceCount || 0); const [version, setVersion] = useState(expense?.version || 1); const [busy, setBusy] = useState(false); const [error, setError] = useState(""); const [conflict, setConflict] = useState<Expense | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<Partial<Record<ExpenseField, string>>>({});
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const submitInFlight = useRef(false);
+  useDrawerFocus(true, ".tn-expense-drawer");
+  useEffect(() => { setAmount(initial.amount); setNote(initial.note); setPaidAt(initial.paidAt); setReason(initial.reason); setMissing(Boolean(initial.reason)); setServerInvoiceCount(expense?.invoiceCount || 0); setVersion(expense?.version || 1); setProofs([]); setInvoices([]); }, [initial, expense]);
+  // The drawer is mounted through a portal; explicitly hydrate from the record
+  // identity as well so a portal reuse cannot leave stale blank controls.
+  useEffect(() => {
+    if (!expense) return;
+    setAmount((expense.amountCents / 100).toFixed(2));
+    setNote(expense.note || "");
+    setPaidAt(dateInputValue(new Date(expense.paidAt), timezone));
+    setReason(expense.invoiceMissingReason || "");
+    setMissing(Boolean(expense.invoiceMissingReason));
+    setServerInvoiceCount(expense.invoiceCount || 0);
+    setVersion(expense.version || 1);
+  }, [expense?.id, expense?.amountCents, expense?.paidAt, expense?.note, expense?.invoiceMissingReason, expense?.invoiceCount, expense?.version, timezone]);
+  useEffect(() => {
+    // TDesign keeps its native file input hidden and does not forward ARIA
+    // props to it. Label both inputs explicitly for assistive technology;
+    // the visible trigger buttons remain the primary keyboard targets.
+    const inputs: Array<[string, string, string, string]> = [
+      [".tn-payment-proof-upload input[type=file]", "expense-payment-proofs-input", "expense-payment-proofs-label", "付款凭证文件"],
+      [".tn-invoice-upload input[type=file]", "expense-invoices-input", "expense-invoices-label", "发票文件"],
+    ];
+    const applyLabels = () => inputs.forEach(([selector, id, labelledBy, label]) => {
+      const input = document.querySelector<HTMLInputElement>(selector);
+      if (!input) return;
+      input.id = id;
+      input.setAttribute("aria-labelledby", labelledBy);
+      input.setAttribute("aria-label", label);
+    });
+    // Drawer content is portalled after the first effect pass. Retry on the
+    // next frame and once after the opening transition so the native inputs
+    // receive their labels in both mounted and animated states.
+    applyLabels();
+    const frame = window.requestAnimationFrame(applyLabels);
+    const timer = window.setTimeout(applyLabels, 260);
+    return () => { window.cancelAnimationFrame(frame); window.clearTimeout(timer); };
+  }, []);
+  const hasInvoice = serverInvoiceCount + invoices.length > 0;
+  const dirty = proofs.length > 0 || invoices.length > 0 || amount !== initial.amount || note !== initial.note || paidAt !== initial.paidAt || reason !== initial.reason || missing !== Boolean(initial.reason);
+  const { requestDiscard } = useUnsavedActions();
+  useUnsavedChanges(dirty);
+  const clearField = (...fields: ExpenseField[]) => {
+    setFieldErrors(current => {
+      const next = { ...current };
+      fields.forEach(field => delete next[field]);
+      return next;
+    });
+    setError("");
+  };
+  const choose = (kind: "proof" | "invoice") => (files: any[]) => {
+    clearField(kind === "proof" ? "paymentProofs" : "invoices", "invoiceMissingReason");
+    const next = files.map((f: any) => (f.raw || f.originFileObj || f) as UploadFile).filter((f: any) => f instanceof File || f?.name);
+    if (kind === "proof") setProofs(next.slice(0, Math.max(0, 20 - invoices.length))); else { setInvoices(next.slice(0, Math.max(0, 20 - proofs.length))); if (next.length) { setMissing(false); setReason(""); } }
+  };
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (busy || submitInFlight.current) return;
+    setError("");
+    const nextErrors: Partial<Record<ExpenseField, string>> = {};
+    if (!expense && !proofs.length) nextErrors.paymentProofs = "至少选择一张付款凭证";
+    if (!/^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/.test(amount) || Number(amount) <= 0) nextErrors.amount = "金额必须为大于零且最多两位小数";
+    let iso = "";
+    try { iso = dateFromInput(paidAt, timezone); } catch (caught) { nextErrors.paidAt = (caught as Error).message; }
+    const normalized = missing ? reason.trim() : "";
+    if (!hasInvoice && !normalized) nextErrors.invoiceMissingReason = "请上传发票，或勾选“无发票”并填写原因";
+    if (Object.keys(nextErrors).length) { setFieldErrors(nextErrors); setError("请检查标记的字段后再保存"); focusExpenseField(nextErrors); return; }
+    setFieldErrors({});
+    submitInFlight.current = true;
+    setBusy(true);
+    try {
+      if (expense) {
+        // A multipart edit carries the fields and all new attachments in one
+        // optimistic-lock transaction. This prevents partial edits when one
+        // upload or a later validation fails.
+        const body = new FormData();
+        body.append("paidAt", iso);
+        body.append("amount", amount);
+        body.append("note", note);
+        body.append("invoiceMissingReason", hasInvoice ? "" : normalized);
+        body.append("version", String(version));
+        proofs.forEach(file => body.append("paymentProofs", file));
+        invoices.forEach(file => body.append("invoices", file));
+        const updated = await api<{ expense: Expense }>(`/api/expenses/${expense.id}`, { method: "PATCH", body });
+        setVersion(updated.expense.version);
+        setServerInvoiceCount(updated.expense.invoiceCount);
+      } else { const body = new FormData(); body.append("paidAt", iso); body.append("amount", amount); body.append("note", note); body.append("invoiceMissingReason", normalized); proofs.forEach(f => body.append("paymentProofs", f)); invoices.forEach(f => body.append("invoices", f)); await api("/api/expenses", { method: "POST", body }); }
+      notify?.(expense ? "账目已更新" : "账目已保存", "success"); onSaved(); onClose();
+    } catch (caught) {
+      if (caught instanceof ApiError && caught.status === 409 && (caught as any).details?.current) setConflict((caught as any).details.current);
+      else {
+        const mapped = apiFieldErrors(caught) as Partial<Record<ExpenseField, string>>;
+        if (Object.keys(mapped).length) { setFieldErrors(mapped); setError("请检查标记的字段后再保存"); focusExpenseField(mapped); }
+        else setError((caught as Error).message);
+      }
+    } finally { submitInFlight.current = false; setBusy(false); }
+  };
+  const closeDrawer = (context?: { trigger?: string }) => {
+    // ESC first belongs to the nested date/time popup. TDesign bubbles the
+    // same key to Drawer, so consume that close event while the popup is open.
+    if (context?.trigger === "esc" && datePickerOpen) {
+      setDatePickerOpen(false);
+      return;
+    }
+    requestDiscard(onClose);
+  };
+  return <>
+    <Drawer className="tn-content-drawer tn-expense-drawer" placement="right" size="480px" visible destroyOnClose header={expense ? "编辑账目" : "新增账目"} onClose={closeDrawer} footer={<><Button variant="outline" onClick={() => requestDiscard(onClose)} disabled={busy}>取消</Button><Button theme="primary" onClick={() => { void submit({ preventDefault() {} } as React.FormEvent); }} disabled={busy}>{busy ? <Loader2 size={16} className="spin" /> : <><Check size={16} />保存</>}</Button></>}>
+      <form className="expense-form" onSubmit={submit}>
+        <label className="tn-form-field"><span>支付时间</span><DatePicker disabled={busy} inputProps={{ "aria-label": "支付时间", "aria-invalid": Boolean(fieldErrors.paidAt), "aria-describedby": fieldErrors.paidAt ? "expense-paid-at-error" : undefined } as any} popupProps={{ onVisibleChange: (visible: boolean) => setDatePickerOpen(visible) }} enableTimePicker format="YYYY-MM-DD HH:mm" value={paidAt} onChange={(v: any) => { setPaidAt(String(v)); clearField("paidAt"); }} /><small>选择日期和时间（精确到分钟，按应用时区保存）</small><FieldError id="expense-paid-at-error" message={fieldErrors.paidAt} /></label>
+        <label className="tn-form-field"><span>金额（元）</span><AccessibleInput disabled={busy} inputAriaLabel="金额（元）" inputAriaInvalid={Boolean(fieldErrors.amount)} inputAriaDescribedby={fieldErrors.amount ? "expense-amount-error" : undefined} value={amount} onChange={value => { setAmount(value); clearField("amount"); }} placeholder="0.00" /><FieldError id="expense-amount-error" message={fieldErrors.amount} /></label>
+        <label className="tn-form-field"><span>备注</span><Textarea disabled={busy} aria-label="备注" aria-invalid={Boolean(fieldErrors.note)} aria-describedby={fieldErrors.note ? "expense-note-error" : undefined} value={note} onChange={value => { setNote(value); clearField("note"); }} maxlength={2000} placeholder="可选" /><FieldError id="expense-note-error" message={fieldErrors.note} /></label>
+        <div className="tn-form-field" role="group" aria-labelledby="expense-payment-proofs-label"><span id="expense-payment-proofs-label">付款凭证（至少 1 张）</span><Upload disabled={busy} className="tn-payment-proof-upload" aria-label="选择付款凭证文件" aria-labelledby="expense-payment-proofs-label" multiple autoUpload={false} accept="image/jpeg,image/png,image/webp" onChange={choose("proof") as any} trigger={<Button type="button" variant="outline" disabled={busy} aria-invalid={Boolean(fieldErrors.paymentProofs)} aria-describedby={fieldErrors.paymentProofs ? "expense-proof-error" : undefined} icon={<FileUp size={15} />}>选择付款凭证</Button>} /><FieldError id="expense-proof-error" message={fieldErrors.paymentProofs} /></div>
+        {proofs.length > 0 && <FileList files={proofs} disabled={busy} remove={f => setProofs(proofs.filter(x => x !== f))} />}
+        <div className="tn-form-field" role="group" aria-labelledby="expense-invoices-label"><span id="expense-invoices-label">发票（可选）</span><Upload disabled={busy} className="tn-invoice-upload" aria-label="选择发票文件" aria-labelledby="expense-invoices-label" multiple autoUpload={false} accept=".pdf,.ofd,.xml,application/pdf,application/ofd,application/xml" onChange={choose("invoice") as any} trigger={<Button type="button" variant="outline" disabled={busy} aria-invalid={Boolean(fieldErrors.invoices)} aria-describedby={fieldErrors.invoices ? "expense-invoice-error" : undefined} icon={<FileUp size={15} />}>选择发票</Button>} /><FieldError id="expense-invoice-error" message={fieldErrors.invoices} /></div>
+        {invoices.length > 0 && <FileList files={invoices} disabled={busy} remove={f => setInvoices(invoices.filter(x => x !== f))} />}
+        <Checkbox className="invoice-missing-toggle" aria-invalid={Boolean(fieldErrors.invoiceMissingReason)} aria-describedby={fieldErrors.invoiceMissingReason ? "expense-reason-error" : undefined} checked={missing} disabled={busy || hasInvoice} onChange={(checked: boolean) => { setMissing(checked); clearField("invoiceMissingReason"); if (!checked) setReason(""); }}>无发票</Checkbox>
+        {!hasInvoice && !missing && (fieldErrors.invoiceMissingReason ? <small id="expense-reason-error" className="tn-field-error" role="alert">{fieldErrors.invoiceMissingReason}</small> : <small className="tn-form-help">请上传发票，或勾选“无发票”并填写原因。</small>)}
+        {hasInvoice && <small>已上传发票，无需填写无发票原因。</small>}
+        {missing && !hasInvoice && <label className="tn-form-field"><span>无发票原因</span><Textarea disabled={busy} aria-label="无发票原因" aria-invalid={Boolean(fieldErrors.invoiceMissingReason)} aria-describedby={fieldErrors.invoiceMissingReason ? "expense-reason-error" : undefined} value={reason} onChange={value => { setReason(value); clearField("invoiceMissingReason"); }} maxlength={500} placeholder="例如：商家无法开具发票" /><FieldError id="expense-reason-error" message={fieldErrors.invoiceMissingReason} /></label>}
+        {error && <div role="alert" className="expense-error"><AlertCircle size={16} />{error}</div>}
+      </form>
+    </Drawer>
+    <Dialog visible={Boolean(conflict)} header="记录已被更新" confirmBtn="保留当前内容" cancelBtn="加载服务器版本" onClose={() => { setConflict(null); setError("冲突提示已关闭，请再次保存以重新确认最新版本。"); }} onConfirm={() => { if (conflict) { setVersion(conflict.version); setServerInvoiceCount(conflict.invoiceCount); setConflict(null); setError("当前内容已保留，请再次保存以覆盖服务器版本。"); } }} onCancel={() => { if (conflict) { setAmount((conflict.amountCents / 100).toFixed(2)); setNote(conflict.note); setPaidAt(dateInputValue(new Date(conflict.paidAt), timezone)); setVersion(conflict.version); setServerInvoiceCount(conflict.invoiceCount); setConflict(null); } }}>另一位管理员刚刚修改了这笔账目。请选择如何处理，系统不会静默覆盖。</Dialog>
+  </>;
+}
+function focusExpenseField(errors: Partial<Record<ExpenseField, string>>) {
+  const selectors: Partial<Record<ExpenseField, string>> = {
+    paidAt: "[aria-describedby='expense-paid-at-error'], [aria-describedby='expense-paid-at-error'] input",
+    amount: "[aria-describedby='expense-amount-error'] input, [aria-describedby='expense-amount-error']",
+    note: "[aria-describedby='expense-note-error'] textarea, [aria-describedby='expense-note-error']",
+    paymentProofs: "[aria-describedby='expense-proof-error']",
+    invoices: "[aria-describedby='expense-invoice-error']",
+    invoiceMissingReason: "[aria-describedby='expense-reason-error'] textarea, [aria-describedby='expense-reason-error'], .invoice-missing-toggle",
+  };
+  const field = (["paidAt", "amount", "note", "paymentProofs", "invoices", "invoiceMissingReason"] as ExpenseField[]).find(key => errors[key]);
+  if (!field) return;
+  requestAnimationFrame(() => {
+    const node = document.querySelector<HTMLElement>(selectors[field] || "");
+    const target = node && /^(INPUT|TEXTAREA|BUTTON|SELECT)$/.test(node.tagName)
+      ? node
+      : node?.querySelector<HTMLElement>("input, textarea, button, select");
+    target?.focus();
+  });
+}
+function FieldError({ id, message }: { id: string; message?: string }) { return message ? <small id={id} className="tn-field-error" role="alert">{message}</small> : null; }
+function FileList({ files, remove, disabled = false }: { files: File[]; remove: (f: File) => void; disabled?: boolean }) { return <ul className="expense-file-list">{files.map(f => <li key={`${f.name}-${f.size}-${f.lastModified}`}><FileUp size={14} />{f.name}<small>{formatBytes(f.size)}</small><Tooltip content="移除文件" placement="left"><Button variant="text" shape="circle" disabled={disabled} onClick={() => remove(f)} aria-label={`移除文件 ${f.name}`}><X size={14} /></Button></Tooltip></li>)}</ul>; }
diff --git a/web-next/src/pages/expenses/ExpensesPage.tsx b/web-next/src/pages/expenses/ExpensesPage.tsx
new file mode 100644
index 0000000..e99922d
--- /dev/null
+++ b/web-next/src/pages/expenses/ExpensesPage.tsx
@@ -0,0 +1,131 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { AlertCircle, ChevronLeft, ChevronRight, ClipboardList, FileDown, FileText, Pencil, Plus, RefreshCw, Search, Trash2, X } from "lucide-react";
+import { Button, Checkbox, DatePicker, Dialog, Loading, Radio, Space, Table, Tag, Tooltip } from "tdesign-react";
+import { useSearchParams } from "react-router-dom";
+import { api } from "../../services/api";
+import ExpenseDrawer from "./ExpenseDrawer";
+import ExpenseDetail from "./ExpenseDetail";
+import AccessibleInput from "../../components/AccessibleInput";
+import { dateText, money, monthNow } from "./date";
+import type { Expense, Notify } from "./types";
+
+type Props = { timezone?: string; notify?: Notify; sessionKey?: string };
+const EXPORT_JOB_STORAGE_KEY = "tallynote.exportJobId";
+
+function savedExportJob(storageKey: string): string | null {
+  try { return window.sessionStorage.getItem(storageKey); } catch { return null; }
+}
+
+export default function ExpensesPage({ timezone: timezoneProp = "Asia/Shanghai", notify, sessionKey = "current" }: Props) {
+  const timezone = timezoneProp;
+  const exportStorageKey = `${EXPORT_JOB_STORAGE_KEY}.${sessionKey}`;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const rawMonthParam = searchParams.get("month");
+  const rawMonth = rawMonthParam || monthNow(timezone);
+  const month = /^\d{4}-(0[1-9]|1[0-2])$/.test(rawMonth) ? rawMonth : monthNow(timezone);
+  const rawStatus = searchParams.get("status");
+  const status: "unreimbursed" | "reimbursed" = rawStatus === "reimbursed" ? "reimbursed" : "unreimbursed";
+  const rawQuery = searchParams.get("query") || "";
+  const query = rawQuery.slice(0, 200);
+  const rawMissingInvoice = searchParams.get("missingInvoice");
+  const missingInvoice = searchParams.get("missingInvoice") === "true";
+  const [queryDraft, setQueryDraft] = useState(query);
+  const [items, setItems] = useState<Expense[]>([]); const [summary, setSummary] = useState({ count: 0, amountCents: 0 }); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [loadedFilterKey, setLoadedFilterKey] = useState<string | null>(null); const [selectedKeys, setSelectedKeys] = useState<string[]>([]); const [drawer, setDrawer] = useState<"new" | "detail" | "edit" | null>(null); const [selected, setSelected] = useState<Expense | null>(null); const [includeManifest, setIncludeManifest] = useState(false); const [exporting, setExporting] = useState<string | null>(() => savedExportJob(exportStorageKey)); const [exportIssue, setExportIssue] = useState(""); const [trashTarget, setTrashTarget] = useState<Expense | null>(null); const [trashing, setTrashing] = useState(false); const sequence = useRef(0); const exportStarting = useRef(false);
+  const filterKey = `${month}|${status}|${query}|${missingInvoice ? "1" : "0"}`;
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams);
+    let changed = false;
+    if (rawMonthParam && rawMonthParam !== month) { params.set("month", month); changed = true; }
+    if (rawStatus && rawStatus !== status) { params.set("status", status); changed = true; }
+    if (rawQuery !== query) {
+      if (query) params.set("query", query); else params.delete("query");
+      changed = true;
+    }
+    if (rawMissingInvoice && rawMissingInvoice !== "true") { params.delete("missingInvoice"); changed = true; }
+    if (changed) setSearchParams(params, { replace: true });
+  }, [month, query, rawMissingInvoice, rawMonthParam, rawQuery, rawStatus, searchParams, setSearchParams, status]);
+  useEffect(() => { setQueryDraft(query); }, [query]);
+  const updateFilters = (next: { month?: string; status?: "unreimbursed" | "reimbursed"; query?: string; missingInvoice?: boolean }) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("month", next.month ?? month);
+    params.set("status", next.status ?? status);
+    const nextQuery = (next.query ?? query).trim().slice(0, 200);
+    if (nextQuery) params.set("query", nextQuery); else params.delete("query");
+    if (next.missingInvoice ?? missingInvoice) params.set("missingInvoice", "true"); else params.delete("missingInvoice");
+    setSearchParams(params);
+  };
+  const load = async () => { const s = ++sequence.current; const requestedKey = filterKey; setLoading(true); setError(""); try { const result = await api<{ items: Expense[]; summary: typeof summary }>(`/api/expenses?month=${month}&status=${status}&query=${encodeURIComponent(query)}&missingInvoice=${missingInvoice}`); if (s === sequence.current) { setItems(result.items); setSummary(result.summary); setLoadedFilterKey(requestedKey); setSelectedKeys(keys => keys.filter(k => result.items.some(x => x.id === k))); } } catch (e) { if (s === sequence.current) { setItems([]); setSummary({ count: 0, amountCents: 0 }); setLoadedFilterKey(null); setError((e as Error).message); } } finally { if (s === sequence.current) setLoading(false); } };
+  useEffect(() => { setSelectedKeys([]); setItems([]); setSummary({ count: 0, amountCents: 0 }); setLoadedFilterKey(null); void load(); }, [filterKey]);
+  const selectedTotal = useMemo(() => items.filter(i => selectedKeys.includes(i.id)).reduce((sum, i) => sum + i.amountCents, 0), [items, selectedKeys]);
+  const shiftMonth = (delta: number) => { const [rawYear, rawMonthNumber] = month.split("-").map(Number); const y = rawYear || new Date().getFullYear(); const m = rawMonthNumber || 1; const d = new Date(y, m - 1 + delta, 1); updateFilters({ month: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}` }); };
+  const rememberExportJob = (jobId: string | null) => {
+    setExporting(jobId);
+    try {
+      if (jobId) window.sessionStorage.setItem(exportStorageKey, jobId);
+      else window.sessionStorage.removeItem(exportStorageKey);
+    } catch { /* Session storage can be unavailable in hardened browsers. */ }
+  };
+  const exportAll = async () => { if (exporting || exportStarting.current) return; exportStarting.current = true; try { const body = selectedKeys.length ? { ids: selectedKeys, includeManifest } : { month, status, query, missingInvoice, includeManifest }; const r = await api<{ job: { id: string } }>("/api/exports", { method: "POST", body: JSON.stringify(body) }); setExportIssue(""); rememberExportJob(r.job.id); notify?.(includeManifest ? "导出任务已创建（含 manifest.json）" : "导出任务已创建", "info"); } catch (e) { notify?.((e as Error).message, "error"); } finally { exportStarting.current = false; } };
+  useEffect(() => {
+    if (!exporting) return;
+    let disposed = false;
+    let timer: number | undefined;
+    let failureCount = 0;
+    const finish = () => { setExportIssue(""); rememberExportJob(null); };
+    const schedule = (delay: number) => { timer = window.setTimeout(() => void poll(), delay); };
+    const poll = async () => {
+      try {
+        const r = await api<{ job: { status: string; errorMessage?: string } }>(`/api/exports/${exporting}`);
+        if (disposed) return;
+        failureCount = 0;
+        setExportIssue("");
+        if (r.job.status === "ready") {
+          const downloadUrl = `/api/exports/${exporting}/download`;
+          finish();
+          window.location.href = downloadUrl;
+        } else if (["failed", "expired"].includes(r.job.status)) {
+          finish();
+          notify?.(r.job.errorMessage || "导出失败", "error");
+        } else {
+          schedule(1000);
+        }
+      } catch {
+        if (disposed) return;
+        failureCount += 1;
+        setExportIssue("网络连接不稳定，导出仍在后台进行，正在重新查询状态…");
+        schedule(Math.min(1000 * (2 ** Math.min(failureCount, 3)), 8000));
+      }
+    };
+    void poll();
+    return () => { disposed = true; if (timer !== undefined) window.clearTimeout(timer); };
+  }, [exporting, notify]);
+  const moveToTrash = async () => { if (!trashTarget) return; setTrashing(true); try { await api(`/api/expenses/${trashTarget.id}`, { method: "DELETE", body: JSON.stringify({ version: trashTarget.version }) }); notify?.("账目已移入回收站，可在回收站恢复", "success"); setTrashTarget(null); await load(); } catch (e) { notify?.((e as Error).message, "error"); } finally { setTrashing(false); } };
+  const columns = [
+    { colKey: "row-select", type: "multiple" },
+    { colKey: "paidAt", title: "支付时间", cell: ({ row }: any) => dateText(row.paidAt, timezone) },
+    { colKey: "amountCents", title: "金额", cell: ({ row }: any) => <strong>{money(row.amountCents)}</strong> },
+    { colKey: "note", title: "备注", cell: ({ row }: any) => row.note || <span className="tn-muted">无备注</span>, ellipsis: true },
+    { colKey: "paymentProofCount", title: "凭证" },
+    { colKey: "invoiceCount", title: "发票", cell: ({ row }: any) => row.invoiceCount === 0 ? <Tag theme="danger" title={row.invoiceMissingReason || "缺发票"}>{row.invoiceMissingReason ? `无发票：${row.invoiceMissingReason}` : "缺发票"}</Tag> : row.invoiceCount },
+    { colKey: "status", title: "状态", cell: ({ row }: any) => <Tag theme={row.status === "reimbursed" ? "success" : "warning"}>{row.status === "reimbursed" ? "已报销" : "未报销"}</Tag> },
+    { colKey: "op", title: "操作", width: 150, cell: ({ row }: any) => {
+      const label = row.note || "账目";
+      return <Space className="tn-action-group"><Tooltip content="查看详情"><Button variant="text" shape="square" onClick={() => { setSelected(row); setDrawer("detail"); }} aria-label={`查看 ${label}`} icon={<FileText size={16} />} /></Tooltip><Tooltip content="编辑"><Button variant="text" shape="square" onClick={() => { setSelected(row); setDrawer("edit"); }} aria-label={`编辑 ${label}`} icon={<Pencil size={15} />} /></Tooltip><Tooltip content="移入回收站"><Button variant="text" shape="square" theme="danger" onClick={() => setTrashTarget(row)} aria-label={`将 ${label} 移入回收站`} icon={<Trash2 size={15} />} /></Tooltip></Space>;
+    }},
+  ];
+  const emptyState = query || missingInvoice
+    ? <div className="tn-empty expenses-empty"><ClipboardList size={30} /><p>没有符合当前筛选条件的账目</p><Button variant="outline" onClick={() => { setQueryDraft(""); updateFilters({ query: "", missingInvoice: false }); }}>清除筛选</Button></div>
+    : status === "reimbursed"
+      ? <div className="tn-empty expenses-empty"><ClipboardList size={30} /><p>本月暂无已报销账目</p><Button variant="outline" onClick={() => updateFilters({ status: "unreimbursed" })}>查看未报销</Button></div>
+      : <div className="tn-empty expenses-empty"><ClipboardList size={30} /><p>本月暂无未报销账目</p><Button theme="primary" onClick={() => setDrawer("new")} icon={<Plus size={15} />}>新增第一笔</Button></div>;
+  const dataReady = loadedFilterKey === filterKey;
+  return <div className="tn-page expenses-page"><div className="tn-page-head expenses-head"><div><h1 className="tn-page-title">账目列表</h1></div><div className="tn-page-actions"><Checkbox checked={includeManifest} onChange={setIncludeManifest}>包含 manifest.json</Checkbox><Button variant="outline" onClick={() => void exportAll()} disabled={Boolean(exporting) || (!selectedKeys.length && (!items.length || !dataReady))} icon={<FileDown size={16} />}>{exporting ? "导出中…" : selectedKeys.length ? `导出所选（${selectedKeys.length}）` : "导出筛选结果"}</Button><Button theme="primary" onClick={() => setDrawer("new")} icon={<Plus size={16} />}>新增账目</Button></div></div>
+    <div className="tn-toolbar expenses-toolbar"><div className="tn-expense-month-controls"><Tooltip content="上个月"><Button variant="text" shape="square" onClick={() => shiftMonth(-1)} aria-label="上个月" icon={<ChevronLeft size={18} />} /></Tooltip><DatePicker className="tn-month-picker" mode="month" format="YYYY-MM" value={month} onChange={(value: any) => { const next = String(value || "").slice(0, 7); if (/^\d{4}-\d{2}$/.test(next)) updateFilters({ month: next }); }} placeholder="选择月份" inputProps={{ "aria-label": "账目月份" } as any} /><Tooltip content="下个月"><Button variant="text" shape="square" onClick={() => shiftMonth(1)} aria-label="下个月" icon={<ChevronRight size={18} />} /></Tooltip></div><Radio.Group className="tn-segmented" theme="button" variant="primary-filled" value={status} onChange={(value: any) => updateFilters({ status: value as "unreimbursed" | "reimbursed" })} aria-label="报销状态"><Radio.Button value="unreimbursed">未报销</Radio.Button><Radio.Button value="reimbursed">已报销</Radio.Button></Radio.Group><div className="tn-expense-search-controls"><AccessibleInput inputAriaLabel="搜索备注" className="tn-expense-search" value={queryDraft} onChange={setQueryDraft} onEnter={() => { if (queryDraft.trim() === query) void load(); else updateFilters({ query: queryDraft }); }} maxlength={200} placeholder="搜索备注" prefixIcon={<Search size={16} />} suffix={queryDraft ? <Tooltip content="清除搜索"><Button variant="text" shape="square" onClick={() => { setQueryDraft(""); updateFilters({ query: "" }); }} aria-label="清除搜索" icon={<X size={14} />} /></Tooltip> : undefined} /><Button variant="outline" onClick={() => { if (queryDraft.trim() === query) void load(); else updateFilters({ query: queryDraft }); }} disabled={loading} icon={<Search size={15} />}>搜索</Button></div><div className="tn-expense-filter-actions"><Checkbox checked={missingInvoice} onChange={checked => updateFilters({ missingInvoice: checked })}>缺发票</Checkbox><Tooltip content="刷新当前结果"><Button variant="outline" shape="square" onClick={() => void load()} disabled={loading} aria-label="刷新当前结果" icon={<RefreshCw size={15} />} /></Tooltip></div></div>
+    <div className="tn-summary expenses-summary"><span>{summary.count} 笔</span><strong>{money(summary.amountCents)}</strong>{selectedKeys.length > 0 && <><span>已选 {selectedKeys.length} 笔，共 {money(selectedTotal)}</span><Button variant="text" onClick={() => setSelectedKeys([])}>清除选择</Button></>}</div>
+    {exportIssue && <div className="tn-export-status" role="status"><RefreshCw size={15} className="spin" /><span>{exportIssue}</span><Button variant="text" onClick={() => { setExportIssue(""); rememberExportJob(null); }}>停止等待</Button></div>}
+    {error && <div className="expense-error" role="alert"><AlertCircle size={16} />{error}<Button variant="text" onClick={() => void load()}>重试</Button></div>}
+    {error ? null : !dataReady || (loading && !items.length) ? <div className="tn-empty" role="status" aria-live="polite"><Loading text="加载中…" /></div> : !items.length ? emptyState : <div className="tn-table-wrap" role="region" aria-label="账目列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} selectedRowKeys={selectedKeys} onSelectChange={(keys: any[]) => setSelectedKeys(keys as string[])} hover stripe /></div>}
+    {drawer === "new" && <ExpenseDrawer timezone={timezone} onClose={() => setDrawer(null)} onSaved={load} notify={notify} />}{drawer === "edit" && selected && <ExpenseDrawer timezone={timezone} expense={selected} onClose={() => setDrawer(null)} onSaved={load} notify={notify} />}{drawer === "detail" && selected && <ExpenseDetail timezone={timezone} expense={selected} onClose={() => setDrawer(null)} onUpdated={load} onRequestEdit={e => { setSelected(e); setDrawer("edit"); }} notify={notify} />}
+    {trashTarget && <Dialog visible header="移入回收站？" confirmBtn={{ content: "移入回收站", theme: "danger", loading: trashing, disabled: trashing }} cancelBtn="取消" onClose={() => { if (!trashing) setTrashTarget(null); }} onConfirm={() => void moveToTrash()} onCancel={() => { if (!trashing) setTrashTarget(null); }}>将“{trashTarget.note || `${dateText(trashTarget.paidAt, timezone)}的账目`}”移入回收站。它会从普通列表和导出结果中隐藏，附件会保留，可随时恢复。</Dialog>}
+  </div>;
+}
diff --git a/web-next/src/pages/expenses/date.ts b/web-next/src/pages/expenses/date.ts
new file mode 100644
index 0000000..fc9e367
--- /dev/null
+++ b/web-next/src/pages/expenses/date.ts
@@ -0,0 +1,26 @@
+export function money(cents: number) { return `¥${(cents / 100).toFixed(2)}`; }
+export function dateText(ms: number, timezone = "Asia/Shanghai") { return new Intl.DateTimeFormat("zh-CN", { dateStyle: "medium", timeStyle: "short", timeZone: timezone }).format(new Date(ms)); }
+export function monthNow(timezone = "Asia/Shanghai") {
+  const p = Object.fromEntries(new Intl.DateTimeFormat("en-CA", { timeZone: timezone, year: "numeric", month: "2-digit" }).formatToParts(new Date()).map(x => [x.type, x.value]));
+  return `${p.year}-${p.month}`;
+}
+export function dateInputValue(date: Date, timezone = "Asia/Shanghai") {
+  const p = Object.fromEntries(new Intl.DateTimeFormat("en-CA", { timeZone: timezone, year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hourCycle: "h23" }).formatToParts(date).map(x => [x.type, x.value]));
+  return `${p.year}-${p.month}-${p.day} ${p.hour}:${p.minute}`;
+}
+export function dateFromInput(value: string, timezone = "Asia/Shanghai") {
+  const m = /^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})$/.exec(value.trim());
+  if (!m) throw new Error("请选择有效的支付日期和时间");
+  const year = Number(m[1]);
+  const month = Number(m[2]);
+  const day = Number(m[3]);
+  const hour = Number(m[4]);
+  const minute = Number(m[5]);
+  const probe = new Date(0); probe.setUTCFullYear(year, month - 1, day); probe.setUTCHours(0, 0, 0, 0);
+  if (probe.getUTCFullYear() !== year || probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day || hour > 23 || minute > 59) throw new Error("支付时间无效");
+  const wall = Date.UTC(year, month - 1, day, hour, minute);
+  const observed = Object.fromEntries(new Intl.DateTimeFormat("en-CA", { timeZone: timezone, year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hourCycle: "h23" }).formatToParts(new Date(wall)).map(x => [x.type, x.value]));
+  const observedUtc = Date.UTC(Number(observed.year), Number(observed.month) - 1, Number(observed.day), Number(observed.hour), Number(observed.minute));
+  return new Date(wall + wall - observedUtc).toISOString();
+}
+export function formatBytes(bytes: number) { return bytes < 1024 * 1024 ? `${Math.max(1, Math.round(bytes / 1024))} KB` : `${(bytes / 1024 / 1024).toFixed(1)} MB`; }
diff --git a/web-next/src/pages/expenses/index.ts b/web-next/src/pages/expenses/index.ts
new file mode 100644
index 0000000..e87c454
--- /dev/null
+++ b/web-next/src/pages/expenses/index.ts
@@ -0,0 +1,5 @@
+export { default } from "./ExpensesPage";
+export { default as ExpensesPage } from "./ExpensesPage";
+export { default as ExpenseDrawer } from "./ExpenseDrawer";
+export { default as ExpenseDetail } from "./ExpenseDetail";
+export * from "./types";
diff --git a/web-next/src/pages/expenses/types.ts b/web-next/src/pages/expenses/types.ts
new file mode 100644
index 0000000..9ec927d
--- /dev/null
+++ b/web-next/src/pages/expenses/types.ts
@@ -0,0 +1,6 @@
+export type ExpenseStatus = "unreimbursed" | "reimbursed";
+export type AttachmentKind = "payment_proof" | "invoice";
+export type Attachment = { id: string; kind: AttachmentKind; originalName: string; mimeType: string; sizeBytes: number; previewable: boolean };
+export type Expense = { id: string; paidAt: number; amountCents: number; note: string; invoiceMissingReason: string | null; status: ExpenseStatus; version: number; paymentProofCount: number; invoiceCount: number; deletedAt?: number | null; attachments?: Attachment[] };
+export type TimelineEvent = { id: number; occurredAt: number; actorUsername?: string | null; action: string };
+export type Notify = (message: string, kind?: "success" | "error" | "info") => void;
diff --git a/web-next/src/pages/trash/TrashPage.tsx b/web-next/src/pages/trash/TrashPage.tsx
new file mode 100644
index 0000000..9e06f3a
--- /dev/null
+++ b/web-next/src/pages/trash/TrashPage.tsx
@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from "react";
+import { RotateCcw, Trash2 } from "lucide-react";
+import { Button, Dialog, Space, Table } from "tdesign-react";
+import { api } from "../../services/api";
+import AccessibleInput from "../../components/AccessibleInput";
+import type { Notify } from "../expenses/types";
+import type { Expense } from "../expenses/types";
+import { dateText, money } from "../expenses/date";
+import { AsyncState, BusyIcon, ErrorBanner, Page, StatusTag } from "../common";
+
+export default function TrashPage({ timezone = "Asia/Shanghai", notify }: { timezone?: string; notify?: Notify }) {
+  const [items, setItems] = useState<Expense[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [purgeTarget, setPurgeTarget] = useState<Expense | null>(null);
+  const [password, setPassword] = useState("");
+  const [purgeError, setPurgeError] = useState("");
+  const loadSequence = useRef(0);
+
+  const load = async () => {
+    const sequence = ++loadSequence.current;
+    setLoading(true); setError("");
+    try {
+      const result = await api<{ items: Expense[] }>("/api/trash");
+      if (sequence === loadSequence.current) setItems(result.items);
+    }
+    catch (e) { if (sequence === loadSequence.current) setError((e as Error).message); }
+    finally { if (sequence === loadSequence.current) setLoading(false); }
+  };
+  useEffect(() => { void load(); }, []);
+
+  const restore = async (item: Expense) => {
+    setBusy(true); setError("");
+    try { await api(`/api/trash/${item.id}/restore`, { method: "POST", body: JSON.stringify({ version: item.version }) }); notify?.("账目已恢复", "success"); await load(); }
+    catch (e) { setError((e as Error).message); }
+    finally { setBusy(false); }
+  };
+  const purge = async () => {
+    if (!purgeTarget || !password) { setPurgeError("请输入当前管理员密码"); return; }
+    setBusy(true); setPurgeError("");
+    try { await api(`/api/trash/${purgeTarget.id}`, { method: "DELETE", body: JSON.stringify({ version: purgeTarget.version, password }) }); setPurgeTarget(null); setPassword(""); notify?.("账目已永久删除，审计历史仍保留", "success"); await load(); }
+    catch (e) { setPurgeError((e as Error).message); }
+    finally { setBusy(false); }
+  };
+
+  const columns = [
+    { colKey: "deletedAt", title: "删除时间", cell: ({ row }: any) => row.deletedAt ? dateText(row.deletedAt, timezone) : "-" },
+    { colKey: "paidAt", title: "支付时间", cell: ({ row }: any) => dateText(row.paidAt, timezone) },
+    { colKey: "amountCents", title: "金额", cell: ({ row }: any) => <span className="tn-amount">{money(row.amountCents)}</span> },
+    { colKey: "note", title: "备注", cell: ({ row }: any) => <span className="tn-note">{row.note || "无备注"}</span> },
+    { colKey: "status", title: "原状态", cell: ({ row }: any) => <StatusTag status={row.status} /> },
+    { colKey: "actions", title: "操作", width: 190, cell: ({ row }: any) => <Space className="tn-action-group"><Button variant="outline" onClick={() => void restore(row)} disabled={busy} icon={busy ? <BusyIcon /> : <RotateCcw size={15} />}>恢复</Button><Button theme="danger" variant="outline" onClick={() => { setPurgeTarget(row); setPassword(""); setPurgeError(""); }} disabled={busy} icon={<Trash2 size={15} />}>永久删除</Button></Space> },
+  ];
+
+  return <Page title="回收站" subtitle="已删除的账目会保留附件，可恢复或经过密码确认后永久删除。" actions={<Button variant="outline" onClick={() => void load()} disabled={loading || busy} icon={<RotateCcw size={15} />}>刷新</Button>}>
+    <AsyncState loading={loading} error={error} empty={items.length === 0 ? <div className="tn-empty"><Trash2 size={30} /><p>回收站为空</p></div> : undefined} onRetry={() => void load()}>
+      <div className="tn-table-wrap" role="region" aria-label="回收站账目列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} hover stripe /></div>
+    </AsyncState>
+      <Dialog visible={Boolean(purgeTarget)} header="永久删除账目" confirmBtn={{ content: "永久删除", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) { setPurgeTarget(null); setPurgeError(""); } }} onConfirm={() => void purge()} onCancel={() => { if (!busy) { setPurgeTarget(null); setPurgeError(""); } }}>
+      <p>此操作会移除账目和附件字节，完整审计内容仍会保留，且无法恢复。</p>
+      <p className="tn-dialog-note">请输入当前管理员密码确认。</p>
+      <AccessibleInput inputAriaLabel="当前管理员密码" inputAriaInvalid={Boolean(purgeError)} inputAriaDescribedby={purgeError ? "trash-purge-error" : undefined} type="password" value={password} onChange={value => { setPassword(value); setPurgeError(""); }} placeholder="当前管理员密码" autocomplete="current-password" />
+      {purgeError && <div id="trash-purge-error" className="tn-inline-error" role="alert">{purgeError}</div>}
+    </Dialog>
+  </Page>;
+}
diff --git a/web-next/src/pages/trash/index.ts b/web-next/src/pages/trash/index.ts
new file mode 100644
index 0000000..5b7fc27
--- /dev/null
+++ b/web-next/src/pages/trash/index.ts
@@ -0,0 +1 @@
+export { default as TrashPage } from "./TrashPage";
diff --git a/web-next/src/pages/update/UpdatePage.tsx b/web-next/src/pages/update/UpdatePage.tsx
new file mode 100644
index 0000000..9eed1a3
--- /dev/null
+++ b/web-next/src/pages/update/UpdatePage.tsx
@@ -0,0 +1,113 @@
+import { useEffect, useRef, useState } from "react";
+import { AlertCircle, CheckCircle2, Download, RefreshCw, Server, ShieldCheck, Terminal } from "lucide-react";
+import { Button, Dialog, Tag } from "tdesign-react";
+import { ApiError, api } from "../../services/api";
+import { dateText } from "../expenses/date";
+import { ErrorBanner, Page, Surface } from "../common";
+import type { Notify } from "../expenses/types";
+
+type JobStatus = "queued" | "downloading" | "verifying" | "staged" | "backing_up" | "applying" | "completed" | "failed" | "cancelled";
+type UpdateJob = { id: string; status: JobStatus; version: string; platform: string; assetName?: string | null; sizeBytes?: number | null; errorMessage?: string | null; createdAt: number; updatedAt: number; completedAt?: number | null };
+type UpdateInfo = { configured: boolean; strategy: "disabled" | "systemd"; currentVersion: string; platform: { target: string; os: string; arch: string }; checkedAt: number; latest: { version: string; tagName?: string; publishedAt?: string; compatible: boolean; integrityReady: boolean; signatureReady: boolean; isNewer: boolean; assetName?: string; assetSize?: number } | null; job: UpdateJob | null };
+const active = new Set<JobStatus>(["queued", "downloading", "verifying", "staged", "backing_up", "applying"]);
+const labels: Record<JobStatus, string> = { queued: "等待系统服务", downloading: "下载中", verifying: "校验文件", staged: "准备完成", backing_up: "备份数据", applying: "切换并检查服务", completed: "已完成", failed: "失败", cancelled: "已取消" };
+
+export default function UpdatePage({ timezone = "Asia/Shanghai", notify }: { timezone?: string; notify?: Notify }) {
+  const [info, setInfo] = useState<UpdateInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [checking, setChecking] = useState(false);
+  const [error, setError] = useState("");
+  const [pollError, setPollError] = useState("");
+  const [confirmVersion, setConfirmVersion] = useState<string | null>(null);
+  const [applying, setApplying] = useState(false);
+  const [reloadReady, setReloadReady] = useState(false);
+  const announced = useRef<string | null>(null);
+  const checkInFlight = useRef(false);
+  const applyInFlight = useRef(false);
+
+  const load = async () => { setLoading(true); setError(""); try { setInfo(await api<UpdateInfo>("/api/update/status")); } catch (e) { setError((e as Error).message); } finally { setLoading(false); } };
+  useEffect(() => { void load(); }, []);
+  useEffect(() => {
+    const job = info?.job;
+    if (!job) { setPollError(""); return; }
+    const announceCompletion = (completedJob: UpdateJob) => {
+      if (completedJob.status === "completed" && announced.current !== completedJob.id) {
+        announced.current = completedJob.id;
+        setReloadReady(true);
+        notify?.("更新完成，请重新加载页面", "success");
+      }
+    };
+    if (job.status === "completed") {
+      setPollError("");
+      announceCompletion(job);
+      return;
+    }
+    if (!active.has(job.status)) { setPollError(""); return; }
+    let disposed = false;
+    let timer: number | undefined;
+    let failureCount = 0;
+    const schedule = (delay: number) => { timer = window.setTimeout(() => void poll(), delay); };
+    const poll = async () => {
+      try {
+        const result = await api<{ job: UpdateJob }>(`/api/update/jobs/${job.id}`);
+        if (disposed) return;
+        failureCount = 0;
+        setPollError("");
+        setInfo(current => current ? { ...current, job: result.job } : current);
+        announceCompletion(result.job);
+        if (active.has(result.job.status)) schedule(1500);
+      } catch (caught) {
+        if (disposed) return;
+        failureCount += 1;
+        setPollError(`${(caught as Error).message}。更新任务仍在后台运行，页面会自动重试。`);
+        schedule(Math.min(1500 * (2 ** Math.min(failureCount, 3)), 12_000));
+      }
+    };
+    void poll();
+    return () => { disposed = true; if (timer !== undefined) window.clearTimeout(timer); };
+  }, [info?.job?.id, info?.job?.status, notify]);
+  const check = async () => {
+    if (checkInFlight.current) return;
+    checkInFlight.current = true;
+    setChecking(true);
+    setError("");
+    try {
+      const result = await api<Omit<UpdateInfo, "job"> & { job?: UpdateJob | null }>("/api/update/check", { method: "POST", body: "{}" });
+      setInfo(current => ({ ...result, job: result.job ?? current?.job ?? null }));
+      notify?.(result.latest?.isNewer ? "发现新版本" : "当前已是最新版本", "success");
+    } catch (caught) {
+      // A configured release source is intentionally rate-limited. A repeated
+      // click should still be useful: show the cached status instead of a
+      // blocking error, while preserving the server-side flood protection.
+      if (caught instanceof ApiError && caught.code === "UPDATE_RATE_LIMITED") {
+        try {
+          await load();
+          const seconds = caught.retryAfter ? `，请 ${caught.retryAfter} 秒后再检查` : "，请稍后再检查";
+          notify?.(`已显示最近一次检查结果${seconds}`, "info");
+          return;
+        } catch {
+          // Fall through to the normal error surface if the status read fails.
+        }
+      }
+      setError((caught as Error).message);
+    } finally {
+      checkInFlight.current = false;
+      setChecking(false);
+    }
+  };
+  const apply = async () => { if (!confirmVersion || applyInFlight.current) return; applyInFlight.current = true; setApplying(true); setError(""); try { const result = await api<{ job: UpdateJob }>("/api/update/apply", { method: "POST", body: JSON.stringify({ version: confirmVersion, confirm: true }) }); setConfirmVersion(null); setInfo(current => current ? { ...current, job: result.job } : current); notify?.("更新请求已提交，服务会短暂重启", "info"); } catch (e) { setError((e as Error).message); } finally { applyInFlight.current = false; setApplying(false); } };
+  const latest = info?.latest; const job = info?.job; const canApply = Boolean(info?.strategy === "systemd" && latest?.isNewer && latest.compatible && latest.integrityReady && !job || info?.strategy === "systemd" && latest?.isNewer && latest.compatible && latest.integrityReady && job && !active.has(job.status));
+  const progress = job ? ({ queued: 8, downloading: 28, verifying: 48, staged: 65, backing_up: 80, applying: 92 } as Partial<Record<JobStatus, number>>)[job.status] ?? 100 : 0;
+
+  return <Page title="系统更新" subtitle="检查受信任的 Release；更新前会校验文件并保护现有数据。" actions={<Button variant="outline" onClick={() => void check()} disabled={checking || loading} icon={<RefreshCw size={15} />}>{checking ? "检查中…" : "检查更新"}</Button>}>
+    {error && <ErrorBanner message={error} onRetry={() => void load()} />}
+    {pollError && <ErrorBanner message={pollError} />}
+    {loading ? <div className="tn-empty" role="status" aria-live="polite">正在读取版本信息…</div> : info && <>
+      <div className="tn-update-grid"><Surface className="tn-update-block"><Server size={20} /><span className="tn-eyebrow">当前版本</span><strong className="tn-update-value">v{info.currentVersion}</strong><small>运行平台：{info.platform.target}</small></Surface><Surface className="tn-update-block"><ShieldCheck size={20} /><span className="tn-eyebrow">更新方式</span><strong>{info.strategy === "systemd" ? "后台一键更新" : "手动命令行更新"}</strong><small>{info.strategy === "systemd" ? (info.configured ? "由 systemd 更新服务执行" : "尚未配置发布源") : "当前安装未启用后台更新"}</small></Surface></div>
+      {latest ? <Surface className="tn-update-release"><div className="tn-update-release-head"><div><span className="tn-eyebrow">最新 Release</span><h2>{latest.tagName || `v${latest.version}`}</h2>{latest.publishedAt && <small>发布时间：{dateText(Date.parse(latest.publishedAt), timezone)}</small>}</div><Tag theme={latest.isNewer ? "primary" : "success"}>{latest.isNewer ? "有新版本" : "已是最新"}</Tag></div><div className="tn-facts"><div><span>平台文件</span><strong>{latest.compatible ? latest.assetName : "无匹配文件"}</strong></div><div><span>完整性</span><strong className={latest.integrityReady ? "text-success" : "text-danger"}>{latest.integrityReady ? "SHA-256 + 签名可验证" : "不可验证"}</strong></div><div><span>文件大小</span><strong>{latest.assetSize ? `${(latest.assetSize / 1024 / 1024).toFixed(1)} MB` : "-"}</strong></div></div>{latest.isNewer && !latest.compatible && <div className="tn-inline-error"><AlertCircle size={16} />当前平台没有可安装的 Release 文件。</div>}{latest.isNewer && latest.compatible && !latest.integrityReady && <div className="tn-inline-error"><AlertCircle size={16} />发布文件缺少完整校验，已禁用更新。</div>}<div className="tn-page-actions">{canApply && <Button theme="primary" onClick={() => setConfirmVersion(latest.version)} disabled={applying} icon={<Download size={16} />}>更新到 v{latest.version}</Button>}{reloadReady && <Button theme="primary" onClick={() => window.location.reload()}>重新加载</Button>}</div></Surface> : <div className="tn-empty">点击“检查更新”获取最新 Release。</div>}
+      {!info.configured && <div className="tn-update-explainer"><Terminal size={17} /><div><strong>当前为手动更新模式</strong><p>源码安装默认不启用后台更新。需要更新时，在服务器拉取对应 Release 后重新构建并重启服务；安装器部署并配置 systemd 后，才会显示后台一键更新。</p></div></div>}
+      {job && <Surface className="tn-update-release"><span className="tn-sr-only" aria-live="polite">更新任务状态：{labels[job.status]}</span><div className="tn-update-release-head"><div><span className="tn-eyebrow">最近任务</span><h2>v{job.version}</h2></div><Tag theme={job.status === "completed" ? "success" : job.status === "failed" ? "danger" : "primary"}>{labels[job.status]}</Tag></div>{active.has(job.status) && <><div className="tn-progress" role="progressbar" aria-label="系统更新进度" aria-valuemin={0} aria-valuemax={100} aria-valuenow={progress}><span style={{ width: `${progress}%` }} /></div><small>更新服务正在后台运行，页面会自动刷新状态。</small></>}{job.status === "failed" && job.errorMessage && <div className="tn-inline-error" role="alert">{job.errorMessage}</div>}{job.status === "completed" && <div className="tn-inline-info"><CheckCircle2 size={16} />新版本已通过健康检查，数据和附件保持不变。</div>}</Surface>}
+    </>}
+    <Dialog visible={Boolean(confirmVersion)} header="确认系统更新" confirmBtn={{ content: "确认更新", theme: "primary", loading: applying, disabled: applying }} cancelBtn="取消" onClose={() => { if (!applying) setConfirmVersion(null); }} onConfirm={() => void apply()} onCancel={() => { if (!applying) setConfirmVersion(null); }}>将更新到 v{confirmVersion}。服务会短暂重启，更新前会备份数据目录；账目、附件、回收站和审计记录不会被删除。</Dialog>
+  </Page>;
+}
diff --git a/web-next/src/pages/update/index.ts b/web-next/src/pages/update/index.ts
new file mode 100644
index 0000000..ab41eda
--- /dev/null
+++ b/web-next/src/pages/update/index.ts
@@ -0,0 +1 @@
+export { default as UpdatePage } from "./UpdatePage";
diff --git a/web-next/src/router/index.ts b/web-next/src/router/index.ts
new file mode 100644
index 0000000..01ffe5b
--- /dev/null
+++ b/web-next/src/router/index.ts
@@ -0,0 +1,49 @@
+import type { LucideIcon } from "lucide-react";
+import { Archive, ClipboardList, LayoutDashboard, RefreshCw, Trash2, Users } from "lucide-react";
+
+export type RouteId = "dashboard" | "expenses" | "trash" | "admins" | "audit" | "update";
+
+export interface AppRoute {
+  id: RouteId;
+  title: string;
+  eyebrow: string;
+  icon: LucideIcon;
+}
+
+export const APP_ROUTES: readonly AppRoute[] = [
+  { id: "dashboard", title: "仪表盘", eyebrow: "概览", icon: LayoutDashboard },
+  { id: "expenses", title: "账目", eyebrow: "工作台", icon: ClipboardList },
+  { id: "trash", title: "回收站", eyebrow: "系统", icon: Trash2 },
+  { id: "admins", title: "管理员", eyebrow: "系统", icon: Users },
+  { id: "audit", title: "审计日志", eyebrow: "系统", icon: Archive },
+  { id: "update", title: "系统更新", eyebrow: "系统", icon: RefreshCw },
+];
+
+export const DEFAULT_ROUTE_ID: RouteId = "dashboard";
+
+export const ROUTE_PATHS: Readonly<Record<RouteId, string>> = {
+  dashboard: "/",
+  expenses: "/expenses",
+  trash: "/trash",
+  admins: "/admins",
+  audit: "/audit",
+  update: "/update",
+};
+
+export function isRouteId(value: string): value is RouteId {
+  return APP_ROUTES.some((route) => route.id === value);
+}
+
+export function routePath(id: RouteId): string {
+  return ROUTE_PATHS[id];
+}
+
+export function routeIdFromPath(pathname: string): RouteId | undefined {
+  const normalized = pathname.length > 1 ? pathname.replace(/\/+$/, "") : pathname;
+  if (normalized === "/dashboard") return DEFAULT_ROUTE_ID;
+  return APP_ROUTES.find((route) => ROUTE_PATHS[route.id] === normalized)?.id;
+}
+
+export function routeTitle(id: string): string {
+  return APP_ROUTES.find((route) => route.id === id)?.title ?? "账目";
+}
diff --git a/web-next/src/services/api.ts b/web-next/src/services/api.ts
new file mode 100644
index 0000000..f69f54f
--- /dev/null
+++ b/web-next/src/services/api.ts
@@ -0,0 +1,144 @@
+import type { ApiErrorBody } from "../types/auth";
+
+export const AUTH_EXPIRED_EVENT = "tallynote-auth-expired";
+const UNSAFE_METHODS = new Set(["POST", "PUT", "PATCH", "DELETE"]);
+const AUTH_EXEMPT_PATHS = new Set([
+  "/api/auth/login",
+  "/api/auth/session",
+]);
+const DEFAULT_REQUEST_TIMEOUT_MS = 30_000;
+const UPLOAD_REQUEST_TIMEOUT_MS = 120_000;
+
+export interface ApiRequestInit extends RequestInit {
+  timeoutMs?: number;
+}
+
+export class ApiError extends Error {
+  readonly status: number;
+  readonly code?: string;
+  readonly details?: unknown;
+  readonly requestId?: string;
+  readonly retryAfter?: number;
+
+  constructor(status: number, message: string, code?: string, details?: unknown, requestId?: string, retryAfter?: number) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.code = code;
+    this.details = details;
+    this.requestId = requestId;
+    this.retryAfter = retryAfter;
+  }
+}
+
+function readCookie(name: string): string {
+  if (typeof document === "undefined") return "";
+  const prefix = `${name}=`;
+  const value = document.cookie.split(";").map((part) => part.trim()).find((part) => part.startsWith(prefix));
+  if (!value) return "";
+  const raw = value.slice(prefix.length);
+  try {
+    return decodeURIComponent(raw);
+  } catch {
+    return raw;
+  }
+}
+
+function requestPath(url: string): string {
+  try {
+    return new URL(url, typeof window === "undefined" ? "http://localhost" : window.location.origin).pathname;
+  } catch {
+    return url.split("?", 1)[0] ?? url;
+  }
+}
+
+function emitAuthExpired(message: string): void {
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent(AUTH_EXPIRED_EVENT, { detail: message }));
+  }
+}
+
+export async function api<T = unknown>(url: string, init: ApiRequestInit = {}): Promise<T> {
+  const { timeoutMs: requestedTimeout, signal: externalSignal, ...requestInit } = init;
+  const method = (init.method ?? "GET").toUpperCase();
+  const headers = new Headers(init.headers);
+  if (init.body && !(init.body instanceof FormData) && !headers.has("Content-Type")) {
+    headers.set("Content-Type", "application/json");
+  }
+  if (UNSAFE_METHODS.has(method)) {
+    const csrf = readCookie("tally_csrf");
+    if (csrf) headers.set("X-CSRF-Token", csrf);
+  }
+
+  const controller = new AbortController();
+  let timedOut = false;
+  const timeoutMs = requestedTimeout ?? (init.body instanceof FormData ? UPLOAD_REQUEST_TIMEOUT_MS : DEFAULT_REQUEST_TIMEOUT_MS);
+  const abortFromCaller = () => controller.abort(externalSignal?.reason);
+  if (externalSignal?.aborted) abortFromCaller();
+  else externalSignal?.addEventListener("abort", abortFromCaller, { once: true });
+  const timeout = setTimeout(() => {
+    timedOut = true;
+    controller.abort();
+  }, timeoutMs);
+
+  try {
+    const response = await fetch(url, { ...requestInit, credentials: "include", headers, signal: controller.signal });
+    if (response.status === 204) return undefined as T;
+    const contentType = response.headers.get("content-type") ?? "";
+    const data: unknown = contentType.includes("json")
+      ? await response.json().catch(() => ({}))
+      : await response.text().catch(() => "");
+    if (!response.ok) {
+      const body = (data && typeof data === "object" ? data : {}) as ApiErrorBody;
+      const error = body.error;
+      if (response.status === 401 && error?.code === "AUTH_REQUIRED" && !AUTH_EXEMPT_PATHS.has(requestPath(url))) {
+        emitAuthExpired(error.message || "登录已失效，请重新登录");
+      }
+      throw new ApiError(
+        response.status,
+        error?.message || `请求失败（${response.status}）`,
+        error?.code,
+        error?.details,
+        error?.requestId,
+        Number(response.headers.get("retry-after") || 0) || undefined,
+      );
+    }
+    return data as T;
+  } catch (caught) {
+    if (caught instanceof ApiError) throw caught;
+    if (timedOut) throw new ApiError(408, "请求超时，请稍后重试", "REQUEST_TIMEOUT");
+    if (externalSignal?.aborted) throw new ApiError(0, "请求已取消", "REQUEST_CANCELED");
+    throw new ApiError(0, "网络连接失败，请确认服务仍在运行");
+  } finally {
+    clearTimeout(timeout);
+    externalSignal?.removeEventListener("abort", abortFromCaller);
+  }
+}
+
+export const apiGet = <T>(url: string, init?: ApiRequestInit) => api<T>(url, { ...init, method: "GET" });
+export const apiPost = <T>(url: string, body?: unknown, init: ApiRequestInit = {}) => api<T>(url, {
+  ...init,
+  method: "POST",
+  body: body === undefined ? init.body : body instanceof FormData ? body : JSON.stringify(body),
+});
+
+export const apiPut = <T>(url: string, body?: unknown, init: ApiRequestInit = {}) => api<T>(url, {
+  ...init,
+  method: "PUT",
+  body: body === undefined ? init.body : body instanceof FormData ? body : JSON.stringify(body),
+});
+
+export const apiPatch = <T>(url: string, body?: unknown, init: ApiRequestInit = {}) => api<T>(url, {
+  ...init,
+  method: "PATCH",
+  body: body === undefined ? init.body : body instanceof FormData ? body : JSON.stringify(body),
+});
+
+export const apiDelete = <T>(url: string, body?: unknown, init: ApiRequestInit = {}) => api<T>(url, {
+  ...init,
+  method: "DELETE",
+  body: body === undefined ? init.body : body instanceof FormData ? body : JSON.stringify(body),
+});
+
+export const fetchApi = api;
+export const request = api;
diff --git a/web-next/src/services/auth.ts b/web-next/src/services/auth.ts
new file mode 100644
index 0000000..21d64f8
--- /dev/null
+++ b/web-next/src/services/auth.ts
@@ -0,0 +1,27 @@
+import { api, apiGet, apiPost } from "./api";
+import type { Admin, AuthResponse, AuthStatus, ChangePasswordInput, LoginCredentials } from "../types/auth";
+
+export function getAuthStatus(): Promise<AuthStatus> {
+  return apiGet<AuthStatus>("/api/auth/status");
+}
+
+export function getSession(): Promise<AuthResponse> {
+  return apiGet<AuthResponse>("/api/auth/session");
+}
+
+export function login(credentials: LoginCredentials): Promise<AuthResponse> {
+  return apiPost<AuthResponse>("/api/auth/login", credentials);
+}
+
+export function logout(): Promise<void> {
+  return apiPost<void>("/api/auth/logout");
+}
+
+export function changePassword(input: ChangePasswordInput): Promise<AuthResponse> {
+  return apiPost<AuthResponse>("/api/auth/change-password", input);
+}
+
+export type { Admin, AuthResponse, AuthStatus, ChangePasswordInput, LoginCredentials };
+
+// Keep a typed escape hatch for future authenticated services without exposing fetch details.
+export { api };
diff --git a/web-next/src/services/formErrors.ts b/web-next/src/services/formErrors.ts
new file mode 100644
index 0000000..cf88348
--- /dev/null
+++ b/web-next/src/services/formErrors.ts
@@ -0,0 +1,13 @@
+import { ApiError } from "./api";
+
+type ValidationIssue = { path?: Array<string | number>; message?: string };
+
+export function apiFieldErrors(caught: unknown): Record<string, string> {
+  if (!(caught instanceof ApiError) || !Array.isArray(caught.details)) return {};
+  const errors: Record<string, string> = {};
+  for (const issue of caught.details as ValidationIssue[]) {
+    const field = issue.path?.[0];
+    if (typeof field === "string" && issue.message && !errors[field]) errors[field] = issue.message;
+  }
+  return errors;
+}
diff --git a/web-next/src/services/index.ts b/web-next/src/services/index.ts
new file mode 100644
index 0000000..e5cae4f
--- /dev/null
+++ b/web-next/src/services/index.ts
@@ -0,0 +1,2 @@
+export * from "./api";
+export * from "./auth";
diff --git a/web-next/src/store/index.ts b/web-next/src/store/index.ts
new file mode 100644
index 0000000..16f9c4a
--- /dev/null
+++ b/web-next/src/store/index.ts
@@ -0,0 +1,17 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { useDispatch, useSelector, type TypedUseSelectorHook } from "react-redux";
+import sessionReducer from "./sessionSlice";
+
+export const store = configureStore({
+  reducer: {
+    session: sessionReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+export { default as sessionReducer } from "./sessionSlice";
+export * from "./sessionSlice";
diff --git a/web-next/src/store/sessionSlice.ts b/web-next/src/store/sessionSlice.ts
new file mode 100644
index 0000000..59bc78b
--- /dev/null
+++ b/web-next/src/store/sessionSlice.ts
@@ -0,0 +1,156 @@
+import { createAsyncThunk, createSlice, type PayloadAction } from "@reduxjs/toolkit";
+import { ApiError } from "../services/api";
+import { changePassword as changePasswordRequest, getAuthStatus, getSession, login as loginRequest, logout as logoutRequest } from "../services/auth";
+import type { Admin, AuthStatus, ChangePasswordInput, LoginCredentials } from "../types/auth";
+
+export type SessionStatus = "idle" | "loading" | "authenticated" | "unauthenticated" | "error";
+
+export interface SessionState {
+  status: SessionStatus;
+  admin: Admin | null;
+  initialized: boolean | null;
+  timezone: string;
+  error: string | null;
+  bootstrapRequestId: string | null;
+}
+
+const initialState: SessionState = {
+  status: "idle",
+  admin: null,
+  initialized: null,
+  timezone: "Asia/Shanghai",
+  error: null,
+  bootstrapRequestId: null,
+};
+
+/** Only the initial session check should replace the auth surface with a
+ * full-page bootstrap indicator. Login and password requests keep their form
+ * mounted so their controls can show progress in place. */
+export function isSessionBootstrapping(state: Pick<SessionState, "status" | "initialized" | "bootstrapRequestId">): boolean {
+  return state.status === "idle"
+    || (state.status === "loading" && (state.initialized === null || state.bootstrapRequestId !== null));
+}
+
+export const bootstrapSession = createAsyncThunk("session/bootstrap", async () => {
+  const authStatus = await getAuthStatus();
+  try {
+    const session = await getSession();
+    return { ...authStatus, admin: session.admin };
+  } catch (error) {
+    if (error instanceof ApiError && error.status === 401) return { ...authStatus, admin: null };
+    throw error;
+  }
+});
+
+export const loginThunk = createAsyncThunk("session/login", async (credentials: LoginCredentials) => {
+  const result = await loginRequest(credentials);
+  return result.admin;
+});
+
+export const changePasswordThunk = createAsyncThunk("session/changePassword", async (input: ChangePasswordInput) => {
+  const result = await changePasswordRequest(input);
+  return result.admin;
+});
+
+export const logoutThunk = createAsyncThunk("session/logout", async () => {
+  await logoutRequest();
+});
+
+// Friendly aliases keep page code terse while the *Thunk suffix remains explicit at call sites.
+export const restoreSession = bootstrapSession;
+export const login = loginThunk;
+export const changePassword = changePasswordThunk;
+export const logout = logoutThunk;
+
+const sessionSlice = createSlice({
+  name: "session",
+  initialState,
+  reducers: {
+    clearSessionError(state) {
+      state.error = null;
+    },
+    sessionExpired(state, action: PayloadAction<string | undefined>) {
+      state.bootstrapRequestId = null;
+      state.status = "unauthenticated";
+      state.admin = null;
+      state.error = action.payload ?? null;
+    },
+    setTimezone(state, action: PayloadAction<string>) {
+      state.timezone = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(bootstrapSession.pending, (state, action) => {
+        state.status = "loading";
+        state.error = null;
+        state.bootstrapRequestId = action.meta.requestId;
+      })
+      .addCase(bootstrapSession.fulfilled, (state, action) => {
+        if (state.bootstrapRequestId !== action.meta.requestId) return;
+        state.bootstrapRequestId = null;
+        state.status = action.payload.admin ? "authenticated" : "unauthenticated";
+        state.admin = action.payload.admin;
+        state.initialized = action.payload.initialized;
+        state.timezone = action.payload.timezone || state.timezone;
+      })
+      .addCase(bootstrapSession.rejected, (state, action) => {
+        if (state.bootstrapRequestId !== action.meta.requestId) return;
+        state.bootstrapRequestId = null;
+        state.status = "error";
+        state.error = action.error.message ?? "无法读取登录状态";
+      })
+      .addCase(loginThunk.pending, (state) => {
+        state.bootstrapRequestId = null;
+        state.status = "loading";
+        state.error = null;
+      })
+      .addCase(loginThunk.fulfilled, (state, action: PayloadAction<Admin>) => {
+        state.bootstrapRequestId = null;
+        state.status = "authenticated";
+        state.admin = action.payload;
+        state.initialized = true;
+        state.error = null;
+      })
+      .addCase(loginThunk.rejected, (state, action) => {
+        state.bootstrapRequestId = null;
+        state.status = "unauthenticated";
+        state.error = action.error.message ?? "登录失败";
+      })
+      .addCase(changePasswordThunk.pending, (state) => {
+        state.bootstrapRequestId = null;
+        state.status = "loading";
+        state.error = null;
+      })
+      .addCase(changePasswordThunk.fulfilled, (state, action: PayloadAction<Admin>) => {
+        state.bootstrapRequestId = null;
+        state.status = "authenticated";
+        state.admin = action.payload;
+        state.error = null;
+      })
+      .addCase(changePasswordThunk.rejected, (state, action) => {
+        state.bootstrapRequestId = null;
+        state.status = "authenticated";
+        state.error = action.error.message ?? "密码更新失败";
+      })
+      .addCase(logoutThunk.pending, (state) => {
+        state.bootstrapRequestId = null;
+        state.status = "loading";
+      })
+      .addCase(logoutThunk.fulfilled, (state) => {
+        state.bootstrapRequestId = null;
+        state.status = "unauthenticated";
+        state.admin = null;
+        state.error = null;
+      })
+      .addCase(logoutThunk.rejected, (state, action) => {
+        state.bootstrapRequestId = null;
+        state.status = "unauthenticated";
+        state.admin = null;
+        state.error = action.error.message ?? "退出登录失败";
+      });
+  },
+});
+
+export const { clearSessionError, sessionExpired, setTimezone } = sessionSlice.actions;
+export default sessionSlice.reducer;
diff --git a/web-next/src/styles/theme.css b/web-next/src/styles/theme.css
new file mode 100644
index 0000000..29ccd4e
--- /dev/null
+++ b/web-next/src/styles/theme.css
@@ -0,0 +1,525 @@
+@import 'tdesign-react/es/style/index.css';
+@import '@fontsource-variable/plus-jakarta-sans';
+
+/* TallyNote UX baseline: dense, calm, and keyboard-friendly surfaces. */
+
+:root {
+  font-family: "Plus Jakarta Sans Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
+  color: #1f2937;
+  background: #f4f7fb;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  --tn-navy-950: #082f76;
+  --tn-navy-900: #0b3a88;
+  --tn-navy-800: #1556ad;
+  --tn-blue-700: #175cd3;
+  --tn-blue-100: #e8f0ff;
+  --tn-surface: #ffffff;
+  --tn-page: #f4f7fb;
+  --tn-border: #dce3ec;
+  --tn-border-subtle: #e7edf3;
+  --tn-text: #172033;
+  --tn-text-secondary: #475467;
+  --tn-text-muted: #5b6575;
+  --tn-success: #2f7d5c;
+  --tn-warning: #805400;
+  --tn-danger: #c93737;
+
+  /* TDesign tokens kept on one deep-blue brand scale. */
+  --td-brand-color: #175cd3;
+  --td-brand-color-1: #e8f0ff;
+  --td-brand-color-2: #c9dcff;
+  --td-brand-color-3: #9fbeff;
+  --td-brand-color-4: #6f9ff0;
+  --td-brand-color-5: #3d7be5;
+  --td-brand-color-6: #2f6fe4;
+  --td-brand-color-7: #175cd3;
+  --td-brand-color-8: #1250bb;
+  --td-brand-color-9: #0f429b;
+  --td-brand-color-10: #082f76;
+  --td-brand-color-hover: var(--td-brand-color-6);
+  --td-brand-color-focus: var(--td-brand-color-2);
+  --td-brand-color-active: var(--td-brand-color-8);
+  --td-brand-color-disabled: var(--td-brand-color-3);
+  --td-brand-color-light: var(--td-brand-color-1);
+  --td-brand-color-light-hover: var(--td-brand-color-2);
+  --td-mask-active: rgba(8, 47, 118, .34);
+  --td-error-color: var(--tn-danger);
+  --td-warning-color: var(--tn-warning);
+  --td-success-color: var(--tn-success);
+  --td-bg-color-page: var(--tn-page);
+  --td-bg-color-container: var(--tn-surface);
+  --td-text-color-primary: var(--tn-text);
+  --td-text-color-secondary: var(--tn-text-secondary);
+  --td-component-stroke: var(--tn-border);
+}
+
+* { box-sizing: border-box; }
+.tn-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
+/* The page owns scrolling in `.tn-content`; reserving a root scrollbar gutter
+   would shrink the flex layout and make fixed notifications drift inward. */
+html { min-width: 320px; height: 100%; overflow: hidden; }
+body { height: 100%; margin: 0; min-width: 320px; background: var(--tn-page); overflow: hidden; }
+button, input, textarea, select { font: inherit; }
+button, a { -webkit-tap-highlight-color: transparent; }
+button:focus-visible, a:focus-visible { outline: 2px solid #175cd3; outline-offset: 2px; }
+.t-dialog__close:focus-visible { border-radius: 3px; outline: 2px solid var(--td-brand-color); outline-offset: 2px; }
+/* Keep a single, inset focus indicator. TDesign already owns the field
+   border, so an inset outline avoids the heavy second ring users see with
+   the browser default while remaining visible to keyboard users. */
+input:focus-visible, textarea:focus-visible, select:focus-visible {
+  outline: 2px solid var(--td-brand-color);
+  outline-offset: -2px;
+}
+/* TDesign resets focus-visible on its nested inputs with higher specificity.
+   The wrapper owns the single visible indicator, so the native input does
+   not draw a second rectangle inside it. */
+.t-input :focus-visible, .t-textarea :focus-visible, .t-date-picker :focus-visible, .t-select-input :focus-visible {
+  outline: 0 !important;
+}
+.t-input:has(:focus-visible), .t-textarea:has(:focus-visible), .t-date-picker:has(:focus-visible), .t-select-input:has(:focus-visible) {
+  border-color: var(--td-brand-color) !important;
+  box-shadow: inset 0 0 0 1px var(--td-brand-color) !important;
+}
+.t-input.t-is-focused, .t-input.t-input--focused,
+.t-textarea.t-is-focused, .t-textarea.t-textarea--focused,
+.t-date-picker.t-is-focused, .t-date-picker .t-input.t-is-focused,
+.t-select-input .t-input.t-input--focused {
+  border-color: var(--td-brand-color) !important;
+  box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+}
+.t-input:focus-within, .t-textarea:focus-within, .t-date-picker:focus-within, .t-select-input:focus-within {
+  border-color: var(--td-brand-color) !important;
+}
+@media (forced-colors: active) {
+  input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid CanvasText; outline-offset: 1px; }
+}
+#root { height: 100%; min-height: 100vh; }
+.tn-route-error { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: var(--tn-page); }
+.tn-route-error-panel { width: min(420px, 100%); padding: 30px; border: 1px solid var(--tn-border); border-radius: 4px; background: var(--tn-surface); box-shadow: 0 14px 36px rgba(11, 58, 136, .08); }
+.tn-route-error-panel h1 { margin: 0; color: var(--tn-text); font-size: 22px; }
+.tn-route-error-panel p { margin: 10px 0 20px; color: var(--tn-text-secondary); overflow-wrap: anywhere; }
+.t-notification { width: min(360px, calc(100vw - 32px)); max-width: calc(100vw - 32px); border: 1px solid var(--tn-border); border-left-width: 1px; border-radius: 4px; box-shadow: 0 10px 26px rgba(11, 58, 136, .14); }
+/* TDesign mounts this wrapper directly under body. Keep one viewport inset
+   at every breakpoint so notices remain fully visible while the page resizes. */
+.t-notification__show--top-right { right: 16px; }
+.t-notification__content { color: var(--tn-text); }
+
+.tn-layout { width: 100%; height: 100%; min-height: 100vh; display: flex; flex-direction: row !important; background: var(--tn-page); overflow: hidden; }
+.tn-desktop-menu { position: relative; top: 0; z-index: 30; display: block; width: 232px; height: 100%; flex: 0 0 232px; min-height: 100%; overflow: hidden; border-right: 1px solid var(--tn-border); background: var(--tn-surface); transition: width .22s ease, flex-basis .22s ease, opacity .22s ease; }
+.tn-desktop-menu.is-hidden { width: 0; flex-basis: 0; border-right-width: 0; opacity: 0; pointer-events: none; }
+.tn-desktop-menu > .t-default-menu { width: 232px !important; height: 100%; min-height: 100%; border-right: 0; transition: width .22s ease; }
+.tn-desktop-menu.is-hidden > .t-default-menu { width: 0 !important; }
+.tn-desktop-menu > .t-default-menu .t-menu { width: 100% !important; overflow-x: hidden !important; overflow-y: auto; }
+.tn-desktop-menu .t-menu__logo, .tn-mobile-drawer .t-menu__logo { height: 64px; min-height: 64px; border-bottom: 1px solid var(--tn-border); border-top: 0; }
+.tn-layout-main { display: flex; height: 100%; min-width: 0; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }
+.tn-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; flex: 0 0 64px; min-width: 0; padding: 0 24px; border-bottom: 1px solid var(--tn-border); background: rgba(255,255,255,.96); }
+.tn-header-leading, .tn-header-actions { min-width: 0; }
+.tn-header-leading { flex: 1 1 auto; }
+.tn-header-actions { flex: 0 1 auto; }
+.tn-header-menu-toggle { display: inline-flex; color: var(--tn-blue-700); }
+.tn-header-nav-label { display: none; min-width: 0; color: var(--tn-blue-700); font-size: 14px; font-weight: 650; white-space: nowrap; }
+.tn-header-user { display: inline-block; min-width: 0; max-width: 180px; overflow: hidden; color: var(--tn-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
+.tn-user-menu-trigger { display: inline-flex; max-width: min(240px, 42vw); min-height: 40px; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid transparent; border-radius: 4px; color: var(--tn-text); }
+.tn-user-menu-trigger .t-button__text { display: inline-flex; min-width: 0; align-items: center; gap: 8px; }
+.tn-user-menu-trigger:hover, .tn-user-menu-trigger.t-is-hover { border-color: var(--tn-border); background: #f7f9fc; }
+.tn-user-menu-trigger:focus-visible { border-color: var(--td-brand-color-3); }
+.tn-user-menu-trigger .t-button__suffix { display: inline-flex; align-items: center; color: var(--tn-text-secondary); }
+.tn-user-avatar { flex: 0 0 32px; color: #fff; background: var(--tn-blue-700); font-size: 13px; font-weight: 700; }
+.tn-user-dropdown { min-width: 184px; padding: 4px; border: 1px solid var(--tn-border); border-radius: 4px; box-shadow: 0 12px 28px rgba(8, 47, 118, .16); }
+.tn-user-dropdown .t-dropdown__item { min-height: 38px; border-radius: 3px; }
+.tn-user-dropdown-button { display: block; width: 100%; min-height: 30px; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
+.tn-user-dropdown-button:focus-visible { border-radius: 2px; outline: 2px solid var(--td-brand-color); outline-offset: 1px; }
+.tn-user-dropdown-identity { display: grid; gap: 3px; margin: 2px 4px 6px; padding: 8px 9px 10px; border-bottom: 1px solid var(--tn-border-subtle); }
+.tn-user-dropdown-identity strong { color: var(--tn-text); font-size: 13px; }
+.tn-user-dropdown-identity span { overflow: hidden; color: var(--tn-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.tn-menu-logo { display: flex; width: 100%; height: 64px; align-items: center; justify-content: center; color: var(--tn-navy-900); }
+.tn-logo-full { font-size: 18px; font-weight: 750; letter-spacing: .01em; }
+.tn-logo-short { color: var(--tn-blue-700); font-size: 16px; font-weight: 800; letter-spacing: .04em; }
+.tn-menu-icon { flex: 0 0 20px; width: 20px; height: 20px; margin-right: 10px; }
+.tn-desktop-menu .t-menu__item, .tn-mobile-drawer .t-menu__item { width: 100%; column-gap: 0; }
+.tn-desktop-menu .t-menu__item .tn-menu-icon, .tn-mobile-drawer .t-menu__item .tn-menu-icon { margin-right: 10px; }
+.tn-desktop-menu .t-menu__item.t-is-active:not(.t-is-opened), .tn-mobile-drawer .t-menu__item.t-is-active:not(.t-is-opened) { background: var(--td-brand-color-1); color: var(--td-brand-color); }
+.tn-desktop-menu .t-menu__item.t-is-active:not(.t-is-opened) .t-icon, .tn-mobile-drawer .t-menu__item.t-is-active:not(.t-is-opened) .t-icon { color: var(--td-brand-color); }
+.tn-desktop-menu .t-menu--collapsed .tn-menu-icon { margin-right: 0; }
+.tn-content { min-width: 0; min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; background: var(--tn-page); }
+.tn-mobile-drawer { display: none; }
+.tn-mobile-drawer .t-drawer__body { padding: 0; }
+.tn-mobile-drawer-header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; color: var(--tn-text); font-size: 14px; font-weight: 700; }
+.tn-mobile-drawer-header .t-button { color: var(--tn-text-secondary); }
+.tn-mobile-menu-shell { height: 100%; }
+.tn-mobile-drawer .t-default-menu { width: 216px !important; min-height: 100%; }
+.tn-mobile-drawer .t-default-menu .t-menu { width: 100% !important; min-height: 100%; border-right: 0; overflow-x: hidden !important; }
+
+.tn-shell { min-height: 100vh; background: var(--tn-page); }
+.tn-content { min-width: 0; padding: 28px 32px 40px; }
+.tn-content-inner { width: min(1480px, 100%); margin: 0 auto; }
+.tn-page { min-width: 0; }
+.tn-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
+.tn-eyebrow { margin-bottom: 4px; color: var(--tn-text-secondary); font-size: 12px; letter-spacing: .02em; }
+.tn-page-title { margin: 0; color: var(--tn-text); font-size: 26px; line-height: 1.2; font-weight: 700; }
+.tn-page-subtitle { margin: 7px 0 0; color: var(--tn-text-secondary); font-size: 13px; }
+.tn-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
+.tn-page-actions .t-button, .tn-toolbar .t-button { min-height: 36px; }
+.tn-flat-section { border: 1px solid var(--tn-border); border-radius: 4px; background: var(--tn-surface); }
+.tn-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--tn-border); border-radius: 4px; background: var(--tn-surface); }
+.tn-expense-month-controls, .tn-expense-search-controls, .tn-expense-filter-actions { display: flex; min-width: 0; align-items: center; gap: 8px; }
+.tn-expense-month-controls .tn-month-picker { width: 150px; min-width: 0; }
+.tn-expense-search-controls { min-width: 280px; flex: 1 1 340px; }
+.tn-expense-search-controls .tn-expense-search { min-width: 0; flex: 1; }
+.tn-expense-filter-actions { flex: 0 0 auto; }
+.tn-audit-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) auto; align-items: center; }
+.tn-audit-toolbar > .t-input__wrap, .tn-audit-toolbar > .t-select__wrap { width: auto; min-width: 0; }
+.tn-audit-toolbar > .t-input__wrap { min-width: 0; }
+.tn-table-wrap { overflow: hidden; border: 1px solid var(--tn-border); border-radius: 4px; background: var(--tn-surface); }
+.tn-table-wrap .t-table { font-variant-numeric: tabular-nums; }
+.tn-summary { display: flex; align-items: baseline; gap: 16px; padding: 16px 2px 12px; color: var(--tn-text-secondary); }
+.tn-summary strong { color: var(--tn-text); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.tn-summary .t-button { margin-left: auto; }
+.tn-amount, .tn-code { font-variant-numeric: tabular-nums; font-family: "Plus Jakarta Sans Variable", monospace; }
+.tn-amount { color: var(--tn-text); font-weight: 700; white-space: nowrap; }
+.tn-muted { color: var(--tn-text-muted); }
+.tn-note { display: block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tn-status { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
+.tn-status-unreimbursed { color: var(--tn-warning); background: #fff7e6; }
+.tn-status-reimbursed { color: var(--tn-success); background: #eaf7ef; }
+.tn-status-disabled { color: var(--tn-text-secondary); background: #eef1f5; }
+.tn-missing { color: var(--tn-danger); font-size: 12px; }
+.tn-action-group { display: inline-flex; align-items: center; gap: 2px; }
+.tn-action-group .t-button { color: var(--tn-text-secondary); }
+.tn-action-group .t-button:not(.t-button--theme-danger):hover { color: var(--tn-blue-700); background: var(--tn-blue-100); }
+.tn-action-group .t-button.t-button--theme-danger:hover { color: var(--tn-danger); background: #fff0f0; }
+.tn-empty { display: grid; min-height: 260px; place-items: center; align-content: center; gap: 10px; padding: 48px 20px; color: var(--tn-text-muted); text-align: center; }
+.tn-page-loading { display: grid; min-width: 0; min-height: 100%; place-items: center; align-content: center; gap: 10px; padding: 32px 20px; color: var(--tn-text-muted); text-align: center; }
+.tn-empty p { margin: 0; color: var(--tn-text-secondary); }
+.tn-selection { display: flex; align-items: center; gap: 14px; padding: 10px 12px; margin: 10px 0; border-left: 3px solid var(--tn-success); background: #eff7f2; color: #24543f; }
+.tn-selection .t-button { margin-left: auto; }
+.tn-auth-shell { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: var(--tn-page); }
+.tn-auth-panel { width: min(420px, 100%); padding: 38px 36px; border: 1px solid var(--tn-border); border-radius: 4px; background: var(--tn-surface); box-shadow: 0 14px 36px rgba(11, 58, 136, .08); }
+.tn-login-page { position: relative; z-index: 0; display: flex; height: 100vh; min-height: 100svh; flex-direction: column; overflow-x: hidden; overflow-y: auto; color: var(--tn-text); background-color: #f5f9ff; background-image: url("../assets/login-background-tech.webp"); background-position: center center; background-size: cover; animation: tn-auth-page-in .24s ease-out both; }
+.tn-login-page::before { position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, rgba(247, 250, 255, .9) 0%, rgba(247, 250, 255, .72) 38%, rgba(247, 250, 255, .16) 72%, rgba(247, 250, 255, 0) 100%); content: ""; pointer-events: none; }
+.tn-login-header { position: relative; z-index: 1; display: flex; height: 64px; flex: 0 0 64px; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid rgba(23, 92, 211, .18); background: rgba(255, 255, 255, .68); backdrop-filter: blur(8px); }
+.tn-login-brand-group { display: flex; min-width: 0; align-items: baseline; gap: 14px; }
+.tn-login-wordmark { color: var(--tn-navy-900); font-size: 19px; font-weight: 750; letter-spacing: .01em; white-space: nowrap; }
+.tn-login-environment { color: var(--tn-text-secondary); font-size: 13px; white-space: nowrap; }
+.tn-login-operations { color: var(--tn-text-secondary); }
+.tn-login-operation { color: var(--tn-text-secondary); }
+.tn-login-operation:hover { color: var(--td-brand-color); background: var(--td-brand-color-1); }
+.tn-login-container { position: absolute; z-index: 1; top: 22%; left: 5%; min-height: 500px; line-height: 22px; }
+.tn-login-heading { margin-bottom: 0; }
+.tn-login-title { margin: 4px 0 0; color: var(--tn-navy-950); font-size: 36px; font-weight: 700; line-height: 44px; }
+.tn-login-title-brand { color: var(--tn-blue-700); }
+.tn-login-subtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; color: var(--tn-text-secondary); font-size: 14px; }
+.tn-login-subtitle-divider { color: var(--tn-text-muted); }
+.tn-login-form { width: 400px; max-width: calc(100vw - 48px); margin-top: 48px; }
+.tn-login-form .t-form__item { margin-bottom: 16px; }
+.tn-login-form .t-input { border-color: var(--tn-border); background: rgba(255, 255, 255, .96); }
+.tn-login-form .t-input:hover { border-color: var(--td-brand-color-5); }
+.tn-login-form .t-input.t-is-focused { border-color: var(--td-brand-color); box-shadow: none; }
+.tn-login-form .t-input__suffix { display: inline-flex; align-items: center; gap: 4px; }
+.tn-login-suffix-actions { display: inline-flex; align-items: center; gap: 3px; }
+.tn-login-suffix-placeholder { display: none; }
+.tn-login-clear { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 3px; color: var(--tn-text-muted); background: transparent; cursor: pointer; }
+.tn-login-clear:hover { color: var(--td-brand-color); background: var(--td-brand-color-1); }
+.tn-login-alert { margin-bottom: 14px; border: 1px solid currentColor; border-left-width: 1px; border-radius: 4px; background: rgba(255, 255, 255, .9); }
+.tn-login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; color: var(--tn-text-secondary); font-size: 14px; }
+.tn-login-options .t-checkbox { flex: 0 0 auto; }
+.tn-login-options > span { color: var(--tn-text-secondary); white-space: nowrap; }
+.tn-login-submit { margin-top: 48px; margin-bottom: 0 !important; }
+.tn-login-note { margin-top: 24px; color: var(--tn-text-secondary); font-size: 12px; }
+.tn-login-note .t-typography { color: inherit; font-size: inherit; }
+.tn-login-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--tn-blue-700); }
+.tn-login-input-icon, .tn-login-prefix-icon { color: var(--tn-text-secondary); }
+.tn-login-password-toggle { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 3px; color: var(--tn-text-secondary); background: transparent; cursor: pointer; }
+.tn-login-password-toggle:hover { color: var(--td-brand-color); background: var(--td-brand-color-1); }
+.tn-login-password-toggle:focus-visible { outline: 2px solid var(--td-brand-color-3); outline-offset: 1px; }
+.tn-login-footer { position: absolute; z-index: 1; bottom: 64px; left: 5%; color: var(--tn-text-secondary); font-size: 14px; }
+.tn-dialog-note { margin: 12px 0 0; color: var(--tn-text-secondary); font-size: 13px; }
+.tn-password-container { width: min(920px, calc(100vw - 10%)); margin-top: clamp(76px, 16vh, 150px); }
+.tn-password-page .tn-password-card { max-width: 920px; margin: 4px auto 0; }
+.tn-password-card { overflow: hidden; border: 1px solid var(--tn-border); border-radius: 4px; background: var(--tn-surface); box-shadow: 0 10px 26px rgba(11, 58, 136, .07); }
+.tn-password-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 18px; border-bottom: 1px solid var(--tn-border-subtle); }
+.tn-password-card-icon { display: inline-grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid var(--td-brand-color-2); border-radius: 4px; color: var(--td-brand-color); background: var(--td-brand-color-1); }
+.tn-password-card-head h2 { margin: 0; color: var(--tn-text); font-size: 19px; line-height: 1.3; }
+.tn-password-card-head p { margin: 5px 0 0; color: var(--tn-text-secondary); font-size: 13px; line-height: 1.45; }
+.tn-password-card-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr); gap: 28px; padding: 22px 24px 24px; }
+.tn-password-form { width: 100%; margin: 0; }
+.tn-password-form .t-form__item { margin-bottom: 16px; }
+.tn-password-form .t-form__item:last-child { margin-bottom: 0; }
+.tn-password-form:not(.t-form-inline) .t-form__item--last { margin: 0 0 16px; }
+.tn-password-form:not(.t-form-inline) > .t-form__item.tn-password-submit { margin-top: 28px; }
+.tn-password-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
+.tn-password-actions .tn-password-submit-button { min-width: 112px; }
+.tn-password-alert { margin: 16px 24px 0; }
+.tn-password-guidance { align-self: start; padding: 16px; border: 1px solid var(--tn-border-subtle); border-radius: 4px; background: #f8fafc; }
+.tn-password-guidance-title { display: flex; align-items: center; gap: 7px; color: var(--tn-navy-900); font-size: 13px; font-weight: 700; }
+.tn-password-guidance > p { margin: 9px 0 12px; color: var(--tn-text-secondary); font-size: 12px; line-height: 1.5; }
+.tn-password-guidance ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.tn-password-guidance li { display: flex; align-items: center; gap: 7px; color: var(--tn-text-secondary); font-size: 12px; }
+.tn-password-guidance li svg { color: var(--tn-text-muted); }
+.tn-password-guidance li.is-valid { color: var(--tn-success); }
+.tn-password-guidance li.is-valid svg { color: var(--tn-success); }
+.tn-file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 7px 9px; border: 1px solid var(--tn-border-subtle); border-radius: 3px; background: #f8fafc; }
+.tn-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tn-file-name small { margin-left: 6px; color: var(--tn-text-muted); }
+.tn-detail-amount { margin: 0 0 10px; color: var(--tn-navy-900); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.tn-detail-note { white-space: pre-wrap; word-break: break-word; }
+.tn-preview { display: grid; min-height: 300px; max-height: 68vh; place-items: center; overflow: auto; background: #f2f5f9; border-radius: 3px; }
+.tn-preview img { display: block; max-width: 100%; max-height: 64vh; object-fit: contain; }
+.tn-preview iframe { width: 100%; height: min(64vh, calc(100dvh - 150px)); min-height: 240px; border: 0; background: #fff; }
+.tn-section-title { margin: 20px 0 12px; padding-top: 18px; border-top: 1px solid var(--tn-border-subtle); color: var(--tn-text); font-size: 14px; font-weight: 700; }
+.tn-update-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
+.tn-update-block { padding: 0; }
+.tn-update-block .t-card__body { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 3px; padding: 18px; }
+.tn-update-block .t-card__body > svg { grid-row: span 3; color: var(--tn-blue-700); }
+.tn-update-value { color: var(--tn-navy-900); font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.tn-update-release { padding: 0; margin-bottom: 14px; }
+.tn-update-release .t-card__body { padding: 20px; }
+.tn-update-release-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
+.tn-update-release h2 { margin: 3px 0 5px; color: var(--tn-text); font-size: 21px; }
+.tn-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--tn-border-subtle); border-bottom: 1px solid var(--tn-border-subtle); }
+.tn-facts span { display: block; margin-bottom: 4px; color: var(--tn-text-secondary); font-size: 12px; }
+.tn-facts strong { overflow-wrap: anywhere; color: #344054; font-size: 14px; }
+.tn-chart-section { margin-top: 14px; padding: 18px; }
+.tn-chart-title { margin: 0 0 4px; color: var(--tn-text); font-size: 14px; font-weight: 700; }
+.tn-chart-subtitle { margin: 0 0 12px; color: var(--tn-text-secondary); font-size: 12px; }
+.tn-dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
+.tn-dashboard-stat { min-width: 0; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
+.tn-dashboard-stat:hover { border-color: var(--td-brand-color-3); box-shadow: 0 8px 20px rgba(23, 92, 211, .08); transform: translateY(-1px); }
+.tn-dashboard-stat .t-card__body { display: flex; min-height: 112px; align-items: center; gap: 12px; padding: 18px; }
+.tn-dashboard-stat .t-card__body { justify-content: space-between; }
+.tn-dashboard-stat .t-statistic__content { font-weight: 700; }
+.tn-dashboard-stat-icon { display: inline-grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid var(--td-brand-color-2); border-radius: 4px; color: var(--td-brand-color); background: var(--td-brand-color-1); }
+.tn-dashboard-stat .t-statistic { min-width: 0; }
+.tn-dashboard-stat .t-statistic__title { margin-bottom: 5px; color: var(--tn-text-secondary); font-size: 12px; }
+.tn-dashboard-stat .t-statistic__content { color: var(--tn-text); font-family: "Plus Jakarta Sans Variable", sans-serif; font-size: 23px; font-variant-numeric: tabular-nums; }
+.tn-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); gap: 14px; margin-bottom: 14px; }
+.tn-dashboard-chart, .tn-dashboard-progress, .tn-dashboard-recent { min-width: 0; }
+.tn-dashboard-card-title { display: grid; min-width: 0; gap: 3px; }
+.tn-dashboard-card-title > span { color: var(--tn-text); font-weight: 600; line-height: 1.25; }
+.tn-dashboard-card-title > small { color: var(--tn-text-secondary); font-size: 12px; font-weight: 400; line-height: 1.35; }
+.tn-dashboard-chart .t-card__body { min-height: 300px; padding: 12px 18px 18px; }
+.tn-dashboard-chart .echarts-for-react { min-width: 0; }
+.tn-dashboard-chart-empty { display: flex; min-height: 286px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--tn-text-secondary); text-align: center; }
+.tn-dashboard-chart-empty span { font-size: 14px; font-weight: 600; }
+.tn-dashboard-chart-empty small { color: var(--tn-text-muted); font-size: 12px; }
+.tn-dashboard-progress .t-card__body { display: flex; min-height: 300px; flex-direction: column; align-items: center; justify-content: center; padding: 18px; }
+.tn-progress-ring { display: grid; width: 176px; height: 176px; flex: 0 0 176px; place-items: center; border-radius: 50%; transition: background .35s ease; }
+.tn-progress-ring > div { display: flex; width: 128px; height: 128px; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--tn-surface); box-shadow: inset 0 0 0 1px var(--tn-border-subtle); }
+.tn-progress-ring strong { color: var(--tn-navy-900); font-family: "Plus Jakarta Sans Variable", sans-serif; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
+.tn-progress-ring span { margin-top: 5px; color: var(--tn-text-secondary); font-size: 12px; }
+.tn-dashboard-progress-legend { display: grid; width: min(260px, 100%); gap: 8px; margin-top: 18px; }
+.tn-dashboard-progress-legend > span { display: flex; align-items: center; gap: 7px; color: var(--tn-text-secondary); font-size: 12px; }
+.tn-dashboard-progress-legend i { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 2px; }
+.tn-dashboard-progress-legend i.is-blue { background: var(--tn-blue-700); }
+.tn-dashboard-progress-legend i.is-green { background: var(--tn-success); }
+.tn-dashboard-progress-legend strong { margin-left: auto; color: var(--tn-text); font-family: "Plus Jakarta Sans Variable", sans-serif; font-variant-numeric: tabular-nums; }
+.tn-dashboard-recent { margin-bottom: 14px; }
+.tn-dashboard-recent .t-card__body { padding: 0; }
+.tn-dashboard-table { border: 0; border-radius: 0; }
+.tn-dashboard-table .t-table { min-width: 620px; }
+.tn-dashboard-actions { display: flex; align-items: center; gap: 8px; }
+.tn-dashboard-month-control, .tn-dashboard-secondary-actions { display: flex; align-items: center; gap: 8px; }
+.tn-dashboard-month-control .t-date-picker { height: 36px; }
+.tn-dashboard-month-control button.t-button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
+.tn-dashboard-month-control .tn-dashboard-month { width: 148px; flex: 0 1 148px; }
+.tn-dashboard-secondary-actions .tn-dashboard-refresh, .tn-dashboard-secondary-actions .tn-dashboard-view { flex: 0 0 auto; }
+.tn-layout { animation: tn-app-enter .24s ease-out both; }
+.tn-page-transition { animation: tn-page-in .18s ease-out both; }
+.tn-page-actions .t-button { min-height: 36px; }
+.expenses-toolbar { display: flex; align-items: center; gap: 8px; }
+.expenses-toolbar .t-button--shape-square { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
+.tn-month-picker { width: 148px; }
+.tn-segmented { display: inline-flex; align-items: center; min-height: 36px; }
+.tn-segmented .t-radio-button { min-width: 76px; height: 32px; min-height: 32px; padding: 0 16px; line-height: 22px; }
+.tn-segmented .t-radio-button.t-is-checked { background: var(--td-brand-color); border-color: var(--td-brand-color); color: #fff; }
+.tn-expense-search { flex: 1 1 260px; min-width: 190px; }
+.expenses-head { margin-bottom: 16px; }
+.tn-table-wrap { min-width: 0; overflow-x: auto; }
+.tn-table-wrap .t-table { min-width: 780px; }
+.tn-audit-table .tn-code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
+.tn-alert { margin: 12px 0; }
+.tn-inline-loading { display: flex; align-items: center; gap: 7px; min-height: 32px; margin: 0 0 10px; color: var(--tn-text-secondary); font-size: 12px; }
+.tn-inline-error, .tn-inline-info { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 11px; border-radius: 3px; font-size: 13px; }
+.tn-inline-error { color: #a33a3a; background: #fff0f0; }
+.tn-inline-info { color: #246044; background: #eaf7ef; }
+.tn-update-explainer { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 13px 15px; border: 1px solid var(--td-brand-color-2); border-radius: 4px; color: var(--tn-navy-900); background: var(--td-brand-color-1); }
+.tn-update-explainer > svg { flex: 0 0 auto; margin-top: 1px; color: var(--td-brand-color); }
+.tn-update-explainer strong { display: block; font-size: 13px; }
+.tn-update-explainer p { margin: 5px 0 0; color: var(--tn-text-secondary); font-size: 12px; line-height: 1.55; }
+.tn-secret { display: flex; align-items: center; gap: 10px; }
+.tn-secret code { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--tn-border); border-radius: 3px; background: #f7f9fc; color: var(--tn-navy-900); font-family: "Plus Jakarta Sans Variable", monospace; font-size: 16px; overflow-wrap: anywhere; }
+.tn-table-more { display: flex; justify-content: center; padding: 16px 0; }
+.tn-update-block small { color: var(--tn-text-secondary); }
+.tn-progress { height: 7px; margin: 18px 0 10px; overflow: hidden; border-radius: 999px; background: #e8edf3; }
+.tn-progress span { display: block; height: 100%; border-radius: inherit; background: var(--tn-blue-700); transition: width .35s ease; }
+.text-success { color: var(--tn-success); }
+.text-danger { color: var(--tn-danger); }
+.expense-form { display: flex; flex-direction: column; gap: 16px; }
+.tn-form-field { display: flex; flex-direction: column; gap: 7px; color: var(--tn-text); font-size: 13px; font-weight: 600; }
+.tn-form-field > small { color: var(--tn-text-secondary); font-size: 12px; font-weight: 400; }
+.tn-field-error { color: var(--tn-danger); font-size: 12px; font-weight: 400; }
+.tn-form-field .t-input, .tn-form-field .t-textarea, .tn-form-field .t-date-picker { width: 100%; }
+.invoice-missing-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--tn-text); font-size: 13px; }
+.tn-form-help { display: block; margin-top: -8px; color: var(--tn-text-secondary); font-size: 12px; }
+.expense-file-list { display: flex; flex-direction: column; gap: 6px; margin: -8px 0 0; padding: 0; list-style: none; }
+.expense-file-list li { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px; border: 1px solid var(--tn-border-subtle); border-radius: 3px; background: #f8fafc; color: var(--tn-text); font-size: 12px; }
+.expense-file-list li small { margin-left: auto; color: var(--tn-text-muted); }
+.expense-file-list li .t-button { flex: 0 0 auto; }
+.expense-error { display: flex; align-items: flex-start; gap: 7px; padding: 9px 11px; border-radius: 3px; color: var(--tn-danger); background: #fff0f0; font-size: 13px; }
+.tn-export-status { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--td-brand-color-2); border-radius: 3px; color: var(--tn-blue-700); background: var(--td-brand-color-1); font-size: 13px; }
+.tn-export-status span { flex: 1; min-width: 0; }
+.expense-detail { display: flex; flex-direction: column; gap: 14px; }
+.expense-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.expense-detail-head > strong { color: var(--tn-navy-900); font-family: "Plus Jakarta Sans Variable", monospace; font-size: 30px; font-variant-numeric: tabular-nums; }
+.expense-detail dl { display: grid; gap: 10px; margin: 0; }
+.expense-detail dl > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: start; }
+.expense-detail dt { color: var(--tn-text-secondary); font-size: 12px; }
+.expense-detail dd { margin: 0; color: var(--tn-text); font-size: 13px; word-break: break-word; }
+.expense-detail h3 { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 0; padding-top: 16px; border-top: 1px solid var(--tn-border-subtle); color: var(--tn-text); font-size: 14px; }
+.expense-detail h3 small { color: var(--tn-text-muted); font-size: 12px; font-weight: 400; }
+.expense-attachments { display: flex; flex-direction: column; gap: 6px; }
+.expense-attachment { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 9px; border: 1px solid var(--tn-border-subtle); border-radius: 3px; background: #f8fafc; }
+.expense-attachment > span { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--tn-text); font-size: 12px; }
+.expense-attachment > span small { color: var(--tn-text-muted); white-space: nowrap; }
+.expense-attachment > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.expense-timeline { display: flex; flex-direction: column; gap: 8px; }
+.expense-timeline > div { display: grid; grid-template-columns: 155px minmax(0, 1fr) 90px; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--tn-border-subtle); font-size: 12px; }
+.expense-timeline span, .expense-timeline small { color: var(--tn-text-secondary); }
+.expense-timeline strong, .expense-timeline small { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
+.expense-timeline strong { color: var(--tn-text); font-family: "Plus Jakarta Sans Variable", monospace; font-size: 12px; }
+.tn-spin, .spin { animation: tn-spin .9s linear infinite; }
+@keyframes tn-spin { to { transform: rotate(360deg); } }
+
+@keyframes tn-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes tn-app-enter { from { opacity: 0; } to { opacity: 1; } }
+@keyframes tn-auth-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+.t-dialog { border: 1px solid var(--tn-border); border-radius: 4px; box-shadow: 0 18px 42px rgba(8, 47, 118, .18); }
+.t-dialog__mask { background: var(--td-mask-active) !important; }
+.t-dialog__footer .t-button { min-width: 76px; }
+@media (max-width: 900px) {
+  .tn-desktop-menu { display: none; }
+  .tn-header { padding: 0 16px; }
+  .tn-header-menu-toggle { display: inline-flex; }
+  .tn-header-nav-label { display: inline-block; }
+  .tn-mobile-drawer { display: block; }
+  .tn-content { padding: 20px 16px 30px; }
+  .tn-page-head { flex-direction: column; }
+  .tn-page-actions { width: 100%; justify-content: flex-start; }
+  .tn-audit-toolbar { grid-template-columns: minmax(0, 1fr); }
+  .tn-dashboard-actions { width: 100%; justify-content: flex-start; }
+  .tn-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .tn-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
+  .tn-password-card-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
+  .tn-password-guidance { order: 2; }
+  .tn-update-release .tn-page-actions { justify-content: flex-start; }
+  .expenses-toolbar { align-items: stretch; }
+  .expenses-toolbar .tn-expense-search { flex-basis: 100%; }
+  .tn-update-grid { grid-template-columns: 1fr; }
+  .tn-login-header { padding: 0 24px; }
+  .tn-login-container { left: 24px; }
+  .tn-login-footer { left: 24px; }
+}
+@media (min-width: 901px) {
+  .tn-login-container.tn-password-container {
+    /* The first-login form can grow beyond a short desktop viewport. Keep it
+       in normal flow so the login canvas owns the scroll instead of clipping
+       an absolutely positioned card. */
+    position: relative;
+    top: auto;
+    left: auto;
+    min-height: 0;
+    margin: clamp(40px, 10vh, 88px) 5% 64px;
+  }
+}
+@media (min-width: 561px) and (max-width: 900px) {
+  .tn-login-page { height: auto; min-height: 100svh; }
+  .tn-login-container, .tn-password-container { position: relative; top: auto; left: auto; width: min(520px, calc(100% - 48px)); min-height: 0; margin: clamp(52px, 10vh, 96px) 24px 72px; }
+  .tn-login-title { font-size: 32px; line-height: 40px; }
+  .tn-login-form { width: 100%; max-width: 100%; }
+  .tn-login-footer { display: none; }
+}
+@media (max-width: 560px) {
+  .tn-content-drawer .t-drawer__content-wrapper { width: 100vw !important; max-width: 100vw; }
+  .tn-mobile-drawer .t-drawer__content-wrapper { width: 216px !important; max-width: 216px; }
+  .t-drawer__body { min-width: 0; overflow-x: hidden; }
+  .tn-auth-panel { padding: 30px 22px; }
+  .tn-password-page .tn-password-card { margin-top: 0; }
+  .tn-password-card-head { padding: 18px 16px 15px; }
+  .tn-password-card-body { gap: 16px; padding: 18px 16px 20px; }
+  .tn-password-alert { margin: 14px 16px 0; }
+  .tn-password-actions { justify-content: stretch; }
+  .tn-password-actions .t-button { flex: 1 1 0; min-width: 0; }
+  .tn-password-actions .tn-password-submit-button { width: 100%; min-width: 112px; }
+  .tn-password-guidance { padding: 14px; }
+  .tn-page-title { font-size: 23px; }
+  .tn-page-actions .t-button { flex: 0 1 auto; min-width: 0; }
+  .expenses-head .tn-page-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; }
+  .expenses-head .tn-page-actions > .t-checkbox { grid-column: 1 / -1; }
+  .expenses-head .tn-page-actions > .t-button { width: 100%; min-width: 0; flex: none; }
+  .tn-dashboard-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; gap: 8px; }
+  .tn-dashboard-month-control { display: grid; grid-column: 1 / -1; grid-template-columns: 36px minmax(0, 1fr) 36px; width: 100%; gap: 8px; }
+  .tn-dashboard-month-control .tn-dashboard-month { width: 100%; min-width: 0; flex: none; }
+  .tn-dashboard-secondary-actions { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
+  .tn-dashboard-secondary-actions .tn-dashboard-refresh, .tn-dashboard-secondary-actions .tn-dashboard-view { width: 100%; min-width: 0; flex: none; }
+  .tn-dashboard-stats { grid-template-columns: minmax(0, 1fr); }
+  .tn-dashboard-stat .t-card__body { min-height: 92px; }
+  .tn-dashboard-chart .t-card__body, .tn-dashboard-progress .t-card__body { min-height: 270px; }
+  .tn-facts { grid-template-columns: 1fr; gap: 10px; }
+  .tn-update-release { padding: 0; }
+  .tn-update-release .t-card__body { padding: 16px; }
+  .tn-update-release-head { flex-direction: column; }
+  .expenses-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
+  .expenses-toolbar .tn-segmented, .expenses-toolbar .tn-expense-month-controls, .expenses-toolbar .tn-expense-search-controls, .expenses-toolbar .tn-expense-filter-actions { width: 100%; min-width: 0; }
+  .expenses-toolbar .tn-segmented { display: flex; }
+  .expenses-toolbar .tn-segmented .t-radio-button { min-width: 0; flex: 1 1 50%; }
+  .expenses-toolbar .tn-segmented .t-radio-button__label { display: flex; justify-content: center; }
+  .tn-expense-month-controls { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; }
+  .tn-expense-month-controls .tn-month-picker { width: 100%; }
+  .tn-expense-search-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
+  .tn-expense-filter-actions { justify-content: space-between; }
+  .expense-timeline > div { grid-template-columns: minmax(0, 1fr) minmax(84px, 34%); gap: 4px 8px; align-items: start; }
+  .expense-timeline > div > span { grid-column: 1 / -1; }
+  .expense-timeline > div > strong { white-space: normal; }
+  .expense-timeline > div > small { max-width: none; text-align: right; white-space: normal; }
+  .tn-login-page { min-height: 100svh; background-position: 38% center; overflow-y: auto; }
+  .tn-login-page::before { background: linear-gradient(180deg, rgba(247, 250, 255, .94) 0%, rgba(247, 250, 255, .82) 54%, rgba(247, 250, 255, .42) 100%); }
+  .tn-login-header { padding: 0 20px; }
+  .tn-login-environment { display: none; }
+  .tn-login-container, .tn-password-container { position: relative; top: auto; left: auto; width: calc(100% - 32px); min-height: 0; margin: 48px 16px 56px; }
+  .tn-login-title { font-size: 29px; line-height: 36px; }
+  .tn-login-form { width: 100%; max-width: 100%; }
+  .tn-login-subtitle { gap: 5px; }
+  .tn-login-footer { display: none; }
+  .tn-header { gap: 8px; padding: 0 10px; }
+  .tn-header-leading { gap: 4px !important; }
+  .tn-header-actions { gap: 2px !important; }
+  .tn-header-user { max-width: 72px; font-size: 12px; }
+  .tn-header-actions .t-button { width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px; }
+  .tn-header-actions .tn-user-menu-trigger { width: auto; max-width: 168px; flex: 0 1 auto; padding-right: 5px; padding-left: 5px; }
+  .tn-header-actions .tn-user-menu-trigger .t-button__suffix { display: none; }
+  .tn-header-actions .tn-user-menu-trigger .tn-user-avatar { width: 30px; height: 30px; flex-basis: 30px; }
+  .tn-header-actions .tn-user-menu-trigger .tn-header-user { max-width: 92px; }
+  .tn-update-release .tn-page-actions { width: 100%; }
+  .tn-update-release .tn-page-actions .t-button { width: 100%; }
+  .tn-table-wrap:not(.tn-dashboard-table):not(.tn-audit-table) .t-table th:first-child,
+  .tn-table-wrap:not(.tn-dashboard-table):not(.tn-audit-table) .t-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--tn-surface); box-shadow: 1px 0 0 var(--tn-border-subtle); }
+  .tn-table-wrap:not(.tn-dashboard-table):not(.tn-audit-table) .t-table thead th:first-child { z-index: 3; }
+  .tn-table-wrap:not(.tn-dashboard-table):not(.tn-audit-table) .t-table th:last-child,
+  .tn-table-wrap:not(.tn-dashboard-table):not(.tn-audit-table) .t-table td:last-child { position: sticky; right: 0; z-index: 2; background: var(--tn-surface); box-shadow: -1px 0 0 var(--tn-border-subtle); }
+  .tn-table-wrap:not(.tn-dashboard-table):not(.tn-audit-table) .t-table thead th:last-child { z-index: 3; }
+  .tn-login-header { backdrop-filter: none; }
+}
+@media (max-width: 560px) {
+  .tn-preview { min-height: 0; max-height: calc(100dvh - 112px); }
+  .tn-preview iframe { height: calc(100dvh - 160px); min-height: 0; }
+}
+@media (min-width: 561px) and (max-height: 680px) {
+  /* The Starter layout positions the form absolutely. Give short desktop
+     windows a scrollable canvas so the lower fields are never clipped. */
+  .tn-login-page { height: auto; min-height: 720px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
+}
diff --git a/web-next/src/types/auth.ts b/web-next/src/types/auth.ts
new file mode 100644
index 0000000..ccba7d4
--- /dev/null
+++ b/web-next/src/types/auth.ts
@@ -0,0 +1,41 @@
+export type AdminStatus = "active" | "disabled";
+
+export interface Admin {
+  id: string;
+  username: string;
+  displayName: string;
+  status: AdminStatus;
+  mustChangePassword: boolean;
+  version: number;
+  createdAt: number;
+  lastLoginAt: number | null;
+  disabledAt: number | null;
+}
+
+export interface AuthStatus {
+  initialized: boolean;
+  timezone: string;
+}
+
+export interface AuthResponse {
+  admin: Admin;
+}
+
+export interface LoginCredentials {
+  username: string;
+  password: string;
+}
+
+export interface ChangePasswordInput {
+  currentPassword: string;
+  newPassword: string;
+}
+
+export interface ApiErrorBody {
+  error?: {
+    code?: string;
+    message?: string;
+    requestId?: string;
+    details?: unknown;
+  };
+}
diff --git a/web-next/src/utils/date.ts b/web-next/src/utils/date.ts
new file mode 100644
index 0000000..713378b
--- /dev/null
+++ b/web-next/src/utils/date.ts
@@ -0,0 +1,87 @@
+const DEFAULT_TIMEZONE = "Asia/Shanghai";
+let appTimezone = DEFAULT_TIMEZONE;
+
+export function getAppTimezone(): string {
+  return appTimezone;
+}
+
+export function setAppTimezone(timezone: string): void {
+  try {
+    new Intl.DateTimeFormat("en", { timeZone: timezone }).format();
+    appTimezone = timezone;
+  } catch {
+    appTimezone = DEFAULT_TIMEZONE;
+  }
+}
+
+export function formatDateTime(value: Date | number | string, timezone = appTimezone): string {
+  return new Intl.DateTimeFormat("zh-CN", {
+    dateStyle: "medium",
+    timeStyle: "short",
+    timeZone: timezone,
+  }).format(value instanceof Date || typeof value === "number" ? new Date(value) : new Date(value));
+}
+
+export const formatDate = formatDateTime;
+export const dateText = formatDateTime;
+
+export function toDateInputValue(value: Date | number | string, timezone = appTimezone): string {
+  const date = value instanceof Date || typeof value === "number" ? new Date(value) : new Date(value);
+  const parts = new Intl.DateTimeFormat("en-CA", {
+    timeZone: timezone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23",
+  }).formatToParts(date);
+  const values = Object.fromEntries(parts.map((part) => [part.type, part.value]));
+  return `${values.year}-${values.month}-${values.day}T${values.hour}:${values.minute}`;
+}
+
+export const formatDateTimeInput = toDateInputValue;
+
+export function fromDateInput(value: string, timezone = appTimezone): string {
+  const match = /^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})$/.exec(value.trim());
+  if (!match) throw new Error("请选择有效的支付日期和时间");
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const hour = Number(match[4]);
+  const minute = Number(match[5]);
+  const calendarProbe = new Date(0);
+  calendarProbe.setUTCFullYear(year, month - 1, day);
+  calendarProbe.setUTCHours(0, 0, 0, 0);
+  if (month < 1 || month > 12 || day < 1 || day > 31 || calendarProbe.getUTCFullYear() !== year || calendarProbe.getUTCMonth() !== month - 1 || calendarProbe.getUTCDate() !== day || hour < 0 || hour > 23 || minute < 0 || minute > 59) {
+    throw new Error("支付时间无效");
+  }
+
+  // Interpret the form value as a wall-clock time in the configured zone.
+  const wallUtc = Date.UTC(year, month - 1, day, hour, minute);
+  const observedParts = new Intl.DateTimeFormat("en-CA", {
+    timeZone: timezone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23",
+  }).formatToParts(new Date(wallUtc));
+  const observed = Object.fromEntries(observedParts.map((part) => [part.type, part.value]));
+  const observedUtc = Date.UTC(Number(observed.year), Number(observed.month) - 1, Number(observed.day), Number(observed.hour), Number(observed.minute));
+  return new Date(wallUtc + wallUtc - observedUtc).toISOString();
+}
+
+export const dateFromInput = fromDateInput;
+
+export function currentMonth(timezone = appTimezone): string {
+  const parts = Object.fromEntries(new Intl.DateTimeFormat("en-CA", {
+    timeZone: timezone,
+    year: "numeric",
+    month: "2-digit",
+  }).formatToParts(new Date()).map((part) => [part.type, part.value]));
+  return `${parts.year}-${parts.month}`;
+}
+
+export const monthNow = currentMonth;
diff --git a/web-next/src/utils/money.ts b/web-next/src/utils/money.ts
new file mode 100644
index 0000000..7d4bbe3
--- /dev/null
+++ b/web-next/src/utils/money.ts
@@ -0,0 +1,24 @@
+export function formatMoney(cents: number, currency = "CNY", locale = "zh-CN"): string {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(cents / 100);
+}
+
+export const money = formatMoney;
+
+export function centsToAmount(cents: number): string {
+  return (cents / 100).toFixed(2);
+}
+
+export function amountToCents(value: string): number {
+  const match = /^(\d+)(?:\.(\d{1,2}))?$/.exec(value.trim());
+  if (!match) throw new Error("INVALID_AMOUNT");
+  const cents = Number(match[1]) * 100 + Number((match[2] ?? "").padEnd(2, "0"));
+  if (!Number.isSafeInteger(cents) || cents <= 0) throw new Error("INVALID_AMOUNT");
+  return cents;
+}
+
+export const yuanToCents = amountToCents;