Hugging Face's logo

Spaces:
hotrung
/
test
Running

App Files Community
test / index.html
hotrung's picture
hotrung
Add 2 files
c809a52 verified
Raw
History Blame Contribute Delete
49.4 kB
<!DOCTYPE html>
<html lang="vi">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>MoneyMaster - Quản lý tài chính cá nhân</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 <style>
 :root {
 --primary: #4f46e5;
 --secondary: #10b981;
 --danger: #ef4444;
 --warning: #f59e0b;
 --dark: #1e293b;
 }
body {
 font-family: 'Inter', sans-serif;
 background-color: #f8fafc;
 }
.sidebar {
 transition: all 0.3s ease;
 }
.card {
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
.theme-primary {
 background-color: var(--primary);
 }
.theme-secondary {
 background-color: var(--secondary);
 }
.theme-danger {
 background-color: var(--danger);
 }
.theme-warning {
 background-color: var(--warning);
 }
.theme-dark {
 background-color: var(--dark);
 }
.transaction-income {
 border-left: 4px solid var(--secondary);
 }
.transaction-expense {
 border-left: 4px solid var(--danger);
 }
.transaction-transfer {
 border-left: 4px solid var(--primary);
 }
#sidebar.collapsed {
 width: 80px;
 }
#sidebar.collapsed .sidebar-text {
 display: none;
 }
#sidebar.collapsed .logo-text {
 display: none;
 }
#sidebar.collapsed .nav-item {
 justify-content: center;
 }
#main-content.expanded {
 margin-left: 80px;
 }
 </style>
</head>
<body class="bg-gray-50">
 <div class="flex h-screen overflow-hidden">
 <!-- Sidebar -->
 <div id="sidebar" class="sidebar bg-white w-64 h-full fixed flex flex-col border-r border-gray-200 z-10">
 <div class="p-4 flex items-center space-x-2">
 <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
 <i class="fas fa-wallet text-indigo-600 text-xl"></i>
 </div>
 <span class="logo-text text-xl font-semibold text-gray-800">MoneyMaster</span>
 </div>
<div class="mt-8 flex-1 flex flex-col">
 <nav class="flex-1 px-4 space-y-1">
 <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium rounded-lg bg-indigo-50 text-indigo-700">
 <i class="fas fa-home mr-3 text-indigo-600"></i>
 <span class="sidebar-text">Tổng quan</span>
 </a>
 <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-exchange-alt mr-3 text-gray-500"></i>
 <span class="sidebar-text">Giao dịch</span>
 </a>
 <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-credit-card mr-3 text-gray-500"></i>
 <span class="sidebar-text">Tài khoản</span>
 </a>
 <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-chart-pie mr-3 text-gray-500"></i>
 <span class="sidebar-text">Báo cáo</span>
 </a>
 <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-tags mr-3 text-gray-500"></i>
 <span class="sidebar-text">Danh mục</span>
 </a>
 <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-cog mr-3 text-gray-500"></i>
 <span class="sidebar-text">Cài đặt</span>
 </a>
 </nav>
<div class="px-4 py-6">
 <div class="bg-indigo-50 rounded-lg p-4">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-xs font-medium text-indigo-600">Bản dùng thử</p>
 <p class="text-sm font-medium text-gray-800">3 ngày còn lại</p>
 </div>
 <button class="text-xs font-medium text-indigo-600 hover:text-indigo-700">Nâng cấp</button>
 </div>
 </div>
 </div>
 </div>
