2025-10-20 13:41:31 +00:00
|
|
|
|
import React from 'react'
|
|
|
|
|
|
import { FaCalendarAlt, FaPlus } from 'react-icons/fa'
|
|
|
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
|
import { LeaveStatusEnum, LeaveTypeEnum } from '../../../types/hr'
|
2025-10-20 18:48:22 +00:00
|
|
|
|
import { mockEmployeeLeaves } from '@/mocks/mockEmployeeLeaves'
|
2025-10-20 13:41:31 +00:00
|
|
|
|
|
|
|
|
|
|
interface LeaveManagementProps {
|
|
|
|
|
|
onNewLeave: () => void
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const LeaveManagement: React.FC<LeaveManagementProps> = ({ onNewLeave }) => {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
|
|
|
|
|
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
|
|
|
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
|
|
|
|
|
<FaCalendarAlt className="w-5 h-5" />
|
|
|
|
|
|
İzin Yönetimi
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="p-4 space-y-3">
|
|
|
|
|
|
{/* İzin bakiye özeti */}
|
|
|
|
|
|
<div className="grid grid-cols-2 gap-2 mb-4">
|
|
|
|
|
|
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
|
|
|
|
|
<p className="text-xs text-gray-600 dark:text-gray-400">Yıllık İzin</p>
|
|
|
|
|
|
<p className="text-lg font-bold text-blue-600 dark:text-blue-400">12 gün</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
|
|
|
|
|
|
<p className="text-xs text-gray-600 dark:text-gray-400">Hastalık İzni</p>
|
|
|
|
|
|
<p className="text-lg font-bold text-green-600 dark:text-green-400">8 gün</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* Son izin talepleri */}
|
|
|
|
|
|
<div className="space-y-2">
|
2025-10-20 18:48:22 +00:00
|
|
|
|
{mockEmployeeLeaves.slice(0, 3).map((leave) => (
|
2025-10-20 13:41:31 +00:00
|
|
|
|
<div
|
|
|
|
|
|
key={leave.id}
|
|
|
|
|
|
className="p-3 rounded-lg bg-gray-50 dark:bg-gray-900/20 border border-gray-200 dark:border-gray-700"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div className="flex items-start justify-between mb-1">
|
|
|
|
|
|
<h4 className="text-sm font-medium text-gray-900 dark:text-white">
|
|
|
|
|
|
{leave.leaveType === LeaveTypeEnum.Annual ? '🏖️ Yıllık' :
|
|
|
|
|
|
leave.leaveType === LeaveTypeEnum.Sick ? '🏥 Hastalık' :
|
|
|
|
|
|
leave.leaveType === LeaveTypeEnum.Unpaid ? '💼 Ücretsiz' : '📋 Diğer'} İzin
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
<span
|
|
|
|
|
|
className={`text-xs px-2 py-1 rounded-full ${
|
|
|
|
|
|
leave.status === LeaveStatusEnum.Approved
|
|
|
|
|
|
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
|
|
|
|
|
|
: leave.status === LeaveStatusEnum.Pending
|
|
|
|
|
|
? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300'
|
|
|
|
|
|
: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300'
|
|
|
|
|
|
}`}
|
|
|
|
|
|
>
|
|
|
|
|
|
{leave.status === LeaveStatusEnum.Approved ? 'Onaylandı' :
|
|
|
|
|
|
leave.status === LeaveStatusEnum.Pending ? 'Bekliyor' : 'Reddedildi'}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p className="text-xs text-gray-600 dark:text-gray-400">
|
|
|
|
|
|
{dayjs(leave.startDate).format('DD MMM')} - {dayjs(leave.endDate).format('DD MMM')} ({leave.totalDays} gün)
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
))}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
onClick={onNewLeave}
|
|
|
|
|
|
className="w-full mt-3 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition-colors flex items-center justify-center gap-2"
|
|
|
|
|
|
>
|
|
|
|
|
|
<FaPlus className="w-4 h-4" />
|
|
|
|
|
|
Yeni İzin Talebi
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default LeaveManagement
|
