commit

components/Layout/Footer.js

@@ -7,7 +7,7 @@ class Footer extends Component {
         return (
             <footer className="footer-container">
                 <span>Sidali Dikti &copy; {year}</span>
-                <span className=' float-right'>Version 2.1 ~ 1.88</span>
+                <span className=' float-right'>Version 2.2 ~ 1.96</span>
             </footer>
         );
     }

components/NaikSanksi/InputTanggal.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, CardTitle } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Progress } from "reactstrap";
 import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -173,11 +173,18 @@ class InputTanggal extends Component {
     };
     render() {
         const { files } = this.state;
-
+        const removeFile = file => () => {
+            const newFiles = [...files]
+            newFiles.splice(newFiles.indexOf(file), 1)
+            this.setState({
+                files: newFiles,
+            });
+        }
         const thumbs = files.map((file, index) => (
-            <div md={3} key={index}>
-                <span className="text-left">{index + 1}.{file.name}</span>
-            </div>
+            <p>
+                <em className="far fa-file" />&nbsp;&nbsp;{file.name}
+                <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+            </p>
         ));
         return (
             <Card className="card-default">
@@ -345,7 +352,10 @@ class InputTanggal extends Component {
                                                                 <input {...getInputProps()} />
                                                                 <div className="dropzone-previews flex">
                                                                     <div className="dropzone-style-1">
-                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+                                                                            <div className="text-center fa-2x icon-cloud-upload mr-2 ">
+                                                                                <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+                                                                            </div> :
                                                                             <div className="text-center fa-2x icon-cloud-upload mr-2 ">
                                                                                 <h5 className="text-center dz-default dz-message">Upload dokumen rekomendasi delegasi</h5>
                                                                             </div>
@@ -373,6 +383,9 @@ class InputTanggal extends Component {
                                                 </DropzoneWrapper>
                                             )}
                                         </Field>
+                                        <div>
+                                            {thumbs}
+                                        </div>
                                     </div>
                                 </FormGroup>
                                 <FormGroup row>

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import Router from "next/router";
-import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter, Progress } from "reactstrap";
 import { addBanding } from "@/actions/banding";
 import { connect } from "react-redux";
 import { toast } from "react-toastify";
@@ -123,11 +123,18 @@ export class ModalPermohonan extends Component {
 	render() {
 		const { files } = this.state;
 
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-center">{index + 1}.{file.name}</span>
-			</div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<>
@@ -171,7 +178,10 @@ export class ModalPermohonan extends Component {
 																<input {...getInputProps()} />
 																<div className="dropzone-previews flex">
 																	<div className="dropzone-style-1">
-																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																				<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+																			</div> :
 																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 																				<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
 																			</div>
@@ -199,8 +209,11 @@ export class ModalPermohonan extends Component {
 												</DropzoneWrapper>
 											)}
 										</Field>
+										<div>
+											{thumbs}
+										</div>
 										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-										<p className="mrgn-top-5">
+										<p className="mrgn-top-5 font-color-black">
 											Ukuran setiap dokumen maksimal 15mb
 										</p>
 									</div>

components/PT/Keberatan/ModalPermohonan.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import Router from "next/router";
-import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter, Progress } from "reactstrap";
 import { addKeberatan } from "@/actions/keberatan";
 import { connect } from "react-redux";
 import { toast } from "react-toastify";
@@ -125,11 +125,18 @@ export class ModalPermohonan extends Component {
 	render() {
 		const { files } = this.state;
 
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-center">{index + 1}.{file.name}</span>
-			</div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<>
@@ -173,7 +180,10 @@ export class ModalPermohonan extends Component {
 																<input {...getInputProps()} />
 																<div className="dropzone-previews flex">
 																	<div className="dropzone-style-1">
-																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																				<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+																			</div> :
 																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 																				<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
 																			</div>
@@ -201,8 +211,11 @@ export class ModalPermohonan extends Component {
 												</DropzoneWrapper>
 											)}
 										</Field>
+										<div>
+											{thumbs}
+										</div>
 										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-										<p className="mrgn-top-5">
+										<p className="mrgn-top-5 font-color-black">
 											Ukuran setiap dokumen maksimal 15mb
 										</p>
 									</div>

components/Pelaporan/InputData.js

@@ -3,7 +3,7 @@ import Router from "next/router";
 import { getPelanggaranPublic } from "@/actions/pelanggaran";
 import { createPelaporan } from "@/actions/pelaporan";
 import Select from "react-select";
-import { Row, Col, FormGroup, Input, Button } from "reactstrap";
+import { Row, Col, FormGroup, Input, Button, Progress } from "reactstrap";
 import { connect } from "react-redux";
 import { ToastContainer, toast } from "react-toastify";
 import moment from "moment";
@@ -157,12 +157,18 @@ export class InputData extends Component {
 
 	render() {
 		const { selectedOptionMulti, files, pelanggaran } = this.state;
-
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-left">{index + 1}.{file.name}</span>
-			</div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<Formik
@@ -236,7 +242,10 @@ export class InputData extends Component {
 													<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 														<input name="dokumen" {...getInputProps()} />
 														<div className="dropzone-style-1">
-															<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+															<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+																<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																	<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+																</div> :
 																<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 																	<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
 																</div>
@@ -263,8 +272,11 @@ export class InputData extends Component {
 										</DropzoneWrapper>
 									)}
 								</Field>
+								<div>
+									{thumbs}
+								</div>
 								<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-								<p className="mrgn-top-5">
+								<p className="mrgn-top-5 font-color-black">
 									Ukuran setiap dokumen maksimal 15mb
 								</p>
 							</div>

components/Pemeriksaan/InputEvaluasi.js

@@ -3,7 +3,7 @@ import { insertPemeriksaan } from "@/actions/pemeriksaan";
 import Router from "next/router";
 import Datetime from "react-datetime";
 import moment from "moment";
-import { Row, Col, FormGroup, Input, Button } from "reactstrap";
+import { Row, Col, FormGroup, Input, Button, Progress } from "reactstrap";
 import { ToastContainer, toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -163,11 +163,28 @@ class InputEvaluasi extends Component {
 	render() {
 		const { files } = this.state;
 
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-left">{index + 1}.{file.name}</span>
-			</div>
+			// <div md={3} key={index}>
+			// 	<div className="text-left">{file.name}</div>
+			// 	<div><button className="bg-transparent button-transparent border-0 float-right" onClick={removeFile(file)}>
+			// 		<em className="fas fa-trash"></em>
+			// 	</button>
+			// 		{/* <Progress color="info" value={100}>Success</Progress> */}
+			// 	</div>
+			// 	<span className="float-right">
+			// 	</span>
+			// </div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<>
@@ -224,7 +241,10 @@ class InputEvaluasi extends Component {
 													<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 														<input name="dokumen" {...getInputProps()} />
 														<div className="dropzone-style-1">
-															<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+															<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+																<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																	<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+																</div> :
 																<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 																	<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
 																</div>
@@ -251,8 +271,9 @@ class InputEvaluasi extends Component {
 										</DropzoneWrapper>
 									)}
 								</Field>
+								{thumbs}
 								<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-								<p className="mrgn-top-5">
+								<p className="mrgn-top-5 font-color-black">
 									Ukuran setiap dokumen maksimal 15mb
 								</p>
 							</div>

components/PerpanjanganSanksi/InputTanggal.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, CardTitle } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Progress } from "reactstrap";
 import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -156,11 +156,18 @@ class InputTanggal extends Component {
     };
     render() {
         const { files, sanksi } = this.state;
-
+        const removeFile = file => () => {
+            const newFiles = [...files]
+            newFiles.splice(newFiles.indexOf(file), 1)
+            this.setState({
+                files: newFiles,
+            });
+        }
         const thumbs = files.map((file, index) => (
-            <div md={3} key={index}>
-                <span className="text-left">{index + 1}.{file.name}</span>
-            </div>
+            <p>
+                <em className="far fa-file" />&nbsp;&nbsp;{file.name}
+                <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+            </p>
         ));
         return (
             <Card className="card-default">
@@ -249,7 +256,10 @@ class InputTanggal extends Component {
                                                                 <input {...getInputProps()} />
                                                                 <div className="dropzone-previews flex">
                                                                     <div className="dropzone-style-1">
-                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+                                                                            <div className="text-center fa-2x icon-cloud-upload mr-2 ">
+                                                                                <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+                                                                            </div> :
                                                                             <div className="text-center fa-2x icon-cloud-upload mr-2 ">
                                                                                 <h5 className="text-center dz-default dz-message">Upload dokumen rekomendasi delegasi</h5>
                                                                             </div>
@@ -277,6 +287,9 @@ class InputTanggal extends Component {
                                                 </DropzoneWrapper>
                                             )}
                                         </Field>
+                                        <div>
+                                            {thumbs}
+                                        </div>
                                     </div>
                                 </FormGroup>
                                 <FormGroup row>

components/RekomendasiDelegasi/InputRekomendasi.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { insertPemeriksaan } from "@/actions/pemeriksaan";
-import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, CardTitle } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Progress } from "reactstrap";
 import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -141,10 +141,18 @@ class InputRekomendasi extends Component {
 	render() {
 		const { files } = this.state;
 
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				<span className="text-left">{index + 1}.{file.name}</span>
-			</div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<Card className="card-default">
@@ -179,7 +187,10 @@ class InputRekomendasi extends Component {
 																<input {...getInputProps()} />
 																<div className="dropzone-previews flex">
 																	<div className="dropzone-style-1">
-																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+																		<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+																				<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+																			</div> :
 																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 																				<h5 className="text-center dz-default dz-message">upload dokumen rekomendasi delegasi</h5>
 																			</div>
@@ -207,8 +218,11 @@ class InputRekomendasi extends Component {
 												</DropzoneWrapper>
 											)}
 										</Field>
+										<div>
+											{thumbs}
+										</div>
 										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-										<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
+										<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
 									</div>
 								</FormGroup>
 								<FormGroup row>

components/Sanksi/UploadSurat.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Input, FormGroup, Label } from "reactstrap";
+import { Row, Col, Input, FormGroup, Label, Progress } from "reactstrap";
 import Select from "react-select";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -142,12 +142,18 @@ export class UploadSurat extends Component {
 	render() {
 		const { files } = this.state;
 
+		const removeFile = file => () => {
+			const newFiles = [...files]
+			newFiles.splice(newFiles.indexOf(file), 1)
+			this.setState({
+				files: newFiles,
+			});
+		}
 		const thumbs = files.map((file, index) => (
-			<div md={3} key={index}>
-				<span className="text-left">
-					{index + 1}. {file.name}
-				</span>
-			</div>
+			<p>
+				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
+				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+			</p>
 		));
 		return (
 			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
@@ -276,9 +282,9 @@ export class UploadSurat extends Component {
 										<div className="dropzone-style-1">
 											<div className="center-ver-hor dropzone-previews flex">
 												{this.state.files.length > 0 ? (
-													<Row>
-														<span className="text-left">{thumbs}</span>
-													</Row>
+													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
+														<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+													</div>
 												) : (
 													<div className="text-center fa-2x icon-cloud-upload mr-2 ">
 														<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
@@ -297,7 +303,10 @@ export class UploadSurat extends Component {
 								);
 							}}
 						</DropzoneWrapper>
-						<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
+						<div>
+							{thumbs}
+						</div>
+						<p className="mrgn-top-5 font-color-black">Ukuran setiap dokumen maksimal 15mb</p>
 					</div>
 				</FormGroup>
 			</form >

components/TurunSanksi/InputTanggal.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, CardTitle } from "reactstrap";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button, Progress } from "reactstrap";
 import { toast } from "react-toastify";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
@@ -173,11 +173,18 @@ class InputTanggal extends Component {
     };
     render() {
         const { files } = this.state;
-
+        const removeFile = file => () => {
+            const newFiles = [...files]
+            newFiles.splice(newFiles.indexOf(file), 1)
+            this.setState({
+                files: newFiles,
+            });
+        }
         const thumbs = files.map((file, index) => (
-            <div md={3} key={index}>
-                <span className="text-left">{index + 1}.{file.name}</span>
-            </div>
+            <p>
+                <em className="far fa-file" />&nbsp;&nbsp;{file.name}
+                <button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
+            </p>
         ));
         return (
             <Card className="card-default">
@@ -345,7 +352,10 @@ class InputTanggal extends Component {
                                                                 <input {...getInputProps()} />
                                                                 <div className="dropzone-previews flex">
                                                                     <div className="dropzone-style-1">
-                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
+                                                                        <div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
+                                                                            <div className="text-center fa-2x icon-cloud-upload mr-2 ">
+                                                                                <h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
+                                                                            </div> :
                                                                             <div className="text-center fa-2x icon-cloud-upload mr-2 ">
                                                                                 <h5 className="text-center dz-default dz-message">Upload dokumen rekomendasi delegasi</h5>
                                                                             </div>
@@ -373,6 +383,9 @@ class InputTanggal extends Component {
                                                 </DropzoneWrapper>
                                             )}
                                         </Field>
+                                        <div>
+                                            {thumbs}
+                                        </div>
                                     </div>
                                 </FormGroup>
                                 <FormGroup row>

pages/app/index.js

@@ -112,7 +112,7 @@ class App extends Component {
               </Col>
             </Row>
           </Jumbotron>
-          <span>Version 2.1 ~ 1.88</span>
+          <span>Version 2.2 ~ 1.96</span>
         </ContentWrapper>
       </div>
     );

styles/bootstrap/_card.scss

@@ -14,12 +14,12 @@
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
 
-  > hr {
+  >hr {
     margin-right: 0;
     margin-left: 0;
   }
 
-  > .list-group {
+  >.list-group {
     border-top: inherit;
     border-bottom: inherit;
 
@@ -36,8 +36,8 @@
 
   // 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 {
+  >.card-header+.list-group,
+  >.list-group+.card-footer {
     border-top: 0;
   }
 }
@@ -71,7 +71,7 @@
     text-decoration: none;
   }
 
-  + .card-link {
+  +.card-link {
     margin-left: $card-spacer-x;
   }
 }
@@ -88,9 +88,7 @@
   border-bottom: $card-border-width solid $card-border-color;
 
   &:first-child {
-    @include border-radius(
-      $card-inner-border-radius $card-inner-border-radius 0 0
-    );
+    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
   }
 }
 
@@ -101,9 +99,7 @@
   border-top: $card-border-width solid $card-border-color;
 
   &:last-child {
-    @include border-radius(
-      0 0 $card-inner-border-radius $card-inner-border-radius
-    );
+    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius );
   }
 }
 
@@ -187,23 +183,25 @@
 //
 
 .card-group {
+
   // The child selector allows nested `.card` within `.card-group`
   // to display properly.
-  > .card {
+  >.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 {
+    >.card {
       // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
       flex: 1 0 0%;
       margin-bottom: 0;
 
-      + .card {
+      +.card {
         margin-left: 0;
         border-left: 0;
       }
@@ -218,6 +216,7 @@
             // stylelint-disable-next-line property-disallowed-list
             border-top-right-radius: 0;
           }
+
           .card-img-bottom,
           .card-footer {
             // stylelint-disable-next-line property-disallowed-list
@@ -233,6 +232,7 @@
             // stylelint-disable-next-line property-disallowed-list
             border-top-left-radius: 0;
           }
+
           .card-img-bottom,
           .card-footer {
             // stylelint-disable-next-line property-disallowed-list
@@ -273,7 +273,7 @@
 .accordion {
   overflow-anchor: none;
 
-  > .card {
+  >.card {
     overflow: hidden;
 
     &:not(:last-of-type) {
@@ -285,7 +285,7 @@
       @include border-top-radius(0);
     }
 
-    > .card-header {
+    >.card-header {
       @include border-radius(0);
       margin-bottom: -$card-border-width;
     }
@@ -299,6 +299,7 @@
   // width: 830px;
   margin-bottom: 30px;
 }
+
 .card-title-1 {
   margin-left: 10px;
   padding: 10px;
@@ -306,6 +307,7 @@
   text-align: left;
   color: rgba(255, 255, 255, 0.9);
 }
+
 .border-radius-login {
   border-radius: 5px;
 }
@@ -318,29 +320,35 @@
   height: 45px;
   margin: 20px;
 }
+
 .warna-penjadwalan-block {
   height: 35px;
   width: 60px;
   margin-left: auto;
 }
+
 .home-1 {
   margin-left: 20px;
   margin-right: 10px;
   margin-top: 20px;
 }
-.home-1-1{
+
+.home-1-1 {
   margin-left: 20px;
   margin-right: 10px;
   margin-top: -40px;
 }
+
 .home-2 {
   margin-top: 10%;
 }
+
 @media screen and (max-width: 450px) {
   .txt-size {
     font-weight: 400;
     color: black;
   }
+
   .home-1 {
     margin: 0;
   }
@@ -349,43 +357,53 @@
 .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: 0.5px;
   border-color: rgb(124, 122, 122);
 }
-.cd-home-1{
+
+.cd-home-1 {
   display: inline;
   position: relative;
   // background-color: red;
   // min-width: 300px;
   float: left;
 }
-.cd-home-2{
-display: inline;
-// background-color: rgb(50, 0, 230);
-// min-width: 300px;
-float: right;
+
+.cd-home-2 {
+  display: inline;
+  // background-color: rgb(50, 0, 230);
+  // min-width: 300px;
+  float: right;
 }
-.dropzone-style-1{
+
+.dropzone-style-1 {
   // background-color: #9e9e9e;
   // width: 50px;
   padding-top: 10px;
@@ -394,21 +412,24 @@ float: right;
   border-radius: 5px;
   cursor: pointer;
 }
-.center-ver-hor{
+
+.center-ver-hor {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
 
-.invalid-mv:focus:invalid{
+.invalid-mv:focus:invalid {
   border: solid 1px red;
   // background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-triangle' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E") no-repeat 95% 50% ;
 }
-.invalid-mv:focus:valid{
+
+.invalid-mv:focus:valid {
   border: solid 1px green;
 }
-.getover{
+
+.getover {
   overflow: auto;
   font-size: 0.8rem;
-}
+}