fix sanksi

components/Sanksi/Ringkasan.js

@@ -1,9 +1,8 @@
-import { useEffect, useState } from "react";
 import Scrollable from "@/components/Common/Scrollable";
 import { Card, Row, Col, Table, FormGroup } from "reactstrap";
+import moment from "moment";
 
 function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
-
 	return (
 		<>
 			<Row>
@@ -66,31 +65,31 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 							<tbody>
 								{dataPelanggaran
 									? dataPelanggaran.map((e, i) => (
-										<tr key={e._id}>
-											<td>{++i}</td>
-											<td>
-												<div className="media align-items-center">
-													<div className="media-body d-flex">
-														<div>
-															<p>{e.pelanggaran}</p>
-															<p>TMT : {e.tmt_bulan} Bulan</p>
-															<p>Level Pelanggaran : {e.label_sanksi}</p>
+											<tr key={e._id}>
+												<td>{++i}</td>
+												<td>
+													<div className="media align-items-center">
+														<div className="media-body d-flex">
+															<div>
+																<p>{e.pelanggaran}</p>
+																<p>TMT : {e.tmt_bulan} Bulan</p>
+																<p>Level Pelanggaran : {e.label_sanksi}</p>
+															</div>
 														</div>
 													</div>
-												</div>
-											</td>
-											<td>
-												<div className="media align-items-center">
-													<div className="media-body d-flex">
-														<div>
-															<p>{e.sanksi}</p>
-															<p>Keterangan : {e.keterangan_sanksi}</p>
+												</td>
+												<td>
+													<div className="media align-items-center">
+														<div className="media-body d-flex">
+															<div>
+																<p>{e.sanksi}</p>
+																<p>Keterangan : {e.keterangan_sanksi}</p>
+															</div>
 														</div>
 													</div>
-												</div>
-											</td>
-										</tr>
-									))
+												</td>
+											</tr>
+									  ))
 									: ""}
 							</tbody>
 						</Table>
@@ -116,7 +115,21 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 						<FormGroup row>
 							<Col md="4">Sanksi:</Col>
 							<Col md="8">
-								<strong>{dataUpload && dataUpload.listSanksi.length ? dataUpload.listSanksi.map((e, index) => <p>{index + 1 + " " + e.value + " " + e.label_sanksi}</p>) : ""}</strong>
+								<strong>{dataUpload && dataUpload.listSanksi?.length ? dataUpload.listSanksi.map((e, index) => <p>{index + 1 + " " + e.value + " " + e.label_sanksi}</p>) : ""}</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Sanksi:</Col>
+							<Col md="8">
+								<strong>
+									{dataUpload && dataUpload.tmtDate ? (
+										<p>
+											{moment(dataUpload.tmtDate.startDate).format("DD MMMM YYYY")} - {moment(dataUpload.tmtDate.endDate).format("DD MMMM YYYY")}
+										</p>
+									) : (
+										""
+									)}
+								</strong>
 							</Col>
 						</FormGroup>
 						<FormGroup row>
@@ -127,17 +140,17 @@ function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
 										<tbody>
 											{dataUpload
 												? dataUpload.files.map((e) => (
-													<tr>
-														<td>
-															<em className="fa-lg far fa-file-code"></em>
-														</td>
-														<td>
-															<a className="text-muted" href={e.preview} download={e.name}>
-																{e.name}
-															</a>
-														</td>
-													</tr>
-												))
+														<tr>
+															<td>
+																<em className="fa-lg far fa-file-code"></em>
+															</td>
+															<td>
+																<a className="text-muted" href={e.preview} download={e.name}>
+																	{e.name}
+																</a>
+															</td>
+														</tr>
+												  ))
 												: ""}
 										</tbody>
 									</table>

components/Sanksi/TmtDate.js

@@ -1,53 +1,51 @@
 import React from "react";
