PTB-fe/components/Main/CaseProgress.js

import { Progress } from "reactstrap";
import Sparkline from "@/components/Common/Sparklines";

function CaseProgress() {
	return (
		<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>
	);
}

export default CaseProgress;