49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
import { useState, useMemo } from "react";
|
|
import Avatar from "../common/Avatar";
|
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
import Timeline from "../common/TimeLine";
|
|
import moment from "moment";
|
|
import { getColorNameFromHex } from "../../utils/appUtils";
|
|
const ExpenseStatusLogs = ({ data }) => {
|
|
|
|
|
|
const sortedLogs = useMemo(() => {
|
|
if (!data?.expenseLogs) return [];
|
|
return [...data.expenseLogs].sort(
|
|
(a, b) => new Date(b.updateAt) - new Date(a.updateAt)
|
|
);
|
|
}, [data?.expenseLogs]);
|
|
|
|
const timelineData = useMemo(() => {
|
|
return sortedLogs.map((log, index) => ({
|
|
id: index + 1,
|
|
title: log.action || "Status Updated",
|
|
description: log.comment || "",
|
|
timeAgo: log.updateAt,
|
|
color: getColorNameFromHex(log.nextStatus?.color) || "primary",
|
|
users: log.updatedBy
|
|
? [
|
|
{
|
|
firstName: log.updatedBy.firstName || "",
|
|
lastName: log?.updatedBy?.lastName || "",
|
|
role: log.updatedBy.jobRoleName || "",
|
|
avatar: log.updatedBy.photo,
|
|
},
|
|
]
|
|
: [],
|
|
}));
|
|
}, [sortedLogs]);
|
|
|
|
const handleShowMore = () => {
|
|
setVisibleCount((prev) => prev + 4);
|
|
};
|
|
|
|
return (
|
|
<div className="page-min-h overflow-auto py-1">
|
|
<Timeline items={timelineData} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExpenseStatusLogs;
|