<div class="p-4 border-t border-gray-200">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
 <i class="fas fa-user text-gray-600"></i>
 </div>
 <div class="flex-1">
 <p class="text-sm font-medium text-gray-800 sidebar-text">Nguyễn Văn A</p>
 <p class="text-xs text-gray-500 sidebar-text">admin@example.com</p>
 </div>
 <button id="toggle-sidebar" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-chevron-left"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Main Content -->
 <div id="main-content" class="flex-1 overflow-auto ml-64 transition-all duration-300">
 <div class="p-6">
 <!-- Header -->
 <div class="flex justify-between items-center mb-6">
 <div>
 <h1 class="text-2xl font-bold text-gray-800">Tổng quan tài chính</h1>
 <p class="text-gray-600">Xin chào, đây là báo cáo tài chính của bạn</p>
 </div>
 <div class="flex items-center space-x-4">
 <div class="relative">
 <input type="text" placeholder="Tìm kiếm..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
 <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
 </div>
 <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
 <i class="fas fa-bell"></i>
 </button>
 <div class="flex items-center space-x-2">
 <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
 <i class="fas fa-user text-indigo-600"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Stats Cards -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
 <div class="card bg-white rounded-xl p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Tổng tài sản</p>
 <h3 class="text-2xl font-bold text-gray-800 mt-1">125.450.000đ</h3>
 <p class="text-sm text-green-500 mt-1 flex items-center">
 <i class="fas fa-arrow-up mr-1"></i> 12% so với tháng trước
 </p>
 </div>
 <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
 <i class="fas fa-wallet text-indigo-600 text-xl"></i>
 </div>
 </div>
 </div>
<div class="card bg-white rounded-xl p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Thu nhập</p>
 <h3 class="text-2xl font-bold text-gray-800 mt-1">32.500.000đ</h3>
 <p class="text-sm text-green-500 mt-1 flex items-center">
 <i class="fas fa-arrow-up mr-1"></i> 8% so với tháng trước
 </p>
 </div>
 <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
 <i class="fas fa-money-bill-wave text-green-600 text-xl"></i>
 </div>
 </div>
 </div>
<div class="card bg-white rounded-xl p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Chi tiêu</p>
 <h3 class="text-2xl font-bold text-gray-800 mt-1">18.750.000đ</h3>
 <p class="text-sm text-red-500 mt-1 flex items-center">
 <i class="fas fa-arrow-down mr-1"></i> 5% so với tháng trước
 </p>
 </div>
 <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
 <i class="fas fa-shopping-cart text-red-600 text-xl"></i>
 </div>
 </div>
 </div>
<div class="card bg-white rounded-xl p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Tiết kiệm</p>
 <h3 class="text-2xl font-bold text-gray-800 mt-1">13.750.000đ</h3>
 <p class="text-sm text-green-500 mt-1 flex items-center">
 <i class="fas fa-arrow-up mr-1"></i> 15% so với tháng trước
 </p>
 </div>
 <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
 <i class="fas fa-piggy-bank text-blue-600 text-xl"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Charts and Recent Transactions -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
 <!-- Income vs Expense Chart -->
 <div class="card bg-white rounded-xl p-6 lg:col-span-2">
 <div class="flex items-center justify-between mb-4">
 <h2 class="text-lg font-semibold text-gray-800">Thu nhập vs Chi tiêu</h2>
 <select class="border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
 <option>Tháng này</option>
 <option>Quý này</option>
 <option>Năm nay</option>
 <option>Tùy chỉnh</option>
 </select>
 </div>
 <div class="h-64">
 <canvas id="incomeExpenseChart"></canvas>
 </div>
 </div>
<!-- Account Balances -->
 <div class="card bg-white rounded-xl p-6">
 <h2 class="text-lg font-semibold text-gray-800 mb-4">Số dư tài khoản</h2>
 <div class="space-y-4">
 <div class="flex items-center justify-between">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
 <i class="fas fa-university text-blue-600"></i>
 </div>
 <div>
 <p class="text-sm font-medium text-gray-800">Techcombank</p>
 <p class="text-xs text-gray-500">**** 5678</p>
 </div>
 </div>
 <p class="text-sm font-medium text-gray-800">45.200.000đ</p>
 </div>
<div class="flex items-center justify-between">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
 <i class="fas fa-university text-green-600"></i>
 </div>
 <div>
 <p class="text-sm font-medium text-gray-800">Vietcombank</p>
 <p class="text-xs text-gray-500">**** 1234</p>
 </div>
 </div>
 <p class="text-sm font-medium text-gray-800">32.500.000đ</p>
 </div>
