update invoice
This commit is contained in:
Phuoc Nguyen
632
html/invoice-detail.html
Normal file
632
html/invoice-detail.html
Normal file
@@ -0,0 +1,632 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chi tiết Hóa đơ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>
|
||||
.invoice-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: #f8fafc;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.invoice-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.invoice-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Invoice Header */
|
||||
.invoice-header-section {
|
||||
text-align: center;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
border-radius: 12px;
|
||||
margin: 0 auto 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.invoice-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.invoice-number {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #2563eb;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.invoice-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.invoice-meta-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.invoice-meta-label {
|
||||
color: #6b7280;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.invoice-meta-value {
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Company Info */
|
||||
.company-info-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.company-info-block h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.company-info-block p {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.company-info-block p strong {
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Products Table */
|
||||
.products-section h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.products-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.products-table thead {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.products-table th {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.products-table th:last-child,
|
||||
.products-table td:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.products-table td {
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
color: #1f2937;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.products-table tbody tr:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-sku {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Summary */
|
||||
.invoice-summary {
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.summary-row.total {
|
||||
border-top: 2px solid #e5e7eb;
|
||||
padding-top: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.summary-row.total .summary-label,
|
||||
.summary-row.total .summary-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-row.total .summary-value {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
/* Notes */
|
||||
.invoice-notes {
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.invoice-notes h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.invoice-notes p {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Status Badge */
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-paid {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-unpaid {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.status-partial {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
/* Sticky Footer Actions */
|
||||
.invoice-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-top: 2px solid #e5e7eb;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.invoice-actions-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
padding: 14px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #374151;
|
||||
border: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: #2563eb;
|
||||
color: #2563eb;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Toast Notification */
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #1f2937;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
background: #065f46;
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.invoice-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.invoice-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.company-info-section {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.products-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.products-table th,
|
||||
.products-table td {
|
||||
padding: 8px 6px;
|
||||
}
|
||||
|
||||
.invoice-actions-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<a href="invoice-list.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Chi tiết Hóa đơn</h1>
|
||||
<button class="header-action-btn" onclick="shareInvoice()">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="invoice-container">
|
||||
<div class="invoice-content">
|
||||
<!-- Invoice Header Card -->
|
||||
<div class="invoice-card">
|
||||
<div class="invoice-header-section">
|
||||
<div class="company-logo">
|
||||
<i class="fas fa-file-invoice-dollar"></i>
|
||||
</div>
|
||||
<h1 class="invoice-title">HÓA ĐƠN GTGT</h1>
|
||||
<div class="invoice-number">#INV20240001</div>
|
||||
<span class="status-badge status-paid">Đã thanh toán</span>
|
||||
|
||||
<div class="invoice-meta">
|
||||
<!--<div class="invoice-meta-item">
|
||||
<div class="invoice-meta-label">Mẫu số:</div>
|
||||
<div class="invoice-meta-value">01GTKT0/001</div>
|
||||
</div>-->
|
||||
<!--<div class="invoice-meta-item">
|
||||
<div class="invoice-meta-label">Ký hiệu:</div>
|
||||
<div class="invoice-meta-value">AA/24E</div>
|
||||
</div>-->
|
||||
<div class="invoice-meta-item">
|
||||
<div class="invoice-meta-label">Ngày xuất:</div>
|
||||
<div class="invoice-meta-value">03/08/2024</div>
|
||||
</div>
|
||||
<div class="invoice-meta-item">
|
||||
<div class="invoice-meta-label">Đơn hàng:</div>
|
||||
<div class="invoice-meta-value">#DH001234</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Company Information -->
|
||||
<div class="company-info-section">
|
||||
<div class="company-info-block">
|
||||
<h3>
|
||||
<i class="fas fa-building text-blue-600"></i>
|
||||
Đơn vị bán hàng
|
||||
</h3>
|
||||
<p><strong>Công ty:</strong> CÔNG TY CP EUROTILE VIỆT NAM</p>
|
||||
<p><strong>Mã số thuế:</strong> 0301234567</p>
|
||||
<p><strong>Địa chỉ:</strong> 123 Đường Nguyễn Văn Linh, Quận 7, TP.HCM</p>
|
||||
<p><strong>Điện thoại:</strong> (028) 1900 1234</p>
|
||||
<p><strong>Email:</strong> sales@eurotile.vn</p>
|
||||
</div>
|
||||
|
||||
<div class="company-info-block">
|
||||
<h3>
|
||||
<i class="fas fa-user-tie text-green-600"></i>
|
||||
Đơn vị mua hàng
|
||||
</h3>
|
||||
<p><strong>Người mua hàng:</strong> Lê Hoàng Hiệp </p>
|
||||
<p><strong>Tên đơn vị:</strong> Công ty TNHH Xây dựng Minh Long</p>
|
||||
<p><strong>Mã số thuế:</strong> 0134000687</p>
|
||||
<p><strong>Địa chỉ:</strong> 11 Đường Hoàng Hữu Nam, Phường Linh Chiểu, TP. Thủ Đức, TP.HCM</p>
|
||||
<p><strong>Điện thoại:</strong> 0339797979</p>
|
||||
<p><strong>Email:</strong> minhlong.org@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Products Section -->
|
||||
<div class="invoice-card products-section">
|
||||
<h3>
|
||||
<i class="fas fa-box-open"></i>
|
||||
Chi tiết hàng hóa
|
||||
</h3>
|
||||
|
||||
<table class="products-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40px;">#</th>
|
||||
<th>Tên hàng hóa</th>
|
||||
<!--<th style="width: 80px;">ĐVT</th>-->
|
||||
<th style="width: 80px;">Số lượng</th>
|
||||
<th style="width: 110px;">Đơn giá</th>
|
||||
<th style="width: 120px;">Thành tiền</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>
|
||||
<div class="product-name">Gạch Eurotile MỘC LAM E03</div>
|
||||
<div class="product-sku">SKU: ET-ML-E03-60x60</div>
|
||||
</td>
|
||||
<!--<td>m²</td>-->
|
||||
<td>30,12</td>
|
||||
<td>285.000đ</td>
|
||||
<td><strong>8.550.000đ</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<div class="product-name">Gạch Eurotile STONE GREY S02</div>
|
||||
<div class="product-sku">SKU: ET-SG-S02-80x80</div>
|
||||
</td>
|
||||
<!--<td>m²</td>-->
|
||||
<td>20,24</td>
|
||||
<td>217.500đ</td>
|
||||
<td><strong>4.350.000đ</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Invoice Summary -->
|
||||
<div class="invoice-summary">
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">Tổng tiền hàng:</span>
|
||||
<span class="summary-value">12.900.000đ</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">Chiết khấu VIP (1%):</span>
|
||||
<span class="summary-value" style="color: #059669;">-129.000đ</span>
|
||||
</div>
|
||||
<!--<div class="summary-row">
|
||||
<span class="summary-label">Tiền trước thuế:</span>
|
||||
<span class="summary-value">12.771.000đ</span>
|
||||
</div>-->
|
||||
<!--<div class="summary-row">
|
||||
<span class="summary-label">Thuế GTGT (0%):</span>
|
||||
<span class="summary-value">0đ</span>
|
||||
</div>-->
|
||||
<div class="summary-row total">
|
||||
<span class="summary-label">TỔNG THANH TOÁN:</span>
|
||||
<span class="summary-value">12.771.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<!--<div class="invoice-notes">
|
||||
<h4>Ghi chú:</h4>
|
||||
<p>- Số tiền viết bằng chữ: <strong>Mười hai triệu bảy trăm bảy mươi mốt nghìn đồng chẵn.</strong></p>
|
||||
<p>- Hình thức thanh toán: Chuyển khoản ngân hàng</p>
|
||||
<p>- Hóa đơn điện tử đã được ký số và có giá trị pháp lý</p>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div id="actionButtons" class="action-buttons">
|
||||
<button class="btn btn-secondary" onclick="contactSupport()">
|
||||
<i class="fas fa-comments"></i>
|
||||
Liên hệ hỗ trợ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Sticky Footer Actions -->
|
||||
<!--<div class="invoice-actions">
|
||||
<div class="invoice-actions-content">
|
||||
<button class="btn btn-secondary" onclick="downloadPDF()">
|
||||
<i class="fas fa-download"></i>
|
||||
Tải xuống PDF
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="sendEmail()">
|
||||
<i class="fas fa-envelope"></i>
|
||||
Gửi qua Email
|
||||
</button>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Toast Notification -->
|
||||
<div id="toast" class="toast"></div>
|
||||
|
||||
<script>
|
||||
// Show toast notification
|
||||
function showToast(message, type = 'success') {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.textContent = message;
|
||||
toast.className = `toast ${type} show`;
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Download PDF function
|
||||
function downloadPDF() {
|
||||
showToast('Đang tải xuống hóa đơn PDF...', 'success');
|
||||
|
||||
// Simulate PDF download
|
||||
setTimeout(() => {
|
||||
showToast('Hóa đơn đã được tải xuống thành công!', 'success');
|
||||
|
||||
// In a real app, this would trigger actual PDF download
|
||||
// window.location.href = '/api/invoices/INV20240001/download';
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Send Email function
|
||||
function sendEmail() {
|
||||
showToast('Đang gửi hóa đơn qua email...', 'success');
|
||||
|
||||
// Simulate email sending
|
||||
setTimeout(() => {
|
||||
showToast('Hóa đơn đã được gửi đến email: minhlong.org@gmail.com', 'success');
|
||||
|
||||
// In a real app, this would call API to send email
|
||||
// fetch('/api/invoices/INV20240001/send-email', { method: 'POST' })
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Share invoice function
|
||||
function shareInvoice() {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: 'Hóa đơn #INV20240001',
|
||||
text: 'Chi tiết hóa đơn EuroTile',
|
||||
url: window.location.href
|
||||
}).catch(err => console.log('Error sharing:', err));
|
||||
} else {
|
||||
// Fallback to copy link
|
||||
navigator.clipboard.writeText(window.location.href);
|
||||
showToast('Đã sao chép link hóa đơn!', 'success');
|
||||
}
|
||||
}
|
||||
|
||||
// Get invoice ID from URL parameter
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const invoiceId = urlParams.get('id') || 'INV20240001';
|
||||
|
||||
// Update page with invoice ID (in real app, would fetch from API)
|
||||
document.title = `Chi tiết Hóa đơn #${invoiceId} - EuroTile Worker`;
|
||||
document.querySelector('.invoice-number').textContent = `#${invoiceId}`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
351
html/invoice-list.html
Normal file
351
html/invoice-list.html
Normal file
@@ -0,0 +1,351 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hóa đơn đã mua - 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>
|
||||
.invoices-container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: #f8fafc;
|
||||
min-height: calc(100vh - 120px);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.invoice-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.invoice-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.invoice-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.invoice-codes {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.invoice-id {
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.invoice-date {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.invoice-status {
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-paid {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-unpaid {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.status-partial {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.invoice-details {
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.invoice-detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.invoice-detail-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.invoice-detail-label {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.invoice-detail-value {
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.invoice-detail-value.total {
|
||||
color: #dc2626;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.invoice-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.invoice-company {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.invoice-arrow {
|
||||
color: #9ca3af;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 64px;
|
||||
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) {
|
||||
.invoices-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.invoice-card {
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<a href="account.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Hóa đơn đã mua</h1>
|
||||
<div style="width: 32px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="invoices-container">
|
||||
<!-- Invoice Card 1 - Paid -->
|
||||
<div class="invoice-card" onclick="window.location.href='invoice-detail.html?id=INV20240001'">
|
||||
<div class="invoice-header">
|
||||
<div class="invoice-codes">
|
||||
<div class="invoice-id">#INV20240001</div>
|
||||
<div class="invoice-date">Ngày xuất: 03/08/2024</div>
|
||||
</div>
|
||||
<span class="invoice-status status-paid">Đã thanh toán</span>
|
||||
</div>
|
||||
|
||||
<div class="invoice-details">
|
||||
<div class="invoice-detail-row">
|
||||
<span class="invoice-detail-label">Đơn hàng:</span>
|
||||
<span class="invoice-detail-value">#DH001234</span>
|
||||
</div>
|
||||
<div class="invoice-detail-row">
|
||||
<span class="invoice-detail-label">Tổng tiền:</span>
|
||||
<span class="invoice-detail-value total">12.771.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div class="invoice-footer">
|
||||
<div class="invoice-company">
|
||||
<i class="fas fa-building"></i>
|
||||
<span>Lê Hoàng Hiệp</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right invoice-arrow"></i>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<!-- Invoice Card 2 - Partial -->
|
||||
<div class="invoice-card" onclick="window.location.href='invoice-detail.html?id=INV20240002'">
|
||||
<div class="invoice-header">
|
||||
<div class="invoice-codes">
|
||||
<div class="invoice-id">#INV20240002</div>
|
||||
<div class="invoice-date">Ngày xuất: 15/07/2024</div>
|
||||
</div>
|
||||
<span class="invoice-status status-partial">Thanh toán 1 phần</span>
|
||||
</div>
|
||||
|
||||
<div class="invoice-details">
|
||||
<div class="invoice-detail-row">
|
||||
<span class="invoice-detail-label">Đơn hàng:</span>
|
||||
<span class="invoice-detail-value">#DH001198</span>
|
||||
</div>
|
||||
<div class="invoice-detail-row">
|
||||
<span class="invoice-detail-label">Tổng tiền:</span>
|
||||
<span class="invoice-detail-value total">85.600.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div class="invoice-footer">
|
||||
<div class="invoice-company">
|
||||
<i class="fas fa-building"></i>
|
||||
<span>Công ty TNHH Xây dựng Minh Long</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right invoice-arrow"></i>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<!-- Invoice Card 3 - Paid -->
|
||||
<div class="invoice-card" onclick="window.location.href='invoice-detail.html?id=INV20240003'">
|
||||
<div class="invoice-header">
|
||||
<div class="invoice-codes">
|
||||
<div class="invoice-id">#INV20240003</div>
|
||||
<div class="invoice-date">Ngày xuất: 25/06/2024</div>
|
||||
</div>
|
||||
<span class="invoice-status status-paid">Đã thanh toán</span>
|
||||
</div>
|
||||
|
||||
<div class="invoice-details">
|
||||
<div class="invoice-detail-row">
|
||||
<span class="invoice-detail-label">Đơn hàng:</span>
|
||||
<span class="invoice-detail-value">#DH001087</span>
|
||||
</div>
|
||||
<div class="invoice-detail-row">
|
||||
<span class="invoice-detail-label">Tổng tiền:</span>
|
||||
<span class="invoice-detail-value total">42.500.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div class="invoice-footer">
|
||||
<div class="invoice-company">
|
||||
<i class="fas fa-building"></i>
|
||||
<span>Công ty TNHH Xây dựng Minh Long</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right invoice-arrow"></i>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<!-- Invoice Card 4 - Unpaid -->
|
||||
<div class="invoice-card" onclick="window.location.href='invoice-detail.html?id=INV20240004'">
|
||||
<div class="invoice-header">
|
||||
<div class="invoice-codes">
|
||||
<div class="invoice-id">#INV20240004</div>
|
||||
<div class="invoice-date">Ngày xuất: 10/06/2024</div>
|
||||
</div>
|
||||
<span class="invoice-status status-unpaid">Chưa thanh toán</span>
|
||||
</div>
|
||||
|
||||
<div class="invoice-details">
|
||||
<div class="invoice-detail-row">
|
||||
<span class="invoice-detail-label">Đơn hàng:</span>
|
||||
<span class="invoice-detail-value">#DH000945</span>
|
||||
</div>
|
||||
<div class="invoice-detail-row">
|
||||
<span class="invoice-detail-label">Tổng tiền:</span>
|
||||
<span class="invoice-detail-value total">28.300.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div class="invoice-footer">
|
||||
<div class="invoice-company">
|
||||
<i class="fas fa-building"></i>
|
||||
<span>Công ty TNHH Xây dựng Minh Long</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right invoice-arrow"></i>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<!-- Invoice Card 5 - Paid -->
|
||||
<div class="invoice-card" onclick="window.location.href='invoice-detail.html?id=INV20240005'">
|
||||
<div class="invoice-header">
|
||||
<div class="invoice-codes">
|
||||
<div class="invoice-id">#INV20240005</div>
|
||||
<div class="invoice-date">Ngày xuất: 15/05/2024</div>
|
||||
</div>
|
||||
<span class="invoice-status status-paid">Đã thanh toán</span>
|
||||
</div>
|
||||
|
||||
<div class="invoice-details">
|
||||
<div class="invoice-detail-row">
|
||||
<span class="invoice-detail-label">Đơn hàng:</span>
|
||||
<span class="invoice-detail-value">#DH000821</span>
|
||||
</div>
|
||||
<div class="invoice-detail-row">
|
||||
<span class="invoice-detail-label">Tổng tiền:</span>
|
||||
<span class="invoice-detail-value total">56.750.000đ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div class="invoice-footer">
|
||||
<div class="invoice-company">
|
||||
<i class="fas fa-building"></i>
|
||||
<span>Công ty TNHH Xây dựng Minh Long</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right invoice-arrow"></i>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Add animation to cards on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
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