intranet içn komponentler
This commit is contained in:
Sedat ÖZTÜRK
parent
84be7170ec
commit
ee7114a2dc
35 changed files with 1897 additions and 7198 deletions
|
|
@ -1,291 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import {
|
||||
HiBell,
|
||||
HiMagnifyingGlass,
|
||||
HiFunnel,
|
||||
HiEye,
|
||||
HiCalendar,
|
||||
HiUser
|
||||
} from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/tr'
|
||||
import { mockAnnouncements, Announcement } from '../../mocks/mockIntranetData'
|
||||
|
||||
dayjs.locale('tr')
|
||||
|
||||
const AnnouncementsModule: React.FC = () => {
|
||||
const [announcements] = useState<Announcement[]>(mockAnnouncements)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('all')
|
||||
const [selectedAnnouncement, setSelectedAnnouncement] = useState<Announcement | null>(null)
|
||||
|
||||
const categories = [
|
||||
{ id: 'all', label: 'Tümü', color: 'blue' },
|
||||
{ id: 'general', label: 'Genel', color: 'blue' },
|
||||
{ id: 'hr', label: 'İK', color: 'purple' },
|
||||
{ id: 'it', label: 'IT', color: 'orange' },
|
||||
{ id: 'event', label: 'Etkinlik', color: 'green' },
|
||||
{ id: 'urgent', label: 'Acil', color: 'red' }
|
||||
]
|
||||
|
||||
const filteredAnnouncements = announcements.filter(announcement => {
|
||||
const matchesSearch = announcement.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
announcement.content.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
const matchesCategory = selectedCategory === 'all' || announcement.category === selectedCategory
|
||||
return matchesSearch && matchesCategory
|
||||
})
|
||||
|
||||
const getCategoryColor = (category: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
general: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800',
|
||||
hr: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-800',
|
||||
it: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 border-orange-200 dark:border-orange-800',
|
||||
event: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800',
|
||||
urgent: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800'
|
||||
}
|
||||
return colors[category] || colors.general
|
||||
}
|
||||
|
||||
const getCategoryBadge = (category: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
general: 'Genel',
|
||||
hr: 'İK',
|
||||
it: 'IT',
|
||||
event: 'Etkinlik',
|
||||
urgent: 'Acil'
|
||||
}
|
||||
return labels[category]
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<div className="mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Duyurular & Haberler
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Şirket duyurularını ve haberleri takip edin
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Arama ve Filtreler */}
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1 relative">
|
||||
<HiMagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Duyuru ara..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<HiFunnel className="w-5 h-5 text-gray-400" />
|
||||
{categories.map(cat => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setSelectedCategory(cat.id)}
|
||||
className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
selectedCategory === cat.id
|
||||
? `bg-${cat.color}-100 dark:bg-${cat.color}-900/30 text-${cat.color}-700 dark:text-${cat.color}-300`
|
||||
: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
{cat.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Duyuru Listesi */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Sol Kolon - Liste */}
|
||||
<div className="lg:col-span-1 space-y-4">
|
||||
{filteredAnnouncements.map(announcement => (
|
||||
<motion.div
|
||||
key={announcement.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={`bg-white dark:bg-gray-800 rounded-lg border-2 shadow-sm cursor-pointer hover:shadow-md transition-all ${
|
||||
selectedAnnouncement?.id === announcement.id
|
||||
? getCategoryColor(announcement.category)
|
||||
: 'border-gray-200 dark:border-gray-700'
|
||||
}`}
|
||||
onClick={() => setSelectedAnnouncement(announcement)}
|
||||
>
|
||||
{announcement.imageUrl && (
|
||||
<div className="relative h-48 overflow-hidden rounded-t-lg">
|
||||
<img
|
||||
src={announcement.imageUrl}
|
||||
alt={announcement.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{announcement.isPinned && (
|
||||
<div className="absolute top-3 right-3 px-2.5 py-1 bg-yellow-500 text-white text-xs font-bold rounded-full shadow-lg">
|
||||
📌 SABİTLENDİ
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between gap-3 mb-3">
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white flex-1">
|
||||
{announcement.title}
|
||||
</h3>
|
||||
<span className={`px-2.5 py-1 text-xs font-medium rounded-full whitespace-nowrap ${getCategoryColor(announcement.category)}`}>
|
||||
{getCategoryBadge(announcement.category)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
|
||||
{announcement.excerpt}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<img
|
||||
src={announcement.author.avatar}
|
||||
alt={announcement.author.fullName}
|
||||
className="w-6 h-6 rounded-full"
|
||||
/>
|
||||
<span>{announcement.author.fullName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<HiCalendar className="w-4 h-4" />
|
||||
{dayjs(announcement.publishDate).format('DD MMMM YYYY')}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<HiEye className="w-4 h-4" />
|
||||
{announcement.viewCount}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{filteredAnnouncements.length === 0 && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-12 text-center border border-gray-200 dark:border-gray-700">
|
||||
<HiBell className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{searchQuery ? 'Arama kriterlerine uygun duyuru bulunamadı' : 'Henüz duyuru bulunmuyor'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sağ Kolon - Detay */}
|
||||
<div className="lg:col-span-1">
|
||||
{selectedAnnouncement ? (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm sticky top-6">
|
||||
{selectedAnnouncement.imageUrl && (
|
||||
<div className="relative h-64 overflow-hidden rounded-t-lg">
|
||||
<img
|
||||
src={selectedAnnouncement.imageUrl}
|
||||
alt={selectedAnnouncement.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-6">
|
||||
<div className="mb-4">
|
||||
<span className={`px-3 py-1.5 text-sm font-medium rounded-full ${getCategoryColor(selectedAnnouncement.category)}`}>
|
||||
{getCategoryBadge(selectedAnnouncement.category)}
|
||||
</span>
|
||||
{selectedAnnouncement.isPinned && (
|
||||
<span className="ml-2 px-3 py-1.5 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 text-sm font-medium rounded-full">
|
||||
📌 Sabitlendi
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{selectedAnnouncement.title}
|
||||
</h2>
|
||||
<div className="flex items-center gap-3 mb-4 pb-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<img
|
||||
src={selectedAnnouncement.author.avatar}
|
||||
alt={selectedAnnouncement.author.fullName}
|
||||
className="w-10 h-10 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{selectedAnnouncement.author.fullName}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{dayjs(selectedAnnouncement.publishDate).format('DD MMMM YYYY, HH:mm')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none mb-4">
|
||||
<p className="text-gray-700 dark:text-gray-300 whitespace-pre-line">
|
||||
{selectedAnnouncement.content}
|
||||
</p>
|
||||
</div>
|
||||
{selectedAnnouncement.attachments && selectedAnnouncement.attachments.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
||||
📎 Ekler
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{selectedAnnouncement.attachments.map((attachment, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={attachment.url}
|
||||
className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded flex items-center justify-center">
|
||||
<span className="text-xs">📄</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
{attachment.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{attachment.size}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{selectedAnnouncement.departments && selectedAnnouncement.departments.length > 0 && (
|
||||
<div className="pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-2">
|
||||
Hedef Departmanlar:
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedAnnouncement.departments.map((dept, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded"
|
||||
>
|
||||
{dept}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400">
|
||||
<HiEye className="w-4 h-4" />
|
||||
<span>{selectedAnnouncement.viewCount} kez görüntülendi</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-12 text-center sticky top-6">
|
||||
<HiBell className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Detayları görüntülemek için bir duyuru seçin
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AnnouncementsModule
|
||||
|
|
@ -1,279 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { HiCake, HiGift, HiCalendar } from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import isBetween from 'dayjs/plugin/isBetween'
|
||||
import { mockBirthdays, mockAnniversaries, Birthday, WorkAnniversary } from '../../mocks/mockIntranetData'
|
||||
|
||||
dayjs.extend(isBetween)
|
||||
|
||||
const BirthdaysModule: React.FC = () => {
|
||||
const [selectedMonth, setSelectedMonth] = useState(dayjs().month())
|
||||
|
||||
const months = [
|
||||
'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran',
|
||||
'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'
|
||||
]
|
||||
|
||||
// Bugünün doğum günleri
|
||||
const todayBirthdays = mockBirthdays.filter(b =>
|
||||
dayjs(b.date).month() === dayjs().month() &&
|
||||
dayjs(b.date).date() === dayjs().date()
|
||||
)
|
||||
|
||||
// Bu haftanın doğum günleri
|
||||
const thisWeekBirthdays = mockBirthdays.filter(b => {
|
||||
const birthDate = dayjs().year(dayjs().year()).month(dayjs(b.date).month()).date(dayjs(b.date).date())
|
||||
return birthDate.isBetween(dayjs().startOf('week'), dayjs().endOf('week'), null, '[]')
|
||||
})
|
||||
|
||||
// Seçilen aydaki doğum günleri
|
||||
const monthBirthdays = mockBirthdays.filter(b => dayjs(b.date).month() === selectedMonth)
|
||||
.sort((a, b) => dayjs(a.date).date() - dayjs(b.date).date())
|
||||
|
||||
// Bu ayki iş yıldönümleri
|
||||
const thisMonthAnniversaries = mockAnniversaries.filter((a: WorkAnniversary) => dayjs(a.hireDate).month() === dayjs().month())
|
||||
|
||||
const getBirthdayMessage = (birthday: Birthday) => {
|
||||
const age = birthday.age || dayjs().year() - dayjs(birthday.date).year()
|
||||
return `${age}. yaş günü kutlu olsun! 🎉`
|
||||
}
|
||||
|
||||
const getAnniversaryMessage = (anniversary: WorkAnniversary) => {
|
||||
return `${anniversary.years} yıllık iş birliğimiz için teşekkürler! 🎊`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<div className="mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
🎂 Doğum Günleri & Yıldönümleri
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Ekip üyelerimizin özel günlerini kutlayalım
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Bugün */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-gradient-to-br from-pink-500 to-purple-600 rounded-lg p-6 text-white"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<HiCake className="w-8 h-8" />
|
||||
<span className="text-3xl font-bold">{todayBirthdays.length}</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-1">Bugün Doğanlar</h3>
|
||||
<p className="text-pink-100 text-sm">
|
||||
{todayBirthdays.length > 0 ? 'Kutlama zamanı!' : 'Bugün doğum günü yok'}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Bu Hafta */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="bg-gradient-to-br from-blue-500 to-cyan-600 rounded-lg p-6 text-white"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<HiGift className="w-8 h-8" />
|
||||
<span className="text-3xl font-bold">{thisWeekBirthdays.length}</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-1">Bu Hafta</h3>
|
||||
<p className="text-blue-100 text-sm">
|
||||
{dayjs().startOf('week').format('DD MMM')} - {dayjs().endOf('week').format('DD MMM')}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* İş Yıldönümleri */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="bg-gradient-to-br from-orange-500 to-red-600 rounded-lg p-6 text-white"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<HiCalendar className="w-8 h-8" />
|
||||
<span className="text-3xl font-bold">{thisMonthAnniversaries.length}</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-1">Bu Ay Yıldönümü</h3>
|
||||
<p className="text-orange-100 text-sm">
|
||||
{dayjs().format('MMMM')} ayında
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Bugünün Doğum Günleri */}
|
||||
{todayBirthdays.length > 0 && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border-2 border-pink-300 dark:border-pink-700">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
🎉 Bugün Doğum Günü Olanlar
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{todayBirthdays.map((birthday, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="bg-gradient-to-r from-pink-50 to-purple-50 dark:from-pink-900/20 dark:to-purple-900/20 rounded-lg p-4 border border-pink-200 dark:border-pink-800"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<img
|
||||
src={birthday.employee.avatar}
|
||||
alt={birthday.employee.fullName}
|
||||
className="w-16 h-16 rounded-full border-4 border-white dark:border-gray-800 shadow-lg"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
||||
{birthday.employee.fullName}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{birthday.employee.department?.name || 'Genel'}
|
||||
</p>
|
||||
<p className="text-sm font-medium text-pink-600 dark:text-pink-400 mt-1">
|
||||
{getBirthdayMessage(birthday)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Ay Seçici */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
📅 Aylık Doğum Günleri
|
||||
</h2>
|
||||
<select
|
||||
value={selectedMonth}
|
||||
onChange={(e) => setSelectedMonth(Number(e.target.value))}
|
||||
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
>
|
||||
{months.map((month, idx) => (
|
||||
<option key={idx} value={idx}>
|
||||
{month}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Doğum Günleri Listesi */}
|
||||
<div className="space-y-3">
|
||||
{monthBirthdays.map((birthday, idx) => {
|
||||
const isToday = dayjs(birthday.date).month() === dayjs().month() &&
|
||||
dayjs(birthday.date).date() === dayjs().date()
|
||||
return (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: idx * 0.05 }}
|
||||
className={`flex items-center gap-4 p-4 rounded-lg border ${
|
||||
isToday
|
||||
? 'bg-pink-50 dark:bg-pink-900/20 border-pink-300 dark:border-pink-700'
|
||||
: 'bg-gray-50 dark:bg-gray-700/50 border-gray-200 dark:border-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-16 h-16 rounded-lg flex flex-col items-center justify-center ${
|
||||
isToday
|
||||
? 'bg-pink-500 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300'
|
||||
}`}>
|
||||
<span className="text-2xl font-bold">{dayjs(birthday.date).date()}</span>
|
||||
<span className="text-xs">{months[selectedMonth].substring(0, 3)}</span>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src={birthday.employee.avatar}
|
||||
alt={birthday.employee.fullName}
|
||||
className="w-12 h-12 rounded-full"
|
||||
/>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
||||
{birthday.employee.fullName}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{birthday.employee.department?.name || 'Genel'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{birthday.age || dayjs().year() - dayjs(birthday.date).year()} yaşında
|
||||
</p>
|
||||
{isToday && (
|
||||
<span className="text-xs text-pink-600 dark:text-pink-400 font-medium">
|
||||
🎂 Bugün!
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
{monthBirthdays.length === 0 && (
|
||||
<div className="text-center py-12 text-gray-500 dark:text-gray-400">
|
||||
<HiCake className="w-16 h-16 mx-auto mb-4 opacity-20" />
|
||||
<p>{months[selectedMonth]} ayında doğum günü yok</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* İş Yıldönümleri */}
|
||||
{thisMonthAnniversaries.length > 0 && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
🎊 Bu Ayki İş Yıldönümleri
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{thisMonthAnniversaries.map((anniversary: WorkAnniversary, idx: number) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
className="bg-gradient-to-r from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 rounded-lg p-4 border border-orange-200 dark:border-orange-800"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<img
|
||||
src={anniversary.employee.avatar}
|
||||
alt={anniversary.employee.fullName}
|
||||
className="w-16 h-16 rounded-full border-4 border-white dark:border-gray-800 shadow-lg"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
||||
{anniversary.employee.fullName}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{anniversary.employee.department?.name || 'Genel'}
|
||||
</p>
|
||||
<p className="text-sm font-medium text-orange-600 dark:text-orange-400 mt-1">
|
||||
{getAnniversaryMessage(anniversary)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center bg-orange-500 text-white rounded-full w-16 h-16 flex flex-col items-center justify-center">
|
||||
<span className="text-2xl font-bold">{anniversary.years}</span>
|
||||
<span className="text-xs">YIL</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BirthdaysModule
|
||||
|
|
@ -1,207 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { HiClock, HiMapPin } from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockMealMenus, mockShuttleRoutes } from '../../mocks/mockIntranetData'
|
||||
|
||||
const CafeteriaModule: React.FC = () => {
|
||||
const [selectedView, setSelectedView] = useState<'menu' | 'shuttle'>('menu')
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<div className="mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
🍽️ Kafeterya & Servis
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Yemek menüsü ve servis saatleri
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
onClick={() => setSelectedView('menu')}
|
||||
className={`px-6 py-3 font-medium transition-colors ${
|
||||
selectedView === 'menu'
|
||||
? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
||||
}`}
|
||||
>
|
||||
📅 Haftalık Menü
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedView('shuttle')}
|
||||
className={`px-6 py-3 font-medium transition-colors ${
|
||||
selectedView === 'shuttle'
|
||||
? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
||||
}`}
|
||||
>
|
||||
🚌 Servis Saatleri
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Menu View */}
|
||||
{selectedView === 'menu' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||
{mockMealMenus.map((menu, idx) => (
|
||||
<motion.div
|
||||
key={menu.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="text-center mb-4">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">{dayjs(menu.date).format('DD MMM')}</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white">{menu.dayOfWeek}</h3>
|
||||
</div>
|
||||
|
||||
{menu.meals.map((meal, mealIdx) => (
|
||||
<div key={mealIdx} className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="font-medium">
|
||||
{meal.type === 'lunch' ? '🍽️ Öğle Yemeği' : meal.type}
|
||||
</span>
|
||||
{meal.calories && <span>{meal.calories} kcal</span>}
|
||||
</div>
|
||||
<ul className="space-y-1">
|
||||
{meal.items.map((item, itemIdx) => (
|
||||
<li key={itemIdx} className="text-sm text-gray-700 dark:text-gray-300 flex items-start">
|
||||
<span className="text-green-500 mr-2">•</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Shuttle View */}
|
||||
{selectedView === 'shuttle' && (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">🌅 Sabah Servisleri</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{mockShuttleRoutes.filter(s => s.type === 'morning').map((shuttle, idx) => (
|
||||
<motion.div
|
||||
key={shuttle.id}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">{shuttle.name}</h3>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-medium ${
|
||||
shuttle.available > 5
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
|
||||
: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300'
|
||||
}`}>
|
||||
{shuttle.available} Koltuk
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<HiClock className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-gray-700 dark:text-gray-300">
|
||||
{shuttle.departureTime} - {shuttle.arrivalTime}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2 text-sm">
|
||||
<HiMapPin className="w-4 h-4 text-gray-400 mt-0.5" />
|
||||
<div className="text-gray-700 dark:text-gray-300">
|
||||
{shuttle.route.map((stop, idx) => (
|
||||
<span key={idx}>
|
||||
{stop}
|
||||
{idx < shuttle.route.length - 1 && ' → '}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full"
|
||||
style={{ width: `${((shuttle.capacity - shuttle.available) / shuttle.capacity) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 text-center">
|
||||
{shuttle.capacity - shuttle.available} / {shuttle.capacity} dolu
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">🌆 Akşam Servisleri</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{mockShuttleRoutes.filter(s => s.type === 'evening').map((shuttle, idx) => (
|
||||
<motion.div
|
||||
key={shuttle.id}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">{shuttle.name}</h3>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-medium ${
|
||||
shuttle.available > 5
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
|
||||
: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300'
|
||||
}`}>
|
||||
{shuttle.available} Koltuk
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<HiClock className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-gray-700 dark:text-gray-300">
|
||||
{shuttle.departureTime} - {shuttle.arrivalTime}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2 text-sm">
|
||||
<HiMapPin className="w-4 h-4 text-gray-400 mt-0.5" />
|
||||
<div className="text-gray-700 dark:text-gray-300">
|
||||
{shuttle.route.map((stop, idx) => (
|
||||
<span key={idx}>
|
||||
{stop}
|
||||
{idx < shuttle.route.length - 1 && ' → '}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full"
|
||||
style={{ width: `${((shuttle.capacity - shuttle.available) / shuttle.capacity) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 text-center">
|
||||
{shuttle.capacity - shuttle.available} / {shuttle.capacity} dolu
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CafeteriaModule
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,458 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
HiMagnifyingGlass,
|
||||
HiFunnel,
|
||||
HiArrowDownTray,
|
||||
HiEye,
|
||||
HiFolder,
|
||||
HiDocument,
|
||||
HiXMark
|
||||
} from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/tr'
|
||||
import { mockDocuments, Document } from '../../mocks/mockIntranetData'
|
||||
|
||||
dayjs.locale('tr')
|
||||
|
||||
const DocumentsModule: React.FC = () => {
|
||||
const [documents] = useState<Document[]>(mockDocuments)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('all')
|
||||
const [previewDocument, setPreviewDocument] = useState<Document | null>(null)
|
||||
|
||||
const categories = [
|
||||
{ id: 'all', label: 'Tümü' },
|
||||
{ id: 'policy', label: 'Politika' },
|
||||
{ id: 'procedure', label: 'Prosedür' },
|
||||
{ id: 'form', label: 'Form' },
|
||||
{ id: 'template', label: 'Şablon' },
|
||||
{ id: 'report', label: 'Rapor' },
|
||||
{ id: 'other', label: 'Diğer' }
|
||||
]
|
||||
|
||||
const handleDownload = (doc: Document) => {
|
||||
// Gerçek indirme işlemi
|
||||
const link = document.createElement('a')
|
||||
link.href = doc.url
|
||||
link.download = doc.name
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
const filteredDocuments = documents.filter(doc => {
|
||||
const matchesSearch = doc.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
doc.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
doc.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
const matchesCategory = selectedCategory === 'all' || doc.category === selectedCategory
|
||||
return matchesSearch && matchesCategory
|
||||
})
|
||||
|
||||
const getFileIcon = (type: string) => {
|
||||
const icons = {
|
||||
pdf: '📄',
|
||||
doc: '📝',
|
||||
xls: '📊',
|
||||
ppt: '📊',
|
||||
other: '📎'
|
||||
}
|
||||
return icons[type as keyof typeof icons] || icons.other
|
||||
}
|
||||
|
||||
const getCategoryLabel = (category: string) => {
|
||||
const labels = {
|
||||
policy: 'Politika',
|
||||
procedure: 'Prosedür',
|
||||
form: 'Form',
|
||||
template: 'Şablon',
|
||||
report: 'Rapor',
|
||||
other: 'Diğer'
|
||||
}
|
||||
return labels[category as keyof typeof labels]
|
||||
}
|
||||
|
||||
const groupedDocuments = filteredDocuments.reduce((acc, doc) => {
|
||||
if (!acc[doc.category]) {
|
||||
acc[doc.category] = []
|
||||
}
|
||||
acc[doc.category].push(doc)
|
||||
return acc
|
||||
}, {} as Record<string, Document[]>)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<div className="mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Doküman Yönetimi
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Şirket dokümanlarına erişin ve yönetin
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Arama ve Filtreler */}
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1 relative">
|
||||
<HiMagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Doküman ara..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<HiFunnel className="w-5 h-5 text-gray-400" />
|
||||
{categories.map(cat => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setSelectedCategory(cat.id)}
|
||||
className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
selectedCategory === cat.id
|
||||
? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
|
||||
: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
{cat.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* İstatistikler */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Toplam Doküman
|
||||
</h3>
|
||||
<span className="text-2xl">📁</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{documents.length}
|
||||
</p>
|
||||
</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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Kategoriler
|
||||
</h3>
|
||||
<span className="text-2xl">🗂️</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{Object.keys(groupedDocuments).length}
|
||||
</p>
|
||||
</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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Toplam İndirme
|
||||
</h3>
|
||||
<span className="text-2xl">⬇️</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{documents.reduce((sum, doc) => sum + doc.downloadCount, 0)}
|
||||
</p>
|
||||
</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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Bu Ay Yeni
|
||||
</h3>
|
||||
<span className="text-2xl">✨</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{documents.filter(d => dayjs(d.uploadDate).isAfter(dayjs().subtract(30, 'day'))).length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Doküman Listesi */}
|
||||
{Object.entries(groupedDocuments).map(([category, categoryDocs]) => (
|
||||
<div key={category} className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center gap-3">
|
||||
<HiFolder className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{getCategoryLabel(category)}
|
||||
</h2>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
({categoryDocs.length} doküman)
|
||||
</span>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{categoryDocs.map(doc => (
|
||||
<motion.div
|
||||
key={doc.id}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="p-6 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center text-2xl">
|
||||
{getFileIcon(doc.type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-3 mb-2">
|
||||
<h3 className="text-base font-semibold text-gray-900 dark:text-white">
|
||||
{doc.name}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setPreviewDocument(doc)}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
title="Önizle"
|
||||
>
|
||||
<HiEye className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDownload(doc)}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
title="İndir"
|
||||
>
|
||||
<HiArrowDownTray className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
{doc.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<img
|
||||
src={doc.uploadedBy.avatar}
|
||||
alt={doc.uploadedBy.fullName}
|
||||
className="w-5 h-5 rounded-full"
|
||||
/>
|
||||
<span>{doc.uploadedBy.fullName}</span>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<span>{dayjs(doc.uploadDate).format('DD MMMM YYYY')}</span>
|
||||
<span>•</span>
|
||||
<span>{doc.size}</span>
|
||||
<span>•</span>
|
||||
<span>v{doc.version}</span>
|
||||
<span>•</span>
|
||||
<span>{doc.downloadCount} indirme</span>
|
||||
</div>
|
||||
{doc.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
{doc.tags.map((tag, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded"
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredDocuments.length === 0 && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-12 text-center border border-gray-200 dark:border-gray-700">
|
||||
<HiDocument className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{searchQuery ? 'Arama kriterlerine uygun doküman bulunamadı' : 'Henüz doküman bulunmuyor'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Doküman Önizleme Modal */}
|
||||
<AnimatePresence>
|
||||
{previewDocument && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={() => setPreviewDocument(null)}
|
||||
/>
|
||||
<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-4xl w-full max-h-[90vh] overflow-hidden flex flex-col"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center text-2xl">
|
||||
{getFileIcon(previewDocument.type)}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
{previewDocument.name}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{getCategoryLabel(previewDocument.category)} • {previewDocument.size} • v{previewDocument.version}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleDownload(previewDocument)}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<HiArrowDownTray className="w-5 h-5" />
|
||||
İndir
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPreviewDocument(null)}
|
||||
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>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<div className="space-y-6">
|
||||
{/* Açıklama */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Açıklama
|
||||
</h3>
|
||||
<p className="text-gray-700 dark:text-gray-300">
|
||||
{previewDocument.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Dosya Önizleme Alanı */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Önizleme
|
||||
</h3>
|
||||
<div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-12 text-center bg-gray-50 dark:bg-gray-900/50">
|
||||
<div className="text-6xl mb-4">{getFileIcon(previewDocument.type)}</div>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
{previewDocument.type.toUpperCase()} dosyası önizlemesi desteklenmemektedir
|
||||
</p>
|
||||
<button
|
||||
onClick={() => handleDownload(previewDocument)}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg inline-flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<HiArrowDownTray className="w-5 h-5" />
|
||||
Dosyayı İndir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
|
||||
Dosya Bilgileri
|
||||
</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">Dosya Tipi:</span>
|
||||
<span className="text-gray-900 dark:text-white font-medium">
|
||||
{previewDocument.type.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">Boyut:</span>
|
||||
<span className="text-gray-900 dark:text-white font-medium">
|
||||
{previewDocument.size}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">Versiyon:</span>
|
||||
<span className="text-gray-900 dark:text-white font-medium">
|
||||
v{previewDocument.version}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">İndirme:</span>
|
||||
<span className="text-gray-900 dark:text-white font-medium">
|
||||
{previewDocument.downloadCount} kez
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
|
||||
Yükleyen
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<img
|
||||
src={previewDocument.uploadedBy.avatar}
|
||||
alt={previewDocument.uploadedBy.fullName}
|
||||
className="w-10 h-10 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{previewDocument.uploadedBy.fullName}
|
||||
</p>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||
{dayjs(previewDocument.uploadDate).format('DD MMMM YYYY, HH:mm')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Etiketler */}
|
||||
{previewDocument.tags.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Etiketler
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{previewDocument.tags.map((tag, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm rounded"
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Departmanlar */}
|
||||
{previewDocument.departments.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Yetkili Departmanlar
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{previewDocument.departments.map((dept, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm rounded"
|
||||
>
|
||||
{dept}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DocumentsModule
|
||||
|
|
@ -1,464 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
HiHeart,
|
||||
HiChatBubbleLeft,
|
||||
HiMapPin,
|
||||
HiUsers,
|
||||
HiCalendar,
|
||||
HiXMark,
|
||||
HiChevronLeft,
|
||||
HiChevronRight,
|
||||
} from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/tr'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
import { mockEvents, CalendarEvent, EventComment } from '../../mocks/mockIntranetData'
|
||||
import { mockEmployees } from '@/mocks/mockEmployees'
|
||||
|
||||
dayjs.locale('tr')
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
const EventsModule: React.FC = () => {
|
||||
const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null)
|
||||
const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(0)
|
||||
const [showPhotoModal, setShowPhotoModal] = useState(false)
|
||||
const [selectedFilter, setSelectedFilter] = useState<
|
||||
'all' | 'social' | 'training' | 'company' | 'sport' | 'culture'
|
||||
>('all')
|
||||
const [newComment, setNewComment] = useState('')
|
||||
const [events, setEvents] = useState<CalendarEvent[]>(mockEvents)
|
||||
|
||||
const filteredEvents =
|
||||
selectedFilter === 'all'
|
||||
? events.filter((e) => e.isPublished)
|
||||
: events.filter((e) => e.isPublished && e.type === selectedFilter)
|
||||
|
||||
const handleLikeEvent = (eventId: string) => {
|
||||
setEvents((prev) => prev.map((e) => (e.id === eventId ? { ...e, likes: e.likes + 1 } : e)))
|
||||
if (selectedEvent?.id === eventId) {
|
||||
setSelectedEvent((prev) => (prev ? { ...prev, likes: prev.likes + 1 } : null))
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddComment = (eventId: string) => {
|
||||
if (!newComment.trim()) return
|
||||
|
||||
const comment: EventComment = {
|
||||
id: `c${Date.now()}`,
|
||||
author: mockEmployees[0],
|
||||
content: newComment,
|
||||
createdAt: new Date(),
|
||||
likes: 0,
|
||||
}
|
||||
|
||||
setEvents((prev) =>
|
||||
prev.map((e) => (e.id === eventId ? { ...e, comments: [...e.comments, comment] } : e)),
|
||||
)
|
||||
|
||||
if (selectedEvent?.id === eventId) {
|
||||
setSelectedEvent((prev) => (prev ? { ...prev, comments: [...prev.comments, comment] } : null))
|
||||
}
|
||||
|
||||
setNewComment('')
|
||||
}
|
||||
|
||||
const getTypeColor = (type: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
social: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
|
||||
training: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
|
||||
company: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
||||
sport: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
|
||||
culture: 'bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-300',
|
||||
}
|
||||
return colors[type] || colors.social
|
||||
}
|
||||
|
||||
const getTypeLabel = (type: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
social: '🎉 Sosyal',
|
||||
training: '📚 Eğitim',
|
||||
company: '🏢 Kurumsal',
|
||||
sport: '⚽ Spor',
|
||||
culture: '🎨 Kültür',
|
||||
}
|
||||
return labels[type] || type
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<div className="mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">🎊 Etkinlikler</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Şirket etkinlikleri, fotoğraflar ve anılar
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Filter Tabs */}
|
||||
<div className="flex gap-3 overflow-x-auto pb-2">
|
||||
{[
|
||||
{ value: 'all' as const, label: '🌟 Tümü' },
|
||||
{ value: 'social' as const, label: '🎉 Sosyal' },
|
||||
{ value: 'training' as const, label: '📚 Eğitim' },
|
||||
{ value: 'company' as const, label: '🏢 Kurumsal' },
|
||||
{ value: 'sport' as const, label: '⚽ Spor' },
|
||||
{ value: 'culture' as const, label: '🎨 Kültür' },
|
||||
].map((tab) => (
|
||||
<button
|
||||
key={tab.value}
|
||||
onClick={() => setSelectedFilter(tab.value)}
|
||||
className={`px-4 py-2 rounded-lg border-2 transition-all whitespace-nowrap ${
|
||||
selectedFilter === tab.value
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Events Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredEvents.map((event, idx) => (
|
||||
<motion.div
|
||||
key={event.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-all cursor-pointer"
|
||||
onClick={() => setSelectedEvent(event)}
|
||||
>
|
||||
{/* Cover Photo */}
|
||||
<div className="relative h-48 overflow-hidden">
|
||||
<img
|
||||
src={event.photos[0]}
|
||||
alt={event.title}
|
||||
className="w-full h-full object-cover hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute top-3 right-3">
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium ${getTypeColor(event.type)}`}
|
||||
>
|
||||
{getTypeLabel(event.type)}
|
||||
</span>
|
||||
</div>
|
||||
{event.photos.length > 1 && (
|
||||
<div className="absolute bottom-3 right-3 bg-black/70 text-white px-2 py-1 rounded text-xs">
|
||||
+{event.photos.length - 1} fotoğraf
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4 space-y-3">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white line-clamp-2">
|
||||
{event.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
|
||||
{event.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
<div className="flex items-center gap-1">
|
||||
<HiCalendar className="w-4 h-4" />
|
||||
{dayjs(event.date).format('DD MMMM YYYY')}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<HiMapPin className="w-4 h-4" />
|
||||
{event.location}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleLikeEvent(event.id)
|
||||
}}
|
||||
className="flex items-center gap-1 text-gray-600 dark:text-gray-400 hover:text-red-500 transition-colors"
|
||||
>
|
||||
<HiHeart className="w-5 h-5" />
|
||||
{event.likes}
|
||||
</button>
|
||||
<div className="flex items-center gap-1 text-gray-600 dark:text-gray-400">
|
||||
<HiChatBubbleLeft className="w-5 h-5" />
|
||||
{event.comments.length}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
<HiUsers className="w-4 h-4" />
|
||||
{event.participants} kişi
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredEvents.length === 0 && (
|
||||
<div className="text-center py-12 text-gray-500 dark:text-gray-400">
|
||||
<p className="text-lg">Bu kategoride henüz etkinlik yok</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Event Detail Modal */}
|
||||
<AnimatePresence>
|
||||
{selectedEvent && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={() => setSelectedEvent(null)}
|
||||
/>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 overflow-y-auto">
|
||||
<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-4xl w-full max-h-[90vh] overflow-y-auto my-8"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-6 z-10">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium ${getTypeColor(selectedEvent.type)}`}
|
||||
>
|
||||
{getTypeLabel(selectedEvent.type)}
|
||||
</span>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{dayjs(selectedEvent.date).format('DD MMMM YYYY')}
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{selectedEvent.title}
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">
|
||||
{selectedEvent.description}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedEvent(null)}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<HiXMark className="w-6 h-6 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 mt-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<HiMapPin className="w-5 h-5" />
|
||||
{selectedEvent.location}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<HiUsers className="w-5 h-5" />
|
||||
{selectedEvent.participants} katılımcı
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<img
|
||||
src={selectedEvent.organizer.avatar}
|
||||
alt={selectedEvent.organizer.fullName}
|
||||
className="w-6 h-6 rounded-full"
|
||||
/>
|
||||
<span>Düzenleyen: {selectedEvent.organizer.fullName}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Photo Gallery */}
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
📸 Fotoğraflar ({selectedEvent.photos.length})
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{selectedEvent.photos.map((photo, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="relative aspect-square rounded-lg overflow-hidden cursor-pointer"
|
||||
onClick={() => {
|
||||
setSelectedPhotoIndex(idx)
|
||||
setShowPhotoModal(true)
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={photo}
|
||||
alt={`${selectedEvent.title} - ${idx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comments Section */}
|
||||
<div className="p-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
💬 Yorumlar ({selectedEvent.comments.length})
|
||||
</h3>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<button
|
||||
onClick={() => handleLikeEvent(selectedEvent.id)}
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors"
|
||||
>
|
||||
<HiHeart className="w-5 h-5 text-red-500" />
|
||||
{selectedEvent.likes} beğeni
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comments List */}
|
||||
<div className="space-y-4 mb-4">
|
||||
{selectedEvent.comments.map((comment) => (
|
||||
<div
|
||||
key={comment.id}
|
||||
className="flex gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg"
|
||||
>
|
||||
<img
|
||||
src={comment.author.avatar}
|
||||
alt={comment.author.fullName}
|
||||
className="w-10 h-10 rounded-full"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-semibold text-gray-900 dark:text-white">
|
||||
{comment.author.fullName}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{dayjs(comment.createdAt).fromNow()}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-700 dark:text-gray-300 text-sm">
|
||||
{comment.content}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<button className="text-xs text-gray-500 hover:text-red-500 transition-colors">
|
||||
❤️ {comment.likes} beğeni
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add Comment */}
|
||||
<div className="flex gap-3">
|
||||
<img
|
||||
src="https://ui-avatars.com/api/?name=Sedat+Ozturk&background=3b82f6&color=fff"
|
||||
alt="You"
|
||||
className="w-10 h-10 rounded-full"
|
||||
/>
|
||||
<div className="flex-1 flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleAddComment(selectedEvent.id)
|
||||
}
|
||||
}}
|
||||
placeholder="Yorumunuzu yazın..."
|
||||
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleAddComment(selectedEvent.id)}
|
||||
disabled={!newComment.trim()}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Gönder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Photo Viewer Modal */}
|
||||
<AnimatePresence>
|
||||
{showPhotoModal && selectedEvent && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/90 z-50"
|
||||
onClick={() => setShowPhotoModal(false)}
|
||||
/>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.9 }}
|
||||
className="relative max-w-5xl w-full"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={() => setShowPhotoModal(false)}
|
||||
className="absolute top-4 right-4 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white z-10"
|
||||
>
|
||||
<HiXMark className="w-6 h-6" />
|
||||
</button>
|
||||
|
||||
{/* Navigation */}
|
||||
{selectedEvent.photos.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() =>
|
||||
setSelectedPhotoIndex((prev) =>
|
||||
prev === 0 ? selectedEvent.photos.length - 1 : prev - 1,
|
||||
)
|
||||
}
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white"
|
||||
>
|
||||
<HiChevronLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
setSelectedPhotoIndex((prev) =>
|
||||
prev === selectedEvent.photos.length - 1 ? 0 : prev + 1,
|
||||
)
|
||||
}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white"
|
||||
>
|
||||
<HiChevronRight className="w-6 h-6" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Image */}
|
||||
<img
|
||||
src={selectedEvent.photos[selectedPhotoIndex]}
|
||||
alt={`${selectedEvent.title} - ${selectedPhotoIndex + 1}`}
|
||||
className="w-full h-auto max-h-[80vh] object-contain rounded-lg"
|
||||
/>
|
||||
|
||||
{/* Counter */}
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 bg-black/70 text-white rounded-full text-sm">
|
||||
{selectedPhotoIndex + 1} / {selectedEvent.photos.length}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EventsModule
|
||||
|
|
@ -1,480 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
HiCurrencyDollar,
|
||||
HiCheckCircle,
|
||||
HiPlus,
|
||||
HiFunnel,
|
||||
HiXMark,
|
||||
HiPaperClip,
|
||||
HiArrowUpTray
|
||||
} from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/tr'
|
||||
import { mockExpenseRequests, ExpenseRequest } from '../../../mocks/mockIntranetData'
|
||||
|
||||
dayjs.locale('tr')
|
||||
|
||||
const ExpenseManagement: React.FC = () => {
|
||||
const [requests, setRequests] = useState<ExpenseRequest[]>(mockExpenseRequests)
|
||||
const [showCreateModal, setShowCreateModal] = useState(false)
|
||||
const [filterStatus, setFilterStatus] = useState<'all' | 'pending' | 'approved' | 'rejected'>('all')
|
||||
|
||||
// Harcama istatistikleri (mock)
|
||||
const expenseStats = {
|
||||
thisMonth: { total: 2370, approved: 2050, pending: 320, rejected: 0 },
|
||||
thisYear: { total: 28450, approved: 26100, pending: 1800, rejected: 550 },
|
||||
byCategory: {
|
||||
travel: 12300,
|
||||
meal: 6800,
|
||||
accommodation: 5400,
|
||||
transport: 2950,
|
||||
other: 1000
|
||||
}
|
||||
}
|
||||
|
||||
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 getCategoryLabel = (category: string) => {
|
||||
const labels = {
|
||||
travel: 'Seyahat',
|
||||
meal: 'Yemek',
|
||||
accommodation: 'Konaklama',
|
||||
transport: 'Ulaşım',
|
||||
other: 'Diğer'
|
||||
}
|
||||
return labels[category as keyof typeof labels]
|
||||
}
|
||||
|
||||
const getCategoryIcon = (category: string) => {
|
||||
const icons = {
|
||||
travel: '✈️',
|
||||
meal: '🍽️',
|
||||
accommodation: '🏨',
|
||||
transport: '🚗',
|
||||
other: '📋'
|
||||
}
|
||||
return icons[category as keyof typeof icons]
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<div className="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">
|
||||
Harcama Yönetimi
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Harcama 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 Harcama Talebi
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* İstatistikler */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Bu Ay Toplam
|
||||
</h3>
|
||||
<span className="text-2xl">💰</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
₺{expenseStats.thisMonth.total.toLocaleString()}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
toplam harcama
|
||||
</p>
|
||||
</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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Onaylanan
|
||||
</h3>
|
||||
<span className="text-2xl">✅</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-green-600 dark:text-green-400">
|
||||
₺{expenseStats.thisMonth.approved.toLocaleString()}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
bu ay onaylandı
|
||||
</p>
|
||||
</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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Bekleyen
|
||||
</h3>
|
||||
<span className="text-2xl">⏳</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-yellow-600 dark:text-yellow-400">
|
||||
₺{expenseStats.thisMonth.pending.toLocaleString()}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
onay bekliyor
|
||||
</p>
|
||||
</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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Yıllık Toplam
|
||||
</h3>
|
||||
<span className="text-2xl">📊</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-blue-600 dark:text-blue-400">
|
||||
₺{expenseStats.thisYear.total.toLocaleString()}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
bu yıl toplam
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kategori Dağılımı */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Kategori Bazlı Dağılım (Yıllık)
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{Object.entries(expenseStats.byCategory).map(([category, amount]) => {
|
||||
const percentage = (amount / expenseStats.thisYear.total) * 100
|
||||
return (
|
||||
<div key={category}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2">
|
||||
{getCategoryIcon(category)} {getCategoryLabel(category)}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-gray-900 dark:text-white">
|
||||
₺{amount.toLocaleString()} ({percentage.toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${percentage}%` }}
|
||||
></div>
|
||||
</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>
|
||||
|
||||
{/* Harcama 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">
|
||||
Harcama 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">{getCategoryIcon(request.category)}</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">
|
||||
{getCategoryLabel(request.category)}
|
||||
</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">Tutar</p>
|
||||
<p className="text-lg font-bold text-green-600 dark:text-green-400">
|
||||
{request.amount.toLocaleString()} {request.currency}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Tarih</p>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{dayjs(request.date).format('DD MMMM YYYY')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Makbuzlar</p>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{request.receipts.length} dosya
|
||||
</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')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{request.project && (
|
||||
<div className="mb-2">
|
||||
<span className="inline-flex items-center px-2.5 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded text-xs font-medium">
|
||||
📁 {request.project}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
<span className="font-medium">Açıklama:</span> {request.description}
|
||||
</p>
|
||||
{request.receipts.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
{request.receipts.map((receipt, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={receipt.url}
|
||||
className="inline-flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<HiPaperClip className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
||||
<span className="text-xs text-gray-700 dark:text-gray-300">
|
||||
{receipt.name}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
({receipt.size})
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{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">
|
||||
<HiCurrencyDollar 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 harcama talebi bulunmuyor'
|
||||
: `${filterStatus === 'pending' ? 'Bekleyen' : filterStatus === 'approved' ? 'Onaylanan' : 'Reddedilen'} harcama talebi bulunmuyor`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Yeni Harcama 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 Harcama 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">
|
||||
Harcama Kategorisi
|
||||
</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>Seyahat</option>
|
||||
<option>Yemek</option>
|
||||
<option>Konaklama</option>
|
||||
<option>Ulaşım</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">
|
||||
Tutar
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
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">
|
||||
Para Birimi
|
||||
</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>TRY</option>
|
||||
<option>USD</option>
|
||||
<option>EUR</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Harcama 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">
|
||||
Proje (Opsiyonel)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Proje adı"
|
||||
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">
|
||||
Açıklama
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
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="Harcama detaylarını açıklayın..."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Makbuz / Fatura
|
||||
</label>
|
||||
<div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center hover:border-blue-500 dark:hover:border-blue-500 transition-colors cursor-pointer">
|
||||
<HiArrowUpTray className="w-8 h-8 text-gray-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Dosyaları sürükle-bırak veya <span className="text-blue-600 dark:text-blue-400">tıkla</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
PDF, JPG, PNG (max 5MB)
|
||||
</p>
|
||||
</div>
|
||||
</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 ExpenseManagement
|
||||
|
|
@ -1,426 +0,0 @@
|
|||
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, LeaveStatusEnum } 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="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.leaveType)}</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.leaveType)}
|
||||
</h3>
|
||||
<span className={`px-2.5 py-1 text-xs rounded-full ${getStatusColor(request.status)}`}>
|
||||
{request.status === LeaveStatusEnum.Pending && '⏳ Beklemede'}
|
||||
{request.status === LeaveStatusEnum.Approved && '✅ Onaylandı'}
|
||||
{request.status === LeaveStatusEnum.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.creationTime).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
|
||||
|
|
@ -1,356 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { HiClock, HiCheckCircle, HiPlus, HiXMark, HiFunnel } from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/tr'
|
||||
import { mockOvertimeRequests } from '../../../mocks/mockIntranetData'
|
||||
import { HrOvertime, LeaveStatusEnum } from '@/types/hr'
|
||||
|
||||
dayjs.locale('tr')
|
||||
|
||||
const OvertimeManagement: React.FC = () => {
|
||||
const [requests, setRequests] = useState<HrOvertime[]>(mockOvertimeRequests)
|
||||
const [showCreateModal, setShowCreateModal] = useState(false)
|
||||
const [filterStatus, setFilterStatus] = useState<'all' | LeaveStatusEnum>('all')
|
||||
|
||||
// Mesai istatistikleri (mock)
|
||||
const overtimeStats = {
|
||||
thisMonth: { total: 24, approved: 20, pending: 4, rejected: 0 },
|
||||
thisYear: { total: 156, approved: 142, pending: 8, rejected: 6 },
|
||||
averagePerMonth: 13,
|
||||
}
|
||||
|
||||
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]
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<div className="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">Mesai Yönetimi</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Fazla mesai 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 Mesai Talebi
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* İstatistikler */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Bu Ay Toplam</h3>
|
||||
<span className="text-2xl">⏰</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{overtimeStats.thisMonth.total}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">saat fazla mesai</p>
|
||||
</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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Onaylanan</h3>
|
||||
<span className="text-2xl">✅</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-green-600 dark:text-green-400">
|
||||
{overtimeStats.thisMonth.approved}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">bu ay onaylandı</p>
|
||||
</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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Bekleyen</h3>
|
||||
<span className="text-2xl">⏳</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-yellow-600 dark:text-yellow-400">
|
||||
{overtimeStats.thisMonth.pending}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">onay bekliyor</p>
|
||||
</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-2">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Yıllık Toplam
|
||||
</h3>
|
||||
<span className="text-2xl">📊</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-blue-600 dark:text-blue-400">
|
||||
{overtimeStats.thisYear.total}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">saat bu yıl</p>
|
||||
</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(LeaveStatusEnum.Pending)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
||||
filterStatus === LeaveStatusEnum.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(LeaveStatusEnum.Approved)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
||||
filterStatus === LeaveStatusEnum.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(LeaveStatusEnum.Rejected)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
||||
filterStatus === LeaveStatusEnum.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>
|
||||
|
||||
{/* Mesai 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">Mesai 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">
|
||||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
|
||||
<HiClock className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<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">
|
||||
{dayjs(request.date).format('DD MMMM YYYY dddd')}
|
||||
</h3>
|
||||
<span
|
||||
className={`px-2.5 py-1 text-xs rounded-full ${getStatusColor(request.status)}`}
|
||||
>
|
||||
{request.status === LeaveStatusEnum.Pending && '⏳ Beklemede'}
|
||||
{request.status === LeaveStatusEnum.Approved && '✅ Onaylandı'}
|
||||
{request.status === LeaveStatusEnum.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">
|
||||
{request.startTime}
|
||||
</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">
|
||||
{request.endTime}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Süre</p>
|
||||
<p className="text-sm font-medium text-blue-600 dark:text-blue-400">
|
||||
{request.duration} saat
|
||||
</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.creationTime).format('DD MMM')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{request.project && (
|
||||
<div className="mb-2">
|
||||
<span className="inline-flex items-center px-2.5 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded text-xs font-medium">
|
||||
📁 {request.project}
|
||||
</span>
|
||||
</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 === LeaveStatusEnum.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">
|
||||
<HiClock 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 mesai talebi bulunmuyor'
|
||||
: `${filterStatus === LeaveStatusEnum.Pending ? 'Bekleyen' : filterStatus === LeaveStatusEnum.Approved ? 'Onaylanan' : 'Reddedilen'} mesai talebi bulunmuyor`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Yeni Mesai 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 Mesai 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">
|
||||
Tarih
|
||||
</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 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ıç Saati
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
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ş Saati
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
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">
|
||||
Proje (Opsiyonel)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Proje adı"
|
||||
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">
|
||||
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="Mesai yapma sebebini 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 OvertimeManagement
|
||||
|
|
@ -1,313 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { HiKey, HiCalendar, HiTruck, HiCog, HiPlus, HiXMark } from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockReservations, Reservation } from '../../mocks/mockIntranetData'
|
||||
|
||||
const ReservationsModule: React.FC = () => {
|
||||
const [selectedType, setSelectedType] = useState<'all' | 'room' | 'vehicle' | 'equipment'>('all')
|
||||
const [showNewReservation, setShowNewReservation] = useState(false)
|
||||
|
||||
const filteredReservations =
|
||||
selectedType === 'all'
|
||||
? mockReservations
|
||||
: mockReservations.filter((r) => r.type === selectedType)
|
||||
|
||||
const getTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'room':
|
||||
return <HiKey className="w-5 h-5" />
|
||||
case 'vehicle':
|
||||
return <HiTruck className="w-5 h-5" />
|
||||
case 'equipment':
|
||||
return <HiCog className="w-5 h-5" />
|
||||
default:
|
||||
return <HiKey className="w-5 h-5" />
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeLabel = (type: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
room: 'Toplantı Salonu',
|
||||
vehicle: 'Araç',
|
||||
equipment: 'Ekipman',
|
||||
}
|
||||
return labels[type] || type
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
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',
|
||||
completed: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300',
|
||||
}
|
||||
return colors[status] || colors.pending
|
||||
}
|
||||
|
||||
const getStatusLabel = (status: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
pending: 'Bekliyor',
|
||||
approved: 'Onaylandı',
|
||||
rejected: 'Reddedildi',
|
||||
completed: 'Tamamlandı',
|
||||
}
|
||||
return labels[status] || status
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<div className="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">🔑 Rezervasyonlar</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Oda, araç ve ekipman rezervasyonları
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowNewReservation(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 Rezervasyon
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Type Filter */}
|
||||
<div className="flex gap-3">
|
||||
{[
|
||||
{ value: 'all' as const, label: 'Tümü', icon: HiCalendar },
|
||||
{ value: 'room' as const, label: 'Toplantı Salonu', icon: HiKey },
|
||||
{ value: 'vehicle' as const, label: 'Araç', icon: HiTruck },
|
||||
{ value: 'equipment' as const, label: 'Ekipman', icon: HiCog },
|
||||
].map((type) => (
|
||||
<button
|
||||
key={type.value}
|
||||
onClick={() => setSelectedType(type.value)}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-all ${
|
||||
selectedType === type.value
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<type.icon className="w-5 h-5" />
|
||||
{type.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Reservations List */}
|
||||
<div className="space-y-4">
|
||||
{filteredReservations.map((reservation: Reservation, idx: number) => (
|
||||
<motion.div
|
||||
key={reservation.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.05 }}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center text-blue-600 dark:text-blue-400">
|
||||
{getTypeIcon(reservation.type)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{reservation.resourceName}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{getTypeLabel(reservation.type)}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(reservation.status)}`}
|
||||
>
|
||||
{getStatusLabel(reservation.status)}
|
||||
</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(reservation.startDate).format('DD MMM, HH:mm')}
|
||||
</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(reservation.endDate).format('DD MMM, HH:mm')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Rezerve Eden</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<img
|
||||
src={reservation.bookedBy.avatar}
|
||||
alt={reservation.bookedBy.fullName}
|
||||
className="w-5 h-5 rounded-full"
|
||||
/>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{reservation.bookedBy.fullName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{reservation.participants && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Katılımcı</p>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{reservation.participants} kişi
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Amaç: {reservation.purpose}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{reservation.notes && (
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3">
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||
<strong>Not:</strong> {reservation.notes}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{filteredReservations.length === 0 && (
|
||||
<div className="text-center py-12 text-gray-500 dark:text-gray-400">
|
||||
<HiCalendar className="w-16 h-16 mx-auto mb-4 opacity-20" />
|
||||
<p>Rezervasyon bulunamadı</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* New Reservation Modal */}
|
||||
<AnimatePresence>
|
||||
{showNewReservation && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={() => setShowNewReservation(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"
|
||||
>
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Yeni Rezervasyon Oluştur
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowNewReservation(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">
|
||||
Rezervasyon Tipi
|
||||
</label>
|
||||
<select className="w-full px-4 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>Toplantı Salonu</option>
|
||||
<option>Araç</option>
|
||||
<option>Ekipman</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Kaynak Seçin
|
||||
</label>
|
||||
<select className="w-full px-4 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>Toplantı Salonu A</option>
|
||||
<option>Toplantı Salonu B</option>
|
||||
<option>Eğitim Salonu</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="datetime-local"
|
||||
className="w-full px-4 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="datetime-local"
|
||||
className="w-full px-4 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">
|
||||
Amaç
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Rezervasyon amacını yazın"
|
||||
className="w-full px-4 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">
|
||||
Notlar (Opsiyonel)
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
placeholder="Ek notlarınızı yazın"
|
||||
className="w-full px-4 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 className="flex gap-3 pt-4">
|
||||
<button
|
||||
onClick={() => setShowNewReservation(false)}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
|
||||
Rezervasyon Oluştur
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReservationsModule
|
||||
|
|
@ -1,464 +0,0 @@
|
|||
import React, { useState, useMemo, useEffect } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
HiHome,
|
||||
HiCalendar,
|
||||
HiFolder,
|
||||
HiClipboardDocumentList,
|
||||
HiChevronRight,
|
||||
HiChatBubbleLeftRight,
|
||||
HiCake,
|
||||
HiAcademicCap,
|
||||
HiKey,
|
||||
HiBuildingOffice2,
|
||||
HiClipboardDocumentCheck,
|
||||
HiUserPlus,
|
||||
HiBars3,
|
||||
HiChevronLeft,
|
||||
HiCog6Tooth,
|
||||
HiArrowsUpDown,
|
||||
HiSquares2X2,
|
||||
} from 'react-icons/hi2'
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
DragEndEvent,
|
||||
} from '@dnd-kit/core'
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import {
|
||||
mockTasks,
|
||||
mockEvents,
|
||||
mockDocuments,
|
||||
mockBirthdays,
|
||||
mockTrainings,
|
||||
mockReservations,
|
||||
mockSurveys,
|
||||
mockVisitors,
|
||||
} from '../../mocks/mockIntranetData'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
interface MenuItem {
|
||||
id: string
|
||||
label: string
|
||||
icon: React.ElementType
|
||||
path?: string
|
||||
badge?: number
|
||||
children?: MenuItem[]
|
||||
}
|
||||
|
||||
const getMenuItems = (badgeCounts: any): MenuItem[] => [
|
||||
{
|
||||
id: 'dashboard',
|
||||
label: 'Ana Sayfa',
|
||||
icon: HiHome,
|
||||
path: '/intranet/dashboard',
|
||||
},
|
||||
{
|
||||
id: 'social',
|
||||
label: 'Sosyal Akış',
|
||||
icon: HiChatBubbleLeftRight,
|
||||
path: '/intranet/social',
|
||||
},
|
||||
{
|
||||
id: 'events',
|
||||
label: 'Etkinlikler',
|
||||
icon: HiCalendar,
|
||||
path: '/intranet/events',
|
||||
badge: badgeCounts.events || undefined,
|
||||
},
|
||||
{
|
||||
id: 'documents',
|
||||
label: 'Dokümanlar',
|
||||
icon: HiFolder,
|
||||
path: '/intranet/documents',
|
||||
badge: badgeCounts.documents || undefined,
|
||||
},
|
||||
{
|
||||
id: 'tasks',
|
||||
label: 'Görevler',
|
||||
icon: HiClipboardDocumentList,
|
||||
path: '/intranet/tasks',
|
||||
badge: badgeCounts.tasks || undefined,
|
||||
},
|
||||
{
|
||||
id: 'birthdays',
|
||||
label: 'Doğum Günleri',
|
||||
icon: HiCake,
|
||||
path: '/intranet/birthdays',
|
||||
badge: badgeCounts.birthdays || undefined,
|
||||
},
|
||||
{
|
||||
id: 'training',
|
||||
label: 'Eğitimler',
|
||||
icon: HiAcademicCap,
|
||||
path: '/intranet/training',
|
||||
badge: badgeCounts.training || undefined,
|
||||
},
|
||||
{
|
||||
id: 'reservations',
|
||||
label: 'Rezervasyonlar',
|
||||
icon: HiKey,
|
||||
path: '/intranet/reservations',
|
||||
badge: badgeCounts.reservations || undefined,
|
||||
},
|
||||
{ id: 'hr-leave', label: 'İzin Yönetimi', icon: HiCalendar, path: '/intranet/hr/leave' },
|
||||
{
|
||||
id: 'hr-overtime',
|
||||
label: 'Mesai Yönetimi',
|
||||
icon: HiClipboardDocumentList,
|
||||
path: '/intranet/hr/overtime',
|
||||
},
|
||||
{ id: 'hr-expense', label: 'Harcama Yönetimi', icon: HiFolder, path: '/intranet/hr/expense' },
|
||||
{
|
||||
id: 'cafeteria',
|
||||
label: 'Kafeterya & Servis',
|
||||
icon: HiBuildingOffice2,
|
||||
path: '/intranet/cafeteria/shuttle',
|
||||
},
|
||||
{
|
||||
id: 'surveys',
|
||||
label: 'Anketler',
|
||||
icon: HiClipboardDocumentCheck,
|
||||
path: '/intranet/surveys',
|
||||
badge: badgeCounts.surveys || undefined,
|
||||
},
|
||||
{
|
||||
id: 'visitors',
|
||||
label: 'Ziyaretçi Yönetimi',
|
||||
icon: HiUserPlus,
|
||||
path: '/intranet/visitors',
|
||||
badge: badgeCounts.visitors || undefined,
|
||||
},
|
||||
]
|
||||
|
||||
interface IntranetSidebarProps {
|
||||
activePath: string
|
||||
onNavigate: (path: string) => void
|
||||
}
|
||||
|
||||
const IntranetSidebar: React.FC<IntranetSidebarProps> = ({ activePath, onNavigate }) => {
|
||||
const [expandedMenus, setExpandedMenus] = useState<string[]>(['hr'])
|
||||
const [isCollapsed, setIsCollapsed] = useState(false)
|
||||
const [isDesignMode, setIsDesignMode] = useState(false)
|
||||
const [customOrder, setCustomOrder] = useState<string[]>([])
|
||||
|
||||
// Mobil ekranlarda otomatik daralt
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth < 1024) {
|
||||
// lg breakpoint (1024px)
|
||||
setIsCollapsed(true)
|
||||
}
|
||||
}
|
||||
|
||||
// İlk yükleme
|
||||
handleResize()
|
||||
|
||||
window.addEventListener('resize', handleResize)
|
||||
return () => window.removeEventListener('resize', handleResize)
|
||||
}, [])
|
||||
|
||||
// localStorage'dan özel sıralamayı yükle
|
||||
useEffect(() => {
|
||||
const savedOrder = localStorage.getItem('intranet-menu-order')
|
||||
if (savedOrder) {
|
||||
try {
|
||||
setCustomOrder(JSON.parse(savedOrder))
|
||||
} catch (e) {
|
||||
console.error('Failed to load menu order:', e)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Dinamik badge sayılarını hesapla
|
||||
const badgeCounts = useMemo(() => {
|
||||
const today = dayjs()
|
||||
|
||||
return {
|
||||
tasks: mockTasks.filter((t) => t.status !== 'done').length,
|
||||
events: mockEvents.filter(
|
||||
(e) =>
|
||||
e.isPublished && (dayjs(e.date).isAfter(today) || dayjs(e.date).isSame(today, 'day')),
|
||||
).length,
|
||||
documents: mockDocuments.length,
|
||||
birthdays: mockBirthdays.filter((b) => {
|
||||
const birthMonth = dayjs(b.date).month()
|
||||
const currentMonth = today.month()
|
||||
return birthMonth === currentMonth
|
||||
}).length,
|
||||
training: mockTrainings.filter((t) => t.status === 'upcoming').length,
|
||||
reservations: mockReservations.filter(
|
||||
(r) => r.status === 'approved' || r.status === 'pending',
|
||||
).length,
|
||||
surveys: mockSurveys.filter((s) => s.status === 'active').length,
|
||||
visitors: mockVisitors.filter((v) => v.status === 'scheduled' || v.status === 'checked-in')
|
||||
.length,
|
||||
}
|
||||
}, [])
|
||||
|
||||
const toggleMenu = (id: string) => {
|
||||
setExpandedMenus((prev) =>
|
||||
prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
|
||||
)
|
||||
}
|
||||
|
||||
const isActive = (path?: string) => {
|
||||
if (!path) return false
|
||||
return activePath === path || activePath.startsWith(path + '/')
|
||||
}
|
||||
|
||||
const menuItems = useMemo(() => getMenuItems(badgeCounts), [badgeCounts])
|
||||
|
||||
// Menü sıralamasını customOrder'a göre düzenle
|
||||
const orderedMenuItems = useMemo(() => {
|
||||
if (customOrder.length === 0) {
|
||||
return menuItems
|
||||
}
|
||||
|
||||
const ordered = [...menuItems].sort((a, b) => {
|
||||
const indexA = customOrder.indexOf(a.id)
|
||||
const indexB = customOrder.indexOf(b.id)
|
||||
|
||||
// Eğer her ikisi de customOrder'da varsa, sıralarına göre sırala
|
||||
if (indexA !== -1 && indexB !== -1) {
|
||||
return indexA - indexB
|
||||
}
|
||||
|
||||
// Sadece a customOrder'da varsa, a önce gelsin
|
||||
if (indexA !== -1) return -1
|
||||
|
||||
// Sadece b customOrder'da varsa, b önce gelsin
|
||||
if (indexB !== -1) return 1
|
||||
|
||||
// İkisi de yoksa, orijinal sıraları koru
|
||||
return 0
|
||||
})
|
||||
|
||||
return ordered
|
||||
}, [menuItems, customOrder])
|
||||
|
||||
// Drag & Drop sensörleri
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
}),
|
||||
)
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event
|
||||
|
||||
if (over && active.id !== over.id) {
|
||||
const oldIndex = orderedMenuItems.findIndex((item) => item.id === active.id)
|
||||
const newIndex = orderedMenuItems.findIndex((item) => item.id === over.id)
|
||||
|
||||
const newOrder = arrayMove(orderedMenuItems, oldIndex, newIndex)
|
||||
const newOrderIds = newOrder.map((item) => item.id)
|
||||
|
||||
setCustomOrder(newOrderIds)
|
||||
localStorage.setItem('intranet-menu-order', JSON.stringify(newOrderIds))
|
||||
}
|
||||
}
|
||||
|
||||
const toggleDesignMode = () => {
|
||||
setIsDesignMode(!isDesignMode)
|
||||
}
|
||||
|
||||
const resetMenuOrder = () => {
|
||||
setCustomOrder([])
|
||||
localStorage.removeItem('intranet-menu-order')
|
||||
}
|
||||
|
||||
// Sortable MenuItem komponenti
|
||||
const SortableMenuItem = ({ item, level = 0 }: { item: MenuItem; level?: number }) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: item.id,
|
||||
disabled: !isDesignMode,
|
||||
})
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
}
|
||||
|
||||
const hasChildren = item.children && item.children.length > 0
|
||||
const isExpanded = expandedMenus.includes(item.id)
|
||||
const active = isActive(item.path)
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} style={style} key={item.id}>
|
||||
<button
|
||||
{...(isDesignMode ? { ...attributes, ...listeners } : {})}
|
||||
onClick={() => {
|
||||
if (isDesignMode) return // Tasarım modunda navigasyon engellenir
|
||||
|
||||
if (hasChildren) {
|
||||
toggleMenu(item.id)
|
||||
} else if (item.path) {
|
||||
onNavigate(item.path)
|
||||
}
|
||||
}}
|
||||
className={`w-full flex items-center ${
|
||||
isCollapsed ? 'justify-center' : 'justify-between'
|
||||
} px-3 py-2.5 rounded-lg transition-colors ${
|
||||
active
|
||||
? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
|
||||
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
} ${level > 0 ? 'ml-6' : ''} ${
|
||||
isDesignMode
|
||||
? 'cursor-move border-2 border-dashed border-blue-400 dark:border-blue-500'
|
||||
: 'cursor-pointer'
|
||||
}`}
|
||||
title={isCollapsed ? item.label : isDesignMode ? 'Sürükle' : undefined}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
{isDesignMode && !isCollapsed && (
|
||||
<HiArrowsUpDown className="w-4 h-4 flex-shrink-0 text-blue-500" />
|
||||
)}
|
||||
<item.icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!isCollapsed && <span className="font-medium text-sm truncate">{item.label}</span>}
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{item.badge && item.badge > 0 && (
|
||||
<span className="px-2 py-0.5 bg-red-500 text-white text-xs rounded-full">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
{hasChildren && !isDesignMode && (
|
||||
<motion.div
|
||||
animate={{ rotate: isExpanded ? 90 : 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<HiChevronRight className="w-4 h-4" />
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{hasChildren && (
|
||||
<AnimatePresence>
|
||||
{isExpanded && !isCollapsed && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="mt-1 space-y-1">
|
||||
{item.children!.map((child) => (
|
||||
<SortableMenuItem key={child.id} item={child} level={level + 1} />
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderMenuItem = (item: MenuItem, level: number = 0) => {
|
||||
return <SortableMenuItem key={item.id} item={item} level={level} />
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Sidebar */}
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{
|
||||
width: isCollapsed ? '60px' : '256px',
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 h-screen sticky top-0 overflow-y-auto"
|
||||
>
|
||||
<div className="p-2 border-b border-gray-200 dark:border-gray-700">
|
||||
{!isCollapsed ? (
|
||||
<div className="flex items-center justify-between px-3 py-2.5">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<HiSquares2X2 className="w-5 h-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={toggleDesignMode}
|
||||
className={`p-1.5 rounded transition-colors ${
|
||||
isDesignMode
|
||||
? 'bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
|
||||
}`}
|
||||
title={isDesignMode ? 'Düzenlemeyi Bitir' : 'Menü Düzenle'}
|
||||
>
|
||||
<HiCog6Tooth className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsCollapsed(true)}
|
||||
className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
||||
title="Daralt"
|
||||
>
|
||||
<HiChevronLeft className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setIsCollapsed(false)}
|
||||
className="w-full flex justify-center p-2.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
title="Genişlet"
|
||||
>
|
||||
<HiBars3 className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tasarım Modu Bilgi Paneli */}
|
||||
{!isCollapsed && isDesignMode && (
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-xs text-blue-700 dark:text-blue-300 flex items-center gap-2">
|
||||
<HiArrowsUpDown className="w-4 h-4" />
|
||||
Menü öğelerini sürükleyerek sıralayın
|
||||
</p>
|
||||
{customOrder.length > 0 && (
|
||||
<button
|
||||
onClick={resetMenuOrder}
|
||||
className="px-2 py-1 text-xs text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded transition-colors"
|
||||
title="Varsayılana Sıfırla"
|
||||
>
|
||||
Sıfırla
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
||||
<SortableContext
|
||||
items={orderedMenuItems.map((item) => item.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<nav className="p-2 space-y-1">
|
||||
{orderedMenuItems.map((item) => renderMenuItem(item))}
|
||||
</nav>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
</motion.div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default IntranetSidebar
|
||||
|
|
@ -1,298 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { HiClipboardDocumentCheck, HiClock, HiCheckCircle, HiXMark } from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockSurveys, Survey } from '../../mocks/mockIntranetData'
|
||||
|
||||
const SurveysModule: React.FC = () => {
|
||||
const [selectedStatus, setSelectedStatus] = useState<'all' | 'active' | 'draft' | 'closed'>('all')
|
||||
const [showSurveyModal, setShowSurveyModal] = useState(false)
|
||||
const [selectedSurvey, setSelectedSurvey] = useState<Survey | null>(null)
|
||||
|
||||
const filteredSurveys =
|
||||
selectedStatus === 'all' ? mockSurveys : mockSurveys.filter((s) => s.status === selectedStatus)
|
||||
|
||||
const handleTakeSurvey = (survey: Survey) => {
|
||||
setSelectedSurvey(survey)
|
||||
setShowSurveyModal(true)
|
||||
}
|
||||
|
||||
const handleSubmitSurvey = () => {
|
||||
// Anket gönderildi
|
||||
setShowSurveyModal(false)
|
||||
setSelectedSurvey(null)
|
||||
// Başarı mesajı gösterilebilir
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
draft: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300',
|
||||
active: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
||||
closed: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
|
||||
}
|
||||
return colors[status] || colors.draft
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<div className="mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
📊 Anketler & Memnuniyet Formları
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Geri bildirim ve değerlendirme anketleri
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Filter */}
|
||||
<div className="flex gap-3">
|
||||
{[
|
||||
{ value: 'all' as const, label: 'Tümü' },
|
||||
{ value: 'active' as const, label: 'Aktif' },
|
||||
{ value: 'draft' as const, label: 'Taslak' },
|
||||
{ value: 'closed' as const, label: 'Kapalı' },
|
||||
].map((tab) => (
|
||||
<button
|
||||
key={tab.value}
|
||||
onClick={() => setSelectedStatus(tab.value)}
|
||||
className={`px-4 py-2 rounded-lg border-2 transition-all ${
|
||||
selectedStatus === tab.value
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Surveys List */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{filteredSurveys.map((survey: Survey, idx: number) => (
|
||||
<motion.div
|
||||
key={survey.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white pr-4">
|
||||
{survey.title}
|
||||
</h3>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap ${getStatusColor(survey.status)}`}
|
||||
>
|
||||
{survey.status === 'active'
|
||||
? 'Aktif'
|
||||
: survey.status === 'draft'
|
||||
? 'Taslak'
|
||||
: 'Kapalı'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{survey.description}</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Soru Sayısı</p>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{survey.totalQuestions} soru
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Yanıt</p>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{survey.responses} kişi
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Son Tarih</p>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{dayjs(survey.deadline).format('DD MMM YYYY')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Gizlilik</p>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{survey.isAnonymous ? '🔒 Anonim' : '👤 İsimli'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Hedef Kitle</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{survey.targetAudience.map((audience, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs rounded"
|
||||
>
|
||||
{audience}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{survey.status === 'active' && (
|
||||
<button
|
||||
onClick={() => handleTakeSurvey(survey)}
|
||||
className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Anketi Doldur
|
||||
</button>
|
||||
)}
|
||||
|
||||
{survey.status === 'closed' && (
|
||||
<div className="flex items-center justify-center gap-2 py-2 text-green-600 dark:text-green-400">
|
||||
<HiCheckCircle className="w-5 h-5" />
|
||||
<span className="text-sm font-medium">Tamamlandı</span>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredSurveys.length === 0 && (
|
||||
<div className="text-center py-12 text-gray-500 dark:text-gray-400">
|
||||
<HiClipboardDocumentCheck className="w-16 h-16 mx-auto mb-4 opacity-20" />
|
||||
<p>Anket bulunamadı</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Survey Modal */}
|
||||
<AnimatePresence>
|
||||
{showSurveyModal && selectedSurvey && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={() => setShowSurveyModal(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"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<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 z-10">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
{selectedSurvey.title}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
{selectedSurvey.description}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowSurveyModal(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>
|
||||
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
handleSubmitSurvey()
|
||||
}}
|
||||
className="p-6 space-y-6"
|
||||
>
|
||||
{/* Örnek Anket Soruları */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
1. Genel memnuniyet düzeyiniz nedir? *
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
{[1, 2, 3, 4, 5].map((rating) => (
|
||||
<label
|
||||
key={rating}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
>
|
||||
<input type="radio" name="rating" value={rating} required />
|
||||
<span className="text-sm text-gray-900 dark:text-white">{rating}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
2. Hangi departmanda çalışıyorsunuz? *
|
||||
</label>
|
||||
<select
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Seçiniz</option>
|
||||
<option value="it">Bilgi Teknolojileri</option>
|
||||
<option value="hr">İnsan Kaynakları</option>
|
||||
<option value="finance">Finans</option>
|
||||
<option value="sales">Satış</option>
|
||||
<option value="marketing">Pazarlama</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
3. Görüş ve önerileriniz
|
||||
</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
placeholder="Yorumlarınızı buraya yazabilirsiniz..."
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!selectedSurvey.isAnonymous && (
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3">
|
||||
<p className="text-sm text-blue-700 dark:text-blue-300">
|
||||
ℹ️ Bu anket isim belirtilerek doldurulmaktadır. Yanıtlarınız
|
||||
kaydedilecektir.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedSurvey.isAnonymous && (
|
||||
<div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-3">
|
||||
<p className="text-sm text-green-700 dark:text-green-300">
|
||||
✅ Bu anket anonimdir. Kimlik bilgileriniz kaydedilmeyecektir.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSurveyModal(false)}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Anketi Gönder
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SurveysModule
|
||||
|
|
@ -1,674 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
DndContext,
|
||||
DragEndEvent,
|
||||
DragOverlay,
|
||||
DragStartEvent,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
closestCorners,
|
||||
useDroppable,
|
||||
} from '@dnd-kit/core'
|
||||
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
|
||||
import { useSortable } from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import {
|
||||
HiPlus,
|
||||
HiXMark,
|
||||
HiClock,
|
||||
HiChatBubbleLeftRight,
|
||||
HiPaperClip,
|
||||
HiTrash,
|
||||
} from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/tr'
|
||||
import { mockTasks, Task } from '../../mocks/mockIntranetData'
|
||||
import { Badge } from '@/components/ui'
|
||||
|
||||
dayjs.locale('tr')
|
||||
|
||||
type TaskStatus = 'todo' | 'in-progress' | 'review' | 'done'
|
||||
|
||||
// Droppable Column Component
|
||||
interface DroppableColumnProps {
|
||||
id: TaskStatus
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const DroppableColumn: React.FC<DroppableColumnProps> = ({ id, children }) => {
|
||||
const { setNodeRef } = useDroppable({ id })
|
||||
|
||||
return <div ref={setNodeRef}>{children}</div>
|
||||
}
|
||||
|
||||
// Sortable Task Card Component
|
||||
interface SortableTaskCardProps {
|
||||
task: Task
|
||||
onTaskClick: (task: Task) => void
|
||||
getPriorityColor: (priority: string) => string
|
||||
getPriorityLabel: (priority: string) => string
|
||||
isOverdue: (date: Date | string) => boolean
|
||||
}
|
||||
|
||||
const SortableTaskCard: React.FC<SortableTaskCardProps> = ({
|
||||
task,
|
||||
onTaskClick,
|
||||
getPriorityColor,
|
||||
getPriorityLabel,
|
||||
isOverdue,
|
||||
}) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: task.id,
|
||||
})
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
}
|
||||
|
||||
const overdue = isOverdue(task.dueDate) && task.status !== 'done'
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className={`bg-white dark:bg-gray-800 rounded-lg p-3 sm:p-4 border-2 cursor-move hover:shadow-lg transition-all ${
|
||||
overdue ? 'border-red-300 dark:border-red-700' : 'border-gray-200 dark:border-gray-700'
|
||||
} ${isDragging ? 'shadow-2xl ring-4 ring-blue-500/50' : ''}`}
|
||||
onClick={(e) => {
|
||||
if (!(e.target as HTMLElement).closest('[data-no-click]')) {
|
||||
onTaskClick(task)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2 sm:mb-3">
|
||||
<span
|
||||
className={`px-2 py-1 text-xs font-medium rounded border ${getPriorityColor(task.priority)}`}
|
||||
>
|
||||
{getPriorityLabel(task.priority)}
|
||||
</span>
|
||||
{overdue && (
|
||||
<span className="text-xs text-red-600 dark:text-red-400 font-medium">⚠️ Gecikmiş</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">{task.title}</h4>
|
||||
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">
|
||||
{task.description}
|
||||
</p>
|
||||
|
||||
<div className="mb-3">
|
||||
<span className="inline-flex items-center px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded text-xs">
|
||||
📁 {task.project}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{task.labels.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mb-3">
|
||||
{task.labels.map((label, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between pt-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center gap-1">
|
||||
<HiClock className="w-4 h-4" />
|
||||
{dayjs(task.dueDate).format('DD MMM')}
|
||||
</div>
|
||||
{task.comments > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<HiChatBubbleLeftRight className="w-4 h-4" />
|
||||
{task.comments}
|
||||
</div>
|
||||
)}
|
||||
{task.attachments && task.attachments.length > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<HiPaperClip className="w-4 h-4" />
|
||||
{task.attachments.length}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex -space-x-2">
|
||||
{task.assignedTo.slice(0, 3).map((assignee, idx) => (
|
||||
<img
|
||||
key={idx}
|
||||
src={assignee.avatar}
|
||||
alt={assignee.fullName}
|
||||
className="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800"
|
||||
title={assignee.fullName}
|
||||
/>
|
||||
))}
|
||||
{task.assignedTo.length > 3 && (
|
||||
<div className="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800 bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-xs font-medium text-gray-700 dark:text-gray-300">
|
||||
+{task.assignedTo.length - 3}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const TasksModule: React.FC = () => {
|
||||
const [tasks, setTasks] = useState<Task[]>(mockTasks)
|
||||
const [selectedTask, setSelectedTask] = useState<Task | null>(null)
|
||||
const [activeId, setActiveId] = useState<string | null>(null)
|
||||
const [dragOverColumn, setDragOverColumn] = useState<TaskStatus | null>(null)
|
||||
const [showNewTaskModal, setShowNewTaskModal] = useState(false)
|
||||
const [newTaskColumn, setNewTaskColumn] = useState<TaskStatus>('todo')
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 8,
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
const columns: { id: TaskStatus; title: string; icon: string; color: string }[] = [
|
||||
{ id: 'todo', title: 'Yapılacak', icon: '📋', color: 'gray' },
|
||||
{ id: 'in-progress', title: 'Devam Ediyor', icon: '⚙️', color: 'blue' },
|
||||
{ id: 'review', title: 'İncelemede', icon: '👀', color: 'yellow' },
|
||||
{ id: 'done', title: 'Tamamlandı', icon: '✅', color: 'green' },
|
||||
]
|
||||
|
||||
const handleDragStart = (event: DragStartEvent) => {
|
||||
setActiveId(event.active.id as string)
|
||||
}
|
||||
|
||||
const handleDragOver = (event: any) => {
|
||||
const { over } = event
|
||||
|
||||
if (!over) {
|
||||
setDragOverColumn(null)
|
||||
return
|
||||
}
|
||||
|
||||
// Check if over a column or a task
|
||||
const overColumn = columns.find((col) => col.id === over.id)
|
||||
if (overColumn) {
|
||||
setDragOverColumn(overColumn.id)
|
||||
} else {
|
||||
// over.id is a task, find its column
|
||||
const overTask = tasks.find((t) => t.id === over.id)
|
||||
if (overTask) {
|
||||
setDragOverColumn(overTask.status)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event
|
||||
setActiveId(null)
|
||||
setDragOverColumn(null)
|
||||
|
||||
if (!over) return
|
||||
|
||||
const taskId = active.id as string
|
||||
|
||||
// over.id could be either a column id or a task id
|
||||
// If it's a column id (from DroppableColumn), use it directly
|
||||
// If it's a task id, find that task's column
|
||||
let newStatus: TaskStatus
|
||||
|
||||
const overColumn = columns.find((col) => col.id === over.id)
|
||||
if (overColumn) {
|
||||
newStatus = overColumn.id
|
||||
} else {
|
||||
// over.id is a task, find its column
|
||||
const overTask = tasks.find((t) => t.id === over.id)
|
||||
if (!overTask) return
|
||||
newStatus = overTask.status
|
||||
}
|
||||
|
||||
// Update task status
|
||||
setTasks((prevTasks) =>
|
||||
prevTasks.map((task) => (task.id === taskId ? { ...task, status: newStatus } : task)),
|
||||
)
|
||||
|
||||
if (selectedTask?.id === taskId) {
|
||||
setSelectedTask((prev) => (prev ? { ...prev, status: newStatus } : null))
|
||||
}
|
||||
}
|
||||
|
||||
const handleStatusChange = (taskId: string, newStatus: TaskStatus) => {
|
||||
setTasks((prevTasks) =>
|
||||
prevTasks.map((task) => (task.id === taskId ? { ...task, status: newStatus } : task)),
|
||||
)
|
||||
|
||||
if (selectedTask?.id === taskId) {
|
||||
setSelectedTask((prev) => (prev ? { ...prev, status: newStatus } : null))
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddTask = (status: TaskStatus) => {
|
||||
setNewTaskColumn(status)
|
||||
setShowNewTaskModal(true)
|
||||
}
|
||||
|
||||
const handleCreateTask = (title: string, description: string) => {
|
||||
const newTask: Task = {
|
||||
id: `task-${Date.now()}`,
|
||||
title,
|
||||
description,
|
||||
project: 'Genel',
|
||||
assignedTo: [mockTasks[0].assignedTo[0]], // Default assignee
|
||||
assignedBy: mockTasks[0].assignedBy,
|
||||
priority: 'medium',
|
||||
status: newTaskColumn,
|
||||
dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days from now
|
||||
createdAt: new Date(),
|
||||
labels: [],
|
||||
comments: 0,
|
||||
}
|
||||
|
||||
setTasks((prev) => [...prev, newTask])
|
||||
setShowNewTaskModal(false)
|
||||
}
|
||||
|
||||
const handleDeleteTask = (taskId: string) => {
|
||||
if (window.confirm('Bu görevi silmek istediğinizden emin misiniz?')) {
|
||||
setTasks((prevTasks) => prevTasks.filter((task) => task.id !== taskId))
|
||||
setSelectedTask(null)
|
||||
}
|
||||
}
|
||||
|
||||
const getTasksByStatus = (status: TaskStatus) => {
|
||||
return tasks.filter((task: Task) => task.status === status)
|
||||
}
|
||||
|
||||
const getPriorityColor = (priority: string) => {
|
||||
const colors = {
|
||||
low: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 border-gray-200 dark:border-gray-600',
|
||||
medium:
|
||||
'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 border-blue-200 dark:border-blue-700',
|
||||
high: 'bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-300 border-orange-200 dark:border-orange-700',
|
||||
urgent:
|
||||
'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-300 border-red-200 dark:border-red-700',
|
||||
}
|
||||
return colors[priority as keyof typeof colors]
|
||||
}
|
||||
|
||||
const getPriorityLabel = (priority: string) => {
|
||||
const labels = {
|
||||
low: 'Düşük',
|
||||
medium: 'Orta',
|
||||
high: 'Yüksek',
|
||||
urgent: '🔥 Acil',
|
||||
}
|
||||
return labels[priority as keyof typeof labels]
|
||||
}
|
||||
|
||||
const isOverdue = (dueDate: Date | string) => {
|
||||
return dayjs(dueDate).isBefore(dayjs(), 'day')
|
||||
}
|
||||
|
||||
return (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCorners}
|
||||
onDragStart={handleDragStart}
|
||||
onDragOver={handleDragOver}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-3 sm:p-4 md:p-6">
|
||||
<div className="max-w-[1600px] mx-auto space-y-4 md:space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Görev & Proje Yönetimi
|
||||
</h1>
|
||||
<p className="text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1">
|
||||
Görevleri Kanban board ile yönetin
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 text-xs sm:text-sm text-gray-600 dark:text-gray-400">
|
||||
<span className="font-medium">Toplam:</span>
|
||||
<span>{tasks.length} görev</span>
|
||||
</div>
|
||||
<button className="px-3 sm:px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center gap-2 transition-colors text-sm sm:text-base">
|
||||
<HiPlus className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
<span className="hidden sm:inline">Yeni Görev</span>
|
||||
<span className="sm:hidden">Yeni</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kanban Board */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4 overflow-x-auto pb-4">
|
||||
<div className="kanban-container sm:contents">
|
||||
{columns.map((column) => {
|
||||
const columnTasks = getTasksByStatus(column.id)
|
||||
return (
|
||||
<DroppableColumn key={column.id} id={column.id}>
|
||||
<SortableContext
|
||||
id={column.id}
|
||||
items={columnTasks.map((t) => t.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div
|
||||
className="kanban-column flex flex-col gap-2 sm:gap-3 bg-gray-100 dark:bg-gray-800/50 rounded-lg p-3 sm:p-4 min-h-[400px] sm:min-h-[500px] lg:min-h-[600px]"
|
||||
data-status={column.id}
|
||||
>
|
||||
{/* Column Header */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg sm:text-xl">{column.icon}</span>
|
||||
<h3
|
||||
className={`text-sm sm:text-base transition-colors duration-200 ${
|
||||
dragOverColumn === column.id
|
||||
? 'text-red-600 font-bold dark:text-blue-400'
|
||||
: 'text-gray-900 font-semibold dark:text-white'
|
||||
}`}
|
||||
>
|
||||
{column.title}
|
||||
</h3>
|
||||
</div>
|
||||
<Badge content={columnTasks.length}></Badge>
|
||||
</div>
|
||||
|
||||
{/* Tasks */}
|
||||
<div className="space-y-3 flex-1">
|
||||
{columnTasks.map((task) => (
|
||||
<SortableTaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
onTaskClick={setSelectedTask}
|
||||
getPriorityColor={getPriorityColor}
|
||||
getPriorityLabel={getPriorityLabel}
|
||||
isOverdue={isOverdue}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add Task Button */}
|
||||
<button
|
||||
onClick={() => handleAddTask(column.id)}
|
||||
className="w-full p-3 sm:p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg hover:border-blue-500 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/10 transition-colors text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
<HiPlus className="w-4 h-4 sm:w-5 sm:h-5 mx-auto" />
|
||||
</button>
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DroppableColumn>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DragOverlay */}
|
||||
<DragOverlay>
|
||||
{activeId ? (
|
||||
<div className="opacity-50">
|
||||
{(() => {
|
||||
const task = tasks.find((t) => t.id === activeId)
|
||||
if (!task) return null
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 border-2 border-blue-500 shadow-2xl">
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">{task.title}</h4>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
) : null}
|
||||
</DragOverlay>
|
||||
</div>
|
||||
|
||||
{/* New Task Modal */}
|
||||
<AnimatePresence>
|
||||
{showNewTaskModal && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={() => setShowNewTaskModal(false)}
|
||||
/>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm: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-lg w-full"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<h2 className="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Yeni Görev Oluştur
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowNewTaskModal(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>
|
||||
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
const formData = new FormData(e.currentTarget)
|
||||
const title = formData.get('title') as string
|
||||
const description = formData.get('description') as string
|
||||
if (title && description) {
|
||||
handleCreateTask(title, description)
|
||||
}
|
||||
}}
|
||||
className="p-4 sm:p-6 space-y-4"
|
||||
>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Görev Başlığı *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
required
|
||||
placeholder="Görev başlığını yazın"
|
||||
className="w-full px-3 sm:px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Açıklama *
|
||||
</label>
|
||||
<textarea
|
||||
name="description"
|
||||
required
|
||||
rows={4}
|
||||
placeholder="Görev detaylarını yazın"
|
||||
className="w-full px-3 sm:px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3">
|
||||
<p className="text-xs sm:text-sm text-blue-700 dark:text-blue-300">
|
||||
📋 Görev{' '}
|
||||
<strong>{columns.find((c) => c.id === newTaskColumn)?.title}</strong>{' '}
|
||||
kolonuna eklenecek
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 sm:gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewTaskModal(false)}
|
||||
className="flex-1 px-3 sm:px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-sm sm:text-base"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-3 sm:px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors text-sm sm:text-base"
|
||||
>
|
||||
Oluştur
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Task Detail Modal */}
|
||||
<AnimatePresence>
|
||||
{selectedTask && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={() => setSelectedTask(null)}
|
||||
/>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm: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-3xl w-full max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
<div className="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
|
||||
<span
|
||||
className={`px-2 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-medium rounded border ${getPriorityColor(selectedTask.priority)}`}
|
||||
>
|
||||
{getPriorityLabel(selectedTask.priority)}
|
||||
</span>
|
||||
<span className="px-2 sm:px-3 py-1 sm:py-1.5 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs sm:text-sm font-medium rounded">
|
||||
📁 {selectedTask.project}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedTask(null)}
|
||||
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-4 sm:p-6 space-y-4 sm:space-y-6">
|
||||
<div>
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
{selectedTask.title}
|
||||
</h2>
|
||||
<p className="text-sm sm:text-base text-gray-700 dark:text-gray-300">
|
||||
{selectedTask.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
|
||||
Durum
|
||||
</p>
|
||||
<select
|
||||
value={selectedTask.status}
|
||||
onChange={(e) =>
|
||||
handleStatusChange(selectedTask.id, e.target.value as TaskStatus)
|
||||
}
|
||||
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 focus:ring-2 focus:ring-blue-500 cursor-pointer"
|
||||
>
|
||||
<option value="todo">📋 Yapılacak</option>
|
||||
<option value="in-progress">⚙️ Devam Ediyor</option>
|
||||
<option value="review">👀 İncelemede</option>
|
||||
<option value="done">✅ Tamamlandı</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
|
||||
Son Tarih
|
||||
</p>
|
||||
<div className="flex items-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg">
|
||||
<HiClock className="w-5 h-5 text-gray-400" />
|
||||
<span className="text-gray-900 dark:text-white">
|
||||
{dayjs(selectedTask.dueDate).format('DD MMMM YYYY')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2 sm:mb-3">
|
||||
Atananlar
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 sm:gap-3">
|
||||
{selectedTask.assignedTo.map((user, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-2 px-2 sm:px-3 py-1.5 sm:py-2 bg-gray-100 dark:bg-gray-700 rounded-lg"
|
||||
>
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.fullName}
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 rounded-full"
|
||||
/>
|
||||
<span className="text-xs sm:text-sm text-gray-900 dark:text-white">
|
||||
{user.fullName}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedTask.labels.length > 0 && (
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
|
||||
Etiketler
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedTask.labels.map((label, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 sm:px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs sm:text-sm rounded"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pt-6 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Oluşturan: {selectedTask.assignedBy.fullName} •{' '}
|
||||
{dayjs(selectedTask.createdAt).format('DD MMMM YYYY')}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => handleDeleteTask(selectedTask.id)}
|
||||
className="px-3 sm:px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center gap-2 transition-colors text-sm"
|
||||
>
|
||||
<HiTrash className="w-4 h-4" />
|
||||
Görevi Sil
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</DndContext>
|
||||
)
|
||||
}
|
||||
|
||||
export default TasksModule
|
||||
|
|
@ -1,399 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
HiAcademicCap,
|
||||
HiClock,
|
||||
HiUsers,
|
||||
HiMapPin,
|
||||
HiXMark,
|
||||
HiCheckBadge,
|
||||
HiCalendar,
|
||||
} from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockTrainings, mockCertificates, Training } from '../../mocks/mockIntranetData'
|
||||
|
||||
const TrainingModule: React.FC = () => {
|
||||
const [selectedTraining, setSelectedTraining] = useState<Training | null>(null)
|
||||
const [selectedTab, setSelectedTab] = useState<'all' | 'upcoming' | 'ongoing' | 'completed'>(
|
||||
'all',
|
||||
)
|
||||
const [trainings, setTrainings] = useState<Training[]>(mockTrainings)
|
||||
const [showEnrollSuccess, setShowEnrollSuccess] = useState(false)
|
||||
|
||||
const filteredTrainings =
|
||||
selectedTab === 'all' ? trainings : trainings.filter((t) => t.status === selectedTab)
|
||||
|
||||
const handleEnroll = (trainingId: string) => {
|
||||
setTrainings((prev) =>
|
||||
prev.map((t) =>
|
||||
t.id === trainingId && t.enrolled < t.maxParticipants
|
||||
? { ...t, enrolled: t.enrolled + 1 }
|
||||
: t,
|
||||
),
|
||||
)
|
||||
|
||||
// Seçili eğitimi de güncelle
|
||||
if (
|
||||
selectedTraining?.id === trainingId &&
|
||||
selectedTraining.enrolled < selectedTraining.maxParticipants
|
||||
) {
|
||||
setSelectedTraining((prev) => (prev ? { ...prev, enrolled: prev.enrolled + 1 } : null))
|
||||
}
|
||||
|
||||
setShowEnrollSuccess(true)
|
||||
setTimeout(() => setShowEnrollSuccess(false), 3000)
|
||||
}
|
||||
|
||||
const getCategoryColor = (category: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
technical: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
|
||||
'soft-skills': 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
|
||||
management: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
||||
compliance: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
|
||||
other: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300',
|
||||
}
|
||||
return colors[category] || colors.other
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const badges: Record<string, { bg: string; text: string }> = {
|
||||
upcoming: { bg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-700 dark:text-blue-300' },
|
||||
ongoing: {
|
||||
bg: 'bg-green-100 dark:bg-green-900/30',
|
||||
text: 'text-green-700 dark:text-green-300',
|
||||
},
|
||||
completed: { bg: 'bg-gray-100 dark:bg-gray-700', text: 'text-gray-700 dark:text-gray-300' },
|
||||
}
|
||||
return badges[status] || badges.upcoming
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<div className="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">
|
||||
🎓 Eğitimler & Sertifikalar
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Kişisel gelişim ve eğitim kayıtları
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ label: 'Tümü', value: mockTrainings.length, tab: 'all' as const },
|
||||
{
|
||||
label: 'Yaklaşan',
|
||||
value: mockTrainings.filter((t) => t.status === 'upcoming').length,
|
||||
tab: 'upcoming' as const,
|
||||
},
|
||||
{
|
||||
label: 'Devam Eden',
|
||||
value: mockTrainings.filter((t) => t.status === 'ongoing').length,
|
||||
tab: 'ongoing' as const,
|
||||
},
|
||||
{
|
||||
label: 'Tamamlanan',
|
||||
value: mockTrainings.filter((t) => t.status === 'completed').length,
|
||||
tab: 'completed' as const,
|
||||
},
|
||||
].map((stat, idx) => (
|
||||
<motion.button
|
||||
key={idx}
|
||||
onClick={() => setSelectedTab(stat.tab)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
className={`p-4 rounded-lg border-2 transition-all ${
|
||||
selectedTab === stat.tab
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-blue-300'
|
||||
}`}
|
||||
>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">{stat.value}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">{stat.label}</div>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Eğitimler */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{filteredTrainings.map((training, idx) => {
|
||||
const badge = getStatusBadge(training.status)
|
||||
return (
|
||||
<motion.div
|
||||
key={training.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
onClick={() => setSelectedTraining(training)}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all cursor-pointer"
|
||||
>
|
||||
{training.thumbnail && (
|
||||
<img
|
||||
src={training.thumbnail}
|
||||
alt={training.title}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium ${getCategoryColor(training.category)}`}
|
||||
>
|
||||
{training.category}
|
||||
</span>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium ${badge.bg} ${badge.text}`}
|
||||
>
|
||||
{training.status === 'upcoming'
|
||||
? 'Yaklaşan'
|
||||
: training.status === 'ongoing'
|
||||
? 'Devam Ediyor'
|
||||
: 'Tamamlandı'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{training.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
|
||||
{training.description}
|
||||
</p>
|
||||
|
||||
<div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<div className="flex items-center gap-2">
|
||||
<HiAcademicCap className="w-4 h-4" />
|
||||
<span>{training.instructor}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<HiCalendar className="w-4 h-4" />
|
||||
<span>{dayjs(training.startDate).format('DD MMM YYYY')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<HiClock className="w-4 h-4" />
|
||||
<span>{training.duration} saat</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<HiUsers className="w-4 h-4" />
|
||||
<span>
|
||||
{training.enrolled} / {training.maxParticipants} katılımcı
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{training.enrolled < training.maxParticipants &&
|
||||
training.status === 'upcoming' && (
|
||||
<button
|
||||
onClick={() => handleEnroll(training.id)}
|
||||
className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Kayıt Ol
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Sertifikalar */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<HiCheckBadge className="w-6 h-6 text-blue-500" />
|
||||
Sertifikalarım
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{mockCertificates.map((cert, idx) => (
|
||||
<motion.div
|
||||
key={cert.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
className="p-4 rounded-lg border-2 border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<HiCheckBadge className="w-8 h-8 text-blue-600 dark:text-blue-400" />
|
||||
{cert.score && (
|
||||
<span className="px-2 py-1 bg-blue-600 text-white rounded text-xs font-bold">
|
||||
{cert.score}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{cert.trainingTitle}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{dayjs(cert.issueDate).format('DD MMMM YYYY')}
|
||||
</p>
|
||||
|
||||
{cert.expiryDate && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
|
||||
Geçerlilik: {dayjs(cert.expiryDate).format('DD/MM/YYYY')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button className="mt-3 w-full px-3 py-1 text-sm text-blue-600 dark:text-blue-400 border border-blue-600 dark:border-blue-400 rounded hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 transition-colors">
|
||||
Görüntüle
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Training Detail Modal */}
|
||||
<AnimatePresence>
|
||||
{selectedTraining && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={() => setSelectedTraining(null)}
|
||||
/>
|
||||
<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="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-6 flex items-center justify-between z-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Eğitim Detayları
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setSelectedTraining(null)}
|
||||
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-6">
|
||||
{selectedTraining.thumbnail && (
|
||||
<img
|
||||
src={selectedTraining.thumbnail}
|
||||
alt={selectedTraining.title}
|
||||
className="w-full h-64 object-cover rounded-lg"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
{selectedTraining.title}
|
||||
</h3>
|
||||
<p className="text-gray-700 dark:text-gray-300">
|
||||
{selectedTraining.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Eğitmen</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white">
|
||||
{selectedTraining.instructor}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Kategori</p>
|
||||
<span
|
||||
className={`inline-block px-3 py-1 rounded-full text-sm ${getCategoryColor(selectedTraining.category)}`}
|
||||
>
|
||||
{selectedTraining.category}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Tarih</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white">
|
||||
{dayjs(selectedTraining.startDate).format('DD MMM')} -{' '}
|
||||
{dayjs(selectedTraining.endDate).format('DD MMM YYYY')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Süre</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white">
|
||||
{selectedTraining.duration} saat
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Tip</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white capitalize">
|
||||
{selectedTraining.type}
|
||||
</p>
|
||||
</div>
|
||||
{selectedTraining.location && (
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Konum</p>
|
||||
<p className="font-medium text-gray-900 dark:text-white">
|
||||
{selectedTraining.location}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">Doluluk Oranı</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-3">
|
||||
<div
|
||||
className="bg-blue-600 h-3 rounded-full transition-all"
|
||||
style={{
|
||||
width: `${(selectedTraining.enrolled / selectedTraining.maxParticipants) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{selectedTraining.enrolled} / {selectedTraining.maxParticipants}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedTraining.enrolled < selectedTraining.maxParticipants &&
|
||||
selectedTraining.status === 'upcoming' && (
|
||||
<button
|
||||
onClick={() => handleEnroll(selectedTraining.id)}
|
||||
className="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium"
|
||||
>
|
||||
Eğitime Kayıt Ol
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Success Notification */}
|
||||
<AnimatePresence>
|
||||
{showEnrollSuccess && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 50 }}
|
||||
className="fixed bottom-6 right-6 bg-green-600 text-white px-6 py-4 rounded-lg shadow-xl flex items-center gap-3 z-50"
|
||||
>
|
||||
<HiCheckBadge className="w-6 h-6" />
|
||||
<div>
|
||||
<p className="font-semibold">Kayıt Başarılı!</p>
|
||||
<p className="text-sm text-green-100">Eğitime kayıt oldunuz.</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TrainingModule
|
||||
|
|
@ -1,393 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { HiUserPlus, HiXMark, HiCheckCircle, HiClock, HiPhone, HiEnvelope } from 'react-icons/hi2'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockVisitors, Visitor } from '../../mocks/mockIntranetData'
|
||||
|
||||
const VisitorsModule: React.FC = () => {
|
||||
const [selectedStatus, setSelectedStatus] = useState<
|
||||
'all' | 'scheduled' | 'checked-in' | 'checked-out' | 'cancelled'
|
||||
>('all')
|
||||
const [showNewVisitor, setShowNewVisitor] = useState(false)
|
||||
const [visitors, setVisitors] = useState<Visitor[]>(mockVisitors)
|
||||
|
||||
const filteredVisitors =
|
||||
selectedStatus === 'all' ? visitors : visitors.filter((v) => v.status === selectedStatus)
|
||||
|
||||
const handleCheckIn = (visitorId: string) => {
|
||||
setVisitors((prev) =>
|
||||
prev.map((v) =>
|
||||
v.id === visitorId ? { ...v, status: 'checked-in', checkIn: new Date() } : v,
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
const handleCheckOut = (visitorId: string) => {
|
||||
setVisitors((prev) =>
|
||||
prev.map((v) =>
|
||||
v.id === visitorId ? { ...v, status: 'checked-out', checkOut: new Date() } : v,
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
const handleCancel = (visitorId: string) => {
|
||||
setVisitors((prev) => prev.map((v) => (v.id === visitorId ? { ...v, status: 'cancelled' } : v)))
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
scheduled: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
|
||||
'checked-in': 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
||||
'checked-out': 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300',
|
||||
cancelled: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
|
||||
}
|
||||
return colors[status] || colors.scheduled
|
||||
}
|
||||
|
||||
const getStatusLabel = (status: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
scheduled: '📅 Planlandı',
|
||||
'checked-in': '✅ Giriş Yaptı',
|
||||
'checked-out': '🚪 Çıkış Yaptı',
|
||||
cancelled: '❌ İptal Edildi',
|
||||
}
|
||||
return labels[status] || status
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<div className="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">
|
||||
👥 Ziyaretçi Yönetimi
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Ziyaretçi kayıtları ve giriş-çıkış takibi
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowNewVisitor(true)}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<HiUserPlus className="w-5 h-5" />
|
||||
Yeni Ziyaretçi
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: 'Tümü', value: mockVisitors.length, status: 'all' as const },
|
||||
{
|
||||
label: 'Planlandı',
|
||||
value: mockVisitors.filter((v) => v.status === 'scheduled').length,
|
||||
status: 'scheduled' as const,
|
||||
},
|
||||
{
|
||||
label: 'İçeride',
|
||||
value: mockVisitors.filter((v) => v.status === 'checked-in').length,
|
||||
status: 'checked-in' as const,
|
||||
},
|
||||
{
|
||||
label: 'Çıkış Yaptı',
|
||||
value: mockVisitors.filter((v) => v.status === 'checked-out').length,
|
||||
status: 'checked-out' as const,
|
||||
},
|
||||
].map((stat, idx) => (
|
||||
<motion.button
|
||||
key={idx}
|
||||
onClick={() => setSelectedStatus(stat.status)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
className={`p-4 rounded-lg border-2 transition-all ${
|
||||
selectedStatus === stat.status
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-blue-300'
|
||||
}`}
|
||||
>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">{stat.value}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">{stat.label}</div>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Visitors List */}
|
||||
<div className="space-y-4">
|
||||
{filteredVisitors.map((visitor: Visitor, idx: number) => (
|
||||
<motion.div
|
||||
key={visitor.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.05 }}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
{visitor.photo && (
|
||||
<img
|
||||
src={visitor.photo}
|
||||
alt={visitor.fullName}
|
||||
className="w-16 h-16 rounded-full border-4 border-gray-100 dark:border-gray-700"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{visitor.fullName}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{visitor.company}</p>
|
||||
</div>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(visitor.status)}`}
|
||||
>
|
||||
{getStatusLabel(visitor.status)}
|
||||
</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 mb-1">
|
||||
Ziyaret Tarihi
|
||||
</p>
|
||||
<div className="flex items-center gap-1 text-sm text-gray-900 dark:text-white">
|
||||
<HiClock className="w-4 h-4" />
|
||||
{dayjs(visitor.visitDate).format('DD MMM, HH:mm')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{visitor.checkIn && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Giriş</p>
|
||||
<p className="text-sm font-medium text-green-600 dark:text-green-400">
|
||||
{dayjs(visitor.checkIn).format('HH:mm')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{visitor.checkOut && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Çıkış</p>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
{dayjs(visitor.checkOut).format('HH:mm')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{visitor.badgeNumber && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Rozet No</p>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{visitor.badgeNumber}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">İletişim</p>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<HiEnvelope className="w-4 h-4" />
|
||||
{visitor.email}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<HiPhone className="w-4 h-4" />
|
||||
{visitor.phone}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Ev Sahibi</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<img
|
||||
src={visitor.host.avatar}
|
||||
alt={visitor.host.fullName}
|
||||
className="w-8 h-8 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{visitor.host.fullName}
|
||||
</p>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||
{visitor.host.department?.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3">
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mb-1">Ziyaret Amacı</p>
|
||||
<p className="text-sm text-gray-900 dark:text-white">{visitor.purpose}</p>
|
||||
</div>
|
||||
|
||||
{visitor.status === 'scheduled' && (
|
||||
<div className="flex gap-2 mt-4">
|
||||
<button
|
||||
onClick={() => handleCheckIn(visitor.id)}
|
||||
className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors text-sm"
|
||||
>
|
||||
<HiCheckCircle className="w-4 h-4 inline mr-1" />
|
||||
Giriş Yaptır
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleCancel(visitor.id)}
|
||||
className="px-4 py-2 border border-red-600 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors text-sm"
|
||||
>
|
||||
İptal Et
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{visitor.status === 'checked-in' && (
|
||||
<button
|
||||
onClick={() => handleCheckOut(visitor.id)}
|
||||
className="mt-4 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors text-sm"
|
||||
>
|
||||
Çıkış Yaptır
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* New Visitor Modal */}
|
||||
<AnimatePresence>
|
||||
{showNewVisitor && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={() => setShowNewVisitor(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">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Yeni Ziyaretçi Kaydı
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowNewVisitor(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 className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Ad Soyad *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ziyaretçi adı"
|
||||
className="w-full px-4 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">
|
||||
Şirket *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Şirket adı"
|
||||
className="w-full px-4 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 className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
E-posta *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="email@example.com"
|
||||
className="w-full px-4 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">
|
||||
Telefon *
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="+90 5XX XXX XX XX"
|
||||
className="w-full px-4 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">
|
||||
Ziyaret Tarihi ve Saati *
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full px-4 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">
|
||||
Ev Sahibi (Personel) *
|
||||
</label>
|
||||
<select className="w-full px-4 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>Ahmet Yılmaz - Yazılım Geliştirme</option>
|
||||
<option>Zeynep Kaya - İnsan Kaynakları</option>
|
||||
<option>Mehmet Demir - Yazılım Geliştirme</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Ziyaret Amacı *
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
placeholder="Ziyaret amacını açıklayın"
|
||||
className="w-full px-4 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 className="flex gap-3 pt-4">
|
||||
<button
|
||||
onClick={() => setShowNewVisitor(false)}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
|
||||
Ziyaretçi Kaydet
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default VisitorsModule
|
||||
195
ui/src/views/intranet/modals/AnnouncementDetailModal.tsx
Normal file
195
ui/src/views/intranet/modals/AnnouncementDetailModal.tsx
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { FaTimes, FaEye, FaClipboard } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { Announcement } from '../../../mocks/mockIntranetData'
|
||||
|
||||
interface AnnouncementDetailModalProps {
|
||||
announcement: Announcement
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const AnnouncementDetailModal: React.FC<AnnouncementDetailModalProps> = ({ announcement, onClose }) => {
|
||||
const getCategoryColor = (category: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
general: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
|
||||
hr: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
|
||||
it: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
|
||||
event: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
||||
urgent: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
|
||||
}
|
||||
return colors[category] || colors.general
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 overflow-y-auto">
|
||||
<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-3xl w-full"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span
|
||||
className={`px-3 py-1 text-xs font-medium rounded-full ${getCategoryColor(announcement.category)}`}
|
||||
>
|
||||
{announcement.category === 'general' && '📢 Genel'}
|
||||
{announcement.category === 'hr' && '👥 İnsan Kaynakları'}
|
||||
{announcement.category === 'it' && '💻 Bilgi Teknolojileri'}
|
||||
{announcement.category === 'event' && '🎉 Etkinlik'}
|
||||
{announcement.category === 'urgent' && '🚨 Acil'}
|
||||
</span>
|
||||
{announcement.isPinned && (
|
||||
<span className="text-yellow-500 text-sm">📌 Sabitlenmiş</span>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{announcement.title}
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<FaTimes className="w-6 h-6 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Author Info */}
|
||||
<div className="flex items-center gap-3 mt-4">
|
||||
<img
|
||||
src={announcement.author.avatar}
|
||||
alt={announcement.author.fullName}
|
||||
className="w-12 h-12 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900 dark:text-white">
|
||||
{announcement.author.fullName}
|
||||
</p>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
<span>
|
||||
{dayjs(announcement.publishDate).format('DD MMMM YYYY, HH:mm')}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<FaEye className="w-4 h-4" />
|
||||
{announcement.viewCount} görüntülenme
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 max-h-[60vh] overflow-y-auto">
|
||||
{/* Image if exists */}
|
||||
{announcement.imageUrl && (
|
||||
<img
|
||||
src={announcement.imageUrl}
|
||||
alt={announcement.title}
|
||||
className="w-full rounded-lg mb-6"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Full Content */}
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none">
|
||||
<p className="text-gray-700 dark:text-gray-300 whitespace-pre-line">
|
||||
{announcement.content}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
{announcement.attachments &&
|
||||
announcement.attachments.length > 0 && (
|
||||
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
|
||||
<FaClipboard className="w-5 h-5" />
|
||||
Ekler ({announcement.attachments.length})
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{announcement.attachments.map((attachment, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={attachment.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<FaClipboard className="w-5 h-5 text-gray-400" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
{attachment.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{attachment.size}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-sm text-blue-600 dark:text-blue-400">
|
||||
İndir
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Departments */}
|
||||
{announcement.departments &&
|
||||
announcement.departments.length > 0 && (
|
||||
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
|
||||
Hedef Departmanlar
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{announcement.departments.map((dept, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm rounded-full"
|
||||
>
|
||||
{dept}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Expiry Date */}
|
||||
{announcement.expiryDate && (
|
||||
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
<span className="font-medium">Son Geçerlilik Tarihi:</span>{' '}
|
||||
{dayjs(announcement.expiryDate).format('DD MMMM YYYY')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Kapat
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AnnouncementDetailModal
|
||||
135
ui/src/views/intranet/modals/ExpenseRequestModal.tsx
Normal file
135
ui/src/views/intranet/modals/ExpenseRequestModal.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { FaTimes } from 'react-icons/fa'
|
||||
|
||||
interface ExpenseRequestModalProps {
|
||||
onClose: () => void
|
||||
onSubmit: () => void
|
||||
}
|
||||
|
||||
const ExpenseRequestModal: React.FC<ExpenseRequestModalProps> = ({ onClose, onSubmit }) => {
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<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-lg w-full max-h-[90vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<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 z-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Yeni Harcama Talebi
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<FaTimes className="w-5 h-5 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
onSubmit()
|
||||
}}
|
||||
className="p-6 space-y-4"
|
||||
>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Harcama Kategorisi *
|
||||
</label>
|
||||
<select
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Seçiniz</option>
|
||||
<option value="travel">✈️ Seyahat</option>
|
||||
<option value="meal">🍽️ Yemek</option>
|
||||
<option value="accommodation">🏨 Konaklama</option>
|
||||
<option value="transport">🚗 Ulaşım</option>
|
||||
<option value="other">📋 Diğer</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Açıklama *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="Harcama açıklaması..."
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</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">
|
||||
Tutar (₺) *
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
required
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Tarih *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Not
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
placeholder="Ek bilgi (opsiyonel)..."
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Gönder
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExpenseRequestModal
|
||||
120
ui/src/views/intranet/modals/LeaveRequestModal.tsx
Normal file
120
ui/src/views/intranet/modals/LeaveRequestModal.tsx
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { FaTimes } from 'react-icons/fa'
|
||||
|
||||
interface LeaveRequestModalProps {
|
||||
onClose: () => void
|
||||
onSubmit: () => void
|
||||
}
|
||||
|
||||
const LeaveRequestModal: React.FC<LeaveRequestModalProps> = ({ onClose, onSubmit }) => {
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<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-lg w-full max-h-[90vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<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 z-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Yeni İzin Talebi
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<FaTimes className="w-5 h-5 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
onSubmit()
|
||||
}}
|
||||
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
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Seçiniz</option>
|
||||
<option value="annual">🏖️ Yıllık İzin</option>
|
||||
<option value="sick">🏥 Hastalık İzni</option>
|
||||
<option value="unpaid">💼 Ücretsiz İzin</option>
|
||||
<option value="other">📋 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"
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Bitiş Tarihi *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Açıklama *
|
||||
</label>
|
||||
<textarea
|
||||
required
|
||||
rows={3}
|
||||
placeholder="İzin sebebinizi yazınız..."
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Gönder
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default LeaveRequestModal
|
||||
115
ui/src/views/intranet/modals/OvertimeRequestModal.tsx
Normal file
115
ui/src/views/intranet/modals/OvertimeRequestModal.tsx
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { FaTimes } from 'react-icons/fa'
|
||||
|
||||
interface OvertimeRequestModalProps {
|
||||
onClose: () => void
|
||||
onSubmit: () => void
|
||||
}
|
||||
|
||||
const OvertimeRequestModal: React.FC<OvertimeRequestModalProps> = ({ onClose, onSubmit }) => {
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<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-lg w-full max-h-[90vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<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 z-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Yeni Mesai Talebi
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<FaTimes className="w-5 h-5 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
onSubmit()
|
||||
}}
|
||||
className="p-6 space-y-4"
|
||||
>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Mesai Tarihi *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</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ıç Saati *
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Bitiş Saati *
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Açıklama *
|
||||
</label>
|
||||
<textarea
|
||||
required
|
||||
rows={3}
|
||||
placeholder="Mesai sebebinizi yazınız..."
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Gönder
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default OvertimeRequestModal
|
||||
160
ui/src/views/intranet/modals/ReservationRequestModal.tsx
Normal file
160
ui/src/views/intranet/modals/ReservationRequestModal.tsx
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { FaTimes } from 'react-icons/fa'
|
||||
|
||||
interface ReservationRequestModalProps {
|
||||
onClose: () => void
|
||||
onSubmit: () => void
|
||||
}
|
||||
|
||||
const ReservationRequestModal: React.FC<ReservationRequestModalProps> = ({ onClose, onSubmit }) => {
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<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-lg w-full max-h-[90vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<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 z-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Yeni Rezervasyon Talebi
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<FaTimes className="w-5 h-5 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
onSubmit()
|
||||
}}
|
||||
className="p-6 space-y-4"
|
||||
>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Rezervasyon Türü *
|
||||
</label>
|
||||
<select
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Seçiniz</option>
|
||||
<option value="room">🏢 Toplantı Odası</option>
|
||||
<option value="vehicle">🚗 Şirket Aracı</option>
|
||||
<option value="equipment">⚙️ Ekipman</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Kaynak Adı *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="Örn: Toplantı Salonu A, Şirket Aracı - Plaka, Kamera Seti..."
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</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="datetime-local"
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Bitiş Tarihi *
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Amaç *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="Rezervasyon amacını belirtiniz..."
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Katılımcı Sayısı
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
placeholder="Toplantı odası için katılımcı sayısı (opsiyonel)"
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Notlar
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
placeholder="Ek bilgi veya özel istekler (opsiyonel)..."
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3">
|
||||
<p className="text-sm text-blue-700 dark:text-blue-300">
|
||||
ℹ️ Rezervasyon talebiniz yönetici onayına sunulacaktır.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Gönder
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReservationRequestModal
|
||||
141
ui/src/views/intranet/modals/SurveyModal.tsx
Normal file
141
ui/src/views/intranet/modals/SurveyModal.tsx
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { FaTimes } from 'react-icons/fa'
|
||||
import { Survey } from '../../../mocks/mockIntranetData'
|
||||
|
||||
interface SurveyModalProps {
|
||||
survey: Survey
|
||||
onClose: () => void
|
||||
onSubmit: () => void
|
||||
}
|
||||
|
||||
const SurveyModal: React.FC<SurveyModalProps> = ({ survey, onClose, onSubmit }) => {
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<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"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<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 z-10">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
{survey.title}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
{survey.description}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<FaTimes className="w-5 h-5 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
onSubmit()
|
||||
}}
|
||||
className="p-6 space-y-6"
|
||||
>
|
||||
{/* Örnek Anket Soruları */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
1. Genel memnuniyet düzeyiniz nedir? *
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
{[1, 2, 3, 4, 5].map((rating) => (
|
||||
<label
|
||||
key={rating}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
>
|
||||
<input type="radio" name="rating" value={rating} required />
|
||||
<span className="text-sm text-gray-900 dark:text-white">{rating}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
2. Hangi departmanda çalışıyorsunuz? *
|
||||
</label>
|
||||
<select
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Seçiniz</option>
|
||||
<option value="it">Bilgi Teknolojileri</option>
|
||||
<option value="hr">İnsan Kaynakları</option>
|
||||
<option value="finance">Finans</option>
|
||||
<option value="sales">Satış</option>
|
||||
<option value="marketing">Pazarlama</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
3. Görüş ve önerileriniz
|
||||
</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
placeholder="Yorumlarınızı buraya yazabilirsiniz..."
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!survey.isAnonymous && (
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3">
|
||||
<p className="text-sm text-blue-700 dark:text-blue-300">
|
||||
ℹ️ Bu anket isim belirtilerek doldurulmaktadır. Yanıtlarınız
|
||||
kaydedilecektir.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{survey.isAnonymous && (
|
||||
<div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-3">
|
||||
<p className="text-sm text-green-700 dark:text-green-300">
|
||||
✅ Bu anket anonimdir. Kimlik bilgileriniz kaydedilmeyecektir.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Anketi Gönder
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SurveyModal
|
||||
59
ui/src/views/intranet/widgets/ActiveReservations.tsx
Normal file
59
ui/src/views/intranet/widgets/ActiveReservations.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import React from 'react'
|
||||
import { FaKey, FaPlus } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockReservations } from '../../../mocks/mockIntranetData'
|
||||
|
||||
interface ActiveReservationsProps {
|
||||
onNewReservation: () => void
|
||||
}
|
||||
|
||||
const ActiveReservations: React.FC<ActiveReservationsProps> = ({ onNewReservation }) => {
|
||||
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">
|
||||
<FaKey className="w-5 h-5" />
|
||||
Aktif Rezervasyonlar
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
{mockReservations
|
||||
.filter((r) => r.status === 'approved')
|
||||
.slice(0, 3)
|
||||
.map((reservation) => (
|
||||
<div
|
||||
key={reservation.id}
|
||||
className="p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-1">
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{reservation.resourceName}
|
||||
</h4>
|
||||
<span className="text-xs px-2 py-1 bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300 rounded-full">
|
||||
{reservation.type === 'room' ? '🏢' : reservation.type === 'vehicle' ? '🚗' : '⚙️'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||
{dayjs(reservation.startDate).format('DD MMM HH:mm')} - {dayjs(reservation.endDate).format('HH:mm')}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
{mockReservations.filter((r) => r.status === 'approved').length === 0 && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
Aktif rezervasyon yok
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={onNewReservation}
|
||||
className="w-full mt-3 px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
Yeni Rezervasyon
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActiveReservations
|
||||
58
ui/src/views/intranet/widgets/ActiveSurveys.tsx
Normal file
58
ui/src/views/intranet/widgets/ActiveSurveys.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React from 'react'
|
||||
import { FaClipboardCheck } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockSurveys, Survey } from '../../../mocks/mockIntranetData'
|
||||
|
||||
interface ActiveSurveysProps {
|
||||
onTakeSurvey: (survey: Survey) => void
|
||||
}
|
||||
|
||||
const ActiveSurveys: React.FC<ActiveSurveysProps> = ({ onTakeSurvey }) => {
|
||||
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">
|
||||
<FaClipboardCheck className="w-5 h-5" />
|
||||
Aktif Anketler
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
{mockSurveys
|
||||
.filter((s) => s.status === 'active')
|
||||
.slice(0, 3)
|
||||
.map((survey) => (
|
||||
<div
|
||||
key={survey.id}
|
||||
onClick={() => onTakeSurvey(survey)}
|
||||
className="p-3 rounded-lg bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 hover:bg-purple-100 dark:hover:bg-purple-900/30 cursor-pointer transition-colors"
|
||||
>
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white mb-1">
|
||||
{survey.title}
|
||||
</h4>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
{survey.totalQuestions} soru
|
||||
</span>
|
||||
<span className="text-purple-600 dark:text-purple-400 font-medium">
|
||||
{survey.responses} yanıt
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Son tarih: {dayjs(survey.deadline).format('DD MMM')}
|
||||
</p>
|
||||
<button className="mt-2 w-full px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-xs rounded-md transition-colors">
|
||||
Anketi Doldur
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{mockSurveys.filter((s) => s.status === 'active').length === 0 && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
Aktif anket yok
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActiveSurveys
|
||||
74
ui/src/views/intranet/widgets/ExpenseManagement.tsx
Normal file
74
ui/src/views/intranet/widgets/ExpenseManagement.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import React from 'react'
|
||||
import { FaDollarSign, FaPlus } from 'react-icons/fa'
|
||||
import { mockExpenseRequests } from '../../../mocks/mockIntranetData'
|
||||
|
||||
interface ExpenseManagementProps {
|
||||
onNewExpense: () => void
|
||||
}
|
||||
|
||||
const ExpenseManagement: React.FC<ExpenseManagementProps> = ({ onNewExpense }) => {
|
||||
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">
|
||||
<FaDollarSign className="w-5 h-5" />
|
||||
Harcama Yönetimi
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
{/* Harcama özeti */}
|
||||
<div className="p-3 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg border border-emerald-200 dark:border-emerald-800 mb-4">
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">Bu Ay Toplam</p>
|
||||
<p className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">₺2,370</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">₺2,050 onaylandı</p>
|
||||
</div>
|
||||
|
||||
{/* Son harcama talepleri */}
|
||||
<div className="space-y-2">
|
||||
{mockExpenseRequests.slice(0, 3).map((expense) => (
|
||||
<div
|
||||
key={expense.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">
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{expense.category === 'travel' ? '✈️' :
|
||||
expense.category === 'meal' ? '🍽️' :
|
||||
expense.category === 'accommodation' ? '🏨' :
|
||||
expense.category === 'transport' ? '🚗' : '📋'} {expense.description}
|
||||
</h4>
|
||||
<p className="text-xs font-semibold text-emerald-600 dark:text-emerald-400 mt-1">
|
||||
₺{expense.amount.toLocaleString('tr-TR')}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
className={`text-xs px-2 py-1 rounded-full ${
|
||||
expense.status === 'approved'
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
|
||||
: expense.status === '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'
|
||||
}`}
|
||||
>
|
||||
{expense.status === 'approved' ? 'Onaylandı' :
|
||||
expense.status === 'pending' ? 'Bekliyor' : 'Reddedildi'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onNewExpense}
|
||||
className="w-full mt-3 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm rounded-lg transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
Yeni Harcama Talebi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExpenseManagement
|
||||
84
ui/src/views/intranet/widgets/ImportantAnnouncements.tsx
Normal file
84
ui/src/views/intranet/widgets/ImportantAnnouncements.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import React from 'react'
|
||||
import { FaBell, FaEye } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockAnnouncements, Announcement } from '../../../mocks/mockIntranetData'
|
||||
|
||||
interface ImportantAnnouncementsProps {
|
||||
onAnnouncementClick: (announcement: Announcement) => void
|
||||
}
|
||||
|
||||
const ImportantAnnouncements: React.FC<ImportantAnnouncementsProps> = ({ onAnnouncementClick }) => {
|
||||
const pinnedAnnouncements = mockAnnouncements.filter((a) => a.isPinned).slice(0, 3)
|
||||
|
||||
const getCategoryColor = (category: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
general: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
|
||||
hr: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
|
||||
it: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
|
||||
event: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
||||
urgent: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
|
||||
}
|
||||
return colors[category] || colors.general
|
||||
}
|
||||
|
||||
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">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<FaBell className="w-5 h-5" />
|
||||
Önemli Duyurular
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{pinnedAnnouncements.map((announcement) => (
|
||||
<div
|
||||
key={announcement.id}
|
||||
onClick={() => onAnnouncementClick(announcement)}
|
||||
className="p-6 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<img
|
||||
src={announcement.author.avatar}
|
||||
alt={announcement.author.fullName}
|
||||
className="w-10 h-10 rounded-full"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="text-base font-semibold text-gray-900 dark:text-white">
|
||||
{announcement.title}
|
||||
</h3>
|
||||
<span
|
||||
className={`px-2 py-1 text-xs rounded-full ${getCategoryColor(announcement.category)}`}
|
||||
>
|
||||
{announcement.category === 'general' && 'Genel'}
|
||||
{announcement.category === 'hr' && 'İK'}
|
||||
{announcement.category === 'it' && 'IT'}
|
||||
{announcement.category === 'event' && 'Etkinlik'}
|
||||
{announcement.category === 'urgent' && 'Acil'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
|
||||
{announcement.excerpt}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-3 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>{announcement.author.fullName}</span>
|
||||
<span>•</span>
|
||||
<span>{dayjs(announcement.publishDate).fromNow()}</span>
|
||||
<span>•</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<FaEye className="w-3 h-3" />
|
||||
{announcement.viewCount}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ImportantAnnouncements
|
||||
78
ui/src/views/intranet/widgets/LeaveManagement.tsx
Normal file
78
ui/src/views/intranet/widgets/LeaveManagement.tsx
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import React from 'react'
|
||||
import { FaCalendarAlt, FaPlus } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockLeaveRequests } from '../../../mocks/mockIntranetData'
|
||||
import { LeaveStatusEnum, LeaveTypeEnum } from '../../../types/hr'
|
||||
|
||||
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">
|
||||
{mockLeaveRequests.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">
|
||||
{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
|
||||
71
ui/src/views/intranet/widgets/OvertimeManagement.tsx
Normal file
71
ui/src/views/intranet/widgets/OvertimeManagement.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
import React from 'react'
|
||||
import { FaClock, FaPlus } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockOvertimeRequests } from '../../../mocks/mockIntranetData'
|
||||
import { LeaveStatusEnum } from '../../../types/hr'
|
||||
|
||||
interface OvertimeManagementProps {
|
||||
onNewOvertime: () => void
|
||||
}
|
||||
|
||||
const OvertimeManagement: React.FC<OvertimeManagementProps> = ({ onNewOvertime }) => {
|
||||
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">
|
||||
<FaClock className="w-5 h-5" />
|
||||
Mesai Yönetimi
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
{/* Mesai özeti */}
|
||||
<div className="p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800 mb-4">
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">Bu Ay Toplam</p>
|
||||
<p className="text-2xl font-bold text-orange-600 dark:text-orange-400">24 saat</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">20 onaylandı, 4 bekliyor</p>
|
||||
</div>
|
||||
|
||||
{/* Son mesai talepleri */}
|
||||
<div className="space-y-2">
|
||||
{mockOvertimeRequests.slice(0, 3).map((overtime) => (
|
||||
<div
|
||||
key={overtime.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">
|
||||
⏰ {overtime.totalHours} saat
|
||||
</h4>
|
||||
<span
|
||||
className={`text-xs px-2 py-1 rounded-full ${
|
||||
overtime.status === LeaveStatusEnum.Approved
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
|
||||
: overtime.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'
|
||||
}`}
|
||||
>
|
||||
{overtime.status === LeaveStatusEnum.Approved ? 'Onaylandı' :
|
||||
overtime.status === LeaveStatusEnum.Pending ? 'Bekliyor' : 'Reddedildi'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||
{dayjs(overtime.date).format('DD MMM YYYY')}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onNewOvertime}
|
||||
className="w-full mt-3 px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white text-sm rounded-lg transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaPlus className="w-4 h-4" />
|
||||
Yeni Mesai Talebi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OvertimeManagement
|
||||
75
ui/src/views/intranet/widgets/PriorityTasks.tsx
Normal file
75
ui/src/views/intranet/widgets/PriorityTasks.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
import React from 'react'
|
||||
import { FaChartBar, FaClock, FaUsers } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockTasks } from '../../../mocks/mockIntranetData'
|
||||
|
||||
const PriorityTasks: React.FC = () => {
|
||||
const priorityTasks = mockTasks
|
||||
.filter((t) => t.priority === 'high' || t.priority === 'urgent')
|
||||
.slice(0, 3)
|
||||
|
||||
const getPriorityColor = (priority: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
low: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300',
|
||||
medium: 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300',
|
||||
high: 'bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-300',
|
||||
urgent: 'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-300',
|
||||
}
|
||||
return colors[priority]
|
||||
}
|
||||
|
||||
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">
|
||||
<FaChartBar className="w-5 h-5" />
|
||||
Öncelikli Görevler
|
||||
</h2>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{priorityTasks.map((task) => (
|
||||
<div key={task.id} className="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50">
|
||||
<div className="flex items-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-1 rounded border-gray-300 dark:border-gray-600"
|
||||
checked={task.status === 'done'}
|
||||
readOnly
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{task.title}
|
||||
</h3>
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded ${getPriorityColor(task.priority)}`}
|
||||
>
|
||||
{task.priority === 'urgent' && '🔥 Acil'}
|
||||
{task.priority === 'high' && 'Yüksek'}
|
||||
{task.priority === 'medium' && 'Orta'}
|
||||
{task.priority === 'low' && 'Düşük'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mb-2">
|
||||
{task.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-3 text-xs text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<FaClock className="w-3 h-3" />
|
||||
{dayjs(task.dueDate).format('DD MMM')}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<FaUsers className="w-3 h-3" />
|
||||
{task.assignedTo.length} kişi
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PriorityTasks
|
||||
65
ui/src/views/intranet/widgets/RecentDocuments.tsx
Normal file
65
ui/src/views/intranet/widgets/RecentDocuments.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import React from 'react'
|
||||
import { FaFileAlt, FaDownload } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockDocuments } from '../../../mocks/mockIntranetData'
|
||||
|
||||
const RecentDocuments: React.FC = () => {
|
||||
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">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<FaFileAlt className="w-5 h-5" />
|
||||
Son Dokümanlar
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{mockDocuments.slice(0, 3).map((doc) => (
|
||||
<div
|
||||
key={doc.id}
|
||||
className="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
|
||||
<FaFileAlt className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
{doc.name}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
{doc.category === 'policy' && '📋 Politika'}
|
||||
{doc.category === 'procedure' && '📝 Prosedür'}
|
||||
{doc.category === 'form' && '📄 Form'}
|
||||
{doc.category === 'template' && '📋 Şablon'}
|
||||
{doc.category === 'report' && '📊 Rapor'}
|
||||
{doc.category === 'other' && '📄 Diğer'}
|
||||
<span className="mx-1">•</span>
|
||||
{doc.size}
|
||||
</p>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-2">
|
||||
<span>{dayjs(doc.uploadDate).fromNow()}</span>
|
||||
<span>•</span>
|
||||
<span>{doc.downloadCount} indirme</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
window.open(doc.url, '_blank')
|
||||
}}
|
||||
className="p-2 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-lg transition-colors group"
|
||||
title="İndir"
|
||||
>
|
||||
<FaDownload className="w-5 h-5 text-gray-600 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RecentDocuments
|
||||
116
ui/src/views/intranet/widgets/ShuttleSchedule.tsx
Normal file
116
ui/src/views/intranet/widgets/ShuttleSchedule.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import React from 'react'
|
||||
import { FaTruck } from 'react-icons/fa'
|
||||
import { mockShuttleRoutes } from '../../../mocks/mockIntranetData'
|
||||
|
||||
const ShuttleSchedule: React.FC = () => {
|
||||
const morningShuttles = mockShuttleRoutes.filter((s) => s.type === 'morning')
|
||||
const eveningShuttles = mockShuttleRoutes.filter((s) => s.type === 'evening')
|
||||
|
||||
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">
|
||||
<FaTruck className="w-5 h-5" />
|
||||
Servis Saatleri
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Sabah Servisleri */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
|
||||
🌅 Sabah Servisleri
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{morningShuttles.slice(0, 2).map((shuttle) => (
|
||||
<div
|
||||
key={shuttle.id}
|
||||
className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{shuttle.name}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
{shuttle.route[0]} → {shuttle.route[shuttle.route.length - 1]}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-semibold text-blue-600 dark:text-blue-400">
|
||||
{shuttle.departureTime}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
{shuttle.arrivalTime}
|
||||
</span>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full ${
|
||||
shuttle.available > 5
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
|
||||
: shuttle.available > 0
|
||||
? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300'
|
||||
: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300'
|
||||
}`}
|
||||
>
|
||||
{shuttle.available} yer
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Akşam Servisleri */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
|
||||
🌆 Akşam Servisleri
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{eveningShuttles.slice(0, 2).map((shuttle) => (
|
||||
<div
|
||||
key={shuttle.id}
|
||||
className="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{shuttle.name}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
{shuttle.route[0]} → {shuttle.route[shuttle.route.length - 1]}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-semibold text-purple-600 dark:text-purple-400">
|
||||
{shuttle.departureTime}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
{shuttle.arrivalTime}
|
||||
</span>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full ${
|
||||
shuttle.available > 5
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
|
||||
: shuttle.available > 0
|
||||
? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300'
|
||||
: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300'
|
||||
}`}
|
||||
>
|
||||
{shuttle.available} yer
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ShuttleSchedule
|
||||
54
ui/src/views/intranet/widgets/TodayBirthdays.tsx
Normal file
54
ui/src/views/intranet/widgets/TodayBirthdays.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import React from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockBirthdays } from '../../../mocks/mockIntranetData'
|
||||
|
||||
const TodayBirthdays: React.FC = () => {
|
||||
const todayBirthdays = mockBirthdays.filter((b) => {
|
||||
const birthDate = dayjs(b.date)
|
||||
const today = dayjs()
|
||||
return birthDate.month() === today.month() && birthDate.date() === today.date()
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-br from-pink-50 to-purple-50 dark:from-pink-900/20 dark:to-purple-900/20 rounded-lg shadow-sm border border-pink-200 dark:border-pink-800">
|
||||
<div className="p-6 border-b border-pink-200 dark:border-pink-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
🎂 Bugün Doğanlar
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
{todayBirthdays.length > 0 ? (
|
||||
todayBirthdays.map((birthday, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-3 p-3 bg-white/50 dark:bg-gray-800/50 rounded-lg"
|
||||
>
|
||||
<img
|
||||
src={birthday.employee.avatar}
|
||||
alt={birthday.employee.fullName}
|
||||
className="w-12 h-12 rounded-full border-2 border-pink-300 dark:border-pink-700"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{birthday.employee.fullName}
|
||||
</p>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||
{birthday.age} yaşında 🎉
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
|
||||
{birthday.employee.department?.name || 'Genel'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
Bugün doğan yok
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TodayBirthdays
|
||||
47
ui/src/views/intranet/widgets/TodayEvents.tsx
Normal file
47
ui/src/views/intranet/widgets/TodayEvents.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import React from 'react'
|
||||
import { FaCalendarAlt } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockEvents } from '../../../mocks/mockIntranetData'
|
||||
|
||||
const TodayEvents: React.FC = () => {
|
||||
const todayEvents = mockEvents.filter(
|
||||
(event) => event.isPublished && dayjs(event.date).isSame(dayjs(), 'day'),
|
||||
)
|
||||
|
||||
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" />
|
||||
Bugün
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
{todayEvents.length > 0 ? (
|
||||
todayEvents.map((event) => (
|
||||
<div
|
||||
key={event.id}
|
||||
className="p-3 rounded-lg border-l-4 bg-gray-50 dark:bg-gray-700/50 border-l-blue-500"
|
||||
>
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{event.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
{dayjs(event.date).format('DD MMMM YYYY')} - {event.location}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{event.participants} katılımcı
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
Bugün etkinlik yok
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TodayEvents
|
||||
47
ui/src/views/intranet/widgets/UpcomingEvents.tsx
Normal file
47
ui/src/views/intranet/widgets/UpcomingEvents.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import React from 'react'
|
||||
import { FaCalendarAlt } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockEvents } from '../../../mocks/mockIntranetData'
|
||||
|
||||
const UpcomingEvents: React.FC = () => {
|
||||
const upcomingEvents = mockEvents.filter(
|
||||
(event) =>
|
||||
event.isPublished &&
|
||||
dayjs(event.date).isAfter(dayjs()) &&
|
||||
dayjs(event.date).isBefore(dayjs().add(7, 'day')),
|
||||
)
|
||||
|
||||
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" />
|
||||
Yaklaşan Etkinlikler
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
{upcomingEvents.length > 0 ? (
|
||||
upcomingEvents.slice(0, 3).map((event) => (
|
||||
<div
|
||||
key={event.id}
|
||||
className="p-3 rounded-lg border-l-4 bg-gray-50 dark:bg-gray-700/50 border-l-green-500"
|
||||
>
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{event.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
{dayjs(event.date).format('DD MMMM YYYY')} - {event.location}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
Yaklaşan etkinlik yok
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UpcomingEvents
|
||||
50
ui/src/views/intranet/widgets/UpcomingTrainings.tsx
Normal file
50
ui/src/views/intranet/widgets/UpcomingTrainings.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import React from 'react'
|
||||
import { FaGraduationCap } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { mockTrainings } from '../../../mocks/mockIntranetData'
|
||||
|
||||
const UpcomingTrainings: React.FC = () => {
|
||||
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">
|
||||
<FaGraduationCap className="w-5 h-5" />
|
||||
Yaklaşan Eğitimler
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
{mockTrainings
|
||||
.filter((t) => t.status === 'upcoming')
|
||||
.slice(0, 3)
|
||||
.map((training) => (
|
||||
<div
|
||||
key={training.id}
|
||||
className="p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800"
|
||||
>
|
||||
<h4 className="text-sm font-medium text-gray-900 dark:text-white mb-1">
|
||||
{training.title}
|
||||
</h4>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mb-2">
|
||||
{training.instructor} • {training.duration}
|
||||
</p>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
{dayjs(training.startDate).format('DD MMM')} - {dayjs(training.endDate).format('DD MMM')}
|
||||
</span>
|
||||
<span className="text-blue-600 dark:text-blue-400 font-medium">
|
||||
{training.enrolled}/{training.maxParticipants}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{mockTrainings.filter((t) => t.status === 'upcoming').length === 0 && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
Yaklaşan eğitim yok
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UpcomingTrainings
|
||||
73
ui/src/views/intranet/widgets/WeeklyMenu.tsx
Normal file
73
ui/src/views/intranet/widgets/WeeklyMenu.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import React from 'react'
|
||||
import { FaUtensils } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import isBetween from 'dayjs/plugin/isBetween'
|
||||
import { mockMealMenus } from '../../../mocks/mockIntranetData'
|
||||
|
||||
dayjs.extend(isBetween)
|
||||
|
||||
const WeeklyMenu: React.FC = () => {
|
||||
const weekMenus = mockMealMenus.filter((menu) => {
|
||||
const menuDate = dayjs(menu.date)
|
||||
const today = dayjs()
|
||||
const weekStart = today.startOf('week')
|
||||
const weekEnd = today.endOf('week')
|
||||
return menuDate.isBetween(weekStart, weekEnd, null, '[]')
|
||||
})
|
||||
|
||||
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">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<FaUtensils className="w-5 h-5" />
|
||||
Haftalık Menü
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{weekMenus.map((menu) => {
|
||||
const isToday = dayjs(menu.date).isSame(dayjs(), 'day')
|
||||
return (
|
||||
<div
|
||||
key={menu.id}
|
||||
className={`p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors ${
|
||||
isToday ? 'bg-orange-50 dark:bg-orange-900/20' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
{menu.dayOfWeek}
|
||||
{isToday && (
|
||||
<span className="text-xs bg-orange-500 text-white px-2 py-0.5 rounded-full">
|
||||
Bugün
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{dayjs(menu.date).format('DD MMMM')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{menu.meals[0]?.items.slice(0, 3).map((item, idx) => (
|
||||
<p key={idx} className="text-xs text-gray-600 dark:text-gray-400">
|
||||
• {item}
|
||||
</p>
|
||||
))}
|
||||
{menu.meals[0]?.items.length > 3 && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-500">
|
||||
+{menu.meals[0].items.length - 3} daha...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default WeeklyMenu
|
||||
Loading…
Reference in a new issue