btn buat laporan ubah posisi

components/Delegasi/CaseProgress.js

@@ -13,12 +13,12 @@ function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 		data: [
 			{
 				label: "Ditindaklanjuti DIKTI",
-				color: "#5ab1ef",
+				color: "#287DAD",
 				data: [data.jumlah_laporan.dikti],
 			},
 			{
 				label: "Ditindaklanjuti LLDIKTI",
-				color: "#f5994e",
+				color: "#1EA457",
 				data: [data.jumlah_laporan.lldikti],
 			},
 			{
@@ -35,7 +35,7 @@ function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 					innerRadius: 0,
 					label: {
 						show: true,
-						radius: 0.8,
+						radius: 0.5,
 						formatter: function (label, series) {
 							return (
 								'<div class="flot-pie-label">' +
@@ -58,12 +58,12 @@ function CaseProgress({ data, nextButton, prevButton, tahun, excel }) {
 		data: [
 			{
 				// "label": "Complete",
-				color: "#5ab1ef",
+				color: "#287DAD",
 				data: [["Ditindaklanjuti DIKTI", data.jumlah_laporan.dikti]],
 			},
 			{
 				// "label": "In Progress",
-				color: "#f5994e",
+				color: "#1EA457",
 				data: [["Ditindaklanjuti LLDIKTI", data.jumlah_laporan.lldikti]],
 			},
 			{

components/Pelaporan/TableLaporan.js

@@ -0,0 +1,100 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+
+function TableLaporan({ listData, to, linkName, status = false, noBy = false }) {
+    return (
+        <div className="card b ">
+            <div className="card-body card-over">
+                <div className="margin-left-auto">
+                    <Link href="/app/pelaporan/search">
+                        <Button className="color-3e3a8e" color>
+                            <span className="font-color-white">
+                                Laporan baru
+                            </span>
+                            <img className="icon-laporan-baru" src="/static/img/icon-laporan-baru.png"></img>
+                        </Button>
+                    </Link>
+                </div>
+                {listData && (
+                    <Datatable options={{ responsive: false, ordering: true, keys: true }}>
+                        <table className="table w-100" data-order='[[3, "desc"]]'>
+                            <thead>
+                                <tr>
+                                    <th>No.Laporan</th>
+                                    <th>Deskripsi Laporan</th>
+                                    {status && <th>Status</th>}
+                                    {!noBy && <th>Dibuat Oleh</th>}
+                                    {/* <th>Created</th> */}
+                                    <th></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {listData.map((data) => {
+                                    return (
+                                        <tr key={data._id}>
+                                            <td>
+                                                {/* <td>{data.no_laporan}</td> */}
+                                                <div className="media align-items-center">
+                                                    <div className="media-body d-flex">
+                                                        <div>
+                                                            <h4>{data.no_laporan}</h4>
+                                                            <p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+
+                                            <td>
+                                                <div className="table-desc">
+                                                    <div className="media align-items-center">
+                                                        <div className="media-body d-flex">
+                                                            <div>
+                                                                <h4 className="m-0">{data.pt.nama.length > 64 ? data.pt.nama.substring(0, 64) + "..." : data.pt.nama}</h4>
+                                                                {/* <h4 className="m-0">{data.pt.nama}</h4> */}
+                                                                {/* <p className="w-105">{data.keterangan.length > 150 ? data.keterangan.substring(0, 150) + "..." : data.keterangan}</p> */}
+                                                                <p className="w-105">{data.keterangan}</p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+
+                                            {status ? (
+                                                <td>
+                                                    <div className="badge badge-info">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
+                                                </td>
+                                            ) : (
+                                                ""
+                                            )}
+                                            {!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}
+                                            <td>
+                                                <div className="ml-auto">
+                                                    <Link
+                                                        href={{
+                                                            pathname: to,
+                                                            query: { id: data._id },
+                                                        }}
+                                                    >
+                                                        <Button className="color-3e3a8e" color>
+                                                            <span className="font-color-white">
+                                                                {linkName}
+                                                            </span>
+                                                        </Button>
+                                                    </Link>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    );
+                                })}
+                            </tbody>
+                        </table>
+                    </Datatable>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default TableLaporan;

pages/app/pelaporan/index.js

@@ -5,7 +5,7 @@ import { Row, Col, Button } from "reactstrap";
 import { getPelaporan } from "@/actions/pelaporan";
 import { getGraph, getExcel } from "@/actions/graph";
 import CaseProgress from "@/components/Pelaporan/CaseProgress";
-import TableLaporan from "@/components/Main/TableLaporan";
+import TableLaporan from "@/components/pelaporan/TableLaporan";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
 import Router from 'next/router'
@@ -69,11 +69,11 @@ class Pelaporan extends Component {
 					<Col lg="4">{graph?.data ? <CaseProgress data={graph.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} newLaporan={newLaporan} excel={this.excel} /> : <Loader />}</Col>
 					<Col lg="8">
 						<div className="mb-3 d-flex">
-							<div>
+							{/* <div className="margin-left-auto">
 								<Link href="/app/pelaporan/search">
 									<Button className="color-3e3a8e" color="purple">Laporan Baru</Button>
 								</Link>
-							</div>
+							</div> */}
 						</div>
 						{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" /> : <Loader />}
 					</Col>

pages/app/pemantauan/timeline.js

@@ -57,7 +57,11 @@ class Pemantauan extends Component {
 						<div className="font-color-white">Pemantauan {pt?.data && pt.data.nama}</div>
 						<div className="ml-auto">
 							<Link href="/app/pemantauan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<Button className="color-3e3a8e" color>
+									<span className="font-color-white">
+										&lt; Kembali
+									</span>
+								</Button>
 							</Link>
 						</div>
 					</div>

styles/bootstrap/_buttons.scss

@@ -265,4 +265,13 @@ input[type="button"] {
 .color-3e3a8e{
 	background-color: #3E3A8E;
 	color: #3E3A8E;
+}
+.margin-left-auto{
+	float: right;
+	margin-top: -3px;
+}
+.icon-laporan-baru{
+	margin-left: 5px;
+	// margin-right: -8px;
+	width: 13px;
 }