Merge remote-tracking branch 'origin/master'
# Conflicts: # src/components/hr/SalaryManagement/index.tsx # src/components/production/WorkResults/WorkResultList.tsx # tsconfig.tsbuildinfo
This commit is contained in:
@@ -19,13 +19,13 @@ import {
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import {
|
||||
IntegratedListTemplateV2,
|
||||
UniversalListPage,
|
||||
type UniversalListConfig,
|
||||
type TabOption,
|
||||
type TableColumn,
|
||||
type StatCard,
|
||||
type FilterFieldConfig,
|
||||
type FilterValues,
|
||||
} from '@/components/templates/IntegratedListTemplateV2';
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
||||
import { FieldSettingsDialog } from './FieldSettingsDialog';
|
||||
@@ -255,7 +255,7 @@ export function EmployeeManagement() {
|
||||
], [employees.length, stats]);
|
||||
|
||||
// 테이블 컬럼 정의
|
||||
const tableColumns: TableColumn[] = useMemo(() => [
|
||||
const tableColumns = useMemo(() => [
|
||||
{ key: 'rowNumber', label: '번호', className: 'w-[60px] text-center' },
|
||||
{ key: 'employeeCode', label: '사원코드', className: 'min-w-[100px]' },
|
||||
{ key: 'department', label: '부서', className: 'min-w-[100px]' },
|
||||
@@ -359,194 +359,6 @@ export function EmployeeManagement() {
|
||||
setDeleteDialogOpen(true);
|
||||
}, []);
|
||||
|
||||
// 테이블 행 렌더링
|
||||
const renderTableRow = useCallback((item: Employee, index: number, globalIndex: number) => {
|
||||
const isSelected = selectedItems.has(item.id);
|
||||
|
||||
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={() => toggleSelection(item.id)}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}, [selectedItems, toggleSelection, handleRowClick, handleEdit, openDeleteDialog]);
|
||||
|
||||
// 모바일 카드 렌더링
|
||||
const renderMobileCard = useCallback((
|
||||
item: Employee,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
isSelected: boolean,
|
||||
onToggle: () => void
|
||||
) => {
|
||||
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
|
||||
}
|
||||
/>
|
||||
);
|
||||
}, [handleRowClick, handleEdit, openDeleteDialog]);
|
||||
|
||||
// 헤더 액션 (DateRangeSelector + 버튼들)
|
||||
const headerActions = (
|
||||
<>
|
||||
<DateRangeSelector
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onStartDateChange={setStartDate}
|
||||
onEndDateChange={setEndDate}
|
||||
/>
|
||||
<div className="ml-auto 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>
|
||||
<Button onClick={handleAddEmployee}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
사원 등록
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
// ===== filterConfig 기반 통합 필터 시스템 =====
|
||||
const filterConfig: FilterFieldConfig[] = useMemo(() => [
|
||||
{
|
||||
@@ -593,99 +405,389 @@ export function EmployeeManagement() {
|
||||
setCurrentPage(1);
|
||||
}, []);
|
||||
|
||||
// 페이지네이션 설정
|
||||
const totalPages = Math.ceil(filteredEmployees.length / itemsPerPage);
|
||||
// ===== 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,
|
||||
|
||||
dateRangeSelector: {
|
||||
enabled: true,
|
||||
showPresets: true,
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange: setStartDate,
|
||||
onEndDateChange: setEndDate,
|
||||
},
|
||||
|
||||
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) => {
|
||||
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) => {
|
||||
console.log('[EmployeeManagement] Invite user - API 미구현:', data);
|
||||
setUserInviteOpen(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>사원 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
"{employeeToDelete?.name}" 사원을 삭제하시겠습니까?
|
||||
<br />
|
||||
<span className="text-destructive">
|
||||
삭제된 사원 정보는 복구할 수 없습니다.
|
||||
</span>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDeleteEmployee}
|
||||
disabled={isDeleting}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
{isDeleting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
삭제 중...
|
||||
</>
|
||||
) : (
|
||||
'삭제'
|
||||
)}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
),
|
||||
}), [
|
||||
employees,
|
||||
tableColumns,
|
||||
tabs,
|
||||
activeTab,
|
||||
filterConfig,
|
||||
filterValues,
|
||||
statCards,
|
||||
startDate,
|
||||
endDate,
|
||||
handleAddEmployee,
|
||||
handleCSVUpload,
|
||||
handleRowClick,
|
||||
handleEdit,
|
||||
openDeleteDialog,
|
||||
fieldSettingsOpen,
|
||||
fieldSettings,
|
||||
userInviteOpen,
|
||||
deleteDialogOpen,
|
||||
employeeToDelete,
|
||||
isDeleting,
|
||||
handleDeleteEmployee,
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<IntegratedListTemplateV2<Employee>
|
||||
title="사원관리"
|
||||
description="사원 정보를 관리합니다"
|
||||
icon={Users}
|
||||
headerActions={headerActions}
|
||||
stats={statCards}
|
||||
searchValue={searchValue}
|
||||
onSearchChange={setSearchValue}
|
||||
searchPlaceholder="이름, 사원코드, 이메일 검색..."
|
||||
tabs={tabs}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
filterConfig={filterConfig}
|
||||
filterValues={filterValues}
|
||||
onFilterChange={handleFilterChange}
|
||||
onFilterReset={handleFilterReset}
|
||||
filterTitle="사원 필터"
|
||||
tableColumns={tableColumns}
|
||||
data={paginatedData}
|
||||
totalCount={filteredEmployees.length}
|
||||
allData={filteredEmployees}
|
||||
selectedItems={selectedItems}
|
||||
onToggleSelection={toggleSelection}
|
||||
onToggleSelectAll={toggleSelectAll}
|
||||
onBulkDelete={handleBulkDelete}
|
||||
getItemId={(item) => item.id}
|
||||
renderTableRow={renderTableRow}
|
||||
renderMobileCard={renderMobileCard}
|
||||
pagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems: filteredEmployees.length,
|
||||
itemsPerPage,
|
||||
onPageChange: setCurrentPage,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 필드 설정 다이얼로그 */}
|
||||
<FieldSettingsDialog
|
||||
open={fieldSettingsOpen}
|
||||
onOpenChange={setFieldSettingsOpen}
|
||||
settings={fieldSettings}
|
||||
onSave={setFieldSettings}
|
||||
/>
|
||||
|
||||
{/* 사용자 초대 다이얼로그 */}
|
||||
<UserInviteDialog
|
||||
open={userInviteOpen}
|
||||
onOpenChange={setUserInviteOpen}
|
||||
onInvite={(data) => {
|
||||
// TODO: API 개발 필요 - POST /api/v1/employees/invite
|
||||
console.log('[EmployeeManagement] Invite user - API 미구현:', data);
|
||||
setUserInviteOpen(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>사원 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
"{employeeToDelete?.name}" 사원을 삭제하시겠습니까?
|
||||
<br />
|
||||
<span className="text-destructive">
|
||||
삭제된 사원 정보는 복구할 수 없습니다.
|
||||
</span>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDeleteEmployee}
|
||||
disabled={isDeleting}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
{isDeleting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
삭제 중...
|
||||
</>
|
||||
) : (
|
||||
'삭제'
|
||||
)}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
<UniversalListPage<Employee>
|
||||
config={employeeConfig}
|
||||
initialData={employees}
|
||||
initialTotalCount={employees.length}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user