input TMT with calender v.1

components/Sanksi/Ringkasan.js

@@ -65,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>
-															</div>
+										<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>
-												</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>
+											</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>
-												</td>
-											</tr>
-									  ))
+												</div>
+											</td>
+										</tr>
+									))
 									: ""}
 							</tbody>
 						</Table>
@@ -120,17 +120,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

@@ -0,0 +1,55 @@
+import { Row, Col, Input, FormGroup } from "reactstrap";
+import React, { useState } from "react";
+import { useEffect } from "react";
+import ms from "ms";
+import '@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css';
+import DatePicker from '@hassanmojab/react-modern-calendar-datepicker';
+
+function TmtDate() {
+
+    const [maxDay, setmaxDay] = useState(null);
+    const [startDay, setstartDay] = useState(null);
+    const [isiTmt, setisiTmt] = useState(null);
+
+    useEffect(() => {
+        const setday = ms('180d');
+        const tmt_awal = moment(new Date).format("D MMMM YYYY");
+        setstartDay(tmt_awal)
+        const tmt_akhir = new Date(+ new Date(startDay) + setday);
+        setmaxDay(moment(tmt_akhir).format("D MMMM YYYY"));
+        // const isi_tmt = (moment(setisiTmt).format("D MMMM YYYY"));
+        // setisiTmt(isi_tmt)
+    }, [startDay, maxDay])
+
+    return (
+        <div>
+            <FormGroup row className="mt-1">
+                <label className="col-md-2 col-form-label">Isi TMT</label>
+                <div className="col-md-10">
+                    <DatePicker
+                        value={isiTmt}
+                        onChange={setisiTmt}
+                        inputPlaceholder="isi tmt"
+                        shouldHighlightWeekends
+                        inputClassName="my-custom-input"
+                    />
+                    <strong> Maximum TMT hingga {maxDay}</strong>
+                </div>
+            </FormGroup>
+            <FormGroup row className="mt-1">
+                <label className="col-md-2 col-form-label">TMT berlaku mulai </label>
+                <div className="col-md-10 mt-2">
+                    {startDay}
+                </div>
+            </FormGroup>
+            <FormGroup row className="mt-1">
+                <label className="col-md-2 col-form-label">TMT berlaku hingga</label>
+                <div className="col-md-10 mt-2">
+                    {(moment(isiTmt).format("D MMMM YYYY"))}
+                </div>
+            </FormGroup>
+        </div>
+    );
+};
+
+export default TmtDate;

components/Sanksi/UploadSurat.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { Row, Col, Input, FormGroup } from "reactstrap";
 import Select from "react-select";
+import TmtDate from "./TmtDate";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -57,7 +58,7 @@ const listSanksi = data.map(d => ({
 const formatOptionLabel = ({ value, sanksi, label_sanksi }) => (
 	<div style={{ display: "flex" }}>
 		<span className="">{value}</span>
-		<div style={{ marginLeft: "10px", color: "#ccc" }}>
+		<div style={{ marginLeft: "10px", color: "#adaca8" }}>
 			{label_sanksi}
 		</div>
 	</div>
@@ -149,6 +150,7 @@ export class UploadSurat extends Component {
 						/>
 					</div>
 				</FormGroup>
+				<TmtDate />
 				<FormGroup row>
 					<label className="col-md-2 col-form-label">Dokumen Surat Sanksi<span className="text-danger">*</span>:</label>
 					<div className="col-md-10">

package-lock.json

@@ -1896,6 +1896,14 @@
         "@hapi/hoek": "9.x.x"
       }
     },
+    "@hassanmojab/react-modern-calendar-datepicker": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@hassanmojab/react-modern-calendar-datepicker/-/react-modern-calendar-datepicker-3.1.7.tgz",
+      "integrity": "sha512-dX/FXGcvIW31dgA1fcFJkHmIx3k4AqX166SfCQ6weBb0ZLr6C/f5YzcXVop19ifX18ezEw11Xb+l02JGj4+R6g==",
+      "requires": {
+        "jalaali-js": "^1.1.0"
+      }
+    },
     "@hypnosphi/create-react-context": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
@@ -6575,6 +6583,11 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
+    "jalaali-js": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/jalaali-js/-/jalaali-js-1.2.6.tgz",
+      "integrity": "sha512-io974va+Qyu+UfuVX3UIAgJlxLhAMx9Y8VMfh+IG00Js7hXQo1qNQuwSiSa0xxco0SVgx5HWNkaiCcV+aZ8WPw=="
+    },
     "jest-worker": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz",

package.json

@@ -25,6 +25,7 @@
     "@fullcalendar/list": "4.4.2",
     "@fullcalendar/react": "^4.4.2",
     "@fullcalendar/timegrid": "^4.4.2",
+    "@hassanmojab/react-modern-calendar-datepicker": "^3.1.7",
     "@react-google-maps/api": "1.13.0",
     "@south-paw/react-vector-maps": "^3.1.0",
     "animate.css": "3.7.2",