|  | @@ -4,61 +4,56 @@ function Timeline({ data, noFile = false }) {
 | 
	
		
			
				|  |  |  	const date = data && [...new Set(data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];
 | 
	
		
			
				|  |  |  	return (
 | 
	
		
			
				|  |  |  		<ul className="timeline-alt">
 | 
	
		
			
				|  |  | -			{data &&
 | 
	
		
			
				|  |  | -				date.map((value) => (
 | 
	
		
			
				|  |  | -					<>
 | 
	
		
			
				|  |  | -						<li className="timeline-separator" data-datetime={value}></li>
 | 
	
		
			
				|  |  | -						{data
 | 
	
		
			
				|  |  | -							.filter((e) => moment(e.createdAt).format("DD MMMM YYYY") === value)
 | 
	
		
			
				|  |  | -							.map((data, i) => (
 | 
	
		
			
				|  |  | -								<>
 | 
	
		
			
				|  |  | -									<li className={data.role === "PT" ? "timeline-inverted" : ""}>
 | 
	
		
			
				|  |  | -										<div className={`timeline-badge ${data.role === "PT" ? " danger" : "info"}`}>
 | 
	
		
			
				|  |  | -											<em className={`fas fa-${data.role === "PT" ? "graduation-cap" : "file"}`}></em>
 | 
	
		
			
				|  |  | -										</div>
 | 
	
		
			
				|  |  | +			{date.map((value) => (
 | 
	
		
			
				|  |  | +				<>
 | 
	
		
			
				|  |  | +					<li className="timeline-separator" data-datetime={value}></li>
 | 
	
		
			
				|  |  | +					{data
 | 
	
		
			
				|  |  | +						.filter((e) => moment(e.createdAt).format("DD MMMM YYYY") === value)
 | 
	
		
			
				|  |  | +						.map((data, i) => (
 | 
	
		
			
				|  |  | +							<>
 | 
	
		
			
				|  |  | +								<li className={data.role === "PT" ? "timeline-inverted" : ""}>
 | 
	
		
			
				|  |  | +									<div className={`timeline-badge ${data.role === "PT" ? " danger" : "info"}`}>
 | 
	
		
			
				|  |  | +										<em className={`fas fa-${data.role === "PT" ? "graduation-cap" : "file"}`}></em>
 | 
	
		
			
				|  |  | +									</div>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -										<div className="timeline-card">
 | 
	
		
			
				|  |  | -											<div className="popover right">
 | 
	
		
			
				|  |  | -												<div className="arrow"></div>
 | 
	
		
			
				|  |  | -												<div className="popover-body">
 | 
	
		
			
				|  |  | -													<div className="d-flex align-items-center mb-3">
 | 
	
		
			
				|  |  | -														<img
 | 
	
		
			
				|  |  | -															className="mr-3 rounded-circle thumb48"
 | 
	
		
			
				|  |  | -															src={`/static/img${data.role === "PT" ? "/univ-avatar.png" : data.role === "UMUM" ? "/user/user.png" : "/logo-single.png"}`}
 | 
	
		
			
				|  |  | -															alt="Avatar"
 | 
	
		
			
				|  |  | -														/>
 | 
	
		
			
				|  |  | -														<p className="m-0">
 | 
	
		
			
				|  |  | -															<strong>{data.role_name}</strong>
 | 
	
		
			
				|  |  | -															<br />
 | 
	
		
			
				|  |  | -															{data.description}
 | 
	
		
			
				|  |  | -															<br />
 | 
	
		
			
				|  |  | -															<p className="text-muted">{moment(data.createdAt).format("hh:mm")}</p>
 | 
	
		
			
				|  |  | -														</p>
 | 
	
		
			
				|  |  | -													</div>
 | 
	
		
			
				|  |  | -													{!noFile && data.data.files && (
 | 
	
		
			
				|  |  | -														<>
 | 
	
		
			
				|  |  | -															<p className="text-muted my-2">Dokumen</p>
 | 
	
		
			
				|  |  | -															{data.data.files.map((e) => (
 | 
	
		
			
				|  |  | -																<div className="media bb p-2">
 | 
	
		
			
				|  |  | -																	<div className="media-body">
 | 
	
		
			
				|  |  | -																		<p className="m-0">
 | 
	
		
			
				|  |  | -																			<a href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
 | 
	
		
			
				|  |  | -																				<strong>{e.name}</strong>
 | 
	
		
			
				|  |  | -																			</a>
 | 
	
		
			
				|  |  | -																		</p>
 | 
	
		
			
				|  |  | -																	</div>
 | 
	
		
			
				|  |  | -																</div>
 | 
	
		
			
				|  |  | -															))}
 | 
	
		
			
				|  |  | -														</>
 | 
	
		
			
				|  |  | -													)}
 | 
	
		
			
				|  |  | +									<div className="timeline-card">
 | 
	
		
			
				|  |  | +										<div className="popover right">
 | 
	
		
			
				|  |  | +											<div className="arrow"></div>
 | 
	
		
			
				|  |  | +											<div className="popover-body">
 | 
	
		
			
				|  |  | +												<div className="d-flex align-items-center mb-3">
 | 
	
		
			
				|  |  | +													<img className="mr-3 rounded-circle thumb48" src={`/static/img${data.role === "PT" ? "/univ-avatar.png" : data.role === "UMUM" ? "/user/user.png" : "/logo-single.png"}`} alt="Avatar" />
 | 
	
		
			
				|  |  | +													<p className="m-0">
 | 
	
		
			
				|  |  | +														<strong>{data.role_name}</strong>
 | 
	
		
			
				|  |  | +														<br />
 | 
	
		
			
				|  |  | +														{data.description}
 | 
	
		
			
				|  |  | +														<br />
 | 
	
		
			
				|  |  | +														<p className="text-muted">{moment(data.createdAt).format("hh:mm")}</p>
 | 
	
		
			
				|  |  | +													</p>
 | 
	
		
			
				|  |  |  												</div>
 | 
	
		
			
				|  |  | +												{!noFile && data.data.files && (
 | 
	
		
			
				|  |  | +													<>
 | 
	
		
			
				|  |  | +														<p className="text-muted my-2">Dokumen</p>
 | 
	
		
			
				|  |  | +														{data.data.files.map((e) => (
 | 
	
		
			
				|  |  | +															<div className="media bb p-2">
 | 
	
		
			
				|  |  | +																<div className="media-body">
 | 
	
		
			
				|  |  | +																	<p className="m-0">
 | 
	
		
			
				|  |  | +																		<a href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
 | 
	
		
			
				|  |  | +																			<strong>{e.name}</strong>
 | 
	
		
			
				|  |  | +																		</a>
 | 
	
		
			
				|  |  | +																	</p>
 | 
	
		
			
				|  |  | +																</div>
 | 
	
		
			
				|  |  | +															</div>
 | 
	
		
			
				|  |  | +														))}
 | 
	
		
			
				|  |  | +													</>
 | 
	
		
			
				|  |  | +												)}
 | 
	
		
			
				|  |  |  											</div>
 | 
	
		
			
				|  |  |  										</div>
 | 
	
		
			
				|  |  | -									</li>
 | 
	
		
			
				|  |  | -								</>
 | 
	
		
			
				|  |  | -							))}
 | 
	
		
			
				|  |  | -					</>
 | 
	
		
			
				|  |  | -				))}
 | 
	
		
			
				|  |  | +									</div>
 | 
	
		
			
				|  |  | +								</li>
 | 
	
		
			
				|  |  | +							</>
 | 
	
		
			
				|  |  | +						))}
 | 
	
		
			
				|  |  | +				</>
 | 
	
		
			
				|  |  | +			))}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  			<li className="timeline-end">
 | 
	
		
			
				|  |  |  				<a className="timeline-badge">
 |