68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
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;
|