91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
import React from 'react'
|
||
import { FaCalendarAlt, FaPlus } from 'react-icons/fa'
|
||
import { LeaveDto } from '@/proxy/intranet/models'
|
||
import useLocale from '@/utils/hooks/useLocale'
|
||
import { currentLocalDate } from '@/utils/dateUtils'
|
||
import { LeaveStatusEnum, LeaveTypeEnum } from '@/types/intranet'
|
||
|
||
interface LeaveManagementProps {
|
||
leaves: LeaveDto[]
|
||
onNewLeave: () => void
|
||
}
|
||
|
||
const LeaveManagement: React.FC<LeaveManagementProps> = ({ leaves, onNewLeave }) => {
|
||
const currentLocale = useLocale()
|
||
|
||
return (
|
||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
||
<div className="p-4 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">
|
||
{leaves.slice(0, 3).map((leave) => (
|
||
<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">
|
||
{currentLocalDate(leave.startDate, currentLocale || 'tr')} - {currentLocalDate(leave.endDate, currentLocale || 'tr')}{' '}
|
||
({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
|