1.Jumlah dokumen yang di upload di menu permohonan pencabutan sanksi tidak bisa lebih dari 2

2. Perubahan urutan dimenu upload dokumen perbaikan & usulan cabut sanksi
3. di peta jika di bawah index warna hijau dan jika di atas warna merah (DUMMY)
4. re design icon upload file di setiap Menu.js
5.chart data bar realtime

actions/pengunjung.js

@@ -3,13 +3,17 @@ import axios2 from "axios";
 
 export const createPengunjung = async () => {
 	try {
-		const jsonip = await axios2.get("http://ip-api.com/json");
+		const jsonip = await axios2.get("https://ip-api.io/json");
 		const res = await axios.post("/pengunjung/create", {
 			os: navigator.userAgentData.platform,
-			ipv4: jsonip.data.query,
+			ipv4: jsonip.data.ip,
 			location: {
-				...jsonip.data,
-				region: jsonip.data.regionName,
+				country: jsonip.data.country_name,
+				region: jsonip.data.region_name,
+				city: jsonip.data.city,
+				lat: jsonip.data.latitude,
+				lon: jsonip.data.longitude,
+				timezone: jsonip.data.time_zone,
 			},
 		});
 		return res.data;

components/Layout/Menu.js

@@ -70,18 +70,18 @@ const Menu = [
 		icon: "icon-directions",
 		translate: "sidebar.nav.BANDING",
 	},
-	{
-		name: "Pencabutan Sanksi",
-		path: "/app/pencabutan-sanksi",
-		icon: "icon-shield",
-		translate: "sidebar.nav.PENCABUTAN_SANKSI",
-	},
 	{
 		name: "Pemantauan Perbaikan",
 		path: "/app/pemantauan-perbaikan",
 		icon: "icon-graph",
 		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
 	},
+	{
+		name: "Pencabutan Sanksi",
+		path: "/app/pencabutan-sanksi",
+		icon: "icon-shield",
+		translate: "sidebar.nav.PENCABUTAN_SANKSI",
+	},
 	{
 		heading: "Analytics Report",
 		translate: "sidebar.heading.ANALYTICS_REPORT",
@@ -89,7 +89,7 @@ const Menu = [
 	{
 		name: "Riwayat",
 		path: "/app/riwayat",
-		icon: "icon-graph",
+		icon: "icon-film",
 		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
 	},
 ];

components/Layout/MenuLLDIKTI.js

@@ -83,7 +83,7 @@ const Menu = [
 	{
 		name: "Riwayat",
 		path: "/app/riwayat",
-		icon: "icon-graph",
+		icon: "icon-film",
 		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
 	},
 ];

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -126,7 +126,7 @@ export class ModalPermohonan extends Component {
 		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">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 		return (
@@ -167,10 +167,17 @@ export class ModalPermohonan extends Component {
 												>
 													{({ getRootProps, getInputProps, isDragActive }) => {
 														return (
-															<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+															<div {...getRootProps()} className={"dropzone card" + (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">Klik untuk upload dokumen</div>}
+																	<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 upload dokumen</h5>
+																			</div>
+																		}
+																		</div>
+																	</div>
 																</div>
 																<div className="d-flex align-items-center">
 																	<small className="ml-auto">

components/PT/Keberatan/ModalPermohonan.js

@@ -128,7 +128,7 @@ export class ModalPermohonan extends Component {
 		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">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 		return (
@@ -169,10 +169,17 @@ export class ModalPermohonan extends Component {
 												>
 													{({ getRootProps, getInputProps, isDragActive }) => {
 														return (
-															<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+															<div {...getRootProps()} className={"dropzone card" + (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">Klik untuk upload dokumen</div>}
+																	<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 upload dokumen</h5>
+																			</div>
+																		}
+																		</div>
+																	</div>
 																</div>
 																<div className="d-flex align-items-center">
 																	<small className="ml-auto">

components/Pelaporan/InputData.js

@@ -161,7 +161,7 @@ export class InputData extends Component {
 		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">{file.name}</span>
+				<span className="text-left">{index + 1}.{file.name}</span>
 			</div>
 		));
 		return (
@@ -233,9 +233,16 @@ 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" + (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">Klik untuk upload dokumen</div>}</div>
+														<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 upload dokumen</h5>
+																</div>
+															}
+															</div>
+														</div>
 														<div className="d-flex align-items-center">
 															<small className="ml-auto">
 																<button

components/Pemeriksaan/InputEvaluasi.js

@@ -144,7 +144,7 @@ export default class InputEvaluasi extends Component {
 		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">{file.name}</span>
+				<span className="text-left">{index + 1}.{file.name}</span>
 			</div>
 		));
 		return (
@@ -199,9 +199,16 @@ export default class InputEvaluasi extends Component {
 										>
 											{({ getRootProps, getInputProps, isDragActive }) => {
 												return (
-													<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+													<div {...getRootProps()} className={"dropzone card" + (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">Klik untuk upload dokumen</div>}</div>
+														<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 upload dokumen</h5>
+																</div>
+															}
+															</div>
+														</div>
 														<div className="d-flex align-items-center">
 															<small className="ml-auto">
 																<button

components/Riwayat/ChartDataBar.js

@@ -14,7 +14,7 @@ class ChartDataBar extends React.Component {
 			series: [
 				{
 					data: [44, 55, 41, 64, 22, 43, 21, 44, 42, 67, 43, 86, 42, 99, 131, 313],
-					name: 'jumlah laporan',
+					name: "jumlah laporan",
 				},
 			],
 			options: {
@@ -39,7 +39,7 @@ class ChartDataBar extends React.Component {
 					},
 				},
 
-				colors: ['#B2B0D2'],
+				colors: ["#B2B0D2"],
 				dataLabels: {
 					enabled: true,
 					offsetX: -6,
@@ -63,9 +63,8 @@ class ChartDataBar extends React.Component {
 					// name: ["LLDikti I", "LLDikti II", "LLDikti III", "LLDikti IV", "LLDikti V", "LLDikti VI", "LLDikti VII", "LLDikti VIII", "LLDikti IX", "LLDikti X", "LLDikti XI", "LLDikti XII", "LLDikti XIII", "LLDikti XIV", "LLDikti XV", "LLDikti XVI"]
 				},
 				fill: {
-					colors: ['#B2B0D2'],
-				}
-
+					colors: ["#B2B0D2"],
+				},
 			},
 		};
 	}
@@ -73,14 +72,28 @@ class ChartDataBar extends React.Component {
 	async componentDidMount() {
 		const { token } = this.props;
 		const data = await jumlahLaporan(token);
-		console.log(data.data);
+		this.setState((prevState) => ({
+			...prevState,
+			series: [{ data: data.data.map((e) => e.jumlah_laporan), name: "jumlah laporan" }],
+			options: {
+				...prevState.options,
+				xaxis: {
+					categories: data.data.map((e) => e._id),
+				},
+			},
+		}));
 	}
 
 	render() {
 		return (
-			<div id="chart">
-				<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={430} />
-			</div>
+			<Card className="card-default">
+				<CardBody>
+					<div id="chart">
+						<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={400} />
+					</div>
+				</CardBody>
+			</Card>
+
 		);
 	}
 }

components/Riwayat/Maps.js

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import ContentWrapper from '@/components/Layout/ContentWrapper';
-
+import { jumlahLaporan } from "@/actions/pelaporan";
 import VectorMap from '@/components/Maps/VectorMap';
 import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";
 
 const defaultColors = {
     markerColor: '#f20226',
     bgColor: 'transparent',
-    scaleColors: ['#3E3A8E'],
+    scaleColors: ["#146804", "#ff0000"],
     regionFill: '#bbbec6'
 };
 
@@ -48,7 +48,6 @@ const RegionValues = {
     'ID_st': 16,
     'ID_sa': 16,
 }
-
 const LLDIKTI = {
     'ID_su': '<h5>LLDIKTI Wilayah I</h5>',
     'ID_ss': '<h5>LLDIKTI Wilayah II</h5>',
@@ -149,17 +148,15 @@ class Maps extends Component {
                 }
             },
             onRegionLabelShow: (e, el, code) => {
-                if (RegionValues[code])
-                    el.html(LLDIKTI[code] + el.html() + ' : ' + RegionValues[code] + ' pelaporan');
+                el.html(LLDIKTI[code] + el.html() + ' : ' + RegionValues[code] + ' pelaporan');
             }
         }
     }
-
     render() {
         return (
             <Card className="card-default">
                 <CardBody>
-                    <VectorMap height="370px" options={this.state.options} series={this.state.series} markers={this.state.markers} />
+                    <VectorMap height="395px" options={this.state.options} series={this.state.series} markers={this.state.markers} />
                 </CardBody>
                 <div align="center">
                     <span>Peta Geografis Wilayah LLDikti</span>

components/Sanksi/UploadSurat.js

@@ -74,7 +74,7 @@ export class UploadSurat extends Component {
 		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">{file.name}</span>
+				<span className="text-left">{index + 1}.	{file.name}</span>
 			</div>
 		));
 		return (
@@ -93,18 +93,25 @@ export class UploadSurat extends Component {
 					</div>
 				</FormGroup>
 				<FormGroup row>
-					<label className="col-md-2 col-form-label">Dokumen Surat Sanksi:</label>
+					<label className="col-md-2 col-form-label">Dokumen Surat Sanksi<span className="text-danger">*</span>:</label>
 					<div className="col-md-10">
 						<DropzoneWrapper className="" onDrop={this.onDrop}>
 							{({ getRootProps, getInputProps, isDragActive }) => {
 								return (
-									<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+									<div {...getRootProps()} className={"dropzone card" + (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">klik untuk upload dokumen</div>}</div>
+										<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 upload dokumen</h5>
+												</div>
+											}
+											</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/app/banding/detail.js

@@ -156,7 +156,7 @@ class JawabanBanding extends Component {
 		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">{file.name}</span>
+				<span className="text-left">{index + 1}.{file.name}</span>
 			</div>
 		));
 
@@ -234,11 +234,17 @@ class JawabanBanding extends Component {
 																			>
 																				{({ getRootProps, getInputProps, isDragActive }) => {
 																					return (
-																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+																						<div {...getRootProps()} className={"dropzone card" + (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">Klik untuk upload dokumen</div>}
-																							</div>
+																								<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 upload dokumen</h5>
+																										</div>
+																									}
+																									</div>
+																								</div>																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
 																									<button

pages/app/keberatan/detail.js

@@ -161,7 +161,7 @@ class DetailKeberatan extends Component {
 		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">{file.name}</span>
+				<span className="text-left">{index + 1}.{file.name}</span>
 			</div>
 		));
 
@@ -257,10 +257,17 @@ class DetailKeberatan extends Component {
 																			>
 																				{({ getRootProps, getInputProps, isDragActive }) => {
 																					return (
-																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+																						<div {...getRootProps()} className={"dropzone card" + (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">Klik untuk upload dokumen</div>}
+																								<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 upload dokumen</h5>
+																										</div>
+																									}
+																									</div>
+																								</div>
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">

pages/app/pelaporan/index.js

@@ -89,8 +89,9 @@ class Pelaporan extends Component {
 									<Button className="color-3e3a8e" color="purple">Laporan Baru</Button>
 								</Link>
 							</div> */}
+							{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" /> : <Loader />}
 						</div>
-						{pelaporan?.data ? <TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" /> : <Loader />}
+
 					</Col>
 				</Row>
 			</ContentWrapper>

pages/app/pencabutan-sanksi/detail.js

@@ -156,7 +156,7 @@ class JawabanPencabutanSanksi extends Component {
 		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">{file.name}</span>
+				<span className="text-left">{index + 1}.{file.name}</span>
 			</div>
 		));
 
@@ -255,8 +255,14 @@ 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">Klik untuk upload dokumen</div>}
-																							</div>
+																								<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 upload dokumen</h5>
+																										</div>
+																									}
+																									</div>
+																								</div>																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
 																									<button

pages/app/pt/dokumen-perbaikan/detail.js

@@ -107,7 +107,7 @@ class DetailPerbaikanDoc extends Component {
 		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">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 
@@ -145,10 +145,15 @@ class DetailPerbaikanDoc extends Component {
 															<DropzoneWrapper className="" onDrop={this.onDrop}>
 																{({ getRootProps, getInputProps, isDragActive }) => {
 																	return (
-																		<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+																		<div {...getRootProps()} className={"dropzone card" + (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">Klik untuk upload dokumen</div>}
+																			<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 upload dokumen</h5>
+																					</div>
+																				}
+																				</div>
 																			</div>
 																			<div className="d-flex align-items-center">
 																				<small className="ml-auto">

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

@@ -103,7 +103,7 @@ class DetailPencabutanSanksi extends Component {
 		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">{file.name}</span>
+				<span className="text-center">{index + 1}.{file.name}</span>
 			</div>
 		));
 		return (
@@ -134,10 +134,15 @@ class DetailPencabutanSanksi extends Component {
 															<DropzoneWrapper className="" onDrop={this.onDrop}>
 																{({ getRootProps, getInputProps, isDragActive }) => {
 																	return (
-																		<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+																		<div {...getRootProps()} className={"dropzone card" + (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">Klik untuk upload dokumen</div>}
+																			<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 upload dokumen</h5>
+																					</div>
+																				}
+																				</div>
 																			</div>
 																			<div className="d-flex align-items-center">
 																				<small className="ml-auto">

pages/app/riwayat/index.js

@@ -13,6 +13,9 @@ import TableRiwayat from "@/components/Riwayat/TableRiwayat";
 import ChartData from "@/components/Riwayat/ChartData";
 import ChartDataBar from "@/components/Riwayat/ChartDataBar";
 import Maps from "@/components/Riwayat/Maps"
+import ChartRadar from "../../../components/Riwayat/ChartRadarBelum";
+import ChartRadarBelum from "../../../components/Riwayat/ChartRadarBelum";
+import ChartRadarSudah from "../../../components/Riwayat/ChartRadarSudah";
 
 
 class Riwayat extends Component {
@@ -29,6 +32,12 @@ class Riwayat extends Component {
           <Col lg="6">
             <Maps />
           </Col>
+          <Col lg="6">
+            <ChartRadarBelum />
+          </Col>
+          <Col lg="6">
+            <ChartRadarSudah />
+          </Col>
           <Col lg="12">
             <ChartData />
             <TableRiwayat />

pages/pt/dokumen-perbaikan/detail.js

@@ -138,9 +138,9 @@ class DetailPerbaikanDoc extends Component {
 		const { files, sanksi, pt } = this.state;
 
 		const thumbs = files.map((file, index) => (
-			<div className="text-center" md={3} key={index}>
+			<div className="text-left" md={3} key={index}>
 				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
-				<span className="text-center">{file.name}</span>
+				<span className="text-left">{index + 1}.{file.name}</span>
 			</div>
 		));
 
@@ -206,10 +206,15 @@ class DetailPerbaikanDoc extends Component {
 																			>
 																				{({ getRootProps, getInputProps, isDragActive }) => {
 																					return (
-																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+																						<div {...getRootProps()} className={"dropzone card" + (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">Klik untuk upload dokumen</div>}
+																							<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 upload dokumen</h5>
+																									</div>
+																								}
+																								</div>
 																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">

pages/pt/pencabutan-sanksi/detail.js

@@ -40,7 +40,7 @@ const checkIfFilesAreCorrectType = (files) => {
 };
 
 const docSchema = Yup.object().shape({
-	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
+	dokumen: Yup.array().max(2, "Maximal 2 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
 });
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -131,7 +131,7 @@ class DetailPencabutanSanksi extends Component {
 		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">{file.name}</span>
+				<span className="text-left">{index + 1}.{file.name}</span>
 			</div>
 		));
 		return (
@@ -184,11 +184,17 @@ class DetailPencabutanSanksi extends Component {
 																			>
 																				{({ getRootProps, getInputProps, isDragActive }) => {
 																					return (
-																						<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+																						<div {...getRootProps()} className={"dropzone card" + (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">Klik untuk upload dokumen</div>}
-																							</div>
+																								<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 upload dokumen</h5>
+																										</div>
+																									}
+																									</div>
+																								</div>																							</div>
 																							<div className="d-flex align-items-center">
 																								<small className="ml-auto">
 																									<button type="button" className="btn btn-link" onClick={this.clearFiles}>

styles/app/common/circles.scss

@@ -19,6 +19,7 @@ $point-sz-xl : 18px;
     border: 2px solid transparent;
     &.text-left {
         margin-left: 0;
+        text-align: left;
     }
     &.text-right {
         margin-right: 0;

styles/bootstrap/_card.scss

@@ -379,3 +379,18 @@ display: inline;
 // min-width: 300px;
 float: right;
 }
+.dropzone-style-1{
+  // background-color: #9e9e9e;
+  // width: 50px;
+  padding-top: 10px;
+  border: 1px solid #dde6e9;
+  min-height: 70px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.center-ver-hor{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}