first commit

components/scheduling/DailyScheduleTimeline.tsx

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