79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { FeedingEvent } from '../../types';
|
|
|
|
interface DailyScheduleTimelineProps {
|
|
events: FeedingEvent[];
|
|
}
|
|
|
|
const eventConfig = {
|
|
completed: {
|
|
icon: 'fa-check-circle',
|
|
color: 'text-green-500',
|
|
bg: 'bg-green-100',
|
|
line: 'bg-green-500',
|
|
},
|
|
upcoming: { icon: 'fa-clock', color: 'text-blue-500', bg: 'bg-blue-100', line: 'bg-gray-300' },
|
|
skipped: { icon: 'fa-ban', color: 'text-gray-500', bg: 'bg-gray-100', line: 'bg-gray-300' },
|
|
};
|
|
|
|
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 DailyScheduleTimeline: React.FC<DailyScheduleTimelineProps> = ({ events }) => {
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm">
|
|
<h2 className="text-xl font-bold mb-6">Linimasa Pemberian Pakan Harian</h2>
|
|
<div className="relative pl-5">
|
|
{/* Vertical Line */}
|
|
<div className="absolute left-11 top-0 bottom-0 w-0.5 bg-gray-200"></div>
|
|
|
|
{events.map((event) => {
|
|
const config = eventConfig[event.status];
|
|
const typeInfo = typeConfig[event.type];
|
|
|
|
return (
|
|
<div key={event.id} className="relative flex items-start mb-6">
|
|
{/* Time and Icon */}
|
|
<div className="flex-shrink-0 flex flex-col items-center mr-6 z-10">
|
|
<div
|
|
className={`w-12 h-12 rounded-full flex items-center justify-center ${config.bg}`}
|
|
>
|
|
<i className={`fa-solid ${config.icon} text-2xl ${config.color}`}></i>
|
|
</div>
|
|
<div className="mt-1 font-bold text-gray-700">
|
|
{event.time.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card Details */}
|
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4 w-full">
|
|
<div className="flex justify-between items-center">
|
|
<p className={`font-semibold text-lg ${config.color}`}>
|
|
{event.status.charAt(0).toUpperCase() + event.status.slice(1)}
|
|
</p>
|
|
<div
|
|
className={`flex items-center text-sm font-medium ${typeInfo.color}`}
|
|
title={event.type}
|
|
>
|
|
<i className={`fa-solid ${typeInfo.icon} mr-2`}></i>
|
|
<span>{event.type}</span>
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
Status jadwal untuk pukul{' '}
|
|
{event.time.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DailyScheduleTimeline;
|