commit

actions/log.js

@@ -1,6 +1,6 @@
-export const getLog = async () => {
+export const getLog = async ({ ptId }) => {
 	try {
-		const res = await fetch("http://localhost:5000/log");
+		const res = await fetch(`http://localhost:5000/log?ptId=${ptId}`);
 		return await res.json();
 	} catch (error) {
 		console.log("error", error);

components/Main/Timeline.js

@@ -0,0 +1,61 @@
+import moment from "moment";
+
+function Timeline({ data }) {
+	return (
+		<ul className="timeline">
+			{data.data.map((data, i) => (
+				<>
+					<li className="timeline-separator" data-datetime={moment(data.createdAt).format("DD MMMM YYYY")}></li>
+					<li className={data.role === "PT" ? "timeline-inverted" : ""}>
+						<div className="timeline-badge info">
+							<em className="far fa-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/user/admin.png" alt="Avatar" />
+										<p className="m-0">
+											<strong>{data.role}</strong>
+											<br />
+											{data.description}
+										</p>
+									</div>
+									{data.data.files ? (
+										<>
+											<p className="text-muted my-2">Dokumen</p>
+											{data.data.files.map((e) => (
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<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>
+						</div>
+					</li>
+				</>
+			))}
+
+			<li className="timeline-end">
+				<a className="timeline-badge">
+					<em className="fa fa-plus"></em>
+				</a>
+			</li>
+		</ul>
+	);
+}
+
+export default Timeline;

pages/app/pemantauan/timeline.js

@@ -1,330 +1,33 @@
 import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import {
-	Row,
-	Col,
-	Card,
-	Button,
-	CardHeader,
-	CardFooter,
-	Table,
-	Nav,
-	NavItem,
-	NavLink,
-	TabContent,
-	TabPane,
-	Pagination,
-	PaginationItem,
-	PaginationLink,
-	ListGroup,
-	ListGroupItem,
-	Dropdown,
-	DropdownMenu,
-	DropdownToggle,
-	DropdownItem,
-} from "reactstrap";
-//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-
-// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import Select from "react-select";
-import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
-
-import { GetServerSideProps, NextPage } from "next";
-import ErrorPage from "next/error";
-import fetch from "node-fetch";
-
-import https from "https";
-
-const containerStyle = {
-	width: "100%",
-	height: "155px",
-};
-
-
-var jenisPelanggaran = [];
-
-//const qpt_id = {};
-
-//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252
-
-// Demo with custom style
-const DemoMapCustomStyle = (props) => (
-	<GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
-		<Marker position={props.location} />
-	</GoogleMap>
-);
-
-const styleHeaderText = {
-	color: "brown",
-};
-
-class Profile extends Component {
-	toggleTab = (tab) => {
-		if (this.state.activeTab !== tab) {
-			this.setState({
-				activeTab: tab,
-			});
-		}
-	};
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import { getLog } from "@/actions/log";
+import { Row, Col } from "reactstrap";
+import Timeline from "@/components/Main/Timeline";
+
+class Pemantauan extends Component {
+	constructor(props) {
+		super(props);
+	}
 
 	static async getInitialProps({ query }) {
-		const httpsAgent = new https.Agent({
-			rejectUnauthorized: false,
-		});
-		const json = [
-			{
-				id: "0BCE4DB7-B207-445D-8D03-0C54B7688252",
-				kode: "031031",
-				kode_satker: null,
-				nama: "Universitas Satyagama",
-				nama_singkat: "USG",
-				sk_pendirian: "0742/O/1990",
-				tgl_sk_pendirian: "1990-12-22",
-				sk_operasional: null,
-				tgl_sk_operasional: null,
-				status: "A",
-				alamat: {
-					jalan: "Jalan Kamal Raya No 2-A Cengkareng",
-					rt: null,
-					rw: null,
-					dusun: null,
-					kelurahan: "-",
-					kode_pos: "11730",
-					kab_kota: {
-						id: "016200",
-						nama: "Kota Jakarta Barat",
-					},
-				},
-				propinsi: {
-					id: "010000",
-					nama: "Prov. D.K.I. Jakarta",
-				},
-				telepon: "(021) 5452377-78",
-				faksimile: "(021) 54391325",
-				website: "www.satyagama.ac.id",
-				email: "info@satyagama.ac.id",
-				status_milik: {
-					id: "3",
-					nama: "Yayasan",
-				},
-				pembina: {
-					id: "728989DD-251E-4516-BE2C-BA17A93A5C51",
-					nama: "LLDIKTI III",
-				},
-				bentuk_pendidikan: {
-					id: "23",
-					nama: "Universitas",
-				},
-				last_update: "2021-12-08",
-				negara: {
-					id: "ID",
-					nama: "Indonesia",
-				},
-				pimpinan: {
-					id: "D3D20B3D-0FBE-4706-8A70-67C4C09C8FBE",
-					nama: "DEWI SULISTYANI",
-					tmt_sk_pengangkatan: "2021-03-17",
-					tst_sk_pengangkatan: "2025-03-17",
-				},
-			},
-		];
-		console.log("json : ", json);
-
-		return { data: json[0] };
+		const log = await getLog({ ptId: query.ptId });
+		return { log };
 	}
 
-	state = {
-		dropdownOpen: false,
-		dropdownOpenUpload: false,
-		timelineAlt: false,
-		location: { lat: 33.7906731, lng: -117.8357194 },
-		customStyle: [
-			{ featureType: "water", stylers: [{ visibility: "on" }, { color: "#bdd1f9" }] },
-			{ featureType: "all", elementType: "labels.text.fill", stylers: [{ color: "#334165" }] },
-			{ featureType: "landscape", stylers: [{ color: "#e9ebf1" }] },
-			{ featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#c5c6c6" }] },
-			{ featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#fff" }] },
-			{ featureType: "road.local", elementType: "geometry", stylers: [{ color: "#fff" }] },
-			{ featureType: "transit", elementType: "geometry", stylers: [{ color: "#d8dbe0" }] },
-			{ featureType: "poi", elementType: "geometry", stylers: [{ color: "#cfd5e0" }] },
-			{ featureType: "administrative", stylers: [{ visibility: "on" }, { lightness: 33 }] },
-			{ featureType: "poi.park", elementType: "labels", stylers: [{ visibility: "on" }, { lightness: 20 }] },
-			{ featureType: "road", stylers: [{ color: "#d8dbe0", lightness: 20 }] },
-		],
-		listA: [],
-		selectedOptionMulti: [],
-		activeTab: "tasks",
-	};
-
-	toggleDD = () =>
-		this.setState({
-			dropdownOpen: !this.state.dropdownOpen,
-		});
-
-	toggleDDUpload = () =>
-		this.setState({
-			dropdownOpenUpload: !this.state.dropdownOpenUpload,
-		});
-
-	toggleTimeline = (e) => {
-		this.setState({
-			timelineAlt: e.target.checked,
-		});
-	};
-
 	render() {
-		const { selectedOptionMulti } = this.state;
-
+		const { log } = this.props;
 		return (
 			<ContentWrapper unwrap>
-				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
-					<div className="p-4 text-center" style={styleHeaderText}>
-						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
-						<h3 className="m-0">{this.props.data.nama}</h3>
-						<p>{this.props.data.sk_pendirian}</p>
-						<p>{this.props.data.alamat.jalan}</p>
-					</div>
-				</div>
+				<Header />
 				<div className="p-3">
 					<Row>
 						<Col xl="9">
-							<ul className="timeline">
-								<li className="timeline-separator" data-datetime="Today"></li>
-								<li className="timeline-inverted">
-									<div className="timeline-badge info">
-										<em className="far fa-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/user/admin.png" alt="Avatar" />
-													<p className="m-0">
-														{/* <a className="text-muted" href=""> */}
-														<strong>Admin</strong>
-														{/* </a> */}
-														<br />
-														Upload Bukti Perbaikan
-														{/* <em className="fa fa-paperclip"></em> */}
-														<Dropdown isOpen={this.state.dropdownOpenUpload} toggle={this.toggleDDUpload}>
-															{/* <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status */}
-															{/* <p className="m-0"><br/> Upload Bukti Perbaikan </p> */}
-															<DropdownToggle caret color="link">
-																<em className="fa fa-paperclip"></em>
-															</DropdownToggle>
-															<DropdownMenu className="animated fadeInUpShort">
-																<DropdownItem>
-																	<em className="fa fa-lock mr-2"></em>Upload
-																</DropdownItem>
-															</DropdownMenu>
-														</Dropdown>
-													</p>
-													{/* <li> */}
-
-													{/* </li> */}
-												</div>
-												{/* <a href="">
-                                                    <img className="img-fluid img-thumbnail" src="/static/img/mockup.png" alt="Img"/>
-                                                </a> */}
-												<p className="text-muted my-2">3 Logs</p>
-												<div className="media bb p-2">
-													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
-													<div className="media-body">
-														<p className="m-0">
-															<a href="">
-																<strong>Universitas Username</strong>
-															</a>
-														</p>
-														<div className="text-sm text-muted">Uploaded Document File BBB.pdf</div>
-													</div>
-													<small className="ml-auto text-muted">12m ago</small>
-												</div>
-												<div className="media bb p-2">
-													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
-													<div className="media-body">
-														<p className="m-0">
-															<a href="">
-																<strong>Universitas Username</strong>
-															</a>
-														</p>
-														<div className="text-sm text-muted">Uploaded Document File CCC.pdf</div>
-													</div>
-													<small className="ml-auto text-muted">30m ago</small>
-												</div>
-												<div className="media bb p-2">
-													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
-													<div className="media-body">
-														<p className="m-0">
-															<a href="">
-																<strong>Universitas Username</strong>
-															</a>
-														</p>
-														<div className="text-sm text-muted">Uploaded Document File AAA.pdf</div>
-													</div>
-													<small className="ml-auto text-muted">30m ago</small>
-												</div>
-												{/* <form className="mt-2" method="post" action="#">
-                                                    <textarea className="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
-                                                </form> */}
-											</div>
-										</div>
-									</div>
-								</li>
-								<li>
-									<div className="timeline-badge danger">
-										<em className="fas fa-ticket-alt"></em>
-									</div>
-									<div className="timeline-card">
-										<div className="popover left">
-											<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/user/admin.png" alt="Avatar" />
-													<p className="m-0">
-														{/* <a className="text-muted" href=""> */}
-														<strong>Admin</strong>
-														{/* </a> */}
-														<br />
-														opened project
-														<a className="ml-2" href="">
-															#548795
-														</a>
-													</p>
-												</div>
-												<p>
-													<em>&mdash; Project description sample</em>
-												</p>
-											</div>
-										</div>
-									</div>
-								</li>
-								<li className="timeline-end">
-									<a className="timeline-badge">
-										<em className="fa fa-plus"></em>
-									</a>
-								</li>
-							</ul>
+							<Timeline data={log} />
 						</Col>
 						<Col xl="3">
-							<div className="card card-default">
-								<div className="card-body">
-									<div className="text-center">
-										<h3 className="mt-0">{this.props.data.nama}</h3>
-										<p>{this.props.data.sk_pendirian}</p>
-									</div>
-									<hr />
-									<ul className="list-unstyled px-4">
-										<li>
-											<em className="fa fa-globe fa-fw mr-3"></em>
-											{this.props.data.website}
-										</li>
-										<li>
-											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
-										</li>
-									</ul>
-								</div>
-							</div>
+							<DetailPT />
 						</Col>
 					</Row>
 				</div>
@@ -333,4 +36,4 @@ class Profile extends Component {
 	}
 }
 
-export default Profile;
+export default Pemantauan;

pages/app/pt/pemantauan.js

@@ -2,345 +2,29 @@ import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Header from "@/components/Main/Header";
 import DetailPT from "@/components/Main/DetailPT";
-import {
-	Row,
-	Col,
-	Card,
-	Button,
-	CardHeader,
-	CardFooter,
-	Table,
-	Nav,
-	NavItem,
-	NavLink,
-	TabContent,
-	TabPane,
-	Pagination,
-	PaginationItem,
-	PaginationLink,
-	ListGroup,
-	ListGroupItem,
-	Dropdown,
-	DropdownMenu,
-	DropdownToggle,
-	DropdownItem,
-} from "reactstrap";
-//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import { getLog } from "@/actions/log";
+import { Row, Col } from "reactstrap";
+import Timeline from "@/components/Main/Timeline";
 
-// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import Select from "react-select";
-import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
-
-import { GetServerSideProps, NextPage } from "next";
-import ErrorPage from "next/error";
-import fetch from "node-fetch";
-
-import https from "https";
-
-const containerStyle = {
-	width: "100%",
-	height: "155px",
-};
-
-var jenisPelanggaran = [];
-
-//const qpt_id = {};
-
-//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252
-
-// Demo with custom style
-const DemoMapCustomStyle = (props) => (
-	<GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
-		<Marker position={props.location} />
-	</GoogleMap>
-);
-
-const styleHeaderText = {
-	color: "brown",
-};
-
-class Profile extends Component {
-	toggleTab = (tab) => {
-		if (this.state.activeTab !== tab) {
-			this.setState({
-				activeTab: tab,
-			});
-		}
-	};
+class Pemantauan extends Component {
+	constructor(props) {
+		super(props);
+	}
 
 	static async getInitialProps({ query }) {
-		const httpsAgent = new https.Agent({
-			rejectUnauthorized: false,
-		});
-		const json = [
-			{
-				id: "0BCE4DB7-B207-445D-8D03-0C54B7688252",
-				kode: "031031",
-				kode_satker: null,
-				nama: "Universitas Satyagama",
-				nama_singkat: "USG",
-				sk_pendirian: "0742/O/1990",
-				tgl_sk_pendirian: "1990-12-22",
-				sk_operasional: null,
-				tgl_sk_operasional: null,
-				status: "A",
-				alamat: {
-					jalan: "Jalan Kamal Raya No 2-A Cengkareng",
-					rt: null,
-					rw: null,
-					dusun: null,
-					kelurahan: "-",
-					kode_pos: "11730",
-					kab_kota: {
-						id: "016200",
-						nama: "Kota Jakarta Barat",
-					},
-				},
-				propinsi: {
-					id: "010000",
-					nama: "Prov. D.K.I. Jakarta",
-				},
-				telepon: "(021) 5452377-78",
-				faksimile: "(021) 54391325",
-				website: "www.satyagama.ac.id",
-				email: "info@satyagama.ac.id",
-				status_milik: {
-					id: "3",
-					nama: "Yayasan",
-				},
-				pembina: {
-					id: "728989DD-251E-4516-BE2C-BA17A93A5C51",
-					nama: "LLDIKTI III",
-				},
-				bentuk_pendidikan: {
-					id: "23",
-					nama: "Universitas",
-				},
-				last_update: "2021-12-08",
-				negara: {
-					id: "ID",
-					nama: "Indonesia",
-				},
-				pimpinan: {
-					id: "D3D20B3D-0FBE-4706-8A70-67C4C09C8FBE",
-					nama: "DEWI SULISTYANI",
-					tmt_sk_pengangkatan: "2021-03-17",
-					tst_sk_pengangkatan: "2025-03-17",
-				},
-			},
-		];
-		console.log("json : ", json);
-
-		return { data: json[0] };
+		const log = await getLog({ ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { log };
 	}
 
-	state = {
-		dropdownOpen: false,
-		dropdownOpenUpload: false,
-		timelineAlt: false,
-		location: { lat: 33.7906731, lng: -117.8357194 },
-		customStyle: [
-			{ featureType: "water", stylers: [{ visibility: "on" }, { color: "#bdd1f9" }] },
-			{ featureType: "all", elementType: "labels.text.fill", stylers: [{ color: "#334165" }] },
-			{ featureType: "landscape", stylers: [{ color: "#e9ebf1" }] },
-			{ featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#c5c6c6" }] },
-			{ featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#fff" }] },
-			{ featureType: "road.local", elementType: "geometry", stylers: [{ color: "#fff" }] },
-			{ featureType: "transit", elementType: "geometry", stylers: [{ color: "#d8dbe0" }] },
-			{ featureType: "poi", elementType: "geometry", stylers: [{ color: "#cfd5e0" }] },
-			{ featureType: "administrative", stylers: [{ visibility: "on" }, { lightness: 33 }] },
-			{ featureType: "poi.park", elementType: "labels", stylers: [{ visibility: "on" }, { lightness: 20 }] },
-			{ featureType: "road", stylers: [{ color: "#d8dbe0", lightness: 20 }] },
-		],
-		listA: [],
-		selectedOptionMulti: [],
-		activeTab: "tasks",
-	};
-
-	toggleDD = () =>
-		this.setState({
-			dropdownOpen: !this.state.dropdownOpen,
-		});
-
-	toggleDDUpload = () =>
-		this.setState({
-			dropdownOpenUpload: !this.state.dropdownOpenUpload,
-		});
-
-	toggleTimeline = (e) => {
-		this.setState({
-			timelineAlt: e.target.checked,
-		});
-	};
-
 	render() {
-		const { selectedOptionMulti } = this.state;
-
+		const { log } = this.props;
 		return (
 			<ContentWrapper unwrap>
 				<Header />
 				<div className="p-3">
 					<Row>
 						<Col xl="9">
-							<ul className="timeline">
-								{/* Date */}
-								<li className="timeline-separator" data-datetime="Today"></li>
-								{/* EndDate */}
-								<li className="timeline-inverted">
-									{/* Left Card */}
-									{/* icon */}
-									<div className="timeline-badge info">
-										<em className="far fa-file"></em>
-									</div>
-									{/* endicon */}
-									<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/user/admin.png" alt="Avatar" />
-													<p className="m-0">
-														{/* <a className="text-muted" href=""> */}
-														<strong>Admin</strong>
-														{/* </a> */}
-														<br />
-														Upload Bukti Perbaikan
-														{/* <em className="fa fa-paperclip"></em> */}
-														<Dropdown isOpen={this.state.dropdownOpenUpload} toggle={this.toggleDDUpload}>
-															{/* <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status */}
-															{/* <p className="m-0"><br/> Upload Bukti Perbaikan </p> */}
-															<DropdownToggle caret color="link">
-																<em className="fa fa-paperclip"></em>
-															</DropdownToggle>
-															<DropdownMenu className="animated fadeInUpShort">
-																<DropdownItem>
-																	<em className="fa fa-lock mr-2"></em>Upload
-																</DropdownItem>
-															</DropdownMenu>
-														</Dropdown>
-													</p>
-													{/* <li> */}
-
-													{/* </li> */}
-												</div>
-												{/* <a href="">
-                                                    <img className="img-fluid img-thumbnail" src="/static/img/mockup.png" alt="Img"/>
-                                                </a> */}
-												<p className="text-muted my-2">3 Logs</p>
-												<div className="media bb p-2">
-													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
-													<div className="media-body">
-														<p className="m-0">
-															<a href="">
-																<strong>Universitas Username</strong>
-															</a>
-														</p>
-														<div className="text-sm text-muted">Uploaded Document File BBB.pdf</div>
-													</div>
-													<small className="ml-auto text-muted">12m ago</small>
-												</div>
-												<div className="media bb p-2">
-													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
-													<div className="media-body">
-														<p className="m-0">
-															<a href="">
-																<strong>Universitas Username</strong>
-															</a>
-														</p>
-														<div className="text-sm text-muted">Uploaded Document File CCC.pdf</div>
-													</div>
-													<small className="ml-auto text-muted">30m ago</small>
-												</div>
-												<div className="media bb p-2">
-													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
-													<div className="media-body">
-														<p className="m-0">
-															<a href="">
-																<strong>Universitas Username</strong>
-															</a>
-														</p>
-														<div className="text-sm text-muted">Uploaded Document File AAA.pdf</div>
-													</div>
-													<small className="ml-auto text-muted">30m ago</small>
-												</div>
-												{/* <form className="mt-2" method="post" action="#">
-                                                    <textarea className="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
-                                                </form> */}
-											</div>
-										</div>
-									</div>
-									{/* EndLeftCard */}
-								</li>
-								<li>
-									{/* rightCard */}
-									{/* icon */}
-									<div className="timeline-badge danger">
-										<em className="fas fa-ticket-alt"></em>
-									</div>
-									{/* endicon */}
-									<div className="timeline-card">
-										<div className="popover left">
-											<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/user/admin.png" alt="Avatar" />
-													<p className="m-0">
-														{/* <a className="text-muted" href=""> */}
-														<strong>Admin</strong>
-														{/* </a> */}
-														<br />
-														opened project
-														<a className="ml-2" href="">
-															#548795
-														</a>
-													</p>
-												</div>
-												<p>
-													<em>&mdash; Project description sample</em>
-												</p>
-											</div>
-										</div>
-									</div>
-									{/* endRightCard */}
-								</li>
-								<li>
-									{/* rightCard */}
-									{/* icon */}
-									<div className="timeline-badge danger">
-										<em className="fas fa-ticket-alt"></em>
-									</div>
-									{/* endicon */}
-									<div className="timeline-card">
-										<div className="popover left">
-											<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/user/admin.png" alt="Avatar" />
-													<p className="m-0">
-														{/* <a className="text-muted" href=""> */}
-														<strong>Admin</strong>
-														{/* </a> */}
-														<br />
-														opened project
-														<a className="ml-2" href="">
-															#548795
-														</a>
-													</p>
-												</div>
-												<p>
-													<em>&mdash; Project description sample</em>
-												</p>
-											</div>
-										</div>
-									</div>
-									{/* endRightCard */}
-								</li>
-								<li className="timeline-end">
-									<a className="timeline-badge">
-										<em className="fa fa-plus"></em>
-									</a>
-								</li>
-							</ul>
+							<Timeline data={log} />
 						</Col>
 						<Col xl="3">
 							<DetailPT />
@@ -352,4 +36,4 @@ class Profile extends Component {
 	}
 }
 
-export default Profile;
+export default Pemantauan;