diff --git a/html/order-detail.html b/html/order-detail.html index d09852c..ab010a3 100644 --- a/html/order-detail.html +++ b/html/order-detail.html @@ -16,14 +16,16 @@

Chi tiết đơn hàng

-
+
+ +
@@ -46,22 +48,33 @@
+
+
+ + +
+
+
Xác nhận đơn hàng
+
03/08/2023 - 10:15
+
+
+
-
Đã xác nhận đơn hàng
-
03/08/2023 - 10:15 (Đang xử lý)
+
Xử lý
+
Chuẩn bị hàng và vận chuyển
- +
-
Đã hoàn thành
+
Hoàn thành
Dự kiến: 07/08/2023
@@ -69,11 +82,11 @@ -
+ +
- +
@@ -120,55 +133,179 @@
- + --> -
-

Thông tin khách hàng

-
-
- Tên khách hàng: - Nguyễn Văn A + +
+

Thông tin giao hàng

+ + + + + +
+ + +
+ + + + Cập nhật + +
+ + + +
+
+
Hoàng Minh Hiệp
+
0347302911
+
+ 123 Đường Võ Văn Ngân, Phường Linh Chiểu, + Thành phố Thủ Đức, TP.HCM +
+
+
+ + +
+ + + + +
+ +
07/08/2025
+ + +
+ +
+ +
Giao hàng trong giờ hành chính. Vui lòng gọi trước 30 phút khi đến giao hàng
+ +
+ +
-

Thông tin hóa đơn

-
+ +
+

+ + Thông tin hóa đơn +

+ + + Cập nhật + +
+ +
+ +
+
+
Công ty TNHH Xây dựng Minh Long
+
Mã số thuế: 0134000687
+
Số điện thoại: 0339797979
+
Email: minhlong.org@gmail.com
+
+ Địa chỉ: 11 Đường Hoàng Hữu Nam, Phường Linh Chiểu, + Thành phố Thủ Đức, TP.HCM +
+
+
+ +
+ + + + +
+ +
+

Hóa đơn đã xuất

+ +
+ +
+
+ +
+
+
#INV20240001
+
Ngày xuất: 03/08/2024 - 10:00
+
+
12.771.000đ
+ +
@@ -249,10 +386,11 @@ Phương thức thanh toán:
-
Chuyển khoản ngân hàng
+
Thanh toán một phần
+ -
+ +
+ + + +
+
+

+ + Lịch sử thanh toán +

+ +
+ +
+
+ +
+
+
#PAY20240001
+ +
03/08/2024 - 14:30
+
+
6.385.500đ
+ +
+ + +
+
+ +
+
+
#PAY20240002
+ +
05/08/2024 - 09:15
+
+
6.385.500đ
+ +
+ +
+ Còn lại: + 10.000.000đ +
+
+ +
+ + + +
+ + +
+
- + @@ -683,6 +883,14 @@ font-size: 14px; } + .detail-card { + background: white; + border-radius: 12px; + padding: 20px; + box-shadow: 0 2px 8px rgba(0,0,0,0.08); + margin-bottom: 20px; + } + /* Action Buttons */ .order-actions { position: fixed; @@ -731,6 +939,200 @@ } /* Mobile Responsiveness */ + /* Invoices List Styles */ + .invoices-list { + display: flex; + flex-direction: column; + gap: 12px; + } + + .invoice-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px; + border: 1px solid var(--border-color); + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + } + + .invoice-item:hover { + border-color: var(--primary-blue); + background: #F0F7FF; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15); + } + + .invoice-item-icon { + width: 40px; + height: 40px; + background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); + color: white; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + } + + .invoice-item-content { + flex: 1; + } + + .invoice-item-title { + font-weight: 600; + color: var(--text-dark); + font-size: 14px; + margin-bottom: 2px; + } + + .invoice-item-subtitle { + font-size: 12px; + color: var(--text-light); + } + + .invoice-item-amount { + font-weight: 700; + color: #dc2626; + font-size: 14px; + text-align: right; + } + + .invoice-item-arrow { + color: var(--text-light); + font-size: 14px; + } + + .history-item { + cursor: pointer; + transition: all 0.3s ease; + } + + .history-item:hover { + background: #f8fafc; + border-radius: 8px; + transform: translateX(4px); + } + + /* Payment Modal Styles */ + .payment-modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 1000; + align-items: center; + justify-content: center; + padding: 20px; + } + + .payment-modal.active { + display: flex; + } + + .payment-modal-content { + background: white; + border-radius: 16px; + max-width: 500px; + width: 100%; + max-height: 90vh; + overflow-y: auto; + animation: slideUp 0.3s ease; + } + + @keyframes slideUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + .payment-modal-header { + padding: 20px; + border-bottom: 1px solid #e5e7eb; + display: flex; + justify-content: space-between; + align-items: center; + } + + .payment-modal-header h3 { + font-size: 18px; + font-weight: 700; + color: #1f2937; + margin: 0; + } + + .payment-modal-close { + width: 32px; + height: 32px; + border-radius: 50%; + background: #f3f4f6; + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + } + + .payment-modal-close:hover { + background: #e5e7eb; + } + + .payment-modal-body { + padding: 20px; + } + + .payment-detail-row { + display: flex; + justify-content: space-between; + padding: 12px 0; + border-bottom: 1px solid #f3f4f6; + } + + .payment-detail-row:last-child { + border-bottom: none; + } + + .payment-detail-label { + color: #6b7280; + font-size: 14px; + } + + .payment-detail-value { + color: #1f2937; + font-weight: 600; + font-size: 14px; + text-align: right; + } + + .payment-detail-value.amount { + color: #065f46; + font-size: 18px; + font-weight: 700; + } + + .payment-receipt-image { + margin-top: 20px; + border-radius: 8px; + overflow: hidden; + border: 1px solid #e5e7eb; + } + + .payment-receipt-image img { + width: 100%; + height: auto; + display: block; + } + @media (max-width: 480px) { .status-timeline-card, .delivery-info-card, @@ -763,7 +1165,7 @@ .date-item, .customer-row, .summary-row { - flex-direction: column; + /*flex-direction: column;*/ align-items: flex-start; gap: 4px; } @@ -775,10 +1177,393 @@ text-align: left; font-size: 14px; } + + .payment-modal-content { + margin: 20px; + max-height: calc(100vh - 40px); + } + + .invoice-item-amount { + font-size: 13px; + } + } + + + +
+
+
+

Chi tiết thanh toán

+ +
+
+
+ Mã giao dịch: + +
+
+ Thời gian: + +
+
+ Phương thức: + +
+
+ Mã tham chiếu: + +
+
+ Số tiền: + +
+ +
+
+
+