071123

actions/auth.js

@@ -36,7 +36,7 @@ export const getUser = async () => {
 	}
 };
 
-export const logout = async ( _csrf) => {
+export const logout = async (_csrf) => {
 	try {
 		const response = await axiosAPI.delete(`/auth/logout?_csrf=${_csrf}`);
 		return response.data;
@@ -60,3 +60,28 @@ export const loginToPt = async (lembaga_id, password, _csrf) => {
 
 	return response.data;
 };
+export const getkontakpt = async () => {
+	try {
+		const response = await get("/kontak");
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};
+export const createotp = async (data, token) => {
+	try {
+		const response = await axiosAPI.post(`/auth/otp`, data, { headers: { Authorization: token } });
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};
+
+export const createkontak = async (data, token) => {
+	try {
+		const response = await axiosAPI.post(`/kontak`, data, { headers: { Authorization: token } });
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};

components/PT/CabutSanksi/Riwayat.js

@@ -3,8 +3,8 @@ import moment from "moment";
 import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
 import { API_URL } from "@/env";
 
-function Riwayat({ data }) {
-	const { cabut_sanksi } = data.sanksi;
+function Riwayat({ data, role }) {
+	const { cabut_sanksi } = data;
 	return (
 		<Card className="card-default">
 			<CardHeader>
@@ -20,16 +20,23 @@ function Riwayat({ data }) {
 							</tr>
 						</thead>
 						<tbody>
-							{cabut_sanksi ? (
+							{data ? (
 								<tr>
 									<td>{moment(data.createAt).format("DD MMMM YYYY")}</td>
 									<td>
-										{cabut_sanksi.files.map((e) => (
+										{data.dokumen?.map((e) => (
 											<>
 												<em className="fa-lg far fa-file-code"></em>
-												<a className="text-muted" href={API_URL + e.path} target="_blank" download={e.name}>
-													{e.name}
-												</a>
+												{role === 2024 ?
+													<a className="text-muted" onClick={handleOpenAlert}>
+														{e.judul}
+													</a>
+													:
+													<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
+														{e.judul}
+													</a>
+
+												}
 											</>
 										))}
 									</td>

components/PT/Riwayat.js

@@ -18,7 +18,7 @@ function Riwayat({ data }) {
 							</tr>
 						</thead>
 						<tbody>
-							{data.length
+							{data?.length
 								? data.map((value) => (
 										<tr>
 											<td>{moment(value.createAt).format("DD MMMM YYYY")}</td>

components/Riwayat/TableRiwayat.js

@@ -1,32 +1,96 @@
 import Datatable from "@/components/Tables/Datatable";
-import { Button } from "reactstrap";
 import Link from "next/link";
 import moment from "moment";
 import React, { Component } from "react";
 import { getLog2 } from "@/actions/log";
 import { connect } from "react-redux";
+import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap";
+
+
+import Datetime from "react-datetime";
 
 class TableRiwayat extends Component {
     constructor(props) {
         super(props);
         this.state = {
             dataRiwayat: "",
+            dataRiwayatsort:"",
+            fromDate: "",
+            toDate: "",
+            updateTable: false
         };
     }
     componentDidMount = async () => {
         const { token } = this.props;
-        const dataRiwayat = await getLog2(this.props.token);
+
+        const dataRiwayat = await getLog2(this.props.token)
         this.setState({ dataRiwayat });
     }
+    onFilter = async () => {
+        // const date1 = moment(this.state.fromDate).format("YYYY-MM-DD")
+        // const date2 = moment(this.state.toDate).format("YYYY-MM-DD")
+        // const dataRiwayat = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
+        // this.setState({ dataRiwayat });
+        this.setState({ updateTable: true });
+        setTimeout(() => {
+            this.setState({ updateTable: false });
+        }, 1);
+
+    }
+    componentDidUpdate = async () => {
+        const dataRiwayatsort = this.state
+        if (this.state.updateTable === true) {
+            const date1 = moment(this.state.fromDate).format("YYYY-MM-DD")
+            const date2 = moment(this.state.toDate).format("YYYY-MM-DD")
+            const dataRiwayat = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
+            this.setState({ dataRiwayatsort });
+            // this.setState({ dataRiwayat });
+        }
+    }
+
 
     render() {
+        console.log(this.state.dataRiwayat)
         return (
             <div className="card b ">
-                <div style={{ height: 500 }} className="card-body card-over">
+
+                <div className="card-body card-over">
+                    <span className=" ml-2 float-left">
+                        <label className="col-form-label">Range Filter : </label>
+
+                        <span className=" mr-2 ml-4">
+                            <Datetime
+                                timeFormat={false}
+                                inputProps={{ className: "form-control" }}
+                                closeOnSelect={true}
+                                value={this.state.fromDate ? moment(this.state.fromDate).format("DD-MM-YYYY") : "DD/MM/YYYY"}
+                                onChange={(fromDate) => {
+                                    this.setState({ fromDate })
+                                }}
+                            />
+                        </span>
+                        <span>
+                            <Datetime
+                                timeFormat={false}
+                                inputProps={{ className: "form-control" }}
+                                closeOnSelect={true}
+                                value={this.state.toDate ? moment(this.state.toDate).format("DD-MM-YYYY") : "DD/MM/YYYY"}
+                                onChange={(toDate) => {
+                                    this.setState({ toDate })
+                                }}
+                            />
+                        </span>
+                        <Button color="info" className=" mt-4" onClick={this.onFilter}>Filter</Button>
+
+                    </span>
                     {this.state.dataRiwayat && (
                         <Datatable options={{
-                            responsive: false, ordering: false, keys: false, lengthChange: false, searching: false, aLengthMenu: [500], paging: false, scrollX: true, scrollY: "370px",
-                            bordered: true
+                            searching: true, 
+                            aLengthMenu: [500],
+                            paging: false,
+                            scrollX: true, scrollY: "370px",
+                            bordered: true,
+                            "pageLength": 10
                         }}>
                             <table className="table w-100" data-order='[[3, "desc"]]'>
                                 <thead>
@@ -51,7 +115,7 @@ class TableRiwayat extends Component {
                                                     </div>
                                                 </div>
                                             </td>
-                                            <td style={{ minWidth: 130 }}>
+                                            <td >
                                                 <div className="media align-items-center">
                                                     <div className="media-body d-flex">
                                                         <div>
@@ -60,7 +124,7 @@ class TableRiwayat extends Component {
                                                     </div>
                                                 </div>
                                             </td>
-                                            <td style={{ minWidth: 120 }}>
+                                            <td>
                                                 <div className="media align-items-center">
                                                     <div className="media-body d-flex">
                                                         <div>
@@ -69,7 +133,7 @@ class TableRiwayat extends Component {
                                                     </div>
                                                 </div>
                                             </td>
-                                            <td style={{ minWidth: 150 }}>
+                                            <td >
                                                 <div className="media align-items-center">
                                                     <div className="media-body d-flex">
                                                         <div>

pages/pt/pemantauan.js

@@ -4,10 +4,16 @@ import Header from "@/components/Main/Header";
 import DetailPT from "@/components/Main/DetailPT";
 import { getLogPT } from "@/actions/log";
 import { getPT } from "@/actions/PT";
-import { Row, Col } from "reactstrap";
+import { Row, Col, ModalHeader, ModalBody, ModalFooter, Modal, FormFeedback, Button } from "reactstrap";
 import Timeline from "@/components/Main/Timeline";
 import { connect } from "react-redux";
 import Loader from "@/components/Common/Loader";
+import { createotp, getkontakpt, createkontak } from "../../actions/auth";
+import PhoneInput from 'react-phone-input-2'
+import 'react-phone-input-2/lib/style.css'
+import OtpInput from 'react-otp-input';
+import { ToastContainer, toast } from "react-toastify";
+
 
 class Pemantauan extends Component {
 	constructor(props) {
@@ -15,6 +21,11 @@ class Pemantauan extends Component {
 		this.state = {
 			log: [],
 			pt: {},
+			modalPhone: false,
+			otpClose: false,
+			modalOTP: false,
+			otp: "",
+			phone: ""
 		};
 	}
 
@@ -22,13 +33,130 @@ class Pemantauan extends Component {
 		const { token } = this.props;
 		const log = await getLogPT(token);
 		const pt = await getPT(token);
-		this.setState({ log, pt });
+		const kontakPT = await getkontakpt(token);
+		this.setState({ log, pt, kontakPT });
+		if (kontakPT=== undefined) {
+			this.setState({modalPhone:true})
+		}
+
 	};
+	otpClose = () => {
+		// return location.href = '/pt/pemantauan';
+		this.setState({ modalOTP: false, modalPhone: false })
+	}
+	handleSubmitTelepon = async () => {
+		const { token } = this.props
+		const create = createotp({ no_hp: this.state.phone }, token)
+		await toast.promise(create, {
+			pending: "Loading...",
+			// success: "Berhasil ",
+			error: "Error",
+		},)
 
+		this.setState({ modalPhone: false, modalOTP: true })
+	}
+	handleSubmitOtp = async () => {
+		const { token } = this.props
+		const create = createkontak({ otp: this.state.otp, no_hp: this.state.phone }, token)
+		await toast.promise(create, {
+			pending: "Loading...",
+			success: "Success",
+			error: "Error",
+		},)
+		this.setState({ modalPhone: false, modalOTP: false })
+	}
 	render() {
 		const { log, pt } = this.state;
 		return (
 			<ContentWrapper unwrap>
+				{this.state.kontakPT === undefined &&
+					<Modal isOpen={ this.state.kontakPT === undefined && this.state.modalPhone} style={{ width: '400px' }} >
+						<ModalBody>
+							<div className="modalLoginPT-a">
+								<img
+									className="icon-triangle-onModalPT"
+									src="/static/img/Frame_10.png"
+								></img>
+
+								<h3 className=" font-color-black">Konfirmasi Nomor Telepon Perguruan Tinggi</h3>
+							</div>
+
+							<div className="modalLoginPT-b">
+								<label className=" font-weight-bold h6">
+									Nomor Telepon :
+								</label>
+								<div className="border-2">
+									<PhoneInput
+										country={'id'}
+										value={this.state.phone}
+										onChange={phone => this.setState({ phone })} />
+								</div>
+							</div>
+
+							<div>
+								<Button className="btn-v2 float-left mr-2 ml-4" style={{ width: "40%" }} color onClick={this.otpClose}>
+									<span className=" font-color-black">
+										Batal
+									</span>
+								</Button>
+								<Button className="btn-login float-right mr-4" style={{ width: "40%" }} color onClick={this.handleSubmitTelepon}>
+									<span className=" font-color-white">
+										Kirim
+									</span>
+								</Button>
+							</div>
+						</ModalBody>
+
+					</Modal>
+				}
+				<Modal isOpen={this.state.modalOTP} style={{ width: '400px' }} >
+					<ModalBody>
+						<div className="modalLoginPT-a">
+							<img
+								className="icon-triangle-onModalPT mt-auto mb-auto"
+								src="/static/img/Frame_10.png"
+							></img>
+
+							<h3 className=" font-color-black">Masukan Kode OTP</h3>
+						</div>
+
+						{/* <div className="modalLoginPT-b"> */}
+
+						<div className=" mt-5 mb-5">
+							<OtpInput
+								invalid={this.state.error}
+								value={this.state.otp}
+								onChange={(otp) => { this.setState({ otp }) }}
+								numInputs={4}
+								renderSeparator={<span className=" font-color-black font-weight-bold mr-2 ml-2">-</span>}
+								renderInput={(props) => <input {...props} style={{ width: "50px", height: "50px", textAlign: "center", marginLeft: "auto", marginRight: "auto", borderRadius: "7px", fontSize: "30px" }} />}
+
+							/>   <p className="  mt-3">
+								*Kode OTP terkirim ke nomor WA {this.state.phone}
+							</p>
+							<FormFeedback invalid={this.state.error}>
+								Kode verifikasi harus diisi
+							</FormFeedback>
+						</div>
+
+						<div>
+							<Button className="btn-v2 float-left mr-2 ml-4" style={{ width: "40%" }} color onClick={this.otpClose}>
+								<span className=" font-color-black">
+									Batal
+								</span>
+							</Button>
+							<Button className="btn-login float-right mr-4" style={{ width: "40%" }} color onClick={this.handleSubmitOtp}
+							>
+								<span className=" font-color-white">
+									Kirim
+								</span>
+							</Button>
+						</div>
+					</ModalBody>
+
+				</Modal>
+
+
 				{pt?.data ? <Header data={pt.data} /> : <Loader />}
 				<div className="p-3">
 					<Row>

pages/pt/pencabutan-sanksi/detail.js

@@ -5,7 +5,7 @@ import { getOneSanksi } from "@/actions/sanksi";
 import Header from "@/components/Main/Header";
 import DetailPT from "@/components/Main/DetailPT";
 import DetailSanksi from "@/components/Main/DetailSanksi";
-import Riwayat from "@/components/PencabutanSanksi/Riwayat";
+import Riwayat from "@/components/PT/CabutSanksi/Riwayat";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody, FormGroup, Button } from "reactstrap";
 import { addCabutSanksi } from "@/actions/cabutSanksi";