import {
Avatar,
Box,
Chip,
ListDivider,
ListItem,
ListItemContent,
ListItemDecorator,
Typography,
} from '@mui/joy'
import moment from 'moment'
const HistoryCard = ({ allHistory, performers, historyEntry, index }) => {
function formatTimeDifference(startDate, endDate) {
const diffInMinutes = moment(startDate).diff(endDate, 'minutes')
let timeValue = diffInMinutes
let unit = 'minute'
if (diffInMinutes >= 60) {
const diffInHours = moment(startDate).diff(endDate, 'hours')
timeValue = diffInHours
unit = 'hour'
if (diffInHours >= 24) {
const diffInDays = moment(startDate).diff(endDate, 'days')
timeValue = diffInDays
unit = 'day'
}
}
return `${timeValue} ${unit}${timeValue !== 1 ? 's' : ''}`
}
return (
<>
{' '}
{/* Adjusted spacing and alignment */}
{performers
.find(p => p.userId === historyEntry.completedBy)
?.displayName?.charAt(0) || '?'}
{' '}
{/* Removed vertical margin */}
{moment(historyEntry.completedAt).format('ddd MM/DD/yyyy HH:mm')}
{historyEntry.dueDate &&
historyEntry.completedAt > historyEntry.dueDate
? 'Late'
: 'On Time'}
{
performers.find(p => p.userId === historyEntry.completedBy)
?.displayName
}
{' '}
completed
{historyEntry.completedBy !== historyEntry.assignedTo && (
<>
{', '}
assigned to{' '}
{
performers.find(p => p.userId === historyEntry.assignedTo)
?.displayName
}
>
)}
{historyEntry.dueDate && (
Due: {moment(historyEntry.dueDate).format('ddd MM/DD/yyyy')}
)}
{historyEntry.notes && (
Note: {historyEntry.notes}
)}
{index < allHistory.length - 1 && (
<>
{/* time between two completion: */}
{index < allHistory.length - 1 &&
allHistory[index + 1].completedAt && (
{formatTimeDifference(
historyEntry.completedAt,
allHistory[index + 1].completedAt,
)}{' '}
before
)}
>
)}
>
)
}
export default HistoryCard