60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
|
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
|