11-07, issue no 2

package-lock.json

@@ -3793,6 +3793,14 @@
 			"resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
 			"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
 		},
+		"copy-to-clipboard": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+			"integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+			"requires": {
+				"toggle-selection": "^1.0.6"
+			}
+		},
 		"core-js": {
 			"version": "2.5.7",
 			"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
@@ -8654,6 +8662,27 @@
 				"tinycolor2": "^1.4.1"
 			}
 		},
+		"react-copy-to-clipboard": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
+			"integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
+			"requires": {
+				"copy-to-clipboard": "^3.3.1",
+				"prop-types": "^15.8.1"
+			},
+			"dependencies": {
+				"prop-types": {
+					"version": "15.8.1",
+					"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+					"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+					"requires": {
+						"loose-envify": "^1.4.0",
+						"object-assign": "^4.1.1",
+						"react-is": "^16.13.1"
+					}
+				}
+			}
+		},
 		"react-data-grid": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/react-data-grid/-/react-data-grid-6.1.0.tgz",
@@ -10558,6 +10587,11 @@
 				"repeat-string": "^1.6.1"
 			}
 		},
+		"toggle-selection": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+			"integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+		},
 		"toidentifier": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",

package.json

@@ -80,6 +80,7 @@
 		"react-chartist": "0.14.4",
 		"react-chartjs-2": "2.11.1",
 		"react-color": "2.19.3",
+		"react-copy-to-clipboard": "^5.1.0",
 		"react-data-grid": "6.1.0",
 		"react-datetime": "2.16.3",
 		"react-dnd": "6.0.0",

pages/app/index.js

@@ -1,106 +1,151 @@
 import React, { Component } from "react";
 import BasePage from "@/components/Layout/BasePage";
-import { Row, Col, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse, Jumbotron, Button } from "reactstrap";
+import {
+  Row,
+  Col,
+  Navbar,
+  NavItem,
+  NavLink,
+  NavbarBrand,
+  NavbarToggler,
+  Nav,
+  Collapse,
+  Jumbotron,
+  Button,
+} from "reactstrap";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Link from "next/link";
 import Login from "@/components/Main/Login";
 
 const menu = [
-	{
-		title: "Home",
-		path: "/app",
-	},
-	{
-		title: "Buat Laporan",
-		path: "/laporan/new",
-	},
-	{
-		title: "Pemantauan",
-		path: "/pemantauan",
-	},
+  {
+    title: "Home",
+    path: "/app",
+  },
+  {
+    title: "Buat Laporan",
+    path: "/laporan/new",
+  },
+  {
+    title: "Pemantauan",
+    path: "/pemantauan",
+  },
 ];
 class App extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			isOpen: false,
-		};
-	}
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+    };
+  }
 
-	static getInitialProps = ({ pathname }) => ({ pathname });
+  static getInitialProps = ({ pathname }) => ({ pathname });
 
-	toggleCollapse = () => {
-		this.setState({
-			isOpen: !this.state.isOpen,
-		});
-	};
+  toggleCollapse = () => {
+    this.setState({
+      isOpen: !this.state.isOpen,
+    });
+  };
 
