43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
import React, { useMemo } from "react";
|
|
import Timeline from "../../common/Timeline";
|
|
import { getColorNameFromHex } from "../../../utils/appUtils";
|
|
|
|
const JobStatusLog = ({ data }) => {
|
|
// Prepare timeline items
|
|
const timelineData = useMemo(() => {
|
|
if (!data) return [];
|
|
return data
|
|
.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
|
|
.map((log) => ({
|
|
id: log.id,
|
|
title: log.nextStatus?.displayName || log.status?.displayName || "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 || null,
|
|
},
|
|
]
|
|
: [],
|
|
}));
|
|
}, [data]);
|
|
|
|
return (
|
|
<div className="card shadow-none p-0">
|
|
<div className="card-body p-3">
|
|
<div className="timeline-container overflow-auto" style={{ maxHeight: "400px" }}>
|
|
<Timeline items={timelineData} transparent={true} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default JobStatusLog;
|