427 lines
19 KiB
TypeScript
427 lines
19 KiB
TypeScript
|
import React, { useState } from 'react'
|
|||
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|||
|
|
import {
|
|||
|
|
HiCalendar,
|
|||
|
|
HiClock,
|
|||
|
|
HiCheckCircle,
|
|||
|
|
HiXCircle,
|
|||
|
|
HiPlus,
|
|||
|
|
HiFunnel,
|
|||
|
|
HiXMark
|
|||
|
|
} from 'react-icons/hi2'
|
|||
|
|
import dayjs from 'dayjs'
|
|||
|
|
import 'dayjs/locale/tr'
|
|||
|
|
import { mockLeaveRequests } from '../../../mocks/mockIntranetData'
|
|||
|
|
import { HrLeave } from '@/types/hr'
|
|||
|
|
|
|||
|
|
dayjs.locale('tr')
|
|||
|
|
|
|||
|
|
const LeaveManagement: React.FC = () => {
|
|||
|
|
const [requests, setRequests] = useState<HrLeave[]>(mockLeaveRequests)
|
|||
|
|
const [showCreateModal, setShowCreateModal] = useState(false)
|
|||
|
|
const [filterStatus, setFilterStatus] = useState<'all' | 'pending' | 'approved' | 'rejected'>('all')
|
|||
|
|
|
|||
|
|
// İzin bakiyeleri (mock)
|
|||
|
|
const leaveBalance = {
|
|||
|
|
annual: { total: 20, used: 8, remaining: 12 },
|
|||
|
|
sick: { total: 10, used: 2, remaining: 8 },
|
|||
|
|
unpaid: { used: 0 }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const filteredRequests = requests.filter(req => {
|
|||
|
|
if (filterStatus === 'all') return true
|
|||
|
|
return req.status === filterStatus
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const getStatusColor = (status: string) => {
|
|||
|
|
const colors = {
|
|||
|
|
pending: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300',
|
|||
|
|
approved: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
|||
|
|
rejected: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300'
|
|||
|
|
}
|
|||
|
|
return colors[status as keyof typeof colors]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getTypeLabel = (type: string) => {
|
|||
|
|
const labels = {
|
|||
|
|
annual: 'Yıllık İzin',
|
|||
|
|
sick: 'Hastalık İzni',
|
|||
|
|
unpaid: 'Ücretsiz İzin',
|
|||
|
|
maternity: 'Doğum İzni',
|
|||
|
|
other: 'Diğer'
|
|||
|
|
}
|
|||
|
|
return labels[type as keyof typeof labels]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getTypeIcon = (type: string) => {
|
|||
|
|
const icons = {
|
|||
|
|
annual: '🏖️',
|
|||
|
|
sick: '🏥',
|
|||
|
|
unpaid: '💼',
|
|||
|
|
maternity: '👶',
|
|||
|
|
other: '📋'
|
|||
|
|
}
|
|||
|
|
return icons[type as keyof typeof icons]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
|||
|
|
<div className="max-w-7xl mx-auto space-y-6">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
|||
|
|
İzin Yönetimi
|
|||
|
|
</h1>
|
|||
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
|||
|
|
İzin taleplerinizi oluşturun ve takip edin
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateModal(true)}
|
|||
|
|
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center gap-2 transition-colors"
|
|||
|
|
>
|
|||
|
|
<HiPlus className="w-5 h-5" />
|
|||
|
|
Yeni İzin Talebi
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* İzin Bakiyeleri */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|||
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border border-gray-200 dark:border-gray-700">
|
|||
|
|
<div className="flex items-center justify-between mb-4">
|
|||
|
|
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|||
|
|
Yıllık İzin
|
|||
|
|
</h3>
|
|||
|
|
<span className="text-2xl">🏖️</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex justify-between text-sm">
|
|||
|
|
<span className="text-gray-600 dark:text-gray-400">Toplam</span>
|
|||
|
|
<span className="font-semibold text-gray-900 dark:text-white">
|
|||
|
|
{leaveBalance.annual.total} gün
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between text-sm">
|
|||
|
|
<span className="text-gray-600 dark:text-gray-400">Kullanılan</span>
|
|||
|
|
<span className="font-semibold text-orange-600 dark:text-orange-400">
|
|||
|
|
{leaveBalance.annual.used} gün
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between text-sm">
|
|||
|
|
<span className="text-gray-600 dark:text-gray-400">Kalan</span>
|
|||
|
|
<span className="font-semibold text-green-600 dark:text-green-400">
|
|||
|
|
{leaveBalance.annual.remaining} gün
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-3">
|
|||
|
|
<div
|
|||
|
|
className="bg-blue-600 h-2 rounded-full transition-all"
|
|||
|
|
style={{
|
|||
|
|
width: `${(leaveBalance.annual.used / leaveBalance.annual.total) * 100}%`
|
|||
|
|
}}
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border border-gray-200 dark:border-gray-700">
|
|||
|
|
<div className="flex items-center justify-between mb-4">
|
|||
|
|
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|||
|
|
Hastalık İzni
|
|||
|
|
</h3>
|
|||
|
|
<span className="text-2xl">🏥</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex justify-between text-sm">
|
|||
|
|
<span className="text-gray-600 dark:text-gray-400">Toplam</span>
|
|||
|
|
<span className="font-semibold text-gray-900 dark:text-white">
|
|||
|
|
{leaveBalance.sick.total} gün
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between text-sm">
|
|||
|
|
<span className="text-gray-600 dark:text-gray-400">Kullanılan</span>
|
|||
|
|
<span className="font-semibold text-orange-600 dark:text-orange-400">
|
|||
|
|
{leaveBalance.sick.used} gün
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between text-sm">
|
|||
|
|
<span className="text-gray-600 dark:text-gray-400">Kalan</span>
|
|||
|
|
<span className="font-semibold text-green-600 dark:text-green-400">
|
|||
|
|
{leaveBalance.sick.remaining} gün
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-3">
|
|||
|
|
<div
|
|||
|
|
className="bg-red-600 h-2 rounded-full transition-all"
|
|||
|
|
style={{
|
|||
|
|
width: `${(leaveBalance.sick.used / leaveBalance.sick.total) * 100}%`
|
|||
|
|
}}
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border border-gray-200 dark:border-gray-700">
|
|||
|
|
<div className="flex items-center justify-between mb-4">
|
|||
|
|
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|||
|
|
Ücretsiz İzin
|
|||
|
|
</h3>
|
|||
|
|
<span className="text-2xl">💼</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex justify-between text-sm">
|
|||
|
|
<span className="text-gray-600 dark:text-gray-400">Toplam</span>
|
|||
|
|
<span className="font-semibold text-gray-900 dark:text-white">
|
|||
|
|
Sınırsız
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between text-sm">
|
|||
|
|
<span className="text-gray-600 dark:text-gray-400">Bu yıl kullanılan</span>
|
|||
|
|
<span className="font-semibold text-orange-600 dark:text-orange-400">
|
|||
|
|
{leaveBalance.unpaid.used} gün
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-8 text-center">
|
|||
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|||
|
|
Onay sürecinden geçer
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Filtreler */}
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<HiFunnel className="w-5 h-5 text-gray-400" />
|
|||
|
|
<button
|
|||
|
|
onClick={() => setFilterStatus('all')}
|
|||
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
|||
|
|
filterStatus === 'all'
|
|||
|
|
? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
|
|||
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
Tümü
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setFilterStatus('pending')}
|
|||
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
|||
|
|
filterStatus === 'pending'
|
|||
|
|
? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300'
|
|||
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
Bekleyen
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setFilterStatus('approved')}
|
|||
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
|||
|
|
filterStatus === 'approved'
|
|||
|
|
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
|
|||
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
Onaylanan
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setFilterStatus('rejected')}
|
|||
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
|||
|
|
filterStatus === 'rejected'
|
|||
|
|
? 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300'
|
|||
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
Reddedilen
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* İzin Talepleri Listesi */}
|
|||
|
|
<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">
|
|||
|
|
İzin Talepleri
|
|||
|
|
</h2>
|
|||
|
|
</div>
|
|||
|
|
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
|||
|
|
{filteredRequests.length > 0 ? (
|
|||
|
|
filteredRequests.map((request) => (
|
|||
|
|
<div
|
|||
|
|
key={request.id}
|
|||
|
|
className="p-6 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
|||
|
|
>
|
|||
|
|
<div className="flex items-start gap-4">
|
|||
|
|
<span className="text-3xl">{getTypeIcon(request.type)}</span>
|
|||
|
|
<div className="flex-1 min-w-0">
|
|||
|
|
<div className="flex items-center gap-3 mb-2">
|
|||
|
|
<h3 className="text-base font-semibold text-gray-900 dark:text-white">
|
|||
|
|
{getTypeLabel(request.type)}
|
|||
|
|
</h3>
|
|||
|
|
<span className={`px-2.5 py-1 text-xs rounded-full ${getStatusColor(request.status)}`}>
|
|||
|
|
{request.status === 'pending' && '⏳ Beklemede'}
|
|||
|
|
{request.status === 'approved' && '✅ Onaylandı'}
|
|||
|
|
{request.status === 'rejected' && '❌ Reddedildi'}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-3">
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">Başlangıç</p>
|
|||
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
|||
|
|
{dayjs(request.startDate).format('DD MMMM YYYY')}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">Bitiş</p>
|
|||
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
|||
|
|
{dayjs(request.endDate).format('DD MMMM YYYY')}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">Süre</p>
|
|||
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
|||
|
|
{request.days} gün
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">Talep Tarihi</p>
|
|||
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
|||
|
|
{dayjs(request.createdAt).format('DD MMM YYYY')}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
|||
|
|
<span className="font-medium">Açıklama:</span> {request.reason}
|
|||
|
|
</p>
|
|||
|
|
{request.approver && (
|
|||
|
|
<div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
|
|||
|
|
<HiCheckCircle className="w-4 h-4" />
|
|||
|
|
<span>
|
|||
|
|
{request.approver.fullName} tarafından{' '}
|
|||
|
|
{dayjs(request.approvalDate).format('DD MMMM YYYY')} tarihinde{' '}
|
|||
|
|
{request.status === 'approved' ? 'onaylandı' : 'reddedildi'}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{request.notes && (
|
|||
|
|
<div className="mt-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
|||
|
|
<p className="text-xs text-gray-700 dark:text-gray-300">
|
|||
|
|
<span className="font-medium">Not:</span> {request.notes}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))
|
|||
|
|
) : (
|
|||
|
|
<div className="p-12 text-center">
|
|||
|
|
<HiCalendar className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
|||
|
|
<p className="text-gray-500 dark:text-gray-400">
|
|||
|
|
{filterStatus === 'all'
|
|||
|
|
? 'Henüz izin talebi bulunmuyor'
|
|||
|
|
: `${filterStatus === 'pending' ? 'Bekleyen' : filterStatus === 'approved' ? 'Onaylanan' : 'Reddedilen'} izin talebi bulunmuyor`}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Yeni İzin Talebi Modal */}
|
|||
|
|
<AnimatePresence>
|
|||
|
|
{showCreateModal && (
|
|||
|
|
<>
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0 }}
|
|||
|
|
animate={{ opacity: 1 }}
|
|||
|
|
exit={{ opacity: 0 }}
|
|||
|
|
className="fixed inset-0 bg-black/50 z-40"
|
|||
|
|
onClick={() => setShowCreateModal(false)}
|
|||
|
|
/>
|
|||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
|||
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|||
|
|
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
|||
|
|
className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
|
|||
|
|
>
|
|||
|
|
<div className="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between sticky top-0 bg-white dark:bg-gray-800">
|
|||
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
|||
|
|
Yeni İzin Talebi
|
|||
|
|
</h2>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateModal(false)}
|
|||
|
|
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
|||
|
|
>
|
|||
|
|
<HiXMark className="w-5 h-5 text-gray-500" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6 space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|||
|
|
İzin Türü
|
|||
|
|
</label>
|
|||
|
|
<select className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
|
|||
|
|
<option>Yıllık İzin</option>
|
|||
|
|
<option>Hastalık İzni</option>
|
|||
|
|
<option>Ücretsiz İzin</option>
|
|||
|
|
<option>Doğum İzni</option>
|
|||
|
|
<option>Diğer</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|||
|
|
Başlangıç Tarihi
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|||
|
|
Bitiş Tarihi
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|||
|
|
Açıklama
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
rows={4}
|
|||
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white resize-none"
|
|||
|
|
placeholder="İzin sebebinizi açıklayın..."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-3 pt-4">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateModal(false)}
|
|||
|
|
className="flex-1 px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
|||
|
|
>
|
|||
|
|
İptal
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateModal(false)}
|
|||
|
|
className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
|
|||
|
|
>
|
|||
|
|
Talep Oluştur
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</AnimatePresence>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default LeaveManagement
|