270 lines
11 KiB
HTML
270 lines
11 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 Dự á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>
|
|
.tab-item.active {
|
|
background: var(--primary-blue);
|
|
color: var(--white);
|
|
</style>
|
|
</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 Dự án</h1>
|
|
<button class="back-button" onclick="createNewProject()">
|
|
<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ã dự án hoặc tên dự án" id="searchInput" onkeyup="filterProjects()">
|
|
</div>
|
|
|
|
<!-- Status Filters -->
|
|
<div class="tab-nav mb-3">
|
|
<button class="tab-item active" data-status="">Tất cả</button>
|
|
<button class="tab-item" data-status="pending">Chờ duyệt</button>
|
|
<button class="tab-item" data-status="approved">Đã duyệt</button>
|
|
<button class="tab-item" data-status="rejected">Bị từ chối</button>
|
|
</div>
|
|
|
|
<!-- Projects List -->
|
|
<div class="orders-list" id="projectsList">
|
|
<!-- Projects will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// Sample project data
|
|
const projectsData = [
|
|
{
|
|
id: 'DA001',
|
|
name: 'Chung cư Vinhomes Grand Park - Block A1',
|
|
type: 'residential',
|
|
customer: 'Công ty TNHH Vingroup',
|
|
status: 'approved',
|
|
submittedDate: '2023-11-15',
|
|
approvedDate: '2023-11-20',
|
|
area: '2,500m²',
|
|
budget: '850,000,000',
|
|
progress: 75,
|
|
description: 'Gạch granite cao cấp cho khu vực lobby và hành lang'
|
|
},
|
|
{
|
|
id: 'DA002',
|
|
name: 'Trung tâm thương mại Bitexco',
|
|
type: 'commercial',
|
|
customer: 'Tập đoàn Bitexco',
|
|
status: 'pending',
|
|
submittedDate: '2023-11-25',
|
|
area: '8,000m²',
|
|
budget: '2,200,000,000',
|
|
progress: 25,
|
|
description: 'Gạch porcelain 80x80 cho sảnh chính và khu mua sắm'
|
|
},
|
|
{
|
|
id: 'DA003',
|
|
name: 'Biệt thự sinh thái Ecopark',
|
|
type: 'residential',
|
|
customer: 'Ecopark Group',
|
|
status: 'approved',
|
|
submittedDate: '2023-10-10',
|
|
approvedDate: '2023-10-15',
|
|
completedDate: '2023-11-30',
|
|
area: '1,200m²',
|
|
budget: '420,000,000',
|
|
progress: 100,
|
|
description: 'Gạch ceramic vân gỗ cho khu vực phòng khách và sân vườn'
|
|
},
|
|
{
|
|
id: 'DA004',
|
|
name: 'Nhà xưởng sản xuất ABC',
|
|
type: 'industrial',
|
|
customer: 'Công ty TNHH ABC Manufacturing',
|
|
status: 'rejected',
|
|
submittedDate: '2023-11-20',
|
|
rejectedDate: '2023-11-28',
|
|
area: '5,000m²',
|
|
budget: '1,500,000,000',
|
|
progress: 0,
|
|
rejectionReason: 'Thiếu giấy phép xây dựng và báo cáo tác động môi trường',
|
|
description: 'Gạch chống trơn cho khu vực sản xuất và kho bãi'
|
|
},
|
|
{
|
|
id: 'DA005',
|
|
name: 'Khách sạn 5 sao Diamond Plaza',
|
|
type: 'commercial',
|
|
customer: 'Diamond Hospitality Group',
|
|
status: 'pending',
|
|
submittedDate: '2023-12-01',
|
|
area: '12,000m²',
|
|
budget: '5,800,000,000',
|
|
progress: 10,
|
|
description: 'Gạch marble tự nhiên cho lobby và phòng suite'
|
|
},
|
|
{
|
|
id: 'DA006',
|
|
name: 'Khu đô thị thông minh Smart City',
|
|
type: 'residential',
|
|
customer: 'Smart City Development',
|
|
status: 'approved',
|
|
submittedDate: '2023-11-10',
|
|
approvedDate: '2023-11-18',
|
|
area: '25,000m²',
|
|
budget: '8,500,000,000',
|
|
progress: 45,
|
|
description: 'Gạch granite và ceramic cho toàn bộ khu vực công cộng'
|
|
}
|
|
];
|
|
|
|
let filteredProjects = [...projectsData];
|
|
let currentFilter = '';
|
|
|
|
// Initialize page
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setupTabNavigation();
|
|
renderProjects();
|
|
});
|
|
|
|
function setupTabNavigation() {
|
|
const tabItems = document.querySelectorAll('.tab-item');
|
|
|
|
tabItems.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
// Remove active class from all tabs
|
|
tabItems.forEach(t => t.classList.remove('active'));
|
|
|
|
// Add active class to clicked tab
|
|
this.classList.add('active');
|
|
|
|
// Update current filter
|
|
currentFilter = this.dataset.status || '';
|
|
|
|
// Filter and render projects
|
|
filterProjects();
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderProjects() {
|
|
const container = document.getElementById('projectsList');
|
|
|
|
if (filteredProjects.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state text-center py-16">
|
|
<i class="fas fa-folder-open text-4xl text-gray-300 mb-4"></i>
|
|
<h3 class="text-lg font-semibold text-gray-600 mb-2">Không có dự án nào</h3>
|
|
<p class="text-gray-500">Không tìm thấy dự án phù hợp với bộ lọc hiện tại</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = filteredProjects.map(project => `
|
|
<div class="order-card ${project.status}" onclick="viewProjectDetail('${project.id}')">
|
|
<div class="order-status-indicator"></div>
|
|
<div class="order-content">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<h4 class="order-id">#${project.id}</h4>
|
|
<!--<span class="order-amount">${formatCurrency(project.budget)}</span>-->
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<p class="order-customer">Tên công trình: ${project.name}</p>
|
|
<p class="order-date">Ngày nộp: ${formatDate(project.submittedDate)}</p>
|
|
<p class="order-customer">Diện tích: ${project.area}</p>
|
|
<p class="order-status-text">
|
|
<span class="status-badge ${project.status}">${getStatusText(project.status)}</span>
|
|
|
|
</p>
|
|
<!--<p class="order-note">${project.name} - Diện tích: ${project.area}</p>
|
|
${project.description ? `
|
|
<p class="text-xs text-gray-600 mt-1">${project.description}</p>-->
|
|
` : ''}
|
|
${project.status === 'rejected' && project.rejectionReason ? `
|
|
<p class="text-xs text-red-600 mt-2 bg-red-50 p-2 rounded">
|
|
<i class="fas fa-exclamation-triangle mr-1"></i>
|
|
${project.rejectionReason}
|
|
</p>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function getStatusText(status) {
|
|
const statusMap = {
|
|
'pending': 'Chờ duyệt',
|
|
'reviewing': 'Đang xem xét',
|
|
'approved': 'Đã duyệt',
|
|
'rejected': 'Bị từ chối',
|
|
'completed': 'Hoàn thành'
|
|
};
|
|
return statusMap[status] || status;
|
|
}
|
|
|
|
function filterProjects() {
|
|
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
|
|
|
filteredProjects = projectsData.filter(project => {
|
|
// Status filter
|
|
if (currentFilter && project.status !== currentFilter) {
|
|
return false;
|
|
}
|
|
|
|
// Search filter
|
|
if (searchTerm) {
|
|
const searchableText = `${project.name} ${project.id} ${project.customer}`.toLowerCase();
|
|
if (!searchableText.includes(searchTerm)) return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
renderProjects();
|
|
}
|
|
|
|
function viewProjectDetail(projectId) {
|
|
// Navigate to project detail page
|
|
localStorage.setItem('selectedProjectId', projectId);
|
|
window.location.href = 'project-submission-detail.html';
|
|
}
|
|
|
|
function createNewProject() {
|
|
// Navigate to new project creation page
|
|
window.location.href = 'project-submission.html';
|
|
}
|
|
|
|
// Utility functions
|
|
function formatCurrency(amount) {
|
|
const num = typeof amount === 'string' ? parseInt(amount) : amount;
|
|
return new Intl.NumberFormat('vi-VN', {
|
|
style: 'currency',
|
|
currency: 'VND',
|
|
minimumFractionDigits: 0
|
|
}).format(num);
|
|
}
|
|
|
|
function formatDate(dateString) {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('vi-VN');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |