ptb-fe/pages/app/pelaporan/detail.js

import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Progress } from "reactstrap";

import Sparkline from "@/components/Common/Sparklines";
import Datatable from "@/components/Tables/Datatable";

class PelaporanDetail extends Component {
	constructor(props) {
		super(props);
	}

	render() {
		const { pelaporan } = this.props;
		return (
			<ContentWrapper>
				<div className="content-heading">Pelaporan</div>
				<Row>
					<Col lg="4">
						<div className="card b">
							<div className="card-body bb">
								<p>Overvall progress</p>
								<div className="d-flex align-items-center mb-2">
									<div className="w-100">
										<Progress className="progress-xs m0" color="info" value={20} />
									</div>
									<div className="ml-auto">
										<div className="col wd-xxs text-right">
											<div className="text-bold text-muted">20%</div>
										</div>
									</div>
								</div>
							</div>
							<div className="card-body">
								<p>Metrics</p>
								<div className="row text-center">
									<div className="col-6 col-lg-6 col-xl-6">
										<Sparkline
											values={[20, 80]}
											options={{
												type: "pie",
												height: "50",
												sliceColors: ["#edf1f2", "#23b7e5"],
											}}
											className="sparkline"
										/>
										<p className="mt-3">Open Case</p>
									</div>
									<div className="col-6 col-lg-6 col-xl-6">
										<Sparkline
											values={[80, 20]}
											options={{
												type: "pie",
												height: "50",
												sliceColors: ["#edf1f2", "#27c24c"],
											}}
											className="sparkline"
										/>
										<p className="mt-3">Close Case</p>
									</div>
								</div>
							</div>
							<table className="table bb">
								<tbody>
									<tr>
										<td>
											<strong>Open Case</strong>
										</td>
										<td>80</td>
									</tr>
									<tr>
										<td>
											<strong>Close Case</strong>
										</td>
										<td>20</td>
									</tr>
									<tr>
										<td>
											<strong>Performance</strong>
										</td>
										<td>
											<em className="far fa-smile fa-lg text-warning"></em>
										</td>
									</tr>
									<tr>
										<td>
											<strong>Last Case Closed</strong>
										</td>
										<td>BI:1107 - 12/01/2016</td>
									</tr>
								</tbody>
							</table>
						</div>
					</Col>
					<Col lg="8">
						<div className="mb-3 d-flex">
							<div>
								<button className="btn btn-sm btn-info" type="button" onClick={(e) => this.newReportClick(e)}>
									Laporan Baru
								</button>
							</div>
						</div>
						<div className="card b">
							<div className="card-body"></div>
						</div>
					</Col>
				</Row>
			</ContentWrapper>
		);
	}
}

export default PelaporanDetail;