53 lines
1.6 KiB
JavaScript
53 lines
1.6 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 PaymentStatusLogs = ({ data }) => {
|
|
const sortedLogs = useMemo(() => {
|
|
if (!data?.updateLogs) return [];
|
|
return [...data.updateLogs].sort(
|
|
(a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
|
|
);
|
|
}, [data?.updateLogs]);
|
|
|
|
const timelineData = useMemo(() => {
|
|
return sortedLogs.map((log, index) => ({
|
|
id: log.id,
|
|
title: log.nextStatus?.name || "Status Updated",
|
|
description: log.nextStatus?.description || "",
|
|
timeAgo: log.updatedAt,
|
|
color: getColorNameFromHex(log.nextStatus?.color) || "primary",
|
|
userComment: log.comment,
|
|
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="">
|
|
<div className="d-flex mb-1 pt-10">
|
|
<i className="bx bx-time-five me-2 "></i>{" "}
|
|
<p className="fw-semibold">TimeLine</p>
|
|
</div>
|
|
<div className="row h-74 overflow-auto px-3">
|
|
<Timeline items={timelineData} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PaymentStatusLogs;
|