60 lines
2.0 KiB
JavaScript

import React from "react";
import Avatar from "../../common/Avatar";
import { formatUTCToLocalTime } from "../../../utils/dateUtils";
const JobStatusLog = ({ data }) => {
return (
<div className="card shadow-none p-0">
<div className="card-body p-0">
<div className="list-group">
{data?.map((item) => (
<div
key={item.id}
className="list-group-item border-0 border-bottom p-1"
>
<div className="d-flex justify-content-between">
<div>
<span className="fw-semibold">
{item.nextStatus?.displayName ??
item.status?.displayName ??
"Status"}
</span>
</div>
<span className="text-secondary">
{formatUTCToLocalTime(item?.updatedAt,true)}
</span>
</div>
<div className="d-flex align-items-start mt-2 mx-0 px-0">
<Avatar
firstName={item.updatedBy?.firstName}
lastName={item.updatedBy?.lastName}
/>
<div className="">
<div className="d-flex flex-row gap-3">
<span className="fw-semibold">
{item.updatedBy?.firstName} {item.updatedBy?.lastName}
</span>
<span className="text-secondary">
{/* <em>{formatUTCToLocalTime(item?.createdAt, true)}</em> */}
</span>
</div>
<div className="text-muted text-secondary">
{item?.updatedBy?.jobRoleName}
</div>
<div className="text-wrap">
<p className="mb-1 mt-2 text-muted">{item.comment}</p>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default JobStatusLog;