header(not realtime)

chartpie (realtime)

components/Delegasi/CaseProgress.js

@@ -14,37 +14,44 @@ function CaseProgress({ data, user }) {
 			{
 				label: "Ditindaklanjuti DIKTI",
 				color: "#287DAD",
-				data: data.jumlah_laporan.dikti,
+				data: [data.jumlah_laporan.dikti],
 			},
 			{
 				label: "Ditindaklanjuti LLDIKTI",
 				color: "#52D489",
-				data: data.jumlah_laporan.lldikti,
+				data: [data.jumlah_laporan.lldikti],
 			},
 			{
 				label: "Ditutup",
 				color: "#FD4233",
-				data: data.jumlah_laporan.ditutup,
+				data: [data.jumlah_laporan.ditutup],
 			},
 		],
 
-		data: [
-			{
-				label: "Ditindaklanjuti DIKTI",
-				color: "#287DAD",
-				data: 70,
-			},
-			{
-				label: "Ditindaklanjuti DIKTI",
-				color: "#52D489",
-				data: 40,
-			},
-			{
-				label: "Ditutup",
-				color: "#FD4233",
-				data: 40,
+		options: {
+			series: {
+				pie: {
+					show: true,
+					innerRadius: 0,
+					label: {
+						show: true,
+						radius: 0.8,
+						formatter: function (label, series) {
+							return (
+								'<div class="flot-pie-label">' +
+								//label + ' : ' +
+								Math.round(series.percent) +
+								"%</div>"
+							);
+						},
+						background: {
+							opacity: 0.8,
+							color: "#222",
+						},
+					},
+				},
 			},
-		],
+		},
 	};
 
 	const ChartBar = {
@@ -101,6 +108,18 @@ function CaseProgress({ data, user }) {
 	return (
 		<div className="card b">
 			<div className="card-body bb">
+				<div className="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next">
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next">
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Tahun 2022 </b>
+					<Button className="float-right button-hidden icon-eksport">
+						<img src="/static/img/Eksport.png"></img>
+					</Button>
+				</div>
 				<div className="header-1">
 					<h2 className="card-title-1">Perkembangan</h2>
 				</div>

components/Pelaporan/CaseProgress.js

@@ -67,9 +67,62 @@ function CaseProgress({ data }) {
 		}
 	};
 
+
+	const ChartPie = {
+		data: [
+			{
+				label: "Pelaporan masuk",
+				color: "#287DAD",
+				data: 40,
+			},
+			{
+				label: "Pelaporan selesai",
+				color: "#52D489",
+				data: 70,
+			},
+		],
+
+		options: {
+			series: {
+				pie: {
+					show: true,
+					innerRadius: 0,
+					label: {
+						show: true,
+						radius: 0.8,
+						formatter: function (label, series) {
+							return (
+								'<div class="flot-pie-label">' +
+								//label + ' : ' +
+								Math.round(series.percent) +
+								"%</div>"
+							);
+						},
+						background: {
+							opacity: 0.8,
+							color: "#222",
+						},
+					},
+				},
+			},
+		},
+	};
+
 	return (
 		<div className="card b">
 			<div className="card-body bb">
+				<div className="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next">
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next">
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Tahun 2022 </b>
+					<Button className="float-right button-hidden icon-eksport">
+						<img src="/static/img/Eksport.png"></img>
+					</Button>
+				</div>
 				<div className="header-1">
 					<h2 className="card-title-1">Perkembangan</h2>
 				</div>
@@ -77,18 +130,20 @@ function CaseProgress({ data }) {
 					<FlotChart options={ChartBar.options} data={chartData} className="flot-chart" height="200px" />
 				</div>
 			</div>
-			{/* <div className="card-body">
+			<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>
 			<div className="card-body">
 				<div className="header-1">
 					<h2 className="card-title-1">Laporan Terbaru</h2>
 				</div>
 				{laporan_terbaru.map((value) => (
-					<Card>{`${value.no_laporan} - ${value.pt.nama}`}</Card>
+					<h5 className="card-title text-left py-2 bg-gray border-radius-login">
+						<b className="f-size">{`${value.no_laporan} - ${value.pt.nama}`}</b>
+					</h5>
 				))}
 			</div>
 		</div>

components/Pemeriksaan/CaseProgress.js

@@ -6,46 +6,9 @@ import FlotChart from "@/components/Charts/Flot.js";
 import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from "@/components/Config/flot.setup.js";
 import Datatable from "@/components/Tables/Datatable";
 import MorrisChart from "@/components/Charts//Morris";
+import { Button } from "reactstrap";
 
-const ChartPie = {
-	data: [
-		{
-			label: "Sudah diperiksa",
-			color: "#287DAD",
-			data: 70,
-		},
-		{
-			label: "Belum diperiksa",
-			color: "#52D489",
-			data: 40,
-		},
-	],
 
-	options: {
-		series: {
-			pie: {
-				show: true,
-				innerRadius: 0,
-				label: {
-					show: true,
-					radius: 0.8,
-					formatter: function (label, series) {
-						return (
-							'<div class="flot-pie-label">' +
-							//label + ' : ' +
-							Math.round(series.percent) +
-							"%</div>"
-						);
-					},
-					background: {
-						opacity: 0.8,
-						color: "#222",
-					},
-				},
-			},
-		},
-	},
-};
 
 function CaseProgress({ data }) {
 	const ChartBar = {
@@ -57,7 +20,7 @@ function CaseProgress({ data }) {
 			},
 			{
 				// "label": "In Progress",
-				color: "#f5994e",
+				color: "#52D489",
 				data: [["Belum diperiksa", data.evaluasi.notHasEvaluasi]],
 			},
 		],
@@ -93,25 +56,63 @@ function CaseProgress({ data }) {
 			shadowSize: 0,
 		},
 	};
-	// const chartdata = [
-	//     { y: "Delegasi DIKTI", a: 100 },
-	//     { y: "Delegasi LLDIKTI", b: 70 },
-	//     { y: "Ditutup", c: 50 }
-	// ]
 
-	// const barOptions = {
-	//     element: 'morris-bar',
-	//     xkey: 'y',
-	//     ykeys: ["a", "b", "c"],
-	//     labels: ["Ditindaklanjuti LLDIKTI", "Ditindaklanjuti DIKTI", "Ditutup"],
-	//     xLabelMargin: 2,
-	//     barColors: ['#287DAD', '#52D489', '#FD4233'],
-	//     resize: true
-	// }
+
+	const ChartPie = {
+		data: [
+			{
+				label: "Sudah diperiksa",
+				color: "#287DAD",
+				data: [data.evaluasi.hasEvaluasi],
+			},
+			{
+				label: "Belum diperiksa",
+				color: "#52D489",
+				data: [data.evaluasi.notHasEvaluasi],
+			},
+		],
+
+		options: {
+			series: {
+				pie: {
+					show: true,
+					innerRadius: 0,
+					label: {
+						show: true,
+						radius: 0.8,
+						formatter: function (label, series) {
+							return (
+								'<div class="flot-pie-label">' +
+								//label + ' : ' +
+								Math.round(series.percent) +
+								"%</div>"
+							);
+						},
+						background: {
+							opacity: 0.8,
+							color: "#222",
+						},
+					},
+				},
+			},
+		},
+	};
 
 	return (
 		<div className="card b">
 			<div className="card-body bb">
+				<div className="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next">
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next">
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Tahun 2022 </b>
+					<Button className="float-right button-hidden icon-eksport">
+						<img src="/static/img/Eksport.png"></img>
+					</Button>
+				</div>
 				<div className="header-1">
 					<h2 className="card-title-1">Perkembangan</h2>
 				</div>
@@ -119,12 +120,12 @@ function CaseProgress({ data }) {
 					<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">Rekapitulasi</h2>
+				</div>
+				<FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
+			</div>
 		</div>
 	);
 }

components/Penjadwalan/CaseProgress.js

@@ -6,46 +6,9 @@ import FlotChart from "@/components/Charts/Flot.js";
 import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from "@/components/Config/flot.setup.js";
 import Datatable from "@/components/Tables/Datatable";
 import MorrisChart from "@/components/Charts//Morris";
+import { Button } from "reactstrap";
 
-const ChartPie = {
-	data: [
-		{
-			label: "Sudah ada jadwal",
-			color: "#287DAD",
-			data: 70,
-		},
-		{
-			label: "Belum ada jadwal",
-			color: "#52D489",
-			data: 40,
-		},
-	],
 
-	options: {
-		series: {
-			pie: {
-				show: true,
-				innerRadius: 0,
-				label: {
-					show: true,
-					radius: 0.8,
-					formatter: function (label, series) {
-						return (
-							'<div class="flot-pie-label">' +
-							//label + ' : ' +
-							Math.round(series.percent) +
-							"%</div>"
-						);
-					},
-					background: {
-						opacity: 0.8,
-						color: "#222",
-					},
-				},
-			},
-		},
-	},
-};
 
 function CaseProgress({ data }) {
 	const ChartBar = {
@@ -57,7 +20,7 @@ function CaseProgress({ data }) {
 			},
 			{
 				// "label": "In Progress",
-				color: "#f5994e",
+				color: "#52D489",
 				data: [["Belum ada jadwal", data.jadwal.notHasJadwal]],
 			},
 		],
@@ -94,9 +57,62 @@ function CaseProgress({ data }) {
 		},
 	};
 
+
+	const ChartPie = {
+		data: [
+			{
+				label: "Sudah ada jadwal",
+				color: "#287DAD",
+				data: [data.jadwal.hasJadwal],
+			},
+			{
+				label: "Belum ada jadwal",
+				color: "#52D489",
+				data: [data.jadwal.notHasJadwal],
+			},
+		],
+
+		options: {
+			series: {
+				pie: {
+					show: true,
+					innerRadius: 0,
+					label: {
+						show: true,
+						radius: 0.8,
+						formatter: function (label, series) {
+							return (
+								'<div class="flot-pie-label">' +
+								//label + ' : ' +
+								Math.round(series.percent) +
+								"%</div>"
+							);
+						},
+						background: {
+							opacity: 0.8,
+							color: "#222",
+						},
+					},
+				},
+			},
+		},
+	};
+
 	return (
 		<div className="card b">
 			<div className="card-body bb">
+				<div className="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next">
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next">
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Mei 2022 </b>
+					<Button className="float-right button-hidden icon-eksport">
+						<img src="/static/img/Eksport.png"></img>
+					</Button>
+				</div>
 				<div className="header-1">
 					<h2 className="card-title-1">Perkembangan</h2>
 				</div>
@@ -104,12 +120,12 @@ function CaseProgress({ data }) {
 					<FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
 				</div>
 			</div>
-			{/* <div className="card-body">
+			<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>
 		</div>
 	);
 }

components/Sanksi/CaseProgress.js

@@ -6,46 +6,8 @@ import FlotChart from "@/components/Charts/Flot.js";
 import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from "@/components/Config/flot.setup.js";
 import Datatable from "@/components/Tables/Datatable";
 import MorrisChart from "@/components/Charts//Morris";
+import { Button } from "reactstrap";
 
-const ChartPie = {
-	data: [
-		{
-			label: "Sudah ada jadwal",
-			color: "#287DAD",
-			data: 70,
-		},
-		{
-			label: "Belum ada jadwal",
-			color: "#52D489",
-			data: 40,
-		},
-	],
-
-	options: {
-		series: {
-			pie: {
-				show: true,
-				innerRadius: 0,
-				label: {
-					show: true,
-					radius: 0.8,
-					formatter: function (label, series) {
-						return (
-							'<div class="flot-pie-label">' +
-							//label + ' : ' +
-							Math.round(series.percent) +
-							"%</div>"
-						);
-					},
-					background: {
-						opacity: 0.8,
-						color: "#222",
-					},
-				},
-			},
-		},
-	},
-};
 
 function CaseProgress({ data }) {
 	const ChartBar = {
@@ -57,7 +19,7 @@ function CaseProgress({ data }) {
 			},
 			{
 				// "label": "In Progress",
-				color: "#f5994e",
+				color: "#52D489",
 				data: [["Belum ditetapkan", data.sanksi.notHasSanksi]],
 			},
 		],
@@ -93,10 +55,61 @@ function CaseProgress({ data }) {
 			shadowSize: 0,
 		},
 	};
+	const ChartPie = {
+		data: [
+			{
+				label: "Sudah ada jadwal",
+				color: "#287DAD",
+				data: [data.sanksi.hasSanksi],
+			},
+			{
+				label: "Belum ada jadwal",
+				color: "#52D489",
+				data: [data.sanksi.notHasSanksi],
+			},
+		],
+
+		options: {
+			series: {
+				pie: {
+					show: true,
+					innerRadius: 0,
+					label: {
+						show: true,
+						radius: 0.8,
+						formatter: function (label, series) {
+							return (
+								'<div class="flot-pie-label">' +
+								//label + ' : ' +
+								Math.round(series.percent) +
+								"%</div>"
+							);
+						},
+						background: {
+							opacity: 0.8,
+							color: "#222",
+						},
+					},
+				},
+			},
+		},
+	};
 
 	return (
 		<div className="card b">
 			<div className="card-body bb">
+				<div className="margin-botton-20 text-tahun">
+					<Button className="float-left button-hidden icon-next">
+						<img src="/static/img/previous.png"></img>
+					</Button>
+					<Button className="float-left button-hidden icon-next">
+						<img src="/static/img/next.png"></img>
+					</Button>
+					<b className="text-tahun">Mei 2022 </b>
+					<Button className="float-right button-hidden icon-eksport">
+						<img src="/static/img/Eksport.png"></img>
+					</Button>
+				</div>
 				<div className="header-1">
 					<h2 className="card-title-1">Perkembangan</h2>
 				</div>
@@ -104,12 +117,12 @@ function CaseProgress({ data }) {
 					<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">Rekapitulasi</h2>
+				</div>
+				<FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
+			</div>
 		</div>
 	);
 }

styles/bootstrap/_card.scss

@@ -352,8 +352,5 @@
 		font-size: 20px;
 		text-align: center;
 	}
-	.fl{
-		display: inline;
-	}