-	render() {
-		return (
-			<div>
-				<Navbar className="navbar-color" expand="md" dark>
-					<NavbarBrand href="/">
-						<img className="width-133" src="/static/img/Logo-Sidali.png" alt="App Logo" />
-					</NavbarBrand>
-					<NavbarToggler onClick={this.toggleCollapse} />
-					<Collapse isOpen={this.state.isOpen} navbar>
-						<Nav className="ml-auto" navbar>
-							{menu.map((e) => (
-								<NavItem active={e.path === this.props.pathname ? true : false}>
-									<Link href={e.path}>
-										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
-									</Link>
-								</NavItem>
-							))}
-						</Nav>
-					</Collapse>
-				</Navbar>
-				<ContentWrapper>
-					<Jumbotron>
-						<Row className="home-1">
-							<Col lg={8} className="d-flex flex-column justify-content-center align-items-start">
-								<h1 className="display-5 home-2 txt-size">Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi pada Pendidikan Tinggi Akademik</h1>
-								<p className="lead txt-size">Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara Pendidikan Tinggi Akademik</p>
-								<hr className="my-4" />
-								<p className="txt-size">Disediakan kepada masyarakat untuk melaporkan pelanggaran perguruan tinggi yang menyelenggarakan pendidikan tinggi akademik</p>
-								<p className="lead">
-									{/* <Link href="/laporan/new">
+  render() {
+    return (
+      <div>
+        <Navbar className="navbar-color" expand="md" dark>
+          <NavbarBrand href="/">
+            <img
+              className="width-133"
+              src="/static/img/Logo-Sidali.png"
+              alt="App Logo"
+            />
+          </NavbarBrand>
+          <NavbarToggler onClick={this.toggleCollapse} />
+          <Collapse isOpen={this.state.isOpen} navbar>
+            <Nav className="ml-auto" navbar>
+              {menu.map((e) => (
+                <NavItem active={e.path === this.props.pathname ? true : false}>
+                  <Link href={e.path}>
+                    <NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
+                  </Link>
+                </NavItem>
+              ))}
+            </Nav>
+          </Collapse>
+        </Navbar>
+        <ContentWrapper>
+          <Jumbotron>
+            <Row className="home-1">
+              <Col
+                lg={8}
+                className="d-flex flex-column justify-content-center align-items-start"
+              >
+                <h1 className="display-5 home-2 txt-size">
+                  Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi
+                  pada Pendidikan Tinggi Akademik
+                </h1>
+                <p className="lead txt-size">
+                  Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara
+                  Pendidikan Tinggi Akademik
+                </p>
+                <hr className="my-4" />
+                <p className="txt-size">
+                  Disediakan kepada masyarakat untuk melaporkan pelanggaran
+                  perguruan tinggi yang menyelenggarakan pendidikan tinggi
+                  akademik
+                </p>
+                <p className="lead">
+                  {/* <Link href="/laporan/new">
 										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
 									</Link> */}
-									<Link href="/laporan/new">
-										<span className="btn-radius">
-											<Button color="" className="btn-labeled">
-												<span className="btn-label">
-													<img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon" />
-												</span>
-												<text className="text-button-home-1 font-color-white">Buat Laporan</text>
-											</Button>
-										</span>
-									</Link>
-									<Link href="/pemantauan">
-										<span className="btn-radius">
-											<Button color className="btn-labeled-2">
-												<span className="btn-label">
-													<img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon" />
-												</span>
-												<text className="text-button-home-1 font-color-white">Pemantauan</text>
-											</Button>
-										</span>
-									</Link>
-								</p>
-								<div>
-									<img className="ditbaga-logo" src="/static/img/ditbaga-logo.png" alt="applogo" />
-								</div>
-							</Col>
-							<Col>
-								<Login />
-							</Col>
-						</Row>
-					</Jumbotron>
-				</ContentWrapper>
-			</div>
-		);
-	}
+                  <Link href="/laporan/new">
+                    <span className="btn-radius">
+                      <Button color="" className="btn-labeled">
+                        <span className="btn-label">
+                          <img
+                            className="icon-buatlaporan"
+                            src="/static/img/icon-buat-laporan.png"
+                            alt="icon"
+                          />
+                        </span>
+                        <text className="text-button-home-1 font-color-white">
+                          Buat Laporan
+                        </text>
+                      </Button>
+                    </span>
+                  </Link>
+                  <Link href="/pemantauan">
+                    <span className="btn-radius">
+                      <Button color className="btn-labeled-2">
+                        <span className="btn-label">
+                          <img
+                            className="icon-pemantauan"
+                            src="/static/img/icon-pemantauan.png"
+                            alt="icon"
+                          />
+                        </span>
+                        <text className="text-button-home-1 font-color-white">
+                          Pemantauan
+                        </text>
+                      </Button>
+                    </span>
+                  </Link>
+                </p>
+                <div>
+                  <img
+                    className="ditbaga-logo"
+                    src="/static/img/ditbaga-logo.png"
+                    alt="applogo"
+                  />
+                </div>
+              </Col>
+              <Col>
+                <Login />
+              </Col>
+            </Row>
+          </Jumbotron>
+        </ContentWrapper>
+      </div>
+    );
+  }
 }
 
 App.Layout = BasePage;

pages/laporan/new/index.js

@@ -7,6 +7,7 @@ import { createLaporanPublic } from "@/actions/pelaporan";
 import { notifLaporanBaru } from "@/actions/notifikasi";
 import Select from "react-select";
 import AsyncSelect from "react-select/async";