<div class="flex items-center justify-between">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
 <i class="fas fa-money-bill-alt text-purple-600"></i>
 </div>
 <div>
 <p class="text-sm font-medium text-gray-800">Tiền mặt</p>
 <p class="text-xs text-gray-500">Ví cá nhân</p>
 </div>
 </div>
 <p class="text-sm font-medium text-gray-800">5.750.000đ</p>
 </div>
<div class="flex items-center justify-between">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center">
 <i class="fas fa-mobile-alt text-yellow-600"></i>
 </div>
 <div>
 <p class="text-sm font-medium text-gray-800">Momo</p>
 <p class="text-xs text-gray-500">**** 9012</p>
 </div>
 </div>
 <p class="text-sm font-medium text-gray-800">12.000.000đ</p>
 </div>
<div class="pt-4 border-t border-gray-200">
 <div class="flex items-center justify-between">
 <p class="text-sm font-medium text-gray-800">Tổng cộng</p>
 <p class="text-sm font-bold text-indigo-600">95.450.000đ</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Recent Transactions and Expense by Category -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 <!-- Recent Transactions -->
 <div class="card bg-white rounded-xl p-6 lg:col-span-2">
 <div class="flex items-center justify-between mb-4">
 <h2 class="text-lg font-semibold text-gray-800">Giao dịch gần đây</h2>
 <button id="add-transaction-btn" class="flex items-center space-x-1 bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition">
 <i class="fas fa-plus"></i>
 <span>Thêm giao dịch</span>
 </button>
 </div>
<div class="overflow-x-auto">
 <table class="min-w-full divide-y divide-gray-200">
 <thead class="bg-gray-50">
 <tr>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mô tả</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tài khoản</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Danh mục</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Số tiền</th>
 </tr>
 </thead>
 <tbody class="bg-white divide-y divide-gray-200">
 <tr class="transaction-income hover:bg-gray-50 cursor-pointer">
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
 <i class="fas fa-money-bill-wave text-green-600"></i>
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Lương tháng 6</div>
 <div class="text-sm text-gray-500">15/06/2023</div>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="text-sm text-gray-900">Techcombank</div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Thu nhập</span>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">+25.000.000đ</td>
 </tr>
<tr class="transaction-expense hover:bg-gray-50 cursor-pointer">
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center">
 <i class="fas fa-shopping-bag text-red-600"></i>
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Mua sắm cuối tuần</div>
 <div class="text-sm text-gray-500">12/06/2023</div>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="text-sm text-gray-900">Momo</div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Mua sắm</span>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">-3.450.000đ</td>
 </tr>
<tr class="transaction-expense hover:bg-gray-50 cursor-pointer">
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center">
 <i class="fas fa-utensils text-red-600"></i>
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Ăn uống với bạn</div>
 <div class="text-sm text-gray-500">10/06/2023</div>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="text-sm text-gray-900">Tiền mặt</div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Ăn uống</span>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">-1.200.000đ</td>
 </tr>
<tr class="transaction-transfer hover:bg-gray-50 cursor-pointer">
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
 <i class="fas fa-exchange-alt text-blue-600"></i>
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Chuyển tiền tiết kiệm</div>
 <div class="text-sm text-gray-500">05/06/2023</div>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="text-sm text-gray-900">Techcombank → Vietcombank</div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Chuyển khoản</span>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">-5.000.000đ</td>
 </tr>
 </tbody>
 </table>
 </div>
<div class="mt-4 flex justify-center">
 <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Xem tất cả giao dịch</button>
 </div>
 </div>
<!-- Expense by Category -->
 <div class="card bg-white rounded-xl p-6">
 <div class="flex items-center justify-between mb-4">
 <h2 class="text-lg font-semibold text-gray-800">Chi tiêu theo danh mục</h2>
 <select class="border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
 <option>Tháng này</option>
 <option>Quý này</option>
 <option>Năm nay</option>
 </select>
 </div>
<div class="h-64 mb-4">
 <canvas id="expenseCategoryChart"></canvas>
 </div>
<div class="space-y-3">
 <div class="flex items-center justify-between">
 <div class="flex items-center space-x-2">
 <div class="w-3 h-3 rounded-full bg-red-500"></div>
 <span class="text-sm text-gray-700">Ăn uống</span>
 </div>
 <span class="text-sm font-medium text-gray-800">4.500.000đ (24%)</span>
 </div>
