feat(savings): implement term deposits and savings management UI

- Add savings portfolio overview, active deposits list, and maturity progress
- Implement open and edit term deposit modal with bank presets, tenor chips, and live interest preview (TT 14/2017)
- Implement settlement modal with early withdrawal penalty breakdown (TT 04/2022)
- Integrate savings account wallets into NetWorthWidget, Wallets page, and home navigation
- Add bilingual i18n support (English/Vietnamese) and guest mode demo mock data
- Adhere 100% to Claymorphism design system tokens

.agents/memory.md

@@ -133,6 +133,26 @@ File này lưu trữ các quyết định thiết kế dài hạn và trạng th
       2. Bổ sung mock data phản hồi cho endpoint GET mới vào `src/lib/guest-mock.ts`.
       3. Đọc dữ liệu từ query cache luôn dùng optional chaining `?.` để tránh lỗi null/undefined crash.
 
+- **Quản lý Sổ Tiết kiệm & Tích lũy (Savings & Term Deposits - Phase 3.2)**:
+  - Tách độc lập thành Tab riêng trên Trang chủ (phía trên "Mục tiêu tiết kiệm") và trang quản lý chuyên biệt `/savings`.
+  - Toàn bộ trang `/savings` và các components tuân thủ 100% token Claymorphism từ `tailwind.config.js` (loại bỏ hoàn toàn các màu xanh lá đậm / gradient teal-emerald tùy tiện):
+    - Thẻ tổng quan danh mục (Executive Portfolio Banner) dùng `bg-clay-surface` bo góc `rounded-clay-lg` với viền `border-clay-highlight/40` và bóng đổ `shadow-clay-raised`, hài hòa với màu nền app `bg-clay-bg`.
+    - Số dư gốc và các thông số hiển thị bằng `text-clay-primary` (tím periwinkle) và các ô thẻ lún `bg-clay-bg/70 shadow-clay-pressed`.
+    - Các nút hành động chính (Mở sổ mới, Tất toán) sử dụng base `<Button variant="primary">` chuẩn Claymorphism (`bg-clay-primary`, `shadow-clay-raised`, `active:shadow-clay-pressed`).
+  - Chuẩn hóa modal "Mở Sổ Tiết Kiệm Mới" / "Chỉnh sửa Sổ Tiết Kiệm" (`SavingsFormModal.tsx`) theo chuẩn Claymorphism:
+    - Bố cục Modal chuẩn với `footer` prop cố định (sticky), kết nối `form={formId}` chống che nút trên mobile.
+    - Executive Artwork preview banner động hiển thị màu thương hiệu ngân hàng, kỳ hạn, lãi suất và tiền lãi dự kiến.
+    - Bộ chọn ngân hàng dạng dropdown (`Select`) đưa lựa chọn "Khác (Nhập tên ngân hàng...)" lên vị trí đầu tiên trên cùng, tiếp theo là danh sách các ngân hàng thương mại phổ biến (Vietcombank, Techcombank, MBBank, BIDV, VietinBank, ACB, VPBank, TPBank, HDBank, Sacombank, VIB, SHB, MSB, SeABank, OCB, LPBank). Khi chọn "Khác", form tự động mở rộng ô `<Input>` có giới hạn thực tế tối đa 50 ký tự (`maxLength={50}`).
+    - Giới hạn độ dài các trường nhập liệu được tinh chỉnh thực tế và an toàn: Tên ngân hàng (`bankName`) tối đa 50 ký tự, Tên sổ tiết kiệm (`name`) tối đa 50 ký tự, Số tài khoản / Mã sổ (`accountNumber`) tối đa 30 ký tự, Ghi chú (`notes`) tối đa 200 ký tự.
+    - Cơ chế validation đa ngôn ngữ sử dụng schema factory `createSavingsFormSchema(t)` theo đúng chuẩn dự án, kết hợp `trigger()` phản ứng khi `t` thay đổi giúp thông báo lỗi validation chuyển đổi ngôn ngữ Anh - Việt lập tức theo thời gian thực.
+    - Tự động sinh tên sổ tiết kiệm theo mẫu i18n chuẩn hóa (`savings.defaultDepositName`), ví dụ "Sổ Tiết Kiệm Vietcombank 6T" (VI) hoặc "Vietcombank 6M Term Deposit" (EN).
+    - Bộ chọn kỳ hạn nhanh (1T, 3T, 6T, 12T, 24T) và tùy biến số tháng/lãi suất thủ công.
+    - Khung ước tính tiền lãi động theo Thông tư 14/2017/TT-NHNN (cơ sở 365 ngày, số ngày thực tế, tổng thu nhập khi đáo hạn).
+    - Nhập số tiền gốc chuẩn hóa phân cách hàng nghìn (`formatMoneyInput`, `parseMoneyInput`) kèm tích hợp Máy tính tài chính (`CalculatorModal`).
+    - Chọn ngày gửi qua `LocalizedDateInput` (`DD/MM/YYYY`).
+    - Thẻ radio chọn phương thức tái tục / đáo hạn (`ROLLOVER_ALL`, `ROLLOVER_PRINCIPAL`, `SETTLE_TO_WALLET`) hiệu ứng đất sét nổi/chìm.
+    - Tùy chọn nguồn trích tiền mở sổ (Trích từ ví thanh toán khả dụng hoặc khai báo sổ có sẵn).
+
 ## Khi cập nhật file này
 
 - Ghi lại các quyết định lâu dài mới về UI/UX hoặc cấu trúc frontend.

src/components/layout.tsx