+import { CopyToClipboard } from "react-copy-to-clipboard";
 import {
   Row,
   Col,
@@ -327,6 +328,7 @@ class App extends Component {
                     validationSchema={laporanSchema}
                     onSubmit={async (data) => {
                       this.toggleModal();
+                      this.setState({ data, no_laporan: data.no_laporan });
                       this.setState({ data, no_hp: data.no_hp });
                       const user = await this.createUser(data);
                       const token = user.data.token;
@@ -356,10 +358,7 @@ class App extends Component {
                       <FormGroup row>
                         <label className="col-md-2 col-form-label">
                           Nomor Aktif
-                          <span className="star-color">
-                            {" "}
-                            &#40;opsional&#41;
-                          </span>
+                          <span> &#40;opsional&#41;</span>
                         </label>
                         <div className="col-md-10">
                           <Field name="no_hp">
@@ -623,16 +622,46 @@ class App extends Component {
             <form className="form-horizontal">
               <ModalBody>
                 <FormGroup>
-                  <label>Masukkan Kode Verifikasi</label>
-                  <div>
-                    <Input
-                      onChange={(e) => this.setState({ kode: e.target.value })}
-                      type="text"
-                    />
+                  <div className="">
+                    <label className="modals-verifikasi font-color-white">
+                      Masukkan Kode Verifikasi
+                    </label>
+                    <div className="border-2">
+                      <Input
+                        className="border-2"
+                        onChange={(e) =>
+                          this.setState({ kode: e.target.value })
+                        }
+                        type="text"
+                      />
+                    </div>
+                    <p>
+                      *Kode verifikasi terkirim ke nomor WA {this.state.no_hp}
+                    </p>
                   </div>
-                  <p>
-                    *Kode verifikasi terkirim ke nomor WA {this.state.no_hp}
+
+                  <p className="font-color-black">
+                    NOTE : Diharapkan pelapor dapat mencatat ataupun mengingat
+                    nomor laporan di bawah ini untuk mempermudah proses
+                    selanjutnya.
                   </p>
+                  <div className="modals">
+                    <label className="modals font-color-white font-20 ">
+                      Nomor Laporan : {this.state.no_laporan}
+                    </label>
+                    <CopyToClipboard
+                      text={this.state.no_laporan}
+                      options={{ asHtml: true }}
+                    >
+                      <Button color className="btn-verif">
+                        <img
+                          src="/static/img/icon-copy.png"
+                          alt="icon-copy"
+                          width="20"
+                        />
+                      </Button>
+                    </CopyToClipboard>
+                  </div>
                   {this.state.error && (
                     <div className="form-text text-danger">
                       {this.state.error}
@@ -642,15 +671,19 @@ class App extends Component {
               </ModalBody>
               <ModalFooter>
                 <Button
-                  color="info"
+                  className="color-3e3a8e"
+                  color
                   onClick={async () => {
                     await this.createLaporan(this.state.token);
                   }}
                 >
-                  Buat Laporan Tanpa Kode Verifikasi
+                  <span className="font-color-white">
+                    Buat Laporan Tanpa Kode Verifikasi
+                  </span>
                 </Button>
                 <Button
-                  color="primary"
+                  className="color-3e3a8e"
+                  color
                   onClick={async () => {
                     if (this.state.kode) {
                       await this.createLaporan(
@@ -662,7 +695,7 @@ class App extends Component {
                     }
                   }}
                 >
-                  Kirim
+                  <span className="font-color-white">Kirim</span>
                 </Button>
               </ModalFooter>
             </form>

styles/bootstrap/_buttons.scss

@@ -5,56 +5,62 @@
 //
 
 .btn {
-	display: inline-block;
-	font-family: $btn-font-family;
-	font-weight: $btn-font-weight;
-	color: $body-color;
-	text-align: center;
-	text-decoration: if($link-decoration == none, null, none);
-	white-space: $btn-white-space;
-	vertical-align: middle;
-	user-select: none;
-	background-color: transparent;
-	border: $btn-border-width solid transparent;
-	@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-	@include transition($btn-transition);
+  display: inline-block;
+  font-family: $btn-font-family;
+  font-weight: $btn-font-weight;
+  color: $body-color;
+  text-align: center;
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: $btn-white-space;
+  vertical-align: middle;
+  user-select: none;
+  background-color: transparent;
+  border: $btn-border-width solid transparent;
+  @include button-size(
+    $btn-padding-y,
+    $btn-padding-x,
+    $btn-font-size,
+    $btn-line-height,
+    $btn-border-radius
+  );
+  @include transition($btn-transition);
 
-	@include hover() {
-		color: $body-color;
-		text-decoration: none;
-	}
+  @include hover() {
+    color: $body-color;
+    text-decoration: none;
+  }
 
-	&:focus,
-	&.focus {
-		outline: 0;
-		box-shadow: $btn-focus-box-shadow;
-	}
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: $btn-focus-box-shadow;
+  }
 
-	// Disabled comes first so active can properly restyle
-	&.disabled,
-	&:disabled {
-		opacity: $btn-disabled-opacity;
-		@include box-shadow(none);
-	}
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+    @include box-shadow(none);
+  }
 
-	&:not(:disabled):not(.disabled) {
-		cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
+  &:not(:disabled):not(.disabled) {
+    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
 
-		&:active,
-		&.active {
-			@include box-shadow($btn-active-box-shadow);
+    &:active,
+    &.active {
+      @include box-shadow($btn-active-box-shadow);
 
-			&:focus {
-				@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
-			}
-		}
-	}
+      &:focus {
+        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      }
+    }
+  }
 }
 
 // Future-proof disabling of clicks on `<a>` elements
 a.btn.disabled,
 fieldset:disabled a.btn {
-	pointer-events: none;
+  pointer-events: none;
 }
 
 //
@@ -62,15 +68,15 @@ fieldset:disabled a.btn {
 //
 
 @each $color, $value in $theme-colors {
-	.btn-#{$color} {
-		@include button-variant($value, $value);
-	}
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
 }
 
 @each $color, $value in $theme-colors {
-	.btn-outline-#{$color} {
-		@include button-outline-variant($value);
-	}
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
 }
 
 //
@@ -79,27 +85,27 @@ fieldset:disabled a.btn {
 
 // Make a button look and behave like a link
 .btn-link {
-	font-weight: $font-weight-normal;
-	color: $link-color;
-	text-decoration: $link-decoration;
+  font-weight: $font-weight-normal;
+  color: $link-color;
+  text-decoration: $link-decoration;
 
-	@include hover() {
-		color: $link-hover-color;
-		text-decoration: $link-hover-decoration;
-	}
+  @include hover() {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
 
-	&:focus,
-	&.focus {
-		text-decoration: $link-hover-decoration;
-	}
+  &:focus,
+  &.focus {
+    text-decoration: $link-hover-decoration;
+  }
 
-	&:disabled,
-	&.disabled {
-		color: $btn-link-disabled-color;
-		pointer-events: none;
-	}
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
+    pointer-events: none;
+  }
 
-	// No need for an active state here
+  // No need for an active state here
 }
 
 //
@@ -107,11 +113,23 @@ fieldset:disabled a.btn {
 //
 
 .btn-lg {
-	@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+  @include button-size(
+    $btn-padding-y-lg,
+    $btn-padding-x-lg,
+    $btn-font-size-lg,
+    $btn-line-height-lg,
+    $btn-border-radius-lg
+  );
 }
 
 .btn-sm {
-	@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+  @include button-size(
+    $btn-padding-y-sm,
+    $btn-padding-x-sm,
+    $btn-font-size-sm,
+    $btn-line-height-sm,
+    $btn-border-radius-sm
+  );
 }
 
 //
@@ -119,159 +137,185 @@ fieldset:disabled a.btn {
 //
 
 .btn-block {
-	display: block;
-	width: 100%;
+  display: block;
+  width: 100%;
 
-	// Vertically space out multiple block buttons
-	+ .btn-block {
-		margin-top: $btn-block-spacing-y;
-	}
+  // Vertically space out multiple block buttons
+  + .btn-block {
+    margin-top: $btn-block-spacing-y;
+  }
 }
 
 // Specificity overrides
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
-	&.btn-block {
-		width: 100%;
-	}
+  &.btn-block {
+    width: 100%;
+  }
 }
-.posisi-btn-1 .button-kirimlaporan{
-	border-radius: 5px;
+.posisi-btn-1 .button-kirimlaporan {
+  border-radius: 5px;
 }
 .button-kirimlaporan {
-	// background: rgba(0, 0, 0, 0.05);
-	display: inline-block;
-	background-color: #6fb9de;
-	width: 150px;
-	height: 33px;
-	margin-bottom: -15px;
-	
+  // background: rgba(0, 0, 0, 0.05);
+  display: inline-block;
+  background-color: #6fb9de;
+  width: 150px;
+  height: 33px;
+  margin-bottom: -15px;
 }
 .text-kirimlaporan {
-	font-weight: 500;
-	font-size: 17px;
-	letter-spacing: 0.02em;
-	text-align: center;
-	padding-bottom: 5px;
+  font-weight: 500;
+  font-size: 17px;
+  letter-spacing: 0.02em;
+  text-align: center;
+  padding-bottom: 5px;
 }
 .posisi-btn-1 .button-lihatpemantauan {
-	border-radius: 5px;
-	position: relative;
-	margin-left: auto;
-	// background: rgba(0, 0, 0, 0.05);
-	display: inline-block;
-	background-color: #3E3A8E;
-	width: 160px;
-	height: 35px;
-	margin-bottom: -5px;
-	
+  border-radius: 5px;
+  position: relative;
+  margin-left: auto;
+  // background: rgba(0, 0, 0, 0.05);
+  display: inline-block;
+  background-color: #3e3a8e;
+  width: 160px;
+  height: 35px;
+  margin-bottom: -5px;
 }
 .text-lihatpemantauan {
-	// font-weight: 500;
-	font-size: 16px;
-	letter-spacing: 0.02em;
-	text-align: center;
-	// padding-bottom: 5px;
-	margin: -5px;
+  // font-weight: 500;
+  font-size: 16px;
+  letter-spacing: 0.02em;
+  text-align: center;
+  // padding-bottom: 5px;
+  margin: -5px;
 }
 .btn-labeled {
-	padding-top: 0;
-	padding-bottom: 0;
-	margin-right: 20px;
-	margin-top: 3%;
-	background: #3E3A8E;
-	display: inline;
-	border-radius: 7px;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-right: 20px;
+  margin-top: 3%;
+  background: #3e3a8e;
+  display: inline;
+  border-radius: 7px;
 }
 .btn-labeled-2 {
-	padding-top: 0;
-	padding-bottom: 0;
-	margin-top: 3%;
-	background: #3E3A8E;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 3%;
+  background: #3e3a8e;
 }
 .btn-login {
-	background: #3E3A8E;
+  background: #3e3a8e;
 }
 .navbar-color {
-	background-color: #3E3A8E;
+  background-color: #3e3a8e;
 }
 .posisi-btn-1 {
-	position: relative;
-	margin-left: auto;
-	padding-right: 20px;
+  position: relative;
+  margin-left: auto;
+  padding-right: 20px;
 }
 .tengah {
-	text-align: center;
-	padding: 30px;
+  text-align: center;
+  padding: 30px;
 }
 .btn-simpanpenjadwalan {
-	margin-left: auto;
-	width: 100px;
+  margin-left: auto;
+  width: 100px;
 }
 .btn-colorpenjadwalan {
-	// display: inline-block;
-	background-color: #3e3a8e;
-	height: 35px;
+  // display: inline-block;
+  background-color: #3e3a8e;
+  height: 35px;
 }
 .text-btn-penjadwalan-1 {
-	letter-spacing: 0.02em;
-	text-align: center;
+  letter-spacing: 0.02em;
+  text-align: center;
 }
 .btn-simpanjadwal {
-	margin-left: auto;
-	width: 100px;
-	margin-top: 20px;
-	margin-bottom: 15px;
-}
-.btn-radius .btn-labeled-2{
-	border-radius: 7px;
-	display: inline;
-	border: 0;
-}
-.btn-radius .btn-labeled{
-	border-radius: 7px;
-	display: inline;
-	border: 0;
-}
-.btn-radius .btn-login{
-	border-radius: 7px;
-	border: 0;
-}
-.btn-header{
-	display: inline-block;
-	background-color: #3E3A8E;
-	width: auto;
-	height: 34px;
-	margin-left: 5px;
-	border: 0;
-}
-.margin-l-5{
-	margin-right: 5px;
-	display: inline;
-}
-.btn-radius .button-kirimlaporan{
-	border: 0;
-	background-color: #3E3A8E;
-}
-.btn-radius .button-lihatpemantauan{
-	border: 0;
-}
-.button-hidden{
-	border: 0;
-	padding: 0;
-	
-}
-.color-3e3a8e{
-	background-color: #3E3A8E;
-	color: #3E3A8E;
-}
-.margin-left-auto{
-	float: right;
-	margin-top: -3px;
-}
-.icon-laporan-baru{
-	margin-left: 5px;
-	// margin-right: -8px;
-	width: 13px;
-}
+  margin-left: auto;
+  width: 100px;
+  margin-top: 20px;
+  margin-bottom: 15px;
+}
+.btn-radius .btn-labeled-2 {
+  border-radius: 7px;
+  display: inline;
+  border: 0;
+}
+.btn-radius .btn-labeled {
+  border-radius: 7px;
+  display: inline;
+  border: 0;
+}
+.btn-radius .btn-login {
+  border-radius: 7px;
+  border: 0;
+}
+.btn-header {
+  display: inline-block;
+  background-color: #3e3a8e;
+  width: auto;
+  height: 34px;
+  margin-left: 5px;
+  border: 0;
+}
+.margin-l-5 {
+  margin-right: 5px;
+  display: inline;
+}
+.btn-radius .button-kirimlaporan {
+  border: 0;
+  background-color: #3e3a8e;
+}
+.btn-radius .button-lihatpemantauan {
+  border: 0;
+}
+.button-hidden {
+  border: 0;
+  padding: 0;
+}
+.color-3e3a8e {
+  background-color: #3e3a8e;
+  color: #3e3a8e;
+}
+.margin-left-auto {
+  float: right;
+  margin-top: -3px;
+}
+.icon-laporan-baru {
+  margin-left: 5px;
+  // margin-right: -8px;
+  width: 13px;
+}
+.modals {
+  // height: 40px;
+  background-color: #3e3a8e;
+  padding: 5px;
+  margin-bottom: -2px;
+  border-radius: 5px;
+}
+.modals-1 {
+  background-color: #b8b8b8;
+  padding: 10px;
+  border-radius: 5px;
+}
+.modals-verifikasi {
+  background-color: #3e3a8e;
+  padding: 5px;
+  border-radius: 5px;
+}
+.btn-verif {
+  background-color: Transparent;
+  background-repeat: no-repeat;
+  border: none;
+  cursor: pointer;
+  overflow: hidden;
+  border: 0;
+  padding: 0;
+  margin-bottom: 3px;
+  float: right;
+  margin-bottom: auto;
+}

styles/bootstrap/_card.scss

@@ -3,77 +3,77 @@
 //
 
 .card {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-	height: $card-height;
-	word-wrap: break-word;
-	background-color: $card-bg;
-	background-clip: border-box;
-	border: $card-border-width solid $card-border-color;
-	@include border-radius($card-border-radius);
-
-	> hr {
-		margin-right: 0;
-		margin-left: 0;
-	}
-
-	> .list-group {
-		border-top: inherit;
-		border-bottom: inherit;
-
-		&:first-child {
-			border-top-width: 0;
-			@include border-top-radius($card-inner-border-radius);
-		}
-
-		&:last-child {
-			border-bottom-width: 0;
-			@include border-bottom-radius($card-inner-border-radius);
-		}
-	}
-
-	// Due to specificity of the above selector (`.card > .list-group`), we must
-	// use a child selector here to prevent double borders.
-	> .card-header + .list-group,
-	> .list-group + .card-footer {
-		border-top: 0;
-	}
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+  height: $card-height;
+  word-wrap: break-word;
+  background-color: $card-bg;
+  background-clip: border-box;
+  border: $card-border-width solid $card-border-color;
+  @include border-radius($card-border-radius);
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > .list-group {
+    border-top: inherit;
+    border-bottom: inherit;
+
+    &:first-child {
+      border-top-width: 0;
+      @include border-top-radius($card-inner-border-radius);
+    }
+
+    &:last-child {
+      border-bottom-width: 0;
+      @include border-bottom-radius($card-inner-border-radius);
+    }
+  }
+
+  // Due to specificity of the above selector (`.card > .list-group`), we must
+  // use a child selector here to prevent double borders.
+  > .card-header + .list-group,
+  > .list-group + .card-footer {
+    border-top: 0;
+  }
 }
 
 .card-body {
-	// Enable `flex-grow: 1` for decks and groups so that card blocks take up
-	// as much space as possible, ensuring footers are aligned to the bottom.
-	flex: 1 1 auto;
-	// Workaround for the image size bug in IE
-	// See: https://github.com/twbs/bootstrap/pull/28855
-	min-height: 1px;
-	padding: $card-spacer-x;
-	color: $card-color;
+  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
+  // Workaround for the image size bug in IE
+  // See: https://github.com/twbs/bootstrap/pull/28855
+  min-height: 1px;
+  padding: $card-spacer-x;
+  color: $card-color;
 }
 
 .card-title {
-	margin-bottom: $card-spacer-y;
+  margin-bottom: $card-spacer-y;
 }
 
 .card-subtitle {
-	margin-top: -$card-spacer-y / 2;
-	margin-bottom: 0;
+  margin-top: -$card-spacer-y / 2;
+  margin-bottom: 0;
 }
 
 .card-text:last-child {
-	margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .card-link {
-	@include hover() {
-		text-decoration: none;
-	}
+  @include hover() {
+    text-decoration: none;
+  }
 
-	+ .card-link {
-		margin-left: $card-spacer-x;
-	}
+  + .card-link {
+    margin-left: $card-spacer-x;
+  }
 }
 
 //
@@ -81,26 +81,30 @@
 //
 
 .card-header {
-	padding: $card-spacer-y $card-spacer-x;
-	margin-bottom: 0; // Removes the default margin-bottom of <hN>
-	color: $card-cap-color;
-	background-color: $card-cap-bg;
-	border-bottom: $card-border-width solid $card-border-color;
-
-	&:first-child {
-		@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
-	}
+  padding: $card-spacer-y $card-spacer-x;
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
+  color: $card-cap-color;
+  background-color: $card-cap-bg;
+  border-bottom: $card-border-width solid $card-border-color;
+
+  &:first-child {
+    @include border-radius(
+      $card-inner-border-radius $card-inner-border-radius 0 0
+    );
+  }
 }
 
 .card-footer {
-	padding: $card-spacer-y $card-spacer-x;
-	color: $card-cap-color;
-	background-color: $card-cap-bg;
-	border-top: $card-border-width solid $card-border-color;
-
-	&:last-child {
-		@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
-	}
+  padding: $card-spacer-y $card-spacer-x;
+  color: $card-cap-color;
+  background-color: $card-cap-bg;
+  border-top: $card-border-width solid $card-border-color;
+
+  &:last-child {
+    @include border-radius(
+      0 0 $card-inner-border-radius $card-inner-border-radius
+    );
+  }
 }
 
 //
@@ -108,74 +112,74 @@
 //
 
 .card-header-tabs {
-	margin-right: -$card-spacer-x / 2;
-	margin-bottom: -$card-spacer-y;
-	margin-left: -$card-spacer-x / 2;
-	border-bottom: 0;
+  margin-right: -$card-spacer-x / 2;
+  margin-bottom: -$card-spacer-y;
+  margin-left: -$card-spacer-x / 2;
+  border-bottom: 0;
 }
 
 .card-header-pills {
-	margin-right: -$card-spacer-x / 2;
-	margin-left: -$card-spacer-x / 2;
+  margin-right: -$card-spacer-x / 2;
+  margin-left: -$card-spacer-x / 2;
 }
 
 // Card image
 .card-img-overlay {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	padding: $card-img-overlay-padding;
-	@include border-radius($card-inner-border-radius);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: $card-img-overlay-padding;
+  @include border-radius($card-inner-border-radius);
 }
 
 .card-img,
 .card-img-top,
 .card-img-bottom {
-	flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
-	width: 300px;
-	height: 150px;
-	position: relative;
-	margin-left: auto;
-	margin-right: auto;
-	// width: 345.73px;
-	// height: 185px;
-
-	// Required because we use flexbox and this inherently applies align-self: stretch
+  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
+  width: 300px;
+  height: 150px;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  // width: 345.73px;
+  // height: 185px;
+
+  // Required because we use flexbox and this inherently applies align-self: stretch
 }
 
 .card-img,
 .card-img-top {
-	@include border-top-radius($card-inner-border-radius);
+  @include border-top-radius($card-inner-border-radius);
 }
 
 .card-img,
 .card-img-bottom {
-	@include border-bottom-radius($card-inner-border-radius);
+  @include border-bottom-radius($card-inner-border-radius);
 }
 
 // Card deck
 
 .card-deck {
-	.card {
-		margin-bottom: $card-deck-margin;
-	}
-
-	@include media-breakpoint-up(sm) {
-		display: flex;
-		flex-flow: row wrap;
-		margin-right: -$card-deck-margin;
-		margin-left: -$card-deck-margin;
-
-		.card {
-			// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-			flex: 1 0 0%;
-			margin-right: $card-deck-margin;
-			margin-bottom: 0; // Override the default
-			margin-left: $card-deck-margin;
-		}
-	}
+  .card {
+    margin-bottom: $card-deck-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: -$card-deck-margin;
+    margin-left: -$card-deck-margin;
+
+    .card {
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      flex: 1 0 0%;
+      margin-right: $card-deck-margin;
+      margin-bottom: 0; // Override the default
+      margin-left: $card-deck-margin;
+    }
+  }
 }
 
 //
@@ -183,61 +187,61 @@
 //
 
 .card-group {
-	// The child selector allows nested `.card` within `.card-group`
-	// to display properly.
-	> .card {
-		margin-bottom: $card-group-margin;
-	}
-
-	@include media-breakpoint-up(sm) {
-		display: flex;
-		flex-flow: row wrap;
-		// The child selector allows nested `.card` within `.card-group`
-		// to display properly.
-		> .card {
-			// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-			flex: 1 0 0%;
-			margin-bottom: 0;
-
-			+ .card {
-				margin-left: 0;
-				border-left: 0;
-			}
-
-			// Handle rounded corners
-			@if $enable-rounded {
-				&:not(:last-child) {
-					@include border-right-radius(0);
-
-					.card-img-top,
-					.card-header {
-						// stylelint-disable-next-line property-disallowed-list
-						border-top-right-radius: 0;
-					}
-					.card-img-bottom,
-					.card-footer {
-						// stylelint-disable-next-line property-disallowed-list
-						border-bottom-right-radius: 0;
-					}
-				}
-
-				&:not(:first-child) {
-					@include border-left-radius(0);
-
-					.card-img-top,
-					.card-header {
-						// stylelint-disable-next-line property-disallowed-list
-						border-top-left-radius: 0;
-					}
-					.card-img-bottom,
-					.card-footer {
-						// stylelint-disable-next-line property-disallowed-list
-						border-bottom-left-radius: 0;
-					}
-				}
-			}
-		}
-	}
+  // The child selector allows nested `.card` within `.card-group`
+  // to display properly.
+  > .card {
+    margin-bottom: $card-group-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+    // The child selector allows nested `.card` within `.card-group`
+    // to display properly.
+    > .card {
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      flex: 1 0 0%;
+      margin-bottom: 0;
+
+      + .card {
+        margin-left: 0;
+        border-left: 0;
+      }
+
+      // Handle rounded corners
+      @if $enable-rounded {
+        &:not(:last-child) {
+          @include border-right-radius(0);
+
+          .card-img-top,
+          .card-header {
+            // stylelint-disable-next-line property-disallowed-list
+            border-top-right-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            // stylelint-disable-next-line property-disallowed-list
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &:not(:first-child) {
+          @include border-left-radius(0);
+
+          .card-img-top,
+          .card-header {
+            // stylelint-disable-next-line property-disallowed-list
+            border-top-left-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            // stylelint-disable-next-line property-disallowed-list
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+    }
+  }
 }
 
 //
@@ -245,21 +249,21 @@
 //
 
 .card-columns {
-	.card {
-		margin-bottom: $card-columns-margin;
-	}
-
-	@include media-breakpoint-up(sm) {
-		column-count: $card-columns-count;
-		column-gap: $card-columns-gap;
-		orphans: 1;
-		widows: 1;
-
-		.card {
-			display: inline-block; // Don't let them vertically span multiple columns
-			width: 100%; // Don't let their width change
-		}
-	}
+  .card {
+    margin-bottom: $card-columns-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    column-count: $card-columns-count;
+    column-gap: $card-columns-gap;
+    orphans: 1;
+    widows: 1;
+
+    .card {
+      display: inline-block; // Don't let them vertically span multiple columns
+      width: 100%; // Don't let their width change
+    }
+  }
 }
 
 //
@@ -267,93 +271,98 @@
 //
 
 .accordion {
-	overflow-anchor: none;
+  overflow-anchor: none;
 
-	> .card {
-		overflow: hidden;
+  > .card {
+    overflow: hidden;
 
-		&:not(:last-of-type) {
-			border-bottom: 0;
-			@include border-bottom-radius(0);
-		}
+    &:not(:last-of-type) {
+      border-bottom: 0;
+      @include border-bottom-radius(0);
+    }
 
-		&:not(:first-of-type) {
-			@include border-top-radius(0);
-		}
+    &:not(:first-of-type) {
+      @include border-top-radius(0);
+    }
 
-		> .card-header {
-			@include border-radius(0);
-			margin-bottom: -$card-border-width;
-		}
-	}
+    > .card-header {
+      @include border-radius(0);
+      margin-bottom: -$card-border-width;
+    }
+  }
 }
 
 .header-1 {
-	background: #3E3A8E;
-	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-	border-radius: 5px;
-	// width: 830px;
-	margin-bottom: 30px;
+  background: #3e3a8e;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+  // width: 830px;
+  margin-bottom: 30px;
 }
 .card-title-1 {
-	margin-left: 10px;
-	padding: 10px;
-	font-size: 25px;
-	text-align: left;
-	color: rgba(255, 255, 255, 0.9);
+  margin-left: 10px;
+  padding: 10px;
+  font-size: 25px;
+  text-align: left;
+  color: rgba(255, 255, 255, 0.9);
 }
 .border-radius-login {
-	border-radius: 5px;
+  border-radius: 5px;
 }
 
 .header-penjadwalan {
-	background: #3E3A8E;
-	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-	border-radius: 5px;
-	// width: 830px;
-	height: 45px;
-	margin: 20px;
+  background: #3e3a8e;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+  // width: 830px;
+  height: 45px;
+  margin: 20px;
 }
 .warna-penjadwalan-block {
-	height: 35px;
-	width: 60px;
-	margin-left: auto;
+  height: 35px;
+  width: 60px;
+  margin-left: auto;
 }
 .home-1 {
-	margin-left: 20px;
-	margin-right: 10px;
-	margin-top: 20px;
-}
-.home-2{
-	margin-top: 10%;
-}
-@media screen and (max-width :450px) {
-	.txt-size{
-		font-weight:400;
-	}	
-	.home-1{
-		margin:0;
-	}
-}
-
-	.card-over{
-		overflow: auto;
-	}
-	.f-size{
-		margin-left: 10px;
-	}
-	.w-40{
-		width: 100px;
-	}
-	.margin-botton-20{
-		margin-bottom: 20px;
-	}
-	.text-tahun{
-		font-size: 20px;
-		text-align: center;
-	}
-	.font-color-white{
-		color: #FFFFFF;
-	}
-
+  margin-left: 20px;
+  margin-right: 10px;
+  margin-top: 20px;
+}
+.home-2 {
+  margin-top: 10%;
+}
+@media screen and (max-width: 450px) {
+  .txt-size {
+    font-weight: 400;
+  }
+  .home-1 {
+    margin: 0;
+  }
+}
 
+.card-over {
+  overflow: auto;
+}
+.f-size {
+  margin-left: 10px;
+}
+.w-40 {
+  width: 100px;
+}
+.margin-botton-20 {
+  margin-bottom: 20px;
+}
+.text-tahun {
+  font-size: 20px;
+  text-align: center;
+}
+.font-color-white {
+  color: #ffffff;
+}
+.font-color-black {
+  color: black;
+}
+.border-2 {
+  border-width: 2px;
+  border-color: black;
+}