update database
This commit is contained in:
Phuoc Nguyen
@@ -3,10 +3,267 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Danh sách thanh toán - EuroTile Worker</title>
|
||||
<title>Thanh toán - EuroTile Worker</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
.payments-container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: #f8fafc;
|
||||
min-height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
.tab-filters {
|
||||
background: white;
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
z-index: 40;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
/*flex: 1;*/
|
||||
padding: 12px 8px;
|
||||
text-align: center;
|
||||
background: none;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 3px solid transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
color: #2563eb;
|
||||
border-bottom-color: #2563eb;
|
||||
}
|
||||
|
||||
.payments-list {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.invoice-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.invoice-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.invoice-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.invoice-codes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.invoice-id {
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.order-id {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.invoice-total {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.invoice-details {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.overdue {
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
|
||||
.payment-summary {
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.payment-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.payment-row:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.remaining-amount {
|
||||
color: #dc2626 !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.invoice-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status-unpaid {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.status-overdue {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.status-paid {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-partial {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.payments-list {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.invoice-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.invoice-details {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.invoice-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
@@ -15,132 +272,362 @@
|
||||
<a href="index.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Danh sách thanh toán</h1>
|
||||
<button class="back-button">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<h1 class="header-title">Thanh toán</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Search Bar -->
|
||||
<div class="search-bar">
|
||||
<i class="fas fa-search search-icon"></i>
|
||||
<input type="text" class="search-input" placeholder="Mã phiếu thanh toán">
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<div class="card mb-3">
|
||||
<div class="d-flex justify-between align-center">
|
||||
<h3 class="card-title">Bộ lọc</h3>
|
||||
<i class="fas fa-filter" style="color: var(--primary-blue);"></i>
|
||||
</div>
|
||||
<div class="payments-container">
|
||||
<!-- Filter Pills -->
|
||||
<!--<div class="filter-container">
|
||||
<button class="filter-pill active" onclick="filterInvoices('all')">>Tất cả</button>
|
||||
<button class="filter-pill" onclick="filterInvoices('unpaid')">Chưa thanh toán</button>
|
||||
<button class="filter-pill" onclick="filterInvoices('overdue')">Quá hạn</button>
|
||||
<button class="filter-pill" onclick="filterInvoices('paid')">Đã thanh toán</button>
|
||||
</div>-->
|
||||
<!-- Tab Filters -->
|
||||
<div class="tab-filters">
|
||||
<button class="filter-tab active" onclick="filterInvoices('all')">
|
||||
Tất cả
|
||||
</button>
|
||||
<button class="filter-tab" onclick="filterInvoices('unpaid')">
|
||||
Chưa thanh toán
|
||||
</button>
|
||||
<button class="filter-tab" onclick="filterInvoices('overdue')">
|
||||
Quá hạn
|
||||
</button>
|
||||
<button class="filter-tab" onclick="filterInvoices('paid')">
|
||||
Đã thanh toán
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Payments List -->
|
||||
<div class="payments-list">
|
||||
<!-- Payment Item 1 - Processing -->
|
||||
<div class="payment-card processing">
|
||||
<div class="payment-status-indicator"></div>
|
||||
<div class="payment-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="payment-id">#212221</h4>
|
||||
<span class="payment-amount">12.900.000 VND</span>
|
||||
<div class="payments-list" id="payments-list">
|
||||
<!-- Invoice Card 1 - Overdue -->
|
||||
<div class="invoice-card" data-status="overdue" onclick="viewInvoiceDetail('INV001')">
|
||||
<div class="invoice-header">
|
||||
<div class="invoice-codes">
|
||||
<span class="invoice-id">Mã hóa đơn: #INV001</span>
|
||||
<span class="order-id">Đơn hàng: #SO001</span>
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<p class="payment-time">Thời gian: 03/08/2023</p>
|
||||
<p class="payment-status-text">
|
||||
<span class="status-badge processing">Đang xử lý</span>
|
||||
</p>
|
||||
<p class="payment-store">Cửa hàng: CH Thủ Đức</p>
|
||||
<p class="payment-note">Ghi chú: 21347 TT Đơn hàng 54970</p>
|
||||
<span class="status-badge status-overdue">Quá hạn</span>
|
||||
</div>
|
||||
|
||||
<div class="invoice-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Ngày đặt:</span>
|
||||
<span class="detail-value">15/10/2024</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Hạn TT:</span>
|
||||
<span class="detail-value overdue">30/10/2024</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="payment-summary">
|
||||
<div class="payment-row">
|
||||
<span>Tổng tiền:</span>
|
||||
<span>85.000.000đ</span>
|
||||
</div>
|
||||
<div class="payment-row">
|
||||
<span>Đã thanh toán:</span>
|
||||
<span>25.000.000đ</span>
|
||||
</div>
|
||||
<div class="payment-row">
|
||||
<span>Còn lại:</span>
|
||||
<span class="remaining-amount">60.000.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="invoice-actions">
|
||||
<button class="btn btn-primary" onclick="event.stopPropagation(); payInvoice('INV001')">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
Thanh toán
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Item 2 - Completed -->
|
||||
<div class="payment-card completed">
|
||||
<div class="payment-status-indicator"></div>
|
||||
<div class="payment-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="payment-id">#212221</h4>
|
||||
<span class="payment-amount">12.900.000 VND</span>
|
||||
<!-- Invoice Card 2 - Unpaid -->
|
||||
<div class="invoice-card" data-status="unpaid" onclick="viewInvoiceDetail('INV002')">
|
||||
<div class="invoice-header">
|
||||
<div class="invoice-codes">
|
||||
<span class="invoice-id">Mã hóa đơn: #INV002</span>
|
||||
<span class="order-id">Đơn hàng: #SO002</span>
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<p class="payment-time">Thời gian: 03/08/2023</p>
|
||||
<p class="payment-status-text">
|
||||
<span class="status-badge completed">Hoàn thành</span>
|
||||
</p>
|
||||
<p class="payment-store">Cửa hàng: CH Thủ Đức</p>
|
||||
<p class="payment-note">Ghi chú: 21347 TT Đơn hàng 54970</p>
|
||||
<span class="status-badge status-unpaid">Chưa thanh toán</span>
|
||||
</div>
|
||||
|
||||
<div class="invoice-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Ngày đặt:</span>
|
||||
<span class="detail-value">25/10/2024</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Hạn TT:</span>
|
||||
<span class="detail-value">09/11/2024</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="payment-summary">
|
||||
<div class="payment-row">
|
||||
<span>Tổng tiền:</span>
|
||||
<span>42.500.000đ</span>
|
||||
</div>
|
||||
<div class="payment-row">
|
||||
<span>Đã thanh toán:</span>
|
||||
<span>0đ</span>
|
||||
</div>
|
||||
<div class="payment-row">
|
||||
<span>Còn lại:</span>
|
||||
<span class="remaining-amount">42.500.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="invoice-actions">
|
||||
<button class="btn btn-primary" onclick="event.stopPropagation(); payInvoice('INV002')">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
Thanh toán
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Item 3 - Processing -->
|
||||
<div class="payment-card processing">
|
||||
<div class="payment-status-indicator"></div>
|
||||
<div class="payment-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="payment-id">#212220</h4>
|
||||
<span class="payment-amount">8.500.000 VND</span>
|
||||
<!-- Invoice Card 3 - Partial Payment -->
|
||||
<div class="invoice-card" data-status="unpaid" onclick="viewInvoiceDetail('INV003')">
|
||||
<div class="invoice-header">
|
||||
<div class="invoice-codes">
|
||||
<span class="invoice-id">Mã hóa đơn: #INV003</span>
|
||||
<span class="order-id">Đơn hàng: #SO003</span>
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<p class="payment-time">Thời gian: 02/08/2023</p>
|
||||
<p class="payment-status-text">
|
||||
<span class="status-badge processing">Đang xử lý</span>
|
||||
</p>
|
||||
<p class="payment-store">Cửa hàng: CH Bình Dương</p>
|
||||
<p class="payment-note">Ghi chú: 21346 TT Đơn hàng 54969</p>
|
||||
<span class="status-badge status-partial">Thanh toán 1 phần</span>
|
||||
</div>
|
||||
|
||||
<div class="invoice-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Ngày đặt:</span>
|
||||
<span class="detail-value">20/10/2024</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Hạn TT:</span>
|
||||
<span class="detail-value">04/11/2024</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="payment-summary">
|
||||
<div class="payment-row">
|
||||
<span>Tổng tiền:</span>
|
||||
<span>150.000.000đ</span>
|
||||
</div>
|
||||
<div class="payment-row">
|
||||
<span>Đã thanh toán:</span>
|
||||
<span>75.000.000đ</span>
|
||||
</div>
|
||||
<div class="payment-row">
|
||||
<span>Còn lại:</span>
|
||||
<span class="remaining-amount">75.000.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="invoice-actions">
|
||||
<button class="btn btn-primary" onclick="event.stopPropagation(); payInvoice('INV003')">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
Thanh toán
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Item 4 - Completed -->
|
||||
<div class="payment-card completed">
|
||||
<div class="payment-status-indicator"></div>
|
||||
<div class="payment-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="payment-id">#212219</h4>
|
||||
<span class="payment-amount">15.200.000 VND</span>
|
||||
<!-- Invoice Card 4 - Paid -->
|
||||
<div class="invoice-card" data-status="paid" onclick="viewInvoiceDetail('INV004')">
|
||||
<div class="invoice-header">
|
||||
<div class="invoice-codes">
|
||||
<span class="invoice-id">Mã hóa đơn: #INV004</span>
|
||||
<span class="order-id">Đơn hàng: #SO004</span>
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<p class="payment-time">Thời gian: 01/08/2023</p>
|
||||
<p class="payment-status-text">
|
||||
<span class="status-badge completed">Hoàn thành</span>
|
||||
</p>
|
||||
<p class="payment-store">Cửa hàng: CH Thủ Đức</p>
|
||||
<p class="payment-note">Ghi chú: 21345 TT Đơn hàng 54968</p>
|
||||
<span class="status-badge status-paid">Đã hoàn tất</span>
|
||||
</div>
|
||||
|
||||
<div class="invoice-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Ngày đặt:</span>
|
||||
<span class="detail-value">10/10/2024</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Hạn TT:</span>
|
||||
<span class="detail-value">25/10/2024</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="payment-summary">
|
||||
<div class="payment-row">
|
||||
<span>Tổng tiền:</span>
|
||||
<span>32.800.000đ</span>
|
||||
</div>
|
||||
<div class="payment-row">
|
||||
<span>Đã thanh toán:</span>
|
||||
<span>32.800.000đ</span>
|
||||
</div>
|
||||
<div class="payment-row">
|
||||
<span>Còn lại:</span>
|
||||
<span>0đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="invoice-actions">
|
||||
<button class="btn btn-success">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
Đã hoàn tất
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Item 5 - Processing -->
|
||||
<div class="payment-card processing">
|
||||
<div class="payment-status-indicator"></div>
|
||||
<div class="payment-content">
|
||||
<div class="d-flex justify-between align-start mb-2">
|
||||
<h4 class="payment-id">#212218</h4>
|
||||
<span class="payment-amount">6.750.000 VND</span>
|
||||
<!-- Invoice Card 5 - Overdue -->
|
||||
<div class="invoice-card" data-status="overdue" onclick="viewInvoiceDetail('INV005')">
|
||||
<div class="invoice-header">
|
||||
<div class="invoice-codes">
|
||||
<span class="invoice-id">Mã hóa đơn: #INV005</span>
|
||||
<span class="order-id">Đơn hàng: #SO005</span>
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<p class="payment-time">Thời gian: 31/07/2023</p>
|
||||
<p class="payment-status-text">
|
||||
<span class="status-badge processing">Đang xử lý</span>
|
||||
</p>
|
||||
<p class="payment-store">Cửa hàng: CH Gò Vấp</p>
|
||||
<p class="payment-note">Ghi chú: 21344 TT Đơn hàng 54967</p>
|
||||
<span class="status-badge status-overdue">Quá hạn</span>
|
||||
</div>
|
||||
|
||||
<div class="invoice-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Ngày đặt:</span>
|
||||
<span class="detail-value">05/10/2024</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Hạn TT:</span>
|
||||
<span class="detail-value overdue">20/10/2024</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="payment-summary">
|
||||
<div class="payment-row">
|
||||
<span>Tổng tiền:</span>
|
||||
<span>95.300.000đ</span>
|
||||
</div>
|
||||
<div class="payment-row">
|
||||
<span>Đã thanh toán:</span>
|
||||
<span>0đ</span>
|
||||
</div>
|
||||
<div class="payment-row">
|
||||
<span>Còn lại:</span>
|
||||
<span class="remaining-amount">95.300.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="invoice-actions">
|
||||
<button class="btn btn-primary" onclick="event.stopPropagation(); payInvoice('INV005')">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
Thanh toán
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function filterInvoices(status) {
|
||||
// Update active tab
|
||||
document.querySelectorAll('.filter-tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
event.target.classList.add('active');
|
||||
|
||||
// Filter invoice cards
|
||||
const cards = document.querySelectorAll('.invoice-card');
|
||||
cards.forEach(card => {
|
||||
const cardStatus = card.getAttribute('data-status');
|
||||
|
||||
if (status === 'all') {
|
||||
card.style.display = 'block';
|
||||
} else if (status === 'unpaid') {
|
||||
// Show cards that are not fully paid (unpaid, overdue, partial)
|
||||
card.style.display = cardStatus !== 'paid' ? 'block' : 'none';
|
||||
} else {
|
||||
card.style.display = cardStatus === status ? 'block' : 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Show empty state if no results
|
||||
const visibleCards = Array.from(cards).filter(card => card.style.display !== 'none');
|
||||
if (visibleCards.length === 0) {
|
||||
showEmptyState(status);
|
||||
} else {
|
||||
hideEmptyState();
|
||||
}
|
||||
}
|
||||
|
||||
function showEmptyState(filterType) {
|
||||
const existingEmptyState = document.querySelector('.empty-state');
|
||||
if (existingEmptyState) {
|
||||
existingEmptyState.remove();
|
||||
}
|
||||
|
||||
const paymentsList = document.getElementById('payments-list');
|
||||
const emptyState = document.createElement('div');
|
||||
emptyState.className = 'empty-state';
|
||||
|
||||
let message = '';
|
||||
switch(filterType) {
|
||||
case 'unpaid':
|
||||
message = 'Không có hóa đơn chưa thanh toán';
|
||||
break;
|
||||
case 'overdue':
|
||||
message = 'Không có hóa đơn quá hạn';
|
||||
break;
|
||||
case 'paid':
|
||||
message = 'Không có hóa đơn đã thanh toán';
|
||||
break;
|
||||
default:
|
||||
message = 'Không có hóa đơn nào';
|
||||
}
|
||||
|
||||
emptyState.innerHTML = `
|
||||
<i class="fas fa-file-invoice"></i>
|
||||
<h3>${message}</h3>
|
||||
<p>Hiện tại không có hóa đơn nào trong danh mục này</p>
|
||||
`;
|
||||
|
||||
paymentsList.appendChild(emptyState);
|
||||
}
|
||||
|
||||
function hideEmptyState() {
|
||||
const existingEmptyState = document.querySelector('.empty-state');
|
||||
if (existingEmptyState) {
|
||||
existingEmptyState.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function viewInvoiceDetail(invoiceId) {
|
||||
// Navigate to invoice detail page
|
||||
window.location.href = `payment-detail.html?id=${invoiceId}`;
|
||||
}
|
||||
|
||||
function payInvoice(invoiceId) {
|
||||
// In real app, open payment modal or navigate to payment page
|
||||
alert(`Mở trang thanh toán cho hóa đơn ${invoiceId}`);
|
||||
}
|
||||
|
||||
// Initialize page
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Set default filter to 'all'
|
||||
filterInvoices('all');
|
||||
|
||||
// Add animation to cards
|
||||
const cards = document.querySelectorAll('.invoice-card');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'all 0.5s ease';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user