148 lines
6.9 KiB
HTML
148 lines
6.9 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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html> |