<div class="flex items-center justify-between">
 <div class="flex items-center space-x-2">
 <div class="w-3 h-3 rounded-full bg-blue-500"></div>
 <span class="text-sm text-gray-700">Di chuyển</span>
 </div>
 <span class="text-sm font-medium text-gray-800">3.200.000đ (17%)</span>
 </div>
<div class="flex items-center justify-between">
 <div class="flex items-center space-x-2">
 <div class="w-3 h-3 rounded-full bg-green-500"></div>
 <span class="text-sm text-gray-700">Mua sắm</span>
 </div>
 <span class="text-sm font-medium text-gray-800">3.450.000đ (18%)</span>
 </div>
<div class="flex items-center justify-between">
 <div class="flex items-center space-x-2">
 <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
 <span class="text-sm text-gray-700">Giải trí</span>
 </div>
 <span class="text-sm font-medium text-gray-800">2.100.000đ (11%)</span>
 </div>
<div class="flex items-center justify-between">
 <div class="flex items-center space-x-2">
 <div class="w-3 h-3 rounded-full bg-purple-500"></div>
 <span class="text-sm text-gray-700">Nhà cửa</span>
 </div>
 <span class="text-sm font-medium text-gray-800">5.500.000đ (30%)</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Add Transaction Modal -->
 <div id="transaction-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-xl w-full max-w-md">
 <div class="p-6">
 <div class="flex items-center justify-between mb-4">
 <h3 class="text-lg font-semibold text-gray-800">Thêm giao dịch mới</h3>
 <button id="close-modal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<form id="transaction-form">
 <div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Loại giao dịch</label>
 <div class="grid grid-cols-3 gap-2">
 <button type="button" class="transaction-type-btn py-2 px-3 border rounded-lg text-sm font-medium flex items-center justify-center space-x-1 bg-green-50 border-green-200 text-green-700" data-type="income">
 <i class="fas fa-money-bill-wave"></i>
 <span>Thu nhập</span>
 </button>
 <button type="button" class="transaction-type-btn py-2 px-3 border rounded-lg text-sm font-medium flex items-center justify-center space-x-1 bg-red-50 border-red-200 text-red-700" data-type="expense">
 <i class="fas fa-shopping-cart"></i>
 <span>Chi tiêu</span>
 </button>
 <button type="button" class="transaction-type-btn py-2 px-3 border rounded-lg text-sm font-medium flex items-center justify-center space-x-1 bg-blue-50 border-blue-200 text-blue-700" data-type="transfer">
 <i class="fas fa-exchange-alt"></i>
 <span>Chuyển khoản</span>
 </button>
 </div>
 </div>
<div>
 <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">Số tiền</label>
 <div class="relative">
 <input type="number" id="amount" name="amount" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="0">
 <span class="absolute left-3 top-3 text-gray-400">đ</span>
 </div>
 </div>
<div>
 <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Mô tả</label>
 <input type="text" id="description" name="description" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Nhập mô tả...">
 </div>
<div>
 <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Danh mục</label>
 <select id="category" name="category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
 <option value="">Chọn danh mục</option>
 <option value="salary">Lương</option>
 <option value="bonus">Thưởng</option>
 <option value="food">Ăn uống</option>
 <option value="shopping">Mua sắm</option>
 <option value="transport">Di chuyển</option>
 <option value="entertainment">Giải trí</option>
 </select>
 </div>
<div>
 <label for="account" class="block text-sm font-medium text-gray-700 mb-1">Tài khoản</label>
 <select id="account" name="account" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
 <option value="">Chọn tài khoản</option>
 <option value="techcombank">Techcombank</option>
 <option value="vietcombank">Vietcombank</option>
 <option value="momo">Ví Momo</option>
 <option value="cash">Tiền mặt</option>
 </select>
 </div>
