783 lines
26 KiB
TypeScript
783 lines
26 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Users, Edit, Trash2, UserCheck, UserX, Clock, Calendar, Mail, Plus, Upload, Loader2, Search } from 'lucide-react';
|
|
import { getEmployees, deleteEmployee, deleteEmployees, getEmployeeStats } from './actions';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { TableRow, TableCell } from '@/components/ui/table';
|
|
import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
|
|
import {
|
|
UniversalListPage,
|
|
type UniversalListConfig,
|
|
type TabOption,
|
|
type StatCard,
|
|
type FilterFieldConfig,
|
|
type FilterValues,
|
|
} from '@/components/templates/UniversalListPage';
|
|
import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
|
|
import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
|
|
import { FieldSettingsDialog } from './FieldSettingsDialog';
|
|
import { UserInviteDialog } from './UserInviteDialog';
|
|
import type {
|
|
Employee,
|
|
EmployeeStatus,
|
|
FieldSettings,
|
|
} from './types';
|
|
import {
|
|
EMPLOYEE_STATUS_LABELS,
|
|
EMPLOYEE_STATUS_COLORS,
|
|
DEFAULT_FIELD_SETTINGS,
|
|
USER_ROLE_LABELS,
|
|
} from './types';
|
|
import { isNextRedirectError } from '@/lib/utils/redirect-error';
|
|
|
|
// 필터 옵션 타입
|
|
type FilterOption = 'all' | 'hasUserId' | 'noUserId' | 'active' | 'leave' | 'resigned';
|
|
|
|
// 정렬 옵션 타입
|
|
type SortOption = 'rank' | 'hireDateDesc' | 'hireDateAsc' | 'departmentAsc' | 'departmentDesc' | 'nameAsc' | 'nameDesc';
|
|
|
|
// 필터 옵션 레이블
|
|
const FILTER_OPTIONS: { value: FilterOption; label: string }[] = [
|
|
{ value: 'all', label: '전체' },
|
|
{ value: 'hasUserId', label: '사용자 아이디 보유' },
|
|
{ value: 'noUserId', label: '사용자 아이디 미보유' },
|
|
{ value: 'active', label: '재직' },
|
|
{ value: 'leave', label: '휴직' },
|
|
{ value: 'resigned', label: '퇴직' },
|
|
];
|
|
|
|
// 정렬 옵션 레이블
|
|
const SORT_OPTIONS: { value: SortOption; label: string }[] = [
|
|
{ value: 'rank', label: '직급순' },
|
|
{ value: 'hireDateDesc', label: '입사일 최신순' },
|
|
{ value: 'hireDateAsc', label: '입사일 등록순' },
|
|
{ value: 'departmentAsc', label: '부서 오름차순' },
|
|
{ value: 'departmentDesc', label: '부서 내림차순' },
|
|
{ value: 'nameAsc', label: '이름 오름차순' },
|
|
{ value: 'nameDesc', label: '이름 내림차순' },
|
|
];
|
|
|
|
export function EmployeeManagement() {
|
|
const router = useRouter();
|
|
|
|
// 사원 데이터 상태
|
|
const [employees, setEmployees] = useState<Employee[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const isInitialLoadDone = useRef(false);
|
|
const [total, setTotal] = useState(0);
|
|
|
|
// 검색 및 필터 상태
|
|
const [searchValue, setSearchValue] = useState('');
|
|
const [activeTab, setActiveTab] = useState<string>('all');
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const itemsPerPage = 20;
|
|
|
|
// 날짜 범위 상태 (Input type="date" 용) - 초기값 비움: 전체 기간 조회
|
|
const [startDate, setStartDate] = useState('');
|
|
const [endDate, setEndDate] = useState('');
|
|
|
|
// 필터 및 정렬 상태
|
|
const [filterOption, setFilterOption] = useState<FilterOption>('all');
|
|
const [sortOption, setSortOption] = useState<SortOption>('rank');
|
|
|
|
// 다이얼로그 상태
|
|
const [fieldSettingsOpen, setFieldSettingsOpen] = useState(false);
|
|
const [fieldSettings, setFieldSettings] = useState<FieldSettings>(DEFAULT_FIELD_SETTINGS);
|
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
const [employeeToDelete, setEmployeeToDelete] = useState<Employee | null>(null);
|
|
const [userInviteOpen, setUserInviteOpen] = useState(false);
|
|
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
|
|
// 데이터 로드
|
|
useEffect(() => {
|
|
const fetchEmployees = async () => {
|
|
if (!isInitialLoadDone.current) {
|
|
setIsLoading(true);
|
|
}
|
|
try {
|
|
const result = await getEmployees({
|
|
per_page: 100, // 충분히 많은 데이터 로드
|
|
});
|
|
setEmployees(result.data);
|
|
setTotal(result.total);
|
|
} catch (error) {
|
|
if (isNextRedirectError(error)) throw error;
|
|
console.error('[EmployeeManagement] fetchEmployees error:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
isInitialLoadDone.current = true;
|
|
}
|
|
};
|
|
fetchEmployees();
|
|
}, []);
|
|
|
|
// 필터링된 데이터
|
|
const filteredEmployees = useMemo(() => {
|
|
let filtered = employees;
|
|
|
|
// 탭 필터 (상태)
|
|
if (activeTab !== 'all') {
|
|
filtered = filtered.filter(e => e.status === activeTab);
|
|
}
|
|
|
|
// 셀렉트박스 필터
|
|
if (filterOption !== 'all') {
|
|
switch (filterOption) {
|
|
case 'hasUserId':
|
|
filtered = filtered.filter(e => e.userInfo?.userId);
|
|
break;
|
|
case 'noUserId':
|
|
filtered = filtered.filter(e => !e.userInfo?.userId);
|
|
break;
|
|
case 'active':
|
|
filtered = filtered.filter(e => e.status === 'active');
|
|
break;
|
|
case 'leave':
|
|
filtered = filtered.filter(e => e.status === 'leave');
|
|
break;
|
|
case 'resigned':
|
|
filtered = filtered.filter(e => e.status === 'resigned');
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 검색 필터
|
|
if (searchValue) {
|
|
const search = searchValue.toLowerCase();
|
|
filtered = filtered.filter(e =>
|
|
e.name.toLowerCase().includes(search) ||
|
|
e.employeeCode?.toLowerCase().includes(search) ||
|
|
e.email?.toLowerCase().includes(search)
|
|
);
|
|
}
|
|
|
|
// 날짜 필터는 UniversalListPage에서 dateField 설정을 통해 자동 처리됨
|
|
|
|
// 정렬
|
|
filtered = [...filtered].sort((a, b) => {
|
|
switch (sortOption) {
|
|
case 'rank':
|
|
// 직급 순서 정의 (높은 직급이 먼저)
|
|
const rankOrder: Record<string, number> = { '회장': 1, '사장': 2, '부사장': 3, '전무': 4, '상무': 5, '이사': 6, '부장': 7, '차장': 8, '과장': 9, '대리': 10, '주임': 11, '사원': 12 };
|
|
return (rankOrder[a.rank || ''] || 99) - (rankOrder[b.rank || ''] || 99);
|
|
case 'hireDateDesc':
|
|
return new Date(b.hireDate || 0).getTime() - new Date(a.hireDate || 0).getTime();
|
|
case 'hireDateAsc':
|
|
return new Date(a.hireDate || 0).getTime() - new Date(b.hireDate || 0).getTime();
|
|
case 'departmentAsc':
|
|
const deptA = a.departmentPositions?.[0]?.departmentName || '';
|
|
const deptB = b.departmentPositions?.[0]?.departmentName || '';
|
|
return deptA.localeCompare(deptB, 'ko');
|
|
case 'departmentDesc':
|
|
const deptA2 = a.departmentPositions?.[0]?.departmentName || '';
|
|
const deptB2 = b.departmentPositions?.[0]?.departmentName || '';
|
|
return deptB2.localeCompare(deptA2, 'ko');
|
|
case 'nameAsc':
|
|
return a.name.localeCompare(b.name, 'ko');
|
|
case 'nameDesc':
|
|
return b.name.localeCompare(a.name, 'ko');
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
|
|
return filtered;
|
|
}, [employees, activeTab, filterOption, sortOption, searchValue]);
|
|
|
|
// 페이지네이션된 데이터
|
|
const paginatedData = useMemo(() => {
|
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
return filteredEmployees.slice(startIndex, startIndex + itemsPerPage);
|
|
}, [filteredEmployees, currentPage, itemsPerPage]);
|
|
|
|
// 통계 계산
|
|
// SSR Hydration 오류 방지: new Date() 대신 고정 날짜 사용
|
|
const stats = useMemo(() => {
|
|
const activeCount = employees.filter(e => e.status === 'active').length;
|
|
const leaveCount = employees.filter(e => e.status === 'leave').length;
|
|
const resignedCount = employees.filter(e => e.status === 'resigned').length;
|
|
|
|
const activeEmployees = employees.filter(e => e.status === 'active' && e.hireDate);
|
|
// 고정 기준일 사용 (SSR/CSR 일치)
|
|
const referenceDate = new Date('2025-12-16T00:00:00Z');
|
|
const totalTenure = activeEmployees.reduce((sum, e) => {
|
|
const hireDate = new Date(e.hireDate!);
|
|
const years = Math.max(0, (referenceDate.getTime() - hireDate.getTime()) / (1000 * 60 * 60 * 24 * 365));
|
|
return sum + years;
|
|
}, 0);
|
|
const averageTenure = activeEmployees.length > 0 ? totalTenure / activeEmployees.length : 0;
|
|
|
|
return { activeCount, leaveCount, resignedCount, averageTenure };
|
|
}, [employees]);
|
|
|
|
// StatCards 데이터
|
|
const statCards: StatCard[] = useMemo(() => [
|
|
{
|
|
label: '재직',
|
|
value: `${stats.activeCount}명`,
|
|
icon: UserCheck,
|
|
iconColor: 'text-green-500',
|
|
},
|
|
{
|
|
label: '휴직',
|
|
value: `${stats.leaveCount}명`,
|
|
icon: Clock,
|
|
iconColor: 'text-yellow-500',
|
|
},
|
|
{
|
|
label: '퇴직',
|
|
value: `${stats.resignedCount}명`,
|
|
icon: UserX,
|
|
iconColor: 'text-gray-500',
|
|
},
|
|
{
|
|
label: '평균근속년수',
|
|
value: `${stats.averageTenure.toFixed(1)}년`,
|
|
icon: Calendar,
|
|
iconColor: 'text-blue-500',
|
|
},
|
|
], [stats]);
|
|
|
|
// 탭 옵션
|
|
const tabs: TabOption[] = useMemo(() => [
|
|
{ value: 'all', label: '전체', count: employees.length, color: 'gray' },
|
|
{ value: 'active', label: '재직', count: stats.activeCount, color: 'green' },
|
|
{ value: 'leave', label: '휴직', count: stats.leaveCount, color: 'yellow' },
|
|
{ value: 'resigned', label: '퇴직', count: stats.resignedCount, color: 'gray' },
|
|
], [employees.length, stats]);
|
|
|
|
// 테이블 컬럼 정의
|
|
const tableColumns = useMemo(() => [
|
|
{ key: 'rowNumber', label: '번호', className: 'w-[60px] text-center' },
|
|
{ key: 'employeeCode', label: '사원코드', className: 'min-w-[100px]', sortable: true },
|
|
{ key: 'department', label: '부서', className: 'min-w-[100px]', sortable: true },
|
|
{ key: 'position', label: '직책', className: 'min-w-[100px]', sortable: true },
|
|
{ key: 'name', label: '이름', className: 'min-w-[80px]', sortable: true },
|
|
{ key: 'rank', label: '직급', className: 'min-w-[80px]', sortable: true },
|
|
{ key: 'phone', label: '휴대폰', className: 'min-w-[120px]', sortable: true },
|
|
{ key: 'email', label: '이메일', className: 'min-w-[150px]', sortable: true },
|
|
{ key: 'hireDate', label: '입사일', className: 'min-w-[100px]', sortable: true },
|
|
{ key: 'status', label: '상태', className: 'min-w-[80px]', sortable: true },
|
|
{ key: 'userId', label: '사용자아이디', className: 'min-w-[100px]', sortable: true },
|
|
{ key: 'userRole', label: '권한', className: 'min-w-[80px]', sortable: true },
|
|
{ key: 'actions', label: '작업', className: 'w-[100px] text-right' },
|
|
], []);
|
|
|
|
// 체크박스 토글
|
|
const toggleSelection = useCallback((id: string) => {
|
|
setSelectedItems(prev => {
|
|
const newSet = new Set(prev);
|
|
if (newSet.has(id)) {
|
|
newSet.delete(id);
|
|
} else {
|
|
newSet.add(id);
|
|
}
|
|
return newSet;
|
|
});
|
|
}, []);
|
|
|
|
// 전체 선택/해제
|
|
const toggleSelectAll = useCallback(() => {
|
|
if (selectedItems.size === paginatedData.length && paginatedData.length > 0) {
|
|
setSelectedItems(new Set());
|
|
} else {
|
|
const allIds = new Set(paginatedData.map((item) => item.id));
|
|
setSelectedItems(allIds);
|
|
}
|
|
}, [selectedItems.size, paginatedData]);
|
|
|
|
// 일괄 삭제 핸들러
|
|
const handleBulkDelete = useCallback(async () => {
|
|
const ids = Array.from(selectedItems);
|
|
if (ids.length === 0) return;
|
|
|
|
setIsDeleting(true);
|
|
try {
|
|
const result = await deleteEmployees(ids);
|
|
if (result.success) {
|
|
setEmployees(prev => prev.filter(emp => !ids.includes(emp.id)));
|
|
setSelectedItems(new Set());
|
|
} else {
|
|
console.error('Bulk delete failed:', result.error);
|
|
}
|
|
} catch (error) {
|
|
if (isNextRedirectError(error)) throw error;
|
|
console.error('Bulk delete error:', error);
|
|
} finally {
|
|
setIsDeleting(false);
|
|
}
|
|
}, [selectedItems]);
|
|
|
|
// 핸들러
|
|
const handleAddEmployee = useCallback(() => {
|
|
router.push('/ko/hr/employee-management?mode=new');
|
|
}, [router]);
|
|
|
|
const handleCSVUpload = useCallback(() => {
|
|
router.push('/ko/hr/employee-management/csv-upload');
|
|
}, [router]);
|
|
|
|
const handleDeleteEmployee = useCallback(async () => {
|
|
if (!employeeToDelete) return;
|
|
|
|
setIsDeleting(true);
|
|
try {
|
|
const result = await deleteEmployee(employeeToDelete.id);
|
|
if (result.success) {
|
|
setEmployees(prev => prev.filter(emp => emp.id !== employeeToDelete.id));
|
|
setDeleteDialogOpen(false);
|
|
setEmployeeToDelete(null);
|
|
} else {
|
|
console.error('Delete failed:', result.error);
|
|
}
|
|
} catch (error) {
|
|
if (isNextRedirectError(error)) throw error;
|
|
console.error('Delete error:', error);
|
|
} finally {
|
|
setIsDeleting(false);
|
|
}
|
|
}, [employeeToDelete]);
|
|
|
|
const handleRowClick = useCallback((row: Employee) => {
|
|
router.push(`/ko/hr/employee-management/${row.id}?mode=view`);
|
|
}, [router]);
|
|
|
|
const handleEdit = useCallback((id: string) => {
|
|
router.push(`/ko/hr/employee-management/${id}?mode=edit`);
|
|
}, [router]);
|
|
|
|
const openDeleteDialog = useCallback((employee: Employee) => {
|
|
setEmployeeToDelete(employee);
|
|
setDeleteDialogOpen(true);
|
|
}, []);
|
|
|
|
// ===== filterConfig 기반 통합 필터 시스템 =====
|
|
const filterConfig: FilterFieldConfig[] = useMemo(() => [
|
|
{
|
|
key: 'filter',
|
|
label: '필터',
|
|
type: 'single',
|
|
options: FILTER_OPTIONS.filter(o => o.value !== 'all').map(o => ({
|
|
value: o.value,
|
|
label: o.label,
|
|
})),
|
|
allOptionLabel: '전체',
|
|
},
|
|
{
|
|
key: 'sort',
|
|
label: '정렬',
|
|
type: 'single',
|
|
options: SORT_OPTIONS.map(o => ({
|
|
value: o.value,
|
|
label: o.label,
|
|
})),
|
|
},
|
|
], []);
|
|
|
|
const filterValues: FilterValues = useMemo(() => ({
|
|
filter: filterOption,
|
|
sort: sortOption,
|
|
}), [filterOption, sortOption]);
|
|
|
|
const handleFilterChange = useCallback((key: string, value: string | string[]) => {
|
|
switch (key) {
|
|
case 'filter':
|
|
setFilterOption(value as FilterOption);
|
|
break;
|
|
case 'sort':
|
|
setSortOption(value as SortOption);
|
|
break;
|
|
}
|
|
setCurrentPage(1);
|
|
}, []);
|
|
|
|
const handleFilterReset = useCallback(() => {
|
|
setFilterOption('all');
|
|
setSortOption('rank');
|
|
setCurrentPage(1);
|
|
}, []);
|
|
|
|
// ===== UniversalListPage 설정 =====
|
|
const employeeConfig: UniversalListConfig<Employee> = useMemo(() => ({
|
|
title: '사원관리',
|
|
description: '사원 정보를 관리합니다',
|
|
icon: Users,
|
|
basePath: '/hr/employee-management',
|
|
|
|
idField: 'id',
|
|
|
|
actions: {
|
|
getList: async () => ({
|
|
success: true,
|
|
data: employees,
|
|
totalCount: employees.length,
|
|
}),
|
|
deleteBulk: async (ids) => {
|
|
setIsDeleting(true);
|
|
try {
|
|
const result = await deleteEmployees(ids);
|
|
if (result.success) {
|
|
setEmployees(prev => prev.filter(emp => !ids.includes(emp.id)));
|
|
setSelectedItems(new Set());
|
|
}
|
|
return result;
|
|
} finally {
|
|
setIsDeleting(false);
|
|
}
|
|
},
|
|
},
|
|
|
|
columns: tableColumns,
|
|
|
|
tabs: tabs,
|
|
defaultTab: activeTab,
|
|
|
|
filterConfig: filterConfig,
|
|
initialFilters: filterValues,
|
|
filterTitle: '사원 필터',
|
|
|
|
computeStats: () => statCards,
|
|
|
|
// 검색창 (공통 컴포넌트에서 자동 생성)
|
|
hideSearch: true,
|
|
searchValue: searchValue,
|
|
onSearchChange: setSearchValue,
|
|
|
|
dateRangeSelector: {
|
|
enabled: true,
|
|
showPresets: true,
|
|
startDate,
|
|
endDate,
|
|
onStartDateChange: setStartDate,
|
|
onEndDateChange: setEndDate,
|
|
dateField: 'hireDate', // 입사일 기준 자동 필터링
|
|
},
|
|
|
|
createButton: {
|
|
label: '사원 등록',
|
|
icon: Plus,
|
|
onClick: handleAddEmployee,
|
|
},
|
|
|
|
searchPlaceholder: '이름, 사원코드, 이메일 검색...',
|
|
|
|
extraFilters: (
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setUserInviteOpen(true)}
|
|
>
|
|
<Mail className="w-4 h-4 mr-2" />
|
|
사용자 초대
|
|
</Button>
|
|
<Button variant="outline" onClick={handleCSVUpload}>
|
|
<Upload className="w-4 h-4 mr-2" />
|
|
CSV 일괄 등록
|
|
</Button>
|
|
</div>
|
|
),
|
|
|
|
itemsPerPage: itemsPerPage,
|
|
|
|
clientSideFiltering: true,
|
|
|
|
searchFilter: (item, searchValue) => {
|
|
const search = searchValue.toLowerCase();
|
|
return (
|
|
item.name.toLowerCase().includes(search) ||
|
|
(item.employeeCode?.toLowerCase().includes(search) ?? false) ||
|
|
(item.email?.toLowerCase().includes(search) ?? false)
|
|
);
|
|
},
|
|
|
|
tabFilter: (item, activeTab) => {
|
|
if (activeTab === 'all') return true;
|
|
return item.status === activeTab;
|
|
},
|
|
|
|
customFilterFn: (items, filterValues) => {
|
|
if (!items || items.length === 0) return items;
|
|
let filtered = items;
|
|
const filterOption = filterValues.filter as FilterOption;
|
|
if (filterOption && filterOption !== 'all') {
|
|
switch (filterOption) {
|
|
case 'hasUserId':
|
|
filtered = filtered.filter(e => e.userInfo?.userId);
|
|
break;
|
|
case 'noUserId':
|
|
filtered = filtered.filter(e => !e.userInfo?.userId);
|
|
break;
|
|
case 'active':
|
|
filtered = filtered.filter(e => e.status === 'active');
|
|
break;
|
|
case 'leave':
|
|
filtered = filtered.filter(e => e.status === 'leave');
|
|
break;
|
|
case 'resigned':
|
|
filtered = filtered.filter(e => e.status === 'resigned');
|
|
break;
|
|
}
|
|
}
|
|
return filtered;
|
|
},
|
|
|
|
customSortFn: (items, filterValues) => {
|
|
const sortOption = filterValues.sort as SortOption || 'rank';
|
|
const rankOrder: Record<string, number> = { '회장': 1, '사장': 2, '부사장': 3, '전무': 4, '상무': 5, '이사': 6, '부장': 7, '차장': 8, '과장': 9, '대리': 10, '주임': 11, '사원': 12 };
|
|
|
|
return [...items].sort((a, b) => {
|
|
switch (sortOption) {
|
|
case 'rank':
|
|
return (rankOrder[a.rank || ''] || 99) - (rankOrder[b.rank || ''] || 99);
|
|
case 'hireDateDesc':
|
|
return new Date(b.hireDate || 0).getTime() - new Date(a.hireDate || 0).getTime();
|
|
case 'hireDateAsc':
|
|
return new Date(a.hireDate || 0).getTime() - new Date(b.hireDate || 0).getTime();
|
|
case 'departmentAsc':
|
|
const deptA = a.departmentPositions?.[0]?.departmentName || '';
|
|
const deptB = b.departmentPositions?.[0]?.departmentName || '';
|
|
return deptA.localeCompare(deptB, 'ko');
|
|
case 'departmentDesc':
|
|
const deptA2 = a.departmentPositions?.[0]?.departmentName || '';
|
|
const deptB2 = b.departmentPositions?.[0]?.departmentName || '';
|
|
return deptB2.localeCompare(deptA2, 'ko');
|
|
case 'nameAsc':
|
|
return a.name.localeCompare(b.name, 'ko');
|
|
case 'nameDesc':
|
|
return b.name.localeCompare(a.name, 'ko');
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
},
|
|
|
|
renderTableRow: (item, index, globalIndex, handlers) => {
|
|
const { isSelected, onToggle, onRowClick } = handlers;
|
|
|
|
return (
|
|
<TableRow
|
|
key={item.id}
|
|
className="hover:bg-muted/50 cursor-pointer"
|
|
onClick={() => handleRowClick(item)}
|
|
>
|
|
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
|
<Checkbox
|
|
checked={isSelected}
|
|
onCheckedChange={onToggle}
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground text-center">
|
|
{globalIndex}
|
|
</TableCell>
|
|
<TableCell>{item.employeeCode || '-'}</TableCell>
|
|
<TableCell>
|
|
{item.departmentPositions?.length > 0
|
|
? item.departmentPositions.map(dp => dp.departmentName).join(', ')
|
|
: '-'}
|
|
</TableCell>
|
|
<TableCell>
|
|
{item.departmentPositions?.length > 0
|
|
? item.departmentPositions.map(dp => dp.positionName).join(', ')
|
|
: '-'}
|
|
</TableCell>
|
|
<TableCell>{item.name}</TableCell>
|
|
<TableCell>{item.rank || '-'}</TableCell>
|
|
<TableCell>{item.phone || '-'}</TableCell>
|
|
<TableCell>{item.email || '-'}</TableCell>
|
|
<TableCell>
|
|
{item.hireDate ? new Date(item.hireDate).toLocaleDateString('ko-KR') : '-'}
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge className={EMPLOYEE_STATUS_COLORS[item.status]}>
|
|
{EMPLOYEE_STATUS_LABELS[item.status]}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>{item.userInfo?.userId || '-'}</TableCell>
|
|
<TableCell>
|
|
{item.userInfo ? USER_ROLE_LABELS[item.userInfo.role] : '-'}
|
|
</TableCell>
|
|
<TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
|
|
{isSelected && (
|
|
<div className="flex items-center justify-end gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleEdit(item.id)}
|
|
title="수정"
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => openDeleteDialog(item)}
|
|
title="삭제"
|
|
>
|
|
<Trash2 className="w-4 h-4 text-red-500" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
},
|
|
|
|
renderMobileCard: (item, index, globalIndex, handlers) => {
|
|
const { isSelected, onToggle } = handlers;
|
|
|
|
return (
|
|
<ListMobileCard
|
|
id={item.id}
|
|
title={item.name}
|
|
headerBadges={
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<Badge variant="outline" className="text-xs">
|
|
#{globalIndex}
|
|
</Badge>
|
|
<code className="text-xs bg-gray-100 px-2 py-1 rounded">
|
|
{item.employeeCode}
|
|
</code>
|
|
</div>
|
|
}
|
|
statusBadge={
|
|
<Badge className={EMPLOYEE_STATUS_COLORS[item.status]}>
|
|
{EMPLOYEE_STATUS_LABELS[item.status]}
|
|
</Badge>
|
|
}
|
|
isSelected={isSelected}
|
|
onToggleSelection={onToggle}
|
|
onCardClick={() => handleRowClick(item)}
|
|
infoGrid={
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
|
<InfoField
|
|
label="부서"
|
|
value={item.departmentPositions?.length > 0
|
|
? item.departmentPositions.map(dp => dp.departmentName).join(', ')
|
|
: '-'}
|
|
/>
|
|
<InfoField
|
|
label="직책"
|
|
value={item.departmentPositions?.length > 0
|
|
? item.departmentPositions.map(dp => dp.positionName).join(', ')
|
|
: '-'}
|
|
/>
|
|
<InfoField label="직급" value={item.rank || '-'} />
|
|
<InfoField label="휴대폰" value={item.phone || '-'} />
|
|
<InfoField label="이메일" value={item.email || '-'} />
|
|
<InfoField
|
|
label="입사일"
|
|
value={item.hireDate ? new Date(item.hireDate).toLocaleDateString('ko-KR') : '-'}
|
|
/>
|
|
{item.userInfo && (
|
|
<>
|
|
<InfoField label="사용자ID" value={item.userInfo.userId || '-'} />
|
|
<InfoField label="권한" value={USER_ROLE_LABELS[item.userInfo.role]} />
|
|
</>
|
|
)}
|
|
</div>
|
|
}
|
|
actions={
|
|
isSelected ? (
|
|
<div className="flex gap-2 flex-wrap">
|
|
<Button
|
|
variant="default"
|
|
size="default"
|
|
className="flex-1 min-w-[100px] h-11"
|
|
onClick={(e) => { e.stopPropagation(); handleEdit(item.id); }}
|
|
>
|
|
<Edit className="h-4 w-4 mr-2" />
|
|
수정
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="default"
|
|
className="flex-1 min-w-[100px] h-11 border-red-200 text-red-600 hover:border-red-300 bg-transparent"
|
|
onClick={(e) => { e.stopPropagation(); openDeleteDialog(item); }}
|
|
>
|
|
<Trash2 className="h-4 w-4 mr-2" />
|
|
삭제
|
|
</Button>
|
|
</div>
|
|
) : undefined
|
|
}
|
|
/>
|
|
);
|
|
},
|
|
|
|
renderDialogs: () => (
|
|
<>
|
|
{/* 필드 설정 다이얼로그 */}
|
|
<FieldSettingsDialog
|
|
open={fieldSettingsOpen}
|
|
onOpenChange={setFieldSettingsOpen}
|
|
settings={fieldSettings}
|
|
onSave={setFieldSettings}
|
|
/>
|
|
|
|
{/* 사용자 초대 다이얼로그 */}
|
|
<UserInviteDialog
|
|
open={userInviteOpen}
|
|
onOpenChange={setUserInviteOpen}
|
|
onInvite={(data) => {
|
|
setUserInviteOpen(false);
|
|
}}
|
|
/>
|
|
|
|
{/* 삭제 확인 다이얼로그 */}
|
|
<DeleteConfirmDialog
|
|
open={deleteDialogOpen}
|
|
onOpenChange={setDeleteDialogOpen}
|
|
onConfirm={handleDeleteEmployee}
|
|
title="사원 삭제"
|
|
description={
|
|
<>
|
|
"{employeeToDelete?.name}" 사원을 삭제하시겠습니까?
|
|
<br />
|
|
<span className="text-destructive">
|
|
삭제된 사원 정보는 복구할 수 없습니다.
|
|
</span>
|
|
</>
|
|
}
|
|
loading={isDeleting}
|
|
/>
|
|
</>
|
|
),
|
|
}), [
|
|
employees,
|
|
tableColumns,
|
|
tabs,
|
|
activeTab,
|
|
filterConfig,
|
|
filterValues,
|
|
statCards,
|
|
startDate,
|
|
endDate,
|
|
handleAddEmployee,
|
|
handleCSVUpload,
|
|
handleRowClick,
|
|
handleEdit,
|
|
openDeleteDialog,
|
|
fieldSettingsOpen,
|
|
fieldSettings,
|
|
userInviteOpen,
|
|
deleteDialogOpen,
|
|
employeeToDelete,
|
|
isDeleting,
|
|
handleDeleteEmployee,
|
|
]);
|
|
|
|
return (
|
|
<UniversalListPage<Employee>
|
|
config={employeeConfig}
|
|
initialData={employees}
|
|
initialTotalCount={employees.length}
|
|
externalIsLoading={isLoading}
|
|
/>
|
|
);
|
|
} |