313 lines
13 KiB
TypeScript
313 lines
13 KiB
TypeScript
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="max-w-7xl mx-auto space-y-6">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">🔑 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
|