<div id="transfer-account-container" class="hidden">
 <label for="to-account" class="block text-sm font-medium text-gray-700 mb-1">Đến tài khoản</label>
 <select id="to-account" name="to-account" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
 <option value="">Chọn tài khoản</option>
 <option value="techcombank">Techcombank</option>
 <option value="vietcombank">Vietcombank</option>
 <option value="momo">Ví Momo</option>
 <option value="cash">Tiền mặt</option>
 </select>
 </div>
<div>
 <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Ngày</label>
 <input type="date" id="date" name="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
 </div>
<div class="pt-2">
 <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
 Lưu giao dịch
 </button>
 </div>
 </div>
 </form>
 </div>
 </div>
 </div>
<!-- Google Sheets Integration Modal -->
 <div id="sheets-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-xl w-full max-w-md">
 <div class="p-6">
 <div class="flex items-center justify-between mb-4">
 <h3 class="text-lg font-semibold text-gray-800">Kết nối với Google Sheets</h3>
 <button id="close-sheets-modal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="space-y-4">
 <p class="text-sm text-gray-600">Kết nối với Google Sheets để tự động lưu dữ liệu của bạn. Bạn cần cấp quyền truy cập vào tài khoản Google của mình.</p>
<div class="bg-gray-50 p-4 rounded-lg">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
 <i class="fas fa-table text-gray-600"></i>
 </div>
 <div>
 <p class="text-sm font-medium text-gray-800">Tài liệu Google Sheets</p>
 <p class="text-xs text-gray-500">money-master-data-2023</p>
 </div>
 </div>
 </div>
<div class="pt-2">
 <button id="connect-sheets-btn" class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 flex items-center justify-center space-x-2">
 <i class="fab fa-google"></i>
 <span>Kết nối với Google</span>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Toggle sidebar
 document.getElementById('toggle-sidebar').addEventListener('click', function() {
 const sidebar = document.getElementById('sidebar');
 const mainContent = document.getElementById('main-content');
sidebar.classList.toggle('collapsed');
 mainContent.classList.toggle('expanded');
// Change icon based on state
 if (sidebar.classList.contains('collapsed')) {
 this.innerHTML = '<i class="fas fa-chevron-right"></i>';
 } else {
 this.innerHTML = '<i class="fas fa-chevron-left"></i>';
 }
 });
// Transaction modal
 const addTransactionBtn = document.getElementById('add-transaction-btn');
 const transactionModal = document.getElementById('transaction-modal');
 const closeModalBtn = document.getElementById('close-modal');
 const transactionForm = document.getElementById('transaction-form');
addTransactionBtn.addEventListener('click', function() {
 transactionModal.classList.remove('hidden');
 });
closeModalBtn.addEventListener('click', function() {
 transactionModal.classList.add('hidden');
 });
// Transaction type buttons
 const transactionTypeBtns = document.querySelectorAll('.transaction-type-btn');
 const transferAccountContainer = document.getElementById('transfer-account-container');
transactionTypeBtns.forEach(btn => {
 btn.addEventListener('click', function() {
 // Remove active class from all buttons
 transactionTypeBtns.forEach(b => {
 b.classList.remove('bg-indigo-50', 'border-indigo-200', 'text-indigo-700');
 b.classList.add('bg-gray-50', 'border-gray-200', 'text-gray-700');
 });
// Add active class to clicked button
 this.classList.remove('bg-gray-50', 'border-gray-200', 'text-gray-700');
if (this.dataset.type === 'income') {
 this.classList.add('bg-green-50', 'border-green-200', 'text-green-700');
 } else if (this.dataset.type === 'expense') {
 this.classList.add('bg-red-50', 'border-red-200', 'text-red-700');
 } else if (this.dataset.type === 'transfer') {
 this.classList.add('bg-blue-50', 'border-blue-200', 'text-blue-700');
 }
// Show/hide transfer account field
 if (this.dataset.type === 'transfer') {
 transferAccountContainer.classList.remove('hidden');
 } else {
 transferAccountContainer.classList.add('hidden');
 }
 });
 });
