import { Progress } from "reactstrap";
import Sparkline from "@/components/Common/Sparklines";
import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
import FlotChart from '@/components/Charts/Flot.js';
import { ChartSpline, ChartArea, ChartBar, ChartBarStacked, ChartDonut, ChartLine, ChartPie } from '@/components/Config/flot.setup.js';
import Datatable from "@/components/Tables/Datatable";


function CaseProgress() {
    return (
        <div className="card b">
            <div className="card-body bb">
                <div className="header-1">
                    <h2 className="card-title-1">Perkembangan</h2>
                </div>
                <div className="w-400">
                    <FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
                </div>
            </div>
            <div className="card-body">
                <div className="header-1">
                    <h2 className="card-title-1">Rekapitulasi</h2>
                </div>
                <FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
            </div>
            <div className="card-body">
                <div className="header-1">
                    <h2 className="card-title-1">Laporan Terbaru</h2>
                </div>
                <table className="table bb">
                    <tbody>
                        <tr>
                            <td>
                                <strong></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>
        </div >
    );
}

export default CaseProgress;