176 lines
8.1 KiB
HTML
176 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Danh sách đơn hàng - 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">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="index.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Danh sách đơn hàng</h1>
|
|
<button class="back-button">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</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ã đơn hàng">
|
|
</div>
|
|
|
|
<!-- Status Filters -->
|
|
<div class="tab-nav mb-3">
|
|
<button class="tab-item active">Tất cả</button>
|
|
<button class="tab-item">Chờ xác nhận</button>
|
|
<button class="tab-item">Đang xử lý</button>
|
|
<button class="tab-item">Đang giao</button>
|
|
<button class="tab-item">Hoàn thành</button>
|
|
<button class="tab-item">Đã hủy</button>
|
|
</div>
|
|
|
|
<!-- Orders List -->
|
|
<div class="orders-list">
|
|
<!-- Order Item 1 - Processing -->
|
|
<div class="order-card processing" onclick="viewOrderDetail('DH001234')">
|
|
<div class="order-status-indicator"></div>
|
|
<div class="order-content">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<h4 class="order-id">#DH001234</h4>
|
|
<span class="order-amount">12.900.000 VND</span>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<p class="order-date">Ngày đặt: 03/08/2023</p>
|
|
<p class="order-customer">Khách hàng: Nguyễn Văn A</p>
|
|
<p class="order-status-text">
|
|
<span class="status-badge processing">Đang xử lý</span>
|
|
</p>
|
|
<p class="order-note">Gạch granite 60x60 - Số lượng: 50m²</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Item 2 - Completed -->
|
|
<div class="order-card completed" onclick="viewOrderDetail('DH001233')">
|
|
<div class="order-status-indicator"></div>
|
|
<div class="order-content">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<h4 class="order-id">#DH001233</h4>
|
|
<span class="order-amount">8.500.000 VND</span>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<p class="order-date">Ngày đặt: 02/08/2023</p>
|
|
<p class="order-customer">Khách hàng: Trần Thị B</p>
|
|
<p class="order-status-text">
|
|
<span class="status-badge completed">Hoàn thành</span>
|
|
</p>
|
|
<p class="order-note">Gạch ceramic 30x30 - Số lượng: 80m²</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Item 3 - Shipping -->
|
|
<div class="order-card shipping" onclick="viewOrderDetail('DH001232')">
|
|
<div class="order-status-indicator"></div>
|
|
<div class="order-content">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<h4 class="order-id">#DH001232</h4>
|
|
<span class="order-amount">15.200.000 VND</span>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<p class="order-date">Ngày đặt: 01/08/2023</p>
|
|
<p class="order-customer">Khách hàng: Lê Văn C</p>
|
|
<p class="order-status-text">
|
|
<span class="status-badge shipping">Đang giao</span>
|
|
</p>
|
|
<p class="order-note">Gạch porcelain 80x80 - Số lượng: 100m²</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Item 4 - Pending -->
|
|
<div class="order-card pending" onclick="viewOrderDetail('DH001231')">
|
|
<div class="order-status-indicator"></div>
|
|
<div class="order-content">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<h4 class="order-id">#DH001231</h4>
|
|
<span class="order-amount">6.750.000 VND</span>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<p class="order-date">Ngày đặt: 31/07/2023</p>
|
|
<p class="order-customer">Khách hàng: Phạm Thị D</p>
|
|
<p class="order-status-text">
|
|
<span class="status-badge pending">Chờ xác nhận</span>
|
|
</p>
|
|
<p class="order-note">Gạch mosaic 25x25 - Số lượng: 40m²</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Item 5 - Cancelled -->
|
|
<div class="order-card cancelled" onclick="viewOrderDetail('DH001230')">
|
|
<div class="order-status-indicator"></div>
|
|
<div class="order-content">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<h4 class="order-id">#DH001230</h4>
|
|
<span class="order-amount">3.200.000 VND</span>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<p class="order-date">Ngày đặt: 30/07/2023</p>
|
|
<p class="order-customer">Khách hàng: Hoàng Văn E</p>
|
|
<p class="order-status-text">
|
|
<span class="status-badge cancelled">Đã hủy</span>
|
|
</p>
|
|
<p class="order-note">Gạch terrazzo 40x40 - Số lượng: 20m²</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<div class="bottom-nav">
|
|
<a href="index.html" class="nav-item active">
|
|
<i class="fas fa-home"></i>
|
|
<span>Trang chủ</span>
|
|
</a>
|
|
<a href="loyalty.html" class="nav-item">
|
|
<i class="fas fa-star"></i>
|
|
<span>Hội viên</span>
|
|
</a>
|
|
<a href="promotions.html" class="nav-item">
|
|
<i class="fas fa-tags"></i>
|
|
<span>Khuyến mãi</span>
|
|
</a>
|
|
<a href="notifications.html" class="nav-item">
|
|
<i class="fas fa-bell"></i>
|
|
<span>Thông báo</span>
|
|
</a>
|
|
<a href="account.html" class="nav-item">
|
|
<i class="fas fa-user"></i>
|
|
<span>Cài đặt</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function viewOrderDetail(orderId) {
|
|
window.location.href = `order-detail.html?id=${orderId}`;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |