59 lines
2.7 KiB
TypeScript
59 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { FeedScheduleRecommendation } from '../../types';
|
|
|
|
interface ScheduleOverviewProps {
|
|
recommendation: FeedScheduleRecommendation;
|
|
}
|
|
|
|
const ScheduleOverview: React.FC<ScheduleOverviewProps> = ({ recommendation }) => {
|
|
const { nextFeedingTime, lastFeedingTime, reason } = recommendation;
|
|
|
|
const formatTime = (date: Date) =>
|
|
date.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
|
|
const formatDate = (date: Date) =>
|
|
date.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long' });
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm border border-red-200 bg-red-50/50">
|
|
<h2 className="text-xl font-bold text-gray-800 mb-4">Rekomendasi Jadwal AI</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex-shrink-0">
|
|
<i className="fa-solid fa-clock text-4xl text-red-500"></i>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-gray-600">Jadwal Pakan Berikutnya</p>
|
|
<p className="text-3xl font-bold text-red-600">{formatTime(nextFeedingTime)}</p>
|
|
<p className="text-sm text-gray-500">{formatDate(nextFeedingTime)}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex-shrink-0">
|
|
<i className="fa-solid fa-check-circle text-4xl text-green-500"></i>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-gray-600">Pemberian Pakan Terakhir</p>
|
|
<p className="text-2xl font-bold text-gray-700">{formatTime(lastFeedingTime)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 pt-4 border-t border-red-200">
|
|
<p className="text-sm font-semibold text-gray-600 flex items-center">
|
|
<i className="fa-solid fa-lightbulb text-yellow-500 mr-2"></i> Alasan Rekomendasi AI:
|
|
</p>
|
|
<p className="mt-1 text-sm text-gray-700 italic">"{reason}"</p>
|
|
</div>
|
|
<div className="mt-6 pt-4 border-t border-red-200 flex items-center justify-end space-x-3">
|
|
<button className="px-4 py-2 bg-white border border-gray-300 text-gray-800 text-sm font-semibold rounded-lg hover:bg-gray-100 transition shadow-sm">
|
|
<i className="fa-solid fa-clock-rotate-left mr-2"></i> Tunda 30 Menit
|
|
</button>
|
|
<button className="px-4 py-2 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-700 transition shadow-sm">
|
|
<i className="fa-solid fa-play-circle mr-2"></i> Mulai Sekarang
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ScheduleOverview;
|