document.addEventListener('DOMContentLoaded', () => {
// --- STATE MANAGEMENT ---
const state = {
currentView: 'dashboard', // 'dashboard', 'employees', 'recruitment', 'tasks', 'employeeProfile', 'leave'
currentEmployeeId: null,
modal: {
isOpen: false,
type: null,
},
mockData: {
employees: [
{id: 1, name: 'สมชาย ใจดี', position: 'Software Developer', department: 'Technology', avatar: 'สจ', startDate: '2022-01-15', email: 'somchai.j@example.com', phone: '081-234-5678'},
{id: 2, name: 'สมหญิง จริงใจ', position: 'HR Manager', department: 'Human Resources', avatar: 'สจ', startDate: '2021-06-01', email: 'somyhing.j@example.com', phone: '082-345-6789'},
{id: 3, name: 'มานี มีนา', position: 'Marketing', department: 'Marketing', avatar: 'มน', startDate: '2022-08-20', email: 'manee.m@example.com', phone: '083-456-7890'},
{id: 4, name: 'ปิติ ยินดี', position: 'Data Analyst', department: 'Technology', avatar: 'ปย', startDate: '2023-02-10', email: 'piti.y@example.com', phone: '084-567-8901'},
{id: 5, name: 'เอบีซี ดีอีเอฟ', position: 'Sales', department: 'Sales', avatar: 'อด', startDate: '2022-11-05', email: 'abc.d@example.com', phone: '085-678-9012'},
{id: 6, name: 'สุดา พาเพลิน', position: 'Accountant', department: 'Finance', avatar: 'สพ', startDate: '2020-03-30', email: 'suda.p@example.com', phone: '086-789-0123'},
{id: 7, name: 'ดวงดี มีโชค', position: 'Software Developer', department: 'Technology', avatar: 'ดม', startDate: '2023-07-19', email: 'duangdee.m@example.com', phone: '087-890-1234'},
],
leaveRequests: [
{id: 1, employeeId: 1, employeeName: 'สมชาย ใจดี', type: 'ลาป่วย (Sick Leave)', startDate: '2023-11-20', endDate: '2023-11-21', status: 'pending'},
{id: 2, employeeId: 3, employeeName: 'มานี มีนา', type: 'ลากิจ (Personal Leave)', startDate: '2023-11-25', endDate: '2023-11-25', status: 'pending'},
{id: 3, employeeId: 4, employeeName: 'ปิติ ยินดี', type: 'ลาพักร้อน (Annual Leave)', startDate: '2023-12-01', endDate: '2023-12-05', status: 'approved'},
{id: 4, employeeId: 6, employeeName: 'สุดา พาเพลิน', type: 'ลาป่วย (Sick Leave)', startDate: '2023-11-15', endDate: '2023-11-15', status: 'rejected'},
],
candidates: [
{id: 1, name: 'วีระ กล้าหาญ', position: 'Software Developer', status: 'interview', date: '2023-10-15'},
{id: 2, name: 'ใจดี มีสุข', position: 'Project Manager', status: 'hired', date: '2023-10-20'},
{id: 3, name: 'เมตตา กรุณา', position: 'UX/UI Designer', status: 'new', date: '2023-11-01'},
{id: 4, name: 'กล้าณรงค์ วงศ์ดี', position: 'Data Analyst', status: 'new', date: '2023-11-05'},
{id: 5, name: 'ทักษิณ ชินวัตร', position: 'Sales', status: 'interview', date: '2023-11-10'},
],
tasks: [
{id: 1, name: 'สัมภาษณ์งานคุณวีระ', completed: false},
{id: 2, name: 'เตรียมเอกสารสัญญาจ้างคุณใจดี', completed: true},
]
}
};
// --- DOM Elements ---
const appContent = document.getElementById('app-content');
const desktopContent = document.getElementById('desktop-content');
const headerTitle = document.getElementById('header-title');
const modalContainer = document.createElement('div');
modalContainer.id = 'modal-container';
document.body.appendChild(modalContainer);
// --- NAVIGATION SETUP ---
function setupNavigation() {
// Desktop navigation
const desktopNavItems = document.querySelectorAll('.desktop-nav .nav-item');
desktopNavItems.forEach(item => {
item.addEventListener('click', (e) => {
const viewName = e.target.closest('.nav-item').id.replace('nav-', '');
navigateTo(viewName);
});
});
// Mobile navigation
const mobileNavItems = document.querySelectorAll('.mobile-nav .nav-button');
mobileNavItems.forEach(item => {
item.addEventListener('click', (e) => {
const viewName = e.target.closest('.nav-button').id.replace('nav-', '').replace('-mobile', '');
navigateTo(viewName);
});
});
}
function navigateTo(viewName) {
state.currentView = viewName;
render();
}
// Setup navigation on load
setupNavigation();
// --- TEMPLATING ENGINE ---
async function fetchTemplate(path) {
const response = await fetch(path);
if (!response.ok) throw new Error(`Template not found: ${path}`);
return await response.text();
}
function interpolate(template, data) {
return template.replace(/\{\{([^}]+)\}\}/g, (match, key) => data[key.trim()] || '');
}
// --- DATA MANIPULATION ---
function addEmployee(name, position) {
const newId = state.mockData.employees.length > 0 ? Math.max(...state.mockData.employees.map(e => e.id)) + 1 : 1;
const avatar = name.split(' ').map(n => n[0]).join('').toUpperCase();
const department = 'General'; // Default department
state.mockData.employees.push({
id: newId,
name,
position,
department,
avatar,
startDate: new Date().toISOString().split('T')[0],
email: `${name.toLowerCase().replace(' ', '.')}@company.com`,
phone: '0XX-XXX-XXXX'
});
showNotification(`เพิ่มพนักงาน ${name} เรียบร้อยแล้ว`, 'success');
}
function addCandidate(name, position) {
const newId = state.mockData.candidates.length > 0 ? Math.max(...state.mockData.candidates.map(c => c.id)) + 1 : 1;
state.mockData.candidates.push({
id: newId,
name,
position,
status: 'new',
date: new Date().toISOString().split('T')[0]
});
showNotification(`เพิ่มผู้สมัคร ${name} เรียบร้อยแล้ว`, 'success');
}
function addTask(name) {
const newId = state.mockData.tasks.length > 0 ? Math.max(...state.mockData.tasks.map(t => t.id)) + 1 : 1;
state.mockData.tasks.push({id: newId, name, completed: false});
showNotification(`เพิ่มงาน "${name}" เรียบร้อยแล้ว`, 'success');
}
function toggleTask(taskId) {
const task = state.mockData.tasks.find(t => t.id === taskId);
if (task) {
task.completed = !task.completed;
showNotification(
`งาน "${task.name}" ${task.completed ? 'เสร็จสิ้น' : 'ยกเลิกการเสร็จสิ้น'}แล้ว`,
task.completed ? 'success' : 'info'
);
}
}
function approveLeave(leaveId) {
const request = state.mockData.leaveRequests.find(r => r.id === leaveId);
if (request) {
request.status = 'approved';
showNotification(`อนุมัติการลาของ ${request.employeeName} เรียบร้อยแล้ว`, 'success');
}
}
function rejectLeave(leaveId) {
const request = state.mockData.leaveRequests.find(r => r.id === leaveId);
if (request) {
request.status = 'rejected';
showNotification(`ปฏิเสธการลาของ ${request.employeeName} เรียบร้อยแล้ว`, 'info');
}
}
function updateModalVisibility() {
const modalContainer = document.getElementById('modal-container');
if (!modalContainer) return;
if (state.modal && state.modal.isOpen) {
modalContainer.classList.remove('hidden');
document.body.classList.add('modal-open');
} else {
modalContainer.classList.add('hidden');
document.body.classList.remove('modal-open');
}
}
// --- RENDER FUNCTIONS ---
async function render() {
// Update header title
const titleMap = {
'dashboard': 'Dashboard',
'employees': 'พนักงาน',
'recruitment': 'สรรหาบุคลากร',
'tasks': 'งาน',
'leave': 'การลา',
'employeeProfile': 'ข้อมูลพนักงาน'
};
headerTitle.textContent = titleMap[state.currentView] || state.currentView;
// Update navigation states
document.querySelectorAll('.nav-button, .nav-item').forEach(btn => btn.classList.remove('active'));
// Update desktop nav
const desktopNavItem = document.getElementById(`nav-${state.currentView}`);
if (desktopNavItem) desktopNavItem.classList.add('active');
// Update mobile nav
const mobileNavItem = document.getElementById(`nav-${state.currentView}-mobile`);
if (mobileNavItem) mobileNavItem.classList.add('active');
// Clear content areas before rendering new content
if (appContent) appContent.innerHTML = '';
if (desktopContent) desktopContent.innerHTML = '';
// Render content based on current view
switch (state.currentView) {
case 'dashboard': await renderDashboard(); break;
case 'employees': await renderEmployees(); break;
case 'recruitment': await renderRecruitment(); break;
case 'tasks': await renderTasks(); break;
case 'employeeProfile': await renderEmployeeProfile(); break;
case 'leave': await renderLeave(); break;
}
await renderModal();
updateModalVisibility();
}
async function renderDashboard() {
const {employees, candidates, tasks} = state.mockData;
const template = await fetchTemplate('templates/dashboard.html');
// Summary Cards Data
const summaryItems = [
{number: employees.length, label: 'พนักงานทั้งหมด'},
{number: candidates.filter(c => c.status === 'new').length, label: 'ผู้สมัครใหม่'},
{number: tasks.filter(t => !t.completed).length, label: 'งานที่ต้องทำ'},
{number: state.mockData.leaveRequests.filter(r => r.status === 'pending').length, label: 'รออนุมัติลา'}
];
const summary_items_html = summaryItems.map(item =>
`<div class="summary-card">
<div class="number">${item.number}</div>
<div class="label">${item.label}</div>
</div>`
).join('');
// Task List Data
const urgentTasks = tasks.filter(t => !t.completed);
const task_list_html = urgentTasks.map(task => `
<div class="leave-request-item task-item" data-task-id="${task.id}" data-action="toggleTask">
<div class="leave-info">
<div class="name">${task.name}</div>
<div class="leave-type">งานที่รอดำเนินการ</div>
</div>
<button class="button-approve" onclick="toggleTask(${task.id}); render();">
<i class="fas fa-check"></i> เสร็จแล้ว
</button>
</div>
`).join('') || '<div class="text-center text-secondary"><i class="fas fa-check-circle"></i><br>ไม่มีงานค้างที่ต้องทำ</div>';
// Render the template for both mobile and desktop
const contentHtml = interpolate(template, {
summary_items: summary_items_html,
task_list: task_list_html,
urgent_count: urgentTasks.length
});
if (appContent) appContent.innerHTML = contentHtml;
if (desktopContent) desktopContent.innerHTML = contentHtml;
// --- Chart Rendering ---
// This needs to run AFTER the canvas elements are in the DOM
renderDepartmentChart();
renderCandidateChart();
}
function renderDepartmentChart() {
const ctx = document.getElementById('departmentChart')?.getContext('2d');
if (!ctx) return;
const departmentCounts = state.mockData.employees.reduce((acc, emp) => {
acc[emp.department] = (acc[emp.department] || 0) + 1;
return acc;
}, {});
new Chart(ctx, {
type: 'pie',
data: {
labels: Object.keys(departmentCounts),
datasets: [{
label: 'พนักงาน',
data: Object.values(departmentCounts),
backgroundColor: ['#4a90e2', '#50e3c2', '#f5a623', '#bd10e0', '#9013fe'],
hoverOffset: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
position: 'top',
}
}
}
});
}
function renderCandidateChart() {
const ctx = document.getElementById('candidateChart')?.getContext('2d');
if (!ctx) return;
const candidateCountsByMonth = state.mockData.candidates.reduce((acc, can) => {
const month = new Date(can.date).toLocaleString('default', {month: 'short'});
acc[month] = (acc[month] || 0) + 1;
return acc;
}, {});
const sortedMonths = Object.keys(candidateCountsByMonth).sort((a, b) =>
new Date(`1 ${a} 2023`) - new Date(`1 ${b} 2023`));
const sortedCounts = sortedMonths.map(month => candidateCountsByMonth[month]);
new Chart(ctx, {
type: 'bar',
data: {
labels: sortedMonths,
datasets: [{
label: 'จำนวนผู้สมัคร',
data: sortedCounts,
backgroundColor: '#50e3c2',
borderColor: '#4a90e2',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
responsive: true,
maintainAspectRatio: true,
}
});
}
async function renderEmployees() {
const template = await fetchTemplate('templates/employees.html');
const employee_list_html = state.mockData.employees.map(emp => `
<div class="employee-card" data-action="viewProfile" data-employee-id="${emp.id}">
<div class="employee-info">
<div class="employee-avatar">${emp.avatar}</div>
<div class="employee-details">
<h3>${emp.name}</h3>
<p><i class="fas fa-briefcase"></i> ${emp.position}</p>
<p><i class="fas fa-building"></i> ${emp.department}</p>
</div>
</div>
</div>
`).join('');
const contentHtml = interpolate(template, {employee_list: employee_list_html});
if (appContent) appContent.innerHTML = contentHtml;
if (desktopContent) desktopContent.innerHTML = contentHtml;
}
async function renderEmployeeProfile() {
const employee = state.mockData.employees.find(e => e.id === state.currentEmployeeId);
if (!employee) {
// Handle case where employee not found, maybe redirect to employee list
state.currentView = 'employees';
await render();
return;
}
const template = await fetchTemplate('templates/employee-profile.html');
const contentHtml = interpolate(template, employee);
if (appContent) appContent.innerHTML = contentHtml;
if (desktopContent) desktopContent.innerHTML = contentHtml;
}
async function renderRecruitment() {
const template = await fetchTemplate('templates/recruitment.html');
const getStatusText = (status) => {
switch (status) {
case 'new': return 'ใหม่';
case 'interview': return 'สัมภาษณ์';
case 'hired': return 'รับเข้าทำงาน';
default: return status;
}
};
const candidate_list_html = state.mockData.candidates.map(can => `
<div class="candidate-card">
<div class="candidate-header">
<div class="candidate-info">
<h3>${can.name}</h3>
<p><i class="fas fa-briefcase"></i> ${can.position}</p>
<p><i class="fas fa-calendar"></i> วันที่สมัคร: ${can.date}</p>
</div>
<span class="candidate-status ${can.status}">${getStatusText(can.status)}</span>
</div>
</div>
`).join('');
const contentHtml = interpolate(template, {candidate_list: candidate_list_html});
if (appContent) appContent.innerHTML = contentHtml;
if (desktopContent) desktopContent.innerHTML = contentHtml;
}
async function renderLeave() {
const template = await fetchTemplate('templates/leave.html');
const pendingCount = state.mockData.leaveRequests.filter(req => req.status === 'pending').length;
const getStatusText = (status) => {
switch (status) {
case 'pending': return 'รออนุมัติ';
case 'approved': return 'อนุมัติแล้ว';
case 'rejected': return 'ปฏิเสธ';
default: return status;
}
};
const leave_requests_html = state.mockData.leaveRequests.map(req => {
let actionsOrStatus;
if (req.status === 'pending') {
actionsOrStatus = `
<div class="leave-actions">
<button class="button-approve" data-action="approveLeave" data-leave-id="${req.id}">
<i class="fas fa-check"></i> อนุมัติ
</button>
<button class="button-reject" data-action="rejectLeave" data-leave-id="${req.id}">
<i class="fas fa-times"></i> ปฏิเสธ
</button>
</div>
`;
} else {
actionsOrStatus = `<span class="leave-status ${req.status}">${getStatusText(req.status)}</span>`;
}
return `
<div class="leave-request-item">
<div class="leave-info">
<div class="name">${req.employeeName}</div>
<div class="leave-type">${req.type}</div>
<div class="leave-date"><i class="fas fa-calendar"></i> ${req.startDate} ถึง ${req.endDate}</div>
</div>
${actionsOrStatus}
</div>
`;
}).join('');
const contentHtml = interpolate(template, {
leave_requests: leave_requests_html,
pending_count: pendingCount
});
if (appContent) appContent.innerHTML = contentHtml;
if (desktopContent) desktopContent.innerHTML = contentHtml;
}
async function renderTasks() {
const template = await fetchTemplate('templates/tasks.html');
const task_list_html = state.mockData.tasks.map(task => `
<div class="task-item ${task.completed ? 'completed' : ''}" data-action="toggleTask" data-task-id="${task.id}">
<div class="leave-info">
<div class="name">
<i class="far ${task.completed ? 'fa-check-square' : 'fa-square'}" style="margin-right: 0.5rem; color: var(--primary-color);"></i>
${task.name}
</div>
<div class="leave-type">${task.completed ? 'เสร็จแล้ว' : 'รอดำเนินการ'}</div>
</div>
${!task.completed ? '<button class="button-primary" onclick="toggleTask(' + task.id + '); render();"><i class="fas fa-check"></i> เสร็จแล้ว</button>' : '<span class="badge badge-success">เสร็จแล้ว</span>'}
</div>
`).join('');
const contentHtml = interpolate(template, {task_list: task_list_html});
if (appContent) appContent.innerHTML = contentHtml;
if (desktopContent) desktopContent.innerHTML = contentHtml;
}
async function renderModal() {
if (!state.modal.isOpen) {
modalContainer.innerHTML = '';
updateModalVisibility();
return;
}
const template = await fetchTemplate('templates/modal.html');
let title, formContent;
switch (state.modal.type) {
case 'addEmployee':
title = 'เพิ่มพนักงานใหม่';
formContent = `
<div class="form-group"><label for="employee-name">ชื่อ-สกุล</label><input type="text" id="employee-name" required></div>
<div class="form-group"><label for="employee-position">ตำแหน่ง</label><input type="text" id="employee-position" required></div>`;
break;
case 'addCandidate':
title = 'เพิ่มผู้สมัครใหม่';
formContent = `
<div class="form-group"><label for="candidate-name">ชื่อ-สกุล</label><input type="text" id="candidate-name" required></div>
<div class="form-group"><label for="candidate-position">ตำแหน่งที่สมัคร</label><input type="text" id="candidate-position" required></div>`;
break;
case 'addTask':
title = 'เพิ่มงานใหม่';
formContent = `<div class="form-group"><label for="task-name">ชื่องาน</label><input type="text" id="task-name" required></div>`;
break;
default: return;
}
modalContainer.innerHTML = interpolate(template, {modal_title: title, form_content: formContent});
updateModalVisibility();
}
// --- EVENT LISTENERS ---
appContent.addEventListener('click', (e) => {
const target = e.target.closest('[data-action]');
if (!target) return;
const {action, modalType, taskId, employeeId, leaveId} = target.dataset;
switch (action) {
case 'openModal':
state.modal.isOpen = true;
state.modal.type = modalType;
break;
case 'toggleTask':
toggleTask(parseInt(taskId));
break;
case 'viewProfile':
state.currentView = 'employeeProfile';
state.currentEmployeeId = parseInt(employeeId);
break;
case 'backToEmployees':
state.currentView = 'employees';
state.currentEmployeeId = null;
break;
case 'approveLeave':
approveLeave(parseInt(leaveId));
break;
case 'rejectLeave':
rejectLeave(parseInt(leaveId));
break;
}
render();
});
// Event listener for desktop content
if (desktopContent) {
desktopContent.addEventListener('click', (e) => {
const target = e.target.closest('[data-action]');
if (!target) return;
const {action, modalType, taskId, employeeId, leaveId} = target.dataset;
switch (action) {
case 'openModal':
state.modal.isOpen = true;
state.modal.type = modalType;
break;
case 'toggleTask':
toggleTask(parseInt(taskId));
break;
case 'viewProfile':
state.currentView = 'employeeProfile';
state.currentEmployeeId = parseInt(employeeId);
break;
case 'backToEmployees':
state.currentView = 'employees';
state.currentEmployeeId = null;
break;
case 'approveLeave':
approveLeave(parseInt(leaveId));
break;
case 'rejectLeave':
rejectLeave(parseInt(leaveId));
break;
}
render();
});
}
modalContainer.addEventListener('click', (e) => {
const target = e.target;
if (target.dataset.action === 'closeModal' || target.classList.contains('modal-overlay')) {
state.modal.isOpen = false;
render();
updateModalVisibility();
}
});
modalContainer.addEventListener('submit', (e) => {
e.preventDefault();
if (e.target.id === 'modal-form') {
switch (state.modal.type) {
case 'addEmployee':
addEmployee(document.getElementById('employee-name').value, document.getElementById('employee-position').value);
break;
case 'addCandidate':
addCandidate(document.getElementById('candidate-name').value, document.getElementById('candidate-position').value);
break;
case 'addTask':
addTask(document.getElementById('task-name').value);
break;
}
state.modal.isOpen = false;
render();
}
});
// Add global functions to window for inline onclick handlers
window.toggleTask = toggleTask;
window.approveLeave = approveLeave;
window.rejectLeave = rejectLeave;
// Enhanced event delegation for better performance
document.addEventListener('click', (e) => {
const action = e.target.closest('[data-action]')?.dataset.action;
if (!action) return;
const target = e.target.closest('[data-action]');
switch (action) {
case 'openModal':
state.modal.isOpen = true;
state.modal.type = target.dataset.modalType;
render();
break;
case 'closeModal':
state.modal.isOpen = false;
state.modal.type = null;
render();
break;
case 'viewProfile':
state.currentEmployeeId = parseInt(target.dataset.employeeId);
state.currentView = 'employeeProfile';
render();
break;
case 'toggleTask':
toggleTask(parseInt(target.dataset.taskId));
render();
break;
case 'approveLeave':
approveLeave(parseInt(target.dataset.leaveId));
render();
break;
case 'rejectLeave':
rejectLeave(parseInt(target.dataset.leaveId));
render();
break;
}
});
// Add form submission handling
document.addEventListener('submit', (e) => {
e.preventDefault();
const form = e.target;
if (form.id === 'modal-form') {
handleFormSubmission();
}
});
function handleFormSubmission() {
const formType = state.modal.type;
switch (formType) {
case 'addEmployee':
const empName = document.getElementById('employee-name').value;
const empPosition = document.getElementById('employee-position').value;
if (empName && empPosition) {
addEmployee(empName, empPosition);
state.modal.isOpen = false;
state.modal.type = null;
render();
}
break;
case 'addCandidate':
const canName = document.getElementById('candidate-name').value;
const canPosition = document.getElementById('candidate-position').value;
if (canName && canPosition) {
addCandidate(canName, canPosition);
state.modal.isOpen = false;
state.modal.type = null;
render();
}
break;
case 'addTask':
const taskName = document.getElementById('task-name').value;
if (taskName) {
addTask(taskName);
state.modal.isOpen = false;
state.modal.type = null;
render();
}
break;
}
}
// Add search functionality
document.addEventListener('input', (e) => {
if (e.target.classList.contains('search-input')) {
handleSearch(e.target.value);
}
});
function handleSearch(query) {
// Simple search implementation - could be enhanced
const searchableElements = document.querySelectorAll('.employee-card, .candidate-card, .task-item, .leave-request-item');
searchableElements.forEach(element => {
const text = element.textContent.toLowerCase();
const shouldShow = text.includes(query.toLowerCase());
element.style.display = shouldShow ? '' : 'none';
});
}
// Add keyboard navigation
document.addEventListener('keydown', (e) => {
// ESC key to close modal
if (e.key === 'Escape' && state.modal.isOpen) {
state.modal.isOpen = false;
state.modal.type = null;
render();
updateModalVisibility();
}
// Number keys for quick navigation (1-5)
if (e.key >= '1' && e.key <= '5' && !e.target.matches('input, textarea')) {
const views = ['dashboard', 'employees', 'recruitment', 'tasks', 'leave'];
const viewIndex = parseInt(e.key) - 1;
if (views[viewIndex]) {
navigateTo(views[viewIndex]);
}
}
});
// Add loading states for better UX
function showLoading(element) {
element.classList.add('loading-state');
}
function hideLoading(element) {
element.classList.remove('loading-state');
}
// Add notification system
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `notification notification-${type}`;
notification.innerHTML = `
<div class="notification-content">
<i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
<span>${message}</span>
</div>
`;
document.body.appendChild(notification);
// Auto remove after 4 seconds
setTimeout(() => {
notification.style.animation = 'fadeOut 0.3s ease-out forwards';
setTimeout(() => notification.remove(), 300);
}, 4000);
}
// --- INITIAL RENDER ---
render();
});