69 lines
2.0 KiB
JavaScript
69 lines
2.0 KiB
JavaScript
import { useState,useMemo } from "react";
|
|
import Avatar from "../common/Avatar";
|
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
|
|
|
|
const ExpenseStatusLogs = ({ data }) => {
|
|
const [visibleCount, setVisibleCount] = useState(4);
|
|
|
|
const sortedLogs = useMemo(() => {
|
|
if (!data?.expenseLogs) return [];
|
|
return [...data.expenseLogs].sort(
|
|
(a, b) => new Date(b.updateAt) - new Date(a.updateAt)
|
|
);
|
|
}, [data?.expenseLogs]);
|
|
|
|
const logsToShow = sortedLogs.slice(0, visibleCount);
|
|
|
|
const handleShowMore = () => {
|
|
setVisibleCount((prev) => prev + 4);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="row g-2">
|
|
{logsToShow.map((log) => (
|
|
<div key={log.id} className="col-12 d-flex align-items-start mb-1">
|
|
<Avatar
|
|
size="xs"
|
|
firstName={log.updatedBy.firstName}
|
|
lastName={log.updatedBy.lastName}
|
|
/>
|
|
|
|
<div className="flex-grow-1">
|
|
<div className="text-start">
|
|
<div className="flex">
|
|
<span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
|
|
<small className="text-secondary text-tiny ms-2">
|
|
<em>{log.action}</em>
|
|
</small>
|
|
<span className="text-tiny text-secondary d-block" >
|
|
{formatUTCToLocalTime(log.updateAt,true)}
|
|
</span>
|
|
</div>
|
|
<div className="d-flex align-items-center text-muted small mt-1">
|
|
<span>{log.comment}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{sortedLogs.length > visibleCount && (
|
|
<div className="text-center my-1">
|
|
<button
|
|
className="btn btn-xs btn-outline-primary"
|
|
onClick={handleShowMore}
|
|
>
|
|
Show More
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
|
|
export default ExpenseStatusLogs;
|