first commit

components/feedSack/FeedActivityLog.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FeedSackLogEntry } from '../../types.ts';
+import { SackIcon } from '../icons/Icons.tsx';
+
+interface FeedActivityLogProps {
+  data: FeedSackLogEntry[];
+}
+
+const FeedActivityLog: React.FC<FeedActivityLogProps> = ({ data }) => {
+  const formatDate = (date: Date) => {
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+
+    if (date.toDateString() === today.toDateString()) {
+      return 'Hari Ini';
+    }
+    if (date.toDateString() === yesterday.toDateString()) {
+      return 'Kemarin';
+    }
+    return date.toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
+  };
+
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-sm">
+      <h2 className="text-xl font-bold mb-4">Aktivitas Terbaru</h2>
+      {data.length > 0 ? (
+        <div className="space-y-3 max-h-96 overflow-y-auto pr-2">
+          {data.slice(0, 15).map((log) => (
+            <div
+              key={log.id}
+              className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              <div
+                className={`flex items-center justify-center h-10 w-10 rounded-lg ${log.type === 'inbound' ? 'bg-green-100 text-green-600' : 'bg-orange-100 text-orange-600'}`}
+              >
+                <i
+                  className={`fa-solid ${log.type === 'inbound' ? 'fa-arrow-down' : 'fa-arrow-up'} text-lg`}
+                ></i>
+              </div>
+              <div className="flex-grow min-w-0">
+                <p className="font-semibold text-gray-800 text-sm">
+                  {log.type === 'inbound' ? 'Karung Masuk Terdeteksi' : 'Karung Dituang Terdeteksi'}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {log.count} karung di {log.location}
+                </p>
+              </div>
+              <div className="flex-shrink-0">
+                <span className="inline-block px-2.5 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded-full">
+                  {formatDate(log.timestamp)}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-10">
+          <SackIcon className="text-5xl text-gray-300 mx-auto" />
+          <p className="mt-3 text-gray-500">Tidak ada aktivitas terdeteksi.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FeedActivityLog;