// Form submission
 transactionForm.addEventListener('submit', function(e) {
 e.preventDefault();
// Get form values
 const amount = document.getElementById('amount').value;
 const description = document.getElementById('description').value;
 const category = document.getElementById('category').value;
 const account = document.getElementById('account').value;
 const date = document.getElementById('date').value;
// Here you would normally send this data to your backend
 // For this demo, we'll just log it and close the modal
 console.log({
 amount,
 description,
 category,
 account,
 date
 });
// Close modal
 transactionModal.classList.add('hidden');
// Show success message
 alert('Giao dịch đã được lưu thành công!');
// Reset form
 this.reset();
 });
// Google Sheets integration
 const connectSheetsBtn = document.getElementById('connect-sheets-btn');
 const sheetsModal = document.getElementById('sheets-modal');
 const closeSheetsModalBtn = document.getElementById('close-sheets-modal');
// This would normally be a button in the settings to open the modal
 // For demo purposes, we'll open it after 2 seconds
 setTimeout(() => {
 sheetsModal.classList.remove('hidden');
 }, 2000);
closeSheetsModalBtn.addEventListener('click', function() {
 sheetsModal.classList.add('hidden');
 });
connectSheetsBtn.addEventListener('click', function() {
 // In a real app, this would initiate the Google OAuth flow
 // For this demo, we'll just simulate it
 this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>Đang kết nối...</span>';
setTimeout(() => {
 this.innerHTML = '<i class="fas fa-check"></i><span>Đã kết nối</span>';
 this.classList.remove('bg-green-600', 'hover:bg-green-700');
 this.classList.add('bg-gray-600', 'hover:bg-gray-700');
// Close modal after 1 second
 setTimeout(() => {
 sheetsModal.classList.add('hidden');
 alert('Kết nối với Google Sheets thành công! Dữ liệu sẽ được tự động đồng bộ.');
 }, 1000);
 }, 2000);
 });
// Charts
 // Income vs Expense Chart
 const incomeExpenseCtx = document.getElementById('incomeExpenseChart').getContext('2d');
 const incomeExpenseChart = new Chart(incomeExpenseCtx, {
 type: 'bar',
 data: {
 labels: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6'],
 datasets: [
 {
 label: 'Thu nhập',
 data: [22000000, 24000000, 26000000, 28000000, 30000000, 32500000],
 backgroundColor: '#10b981',
 borderRadius: 4
 },
 {
 label: 'Chi tiêu',
 data: [15000000, 16000000, 17000000, 18000000, 19000000, 18750000],
 backgroundColor: '#ef4444',
 borderRadius: 4
 }
 ]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 y: {
 beginAtZero: true,
 ticks: {
 callback: function(value) {
 return value.toLocaleString('vi-VN') + 'đ';
 }
 }
 }
 },
 plugins: {
 tooltip: {
 callbacks: {
 label: function(context) {
 let label = context.dataset.label || '';
 if (label) {
 label += ': ';
 }
 if (context.parsed.y !== null) {
 label += context.parsed.y.toLocaleString('vi-VN') + 'đ';
 }
 return label;
 }
 }
 }
 }
 }
 });
// Expense by Category Chart
 const expenseCategoryCtx = document.getElementById('expenseCategoryChart').getContext('2d');
 const expenseCategoryChart = new Chart(expenseCategoryCtx, {
 type: 'doughnut',
 data: {
 labels: ['Ăn uống', 'Di chuyển', 'Mua sắm', 'Giải trí', 'Nhà cửa'],
 datasets: [{
 data: [4500000, 3200000, 3450000, 2100000, 5500000],
 backgroundColor: [
 '#ef4444',
 '#3b82f6',
 '#10b981',
 '#f59e0b',
 '#8b5cf6'
 ],
 borderWidth: 0
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 cutout: '70%',
 plugins: {
 legend: {
 display: false
 },
 tooltip: {
 callbacks: {
 label: function(context) {
 const label = context.label || '';
 const value = context.raw || 0;
 const total = context.dataset.data.reduce((a, b) => a + b, 0);
 const percentage = Math.round((value / total) * 100);
 return `${label}: ${value.toLocaleString('vi-VN')}đ (${percentage}%)`;
 }
 }
 }
 }
 }
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hotrung/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>