@@ -63,6 +63,7 @@ const DataManagementPage = React.lazy(() => import("@/pages/data-management/inde
 const AccountHandoverPage = React.lazy(() => import("@/pages/account-handover/index"));
 const DebtsPage = React.lazy(() => import("@/pages/debts/index"));
 const DebtDetailPage = React.lazy(() => import("@/pages/debts/detail"));
+const SavingsPage = React.lazy(() => import("@/pages/savings/index"));
 const NotFoundPage = React.lazy(() => import("@/pages/not-found/index"));
 
 import { PermissionGate } from "@/components/shared/PermissionGate";
@@ -191,6 +192,7 @@ export const Layout = () => {
                       <Route path="/transfers" element={<AuthGuard><PermissionGate permission={PERMISSIONS.TRANSFER_READ} fallback={<AccessDenied />}><TransfersPage /></PermissionGate></AuthGuard>}></Route>
                       <Route path="/budgets" element={<AuthGuard><PermissionGate permission={PERMISSIONS.BUDGET_READ} fallback={<AccessDenied />}><BudgetsPage /></PermissionGate></AuthGuard>}></Route>
                       <Route path="/budgets/:id" element={<AuthGuard><PermissionGate permission={PERMISSIONS.BUDGET_READ} fallback={<AccessDenied />}><BudgetDetailPage /></PermissionGate></AuthGuard>}></Route>
+                      <Route path="/savings" element={<AuthGuard><SavingsPage /></AuthGuard>}></Route>
                       <Route path="/saving-goals" element={<AuthGuard><PermissionGate permission={PERMISSIONS.SAVING_GOAL_READ} fallback={<AccessDenied />}><SavingGoalsPage /></PermissionGate></AuthGuard>}></Route>
                       <Route path="/saving-goals/:id" element={<AuthGuard><PermissionGate permission={PERMISSIONS.SAVING_GOAL_READ} fallback={<AccessDenied />}><SavingGoalDetailPage /></PermissionGate></AuthGuard>}></Route>
                       <Route path="/reports" element={<AuthGuard><PermissionGate permission={PERMISSIONS.REPORT_READ} fallback={<AccessDenied />}><ReportsPage /></PermissionGate></AuthGuard>}></Route>

src/components/shared/NetWorthWidget.tsx

@@ -14,7 +14,7 @@ export const NetWorthWidget: React.FC<NetWorthWidgetProps> = ({ clickable = true
   const navigate = useNavigate();
   const { t, formatCurrency } = useI18n();
 
-  // 1. Fetch Wallets balance
+  // 1. Fetch Wallets balance (separating Liquid from Term Deposits)
   const walletsQuery = useWallets({
     includeArchived: false,
     sortBy: "name",
@@ -22,12 +22,21 @@ export const NetWorthWidget: React.FC<NetWorthWidgetProps> = ({ clickable = true
     page: 1,
     limit: 100,
   });
-  const totalWallets = useMemo(() => {
+
+  const { liquidWalletsTotal, savingsTotal } = useMemo(() => {
     const wallets = walletsQuery.data?.data || [];
-    return wallets.reduce(
-      (sum, w) => sum + (w.isArchived ? 0 : Number(w.balance || 0)),
-      0,
-    );
+    let liquid = 0;
+    let savings = 0;
+    for (const w of wallets) {
+      if (w.isArchived) continue;
+      const bal = Number(w.balance || 0);
+      if (w.type === "SAVINGS_ACCOUNT") {
+        savings += bal;
+      } else {
+        liquid += bal;
+      }
+    }
+    return { liquidWalletsTotal: liquid, savingsTotal: savings };
   }, [walletsQuery.data?.data]);
 
   // 2. Fetch Debts Summary (Lending & Borrowing)
@@ -36,8 +45,8 @@ export const NetWorthWidget: React.FC<NetWorthWidgetProps> = ({ clickable = true
   const totalLending = summary.totalLending || 0;
   const totalBorrowing = summary.totalBorrowing || 0;
 
-  // Net Worth = Wallets + Lending - Borrowing
-  const netWorth = totalWallets + totalLending - totalBorrowing;
+  // Net Worth = Liquid Wallets + Savings Deposits + Lending - Borrowing
+  const netWorth = liquidWalletsTotal + savingsTotal + totalLending - totalBorrowing;
 
   const isLoading = walletsQuery.isLoading || debtsQuery.isLoading;
 
@@ -55,8 +64,9 @@ export const NetWorthWidget: React.FC<NetWorthWidgetProps> = ({ clickable = true
           <div className="h-8 w-44 rounded-full bg-clay-primary/25" />
           <div className="h-3 w-3/4 rounded-full bg-clay-primary/10" />
         </div>
-        <div className="grid grid-cols-3 gap-2 pt-1">
+        <div className="grid grid-cols-4 gap-2 pt-1">
           <div className="h-14 rounded-clay-sm bg-clay-bg/80" />
+          <div className="h-14 rounded-clay-sm bg-teal-500/10" />
           <div className="h-14 rounded-clay-sm bg-clay-income/10" />
           <div className="h-14 rounded-clay-sm bg-clay-expense/10" />
         </div>
@@ -110,15 +120,25 @@ export const NetWorthWidget: React.FC<NetWorthWidgetProps> = ({ clickable = true
         </p>
       </div>
 
-      {/* 3 Component Breakdown Cards */}
-      <div className="relative grid grid-cols-3 gap-2 pt-1">
-        {/* Wallets */}
+      {/* 4 Component Breakdown Cards */}
+      <div className="relative grid grid-cols-2 sm:grid-cols-4 gap-2 pt-1">
+        {/* Liquid Wallets */}
         <div className="rounded-clay-sm bg-clay-bg/85 p-2.5 border border-clay-highlight/40 flex flex-col justify-between">
           <span className="text-[10px] text-clay-text-muted font-bold truncate">
-            {t("debts.totalWallets")}
+            {t("debts.liquidWallets")}
           </span>
           <span className="font-nunito font-extrabold text-[12px] sm:text-xs text-clay-text mt-1 truncate">
-            {formatCurrency(totalWallets, "VND")}
+            {formatCurrency(liquidWalletsTotal, "VND")}
+          </span>
+        </div>
+
+        {/* Term Deposits */}
+        <div className="rounded-clay-sm bg-teal-500/10 p-2.5 border border-teal-500/25 flex flex-col justify-between">
+          <span className="text-[10px] text-teal-700 font-bold truncate">
+            {t("debts.savingsDeposits")}
+          </span>
+          <span className="font-nunito font-extrabold text-[12px] sm:text-xs text-teal-700 mt-1 truncate">
+            {formatCurrency(savingsTotal, "VND")}
           </span>
         </div>
 

src/components/ui/icons.tsx

@@ -648,6 +648,50 @@ export const InfoIcon: React.FC<IconProps> = ({ size = 18, ...props }) => (
   </svg>
 );
 
+// Bank Icon (Ngân hàng)
+export const BankIcon: React.FC<IconProps> = ({ size = 20, ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <line x1="3" y1="21" x2="21" y2="21" />
+    <line x1="3" y1="10" x2="21" y2="10" />
+    <polyline points="5 6 12 3 19 6" />
+    <line x1="4" y1="10" x2="4" y2="21" />
+    <line x1="20" y1="10" x2="20" y2="21" />
+    <line x1="8" y1="14" x2="8" y2="17" />
+    <line x1="12" y1="14" x2="12" y2="17" />
+    <line x1="16" y1="14" x2="16" y2="17" />
+  </svg>
+);
+
+// PiggyBank / Savings Icon
+export const PiggyBankIcon: React.FC<IconProps> = ({ size = 20, ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2h-1c-.2-.7-.5-1.4-1-2z" />
+    <path d="M16 9h.01" />
+    <path d="M2 10h4" />
+  </svg>
+);
+
+
 
 
 

src/hooks/use-savings.ts

+import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { savingsService } from "@/services/savings.service";
+import {
+  CreateTermDepositInput,
+  SettleTermDepositInput,
+  UpdateTermDepositInput,
+} from "@/types/savings";
+import { walletKeys } from "./use-wallets";
+
+export const savingsKeys = {
+  all: ["savings"] as const,
+  lists: () => [...savingsKeys.all, "list"] as const,
+  list: (params?: Record<string, unknown>) => [...savingsKeys.lists(), params] as const,
+  details: () => [...savingsKeys.all, "detail"] as const,
+  detail: (id: string) => [...savingsKeys.details(), id] as const,
+  preview: (input: unknown) => [...savingsKeys.all, "preview", input] as const,
+  earlyWithdrawal: (id: string, date?: string) => [...savingsKeys.all, "earlyWithdrawal", id, date] as const,
+};
+
+export function useSavings(params?: {
+  status?: string;
+  search?: string;
+  sortBy?: string;
+  order?: string;
+  page?: number;
+  limit?: number;
+}) {
+  return useQuery({
+    queryKey: savingsKeys.list(params),
+    queryFn: () => savingsService.getSavings(params),
+    placeholderData: keepPreviousData,
+    staleTime: 30_000,
+  });
+}
+
+export function useSavingDetail(id: string) {
+  return useQuery({
+    queryKey: savingsKeys.detail(id),
+    queryFn: () => savingsService.getSaving(id),
+    enabled: Boolean(id),
+    staleTime: 30_000,
+  });
+}
+
+export function useSavingsPreview(
+  input: {
+    principalAmount: string;
+    interestRate: string;
+    termMonths: number;
+    startDate?: string;
+  },
+  enabled = true,
+) {
+  return useQuery({
+    queryKey: savingsKeys.preview(input),
+    queryFn: () => savingsService.previewSaving(input),
+    enabled:
+      enabled &&
+      Number(input.principalAmount) > 0 &&
+      Number(input.interestRate) > 0 &&
+      input.termMonths > 0,
+    staleTime: 60_000,
+  });
+}
+
+export function useEarlyWithdrawalPreview(id: string, date?: string, enabled = true) {
+  return useQuery({
+    queryKey: savingsKeys.earlyWithdrawal(id, date),
+    queryFn: () => savingsService.previewEarlyWithdrawal(id, date),
+    enabled: enabled && Boolean(id),
+    staleTime: 30_000,
+  });
+}
+
+export function useCreateSaving() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (input: CreateTermDepositInput) => savingsService.createSaving(input),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: savingsKeys.all });
+      await queryClient.invalidateQueries({ queryKey: walletKeys.all });
+    },
+  });
+}
+
+export function useUpdateSaving(id: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (input: UpdateTermDepositInput) => savingsService.updateSaving(id, input),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: savingsKeys.all });
+      await queryClient.invalidateQueries({ queryKey: savingsKeys.detail(id) });
+      await queryClient.invalidateQueries({ queryKey: walletKeys.all });
+    },
+  });
+}
+
+export function useSettleSaving(id: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (input: SettleTermDepositInput) => savingsService.settleSaving(id, input),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: savingsKeys.all });
+      await queryClient.invalidateQueries({ queryKey: savingsKeys.detail(id) });
+      await queryClient.invalidateQueries({ queryKey: walletKeys.all });
+    },
+  });
+}

src/i18n/locales/en.json

@@ -27,7 +27,10 @@
     "viewDetails": "View details",
     "confirm": "Confirm",
     "create": "Create",
-    "pagination": "Pagination"
+    "pagination": "Pagination",
+    "notes": "Notes",
+    "loadFailed": "Failed to load data",
+    "connectionFailed": "Please check your network connection and try again."
   },
   "language": {
     "label": "Language",
@@ -151,7 +154,20 @@
     "contributionAmountInvalid": "Contribution must be greater than zero with at most 2 decimal places",
     "contributionDateRequired": "Please select the contribution time",
     "contributionDateFuture": "Contribution time cannot be in the future",
-    "contributionNoteMax": "Note cannot exceed 500 characters"
+    "contributionNoteMax": "Note cannot exceed 500 characters",
+    "savingsNameRequired": "Please enter deposit name",
+    "savingsNameMax": "Deposit name must be at most 50 characters",
+    "savingsBankRequired": "Please select or enter a bank",
+    "savingsBankMax": "Bank name must be at most 50 characters",
+    "savingsAmountRequired": "Please enter deposit amount",
+    "savingsAmountInvalid": "Deposit amount must be greater than 0",
+    "savingsRateRequired": "Please enter interest rate",
+    "savingsRateInvalid": "Interest rate must be between 0% and 100%/yr",
+    "savingsTermMin": "Minimum term is 1 month",
+    "savingsTermMax": "Maximum term is 120 months",
+    "savingsDateRequired": "Please select deposit date",
+    "savingsAccountMax": "Account/passbook number must be at most 30 characters",
+    "savingsNotesMax": "Notes must be at most 200 characters"
   },
   "auth": {
     "email": "Email",
@@ -280,6 +296,7 @@
     "transactions": "Transactions",
     "transfers": "Transfers",
     "budgets": "Budgets",
+    "savings": "Savings & Term Deposits",
     "savingGoals": "Saving Goals",
     "categories": "Categories",
     "reports": "Financial Reports",
@@ -2766,9 +2783,100 @@
       "editNotice": "Financial parameters (Principal, Interest Rate, Term, and Method) are fixed to preserve the integrity of the amortization schedule and wallet balances.",
       "editSuccess": "Debt information updated successfully!",
       "editFailed": "Failed to update debt information",
-      "saveChanges": "Save Changes",
-      "saving": "Saving...",
       "fixedFinancialTerms": "Immutable Financial Terms"
+    },
+    "liquidWallets": "Liquid Wallets",
+    "savingsDeposits": "Term Deposits"
+  },
+  "savings": {
+    "title": "Savings & Term Deposits",
+    "tabAll": "All",
+    "tabActive": "Active",
+    "tabDueSoon": "Due Soon",
+    "tabSettled": "Settled",
+    "tabWallets": "Liquid Wallets",
+    "tabSavings": "Term Deposits",
+    "summaryTitle": "Term Deposits & Savings Portfolio",
+    "totalPrincipal": "Total Principal Deposited",
+    "totalAccrued": "Accrued Interest Today",
+    "totalEstimated": "Estimated Interest at Maturity",
+    "activeCount": "{{count}} active deposits",
+    "dueSoonCount": "{{count}} due soon",
+    "createTitle": "Open New Term Deposit",
+    "editTitle": "Edit Term Deposit",
+    "settlementTitle": "Settle Term Deposit",
+    "earlyWithdrawalTitle": "Early Term Withdrawal",
+    "selectBank": "Deposit Bank",
+    "otherBank": "Bank Name",
+    "otherBankPlaceholder": "Enter bank name (e.g. Shinhan Bank, HSBC, Standard Chartered...)",
+    "bankPresetOther": "Other (Enter bank name...)",
+    "depositName": "Deposit Name",
+    "defaultDepositName": "{{bank}} {{term}}M Term Deposit",
+    "accountNumber": "Account / Passbook Number",
+    "principalAmount": "Principal Amount",
+    "termTenor": "Deposit Term",
+    "termMonths": "Term (Months)",
+    "interestRate": "Annual Interest Rate (%/yr)",
+    "startDate": "Deposit Date",
+    "selectRollover": "Maturity Rollover Action",
+    "rollover": {
+      "all": "Auto-renew Principal + Interest",
+      "allDesc": "Add interest into principal, renew for new term (compound interest)",
+      "principal": "Renew Principal, Payout Interest",
+      "principalDesc": "Transfer interest to spending wallet, renew principal for new term",
+      "settle": "Settle Full to Main Wallet",
+      "settleDesc": "Transfer both principal and interest to your primary wallet at maturity"
+    },
+    "fundingSource": "Funding Source",
+    "fundingTransfer": "Deduct from Liquid Wallet",
+    "fundingInitial": "Pre-existing Bank Passbook",
+    "targetWallet": "Payout Wallet (at maturity / interest)",
+    "selectWalletLater": "Select payout wallet later",
+    "selectReceivingWallet": "Select destination wallet for settlement",
+    "selectWalletRequired": "Please select a wallet to receive funds",
+    "settleTargetSameAsSavings": "Payout wallet cannot be the savings deposit itself",
+    "calculatorPreview": "Projected by SBV Standard (Circular 14/2017)",
+    "regulationNotice": "365-day statutory basis",
+    "actualDays": "Actual Days",
+    "days": "days",
+    "interestExpected": "Projected Interest",
+    "totalReturn": "Total at Maturity",
+    "maturityDateOn": "Maturity Date",
+    "earlyWarningTitle": "Early Withdrawal Notice (Circular 04/2022)",
+    "earlyWarningNotice": "According to State Bank of Vietnam regulations, early withdrawal forfeits the term interest rate and applies the non-term demand rate ({{rate}}%/yr) for the actual days held.",
+    "fullTermInterest": "Full Term Expected Interest",
+    "actualReceivedInterest": "Actual Interest at Non-term Rate",
+    "interestPenaltyLoss": "Interest Penalty / Opportunity Loss",
+    "totalPayableToYou": "Net Total Paid to Your Wallet",
+    "matureFullTitle": "Standard Maturity Settlement — 100% Principal & Interest",
+    "confirmEarlyWithdrawal": "Confirm Early Withdrawal",
+    "confirmSettlement": "Confirm Settlement",
+    "createSuccess": "Term deposit opened successfully!",
+    "updateSuccess": "Term deposit updated successfully!",
+    "settleSuccess": "Term deposit settled successfully!",
+    "dueInDays": "Matures in {{days}} days!",
+    "daysLeft": "days left",
+    "matured": "Matured",
+    "accruedToday": "Accrued Interest Today",
+    "maturityInterest": "Interest at Maturity",
+    "rolloverMethod": "Maturity Action",
+    "settleAction": "Settle / Withdraw",
+    "months": "months",
+    "year": "year",
+    "dueOn": "Maturity",
+    "empty": "No term deposits found",
+    "emptyHint": "Create a term deposit to track bank savings, interest earnings, and receive maturity reminders!",
+    "presetHint": "Quick presets for term & reference rates",
+    "notesPlaceholder": "Additional notes about this deposit...",
+    "earlyNotePlaceholder": "Reason for early withdrawal...",
+    "settleNotePlaceholder": "Settlement notes...",
+    "cycle": "Cycle #{{cycle}}",
+    "openNew": "Open Term Deposit",
+    "status": {
+      "active": "Active",
+      "matured": "Matured",
+      "settled": "Settled",
+      "earlyWithdrawn": "Early Withdrawn"
     }
   }
 }

src/i18n/locales/vi.json

@@ -27,7 +27,10 @@
     "viewDetails": "Xem chi tiết",
     "confirm": "Xác nhận",
     "create": "Tạo",