-import { useEffect } from "react";
-import { useState } from "react";
-import DatePicker from "react-datepicker"
-import 'react-datepicker/dist/react-datepicker.css'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 import FormGroup from "reactstrap/lib/FormGroup";
-import ms from "ms"
-
-
-function TmtDate() {
-    const [isiTmt, setisiTmt] = useState(null)
-    const [maxDay, setmaxDay] = useState(null);
-    const [startDay, setstartDay] = useState(null);
-
-    useEffect(() => {
-        const setday = ms('180d');
-        const tmt_awal = new Date();
-        setstartDay(tmt_awal)
-        const tmt_akhir = new Date(+ new Date(startDay) + setday);
-        setmaxDay(tmt_akhir);
-    }, [maxDay, startDay, isiTmt])
-
-
-    return (
-        <div>
-            <FormGroup row className="mt-3">
-                <label className="col-md-2 col-form-label">Isi TMT</label>
-                <div className="col-md-10">
-                    <DatePicker
-                        selected={isiTmt}
-                        onChange={setisiTmt}
-                        dateFormat='dd/MM/yyyy'
-                        minDate={startDay}
-                        maxDate={maxDay}
-                        placeholderText="isi TMT"
-                    // maxDate={addDays(new Date(), 5)}
-                    />
-                    <strong>Max pengisian TMT 6 bulan</strong>
-                </div>
-            </FormGroup>
-            <FormGroup row className="mt-1">
-                <label className="col-md-2 col-form-label">TMT berlaku</label>
-                <div className="col-md-10 mt-2">
-                    <b>{moment(startDay).format("DD-MM-YYYY")}</b> hingga <b>{(moment(isiTmt).format("DD-MM-YYYY"))}</b>
-                </div>
-            </FormGroup>
-
-        </div>
-    )
+import ms from "ms";
+import { Component } from "react";
+
+class TmtDate extends Component {
+	constructor(props) {
+		super(props);
+		const tmt_awal = new Date();
+		this.state = {
+			startDay: tmt_awal,
+			maxDay: new Date(+new Date(tmt_awal) + ms("180d")),
+			isiTmt: "",
+		};
+	}
+
+	render() {
+		return (
+			<div>
+				<FormGroup row className="mt-3">
+					<label className="col-md-2 col-form-label">Isi TMT</label>
+					<div className="col-md-10">
+						<DatePicker
+							selected={this.state.isiTmt}
+							onChange={(e) => {
+								this.setState({ isiTmt: e });
+								this.props.setTmt({ startDate: this.state.startDay, endDate: this.state.isiTmt });
+							}}
+							dateFormat="dd/MM/yyyy"
+							minDate={this.state.startDay}
+							maxDate={this.state.maxDay}
+							placeholderText="isi TMT"
+							// maxDate={addDays(new Date(), 5)}
+						/>
+						<strong>Max pengisian TMT 6 bulan</strong>
+					</div>
+				</FormGroup>
+				<FormGroup row className="mt-1">
+					<label className="col-md-2 col-form-label">TMT berlaku</label>
+					<div className="col-md-10 mt-2">
+						<b>{moment(this.state.startDay).format("DD-MM-YYYY")}</b> hingga <b>{this.state.isiTmt ? moment(this.state.isiTmt).format("DD-MM-YYYY") : "-"}</b>
+					</div>
+				</FormGroup>
+			</div>
+		);
+	}
 }
 
-
-export default TmtDate
+export default TmtDate;

components/Sanksi/UploadSurat.js

@@ -19,48 +19,45 @@ class DropzoneWrapper extends Component {
 
 const data = [
 	{
-		value: 'Sanksi Administratif Sedang',
+		value: "Sanksi Administratif Sedang",
 		// label_sanksi: "- Sanksi Administratif ringan"
 	},
 	{
 		sanksi: "Penghentian Pembinaan PT",
 		value: "Penghentian Pembinaan PT",
-		label_sanksi: "- Sanksi Administratif Berat"
+		label_sanksi: "- Sanksi Administratif Berat",
 	},
 	{
 		sanksi: "Pencabutan Izin Perguruan Tinggi Swasta",
 		value: "Pencabutan Izin Perguruan Tinggi Swasta",
-		label_sanksi: "- Sanksi Administratif Berat"
+		label_sanksi: "- Sanksi Administratif Berat",
 	},
 	{
 		sanksi: "Penghentian Pembinaan Program Studi",
 		value: "Penghentian Pembinaan Program Studi",
-		label_sanksi: "- Sanksi Administratif Berat"
+		label_sanksi: "- Sanksi Administratif Berat",
 	},
 	{
 		sanksi: "Pencabutan Izin Program Studi",
 		value: "Pencabutan Izin Program Studi",
-		label_sanksi: "- Sanksi Administratif Berat"
+		label_sanksi: "- Sanksi Administratif Berat",
 	},
 	{
 		sanksi: "Pembubaran Perguruan Tinggi Negeri",
 		value: "Pembubaran Perguruan Tinggi Negeri",
-		label_sanksi: "- Sanksi Administratif Berat"
-	}
+		label_sanksi: "- Sanksi Administratif Berat",
+	},
 ];
 
-const listSanksi = data.map(d => ({
-	"value": d.value,
-	"label": d.sanksi,
-	"label_sanksi": d.label_sanksi
-
-}))
+const listSanksi = data.map((d) => ({
+	value: d.value,
+	label: d.sanksi,
+	label_sanksi: d.label_sanksi,
+}));
 const formatOptionLabel = ({ value, sanksi, label_sanksi }) => (
 	<div style={{ display: "flex" }}>
 		<span className="">{value}</span>
-		<div style={{ marginLeft: "10px", color: "#adaca8" }}>
-			{label_sanksi}
-		</div>
+		<div style={{ marginLeft: "10px", color: "#adaca8" }}>{label_sanksi}</div>
 	</div>
 );
 export class UploadSurat extends Component {
@@ -70,7 +67,8 @@ export class UploadSurat extends Component {
 			files: [],
 			nomorSanksi: "",
 			keterangan: "",
-			listSanksi: ""
+			listSanksi: "",
+			tmtDate: "",
 		};
 	}
 
@@ -118,22 +116,29 @@ export class UploadSurat extends Component {
 	};
 
 	setListSanksi = (ls) => {
-		this.setState({ listSanksi: ls.target.value })
+		this.setState({ listSanksi: ls.target.value });
 		this.props.setUploadSuratSanksi(this.state);
-	}
+	};
 	handleChangeListSanksi = (listSanksi) => {
 		this.setState({ listSanksi });
 		this.props.setUploadSuratSanksi(this.state);
 	};
 
