first commit

components/scheduling/DailyEventsList.tsx

@@ -0,0 +1,87 @@
+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;