buihao/timekeeper-pro-digital-gatekeeper
0
1 2// Sample data for appointments with past, current and future dates3const appointments = [4 {5 id: 1,6 name: "Nguyễn Văn A",7 cccd: "123456789012",8 company: "Công ty ABC",9 phone: "0901234567",10 date: new Date(Date.now() - 86400000).toISOString(), // Yesterday11 meetWith: "Phòng Kế toán",12 reason: "Họp về hợp đồng",13 note: "Mang theo tài liệu",14 status: "past"15 },16 {17 id: 2,18 name: "Trần Thị B",19 cccd: "987654321098",20 company: "Công ty XYZ",21 phone: "0987654321",22 date: new Date(Date.now() + 3600000).toISOString(), // In 1 hour23 meetWith: "Phòng Nhân sự",24 reason: "Phỏng vấn",25 note: "Đã xác nhận",26 status: "current"27 },28 {29 id: 3,30 name: "Lê Văn C",31 cccd: "456789012345",32 company: "Công ty DEF",33 phone: "0912345678",34 date: new Date(Date.now() + 86400000).toISOString(), // Tomorrow35 meetWith: "Phòng Kỹ thuật",36 reason: "Bảo trì hệ thống",37 note: "Liên hệ trước 30 phút",38 status: "upcoming"39 },40 {41 id: 4,42 name: "Phạm Thị D",43 cccd: "654321098765",44 company: "Công ty GHI",45 phone: "0976543210",46 date: new Date(Date.now() - 172800000).toISOString(), // 2 days ago47 meetWith: "Phòng Kinh doanh",48 reason: "Đàm phán hợp đồng",49 note: "Không",50 status: "past"51 },52 {53 id: 5,54 name: "Hoàng Văn E",55 cccd: "789012345678",56 company: "Công ty JKL",57 phone: "0965432109",58 date: new Date(Date.now() + 259200000).toISOString(), // 3 days from now59 meetWith: "Phòng Giám đốc",60 reason: "Báo cáo tài chính",61 note: "Chuẩn bị báo cáo chi tiết",62 status: "upcoming"63 },64 {65 id: 6,66 name: "Võ Thị F",67 cccd: "321098765432",68 company: "Công ty MNO",69 phone: "0932109876",70 date: new Date().toISOString(), // Right now71 meetWith: "Phòng Marketing",72 reason: "Họp chiến dịch",73 note: "Đang diễn ra",74 status: "current"75 },76 {77 id: 7,78 name: "Đặng Văn G",79 cccd: "210987654321",80 company: "Công ty PQR",81 phone: "0943210987",82 date: new Date(Date.now() - 3600000).toISOString(), // 1 hour ago83 meetWith: "Phòng IT",84 reason: "Sự cố hệ thống",85 note: "Đã hoàn thành",86 status: "past"87 },88 {89 id: 8,90 name: "Bùi Thị H",91 cccd: "109876543210",92 company: "Công ty STU",93 phone: "0954321098",94 date: new Date(Date.now() + 7200000).toISOString(), // In 2 hours95 meetWith: "Phòng Kế hoạch",96 reason: "Đánh giá dự án",97 note: "Chuẩn bị slide",98 status: "upcoming"99 }100];101// Load appointments into table102function loadAppointments() {103 const tableBody = document.getElementById('appointmentTable');104 tableBody.innerHTML = '';105 106 // Update status based on current time107 const now = new Date();108 appointments.forEach(appointment => {109 const apptDate = new Date(appointment.date);110 if (apptDate < now) {111 appointment.status = 'past';112 } else if (apptDate > now && apptDate < new Date(now.getTime() + 3600000)) { // Within next hour113 appointment.status = 'current';114 } else {115 appointment.status = 'upcoming';116 }117 });118 119 // Sort appointments by date (newest first)120 const sortedAppointments = [...appointments].sort((a, b) => {121 return new Date(a.date) - new Date(b.date);122 });123 124 sortedAppointments.forEach((appointment, index) => {125 const row = document.createElement('tr');126 let rowClass = 'hover:bg-gray-50 ';127 128 if (appointment.status === 'upcoming') {129 rowClass += 'bg-blue-50';130 } else if (appointment.status === 'current') {131 rowClass += 'bg-green-50 border-l-4 border-green-500';132 } else {133 rowClass += 'bg-gray-50 text-gray-400';134 }135 136 row.className = rowClass;137row.innerHTML = `138 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${index + 1}</td>139 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${appointment.name}</td>140 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${appointment.cccd}</td>141 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${appointment.company}</td>142 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${appointment.phone}</td>143 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatDateTime(appointment.date)}</td>144 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${appointment.meetWith}</td>145 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${appointment.reason}</td>146 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${appointment.note}</td>147 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">148 <div class="flex space-x-2">149 <button class="btn-warning flex items-center">150 <i data-feather="edit" class="w-4 h-4"></i>151 </button>152 <button class="btn-danger flex items-center">153 <i data-feather="trash-2" class="w-4 h-4"></i>154 </button>155 </div>156 </td>157 `;158 159 tableBody.appendChild(row);160 });161 162 feather.replace();163}164 165// Format date time166function formatDateTime(dateTimeString) {167 const date = new Date(dateTimeString);168 return date.toLocaleDateString('vi-VN') + ' ' + date.toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit' });169}170 171// Search functionality172document.querySelector('input[type="text"]').addEventListener('input', function(e) {173 const searchTerm = e.target.value.toLowerCase();174 const rows = document.querySelectorAll('#appointmentTable tr');175 176 rows.forEach(row => {177 const text = row.textContent.toLowerCase();178 row.style.display = text.includes(searchTerm) ? '' : 'none';179 });180});