+	handleTmtDate = (tmtDate) => {
+		this.setState({ tmtDate });
+		this.props.setUploadSuratSanksi(this.state);
+	};
 
 	render() {
 		const { files } = this.state;
+		console.log(this.state);
 
 		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>
+				<span className="text-left">
+					{index + 1}. {file.name}
+				</span>
 			</div>
 		));
 		return (
@@ -151,9 +156,9 @@ export class UploadSurat extends Component {
 						{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
 					</div>
 				</FormGroup>
-				<TmtDate />
+				<TmtDate setTmt={this.handleTmtDate} />
 				<FormGroup row className="mt-3">
-					<label className="col-md-2 col-form-label">List sanksi	</label>
+					<label className="col-md-2 col-form-label">List sanksi </label>
 					<div className="col-md-10">
 						<Select
 							options={listSanksi}
@@ -167,7 +172,9 @@ export class UploadSurat extends Component {
 				</FormGroup>
 
 				<FormGroup row>
-					<label className="col-md-2 col-form-label">Dokumen Surat Sanksi<span className="text-danger">*</span>:</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 }) => {
@@ -175,11 +182,16 @@ export class UploadSurat extends Component {
 									<div {...getRootProps()} className={"dropzone card" + (isDragActive ? "dropzone-drag-active" : "")}>
 										<input {...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="text-center fa-2x icon-cloud-upload mr-2 ">
-													<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
-												</div>
-											}
+											<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">
@@ -194,9 +206,7 @@ export class UploadSurat extends Component {
 							}}
 						</DropzoneWrapper>
 						{/* <span className="form-text">Multiple files upload</span> */}
-						<p className="mrgn-top-5">
-							Ukuran setiap dokumen maksimal 15mb
-						</p>
+						<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
 					</div>
 				</FormGroup>
 			</form>