-    "pagination": "Phân trang"
+    "pagination": "Phân trang",
+    "notes": "Ghi chú",
+    "loadFailed": "Không thể tải dữ liệu",
+    "connectionFailed": "Vui lòng kiểm tra lại kết nối mạng."
   },
   "language": {
     "label": "Ngôn ngữ",
@@ -151,7 +154,20 @@
     "contributionAmountInvalid": "Số tiền đóng góp phải lớn hơn 0 và có tối đa 2 chữ số thập phân",
     "contributionDateRequired": "Vui lòng chọn thời gian đóng góp",
     "contributionDateFuture": "Thời gian đóng góp không được nằm trong tương lai",
-    "contributionNoteMax": "Ghi chú tối đa 500 ký tự"
+    "contributionNoteMax": "Ghi chú tối đa 500 ký tự",
+    "savingsNameRequired": "Vui lòng nhập tên sổ tiết kiệm",
+    "savingsNameMax": "Tên sổ tiết kiệm tối đa 50 ký tự",
+    "savingsBankRequired": "Vui lòng chọn hoặc nhập ngân hàng",
+    "savingsBankMax": "Tên ngân hàng tối đa 50 ký tự",
+    "savingsAmountRequired": "Vui lòng nhập số tiền gửi",
+    "savingsAmountInvalid": "Số tiền gửi phải lớn hơn 0",
+    "savingsRateRequired": "Vui lòng nhập lãi suất",
+    "savingsRateInvalid": "Lãi suất phải từ 0% đến 100%/năm",
+    "savingsTermMin": "Kỳ hạn tối thiểu 1 tháng",
+    "savingsTermMax": "Kỳ hạn tối đa 120 tháng",
+    "savingsDateRequired": "Vui lòng chọn ngày gửi",
+    "savingsAccountMax": "Số tài khoản / mã sổ tối đa 30 ký tự",
+    "savingsNotesMax": "Ghi chú tối đa 200 ký tự"
   },
   "auth": {
     "email": "Email",
@@ -280,6 +296,7 @@
     "transactions": "Giao dịch",
     "transfers": "Chuyển tiền",
     "budgets": "Ngân sách",
+    "savings": "Sổ Tiết Kiệm & Tích Lũy",
     "savingGoals": "Mục tiêu Tiết kiệm",
     "categories": "Danh mục Chi tiêu",
     "reports": "Báo cáo",
@@ -2870,6 +2887,99 @@
       "saveChanges": "Lưu Thay Đổi",
       "saving": "Đang lưu...",
       "fixedFinancialTerms": "Thông số tài chính cố định"
+    },
+    "liquidWallets": "Ví khả dụng",
+    "savingsDeposits": "Sổ tiết kiệm"
+  },
+  "savings": {
+    "title": "Sổ Tiết Kiệm & Tích Lũy",
+    "tabAll": "Tất cả",
+    "tabActive": "Đang gửi",
+    "tabDueSoon": "Sắp đến hạn",
+    "tabSettled": "Đã tất toán",
+    "tabWallets": "Ví chi tiêu",
+    "tabSavings": "Sổ tiết kiệm",
+    "summaryTitle": "Danh Mục Tiết Kiệm Có Kỳ Hạn",
+    "totalPrincipal": "Tổng tiền gửi gốc",
+    "totalAccrued": "Lãi tích lũy hôm nay",
+    "totalEstimated": "Lãi dự kiến khi đáo hạn",
+    "activeCount": "{{count}} sổ đang gửi",
+    "dueSoonCount": "{{count}} sổ sắp đáo hạn",
+    "createTitle": "Mở Sổ Tiết Kiệm Mới",
+    "editTitle": "Chỉnh Sửa Sổ Tiết Kiệm",
+    "settlementTitle": "Tất Toán Sổ Tiết Kiệm",
+    "earlyWithdrawalTitle": "Tất Toán Trước Hạn",
+    "selectBank": "Ngân hàng gửi tiết kiệm",
+    "otherBank": "Tên ngân hàng",
+    "otherBankPlaceholder": "Nhập tên ngân hàng (Ví dụ: Shinhan Bank, HSBC, VIB...)",
+    "bankPresetOther": "Khác (Nhập tên ngân hàng...)",
+    "depositName": "Tên sổ tiết kiệm",
+    "defaultDepositName": "Sổ Tiết Kiệm {{bank}} {{term}}T",
+    "accountNumber": "Số tài khoản / Mã sổ",
+    "principalAmount": "Số tiền gửi",
+    "termTenor": "Kỳ hạn gửi",
+    "termMonths": "Kỳ hạn (tháng)",
+    "interestRate": "Lãi suất (%/năm)",
+    "startDate": "Ngày gửi",
+    "selectRollover": "Phương thức xử lý khi đáo hạn",
+    "rollover": {
+      "all": "Tự động tái tục gốc + lãi",
+      "allDesc": "Nhập lãi vào gốc, bắt đầu kỳ hạn mới (lãi kép)",
+      "principal": "Tái tục gốc, nhận lãi",
+      "principalDesc": "Chuyển lãi về ví chi tiêu, tiếp tục kỳ hạn mới cho gốc",
+      "settle": "Tất toán về ví chính",
+      "settleDesc": "Chuyển toàn bộ gốc và lãi về ví thanh toán khi đến hạn"
+    },
+    "fundingSource": "Nguồn tiền mở sổ",
+    "fundingTransfer": "Trích từ Ví khả dụng",
+    "fundingInitial": "Khai báo sổ đã có sẵn",
+    "targetWallet": "Ví nhận tiền (khi đáo hạn / nhận lãi)",
+    "selectWalletLater": "Chọn ví nhận tiền sau",
+    "selectReceivingWallet": "Chọn ví nhận tiền tất toán",
+    "selectWalletRequired": "Vui lòng chọn ví nhận tiền tất toán",
+    "settleTargetSameAsSavings": "Ví nhận tiền tất toán không được là chính ví sổ tiết kiệm",
+    "calculatorPreview": "Ước tính theo chuẩn NHNN (Thông tư 14/2017)",
+    "regulationNotice": "Cơ sở năm 365 ngày",
+    "actualDays": "Số ngày thực tế",
+    "days": "ngày",
+    "interestExpected": "Lãi dự kiến",
+    "totalReturn": "Tổng tiền nhận về",
+    "maturityDateOn": "Ngày đáo hạn",
+    "earlyWarningTitle": "Cảnh báo rút trước hạn (Thông tư 04/2022)",
+    "earlyWarningNotice": "Theo quy định của Ngân hàng Nhà nước, khi tất toán trước hạn, toàn bộ số tiền sẽ chỉ được tính theo lãi suất tiền gửi không kỳ hạn ({{rate}}%/năm) cho số ngày thực gửi.",
+    "fullTermInterest": "Lãi kỳ hạn đúng hạn",
+    "actualReceivedInterest": "Lãi thực nhận (lãi suất không kỳ hạn)",
+    "interestPenaltyLoss": "Thiệt hại tiền lãi do rút sớm",
+    "totalPayableToYou": "Tổng tiền thực nhận về ví",
+    "matureFullTitle": "Tất toán đúng hạn — Nhận đủ 100% gốc và lãi kỳ hạn",
+    "confirmEarlyWithdrawal": "Xác nhận Rút trước hạn",
+    "confirmSettlement": "Xác nhận Tất toán",
+    "createSuccess": "Mở sổ tiết kiệm thành công!",
+    "updateSuccess": "Cập nhật sổ tiết kiệm thành công!",
+    "settleSuccess": "Tất toán sổ tiết kiệm thành công!",
+    "dueInDays": "Đáo hạn sau {{days}} ngày!",
+    "daysLeft": "ngày nữa",
+    "matured": "Đã đáo hạn",
+    "accruedToday": "Lãi tạm tính hôm nay",
+    "maturityInterest": "Lãi khi đáo hạn",
+    "rolloverMethod": "Phương thức đáo hạn",
+    "settleAction": "Tất toán / Rút sổ",
+    "months": "tháng",
+    "year": "năm",
+    "dueOn": "Đáo hạn",
+    "empty": "Chưa có sổ tiết kiệm nào",
+    "emptyHint": "Tạo sổ tiết kiệm để theo dõi tiền gửi ngân hàng, lãi suất và nhận cảnh báo trước ngày đáo hạn!",
+    "presetHint": "Chọn nhanh kỳ hạn & lãi suất tham chiếu",
+    "notesPlaceholder": "Ghi chú thêm về sổ tiết kiệm...",
+    "earlyNotePlaceholder": "Lý do rút trước hạn...",
+    "settleNotePlaceholder": "Ghi chú tất toán...",
+    "cycle": "Chu kỳ #{{cycle}}",
+    "openNew": "Mở Sổ Tiết Kiệm",
+    "status": {
+      "active": "Đang gửi",
+      "matured": "Đã đến hạn",
+      "settled": "Đã tất toán",
+      "earlyWithdrawn": "Rút trước hạn"
     }
   }
 }

src/lib/guest-mock.ts

@@ -1203,6 +1203,69 @@ const GUEST_AI_CHAT = {
   ],
 };
 
+const GUEST_SAVINGS = [
+  {
+    id: "savings-guest-1",
+    userId: "guest-user-session",
+    walletId: "wallet-guest-savings-1",
+    walletName: "Sổ Tiết Kiệm VCB 6T",
+    bankName: "Vietcombank",
+    accountNumber: "STK-987211",
+    principalAmount: "50000000",
+    interestRate: "4.8",
+    termMonths: 6,
+    startDate: `${currentYear}-01-15`,
+    maturityDate: `${currentYear}-07-15`,
+    estimatedInterest: "1200000",
+    rolloverMethod: "ROLLOVER_ALL",
+    targetWalletId: "wallet-guest-2",
+    status: "ACTIVE",
+    isDueSoon: false,
+    accrued: {
+      accruedInterest: "650000",
+      progressPercentage: 54,
+      elapsedDays: 98,
+      totalDays: 181,
+      remainingDays: 83,
+    },
+    rolloverCount: 0,
+    color: "#0F766E",
+    notes: "Tiết kiệm tích lũy định kỳ",
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  },
+  {
+    id: "savings-guest-2",
+    userId: "guest-user-session",
+    walletId: "wallet-guest-savings-2",
+    walletName: "Sổ Tiết Kiệm TCB 12T",
+    bankName: "Techcombank",
+    accountNumber: "STK-112345",
+    principalAmount: "100000000",
+    interestRate: "5.5",
+    termMonths: 12,
+    startDate: `${currentYear - 1}-10-20`,
+    maturityDate: `${currentYear}-10-20`,
+    estimatedInterest: "5500000",
+    rolloverMethod: "ROLLOVER_PRINCIPAL",
+    targetWalletId: "wallet-guest-2",
+    status: "ACTIVE",
+    isDueSoon: true,
+    accrued: {
+      accruedInterest: "5420000",
+      progressPercentage: 98,
+      elapsedDays: 360,
+      totalDays: 365,
+      remainingDays: 5,
+    },
+    rolloverCount: 1,
+    color: "#DC2626",
+    notes: "Sổ tiết kiệm dự phòng",
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  },
+];
+
 function makeMeta(total: number, page = 1, limit = 100) {
   return {
     total,
@@ -1468,6 +1531,20 @@ export function handleGuestRequest(config: InternalAxiosRequestConfig): AxiosRes
       responseData = { success: true, data: GUEST_AI_CHAT };
     } else if (url.includes("/zalo-bot/link-status")) {
       responseData = { success: true, data: { linked: false, zaloBotChatId: null } };
+    } else if (url.includes("/savings")) {
+      responseData = {
+        success: true,
+        data: GUEST_SAVINGS,
+        summary: {
+          totalPrincipal: "150000000",
+          totalEstimatedInterest: "6700000",
+          totalAccruedInterest: "6070000",
+          activeCount: 2,
+          dueSoonCount: 1,
+          settledCount: 0,
+        },
+        meta: makeMeta(GUEST_SAVINGS.length, 1, 50),
+      };
     } else if (url.includes("/auth/sessions")) {
       responseData = { success: true, data: [], items: [], meta: makeMeta(0, 1, 20) };
     } else {
@@ -1588,6 +1665,36 @@ export function handleGuestRequest(config: InternalAxiosRequestConfig): AxiosRes
           })),
         },
       };
