fix: TypeScript 타입 오류 수정 및 설정 페이지 추가
- BOMItem Omit 타입 시그니처 통일 (useTemplateManagement, SectionsTab, ItemMasterContext) - HeadersInit → Record<string, string> 타입 변경 - Zustand useShallow 마이그레이션 (zustand/react/shallow) - DataTable, ListPageTemplate 제네릭 타입 제약 추가 - 설정 관리 페이지 추가 (직급, 직책, 휴가정책, 근무일정, 권한) - HR 관리 페이지 추가 (급여, 휴가) - 단가관리 페이지 리팩토링 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
224
src/components/hr/VacationManagement/VacationAdjustDialog.tsx
Normal file
224
src/components/hr/VacationManagement/VacationAdjustDialog.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Plus, Minus } from 'lucide-react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import type { VacationUsageRecord, VacationAdjustment, VacationType } from './types';
|
||||
import { VACATION_TYPE_LABELS } from './types';
|
||||
|
||||
interface VacationAdjustDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
record: VacationUsageRecord | null;
|
||||
onSave: (adjustments: VacationAdjustment[]) => void;
|
||||
}
|
||||
|
||||
interface AdjustmentState {
|
||||
annual: number;
|
||||
monthly: number;
|
||||
reward: number;
|
||||
other: number;
|
||||
}
|
||||
|
||||
export function VacationAdjustDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
record,
|
||||
onSave,
|
||||
}: VacationAdjustDialogProps) {
|
||||
const [adjustments, setAdjustments] = useState<AdjustmentState>({
|
||||
annual: 0,
|
||||
monthly: 0,
|
||||
reward: 0,
|
||||
other: 0,
|
||||
});
|
||||
|
||||
// 다이얼로그가 열릴 때 조정값 초기화
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setAdjustments({
|
||||
annual: 0,
|
||||
monthly: 0,
|
||||
reward: 0,
|
||||
other: 0,
|
||||
});
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
// 조정값 증가
|
||||
const handleIncrease = (type: VacationType) => {
|
||||
setAdjustments(prev => ({
|
||||
...prev,
|
||||
[type]: prev[type] + 1,
|
||||
}));
|
||||
};
|
||||
|
||||
// 조정값 감소
|
||||
const handleDecrease = (type: VacationType) => {
|
||||
setAdjustments(prev => ({
|
||||
...prev,
|
||||
[type]: prev[type] - 1,
|
||||
}));
|
||||
};
|
||||
|
||||
// 조정값 직접 입력
|
||||
const handleInputChange = (type: VacationType, value: string) => {
|
||||
const numValue = parseInt(value, 10);
|
||||
if (!isNaN(numValue)) {
|
||||
setAdjustments(prev => ({
|
||||
...prev,
|
||||
[type]: numValue,
|
||||
}));
|
||||
} else if (value === '' || value === '-') {
|
||||
setAdjustments(prev => ({
|
||||
...prev,
|
||||
[type]: 0,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
// 저장 핸들러
|
||||
const handleSave = () => {
|
||||
const adjustmentList: VacationAdjustment[] = [];
|
||||
|
||||
(Object.keys(adjustments) as VacationType[]).forEach((type) => {
|
||||
if (adjustments[type] !== 0) {
|
||||
adjustmentList.push({
|
||||
vacationType: type,
|
||||
adjustment: adjustments[type],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onSave(adjustmentList);
|
||||
};
|
||||
|
||||
// 취소 핸들러
|
||||
const handleCancel = () => {
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
if (!record) return null;
|
||||
|
||||
const vacationTypes: VacationType[] = ['annual', 'monthly', 'reward', 'other'];
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>휴가 조정</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 사원 정보 */}
|
||||
<div className="bg-muted/50 rounded-lg p-4 mb-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{record.department} / {record.employeeName} / {record.rank}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 조정 테이블 */}
|
||||
<div className="py-2">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[100px]">휴가종류</TableHead>
|
||||
<TableHead className="text-center">총일수</TableHead>
|
||||
<TableHead className="text-center">사용일수</TableHead>
|
||||
<TableHead className="text-center">잔여일수</TableHead>
|
||||
<TableHead className="text-center w-[150px]">조정</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{vacationTypes.map((type) => {
|
||||
const info = record[type];
|
||||
const adjustment = adjustments[type];
|
||||
const newTotal = info.total + adjustment;
|
||||
const newRemaining = info.remaining + adjustment;
|
||||
|
||||
return (
|
||||
<TableRow key={type}>
|
||||
<TableCell className="font-medium">
|
||||
{VACATION_TYPE_LABELS[type]}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<span className={adjustment !== 0 ? 'line-through text-muted-foreground mr-2' : ''}>
|
||||
{info.total}
|
||||
</span>
|
||||
{adjustment !== 0 && (
|
||||
<span className={adjustment > 0 ? 'text-green-600' : 'text-red-600'}>
|
||||
{newTotal}
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{info.used}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<span className={adjustment !== 0 ? 'line-through text-muted-foreground mr-2' : ''}>
|
||||
{info.remaining}
|
||||
</span>
|
||||
{adjustment !== 0 && (
|
||||
<span className={adjustment > 0 ? 'text-green-600' : 'text-red-600'}>
|
||||
{newRemaining}
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleDecrease(type)}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<Input
|
||||
type="text"
|
||||
value={adjustment}
|
||||
onChange={(e) => handleInputChange(type, e.target.value)}
|
||||
className="w-16 h-8 text-center"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleIncrease(type)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={handleCancel}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave}>
|
||||
저장
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
162
src/components/hr/VacationManagement/VacationGrantDialog.tsx
Normal file
162
src/components/hr/VacationManagement/VacationGrantDialog.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import type { VacationGrantFormData, VacationType } from './types';
|
||||
import { VACATION_TYPE_LABELS } from './types';
|
||||
|
||||
interface VacationGrantDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSave: (data: VacationGrantFormData) => void;
|
||||
}
|
||||
|
||||
const mockEmployees = [
|
||||
{ id: '1', name: '김철수', department: '개발팀' },
|
||||
{ id: '2', name: '이영희', department: '디자인팀' },
|
||||
{ id: '3', name: '박민수', department: '기획팀' },
|
||||
{ id: '4', name: '정수진', department: '영업팀' },
|
||||
{ id: '5', name: '최동현', department: '인사팀' },
|
||||
];
|
||||
|
||||
export function VacationGrantDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
onSave,
|
||||
}: VacationGrantDialogProps) {
|
||||
const [formData, setFormData] = useState<VacationGrantFormData>({
|
||||
employeeId: '',
|
||||
vacationType: 'annual',
|
||||
grantDays: 1,
|
||||
reason: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setFormData({
|
||||
employeeId: '',
|
||||
vacationType: 'annual',
|
||||
grantDays: 1,
|
||||
reason: '',
|
||||
});
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const handleSave = () => {
|
||||
if (!formData.employeeId) {
|
||||
alert('사원을 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
if (formData.grantDays < 1) {
|
||||
alert('부여 일수는 1 이상이어야 합니다.');
|
||||
return;
|
||||
}
|
||||
onSave(formData);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>휴가 부여 등록</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 py-4">
|
||||
{/* 사원 선택 */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="employee">사원 선택</Label>
|
||||
<Select
|
||||
value={formData.employeeId}
|
||||
onValueChange={(value) => setFormData(prev => ({ ...prev, employeeId: value }))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="사원을 선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{mockEmployees.map((emp) => (
|
||||
<SelectItem key={emp.id} value={emp.id}>
|
||||
{emp.name} ({emp.department})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 휴가 유형 */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="vacationType">휴가 유형</Label>
|
||||
<Select
|
||||
value={formData.vacationType}
|
||||
onValueChange={(value) => setFormData(prev => ({ ...prev, vacationType: value as VacationType }))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(VACATION_TYPE_LABELS).map(([key, label]) => (
|
||||
<SelectItem key={key} value={key}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 부여 일수 */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="grantDays">부여 일수</Label>
|
||||
<Input
|
||||
id="grantDays"
|
||||
type="number"
|
||||
min={1}
|
||||
value={formData.grantDays}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, grantDays: parseInt(e.target.value) || 1 }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 사유 */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="reason">사유</Label>
|
||||
<Textarea
|
||||
id="reason"
|
||||
placeholder="부여 사유를 입력하세요 (선택)"
|
||||
value={formData.reason || ''}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, reason: e.target.value }))}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={handleCancel}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave}>
|
||||
등록
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
200
src/components/hr/VacationManagement/VacationRegisterDialog.tsx
Normal file
200
src/components/hr/VacationManagement/VacationRegisterDialog.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import type {
|
||||
VacationFormData,
|
||||
VacationTypeConfig,
|
||||
EmployeeOption,
|
||||
VacationType,
|
||||
} from './types';
|
||||
|
||||
interface VacationRegisterDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
employees: EmployeeOption[];
|
||||
vacationTypes: VacationTypeConfig[];
|
||||
onSave: (data: VacationFormData) => void;
|
||||
}
|
||||
|
||||
export function VacationRegisterDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
employees,
|
||||
vacationTypes,
|
||||
onSave,
|
||||
}: VacationRegisterDialogProps) {
|
||||
const [formData, setFormData] = useState<VacationFormData>({
|
||||
employeeId: '',
|
||||
vacationType: 'annual',
|
||||
days: 0,
|
||||
memo: '',
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// 다이얼로그가 열릴 때 폼 초기화
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setFormData({
|
||||
employeeId: '',
|
||||
vacationType: 'annual',
|
||||
days: 0,
|
||||
memo: '',
|
||||
});
|
||||
setErrors({});
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
// 폼 유효성 검사
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.employeeId) {
|
||||
newErrors.employeeId = '사원을 선택해주세요';
|
||||
}
|
||||
|
||||
if (!formData.vacationType) {
|
||||
newErrors.vacationType = '휴가 종류를 선택해주세요';
|
||||
}
|
||||
|
||||
if (formData.days <= 0) {
|
||||
newErrors.days = '지급 일수를 입력해주세요';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
// 저장 핸들러
|
||||
const handleSave = () => {
|
||||
if (validateForm()) {
|
||||
onSave(formData);
|
||||
}
|
||||
};
|
||||
|
||||
// 취소 핸들러
|
||||
const handleCancel = () => {
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>휴가 등록</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 py-4">
|
||||
{/* 사원 선택 */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="employee">
|
||||
사원 선택 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.employeeId}
|
||||
onValueChange={(value) => setFormData((prev: VacationFormData) => ({ ...prev, employeeId: value }))}
|
||||
>
|
||||
<SelectTrigger id="employee" className={errors.employeeId ? 'border-red-500' : ''}>
|
||||
<SelectValue placeholder="사원을 선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{employees.map((employee) => (
|
||||
<SelectItem key={employee.id} value={employee.id}>
|
||||
{employee.department} / {employee.name} / {employee.rank}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.employeeId && (
|
||||
<p className="text-sm text-red-500">{errors.employeeId}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 휴가 종류 */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="vacationType">
|
||||
휴가 종류 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.vacationType}
|
||||
onValueChange={(value) => setFormData((prev: VacationFormData) => ({ ...prev, vacationType: value as VacationType }))}
|
||||
>
|
||||
<SelectTrigger id="vacationType" className={errors.vacationType ? 'border-red-500' : ''}>
|
||||
<SelectValue placeholder="휴가 종류를 선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{vacationTypes.map((type) => (
|
||||
<SelectItem key={type.id} value={type.type}>
|
||||
{type.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.vacationType && (
|
||||
<p className="text-sm text-red-500">{errors.vacationType}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 지급 일수 */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="days">
|
||||
지급 일수 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="days"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.5"
|
||||
value={formData.days || ''}
|
||||
onChange={(e) => setFormData((prev: VacationFormData) => ({ ...prev, days: parseFloat(e.target.value) || 0 }))}
|
||||
className={errors.days ? 'border-red-500' : ''}
|
||||
placeholder="일수를 입력하세요"
|
||||
/>
|
||||
{errors.days && (
|
||||
<p className="text-sm text-red-500">{errors.days}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 비고 */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="memo">비고</Label>
|
||||
<Textarea
|
||||
id="memo"
|
||||
value={formData.memo || ''}
|
||||
onChange={(e) => setFormData((prev: VacationFormData) => ({ ...prev, memo: e.target.value }))}
|
||||
placeholder="비고를 입력하세요 (선택)"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={handleCancel}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave}>
|
||||
등록
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
232
src/components/hr/VacationManagement/VacationRequestDialog.tsx
Normal file
232
src/components/hr/VacationManagement/VacationRequestDialog.tsx
Normal file
@@ -0,0 +1,232 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { format, differenceInDays } from 'date-fns';
|
||||
import { CalendarIcon } from 'lucide-react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Calendar } from '@/components/ui/calendar';
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { VacationRequestFormData, VacationType } from './types';
|
||||
import { VACATION_TYPE_LABELS } from './types';
|
||||
|
||||
interface VacationRequestDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSave: (data: VacationRequestFormData) => void;
|
||||
}
|
||||
|
||||
const mockEmployees = [
|
||||
{ id: '1', name: '김철수', department: '개발팀' },
|
||||
{ id: '2', name: '이영희', department: '디자인팀' },
|
||||
{ id: '3', name: '박민수', department: '기획팀' },
|
||||
{ id: '4', name: '정수진', department: '영업팀' },
|
||||
{ id: '5', name: '최동현', department: '인사팀' },
|
||||
];
|
||||
|
||||
export function VacationRequestDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
onSave,
|
||||
}: VacationRequestDialogProps) {
|
||||
const [formData, setFormData] = useState<VacationRequestFormData>({
|
||||
employeeId: '',
|
||||
vacationType: 'annual',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
vacationDays: 1,
|
||||
});
|
||||
const [startDate, setStartDate] = useState<Date | undefined>();
|
||||
const [endDate, setEndDate] = useState<Date | undefined>();
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setFormData({
|
||||
employeeId: '',
|
||||
vacationType: 'annual',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
vacationDays: 1,
|
||||
});
|
||||
setStartDate(undefined);
|
||||
setEndDate(undefined);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (startDate && endDate) {
|
||||
const days = differenceInDays(endDate, startDate) + 1;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
startDate: format(startDate, 'yyyy-MM-dd'),
|
||||
endDate: format(endDate, 'yyyy-MM-dd'),
|
||||
vacationDays: days > 0 ? days : 1,
|
||||
}));
|
||||
}
|
||||
}, [startDate, endDate]);
|
||||
|
||||
const handleSave = () => {
|
||||
if (!formData.employeeId) {
|
||||
alert('사원을 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
if (!startDate || !endDate) {
|
||||
alert('휴가 기간을 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
if (endDate < startDate) {
|
||||
alert('종료일은 시작일 이후여야 합니다.');
|
||||
return;
|
||||
}
|
||||
onSave(formData);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>휴가 신청</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 py-4">
|
||||
{/* 사원 선택 */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="employee">사원 선택</Label>
|
||||
<Select
|
||||
value={formData.employeeId}
|
||||
onValueChange={(value) => setFormData(prev => ({ ...prev, employeeId: value }))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="사원을 선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{mockEmployees.map((emp) => (
|
||||
<SelectItem key={emp.id} value={emp.id}>
|
||||
{emp.name} ({emp.department})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 휴가 유형 */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="vacationType">휴가 유형</Label>
|
||||
<Select
|
||||
value={formData.vacationType}
|
||||
onValueChange={(value) => setFormData(prev => ({ ...prev, vacationType: value as VacationType }))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(VACATION_TYPE_LABELS).map(([key, label]) => (
|
||||
<SelectItem key={key} value={key}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 시작일 */}
|
||||
<div className="grid gap-2">
|
||||
<Label>시작일</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'w-full justify-start text-left font-normal',
|
||||
!startDate && 'text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{startDate ? format(startDate, 'yyyy-MM-dd') : '시작일 선택'}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={startDate}
|
||||
onSelect={setStartDate}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 종료일 */}
|
||||
<div className="grid gap-2">
|
||||
<Label>종료일</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'w-full justify-start text-left font-normal',
|
||||
!endDate && 'text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{endDate ? format(endDate, 'yyyy-MM-dd') : '종료일 선택'}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={endDate}
|
||||
onSelect={setEndDate}
|
||||
disabled={(date) => startDate ? date < startDate : false}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 휴가 일수 (자동 계산) */}
|
||||
{startDate && endDate && (
|
||||
<div className="grid gap-2">
|
||||
<Label>휴가 일수</Label>
|
||||
<div className="p-3 bg-muted rounded-md text-center font-medium">
|
||||
{formData.vacationDays}일
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={handleCancel}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave}>
|
||||
신청
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Plus, Trash2 } from 'lucide-react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import type { VacationTypeConfig, VacationType } from './types';
|
||||
|
||||
interface VacationTypeSettingsDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
vacationTypes: VacationTypeConfig[];
|
||||
onSave: (types: VacationTypeConfig[]) => void;
|
||||
}
|
||||
|
||||
export function VacationTypeSettingsDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
vacationTypes,
|
||||
onSave,
|
||||
}: VacationTypeSettingsDialogProps) {
|
||||
const [localTypes, setLocalTypes] = useState<VacationTypeConfig[]>([]);
|
||||
|
||||
// 다이얼로그가 열릴 때 로컬 상태 초기화
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setLocalTypes([...vacationTypes]);
|
||||
}
|
||||
}, [open, vacationTypes]);
|
||||
|
||||
// 사용여부 토글
|
||||
const handleToggleActive = (id: string) => {
|
||||
setLocalTypes(prev =>
|
||||
prev.map(type =>
|
||||
type.id === id ? { ...type, isActive: !type.isActive } : type
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
// 이름 변경
|
||||
const handleNameChange = (id: string, name: string) => {
|
||||
setLocalTypes(prev =>
|
||||
prev.map(type =>
|
||||
type.id === id ? { ...type, name } : type
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
// 설명 변경
|
||||
const handleDescriptionChange = (id: string, description: string) => {
|
||||
setLocalTypes(prev =>
|
||||
prev.map(type =>
|
||||
type.id === id ? { ...type, description } : type
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
// 휴가종류 추가
|
||||
const handleAddType = () => {
|
||||
const newId = String(Date.now());
|
||||
const newType: VacationTypeConfig = {
|
||||
id: newId,
|
||||
name: '새 휴가종류',
|
||||
type: 'other' as VacationType,
|
||||
isActive: true,
|
||||
description: '',
|
||||
};
|
||||
setLocalTypes(prev => [...prev, newType]);
|
||||
};
|
||||
|
||||
// 휴가종류 삭제
|
||||
const handleDeleteType = (id: string) => {
|
||||
// 기본 4개 타입은 삭제 불가
|
||||
const defaultTypeIds = ['1', '2', '3', '4'];
|
||||
if (defaultTypeIds.includes(id)) {
|
||||
return;
|
||||
}
|
||||
setLocalTypes(prev => prev.filter(type => type.id !== id));
|
||||
};
|
||||
|
||||
// 저장 핸들러
|
||||
const handleSave = () => {
|
||||
onSave(localTypes);
|
||||
};
|
||||
|
||||
// 취소 핸들러
|
||||
const handleCancel = () => {
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
// 기본 타입인지 확인 (삭제 불가)
|
||||
const isDefaultType = (id: string) => {
|
||||
return ['1', '2', '3', '4'].includes(id);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[700px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>휴가 종류 설정</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="py-4">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[150px]">휴가종류명</TableHead>
|
||||
<TableHead className="w-[100px] text-center">사용여부</TableHead>
|
||||
<TableHead>설명</TableHead>
|
||||
<TableHead className="w-[60px] text-center">삭제</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{localTypes.map((type) => (
|
||||
<TableRow key={type.id}>
|
||||
<TableCell>
|
||||
<Input
|
||||
value={type.name}
|
||||
onChange={(e) => handleNameChange(type.id, e.target.value)}
|
||||
className="h-8"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<div className="flex justify-center">
|
||||
<Switch
|
||||
checked={type.isActive}
|
||||
onCheckedChange={() => handleToggleActive(type.id)}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Input
|
||||
value={type.description || ''}
|
||||
onChange={(e) => handleDescriptionChange(type.id, e.target.value)}
|
||||
placeholder="설명을 입력하세요"
|
||||
className="h-8"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDeleteType(type.id)}
|
||||
disabled={isDefaultType(type.id)}
|
||||
className={isDefaultType(type.id) ? 'opacity-30 cursor-not-allowed' : 'text-red-500 hover:text-red-700'}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
{/* 휴가종류 추가 버튼 */}
|
||||
<div className="mt-4">
|
||||
<Button variant="outline" onClick={handleAddType} className="w-full">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
휴가종류 추가
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={handleCancel}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave}>
|
||||
저장
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
571
src/components/hr/VacationManagement/index.tsx
Normal file
571
src/components/hr/VacationManagement/index.tsx
Normal file
@@ -0,0 +1,571 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useCallback } from 'react';
|
||||
import { format } from 'date-fns';
|
||||
import {
|
||||
Download,
|
||||
Plus,
|
||||
Calendar,
|
||||
Check,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { TableRow, TableCell } from '@/components/ui/table';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
IntegratedListTemplateV2,
|
||||
type TableColumn,
|
||||
type StatCard,
|
||||
type TabOption,
|
||||
} from '@/components/templates/IntegratedListTemplateV2';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
|
||||
import { VacationGrantDialog } from './VacationGrantDialog';
|
||||
import { VacationRequestDialog } from './VacationRequestDialog';
|
||||
import type {
|
||||
MainTabType,
|
||||
VacationUsageRecord,
|
||||
VacationGrantRecord,
|
||||
VacationRequestRecord,
|
||||
SortOption,
|
||||
VacationType,
|
||||
RequestStatus,
|
||||
} from './types';
|
||||
import {
|
||||
MAIN_TAB_LABELS,
|
||||
SORT_OPTIONS,
|
||||
VACATION_TYPE_LABELS,
|
||||
REQUEST_STATUS_LABELS,
|
||||
REQUEST_STATUS_COLORS,
|
||||
} from './types';
|
||||
|
||||
// ===== Mock 데이터 생성 =====
|
||||
const generateUsageData = (): VacationUsageRecord[] => {
|
||||
const departments = ['개발팀', '디자인팀', '기획팀', '영업팀', '인사팀'];
|
||||
const positions = ['팀장', '파트장', '선임', '주임', '사원'];
|
||||
const ranks = ['부장', '차장', '과장', '대리', '사원'];
|
||||
|
||||
// 휴가 일수 포맷: "15일", "12일3시간" 등
|
||||
const usedVacations = ['12일3시간', '8일', '5일4시간', '10일', '3일2시간', '7일5시간', '9일', '6일1시간', '4일', '11일6시간'];
|
||||
const remainingVacations = ['2일5시간', '7일', '9일4시간', '5일', '11일6시간', '7일3시간', '6일', '8일7시간', '11일', '3일2시간'];
|
||||
const grantedVacations = ['0일', '3일', '2일', '1일', '4일', '0일', '2일', '3일', '1일', '0일'];
|
||||
|
||||
return Array.from({ length: 10 }, (_, i) => ({
|
||||
id: `usage-${i + 1}`,
|
||||
employeeId: `EMP${String(i + 1).padStart(3, '0')}`,
|
||||
employeeName: ['김철수', '이영희', '박민수', '정수진', '최동현', '강미영', '윤상호', '임지현', '한승우', '송예진'][i],
|
||||
department: departments[i % departments.length],
|
||||
position: positions[i % positions.length],
|
||||
rank: ranks[i % ranks.length],
|
||||
hireDate: format(new Date(2020 + (i % 5), i % 12, (i % 28) + 1), 'yyyy-MM-dd'),
|
||||
baseVacation: '15일',
|
||||
grantedVacation: grantedVacations[i],
|
||||
usedVacation: usedVacations[i],
|
||||
remainingVacation: remainingVacations[i],
|
||||
// 휴가 유형별 상세 (조정 다이얼로그용)
|
||||
annual: { total: 15, used: 10 + (i % 5), remaining: 5 - (i % 5) },
|
||||
monthly: { total: 3, used: i % 3, remaining: 3 - (i % 3) },
|
||||
reward: { total: i % 4, used: 0, remaining: i % 4 },
|
||||
other: { total: 0, used: 0, remaining: 0 },
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
}));
|
||||
};
|
||||
|
||||
const generateGrantData = (): VacationGrantRecord[] => {
|
||||
const departments = ['개발팀', '디자인팀', '기획팀', '영업팀', '인사팀'];
|
||||
const positions = ['팀장', '파트장', '선임', '주임', '사원'];
|
||||
const ranks = ['부장', '차장', '과장', '대리', '사원'];
|
||||
const vacationTypes: VacationType[] = ['annual', 'monthly', 'reward', 'other'];
|
||||
const reasons = ['연차 부여', '포상 휴가', '특별 휴가', '경조사 휴가', ''];
|
||||
|
||||
return Array.from({ length: 8 }, (_, i) => ({
|
||||
id: `grant-${i + 1}`,
|
||||
employeeId: `EMP${String(i + 1).padStart(3, '0')}`,
|
||||
employeeName: ['김철수', '이영희', '박민수', '정수진', '최동현', '강미영', '윤상호', '임지현'][i],
|
||||
department: departments[i % departments.length],
|
||||
position: positions[i % positions.length],
|
||||
rank: ranks[i % ranks.length],
|
||||
vacationType: vacationTypes[i % vacationTypes.length],
|
||||
grantDate: format(new Date(2025, 11, (i % 28) + 1), 'yyyy-MM-dd'),
|
||||
grantDays: Math.floor(Math.random() * 5) + 1,
|
||||
reason: reasons[i % reasons.length],
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
}));
|
||||
};
|
||||
|
||||
const generateRequestData = (): VacationRequestRecord[] => {
|
||||
const departments = ['개발팀', '디자인팀', '기획팀', '영업팀', '인사팀'];
|
||||
const positions = ['팀장', '파트장', '선임', '주임', '사원'];
|
||||
const ranks = ['부장', '차장', '과장', '대리', '사원'];
|
||||
const statuses: RequestStatus[] = ['pending', 'approved', 'rejected'];
|
||||
|
||||
return Array.from({ length: 7 }, (_, i) => {
|
||||
const startDate = new Date(2025, 11, (i % 28) + 1);
|
||||
const endDate = new Date(startDate);
|
||||
endDate.setDate(endDate.getDate() + Math.floor(Math.random() * 5) + 1);
|
||||
|
||||
return {
|
||||
id: `request-${i + 1}`,
|
||||
employeeId: `EMP${String(i + 1).padStart(3, '0')}`,
|
||||
employeeName: ['김철수', '이영희', '박민수', '정수진', '최동현', '강미영', '윤상호'][i],
|
||||
department: departments[i % departments.length],
|
||||
position: positions[i % positions.length],
|
||||
rank: ranks[i % ranks.length],
|
||||
startDate: format(startDate, 'yyyy-MM-dd'),
|
||||
endDate: format(endDate, 'yyyy-MM-dd'),
|
||||
vacationDays: Math.floor(Math.random() * 5) + 1,
|
||||
status: statuses[i % statuses.length],
|
||||
requestDate: format(new Date(2025, 11, i + 1), 'yyyy-MM-dd'),
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export function VacationManagement() {
|
||||
// ===== 상태 관리 =====
|
||||
const [mainTab, setMainTab] = useState<MainTabType>('usage');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [sortOption, setSortOption] = useState<SortOption>('rank');
|
||||
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 20;
|
||||
|
||||
// 날짜 범위 상태 (input type="date" 용)
|
||||
const [startDate, setStartDate] = useState('2025-12-01');
|
||||
const [endDate, setEndDate] = useState('2025-12-31');
|
||||
|
||||
// 다이얼로그 상태
|
||||
const [grantDialogOpen, setGrantDialogOpen] = useState(false);
|
||||
const [requestDialogOpen, setRequestDialogOpen] = useState(false);
|
||||
|
||||
// Mock 데이터
|
||||
const [usageData] = useState<VacationUsageRecord[]>(generateUsageData);
|
||||
const [grantData] = useState<VacationGrantRecord[]>(generateGrantData);
|
||||
const [requestData] = useState<VacationRequestRecord[]>(generateRequestData);
|
||||
|
||||
// ===== 탭 변경 핸들러 =====
|
||||
const handleMainTabChange = useCallback((value: string) => {
|
||||
setMainTab(value as MainTabType);
|
||||
setSelectedItems(new Set());
|
||||
setSearchQuery('');
|
||||
setCurrentPage(1);
|
||||
}, []);
|
||||
|
||||
// ===== 체크박스 핸들러 =====
|
||||
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(() => {
|
||||
const currentData = mainTab === 'usage' ? filteredUsageData : mainTab === 'grant' ? filteredGrantData : filteredRequestData;
|
||||
if (selectedItems.size === currentData.length && currentData.length > 0) {
|
||||
setSelectedItems(new Set());
|
||||
} else {
|
||||
setSelectedItems(new Set(currentData.map(item => item.id)));
|
||||
}
|
||||
}, [mainTab, selectedItems.size]);
|
||||
|
||||
// ===== 필터링된 데이터 =====
|
||||
const filteredUsageData = useMemo(() => {
|
||||
return usageData.filter(item =>
|
||||
item.employeeName.includes(searchQuery) ||
|
||||
item.department.includes(searchQuery)
|
||||
);
|
||||
}, [usageData, searchQuery]);
|
||||
|
||||
const filteredGrantData = useMemo(() => {
|
||||
return grantData.filter(item =>
|
||||
item.employeeName.includes(searchQuery) ||
|
||||
item.department.includes(searchQuery)
|
||||
);
|
||||
}, [grantData, searchQuery]);
|
||||
|
||||
const filteredRequestData = useMemo(() => {
|
||||
return requestData.filter(item =>
|
||||
item.employeeName.includes(searchQuery) ||
|
||||
item.department.includes(searchQuery)
|
||||
);
|
||||
}, [requestData, searchQuery]);
|
||||
|
||||
// ===== 현재 탭 데이터 =====
|
||||
const currentData = useMemo(() => {
|
||||
switch (mainTab) {
|
||||
case 'usage': return filteredUsageData;
|
||||
case 'grant': return filteredGrantData;
|
||||
case 'request': return filteredRequestData;
|
||||
default: return [];
|
||||
}
|
||||
}, [mainTab, filteredUsageData, filteredGrantData, filteredRequestData]);
|
||||
|
||||
const paginatedData = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
return currentData.slice(startIndex, startIndex + itemsPerPage);
|
||||
}, [currentData, currentPage, itemsPerPage]);
|
||||
|
||||
const totalPages = Math.ceil(currentData.length / itemsPerPage);
|
||||
|
||||
// ===== 승인/거절 핸들러 =====
|
||||
const handleApprove = useCallback(() => {
|
||||
console.log('승인:', Array.from(selectedItems));
|
||||
setSelectedItems(new Set());
|
||||
}, [selectedItems]);
|
||||
|
||||
const handleReject = useCallback(() => {
|
||||
console.log('거절:', Array.from(selectedItems));
|
||||
setSelectedItems(new Set());
|
||||
}, [selectedItems]);
|
||||
|
||||
// ===== 통계 카드 (스크린샷: 연차 N명, 월차 N명, 포상휴가 N명, 기타휴가 N명) =====
|
||||
const statCards: StatCard[] = useMemo(() => [
|
||||
{ label: '연차', value: `${usageData.length}명`, icon: Calendar, iconColor: 'text-blue-500' },
|
||||
{ label: '월차', value: `${usageData.filter(u => u.grantedVacation !== '0일').length}명`, icon: Calendar, iconColor: 'text-green-500' },
|
||||
{ label: '포상휴가', value: `${grantData.filter(g => g.vacationType === 'reward').length}명`, icon: Calendar, iconColor: 'text-purple-500' },
|
||||
{ label: '기타휴가', value: `${grantData.filter(g => g.vacationType === 'other').length}명`, icon: Calendar, iconColor: 'text-orange-500' },
|
||||
], [usageData, grantData]);
|
||||
|
||||
// ===== 탭 옵션 (카드 아래에 표시됨) =====
|
||||
const tabs: TabOption[] = useMemo(() => [
|
||||
{ value: 'usage', label: MAIN_TAB_LABELS.usage, count: usageData.length, color: 'blue' },
|
||||
{ value: 'grant', label: MAIN_TAB_LABELS.grant, count: grantData.length, color: 'green' },
|
||||
{ value: 'request', label: MAIN_TAB_LABELS.request, count: requestData.length, color: 'purple' },
|
||||
], [usageData.length, grantData.length, requestData.length]);
|
||||
|
||||
// ===== 테이블 컬럼 (탭별) =====
|
||||
const tableColumns: TableColumn[] = useMemo(() => {
|
||||
if (mainTab === 'usage') {
|
||||
// 휴가 사용현황: 부서|직책|이름|직급|입사일|기본|부여|사용|잔액
|
||||
return [
|
||||
{ key: 'department', label: '부서' },
|
||||
{ key: 'position', label: '직책' },
|
||||
{ key: 'name', label: '이름' },
|
||||
{ key: 'rank', label: '직급' },
|
||||
{ key: 'hireDate', label: '입사일' },
|
||||
{ key: 'base', label: '기본', className: 'text-center' },
|
||||
{ key: 'granted', label: '부여', className: 'text-center' },
|
||||
{ key: 'used', label: '사용', className: 'text-center' },
|
||||
{ key: 'remaining', label: '잔여', className: 'text-center' },
|
||||
];
|
||||
} else if (mainTab === 'grant') {
|
||||
// 휴가 부여현황: 부서|직책|이름|직급|유형|부여일|부여휴가일수|사유
|
||||
return [
|
||||
{ key: 'department', label: '부서' },
|
||||
{ key: 'position', label: '직책' },
|
||||
{ key: 'name', label: '이름' },
|
||||
{ key: 'rank', label: '직급' },
|
||||
{ key: 'type', label: '유형' },
|
||||
{ key: 'grantDate', label: '부여일' },
|
||||
{ key: 'grantDays', label: '부여휴가일수', className: 'text-center' },
|
||||
{ key: 'reason', label: '사유' },
|
||||
];
|
||||
} else {
|
||||
// 휴가 신청현황: 부서|직책|이름|직급|휴가기간|휴가일수|상태|신청일
|
||||
return [
|
||||
{ key: 'department', label: '부서' },
|
||||
{ key: 'position', label: '직책' },
|
||||
{ key: 'name', label: '이름' },
|
||||
{ key: 'rank', label: '직급' },
|
||||
{ key: 'period', label: '휴가기간' },
|
||||
{ key: 'days', label: '휴가일수', className: 'text-center' },
|
||||
{ key: 'status', label: '상태', className: 'text-center' },
|
||||
{ key: 'requestDate', label: '신청일' },
|
||||
];
|
||||
}
|
||||
}, [mainTab]);
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
const renderTableRow = useCallback((item: any, index: number, globalIndex: number) => {
|
||||
const isSelected = selectedItems.has(item.id);
|
||||
|
||||
if (mainTab === 'usage') {
|
||||
const record = item as VacationUsageRecord;
|
||||
return (
|
||||
<TableRow key={record.id} className="hover:bg-muted/50">
|
||||
<TableCell className="text-center">
|
||||
<Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(record.id)} />
|
||||
</TableCell>
|
||||
<TableCell>{record.department}</TableCell>
|
||||
<TableCell>{record.position}</TableCell>
|
||||
<TableCell className="font-medium">{record.employeeName}</TableCell>
|
||||
<TableCell>{record.rank}</TableCell>
|
||||
<TableCell>{format(new Date(record.hireDate), 'yyyy-MM-dd')}</TableCell>
|
||||
<TableCell className="text-center">{record.baseVacation}</TableCell>
|
||||
<TableCell className="text-center">{record.grantedVacation}</TableCell>
|
||||
<TableCell className="text-center">{record.usedVacation}</TableCell>
|
||||
<TableCell className="text-center font-medium">{record.remainingVacation}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
} else if (mainTab === 'grant') {
|
||||
const record = item as VacationGrantRecord;
|
||||
return (
|
||||
<TableRow key={record.id} className="hover:bg-muted/50">
|
||||
<TableCell className="text-center">
|
||||
<Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(record.id)} />
|
||||
</TableCell>
|
||||
<TableCell>{record.department}</TableCell>
|
||||
<TableCell>{record.position}</TableCell>
|
||||
<TableCell className="font-medium">{record.employeeName}</TableCell>
|
||||
<TableCell>{record.rank}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">{VACATION_TYPE_LABELS[record.vacationType]}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{format(new Date(record.grantDate), 'yyyy-MM-dd')}</TableCell>
|
||||
<TableCell className="text-center">{record.grantDays}일</TableCell>
|
||||
<TableCell className="text-muted-foreground">{record.reason || '-'}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
} else {
|
||||
const record = item as VacationRequestRecord;
|
||||
return (
|
||||
<TableRow key={record.id} className="hover:bg-muted/50">
|
||||
<TableCell className="text-center">
|
||||
<Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(record.id)} />
|
||||
</TableCell>
|
||||
<TableCell>{record.department}</TableCell>
|
||||
<TableCell>{record.position}</TableCell>
|
||||
<TableCell className="font-medium">{record.employeeName}</TableCell>
|
||||
<TableCell>{record.rank}</TableCell>
|
||||
<TableCell>
|
||||
{format(new Date(record.startDate), 'yyyy-MM-dd')} ~ {format(new Date(record.endDate), 'yyyy-MM-dd')}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{record.vacationDays}일</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Badge className={REQUEST_STATUS_COLORS[record.status]}>
|
||||
{REQUEST_STATUS_LABELS[record.status]}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{format(new Date(record.requestDate), 'yyyy-MM-dd')}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
}, [mainTab, selectedItems, toggleSelection]);
|
||||
|
||||
// ===== 모바일 카드 렌더링 =====
|
||||
const renderMobileCard = useCallback((
|
||||
item: any,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
isSelected: boolean,
|
||||
onToggle: () => void
|
||||
) => {
|
||||
if (mainTab === 'usage') {
|
||||
const record = item as VacationUsageRecord;
|
||||
return (
|
||||
<ListMobileCard
|
||||
id={record.id}
|
||||
title={record.employeeName}
|
||||
headerBadges={<Badge variant="outline">{record.department}</Badge>}
|
||||
isSelected={isSelected}
|
||||
onToggleSelection={onToggle}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<InfoField label="직급" value={record.rank} />
|
||||
<InfoField label="입사일" value={record.hireDate} />
|
||||
<InfoField label="기본" value={record.baseVacation} />
|
||||
<InfoField label="부여" value={record.grantedVacation} />
|
||||
<InfoField label="사용" value={record.usedVacation} />
|
||||
<InfoField label="잔여" value={record.remainingVacation} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
} else if (mainTab === 'grant') {
|
||||
const record = item as VacationGrantRecord;
|
||||
return (
|
||||
<ListMobileCard
|
||||
id={record.id}
|
||||
title={record.employeeName}
|
||||
headerBadges={<Badge variant="outline">{VACATION_TYPE_LABELS[record.vacationType]}</Badge>}
|
||||
isSelected={isSelected}
|
||||
onToggleSelection={onToggle}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<InfoField label="부서" value={record.department} />
|
||||
<InfoField label="직급" value={record.rank} />
|
||||
<InfoField label="부여일" value={record.grantDate} />
|
||||
<InfoField label="일수" value={`${record.grantDays}일`} />
|
||||
{record.reason && <InfoField label="사유" value={record.reason} />}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
const record = item as VacationRequestRecord;
|
||||
return (
|
||||
<ListMobileCard
|
||||
id={record.id}
|
||||
title={record.employeeName}
|
||||
headerBadges={
|
||||
<Badge className={REQUEST_STATUS_COLORS[record.status]}>
|
||||
{REQUEST_STATUS_LABELS[record.status]}
|
||||
</Badge>
|
||||
}
|
||||
isSelected={isSelected}
|
||||
onToggleSelection={onToggle}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<InfoField label="부서" value={record.department} />
|
||||
<InfoField label="직급" value={record.rank} />
|
||||
<InfoField label="기간" value={`${record.startDate} ~ ${record.endDate}`} />
|
||||
<InfoField label="일수" value={`${record.vacationDays}일`} />
|
||||
<InfoField label="신청일" value={record.requestDate} />
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
record.status === 'pending' && (
|
||||
<div className="flex gap-2">
|
||||
<Button variant="default" className="flex-1" onClick={handleApprove}>
|
||||
<Check className="w-4 h-4 mr-2" /> 승인
|
||||
</Button>
|
||||
<Button variant="outline" className="flex-1" onClick={handleReject}>
|
||||
<X className="w-4 h-4 mr-2" /> 거절
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}, [mainTab, handleApprove, handleReject]);
|
||||
|
||||
// ===== 헤더 액션 (달력 + 버튼들) =====
|
||||
const headerActions = (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{/* 날짜 범위 선택 - 브라우저 기본 달력 사용 */}
|
||||
<div className="flex items-center gap-1">
|
||||
<Input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
className="w-[140px]"
|
||||
/>
|
||||
<span className="text-muted-foreground">~</span>
|
||||
<Input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
className="w-[140px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 탭별 액션 버튼 */}
|
||||
{mainTab === 'grant' && (
|
||||
<Button onClick={() => setGrantDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
부여등록
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{mainTab === 'request' && (
|
||||
<>
|
||||
<Button onClick={() => setRequestDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
휴가신청
|
||||
</Button>
|
||||
{selectedItems.size > 0 && (
|
||||
<>
|
||||
<Button variant="default" onClick={handleApprove}>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
승인
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleReject}>
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
거절
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button variant="outline" onClick={() => console.log('엑셀 다운로드')}>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
// ===== 정렬 필터 =====
|
||||
const extraFilters = (
|
||||
<Select value={sortOption} onValueChange={(v) => setSortOption(v as SortOption)}>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(SORT_OPTIONS).map(([key, label]) => (
|
||||
<SelectItem key={key} value={key}>{label}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* IntegratedListTemplateV2 - 카드 아래에 탭 표시됨 */}
|
||||
<IntegratedListTemplateV2
|
||||
title="휴가관리"
|
||||
description="직원들의 휴가 현황을 관리합니다"
|
||||
icon={Calendar}
|
||||
headerActions={headerActions}
|
||||
stats={statCards}
|
||||
searchValue={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
searchPlaceholder="이름, 부서 검색..."
|
||||
extraFilters={extraFilters}
|
||||
tabs={tabs}
|
||||
activeTab={mainTab}
|
||||
onTabChange={handleMainTabChange}
|
||||
tableColumns={tableColumns}
|
||||
data={paginatedData}
|
||||
totalCount={currentData.length}
|
||||
allData={currentData}
|
||||
selectedItems={selectedItems}
|
||||
onToggleSelection={toggleSelection}
|
||||
onToggleSelectAll={toggleSelectAll}
|
||||
getItemId={(item: any) => item.id}
|
||||
renderTableRow={renderTableRow}
|
||||
renderMobileCard={renderMobileCard}
|
||||
pagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems: currentData.length,
|
||||
itemsPerPage,
|
||||
onPageChange: setCurrentPage,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 다이얼로그 */}
|
||||
<VacationGrantDialog
|
||||
open={grantDialogOpen}
|
||||
onOpenChange={setGrantDialogOpen}
|
||||
onSave={(data) => {
|
||||
console.log('부여 등록:', data);
|
||||
setGrantDialogOpen(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<VacationRequestDialog
|
||||
open={requestDialogOpen}
|
||||
onOpenChange={setRequestDialogOpen}
|
||||
onSave={(data) => {
|
||||
console.log('휴가 신청:', data);
|
||||
setRequestDialogOpen(false);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
175
src/components/hr/VacationManagement/types.ts
Normal file
175
src/components/hr/VacationManagement/types.ts
Normal file
@@ -0,0 +1,175 @@
|
||||
/**
|
||||
* 휴가관리 타입 정의
|
||||
* 3개 메인 탭: 휴가 사용현황, 휴가 부여현황, 휴가 신청현황
|
||||
*/
|
||||
|
||||
// ===== 메인 탭 타입 =====
|
||||
export type MainTabType = 'usage' | 'grant' | 'request';
|
||||
|
||||
// 휴가 유형
|
||||
export type VacationType = 'annual' | 'monthly' | 'reward' | 'other';
|
||||
|
||||
// 정렬 옵션
|
||||
export type SortOption = 'rank' | 'deptAsc' | 'deptDesc' | 'nameAsc' | 'nameDesc';
|
||||
|
||||
// 휴가 신청 상태
|
||||
export type RequestStatus = 'pending' | 'approved' | 'rejected';
|
||||
|
||||
// ===== 탭 1: 휴가 사용현황 =====
|
||||
// 휴가 유형별 상세 정보
|
||||
export interface VacationTypeDetail {
|
||||
total: number;
|
||||
used: number;
|
||||
remaining: number;
|
||||
}
|
||||
|
||||
// 테이블 컬럼: 부서 | 직책 | 이름 | 직급 | 입사일 | 기본 | 부여 | 사용 | 잔여
|
||||
export interface VacationUsageRecord {
|
||||
id: string;
|
||||
employeeId: string;
|
||||
employeeName: string;
|
||||
department: string;
|
||||
position: string; // 직책
|
||||
rank: string; // 직급
|
||||
hireDate: string; // 입사일
|
||||
baseVacation: string; // 기본 (예: "15일")
|
||||
grantedVacation: string; // 부여 (예: "3일")
|
||||
usedVacation: string; // 사용 (예: "12일3시간")
|
||||
remainingVacation: string; // 잔여 (예: "2일5시간")
|
||||
// 휴가 유형별 상세 (조정 다이얼로그용)
|
||||
annual: VacationTypeDetail;
|
||||
monthly: VacationTypeDetail;
|
||||
reward: VacationTypeDetail;
|
||||
other: VacationTypeDetail;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
// ===== 탭 2: 휴가 부여현황 =====
|
||||
// 테이블 컬럼: 부서 | 직책 | 이름 | 직급 | 유형 | 부여일 | 부여휴가일수 | 사유
|
||||
export interface VacationGrantRecord {
|
||||
id: string;
|
||||
employeeId: string;
|
||||
employeeName: string;
|
||||
department: string;
|
||||
position: string; // 직책
|
||||
rank: string; // 직급
|
||||
vacationType: VacationType; // 유형
|
||||
grantDate: string; // 부여일
|
||||
grantDays: number; // 부여휴가일수
|
||||
reason?: string; // 사유
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
// ===== 탭 3: 휴가 신청현황 =====
|
||||
// 테이블 컬럼: 부서 | 직책 | 이름 | 직급 | 휴가기간 | 휴가일수 | 상태 | 신청일
|
||||
export interface VacationRequestRecord {
|
||||
id: string;
|
||||
employeeId: string;
|
||||
employeeName: string;
|
||||
department: string;
|
||||
position: string; // 직책
|
||||
rank: string; // 직급
|
||||
startDate: string; // 휴가기간 시작
|
||||
endDate: string; // 휴가기간 종료
|
||||
vacationDays: number; // 휴가일수
|
||||
status: RequestStatus; // 상태
|
||||
requestDate: string; // 신청일
|
||||
vacationType?: VacationType;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
// ===== 폼 데이터 =====
|
||||
export interface VacationFormData {
|
||||
employeeId: string;
|
||||
vacationType: VacationType;
|
||||
days: number;
|
||||
memo?: string;
|
||||
}
|
||||
|
||||
export interface VacationGrantFormData {
|
||||
employeeId: string;
|
||||
vacationType: VacationType;
|
||||
grantDays: number;
|
||||
reason?: string;
|
||||
}
|
||||
|
||||
export interface VacationRequestFormData {
|
||||
employeeId: string;
|
||||
vacationType: VacationType;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
vacationDays: number;
|
||||
}
|
||||
|
||||
export interface VacationAdjustment {
|
||||
vacationType: VacationType;
|
||||
adjustment: number;
|
||||
}
|
||||
|
||||
export interface VacationTypeConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
type: VacationType;
|
||||
isActive: boolean;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface EmployeeOption {
|
||||
id: string;
|
||||
name: string;
|
||||
department: string;
|
||||
position: string;
|
||||
rank: string;
|
||||
}
|
||||
|
||||
// ===== 상수 정의 =====
|
||||
|
||||
export const MAIN_TAB_LABELS: Record<MainTabType, string> = {
|
||||
usage: '휴가 사용현황',
|
||||
grant: '휴가 부여현황',
|
||||
request: '휴가 신청현황',
|
||||
};
|
||||
|
||||
export const VACATION_TYPE_LABELS: Record<VacationType, string> = {
|
||||
annual: '연차',
|
||||
monthly: '월차',
|
||||
reward: '포상휴가',
|
||||
other: '기타',
|
||||
};
|
||||
|
||||
export const VACATION_TYPE_COLORS: Record<VacationType, string> = {
|
||||
annual: 'blue',
|
||||
monthly: 'green',
|
||||
reward: 'purple',
|
||||
other: 'orange',
|
||||
};
|
||||
|
||||
export const REQUEST_STATUS_LABELS: Record<RequestStatus, string> = {
|
||||
pending: '대기',
|
||||
approved: '승인',
|
||||
rejected: '반려',
|
||||
};
|
||||
|
||||
export const REQUEST_STATUS_COLORS: Record<RequestStatus, string> = {
|
||||
pending: 'bg-yellow-100 text-yellow-800',
|
||||
approved: 'bg-green-100 text-green-800',
|
||||
rejected: 'bg-red-100 text-red-800',
|
||||
};
|
||||
|
||||
export const SORT_OPTIONS: Record<SortOption, string> = {
|
||||
rank: '직급순',
|
||||
deptAsc: '부서명 오름차순',
|
||||
deptDesc: '부서명 내림차순',
|
||||
nameAsc: '이름 오름차순',
|
||||
nameDesc: '이름 내림차순',
|
||||
};
|
||||
|
||||
export const DEFAULT_VACATION_TYPES: VacationTypeConfig[] = [
|
||||
{ id: '1', name: '연차', type: 'annual', isActive: true, description: '연간 유급 휴가' },
|
||||
{ id: '2', name: '월차', type: 'monthly', isActive: true, description: '월간 유급 휴가' },
|
||||
{ id: '3', name: '포상휴가', type: 'reward', isActive: true, description: '성과에 따른 포상 휴가' },
|
||||
{ id: '4', name: '기타', type: 'other', isActive: true, description: '기타 휴가' },
|
||||
];
|
||||
Reference in New Issue
Block a user