pray4skylark
1480 lines
66 KiB
TypeScript
1480 lines
66 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Search, Plus, MoreHorizontal, X, Pencil, Trash2, AlertTriangle, Upload, Camera, Link as LinkIcon, Clock, MapPin, Briefcase } from 'lucide-react';
|
|
import employeeService from '@/services/employeeService';
|
|
import apiClient from '@/services/apiClient';
|
|
import { useCommonCodes } from '@/hooks/useCommonCodes';
|
|
import { useAuthStore } from '@/stores';
|
|
import type { Employee, RoleCode, EmpStatus, DispatchStatus, DispatchHistory, Project, EquipmentAssignment } from '@/types';
|
|
|
|
const statusColor: Record<string, string> = {
|
|
ACTIVE: 'bg-status-resolved-bg text-status-resolved-text',
|
|
ON_LEAVE: 'bg-status-pending-bg text-status-pending-text',
|
|
RESIGNED: 'bg-status-critical-bg text-status-critical-text',
|
|
};
|
|
|
|
const initialColors = ['bg-indigo-500', 'bg-purple-500', 'bg-blue-500', 'bg-green-500', 'bg-orange-500', 'bg-pink-500'];
|
|
|
|
function getInitialColor(name: string, index: number) {
|
|
return initialColors[index % initialColors.length];
|
|
}
|
|
|
|
export default function EmployeesPage() {
|
|
const [filter, setFilter] = useState('all');
|
|
const [employees, setEmployees] = useState<Employee[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const router = useRouter();
|
|
const { user } = useAuthStore();
|
|
|
|
const { codes: empStatusCodes, loading: statusCodesLoading } = useCommonCodes('EMP_STATUS');
|
|
const { codes: empRoleCodes, loading: roleCodesLoading } = useCommonCodes('EMP_ROLE');
|
|
|
|
const roleLabel = roleCodesLoading ? {} : Object.fromEntries(empRoleCodes.map((c) => [c.codeValue, c.codeName]));
|
|
|
|
// Add Employee Modal State
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [modalError, setModalError] = useState<string | null>(null);
|
|
const [formData, setFormData] = useState({
|
|
loginId: '',
|
|
name: '',
|
|
email: '',
|
|
roleCode: 'EMPLOYEE' as RoleCode,
|
|
empStatus: 'ACTIVE' as EmpStatus,
|
|
dispatchStatus: 'WAITING' as DispatchStatus,
|
|
});
|
|
|
|
// Edit Modal State
|
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
|
const [isUpdating, setIsUpdating] = useState(false);
|
|
const [editModalError, setEditModalError] = useState<string | null>(null);
|
|
const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);
|
|
|
|
// Edit Modal - Section data
|
|
const [editBasic, setEditBasic] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
joinedDate: '',
|
|
birthDate: '',
|
|
education: '',
|
|
major: '',
|
|
graduationDate: '',
|
|
residence: '',
|
|
profileImage: '',
|
|
});
|
|
const [editStatus, setEditStatus] = useState({
|
|
empStatus: 'ACTIVE' as EmpStatus,
|
|
leftDate: '',
|
|
});
|
|
const [editRole, setEditRole] = useState<RoleCode>('EMPLOYEE');
|
|
const [editDispatchStatus, setEditDispatchStatus] = useState<DispatchStatus>('WAITING');
|
|
|
|
// Edit Modal - Fetched data
|
|
const [equipmentList, setEquipmentList] = useState<EquipmentAssignment[]>([]);
|
|
const [dispatchHistories, setDispatchHistories] = useState<DispatchHistory[]>([]);
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
const [editLoading, setEditLoading] = useState(false);
|
|
|
|
// Profile image upload
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// Confirmation dialogs within edit modal
|
|
const [showRoleConfirm, setShowRoleConfirm] = useState(false);
|
|
const [pendingRole, setPendingRole] = useState<RoleCode | null>(null);
|
|
const [showStatusConfirm, setShowStatusConfirm] = useState(false);
|
|
const [pendingStatus, setPendingStatus] = useState<EmpStatus | null>(null);
|
|
|
|
// Delete Confirmation State
|
|
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
|
const [deletingEmployee, setDeletingEmployee] = useState<Employee | null>(null);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
|
|
const fetchEmployees = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const res = await employeeService.getAll({ size: 100 });
|
|
setEmployees(res.data.content);
|
|
setError(null);
|
|
} catch (err) {
|
|
setError('Failed to load employees. Please try again.');
|
|
console.error(err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
|
|
if (user.roleCode === 'EMPLOYEE') {
|
|
setError('Only managers and admins can view employee list.');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
fetchEmployees();
|
|
}, [user]);
|
|
|
|
const handleOpenModal = () => {
|
|
setIsModalOpen(true);
|
|
setFormData({
|
|
loginId: '',
|
|
name: '',
|
|
email: '',
|
|
roleCode: 'EMPLOYEE',
|
|
empStatus: 'ACTIVE',
|
|
dispatchStatus: 'WAITING',
|
|
});
|
|
setModalError(null);
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setIsModalOpen(false);
|
|
setFormData({
|
|
loginId: '',
|
|
name: '',
|
|
email: '',
|
|
roleCode: 'EMPLOYEE',
|
|
empStatus: 'ACTIVE',
|
|
dispatchStatus: 'WAITING',
|
|
});
|
|
setModalError(null);
|
|
};
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!formData.loginId.trim() || !formData.name.trim()) {
|
|
setModalError('Login ID and Name are required.');
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
setModalError(null);
|
|
|
|
try {
|
|
await employeeService.create(formData);
|
|
alert('Employee added successfully!');
|
|
handleCloseModal();
|
|
await fetchEmployees();
|
|
} catch (err: any) {
|
|
setModalError(err.response?.data?.message || 'Failed to add employee. Please try again.');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
// Edit handlers
|
|
const handleEdit = async (emp: Employee) => {
|
|
setEditingEmployee(emp);
|
|
setEditModalError(null);
|
|
setEditLoading(true);
|
|
|
|
// Populate basic info
|
|
setEditBasic({
|
|
name: emp.name,
|
|
email: emp.email || '',
|
|
phone: emp.phone || '',
|
|
joinedDate: emp.joinedDate || '',
|
|
birthDate: emp.birthDate || '',
|
|
education: emp.education || '',
|
|
major: emp.major || '',
|
|
graduationDate: emp.graduationDate || '',
|
|
residence: emp.residence || '',
|
|
profileImage: emp.profileImage || '',
|
|
});
|
|
setEditStatus({
|
|
empStatus: emp.empStatus,
|
|
leftDate: emp.leftDate || '',
|
|
});
|
|
setEditRole(emp.roleCode);
|
|
setEditDispatchStatus(emp.dispatchStatus);
|
|
|
|
// Fetch related data in parallel
|
|
try {
|
|
const [equipRes, dispatchRes, projectsRes] = await Promise.allSettled([
|
|
apiClient.get<any>(`/employees/${emp.empId}/equipment`),
|
|
employeeService.getDispatchHistories(emp.empId),
|
|
apiClient.get<any>('/projects'),
|
|
]);
|
|
|
|
if (equipRes.status === 'fulfilled' && equipRes.value.success) {
|
|
setEquipmentList(equipRes.value.data || []);
|
|
} else {
|
|
setEquipmentList([]);
|
|
}
|
|
|
|
if (dispatchRes.status === 'fulfilled' && dispatchRes.value.success) {
|
|
setDispatchHistories(dispatchRes.value.data || []);
|
|
} else {
|
|
setDispatchHistories([]);
|
|
}
|
|
|
|
if (projectsRes.status === 'fulfilled' && projectsRes.value.success) {
|
|
setProjects(projectsRes.value.data || []);
|
|
} else {
|
|
setProjects([]);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load edit modal data:', err);
|
|
} finally {
|
|
setEditLoading(false);
|
|
}
|
|
|
|
setIsEditModalOpen(true);
|
|
};
|
|
|
|
const handleCloseEditModal = () => {
|
|
setIsEditModalOpen(false);
|
|
setEditingEmployee(null);
|
|
setEditModalError(null);
|
|
setEquipmentList([]);
|
|
setDispatchHistories([]);
|
|
setProjects([]);
|
|
setShowRoleConfirm(false);
|
|
setShowStatusConfirm(false);
|
|
setPendingRole(null);
|
|
setPendingStatus(null);
|
|
};
|
|
|
|
const handleBasicInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const { name, value } = e.target;
|
|
setEditBasic((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleProfileImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file || !editingEmployee) return;
|
|
|
|
try {
|
|
const form = new FormData();
|
|
form.append('file', file);
|
|
const uploadRes = await fetch('/api/v1/files/upload', { method: 'POST', body: form });
|
|
const uploadData = await uploadRes.json();
|
|
if (uploadData.success && uploadData.data) {
|
|
await employeeService.updateProfileImage(editingEmployee.empId, uploadData.data);
|
|
setEditBasic((prev) => ({ ...prev, profileImage: uploadData.data }));
|
|
// Update local employee list
|
|
setEmployees((prev) =>
|
|
prev.map((emp) =>
|
|
emp.empId === editingEmployee.empId ? { ...emp, profileImage: uploadData.data } : emp
|
|
)
|
|
);
|
|
}
|
|
} catch (err: any) {
|
|
setEditModalError(err.message || 'Failed to upload profile image.');
|
|
}
|
|
// Reset input
|
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
|
};
|
|
|
|
const handleRemoveProfileImage = async () => {
|
|
if (!editingEmployee) return;
|
|
try {
|
|
await employeeService.updateProfileImage(editingEmployee.empId, '');
|
|
setEditBasic((prev) => ({ ...prev, profileImage: '' }));
|
|
setEmployees((prev) =>
|
|
prev.map((emp) =>
|
|
emp.empId === editingEmployee.empId ? { ...emp, profileImage: null } : emp
|
|
)
|
|
);
|
|
} catch (err: any) {
|
|
setEditModalError(err.message || 'Failed to remove profile image.');
|
|
}
|
|
};
|
|
|
|
const handleSaveBasicInfo = async () => {
|
|
if (!editingEmployee) return;
|
|
if (!editBasic.name.trim()) {
|
|
setEditModalError('Name is required.');
|
|
return;
|
|
}
|
|
|
|
setIsUpdating(true);
|
|
setEditModalError(null);
|
|
|
|
try {
|
|
const updateData: Record<string, unknown> = {
|
|
name: editBasic.name,
|
|
email: editBasic.email,
|
|
phone: editBasic.phone,
|
|
joinedDate: editBasic.joinedDate,
|
|
birthDate: editBasic.birthDate,
|
|
education: editBasic.education,
|
|
major: editBasic.major,
|
|
graduationDate: editBasic.graduationDate,
|
|
residence: editBasic.residence,
|
|
profileImage: editBasic.profileImage,
|
|
};
|
|
await employeeService.update(editingEmployee.empId, updateData as Partial<Employee>);
|
|
// Update local list
|
|
setEmployees((prev) =>
|
|
prev.map((emp) =>
|
|
emp.empId === editingEmployee.empId
|
|
? { ...emp, ...editBasic, profileImage: editBasic.profileImage }
|
|
: emp
|
|
)
|
|
);
|
|
alert('Basic information updated successfully!');
|
|
} catch (err: any) {
|
|
setEditModalError(err.message || 'Failed to update basic information.');
|
|
} finally {
|
|
setIsUpdating(false);
|
|
}
|
|
};
|
|
|
|
const handleSaveStatus = async () => {
|
|
if (!editingEmployee) return;
|
|
|
|
if (editStatus.empStatus === 'RESIGNED' && !editStatus.leftDate) {
|
|
setEditModalError('Left date is required when changing to RESIGNED status.');
|
|
return;
|
|
}
|
|
|
|
setIsUpdating(true);
|
|
setEditModalError(null);
|
|
|
|
try {
|
|
await apiClient.put(`/employees/${editingEmployee.empId}/status`, {
|
|
empStatus: editStatus.empStatus,
|
|
leftDate: editStatus.empStatus === 'RESIGNED' ? editStatus.leftDate : null,
|
|
});
|
|
setEmployees((prev) =>
|
|
prev.map((emp) =>
|
|
emp.empId === editingEmployee.empId
|
|
? { ...emp, empStatus: editStatus.empStatus, leftDate: editStatus.empStatus === 'RESIGNED' ? editStatus.leftDate : null }
|
|
: emp
|
|
)
|
|
);
|
|
setShowStatusConfirm(false);
|
|
setPendingStatus(null);
|
|
alert('Employee status updated successfully!');
|
|
} catch (err: any) {
|
|
setEditModalError(err.message || 'Failed to update employee status.');
|
|
} finally {
|
|
setIsUpdating(false);
|
|
}
|
|
};
|
|
|
|
const handleStatusChange = (newStatus: EmpStatus) => {
|
|
if (newStatus === editingEmployee?.empStatus) return;
|
|
if (newStatus === 'RESIGNED') {
|
|
setPendingStatus(newStatus);
|
|
setShowStatusConfirm(true);
|
|
} else {
|
|
setEditStatus((prev) => ({ ...prev, empStatus: newStatus }));
|
|
// Auto-save for non-resigned changes
|
|
setEditStatus((prev) => ({ ...prev, empStatus: newStatus }));
|
|
// Trigger save
|
|
setTimeout(() => {
|
|
handleSaveStatus();
|
|
}, 0);
|
|
}
|
|
};
|
|
|
|
const confirmStatusChange = () => {
|
|
if (pendingStatus) {
|
|
setEditStatus((prev) => ({ ...prev, empStatus: pendingStatus }));
|
|
setShowStatusConfirm(false);
|
|
setTimeout(() => {
|
|
handleSaveStatus();
|
|
}, 0);
|
|
}
|
|
};
|
|
|
|
const handleRoleChange = (newRole: RoleCode) => {
|
|
if (newRole === editingEmployee?.roleCode) return;
|
|
setPendingRole(newRole);
|
|
setShowRoleConfirm(true);
|
|
};
|
|
|
|
const confirmRoleChange = async () => {
|
|
if (!editingEmployee || !pendingRole) return;
|
|
setIsUpdating(true);
|
|
setEditModalError(null);
|
|
setShowRoleConfirm(false);
|
|
|
|
try {
|
|
await apiClient.put(`/employees/${editingEmployee.empId}/role`, { roleCode: pendingRole });
|
|
setEditRole(pendingRole);
|
|
setEmployees((prev) =>
|
|
prev.map((emp) =>
|
|
emp.empId === editingEmployee.empId ? { ...emp, roleCode: pendingRole! } : emp
|
|
)
|
|
);
|
|
alert('Role updated successfully!');
|
|
} catch (err: any) {
|
|
setEditModalError(err.message || 'Failed to update role.');
|
|
} finally {
|
|
setIsUpdating(false);
|
|
setPendingRole(null);
|
|
}
|
|
};
|
|
|
|
const handleDispatchStatusChange = async (newStatus: DispatchStatus) => {
|
|
if (!editingEmployee || newStatus === editingEmployee.dispatchStatus) return;
|
|
setIsUpdating(true);
|
|
setEditModalError(null);
|
|
|
|
try {
|
|
await apiClient.put(`/employees/${editingEmployee.empId}/dispatch-status`, { dispatchStatus: newStatus });
|
|
setEditDispatchStatus(newStatus);
|
|
setEmployees((prev) =>
|
|
prev.map((emp) =>
|
|
emp.empId === editingEmployee.empId ? { ...emp, dispatchStatus: newStatus } : emp
|
|
)
|
|
);
|
|
} catch (err: any) {
|
|
setEditModalError(err.message || 'Failed to update dispatch status.');
|
|
} finally {
|
|
setIsUpdating(false);
|
|
}
|
|
};
|
|
|
|
// Delete handlers
|
|
const handleDelete = (emp: Employee) => {
|
|
setDeletingEmployee(emp);
|
|
setIsDeleteDialogOpen(true);
|
|
};
|
|
|
|
const handleCloseDeleteDialog = () => {
|
|
setIsDeleteDialogOpen(false);
|
|
setDeletingEmployee(null);
|
|
};
|
|
|
|
const handleDeleteConfirm = async () => {
|
|
if (!deletingEmployee) return;
|
|
|
|
setIsDeleting(true);
|
|
|
|
try {
|
|
await employeeService.delete(deletingEmployee.empId);
|
|
alert('Employee deleted successfully!');
|
|
handleCloseDeleteDialog();
|
|
await fetchEmployees();
|
|
} catch (err: any) {
|
|
alert(err.response?.data?.message || 'Failed to delete employee. Please try again.');
|
|
handleCloseDeleteDialog();
|
|
} finally {
|
|
setIsDeleting(false);
|
|
}
|
|
};
|
|
|
|
const [skillKeyword, setSkillKeyword] = useState('');
|
|
const [skillResults, setSkillResults] = useState<Employee[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (!skillKeyword.trim()) { setSkillResults([]); return; }
|
|
const timer = setTimeout(() => {
|
|
employeeService.search(skillKeyword.trim()).then((res) => {
|
|
const empIds = new Set(res.data.map((r: any) => r.empId));
|
|
setSkillResults(employees.filter((e) => empIds.has(e.empId)));
|
|
}).catch(() => {});
|
|
}, 300);
|
|
return () => clearTimeout(timer);
|
|
}, [skillKeyword, employees]);
|
|
|
|
const displayList = skillKeyword.trim() ? skillResults : employees;
|
|
const filtered = filter === 'all' ? displayList : displayList.filter((e) => e.empStatus === filter);
|
|
|
|
const stats = [
|
|
{ label: '전체', value: employees.length, color: 'text-text-main' },
|
|
{ label: '재직', value: employees.filter((e) => e.empStatus === 'ACTIVE').length, color: 'text-status-resolved-text' },
|
|
{ label: '파견중', value: employees.filter((e) => e.dispatchStatus === 'DISPATCHED').length, color: 'text-status-pending-text' },
|
|
{ label: '휴직', value: employees.filter((e) => e.empStatus === 'ON_LEAVE').length, color: 'text-status-critical-text' },
|
|
];
|
|
|
|
const formatDate = (dateStr: string | null) => {
|
|
if (!dateStr) return '-';
|
|
return new Date(dateStr).toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit' });
|
|
};
|
|
|
|
const currentDispatch = dispatchHistories.find((d) => !d.endDate) || null;
|
|
const pastDispatches = dispatchHistories.filter((d) => d.endDate);
|
|
|
|
const getProjectById = (projectId: number) => {
|
|
return projects.find((p) => p.projectId === projectId) || null;
|
|
};
|
|
|
|
// Add Employee Modal
|
|
if (isModalOpen) {
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
|
<div className="bg-surface rounded-2xl shadow-xl max-w-md w-full mx-4 p-6 relative animate-in fade-in zoom-in duration-200">
|
|
<button
|
|
onClick={handleCloseModal}
|
|
className="absolute top-4 right-4 p-1.5 text-text-muted hover:text-text-main hover:bg-gray-100 rounded-lg transition-all"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
|
|
<h3 className="font-outfit text-xl font-semibold text-text-main mb-1">Add Employee</h3>
|
|
<p className="text-text-muted text-sm mb-6">Create a new employee account</p>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">
|
|
Login ID <span className="text-status-critical-text">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="loginId"
|
|
value={formData.loginId}
|
|
onChange={handleInputChange}
|
|
required
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
placeholder="Enter login ID"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">
|
|
Name <span className="text-status-critical-text">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleInputChange}
|
|
required
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
placeholder="Enter full name"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">Email</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
placeholder="email@example.com"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">Role</label>
|
|
<select
|
|
name="roleCode"
|
|
value={formData.roleCode}
|
|
onChange={handleInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
>
|
|
{roleCodesLoading ? (
|
|
<option value="">Loading roles...</option>
|
|
) : (
|
|
empRoleCodes.map((code) => (
|
|
<option key={code.codeValue} value={code.codeValue}>
|
|
{code.codeName} ({code.codeValue})
|
|
</option>
|
|
))
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">Employee Status</label>
|
|
<select
|
|
name="empStatus"
|
|
value={formData.empStatus}
|
|
onChange={handleInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
>
|
|
{statusCodesLoading ? (
|
|
<option value="">Loading status...</option>
|
|
) : (
|
|
empStatusCodes.map((code) => (
|
|
<option key={code.codeValue} value={code.codeValue}>
|
|
{code.codeName} ({code.codeValue})
|
|
</option>
|
|
))
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-main mb-1.5">Dispatch Status</label>
|
|
<select
|
|
name="dispatchStatus"
|
|
value={formData.dispatchStatus}
|
|
onChange={handleInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
>
|
|
<option value="WAITING">대기 (WAITING)</option>
|
|
<option value="DISPATCHED">파견중 (DISPATCHED)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{modalError && (
|
|
<div className="bg-status-critical-bg border border-status-critical text-status-critical-text rounded-xl px-4 py-3 text-sm">
|
|
{modalError}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={handleCloseModal}
|
|
disabled={isSubmitting}
|
|
className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="flex-1 px-4 py-2.5 rounded-xl bg-primary hover:bg-primary-hover text-white text-sm font-semibold shadow-soft transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isSubmitting ? 'Adding...' : 'Add Employee'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Edit Employee Modal - REDESIGNED
|
|
if (isEditModalOpen) {
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 backdrop-blur-sm overflow-y-auto">
|
|
<div className="bg-surface rounded-2xl shadow-xl max-w-3xl w-full mx-4 my-8 relative animate-in fade-in zoom-in duration-200">
|
|
{/* Header */}
|
|
<div className="sticky top-0 bg-surface rounded-t-2xl border-b border-border px-6 py-4 flex items-center justify-between z-10">
|
|
<div>
|
|
<h3 className="font-outfit text-xl font-semibold text-text-main">Edit Employee</h3>
|
|
<p className="text-text-muted text-sm">{editingEmployee?.name} ({editingEmployee?.loginId})</p>
|
|
</div>
|
|
<button
|
|
onClick={handleCloseEditModal}
|
|
className="p-1.5 text-text-muted hover:text-text-main hover:bg-gray-100 rounded-lg transition-all"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{editModalError && (
|
|
<div className="mx-6 mt-4 bg-status-critical-bg border border-status-critical text-status-critical-text rounded-xl px-4 py-3 text-sm">
|
|
{editModalError}
|
|
</div>
|
|
)}
|
|
|
|
{editLoading ? (
|
|
<div className="p-6 space-y-6">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="bg-white rounded-2xl border border-border p-5">
|
|
<div className="h-5 w-32 bg-gray-200 rounded mb-4 animate-pulse" />
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{[1, 2, 3, 4].map((j) => (
|
|
<div key={j} className="h-10 bg-gray-100 rounded-xl animate-pulse" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="p-6 space-y-6">
|
|
{/* SECTION 1: 기본 정보 */}
|
|
<div className="bg-white rounded-2xl border border-border p-5">
|
|
<h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
|
|
<span className="w-1.5 h-5 bg-primary rounded-full" />
|
|
기본 정보
|
|
</h4>
|
|
|
|
{/* Profile Image */}
|
|
<div className="flex items-center gap-4 mb-5">
|
|
<div className="relative">
|
|
{editBasic.profileImage ? (
|
|
<img
|
|
src={editBasic.profileImage}
|
|
alt={editBasic.name}
|
|
className="w-16 h-16 rounded-full object-cover border-2 border-border"
|
|
/>
|
|
) : (
|
|
<div className={`w-16 h-16 rounded-full ${getInitialColor(editBasic.name, 0)} flex items-center justify-center text-xl font-semibold text-white`}>
|
|
{editBasic.name[0]}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handleProfileImageUpload}
|
|
className="hidden"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className="flex items-center gap-1.5 px-3 py-2 rounded-xl border border-border text-sm font-medium text-text-main hover:bg-gray-50 transition-all"
|
|
>
|
|
<Camera className="w-4 h-4" />
|
|
Upload
|
|
</button>
|
|
{editBasic.profileImage && (
|
|
<button
|
|
type="button"
|
|
onClick={handleRemoveProfileImage}
|
|
className="flex items-center gap-1.5 px-3 py-2 rounded-xl border border-border text-sm font-medium text-status-critical-text hover:bg-red-50 transition-all"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
Remove
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Basic Info Fields */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Name *</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={editBasic.name}
|
|
onChange={handleBasicInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Email</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={editBasic.email}
|
|
onChange={handleBasicInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Phone</label>
|
|
<input
|
|
type="tel"
|
|
name="phone"
|
|
value={editBasic.phone}
|
|
onChange={handleBasicInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
placeholder="010-0000-0000"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Joined Date</label>
|
|
<input
|
|
type="date"
|
|
name="joinedDate"
|
|
value={editBasic.joinedDate}
|
|
onChange={handleBasicInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Birth Date</label>
|
|
<input
|
|
type="date"
|
|
name="birthDate"
|
|
value={editBasic.birthDate}
|
|
onChange={handleBasicInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Education</label>
|
|
<select
|
|
name="education"
|
|
value={editBasic.education}
|
|
onChange={handleBasicInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
>
|
|
<option value="">Select education</option>
|
|
<option value="HIGH_SCHOOL">High School</option>
|
|
<option value="ASSOCIATE">Associate</option>
|
|
<option value="BACHELOR">Bachelor</option>
|
|
<option value="MASTER">Master</option>
|
|
<option value="DOCTORATE">Doctorate</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Major</label>
|
|
<input
|
|
type="text"
|
|
name="major"
|
|
value={editBasic.major}
|
|
onChange={handleBasicInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Graduation Date</label>
|
|
<input
|
|
type="date"
|
|
name="graduationDate"
|
|
value={editBasic.graduationDate}
|
|
onChange={handleBasicInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
/>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Residence</label>
|
|
<input
|
|
type="text"
|
|
name="residence"
|
|
value={editBasic.residence}
|
|
onChange={handleBasicInputChange}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end mt-4 pt-4 border-t border-border">
|
|
<button
|
|
type="button"
|
|
onClick={handleSaveBasicInfo}
|
|
disabled={isUpdating}
|
|
className="px-5 py-2.5 rounded-xl bg-primary hover:bg-primary-hover text-white text-sm font-semibold shadow-soft transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isUpdating ? 'Saving...' : 'Save Basic Info'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SECTION 2: 상태 & 권한 */}
|
|
<div className="bg-white rounded-2xl border border-border p-5">
|
|
<h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
|
|
<span className="w-1.5 h-5 bg-secondary rounded-full" />
|
|
상태 & 권한
|
|
</h4>
|
|
|
|
<div className="grid grid-cols-3 gap-4">
|
|
{/* Employee Status */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Employee Status</label>
|
|
<select
|
|
value={editStatus.empStatus}
|
|
onChange={(e) => handleStatusChange(e.target.value as EmpStatus)}
|
|
className={`w-full px-3 py-2.5 rounded-xl border text-sm font-medium focus:outline-none focus:ring-2 transition-all ${
|
|
editStatus.empStatus === 'ACTIVE'
|
|
? 'bg-status-resolved-bg border-status-resolved text-status-resolved-text focus:ring-status-resolved'
|
|
: editStatus.empStatus === 'ON_LEAVE'
|
|
? 'bg-status-pending-bg border-status-pending text-status-pending-text focus:ring-status-pending'
|
|
: 'bg-status-critical-bg border-status-critical text-status-critical-text focus:ring-status-critical'
|
|
}`}
|
|
>
|
|
<option value="ACTIVE">재직 (ACTIVE)</option>
|
|
<option value="ON_LEAVE">휴직 (ON_LEAVE)</option>
|
|
<option value="RESIGNED">퇴사 (RESIGNED)</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Role */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Role</label>
|
|
<select
|
|
value={editRole}
|
|
onChange={(e) => handleRoleChange(e.target.value as RoleCode)}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
>
|
|
{roleCodesLoading ? (
|
|
<option value="">Loading...</option>
|
|
) : (
|
|
empRoleCodes.map((code) => (
|
|
<option key={code.codeValue} value={code.codeValue}>
|
|
{code.codeName}
|
|
</option>
|
|
))
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Dispatch Status */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-text-muted mb-1">Dispatch Status</label>
|
|
<select
|
|
value={editDispatchStatus}
|
|
onChange={(e) => handleDispatchStatusChange(e.target.value as DispatchStatus)}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
|
|
>
|
|
<option value="WAITING">대기 (WAITING)</option>
|
|
<option value="DISPATCHED">파견중 (DISPATCHED)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Left Date (shown when RESIGNED) */}
|
|
{editStatus.empStatus === 'RESIGNED' && (
|
|
<div className="mt-4 p-4 bg-status-critical-bg rounded-xl border border-status-critical/20">
|
|
<label className="block text-xs font-medium text-status-critical-text mb-1">Left Date *</label>
|
|
<input
|
|
type="date"
|
|
value={editStatus.leftDate}
|
|
onChange={(e) => setEditStatus((prev) => ({ ...prev, leftDate: e.target.value }))}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-white border border-status-critical/30 text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-status-critical transition-all"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* SECTION 3: 현재 지급 장비 */}
|
|
<div className="bg-white rounded-2xl border border-border p-5">
|
|
<h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
|
|
<span className="w-1.5 h-5 bg-tertiary rounded-full" />
|
|
현재 지급 장비
|
|
</h4>
|
|
|
|
{equipmentList.length === 0 ? (
|
|
<div className="text-center py-6 text-text-muted text-sm">
|
|
No equipment currently assigned.
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-sm">
|
|
<thead>
|
|
<tr className="border-b border-border">
|
|
<th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">자산코드</th>
|
|
<th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">모델명</th>
|
|
<th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">제조사</th>
|
|
<th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">시리얼번호</th>
|
|
<th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">지급일</th>
|
|
<th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100">
|
|
{equipmentList
|
|
.filter((eq) => !eq.returnedDate)
|
|
.map((eq) => (
|
|
<tr key={eq.assignmentId} className="hover:bg-gray-50">
|
|
<td className="py-2.5 px-3 font-mono text-xs">{eq.equipment?.assetCode || '-'}</td>
|
|
<td className="py-2.5 px-3">{eq.equipment?.modelName || '-'}</td>
|
|
<td className="py-2.5 px-3">{eq.equipment?.manufacturer || '-'}</td>
|
|
<td className="py-2.5 px-3 font-mono text-xs">{eq.equipment?.serialNumber || '-'}</td>
|
|
<td className="py-2.5 px-3">{formatDate(eq.assignedDate)}</td>
|
|
<td className="py-2.5 px-3">
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-status-pending-bg text-status-pending-text">
|
|
사용중
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-3 flex items-center gap-1.5 text-xs text-text-muted">
|
|
<LinkIcon className="w-3.5 h-3.5" />
|
|
<button
|
|
onClick={() => router.push('/itam')}
|
|
className="text-primary hover:underline"
|
|
>
|
|
Manage equipment in ITAM →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SECTION 4: 파견 정보 */}
|
|
<div className="bg-white rounded-2xl border border-border p-5">
|
|
<h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
|
|
<span className="w-1.5 h-5 bg-status-open rounded-full" />
|
|
파견 정보
|
|
</h4>
|
|
|
|
{/* Current Dispatch */}
|
|
{currentDispatch ? (
|
|
<div className="mb-5 p-4 bg-status-open-bg rounded-xl border border-status-open/20">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Briefcase className="w-4 h-4 text-status-open" />
|
|
<span className="text-sm font-semibold text-text-main">현재 파견중</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
|
<div>
|
|
<span className="text-xs text-text-muted">프로젝트</span>
|
|
<p className="font-medium text-text-main">{currentDispatch.projectName || '-'}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-xs text-text-muted">역할</span>
|
|
<p className="font-medium text-text-main">{currentDispatch.roleTitle || '-'}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-xs text-text-muted">기간</span>
|
|
<p className="font-medium text-text-main">
|
|
{formatDate(currentDispatch.startDate)} ~ 진행중
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-xs text-text-muted">근무지</span>
|
|
<p className="font-medium text-text-main flex items-center gap-1">
|
|
<MapPin className="w-3 h-3" />
|
|
{getProjectById(currentDispatch.projectId)?.workAddress || '-'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="mb-5 p-4 bg-gray-50 rounded-xl text-center text-sm text-text-muted">
|
|
현재 파견된 프로젝트가 없습니다.
|
|
</div>
|
|
)}
|
|
|
|
{/* Dispatch History */}
|
|
{pastDispatches.length > 0 && (
|
|
<div>
|
|
<h5 className="text-sm font-semibold text-text-main mb-3 flex items-center gap-1.5">
|
|
<Clock className="w-4 h-4 text-text-muted" />
|
|
파견 이력 ({pastDispatches.length})
|
|
</h5>
|
|
<div className="space-y-2">
|
|
{pastDispatches.map((dh) => (
|
|
<div
|
|
key={dh.dispatchId}
|
|
className="flex items-center justify-between p-3 rounded-xl border border-border hover:bg-gray-50 transition-all"
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-text-main truncate">{dh.projectName || 'Project'}</p>
|
|
<p className="text-xs text-text-muted">{dh.roleTitle}</p>
|
|
</div>
|
|
<div className="text-right flex-shrink-0 ml-4">
|
|
<p className="text-xs text-text-muted">
|
|
{formatDate(dh.startDate)} ~ {formatDate(dh.endDate)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-3 flex items-center gap-1.5 text-xs text-text-muted">
|
|
<LinkIcon className="w-3.5 h-3.5" />
|
|
<button
|
|
onClick={() => router.push(`/profile/${editingEmployee?.empId}`)}
|
|
className="text-primary hover:underline"
|
|
>
|
|
View full portfolio →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Modal Footer */}
|
|
<div className="sticky bottom-0 bg-surface rounded-b-2xl border-t border-border px-6 py-4 flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={handleCloseEditModal}
|
|
disabled={isUpdating}
|
|
className="px-5 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all disabled:opacity-50"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Role Change Confirmation Dialog */}
|
|
{showRoleConfirm && (
|
|
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
|
<div className="bg-surface rounded-2xl shadow-xl max-w-sm w-full mx-4 p-6 animate-in fade-in zoom-in duration-200">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 rounded-full bg-status-pending-bg flex items-center justify-center flex-shrink-0">
|
|
<AlertTriangle className="w-5 h-5 text-status-pending-text" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-outfit text-lg font-semibold text-text-main">Confirm Role Change</h4>
|
|
<p className="text-text-muted text-sm">Change role for {editingEmployee?.name}?</p>
|
|
</div>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-xl px-4 py-3 mb-5">
|
|
<p className="text-sm text-text-main">
|
|
Role will change from{' '}
|
|
<span className="font-semibold">{roleLabel[editingEmployee?.roleCode || 'EMPLOYEE'] || editingEmployee?.roleCode}</span>
|
|
{' '}to{' '}
|
|
<span className="font-semibold">{roleLabel[pendingRole || 'EMPLOYEE'] || pendingRole}</span>
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={() => { setShowRoleConfirm(false); setPendingRole(null); }}
|
|
className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={confirmRoleChange}
|
|
className="flex-1 px-4 py-2.5 rounded-xl bg-primary hover:bg-primary-hover text-white text-sm font-semibold shadow-soft transition-all"
|
|
>
|
|
Confirm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Status Change Confirmation Dialog (for RESIGNED) */}
|
|
{showStatusConfirm && (
|
|
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
|
<div className="bg-surface rounded-2xl shadow-xl max-w-sm w-full mx-4 p-6 animate-in fade-in zoom-in duration-200">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 rounded-full bg-status-critical-bg flex items-center justify-center flex-shrink-0">
|
|
<AlertTriangle className="w-5 h-5 text-status-critical-text" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-outfit text-lg font-semibold text-text-main">Confirm Status Change</h4>
|
|
<p className="text-text-muted text-sm">Change status to RESIGNED?</p>
|
|
</div>
|
|
</div>
|
|
<div className="bg-status-critical-bg border border-status-critical/20 rounded-xl px-4 py-3 mb-5">
|
|
<p className="text-sm text-status-critical-text">
|
|
This will mark <span className="font-semibold">{editingEmployee?.name}</span> as resigned.
|
|
Please ensure the left date is set.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={() => { setShowStatusConfirm(false); setPendingStatus(null); }}
|
|
className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={confirmStatusChange}
|
|
className="flex-1 px-4 py-2.5 rounded-xl bg-status-critical hover:bg-status-critical-hover text-white text-sm font-semibold shadow-soft transition-all"
|
|
>
|
|
Confirm Resignation
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Delete Confirmation Dialog
|
|
if (isDeleteDialogOpen) {
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
|
<div className="bg-surface rounded-2xl shadow-xl max-w-md w-full mx-4 p-6 relative animate-in fade-in zoom-in duration-200">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-12 h-12 rounded-full bg-status-critical-bg flex items-center justify-center flex-shrink-0">
|
|
<AlertTriangle className="w-6 h-6 text-status-critical-text" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-outfit text-xl font-semibold text-text-main">Delete Employee</h3>
|
|
<p className="text-text-muted text-sm">This action cannot be undone</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 rounded-xl px-4 py-3 mb-6">
|
|
<p className="text-sm text-text-main">
|
|
Are you sure you want to delete <span className="font-semibold">{deletingEmployee?.name}</span>?
|
|
</p>
|
|
<p className="text-xs text-text-muted mt-1">
|
|
This will soft-delete the employee record and remove their access to the system.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={handleCloseDeleteDialog}
|
|
disabled={isDeleting}
|
|
className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleDeleteConfirm}
|
|
disabled={isDeleting}
|
|
className="flex-1 px-4 py-2.5 rounded-xl bg-status-critical hover:bg-status-critical-hover text-white text-sm font-semibold shadow-soft transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isDeleting ? 'Deleting...' : 'Delete'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="p-4 sm:p-6 lg:p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
|
|
<div>
|
|
<h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Employees</h2>
|
|
<p className="text-text-muted mt-1 text-sm">Manage employee records, dispatch status, and role assignments.</p>
|
|
</div>
|
|
<div className="h-10 w-32 bg-gray-200 rounded-xl animate-pulse" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="bg-surface rounded-2xl p-5 border border-border">
|
|
<div className="h-3 w-12 bg-gray-200 rounded mb-2 animate-pulse" />
|
|
<div className="h-7 w-16 bg-gray-200 rounded animate-pulse" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="bg-surface rounded-2xl border border-border shadow-card overflow-hidden">
|
|
<div className="px-6 py-4 border-b border-border flex items-center justify-between">
|
|
<div className="flex space-x-2">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="h-8 w-16 bg-gray-200 rounded-lg animate-pulse" />
|
|
))}
|
|
</div>
|
|
<div className="h-9 w-48 bg-gray-200 rounded-lg animate-pulse" />
|
|
</div>
|
|
<div className="p-6">
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<div key={i} className="flex items-center py-4 border-b border-gray-100 last:border-0">
|
|
<div className="w-8 h-8 rounded-full bg-gray-200 mr-3 animate-pulse" />
|
|
<div className="flex-1 h-4 bg-gray-200 rounded animate-pulse" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="p-4 sm:p-6 lg:p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
|
|
<div>
|
|
<h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Employees</h2>
|
|
<p className="text-text-muted mt-1 text-sm">Manage employee records, dispatch status, and role assignments.</p>
|
|
</div>
|
|
</div>
|
|
<div className="bg-status-critical-bg border border-status-critical text-status-critical-text rounded-2xl p-6 sm:p-8 text-center">
|
|
<p className="font-medium">{error}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (employees.length === 0) {
|
|
return (
|
|
<div className="p-4 sm:p-6 lg:p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
|
|
<div>
|
|
<h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Employees</h2>
|
|
<p className="text-text-muted mt-1 text-sm">Manage employee records, dispatch status, and role assignments.</p>
|
|
</div>
|
|
<button onClick={handleOpenModal} className="w-full sm:w-auto bg-primary hover:bg-primary-hover text-white px-5 py-2.5 rounded-xl text-sm font-semibold shadow-soft transition-all flex items-center justify-center">
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Add Employee
|
|
</button>
|
|
</div>
|
|
<div className="bg-surface rounded-2xl border border-border shadow-card p-12 text-center">
|
|
<p className="text-text-muted text-lg">No employees found</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-4 sm:p-6 lg:p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
|
|
<div>
|
|
<h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Employees</h2>
|
|
<p className="text-text-muted mt-1 text-sm">Manage employee records, dispatch status, and role assignments.</p>
|
|
</div>
|
|
<button onClick={handleOpenModal} className="w-full sm:w-auto bg-primary hover:bg-primary-hover text-white px-5 py-2.5 rounded-xl text-sm font-semibold shadow-soft transition-all flex items-center justify-center">
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Add Employee
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
{stats.map((s) => (
|
|
<div key={s.label} className="bg-surface rounded-2xl p-5 border border-border">
|
|
<p className="text-xs text-text-muted font-medium mb-1">{s.label}</p>
|
|
<p className={`font-outfit text-2xl font-semibold ${s.color}`}>{s.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="bg-surface rounded-2xl border border-border shadow-card overflow-hidden">
|
|
<div className="px-4 sm:px-6 py-4 border-b border-border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<button
|
|
key="all"
|
|
onClick={() => setFilter('all')}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
|
filter === 'all' ? 'bg-primary text-white' : 'text-text-muted hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
전체
|
|
</button>
|
|
{statusCodesLoading ? (
|
|
<span className="text-xs text-text-muted">Loading...</span>
|
|
) : (
|
|
empStatusCodes.map((code) => (
|
|
<button
|
|
key={code.codeValue}
|
|
onClick={() => setFilter(code.codeValue)}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
|
filter === code.codeValue ? 'bg-primary text-white' : 'text-text-muted hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
{code.codeName}
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
<div className="relative w-full sm:w-56">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
|
|
<input
|
|
value={skillKeyword}
|
|
onChange={(e) => setSkillKeyword(e.target.value)}
|
|
className="w-full pl-9 pr-3 py-1.5 rounded-lg bg-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
|
placeholder="Search by name or skill..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
{/* Desktop table */}
|
|
<div className="hidden md:block">
|
|
<table className="w-full text-left">
|
|
<thead>
|
|
<tr className="bg-gray-50/50">
|
|
<th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">이름</th>
|
|
<th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">권한</th>
|
|
<th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">상태</th>
|
|
<th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">이메일</th>
|
|
<th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">액션</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100 text-sm">
|
|
{filtered.map((emp, idx) => (
|
|
<tr key={emp.empId} className="hover:bg-gray-50 transition-colors">
|
|
<td className="py-4 px-4 sm:px-6">
|
|
<div className="flex items-center">
|
|
<div className={`w-8 h-8 rounded-full ${getInitialColor(emp.name, idx)} flex items-center justify-center text-xs font-medium text-white mr-3 flex-shrink-0`}>
|
|
{emp.name[0]}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="font-medium text-text-main truncate">{emp.name}</p>
|
|
<p className="text-xs text-text-muted truncate">{emp.email}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="py-4 px-4 sm:px-6">
|
|
<span className="text-xs font-medium text-text-muted">{roleLabel[emp.roleCode] || emp.roleCode}</span>
|
|
</td>
|
|
<td className="py-4 px-4 sm:px-6">
|
|
<span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${statusColor[emp.empStatus]}`}>
|
|
{emp.empStatus === 'ACTIVE' ? '재직' : emp.empStatus === 'ON_LEAVE' ? '휴직' : '퇴사'}
|
|
{emp.dispatchStatus === 'DISPATCHED' && (
|
|
<span className="ml-1.5 px-1.5 py-0.5 rounded bg-blue-100 text-blue-600 text-[10px]">파견중</span>
|
|
)}
|
|
</span>
|
|
</td>
|
|
<td className="py-4 px-4 sm:px-6 text-text-muted truncate max-w-[150px] sm:max-w-none">{emp.email}</td>
|
|
<td className="py-4 px-4 sm:px-6">
|
|
{user?.roleCode === 'ADMIN' && (
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => handleEdit(emp)}
|
|
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
|
|
title="Edit"
|
|
>
|
|
<Pencil className="w-3.5 h-3.5 text-text-muted hover:text-primary" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(emp)}
|
|
className="p-1.5 hover:bg-red-50 rounded-lg transition-colors"
|
|
title="Delete"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5 text-text-muted hover:text-status-critical-text" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
{user?.roleCode !== 'ADMIN' && (
|
|
<button
|
|
onClick={() => router.push(`/profile/${emp.empId}`)}
|
|
className="p-1.5 text-text-muted hover:text-primary hover:bg-gray-100 rounded-lg transition-all"
|
|
title="View Profile"
|
|
>
|
|
<MoreHorizontal className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Mobile cards */}
|
|
<div className="md:hidden space-y-3">
|
|
{filtered.map((emp, idx) => (
|
|
<div key={emp.empId} className="bg-surface rounded-2xl border border-border p-4 space-y-2">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="flex items-center gap-3 flex-1">
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${getInitialColor(emp.name, idx)}`}>
|
|
{emp.name.charAt(0)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-text-main truncate">{emp.name}</p>
|
|
<p className="text-xs text-text-muted truncate">{roleLabel[emp.roleCode] || emp.roleCode}</p>
|
|
</div>
|
|
</div>
|
|
<span className={`text-[10px] font-medium px-2.5 py-1 rounded-full ${statusColor[emp.empStatus] || 'bg-gray-100 text-gray-600'}`}>
|
|
{emp.empStatus === 'ACTIVE' ? '재직' : emp.empStatus === 'ON_LEAVE' ? '휴직' : '퇴사'}
|
|
</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2 text-xs text-text-muted">
|
|
<div className="truncate">Email: {emp.email}</div>
|
|
<div>상태: {emp.dispatchStatus === 'DISPATCHED' ? '파견중' : '대기'}</div>
|
|
</div>
|
|
{user?.roleCode === 'ADMIN' && (
|
|
<div className="flex items-center gap-2 pt-2 border-t border-gray-100">
|
|
<button
|
|
onClick={() => handleEdit(emp)}
|
|
className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium text-text-muted hover:bg-gray-100 transition-all"
|
|
>
|
|
<Pencil className="w-3.5 h-3.5" />
|
|
Edit
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(emp)}
|
|
className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium text-status-critical-text hover:bg-red-50 transition-all"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
Delete
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|