+    } else if (url.includes("/savings/preview")) {
+      let body: Record<string, unknown> = {};
+      try {
+        body = typeof config.data === "string" ? JSON.parse(config.data || "{}") : (config.data || {});
+      } catch {
+        body = {};
+      }
+      const principal = Number(body.principalAmount) || 50000000;
+      const rate = Number(body.interestRate) || 4.8;
+      const term = Number(body.termMonths) || 6;
+      const estInterest = Math.round((principal * (rate / 100) * term * 30) / 365);
+      responseData = {
+        success: true,
+        data: {
+          principalAmount: String(principal),
+          interestRate: String(rate),
+          termMonths: term,
+          startDate: (body.startDate as string) || todayStr,
+          maturityDate: `${currentYear}-12-31`,
+          actualDays: term * 30,
+          estimatedInterest: String(estInterest),
+          totalAtMaturity: String(principal + estInterest),
+        },
+      };
+    } else if (url.includes("/savings")) {
+      responseData = {
+        success: true,
+        data: GUEST_SAVINGS[0],
+        message: "Thao tác sổ tiết kiệm thành công trong chế độ dùng thử",
+      };
     } else {
       responseData = {
         success: true,

src/pages/index.tsx

@@ -21,6 +21,7 @@ import { useBudgets } from "@/hooks/use-budgets";
 import { useRecurringTransactions } from "@/hooks/use-recurring-transactions";
 import { useDiscoveredSubscriptions } from "@/hooks/use-subscriptions";
 import { useUnreadNotificationCount } from "@/hooks/use-notifications";
+import { useSavings } from "@/hooks/use-savings";
 import { todayInBusinessTime, addCalendarDays } from "@/lib/business-time";
 import { GuestModeBanner } from "@/components/shared/GuestModeBanner";
 
@@ -100,6 +101,10 @@ function HomePage() {
   const unreadNotificationsQuery = useUnreadNotificationCount();
   const unreadCount = unreadNotificationsQuery.data?.data?.count || 0;
 
+  // Savings due soon alert count
+  const savingsQuery = useSavings({ page: 1, limit: 1 });
+  const savingsDueSoonCount = savingsQuery.data?.summary?.dueSoonCount || 0;
+
   return (
     <Page className="page flex flex-col justify-start overflow-y-auto">
       <Header title={t("home.header")} showBackIcon={false} />
@@ -266,6 +271,21 @@ function HomePage() {
                 )}
               </Button>
             </PermissionGate>
+            <Button
+              variant="secondary"
+              fullWidth
+              onClick={() => navigate("/savings")}
+              className="relative gap-2"
+            >
+              <span>{t("home.savings")}</span>
+              {savingsDueSoonCount > 0 && (
+                <span
+                  className="absolute right-4 top-1/2 -translate-y-1/2 flex min-h-5 min-w-5 items-center justify-center rounded-full px-1.5 font-nunito text-xs font-extrabold shadow-clay-raised bg-amber-500 text-white animate-pulse"
+                >
+                  {savingsDueSoonCount > 99 ? "99+" : savingsDueSoonCount}
+                </span>
+              )}
+            </Button>
             <PermissionGate permission={PERMISSIONS.SAVING_GOAL_READ}>
               <Button variant="secondary" fullWidth onClick={() => navigate("/saving-goals")}>
                 {t("home.savingGoals")}

src/pages/savings/components/SavingsCard.tsx

+import React from 'react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { BankIcon, PiggyBankIcon } from '@/components/ui/icons';
+import { useI18n } from '@/i18n';
+import { TermDeposit } from '@/types/savings';
+
+export interface SavingsCardProps {
+  deposit: TermDeposit;
+  onSettle: (deposit: TermDeposit) => void;
+  onEdit: (deposit: TermDeposit) => void;
+}
+
+export const SavingsCard: React.FC<SavingsCardProps> = ({ deposit, onSettle, onEdit }) => {
+  const { t, formatCurrency } = useI18n();
+
+  const isMaturedOrSettled = deposit.status === 'SETTLED' || deposit.status === 'EARLY_WITHDRAWN';
+  const isActive = deposit.status === 'ACTIVE';
+  const progressPercent = Math.min(100, Math.max(0, deposit.accrued?.progressPercentage || 0));
+
+  const getRolloverLabel = () => {
+    switch (deposit.rolloverMethod) {
+      case 'ROLLOVER_ALL':
+        return t('savings.rollover.all');
+      case 'ROLLOVER_PRINCIPAL':
+        return t('savings.rollover.principal');
+      case 'SETTLE_TO_WALLET':
+        return t('savings.rollover.settle');
+      default:
+        return deposit.rolloverMethod;
+    }
+  };
+
+  return (
+    <Card className="group relative overflow-hidden p-4 sm:p-5 flex flex-col gap-3.5 transition-all duration-200">
+      {/* Decorative background glow */}
+      <div
+        className="absolute -right-8 -top-8 h-28 w-28 rounded-full pointer-events-none opacity-20"
+        style={{ backgroundColor: deposit.color || '#10B981' }}
+      />
+
+      {/* Header: Bank & Status */}
+      <div className="relative flex items-center justify-between pb-2.5 border-b border-clay-text-muted/15">
+        <div className="flex items-center gap-2.5">
+          <div
+            className="w-10 h-10 rounded-full flex items-center justify-center text-white shadow-clay-pressed"
+            style={{ backgroundColor: deposit.color || '#10B981' }}
+          >
+            <BankIcon size={20} />
+          </div>
+          <div>
+            <h3 className="font-baloo font-bold text-sm text-clay-text leading-tight flex items-center gap-1.5">
+              <span>{deposit.walletName}</span>
+            </h3>
+            <div className="flex items-center gap-1.5 text-[11px] font-nunito text-clay-text-muted">
+              <span className="font-semibold text-clay-primary">{deposit.bankName}</span>
+              {deposit.accountNumber && (
+                <>
+                  <span>•</span>
+                  <span>{deposit.accountNumber}</span>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Due soon or status badge */}
+        <div className="flex flex-col items-end gap-1">
+          {deposit.isDueSoon && isActive ? (
+            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-extrabold bg-amber-500/15 text-amber-600 border border-amber-500/30 animate-pulse">
+              🔔 {t('savings.dueInDays', { days: deposit.accrued.remainingDays })}
+            </span>
+          ) : isActive ? (
+            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-clay-income/15 text-clay-income border border-clay-income/25">
+              {t('savings.status.active')}
+            </span>
+          ) : deposit.status === 'SETTLED' ? (
+            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-500/15 text-slate-500 border border-slate-500/25">
+              {t('savings.status.settled')}
+            </span>
+          ) : (
+            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/15 text-rose-500 border border-rose-500/25">
+              {t('savings.status.earlyWithdrawn')}
+            </span>
+          )}
+          {deposit.rolloverCount > 0 && (
+            <span className="text-[10px] text-clay-text-muted font-medium">
+              {t('savings.cycle', { cycle: deposit.rolloverCount + 1 })}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Main Principal Amount */}
+      <div className="relative flex flex-col gap-1">
+        <div className="flex items-baseline justify-between">
+          <span className="text-[11px] font-nunito font-semibold text-clay-text-muted">
+            {t('savings.principalAmount')}
+          </span>
+          <div className="flex items-center gap-2">
+            <span className="px-2 py-0.5 rounded-clay-sm text-[11px] font-bold bg-clay-bg border border-clay-highlight/30 text-clay-text">
+              {deposit.termMonths} {t('savings.months')}
+            </span>
+            <span className="px-2 py-0.5 rounded-clay-sm text-[11px] font-extrabold bg-clay-primary/10 text-clay-primary border border-clay-primary/20">
+              {deposit.interestRate}%/{t('savings.year')}
+            </span>
+          </div>
+        </div>
+        <div className="font-baloo font-extrabold text-2xl text-clay-text tracking-tight">
+          {formatCurrency(Number(deposit.principalAmount), 'VND')}
+        </div>
+      </div>
+
+      {/* Tenor Timeline & Progress Bar */}
+      <div className="relative flex flex-col gap-1.5 py-1">
+        <div className="flex justify-between items-center text-[10px] font-nunito text-clay-text-muted">
+          <span>{deposit.startDate}</span>
+          <span className="font-bold text-clay-text">
+            {isActive ? `${deposit.accrued.remainingDays} ${t('savings.daysLeft')}` : t('savings.matured')}
+          </span>
+          <span>{deposit.maturityDate}</span>
+        </div>
+        <div className="w-full h-2 rounded-full bg-clay-bg shadow-clay-pressed overflow-hidden p-0.5 border border-clay-highlight/20">
+          <div
+            className="h-full rounded-full transition-all duration-500 bg-clay-primary"
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Financial Breakdown: Accrued today vs Maturity interest */}
+      <div className="relative grid grid-cols-2 gap-2 pt-0.5">
+        <div className="rounded-clay-sm bg-clay-income/10 p-2.5 border border-clay-income/20 flex flex-col justify-between">
+          <div className="flex items-center gap-1 text-[10px] font-bold text-clay-income">
+            <PiggyBankIcon size={14} />
+            <span>{t('savings.accruedToday')}</span>
+          </div>
+          <span className="font-baloo font-extrabold text-sm sm:text-base text-clay-income mt-1 truncate">
+            +{formatCurrency(Number(deposit.accrued?.accruedInterest || 0), 'VND')}
+          </span>
+        </div>
+
+        <div className="rounded-clay-sm bg-clay-primary/10 p-2.5 border border-clay-primary/20 flex flex-col justify-between">
+          <span className="text-[10px] font-bold text-clay-primary">
+            {t('savings.maturityInterest')}
+          </span>
+          <span className="font-baloo font-extrabold text-sm sm:text-base text-clay-primary mt-1 truncate">
+            +{formatCurrency(Number(deposit.estimatedInterest), 'VND')}
+          </span>
+        </div>
+      </div>
+
+      {/* Rollover method & Target Wallet */}
+      <div className="relative flex items-center justify-between text-[11px] font-nunito bg-clay-bg/70 px-3 py-2 rounded-clay-sm border border-clay-highlight/30">
+        <span className="text-clay-text-muted">{t('savings.rolloverMethod')}:</span>
+        <span className="font-semibold text-clay-text text-right truncate max-w-[60%]">
+          {getRolloverLabel()}
+        </span>
+      </div>
+
+      {/* Action Buttons */}
+      {isActive && (
+        <div className="relative flex items-center gap-2 pt-1 border-t border-clay-text-muted/10">
+          <Button
+            variant="ghost"
+            onClick={() => onEdit(deposit)}
+            className="flex-1 text-xs px-3 py-1.5"
+          >
+            {t('common.edit')}
+          </Button>
+          <Button
+            variant="primary"
+            onClick={() => onSettle(deposit)}
+            className="flex-1 text-xs px-3 py-1.5 shadow-clay-raised"
+          >
+            {t('savings.settleAction')}
+          </Button>
+        </div>
+      )}
+    </Card>
+  );
+};

src/pages/savings/components/SavingsFormModal.tsx

+import React, { useEffect, useMemo, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useSnackbar } from 'zmp-ui';
+import { Modal } from '@/components/ui/Modal';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { Select } from '@/components/ui/Select';
+import { LocalizedDateInput } from '@/components/shared/LocalizedDateInput';
+import { CalculatorButton, CalculatorModal } from '@/components/ui/CalculatorModal';
+import { BankIcon, PiggyBankIcon } from '@/components/ui/icons';
+import { useCreateSaving, useSavingsPreview, useUpdateSaving } from '@/hooks/use-savings';
+import { useWallets } from '@/hooks/use-wallets';
+import { TranslationFunction, useI18n } from '@/i18n';
+import { formatMoneyInput, parseMoneyInput } from '@/lib/money-input';
+import { TermDeposit, TermDepositRolloverMethod } from '@/types/savings';
+
+export const BANK_PRESETS = [
+  { name: 'Khác', color: '#6B7280' },
+  { name: 'Vietcombank', color: '#0F766E' },
+  { name: 'Techcombank', color: '#DC2626' },
+  { name: 'MBBank', color: '#2563EB' },
+  { name: 'BIDV', color: '#047857' },
+  { name: 'VietinBank', color: '#0284C7' },
+  { name: 'ACB', color: '#1D4ED8' },
+  { name: 'VPBank', color: '#059669' },
+  { name: 'TPBank', color: '#9333EA' },
+  { name: 'HDBank', color: '#D97706' },
+  { name: 'Sacombank', color: '#0369A1' },
+  { name: 'VIB', color: '#EA580C' },
+  { name: 'SHB', color: '#C2410C' },
+  { name: 'MSB', color: '#B91C1C' },
+  { name: 'SeABank', color: '#BE123C' },
+  { name: 'OCB', color: '#047857' },
+  { name: 'LPBank', color: '#CA8A04' },
+];
+
+export const TENOR_PRESETS = [
+  { months: 1, rate: '3.2' },
+  { months: 3, rate: '3.5' },
+  { months: 6, rate: '4.8' },
+  { months: 12, rate: '5.5' },
+  { months: 24, rate: '5.8' },
+];
+
+const createSavingsFormSchema = (t: TranslationFunction) =>
+  z.object({
+    name: z
+      .string()
+      .trim()
+      .min(1, t('validation.savingsNameRequired'))
+      .max(50, t('validation.savingsNameMax')),
+    bankName: z
+      .string()
+      .trim()
+      .min(1, t('validation.savingsBankRequired'))
+      .max(50, t('validation.savingsBankMax')),
+    accountNumber: z.string().trim().max(30, t('validation.savingsAccountMax')).optional(),
+    principalAmount: z
+      .string()
+      .trim()
+      .min(1, t('validation.savingsAmountRequired'))
+      .refine(
+        (v) => Number(v) > 0,
+        t('validation.savingsAmountInvalid'),
+      ),
+    interestRate: z
+      .string()
+      .trim()
+      .min(1, t('validation.savingsRateRequired'))
+      .refine(
+        (v) => Number(v) > 0 && Number(v) <= 100,
+        t('validation.savingsRateInvalid'),
+      ),
+    termMonths: z
+      .number()
+      .int()
+      .min(1, t('validation.savingsTermMin'))
+      .max(120, t('validation.savingsTermMax')),
+    startDate: z
+      .string()
+      .min(1, t('validation.savingsDateRequired')),
+    rolloverMethod: z.enum(['ROLLOVER_ALL', 'ROLLOVER_PRINCIPAL', 'SETTLE_TO_WALLET']),
+    sourceWalletId: z.string().optional(),
+    targetWalletId: z.string().optional(),
+    notes: z.string().max(200, t('validation.savingsNotesMax')).optional(),
+    color: z.string().optional(),
+  }).refine(
+    (data) => {
+      if (
+        (data.rolloverMethod === 'ROLLOVER_PRINCIPAL' || data.rolloverMethod === 'SETTLE_TO_WALLET') &&
+        !data.targetWalletId
+      ) {
+        return false;
+      }
+      return true;
+    },
+    {
+      message: t('savings.selectWalletRequired') || 'Vui lòng chọn ví nhận tiền',
+      path: ['targetWalletId'],
+    },
+  );
+
+type SavingsFormValues = z.infer<ReturnType<typeof createSavingsFormSchema>>;
+
+export interface SavingsFormModalProps {
+  isOpen: boolean;
+  deposit?: TermDeposit;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export const SavingsFormModal: React.FC<SavingsFormModalProps> = ({
+  isOpen,
+  deposit,
+  onClose,
+  onSuccess,
+}) => {
+  const { intlLocale, t, formatCurrency } = useI18n();
+  const { openSnackbar } = useSnackbar();
+  const [isCalculatorOpen, setIsCalculatorOpen] = useState(false);
+  const [fundingMode, setFundingMode] = useState<'TRANSFER' | 'INITIAL'>(
+    deposit ? 'INITIAL' : 'TRANSFER',
+  );
+  const [selectedBankKey, setSelectedBankKey] = useState<string>('Vietcombank');
+  const [customBankName, setCustomBankName] = useState<string>('');
+
+  const formId = deposit ? `edit-savings-deposit-${deposit.id}` : 'create-savings-deposit';
+
+  const schema = useMemo(() => createSavingsFormSchema(t), [t]);
+
+  const formatDefaultDepositName = (bankName: string, months: number | string) => {
+    const bankLabel = bankName.trim() || t('savings.bankPresetOther') || 'Ngân hàng';
+    return (
+      t('savings.defaultDepositName', {
+        bank: bankLabel,
+        term: String(months),
+      }) || `Sổ Tiết Kiệm ${bankLabel} ${months}T`
+    );
+  };
+
+  // Lấy danh sách ví thanh toán khả dụng để trích tiền hoặc nhận tiền tất toán
+  const walletsQuery = useWallets({
+    includeArchived: false,
+    type: 'STANDARD',
+    sortBy: 'name',
+    order: 'asc',
+    page: 1,
+    limit: 50,
+  });
+
+  const liquidWallets = walletsQuery.data?.data || [];
+
+  const defaultStartDate = useMemo(() => {
+    const now = new Date();
+    return now.toISOString().slice(0, 10);
+  }, []);
+
+  const createMutation = useCreateSaving();
+  const updateMutation = useUpdateSaving(deposit?.id || '');
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    setValue,
+    watch,
+    reset,
+    trigger,
+    formState: { errors, isSubmitting },
+  } = useForm<SavingsFormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: '',
+      bankName: 'Vietcombank',
+      accountNumber: '',
+      principalAmount: '50000000',
+      interestRate: '4.8',
+      termMonths: 6,
+      startDate: defaultStartDate,
+      rolloverMethod: 'ROLLOVER_ALL',
+      sourceWalletId: '',
+      targetWalletId: '',
+      notes: '',
+      color: '#0F766E',
+    },
+  });
+
+  // Khi ngôn ngữ thay đổi (t thay đổi), nếu form đang có lỗi thì kích hoạt lại validation để dịch ngay lập tức
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      trigger();
+    }
+  }, [t, trigger]);
+
+  const watchedPrincipal = watch('principalAmount');
+  const watchedRate = watch('interestRate');
+  const watchedMonths = watch('termMonths');
+  const watchedStartDate = watch('startDate');
+  const watchedBank = watch('bankName');
+  const watchedRollover = watch('rolloverMethod');
+  const watchedColor = watch('color');
+
+  // Khởi tạo hoặc đặt lại giá trị form khi mở modal hoặc thay đổi deposit
+  useEffect(() => {
+    if (!isOpen) return;
+
+    if (deposit) {
+      const isPreset = BANK_PRESETS.some((b) => b.name === deposit.bankName);
+      if (isPreset) {
+        setSelectedBankKey(deposit.bankName);
+        setCustomBankName('');
+      } else {
+        setSelectedBankKey('Khác');
+        setCustomBankName(deposit.bankName || '');
+      }
+
+      reset({
+        name: deposit.walletName,
+        bankName: deposit.bankName,
+        accountNumber: deposit.accountNumber || '',
+        principalAmount: deposit.principalAmount,
+        interestRate: deposit.interestRate,
+        termMonths: deposit.termMonths,
+        startDate: deposit.startDate,
+        rolloverMethod: deposit.rolloverMethod,
+        targetWalletId: deposit.targetWalletId || '',
+        notes: deposit.notes || '',
+        color: deposit.color || '#0F766E',
+      });
+      setFundingMode('INITIAL');
+    } else {
+      setSelectedBankKey('Vietcombank');
+      setCustomBankName('');
+
+      const defaultWallet = liquidWallets[0]?.id || '';
+      reset({
+        name: formatDefaultDepositName('Vietcombank', 6),
+        bankName: 'Vietcombank',
+        accountNumber: '',
+        principalAmount: '50000000',
+        interestRate: '4.8',
+        termMonths: 6,
+        startDate: defaultStartDate,
+        rolloverMethod: 'ROLLOVER_ALL',
+        sourceWalletId: defaultWallet,
+        targetWalletId: defaultWallet,
+        notes: '',
+        color: '#0F766E',
+      });
+      setFundingMode('TRANSFER');
+    }
+  }, [deposit, isOpen, defaultStartDate, reset]);
+
+  // Hook tính toán preview trực tiếp theo Thông tư 14/2017/TT-NHNN
+  const previewQuery = useSavingsPreview(
+    {
+      principalAmount: watchedPrincipal || '0',
+      interestRate: watchedRate || '0',
+      termMonths: Number(watchedMonths) || 1,
+      startDate: watchedStartDate || defaultStartDate,
+    },
+    isOpen,
+  );
+
+  const preview = previewQuery.data;
+
+  const handleBankDropdownChange = (selectedKey: string) => {
+    setSelectedBankKey(selectedKey);
+    if (selectedKey === 'Khác') {
+      const currentCustom = customBankName.trim();
+      setValue('bankName', currentCustom, { shouldValidate: true, shouldDirty: true });
+      setValue('color', '#6B7280', { shouldValidate: true, shouldDirty: true });
+      if (!deposit) {
+        const displayLabel = currentCustom || t('savings.bankPresetOther') || 'Khác';
+        setValue('name', formatDefaultDepositName(displayLabel, watchedMonths), {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
+      }
+    } else {
+      const preset = BANK_PRESETS.find((b) => b.name === selectedKey);
+      setValue('bankName', selectedKey, { shouldValidate: true, shouldDirty: true });
+      setValue('color', preset?.color || '#0F766E', {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+      if (!deposit) {
+        setValue('name', formatDefaultDepositName(selectedKey, watchedMonths), {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
+      }
+    }
+  };
+
+  const handleCustomBankChange = (val: string) => {
+    setCustomBankName(val);
+    setValue('bankName', val, { shouldValidate: true, shouldDirty: true });
+    if (!deposit) {
+      const displayLabel = val.trim() || t('savings.bankPresetOther') || 'Khác';
+      setValue('name', formatDefaultDepositName(displayLabel, watchedMonths), {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+    }
+  };
+
+  const handleTenorSelect = (tenor: { months: number; rate: string }) => {
+    setValue('termMonths', tenor.months, { shouldValidate: true, shouldDirty: true });
+    setValue('interestRate', tenor.rate, { shouldValidate: true, shouldDirty: true });
+    if (!deposit) {
+      const bankLabel = watchedBank.trim() || 'Vietcombank';
+      setValue('name', formatDefaultDepositName(bankLabel, tenor.months), {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+    }
+  };
+
+  const onSubmit = async (values: SavingsFormValues) => {
+    try {
+      if (deposit) {
+        await updateMutation.mutateAsync({
+          name: values.name,
+          bankName: values.bankName,
+          accountNumber: values.accountNumber || null,
+          interestRate: values.interestRate,
+          rolloverMethod: values.rolloverMethod as TermDepositRolloverMethod,
+          targetWalletId: values.targetWalletId || null,
+          notes: values.notes || null,
+          color: values.color,
+        });
+        openSnackbar({ text: t('savings.updateSuccess'), type: 'success' });
+      } else {
+        await createMutation.mutateAsync({
+          name: values.name,
+          bankName: values.bankName,
+          accountNumber: values.accountNumber || undefined,
+          principalAmount: values.principalAmount,
+          interestRate: values.interestRate,
+          termMonths: values.termMonths,
+          startDate: values.startDate,
+          rolloverMethod: values.rolloverMethod as TermDepositRolloverMethod,
+          targetWalletId: values.targetWalletId || undefined,
+          sourceWalletId: fundingMode === 'TRANSFER' ? values.sourceWalletId || undefined : undefined,
+          notes: values.notes || undefined,
+          color: values.color,
+        });
+        openSnackbar({ text: t('savings.createSuccess'), type: 'success' });
+      }
+      onSuccess?.();
+      onClose();
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : t('common.error');
+      openSnackbar({ text: msg, type: 'error' });
+    }
+  };
+
+  return (
+    <>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        title={deposit ? t('savings.editTitle') : t('savings.createTitle')}
+        footer={(
+          <>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={onClose}
+              disabled={isSubmitting}
+              className="px-4 text-sm"
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button
+              type="submit"
+              form={formId}
+              disabled={isSubmitting}
+              className="px-5 text-sm"
+            >
+              {isSubmitting
+                ? t('common.saving')
+                : deposit
+                ? t('common.save')
+                : t('savings.openNew')}
+            </Button>
+          </>
+        )}
+      >
+        <form
+          id={formId}
+          onSubmit={handleSubmit(onSubmit)}
+          noValidate
+          className="flex flex-col gap-4 pt-1"
+        >
+          {/* Executive Artwork Preview Banner (Claymorphism) */}
+          <div className="flex items-center gap-3 rounded-clay bg-clay-bg p-3.5 shadow-clay-pressed border border-clay-highlight/30">
+            <div
+              className="w-12 h-12 rounded-full flex items-center justify-center text-white shadow-clay-raised shrink-0 transition-all duration-200"
+              style={{ backgroundColor: watchedColor || '#0F766E' }}
+            >
+              <BankIcon size={24} />
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="font-baloo font-bold text-sm text-clay-text leading-tight truncate">
+                {watch('name') || t('savings.depositName')}
+              </p>
+              <div className="flex items-center gap-1.5 text-xs text-clay-text-muted mt-0.5">
+                <span className="font-semibold text-clay-primary">{watchedBank}</span>
+                <span>•</span>
+                <span>
+                  {watchedMonths} {t('savings.months')}
+                </span>
+                <span>•</span>
+                <span className="font-extrabold text-clay-income">
+                  {watchedRate}%/{t('savings.year')}
+                </span>
+              </div>
+            </div>
+            {preview && (
+              <div className="text-right shrink-0">
+                <span className="block text-[10px] text-clay-text-muted">
+                  {t('savings.interestExpected')}
+                </span>
+                <span className="font-baloo font-extrabold text-xs text-clay-income truncate block">
+                  +{formatCurrency(Number(preview.estimatedInterest), 'VND')}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Bank Selection Dropdown & Custom Bank Name Input */}
+          <div className="flex flex-col gap-2.5">
+            <Select
+              label={t('savings.selectBank')}
+              options={BANK_PRESETS.map((bank) => ({
+                value: bank.name,
+                label:
+                  bank.name === 'Khác'
+                    ? t('savings.bankPresetOther') || 'Khác (Nhập tên ngân hàng...)'
+                    : bank.name,
+              }))}
+              value={selectedBankKey}
+              onChange={(e) => handleBankDropdownChange(e.target.value)}
+              disabled={isSubmitting}
+              error={selectedBankKey !== 'Khác' ? errors.bankName?.message : undefined}
+            />
+
+            {selectedBankKey === 'Khác' && (
+              <Input
+                label={t('savings.otherBank')}
+                placeholder={t('savings.otherBankPlaceholder')}
+                value={customBankName}
+                maxLength={50}
+                onChange={(e) => handleCustomBankChange(e.target.value)}
+                error={errors.bankName?.message}
+                disabled={isSubmitting}
+                autoFocus
+              />
+            )}
+          </div>
+
+          {/* Deposit Name & Account Number */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <Input
+              label={t('savings.depositName')}
+              placeholder={t('savings.depositName')}
+              maxLength={50}
+              error={errors.name?.message}
+              disabled={isSubmitting}
+              {...register('name')}
+            />
+            <Input
+              label={t('savings.accountNumber')}
+              placeholder="STK-XXXXX (tùy chọn)"
+              maxLength={30}
+              error={errors.accountNumber?.message}
+              disabled={isSubmitting}
+              {...register('accountNumber')}
+            />
+          </div>
+
+          {/* Principal Amount with Money Input Formatter & Calculator */}
+          <div>
+            <div className="flex items-end gap-2">
+              <div className="flex-1 min-w-0">
+                <Controller
+                  name="principalAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      label={`${t('savings.principalAmount')} (VND)`}
+                      inputMode="numeric"
+                      placeholder="50,000,000"
+                      className="tabular-nums font-baloo font-bold text-base"
+                      error={errors.principalAmount?.message}
+                      disabled={isSubmitting || Boolean(deposit)}
+                      value={formatMoneyInput(field.value, intlLocale, 'VND')}
+                      onChange={(event) =>
+                        field.onChange(parseMoneyInput(event.target.value, intlLocale, 'VND'))
+                      }
+                    />
+                  )}
+                />
+              </div>
+              {!deposit && (
+                <div className="flex flex-col items-center justify-end pb-0.5">
+                  <CalculatorButton
+                    id="btn-savings-calculator"
+                    onClick={() => setIsCalculatorOpen(true)}
+                    disabled={isSubmitting}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Tenor Quick Presets & Manual Inputs */}
+          <div>
+            <div className="flex justify-between items-center mb-1.5 px-1">
+              <label className="font-nunito text-xs font-bold text-clay-text uppercase tracking-wider">
+                {t('savings.termTenor')}
+              </label>
+              <span className="text-[11px] text-clay-primary font-medium">
+                {t('savings.presetHint')}
+              </span>
+            </div>
+            <div className="grid grid-cols-5 gap-1.5 mb-2.5">
+              {TENOR_PRESETS.map((p) => {
+                const isSelected = Number(watchedMonths) === p.months;
+                return (
+                  <button
+                    type="button"
+                    key={p.months}
+                    onClick={() => handleTenorSelect(p)}
+                    className={`py-2 px-1 rounded-clay-sm text-center flex flex-col items-center justify-center transition-all duration-200 ease-in-out ${
+                      isSelected
+                        ? 'bg-clay-primary text-clay-on-primary shadow-clay-pressed font-bold border border-clay-primary-dark/30 scale-95'
+                        : 'bg-clay-surface text-clay-text shadow-clay-raised border border-clay-highlight/40 hover:bg-clay-bg'
+                    }`}
+                  >
+                    <span className="text-xs font-baloo font-bold">{p.months}T</span>
+                    <span className="text-[10px] opacity-85 font-nunito">{p.rate}%</span>
+                  </button>
+                );
+              })}
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <Input
+                type="number"
+                label={t('savings.termMonths')}
+                error={errors.termMonths?.message}
+                disabled={isSubmitting || Boolean(deposit)}
+                {...register('termMonths', { valueAsNumber: true })}
+              />
+              <Input
+                type="number"
+                step="0.01"
+                label={t('savings.interestRate')}
+                error={errors.interestRate?.message}
+                disabled={isSubmitting}
+                {...register('interestRate')}
+              />
+            </div>
+          </div>
+
+          {/* Start Date via LocalizedDateInput */}
+          <Controller
+            name="startDate"
+            control={control}
+            render={({ field }) => (
+              <LocalizedDateInput
+                label={t('savings.startDate')}
+                error={errors.startDate?.message}
+                disabled={isSubmitting || Boolean(deposit)}
+                value={field.value}
+                onChange={field.onChange}
+              />
+            )}
+          />
+
+          {/* Live Interest Calculator Box (Circular 14/2017/TT-NHNN) */}
+          {preview && (
+            <div className="rounded-clay bg-clay-surface p-3.5 border border-clay-highlight/40 shadow-clay-raised flex flex-col gap-2.5">
+              <div className="flex items-center justify-between pb-2 border-b border-clay-text-muted/15">
+                <span className="text-xs font-baloo font-bold text-clay-primary uppercase tracking-wide flex items-center gap-1.5">
+                  <PiggyBankIcon size={16} />
+                  {t('savings.calculatorPreview')}
+                </span>
+                <span className="text-[10px] text-clay-text-muted font-nunito">
+                  {t('savings.regulationNotice')}
+                </span>
+              </div>
+              <div className="grid grid-cols-3 gap-2 text-center pt-0.5">
+                <div className="flex flex-col p-2 rounded-clay-sm bg-clay-bg/70 shadow-clay-pressed">
+                  <span className="text-[10px] text-clay-text-muted">{t('savings.actualDays')}</span>
+                  <span className="font-baloo font-bold text-xs text-clay-text mt-0.5">
+                    {preview.actualDays} {t('savings.days')}
+                  </span>
+                </div>
+                <div className="flex flex-col p-2 rounded-clay-sm bg-clay-bg/70 shadow-clay-pressed">
+                  <span className="text-[10px] text-clay-income font-semibold">
+                    {t('savings.interestExpected')}
+                  </span>
+                  <span className="font-baloo font-extrabold text-xs text-clay-income truncate mt-0.5">
+                    +{formatCurrency(Number(preview.estimatedInterest), 'VND')}
+                  </span>
+                </div>
+                <div className="flex flex-col p-2 rounded-clay-sm bg-clay-bg/70 shadow-clay-pressed">
+                  <span className="text-[10px] text-clay-primary font-semibold">
+                    {t('savings.totalReturn')}
+                  </span>
+                  <span className="font-baloo font-extrabold text-xs text-clay-primary truncate mt-0.5">
+                    {formatCurrency(Number(preview.totalAtMaturity), 'VND')}
+                  </span>
+                </div>
+              </div>
+              <div className="text-[11px] font-nunito text-clay-text-muted text-center pt-0.5 flex items-center justify-center gap-1">
+                <span>{t('savings.maturityDateOn')}:</span>
+                <span className="font-bold text-clay-text">{preview.maturityDate}</span>
+              </div>
+            </div>
+          )}
+
+          {/* Rollover Method Selector (Claymorphism Radio Cards) */}
+          <fieldset className="flex flex-col gap-1.5">
+            <legend className="px-1 font-nunito text-xs font-bold text-clay-text uppercase tracking-wider">
+              {t('savings.selectRollover')}
+            </legend>
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
+              {[
+                {
+                  id: 'ROLLOVER_ALL',
+                  label: t('savings.rollover.all'),
+                  desc: t('savings.rollover.allDesc'),
+                },
+                {
+                  id: 'ROLLOVER_PRINCIPAL',
+                  label: t('savings.rollover.principal'),
+                  desc: t('savings.rollover.principalDesc'),
+                },
+                {
+                  id: 'SETTLE_TO_WALLET',
+                  label: t('savings.rollover.settle'),
+                  desc: t('savings.rollover.settleDesc'),
+                },
+              ].map((method) => {
+                const isSelected = watchedRollover === method.id;
+                return (
+                  <button
+                    type="button"
+                    key={method.id}
+                    onClick={() =>
+                      setValue('rolloverMethod', method.id as TermDepositRolloverMethod, {
+                        shouldValidate: true,
+                        shouldDirty: true,
+                      })
+                    }
+                    className={`p-3 rounded-clay-sm text-left flex flex-col justify-between transition-all duration-200 ease-in-out ${
+                      isSelected
+                        ? 'bg-clay-primary/15 border-2 border-clay-primary shadow-clay-pressed'
+                        : 'bg-clay-surface border border-clay-highlight/40 shadow-clay-raised hover:bg-clay-bg active:shadow-clay-pressed'
+                    }`}
+                  >
+                    <span
+                      className={`text-xs font-baloo font-bold ${
+                        isSelected ? 'text-clay-primary' : 'text-clay-text'
+                      }`}
+                    >
+                      {method.label}
+                    </span>
+                    <span className="text-[10px] font-nunito text-clay-text-muted mt-1 leading-snug">
+                      {method.desc}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </fieldset>
+
+          {/* Funding Source Selector (Only on create new) */}
+          {!deposit && (
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center justify-between px-1">
+                <label className="font-nunito text-xs font-bold text-clay-text uppercase tracking-wider">
+                  {t('savings.fundingSource')}
+                </label>
+                <div className="flex items-center gap-1 p-0.5 rounded-full bg-clay-bg shadow-clay-pressed border border-clay-highlight/30">
+                  <button
+                    type="button"
+                    onClick={() => setFundingMode('TRANSFER')}
+                    className={`py-1 px-3 rounded-full text-xs font-baloo font-bold transition-all ${
+                      fundingMode === 'TRANSFER'
+                        ? 'bg-clay-primary text-clay-on-primary shadow-clay-raised'
+                        : 'text-clay-text-muted hover:text-clay-text'
+                    }`}
+                  >
+                    {t('savings.fundingTransfer')}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setFundingMode('INITIAL')}
+                    className={`py-1 px-3 rounded-full text-xs font-baloo font-bold transition-all ${
+                      fundingMode === 'INITIAL'
+                        ? 'bg-clay-primary text-clay-on-primary shadow-clay-raised'
+                        : 'text-clay-text-muted hover:text-clay-text'
+                    }`}
+                  >
+                    {t('savings.fundingInitial')}
+                  </button>
+                </div>
+              </div>
+
+              {fundingMode === 'TRANSFER' && (
+                <Controller
+                  name="sourceWalletId"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      label={t('savings.fundingSource')}
+                      options={liquidWallets.map((w) => ({
+                        value: w.id,
+                        label: `${w.name} (${formatCurrency(Number(w.balance), 'VND')})`,
+                      }))}
+                      value={field.value}
+                      onChange={field.onChange}
+                      error={errors.sourceWalletId?.message}
+                      disabled={isSubmitting}
+                    />
+                  )}
+                />
+              )}
+            </div>
+          )}
+
+          {/* Target Settlement Wallet */}
+          <Controller
+            name="targetWalletId"
+            control={control}
+            render={({ field }) => (
+              <Select
+                label={t('savings.targetWallet')}
+                options={[
+                  { value: '', label: t('savings.selectWalletLater') },
+                  ...liquidWallets.map((w) => ({
+                    value: w.id,
+                    label: `${w.name} (${formatCurrency(Number(w.balance), 'VND')})`,
+                  })),
+                ]}
+                value={field.value || ''}
+                onChange={field.onChange}
+                disabled={isSubmitting}
+              />
+            )}
+          />
+
+          {/* Notes */}
+          <Input
+            label={t('common.notes')}
+            placeholder={t('savings.notesPlaceholder')}
+            maxLength={200}
+            error={errors.notes?.message}
+            disabled={isSubmitting}
+            {...register('notes')}
+          />
+        </form>
+      </Modal>
+
+      {/* Built-in Calculator Modal */}
+      <CalculatorModal
+        isOpen={isCalculatorOpen}
+        initialAmount={watchedPrincipal || '0'}
+        defaultCurrency="VND"
+        onClose={() => setIsCalculatorOpen(false)}
+        onApply={(calcValue) => {
+          setValue('principalAmount', calcValue, { shouldValidate: true, shouldDirty: true });
+          setIsCalculatorOpen(false);
+        }}
+      />
+    </>
+  );
+};

src/pages/savings/components/SavingsSettlementModal.tsx

+import React, { useState } from 'react';
+import { useSnackbar } from 'zmp-ui';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+import { Select } from '@/components/ui/Select';
+import { Input } from '@/components/ui/Input';
+import { BankIcon, PiggyBankIcon } from '@/components/ui/icons';
+import { useEarlyWithdrawalPreview, useSettleSaving } from '@/hooks/use-savings';
+import { useWallets } from '@/hooks/use-wallets';
+import { useI18n } from '@/i18n';
+import { TermDeposit } from '@/types/savings';
+
+export interface SavingsSettlementModalProps {
+  isOpen: boolean;
+  deposit: TermDeposit | null;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export const SavingsSettlementModal: React.FC<SavingsSettlementModalProps> = ({
+  isOpen,
+  deposit,
+  onClose,
+  onSuccess,
+}) => {
+  const { t, formatCurrency } = useI18n();
+  const { openSnackbar } = useSnackbar();
+
+  const [selectedWalletId, setSelectedWalletId] = useState<string>('');
+  const [settlementNote, setSettlementNote] = useState<string>('');
+
+  const walletsQuery = useWallets({
+    includeArchived: false,
+    type: 'STANDARD',
+    sortBy: 'name',
+    order: 'asc',
+    page: 1,
+    limit: 50,
+  });
+
+  const liquidWallets = walletsQuery.data?.data || [];
+  const validReceivingWallets = liquidWallets.filter((w) => w.id !== deposit?.walletId);
+  const defaultWalletId =
+    deposit?.targetWalletId && deposit.targetWalletId !== deposit.walletId
+      ? deposit.targetWalletId
+      : validReceivingWallets[0]?.id || '';
+  const effectiveWalletId = selectedWalletId || defaultWalletId;
+
+  const todayStr = new Date().toISOString().slice(0, 10);
+  const isEarly = deposit ? todayStr < deposit.maturityDate : false;
+
+  const earlyPreviewQuery = useEarlyWithdrawalPreview(
+    deposit?.id || '',
+    todayStr,
+    isOpen && isEarly,
+  );
+
+  const settleMutation = useSettleSaving(deposit?.id || '');
+
+  if (!deposit) return null;
+
+  const handleConfirm = async () => {
+    if (!effectiveWalletId) {
+      openSnackbar({ text: t('savings.selectWalletRequired'), type: 'error' });
+      return;
+    }
+
+    if (effectiveWalletId === deposit.walletId) {
+      openSnackbar({
+        text: t('savings.settleTargetSameAsSavings') || 'Ví nhận tiền không được trùng với sổ tiết kiệm',
+        type: 'error',
+      });
+      return;
+    }
+
+    try {
+      await settleMutation.mutateAsync({
+        targetWalletId: effectiveWalletId,
+        isEarlyWithdrawal: isEarly,
+        notes: settlementNote || (isEarly ? 'Tất toán trước hạn' : 'Tất toán đúng hạn'),
+      });
+
+      openSnackbar({ text: t('savings.settleSuccess'), type: 'success' });
+      onSuccess?.();
+      onClose();
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : t('common.error');
+      openSnackbar({ text: msg, type: 'error' });
+    }
+  };
+
+  const earlyCalc = earlyPreviewQuery.data;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={isEarly ? t('savings.earlyWithdrawalTitle') : t('savings.settlementTitle')}
+    >
+      <div className="space-y-4 pt-1">
+        {/* Deposit Summary Header */}
+        <div className="rounded-clay-sm bg-clay-bg/80 p-3 border border-clay-highlight/30 flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            <div
+              className="w-9 h-9 rounded-full flex items-center justify-center text-white shadow-clay-pressed"
+              style={{ backgroundColor: deposit.color || '#10B981' }}
+            >
+              <BankIcon size={18} />
+            </div>
+            <div>
+              <div className="font-bold text-xs text-clay-text">{deposit.walletName}</div>
+              <div className="text-[11px] text-clay-text-muted">
+                {deposit.bankName} • {deposit.termMonths}T ({deposit.interestRate}%)
+              </div>
+            </div>
+          </div>
+          <div className="text-right">
+            <div className="font-baloo font-extrabold text-sm text-clay-text">
+              {formatCurrency(Number(deposit.principalAmount), 'VND')}
+            </div>
+            <div className="text-[10px] text-clay-text-muted">
+              {t('savings.dueOn')}: {deposit.maturityDate}
+            </div>
+          </div>
+        </div>
+
+        {/* Early Withdrawal Penalty Warning (Circular 04/2022/TT-NHNN) */}
+        {isEarly ? (
+          <div className="rounded-clay-md bg-rose-500/10 p-3.5 border border-rose-500/30 flex flex-col gap-2">
+            <div className="flex items-center gap-1.5 text-xs font-bold text-rose-600">
+              <span>⚠️ {t('savings.earlyWarningTitle')}</span>
+            </div>
+            <p className="text-[11px] font-nunito text-clay-text leading-snug">
+              {t('savings.earlyWarningNotice', { rate: deposit.nonTermRate || '0.2' })}
+            </p>
+
+            {/* Comparison Delta */}
+            <div className="rounded-clay-sm bg-clay-surface p-2.5 border border-rose-500/20 flex flex-col gap-1.5 text-xs font-nunito">
+              <div className="flex justify-between items-center text-clay-text-muted">
+                <span>{t('savings.fullTermInterest')}:</span>
+                <span className="font-semibold text-clay-text">
+                  +{formatCurrency(Number(deposit.estimatedInterest), 'VND')}
+                </span>
+              </div>
+              <div className="flex justify-between items-center text-rose-600">
+                <span>{t('savings.actualReceivedInterest')}:</span>
+                <span className="font-bold">
+                  +{formatCurrency(Number(earlyCalc?.actualInterestReceived || 0), 'VND')}
+                </span>
+              </div>
+              <div className="flex justify-between items-center text-rose-500 pt-1 border-t border-rose-500/15 font-bold">
+                <span>{t('savings.interestPenaltyLoss')}:</span>
+                <span>-{formatCurrency(Number(earlyCalc?.interestLost || 0), 'VND')}</span>
+              </div>
+            </div>
+
+            {/* Total Return Amount */}
+            <div className="flex justify-between items-center pt-1 font-baloo">
+              <span className="text-xs font-bold text-clay-text">{t('savings.totalPayableToYou')}:</span>
+              <span className="text-lg font-extrabold text-clay-primary">
+                {formatCurrency(Number(earlyCalc?.totalReceived || deposit.principalAmount), 'VND')}
+              </span>
+            </div>
+          </div>
+        ) : (
+          /* Normal Maturity Settlement */
+          <div className="rounded-clay-md bg-clay-surface p-3.5 border border-clay-highlight/40 shadow-clay-pressed flex flex-col gap-2">
+            <div className="flex items-center gap-1.5 text-xs font-bold text-clay-primary">
+              <PiggyBankIcon size={16} />
+              <span>{t('savings.matureFullTitle')}</span>
+            </div>
+            <div className="rounded-clay-sm bg-clay-bg/70 p-2.5 border border-clay-highlight/20 flex flex-col gap-1.5 text-xs font-nunito">
+              <div className="flex justify-between items-center text-clay-text-muted">
+                <span>{t('savings.principalAmount')}:</span>
+                <span className="font-semibold text-clay-text">
+                  {formatCurrency(Number(deposit.principalAmount), 'VND')}
+                </span>
+              </div>
+              <div className="flex justify-between items-center text-clay-income font-bold">
+                <span>{t('savings.maturityInterest')}:</span>
+                <span>+{formatCurrency(Number(deposit.estimatedInterest), 'VND')}</span>
+              </div>
+              <div className="flex justify-between items-center pt-1 border-t border-clay-text-muted/15 font-baloo">
+                <span className="text-xs font-bold text-clay-text">{t('savings.totalReturn')}:</span>
+                <span className="text-lg font-extrabold text-clay-primary">
+                  {formatCurrency(
+                    Number(deposit.principalAmount) + Number(deposit.estimatedInterest),
+                    'VND',
+                  )}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Target Destination Wallet */}
+        <div>
+          <label className="block text-xs font-bold text-clay-text mb-1">
+            {t('savings.selectReceivingWallet')}
+          </label>
+          <Select
+            options={validReceivingWallets.map((w) => ({
+              value: w.id,
+              label: `${w.name} (${formatCurrency(Number(w.balance), 'VND')})`,
+            }))}
+            value={effectiveWalletId}
+            onChange={(e) => setSelectedWalletId(e.target.value)}
+          />
+        </div>
+
+        {/* Optional Notes */}
+        <Input
+          label={t('common.notes')}
+          placeholder={isEarly ? t('savings.earlyNotePlaceholder') : t('savings.settleNotePlaceholder')}
+          value={settlementNote}
+          onChange={(e) => setSettlementNote(e.target.value)}
+        />
+
+        {/* Action Buttons */}
+        <div className="flex gap-2.5 pt-2">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={onClose}
+            className="flex-1"
+          >
+            {t('common.cancel')}
+          </Button>
+          <Button
+            type="button"
+            variant={isEarly ? 'danger' : 'primary'}
+            disabled={settleMutation.isPending}
+            onClick={handleConfirm}
+            className="flex-1 font-bold"
+          >
+            {isEarly ? t('savings.confirmEarlyWithdrawal') : t('savings.confirmSettlement')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};

src/pages/savings/components/SavingsSkeleton.tsx

+import React from 'react';
+
+export const SavingsSkeleton: React.FC = () => (
+  <div className="animate-pulse rounded-clay-lg border border-clay-highlight/40 bg-clay-surface p-4 sm:p-5 shadow-clay-raised flex flex-col gap-3.5">
+    {/* Header */}
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex items-center gap-2.5 flex-1">
+        <div className="h-10 w-10 rounded-full bg-clay-primary/15 shrink-0" />
+        <div className="space-y-1.5 flex-1">
+          <div className="h-4 w-3/5 rounded-full bg-clay-primary/20" />
+          <div className="h-3 w-2/5 rounded-full bg-clay-primary/10" />
+        </div>
+      </div>
+      <div className="h-6 w-20 rounded-full bg-clay-primary/15" />
+    </div>
+
+    {/* Financial Amount Box */}
+    <div className="rounded-clay-sm bg-clay-bg/70 p-3 border border-clay-highlight/30 grid grid-cols-2 gap-2">
+      <div className="space-y-1">
+        <div className="h-2.5 w-16 rounded-full bg-clay-primary/10" />
+        <div className="h-5 w-28 rounded-full bg-clay-primary/20" />
+      </div>
+      <div className="space-y-1">
+        <div className="h-2.5 w-16 rounded-full bg-clay-primary/10" />
+        <div className="h-4 w-20 rounded-full bg-clay-primary/15" />
+      </div>
+    </div>
+
+    {/* Progress Bar Skeleton */}
+    <div className="space-y-1.5">
+      <div className="flex justify-between">
+        <div className="h-3 w-24 rounded-full bg-clay-primary/10" />
+        <div className="h-3 w-10 rounded-full bg-clay-primary/15" />
+      </div>
+      <div className="h-2.5 w-full rounded-full bg-clay-primary/15" />
+    </div>
+
+    {/* Footer info */}
+    <div className="pt-2 border-t border-clay-text-muted/10 flex justify-between">
+      <div className="h-3 w-28 rounded-full bg-clay-primary/10" />
+      <div className="h-3 w-20 rounded-full bg-clay-primary/15" />
+    </div>
+  </div>
+);

src/pages/savings/index.tsx

+import React, { useMemo, useState } from 'react';
+import { Header, Page, useNavigate } from 'zmp-ui';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { TabItem, Tabs } from '@/components/ui/Tabs';
+import { BankIcon, IconGradients, PlusIcon } from '@/components/ui/icons';
+import { useSavings } from '@/hooks/use-savings';
+import { useI18n } from '@/i18n';
+import { TermDeposit } from '@/types/savings';
+import { SavingsCard } from './components/SavingsCard';
+import { SavingsFormModal } from './components/SavingsFormModal';
+import { SavingsSettlementModal } from './components/SavingsSettlementModal';
+import { SavingsSkeleton } from './components/SavingsSkeleton';
+
+type SavingsTabKey = 'all' | 'ACTIVE' | 'DUE_SOON' | 'SETTLED';
+
+const SavingsPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { t, formatCurrency } = useI18n();
+
+  // Active filter tab
+  const [activeTab, setActiveTab] = useState<SavingsTabKey>('all');
+
+  // Modals state
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [editingDeposit, setEditingDeposit] = useState<TermDeposit | null>(null);
+  const [settlingDeposit, setSettlingDeposit] = useState<TermDeposit | null>(null);
+
+  // TanStack Query
+  const savingsQuery = useSavings({
+    page: 1,
+    limit: 100,
+  });
+
+  const termDeposits = savingsQuery.data?.data || [];
+  const summary = savingsQuery.data?.summary;
+
+  // Filtered deposits based on selected tab
+  const filteredDeposits = useMemo(() => {
+    switch (activeTab) {
+      case 'ACTIVE':
+        return termDeposits.filter((d) => d.status === 'ACTIVE');
+      case 'DUE_SOON':
+        return termDeposits.filter((d) => d.status === 'ACTIVE' && d.isDueSoon);
+      case 'SETTLED':
+        return termDeposits.filter(
+          (d) => d.status === 'SETTLED' || d.status === 'EARLY_WITHDRAWN',
+        );
+      case 'all':
+      default:
+        return termDeposits;
+    }
+  }, [termDeposits, activeTab]);
+
+  // Tab definitions
+  const tabs = useMemo<TabItem[]>(
+    () => [
+      { key: 'all', label: t('savings.tabAll') || 'Tất cả' },
+      { key: 'ACTIVE', label: t('savings.tabActive') || 'Đang gửi' },
+      {
+        key: 'DUE_SOON',
+        label:
+          summary?.dueSoonCount && summary.dueSoonCount > 0
+            ? `${t('savings.tabDueSoon') || 'Sắp đến hạn'} (${summary.dueSoonCount})`
+            : t('savings.tabDueSoon') || 'Sắp đến hạn',
+      },
+      { key: 'SETTLED', label: t('savings.tabSettled') || 'Đã tất toán' },
+    ],
+    [t, summary?.dueSoonCount],
+  );
+
+  return (
+    <Page className="page flex flex-col justify-start overflow-y-auto">
+      <Header
+        title={t('savings.title') || 'Sổ Tiết Kiệm & Tích Lũy'}
+        showBackIcon={true}
+        onBackClick={() => navigate('/')}
+      />
+      <IconGradients />
+
+      <main className="mx-auto mt-2 flex w-full max-w-lg flex-col gap-4 pb-12">
+        {/* Executive Portfolio Banner */}
+        <Card className="relative overflow-hidden p-5 shadow-clay-raised border border-clay-highlight/40">
+          <div className="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-clay-primary/10 blur-xl pointer-events-none" />
+          <div className="absolute -bottom-8 right-12 h-24 w-24 rounded-full bg-clay-primary-soft/10 blur-lg pointer-events-none" />
+
+          <div className="relative flex flex-col gap-3">
+            <div className="flex items-center justify-between pb-2 border-b border-clay-text-muted/15">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-full bg-clay-primary/15 text-clay-primary flex items-center justify-center shadow-clay-pressed">
+                  <BankIcon size={18} />
+                </div>
+                <span className="font-baloo font-bold text-xs uppercase tracking-wider text-clay-text-muted">
+                  {t('savings.summaryTitle')}
+                </span>
+              </div>
+              {summary && summary.dueSoonCount > 0 && (
+                <span className="px-2.5 py-0.5 rounded-full text-[10px] font-extrabold bg-clay-warning/20 text-clay-warning border border-clay-warning/40 shadow-clay-pressed animate-pulse">
+                  🔔 {t('savings.dueSoonCount', { count: summary.dueSoonCount })}
+                </span>
+              )}
+            </div>
+
+            <div>
+              <p className="text-[11px] font-nunito text-clay-text-muted font-medium">
+                {t('savings.totalPrincipal')}
+              </p>
+              <p className="font-baloo font-extrabold text-2xl sm:text-3xl text-clay-primary tracking-tight mt-0.5">
+                {formatCurrency(Number(summary?.totalPrincipal || 0), 'VND')}
+              </p>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2 pt-1">
+              <div className="flex flex-col p-2.5 rounded-clay-sm bg-clay-bg/70 shadow-clay-pressed border border-clay-highlight/20">
+                <span className="text-[10px] text-clay-text-muted font-medium">{t('savings.totalAccrued')}</span>
+                <span className="font-baloo font-bold text-sm text-clay-income truncate mt-0.5">
+                  +{formatCurrency(Number(summary?.totalAccruedInterest || 0), 'VND')}
+                </span>
+              </div>
+              <div className="flex flex-col p-2.5 rounded-clay-sm bg-clay-bg/70 shadow-clay-pressed border border-clay-highlight/20">
+                <span className="text-[10px] text-clay-text-muted font-medium">{t('savings.totalEstimated')}</span>
+                <span className="font-baloo font-bold text-sm text-clay-primary truncate mt-0.5">
+                  +{formatCurrency(Number(summary?.totalEstimatedInterest || 0), 'VND')}
+                </span>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Action Header & Tabs */}
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-0.5">
+          <div>
+            <h1 className="clay-title-h2">{t('savings.title') || 'Sổ Tiết Kiệm & Tích Lũy'}</h1>
+            <p className="clay-caption">
+              {t('savings.activeCount', { count: summary?.activeCount || 0 })}
+            </p>
+          </div>
+          <Button
+            variant="primary"
+            shape="pill"
+            className="gap-2 px-4 text-sm font-bold self-start sm:self-auto shadow-clay-raised"
+            onClick={() => {
+              setEditingDeposit(null);
+              setIsCreateOpen(true);
+            }}
+          >
+            <PlusIcon size={18} /> {t('savings.openNew')}
+          </Button>
+        </div>
+
+        {/* Segmented Filter Tabs */}
+        <Tabs
+          tabs={tabs}
+          activeTab={activeTab}
+          onChange={(tabId) => setActiveTab(tabId as SavingsTabKey)}
+        />
+
+        {/* Loading State with Clay Skeletons */}
+        {savingsQuery.isLoading && (
+          <div className="flex flex-col gap-4" aria-label={t('common.loading') || 'Đang tải...'}>
+            {Array.from({ length: 3 }, (_, index) => (
+              <SavingsSkeleton key={index} />
+            ))}
+          </div>
+        )}
+
+        {/* Error State */}
+        {savingsQuery.isError && (
+          <Card className="flex flex-col items-center gap-3 py-8 text-center">
+            <div className="flex h-14 w-14 items-center justify-center rounded-clay bg-clay-expense/15 text-clay-expense shadow-clay-pressed font-bold text-xl">
+              !
+            </div>
+            <div>
+              <h2 className="clay-title-h3">{t('common.loadFailed') || 'Không thể tải dữ liệu'}</h2>
+              <p className="clay-caption mt-1">
+                {savingsQuery.error instanceof Error
+                  ? savingsQuery.error.message
+                  : t('common.connectionFailed') || 'Vui lòng kiểm tra lại kết nối mạng.'}
+              </p>
+            </div>
+            <Button
+              variant="secondary"
+              className="text-sm"
+              onClick={() => savingsQuery.refetch()}
+            >
+              {t('common.retry') || 'Thử lại'}
+            </Button>
+          </Card>
+        )}
+
+        {/* Empty State */}
+        {!savingsQuery.isLoading && !savingsQuery.isError && filteredDeposits.length === 0 && (
+          <Card className="flex flex-col items-center gap-3 py-9 text-center">
+            <div className="rounded-clay-lg bg-clay-primary/15 p-4 text-clay-primary shadow-clay-pressed">
+              <BankIcon size={42} />
+            </div>
+            <div>
+              <h3 className="clay-title-h3">{t('savings.empty')}</h3>
+              <p className="clay-caption mt-1 max-w-xs">{t('savings.emptyHint')}</p>
+            </div>
+            <Button
+              variant="primary"
+              shape="pill"
+              className="gap-2 text-sm shadow-clay-raised"
+              onClick={() => {
+                setEditingDeposit(null);
+                setIsCreateOpen(true);
+              }}
+            >
+              <PlusIcon size={18} /> {t('savings.openNew')}
+            </Button>
+          </Card>
+        )}
+
+        {/* Term Deposits List */}
+        {!savingsQuery.isLoading && !savingsQuery.isError && filteredDeposits.length > 0 && (
+          <div className="flex flex-col gap-4">
+            {filteredDeposits.map((dep) => (
+              <SavingsCard
+                key={dep.id}
+                deposit={dep}
+                onEdit={(d) => {
+                  setEditingDeposit(d);
+                  setIsCreateOpen(true);
+                }}
+                onSettle={(d) => setSettlingDeposit(d)}
+              />
+            ))}
+          </div>
+        )}
+      </main>
+
+      {/* Modal Mở / Chỉnh sửa sổ tiết kiệm */}
+      <SavingsFormModal
+        isOpen={isCreateOpen}
+        deposit={editingDeposit || undefined}
+        onClose={() => {
+          setIsCreateOpen(false);
+          setEditingDeposit(null);
+        }}
+        onSuccess={() => {
+          savingsQuery.refetch();
+        }}
+      />
+
+      {/* Modal Tất toán / Rút sổ tiết kiệm */}
+      <SavingsSettlementModal
+        isOpen={Boolean(settlingDeposit)}
+        deposit={settlingDeposit}
+        onClose={() => setSettlingDeposit(null)}
+        onSuccess={() => {
+          savingsQuery.refetch();
+        }}
+      />
+    </Page>
+  );
+};
+
+export default SavingsPage;

src/pages/wallets/index.tsx

@@ -21,13 +21,16 @@ const WalletsPage: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { openSnackbar } = useSnackbar();
-  const [search, setSearch] = useState("");
   const { intlLocale, t } = useI18n();
+
+  // Liquid Wallets State
+  const [search, setSearch] = useState("");
   const deferredSearch = useDeferredValue(search.trim().toLocaleLowerCase(intlLocale));
   const [includeArchived, setIncludeArchived] = useState(false);
   const [sort, setSort] = useState("createdAt:desc");
   const [page, setPage] = useState(1);
   const [isCreateOpen, setIsCreateOpen] = useState(false);
+
   const sortOptions = useMemo(() => [
     { value: "createdAt:desc", label: t("wallet.sort.createdDesc") },
     { value: "updatedAt:desc", label: t("wallet.sort.updatedDesc") },
@@ -40,6 +43,7 @@ const WalletsPage: React.FC = () => {
   const [sortBy, order] = sort.split(":") as [WalletSortField, SortOrder];
   const query = useMemo<WalletQuery>(() => ({
     includeArchived,
+    type: "STANDARD",
     sortBy,
     order,
     page,
@@ -48,6 +52,7 @@ const WalletsPage: React.FC = () => {
 
   const summaryQuery = useMemo<WalletQuery>(() => ({
     includeArchived: false,
+    type: "STANDARD",
     sortBy: "createdAt",
     order: "desc",
     page: 1,
@@ -56,7 +61,7 @@ const WalletsPage: React.FC = () => {
 
   const paginatedWalletsQuery = useWallets(query);
   const searchedWalletsQuery = useWalletSearch(
-    { includeArchived, sortBy, order },
+    { includeArchived, sortBy, order, type: "STANDARD" },
     Boolean(deferredSearch),
   );
   const walletsQuery = deferredSearch ? searchedWalletsQuery : paginatedWalletsQuery;
@@ -117,10 +122,15 @@ const WalletsPage: React.FC = () => {
 
   return (
     <Page className="page">
-      <Header title={t("wallet.header")} showBackIcon onBackClick={() => isFromReports(location.state) ? navigate(-1) : navigate("/")} />
+      <Header
+        title={t("wallet.header")}
+        showBackIcon
+        onBackClick={() => isFromReports(location.state) ? navigate(-1) : navigate("/")}
+      />
       <IconGradients />
 
-      <main className="mx-auto mt-4 flex w-full max-w-lg flex-col gap-5 pb-12">
+      <main className="mx-auto mt-3 flex w-full max-w-lg flex-col gap-4 pb-12">
+        {/* Executive Summary Card */}
         <Card className="relative overflow-hidden !bg-clay-primary-dark p-5 !text-clay-on-primary">
           <div className="absolute -right-6 -top-7 h-28 w-28 rounded-full bg-clay-on-primary/10" />
           <div className="absolute -bottom-9 right-16 h-24 w-24 rounded-full bg-clay-primary-dark/25" />
@@ -146,6 +156,7 @@ const WalletsPage: React.FC = () => {
           </div>
         </Card>
 
+        {/* Action Header */}
         <div className="flex items-center justify-between gap-3">
           <div>
             <h1 className="clay-title-h2">{t("wallet.list")}</h1>
@@ -156,6 +167,7 @@ const WalletsPage: React.FC = () => {
           </Button>
         </div>
 
+        {/* Search & Sort Filters */}
         <Card className="flex flex-col gap-3 p-4">
           <div className="relative">
             <span className="pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-clay-text-muted">
@@ -178,12 +190,14 @@ const WalletsPage: React.FC = () => {
           </div>
         </Card>
 
+        {/* Loading State */}
         {walletsQuery.isLoading && (
           <div className="flex flex-col gap-4" aria-label={t("wallet.loadingList")}>
             {Array.from({ length: 3 }, (_, index) => <WalletSkeleton key={index} />)}
           </div>
         )}
 
+        {/* Error State */}
         {walletsQuery.isError && (
           <Card className="flex flex-col items-center gap-3 py-8 text-center">
             <div className="flex h-14 w-14 items-center justify-center rounded-clay bg-clay-expense/15 text-clay-expense shadow-clay-pressed">!</div>
@@ -195,6 +209,7 @@ const WalletsPage: React.FC = () => {
           </Card>
         )}
 
+        {/* Empty State */}
         {!walletsQuery.isLoading && !walletsQuery.isError && visibleWallets.length === 0 && (
           <Card className="flex flex-col items-center gap-3 py-9 text-center">
             <div className="rounded-clay-lg bg-clay-info/15 p-4 shadow-clay-pressed"><WalletIcon size={42} /></div>
@@ -206,6 +221,7 @@ const WalletsPage: React.FC = () => {
           </Card>
         )}
 
+        {/* Wallets List */}
         {!walletsQuery.isLoading && !walletsQuery.isError && visibleWallets.length > 0 && (
           <div className={`flex flex-col gap-4 transition-opacity duration-200 ease-in-out ${walletsQuery.isFetching ? "opacity-65" : "opacity-100"}`}>
             {visibleWallets.map((wallet) => (
@@ -220,6 +236,7 @@ const WalletsPage: React.FC = () => {
           </div>
         )}
 
+        {/* Pagination */}
         {totalPages > 1 && (
           <nav className="flex items-center justify-between gap-3" aria-label={t("wallet.paginationLabel")}>
             <Button variant="secondary" className="px-4 text-sm" disabled={page <= 1 || walletsQuery.isFetching} onClick={() => setPage((current) => current - 1)}>{t("common.previous")}</Button>
@@ -229,6 +246,7 @@ const WalletsPage: React.FC = () => {
         )}
       </main>
 
+      {/* Modal tạo / sửa ví thường */}
       <WalletFormModal
         isOpen={isCreateOpen}
         isSubmitting={createMutation.isPending}

src/services/savings.service.ts

+import { apiClient } from '@/lib/api-client';
+import {
+  CreateTermDepositInput,
+  EarlyWithdrawalCalculation,
+  SavingsCalculationPreview,
+  SettleTermDepositInput,
+  TermDeposit,
+  TermDepositListResponse,
+  UpdateTermDepositInput,
+} from '@/types/savings';
+
+export const savingsService = {
+  /**
+   * Lấy danh sách sổ tiết kiệm kèm thống kê tổng
+   */
+  async getSavings(params?: {
+    status?: string;
+    search?: string;
+    sortBy?: string;
+    order?: string;
+    page?: number;
+    limit?: number;
+  }): Promise<TermDepositListResponse> {
+    const response = await apiClient.get<TermDepositListResponse>('/savings', {
+      params,
+    });
+    return response.data;
+  },
+
+  /**
+   * Xem chi tiết một sổ tiết kiệm
+   */
+  async getSaving(id: string): Promise<TermDeposit> {
+    const response = await apiClient.get<TermDeposit>(`/savings/${id}`);
+    return response.data;
+  },
+
+  /**
+   * Mở sổ tiết kiệm mới
+   */
+  async createSaving(input: CreateTermDepositInput): Promise<TermDeposit> {
+    const response = await apiClient.post<TermDeposit>('/savings', input);
+    return response.data;
+  },
+
+  /**
+   * Cập nhật thông số sổ tiết kiệm
+   */
+  async updateSaving(id: string, input: UpdateTermDepositInput): Promise<TermDeposit> {
+    const response = await apiClient.put<TermDeposit>(`/savings/${id}`, input);
+    return response.data;
+  },
+
+  /**
+   * Tất toán hoặc rút trước hạn
+   */
+  async settleSaving(id: string, input: SettleTermDepositInput): Promise<TermDeposit> {
+    const response = await apiClient.post<TermDeposit>(`/savings/${id}/settle`, input);
+    return response.data;
+  },
+
+  /**
+   * Tính toán live trước khi mở sổ (không lưu database)
+   */
+  async previewSaving(input: {
+    principalAmount: string;
+    interestRate: string;
+    termMonths: number;
+    startDate?: string;
+  }): Promise<SavingsCalculationPreview> {
+    const response = await apiClient.post<SavingsCalculationPreview>('/savings/preview', input);
+    return response.data;
+  },
+
+  /**
+   * Ước tính trước hậu quả rút trước hạn (lãi mất, lãi KKH nhận được)
+   */
+  async previewEarlyWithdrawal(id: string, date?: string): Promise<EarlyWithdrawalCalculation> {
+    const response = await apiClient.get<EarlyWithdrawalCalculation>(
+      `/savings/${id}/preview-early-withdrawal`,
+      { params: { date } },
+    );
+    return response.data;
+  },
+};

src/types/savings.ts

+export type TermDepositStatus = 'ACTIVE' | 'MATURED' | 'SETTLED' | 'EARLY_WITHDRAWN';
+
+export type TermDepositRolloverMethod =
+  | 'ROLLOVER_ALL'
+  | 'ROLLOVER_PRINCIPAL'
+  | 'SETTLE_TO_WALLET';
+
+export interface AccruedInterestCalculation {
+  elapsedDays: number;
+  totalDays: number;
+  progressPercentage: number;
+  accruedInterest: string;
+  remainingDays: number;
+}
+
+export interface TermDepositRolloverLog {
+  id: string;
+  cycleNumber: number;
+  startDate: string;
+  endDate: string;
+  principal: string;
+  interestEarned: string;
+  actionTaken: TermDepositRolloverMethod;
+  createdAt: string;
+}
+
+export interface TermDeposit {
+  id: string;
+  userId: string;
+  walletId: string;
+  walletName: string;
+  bankName: string;
+  accountNumber: string | null;
+  principalAmount: string;
+  interestRate: string;
+  termMonths: number;
+  startDate: string;
+  maturityDate: string;
+  rolloverMethod: TermDepositRolloverMethod;
+  targetWalletId: string | null;
+  targetWalletName: string | null;
+  status: TermDepositStatus;
+  estimatedInterest: string;
+  actualInterest: string | null;
+  nonTermRate: string;
+  settledAt: string | null;
+  rolloverCount: number;
+  lastRolloverAt: string | null;
+  isReminderSentT3: boolean;
+  isReminderSentT0: boolean;
+  notes: string | null;
+  color: string | null;
+  icon: string | null;
+  createdAt: string;
+  updatedAt: string;
+  accrued: AccruedInterestCalculation;
+  isDueSoon: boolean;
+  rolloverLogs?: TermDepositRolloverLog[];
+}
+
+export interface SavingsSummary {
+  totalPrincipal: string;
+  totalAccruedInterest: string;
+  totalEstimatedInterest: string;
+  activeCount: number;
+  maturedCount: number;
+  settledCount: number;
+  dueSoonCount: number;
+}
+
+export interface TermDepositListResponse {
+  data: TermDeposit[];
+  summary: SavingsSummary;
+  meta: {
+    total: number;
+    page: number;
+    limit: number;
+    totalPages: number;
+  };
+}
+
+export interface CreateTermDepositInput {
+  name: string;
+  bankName: string;
+  accountNumber?: string;
+  principalAmount: string;
+  interestRate: string;
+  termMonths: number;
+  startDate?: string;
+  rolloverMethod?: TermDepositRolloverMethod;
+  targetWalletId?: string;
+  sourceWalletId?: string;
+  nonTermRate?: string;
+  notes?: string;
+  color?: string;
+  icon?: string;
+}
+
+export interface UpdateTermDepositInput {
+  name?: string;
+  bankName?: string;
+  accountNumber?: string | null;
+  interestRate?: string;
+  rolloverMethod?: TermDepositRolloverMethod;
+  targetWalletId?: string | null;
+  nonTermRate?: string;
+  notes?: string | null;
+  color?: string;
+  icon?: string;
+}
+
+export interface SettleTermDepositInput {
+  targetWalletId: string;
+  settlementDate?: string;
+  isEarlyWithdrawal?: boolean;
+  notes?: string;
+}
+
+export interface SavingsCalculationPreview {
+  principalAmount: string;
+  interestRate: string;
+  termMonths: number;
+  startDate: string;
+  maturityDate: string;
+  actualDays: number;
+  estimatedInterest: string;
+  totalAtMaturity: string;
+}
+
+export interface EarlyWithdrawalCalculation {
+  principalAmount: string;
+  startDate: string;
+  withdrawalDate: string;
+  actualDays: number;
+  nonTermRate: string;
+  estimatedTermInterest: string;
+  actualInterestReceived: string;
+  interestLost: string;
+  totalReceived: string;
+}

src/types/wallet.ts

@@ -2,34 +2,40 @@ export type WalletSortField = "name" | "balance" | "createdAt" | "updatedAt";
 
 export type SortOrder = "asc" | "desc";
 
+export type WalletType = "STANDARD" | "SAVINGS_ACCOUNT";
+
 export interface Wallet {
   id: string;
   name: string;
   balance: string;
   currency: string;
+  type?: WalletType;
   icon: string | null;
   color: string | null;
   description: string | null;
   isDefault: boolean;
   isArchived: boolean;
+  termDepositId?: string | null;
   createdAt: string;
   updatedAt: string;
 }
 
 export interface WalletQuery {
   includeArchived: boolean;
+  type?: WalletType;
   sortBy: WalletSortField;
   order: SortOrder;
   page: number;
   limit: number;
 }
 
-export type WalletSearchQuery = Pick<WalletQuery, "includeArchived" | "sortBy" | "order">;
+export type WalletSearchQuery = Pick<WalletQuery, "includeArchived" | "sortBy" | "order" | "type">;
 
 export interface WalletInput {
   name: string;
   balance?: string;
   currency?: string;
+  type?: WalletType;
   icon?: string | null;
   color?: string | null;
   description?: string | null;