88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { FeedingEvent } from '../../types';
|
|
|
|
interface DailyEventsListProps {
|
|
selectedDate: Date;
|
|
events: FeedingEvent[];
|
|
onEditEvent: (event: FeedingEvent) => void;
|
|
}
|
|
|
|
const eventConfig = {
|
|
completed: { icon: 'fa-check-circle', color: 'text-green-500' },
|
|
upcoming: { icon: 'fa-clock', color: 'text-blue-500' },
|
|
skipped: { icon: 'fa-ban', color: 'text-gray-500' },
|
|
};
|
|
|
|
const typeConfig = {
|
|
'AI Recommended': { icon: 'fa-robot', color: 'text-purple-600' },
|
|
Manual: { icon: 'fa-user', color: 'text-gray-600' },
|
|
Skipped: { icon: 'fa-forward', color: 'text-gray-500' },
|
|
};
|
|
|
|
const DailyEventsList: React.FC<DailyEventsListProps> = ({ selectedDate, events, onEditEvent }) => {
|
|
const dailyEvents = useMemo(() => {
|
|
return events
|
|
.filter(
|
|
(event) =>
|
|
event.time.getFullYear() === selectedDate.getFullYear() &&
|
|
event.time.getMonth() === selectedDate.getMonth() &&
|
|
event.time.getDate() === selectedDate.getDate()
|
|
)
|
|
.sort((a, b) => a.time.getTime() - b.time.getTime());
|
|
}, [selectedDate, events]);
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm h-full flex flex-col">
|
|
<h2 className="text-xl font-bold mb-4">
|
|
Jadwal untuk{' '}
|
|
<span className="text-red-600">
|
|
{selectedDate.toLocaleDateString('id-ID', { day: 'numeric', month: 'long' })}
|
|
</span>
|
|
</h2>
|
|
{dailyEvents.length > 0 ? (
|
|
<div className="space-y-4 overflow-y-auto pr-2 flex-grow">
|
|
{dailyEvents.map((event) => {
|
|
const statusInfo = eventConfig[event.status];
|
|
const typeInfo = typeConfig[event.type];
|
|
return (
|
|
<div
|
|
key={event.id}
|
|
className="p-3 bg-gray-50 border border-gray-200 rounded-lg flex items-center space-x-4"
|
|
>
|
|
<div className={`text-2xl w-8 text-center ${statusInfo.color}`}>
|
|
<i className={`fa-solid ${statusInfo.icon}`}></i>
|
|
</div>
|
|
<div className="flex-grow">
|
|
<p className="font-bold text-gray-800">
|
|
Pukul{' '}
|
|
{event.time.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}
|
|
</p>
|
|
<p className="text-sm text-gray-600 flex items-center space-x-2">
|
|
<span className={typeInfo.color}>
|
|
<i className={`fa-solid ${typeInfo.icon}`}></i> {event.type}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => onEditEvent(event)}
|
|
className="text-gray-500 hover:text-blue-600 text-lg"
|
|
>
|
|
<i className="fa-solid fa-pencil"></i>
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="flex-grow flex flex-col items-center justify-center text-center text-gray-500">
|
|
<i className="fa-solid fa-calendar-check text-4xl text-gray-300"></i>
|
|
<p className="mt-3 font-semibold">Tidak ada jadwal pakan</p>
|
|
<p className="text-sm">Tidak ada jadwal pemberian pakan untuk tanggal ini.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DailyEventsList;
|