113 lines
No EOL
4.1 KiB
TypeScript
113 lines
No EOL
4.1 KiB
TypeScript
import React from 'react'
|
||
import { FaUser, FaUserCheck, FaUserClock } from 'react-icons/fa'
|
||
import dayjs from 'dayjs'
|
||
import { mockVisitors } from '../../../mocks/mockIntranet'
|
||
|
||
const Visitors: React.FC = () => {
|
||
const todayVisitors = mockVisitors.filter((visitor) =>
|
||
dayjs(visitor.visitDate).isSame(dayjs(), 'day')
|
||
)
|
||
|
||
const getStatusIcon = (status: string) => {
|
||
switch (status) {
|
||
case 'checked-in':
|
||
return <FaUserCheck className="w-4 h-4 text-green-600" />
|
||
case 'checked-out':
|
||
return <FaUser className="w-4 h-4 text-gray-600" />
|
||
case 'scheduled':
|
||
return <FaUserClock className="w-4 h-4 text-blue-600" />
|
||
default:
|
||
return <FaUser className="w-4 h-4 text-gray-600" />
|
||
}
|
||
}
|
||
|
||
const getStatusText = (status: string) => {
|
||
switch (status) {
|
||
case 'checked-in':
|
||
return 'Giriş Yaptı'
|
||
case 'checked-out':
|
||
return 'Çıkış Yaptı'
|
||
case 'scheduled':
|
||
return 'Planlandı'
|
||
default:
|
||
return 'Bilinmiyor'
|
||
}
|
||
}
|
||
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case 'checked-in':
|
||
return 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
|
||
case 'checked-out':
|
||
return 'bg-gray-50 dark:bg-gray-900/20 border-gray-200 dark:border-gray-700'
|
||
case 'scheduled':
|
||
return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
|
||
default:
|
||
return 'bg-gray-50 dark:bg-gray-900/20 border-gray-200 dark:border-gray-700'
|
||
}
|
||
}
|
||
|
||
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">
|
||
<FaUser className="w-5 h-5" />
|
||
Bugünkü Ziyaretçiler
|
||
</h2>
|
||
</div>
|
||
<div className="p-4 space-y-3">
|
||
{todayVisitors.length > 0 ? (
|
||
todayVisitors.map((visitor) => (
|
||
<div
|
||
key={visitor.id}
|
||
className={`p-3 rounded-lg border ${getStatusColor(visitor.status)}`}
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<img
|
||
src={visitor.photo}
|
||
alt={visitor.fullName}
|
||
className="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600"
|
||
/>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center justify-between mb-1">
|
||
<h4 className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||
{visitor.fullName}
|
||
</h4>
|
||
<div className="flex items-center gap-1">
|
||
{getStatusIcon(visitor.status)}
|
||
</div>
|
||
</div>
|
||
<p className="text-xs text-gray-600 dark:text-gray-400 truncate">
|
||
{visitor.company}
|
||
</p>
|
||
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
|
||
{visitor.purpose}
|
||
</p>
|
||
<div className="flex items-center justify-between mt-2">
|
||
<span className="text-xs text-gray-500 dark:text-gray-500">
|
||
{dayjs(visitor.visitDate).format('HH:mm')}
|
||
</span>
|
||
<span className="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
|
||
{getStatusText(visitor.status)}
|
||
</span>
|
||
</div>
|
||
{visitor.host && (
|
||
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
|
||
Karşılayan: {visitor.host.fullName}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
||
Bugün ziyaretçi yok
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Visitors |