fix isue Fe 1,2,3,7,8,9

components/Banding/TableSanksi.js

@@ -8,7 +8,7 @@ function TableSanksi({ listData, to, linkName }) {
 		<div className="card b">
 			<div className="card-body">
 				<Datatable options={{ responsive: true }}>
-					<table className="table w-100">
+					<table className="table w-100" data-order='[3, "asc"]'>
 						<thead>
 							<tr>
 								<th>Nomor Sanksi</th>

components/Keberatan/TableSanksi.js

@@ -8,7 +8,7 @@ function TableSanksi({ listData, to, linkName }) {
 		<div className="card b">
 			<div className="card-body">
 				<Datatable options={{ responsive: true }}>
-					<table className="table w-100">
+					<table className="table w-100" data-order='[3, "asc"]'>
 						<thead>
 							<tr>
 								<th>Nomor Sanksi</th>

components/Main/TableLaporan.js

@@ -8,13 +8,13 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 		<div className="card b">
 			<div className="card-body">
 				{listData && (
-					<Datatable options={{ responsive: false }}>
-						<table className="table w-100">
+					<Datatable options={{ responsive: true, 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> : ""}
+									{status && <th>Status</th>}
 									{!noBy && <th>Dibuat Oleh</th>}
 									<th>Created</th>
 									<th></th>
@@ -43,7 +43,7 @@ function TableLaporan({ listData, to, linkName, status = false, noBy = false })
 												""
 											)}
 											{!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}
-											<td>{moment(data.createdAt).fromNow()}</td>
+											<td>{moment(data.createdAt).format("MM-DD-YYYY")}</td>
 											<td>
 												<div className="ml-auto">
 													<Link

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -169,7 +169,7 @@ export class ModalPermohonan extends Component {
 															<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																<input {...getInputProps()} />
 																<div className="dropzone-previews flex">
-																	{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																	{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
 																</div>
 																<div className="d-flex align-items-center">
 																	<small className="ml-auto">
@@ -181,7 +181,7 @@ export class ModalPermohonan extends Component {
 																				form.setFieldValue(field.name, []);
 																			}}
 																		>
-																			Clear files
+																			Reset dokumen
 																		</button>
 																	</small>
 																</div>

components/PT/Keberatan/ModalPermohonan.js

@@ -171,7 +171,7 @@ export class ModalPermohonan extends Component {
 															<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																<input {...getInputProps()} />
 																<div className="dropzone-previews flex">
-																	{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																	{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
 																</div>
 																<div className="d-flex align-items-center">
 																	<small className="ml-auto">
@@ -183,7 +183,7 @@ export class ModalPermohonan extends Component {
 																				form.setFieldValue(field.name, []);
 																			}}
 																		>
-																			Clear files
+																			Reset dokumen
 																		</button>
 																	</small>
 																</div>

components/Pelaporan/InputData.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useMemo } from "react";
 import Router from "next/router";
 import { getPelanggaranPublic } from "@/actions/pelanggaran";
 import { createPelaporan } from "@/actions/pelaporan";
@@ -232,9 +232,9 @@ export class InputData extends Component {
 										>
 											{({ getRootProps, getInputProps, isDragActive }) => {
 												return (
-													<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+													<div {...getRootProps()} className={"dropzone card p-3" + (isDragActive ? "dropzone-drag-active" : "")}>
 														<input name="dokumen" {...getInputProps()} />
-														<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}</div>
+														<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}</div>
 														<div className="d-flex align-items-center">
 															<small className="ml-auto">
 																<button
@@ -245,7 +245,7 @@ export class InputData extends Component {
 																		form.setFieldValue(field.name, []);
 																	}}
 																>
-																	Clear files
+																	Reset dokumen
 																</button>
 															</small>
 														</div>
@@ -275,4 +275,4 @@ export class InputData extends Component {
 }
 
 const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(InputData);
+export default connect(mapStateToProps)(InputData);

components/Pemeriksaan/InputEvaluasi.js

@@ -35,9 +35,9 @@ const checkIfFilesAreCorrectType = (files) => {
 };
 
 const evaluasiSchema = Yup.object().shape({
-	tanggal: Yup.date().required("Required"),
-	judul: Yup.string().min(3).max(150).required("Required"),
-	dokumen: Yup.array().min(1).required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+	tanggal: Yup.date().required("Wajib diisi"),
+	judul: Yup.string().min(3).max(150).required("Wajib diisi"),
+	dokumen: Yup.array().min(1).required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 
 let Dropzone = null;
@@ -159,26 +159,30 @@ export default class InputEvaluasi extends Component {
 					onSubmit={this.onSubmit}
 				>
 					<Form className="form-horizontal">
-						<FormGroup>
-							<label className="col-form-label">Tanggal Dokumen</label>
-							<Field name="tanggal">
-								{({ field, form }) => (
-									<Datetime
-										timeFormat={false}
-										inputProps={{ className: "form-control" }}
-										value={field.value}
-										onChange={(e) => {
-											form.setFieldValue(field.name, e);
-										}}
-									/>
-								)}
-							</Field>
-							<ErrorMessage name="tanggal" component="div" className="form-text text-danger" />
+						<FormGroup row>
+							<label className="col-md-2 col-form-label">Tanggal Dokumen</label>
+							<div className="col-md-10">
+								<Field name="tanggal">
+									{({ field, form }) => (
+										<Datetime
+											timeFormat={false}
+											inputProps={{ className: "form-control" }}
+											value={field.value}
+											onChange={(e) => {
+												form.setFieldValue(field.name, e);
+											}}
+										/>
+									)}
+								</Field>
+								<ErrorMessage name="tanggal" component="div" className="form-text text-danger" />
+							</div>
 						</FormGroup>
-						<FormGroup>
-							<label className="col-form-label">Judul Dokumen</label>
-							<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
-							<ErrorMessage name="judul" component="div" className="form-text text-danger" />
+						<FormGroup row>
+							<label className="col-md-2 col-form-label">Judul Dokumen</label>
+							<div className="col-md-10">
+								<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
+								<ErrorMessage name="judul" component="div" className="form-text text-danger" />
+							</div>
 						</FormGroup>
 						<FormGroup row>
 							<label className="col-md-2 col-form-label">Upload File Pendukung</label>
@@ -196,7 +200,7 @@ export default class InputEvaluasi extends Component {
 												return (
 													<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 														<input name="dokumen" {...getInputProps()} />
-														<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}</div>
+														<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}</div>
 														<div className="d-flex align-items-center">
 															<small className="ml-auto">
 																<button
@@ -207,7 +211,7 @@ export default class InputEvaluasi extends Component {
 																		form.setFieldValue(field.name, []);
 																	}}
 																>
-																	Clear files
+																	Reset dokumen
 																</button>
 															</small>
 														</div>

components/Pemeriksaan/TableLaporan.js

@@ -9,7 +9,7 @@ function TableLaporan({ listData, to, linkName }) {
 			<div className="card-body">
 				{listData && (
 					<Datatable options={{ responsive: false }}>
-						<table className="table w-100">
+						<table className="table w-100" data-order='[[2, "asc"], [3, "desc"]]'>
 							<thead>
 								<tr>
 									<th>No.Laporan</th>
@@ -39,8 +39,8 @@ function TableLaporan({ listData, to, linkName }) {
 												{/* {data.level == 3 ? <div className="badge badge-success">Tinggi</div> : data.level == 2 ? <div className="badge badge-info">Sedang</div> : <div className="badge badge-warning">Rendah</div>} */}
 												{data.evaluasi?.length ? <div className="badge badge-info">Sudah diperiksa</div> : <div className="badge badge-danger">Belum diperiksa</div>}
 											</td>
-
-											<td>{moment(data.createdAt).fromNow()}</td>
+											{/* <td>{moment(data.createdAt).fromNow()}</td> */}
+											<td>{moment(data.createdAt).format("MM-DD-YYYY")}</td>
 											<td>
 												<div className="ml-auto">
 													<Link

components/PencabutanSanksi/TableSanksi.js

@@ -8,7 +8,7 @@ function TableSanksi({ listData, to, linkName }) {
 		<div className="card b">
 			<div className="card-body">
 				<Datatable options={{ responsive: true }}>
-					<table className="table w-100">
+					<table className="table w-100" data-order='[3, "asc"]'>
 						<thead>
 							<tr>
 								<th>Nomor Sanksi</th>

components/Penjadwalan/TableLaporan.js

@@ -9,7 +9,7 @@ function TableLaporan({ listData, to, linkName }) {
 			<div className="card-body">
 				{listData && (
 					<Datatable options={{ responsive: false }}>
-						<table className="table w-100">
+						<table className="table w-100" data-order='[[2, "desc"], [3, "desc"]]'>
 							<thead>
 								<tr>
 									<th>No.Laporan</th>
@@ -39,8 +39,8 @@ function TableLaporan({ listData, to, linkName }) {
 												{/* {data.level == 3 ? <div className="badge badge-success">Tinggi</div> : data.level == 2 ? <div className="badge badge-info">Sedang</div> : <div className="badge badge-warning">Rendah</div>} */}
 												{data.jadwal ? <div className="badge badge-info">Ada Jadwal</div> : <div className="badge badge-danger">Tidak ada jadwal</div>}
 											</td>
-
-											<td>{moment(data.createdAt).fromNow()}</td>
+											{/* <td>{moment(data.createdAt).fromNow()}</td> */}
+											<td>{moment(data.createdAt).format("MM-DD-YYYY")}</td>
 											<td>
 												<div className="ml-auto">
 													<Link

components/Sanksi/TableLaporan.js

@@ -9,7 +9,7 @@ function TableLaporan({ listData }) {
 			<div className="card-body">
 				{listData && (
 					<Datatable options={{ responsive: false }}>
-						<table className="table w-100">
+						<table className="table w-100" data-order='[[2, "asc"], [3, "desc"]]'>
 							<thead>
 								<tr>
 									<th>No.Laporan</th>
@@ -34,10 +34,9 @@ function TableLaporan({ listData }) {
 													</div>
 												</div>
 											</td>
-											<td>
-												<td>{data.sanksi ? <div className="badge badge-info">Sudah ditetapkan</div> : <div className="badge badge-danger">Belum ditetapkan</div>}</td>
-											</td>
-											<td>{moment(data.createdAt).fromNow()}</td>
+											<td>{data.sanksi ? <div className="badge badge-info">Sudah ditetapkan</div> : <div className="badge badge-danger">Belum ditetapkan</div>}</td>
+											{/* <td>{moment(data.createdAt).fromNow()}</td> */}
+											<td>{moment(data.createdAt).format("MM-DD-YYYY")}</td>
 											<td>
 												<div className="ml-auto">
 													<Link

pages/app/banding/detail.js

@@ -165,7 +165,7 @@ class JawabanBanding extends Component {
 						<div>Jawaban Permohonan Banding</div>
 						<div className="ml-auto">
 							<Link href="/app/banding">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<button className="btn btn-sm btn-secondary text-sm">&lt; Kembali</button>
 							</Link>
 						</div>
 					</div>
@@ -232,7 +232,7 @@ class JawabanBanding extends Component {
 																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																							<input {...getInputProps()} />
 																							<div className="dropzone-previews flex">
-																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
@@ -244,7 +244,7 @@ class JawabanBanding extends Component {
 																											form.setFieldValue(field.name, []);
 																										}}
 																									>
-																										Clear files
+																										Reset dokumen
 																									</button>
 																								</small>
 																							</div>

pages/app/keberatan/detail.js

@@ -170,7 +170,7 @@ class DetailKeberatan extends Component {
 						<div>Permohonan Keberatan</div>
 						<div className="ml-auto">
 							<Link href="/app/keberatan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<button className="btn btn-sm btn-secondary text-sm">&lt; Kembali</button>
 							</Link>
 						</div>
 					</div>
@@ -255,7 +255,7 @@ class DetailKeberatan extends Component {
 																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																							<input {...getInputProps()} />
 																							<div className="dropzone-previews flex">
-																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
@@ -267,7 +267,7 @@ class DetailKeberatan extends Component {
 																											form.setFieldValue(field.name, []);
 																										}}
 																									>
-																										Clear files
+																										Reset dokumen
 																									</button>
 																								</small>
 																							</div>

pages/app/pelaporan/new.js

@@ -50,7 +50,9 @@ class PelaporanNew extends Component {
 								<CardBody>
 									<Row>
 										<Col lg={12}>
-											<p className="lead bb">Informasi Laporan<span className="font-20">(wajib diisi)</span></p>
+											<p className="lead bb">
+												Informasi Laporan<span className="font-20">(wajib diisi)</span>
+											</p>
 											<InputData query={this.props.query} />
 										</Col>
 									</Row>

pages/app/pelaporan/pelaporan_bak.js

@@ -1,902 +0,0 @@
-import React, { Component } from 'react';
-import Router from 'next/router'
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Progress } from 'reactstrap';
-
-import Sparkline from '@/components/Common/Sparklines';
-import Scrollable from '@/components/Common/Scrollable'
-import Datatable from '@/components/Tables/Datatable';
-
-class BugTracker extends Component {
-
-    newReportClick = (e, PT_ID) => {
-        //router = useRouter();
-        //const query = { ptId: PT_ID };
-        //    '/app/profile'
-        e.preventDefault();
-        Router.push(
-            {
-               
-                pathname: '/app/pelaporan.search'
-            }
-        );
-    }
-
-    render() {
-        return (
-            <ContentWrapper>
-                <div className="content-heading">Pelaporan</div>
-                <Row>
-                    <Col lg="4">
-                        {/* Aside card */}
-                        <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={ 48 } />
-                                    </div>
-                                    <div className="ml-auto">
-                                        <div className="col wd-xxs text-right">
-                                            <div className="text-bold text-muted">48%</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="card-body">
-                                <p>Metrics</p>
-                                <div className="row text-center">
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[20,80]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#23b7e5"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Issues</p>
-                                    </div>
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[60,40]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#27c24c"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Bugs</p>
-                                    </div>
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[20,80]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#ff902b"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Hours</p>
-                                    </div>
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[30,70]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#f05050"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Assigned</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <table className="table bb">
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong>Assigned Hours</strong>
-                                        </td>
-                                        <td>68 hs</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Time Consumed</strong>
-                                        </td>
-                                        <td>32 hs</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Issues</strong>
-                                        </td>
-                                        <td>19</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Bugs</strong>
-                                        </td>
-                                        <td>16</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Health</strong>
-                                        </td>
-                                        <td>
-                                            <em className="far fa-smile fa-lg text-warning"></em>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Commits</strong>
-                                        </td>
-                                        <td>140</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Recently closed</strong>
-                                        </td>
-                                        <td>
-                                            <Scrollable height="120px" className="list-group">
-                                                <table className="table table-bordered bg-transparent">
-                                                    <tbody>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:54678</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:55778</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:56878</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:57978</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:1107</a>
-                                                            </td>
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
-                                            </Scrollable>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Last closed on</strong>
-                                        </td>
-                                        <td>12/01/2016</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        {/* end Aside card */}
-                    </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>
-                                {/* <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button> */}
-                                {/* <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fa fa-user-plus"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fas fa-pencil-alt"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fas fa-share"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fa fa-print"></em>
-                                </button> */}
-                            </div>
-                            {/* <div className="ml-auto">
-                                <p className="mb-0 mt-1">19 bugs / 16 issues</p>
-                            </div> */}
-                        </div>
-                        <div className="card b">
-                            <div className="card-body">
-                                <Datatable options={{responsive: true}}>
-                                    <table className="table w-100">
-                                        <thead>
-                                            <tr>
-                                                <th>Type</th>
-                                                <th>#ID</th>
-                                                <th>Description</th>
-                                                <th>Created</th>
-                                                <th>Priority</th>
-                                                <th>Asigned</th>
-                                                <th>Status</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Aliquam felis nibh, ultrices non elementum</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Aliquam condimentum enim a risus cursus blandit.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Sed at libero augue, in euismod tellus.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Praesent lacinia ultricies neque.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Pellentesque habitant morbi tristique</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Integer venenatis ultrices vulputate.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </Datatable>
-                            </div>
-                        </div>
-                    </Col>
-                </Row>
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default BugTracker;
-
-

pages/app/pelaporan/search.js

@@ -16,6 +16,7 @@ class Search extends Component {
 		selectedOptionMulti: [],
 		data: [],
 		pembina: [],
+		loading: false,
 	};
 
 	componentDidMount = async () => {
@@ -61,14 +62,18 @@ class Search extends Component {
 	};
 
 	handleApplyClick = () => {
+		this.setState({ loading: true });
 		this.fetchData();
+		this.setState({ loading: false });
 		if (this.state.data && this.state.data.length) {
 			this.renderTableData();
 		}
 	};
 
 	handleSearchClick = () => {
+		this.setState({ loading: true });
 		this.fetchData();
+		this.setState({ loading: false });
 		if (this.state.data.length) {
 			this.renderTableData();
 		}
@@ -76,6 +81,7 @@ class Search extends Component {
 
 	renderTableData() {
 		return (
+			!this.state.loading &&
 			this.state.data &&
 			this.state.data.map((pt, index) => {
 				return (
@@ -127,14 +133,24 @@ class Search extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg={this.props.user.role.id === 2021 ? 12 : 9}>
+					<Col lg={this.props.user?.role.id === 2021 ? 12 : 9}>
 						<div className="form-group mb-4">
-							<input className="form-control mb-2" type="text" id="searchInput" placeholder="Pencarian Nama Perguruan Tinggi" />
+							<input
+								className="form-control mb-2"
+								type="text"
+								id="searchInput"
+								onKeyPress={(e) => {
+									if (e.key === "Enter") {
+										this.handleApplyClick();
+									}
+								}}
+								placeholder="Pencarian Nama Perguruan Tinggi"
+							/>
 							<div className="d-flex">
 								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
 									Search
 								</button>
-								<div className="ml-auto">{this.props.user.role.id === 2021 && `Pembina: ${this.props.user.lembaga.nama}`}</div>
+								<div className="ml-auto">{this.props.user?.role.id === 2021 && `Pembina: ${this.props.user.lembaga.nama}`}</div>
 							</div>
 						</div>
 						<div className="card card-default">
@@ -153,7 +169,7 @@ class Search extends Component {
 							</div>
 						</div>
 					</Col>
-					{this.props.user.role.id === 2021 ? (
+					{this.props.user?.role.id === 2021 ? (
 						""
 					) : (
 						<Col lg="3">

pages/app/pemantauan/index.js

@@ -123,7 +123,17 @@ class Search extends Component {
 				<Row>
 					<Col lg={this.props.user?.role.id === 2021 ? 12 : 9}>
 						<div className="form-group mb-4">
-							<input className="form-control mb-2" type="text" id="searchInput" placeholder="Pencarian Nama Perguruan Tinggi" />
+							<input
+								className="form-control mb-2"
+								type="text"
+								id="searchInput"
+								placeholder="Pencarian Nama Perguruan Tinggi"
+								onKeyPress={(e) => {
+									if (e.key === "Enter") {
+										this.handleApplyClick();
+									}
+								}}
+							/>
 							<div className="d-flex">
 								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
 									Search

pages/app/pemantauan/timeline.js

@@ -1,39 +1,53 @@
 import React, { Component } from "react";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import Header from "@/components/Main/Header";
-import DetailPT from "@/components/Main/DetailPT";
 import { getLog } from "@/actions/log";
-import { Row, Col } from "reactstrap";
+import { Row, Col, Card, CardBody, Button } from "reactstrap";
 import Timeline from "@/components/Main/Timeline";
 import { getOnePT } from "@/actions/PT";
+import { connect } from "react-redux";
+import { getOneLaporan, getPelaporan } from "../../../actions/pelaporan";
+import DetailLaporan from "@/components/Main/DetailLaporan";
 import Link from "next/link";
 import Loader from "@/components/Common/Loader";
-import { connect } from "react-redux";
+import DetailPT from "@/components/Main/DetailPT";
+import moment from "moment";
+import Datatable from "@/components/Tables/Datatable";
+
 
 class Pemantauan extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			pt: {},
 			log: {},
+			detailLaporanPt: {},
+			pelaporan : {},
+			pt: {},
 		};
 	}
 
+
 	static async getInitialProps({ query }) {
 		return { query };
 	}
 
 	componentDidMount = async () => {
 		const { query, token } = this.props;
-		const log = await getLog(token, query.ptId);
-		this.setState({ log });
-		const pt = await getOnePT(token, query.ptId);
-		this.setState({ pt });
+		const ptId = query.ptId
+		const pelaporan = await getPelaporan(token, {pt_id: ptId});
+		const pt = await getOnePT(token, ptId);
+		this.setState({ pelaporan, pt });
+
 	};
 
-	render() {
-		const { pt, log } = this.state;
+	handleLihatPemantaun = async (e, id_laporan) => {
+		const { token } = this.props;
+		const log = await getLog(token, id_laporan)
+		const detailLaporanPt = await getOneLaporan(token, id_laporan)
+		this.setState({ detailLaporanPt, log });
+	}
 
+	render() {
+		const { detailLaporanPt, log, pt, pelaporan } = this.state;
 		return (
 			<ContentWrapper unwrap>
 				<div className="p-3">
@@ -46,14 +60,89 @@ class Pemantauan extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">{log?.data ? <Timeline data={log.data} /> : <Loader />}</Col>
-						<Col xl="3">{pt?.data ? <DetailPT data={pt.data} /> : <Loader />}</Col>
+<Col xl={9}>
+							<div className="card b">
+								<div className="card-body">
+									{pelaporan.data?.length ? (
+										<Datatable options={{ responsive: false }}>
+											<table className="table w-100">
+												<thead>
+													<tr>
+														<th>No.Laporan</th>
+														<th>Deskripsi Laporan</th>
+														<th>Dibuat Oleh</th>
+														<th>Created</th>
+														<th></th>
+													</tr>
+												</thead>
+												<tbody>
+													{pelaporan.data.map((data) => {
+														return (
+															<tr key={data._id}>
+																<td>{data.no_laporan}</td>
+																<td className="text-nowrap">
+																	<div className="media align-items-center">
+																		<div className="media-body d-flex">
+																			<div>
+
+																				<p>{data.keterangan.length > 35 ? data.keterangan.substring(0, 35) + "..." : data.keterangan}</p>
+																			</div>
+																		</div>
+																	</div>
+																</td>
+																<td>{data.user.isPrivate ? "" : data.user.nama}</td>
+																<td>{moment(data.createdAt).fromNow()}</td>
+																<td>
+																	<div >
+
+																		<Button onClick={(e) => this.handleLihatPemantaun(e, data._id) }>
+																			Detail
+																		</Button>
+
+																	</div>
+																</td>
+															</tr>
+														);
+													})}
+												</tbody>
+											</table>
+										</Datatable>
+									) : pelaporan.data ? "Pelaporan tidak ada" : <Loader />}
+								</div >
+							</div >
+						</Col>
+						<Col xl={3}>{pt?.data ? <DetailPT data={pt.data} /> : <Loader />}</Col>
 					</Row>
+<Row>
+					<Col xl="12">
+						{detailLaporanPt.data ? (
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											{<DetailLaporan data={detailLaporanPt.data} />}
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						) : (
+							<div></div>
+						)}
+					</Col>
+				</Row>
+				<Row>
+					{log.data && (
+						<Col xl={"12"}>
+							<Timeline data={log.data} />
+						</Col>
+					)}
+				</Row>
 				</div>
+
+				
 			</ContentWrapper>
 		);
 	}
 }
-
 const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(Pemantauan);
+export default connect(mapStateToProps)(Pemantauan);

pages/app/pencabutan-sanksi/detail.js

@@ -168,7 +168,7 @@ class JawabanPencabutanSanksi extends Component {
 						<div>Jawaban Permohonan Pencabutan Sanksi</div>
 						<div className="ml-auto">
 							<Link href="/app/pencabutan-sanksi">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<button className="btn btn-sm btn-secondary text-sm">&lt; Kembali</button>
 							</Link>
 						</div>
 					</div>
@@ -249,7 +249,7 @@ class JawabanPencabutanSanksi extends Component {
 																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																							<input {...getInputProps()} />
 																							<div className="dropzone-previews flex">
-																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
@@ -261,7 +261,7 @@ class JawabanPencabutanSanksi extends Component {
 																											form.setFieldValue(field.name, []);
 																										}}
 																									>
-																										Clear files
+																										Reset dokumen
 																									</button>
 																								</small>
 																							</div>

pages/pt/dokumen-perbaikan/detail.js

@@ -151,7 +151,7 @@ class DetailPerbaikanDoc extends Component {
 						<div>Dokumen Perbaikan</div>
 						<div className="ml-auto">
 							<Link href="/pt/dokumen-perbaikan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<button className="btn btn-sm btn-secondary text-sm">&lt; Kembali</button>
 							</Link>
 						</div>
 					</div>
@@ -199,12 +199,12 @@ class DetailPerbaikanDoc extends Component {
 																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																							<input {...getInputProps()} />
 																							<div className="dropzone-previews flex">
-																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
 																									<button type="button" className="btn btn-link" onClick={this.clearFiles}>
-																										Clear files
+																										Reset dokumen
 																									</button>
 																								</small>
 																							</div>

pages/pt/jawaban-banding/detail.js

@@ -39,7 +39,7 @@ class JawabanBanding extends Component {
 						<div>Jawaban Atas Permohonan Banding</div>
 						<div className="ml-auto">
 							<Link href="/pt/jawaban-banding">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<button className="btn btn-sm btn-secondary text-sm">&lt; Kembali</button>
 							</Link>
 						</div>
 					</div>

pages/pt/jawaban-keberatan/detail.js

@@ -50,7 +50,7 @@ class JawabanKeberatan extends Component {
 						<div>Jawaban Atas Permohonan Keberatan</div>
 						<div className="ml-auto">
 							<Link href="/pt/jawaban-keberatan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<button className="btn btn-sm btn-secondary text-sm">&lt; Kembali</button>
 							</Link>
 						</div>
 					</div>

pages/pt/jawaban-pencabutan-sanksi/detail.js

@@ -38,7 +38,7 @@ class DetailJawabanPencabutanSanksi extends Component {
 						<div>Jawaban Permohonan Pencabutan Sanksi</div>
 						<div className="ml-auto">
 							<Link href="/pt/jawaban-pencabutan-sanksi">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<button className="btn btn-sm btn-secondary text-sm">&lt; Kembali</button>
 							</Link>
 						</div>
 					</div>

pages/pt/keberatan/detail.js

@@ -47,7 +47,7 @@ class Keberatan extends Component {
 						<div>Permohonan Keberatan</div>
 						<div className="ml-auto">
 							<Link href="/pt/keberatan">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<button className="btn btn-sm btn-secondary text-sm">&lt; Kembali</button>
 							</Link>
 						</div>
 					</div>

pages/pt/pencabutan-sanksi/detail.js

@@ -141,7 +141,7 @@ class DetailPencabutanSanksi extends Component {
 						<div>Permohonan Pencabutan Sanksi</div>
 						<div className="ml-auto">
 							<Link href="/pt/pencabutan-sanksi">
-								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+								<button className="btn btn-sm btn-secondary text-sm">&lt; Kembali</button>
 							</Link>
 						</div>
 					</div>
@@ -180,12 +180,12 @@ class DetailPencabutanSanksi extends Component {
 																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
 																							<input {...getInputProps()} />
 																							<div className="dropzone-previews flex">
-																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																								{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
 																									<button type="button" className="btn btn-link" onClick={this.clearFiles}>
-																										Clear files
+																										Reset dokumen
 																									</button>
 																								</small>
 																							</div>

styles/app/common/bootstrap-reset.scss

@@ -8,402 +8,398 @@
 // --------------------------------------------------
 
 *:not(.react-grid-Cell):focus {
-    outline: 0 !important
+	outline: 0 !important;
 }
 
 a {
-    outline: none !important;
-    &.text-muted {
-        &:hover,
-        &:focus {
-            color: darken($text-muted, 10%);
-        }
-    }
+	outline: none !important;
+	&.text-muted {
+		&:hover,
+		&:focus {
+			color: darken($text-muted, 10%);
+		}
+	}
 }
 
 hr {
-    border-top: 1px solid $gray-light;
+	border-top: 1px solid $gray-light;
 }
 
 // custom element
 [data-now] {
-    display: inline-block;
+	display: inline-block;
 }
 
 .badge {
-    padding: 0.1875rem 0.4375rem;
-    font-size: 0.75rem;
-    border-radius: 0.625rem;
-    &.badge-warning {
-        color: #fff !important;
-    }
-    &.badge-secondary {
-        background-color: $gray-dark;
-        color: #fff;
-    }
+	padding: 0.1875rem 0.4375rem;
+	font-size: 0.75rem;
+	border-radius: 0.625rem;
+	&.badge-warning {
+		color: #fff !important;
+	}
+	&.badge-secondary {
+		background-color: $gray-dark;
+		color: #fff;
+	}
 }
 
 .list-group {
-    line-height: 1.3;
-    .list-group-item {
-        padding: 10px;
-        color: #555;
-        &.active {
-            color: #fff;
-            .badge {
-                background-color: #fff;
-                color: $primary;
-            }
-        }
-        .card>& {
-            border: 0;
-        }
-    }
-}
-
-.list-group+.card-footer {
-    border-top: 0;
+	line-height: 1.3;
+	.list-group-item {
+		padding: 10px;
+		color: #555;
+		&.active {
+			color: #fff;
+			.badge {
+				background-color: #fff;
+				color: $primary;
+			}
+		}
+		.card > & {
+			border: 0;
+		}
+	}
+}
+
+.list-group + .card-footer {
+	border-top: 0;
 }
 
 .page-header {
-    padding-bottom: 0.59375rem;
-    margin: 2.625rem 0 1.3125rem;
-    border-bottom: 1px solid $gray-light;
+	padding-bottom: 0.59375rem;
+	margin: 2.625rem 0 1.3125rem;
+	border-bottom: 1px solid $gray-light;
 }
 
 .card {
-    border-color: transparent;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-    .card-header {
-        border-bottom: 0;
-        padding: 0.625rem 0.9375rem;
-        background-color: transparent;
-        .card-title {
-            margin-bottom: 0;
-            font-size: 1rem;
-        }
-        a {
-            text-decoration: none !important;
-        }
-    }
+	// border-color: transparent;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+	.card-header {
+		border-bottom: 0;
+		padding: 0.625rem 0.9375rem;
+		background-color: transparent;
+		.card-title {
+			margin-bottom: 0;
+			font-size: 1rem;
+		}
+		a {
+			text-decoration: none !important;
+		}
+	}
 }
 .card-body {
-    padding: 20px; //15px
+	padding: 20px; //15px
 }
 .card-footer {
-    padding: 0.625rem 0.9375rem;
+	padding: 0.625rem 0.9375rem;
 }
 
 .card-default {
+	border-top-width: 3px;
+	border-color: $card-default-border-color;
 
-    border-top-width: 3px;
-    border-color: $card-default-border-color;
-
-    .card-header {
-        background-color: #fff;
-    }
+	.card-header {
+		background-color: #fff;
+	}
 }
 
 .well {
-    border: 1px solid $gray;
+	border: 1px solid $gray;
 }
 
 .jumbotron {
-    border: 1px solid $gray;
-    background-color: #fff;
-    @include media-breakpoint-up(md) {
-        padding: $jumbotron-padding ($jumbotron-padding/2);
-    }
-}
-
-.nav-tabs>.nav-item>.nav-link {
-    font-weight: bold;
-    color: $body-color;
-    background-color: $gray-lighter;
-    margin: 0;
-    border: 1px solid $gray;
-    border-radius: 0;
-    padding: 10px 20px;
-    &.active {
-        background-color: $nav-tabs-link-active-bg;
-        &,
-        &:hover,
-        &:focus {
-            //color: inherit;
-            border-bottom-color: #fff;
-        }
-    }
+	border: 1px solid $gray;
+	background-color: #fff;
+	@include media-breakpoint-up(md) {
+		padding: $jumbotron-padding ($jumbotron-padding/2);
+	}
+}
+
+.nav-tabs > .nav-item > .nav-link {
+	font-weight: bold;
+	color: $body-color;
+	background-color: $gray-lighter;
+	margin: 0;
+	border: 1px solid $gray;
+	border-radius: 0;
+	padding: 10px 20px;
+	&.active {
+		background-color: $nav-tabs-link-active-bg;
+		&,
+		&:hover,
+		&:focus {
+			//color: inherit;
+			border-bottom-color: #fff;
+		}
+	}
 }
 
 .tab-content {
-    padding: 10px 20px;
-    border-style: solid;
-    border-width: 0 1px 1px 1px;
-    border-color: $gray;
-    .nav-pills+& {
-        border: 0;
-        padding: 0;
-    }
-    .p-0 & {
-        padding: 0 !important
-    }
+	padding: 10px 20px;
+	border-style: solid;
+	border-width: 0 1px 1px 1px;
+	border-color: $gray;
+	.nav-pills + & {
+		border: 0;
+		padding: 0;
+	}
+	.p-0 & {
+		padding: 0 !important;
+	}
 }
 
-
 .btn {
-    border-radius: 3px;
-    font-size: 13px;
-    -webkit-appearance: none;
-    outline: none !important; // padding: 0.375rem 1rem;
-    @include transition(all .1s);
-    &.btn-link {
-        box-shadow: none;
-        border: 0;
-    }
-    .input-group & {
-        font-size: 14px;
-        border-color: $input-border-color;
-    }
-    .input-group .form-control-sm+.input-group-btn & {
-        font-size: 0.8125rem;
-        padding: 0.3125rem 0.625rem;
-        margin-left: -1px;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
+	border-radius: 3px;
+	font-size: 13px;
+	-webkit-appearance: none;
+	outline: none !important; // padding: 0.375rem 1rem;
+	@include transition(all 0.1s);
+	&.btn-link {
+		box-shadow: none;
+		border: 0;
+	}
+	.input-group & {
+		font-size: 14px;
+		border-color: $input-border-color;
+	}
+	.input-group .form-control-sm + .input-group-btn & {
+		font-size: 0.8125rem;
+		padding: 0.3125rem 0.625rem;
+		margin-left: -1px;
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
 }
 
 // Override button styles
 .btn {
-    &.btn-warning {
-        color: #fff;
-    }
-    &.btn-outline-warning:not(:disabled) {
-        &:hover, &:active {
-            color: #fff;
-        }
-    }
+	&.btn-warning {
+		color: #fff;
+	}
+	&.btn-outline-warning:not(:disabled) {
+		&:hover,
+		&:active {
+			color: #fff;
+		}
+	}
 }
 
 .btn-secondary {
-    background-color: $btn-secondary-bg;
-    border-color: $btn-secondary-border;
-    color: $btn-secondary-color;
-    &:hover {
-        background-color: #f5f5f5;
-    } // active state override
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active,
-    .show>&.dropdown-toggle {
-        background-color: #f5f5f5;
-        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    }
+	background-color: $btn-secondary-bg;
+	border-color: $btn-secondary-border;
+	color: $btn-secondary-color;
+	&:hover {
+		background-color: #f5f5f5;
+	} // active state override
+	&:not(:disabled):not(.disabled):active,
+	&:not(:disabled):not(.disabled).active,
+	.show > &.dropdown-toggle {
+		background-color: #f5f5f5;
+		box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	}
 }
 
 .btn-outline-secondary {
-    border-color: $btn-secondary-border !important;
-    color: $btn-secondary-color;
-    &:hover {
-        color: $btn-secondary-color;
-        background-color: #f5f5f5 !important;
-    }
-    &:focus {
-        box-shadow: 0 0 0 0.2rem rgba($btn-secondary-border, 0.5);
-    }
+	border-color: $btn-secondary-border !important;
+	color: $btn-secondary-color;
+	&:hover {
+		color: $btn-secondary-color;
+		background-color: #f5f5f5 !important;
+	}
+	&:focus {
+		box-shadow: 0 0 0 0.2rem rgba($btn-secondary-border, 0.5);
+	}
 }
 
-span.btn { -webkit-appearance: none !important; }
+span.btn {
+	-webkit-appearance: none !important;
+}
 
 // FORMS
 .form-control {
-    box-shadow: 0 0 0 #000 !important;
-    font-size: 0.875rem; //14px
-    &:focus {
-        border-color: $input-focus-border-color;
-    }
+	box-shadow: 0 0 0 #000 !important;
+	font-size: 0.875rem; //14px
+	&:focus {
+		border-color: $input-focus-border-color;
+	}
 }
 
 .form-control-sm,
 select.form-control-sm {
-    font-size: .75rem;
-    height: 31px;
+	font-size: 0.75rem;
+	height: 31px;
 }
 
 .custom-select {
-    -webkit-appearance: none;
+	-webkit-appearance: none;
 }
 
 .custom-control-label::before,
 .custom-control-label::after {
-    top: 0.19rem;
+	top: 0.19rem;
 }
 .custom-control-label::before {
-    border: 1px solid $gray;
+	border: 1px solid $gray;
 }
 
 fieldset {
-    padding-bottom: 20px;
-    border-bottom: 1px dashed #eee;
-    margin-bottom: 20px;
-    &.last-child,
-    &:last-child {
-        border-bottom: 0;
-    }
-    .form-group {
-        margin-bottom: 0;
-    }
+	padding-bottom: 20px;
+	border-bottom: 1px dashed #eee;
+	margin-bottom: 20px;
+	&.last-child,
+	&:last-child {
+		border-bottom: 0;
+	}
+	.form-group {
+		margin-bottom: 0;
+	}
 }
 
 .input-group-text {
-    font-size: .875rem; // 14px
+	font-size: 0.875rem; // 14px
 }
 
 @include media-breakpoint-down(sm) {
-    // Remove Input Shadows on iPad
-    input[type="text"],
-    input[type="email"],
-    input[type="search"],
-    input[type="password"] {
-        -webkit-appearance: none;
-    }
+	// Remove Input Shadows on iPad
+	input[type="text"],
+	input[type="email"],
+	input[type="search"],
+	input[type="password"] {
+		-webkit-appearance: none;
+	}
 }
 
 // TABLES
 .table-responsive {
-    overflow-y: hidden;
+	overflow-y: hidden;
 }
 
 .table {
+	// Bottom align for column headings
+	> thead > tr > th {
+		border-bottom-width: 0;
+	} // Account for multiple tbody instances
+	> tbody + tbody {
+		border-bottom-width: 1px;
+	}
 
-    // Bottom align for column headings
-    >thead>tr>th {
-        border-bottom-width: 0;
-    } // Account for multiple tbody instances
-    >tbody+tbody {
-        border-bottom-width: 1px;
-    }
-
-    .form-control {
-        max-width: 100%;
-    }
+	.form-control {
+		max-width: 100%;
+	}
 }
 
 .table-bordered {
-    >thead>tr {
-        >th,
-        >td {
-            border-bottom-width: 1px;
-        }
-    }
+	> thead > tr {
+		> th,
+		> td {
+			border-bottom-width: 1px;
+		}
+	}
 }
 
-
 .progress {
-    @include box-shadow(0 0 0 #000);
-    border-radius: $border-radius-sm;
-    border: 1px solid $progress-bg;
-    background-color: #fff;
-    .progress-bar {
-        @include box-shadow(0 0 0 #000);
-    }
+	@include box-shadow(0 0 0 #000);
+	border-radius: $border-radius-sm;
+	border: 1px solid $progress-bg;
+	background-color: #fff;
+	.progress-bar {
+		@include box-shadow(0 0 0 #000);
+	}
 }
 
 // Popover
 // --------------------------------------------------
 .popover {
-    box-shadow: 0 0 0 #000;
-    border-color: #eee;
-    border-bottom: 2px solid $gray-light;
-    border-radius: $border-radius-sm;
-    .popover-title {
-        border: 0;
-    }
+	box-shadow: 0 0 0 #000;
+	border-color: #eee;
+	border-bottom: 2px solid $gray-light;
+	border-radius: $border-radius-sm;
+	.popover-title {
+		border: 0;
+	}
 }
 
-
 // NAV
 .nav {
-    &.nav-pills {
-        .active>a {
-            background-color: $primary;
-        }
-    }
+	&.nav-pills {
+		.active > a {
+			background-color: $primary;
+		}
+	}
 }
 
 // DROPDOWN
 .dropdown-menu {
-    border-radius: $border-radius-sm;
-    font-size: 14px;
-    padding: 0.3125rem 0;
-    box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px;
-    border-color: $dropdown-border-color;
-    .dropdown-item {
-        line-height: 1.52857143;
-        padding: 0.1875rem 1.25rem;
-    }
+	border-radius: $border-radius-sm;
+	font-size: 14px;
+	padding: 0.3125rem 0;
+	box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px;
+	border-color: $dropdown-border-color;
+	.dropdown-item {
+		line-height: 1.52857143;
+		padding: 0.1875rem 1.25rem;
+	}
 }
 
 .dropdown-header {
-    color: #a1a2a3;
+	color: #a1a2a3;
 }
 
-.navbar-top .navbar-nav>.active>a {
-    color: #999;
-    &:hover,
-    &:focus {
-        color: #d1d2d3;
-    }
+.navbar-top .navbar-nav > .active > a {
+	color: #999;
+	&:hover,
+	&:focus {
+		color: #d1d2d3;
+	}
 }
 
-
-.navbar-default .navbar-nav .open .dropdown-menu>li>a {
-    color: #666;
-    &:hover,
-    &:focus {
-        color: #222;
-    }
+.navbar-default .navbar-nav .open .dropdown-menu > li > a {
+	color: #666;
+	&:hover,
+	&:focus {
+		color: #222;
+	}
 }
 
 // CAROUSEL
 .carousel {
-    .carousel-indicators {
-        bottom: 0;
-    }
-    .carousel-control {
-        &.left,
-        &.right {
-            background-image: none;
-        } // Add support for font awesome
-        em {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            z-index: 5;
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            margin-top: -10px;
-            margin-left: -10px;
-        }
-    }
+	.carousel-indicators {
+		bottom: 0;
+	}
+	.carousel-control {
+		&.left,
+		&.right {
+			background-image: none;
+		} // Add support for font awesome
+		em {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			z-index: 5;
+			display: inline-block;
+			width: 20px;
+			height: 20px;
+			margin-top: -10px;
+			margin-left: -10px;
+		}
+	}
 }
 
 // ALERT
-@each $color,
-$value in $theme-colors {
-    .alert-#{$color} {
-        @include alert-variant($value, $value, #fff);
-    }
+@each $color, $value in $theme-colors {
+	.alert-#{$color} {
+		@include alert-variant($value, $value, #fff);
+	}
 }
 
 .alert-secondary {
-    color: $body-color;
-    border-color: $gray-light;
+	color: $body-color;
+	border-color: $gray-light;
 }
 
 // fix for ie9 (dropdwon no showing)
 .topnavbar,
 .navbar,
 .navbar .dropdown-menu {
-    filter: none !important;
+	filter: none !important;
 }

styles/bootstrap/_images.scss

@@ -6,23 +6,22 @@
 // which weren't expecting the images within themselves to be involuntarily resized.
 // See also https://github.com/twbs/bootstrap/issues/18178
 .img-fluid {
-  position: relative;
-  @include img-fluid();
-  width: 72px;
-  height: 37px;
+	position: relative;
+	@include img-fluid();
+	width: 72px;
+	height: auto;
 }
 
-
 // Image thumbnails
 .img-thumbnail {
-  padding: $thumbnail-padding;
-  background-color: $thumbnail-bg;
-  border: $thumbnail-border-width solid $thumbnail-border-color;
-  @include border-radius($thumbnail-border-radius);
-  @include box-shadow($thumbnail-box-shadow);
-
-  // Keep them at most 100% wide
-  @include img-fluid();
+	padding: $thumbnail-padding;
+	background-color: $thumbnail-bg;
+	border: $thumbnail-border-width solid $thumbnail-border-color;
+	@include border-radius($thumbnail-border-radius);
+	@include box-shadow($thumbnail-box-shadow);
+
+	// Keep them at most 100% wide
+	@include img-fluid();
 }
 
 //
@@ -30,90 +29,93 @@
 //
 
 .figure {
-  // Ensures the caption's text aligns with the image.
-  display: inline-block;
+	// Ensures the caption's text aligns with the image.
+	display: inline-block;
 }
 
 .figure-img {
-  margin-bottom: $spacer / 2;
-  line-height: 1;
+	margin-bottom: $spacer / 2;
+	line-height: 1;
 }
 
 .figure-caption {
-  @include font-size($figure-caption-font-size);
-  color: $figure-caption-color;
+	@include font-size($figure-caption-font-size);
+	color: $figure-caption-color;
 }
 
-.icon-pemantauan{
-  width: 35px;
-  height: 35px;
-  margin-right: -20px;
+.icon-pemantauan {
+	width: 35px;
+	height: 35px;
+	margin-right: -20px;
 }
 
-.icon-buatlaporan{
-  width: 35px;
-  height: 35px;
-  margin-right: -20px;
+.icon-buatlaporan {
+	width: 35px;
+	height: 35px;
+	margin-right: -20px;
 }
 
-.img-text-vputih{
-  width: 55px;
-  height: 20px;
-  margin-left: 10px;
+.img-text-vputih {
+	width: 55px;
+	height: 20px;
+	margin-left: 10px;
 }
-.icon-triangle{
-  width: 20px;
-  margin-right: 15px;
-  margin-left: 15px;
-  border-radius: 5px;
+.icon-triangle {
+	width: 20px;
+	margin-right: 15px;
+	margin-left: 15px;
+	border-radius: 5px;
 }
-.identitas-pelapor{
-  width: 830px;
-  height: 50px;
+.identitas-pelapor {
+	width: 830px;
+	height: 50px;
 }
 .icon-pemantauan {
-  width: 30px;
-  height: 30px;
- 
-  // margin-right: -20px; 
+	width: 30px;
+	height: 30px;
+
+	// margin-right: -20px;
 }
 
 .icon-buatlaporan {
-  width: 30px;
-  height: 30px;
-  // margin-right: -20px; 
+	width: 30px;
+	height: 30px;
+	// margin-right: -20px;
 }
 
 .img-text-vputih {
-  width: 55px;
-  height: 20px;
-  margin-left: 10px; }
+	width: 55px;
+	height: 20px;
+	margin-left: 10px;
+}
 
 .icon-triangle {
-  width: 20px;
-  margin-right: 10px;
-  margin-left: 15px; }
+	width: 20px;
+	margin-right: 10px;
+	margin-left: 15px;
+}
 
 .identitas-pelapor {
-  width: 830px;
-  height: 50px; }
-
-  .img-fluid {
-    position: relative;
-    max-width: 100%;
-    height: auto;
-    width: 72px;
-    height: 37px; }
-  .ditbaga-logo{
-    margin-top: 55%;
-
-  }
-
-  .logo-nav{
-    width: 60%;
-  }
-  .img-login-1{
-    width: 97%;
-    margin-left: auto;
-    margin-right: auto;
-  }
+	width: 830px;
+	height: 50px;
+}
+
+// .img-fluid {
+// 	position: relative;
+// 	max-width: 100%;
+// 	height: auto;
+// 	width: 72px;
+// 	// height: 37px;
+// }
+.ditbaga-logo {
+	margin-top: 55%;
+}
+
+.logo-nav {
+	width: 60%;
+}
+.img-login-1 {
+	width: 97%;
+	margin-left: auto;
+	margin-right: auto;
+}

styles/bootstrap/mixins/_buttons.scss

@@ -4,107 +4,107 @@
 // and disabled options for all buttons
 
 @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
-  color: color-yiq($background);
-  @include gradient-bg($background);
-  border-color: $border;
-  @include box-shadow($btn-box-shadow);
+	color: color-yiq($background);
+	@include gradient-bg($background);
+	// border-color: $border;
+	@include box-shadow($btn-box-shadow);
 
-  @include hover() {
-    color: color-yiq($hover-background);
-    @include gradient-bg($hover-background);
-    border-color: $hover-border;
-  }
+	@include hover() {
+		color: color-yiq($hover-background);
+		@include gradient-bg($hover-background);
+		border-color: $hover-border;
+	}
 
-  &:focus,
-  &.focus {
-    color: color-yiq($hover-background);
-    @include gradient-bg($hover-background);
-    border-color: $hover-border;
-    @if $enable-shadows {
-      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
-    }
-  }
+	&:focus,
+	&.focus {
+		color: color-yiq($hover-background);
+		@include gradient-bg($hover-background);
+		border-color: $hover-border;
+		@if $enable-shadows {
+			@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), 0.5));
+		} @else {
+			// Avoid using mixin so we can pass custom focus shadow properly
+			box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), 0.5);
+		}
+	}
 
-  // Disabled comes first so active can properly restyle
-  &.disabled,
-  &:disabled {
-    color: color-yiq($background);
-    background-color: $background;
-    border-color: $border;
-    // Remove CSS gradients if they're enabled
-    @if $enable-gradients {
-      background-image: none;
-    }
-  }
+	// Disabled comes first so active can properly restyle
+	&.disabled,
+	&:disabled {
+		color: color-yiq($background);
+		background-color: $background;
+		border-color: $border;
+		// Remove CSS gradients if they're enabled
+		@if $enable-gradients {
+			background-image: none;
+		}
+	}
 
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active,
-  .show > &.dropdown-toggle {
-    color: color-yiq($active-background);
-    background-color: $active-background;
-    @if $enable-gradients {
-      background-image: none; // Remove the gradient for the pressed/active state
-    }
-    border-color: $active-border;
+	&:not(:disabled):not(.disabled):active,
+	&:not(:disabled):not(.disabled).active,
+	.show > &.dropdown-toggle {
+		color: color-yiq($active-background);
+		background-color: $active-background;
+		@if $enable-gradients {
+			background-image: none; // Remove the gradient for the pressed/active state
+		}
+		border-color: $active-border;
 
-    &:focus {
-      @if $enable-shadows and $btn-active-box-shadow != none {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
-      } @else {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
-      }
-    }
-  }
+		&:focus {
+			@if $enable-shadows and $btn-active-box-shadow != none {
+				@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), 0.5));
+			} @else {
+				// Avoid using mixin so we can pass custom focus shadow properly
+				box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), 0.5);
+			}
+		}
+	}
 }
 
 @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
-  color: $color;
-  border-color: $color;
+	color: $color;
+	border-color: $color;
 
-  @include hover() {
-    color: $color-hover;
-    background-color: $active-background;
-    border-color: $active-border;
-  }
+	@include hover() {
+		color: $color-hover;
+		background-color: $active-background;
+		border-color: $active-border;
+	}
 
-  &:focus,
-  &.focus {
-    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-  }
+	&:focus,
+	&.focus {
+		box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
+	}
 
-  &.disabled,
-  &:disabled {
-    color: $color;
-    background-color: transparent;
-  }
+	&.disabled,
+	&:disabled {
+		color: $color;
+		background-color: transparent;
+	}
 
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active,
-  .show > &.dropdown-toggle {
-    color: color-yiq($active-background);
-    background-color: $active-background;
-    border-color: $active-border;
+	&:not(:disabled):not(.disabled):active,
+	&:not(:disabled):not(.disabled).active,
+	.show > &.dropdown-toggle {
+		color: color-yiq($active-background);
+		background-color: $active-background;
+		border-color: $active-border;
 
-    &:focus {
-      @if $enable-shadows and $btn-active-box-shadow != none {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
-      } @else {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-      }
-    }
-  }
+		&:focus {
+			@if $enable-shadows and $btn-active-box-shadow != none {
+				@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, 0.5));
+			} @else {
+				// Avoid using mixin so we can pass custom focus shadow properly
+				box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
+			}
+		}
+	}
 }
 
 // Button sizes
 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
-  padding: $padding-y $padding-x;
-  @include font-size($font-size);
-  line-height: $line-height;
-  // Manually declare to provide an override to the browser default
-  @include border-radius($border-radius, 0);
+	padding: $padding-y $padding-x;
+	@include font-size($font-size);
+	line-height: $line-height;
+	// Manually declare to provide an override to the browser default
+	@include border-radius($border-radius, 0);
 }