Merge branch 'release/0.0.1'

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#52c190",
+        "activityBar.activeBorder": "#965bc4",
+        "activityBar.background": "#52c190",
+        "activityBar.foreground": "#15202b",
+        "activityBar.inactiveForeground": "#15202b99",
+        "activityBarBadge.background": "#965bc4",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "sash.hoverBorder": "#52c190",
+        "statusBar.background": "#3ba576",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#52c190",
+        "statusBarItem.remoteBackground": "#3ba576",
+        "statusBarItem.remoteForeground": "#e7e7e7",
+        "titleBar.activeBackground": "#3ba576",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#3ba57699",
+        "titleBar.inactiveForeground": "#e7e7e799"
+    },
+    "peacock.color": "#3ba576"
+}

actions/banding.js

@@ -0,0 +1,35 @@
+import { addLog } from "./log";
+
+export const addBanding = async ({ noSanksi, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/banding/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
+			method: "POST",
+			body: data,
+		});
+		const result = await res.json();
+		console.log(result);
+		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "banding" }, description: "membuat permohonan banding" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "ADD", from: { data: "banding" }, description: error.message || "membuat permohonan banding" });
+		return false;
+	}
+};
+
+export const addJawabanBanding = async ({ noSanksi, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/banding/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
+			method: "POST",
+			body: data,
+		});
+		const result = await res.json();
+		console.log(result);
+		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "banding" }, description: "membuat permohonan banding" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "ADD", from: { data: "banding" }, description: error.message || "membuat permohonan banding" });
+		return false;
+	}
+};

actions/cabutSanksi.js

@@ -0,0 +1,35 @@
+import { addLog } from "./log";
+
+export const addCabutSanksi = async ({ noSanksi, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/cabut-sanksi/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
+			method: "POST",
+			body: data,
+		});
+		const result = await res.json();
+		console.log(result);
+		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "cabut-sanksi" }, description: "membuat permohonan cabut-sanksi" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "ADD", from: { data: "cabut-sanksi" }, description: error.message || "membuat permohonan banding" });
+		return false;
+	}
+};
+
+export const addJawabanCabutSanksi = async ({ noSanksi, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/cabut-sanksi/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
+			method: "POST",
+			body: data,
+		});
+		const result = await res.json();
+		console.log(result);
+		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "cabut-sanksi" }, description: "membuat jawaban permohonan cabut-sanksi" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		// addLog({ status: "FAIL", action: "ADD", from: { data: "cabut-sanksi" }, description: error.message || "membuat jawaban permohonan banding" });
+		return false;
+	}
+};

actions/docPerbaikan.js

@@ -0,0 +1,14 @@
+export const addDocPerbaikan = async ({ noSanksi, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/doc-perbaikan/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
+			method: "POST",
+			body: data,
+		});
+		const result = await res.json();
+		console.log(result);
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

actions/keberatan.js

@@ -0,0 +1,35 @@
+import { addLog } from "./log";
+
+export const addKeberatan = async ({ noSanksi, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/keberatan/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
+			method: "POST",
+			body: data,
+		});
+		const result = await res.json();
+		console.log(result);
+		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "keberatan" }, description: "membuat permohonan keberatan" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "ADD", from: { data: "keberatan" }, description: error.message || "membuat permohonan keberatan" });
+		return false;
+	}
+};
+
+export const addJawabanKeberatan = async ({ noSanksi, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/keberatan/jawaban/add?noSanksi=${noSanksi}&ptId=${ptId}`, {
+			method: "POST",
+			body: data,
+		});
+		const result = await res.json();
+		console.log(result);
+		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "keberatan" }, description: "membuat permohonan keberatan" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "ADD", from: { data: "keberatan" }, description: error.message || "membuat permohonan keberatan" });
+		return false;
+	}
+};

actions/log.js

@@ -0,0 +1,30 @@
+export const getLog = async () => {
+	try {
+		const res = await fetch("http://localhost:5000/log");
+		return await res.json();
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+
+export const addLog = async (data) => {
+	try {
+		const myHeaders = new Headers();
+		myHeaders.append("Content-Type", "application/json");
+
+		const raw = JSON.stringify(data);
+
+		const requestOptions = {
+			method: "POST",
+			body: raw,
+			headers: myHeaders,
+		};
+
+		const updated = await fetch(`http://localhost:5000/log/add`, requestOptions);
+		return await updated.json();
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

actions/pelanggaran.js

@@ -0,0 +1,31 @@
+export const getPelanggaranId = async (id) => {
+	try {
+		const data = { id };
+		const myHeaders = new Headers();
+		myHeaders.append("Content-Type", "application/json");
+
+		const raw = JSON.stringify(data);
+
+		const requestOptions = {
+			method: "POST",
+			body: raw,
+			headers: myHeaders,
+		};
+
+		const res = await fetch("http://localhost:5000/pelanggaran", requestOptions);
+		return await res.json();
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+
+export const getPelanggaran = async () => {
+	try {
+		const res = await fetch("http://localhost:5000/pelanggaran");
+		return await res.json();
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

actions/pelaporan.js

@@ -0,0 +1,52 @@
+import { addLog } from "./log";
+
+export const getPelaporan = async (query = {}) => {
+	try {
+		let url = "http://localhost:5000/pelaporan";
+		if (query.ptId && query.number) {
+			url += `?number=${query.number}&ptId=${query.ptId}`;
+		} else if (query.penjadwalan) {
+			url += "?penjadwalan=true";
+		} else if (query.pemeriksaan) {
+			url += "?pemeriksaan=true";
+		}
+		const res = await fetch(url);
+		return await res.json();
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+
+export const createPelaporan = async (data) => {
+	try {
+		const res = await fetch("http://localhost:5000/pelaporan/create", {
+			method: "POST",
+			body: data,
+		});
+		const result = await res.json();
+		addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.created._id, data: "pelaporan" }, description: "membuat laporan" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "CREATE", from: { data: "pelaporan" }, description: error.message || "membuat laporan" });
+		return false;
+	}
+};
+
+export const addStatus = async ({ number, ptId }, data) => {
+	try {
+		const myHeaders = new Headers();
+		myHeaders.append("Content-Type", "application/json");
+		const raw = JSON.stringify(data);
+		const res = await fetch(`http://localhost:5000/pelaporan/status/add?number=${number}&ptId=${ptId}`, {
+			method: "POST",
+			body: raw,
+			headers: myHeaders,
+		});
+		return await res.json();
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

actions/pemeriksaan.js

@@ -0,0 +1,19 @@
+import { addLog } from "./log";
+
+export const insertPemeriksaan = async ({ number, ptId }, data) => {
+	try {
+		const requestOptions = {
+			method: "POST",
+			body: data,
+		};
+
+		const res = await fetch(`http://localhost:5000/pelaporan/pemeriksaan/create?number=${number}&ptId=${ptId}`, requestOptions);
+		const result = await res.json();
+		addLog({ status: "SUCCESS", action: "ADD", from: { id: result.added._id, data: "pemeriksaan" }, description: "menambah evaluasi" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "ADD", from: { data: "pemeriksaan" }, description: error.message || "menambah evaluasi" });
+		return false;
+	}
+};

actions/penjadwalan.js

@@ -0,0 +1,25 @@
+import { addLog } from "./log";
+
+export const updateJadwal = async ({ number, ptId }, data) => {
+	try {
+		const myHeaders = new Headers();
+		myHeaders.append("Content-Type", "application/json");
+
+		const raw = JSON.stringify(data);
+
+		const requestOptions = {
+			method: "POST",
+			body: raw,
+			headers: myHeaders,
+		};
+
+		const updated = await fetch(`http://localhost:5000/pelaporan/jadwal/add?number=${number}&ptId=${ptId}`, requestOptions);
+		const result = await updated.json();
+		addLog({ status: "SUCCESS", action: "UPDATE", from: { id: result.added._id, data: "penjadwalan" }, description: "mengubah jadwal pemeriksaan" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "UPDATE", from: { data: "penjadwalan" }, description: error.message || "mengubah jadwal pemeriksaan" });
+		return false;
+	}
+};

actions/sanksi.js

@@ -0,0 +1,44 @@
+import { addLog } from "./log";
+
+export const createSanksi = async ({ number, ptId }, data) => {
+	try {
+		const res = await fetch(`http://localhost:5000/sanksi/create?number=${number}&ptId=${ptId}`, {
+			method: "POST",
+			body: data,
+		});
+		const result = await res.json();
+		console.log(result);
+		// addLog({ status: "SUCCESS", action: "CREATE", from: { id: result.added._id, data: "sanksi" }, description: "membuat sanksi" });
+		return result;
+	} catch (error) {
+		console.log("error", error);
+		addLog({ status: "FAIL", action: "CREATE", from: { data: "sanksi" }, description: error.message || "membuat sanksi" });
+		return false;
+	}
+};
+
+export const getSanksi = async (query = {}) => {
+	try {
+		let url = "http://localhost:5000/sanksi";
+		if (query != null) {
+			const { ptId, noSanksi, keberatan, jawaban, banding, active, cabutSanksi, docPerbaikan } = query;
+			url += "?";
+			const parseURL = [];
+			if (noSanksi) parseURL.push(`noSanksi=${noSanksi}`);
+			if (ptId) parseURL.push(`ptId=${ptId}`);
+			if (keberatan) parseURL.push(`keberatan=true`);
+			if (banding) parseURL.push(`banding=true`);
+			if (cabutSanksi) parseURL.push(`cabutSanksi=true`);
+			if (docPerbaikan) parseURL.push(`docPerbaikan=true`);
+			if (jawaban) parseURL.push(`jawaban=true`);
+			url += parseURL.join("&");
+			url += "&active=true";
+		}
+
+		const res = await fetch(url);
+		return await res.json();
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};

components/Banding/Riwayat.js

@@ -0,0 +1,49 @@
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+
+function Riwayat({ data }) {
+	const jawaban = data.sanksi.banding.jawaban;
+	return (
+		<Card className="card-default">
+			<CardHeader>
+				<CardTitle>Riwayat</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Datatable options={{ responsive: true }}>
+					<table className="table table-striped my-4 w-100">
+						<thead>
+							<tr>
+								<th>Tanggal</th>
+								<th>Status</th>
+								<th>Dokumen Jawaban</th>
+							</tr>
+						</thead>
+						<tbody>
+							{jawaban ? (
+								<tr>
+									<td>{moment(jawaban.createAt).format("DD MMMM YYYY")}</td>
+									<td>{jawaban.status}</td>
+									<td>
+										{jawaban.files.map((e) => (
+											<>
+												<em className="fa-lg far fa-file-code"></em>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</>
+										))}
+									</td>
+								</tr>
+							) : (
+								""
+							)}
+						</tbody>
+					</table>
+				</Datatable>
+			</CardBody>
+		</Card>
+	);
+}
+
+export default Riwayat;

components/Common/Loader.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Spinner } from "react-bootstrap";
+
+const Loader = () => {
+	return (
+		<Spinner
+			animation="border"
+			role="status"
+			style={{
+				width: "100px",
+				height: "100px",
+				margin: "auto",
+				display: "block",
+			}}
+		>
+			<span className="sr-only">Loading...</span>
+		</Spinner>
+	);
+};
+
+export default Loader;

components/Common/Message.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Alert } from "react-bootstrap";
+
+const Message = ({ variant, children }) => {
+	return <Alert variant={variant}>{children}</Alert>;
+};
+
+Message.defaultProps = {
+	variant: "info",
+};
+
+export default Message;

components/Common/Scrollable.js

@@ -1,38 +1,37 @@
 // SLIMSCROLL
 // -----------------------------------
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
 // Perfect Scrollbar
-import PerfectScrollbar from 'react-perfect-scrollbar';
-import 'react-perfect-scrollbar/dist/css/styles.css';
+import PerfectScrollbar from "react-perfect-scrollbar";
 
 // ensure rails are shown over the rest
-const fixRailsZIndex = '.ps__rail-y, ps__rail-x {z-index: 999999; }';
+const fixRailsZIndex = ".ps__rail-y, ps__rail-x {z-index: 999999; }";
 
-const Scrollable = props => {
-    const scrollStyle = {
-        position: 'relative'
-    };
-    if (props.height !== null) {
-        scrollStyle.height = props.height;
-    }
-    return (
-        <>
-            <style>{fixRailsZIndex}</style>
-            <PerfectScrollbar {...props} style={scrollStyle}>
-                {props.children}
-            </PerfectScrollbar>
-        </>
-    );
+const Scrollable = (props) => {
+	const scrollStyle = {
+		position: "relative",
+	};
+	if (props.height !== null) {
+		scrollStyle.maxHeight = props.height;
+	}
+	return (
+		<>
+			<style>{fixRailsZIndex}</style>
+			<PerfectScrollbar {...props} style={scrollStyle}>
+				{props.children}
+			</PerfectScrollbar>
+		</>
+	);
 };
 
 Scrollable.propTypes = {
-    /** height of the element */
-    height: PropTypes.string
+	/** height of the element */
+	height: PropTypes.string,
 };
 
 Scrollable.defaultProps = {
-    height: '250px'
+	height: "250px",
 };
 
 export default Scrollable;

components/Extras/calendar.view.js

@@ -1,270 +1,192 @@
-import React, { Component } from 'react';
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap';
-
-import FullCalendar from '@fullcalendar/react';
-import dayGridPlugin from '@fullcalendar/daygrid';
-import timeGridPlugin from '@fullcalendar/timegrid';
-import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
-import listPlugin from '@fullcalendar/list';
-import bootstrapPlugin from '@fullcalendar/bootstrap';
-
-import '@fullcalendar/core/main.css';
-import '@fullcalendar/daygrid/main.css';
-import '@fullcalendar/timegrid/main.css';
-import '@fullcalendar/list/main.css';
-import '@fullcalendar/bootstrap/main.css';
-
-import events from './calendar.events';
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import { updateJadwal } from "@/actions/penjadwalan";
+import DetailLaporan from "@/components/Penjadwalan/DetailLaporan";
+import Link from "next/link";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
+import listPlugin from "@fullcalendar/list";
+import bootstrapPlugin from "@fullcalendar/bootstrap";
+import events from "./calendar.events";
 
 class Calendar extends Component {
-    calendarEvents = events;
-
-    calendarPlugins = [
-        interactionPlugin,
-        dayGridPlugin,
-        timeGridPlugin,
-        listPlugin,
-        bootstrapPlugin
-    ];
-
-    calendarHeader = {
-        left: 'prev,next today',
-        center: 'title',
-        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
-    };
-
-    // External events properties
-
-    evColors = [
-        'danger',
-        'primary',
-        'info',
-        'success',
-        'warning',
-        'green',
-        'pink',
-        'inverse',
-        'purple'
-    ];
-
-    state = {
-        selectedEvent: null,
-        evRemoveOnDrop: true,
-        evSelectedColor: this.evColors[0],
-        evNewName: '',
-        _externalEvents: [
-            { color: 'green', name: 'Lunch' },
-            { color: 'danger', name: 'Go home' },
-            { color: 'info', name: 'Do homework' },
-            { color: 'warning', name: 'Work on UI design' },
-            { color: 'inverse', name: 'Sleep tight' }
-        ],
-        externalEvents:[
-            { color: 'info', name: 'Jadwal Pemeriksaan - BI:54678' }
-        ]
-    };
-
-    componentDidMount() {
-        /* initialize the external events */
-        new Draggable(this.refs.externalEventsList, {
-            itemSelector: '.fce-event',
-            eventData: function(eventEl) {
-                return {
-                    title: eventEl.innerText.trim()
-                };
-            }
-        });
-    }
-
-    addRandomEvent() {
-        // add dynamically an event
-        this.addEvent({
-            title: 'Random Event',
-            start: new Date(
-                new Date().getFullYear(),
-                new Date().getMonth(),
-                Math.random() * (30 - 1) + 1
-            ),
-            backgroundColor: '#c594c5', //purple
-            borderColor: '#c594c5' //purple
-        });
-    }
-
-    dayClick = date => {
-        this.setState({
-            selectedEvent: {
-                date: date.dateStr
-            }
-        });
-    };
-
-    // add event directly into calendar
-    addEvent(event) {
-        this.calendarEvents.push(event);
-    }
-
-    handleEventReceive = info => {
-        var styles = getComputedStyle(info.draggedEl);
-        info.event.setProp('backgroundColor', styles.backgroundColor);
-        info.event.setProp('borderColor', styles.borderColor);
-
-        // is the "remove after drop" checkbox checked?
-        if (this.state.evRemoveOnDrop) {
-            this.removeExternalEvent(info.draggedEl.textContent);
-        }
-    };
-
-    getEvColorClasses(evcolor) {
-        return 'bg-' + evcolor + (this.state.evSelectedColor === evcolor ? ' selected' : '');
-    }
-
-    addNewExternalEvent = () => {
-        const externalEvents = this.state.externalEvents.concat({
-            color: this.state.evSelectedColor,
-            name: this.state.evNewName
-        });
-        this.setState({
-            externalEvents
-        });
-    };
-
-    removeExternalEvent = name => {
-        let externalEvents = [...this.state.externalEvents];
-        const index = externalEvents.findIndex(e => e.name === name);
-        if (index > -1) {
-            externalEvents.splice(index, 1);
-            this.setState({
-                externalEvents
-            });
-        }
-    };
-
-    selectColor = color => () => {
-        this.setState({
-            evSelectedColor: color
-        });
-    };
-
-    handleCheck = event => {
-        this.setState({
-            //evRemoveOnDrop: event.target.checked
-            evRemoveOnDrop: true
-        });
-    };
-
-    handleInputName = event => {
-        this.setState({
-            evNewName: event.target.value
-        });
-    };
-
-    render() {
-        const { externalEvents, selectedEvent } = this.state;
-        return (
-            <ContentWrapper>
-                <div className="content-heading">
-                    <div>
-                        Jadwal Pemeriksaan
-                        <small>Format pembuatan jadwal pemeriksaan v.0.1</small>
-                    </div>
-                </div>
-                <div className="calendar-app">
-                    <div className="row">
-                        <div className="col-xl-3 col-lg-4">
-                            <div className="row">
-                                <div className="col-lg-12 col-md-6 col-12">
-                                    {/* START card */}
-                                    <Card className="card-default" title="">
-                                        <CardHeader>
-                                            <CardTitle tag="h4">Draggable Events</CardTitle>
-                                        </CardHeader>
-                                        {/* Default external events list */}
-                                        <CardBody>
-                                            <div className="external-events" ref="externalEventsList">
-                                            {
-                                                externalEvents.map(ev =>
-                                                    <div className={'fce-event bg-' + ev.color} key={ev.name+ev.color}>{ev.name}</div>
-                                                )
-                                            }
-                                            </div>
-                                            {/* <div className="custom-control custom-checkbox mt-3">
-                                                <input className="custom-control-input" id="drop-remove" type="checkbox" onChange={this.handleCheck}/>
-                                                <label className="custom-control-label" htmlFor="drop-remove">Remove after Drop</label>
-                                            </div> */}
-                                        </CardBody>
-                                    </Card>
-                                {/* END card */}
-                                </div>
-                                <div className="col-lg-12 col-md-6 col-12">
-                                    {/* START card */}
-                                    <Card className="card-default">
-                                        <CardHeader>
-                                            <CardTitle tag="h4">Create Event</CardTitle>
-                                        </CardHeader>
-                                        <CardBody>
-                                            <div className="input-group mb-2">
-                                                <input className="form-control" type="text" placeholder="Event name..." onChange={this.handleInputName}/>
-                                                <div className="input-group-btn">
-                                                    <button className="btn btn-secondary" onClick={this.addNewExternalEvent} type="button">Add</button>
-                                                </div>
-                                            </div>
-                                            <p className="text-muted"><small>Choose a Color</small></p>
-                                            <ul className="list-inline" id="external-event-color-selector">
-                                                {
-                                                    this.evColors.map(evc =>
-                                                        <li className="list-inline-item p-0" key={evc}>
-                                                            <div
-                                                                className={"circle circle-xl " + this.getEvColorClasses(evc)}
-                                                                onClick={this.selectColor(evc)}></div>
-                                                        </li>
-                                                    )
-                                                }
-                                            </ul>
-                                        </CardBody>
-                                    </Card>
-                                {/* END card */}
-                                </div>
-                            </div>
-                            <div className="mb-3">
-                                {selectedEvent &&
-                                    <div>
-                                        <p>Selected:</p>
-                                        <div className="box-placeholder">{JSON.stringify(selectedEvent)}</div>
-                                    </div>
-                                }
-                                {!selectedEvent &&
-                                    <div>
-                                        <p>Click calendar to show information</p>
-                                    </div>
-                                }
-                            </div>
-                        </div>
-                        <div className="col-xl-9 col-lg-8">
-                            <Card className="card-default">
-                                <CardBody>
-                                    {/* START calendar */}
-                                    <FullCalendar
-                                        defaultView={this.dayGridMonth}
-                                        plugins={this.calendarPlugins}
-                                        events={this.calendarEvents}
-                                        themeSystem={"bootstrap"}
-                                        header={this.calendarHeader}
-                                        editable={true}
-                                        droppable={true}
-                                        deepChangeDetection={true}
-                                        dateClick={this.dayClick}
-                                        eventReceive={this.handleEventReceive}
-                                        >
-                                    </FullCalendar>
-                                </CardBody>
-                            </Card>
-                        </div>
-                    </div>
-                </div>
-            </ContentWrapper>
-        );
-    }
+	calendarEvents = events;
+
+	calendarPlugins = [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, bootstrapPlugin];
+
+	calendarHeader = {
+		left: "prev,next today",
+		center: "title",
+		right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
+	};
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedEvent: null,
+			evRemoveOnDrop: true,
+			evNewName: "",
+			externalEvents: [],
+			dataLaporan: [],
+			dataEvent: [],
+			laporan: {},
+			selectedOption: null,
+		};
+	}
+
+	async componentDidMount() {
+		/* initialize the external events */
+		new Draggable(this.refs.externalEventsList, {
+			itemSelector: ".fce-event",
+			eventData: function (eventEl) {
+				return {
+					title: eventEl.innerText.trim(),
+				};
+			},
+		});
+
+		const dataLaporan = await getPelaporan({ penjadwalan: true });
+		const { data } = await getPelaporan({ number: this.props.query.number, ptId: this.props.query.ptId });
+		this.setState({ dataLaporan });
+		this.getDataEvent();
+
+		// const cek = this.state.dataLaporan.data.filter((e) => e._number === this.props.query.number && e.pt_id == this.props.query.ptId)[0];
+		this.setState({ laporan: data[0] });
+		let color = "#" + Math.floor(Math.random() * 16777215).toString(16);
+		if (data[0].penjadwalan) {
+			color = data[0].penjadwalan.background_color;
+		}
+		this.setState({ externalEvents: [{ id: this.props.query.number, color: color, name: "Jadwal Pemeriksaan - BI:" + this.props.query.number }] });
+	}
+
+	getDataEvent = () => {
+		const dataEvent = this.state.dataLaporan.data
+			.filter((e) => e.penjadwalan)
+			.map((e) => ({
+				title: e.penjadwalan.title,
+				start: new Date(e.penjadwalan.from_date),
+				end: new Date(e.penjadwalan.to_date),
+				backgroundColor: e.penjadwalan.background_color, //red
+				borderColor: e.penjadwalan.background_color,
+			}));
+		this.setState({ dataEvent });
+	};
+
+	dayClick = (date) => {
+		this.setState({
+			selectedEvent: {
+				date: date.dateStr,
+			},
+		});
+	};
+
+	addEvent(event) {
+		this.calendarEvents.push(event);
+	}
+
+	handleEventReceive = (info) => {
+		var styles = getComputedStyle(info.draggedEl);
+		info.event.setProp("backgroundColor", styles.backgroundColor);
+		info.event.setProp("borderColor", styles.borderColor);
+		this.handleEventCalendar(info);
+	};
+
+	handleEventCalendar = async ({ event }) => {
+		const number = this.props.query.number;
+		const ptId = this.props.query.ptId;
+		const data = {
+			title: event.title,
+			from_date: event.start,
+			to_date: event.end || event.start,
+			background_color: event.backgroundColor,
+		};
+
+		const update = await updateJadwal({ number, ptId }, data);
+	};
+
+	handleChangeSelect = (selectedOption) => {
+		this.setState({ selectedOption });
+	};
+
+	render() {
+		const { externalEvents, laporan, selectedOption } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<div>
+						Jadwal Pemeriksaan
+						<small>Format pembuatan jadwal pemeriksaan v.0.1</small>
+					</div>
+					<div className="ml-auto">
+						<Link href="/app/penjadwalan">
+							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+						</Link>
+					</div>
+				</div>
+				<div className="calendar-app">
+					<div className="row">
+						<div className="col-xl-4 col-lg-5">
+							<div className="row">
+								<div className="col-lg-12 col-md-6 col-12">
+									{selectedOption && selectedOption.value === "ditutup" ? (
+										""
+									) : (
+										<Card className="card-default" title="">
+											<CardHeader>
+												<CardTitle tag="h4">Daftar Pemeriksaan</CardTitle>
+											</CardHeader>
+											<CardBody>
+												<div className="external-events" ref="externalEventsList">
+													{externalEvents.map((ev) => (
+														<div
+															className="fce-event"
+															style={{
+																backgroundColor: ev.color,
+															}}
+															key={ev.name + ev.color}
+															data-id={ev.id}
+														>
+															{ev.name}
+														</div>
+													))}
+												</div>
+											</CardBody>
+										</Card>
+									)}
+									{laporan ? <DetailLaporan query={this.props.query} data={laporan} handleChangeSelect={this.handleChangeSelect} /> : ""}
+								</div>
+							</div>
+						</div>
+						<div className="col-xl-8 col-lg-7">
+							<Card className="card-default">
+								<CardBody>
+									{/* START calendar */}
+									<FullCalendar
+										defaultView={this.dayGridMonth}
+										plugins={this.calendarPlugins}
+										events={this.state.dataEvent}
+										themeSystem={"bootstrap"}
+										header={this.calendarHeader}
+										editable={true}
+										droppable={true}
+										deepChangeDetection={true}
+										dateClick={this.dayClick}
+										eventReceive={this.handleEventReceive}
+										eventDrop={this.handleEventCalendar}
+										eventResize={this.handleEventCalendar}
+									></FullCalendar>
+								</CardBody>
+							</Card>
+						</div>
+					</div>
+				</div>
+			</ContentWrapper>
+		);
+	}
 }
 
 export default Calendar;

components/Keberatan/Riwayat.js

@@ -0,0 +1,51 @@
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+
+function Riwayat({ data }) {
+	const jawaban = data.sanksi.keberatan.jawaban;
+	return (
+		<Card className="card-default">
+			<CardHeader>
+				<CardTitle>Riwayat</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Datatable options={{ responsive: true }}>
+					<table className="table table-striped my-4 w-100">
+						<thead>
+							<tr>
+								<th>Tanggal</th>
+								<th>Status</th>
+								<th>Keterangan Jawaban</th>
+								<th>Dokumen Jawaban</th>
+							</tr>
+						</thead>
+						<tbody>
+							{jawaban ? (
+								<tr>
+									<td>{moment(jawaban.createAt).format("DD MMMM YYYY")}</td>
+									<td>{jawaban.status}</td>
+									<td>{jawaban.description}</td>
+									<td>
+										{jawaban.files.map((e) => (
+											<>
+												<em className="fa-lg far fa-file-code"></em>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</>
+										))}
+									</td>
+								</tr>
+							) : (
+								""
+							)}
+						</tbody>
+					</table>
+				</Datatable>
+			</CardBody>
+		</Card>
+	);
+}
+
+export default Riwayat;

components/Layout/Menu.js

@@ -1,81 +1,133 @@
 const Menu = [
-    {
-        heading: 'Main Navigation',
-        translate: 'sidebar.heading.HEADER'
-    },
-    {
-        name: 'Perbaikan & Keberatan',
-        path: '/app/pt.sanksi',
-        icon : 'icon-grid',
-        translate: 'sidebar.nav.USERVIEW'
-    },
-    {
-        name: 'Login',
-        path: '/login',
-        icon: 'icon-login',
-        translate: 'sidebar.nav.LOGIN'
-    },
-    {
-        name: 'Pelaporan',
-        path: '/app/pelaporan',
-        icon: 'icon-notebook',
-        translate: 'sidebar.nav.PELAPORAN'
-    },
-    {
-        name: 'Penjadwalan Evaluasi',
-        path: '/app/penjadwalan',
-        icon: 'icon-notebook',
-        translate: 'sidebar.nav.PENJADWALAN'
-    },
-    {
-        name: 'Pemeriksaan',
-        path: '/app/pemeriksaan',
-        icon: 'icon-notebook',
-        translate: 'sidebar.nav.PEMERIKSAAN'
-    },
-    {
-        name: 'Sanksi',
-        path: '/app/sanksi',
-        icon: 'icon-notebook',
-        translate: 'sidebar.nav.SANKSI'
-    },
-    // {
-    //     name: 'Project',
-    //     path: '/app/projects',
-    //     icon: 'icon-notebook',
-    //     translate: 'sidebar.nav.PROJECT'
-    // },
-    // {
-    //     name: 'Project Detail',
-    //     path: '/app/projectdetails',
-    //     icon: 'icon-note',
-    //     translate: 'sidebar.nav.PROJECTDETAIL'
-    // },
-    {
-        name: 'Pencarian',
-        path: '/app/search',
-        icon: 'icon-note',
-        translate: 'sidebar.nav.SEARCH'
-    },
-    {
-        name: 'FAQ',
-        path: '/app/faq',
-        //icon: 'icon-notebook',
-        translate: 'sidebar.nav.FAQ'
-    },
-    // {
-    //     name: 'Todo',
-    //     path: '/app/calendar',
-    //     //icon: 'icon-notebook',
-    //     translate: 'sidebar.nav.TODO'
-    // },
-    {
-        name: 'User List',
-        path: '/app/userlist',
-        //icon: 'icon-notebook',
-        translate: 'sidebar.nav.USERLIST'
-    }
+	{
+		heading: "Main Navigation",
+		translate: "sidebar.heading.HEADER",
+	},
+	{
+		name: "Login",
+		path: "/login",
+		icon: "icon-login",
+		translate: "sidebar.nav.LOGIN",
+	},
+	{
+		name: "Pelaporan",
+		path: "/app/pelaporan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PELAPORAN",
+	},
+	{
+		name: "Penjadwalan Evaluasi",
+		path: "/app/penjadwalan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PENJADWALAN",
+	},
+	{
+		name: "Pemeriksaan",
+		path: "/app/pemeriksaan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PEMERIKSAAN",
+	},
+	{
+		name: "Sanksi",
+		path: "/app/sanksi",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.SANKSI",
+	},
+	{
+		heading: "Dikti Ristek",
+		translate: "sidebar.heading.DIKTI_RISTEK",
+	},
+	{
+		name: "Pemantauan",
+		path: "/app/pemantauan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PEMANTAUAN",
+	},
+	{
+		name: "Keberatan",
+		path: "/app/keberatan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.KEBERATAN",
+	},
+	{
+		name: "Banding",
+		path: "/app/banding",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.BANDING",
+	},
+	{
+		name: "Pemantauan Perbaikan",
+		path: "/app/pemantauan-perbaikan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PEMANTAUAN_PERBAIKAN",
+	},
+	{
+		name: "Permohonan Pencabutan Sanksi",
+		path: "/app/pencabutan-sanksi",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PENCABUTAN_SANKSI",
+	},
+	{
+		heading: "Perguruan Tinggi",
+		translate: "sidebar.heading.PERGURUAN_TINGGI",
+	},
+	{
+		name: "Pemantauan",
+		path: "/app/pt/pemantauan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PT_PEMANTAUAN",
+	},
+	{
+		name: "Pengajuan Keberatan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PENGAJUAN_KEBERATAN",
+		submenu: [
+			{
+				name: "a. Permohonan Keberatan",
+				path: "/app/pt/keberatan",
+			},
+			{
+				name: "b. Jawaban atas permohonan keberatan",
+				path: "/app/pt/jawaban-keberatan",
+			},
+			{
+				name: "c. Jawaban atas permohonan banding",
+				path: "/app/pt/jawaban-banding",
+			},
+		],
+	},
+	{
+		name: "Dokumen Perbaikan",
+		path: "/app/pt/dokumen-perbaikan",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PT_DOKUMEN_PERBAIKAN",
+	},
+	{
+		name: "Permohonan Pencabutan Sanksi",
+		path: "/app/pt/pencabutan-sanksi",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PT_PENCABUTAN_SANKSI",
+	},
+	{
+		name: "Jawaban Permohonan Pencabutan Sanksi",
+		path: "/app/pt/jawaban-pencabutan-sanksi",
+		icon: "icon-notebook",
+		translate: "sidebar.nav.PT_JAWABAN_PENCABUTAN_SANKSI",
+	},
+
+	// {
+	// 	name: "FAQ",
+	// 	path: "/app/faq",
+	// 	icon: "icon-notebook",
+	// 	translate: "sidebar.nav.FAQ",
+	// },
+	// {
+	// 	name: "User List",
+	// 	path: "/app/userlist",
+	// 	icon: "icon-notebook",
+	// 	translate: "sidebar.nav.USERLIST",
+	// },
 ];
 
 export default Menu;
-``
+``;

components/Main/CaseProgress.js

@@ -0,0 +1,83 @@
+import { Progress } from "reactstrap";
+import Sparkline from "@/components/Common/Sparklines";
+
+function CaseProgress() {
+	return (
+		<div className="card b">
+			<div className="card-body bb">
+				<p>Overvall progress</p>
+				<div className="d-flex align-items-center mb-2">
+					<div className="w-100">
+						<Progress className="progress-xs m0" color="info" value={20} />
+					</div>
+					<div className="ml-auto">
+						<div className="col wd-xxs text-right">
+							<div className="text-bold text-muted">20%</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className="card-body">
+				<p>Metrics</p>
+				<div className="row text-center">
+					<div className="col-6 col-lg-6 col-xl-6">
+						<Sparkline
+							values={[20, 80]}
+							options={{
+								type: "pie",
+								height: "50",
+								sliceColors: ["#edf1f2", "#23b7e5"],
+							}}
+							className="sparkline"
+						/>
+						<p className="mt-3">Open Case</p>
+					</div>
+					<div className="col-6 col-lg-6 col-xl-6">
+						<Sparkline
+							values={[80, 20]}
+							options={{
+								type: "pie",
+								height: "50",
+								sliceColors: ["#edf1f2", "#27c24c"],
+							}}
+							className="sparkline"
+						/>
+						<p className="mt-3">Close Case</p>
+					</div>
+				</div>
+			</div>
+			<table className="table bb">
+				<tbody>
+					<tr>
+						<td>
+							<strong>Open Case</strong>
+						</td>
+						<td>80</td>
+					</tr>
+					<tr>
+						<td>
+							<strong>Close Case</strong>
+						</td>
+						<td>20</td>
+					</tr>
+					<tr>
+						<td>
+							<strong>Performance</strong>
+						</td>
+						<td>
+							<em className="far fa-smile fa-lg text-warning"></em>
+						</td>
+					</tr>
+					<tr>
+						<td>
+							<strong>Last Case Closed</strong>
+						</td>
+						<td>BI:1107 - 12/01/2016</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+export default CaseProgress;

components/Main/DetailLaporan.js

@@ -0,0 +1,86 @@
+import Scrollable from "@/components/Common/Scrollable";
+import moment from "moment";
+import { Col, FormGroup } from "reactstrap";
+
+function DetailLaporan({ data, noTitle = false }) {
+	return (
+		<>
+			{noTitle ? "" : <p className="lead bb">Detail Laporan</p>}
+			<form className="form-horizontal">
+				<FormGroup row>
+					<Col md="4">Nomor Laporan:</Col>
+					<Col md="8">
+						<strong>{data._number}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Nama Perguruan Tinggi:</Col>
+					<Col md="8">
+						<strong>Universitas Satyagama</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Jenis Pelanggaran:</Col>
+					<Col md="8">
+						<Scrollable height="125px" className="list-group">
+							<ul>
+								{data.pelanggaran.map((e) => (
+									<li>{e.pelanggaran}</li>
+								))}
+							</ul>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Keterangan Laporan:</Col>
+					<Col md="8">
+						<Scrollable height="100px" className="list-group">
+							<p>{data.description}</p>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Dibuat Pada:</Col>
+					<Col md="8">
+						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
+					</Col>
+				</FormGroup>
+				{data.status ? (
+					<FormGroup row>
+						<Col md="4">Status:</Col>
+						<Col md="8">
+							<div className="badge badge-info">{data.status}</div>
+						</Col>
+					</FormGroup>
+				) : (
+					""
+				)}
+				<FormGroup row>
+					<Col md="4">File Pendukung:</Col>
+					<Col md="8">
+						<Scrollable height="120px" className="list-group">
+							<table className="table table-bordered bg-transparent">
+								<tbody>
+									{data.files.map((e) => (
+										<tr>
+											<td>
+												<em className="fa-lg far fa-file-code"></em>
+											</td>
+											<td>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+			</form>
+		</>
+	);
+}
+
+export default DetailLaporan;

components/Main/DetailPT.js

@@ -0,0 +1,23 @@
+function DetailPT() {
+	return (
+		<div className="card card-default">
+			<div className="card-body">
+				<div className="text-center">
+					<h3 className="mt-0">Universitas Satyagama</h3>
+					<p>0742/O/1990</p>
+				</div>
+				<hr />
+				<ul className="list-unstyled px-4">
+					<li>
+						<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
+					</li>
+					<li>
+						<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
+					</li>
+				</ul>
+			</div>
+		</div>
+	);
+}
+
+export default DetailPT;

components/Main/DetailSanksi.js

@@ -0,0 +1,108 @@
+import Scrollable from "@/components/Common/Scrollable";
+import moment from "moment";
+import { Col, FormGroup, Table } from "reactstrap";
+
+function DetailSanksi({ data, noTitle = false }) {
+	return (
+		<>
+			{noTitle ? "" : <p className="lead bb">Detail Sanksi</p>}
+			<form className="form-horizontal">
+				<FormGroup row>
+					<Col md="4">Nomor Sanksi:</Col>
+					<Col md="8">
+						<strong>{data.sanksi.no_sanksi}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Nama Perguruan Tinggi:</Col>
+					<Col md="8">
+						<strong>Universitas Satyagama</strong>
+					</Col>
+				</FormGroup>
+
+				<FormGroup row>
+					<Col md="4">Keterangan:</Col>
+					<Col md="8">
+						<Scrollable height="100px" className="list-group">
+							<p>{data.sanksi.description}</p>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Dibuat Pada:</Col>
+					<Col md="8">
+						<strong>{moment(data.sanksi.createdAt).format("D MMMM YYYY")}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Dokumen Sanksi:</Col>
+					<Col md="8">
+						<Scrollable height="120px" className="list-group">
+							<table className="table table-bordered bg-transparent">
+								<tbody>
+									{data.sanksi.files.map((e) => (
+										<tr>
+											<td>
+												<em className="fa-lg far fa-file-code"></em>
+											</td>
+											<td>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md={12}>
+						<div className="card b">
+							<div className="card-body bb">
+								<Table responsive>
+									<thead>
+										<tr>
+											<th>Jenis Pelanggaran</th>
+											<th>Sanksi</th>
+										</tr>
+									</thead>
+									<tbody>
+										{data.sanksi.pelanggaran.map((jp, index) => (
+											<tr key={jp._id}>
+												<td width={50}>
+													<div className="media align-items-center">
+														<div className="media-body d-flex">
+															<div>
+																<p>{jp.pelanggaran}</p>
+																<p>TMT : {jp.tmt_bulan} Bulan</p>
+																<p>Level Pelanggaran : {jp.label_sanksi}</p>
+															</div>
+														</div>
+													</div>
+												</td>
+												<td width={50}>
+													<div className="media align-items-center">
+														<div className="media-body d-flex">
+															<div>
+																<p>{jp.sanksi}</p>
+																<p>Keterangan : {jp.keterangan_sanksi}</p>
+															</div>
+														</div>
+													</div>
+												</td>
+											</tr>
+										))}
+									</tbody>
+								</Table>
+							</div>
+						</div>
+					</Col>
+				</FormGroup>
+			</form>
+		</>
+	);
+}
+
+export default DetailSanksi;

components/Main/Header.js

@@ -0,0 +1,18 @@
+function Header() {
+	const styleHeaderText = {
+		color: "brown",
+	};
+
+	return (
+		<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
+			<div className="p-4 text-center" style={styleHeaderText}>
+				<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
+				<h3 className="m-0">Universitas Satyagama</h3>
+				<p>0742/O/1990</p>
+				<p>Jalan Kamal Raya No 2-A Cengkareng</p>
+			</div>
+		</div>
+	);
+}
+
+export default Header;

components/Main/PermohonanPT.js

@@ -0,0 +1,37 @@
+import Scrollable from "@/components/Common/Scrollable";
+import { Col, FormGroup } from "reactstrap";
+
+function PermohonanPT({ data }) {
+	return (
+		<>
+			<p className="lead bb">Permohonan dari PT</p>
+			<form className="form-horizontal">
+				<FormGroup row>
+					<Col md="4">Dokumen Permohonan:</Col>
+					<Col md="8">
+						<Scrollable height="120px" className="list-group">
+							<table className="table table-bordered bg-transparent">
+								<tbody>
+									{data.sanksi.keberatan.files.map((e) => (
+										<tr>
+											<td>
+												<em className="fa-lg far fa-file-code"></em>
+											</td>
+											<td>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+			</form>
+		</>
+	);
+}
+
+export default PermohonanPT;

components/Main/RiwayatEvaluasi.js

@@ -0,0 +1,39 @@
+import Datatable from "@/components/Tables/Datatable";
+
+function RiwayatEvaluasi({ listData }) {
+	return (
+		<Datatable options={{ responsive: true }}>
+			<table className="table table-striped my-4 w-100">
+				<thead>
+					<tr>
+						<th>Tanggal</th>
+						<th>Judul Dokumen</th>
+						<th>File Pendukung</th>
+					</tr>
+				</thead>
+				<tbody>
+					{listData.map((data) => (
+						<tr>
+							<td>{data.tanggal}</td>
+							<td>{data.judul_dokumen}</td>
+							<td>
+								{data.file
+									.map((e) => (
+										<>
+											<em className="fa-lg far fa-file-code"></em>
+											<a className="text-muted" href="">
+												database.controller.js
+											</a>
+										</>
+									))
+									.join(",")}
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</Datatable>
+	);
+}
+
+export default RiwayatEvaluasi;

components/Main/TableLaporan.js

@@ -0,0 +1,63 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+
+function TableLaporan({ listData, to, linkName, status = false }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				<Datatable options={{ responsive: true }}>
+					<table className="table w-100">
+						<thead>
+							<tr>
+								<th>#ID</th>
+								<th>Deskripsi Laporan</th>
+								{status ? <th>Status</th> : ""}
+								<th>Created</th>
+								<th></th>
+							</tr>
+						</thead>
+						<tbody>
+							{listData.map((data) => {
+								return (
+									<tr key={data._id}>
+										<td>{data._number}</td>
+										<td className="text-nowrap">
+											<div className="media align-items-center">
+												<div className="media-body d-flex">
+													<div>
+														<h4 className="m-0">Universitas Satyagama</h4>
+														<p>{data.description}</p>
+													</div>
+												</div>
+											</div>
+										</td>
+										{status ? <td>{data.status}</td> : ""}
+										<td>{moment(data.createdAt).fromNow()}</td>
+										<td>
+											<div className="ml-auto">
+												<Link
+													href={{
+														pathname: to,
+														query: { ptId: data.pt_id, number: data._number },
+													}}
+												>
+													<Button color="primary" size="sm">
+														{linkName}
+													</Button>
+												</Link>
+											</div>
+										</td>
+									</tr>
+								);
+							})}
+						</tbody>
+					</table>
+				</Datatable>
+			</div>
+		</div>
+	);
+}
+
+export default TableLaporan;

components/Main/TableSanksi.js

@@ -0,0 +1,61 @@
+import Datatable from "@/components/Tables/Datatable";
+import { Button } from "reactstrap";
+import Link from "next/link";
+import moment from "moment";
+
+function TableSanksi({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				<Datatable options={{ responsive: true }}>
+					<table className="table w-100">
+						<thead>
+							<tr>
+								<th>Nomor Sanksi</th>
+								<th>Keterangan Sanksi</th>
+								<th>Created</th>
+								<th></th>
+							</tr>
+						</thead>
+						<tbody>
+							{listData.map((data) => {
+								return (
+									<tr key={data._id}>
+										<td>{data.sanksi.no_sanksi}</td>
+										<td>
+											<div className="media align-items-center">
+												<div className="media-body d-flex">
+													<div>
+														<h4 className="m-0">Universitas Satyagama</h4>
+														<p>{data.sanksi.description}</p>
+													</div>
+												</div>
+											</div>
+										</td>
+										<td>{moment(data.sanksi.createdAt).fromNow()}</td>
+										<td>
+											<div className="ml-auto">
+												<Link
+													href={{
+														pathname: to,
+														query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
+													}}
+												>
+													<Button color="primary" size="sm">
+														{linkName}
+													</Button>
+												</Link>
+											</div>
+										</td>
+									</tr>
+								);
+							})}
+						</tbody>
+					</table>
+				</Datatable>
+			</div>
+		</div>
+	);
+}
+
+export default TableSanksi;

components/PT/JawabanBanding/DetailJawaban.js

@@ -0,0 +1,44 @@
+import { FormGroup } from "reactstrap";
+import Scrollable from "@/components/Common/Scrollable";
+
+function DetailJawaban({ data }) {
+	const { jawaban } = data.sanksi.banding;
+	return (
+		<>
+			<p className="lead bb">Jawaban Permohonan Banding</p>
+			<form className="form-horizontal">
+				<FormGroup>
+					<label md="4">Jawaban:</label>
+					<div md="8">
+						<h3>{jawaban.status}</h3>
+					</div>
+				</FormGroup>
+				<FormGroup>
+					<label md="4">Dokumen Jawaban:</label>
+					<div md="8">
+						<Scrollable height="120px" className="list-group">
+							<table className="table table-bordered bg-transparent">
+								<tbody>
+									{jawaban.files.map((e) => (
+										<tr>
+											<td>
+												<em className="fa-lg far fa-file-code"></em>
+											</td>
+											<td>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</Scrollable>
+					</div>
+				</FormGroup>
+			</form>
+		</>
+	);
+}
+
+export default DetailJawaban;

components/PT/JawabanKeberatan/DetailJawaban.js

@@ -0,0 +1,50 @@
+import { FormGroup } from "reactstrap";
+import Scrollable from "@/components/Common/Scrollable";
+
+function DetailJawaban({ data }) {
+	const { jawaban } = data.sanksi.keberatan;
+	return (
+		<>
+			<p className="lead bb">Jawaban Permohonan Keberatan</p>
+			<form className="form-horizontal">
+				<FormGroup>
+					<label md="4">Jawaban:</label>
+					<div md="8">
+						<h3>{jawaban.status}</h3>
+					</div>
+				</FormGroup>
+				<FormGroup>
+					<label md="4">Keterangan:</label>
+					<div md="8">
+						<p>{jawaban.description}</p>
+					</div>
+				</FormGroup>
+				<FormGroup>
+					<label md="4">Dokumen Jawaban:</label>
+					<div md="8">
+						<Scrollable height="120px" className="list-group">
+							<table className="table table-bordered bg-transparent">
+								<tbody>
+									{jawaban.files.map((e) => (
+										<tr>
+											<td>
+												<em className="fa-lg far fa-file-code"></em>
+											</td>
+											<td>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</Scrollable>
+					</div>
+				</FormGroup>
+			</form>
+		</>
+	);
+}
+
+export default DetailJawaban;

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -0,0 +1,156 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { addBanding } from "@/actions/banding";
+import { addDocPerbaikan } from "@/actions/docPerbaikan";
+
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+export class ModalPermohonan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			modal1: false,
+			files: [],
+		};
+	}
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	toggleModal1 = () => {
+		this.props.toggleModal(false);
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+	};
+
+	onSubmit = async (e) => {
+		e.preventDefault();
+		const { noSanksi } = this.props.query;
+		const formdata = new FormData();
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+
+		const added = await addBanding({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+		formdata.append("banding", added.add.sanksi.banding._id);
+		await addDocPerbaikan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+
+		if (added) {
+			Router.push({
+				pathname: "/app/pt/jawaban-keberatan",
+			});
+		}
+	};
+
+	handleKirim = (e) => {
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+		this.onSubmit(e);
+	};
+
+	render() {
+		const { files } = this.state;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+		return (
+			<>
+				<Modal isOpen={this.props.modal} toggle={this.props.toggleModal}>
+					<ModalBody>Apakah anda akan mengajukan banding?</ModalBody>
+					<ModalFooter>
+						<Button color="primary" onClick={this.toggleModal1}>
+							Ya
+						</Button>{" "}
+						<Button color="secondary" onClick={this.props.toggleModal}>
+							Tidak
+						</Button>
+					</ModalFooter>
+				</Modal>
+				<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
+					<ModalHeader toggle={this.toggleModal1}>Upload Dokumen Banding</ModalHeader>
+					<ModalBody>
+						<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+							<FormGroup>
+								<label>Dokumen Banding</label>
+								<div>
+									<DropzoneWrapper className="" onDrop={this.onDrop}>
+										{({ getRootProps, getInputProps, isDragActive }) => {
+											return (
+												<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">Drop files here to upload</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
+															</button>
+														</small>
+													</div>
+												</div>
+											);
+										}}
+									</DropzoneWrapper>
+									<span className="form-text">Multiple files upload</span>
+								</div>
+							</FormGroup>
+						</form>
+					</ModalBody>
+					<ModalFooter>
+						<Button color="primary" onClick={this.handleKirim}>
+							Kirim
+						</Button>
+					</ModalFooter>
+				</Modal>
+			</>
+		);
+	}
+}
+
+export default ModalPermohonan;

components/PT/JawabanKeberatan/Riwayat.js

@@ -0,0 +1,47 @@
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+
+function Riwayat({ data }) {
+	const { banding } = data.sanksi;
+	return (
+		<Card className="card-default">
+			<CardHeader>
+				<CardTitle>Riwayat</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Datatable options={{ responsive: true }}>
+					<table className="table table-striped my-4 w-100">
+						<thead>
+							<tr>
+								<th>Tanggal</th>
+								<th>Dokumen</th>
+							</tr>
+						</thead>
+						<tbody>
+							{banding ? (
+								<tr>
+									<td>{moment(banding.createAt).format("DD MMMM YYYY")}</td>
+									<td>
+										{banding.files.map((e) => (
+											<>
+												<em className="fa-lg far fa-file-code"></em>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</>
+										))}
+									</td>
+								</tr>
+							) : (
+								""
+							)}
+						</tbody>
+					</table>
+				</Datatable>
+			</CardBody>
+		</Card>
+	);
+}
+
+export default Riwayat;

components/PT/JawabanPencabutanSanksi/DetailJawaban.js

@@ -0,0 +1,5 @@
+function DetailJawaban({data}) {
+	return <div>Enter</div>;
+}
+
+export default DetailJawaban;

components/PT/Keberatan/ModalPermohonan.js

@@ -0,0 +1,157 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { addKeberatan } from "@/actions/keberatan";
+import { addDocPerbaikan } from "@/actions/docPerbaikan";
+
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+export class ModalPermohonan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			modal1: false,
+			files: [],
+		};
+	}
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	toggleModal1 = () => {
+		this.props.toggleModal(false);
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+	};
+
+	onSubmit = async (e) => {
+		e.preventDefault();
+		const { noSanksi } = this.props.query;
+		const formdata = new FormData();
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+		const added = await addKeberatan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+		// formdata.append("keberatan", added.add.sanksi.keberatan._id);
+		// formdata.append("data", added.add.sanksi.keberatan._id);
+		// formdata.append("model", "Keberatan");
+		// await addDocPerbaikan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+		// console.log(added);
+		if (added) {
+			Router.push({
+				pathname: "/app/pt/keberatan",
+			});
+		}
+	};
+
+	handleKirim = (e) => {
+		this.setState({
+			modal1: !this.state.modal1,
+		});
+		this.onSubmit(e);
+	};
+
+	render() {
+		const { files } = this.state;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+		return (
+			<>
+				<Modal isOpen={this.props.modal} toggle={this.props.toggleModal}>
+					<ModalBody>Apakah anda akan mengajukan permohonan keberatan atas pengenaan sanksi?</ModalBody>
+					<ModalFooter>
+						<Button color="primary" onClick={this.toggleModal1}>
+							Ya
+						</Button>{" "}
+						<Button color="secondary" onClick={this.props.toggleModal}>
+							Tidak
+						</Button>
+					</ModalFooter>
+				</Modal>
+				<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
+					<ModalHeader toggle={this.toggleModal1}>Unggah Dokumen Permohonan Keberatan</ModalHeader>
+					<ModalBody>
+						<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+							<FormGroup>
+								<label>Dalam hal mengajukan permohonan keberatan maka wajib mengunggah dokumen pendukungnya</label>
+								<div>
+									<DropzoneWrapper className="" onDrop={this.onDrop}>
+										{({ getRootProps, getInputProps, isDragActive }) => {
+											return (
+												<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">Drop files here to upload</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
+															</button>
+														</small>
+													</div>
+												</div>
+											);
+										}}
+									</DropzoneWrapper>
+									<span className="form-text">Multiple files upload</span>
+								</div>
+							</FormGroup>
+						</form>
+					</ModalBody>
+					<ModalFooter>
+						<Button color="primary" onClick={this.handleKirim}>
+							Kirim
+						</Button>
+					</ModalFooter>
+				</Modal>
+			</>
+		);
+	}
+}
+
+export default ModalPermohonan;

components/PT/Keberatan/Riwayat.js

@@ -0,0 +1,47 @@
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+
+function Riwayat({ data }) {
+	const keberatan = data.sanksi.keberatan;
+	return (
+		<Card className="card-default">
+			<CardHeader>
+				<CardTitle>Riwayat</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Datatable options={{ responsive: true }}>
+					<table className="table table-striped my-4 w-100">
+						<thead>
+							<tr>
+								<th>Tanggal</th>
+								<th>Dokumen</th>
+							</tr>
+						</thead>
+						<tbody>
+							{keberatan ? (
+								<tr>
+									<td>{moment(keberatan.createAt).format("DD MMMM YYYY")}</td>
+									<td>
+										{keberatan.files.map((e) => (
+											<>
+												<em className="fa-lg far fa-file-code"></em>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</>
+										))}
+									</td>
+								</tr>
+							) : (
+								""
+							)}
+						</tbody>
+					</table>
+				</Datatable>
+			</CardBody>
+		</Card>
+	);
+}
+
+export default Riwayat;

components/PT/Riwayat.js

@@ -0,0 +1,80 @@
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+
+function Riwayat({ data }) {
+	console.log(data);
+	return (
+		<Card className="card-default">
+			<CardHeader>
+				<CardTitle>Riwayat</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Datatable options={{ responsive: true }}>
+					<table className="table table-striped my-4 w-100">
+						<thead>
+							<tr>
+								<th>Tanggal</th>
+								<th>Dokumen</th>
+							</tr>
+						</thead>
+						<tbody>
+							{data.length ? (
+								data.map((value) => (
+									<tr>
+										<td>{moment(value.createAt).format("DD MMMM YYYY")}</td>
+										<td>
+											{value.files.map((e) => (
+												<>
+													<em className="fa-lg far fa-file-code"></em>
+													<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+														{e.name}
+													</a>
+												</>
+											))}
+										</td>
+									</tr>
+								))
+							) : data ? (
+								<tr>
+									<td>{moment(data.createAt).format("DD MMMM YYYY")}</td>
+									<td>
+										{data.files.map((e) => (
+											<>
+												<em className="fa-lg far fa-file-code"></em>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</>
+										))}
+									</td>
+								</tr>
+							) : (
+								""
+							)}
+							{/* {data ? (
+								<tr>
+									<td>{moment(data.createAt).format("DD MMMM YYYY")}</td>
+									<td>
+										{data.files.map((e) => (
+											<>
+												<em className="fa-lg far fa-file-code"></em>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</>
+										))}
+									</td>
+								</tr>
+							) : (
+								""
+							)} */}
+						</tbody>
+					</table>
+				</Datatable>
+			</CardBody>
+		</Card>
+	);
+}
+
+export default Riwayat;

components/PT/TableSanksi.js

@@ -0,0 +1,51 @@
+import moment from "moment";
+import { Button, Table } from "reactstrap";
+import Link from "next/link";
+
+function TableSanksi({ listData, to, linkName }) {
+	return (
+		<div className="card b">
+			<div className="card-body">
+				<Table className="table w-100">
+					<thead>
+						<tr>
+							<th>Nomor Sanksi</th>
+							<th>Keterangan Sanksi</th>
+							<th>Created</th>
+							<th></th>
+						</tr>
+					</thead>
+					<tbody>
+						{listData.map((data) => {
+							return (
+								<tr key={data._id}>
+									<td>{data.sanksi.no_sanksi}</td>
+									<td className="text-nowrap">
+										<div className="media align-items-center">
+											{/* <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" /> */}
+											<div className="media-body d-flex">
+												<div>
+													<h4 className="m-0">Universitas Satyagama</h4>
+													{/* <small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small> */}
+													<p>{data.sanksi.description}</p>
+												</div>
+											</div>
+										</div>
+									</td>
+									<td>{moment(data.sanksi.createAt).fromNow()}</td>
+									<td>
+										<Link href={{ pathname: to, query: { noSanksi: data.sanksi.no_sanksi } }}>
+											<Button color="primary">{linkName}</Button>
+										</Link>
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</Table>
+			</div>
+		</div>
+	);
+}
+
+export default TableSanksi;

components/Pelaporan/InputData.js

@@ -0,0 +1,186 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { getPelanggaran } from "@/actions/pelanggaran";
+import { createPelaporan } from "@/actions/pelaporan";
+import Select from "react-select";
+import { Row, Col, FormGroup, Input } from "reactstrap";
+
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+const selectInstanceId = 1;
+export class InputData extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			dropdownOpen: false,
+			splitButtonOpen: false,
+			selectedOptionMulti: [],
+			stat: "Waiting to add files..",
+			pelaporanNumber: Math.floor(Date.now() * Math.random()),
+			keteranganLaporan: "",
+			files: [],
+			pelanggaran: [],
+		};
+	}
+
+	componentDidMount = async () => {
+		const pelanggaran = await getPelanggaran();
+		this.setState({ pelanggaran });
+	};
+
+	optionsJenisPelanggaran = (pelanggaran) => {
+		return pelanggaran.data.map((e) => ({ value: e._id, label: e.pelanggaran, className: "State-ACT" }));
+	};
+
+	setKeteranganPelaporan = (e) => {
+		this.setState({ keteranganLaporan: e.target.value });
+	};
+
+	toggleDropDown = () => {
+		this.setState({
+			dropdownOpen: !this.state.dropdownOpen,
+		});
+	};
+
+	toggleSplit = () => {
+		this.setState({
+			splitButtonOpen: !this.state.splitButtonOpen,
+		});
+	};
+
+	handleChangeSelectMulti = (selectedOptionMulti) => {
+		this.setState({ selectedOptionMulti });
+	};
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	onSubmit = async (e) => {
+		e.preventDefault();
+		const formdata = new FormData();
+		formdata.append("number", this.state.pelaporanNumber);
+		formdata.append("pt_id", this.props.query.ptId);
+		formdata.append("description", this.state.keteranganLaporan);
+		formdata.append("pelanggaran", this.state.selectedOptionMulti.map((e) => e.value).join());
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+
+		const create = await createPelaporan(formdata);
+		// console.log(create);
+		// await this.props.dispatch(createPelaporan(formdata));
+		// this.props.dispatch(listPelaporan());
+		if (create) {
+			Router.push({
+				pathname: "/app/pelaporan",
+			});
+		}
+	};
+
+	render() {
+		const { selectedOptionMulti, files, pelanggaran } = this.state;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+		return (
+			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+				<FormGroup row>
+					<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
+					<div className="col-md-10">
+						<Input type="text" disabled value={this.state.pelaporanNumber} />
+						<span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span>
+					</div>
+				</FormGroup>
+				<FormGroup row>
+					<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
+					<div className="col-md-10">
+						<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pelanggaran.data ? this.optionsJenisPelanggaran(pelanggaran) : []} required />
+						<span className="form-text">Pilih Jenis Pelanggaran</span>
+					</div>
+				</FormGroup>
+				<FormGroup row>
+					<label className="col-md-2 col-form-label">Keterangan Laporan</label>
+					<div className="col-md-10">
+						<Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} required />
+						<span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span>
+					</div>
+				</FormGroup>
+				<FormGroup row>
+					<label className="col-md-2 col-form-label">Upload File Pendukung</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" : "")}>
+										<input {...getInputProps()} />
+										<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</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
+												</button>
+											</small>
+										</div>
+									</div>
+								);
+							}}
+						</DropzoneWrapper>
+					</div>
+				</FormGroup>
+				<FormGroup row>
+					<div className="col-xl-10">
+						<button className="btn btn-sm btn-primary" type="submit">
+							Submit Laporan
+						</button>
+					</div>
+				</FormGroup>
+			</form>
+		);
+	}
+}
+
+export default InputData;

components/Pemeriksaan/InputEvaluasi.js

@@ -0,0 +1,167 @@
+import React, { Component } from "react";
+import { insertPemeriksaan } from "@/actions/pemeriksaan";
+import Router from "next/router";
+import Datetime from "react-datetime";
+import moment from "moment";
+import { Row, Col, FormGroup, Input } from "reactstrap";
+
+const selectInstanceId = 1;
+let Dropzone = null;
+
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+export default class InputEvaluasi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			dropdownOpen: false,
+			splitButtonOpen: false,
+			judulEvaluasi: "",
+			tanggal: moment().format("D MMMM YYYY"),
+			files: [],
+		};
+	}
+
+	setjudulEvaluasi = (e) => {
+		this.setState({ judulEvaluasi: e.target.value });
+	};
+
+	setTanggal = (moment) => {
+		this.setState({ tanggal: moment.format("D MMMM YYYY") });
+	};
+
+	toggleSplit = () => {
+		this.setState({
+			splitButtonOpen: !this.state.splitButtonOpen,
+		});
+	};
+
+	toggleDropDown = () => {
+		this.setState({
+			dropdownOpen: !this.state.dropdownOpen,
+		});
+	};
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	onSubmit = async (e) => {
+		e.preventDefault();
+		const { number, ptId } = this.props.query;
+		const formdata = new FormData();
+		formdata.append("title", this.state.judulEvaluasi);
+		formdata.append("date", this.state.tanggal);
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+
+		const inserted = await insertPemeriksaan({ number, ptId }, formdata);
+		if (inserted) {
+			Router.push({
+				pathname: "/app/pemeriksaan",
+			});
+		}
+	};
+
+	render() {
+		const { files } = this.state;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+		return (
+			<>
+				<p className="lead bb">Evaluasi</p>
+				<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+					<FormGroup>
+						<label>Tanggal Dokumen:</label>
+						<div>
+							<Datetime inputProps={{ className: "form-control" }} value={this.state.tanggal} onChange={this.setTanggal} />
+							{/* <span className="form-text">Tanggal</span> */}
+						</div>
+					</FormGroup>
+					<FormGroup>
+						<label>Judul Dokumen:</label>
+						<div>
+							<Input type="text" value={this.state.judulEvaluasi} onChange={this.setjudulEvaluasi} />
+							{/* <Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} /> */}
+							{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
+						</div>
+					</FormGroup>
+					<FormGroup>
+						<label>Upload File Pendukung:</label>
+						<div>
+							<DropzoneWrapper className="" onDrop={this.onDrop}>
+								{({ getRootProps, getInputProps, isDragActive }) => {
+									return (
+										<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">Drop files here to upload</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
+													</button>
+												</small>
+											</div>
+										</div>
+									);
+								}}
+							</DropzoneWrapper>
+							<span className="form-text">Multiple files upload</span>
+						</div>
+					</FormGroup>
+					<FormGroup>
+						<div>
+							<button className="btn btn-sm btn-primary" type="submit">
+								Submit Evaluasi
+							</button>
+						</div>
+					</FormGroup>
+				</form>
+			</>
+		);
+	}
+}

components/Pemeriksaan/TableRiwayat.js

@@ -0,0 +1,37 @@
+import Datatable from "@/components/Tables/Datatable";
+
+function TableRiwayat({ data }) {
+	return (
+		<Datatable options={{ responsive: true }}>
+			<table className="table table-striped my-4 w-100">
+				<thead>
+					<tr>
+						<th>Tanggal</th>
+						<th>Judul Dokumen</th>
+						<th>File Pendukung</th>
+					</tr>
+				</thead>
+				<tbody>
+					{data.penjadwalan.pemeriksaan.map((e) => (
+						<tr>
+							<td>{moment(e.createdAt).format("D MMMM YYYY")}</td>
+							<td>{e.title}</td>
+							<td>
+								{e.files.map((e) => (
+									<>
+										<em className="fa-lg far fa-file-code"></em>
+										<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+											{e.name}
+										</a>
+									</>
+								))}
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</Datatable>
+	);
+}
+
+export default TableRiwayat;

components/PencabutanSanksi/Riwayat.js

@@ -0,0 +1,51 @@
+import Datatable from "@/components/Tables/Datatable";
+import moment from "moment";
+import { Card, CardHeader, CardBody, CardTitle } from "reactstrap";
+
+function Riwayat({ data }) {
+	const { jawaban } = data.sanksi.cabut_sanksi;
+	return (
+		<Card className="card-default">
+			<CardHeader>
+				<CardTitle>Riwayat</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<Datatable options={{ responsive: true }}>
+					<table className="table table-striped my-4 w-100">
+						<thead>
+							<tr>
+								<th>Tanggal</th>
+								<th>Status</th>
+								<th>Keterangan</th>
+								<th>Dokumen</th>
+							</tr>
+						</thead>
+						<tbody>
+							{jawaban ? (
+								<tr>
+									<td>{moment(jawaban.createAt).format("DD MMMM YYYY")}</td>
+									<td>{jawaban.status}</td>
+									<td>{jawaban.description}</td>
+									<td>
+										{jawaban.files.map((e) => (
+											<>
+												<em className="fa-lg far fa-file-code"></em>
+												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+													{e.name}
+												</a>
+											</>
+										))}
+									</td>
+								</tr>
+							) : (
+								""
+							)}
+						</tbody>
+					</table>
+				</Datatable>
+			</CardBody>
+		</Card>
+	);
+}
+
+export default Riwayat;

components/Penjadwalan/DetailLaporan.js

@@ -0,0 +1,124 @@
+import React, { Component } from "react";
+import Select from "react-select";
+import Scrollable from "@/components/Common/Scrollable";
+import { addStatus } from "@/actions/pelaporan";
+import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";
+
+const selectInstanceId = 1;
+export class DetailLaporan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedOption: null,
+		};
+	}
+
+	componentDidMount = async () => {
+		this.setState({ selectedOption: { value: "ditindaklanjuti", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" } });
+		// const tes = await addStatus({ number, ptId }, { status: data.status || "ditindaklanjuti" });
+	};
+
+	handleChangeSelect = async (selectedOption) => {
+		const { ptId, number } = this.props.query;
+		this.props.handleChangeSelect(selectedOption);
+		this.setState({ selectedOption });
+		const tes = await addStatus({ number, ptId }, { status: selectedOption.value });
+	};
+
+	render() {
+		const { data } = this.props;
+		console.log(data);
+		return (
+			<Card className="card b">
+				<CardHeader>
+					<CardTitle tag="h4">Detail Laporan</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<table className="table">
+						<tbody>
+							<tr>
+								<td>
+									<strong>Status</strong>
+								</td>
+								<td>
+									<Select
+										instanceId={selectInstanceId + 1}
+										value={this.state.selectedOption}
+										onChange={this.handleChangeSelect}
+										options={[
+											{ value: "ditindaklanjuti", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
+											{ value: "delegasi ke lldikti", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
+											{ value: "ditutup", label: "Ditutup", className: "State-ACT" },
+										]}
+										required
+									/>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<strong>Nomor Laporan</strong>
+								</td>
+								<td>{data._number}</td>
+							</tr>
+							<tr>
+								<td>
+									<strong>Perguruan Tinggi</strong>
+								</td>
+								<td>Universitas Satyagama</td>
+							</tr>
+							<tr>
+								<td>
+									<strong>Jenis Pelanggaran</strong>
+								</td>
+								<td>
+									<Scrollable height="75px" className="list-group">
+										<ul>{data.pelanggaran ? data.pelanggaran.map((e) => <li>{e.pelanggaran}</li>) : ""}</ul>
+									</Scrollable>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<strong>Keterangan Laporan</strong>
+								</td>
+								<td>
+									<Scrollable height="100px" className="list-group">
+										<p>{data.description}</p>
+									</Scrollable>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<strong>File Pendukung</strong>
+								</td>
+								<td>
+									<Scrollable height="120px" className="list-group">
+										<table className="table table-bordered bg-transparent">
+											<tbody>
+												{data.files
+													? data.files.map((e) => (
+															<tr>
+																<td>
+																	<em className="fa-lg far fa-file-code"></em>
+																</td>
+																<td>
+																	<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+																		{e.name}
+																	</a>
+																</td>
+															</tr>
+													  ))
+													: ""}
+											</tbody>
+										</table>
+									</Scrollable>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</CardBody>
+			</Card>
+		);
+	}
+}
+
+export default DetailLaporan;

components/Sanksi/Ringkasan.js

@@ -0,0 +1,147 @@
+import { useEffect, useState } from "react";
+import Scrollable from "@/components/Common/Scrollable";
+import { Card, Row, Col, Table, FormGroup } from "reactstrap";
+
+function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
+	return (
+		<>
+			<Row>
+				<Col>
+					<p className="lead bb">Detail Laporan</p>
+					<form className="form-horizontal">
+						<FormGroup row>
+							<Col md="4">Nomor Laporan:</Col>
+							<Col md="8">
+								<strong>{dataLaporan._number}</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Nama Perguruan Tinggi:</Col>
+							<Col md="8">
+								<strong>Universitas Satyagama</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Jenis Pelanggaran:</Col>
+							<Col md="8">
+								<Scrollable height="125px" className="list-group">
+									<ul>
+										{dataLaporan.pelanggaran.map((e) => (
+											<li>{e.pelanggaran}</li>
+										))}
+									</ul>
+								</Scrollable>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Keterangan Laporan:</Col>
+							<Col md="8">
+								<Scrollable height="100px" className="list-group">
+									<p>{dataLaporan.description}</p>
+								</Scrollable>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Dibuat Pada:</Col>
+							<Col md="8">
+								<strong>{moment(dataLaporan.createAt).format("D MMMM YYYY")}</strong>
+							</Col>
+						</FormGroup>
+					</form>
+				</Col>
+			</Row>
+			<Row>
+				<Col>
+					<p className="lead bb">Penetapan Sanksi</p>
+					<Card className="card-default">
+						<Table bordered hover responsive>
+							<thead>
+								<tr>
+									<th>No</th>
+									<th>Jenis Pelanggaran</th>
+									<th>Sanksi</th>
+								</tr>
+							</thead>
+							<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>
+														</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>
+													</div>
+												</td>
+											</tr>
+									  ))
+									: ""}
+							</tbody>
+						</Table>
+					</Card>
+				</Col>
+			</Row>
+			<Row>
+				<Col>
+					<p className="lead bb">Nomor Surat Keputusan Sanksi</p>
+					<form className="form-horizontal">
+						<FormGroup row>
+							<Col md="4">Nomor Surat:</Col>
+							<Col md="8">
+								<strong>{dataUpload ? dataUpload.nomorSanksi : ""}</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Keterangan:</Col>
+							<Col md="8">
+								<strong>{dataUpload ? dataUpload.keterangan : ""}</strong>
+							</Col>
+						</FormGroup>
+						<FormGroup row>
+							<Col md="4">Surat Sanksi:</Col>
+							<Col md="8">
+								<Scrollable height="120px" className="list-group">
+									<table className="table table-bordered bg-transparent">
+										<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>
+												  ))
+												: ""}
+										</tbody>
+									</table>
+								</Scrollable>
+							</Col>
+						</FormGroup>
+					</form>
+				</Col>
+			</Row>
+		</>
+	);
+}
+
+export default Ringkasan;

components/Sanksi/TablePenetapanSanksi.js

@@ -0,0 +1,88 @@
+import React, { Component } from "react";
+import { Card, Table } from "reactstrap";
+import { getPelanggaran } from "@/actions/pelanggaran";
+
+export class TablePenetapanSanksi extends Component {
+	checkedData = [];
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			pelanggaran: null,
+			// checkedData: [],
+		};
+	}
+
+	componentDidMount = async () => {
+		const pelanggaran = await getPelanggaran();
+		this.setState({ pelanggaran });
+	};
+
+	onHandleChange = (evt) => {
+		const checked = evt.target.checked;
+		const item = evt.target.value;
+		if (checked) this.checkedData.push(evt.target.value);
+		else this.checkedData = this.checkedData.filter((e) => e != item);
+		this.props.setCheckedData(this.checkedData);
+	};
+
+	render() {
+		const { pelanggaran } = this.state;
+		return (
+			<Card className="card-default">
+				<Table bordered hover responsive>
+					<thead>
+						<tr>
+							<th>No</th>
+							<th>Jenis Pelanggaran</th>
+							<th>Sanksi</th>
+							<th></th>
+						</tr>
+					</thead>
+					<tbody>
+						{pelanggaran
+							? pelanggaran.data.map((jp, index) => (
+									<tr key={jp._id}>
+										<td>
+											<label>{index + 1}</label>
+										</td>
+										<td>
+											<div className="media align-items-center">
+												<div className="media-body d-flex">
+													<div>
+														<p>{jp.pelanggaran}</p>
+														<p>TMT : {jp.tmt_bulan} Bulan</p>
+														<p>Level Pelanggaran : {jp.label_sanksi}</p>
+													</div>
+												</div>
+											</div>
+										</td>
+										<td>
+											<div className="media align-items-center">
+												<div className="media-body d-flex">
+													<div>
+														<p>{jp.sanksi}</p>
+														<p>Keterangan : {jp.keterangan_sanksi}</p>
+													</div>
+												</div>
+											</div>
+										</td>
+										<td>
+											<div className="checkbox c-checkbox">
+												<label>
+													<input type="checkbox" value={jp._id} onChange={this.onHandleChange} />
+													<span className="fa fa-check"></span>
+												</label>
+											</div>
+										</td>
+									</tr>
+							  ))
+							: ""}
+					</tbody>
+				</Table>
+			</Card>
+		);
+	}
+}
+
+export default TablePenetapanSanksi;

components/Sanksi/UploadSurat.js

@@ -0,0 +1,122 @@
+import React, { Component } from "react";
+import { Row, Col, Input, FormGroup } from "reactstrap";
+
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+export class UploadSurat extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			files: [],
+			nomorSanksi: "",
+			keterangan: "",
+		};
+	}
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+		this.props.setUploadSuratSanksi(this.state);
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+		this.props.setUploadSuratSanksi(this.state);
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+		this.props.setUploadSuratSanksi(this.state);
+	};
+
+	setNomorSanksi = (e) => {
+		this.setState({ nomorSanksi: e.target.value });
+		this.props.setUploadSuratSanksi(this.state);
+	};
+
+	setKeterangan = (e) => {
+		this.setState({ keterangan: e.target.value });
+		this.props.setUploadSuratSanksi(this.state);
+	};
+
+	render() {
+		const { files } = this.state;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+		return (
+			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+				<FormGroup row>
+					<label className="col-md-2 col-form-label">Nomor Surat:</label>
+					<div className="col-md-10">
+						<Input type="text" value={this.state.nomorSanksi} onChange={this.setNomorSanksi} />
+					</div>
+				</FormGroup>
+				<FormGroup row className="mt-3">
+					<label className="col-md-2 col-form-label">Keterangan</label>
+					<div className="col-md-10">
+						<Input type="textarea" value={this.state.keterangan} onChange={this.setKeterangan} required />
+						{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
+					</div>
+				</FormGroup>
+				<FormGroup row>
+					<label className="col-md-2 col-form-label">Dokumen Surat Sanksi:</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" : "")}>
+										<input {...getInputProps()} />
+										<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</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
+												</button>
+											</small>
+										</div>
+									</div>
+								);
+							}}
+						</DropzoneWrapper>
+						<span className="form-text">Multiple files upload</span>
+					</div>
+				</FormGroup>
+			</form>
+		);
+	}
+}
+
+export default UploadSurat;

package-lock.json

@@ -1769,6 +1769,19 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+    },
+    "@react-aria/ssr": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.0.tgz",
+      "integrity": "sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug==",
+      "requires": {
+        "@babel/runtime": "^7.6.2"
+      }
+    },
     "@react-google-maps/api": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-1.13.0.tgz",
@@ -1790,11 +1803,79 @@
       "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-1.12.1.tgz",
       "integrity": "sha512-JBSO5VJuouP/boBnSdRDCWq0UKO7jr3HvZVhis3ew+VGJ/BoCPu3lpU0HDsjjulfng+xwqLfVOIzP3QnvBPdCA=="
     },
+    "@restart/hooks": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.5.tgz",
+      "integrity": "sha512-tLGtY0aHeIfT7aPwUkvQuhIy3+q3w4iqmUzFLPlOAf/vNUacLaBt1j/S//jv/dQhenRh8jvswyMojCwmLvJw8A==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@restart/ui": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-0.2.6.tgz",
+      "integrity": "sha512-lcutEWPvsxz0uEyRxuysCbHBfXDFnMKNMNTsnuPmLFjZXgW9fVmhksS6rpFklXHMwxOM9g6hRTBq0gS3QRKgzQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.16",
+        "@popperjs/core": "^2.10.1",
+        "@react-aria/ssr": "^3.0.1",
+        "@restart/hooks": "^0.4.0",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.7",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
+          "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "csstype": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+        },
+        "dom-helpers": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+          "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^3.0.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.9",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+        }
+      }
+    },
     "@types/cookie": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
       "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
+    "@types/invariant": {
+      "version": "2.2.35",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz",
+      "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg=="
+    },
     "@types/json-schema": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
@@ -1805,11 +1886,35 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
     "@types/react": {
       "version": "15.7.0",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-15.7.0.tgz",
       "integrity": "sha512-fROvMBKisHbCUGMRXqAVAhZeehNQkeLYRZW/PhYI+Ahd+HdC1DWNWktiFYUy44Iys7qvBo7O8J5UNneWEVxAQw=="
     },
+    "@types/react-redux": {
+      "version": "7.1.22",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.22.tgz",
+      "integrity": "sha512-GxIA1kM7ClU73I6wg9IRTVwSO9GS+SAKZKe0Enj+82HMU6aoESFU2HNAdNi3+J53IaOHPiUfT3kSG4L828joDQ==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+      "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/reactstrap": {
       "version": "8.7.2",
       "resolved": "https://registry.npmjs.org/@types/reactstrap/-/reactstrap-8.7.2.tgz",
@@ -1819,6 +1924,16 @@
         "reactstrap": "*"
       }
     },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -2656,6 +2771,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
+      "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
+      "requires": {
+        "follow-redirects": "^1.14.7"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -5065,6 +5188,11 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "follow-redirects": {
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
+      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
+    },
     "fontkit": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-1.8.1.tgz",
@@ -8091,6 +8219,15 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -8342,6 +8479,84 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-bootstrap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.1.1.tgz",
+      "integrity": "sha512-Igagk6LziNW/HgBlMVx+QiwPVt/oqrZ7tiBKgv31VYc/56kJEU0Y+BCJS6hrQP6QmmIpdVtX8TRaanv9xsmW5A==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "@restart/hooks": "^0.4.5",
+        "@restart/ui": "^0.2.5",
+        "@types/invariant": "^2.2.33",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": ">=16.14.8",
+        "@types/react-transition-group": "^4.4.1",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.1",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.7",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
+          "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "@types/react": {
+          "version": "17.0.38",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
+          "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
+          "requires": {
+            "@types/prop-types": "*",
+            "@types/scheduler": "*",
+            "csstype": "^3.0.2"
+          }
+        },
+        "classnames": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+          "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+        },
+        "csstype": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+        },
+        "dom-helpers": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+          "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^3.0.2"
+          }
+        },
+        "react-transition-group": {
+          "version": "4.4.2",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+          "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.9",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+        }
+      }
+    },
     "react-chartist": {
       "version": "0.14.4",
       "resolved": "https://registry.npmjs.org/react-chartist/-/react-chartist-0.14.4.tgz",
@@ -8526,16 +8741,36 @@
       }
     },
     "react-redux": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.1.tgz",
-      "integrity": "sha512-T52I52Kxhbqy/6TEfBv85rQSDz6+Y28V/pf52vDWs1YRXG19mcFOGfHnY2HsNFHyhP+ST34Aih98fvt6tqwVcQ==",
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
+      "integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==",
       "requires": {
-        "@babel/runtime": "^7.3.1",
-        "hoist-non-react-statics": "^3.3.0",
-        "invariant": "^2.2.4",
+        "@babel/runtime": "^7.15.4",
+        "@types/react-redux": "^7.1.20",
+        "hoist-non-react-statics": "^3.3.2",
         "loose-envify": "^1.4.0",
         "prop-types": "^15.7.2",
-        "react-is": "^16.8.2"
+        "react-is": "^17.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.7",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
+          "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        },
+        "regenerator-runtime": {
+          "version": "0.13.9",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+        }
       }
     },
     "react-refresh": {
@@ -8803,6 +9038,11 @@
       "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz",
       "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A=="
     },
+    "redux-thunk": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q=="
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -10379,6 +10619,34 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "dependencies": {
+        "@types/react": {
+          "version": "17.0.38",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
+          "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
+          "requires": {
+            "@types/prop-types": "*",
+            "@types/scheduler": "*",
+            "csstype": "^3.0.2"
+          }
+        },
+        "csstype": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+        }
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

package.json

@@ -1,112 +1,115 @@
 {
-    "name": "angle",
-    "version": "0.0.0",
-    "description": "Angle - Bootstrap Admin Template",
-    "author": "@themicon_co",
-    "license": "https://wrapbootstrap.com/help/licenses",
-    "private": true,
-    "scripts": {
-        "dev": "(if exist .next rd /s /q .next 2>nul) && next",
-        "dev-server": "node server.js",
-        "build": "next build",
-        "start": "next start",
-        "preview": "npm run build && npm run start",
-        "now-build": "next build"
-    },
-    "dependencies": {
-        "@babel/polyfill": "7.2.5",
-        "@fortawesome/fontawesome-free": "5.15.3",
-        "@fullcalendar/bootstrap": "4.4.2",
-        "@fullcalendar/core": "4.4.2",
-        "@fullcalendar/daygrid": "4.4.2",
-        "@fullcalendar/interaction": "4.4.2",
-        "@fullcalendar/list": "4.4.2",
-        "@fullcalendar/react": "4.4.2",
-        "@fullcalendar/timegrid": "4.4.2",
-        "@react-google-maps/api": "1.13.0",
-        "animate.css": "3.7.2",
-        "bootstrap": "4.6.0",
-        "canvas": "^2.7.0",
-        "chart.js": "2.9.4",
-        "chartist": "0.11.4",
-        "core-js": "2.5.7",
-        "cropper": "4.1.0",
-        "d3": "3.5.17",
-        "datatables.net": "1.10.24",
-        "datatables.net-bs": "1.10.24",
-        "datatables.net-bs4": "1.10.24",
-        "datatables.net-buttons": "1.7.0",
-        "datatables.net-buttons-bs": "1.7.0",
-        "datatables.net-keytable": "2.6.1",
-        "datatables.net-keytable-bs": "2.6.1",
-        "datatables.net-responsive": "2.2.7",
-        "datatables.net-responsive-bs": "2.2.7",
-        "deep-equal": "1.1.1",
-        "draft-js": "0.11.7",
-        "easy-pie-chart": "2.1.7",
-        "express": "4.17.1",
-        "flot": "themicon/flot",
-        "get-size": "2.0.3",
-        "history": "4.10.1",
-        "html5sortable": "0.11.1",
-        "ika.jvectormap": "themicon/ika.jvectormap",
-        "jqcloud2": "2.0.3",
-        "jquery": "3.6.0",
-        "jquery-knob": "1.2.11",
-        "jquery-sparkline": "2.4.0",
-        "jquery.easing": "1.4.1",
-        "jquery.flot.spline": "themicon/jquery.flot.spline",
-        "jquery.flot.tooltip": "krzysu/flot.tooltip",
-        "jszip": "3.6.0",
-        "loaders.css": "0.1.2",
-        "matchmedia": "0.1.2",
-        "moment": "^2.29.1",
-        "morris.js.so": "0.5.1",
-        "nestable": "themicon/nestable",
-        "next": "9.5.5",
-        "next-iron-session": "^4.2.0",
-        "pdfmake": "0.1.70",
-        "raf": "3.4.1",
-        "raphael": "2.3.0",
-        "rc-slider": "8.7.1",
-        "react": "17.0.1",
-        "react-chartist": "0.14.4",
-        "react-chartjs-2": "2.11.1",
-        "react-color": "2.19.3",
-        "react-data-grid": "6.1.0",
-        "react-datetime": "2.16.3",
-        "react-dnd": "6.0.0",
-        "react-dnd-html5-backend": "6.0.0",
-        "react-dom": "17.0.1",
-        "react-draft-wysiwyg": "1.14.5",
-        "react-dropzone": "10.2.2",
-        "react-flot": "1.3.0",
-        "react-maskedinput": "4.0.1",
-        "react-perfect-scrollbar": "1.5.8",
-        "react-redux": "6.0.1",
-        "react-select": "^3.0.4",
-        "react-toastify": "4.5.2",
-        "react-transition-group": "4.2.2",
-        "reactstrap": "^8.0.1",
-        "redux-devtools-extension": "^2.13.9",
-        "rtlcss": "2.6.2",
-        "screenfull": "3.3.3",
-        "simple-line-icons": "2.5.5",
-        "spinkit": "1.2.5",
-        "sweetalert": "2.1.2",
-        "swr": "^1.0.1",
-        "validator": "10.11.0",
-        "weather-icons": "erikflowers/weather-icons",
-        "whirl": "themicon/whirl"
-    },
-    "devDependencies": {
-        "@types/reactstrap": "^8.7.2",
-        "@zeit/next-css": "1.0.1",
-        "@zeit/next-sass": "1.0.1",
-        "cross-env": "5.2.1",
-        "file-loader": "3.0.1",
-        "imports-loader": "0.8.0",
-        "node-sass": "4.14.1",
-        "url-loader": "1.1.2"
-    }
+	"name": "angle",
+	"version": "0.0.0",
+	"description": "Angle - Bootstrap Admin Template",
+	"author": "@themicon_co",
+	"license": "https://wrapbootstrap.com/help/licenses",
+	"private": true,
+	"scripts": {
+		"dev": "(if exist .next rd /s /q .next 2>nul) && next",
+		"dev-server": "node server.js",
+		"build": "next build",
+		"start": "next start",
+		"preview": "npm run build && npm run start",
+		"now-build": "next build"
+	},
+	"dependencies": {
+		"@babel/polyfill": "7.2.5",
+		"@fortawesome/fontawesome-free": "5.15.3",
+		"@fullcalendar/bootstrap": "4.4.2",
+		"@fullcalendar/core": "^4.4.2",
+		"@fullcalendar/daygrid": "^4.4.2",
+		"@fullcalendar/interaction": "4.4.2",
+		"@fullcalendar/list": "4.4.2",
+		"@fullcalendar/react": "^4.4.2",
+		"@fullcalendar/timegrid": "^4.4.2",
+		"@react-google-maps/api": "1.13.0",
+		"animate.css": "3.7.2",
+		"axios": "^0.25.0",
+		"bootstrap": "4.6.0",
+		"canvas": "^2.7.0",
+		"chart.js": "2.9.4",
+		"chartist": "0.11.4",
+		"core-js": "2.5.7",
+		"cropper": "4.1.0",
+		"d3": "3.5.17",
+		"datatables.net": "1.10.24",
+		"datatables.net-bs": "1.10.24",
+		"datatables.net-bs4": "1.10.24",
+		"datatables.net-buttons": "1.7.0",
+		"datatables.net-buttons-bs": "1.7.0",
+		"datatables.net-keytable": "2.6.1",
+		"datatables.net-keytable-bs": "2.6.1",
+		"datatables.net-responsive": "2.2.7",
+		"datatables.net-responsive-bs": "2.2.7",
+		"deep-equal": "1.1.1",
+		"draft-js": "0.11.7",
+		"easy-pie-chart": "2.1.7",
+		"express": "4.17.1",
+		"flot": "themicon/flot",
+		"get-size": "2.0.3",
+		"history": "4.10.1",
+		"html5sortable": "0.11.1",
+		"ika.jvectormap": "themicon/ika.jvectormap",
+		"jqcloud2": "2.0.3",
+		"jquery": "3.6.0",
+		"jquery-knob": "1.2.11",
+		"jquery-sparkline": "2.4.0",
+		"jquery.easing": "1.4.1",
+		"jquery.flot.spline": "themicon/jquery.flot.spline",
+		"jquery.flot.tooltip": "krzysu/flot.tooltip",
+		"jszip": "3.6.0",
+		"loaders.css": "0.1.2",
+		"matchmedia": "0.1.2",
+		"moment": "^2.29.1",
+		"morris.js.so": "0.5.1",
+		"nestable": "themicon/nestable",
+		"next": "9.5.5",
+		"next-iron-session": "^4.2.0",
+		"pdfmake": "0.1.70",
+		"raf": "3.4.1",
+		"raphael": "2.3.0",
+		"rc-slider": "8.7.1",
+		"react": "17.0.1",
+		"react-bootstrap": "^2.1.1",
+		"react-chartist": "0.14.4",
+		"react-chartjs-2": "2.11.1",
+		"react-color": "2.19.3",
+		"react-data-grid": "6.1.0",
+		"react-datetime": "2.16.3",
+		"react-dnd": "6.0.0",
+		"react-dnd-html5-backend": "6.0.0",
+		"react-dom": "17.0.1",
+		"react-draft-wysiwyg": "1.14.5",
+		"react-dropzone": "10.2.2",
+		"react-flot": "1.3.0",
+		"react-maskedinput": "4.0.1",
+		"react-perfect-scrollbar": "1.5.8",
+		"react-redux": "^7.2.6",
+		"react-select": "^3.0.4",
+		"react-toastify": "4.5.2",
+		"react-transition-group": "4.2.2",
+		"reactstrap": "^8.0.1",
+		"redux-devtools-extension": "^2.13.9",
+		"redux-thunk": "^2.4.1",
+		"rtlcss": "2.6.2",
+		"screenfull": "3.3.3",
+		"simple-line-icons": "2.5.5",
+		"spinkit": "1.2.5",
+		"sweetalert": "2.1.2",
+		"swr": "^1.0.1",
+		"validator": "10.11.0",
+		"weather-icons": "erikflowers/weather-icons",
+		"whirl": "themicon/whirl"
+	},
+	"devDependencies": {
+		"@types/reactstrap": "^8.7.2",
+		"@zeit/next-css": "1.0.1",
+		"@zeit/next-sass": "1.0.1",
+		"cross-env": "5.2.1",
+		"file-loader": "3.0.1",
+		"imports-loader": "0.8.0",
+		"node-sass": "4.14.1",
+		"url-loader": "1.1.2"
+	}
 }

pages/_app.js

@@ -11,74 +11,83 @@
 
 // Polyfills
 // ======================
-import '../polyfills.js';
+import "../polyfills.js";
 
 // App
 // ======================
-import App from 'next/app';
-import React from 'react';
+import App from "next/app";
+import React from "react";
 // Redux support
-import { Provider } from 'react-redux';
-import withReduxStore from '../store/with-redux-store';
+import { Provider } from "react-redux";
+import withReduxStore from "../store/with-redux-store";
 // Translation support
-import * as Translate from '@/components/Common/Translate';
+import * as Translate from "@/components/Common/Translate";
 // Base Layout
-import Base from '@/components/Layout/Base';
+import Base from "@/components/Layout/Base";
 // import BaseHorizontal from '@/components/Layout/BaseHorizontal';
 
 // Global Vendor
 // ======================
 // Whirl
-import 'whirl/dist/whirl.css';
+import "whirl/dist/whirl.css";
 // Font Awesome
-import '@fortawesome/fontawesome-free/css/brands.css';
-import '@fortawesome/fontawesome-free/css/regular.css';
-import '@fortawesome/fontawesome-free/css/solid.css';
-import '@fortawesome/fontawesome-free/css/fontawesome.css';
+import "@fortawesome/fontawesome-free/css/brands.css";
+import "@fortawesome/fontawesome-free/css/regular.css";
+import "@fortawesome/fontawesome-free/css/solid.css";
+import "@fortawesome/fontawesome-free/css/fontawesome.css";
 // Animate.CSS
-import 'animate.css/animate.min.css';
+import "animate.css/animate.min.css";
 // Simple line icons
-import 'simple-line-icons/css/simple-line-icons.css';
+import "simple-line-icons/css/simple-line-icons.css";
 // Weather Icons
-import 'weather-icons/css/weather-icons.min.css';
-import 'weather-icons/css/weather-icons-wind.min.css';
+import "weather-icons/css/weather-icons.min.css";
+import "weather-icons/css/weather-icons-wind.min.css";
+
+import "@fullcalendar/core/main.css";
+import "@fullcalendar/daygrid/main.css";
+import "@fullcalendar/timegrid/main.css";
+import "@fullcalendar/list/main.css";
+import "@fullcalendar/bootstrap/main.css";
+import "react-datetime/css/react-datetime.css";
 
 // App Styes
 // ======================
-import '../styles/bootstrap.scss';
-import '../styles/app.scss';
+import "../styles/bootstrap.scss";
+import "../styles/app.scss";
+import "react-perfect-scrollbar/dist/css/styles.css";
 
 // https://nextjs.org/docs/#custom-app
+
 class MyApp extends App {
-    static async getInitialProps({ Component, ctx }) {
-        let pageProps = {};
+	static async getInitialProps({ Component, ctx }) {
+		let pageProps = {};
 
-        if (Component.getInitialProps) {
-            pageProps = await Component.getInitialProps(ctx);
-        }
+		if (Component.getInitialProps) {
+			pageProps = await Component.getInitialProps(ctx);
+		}
 
-        // Require the initial dictionary.
-        // Use require to avoid 'fs' module
-        Translate.setDict('en', require('@/public/static/locales/en/translations.json'));
-        // The store has been updated in previous call,
-        // pass it down as initial prop so client can use it.
-        return { pageProps, store: Translate.store };
-    }
+		// Require the initial dictionary.
+		// Use require to avoid 'fs' module
+		Translate.setDict("en", require("@/public/static/locales/en/translations.json"));
+		// The store has been updated in previous call,
+		// pass it down as initial prop so client can use it.
+		return { pageProps, store: Translate.store };
+	}
 
-    render() {
-        const { Component, pageProps, reduxStore, store } = this.props;
-        const Layout = Component.Layout ? Component.Layout : Base;
-        const ComponentWithTranslation = Translate.withTranslation(Component);
-        return (
-            <Provider store={reduxStore}>
-                <Translate.Provider store={store}>
-                    <Layout>
-                        <ComponentWithTranslation {...pageProps} />
-                    </Layout>
-                </Translate.Provider>
-            </Provider>
-        );
-    }
+	render() {
+		const { Component, pageProps, reduxStore, store } = this.props;
+		const Layout = Component.Layout ? Component.Layout : Base;
+		const ComponentWithTranslation = Translate.withTranslation(Component);
+		return (
+			<Provider store={reduxStore}>
+				<Translate.Provider store={store}>
+					<Layout>
+						<ComponentWithTranslation {...pageProps} />
+					</Layout>
+				</Translate.Provider>
+			</Provider>
+		);
+	}
 }
 
 export default withReduxStore(MyApp);

pages/app/banding/detail.js

@@ -0,0 +1,200 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import Link from "next/link";
+import Select from "react-select";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import PermohonanPT from "@/components/Main/PermohonanPT";
+import Riwayat from "@/components/Banding/Riwayat";
+import { getSanksi } from "@/actions/sanksi";
+import { addJawabanBanding } from "@/actions/banding";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, FormGroup, Button } from "reactstrap";
+
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+const selectInstanceId = 1;
+
+class JawabanBanding extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedOption: null,
+			files: [],
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		const sanksi = await getSanksi(query);
+		return { sanksi, query };
+	};
+
+	handleChangeSelect = (selectedOption) => {
+		this.setState({ selectedOption });
+	};
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	handelSimpan = async (e) => {
+		e.preventDefault();
+		const { selectedOption } = this.state;
+		const { noSanksi, ptId } = this.props.query;
+		const formdata = new FormData();
+		formdata.append("status", selectedOption.value);
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+
+		const added = await addJawabanBanding({ noSanksi, ptId }, formdata);
+		if (added) {
+			Router.push({
+				pathname: "/app/banding",
+			});
+		}
+	};
+
+	render() {
+		const { files } = this.state;
+		const { sanksi } = this.props;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Jawaban Permohonan Banding</div>
+						<div className="ml-auto">
+							<Link href="/app/banding">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl={9}>
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailSanksi data={sanksi.data[0]} />
+											<PermohonanPT data={sanksi.data[0]} />
+											<p className="lead bb">Jawaban</p>
+											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+												<FormGroup>
+													<label className="row-form-label">Status:</label>
+													<div className="row-md-10">
+														<Select
+															instanceId={selectInstanceId + 1}
+															value={this.state.selectedOption}
+															onChange={this.handleChangeSelect}
+															options={[
+																{ value: "Ditolak", label: "Ditolak", className: "State-ACT" },
+																{ value: "Mengubah Keputusan Sanksi", label: "Mengubah Keputusan Sanksi", className: "State-ACT" },
+																{ value: "Membatalkan Keputusan Sanksi", label: "Membatalkan Keputusan Sanksi", className: "State-ACT" },
+															]}
+															required
+														/>
+														{/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<label className="row-form-label">Dokumen Jawaban:</label>
+													<div className="row-md-10">
+														<DropzoneWrapper className="" onDrop={this.onDrop}>
+															{({ getRootProps, getInputProps, isDragActive }) => {
+																return (
+																	<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">Drop files here to upload</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
+																				</button>
+																			</small>
+																		</div>
+																	</div>
+																);
+															}}
+														</DropzoneWrapper>
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<div className="row-xl-10">
+														<Button color="primary" onClick={this.handelSimpan} type="submit">
+															Simpan
+														</Button>
+													</div>
+												</FormGroup>
+											</form>
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl={3}>
+							<DetailPT />
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+							<Riwayat data={sanksi.data[0]} />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default JawabanBanding;

pages/app/banding/index.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableSanksi from "@/components/Main/TableSanksi";
+import { getSanksi } from "@/actions/sanksi";
+
+class Banding extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const sanksi = await getSanksi({ banding: true });
+		return { sanksi };
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Banding</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">
+						<TableSanksi listData={sanksi.data} to="/app/banding/detail" linkName="Detail" />
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Banding;

pages/app/keberatan/detail.js

@@ -0,0 +1,217 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import Link from "next/link";
+import Select from "react-select";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import PermohonanPT from "@/components/Main/PermohonanPT";
+import Riwayat from "@/components/Keberatan/Riwayat";
+import { getSanksi } from "@/actions/sanksi";
+import { addJawabanKeberatan } from "@/actions/keberatan";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, FormGroup, Input, Button } from "reactstrap";
+
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+const selectInstanceId = 1;
+
+class DetailKeberatan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedOption: null,
+			files: [],
+			keterangan: "",
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		const sanksi = await getSanksi(query);
+		return { sanksi, query };
+	};
+
+	handleChangeSelect = (selectedOption) => {
+		this.setState({ selectedOption });
+	};
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	handelSimpan = async (e) => {
+		e.preventDefault();
+		const { keterangan, selectedOption } = this.state;
+		const { noSanksi, ptId } = this.props.query;
+		const formdata = new FormData();
+		formdata.append("description", keterangan);
+		formdata.append("status", selectedOption.value);
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+
+		const added = await addJawabanKeberatan({ noSanksi, ptId }, formdata);
+		if (added) {
+			Router.push({
+				pathname: "/app/keberatan",
+			});
+		}
+	};
+
+	render() {
+		const { files } = this.state;
+		const { sanksi } = this.props;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Permohonan Keberatan</div>
+						<div className="ml-auto">
+							<Link href="/app/keberatan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailSanksi data={sanksi.data[0]} />
+										</Col>
+									</Row>
+									<Row>
+										<Col lg={12}>
+											<PermohonanPT data={sanksi.data[0]} />
+										</Col>
+									</Row>
+									<Row>
+										<Col lg={12}>
+											<p className="lead bb">Jawaban</p>
+											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+												<FormGroup>
+													<label className="row-form-label">Status:</label>
+													<div className="row-md-10">
+														<Select
+															instanceId={selectInstanceId + 1}
+															value={this.state.selectedOption}
+															onChange={this.handleChangeSelect}
+															options={[
+																{ value: "ditolak", label: "Ditolak", className: "State-ACT" },
+																{ value: "mengubah sanksi", label: "Mengubah Sanksi", className: "State-ACT" },
+																{ value: "mencabut sanksi", label: "Mencabut Sanksi", className: "State-ACT" },
+															]}
+															required
+														/>
+														{/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<label className="row-form-label">Keterangan Jawaban:</label>
+													<div className="row-md-10">
+														<Input type="textarea" value={this.state.keterangan} onChange={(e) => this.setState({ keterangan: e.target.value })} required />
+														{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<label className="row-form-label">Dokumen Jawaban:</label>
+													<div className="row-md-10">
+														<DropzoneWrapper className="" onDrop={this.onDrop}>
+															{({ getRootProps, getInputProps, isDragActive }) => {
+																return (
+																	<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">Drop files here to upload</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
+																				</button>
+																			</small>
+																		</div>
+																	</div>
+																);
+															}}
+														</DropzoneWrapper>
+													</div>
+												</FormGroup>
+												{/* <FormGroup>
+													<div className="row-xl-10"> */}
+												<Button color="primary" onClick={this.handelSimpan} type="submit">
+													Simpan
+												</Button>
+												{/* </div>
+												</FormGroup> */}
+											</form>
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+							<Riwayat data={sanksi.data[0]} />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default DetailKeberatan;

pages/app/keberatan/index.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableSanksi from "@/components/Main/TableSanksi";
+import { getSanksi } from "@/actions/sanksi";
+
+class Keberatan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const sanksi = await getSanksi({keberatan: true});
+		return { sanksi };
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Keberatan</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">
+						<TableSanksi listData={sanksi.data} to="/app/keberatan/detail" linkName="Detail" />
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Keberatan;

pages/app/pelaporan.js

@@ -1,949 +0,0 @@
-import React, { Component } from "react";
-import Router from "next/router";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress, Button } from "reactstrap";
-
-import Sparkline from "@/components/Common/Sparklines";
-import Scrollable from "@/components/Common/Scrollable";
-import Datatable from "@/components/Tables/Datatable";
-import moment from "moment";
-
-class BugTracker extends Component {
-	constructor(props) {
-		super(props);
-	}
-
-	static getInitialProps = async () => {
-		const res = await fetch("http://localhost:1880/pelaporan");
-		const data = await res.json();
-		return { data };
-	};
-
-	renderTable = () => {
-		return this.props.data.map((value) => {
-			return (
-				<tr>
-					<td>BI:{value._number}</td>
-					<td className="text-nowrap">
-						<div className="media align-items-center">
-							<a className="mr-3" href="">
-								<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-							</a>
-							<div className="media-body d-flex">
-								<div>
-									<h4 className="m-0">Universitas Satyagama</h4>
-									<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-									<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-									<p> </p>
-								</div>
-							</div>
-						</div>
-					</td>
-					<td>{moment(value.created_at).fromNow()}</td>
-					<td>
-						<div className="inline wd-xxs badge badge-success">open</div>
-					</td>
-				</tr>
-			);
-		});
-	};
-
-	newReportClick = (e, PT_ID) => {
-		//router = useRouter();
-		//const query = { ptId: PT_ID };
-		//    '/app/profile'
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pelaporan.search",
-		});
-	};
-
-	render() {
-		console.log(this.props.data);
-		// this.fetchData();
-		return (
-			<ContentWrapper>
-				<div className="content-heading">Pelaporan</div>
-				<Row>
-					<Col lg="4">
-						{/* Aside card */}
-						<div className="card b">
-							<div className="card-body bb">
-								<p>Overvall progress</p>
-								<div className="d-flex align-items-center mb-2">
-									<div className="w-100">
-										<Progress className="progress-xs m0" color="info" value={20} />
-									</div>
-									<div className="ml-auto">
-										<div className="col wd-xxs text-right">
-											<div className="text-bold text-muted">20%</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div className="card-body">
-								<p>Metrics</p>
-								<div className="row text-center">
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[20, 80]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#23b7e5"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Open Case</p>
-									</div>
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[80, 20]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#27c24c"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Close Case</p>
-									</div>
-									{/* <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[20,80]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#ff902b"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Hours</p>
-                                    </div>
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[30,70]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#f05050"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Assigned</p>
-                                    </div> */}
-								</div>
-							</div>
-							<table className="table bb">
-								<tbody>
-									{/* <tr>
-                                        <td>
-                                            <strong>Assigned Hours</strong>
-                                        </td>
-                                        <td>68 hs</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Time Consumed</strong>
-                                        </td>
-                                        <td>32 hs</td>
-                                    </tr> */}
-									<tr>
-										<td>
-											<strong>Open Case</strong>
-										</td>
-										<td>80</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Close Case</strong>
-										</td>
-										<td>20</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Performance</strong>
-										</td>
-										<td>
-											<em className="far fa-smile fa-lg text-warning"></em>
-										</td>
-									</tr>
-									{/* <tr>
-                                        <td>
-                                            <strong>Commits</strong>
-                                        </td>
-                                        <td>140</td>
-                                    </tr> */}
-									{/* <tr>
-                                        <td>
-                                            <strong>Last Case Closed</strong>
-                                        </td>
-                                        <td>
-                                            <Scrollable height="120px" className="list-group">
-                                                <table className="table table-bordered bg-transparent">
-                                                    <tbody>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:54678</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:55778</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:56878</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:57978</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:1107</a>
-                                                            </td>
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
-                                            </Scrollable>
-                                        </td>
-                                    </tr> */}
-									<tr>
-										<td>
-											<strong>Last Case Closed</strong>
-										</td>
-										<td>BI:1107 - 12/01/2016</td>
-									</tr>
-								</tbody>
-							</table>
-						</div>
-						{/* end Aside card */}
-					</Col>
-					<Col lg="8">
-						<div className="mb-3 d-flex">
-							<div>
-								<button className="btn btn-sm btn-info" type="button" onClick={(e) => this.newReportClick(e)}>
-									Laporan Baru
-								</button>
-							</div>
-						</div>
-						<div className="card b">
-							<div className="card-body">
-								<Datatable options={{ responsive: true }}>
-									<table className="table w-100">
-										<thead>
-											<tr>
-												{/* <th>Type</th> */}
-												<th>#ID</th>
-												<th>Description</th>
-												<th>Created</th>
-												{/* <th>Priority</th>
-                                                <th>Asigned</th> */}
-												<th>Status</th>
-												{/* <th>Action</th> */}
-											</tr>
-										</thead>
-										<tbody>
-											{this.renderTable()}
-											{/* <tr> */}
-											{/* <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td> */}
-											{/* <td>BI:54678</td>
-												<td className="text-nowrap">
-													<div className="media align-items-center">
-														<a className="mr-3" href="">
-															<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-														</a>
-														<div className="media-body d-flex">
-															<div>
-																<h4 className="m-0">Universitas Satyagama</h4>
-																<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-																<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-																<p> </p>
-															</div> */}
-											{/* <div className="ml-auto">
-                                                                <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>Proses Sangsi</Button>
-                                                            </div> */}
-											{/* </div>
-													</div> */}
-
-											{/* <small>Maecenas mollis egestas convallis.</small> */}
-											{/* </td>
-												<td>{moment("2020-04-04 11:45:26.123").fromNow()}</td> */}
-											{/* <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td> */}
-											{/* <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td> */}
-											{/* <td>
-													<div className="inline wd-xxs badge badge-success">open</div>
-												</td> */}
-											{/* <td>
-                                                    <div className="ml-auto">
-                                                        <button class="btn-oval btn btn-primary" size="sm" onClick={(e) => this.newProcessClick(e)}>Proses Sanksi</button>
-                                                    </div>
-                                                </td> */}
-											{/* </tr> */}
-											{/* <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Aliquam felis nibh, ultrices non elementum</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Aliquam condimentum enim a risus cursus blandit.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Sed at libero augue, in euismod tellus.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Praesent lacinia ultricies neque.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Pellentesque habitant morbi tristique</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Integer venenatis ultrices vulputate.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:55778</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/05/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg" data-title="low"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Sherry Carroll</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:56878</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/01/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Mitchell Jones</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:57978</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/11/2016</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Tracey Parker</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-warning">pending</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1107</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>01/01/2015</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-danger" data-title="high"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Warren Gray</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td>
-                                                <td>BI:1117</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>11/05/2013</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Jackson Ramos</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <div className="badge bg-gray-lighter">issue</div>
-                                                </td>
-                                                <td>BI:10127</td>
-                                                <td className="text-nowrap">
-                                                    <small>Maecenas mollis egestas convallis.</small>
-                                                </td>
-                                                <td>05/02/2014</td>
-                                                <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td>
-                                                <td>
-                                                    <a href="">Ernest Berry</a>
-                                                </td>
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-danger">closed</div>
-                                                </td>
-                                            </tr> */}
-										</tbody>
-									</table>
-								</Datatable>
-							</div>
-						</div>
-					</Col>
-				</Row>
-			</ContentWrapper>
-		);
-	}
-}
-
-export default BugTracker;

pages/app/pelaporan.new.js

@@ -1,679 +0,0 @@
-import React, { Component } from "react";
-import Router from "next/router";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import Select from "react-select";
-import {
-	Row,
-	Col,
-	Card,
-	CardHeader,
-	CardBody,
-	FormGroup,
-	FormFeedback,
-	FormText,
-	Label,
-	InputGroup,
-	InputGroupAddon,
-	InputGroupButtonDropdown,
-	InputGroupText,
-	Input,
-	Button,
-	DropdownToggle,
-	DropdownMenu,
-	CustomInput,
-	DropdownItem,
-} from "reactstrap";
-
-const styleHeaderText = {
-	color: "brown",
-};
-
-let Dropzone = null;
-class DropzoneWrapper extends Component {
-	state = {
-		isClient: false,
-	};
-	componentDidMount = () => {
-		Dropzone = require("react-dropzone").default;
-		this.setState({ isClient: true });
-	};
-	render() {
-		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
-	}
-}
-
-const selectInstanceId = 1;
-const tbljenisPelanggaran = [
-	{
-		idPelanggaran: 0,
-		Pelanggaran: "Tidak Ada",
-		Sangsi: "Tanpa Sangsi",
-		KeteranganSangsi: "-",
-		LevelSangsi: 0,
-		LabelSangsi: "Tidak ada",
-		checked: false,
-		TMTBulan: 0,
-	},
-	{
-		idPelanggaran: 1,
-		Pelanggaran: "Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pelaksanaan kebebasan akademik,kebebasan mimbar akademik, dan otonomi keilmuan di perguruan tinggi",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "-",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 2,
-		Pelanggaran: "Perguruan tinggi tidak memuat mata kuliah agama,Pancasila, kewarganegaraan, dan bahasa Indonesia dalam kurikulumnya",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "-",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 3,
-		Pelanggaran: "Perguruan tinggi tidak menggunakan bahasa Indonesia sebagai bahasa pengantar utama",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "-",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 4,
-		Pelanggaran:
-			"Perguruan tinggi tidak menyebarluaskan hasil penelitian dengan cara diseminarkan, dipublikasikan, dan/atau dipatenkan, kecuali hasil penelitian yang bersifat rahasia, mengganggu, dan/atau membahayakan kepentingan umum",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 5,
-		Pelanggaran: "PTN tidak menerima calon Mahasiswa yang telah memenuhi persyaratan akademik dan lolos seleksi penerimaan Mahasiswa secara nasional",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 6,
-		Pelanggaran:
-			"PTN tidak mencari dan menjaring calon Mahasiswa yang memiliki potensi akademik tinggi, tetapi kurang mampu secara ekonomi dan calon Mahasiswa dari daerah terdepan, terluar, dan tertinggal untuk diterima paling sedikit 20% (dua puluh persen) dari seluruh Mahasiswa baru yang diterima dan tersebar pada semua Program Studi",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 7,
-		Pelanggaran: "Perguruan tinggi tidak memenuhi hak Mahasiswa yang kurang mampu secara ekonomi untuk dapat menyelesaikan studinya sesuai dengan peraturan akademik",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 8,
-		Pelanggaran: "Perguruan tinggi memberi gelar yang tidak menggunakan bahasa Indonesia",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 9,
-		Pelanggaran: "Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pengelolaan di bidang non akademik",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 10,
-		Pelanggaran: "Perguruan tinggi tidak mengumumkan ringkasan laporan tahunan kepada masyarakat",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 11,
-		Pelanggaran: "Perguruan tinggi memiliki Dosen tetap kurang dari 5 (lima) orang untuk setiap Program Studi",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 12,
-		Pelanggaran: "Perguruan tinggi tidak memenuh  nisbah Dosen dan Mahasiswa sesuai dengan ketentuan peraturan perundang-undangan",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 13,
-		Pelanggaran: "Perguruan tinggi tidak melakukan pelaporan secara berkala ke pangkalan data Pendidikan Tinggi",
-		Sangsi: "Peringatan Tertulis",
-		KeteranganSangsi: "",
-		LevelSangsi: 1,
-		LabelSangsi: "Ringan",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 14,
-		Pelanggaran: "Program sarjana memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-		Sangsi: "Penghentian sementara bantuan biaya pendidikan dari pemerintahan pusat",
-		KeteranganSangsi: "Berupa penundaan pemberian bantuan keuangan, hibah, dan/atau bentuk bantuan lain bagi perguruan tinggi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 15,
-		Pelanggaran: "Program magister memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penghentian sementara penerimaan Mahasiswa baru",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 16,
-		Pelanggaran: "Program doktor memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan proses usul pembukaan Program Studi baru",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 17,
-		Pelanggaran: "Program diploma memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 18,
-		Pelanggaran: "Program magister terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 19,
-		Pelanggaran: "Program doktor terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 20,
-		Pelanggaran: "Program profesi memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan profesi dan/atau lulusan program magister atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 21,
-		Pelanggaran: "Program spesialis memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program spesialis dan/atau lulusan program doktor atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 22,
-		Pelanggaran: "Perguruan tinggi tidak mencabut gelar akademik, gelar vokasi, atau gelar profesi apabila karya ilmiah yang digunakan untuk memperoleh gelar akademik, gelar vokasi, atau gelar profesi terbukti merupakan hasil plagiat",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 23,
-		Pelanggaran: "Perguruan tinggi tidak menyediakan, memfasilitasi, memiliki Sumber Belajar sesuai dengan Program Studi yang dikembangkan",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 24,
-		Pelanggaran: "Perguruan tinggi tidak memiliki statuta",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 25,
-		Pelanggaran: "Perguruan tinggi tidak memiliki panduan/prosedur peralihan dan perolehan satuan kredit semester serta rekognisi pembelajaran lampau",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 26,
-		Pelanggaran: "Perguruan tinggi melaporkan data yang tidak valid ke PDDIKTI",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 27,
-		Pelanggaran: "Perguruan tinggi yang menyelenggarakan kegiatan akademik yang tidak sesuai dengan seluruh Standar Nasional Pendidikan Tinggi",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 28,
-		Pelanggaran: "Badan Penyelenggara tidak memberikan gaji pokok serta tunjangan kepada Dosen dan tenaga kependidikan sesuai dengan ketentuan peraturan perundang-undangan",
-		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
-		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
-		LevelSangsi: 2,
-		LabelSangsi: "Sedang",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 29,
-		Pelanggaran: "Perguruan tinggi dan/atau Program Studi yang tidak terakreditasi mengeluarkan gelar akademik, gelar vokasi, dan/atau gelar profesi",
-		Sangsi: "Penghentian pembinaan",
-		KeteranganSangsi: "Penghentian bantuan keuangan, hibah, dan/atau bentuk bantuan lain yang diperuntukkan bagi perguruan tinggi",
-		LevelSangsi: 3,
-		LabelSangsi: "Berat",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 30,
-		Pelanggaran: "Perguruan tinggi dan/atau Program Studi memberikan ijazah, gelar akademik, gelar vokasi, dan/atau gelar profesi kepada orang yang tidak berhak",
-		Sangsi: "Penghentian pembinaan",
-		KeteranganSangsi: "Penghentian layanan Pemerintah Pusat bagi perguruan tinggi",
-		LevelSangsi: 3,
-		LabelSangsi: "Berat",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 31,
-		Pelanggaran: "Perguruan tinggi tidak mengusulkan akreditasi ulang Program Studi sebagaimana ditentukan dalam peraturan perundang-undangan",
-		Sangsi: "Penghentian pembinaan",
-		KeteranganSangsi: "Penghentian penerimaan Mahasiswa baru",
-		LevelSangsi: 3,
-		LabelSangsi: "Berat",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 32,
-		Pelanggaran: "Perguruan tinggi lembaga negara lain yang menyelenggarakan pendidikan di wilayah Negara Kesatuan Republik Indonesia yang tidak sesuai dengan ketentuan peraturan perundang-undangan",
-		Sangsi: "Penghentian pembinaan",
-		KeteranganSangsi: "Larangan melakukan wisuda",
-		LevelSangsi: 3,
-		LabelSangsi: "Berat",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 33,
-		Pelanggaran: "Perguruan tinggi melakukan penerimaan Mahasiswa baru dengan tujuan komersial",
-		Sangsi: "Penghentian pembinaan",
-		KeteranganSangsi: "Penghentian proses usul pembukaan Program Studi baru",
-		LevelSangsi: 3,
-		LabelSangsi: "Berat",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 34,
-		Pelanggaran: "Pengelolaan perguruan tinggi tidak berprinsip nirlaba",
-		Sangsi: "Penghentian pembinaan",
-		KeteranganSangsi: "Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan",
-		LevelSangsi: 3,
-		LabelSangsi: "Berat",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 35,
-		Pelanggaran: "Perguruan tinggi dan/atau Badan Penyelenggara melakukan perubahan nama perguruan tinggi, nama dan/atau bentuk Badan Penyelenggara, dan/atau lokasi Kampus Utama PTS tanpa izin dari Menteri",
-		Sangsi: "Pencabutan izin Program Studi",
-		KeteranganSangsi: "",
-		LevelSangsi: 3,
-		LabelSangsi: "Berat",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 36,
-		Pelanggaran: "Perguruan tinggi menyelenggarakan Program Studi tanpa izin dari Menteri",
-		Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
-		KeteranganSangsi: "",
-		LevelSangsi: 3,
-		LabelSangsi: "Berat",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 37,
-		Pelanggaran: "Perguruan tinggi menyelenggarakan PJJ tanpa izin dari Menteri",
-		Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
-		KeteranganSangsi: "",
-		LevelSangsi: 3,
-		LabelSangsi: "Berat",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 38,
-		Pelanggaran: "Perguruan tinggi dan/atau Program Studi tidak lagi memenuhi syarat pendirian perguruan tinggi dan/atau pembukaan Program Studi",
-		Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
-		KeteranganSangsi: "",
-		LevelSangsi: 3,
-		LabelSangsi: "Berat",
-		checked: false,
-		TMTBulan: 6,
-	},
-	{
-		idPelanggaran: 39,
-		Pelanggaran: "Terjadi sengketa",
-		Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
-		KeteranganSangsi: "",
-		LevelSangsi: 3,
-		LabelSangsi: "Berat",
-		checked: false,
-		TMTBulan: 6,
-	},
-];
-const selectJenisPelangaran = tbljenisPelanggaran.map((e) => {
-	return { value: e.idPelanggaran, label: e.Pelanggaran, className: "State-ACT" };
-});
-class FormStandard extends Component {
-	constructor() {
-		super();
-		this.state = {
-			dropdownOpen: false,
-			splitButtonOpen: false,
-			selectedOptionMulti: [],
-			stat: "Waiting to add files..",
-			pelaporanNumber: Math.floor(Date.now() * Math.random()),
-			keteranganLaporan: "",
-			files: [],
-		};
-	}
-
-	static getInitialProps({ query }) {
-		return { query };
-	}
-
-	setKeteranganPelaporan = (e) => {
-		this.setState({ keteranganLaporan: e.target.value });
-	};
-
-	toggleDropDown = () => {
-		this.setState({
-			dropdownOpen: !this.state.dropdownOpen,
-		});
-	};
-
-	toggleSplit = () => {
-		this.setState({
-			splitButtonOpen: !this.state.splitButtonOpen,
-		});
-	};
-
-	handleChangeSelectMulti = (selectedOptionMulti) => {
-		this.setState({ selectedOptionMulti });
-	};
-
-	onDrop = (files) => {
-		this.setState({
-			files: files.map((file) =>
-				Object.assign(file, {
-					preview: URL.createObjectURL(file),
-				})
-			),
-			stat: "Added " + files.length + " file(s)",
-		});
-	};
-
-	uploadFiles = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		this.setState({
-			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
-		});
-	};
-
-	clearFiles = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		this.setState({
-			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
-		});
-		this.setState({
-			files: [],
-		});
-	};
-
-	onSubmit = (e) => {
-		const formdata = new FormData();
-		formdata.append("number", this.state.pelaporanNumber);
-		formdata.append("pt_id", this.props.query.ptId);
-		formdata.append("description", this.state.keteranganLaporan);
-		formdata.append("pelanggaran_id", this.state.selectedOptionMulti.map((e) => e.value).join());
-		if (this.state.files.length > 0) {
-			this.state.files.forEach((e) => {
-				formdata.append("files", e);
-			});
-		}
-
-		const inserted = this.insertData(formdata);
-		e.preventDefault();
-		if (inserted) {
-			Router.push({
-				pathname: "/app/pelaporan",
-			});
-		}
-	};
-
-	insertData = async (data) => {
-		try {
-			const requestOptions = {
-				method: "POST",
-				body: data,
-			};
-
-			const inserted = await fetch("http://localhost:1880/pelaporan.create", requestOptions);
-			// .catch((error) => console.log("error", error));
-			return inserted;
-		} catch (e) {
-			console.log("error", error);
-			return false;
-		}
-	};
-
-	render() {
-		const { selectedOptionMulti, files } = this.state;
-
-		const thumbs = files.map((file, index) => (
-			<Col md={3} key={index}>
-				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
-			</Col>
-		));
-		return (
-			<ContentWrapper unwrap>
-				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
-					<div className="p-4 text-center" style={styleHeaderText}>
-						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
-						<h3 className="m-0">Universitas Satyagama</h3>
-						<p>0742/O/1990</p>
-						<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-					</div>
-				</div>
-				<div className="p-3">
-					<div className="content-heading">
-						<div>
-							Pelaporan Baru
-							<small>Form pembuatan laporan baru v.0.1</small>
-						</div>
-					</div>
-					<Row>
-						<Col xl="9">
-							{/* START card */}
-							<Card className="card-default">
-								<CardHeader>
-									<label>Informasi Laporan</label>
-								</CardHeader>
-								<CardBody>
-									<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-										{/* <fieldset> */}
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
-											<div className="col-md-10">
-												<Input type="text" disabled value={this.state.pelaporanNumber} />
-												<span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span>
-											</div>
-										</FormGroup>
-										{/* </fieldset> */}
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
-											<div className="col-md-10">
-												<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={selectJenisPelangaran} required />
-												<span className="form-text">Pilih Jenis Pelanggaran</span>
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Keterangan Laporan</label>
-											<div className="col-md-10">
-												<Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} required />
-												{/* <textarea class="form-control" id="inputContact6" row="3">Some nice Street, 1234</textarea> */}
-												<span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span>
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Upload File Pendukung</label>
-											<div className="col-md-10">
-												{/* <Input type="file" multiple name="files" className="custom-file-input" /> */}
-												{/* <CustomInput type="file" multiple id="files" onChange={this.filesHandler} /> */}
-												{/* <span className="form-text">Multiple files upload</span> */}
-												<DropzoneWrapper className="" onDrop={this.onDrop}>
-													{({ getRootProps, getInputProps, isDragActive }) => {
-														return (
-															<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">Drop files here to upload</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
-																		</button>
-																	</small>
-																</div>
-															</div>
-														);
-													}}
-												</DropzoneWrapper>
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<div className="col-xl-10">
-												<button className="btn btn-sm btn-primary" type="submit">
-													Submit Laporan
-												</button>
-											</div>
-										</FormGroup>
-									</form>
-								</CardBody>
-							</Card>
-							{/* END card */}
-						</Col>
-						<Col xl="3">
-							<div className="card card-default">
-								<div className="card-body">
-									<div className="text-center">
-										<h3 className="mt-0">Universitas Satyagama</h3>
-										<p>0742/O/1990</p>
-									</div>
-									<hr />
-									<ul className="list-unstyled px-4">
-										<li>
-											<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
-										</li>
-										<li>
-											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
-										</li>
-									</ul>
-								</div>
-							</div>
-						</Col>
-					</Row>
-				</div>
-			</ContentWrapper>
-		);
-	}
-}
-
-export default FormStandard;

pages/app/pelaporan.search.js

@@ -1,321 +0,0 @@
-import React, { Component } from 'react';
-import Router from 'next/router'
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-// React Slider
-import Slider from 'rc-slider';
-import 'rc-slider/assets/index.css';
-// React Select
-import Select from 'react-select';
-// DateTimePicker
-import Datetime from 'react-datetime';
-import 'react-datetime/css/react-datetime.css';
-
-
-import https from 'https';
-
-
-
-import CardTool from '@/components/Common/CardTool'
-
-import dummyData from './PT-ID.json';
-
-var pembina = [];
-
-
-class Search extends Component {
-
-    
-
-    static async getInitialProps(ctx) {
-
-        pembina = [];
-        const httpsAgent = new https.Agent({
-            rejectUnauthorized: false,
-          });
-        
-        //API down 
-        //  const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/lembaga-non-sp', { 
-        //     method: 'get', 
-        //     headers: new Headers({
-        //       'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5', 
-        //       'Accept': 'application/json'
-        //     }),
-        //     agent: httpsAgent
-        //   }
-        //  )
-
-        //API down 
-        //const jsonPembina = await res.json();
-          const jsonPembina = [
-              
-                { id: 'ABEAE958-4F20-40EF-B145-B8014EC98D8F', nama: 'Badan Intelijen Negara', singkatan: 'BIN' }
-
-            ]
-
-        //jsonPembina = JSON.parse(jsonPembina);
-        // id: "ABEAE958-4F20-40EF-B145-B8014EC98D8F",nama: "Badan Intelijen Negara",singkatan: "BIN"
-        // { value: 'australian-capital-territory', label: 'Australian Capital Territory', className: 'State-ACT' },
-
-
-
-        var numrows = jsonPembina.length;
-
-        for (var i = 0; i < numrows; i++) {
-            pembina.push({value:jsonPembina[i].id, label:jsonPembina[i].nama, className: 'State-'+jsonPembina[i].singkatan});
-        }
-
-        console.log('pembina : ', pembina);
-
-        
-        //return { data: json }
-      }
-
-    state = {
-        selectedOptionMulti: [],
-        data: []
-    }
-
-
-    handleChangeSelectMulti = (selectedOptionMulti) => {
-        this.setState({ selectedOptionMulti });
-    }
-
-    renderInputGroup = props => {
-        return (
-            <div className="input-group date">
-                <input className="form-control" {...props} />
-                <span className="input-group-append input-group-addon">
-                    <span className="input-group-text fas fa-calendar-alt"></span>
-                </span>
-            </div>
-        )
-    }
-
-    
-    
-
-
-    handleClick = (e, PT_ID) => {
-        //router = useRouter();
-        const query = { ptId: PT_ID };
-        //    '/app/profile'
-        e.preventDefault();
-        Router.push(
-            {
-                pathname: '/app/pelaporan.new',
-                query: { ptId: PT_ID }
-            }
-        );
-    }
-
-    fetchData = async () => {
-        var qPembina = "";
-        //console.log('this.state.selectedOptionMulti.value : ', this.state.selectedOptionMulti.value);
-        if (this.state.selectedOptionMulti.value !== undefined ){
-            qPembina = '&pembina='+this.state.selectedOptionMulti.value;
-        }
-
-        //console.log('qpembina : ', qPembina);
-        const searchValue = 'q='+document.getElementById('searchInput').value;
-
-        const httpsAgent = new https.Agent({
-            rejectUnauthorized: false,
-          });
-        
-          //console.log('post agent : ');
-
-
-         //const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/707C3895-B546-4DA5-A6A7-EFE7461A7C7E', { 
-
-        //API Down
-        //  const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt?'+searchValue+qPembina, { 
-        //     method: 'get', 
-        //     headers: new Headers({
-        //       'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5', 
-        //       'Accept': 'application/json'
-        //     }),
-        //     agent: httpsAgent
-        //   }
-        //  )
-         
-        //API Down
-        //const jsonData = await res.json();
-        const jsonData = dummyData;
-
-
-        this.setState({ data: jsonData });
-        console.log('jsonData : ', jsonData);
-        //Get unique for filter by pembina
-        // const uniquePembina = [
-        //     new Set(jsonData.map(
-        //         item => item.pembina.nama
-        //     ))
-        // ]
-
-
-    };
-
-
-    handleApplyClick = () => {
-        console.log('selectedOptionMulti : ',this.state.selectedOptionMulti);
-        //const dataTables = this.fetchData().jsonData;
-        this.fetchData();
-        //console.log('this.state.data :', this.state.data);
-        if (this.state.data.length > 0){
-            this.renderTableData();
-        }
-    }
-
-    handleSearchClick = () => {
-
-        //const dataTables = this.fetchData().jsonData;
-        this.fetchData();
-        //console.log('this.state.data :', this.state.data);
-        if (this.state.data.length > 0){
-            this.renderTableData();
-        }
-    }
-
-    renderTableData() {
-        //const dataTable = this.props.data;
-        //if (dataTable === true ) {
-
-
-            return this.state.data.map((pt,index) => {
-            return (
-                    <tr>
-                        <td>
-                            <label>{index+1}</label>
-                        </td>
-                        <td>
-                            <div className="media align-items-center">
-                                <a className="mr-3" href="">
-                                    <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy"/>
-                                </a>
-                                <div className="media-body d-flex">
-                                    <div>
-                                        <h4 className="m-0">{pt.nama}</h4>
-                                        <small className="text-muted">{pt.sk_pendirian} - {pt.website} - {pt.email}</small>
-                                        <p>{pt.alamat.jalan}</p>
-                                    </div>
-                                    <div className="ml-auto">
-                                        <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>Buat Laporan</Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </td>
-                    </tr>
-            )
-            })
-        //}
-     }
-
-    render() {
-        // used for react select
-        const { selectedOptionMulti } = this.state;
-
-        
-
-        return (
-            <ContentWrapper>
-                <div className="content-heading">
-                    <div>Pelaporan
-                        <small>Pilih Perguruan Tinggi</small>
-                    </div>
-                </div>
-                <Row>
-                    <Col lg="9">
-                        <div className="form-group mb-4">
-                            <input className="form-control mb-2" type="text" id='searchInput' placeholder="Pencarian Nama Perguruan Tinggi"/>
-                            <div className="d-flex">
-                                <button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>Search</button>
-                                <div className="ml-auto">
-                                    {/* <label className="c-checkbox">
-                                        <input id="inlineCheckbox10" type="checkbox" defaultValue="option1"/>
-                                        <span className="fa fa-check"></span>Nama Perguruan Tinggi</label> */}
-                                    {/* <label className="c-checkbox">
-                                        <input id="inlineCheckbox20" type="checkbox" defaultValue="option2"/>
-                                        <span className="fa fa-check"></span>Pembina</label> */}
-                                    {/* <label className="c-checkbox">
-                                        <input id="inlineCheckbox30" type="checkbox" defaultValue="option3"/>
-                                        <span className="fa fa-check"></span>Apps</label> */}
-                                </div>
-                            </div>
-                        </div>
-                        {/* START card */}
-                        <div className="card card-default">
-                            <div className="card-header">
-                                {/* <CardTool refresh onRefresh={(_,done) => setTimeout(done,2000)}/> */}
-                                Search Results
-                            </div>
-                            {/* START table-responsive */}
-                            <Table striped bordered hover>
-                                <thead>
-                                    <tr>
-                                        {/* <th data-check-all="" className="wd-xxs">
-                                            <div className="checkbox c-checkbox">
-                                                <label className="m-0">
-                                                    <input type="checkbox"/>
-                                                    <span className="fa fa-check"></span>
-                                                </label>
-                                            </div>
-                                        </th> */}
-                                        <th>No. </th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {this.renderTableData()}
-
-                                </tbody>
-                            </Table>
-                            {/* END table-responsive */}
-                            <div className="card-footer">
-                                <div className="d-flex">
-                                    {/* <button className="btn btn-sm btn-secondary">Clear</button> */}
-                                    {/* <nav className="ml-auto">
-                                        <Pagination size="sm">
-                                            <PaginationItem active>
-                                                <PaginationLink>1</PaginationLink>
-                                            </PaginationItem>
-                                            <PaginationItem>
-                                                <PaginationLink>2</PaginationLink>
-                                            </PaginationItem>
-                                            <PaginationItem>
-                                                <PaginationLink>3</PaginationLink>
-                                            </PaginationItem>
-                                            <PaginationItem>
-                                                <PaginationLink next>»</PaginationLink>
-                                            </PaginationItem>
-                                        </Pagination>
-                                    </nav> */}
-                                </div>
-                            </div>
-                        </div>
-                        {/* END card */}
-                    </Col>
-                    <Col lg="3">
-                        <h3 className="m-0 pb-3">Filters</h3>
-                        <div className="form-group mb-4">
-                            <label className="col-form-label mb-2">by Pembina</label>
-                            <br/>
-                            <Select
-                                name="multi-select-name"
-                                multi
-                                simpleValue
-                                value={selectedOptionMulti}
-                                onChange={this.handleChangeSelectMulti}
-                                options={pembina}
-                            />
-                        </div>
-                        <Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>Apply</Button>
-                    </Col>
-                </Row>
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default Search;

pages/app/pelaporan/detail.js

@@ -0,0 +1,52 @@
+import React, { Component } from "react";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import { getPelaporan } from "@/actions/pelaporan";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import Link from "next/link";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody } from "reactstrap";
+
+class DetailPelaporan extends Component {
+	static getInitialProps = async ({ query }) => {
+		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
+		return { query, pelaporan };
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Detail Pelaporan</div>
+						<div className="ml-auto">
+							<Link href="/app/pelaporan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailLaporan data={pelaporan.data[0]} />
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default DetailPelaporan;

pages/app/pelaporan/index.js

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Link from "next/link";
+import { Row, Col, Button } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Main/TableLaporan";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Pelaporan</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">
+						<div className="mb-3 d-flex">
+							<div>
+								<Link href="/app/pelaporan/search">
+									<Button color="primary">Laporan Baru</Button>
+								</Link>
+							</div>
+						</div>
+						<TableLaporan listData={pelaporan.data} to="/app/pelaporan/detail" linkName="Detail" />
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/pelaporan/new.js

@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import InputData from "@/components/Pelaporan/InputData";
+import Link from "next/link";
+
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardHeader, CardBody } from "reactstrap";
+
+class PelaporanNew extends Component {
+	static getInitialProps = async ({ query }) => {
+		return { query };
+	};
+
+	render() {
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>
+							Pelaporan Baru
+							<small>Form pembuatan laporan baru v.0.1</small>
+						</div>
+						<div className="ml-auto">
+							<Link href="/app/pelaporan/search">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<p className="lead bb">Informasi Laporan</p>
+											<InputData query={this.props.query} />
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default PelaporanNew;

pages/app/pelaporan/search.js

@@ -0,0 +1,194 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
+import Link from "next/link";
+
+// React Slider
+import Slider from "rc-slider";
+import "rc-slider/assets/index.css";
+// React Select
+import Select from "react-select";
+// DateTimePicker
+import Datetime from "react-datetime";
+import "react-datetime/css/react-datetime.css";
+
+import https from "https";
+
+import CardTool from "@/components/Common/CardTool";
+
+import dummyData from "../PT-ID.json";
+
+var pembina = [];
+
+class Search extends Component {
+	static async getInitialProps(ctx) {
+		pembina = [];
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+
+		const jsonPembina = [{ id: "ABEAE958-4F20-40EF-B145-B8014EC98D8F", nama: "Badan Intelijen Negara", singkatan: "BIN" }];
+		var numrows = jsonPembina.length;
+
+		for (var i = 0; i < numrows; i++) {
+			pembina.push({ value: jsonPembina[i].id, label: jsonPembina[i].nama, className: "State-" + jsonPembina[i].singkatan });
+		}
+	}
+
+	state = {
+		selectedOptionMulti: [],
+		data: [],
+	};
+
+	handleChangeSelectMulti = (selectedOptionMulti) => {
+		this.setState({ selectedOptionMulti });
+	};
+
+	renderInputGroup = (props) => {
+		return (
+			<div className="input-group date">
+				<input className="form-control" {...props} />
+				<span className="input-group-append input-group-addon">
+					<span className="input-group-text fas fa-calendar-alt"></span>
+				</span>
+			</div>
+		);
+	};
+
+	handleClick = (e, PT_ID) => {
+		const query = { ptId: PT_ID };
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pelaporan/new",
+			query: { ptId: PT_ID },
+		});
+	};
+
+	fetchData = async () => {
+		var qPembina = "";
+		if (this.state.selectedOptionMulti.value !== undefined) {
+			qPembina = "&pembina=" + this.state.selectedOptionMulti.value;
+		}
+
+		const searchValue = "q=" + document.getElementById("searchInput").value;
+
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+		const jsonData = dummyData;
+
+		this.setState({ data: jsonData });
+		console.log("jsonData : ", jsonData);
+	};
+
+	handleApplyClick = () => {
+		console.log("selectedOptionMulti : ", this.state.selectedOptionMulti);
+		this.fetchData();
+		if (this.state.data.length > 0) {
+			this.renderTableData();
+		}
+	};
+
+	handleSearchClick = () => {
+		this.fetchData();
+		if (this.state.data.length > 0) {
+			this.renderTableData();
+		}
+	};
+
+	renderTableData() {
+		return this.state.data.map((pt, index) => {
+			return (
+				<tr>
+					<td>
+						<label>{index + 1}</label>
+					</td>
+					<td>
+						<div className="media align-items-center">
+							<a className="mr-3" href="">
+								<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+							</a>
+							<div className="media-body d-flex">
+								<div>
+									<h4 className="m-0">{pt.nama}</h4>
+									<small className="text-muted">
+										{pt.sk_pendirian} - {pt.website} - {pt.email}
+									</small>
+									<p>{pt.alamat.jalan}</p>
+								</div>
+								<div className="ml-auto">
+									<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
+										Buat Laporan
+									</Button>
+								</div>
+							</div>
+						</div>
+					</td>
+				</tr>
+			);
+		});
+		//}
+	}
+
+	render() {
+		const { selectedOptionMulti } = this.state;
+
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<div>
+						Pelaporan
+						<small>Pilih Perguruan Tinggi</small>
+					</div>
+					<div className="ml-auto">
+						<Link href="/app/pelaporan">
+							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+						</Link>
+					</div>
+				</div>
+				<Row>
+					<Col lg="9">
+						<div className="form-group mb-4">
+							<input className="form-control mb-2" type="text" id="searchInput" placeholder="Pencarian Nama Perguruan Tinggi" />
+							<div className="d-flex">
+								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
+									Search
+								</button>
+								<div className="ml-auto"></div>
+							</div>
+						</div>
+						<div className="card card-default">
+							<div className="card-header">Search Results</div>
+							<Table striped bordered hover>
+								<thead>
+									<tr>
+										<th>No. </th>
+										<th>Description</th>
+									</tr>
+								</thead>
+								<tbody>{this.renderTableData()}</tbody>
+							</Table>
+							<div className="card-footer">
+								<div className="d-flex"></div>
+							</div>
+						</div>
+					</Col>
+					<Col lg="3">
+						<h3 className="m-0 pb-3">Filters</h3>
+						<div className="form-group mb-4">
+							<label className="col-form-label mb-2">by Pembina</label>
+							<br />
+							<Select name="multi-select-name" isMulti simpleValue value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina} />
+						</div>
+						<Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>
+							Apply
+						</Button>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Search;

pages/app/pemantauan-perbaikan/detail.js

@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import Link from "next/link";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import Riwayat from "@/components/PT/Riwayat";
+import { getSanksi } from "@/actions/sanksi";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody } from "reactstrap";
+
+class PemantauanDokumen extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		const sanksi = await getSanksi(query);
+		return { sanksi, query };
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Detail Pemantauan Perbaikan</div>
+						<div className="ml-auto">
+							<Link href="/app/pemantauan-perbaikan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailSanksi data={sanksi.data[0]} />
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+							<Riwayat data={sanksi.data[0].sanksi.doc_perbaikan} />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default PemantauanDokumen;

pages/app/pemantauan-perbaikan/index.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableSanksi from "@/components/Main/TableSanksi";
+import { getSanksi } from "@/actions/sanksi";
+
+class PemantauanPerbaikan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const sanksi = await getSanksi({ docPerbaikan: true });
+		return { sanksi };
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Banding</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">
+						<TableSanksi listData={sanksi.data} to="/app/pemantauan-perbaikan/detail" linkName="Detail" />
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default PemantauanPerbaikan;

pages/app/pemantauan/index.js

@@ -0,0 +1,191 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
+// React Slider
+import Slider from "rc-slider";
+import "rc-slider/assets/index.css";
+// React Select
+import Select from "react-select";
+// DateTimePicker
+import Datetime from "react-datetime";
+import "react-datetime/css/react-datetime.css";
+
+import https from "https";
+
+import CardTool from "@/components/Common/CardTool";
+
+import dummyData from "../PT-ID.json";
+
+var pembina = [];
+
+class Search extends Component {
+	static async getInitialProps(ctx) {
+		pembina = [];
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+	}
+
+	state = {
+		selectedOptionMulti: [],
+		data: [],
+	};
+
+	handleChangeSelectMulti = (selectedOptionMulti) => {
+		this.setState({ selectedOptionMulti });
+	};
+
+	renderInputGroup = (props) => {
+		return (
+			<div className="input-group date">
+				<input className="form-control" {...props} />
+				<span className="input-group-append input-group-addon">
+					<span className="input-group-text fas fa-calendar-alt"></span>
+				</span>
+			</div>
+		);
+	};
+
+	handleClick = (e, PT_ID) => {
+		const query = { ptId: PT_ID };
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pemantauan/timeline",
+			query: { ptId: PT_ID },
+		});
+	};
+
+	fetchData = async () => {
+		var qPembina = "";
+		console.log("this.state.selectedOptionMulti.value : ", this.state.selectedOptionMulti.value);
+		if (this.state.selectedOptionMulti.value !== undefined) {
+			qPembina = "&pembina=" + this.state.selectedOptionMulti.value;
+		}
+
+		const searchValue = "q=" + document.getElementById("searchInput").value;
+
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+
+		const jsonData = dummyData;
+
+		this.setState({ data: jsonData });
+	};
+
+	handleApplyClick = () => {
+		console.log("selectedOptionMulti : ", this.state.selectedOptionMulti);
+		this.fetchData();
+		if (this.state.data.length > 0) {
+			this.renderTableData();
+		}
+	};
+
+	handleSearchClick = () => {
+		this.fetchData();
+		if (this.state.data.length > 0) {
+			this.renderTableData();
+		}
+	};
+
+	renderTableData() {
+
+		return this.state.data.map((pt, index) => {
+			return (
+				<tr>
+					<td>
+						<label>{index + 1}</label>
+					</td>
+					<td>
+						<div className="media align-items-center">
+							<a className="mr-3" href="">
+								<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
+							</a>
+							<div className="media-body d-flex">
+								<div>
+									<h4 className="m-0">{pt.nama}</h4>
+									<small className="text-muted">
+										{pt.sk_pendirian} - {pt.website} - {pt.email}
+									</small>
+									<p>{pt.alamat.jalan}</p>
+								</div>
+								<div className="ml-auto">
+									<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
+										View
+									</Button>
+								</div>
+							</div>
+						</div>
+					</td>
+				</tr>
+			);
+		});
+		//}
+	}
+
+	render() {
+		// used for react select
+		const { selectedOptionMulti } = this.state;
+
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<div>
+						Search
+						<small>Search and filter results</small>
+					</div>
+				</div>
+				<Row>
+					<Col lg="9">
+						<div className="form-group mb-4">
+							<input className="form-control mb-2" type="text" id="searchInput" placeholder="Pencarian Nama Perguruan Tinggi" />
+							<div className="d-flex">
+								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
+									Search
+								</button>
+								<div className="ml-auto">
+								</div>
+							</div>
+						</div>
+						{/* START card */}
+						<div className="card card-default">
+							<div className="card-header">
+								Search Results
+							</div>
+							{/* START table-responsive */}
+							<Table striped bordered hover>
+								<thead>
+									<tr>
+										<th>No. </th>
+										<th>Description</th>
+									</tr>
+								</thead>
+								<tbody>{this.renderTableData()}</tbody>
+							</Table>
+							{/* END table-responsive */}
+							<div className="card-footer">
+								<div className="d-flex">
+								</div>
+							</div>
+						</div>
+						{/* END card */}
+					</Col>
+					<Col lg="3">
+						<h3 className="m-0 pb-3">Filters</h3>
+						<div className="form-group mb-4">
+							<label className="col-form-label mb-2">by Pembina</label>
+							<br />
+							<Select name="multi-select-name" multi simpleValue value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina} />
+						</div>
+						<Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>
+							Apply
+						</Button>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Search;

pages/app/pemantauan/timeline.js

@@ -0,0 +1,336 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import {
+	Row,
+	Col,
+	Card,
+	Button,
+	CardHeader,
+	CardFooter,
+	Table,
+	Nav,
+	NavItem,
+	NavLink,
+	TabContent,
+	TabPane,
+	Pagination,
+	PaginationItem,
+	PaginationLink,
+	ListGroup,
+	ListGroupItem,
+	Dropdown,
+	DropdownMenu,
+	DropdownToggle,
+	DropdownItem,
+} from "reactstrap";
+//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import Select from "react-select";
+import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
+
+import { GetServerSideProps, NextPage } from "next";
+import ErrorPage from "next/error";
+import fetch from "node-fetch";
+
+import https from "https";
+
+const containerStyle = {
+	width: "100%",
+	height: "155px",
+};
+
+
+var jenisPelanggaran = [];
+
+//const qpt_id = {};
+
+//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252
+
+// Demo with custom style
+const DemoMapCustomStyle = (props) => (
+	<GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
+		<Marker position={props.location} />
+	</GoogleMap>
+);
+
+const styleHeaderText = {
+	color: "brown",
+};
+
+class Profile extends Component {
+	toggleTab = (tab) => {
+		if (this.state.activeTab !== tab) {
+			this.setState({
+				activeTab: tab,
+			});
+		}
+	};
+
+	static async getInitialProps({ query }) {
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+		const json = [
+			{
+				id: "0BCE4DB7-B207-445D-8D03-0C54B7688252",
+				kode: "031031",
+				kode_satker: null,
+				nama: "Universitas Satyagama",
+				nama_singkat: "USG",
+				sk_pendirian: "0742/O/1990",
+				tgl_sk_pendirian: "1990-12-22",
+				sk_operasional: null,
+				tgl_sk_operasional: null,
+				status: "A",
+				alamat: {
+					jalan: "Jalan Kamal Raya No 2-A Cengkareng",
+					rt: null,
+					rw: null,
+					dusun: null,
+					kelurahan: "-",
+					kode_pos: "11730",
+					kab_kota: {
+						id: "016200",
+						nama: "Kota Jakarta Barat",
+					},
+				},
+				propinsi: {
+					id: "010000",
+					nama: "Prov. D.K.I. Jakarta",
+				},
+				telepon: "(021) 5452377-78",
+				faksimile: "(021) 54391325",
+				website: "www.satyagama.ac.id",
+				email: "info@satyagama.ac.id",
+				status_milik: {
+					id: "3",
+					nama: "Yayasan",
+				},
+				pembina: {
+					id: "728989DD-251E-4516-BE2C-BA17A93A5C51",
+					nama: "LLDIKTI III",
+				},
+				bentuk_pendidikan: {
+					id: "23",
+					nama: "Universitas",
+				},
+				last_update: "2021-12-08",
+				negara: {
+					id: "ID",
+					nama: "Indonesia",
+				},
+				pimpinan: {
+					id: "D3D20B3D-0FBE-4706-8A70-67C4C09C8FBE",
+					nama: "DEWI SULISTYANI",
+					tmt_sk_pengangkatan: "2021-03-17",
+					tst_sk_pengangkatan: "2025-03-17",
+				},
+			},
+		];
+		console.log("json : ", json);
+
+		return { data: json[0] };
+	}
+
+	state = {
+		dropdownOpen: false,
+		dropdownOpenUpload: false,
+		timelineAlt: false,
+		location: { lat: 33.7906731, lng: -117.8357194 },
+		customStyle: [
+			{ featureType: "water", stylers: [{ visibility: "on" }, { color: "#bdd1f9" }] },
+			{ featureType: "all", elementType: "labels.text.fill", stylers: [{ color: "#334165" }] },
+			{ featureType: "landscape", stylers: [{ color: "#e9ebf1" }] },
+			{ featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#c5c6c6" }] },
+			{ featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#fff" }] },
+			{ featureType: "road.local", elementType: "geometry", stylers: [{ color: "#fff" }] },
+			{ featureType: "transit", elementType: "geometry", stylers: [{ color: "#d8dbe0" }] },
+			{ featureType: "poi", elementType: "geometry", stylers: [{ color: "#cfd5e0" }] },
+			{ featureType: "administrative", stylers: [{ visibility: "on" }, { lightness: 33 }] },
+			{ featureType: "poi.park", elementType: "labels", stylers: [{ visibility: "on" }, { lightness: 20 }] },
+			{ featureType: "road", stylers: [{ color: "#d8dbe0", lightness: 20 }] },
+		],
+		listA: [],
+		selectedOptionMulti: [],
+		activeTab: "tasks",
+	};
+
+	toggleDD = () =>
+		this.setState({
+			dropdownOpen: !this.state.dropdownOpen,
+		});
+
+	toggleDDUpload = () =>
+		this.setState({
+			dropdownOpenUpload: !this.state.dropdownOpenUpload,
+		});
+
+	toggleTimeline = (e) => {
+		this.setState({
+			timelineAlt: e.target.checked,
+		});
+	};
+
+	render() {
+		const { selectedOptionMulti } = this.state;
+
+		return (
+			<ContentWrapper unwrap>
+				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
+					<div className="p-4 text-center" style={styleHeaderText}>
+						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
+						<h3 className="m-0">{this.props.data.nama}</h3>
+						<p>{this.props.data.sk_pendirian}</p>
+						<p>{this.props.data.alamat.jalan}</p>
+					</div>
+				</div>
+				<div className="p-3">
+					<Row>
+						<Col xl="9">
+							<ul className="timeline">
+								<li className="timeline-separator" data-datetime="Today"></li>
+								<li className="timeline-inverted">
+									<div className="timeline-badge info">
+										<em className="far fa-file"></em>
+									</div>
+									<div className="timeline-card">
+										<div className="popover right">
+											<div className="arrow"></div>
+											<div className="popover-body">
+												<div className="d-flex align-items-center mb-3">
+													<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
+													<p className="m-0">
+														{/* <a className="text-muted" href=""> */}
+														<strong>Admin</strong>
+														{/* </a> */}
+														<br />
+														Upload Bukti Perbaikan
+														{/* <em className="fa fa-paperclip"></em> */}
+														<Dropdown isOpen={this.state.dropdownOpenUpload} toggle={this.toggleDDUpload}>
+															{/* <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status */}
+															{/* <p className="m-0"><br/> Upload Bukti Perbaikan </p> */}
+															<DropdownToggle caret color="link">
+																<em className="fa fa-paperclip"></em>
+															</DropdownToggle>
+															<DropdownMenu className="animated fadeInUpShort">
+																<DropdownItem>
+																	<em className="fa fa-lock mr-2"></em>Upload
+																</DropdownItem>
+															</DropdownMenu>
+														</Dropdown>
+													</p>
+													{/* <li> */}
+
+													{/* </li> */}
+												</div>
+												{/* <a href="">
+                                                    <img className="img-fluid img-thumbnail" src="/static/img/mockup.png" alt="Img"/>
+                                                </a> */}
+												<p className="text-muted my-2">3 Logs</p>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File BBB.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">12m ago</small>
+												</div>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File CCC.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">30m ago</small>
+												</div>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File AAA.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">30m ago</small>
+												</div>
+												{/* <form className="mt-2" method="post" action="#">
+                                                    <textarea className="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
+                                                </form> */}
+											</div>
+										</div>
+									</div>
+								</li>
+								<li>
+									<div className="timeline-badge danger">
+										<em className="fas fa-ticket-alt"></em>
+									</div>
+									<div className="timeline-card">
+										<div className="popover left">
+											<div className="arrow"></div>
+											<div className="popover-body">
+												<div className="d-flex align-items-center mb-3">
+													<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
+													<p className="m-0">
+														{/* <a className="text-muted" href=""> */}
+														<strong>Admin</strong>
+														{/* </a> */}
+														<br />
+														opened project
+														<a className="ml-2" href="">
+															#548795
+														</a>
+													</p>
+												</div>
+												<p>
+													<em>&mdash; Project description sample</em>
+												</p>
+											</div>
+										</div>
+									</div>
+								</li>
+								<li className="timeline-end">
+									<a className="timeline-badge">
+										<em className="fa fa-plus"></em>
+									</a>
+								</li>
+							</ul>
+						</Col>
+						<Col xl="3">
+							<div className="card card-default">
+								<div className="card-body">
+									<div className="text-center">
+										<h3 className="mt-0">{this.props.data.nama}</h3>
+										<p>{this.props.data.sk_pendirian}</p>
+									</div>
+									<hr />
+									<ul className="list-unstyled px-4">
+										<li>
+											<em className="fa fa-globe fa-fw mr-3"></em>
+											{this.props.data.website}
+										</li>
+										<li>
+											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
+										</li>
+									</ul>
+								</div>
+							</div>
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Profile;

pages/app/pemeriksaan.js

@@ -1,264 +0,0 @@
-import React, { Component } from 'react';
-import Router from 'next/router'
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Progress, Button } from 'reactstrap';
-
-import Sparkline from '@/components/Common/Sparklines';
-import Scrollable from '@/components/Common/Scrollable'
-import Datatable from '@/components/Tables/Datatable';
-import moment from 'moment';
-
-class BugTracker extends Component {
-
-    newProcessClick = (e, PT_ID) => {
-        //router = useRouter();
-        //const query = { ptId: PT_ID };
-        //    '/app/profile'
-        e.preventDefault();
-        Router.push(
-            {
-                pathname: '/app/pemeriksaan.new'
-            }
-        );
-    }
-
-    render() {
-        return (
-            <ContentWrapper>
-                <div className="content-heading">Evaluasi</div>
-                <Row>
-                    <Col lg="4">
-                        {/* Aside card */}
-                        <div className="card b">
-                            <div className="card-body bb">
-                                <p>Overvall progress</p>
-                                <div className="d-flex align-items-center mb-2">
-                                    <div className="w-100">
-                                        <Progress className="progress-xs m0" color="info" value={ 20 } />
-                                    </div>
-                                    <div className="ml-auto">
-                                        <div className="col wd-xxs text-right">
-                                            <div className="text-bold text-muted">20%</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="card-body">
-                                <p>Metrics</p>
-                                <div className="row text-center">
-                                    <div className="col-6 col-lg-6 col-xl-6">
-                                     <Sparkline values={[20,80]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#23b7e5"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Open Case</p>
-                                    </div>
-                                    <div className="col-6 col-lg-6 col-xl-6">
-                                     <Sparkline values={[80,20]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#27c24c"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Close Case</p>
-                                    </div>
-                                    {/* <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[20,80]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#ff902b"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Hours</p>
-                                    </div>
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[30,70]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#f05050"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Assigned</p>
-                                    </div> */}
-                                </div>
-                            </div>
-                            <table className="table bb">
-                                <tbody>
-                                    {/* <tr>
-                                        <td>
-                                            <strong>Assigned Hours</strong>
-                                        </td>
-                                        <td>68 hs</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Time Consumed</strong>
-                                        </td>
-                                        <td>32 hs</td>
-                                    </tr> */}
-                                    <tr>
-                                        <td>
-                                            <strong>Open Case</strong>
-                                        </td>
-                                        <td>80</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Close Case</strong>
-                                        </td>
-                                        <td>20</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Performance</strong>
-                                        </td>
-                                        <td>
-                                            <em className="far fa-smile fa-lg text-warning"></em>
-                                        </td>
-                                    </tr>
-                                    {/* <tr>
-                                        <td>
-                                            <strong>Commits</strong>
-                                        </td>
-                                        <td>140</td>
-                                    </tr> */}
-                                    {/* <tr>
-                                        <td>
-                                            <strong>Last Case Closed</strong>
-                                        </td>
-                                        <td>
-                                            <Scrollable height="120px" className="list-group">
-                                                <table className="table table-bordered bg-transparent">
-                                                    <tbody>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:54678</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:55778</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:56878</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:57978</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:1107</a>
-                                                            </td>
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
-                                            </Scrollable>
-                                        </td>
-                                    </tr> */}
-                                    <tr>
-                                        <td>
-                                            <strong>Last Case Closed</strong>
-                                        </td>
-                                        <td>BI:1107 - 12/01/2016</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        {/* end Aside card */}
-                    </Col>
-                    <Col lg="8">
-                        {/* <div className="mb-3 d-flex"> */}
-                            {/* <div> */}
-                                {/* <button className="btn btn-sm btn-info" type="button" onClick={(e) => this.newReportClick(e)}>Laporan Baru</button> */}
-                                {/* <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button> */}
-                                {/* <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fa fa-user-plus"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fas fa-pencil-alt"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fas fa-share"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fa fa-print"></em>
-                                </button> */}
-                            {/* </div> */}
-                            {/* <div className="ml-auto">
-                                <p className="mb-0 mt-1">19 bugs / 16 issues</p>
-                            </div> */}
-                        {/* </div> */}
-                        <div className="card b">
-                            <div className="card-body">
-                            <Datatable options={{responsive: true}}>
-                                    <table className="table w-100">
-                                        <thead>
-                                            <tr>
-                                                {/* <th>Type</th> */}
-                                                <th>#ID</th>
-                                                <th>Description</th>
-                                                <th>Created</th>
-                                                {/* <th>Priority</th>
-                                                <th>Asigned</th> */}
-                                                <th>Status</th>
-                                                {/* <th>Action</th> */}
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr>
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <div className="media align-items-center">
-                                                        <a className="mr-3" href="">
-                                                            <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy"/>
-                                                        </a>
-                                                        <div className="media-body d-flex">
-                                                            <div>
-                                                                <h4 className="m-0">Universitas Satyagama</h4>
-                                                                <small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-                                                                <p>Jalan Kamal Raya No 2-A Cengkareng</p>
-                                                                <p> </p>
-                                                            </div>
-
-                                                        </div>
-                                                    </div>
-                                                </td>
-                                                <td>{moment("2020-04-04 11:45:26.123").fromNow()}</td>
-                                                <td>
-                                                    <div className="ml-auto">
-                                                        <button class="btn-oval btn btn-primary" size="sm" onClick={(e) => this.newProcessClick(e)}>Update Data</button>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            
-                                        </tbody>
-                                    </table>
-                                </Datatable>
-                            </div>
-                        </div>
-                    </Col>
-                </Row>
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default BugTracker;
-
-

pages/app/pemeriksaan.new.js

@@ -1,146 +0,0 @@
-import React, { Component } from 'react';
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import {
-    Row,
-    Col,
-    Card,
-    CardHeader,
-    CardBody,
-    FormGroup,
-    FormFeedback,
-    FormText,
-    Label,
-    InputGroup,
-    InputGroupAddon,
-    InputGroupButtonDropdown,
-    InputGroupText,
-    Input,
-    Button,
-    DropdownToggle,
-    DropdownMenu,
-    CustomInput,
-    DropdownItem } from 'reactstrap';
-
-const styleHeaderText = {
-    color: 'brown'
-}
-class FormStandard extends Component {
-
-    state = {
-        dropdownOpen: false,
-        splitButtonOpen: false
-    }
-
-    toggleDropDown = () => {
-        this.setState({
-            dropdownOpen: !this.state.dropdownOpen
-        });
-    }
-
-    toggleSplit = () => {
-        this.setState({
-            splitButtonOpen: !this.state.splitButtonOpen
-        });
-    }
-
-    onSubmit = e => {
-        console.log('Form submitted..');
-        e.preventDefault();
-    }
-
-    render() {
-
-        return (
-            <ContentWrapper unwrap>
-                <div className="bg-cover" style={{backgroundImage: 'url(/static/img/profile-bg.png)'}}>
-                    <div className="p-4 text-center" style={styleHeaderText} >
-                        <img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar"/>
-                        <h3 className="m-0">Universitas Satyagama</h3>
-                        <p>0742/O/1990</p>
-                        <p>Jalan Kamal Raya No 2-A Cengkareng</p>
-                    </div>
-                </div>
-                <div className="p-3">
-                    <div className="content-heading">
-                        <div>Evaluasi Data
-                            <small>Form update data evaluasi v.0.1</small>
-                        </div>
-                    </div>
-                    <Row>
-                        <Col xl="9">
-                            {/* START card */}
-                            <Card className="card-default">
-                                <CardHeader>
-                                    <label>Informasi Laporan</label>    
-                                </CardHeader>
-                                <CardBody>
-                                    <form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-                                        {/* <fieldset> */}
-                                        <FormGroup row>
-                                            <label className="col-md-2 col-form-label">Nomor Pelaporan</label>
-                                            <div className="col-md-10">
-                                                <Input type="text"/>
-                                                <span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span>
-                                            </div>
-                                        </FormGroup>
-                                        {/* </fieldset> */}
-                                        <FormGroup row>
-                                            <label className="col-md-2 col-form-label">Keterangan Laporan</label>
-                                            <div className="col-md-10">
-                                                <Input type="textarea"/>
-                                                {/* <textarea class="form-control" id="inputContact6" row="3">Some nice Street, 1234</textarea> */}
-                                                <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span>
-                                            </div>
-                                        </FormGroup>
-                                        <FormGroup row>
-                                            <label className="col-md-2 col-form-label">Upload File Pendukung</label>
-                                            <div className="col-md-10">
-                                                {/* <input type="file" multiple name="customFile" class="custom-file-input"></input> */}
-                                                <CustomInput
-                                                    type="file" multiple
-                                                    id="exampleCustomFileBrowser"
-                                                    name="customFile"
-                                                />
-                                                <span className="form-text">Multiple files upload</span>
-                                            </div>
-                                        </FormGroup>
-                                        <FormGroup row>
-                                            <div className="col-xl-10">
-                                                <button className="btn btn-sm btn-primary" type="submit">Submit Evaluasi</button>
-                                            </div>
-                                        </FormGroup>
-                                    </form>
-                                </CardBody>
-                            </Card>
-                            {/* END card */}
-                        </Col>
-                        <Col xl="3">
-                            <div className="card card-default">
-                                <div className="card-body">
-                                    <div className="text-center">
-                                        <h3 className="mt-0">Universitas Satyagama</h3>
-                                        <p>0742/O/1990</p>
-                                    </div>
-                                    <hr/>
-                                    <ul className="list-unstyled px-4">
-                                        <li>
-                                            <em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
-                                        </li>
-                                        <li>
-                                            <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
-                                        </li>
-                                        
-                                    </ul>
-                                </div>
-                            </div>
-                        </Col>
-                    </Row>
-
-                </div>
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default FormStandard;

pages/app/pemeriksaan/index.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Main/TableLaporan";
+
+class Pemeriksaan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan({ penjadwalan: true });
+		return { pelaporan };
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Evaluasi</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">
+						<TableLaporan listData={pelaporan.data} to="/app/pemeriksaan/new" linkName="Detail" status />
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pemeriksaan;

pages/app/pemeriksaan/new.js

@@ -0,0 +1,68 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import DetailPT from "@/components/Main/DetailPT";
+import Header from "@/components/Main/Header";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import InputEvaluasi from "@/components/Pemeriksaan/InputEvaluasi";
+import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
+import { getPelaporan } from "@/actions/pelaporan";
+import Link from "next/link";
+import { Row, Col, Card, CardBody, CardHeader, CardTitle } from "reactstrap";
+
+class PemeriksaanNew extends Component {
+	static getInitialProps = async ({ query }) => {
+		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
+		return { query, pelaporan };
+	};
+
+	render() {
+		const { pelaporan, query } = this.props;
+
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Evaluasi Laporan</div>
+						<div className="ml-auto">
+							<Link href="/app/pemeriksaan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailLaporan data={pelaporan.data[0]} />
+											<InputEvaluasi query={query} />
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+							<Card className="card-default">
+								<CardHeader>
+									<CardTitle>Riwayat Evaluasi</CardTitle>
+								</CardHeader>
+								<CardBody>
+									<TableRiwayat data={pelaporan.data[0]} />
+								</CardBody>
+							</Card>
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default PemeriksaanNew;

pages/app/pencabutan-sanksi/detail.js

@@ -0,0 +1,217 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import Link from "next/link";
+import Select from "react-select";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import PermohonanPT from "@/components/Main/PermohonanPT";
+import Riwayat from "@/components/PencabutanSanksi/Riwayat";
+import { getSanksi } from "@/actions/sanksi";
+import { addJawabanCabutSanksi } from "@/actions/cabutSanksi";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, FormGroup, Button, Input } from "reactstrap";
+
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+const selectInstanceId = 1;
+
+class JawabanPencabutanSanksi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedOption: null,
+			files: [],
+			keterangan: "",
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		const sanksi = await getSanksi(query);
+		return { sanksi, query };
+	};
+
+	handleChangeSelect = (selectedOption) => {
+		this.setState({ selectedOption });
+	};
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	setKeterangan = (e) => {
+		this.setState({ keterangan: e.target.value });
+	};
+
+	handleSimpan = async (e) => {
+		e.preventDefault();
+		const { selectedOption, keterangan } = this.state;
+		const { noSanksi, ptId } = this.props.query;
+		const formdata = new FormData();
+		formdata.append("status", selectedOption.value);
+		formdata.append("description", keterangan);
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+
+		const added = await addJawabanCabutSanksi({ noSanksi, ptId }, formdata);
+		// console.log(added);
+		if (added) {
+			Router.push({
+				pathname: "/app/pencabutan-sanksi",
+			});
+		}
+	};
+
+	render() {
+		const { files, selectedOption } = this.state;
+		const { sanksi } = this.props;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Jawaban Permohonan Pencabutan Sanksi</div>
+						<div className="ml-auto">
+							<Link href="/app/pencabutan-sanksi">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailSanksi data={sanksi.data[0]} />
+											<PermohonanPT data={sanksi.data[0]} />
+											<p className="lead bb">Jawaban</p>
+											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+												<FormGroup>
+													<label className="row-form-label">Status:</label>
+													<div className="row-md-10">
+														<Select
+															instanceId={selectInstanceId + 1}
+															value={this.state.selectedOption}
+															onChange={this.handleChangeSelect}
+															options={[
+																{ value: "diterima", label: "Diterima", className: "State-ACT" },
+																{ value: "rekomendasi perbaikan", label: "Rekomendasi Perbaikan", className: "State-ACT" },
+															]}
+															required
+														/>
+														{/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
+													</div>
+												</FormGroup>
+												{selectedOption && selectedOption.value === "rekomendasi perbaikan" ? (
+													<FormGroup>
+														<label className="row-form-label">Keterangan:</label>
+														<div className="row-md-10">
+															<Input type="textarea" value={this.state.keterangan} onChange={this.setKeterangan} required />
+															{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
+														</div>
+													</FormGroup>
+												) : (
+													""
+												)}
+												<FormGroup>
+													<label className="row-form-label">Upload Dokumen:</label>
+													<div className="row-md-10">
+														<DropzoneWrapper className="" onDrop={this.onDrop}>
+															{({ getRootProps, getInputProps, isDragActive }) => {
+																return (
+																	<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">Drop files here to upload</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
+																				</button>
+																			</small>
+																		</div>
+																	</div>
+																);
+															}}
+														</DropzoneWrapper>
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<div className="row-xl-10">
+														<Button color="primary" onClick={this.handleSimpan} type="submit">
+															Simpan
+														</Button>
+													</div>
+												</FormGroup>
+											</form>
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+							<Riwayat data={sanksi.data[0]} />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default JawabanPencabutanSanksi;

pages/app/pencabutan-sanksi/index.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableSanksi from "@/components/Main/TableSanksi";
+import { getSanksi } from "@/actions/sanksi";
+
+class PencabutanSanksi extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const sanksi = await getSanksi({ cabutSanksi: true });
+		return { sanksi };
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Permohonan Pencabutan Sanksi</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">
+						<TableSanksi listData={sanksi.data} to="/app/pencabutan-sanksi/detail" linkName="Detail" />
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default PencabutanSanksi;

pages/app/penjadwalan.js

@@ -1,321 +0,0 @@
-import React, { Component } from "react";
-import Router from "next/router";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress, Button } from "reactstrap";
-
-import Sparkline from "@/components/Common/Sparklines";
-import Scrollable from "@/components/Common/Scrollable";
-import Datatable from "@/components/Tables/Datatable";
-import moment from "moment";
-
-class BugTracker extends Component {
-	constructor(props) {
-		super(props);
-	}
-
-	static getInitialProps = async () => {
-		const res = await fetch("http://localhost:1880/pelaporan");
-		const data = await res.json();
-		return { data };
-	};
-
-	renderTable = () => {
-		return this.props.data.map((value) => {
-			return (
-				<tr>
-					<td>BI:{value._number}</td>
-					<td className="text-nowrap">
-						<div className="media align-items-center">
-							<a className="mr-3" href="">
-								<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-							</a>
-							<div className="media-body d-flex">
-								<div>
-									<h4 className="m-0">Universitas Satyagama</h4>
-									<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-									<p>Jalan Kamal Raya No 2-A Cengkareng</p>
-									<p> </p>
-								</div>
-							</div>
-						</div>
-					</td>
-					<td>{moment(value.created_at).fromNow()}</td>
-					<td>
-						<div className="ml-auto">
-							<button class="btn-oval btn btn-primary" size="sm" onClick={(e) => this.newProcessClick(e)}>
-								Proses
-							</button>
-						</div>
-					</td>
-				</tr>
-			);
-		});
-	};
-
-	newProcessClick = (e, PT_ID) => {
-		//router = useRouter();
-		//const query = { ptId: PT_ID };
-		//    '/app/profile'
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/penjadwalan.todo",
-		});
-	};
-
-	render() {
-		return (
-			<ContentWrapper>
-				<div className="content-heading">Pemeriksaan</div>
-				<Row>
-					<Col lg="4">
-						{/* Aside card */}
-						<div className="card b">
-							<div className="card-body bb">
-								<p>Overvall progress</p>
-								<div className="d-flex align-items-center mb-2">
-									<div className="w-100">
-										<Progress className="progress-xs m0" color="info" value={20} />
-									</div>
-									<div className="ml-auto">
-										<div className="col wd-xxs text-right">
-											<div className="text-bold text-muted">20%</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div className="card-body">
-								<p>Metrics</p>
-								<div className="row text-center">
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[20, 80]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#23b7e5"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Open Case</p>
-									</div>
-									<div className="col-6 col-lg-6 col-xl-6">
-										<Sparkline
-											values={[80, 20]}
-											options={{
-												type: "pie",
-												height: "50",
-												sliceColors: ["#edf1f2", "#27c24c"],
-											}}
-											className="sparkline"
-										/>
-										<p className="mt-3">Close Case</p>
-									</div>
-									{/* <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[20,80]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#ff902b"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Hours</p>
-                                    </div>
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[30,70]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#f05050"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Assigned</p>
-                                    </div> */}
-								</div>
-							</div>
-							<table className="table bb">
-								<tbody>
-									{/* <tr>
-                                        <td>
-                                            <strong>Assigned Hours</strong>
-                                        </td>
-                                        <td>68 hs</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Time Consumed</strong>
-                                        </td>
-                                        <td>32 hs</td>
-                                    </tr> */}
-									<tr>
-										<td>
-											<strong>Open Case</strong>
-										</td>
-										<td>80</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Close Case</strong>
-										</td>
-										<td>20</td>
-									</tr>
-									<tr>
-										<td>
-											<strong>Performance</strong>
-										</td>
-										<td>
-											<em className="far fa-smile fa-lg text-warning"></em>
-										</td>
-									</tr>
-									{/* <tr>
-                                        <td>
-                                            <strong>Commits</strong>
-                                        </td>
-                                        <td>140</td>
-                                    </tr> */}
-									{/* <tr>
-                                        <td>
-                                            <strong>Last Case Closed</strong>
-                                        </td>
-                                        <td>
-                                            <Scrollable height="120px" className="list-group">
-                                                <table className="table table-bordered bg-transparent">
-                                                    <tbody>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:54678</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:55778</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:56878</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:57978</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:1107</a>
-                                                            </td>
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
-                                            </Scrollable>
-                                        </td>
-                                    </tr> */}
-									<tr>
-										<td>
-											<strong>Last Case Closed</strong>
-										</td>
-										<td>BI:1107 - 12/01/2016</td>
-									</tr>
-								</tbody>
-							</table>
-						</div>
-						{/* end Aside card */}
-					</Col>
-					<Col lg="8">
-						{/* <div className="mb-3 d-flex"> */}
-						{/* <div> */}
-						{/* <button className="btn btn-sm btn-info" type="button" onClick={(e) => this.newReportClick(e)}>Laporan Baru</button> */}
-						{/* <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button> */}
-						{/* <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fa fa-user-plus"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fas fa-pencil-alt"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fas fa-share"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fa fa-print"></em>
-                                </button> */}
-						{/* </div> */}
-						{/* <div className="ml-auto">
-                                <p className="mb-0 mt-1">19 bugs / 16 issues</p>
-                            </div> */}
-						{/* </div> */}
-						<div className="card b">
-							<div className="card-body">
-								<Datatable options={{ responsive: true }}>
-									<table className="table w-100">
-										<thead>
-											<tr>
-												{/* <th>Type</th> */}
-												<th>#ID</th>
-												<th>Description</th>
-												<th>Created</th>
-												{/* <th>Priority</th>
-                                                <th>Asigned</th> */}
-												<th>Status</th>
-												{/* <th>Action</th> */}
-											</tr>
-										</thead>
-										<tbody>
-											{this.renderTable()}
-											{/*//{" "}
-											    <tr>
-												// <td>BI:54678</td>
-												//{" "}
-												<td className="text-nowrap">
-													//{" "}
-													<div className="media align-items-center">
-														//{" "}
-														<a className="mr-3" href="">
-															// <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
-															//{" "}
-														</a>
-														//{" "}
-														<div className="media-body d-flex">
-															//{" "}
-															<div>
-																// <h4 className="m-0">Universitas Satyagama</h4>
-																// <small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-																// <p>Jalan Kamal Raya No 2-A Cengkareng</p>
-																// <p> </p>
-																//{" "}
-															</div>
-															//{" "}
-														</div>
-														//{" "}
-													</div>
-													//{" "}
-												</td>
-												// <td>{moment("2020-04-04 11:45:26.123").fromNow()}</td>
-												//{" "}
-												<td>
-													//{" "}
-													<div className="ml-auto">
-														//{" "}
-														<button class="btn-oval btn btn-primary" size="sm" onClick={(e) => this.newProcessClick(e)}>
-															Proses
-														</button>
-														//{" "}
-													</div>
-													//{" "}
-												</td>
-												//{" "}
-											</tr> */}
-										</tbody>
-									</table>
-								</Datatable>
-							</div>
-						</div>
-					</Col>
-				</Row>
-			</ContentWrapper>
-		);
-	}
-}
-
-export default BugTracker;

pages/app/penjadwalan.todo.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import dynamic from 'next/dynamic';
-
-// https://github.com/fullcalendar/fullcalendar-react/issues/17
-const DynamicCalendar = dynamic(() => import('../../components/Extras/calendar.view.js'), {
-    ssr: false
-});
-
-export default () => <DynamicCalendar />;

pages/app/penjadwalan/index.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Main/TableLaporan";
+
+class Penjadwalan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan();
+		return { pelaporan };
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Penjadwalan Evaluasi</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">
+						<TableLaporan listData={pelaporan.data} to="/app/penjadwalan/todo" linkName="Atur Jadwal" />
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Penjadwalan;

pages/app/penjadwalan/todo.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
+
+// https://github.com/fullcalendar/fullcalendar-react/issues/17
+const DynamicCalendar = dynamic(() => import("../../../components/Extras/calendar.view.js"), {
+	ssr: false,
+});
+
+export default () => {
+	const router = useRouter();
+	return <DynamicCalendar query={router.query} />;
+};

pages/app/profile-pt.js

@@ -1,1070 +0,0 @@
-import React, { Component } from 'react';
-//import { withRouter } from 'next/router'
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Card, Button, CardHeader, CardFooter, Table, Nav, NavItem, NavLink, TabContent, TabPane, Pagination, PaginationItem, PaginationLink, ListGroup, ListGroupItem, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-
-// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import Select from 'react-select';
-import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
-
-import { GetServerSideProps, NextPage } from 'next';
-import ErrorPage from 'next/error';
-import fetch from 'node-fetch';
-
-import https from 'https';
-
-const containerStyle = {
-    width: '100%',
-    height: '155px'
-};
-
-import FormWizardVertical from './pt.wizard.vertical.js';
-
-var jenisPelanggaran = [];
-
-//const qpt_id = {};
-
-//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252
-
-// Demo with custom style
-const DemoMapCustomStyle = props => (
-        <GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
-        <Marker position={props.location} />
-        </GoogleMap>
-)
-
-const styleHeaderText = {
-    color: 'brown'
-}
-
-class Profile extends Component {
-
-    toggleTab = tab => {
-        if (this.state.activeTab !== tab) {
-            this.setState({
-                activeTab: tab
-            });
-        }
-    }
-
-    
-    static async getInitialProps({ query }) {
-
-        
-
-        const httpsAgent = new https.Agent({
-            rejectUnauthorized: false,
-          });
-        
-          //console.log('post agent : ');
-
-          
-         //const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/707C3895-B546-4DA5-A6A7-EFE7461A7C7E', { 
-         //const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/'+query.ptId, { 
-        //     method: 'get', 
-        //     headers: new Headers({
-        //       'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5', 
-        //       'Accept': 'application/json'
-        //     }),
-        //     agent: httpsAgent
-        //   }
-        //  )
-
-        //console.log('res : ', res);
-         
-        //const json = await res.json();
-        const json = [
-            {
-                "id": "0BCE4DB7-B207-445D-8D03-0C54B7688252",
-                "kode": "031031",
-                "kode_satker": null,
-                "nama": "Universitas Satyagama",
-                "nama_singkat": "USG",
-                "sk_pendirian": "0742/O/1990",
-                "tgl_sk_pendirian": "1990-12-22",
-                "sk_operasional": null,
-                "tgl_sk_operasional": null,
-                "status": "A",
-                "alamat": {
-                    "jalan": "Jalan Kamal Raya No 2-A Cengkareng",
-                    "rt": null,
-                    "rw": null,
-                    "dusun": null,
-                    "kelurahan": "-",
-                    "kode_pos": "11730",
-                    "kab_kota": {
-                        "id": "016200",
-                        "nama": "Kota Jakarta Barat"
-                    }
-                },
-                "propinsi": {
-                    "id": "010000",
-                    "nama": "Prov. D.K.I. Jakarta"
-                },
-                "telepon": "(021) 5452377-78",
-                "faksimile": "(021) 54391325",
-                "website": "www.satyagama.ac.id",
-                "email": "info@satyagama.ac.id",
-                "status_milik": {
-                    "id": "3",
-                    "nama": "Yayasan"
-                },
-                "pembina": {
-                    "id": "728989DD-251E-4516-BE2C-BA17A93A5C51",
-                    "nama": "LLDIKTI III"
-                },
-                "bentuk_pendidikan": {
-                    "id": "23",
-                    "nama": "Universitas"
-                },
-                "last_update": "2021-12-08",
-                "negara": {
-                    "id": "ID",
-                    "nama": "Indonesia"
-                },
-                "pimpinan": {
-                    "id": "D3D20B3D-0FBE-4706-8A70-67C4C09C8FBE",
-                    "nama": "DEWI SULISTYANI",
-                    "tmt_sk_pengangkatan": "2021-03-17",
-                    "tst_sk_pengangkatan": "2025-03-17"
-                }
-            }
-        ];
-        console.log('json : ', json);
-        // const json = 
-        //                 {
-        //                     "id": "0BCE4DB7-B207-445D-8D03-0C54B7688252",
-        //                     "kode": "031031",
-        //                     "kode_satker": null,
-        //                     "nama": "Universitas Satyagama",
-        //                     "nama_singkat": "USG",
-        //                     "sk_pendirian": "0742/O/1990",
-        //                     "tgl_sk_pendirian": "1990-12-22",
-        //                     "sk_operasional": null,
-        //                     "tgl_sk_operasional": null,
-        //                     "status": "N",
-        //                     "alamat": {
-        //                     "jalan": "Jalan Kamal Raya No 2-A Cengkareng",
-        //                     "rt": null,
-        //                     "rw": null,
-        //                     "dusun": null,
-        //                     "kelurahan": "-",
-        //                     "kode_pos": "11730",
-        //                     "kab_kota": {
-        //                         "id": "016200",
-        //                         "nama": "Kota Jakarta Barat"
-        //                     }
-        //                     },
-        //                     "propinsi": {
-        //                     "id": "010000",
-        //                     "nama": "Prov. D.K.I. Jakarta"
-        //                     },
-        //                     "telepon": "(021) 5452377-78",
-        //                     "faksimile": "(021) 54391325",
-        //                     "website": "www.satyagama.ac.id",
-        //                     "email": "info@satyagama.ac.id",
-        //                     "status_milik": {
-        //                     "id": "3",
-        //                     "nama": "Yayasan"
-        //                     },
-        //                     "pembina": {
-        //                     "id": "728989DD-251E-4516-BE2C-BA17A93A5C51",
-        //                     "nama": "LLDIKTI III"
-        //                     },
-        //                     "bentuk_pendidikan": {
-        //                     "id": "23",
-        //                     "nama": "Universitas"
-        //                     },
-        //                     "last_update": "2021-08-22",
-        //                     "negara": {
-        //                     "id": "ID",
-        //                     "nama": "Indonesia"
-        //                     }
-        //             }
-
-
-
-        return { data: json[0] }
-      }
-
-    state = {
-        dropdownOpen: false,
-        dropdownOpenUpload: false,
-        timelineAlt: false,
-        location: { lat: 33.7906731, lng: -117.8357194 },
-        customStyle: [{featureType:'water',stylers:[{visibility:'on'},{color:'#bdd1f9'}]},{featureType:'all',elementType:'labels.text.fill',stylers:[{color:'#334165'}]},{featureType:'landscape',stylers:[{color:'#e9ebf1'}]},{featureType:'road.highway',elementType:'geometry',stylers:[{color:'#c5c6c6'}]},{featureType:'road.arterial',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'transit',elementType:'geometry',stylers:[{color:'#d8dbe0'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#cfd5e0'}]},{featureType:'administrative',stylers:[{visibility:'on'},{lightness:33}]},{featureType:'poi.park',elementType:'labels',stylers:[{visibility:'on'},{lightness:20}]},{featureType:'road',stylers:[{color:'#d8dbe0',lightness:20}]}],
-        listA: [],
-        //isChecked:true,
-        selectedOptionMulti: [],
-        activeTab: 'tasks'
-        // hisJenisPelanggaran:[],
-        // tbljenisPelanggaran:[
-        //     {
-        //         "idPelanggaran": 0,
-        //         "Pelanggaran":"Tidak Ada",
-        //         "Sangsi":"Tanpa Sangsi",
-        //         "KeteranganSangsi":"-",
-        //         "LevelSangsi":0,
-        //         "LabelSangsi":"Tidak ada",
-        //         "checked":false,
-        //         "TMTBulan":0
-        //     },
-        //     {
-        //         "idPelanggaran": 1,
-        //         "Pelanggaran":"Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pelaksanaan kebebasan akademik,kebebasan mimbar akademik, dan otonomi keilmuan di perguruan tinggi",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"-",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 2,
-        //         "Pelanggaran":"Perguruan tinggi tidak memuat mata kuliah agama,Pancasila, kewarganegaraan, dan bahasa Indonesia dalam kurikulumnya",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"-",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 3,
-        //         "Pelanggaran":"Perguruan tinggi tidak menggunakan bahasa Indonesia sebagai bahasa pengantar utama",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"-",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 4,
-        //         "Pelanggaran":"Perguruan tinggi tidak menyebarluaskan hasil penelitian dengan cara diseminarkan, dipublikasikan, dan/atau dipatenkan, kecuali hasil penelitian yang bersifat rahasia, mengganggu, dan/atau membahayakan kepentingan umum",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 5,
-        //         "Pelanggaran":"PTN tidak menerima calon Mahasiswa yang telah memenuhi persyaratan akademik dan lolos seleksi penerimaan Mahasiswa secara nasional",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 6,
-        //         "Pelanggaran":"PTN tidak mencari dan menjaring calon Mahasiswa yang memiliki potensi akademik tinggi, tetapi kurang mampu secara ekonomi dan calon Mahasiswa dari daerah terdepan, terluar, dan tertinggal untuk diterima paling sedikit 20% (dua puluh persen) dari seluruh Mahasiswa baru yang diterima dan tersebar pada semua Program Studi",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 7,
-        //         "Pelanggaran":"Perguruan tinggi tidak memenuhi hak Mahasiswa yang kurang mampu secara ekonomi untuk dapat menyelesaikan studinya sesuai dengan peraturan akademik",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 8,
-        //         "Pelanggaran":"Perguruan tinggi memberi gelar yang tidak menggunakan bahasa Indonesia",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 9,
-        //         "Pelanggaran":"Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pengelolaan di bidang non akademik",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 10,
-        //         "Pelanggaran":"Perguruan tinggi tidak mengumumkan ringkasan laporan tahunan kepada masyarakat",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 11,
-        //         "Pelanggaran":"Perguruan tinggi memiliki Dosen tetap kurang dari 5 (lima) orang untuk setiap Program Studi",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 12,
-        //         "Pelanggaran":"Perguruan tinggi tidak memenuh  nisbah Dosen dan Mahasiswa sesuai dengan ketentuan peraturan perundang-undangan",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 13,
-        //         "Pelanggaran":"Perguruan tinggi tidak melakukan pelaporan secara berkala ke pangkalan data Pendidikan Tinggi",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 14,
-        //         "Pelanggaran":"Program sarjana memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-        //         "Sangsi":"Penghentian sementara bantuan biaya pendidikan dari pemerintahan pusat",
-        //         "KeteranganSangsi":"Berupa penundaan pemberian bantuan keuangan, hibah, dan/atau bentuk bantuan lain bagi perguruan tinggi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 15,
-        //         "Pelanggaran":"Program magister memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penghentian sementara penerimaan Mahasiswa baru",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 16,
-        //         "Pelanggaran":"Program doktor memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan proses usul pembukaan Program Studi baru",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 17,
-        //         "Pelanggaran":"Program diploma memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 18,
-        //         "Pelanggaran":"Program magister terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 19,
-        //         "Pelanggaran":"Program doktor terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 20,
-        //         "Pelanggaran":"Program profesi memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan profesi dan/atau lulusan program magister atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 21,
-        //         "Pelanggaran":"Program spesialis memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program spesialis dan/atau lulusan program doktor atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 22,
-        //         "Pelanggaran":"Perguruan tinggi tidak mencabut gelar akademik, gelar vokasi, atau gelar profesi apabila karya ilmiah yang digunakan untuk memperoleh gelar akademik, gelar vokasi, atau gelar profesi terbukti merupakan hasil plagiat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 23,
-        //         "Pelanggaran":"Perguruan tinggi tidak menyediakan, memfasilitasi, memiliki Sumber Belajar sesuai dengan Program Studi yang dikembangkan",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 24,
-        //         "Pelanggaran":"Perguruan tinggi tidak memiliki statuta",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 25,
-        //         "Pelanggaran":"Perguruan tinggi tidak memiliki panduan/prosedur peralihan dan perolehan satuan kredit semester serta rekognisi pembelajaran lampau",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 26,
-        //         "Pelanggaran":"Perguruan tinggi melaporkan data yang tidak valid ke PDDIKTI",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 27,
-        //         "Pelanggaran":"Perguruan tinggi yang menyelenggarakan kegiatan akademik yang tidak sesuai dengan seluruh Standar Nasional Pendidikan Tinggi",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 28,
-        //         "Pelanggaran":"Badan Penyelenggara tidak memberikan gaji pokok serta tunjangan kepada Dosen dan tenaga kependidikan sesuai dengan ketentuan peraturan perundang-undangan",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 29,
-        //         "Pelanggaran":"Perguruan tinggi dan/atau Program Studi yang tidak terakreditasi mengeluarkan gelar akademik, gelar vokasi, dan/atau gelar profesi",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Penghentian bantuan keuangan, hibah, dan/atau bentuk bantuan lain yang diperuntukkan bagi perguruan tinggi",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 30,
-        //         "Pelanggaran":"Perguruan tinggi dan/atau Program Studi memberikan ijazah, gelar akademik, gelar vokasi, dan/atau gelar profesi kepada orang yang tidak berhak",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Penghentian layanan Pemerintah Pusat bagi perguruan tinggi",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 31,
-        //         "Pelanggaran":"Perguruan tinggi tidak mengusulkan akreditasi ulang Program Studi sebagaimana ditentukan dalam peraturan perundang-undangan",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Penghentian penerimaan Mahasiswa baru",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 32,
-        //         "Pelanggaran":"Perguruan tinggi lembaga negara lain yang menyelenggarakan pendidikan di wilayah Negara Kesatuan Republik Indonesia yang tidak sesuai dengan ketentuan peraturan perundang-undangan",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Larangan melakukan wisuda",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 33,
-        //         "Pelanggaran":"Perguruan tinggi melakukan penerimaan Mahasiswa baru dengan tujuan komersial",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Penghentian proses usul pembukaan Program Studi baru",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 34,
-        //         "Pelanggaran":"Pengelolaan perguruan tinggi tidak berprinsip nirlaba",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 35,
-        //         "Pelanggaran":"Perguruan tinggi dan/atau Badan Penyelenggara melakukan perubahan nama perguruan tinggi, nama dan/atau bentuk Badan Penyelenggara, dan/atau lokasi Kampus Utama PTS tanpa izin dari Menteri",
-        //         "Sangsi":"Pencabutan izin Program Studi",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 36,
-        //         "Pelanggaran":"Perguruan tinggi menyelenggarakan Program Studi tanpa izin dari Menteri",
-        //         "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 37,
-        //         "Pelanggaran":"Perguruan tinggi menyelenggarakan PJJ tanpa izin dari Menteri",
-        //         "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 38,
-        //         "Pelanggaran":"Perguruan tinggi dan/atau Program Studi tidak lagi memenuhi syarat pendirian perguruan tinggi dan/atau pembukaan Program Studi",
-        //         "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 39,
-        //         "Pelanggaran":"Terjadi sengketa",
-        //         "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     }
-        // ]
-    }
-
-    toggleDD = () => this.setState({
-        dropdownOpen: !this.state.dropdownOpen
-    })
-
-    toggleDDUpload = () => this.setState({
-        dropdownOpenUpload: !this.state.dropdownOpenUpload
-    })
-
-    toggleTimeline = e => {
-        this.setState({
-            timelineAlt: e.target.checked
-        })
-    }
-
-    // // handle particular changes on each checkbox
-    // onHandleChange(listName,index) {
-      
-    //     //set state to checkbox and data in promise mode
-    //     this.setState({
-    //         [listName]: this.state[listName].map(
-    //                     (item, i) => (
-                            
-    //                             index !== i ? 
-    //                             item : {...item, checked: !this.state[listName][index].checked}
-    //                         ) 
-    //                 )
-    //     });
-
-
-
-    // }
-
-
-    // state = {
-    //     location: { lat: 33.7906731, lng: -117.8357194 },
-    //     customStyle: [{featureType:'water',stylers:[{visibility:'on'},{color:'#bdd1f9'}]},{featureType:'all',elementType:'labels.text.fill',stylers:[{color:'#334165'}]},{featureType:'landscape',stylers:[{color:'#e9ebf1'}]},{featureType:'road.highway',elementType:'geometry',stylers:[{color:'#c5c6c6'}]},{featureType:'road.arterial',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'transit',elementType:'geometry',stylers:[{color:'#d8dbe0'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#cfd5e0'}]},{featureType:'administrative',stylers:[{visibility:'on'},{lightness:33}]},{featureType:'poi.park',elementType:'labels',stylers:[{visibility:'on'},{lightness:20}]},{featureType:'road',stylers:[{color:'#d8dbe0',lightness:20}]}]
-    // }
-
-    
-    // renderTableData() {
-    //     //const dataTable = this.props.data;
-    //     //if (dataTable === true ) {
-
-
-    //         return this.state.tbljenisPelanggaran.map((jp,index) => {
-            
-    //         return (
-    //                 // <tr>
-    //                 //     <td>
-    //                 //         <label>{index+1}</label>
-    //                 //     </td>
-    //                 //     <td>
-    //                 //         <div className="media align-items-center">
-    //                 //             <a className="mr-3" href="">
-    //                 //                 <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy"/>
-    //                 //             </a>
-    //                 //             <div className="media-body d-flex">
-    //                 //                 <div>
-    //                 //                     <h4 className="m-0">{pt.nama}</h4>
-    //                 //                     <small className="text-muted">{pt.sk_pendirian} - {pt.website} - {pt.email}</small>
-    //                 //                     <p>{pt.alamat.jalan}</p>
-    //                 //                 </div>
-    //                 //                 <div className="ml-auto">
-    //                 //                     <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button>
-    //                 //                 </div>
-    //                 //             </div>
-    //                 //         </div>
-    //                 //     </td>
-    //                 // </tr>
-    //             <tr>
-    //                 <td><label>{index+1}</label></td>
-    //                 <td>
-    //                     <div className="media align-items-center">
-    //                         <div className="media-body d-flex">
-    //                             <div>
-                                    
-    //                                 <p>{jp.Pelanggaran}</p>
-    //                                 <p>TMT : {jp.TMTBulan} Bulan</p>
-    //                                 <p>Level Pelanggaran : {jp.LabelSangsi}</p>
-                                    
-    //                             </div>
-    //                         </div>
-    //                     </div>
-    //                 </td>
-    //                 <td>
-    //                     <div className="media align-items-center">
-    //                         <div className="media-body d-flex">
-    //                             <div>
-    //                                 <p>{jp.Sangsi}</p>
-    //                                 <p>Keterangan : {jp.KeteranganSangsi}</p>
-    //                             </div>
-    //                         </div>
-    //                     </div>
-    //                 </td>
-    //                 <td>
-    //                     <div className="checkbox c-checkbox">
-    //                         <label>
-    //                             {/* <input type="checkbox" checked={this.state.listA[index].checked} onChange={e => this.handleChange('listA', index)}/> */}
-    //                             <input 
-    //                                     //name="cb"{jp.idPelanggaran}
-    //                                     type="checkbox"
-    //                                     // checked={
-    //                                     //     jp.checked=true
-    //                                     // } 
-    //                                     checked={this.state.tbljenisPelanggaran[jp.idPelanggaran].checked}
-    //                                     //{this.state.listA[0].checked}
-    //                                     onChange={
-    //                                         e => this.onHandleChange('tbljenisPelanggaran',jp.idPelanggaran)
-    //                                     }
-    //                             />
-    //                             <span className="fa fa-check"></span>
-    //                         </label>
-    //                     </div>
-    //                 </td>
-    //              </tr>
-    //         )
-    //         })
-    //     //}
-    //  }
-
-/*     handleApplyClick = () => {
-
-        const _noSangsi = document.getElementById('noSangsi').value
-        
-        const _hisJP=[];
-        //Get data for filter by checked
-        this.state.tbljenisPelanggaran.filter(
-            _jp => _jp.checked == true
-        ).map(selectedPelanggaran => (
-            _hisJP.push(selectedPelanggaran)
-        ));
-        
-
-        this.state.hisJenisPelanggaran.push(
-            {
-                "noSangsi":_noSangsi,
-                "pelanggaran":_hisJP
-            }
-        )
-
-        console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran)
-    } */
-
-    render() {
-
-        const { selectedOptionMulti } = this.state;
-
-        return (
-            <ContentWrapper unwrap>
-                <div className="bg-cover" style={{backgroundImage: 'url(/static/img/profile-bg.png)'}}>
-                    <div className="p-4 text-center" style={styleHeaderText} >
-                        <img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar"/>
-                        <h3 className="m-0">{this.props.data.nama}</h3>
-                        <p>{this.props.data.sk_pendirian}</p>
-                        <p>{this.props.data.alamat.jalan}</p>
-                    </div>
-                </div>
-                {/* <div className="text-center bg-gray-dark p-3 mb-4">
-                    <Row>
-                        <Col xs="4" className="br">
-                            <h3 className="m-0">400</h3>
-                            <p className="m-0">
-                                <span className="d-none d-md-inline">Profile</span>
-                                <span>Views</span>
-                            </p>
-                        </Col>
-                        <Col xs="4" className="br">
-                            <h3 className="m-0">2000</h3>
-                            <p className="m-0">Likes</p>
-                        </Col>
-                        <Col xs="4">
-                            <h3 className="m-0">100</h3>
-                            <p className="m-0">Following</p>
-                        </Col>
-                    </Row>
-                </div> */}
-                {/* START card */}
-                <div className="p-3">
-                    {/* <Card className="card-default">
-                        <CardHeader> */}
-                                            {/* START panel tab */}
-                {/* <div className="card card-transparent"> */}
-                    <Nav tabs justified>
-                        <NavItem>
-                            <NavLink className={ this.state.activeTab === 'tasks' ? 'active':'' }
-                                onClick={() => { this.toggleTab('tasks'); }}
-                            >
-                                <em className="far fa-clock fa-fw"></em> History Jenis Pelanggaran
-                            </NavLink>
-                        </NavItem>
-                        {/* <NavItem>
-                            <NavLink className={ this.state.activeTab === 'trans' ? 'active':'' }
-                                onClick={() => { this.toggleTab('trans'); }}
-                            >
-                                <em className="fas fa-info-circle"></em> Action Jenis Pelanggaran
-                            </NavLink>
-                        </NavItem> */}
-                        <NavItem>
-                            <NavLink className={ this.state.activeTab === 'wizard' ? 'active':'' }
-                                onClick={() => { this.toggleTab('wizard'); }}
-                            >
-                                <em className="fas fa-info-circle"></em> Action Jenis Pelanggaran
-                            </NavLink>
-                        </NavItem>
-                    </Nav>
-
-                    
-                    <TabContent activeTab={this.state.activeTab} className="bg-white p-0">
-                        <TabPane tabId="tasks">
-                            <div className="p-3">
-                                {/* START card */}
-                                <Card className="card-default">
-                                    <CardHeader>Daftar Pelanggaran</CardHeader>
-                                    {/* START table-responsive */}
-                                    <Table striped bordered hover responsive>
-                                        <thead>
-                                            <tr>
-                                                <th>ID Laporan</th>
-                                                <th>UUID Pelanggaran</th>
-                                                <th>Progres</th>
-                                                <th>Aktivitas Terakhir</th>
-                                                <th></th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr>
-                                                <td>
-                                                    {/* <div className="ml-auto">ABCDEFGH012345</div> */}
-                                                    <div className="d-flex align-items-center mb-3">BI:54678</div>
-                                                </td>
-                                                <td>
-                                                    {/* <div className="ml-auto">ABCDEFGH012345</div> */}
-                                                    <div className="d-flex align-items-center mb-3">ABCDEFGH012345</div>
-                                                </td>
-                                                <td>
-                                                    <div className="progress progress-sm">
-                                                        <div className="progress-bar progress-bar-striped bg-success" role="progressbar" style={{width: '10%'}}>
-                                                            {/* <span className="sr-only">80% Complete</span> */}
-                                                            {/* <div className="radial-bar radial-bar-50 radial-bar-xs" data-label="50%"></div> */}
-                                                        </div>
-                                                    </div>
-                                                </td>
-                                                <td>
-                                                    <div className="d-flex align-items-center mb-3">05/05/2021</div>
-                                                    {/* <div className="ml-auto">05/05/2021</div> */}
-                                                </td>
-                                                <td>
-                                                    <div className="d-flex align-items-center mb-3">
-                                                        <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>Lanjutkan</Button>
-                                                    </div>
-                                                </td>
-
-                                            </tr>
-                                           
-                                        </tbody>
-                                    </Table>
-                                    {/* END table-responsive */}
-                                </Card>
-                                {/* END card */}
-                                                            
-                            </div>
-                        </TabPane>
-                        
-                        <TabPane tabId="wizard" className="p-3">
-                            <FormWizardVertical />
-                        </TabPane>
-                    </TabContent>
-                {/* </div> */}
-                {/* END panel tab */}
-                    {/* </CardHeader>
-                </Card> */}
-                </div>
-                {/* START card */}
-                <div className="p-3">
-                    <Row>
-                        <Col xl="9">
-                            <ul className="timeline">
-                                <li className="timeline-separator" data-datetime="Today"></li>
-                                <li className="timeline-inverted">
-                                    <div className="timeline-badge info">
-                                        <em className="far fa-file"></em>
-                                    </div>
-                                    <div className="timeline-card">
-                                        <div className="popover right">
-                                            <div className="arrow"></div>
-                                            <div className="popover-body">
-                                                <div className="d-flex align-items-center mb-3">
-                                                    <img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar"/>
-                                                    <p className="m-0">
-                                                        {/* <a className="text-muted" href=""> */}
-                                                            <strong>Admin</strong>
-                                                        {/* </a> */}
-                                                        <br/>Upload Bukti Perbaikan 
-                                                        {/* <em className="fa fa-paperclip"></em> */}
-                                                        <Dropdown isOpen={this.state.dropdownOpenUpload} toggle={this.toggleDDUpload}>
-                                                            {/* <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status */}
-                                                                {/* <p className="m-0"><br/> Upload Bukti Perbaikan </p> */}
-                                                                <DropdownToggle caret color="link">
-                                                                    <em className="fa fa-paperclip"></em>
-                                                                </DropdownToggle>
-                                                                <DropdownMenu className="animated fadeInUpShort">
-                                                                    <DropdownItem>
-                                                                        <em className="fa fa-lock mr-2"></em>Upload
-                                                                    </DropdownItem>
-                                                                </DropdownMenu>
-                                                            </Dropdown>
-                                                        </p> 
-                                                        {/* <li> */}
-
-
-                                                        {/* </li> */}
-                                                </div>
-                                                {/* <a href="">
-                                                    <img className="img-fluid img-thumbnail" src="/static/img/mockup.png" alt="Img"/>
-                                                </a> */}
-                                                <p className="text-muted my-2">3 Logs</p>
-                                                <div className="media bb p-2">
-                                                    <img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar"/>
-                                                    <div className="media-body">
-                                                        <p className="m-0">
-                                                            <a href="">
-                                                                <strong>Universitas Username</strong>
-                                                            </a>
-                                                        </p>
-                                                        <div className="text-sm text-muted">Uploaded Document File BBB.pdf</div>
-                                                    </div>
-                                                    <small className="ml-auto text-muted">12m ago</small>
-                                                </div>
-                                                <div className="media bb p-2">
-                                                    <img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar"/>
-                                                    <div className="media-body">
-                                                        <p className="m-0">
-                                                            <a href="">
-                                                                <strong>Universitas Username</strong>
-                                                            </a>
-                                                        </p>
-                                                        <div className="text-sm text-muted">Uploaded Document File CCC.pdf</div>
-                                                    </div>
-                                                    <small className="ml-auto text-muted">30m ago</small>
-                                                </div>
-                                                <div className="media bb p-2">
-                                                    <img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar"/>
-                                                    <div className="media-body">
-                                                        <p className="m-0">
-                                                            <a href="">
-                                                                <strong>Universitas Username</strong>
-                                                            </a>
-                                                        </p>
-                                                        <div className="text-sm text-muted">Uploaded Document File AAA.pdf</div>
-                                                    </div>
-                                                    <small className="ml-auto text-muted">30m ago</small>
-                                                </div>
-                                                {/* <form className="mt-2" method="post" action="#">
-                                                    <textarea className="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
-                                                </form> */}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li>
-                                    <div className="timeline-badge danger">
-                                        <em className="fas fa-ticket-alt"></em>
-                                    </div>
-                                    <div className="timeline-card">
-                                        <div className="popover left">
-                                            <div className="arrow"></div>
-                                            <div className="popover-body">
-                                                <div className="d-flex align-items-center mb-3">
-                                                    <img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar"/>
-                                                    <p className="m-0">
-                                                        {/* <a className="text-muted" href=""> */}
-                                                            <strong>Admin</strong>
-                                                        {/* </a> */}
-                                                        <br/>opened project
-                                                        <a className="ml-2" href="">#548795</a>
-                                                    </p>
-                                                </div>
-                                                <p>
-                                                    <em>&mdash; Project description sample</em>
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li className="timeline-end">
-                                    <a className="timeline-badge">
-                                        <em className="fa fa-plus"></em>
-                                    </a>
-                                </li>
-                            </ul>
-                        </Col>
-                        <Col xl="3">
-                            <div className="card card-default">
-                                <div className="card-body">
-                                    <div className="text-center">
-                                        <h3 className="mt-0">{this.props.data.nama}</h3>
-                                        <p>{this.props.data.sk_pendirian}</p>
-                                    </div>
-                                    <hr/>
-                                    <ul className="list-unstyled px-4">
-                                        <li>
-                                            <em className="fa fa-globe fa-fw mr-3"></em>{this.props.data.website}
-                                        </li>
-                                        <li>
-                                            <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
-                                        </li>
-                                        {/* <li>
-                                            <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDD}>
-                                            <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status
-                                            
-                                                <DropdownToggle caret color="link">
-                                                </DropdownToggle>
-                                                <DropdownMenu className="animated fadeInUpShort">
-                                                    <DropdownItem>
-                                                        <em className="fa fa-lock mr-2"></em>Status Sample 1
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-lock-open mr-2"></em>Status Sample 2
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-low-vision mr-2"></em>Status Sample 3
-                                                    </DropdownItem>
-                                                </DropdownMenu>
-                                            </Dropdown>
-                                        </li> */}
-                                        {/* <li>
-                                            <em className="fa fa-graduation-cap fa-fw mr-3"></em>
-                                            <div class="dropdown">
-                                                <button type="button" aria-haspopup="true" aria-expanded="false" class="btn btn-secondary">Status
-                                                </button>
-                                                <div tabindex="-1" role="menu" aria-hidden="true" class="animated bounceInDown dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Action</button><button type="button" tabindex="0" class="dropdown-item">Another action</button><button type="button" tabindex="0" class="dropdown-item active">Active Item</button><div tabindex="-1" class="dropdown-divider"></div><button type="button" tabindex="0" class="dropdown-item">Separated link</button></div>
-                                            </div>
-                                        </li> */}
-                                       {/* <li> */}
-                                        {/* <em className="fa fa-graduation-cap fa-fw mr-3"></em> */}
-                                                {/* <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDD}>
-                                                <DropdownToggle caret color="link">
-                                                    <em className="fa fa-paperclip">Status</em>
-                                                </DropdownToggle>
-                                                <DropdownMenu className="animated fadeInUpShort">
-                                                    <DropdownItem>
-                                                        <em className="fa fa-download mr-2"></em>Download
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-share mr-2"></em>Send to
-                                                    </DropdownItem>
-                                                    <DropdownItem>
-                                                        <em className="fa fa-times mr-2"></em>Delete
-                                                    </DropdownItem>
-                                                </DropdownMenu>
-                                            </Dropdown> */}
-                                        {/* </li> */}
-                                    </ul>
-                                </div>
-                            </div>
-                            
-                        </Col>
-                    </Row>
-                </div>
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default Profile;
-

pages/app/profile.wizard.vertical copy.js

@@ -1,636 +0,0 @@
-import React, { Component } from 'react';
-import {
-    Card,
-    CardHeader,
-    CardFooter,
-    CardBody,
-    TabContent,
-    FormGroup,
-    TabPane,
-    Input,
-    Nav,
-    NavItem,
-    NavLink,
-    Button,
-    Row,
-    Col,
-    Table,
-    CustomInput
-} from 'reactstrap';
-import classnames from 'classnames';
-
-const stepNavitemStyle = {
-    backgroundColor: '#fcfcfc'
-};
-
-class FormWizardVertical extends Component {
-    state = {
-        activeStep: '1',
-        hisJenisPelanggaran:[],
-        tbljenisPelanggaran:[
-            {
-                "idPelanggaran": 0,
-                "Pelanggaran":"Tidak Ada",
-                "Sangsi":"Tanpa Sangsi",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":0,
-                "LabelSangsi":"Tidak ada",
-                "checked":false,
-                "TMTBulan":0
-            },
-            {
-                "idPelanggaran": 1,
-                "Pelanggaran":"Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pelaksanaan kebebasan akademik,kebebasan mimbar akademik, dan otonomi keilmuan di perguruan tinggi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 2,
-                "Pelanggaran":"Perguruan tinggi tidak memuat mata kuliah agama,Pancasila, kewarganegaraan, dan bahasa Indonesia dalam kurikulumnya",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 3,
-                "Pelanggaran":"Perguruan tinggi tidak menggunakan bahasa Indonesia sebagai bahasa pengantar utama",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 4,
-                "Pelanggaran":"Perguruan tinggi tidak menyebarluaskan hasil penelitian dengan cara diseminarkan, dipublikasikan, dan/atau dipatenkan, kecuali hasil penelitian yang bersifat rahasia, mengganggu, dan/atau membahayakan kepentingan umum",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 5,
-                "Pelanggaran":"PTN tidak menerima calon Mahasiswa yang telah memenuhi persyaratan akademik dan lolos seleksi penerimaan Mahasiswa secara nasional",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 6,
-                "Pelanggaran":"PTN tidak mencari dan menjaring calon Mahasiswa yang memiliki potensi akademik tinggi, tetapi kurang mampu secara ekonomi dan calon Mahasiswa dari daerah terdepan, terluar, dan tertinggal untuk diterima paling sedikit 20% (dua puluh persen) dari seluruh Mahasiswa baru yang diterima dan tersebar pada semua Program Studi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 7,
-                "Pelanggaran":"Perguruan tinggi tidak memenuhi hak Mahasiswa yang kurang mampu secara ekonomi untuk dapat menyelesaikan studinya sesuai dengan peraturan akademik",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 8,
-                "Pelanggaran":"Perguruan tinggi memberi gelar yang tidak menggunakan bahasa Indonesia",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 9,
-                "Pelanggaran":"Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pengelolaan di bidang non akademik",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 10,
-                "Pelanggaran":"Perguruan tinggi tidak mengumumkan ringkasan laporan tahunan kepada masyarakat",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 11,
-                "Pelanggaran":"Perguruan tinggi memiliki Dosen tetap kurang dari 5 (lima) orang untuk setiap Program Studi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 12,
-                "Pelanggaran":"Perguruan tinggi tidak memenuh  nisbah Dosen dan Mahasiswa sesuai dengan ketentuan peraturan perundang-undangan",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 13,
-                "Pelanggaran":"Perguruan tinggi tidak melakukan pelaporan secara berkala ke pangkalan data Pendidikan Tinggi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 14,
-                "Pelanggaran":"Program sarjana memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-                "Sangsi":"Penghentian sementara bantuan biaya pendidikan dari pemerintahan pusat",
-                "KeteranganSangsi":"Berupa penundaan pemberian bantuan keuangan, hibah, dan/atau bentuk bantuan lain bagi perguruan tinggi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 15,
-                "Pelanggaran":"Program magister memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penghentian sementara penerimaan Mahasiswa baru",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 16,
-                "Pelanggaran":"Program doktor memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan proses usul pembukaan Program Studi baru",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 17,
-                "Pelanggaran":"Program diploma memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 18,
-                "Pelanggaran":"Program magister terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 19,
-                "Pelanggaran":"Program doktor terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 20,
-                "Pelanggaran":"Program profesi memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan profesi dan/atau lulusan program magister atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 21,
-                "Pelanggaran":"Program spesialis memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program spesialis dan/atau lulusan program doktor atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 22,
-                "Pelanggaran":"Perguruan tinggi tidak mencabut gelar akademik, gelar vokasi, atau gelar profesi apabila karya ilmiah yang digunakan untuk memperoleh gelar akademik, gelar vokasi, atau gelar profesi terbukti merupakan hasil plagiat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 23,
-                "Pelanggaran":"Perguruan tinggi tidak menyediakan, memfasilitasi, memiliki Sumber Belajar sesuai dengan Program Studi yang dikembangkan",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 24,
-                "Pelanggaran":"Perguruan tinggi tidak memiliki statuta",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 25,
-                "Pelanggaran":"Perguruan tinggi tidak memiliki panduan/prosedur peralihan dan perolehan satuan kredit semester serta rekognisi pembelajaran lampau",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 26,
-                "Pelanggaran":"Perguruan tinggi melaporkan data yang tidak valid ke PDDIKTI",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 27,
-                "Pelanggaran":"Perguruan tinggi yang menyelenggarakan kegiatan akademik yang tidak sesuai dengan seluruh Standar Nasional Pendidikan Tinggi",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 28,
-                "Pelanggaran":"Badan Penyelenggara tidak memberikan gaji pokok serta tunjangan kepada Dosen dan tenaga kependidikan sesuai dengan ketentuan peraturan perundang-undangan",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 29,
-                "Pelanggaran":"Perguruan tinggi dan/atau Program Studi yang tidak terakreditasi mengeluarkan gelar akademik, gelar vokasi, dan/atau gelar profesi",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian bantuan keuangan, hibah, dan/atau bentuk bantuan lain yang diperuntukkan bagi perguruan tinggi",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 30,
-                "Pelanggaran":"Perguruan tinggi dan/atau Program Studi memberikan ijazah, gelar akademik, gelar vokasi, dan/atau gelar profesi kepada orang yang tidak berhak",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian layanan Pemerintah Pusat bagi perguruan tinggi",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 31,
-                "Pelanggaran":"Perguruan tinggi tidak mengusulkan akreditasi ulang Program Studi sebagaimana ditentukan dalam peraturan perundang-undangan",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian penerimaan Mahasiswa baru",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 32,
-                "Pelanggaran":"Perguruan tinggi lembaga negara lain yang menyelenggarakan pendidikan di wilayah Negara Kesatuan Republik Indonesia yang tidak sesuai dengan ketentuan peraturan perundang-undangan",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Larangan melakukan wisuda",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 33,
-                "Pelanggaran":"Perguruan tinggi melakukan penerimaan Mahasiswa baru dengan tujuan komersial",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian proses usul pembukaan Program Studi baru",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 34,
-                "Pelanggaran":"Pengelolaan perguruan tinggi tidak berprinsip nirlaba",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 35,
-                "Pelanggaran":"Perguruan tinggi dan/atau Badan Penyelenggara melakukan perubahan nama perguruan tinggi, nama dan/atau bentuk Badan Penyelenggara, dan/atau lokasi Kampus Utama PTS tanpa izin dari Menteri",
-                "Sangsi":"Pencabutan izin Program Studi",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 36,
-                "Pelanggaran":"Perguruan tinggi menyelenggarakan Program Studi tanpa izin dari Menteri",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 37,
-                "Pelanggaran":"Perguruan tinggi menyelenggarakan PJJ tanpa izin dari Menteri",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 38,
-                "Pelanggaran":"Perguruan tinggi dan/atau Program Studi tidak lagi memenuhi syarat pendirian perguruan tinggi dan/atau pembukaan Program Studi",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 39,
-                "Pelanggaran":"Terjadi sengketa",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            }
-        ]
-    };
-
-    toggleStep = activeStep => () => {
-        if (this.state.activeStep !== activeStep) {
-            this.setState({
-                activeStep
-            });
-        }
-    };
-
-    // handle particular changes on each checkbox
-    onHandleChange(listName,index) {
-    
-        //set state to checkbox and data in promise mode
-        this.setState({
-            [listName]: this.state[listName].map(
-                        (item, i) => (
-                            
-                                index !== i ? 
-                                item : {...item, checked: !this.state[listName][index].checked}
-                            ) 
-                    )
-        });
-
-
-
-    };
-
-    // done = () => {
-    //     alert('Custom message without form submission.');
-    // };
-
-    handleApplyClick = () => {
-
-        const _noSangsi = document.getElementById('noSangsi').value
-        
-        const _hisJP=[];
-        //Get data for filter by checked
-        this.state.tbljenisPelanggaran.filter(
-            _jp => _jp.checked == true
-        ).map(selectedPelanggaran => (
-            _hisJP.push(selectedPelanggaran)
-        ));
-        
-        this.state.hisJenisPelanggaran=[];
-        this.state.hisJenisPelanggaran.push(
-            {
-                "noSangsi":_noSangsi,
-                "pelanggaran":_hisJP
-            }
-        )
-
-        console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran)
-    }
-
-    renderTableData() {
-
-     };
-
-    render() {
-        return (
-            <Card className="card-default">
-                {/* <CardHeader>Vertical Example (without validation)</CardHeader> */}
-                <CardBody>
-                    <Row>
-                        <Col xs="4">
-                            <Nav pills vertical={true}>
-                                <NavItem style={stepNavitemStyle}>
-                                    <NavLink
-                                        tag="div"
-                                        className={classnames({
-                                            active: this.state.activeStep === '1'
-                                        })}
-                                        onClick={this.toggleStep('1')}
-                                    >
-                                        <h4 className="text-left my-3">1. Perbaikan</h4>
-                                    </NavLink>
-                                </NavItem>
-                                <NavItem style={stepNavitemStyle}>
-                                    <NavLink
-                                        tag="div"
-                                        className={classnames({
-                                            active: this.state.activeStep === '2'
-                                        })}
-                                        onClick={this.toggleStep('2')}
-                                    >
-                                        <h4 className="text-left my-3">2. Sanggahan</h4>
-                                    </NavLink>
-                                </NavItem>
-                            </Nav>
-                        </Col>
-                        <Col xs="8">
-                            <TabContent activeTab={this.state.activeStep} className="border-0">
-
-                                <TabPane tabId="1">
-                                    {/* <div className="pt-3 mb-3"> */}
-                                    <div>
-                                        {/* START card */}
-                                        <Card className="card-default">
-                                            <CardHeader>
-                                                <label>Form Perbaikan Sanksi</label>    
-                                            </CardHeader>
-                                            <CardBody>
-                                                <form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-                                                    {/* <fieldset> */}
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Nomor Sanksi</label>
-                                                        <div className="col-md-10">
-                                                            <Input type="text"/>
-                                                            <span className="form-text">Nomor sanksi akan digenerate otomatis dari sistem</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    {/* </fieldset> */}
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Keterangan Perbaikan</label>
-                                                        <div className="col-md-10">
-                                                            <Input type="textarea"/>
-                                                            {/* <textarea class="form-control" id="inputContact6" row="3">Some nice Street, 1234</textarea> */}
-                                                            <span className="form-text">Deskripsi perbaikan minimum karakter 50 maksimum 200 karakter</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Upload File Pendukung</label>
-                                                        <div className="col-md-10">
-                                                            {/* <input type="file" multiple name="customFile" class="custom-file-input"></input> */}
-                                                            <CustomInput
-                                                                type="file" multiple
-                                                                id="exampleCustomFileBrowser"
-                                                                name="customFile"
-                                                            />
-                                                            <span className="form-text">Multiple files upload</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    <FormGroup row>
-                                                        <div className="col-xl-10">
-                                                            <button className="btn btn-sm btn-primary" type="submit">Submit Perbaikan</button>
-                                                        </div>
-                                                    </FormGroup>
-                                                </form>
-                                            </CardBody>
-                                        </Card>
-                                        {/* END card */}
-                                    </div>
-                                </TabPane>
-                                <TabPane tabId="2">
-                                    {/* <div className="pt-3 mb-3"> */}
-                                    <div>   
-                                        {/* START card */}
-                                        <Card className="card-default">
-                                            <CardHeader>
-                                                <label>Form Sanggahan Sanksi</label>    
-                                            </CardHeader>
-                                            <CardBody>
-                                                <form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-                                                    {/* <fieldset> */}
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Nomor Sanksi</label>
-                                                        <div className="col-md-10">
-                                                            <Input type="text"/>
-                                                            <span className="form-text">Nomor sanksi akan digenerate otomatis dari sistem</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    {/* </fieldset> */}
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Keterangan Sanggahan</label>
-                                                        <div className="col-md-10">
-                                                            <Input type="textarea"/>
-                                                            {/* <textarea class="form-control" id="inputContact6" row="3">Some nice Street, 1234</textarea> */}
-                                                            <span className="form-text">Deskripsi Sanggahan minimum karakter 50 maksimum 200 karakter</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Upload File Pendukung</label>
-                                                        <div className="col-md-10">
-                                                            {/* <input type="file" multiple name="customFile" class="custom-file-input"></input> */}
-                                                            <CustomInput
-                                                                type="file" multiple
-                                                                id="exampleCustomFileBrowser"
-                                                                name="customFile"
-                                                            />
-                                                            <span className="form-text">Multiple files upload</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    <FormGroup row>
-                                                        <div className="col-xl-10">
-                                                            <button className="btn btn-sm btn-primary" type="submit">Submit Sanggahan</button>
-                                                        </div>
-                                                    </FormGroup>
-                                                </form>
-                                            </CardBody>
-                                        </Card>
-                                        {/* END card */}
-                                    </div>
-
-
-                                </TabPane>
-                                
-                            </TabContent>
-                        </Col>
-                    </Row>
-                </CardBody>
-            </Card>
-        );
-    }
-}
-
-export default FormWizardVertical;

pages/app/pt.sanksi.js

@@ -1,887 +0,0 @@
-import React, { Component } from 'react';
-//import { withRouter } from 'next/router'
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Card, Button, CardHeader, CardFooter, Table, Nav, NavItem, NavLink, TabContent, TabPane, Pagination, PaginationItem, PaginationLink, ListGroup, ListGroupItem, Dropdown, DropdownMenu, DropdownToggle, DropdownItem,FormGroup  } from 'reactstrap';
-//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-
-// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import Select from 'react-select';
-import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
-
-import { GetServerSideProps, NextPage } from 'next';
-import ErrorPage from 'next/error';
-import fetch from 'node-fetch';
-
-import https from 'https';
-
-const containerStyle = {
-    width: '100%',
-    height: '155px'
-};
-
-import FormWizardVertical from './pt.wizard.vertical.js';
-
-var jenisPelanggaran = [];
-
-//const qpt_id = {};
-
-//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252
-
-// Demo with custom style
-const DemoMapCustomStyle = props => (
-        <GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
-        <Marker position={props.location} />
-        </GoogleMap>
-)
-
-const styleHeaderText = {
-    color: 'brown'
-}
-
-class Profile extends Component {
-
-    toggleTab = tab => {
-        if (this.state.activeTab !== tab) {
-            this.setState({
-                activeTab: tab
-            });
-        }
-    }
-
-    
-    static async getInitialProps({ query }) {
-
-        
-
-        const httpsAgent = new https.Agent({
-            rejectUnauthorized: false,
-          });
-        
-          //console.log('post agent : ');
-
-          
-         //const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/707C3895-B546-4DA5-A6A7-EFE7461A7C7E', { 
-         //const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/'+query.ptId, { 
-        //     method: 'get', 
-        //     headers: new Headers({
-        //       'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5', 
-        //       'Accept': 'application/json'
-        //     }),
-        //     agent: httpsAgent
-        //   }
-        //  )
-
-        //console.log('res : ', res);
-         
-        //const json = await res.json();
-        const json = [
-            {
-                "id": "0BCE4DB7-B207-445D-8D03-0C54B7688252",
-                "kode": "031031",
-                "kode_satker": null,
-                "nama": "Universitas Satyagama",
-                "nama_singkat": "USG",
-                "sk_pendirian": "0742/O/1990",
-                "tgl_sk_pendirian": "1990-12-22",
-                "sk_operasional": null,
-                "tgl_sk_operasional": null,
-                "status": "A",
-                "alamat": {
-                    "jalan": "Jalan Kamal Raya No 2-A Cengkareng",
-                    "rt": null,
-                    "rw": null,
-                    "dusun": null,
-                    "kelurahan": "-",
-                    "kode_pos": "11730",
-                    "kab_kota": {
-                        "id": "016200",
-                        "nama": "Kota Jakarta Barat"
-                    }
-                },
-                "propinsi": {
-                    "id": "010000",
-                    "nama": "Prov. D.K.I. Jakarta"
-                },
-                "telepon": "(021) 5452377-78",
-                "faksimile": "(021) 54391325",
-                "website": "www.satyagama.ac.id",
-                "email": "info@satyagama.ac.id",
-                "status_milik": {
-                    "id": "3",
-                    "nama": "Yayasan"
-                },
-                "pembina": {
-                    "id": "728989DD-251E-4516-BE2C-BA17A93A5C51",
-                    "nama": "LLDIKTI III"
-                },
-                "bentuk_pendidikan": {
-                    "id": "23",
-                    "nama": "Universitas"
-                },
-                "last_update": "2021-12-08",
-                "negara": {
-                    "id": "ID",
-                    "nama": "Indonesia"
-                },
-                "pimpinan": {
-                    "id": "D3D20B3D-0FBE-4706-8A70-67C4C09C8FBE",
-                    "nama": "DEWI SULISTYANI",
-                    "tmt_sk_pengangkatan": "2021-03-17",
-                    "tst_sk_pengangkatan": "2025-03-17"
-                }
-            }
-        ];
-        console.log('json : ', json);
-        // const json = 
-        //                 {
-        //                     "id": "0BCE4DB7-B207-445D-8D03-0C54B7688252",
-        //                     "kode": "031031",
-        //                     "kode_satker": null,
-        //                     "nama": "Universitas Satyagama",
-        //                     "nama_singkat": "USG",
-        //                     "sk_pendirian": "0742/O/1990",
-        //                     "tgl_sk_pendirian": "1990-12-22",
-        //                     "sk_operasional": null,
-        //                     "tgl_sk_operasional": null,
-        //                     "status": "N",
-        //                     "alamat": {
-        //                     "jalan": "Jalan Kamal Raya No 2-A Cengkareng",
-        //                     "rt": null,
-        //                     "rw": null,
-        //                     "dusun": null,
-        //                     "kelurahan": "-",
-        //                     "kode_pos": "11730",
-        //                     "kab_kota": {
-        //                         "id": "016200",
-        //                         "nama": "Kota Jakarta Barat"
-        //                     }
-        //                     },
-        //                     "propinsi": {
-        //                     "id": "010000",
-        //                     "nama": "Prov. D.K.I. Jakarta"
-        //                     },
-        //                     "telepon": "(021) 5452377-78",
-        //                     "faksimile": "(021) 54391325",
-        //                     "website": "www.satyagama.ac.id",
-        //                     "email": "info@satyagama.ac.id",
-        //                     "status_milik": {
-        //                     "id": "3",
-        //                     "nama": "Yayasan"
-        //                     },
-        //                     "pembina": {
-        //                     "id": "728989DD-251E-4516-BE2C-BA17A93A5C51",
-        //                     "nama": "LLDIKTI III"
-        //                     },
-        //                     "bentuk_pendidikan": {
-        //                     "id": "23",
-        //                     "nama": "Universitas"
-        //                     },
-        //                     "last_update": "2021-08-22",
-        //                     "negara": {
-        //                     "id": "ID",
-        //                     "nama": "Indonesia"
-        //                     }
-        //             }
-
-
-
-        return { data: json[0] }
-      }
-
-    state = {
-        dropdownOpen: false,
-        dropdownOpenUpload: false,
-        timelineAlt: false,
-        location: { lat: 33.7906731, lng: -117.8357194 },
-        customStyle: [{featureType:'water',stylers:[{visibility:'on'},{color:'#bdd1f9'}]},{featureType:'all',elementType:'labels.text.fill',stylers:[{color:'#334165'}]},{featureType:'landscape',stylers:[{color:'#e9ebf1'}]},{featureType:'road.highway',elementType:'geometry',stylers:[{color:'#c5c6c6'}]},{featureType:'road.arterial',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'transit',elementType:'geometry',stylers:[{color:'#d8dbe0'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#cfd5e0'}]},{featureType:'administrative',stylers:[{visibility:'on'},{lightness:33}]},{featureType:'poi.park',elementType:'labels',stylers:[{visibility:'on'},{lightness:20}]},{featureType:'road',stylers:[{color:'#d8dbe0',lightness:20}]}],
-        listA: [],
-        //isChecked:true,
-        selectedOptionMulti: [],
-        activeTab: 'tasks'
-        // hisJenisPelanggaran:[],
-        // tbljenisPelanggaran:[
-        //     {
-        //         "idPelanggaran": 0,
-        //         "Pelanggaran":"Tidak Ada",
-        //         "Sangsi":"Tanpa Sangsi",
-        //         "KeteranganSangsi":"-",
-        //         "LevelSangsi":0,
-        //         "LabelSangsi":"Tidak ada",
-        //         "checked":false,
-        //         "TMTBulan":0
-        //     },
-        //     {
-        //         "idPelanggaran": 1,
-        //         "Pelanggaran":"Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pelaksanaan kebebasan akademik,kebebasan mimbar akademik, dan otonomi keilmuan di perguruan tinggi",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"-",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 2,
-        //         "Pelanggaran":"Perguruan tinggi tidak memuat mata kuliah agama,Pancasila, kewarganegaraan, dan bahasa Indonesia dalam kurikulumnya",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"-",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 3,
-        //         "Pelanggaran":"Perguruan tinggi tidak menggunakan bahasa Indonesia sebagai bahasa pengantar utama",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"-",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 4,
-        //         "Pelanggaran":"Perguruan tinggi tidak menyebarluaskan hasil penelitian dengan cara diseminarkan, dipublikasikan, dan/atau dipatenkan, kecuali hasil penelitian yang bersifat rahasia, mengganggu, dan/atau membahayakan kepentingan umum",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 5,
-        //         "Pelanggaran":"PTN tidak menerima calon Mahasiswa yang telah memenuhi persyaratan akademik dan lolos seleksi penerimaan Mahasiswa secara nasional",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 6,
-        //         "Pelanggaran":"PTN tidak mencari dan menjaring calon Mahasiswa yang memiliki potensi akademik tinggi, tetapi kurang mampu secara ekonomi dan calon Mahasiswa dari daerah terdepan, terluar, dan tertinggal untuk diterima paling sedikit 20% (dua puluh persen) dari seluruh Mahasiswa baru yang diterima dan tersebar pada semua Program Studi",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 7,
-        //         "Pelanggaran":"Perguruan tinggi tidak memenuhi hak Mahasiswa yang kurang mampu secara ekonomi untuk dapat menyelesaikan studinya sesuai dengan peraturan akademik",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 8,
-        //         "Pelanggaran":"Perguruan tinggi memberi gelar yang tidak menggunakan bahasa Indonesia",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 9,
-        //         "Pelanggaran":"Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pengelolaan di bidang non akademik",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 10,
-        //         "Pelanggaran":"Perguruan tinggi tidak mengumumkan ringkasan laporan tahunan kepada masyarakat",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 11,
-        //         "Pelanggaran":"Perguruan tinggi memiliki Dosen tetap kurang dari 5 (lima) orang untuk setiap Program Studi",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 12,
-        //         "Pelanggaran":"Perguruan tinggi tidak memenuh  nisbah Dosen dan Mahasiswa sesuai dengan ketentuan peraturan perundang-undangan",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 13,
-        //         "Pelanggaran":"Perguruan tinggi tidak melakukan pelaporan secara berkala ke pangkalan data Pendidikan Tinggi",
-        //         "Sangsi":"Peringatan Tertulis",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":1,
-        //         "LabelSangsi":"Ringan",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 14,
-        //         "Pelanggaran":"Program sarjana memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-        //         "Sangsi":"Penghentian sementara bantuan biaya pendidikan dari pemerintahan pusat",
-        //         "KeteranganSangsi":"Berupa penundaan pemberian bantuan keuangan, hibah, dan/atau bentuk bantuan lain bagi perguruan tinggi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 15,
-        //         "Pelanggaran":"Program magister memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penghentian sementara penerimaan Mahasiswa baru",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 16,
-        //         "Pelanggaran":"Program doktor memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan proses usul pembukaan Program Studi baru",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //          "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 17,
-        //         "Pelanggaran":"Program diploma memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 18,
-        //         "Pelanggaran":"Program magister terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 19,
-        //         "Pelanggaran":"Program doktor terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 20,
-        //         "Pelanggaran":"Program profesi memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan profesi dan/atau lulusan program magister atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 21,
-        //         "Pelanggaran":"Program spesialis memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program spesialis dan/atau lulusan program doktor atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 22,
-        //         "Pelanggaran":"Perguruan tinggi tidak mencabut gelar akademik, gelar vokasi, atau gelar profesi apabila karya ilmiah yang digunakan untuk memperoleh gelar akademik, gelar vokasi, atau gelar profesi terbukti merupakan hasil plagiat",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 23,
-        //         "Pelanggaran":"Perguruan tinggi tidak menyediakan, memfasilitasi, memiliki Sumber Belajar sesuai dengan Program Studi yang dikembangkan",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 24,
-        //         "Pelanggaran":"Perguruan tinggi tidak memiliki statuta",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 25,
-        //         "Pelanggaran":"Perguruan tinggi tidak memiliki panduan/prosedur peralihan dan perolehan satuan kredit semester serta rekognisi pembelajaran lampau",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 26,
-        //         "Pelanggaran":"Perguruan tinggi melaporkan data yang tidak valid ke PDDIKTI",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 27,
-        //         "Pelanggaran":"Perguruan tinggi yang menyelenggarakan kegiatan akademik yang tidak sesuai dengan seluruh Standar Nasional Pendidikan Tinggi",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 28,
-        //         "Pelanggaran":"Badan Penyelenggara tidak memberikan gaji pokok serta tunjangan kepada Dosen dan tenaga kependidikan sesuai dengan ketentuan peraturan perundang-undangan",
-        //         "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-        //         "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-        //         "LevelSangsi":2,
-        //         "LabelSangsi":"Sedang",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 29,
-        //         "Pelanggaran":"Perguruan tinggi dan/atau Program Studi yang tidak terakreditasi mengeluarkan gelar akademik, gelar vokasi, dan/atau gelar profesi",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Penghentian bantuan keuangan, hibah, dan/atau bentuk bantuan lain yang diperuntukkan bagi perguruan tinggi",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 30,
-        //         "Pelanggaran":"Perguruan tinggi dan/atau Program Studi memberikan ijazah, gelar akademik, gelar vokasi, dan/atau gelar profesi kepada orang yang tidak berhak",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Penghentian layanan Pemerintah Pusat bagi perguruan tinggi",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 31,
-        //         "Pelanggaran":"Perguruan tinggi tidak mengusulkan akreditasi ulang Program Studi sebagaimana ditentukan dalam peraturan perundang-undangan",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Penghentian penerimaan Mahasiswa baru",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 32,
-        //         "Pelanggaran":"Perguruan tinggi lembaga negara lain yang menyelenggarakan pendidikan di wilayah Negara Kesatuan Republik Indonesia yang tidak sesuai dengan ketentuan peraturan perundang-undangan",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Larangan melakukan wisuda",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 33,
-        //         "Pelanggaran":"Perguruan tinggi melakukan penerimaan Mahasiswa baru dengan tujuan komersial",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Penghentian proses usul pembukaan Program Studi baru",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 34,
-        //         "Pelanggaran":"Pengelolaan perguruan tinggi tidak berprinsip nirlaba",
-        //         "Sangsi":"Penghentian pembinaan",
-        //         "KeteranganSangsi":"Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 35,
-        //         "Pelanggaran":"Perguruan tinggi dan/atau Badan Penyelenggara melakukan perubahan nama perguruan tinggi, nama dan/atau bentuk Badan Penyelenggara, dan/atau lokasi Kampus Utama PTS tanpa izin dari Menteri",
-        //         "Sangsi":"Pencabutan izin Program Studi",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 36,
-        //         "Pelanggaran":"Perguruan tinggi menyelenggarakan Program Studi tanpa izin dari Menteri",
-        //         "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 37,
-        //         "Pelanggaran":"Perguruan tinggi menyelenggarakan PJJ tanpa izin dari Menteri",
-        //         "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 38,
-        //         "Pelanggaran":"Perguruan tinggi dan/atau Program Studi tidak lagi memenuhi syarat pendirian perguruan tinggi dan/atau pembukaan Program Studi",
-        //         "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     },
-        //     {
-        //         "idPelanggaran": 39,
-        //         "Pelanggaran":"Terjadi sengketa",
-        //         "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-        //         "KeteranganSangsi":"",
-        //         "LevelSangsi":3,
-        //         "LabelSangsi":"Berat",
-        //         "checked":false,
-        //         "TMTBulan":6
-        //     }
-        // ]
-    }
-
-    toggleDD = () => this.setState({
-        dropdownOpen: !this.state.dropdownOpen
-    })
-
-    toggleDDUpload = () => this.setState({
-        dropdownOpenUpload: !this.state.dropdownOpenUpload
-    })
-
-    toggleTimeline = e => {
-        this.setState({
-            timelineAlt: e.target.checked
-        })
-    }
-
-    // // handle particular changes on each checkbox
-    // onHandleChange(listName,index) {
-      
-    //     //set state to checkbox and data in promise mode
-    //     this.setState({
-    //         [listName]: this.state[listName].map(
-    //                     (item, i) => (
-                            
-    //                             index !== i ? 
-    //                             item : {...item, checked: !this.state[listName][index].checked}
-    //                         ) 
-    //                 )
-    //     });
-
-
-
-    // }
-
-
-    // state = {
-    //     location: { lat: 33.7906731, lng: -117.8357194 },
-    //     customStyle: [{featureType:'water',stylers:[{visibility:'on'},{color:'#bdd1f9'}]},{featureType:'all',elementType:'labels.text.fill',stylers:[{color:'#334165'}]},{featureType:'landscape',stylers:[{color:'#e9ebf1'}]},{featureType:'road.highway',elementType:'geometry',stylers:[{color:'#c5c6c6'}]},{featureType:'road.arterial',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'transit',elementType:'geometry',stylers:[{color:'#d8dbe0'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#cfd5e0'}]},{featureType:'administrative',stylers:[{visibility:'on'},{lightness:33}]},{featureType:'poi.park',elementType:'labels',stylers:[{visibility:'on'},{lightness:20}]},{featureType:'road',stylers:[{color:'#d8dbe0',lightness:20}]}]
-    // }
-
-    
-    // renderTableData() {
-    //     //const dataTable = this.props.data;
-    //     //if (dataTable === true ) {
-
-
-    //         return this.state.tbljenisPelanggaran.map((jp,index) => {
-            
-    //         return (
-    //                 // <tr>
-    //                 //     <td>
-    //                 //         <label>{index+1}</label>
-    //                 //     </td>
-    //                 //     <td>
-    //                 //         <div className="media align-items-center">
-    //                 //             <a className="mr-3" href="">
-    //                 //                 <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy"/>
-    //                 //             </a>
-    //                 //             <div className="media-body d-flex">
-    //                 //                 <div>
-    //                 //                     <h4 className="m-0">{pt.nama}</h4>
-    //                 //                     <small className="text-muted">{pt.sk_pendirian} - {pt.website} - {pt.email}</small>
-    //                 //                     <p>{pt.alamat.jalan}</p>
-    //                 //                 </div>
-    //                 //                 <div className="ml-auto">
-    //                 //                     <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button>
-    //                 //                 </div>
-    //                 //             </div>
-    //                 //         </div>
-    //                 //     </td>
-    //                 // </tr>
-    //             <tr>
-    //                 <td><label>{index+1}</label></td>
-    //                 <td>
-    //                     <div className="media align-items-center">
-    //                         <div className="media-body d-flex">
-    //                             <div>
-                                    
-    //                                 <p>{jp.Pelanggaran}</p>
-    //                                 <p>TMT : {jp.TMTBulan} Bulan</p>
-    //                                 <p>Level Pelanggaran : {jp.LabelSangsi}</p>
-                                    
-    //                             </div>
-    //                         </div>
-    //                     </div>
-    //                 </td>
-    //                 <td>
-    //                     <div className="media align-items-center">
-    //                         <div className="media-body d-flex">
-    //                             <div>
-    //                                 <p>{jp.Sangsi}</p>
-    //                                 <p>Keterangan : {jp.KeteranganSangsi}</p>
-    //                             </div>
-    //                         </div>
-    //                     </div>
-    //                 </td>
-    //                 <td>
-    //                     <div className="checkbox c-checkbox">
-    //                         <label>
-    //                             {/* <input type="checkbox" checked={this.state.listA[index].checked} onChange={e => this.handleChange('listA', index)}/> */}
-    //                             <input 
-    //                                     //name="cb"{jp.idPelanggaran}
-    //                                     type="checkbox"
-    //                                     // checked={
-    //                                     //     jp.checked=true
-    //                                     // } 
-    //                                     checked={this.state.tbljenisPelanggaran[jp.idPelanggaran].checked}
-    //                                     //{this.state.listA[0].checked}
-    //                                     onChange={
-    //                                         e => this.onHandleChange('tbljenisPelanggaran',jp.idPelanggaran)
-    //                                     }
-    //                             />
-    //                             <span className="fa fa-check"></span>
-    //                         </label>
-    //                     </div>
-    //                 </td>
-    //              </tr>
-    //         )
-    //         })
-    //     //}
-    //  }
-
-/*     handleApplyClick = () => {
-
-        const _noSangsi = document.getElementById('noSangsi').value
-        
-        const _hisJP=[];
-        //Get data for filter by checked
-        this.state.tbljenisPelanggaran.filter(
-            _jp => _jp.checked == true
-        ).map(selectedPelanggaran => (
-            _hisJP.push(selectedPelanggaran)
-        ));
-        
-
-        this.state.hisJenisPelanggaran.push(
-            {
-                "noSangsi":_noSangsi,
-                "pelanggaran":_hisJP
-            }
-        )
-
-        console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran)
-    } */
-
-    render() {
-
-        const { selectedOptionMulti } = this.state;
-
-        return (
-            <ContentWrapper unwrap>
-                <div className="bg-cover" style={{backgroundImage: 'url(/static/img/profile-bg.png)'}}>
-                    <div className="p-4 text-center" style={styleHeaderText} >
-                        <img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar"/>
-                        <h3 className="m-0">{this.props.data.nama}</h3>
-                        <p>{this.props.data.website}</p>
-                        <p>{this.props.data.sk_pendirian}</p>
-                        <p>{this.props.data.alamat.jalan}</p>
-                    </div>
-                </div>
-                {/* <div className="text-center bg-gray-dark p-3 mb-4">
-                    <Row>
-                        <Col xs="4" className="br">
-                            <h3 className="m-0">400</h3>
-                            <p className="m-0">
-                                <span className="d-none d-md-inline">Profile</span>
-                                <span>Views</span>
-                            </p>
-                        </Col>
-                        <Col xs="4" className="br">
-                            <h3 className="m-0">2000</h3>
-                            <p className="m-0">Likes</p>
-                        </Col>
-                        <Col xs="4">
-                            <h3 className="m-0">100</h3>
-                            <p className="m-0">Following</p>
-                        </Col>
-                    </Row>
-                </div> */}
-                {/* START card */}
-                <div className="p-3">
-                    {/* <Card className="card-default">
-                        <CardHeader> */}
-                                            {/* START panel tab */}
-                {/* <div className="card card-transparent"> */}
-                    <Nav tabs justified>
-                        <NavItem>
-                            <NavLink className={ this.state.activeTab === 'tasks' ? 'active':'' }
-                                onClick={() => { this.toggleTab('tasks'); }}
-                            >
-                                <em className="far fa-clock fa-fw"></em> Pelanggaran
-                            </NavLink>
-                        </NavItem>
-                        {/* <NavItem>
-                            <NavLink className={ this.state.activeTab === 'trans' ? 'active':'' }
-                                onClick={() => { this.toggleTab('trans'); }}
-                            >
-                                <em className="fas fa-info-circle"></em> Action Jenis Pelanggaran
-                            </NavLink>
-                        </NavItem> */}
-                        <NavItem>
-                            <NavLink className={ this.state.activeTab === 'wizard' ? 'active':'' }
-                                onClick={() => { this.toggleTab('wizard'); }}
-                            >
-                                <em className="fas fa-info-circle"></em> Perbaikan & Sanggahan
-                            </NavLink>
-                        </NavItem>
-                    </Nav>
-
-                    
-                    <TabContent activeTab={this.state.activeTab} className="bg-white p-0">
-                        <TabPane tabId="tasks">
-                            <div className="p-3">
-                                {/* START card */}
-                                <Card className="card-default">
-                                    <CardHeader>Daftar Pelanggaran</CardHeader>
-                                    {/* START table-responsive */}
-                                    <Table striped bordered hover responsive>
-                                        <thead>
-                                            <tr>
-                                                <th>ID Laporan</th>
-                                                <th>UUID Pelanggaran</th>
-                                                <th>Progres</th>
-                                                <th>Aktivitas Terakhir</th>
-                                                <th></th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr>
-                                                <td>
-                                                    {/* <div className="ml-auto">ABCDEFGH012345</div> */}
-                                                    <div className="d-flex align-items-center mb-3">BI:54678</div>
-                                                </td>
-                                                <td>
-                                                    {/* <div className="ml-auto">ABCDEFGH012345</div> */}
-                                                    <div className="d-flex align-items-center mb-3">ABCDEFGH012345</div>
-                                                </td>
-                                                <td>
-                                                    <div className="progress progress-sm">
-                                                        <div className="progress-bar progress-bar-striped bg-success" role="progressbar" style={{width: '10%'}}>
-                                                            {/* <span className="sr-only">80% Complete</span> */}
-                                                            {/* <div className="radial-bar radial-bar-50 radial-bar-xs" data-label="50%"></div> */}
-                                                        </div>
-                                                    </div>
-                                                </td>
-                                                <td>
-                                                    <div className="d-flex align-items-center mb-3">05/05/2021</div>
-                                                    {/* <div className="ml-auto">05/05/2021</div> */}
-                                                </td>
-                                                <td>
-                                                    <div className="d-flex align-items-center mb-3">
-                                                        <Button color="info" size="sm" onClick={(e) => this.toggleTab('wizard')}>Lanjutkan</Button>
-                                                        {/* <Button color="info" size="sm">Lanjutkan</Button> */}
-                                                    </div>
-                                                </td>
-
-                                            </tr>
-                                           
-                                        </tbody>
-                                    </Table>
-                                    {/* END table-responsive */}
-                                </Card>
-                                {/* END card */}
-                                                            
-                            </div>
-                        </TabPane>
-                        
-                        <TabPane tabId="wizard" className="p-3">
-                            <FormWizardVertical />
-                        </TabPane>
-                    </TabContent>
-                {/* </div> */}
-                {/* END panel tab */}
-                    {/* </CardHeader>
-                </Card> */}
-                </div>
-                {/* START card */}
-
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default Profile;
-

pages/app/pt.wizard.vertical.js

@@ -1,636 +0,0 @@
-import React, { Component } from 'react';
-import {
-    Card,
-    CardHeader,
-    CardFooter,
-    CardBody,
-    TabContent,
-    FormGroup,
-    TabPane,
-    Input,
-    Nav,
-    NavItem,
-    NavLink,
-    Button,
-    Row,
-    Col,
-    Table,
-    CustomInput
-} from 'reactstrap';
-import classnames from 'classnames';
-
-const stepNavitemStyle = {
-    backgroundColor: '#fcfcfc'
-};
-
-class FormWizardVertical extends Component {
-    state = {
-        activeStep: '1',
-        hisJenisPelanggaran:[],
-        tbljenisPelanggaran:[
-            {
-                "idPelanggaran": 0,
-                "Pelanggaran":"Tidak Ada",
-                "Sangsi":"Tanpa Sangsi",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":0,
-                "LabelSangsi":"Tidak ada",
-                "checked":false,
-                "TMTBulan":0
-            },
-            {
-                "idPelanggaran": 1,
-                "Pelanggaran":"Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pelaksanaan kebebasan akademik,kebebasan mimbar akademik, dan otonomi keilmuan di perguruan tinggi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 2,
-                "Pelanggaran":"Perguruan tinggi tidak memuat mata kuliah agama,Pancasila, kewarganegaraan, dan bahasa Indonesia dalam kurikulumnya",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 3,
-                "Pelanggaran":"Perguruan tinggi tidak menggunakan bahasa Indonesia sebagai bahasa pengantar utama",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 4,
-                "Pelanggaran":"Perguruan tinggi tidak menyebarluaskan hasil penelitian dengan cara diseminarkan, dipublikasikan, dan/atau dipatenkan, kecuali hasil penelitian yang bersifat rahasia, mengganggu, dan/atau membahayakan kepentingan umum",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 5,
-                "Pelanggaran":"PTN tidak menerima calon Mahasiswa yang telah memenuhi persyaratan akademik dan lolos seleksi penerimaan Mahasiswa secara nasional",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 6,
-                "Pelanggaran":"PTN tidak mencari dan menjaring calon Mahasiswa yang memiliki potensi akademik tinggi, tetapi kurang mampu secara ekonomi dan calon Mahasiswa dari daerah terdepan, terluar, dan tertinggal untuk diterima paling sedikit 20% (dua puluh persen) dari seluruh Mahasiswa baru yang diterima dan tersebar pada semua Program Studi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 7,
-                "Pelanggaran":"Perguruan tinggi tidak memenuhi hak Mahasiswa yang kurang mampu secara ekonomi untuk dapat menyelesaikan studinya sesuai dengan peraturan akademik",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 8,
-                "Pelanggaran":"Perguruan tinggi memberi gelar yang tidak menggunakan bahasa Indonesia",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 9,
-                "Pelanggaran":"Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pengelolaan di bidang non akademik",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 10,
-                "Pelanggaran":"Perguruan tinggi tidak mengumumkan ringkasan laporan tahunan kepada masyarakat",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 11,
-                "Pelanggaran":"Perguruan tinggi memiliki Dosen tetap kurang dari 5 (lima) orang untuk setiap Program Studi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 12,
-                "Pelanggaran":"Perguruan tinggi tidak memenuh  nisbah Dosen dan Mahasiswa sesuai dengan ketentuan peraturan perundang-undangan",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 13,
-                "Pelanggaran":"Perguruan tinggi tidak melakukan pelaporan secara berkala ke pangkalan data Pendidikan Tinggi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 14,
-                "Pelanggaran":"Program sarjana memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-                "Sangsi":"Penghentian sementara bantuan biaya pendidikan dari pemerintahan pusat",
-                "KeteranganSangsi":"Berupa penundaan pemberian bantuan keuangan, hibah, dan/atau bentuk bantuan lain bagi perguruan tinggi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 15,
-                "Pelanggaran":"Program magister memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penghentian sementara penerimaan Mahasiswa baru",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 16,
-                "Pelanggaran":"Program doktor memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan proses usul pembukaan Program Studi baru",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 17,
-                "Pelanggaran":"Program diploma memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 18,
-                "Pelanggaran":"Program magister terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 19,
-                "Pelanggaran":"Program doktor terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 20,
-                "Pelanggaran":"Program profesi memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan profesi dan/atau lulusan program magister atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 21,
-                "Pelanggaran":"Program spesialis memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program spesialis dan/atau lulusan program doktor atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 22,
-                "Pelanggaran":"Perguruan tinggi tidak mencabut gelar akademik, gelar vokasi, atau gelar profesi apabila karya ilmiah yang digunakan untuk memperoleh gelar akademik, gelar vokasi, atau gelar profesi terbukti merupakan hasil plagiat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 23,
-                "Pelanggaran":"Perguruan tinggi tidak menyediakan, memfasilitasi, memiliki Sumber Belajar sesuai dengan Program Studi yang dikembangkan",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 24,
-                "Pelanggaran":"Perguruan tinggi tidak memiliki statuta",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 25,
-                "Pelanggaran":"Perguruan tinggi tidak memiliki panduan/prosedur peralihan dan perolehan satuan kredit semester serta rekognisi pembelajaran lampau",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 26,
-                "Pelanggaran":"Perguruan tinggi melaporkan data yang tidak valid ke PDDIKTI",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 27,
-                "Pelanggaran":"Perguruan tinggi yang menyelenggarakan kegiatan akademik yang tidak sesuai dengan seluruh Standar Nasional Pendidikan Tinggi",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 28,
-                "Pelanggaran":"Badan Penyelenggara tidak memberikan gaji pokok serta tunjangan kepada Dosen dan tenaga kependidikan sesuai dengan ketentuan peraturan perundang-undangan",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 29,
-                "Pelanggaran":"Perguruan tinggi dan/atau Program Studi yang tidak terakreditasi mengeluarkan gelar akademik, gelar vokasi, dan/atau gelar profesi",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian bantuan keuangan, hibah, dan/atau bentuk bantuan lain yang diperuntukkan bagi perguruan tinggi",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 30,
-                "Pelanggaran":"Perguruan tinggi dan/atau Program Studi memberikan ijazah, gelar akademik, gelar vokasi, dan/atau gelar profesi kepada orang yang tidak berhak",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian layanan Pemerintah Pusat bagi perguruan tinggi",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 31,
-                "Pelanggaran":"Perguruan tinggi tidak mengusulkan akreditasi ulang Program Studi sebagaimana ditentukan dalam peraturan perundang-undangan",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian penerimaan Mahasiswa baru",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 32,
-                "Pelanggaran":"Perguruan tinggi lembaga negara lain yang menyelenggarakan pendidikan di wilayah Negara Kesatuan Republik Indonesia yang tidak sesuai dengan ketentuan peraturan perundang-undangan",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Larangan melakukan wisuda",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 33,
-                "Pelanggaran":"Perguruan tinggi melakukan penerimaan Mahasiswa baru dengan tujuan komersial",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian proses usul pembukaan Program Studi baru",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 34,
-                "Pelanggaran":"Pengelolaan perguruan tinggi tidak berprinsip nirlaba",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 35,
-                "Pelanggaran":"Perguruan tinggi dan/atau Badan Penyelenggara melakukan perubahan nama perguruan tinggi, nama dan/atau bentuk Badan Penyelenggara, dan/atau lokasi Kampus Utama PTS tanpa izin dari Menteri",
-                "Sangsi":"Pencabutan izin Program Studi",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 36,
-                "Pelanggaran":"Perguruan tinggi menyelenggarakan Program Studi tanpa izin dari Menteri",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 37,
-                "Pelanggaran":"Perguruan tinggi menyelenggarakan PJJ tanpa izin dari Menteri",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 38,
-                "Pelanggaran":"Perguruan tinggi dan/atau Program Studi tidak lagi memenuhi syarat pendirian perguruan tinggi dan/atau pembukaan Program Studi",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 39,
-                "Pelanggaran":"Terjadi sengketa",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            }
-        ]
-    };
-
-    toggleStep = activeStep => () => {
-        if (this.state.activeStep !== activeStep) {
-            this.setState({
-                activeStep
-            });
-        }
-    };
-
-    // handle particular changes on each checkbox
-    onHandleChange(listName,index) {
-    
-        //set state to checkbox and data in promise mode
-        this.setState({
-            [listName]: this.state[listName].map(
-                        (item, i) => (
-                            
-                                index !== i ? 
-                                item : {...item, checked: !this.state[listName][index].checked}
-                            ) 
-                    )
-        });
-
-
-
-    };
-
-    // done = () => {
-    //     alert('Custom message without form submission.');
-    // };
-
-    handleApplyClick = () => {
-
-        const _noSangsi = document.getElementById('noSangsi').value
-        
-        const _hisJP=[];
-        //Get data for filter by checked
-        this.state.tbljenisPelanggaran.filter(
-            _jp => _jp.checked == true
-        ).map(selectedPelanggaran => (
-            _hisJP.push(selectedPelanggaran)
-        ));
-        
-        this.state.hisJenisPelanggaran=[];
-        this.state.hisJenisPelanggaran.push(
-            {
-                "noSangsi":_noSangsi,
-                "pelanggaran":_hisJP
-            }
-        )
-
-        console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran)
-    }
-
-    renderTableData() {
-        
-    };
-
-    render() {
-        return (
-            <Card className="card-default">
-                {/* <CardHeader>Vertical Example (without validation)</CardHeader> */}
-                <CardBody>
-                    <Row>
-                        <Col xs="4">
-                            <Nav pills vertical={true}>
-                                <NavItem style={stepNavitemStyle}>
-                                    <NavLink
-                                        tag="div"
-                                        className={classnames({
-                                            active: this.state.activeStep === '1'
-                                        })}
-                                        onClick={this.toggleStep('1')}
-                                    >
-                                        <h4 className="text-left my-3">1. Perbaikan</h4>
-                                    </NavLink>
-                                </NavItem>
-                                <NavItem style={stepNavitemStyle}>
-                                    <NavLink
-                                        tag="div"
-                                        className={classnames({
-                                            active: this.state.activeStep === '2'
-                                        })}
-                                        onClick={this.toggleStep('2')}
-                                    >
-                                        <h4 className="text-left my-3">2. Sanggahan</h4>
-                                    </NavLink>
-                                </NavItem>
-                            </Nav>
-                        </Col>
-                        <Col xs="8">
-                            <TabContent activeTab={this.state.activeStep} className="border-0">
-
-                                <TabPane tabId="1">
-                                    {/* <div className="pt-3 mb-3"> */}
-                                    <div>
-                                        {/* START card */}
-                                        <Card className="card-default">
-                                            <CardHeader>
-                                                <label>Form Perbaikan Sanksi</label>    
-                                            </CardHeader>
-                                            <CardBody>
-                                                <form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-                                                    {/* <fieldset> */}
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Nomor Sanksi</label>
-                                                        <div className="col-md-10">
-                                                            <Input type="text"/>
-                                                            <span className="form-text">Nomor sanksi akan digenerate otomatis dari sistem</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    {/* </fieldset> */}
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Keterangan Perbaikan</label>
-                                                        <div className="col-md-10">
-                                                            <Input type="textarea"/>
-                                                            {/* <textarea class="form-control" id="inputContact6" row="3">Some nice Street, 1234</textarea> */}
-                                                            <span className="form-text">Deskripsi perbaikan minimum karakter 50 maksimum 200 karakter</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Upload File Pendukung</label>
-                                                        <div className="col-md-10">
-                                                            {/* <input type="file" multiple name="customFile" class="custom-file-input"></input> */}
-                                                            <CustomInput
-                                                                type="file" multiple
-                                                                id="exampleCustomFileBrowser"
-                                                                name="customFile"
-                                                            />
-                                                            <span className="form-text">Multiple files upload</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    <FormGroup row>
-                                                        <div className="col-xl-10">
-                                                            <button className="btn btn-sm btn-primary" type="submit">Submit Perbaikan</button>
-                                                        </div>
-                                                    </FormGroup>
-                                                </form>
-                                            </CardBody>
-                                        </Card>
-                                        {/* END card */}
-                                    </div>
-                                </TabPane>
-                                <TabPane tabId="2">
-                                    {/* <div className="pt-3 mb-3"> */}
-                                    <div>   
-                                        {/* START card */}
-                                        <Card className="card-default">
-                                            <CardHeader>
-                                                <label>Form Sanggahan Sanksi</label>    
-                                            </CardHeader>
-                                            <CardBody>
-                                                <form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-                                                    {/* <fieldset> */}
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Nomor Sanksi</label>
-                                                        <div className="col-md-10">
-                                                            <Input type="text"/>
-                                                            <span className="form-text">Nomor sanksi akan digenerate otomatis dari sistem</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    {/* </fieldset> */}
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Keterangan Sanggahan</label>
-                                                        <div className="col-md-10">
-                                                            <Input type="textarea"/>
-                                                            {/* <textarea class="form-control" id="inputContact6" row="3">Some nice Street, 1234</textarea> */}
-                                                            <span className="form-text">Deskripsi Sanggahan minimum karakter 50 maksimum 200 karakter</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    <FormGroup row>
-                                                        <label className="col-md-2 col-form-label">Upload File Pendukung</label>
-                                                        <div className="col-md-10">
-                                                            {/* <input type="file" multiple name="customFile" class="custom-file-input"></input> */}
-                                                            <CustomInput
-                                                                type="file" multiple
-                                                                id="exampleCustomFileBrowser"
-                                                                name="customFile"
-                                                            />
-                                                            <span className="form-text">Multiple files upload</span>
-                                                        </div>
-                                                    </FormGroup>
-                                                    <FormGroup row>
-                                                        <div className="col-xl-10">
-                                                            <button className="btn btn-sm btn-primary" type="submit">Submit Sanggahan</button>
-                                                        </div>
-                                                    </FormGroup>
-                                                </form>
-                                            </CardBody>
-                                        </Card>
-                                        {/* END card */}
-                                    </div>
-
-
-                                </TabPane>
-
-                            </TabContent>
-                        </Col>
-                    </Row>
-                </CardBody>
-            </Card>
-        );
-    }
-}
-
-export default FormWizardVertical;

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

@@ -0,0 +1,171 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import { getSanksi } from "@/actions/sanksi";
+import { addDocPerbaikan } from "@/actions/docPerbaikan";
+import Link from "next/link";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import Riwayat from "@/components/PT/Riwayat";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, FormGroup, Button } from "reactstrap";
+
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+class DetailPerbaikanDoc extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			files: [],
+		};
+	}
+
+	static async getInitialProps({ query }) {
+		const { noSanksi } = query;
+		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { query, sanksi };
+	}
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	handleKirim = async (e) => {
+		e.preventDefault();
+		const { noSanksi } = this.props.query;
+		const formdata = new FormData();
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+			const added = await addDocPerbaikan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+			if (added) {
+				Router.push({
+					pathname: "/app/pt/dokumen-perbaikan",
+				});
+			}
+		}
+	};
+
+	render() {
+		const { files } = this.state;
+		const { sanksi } = this.props;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Dokumen Perbaikan</div>
+						<div className="ml-auto">
+							<Link href="/app/pt/dokumen-perbaikan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailSanksi data={sanksi.data[0]} />
+											<p className="lead bb">Dokumen Perbaikan</p>
+											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+												<FormGroup>
+													<label className="row-form-label">Upload Dokumen:</label>
+													<div className="row-md-10">
+														<DropzoneWrapper className="" onDrop={this.onDrop}>
+															{({ getRootProps, getInputProps, isDragActive }) => {
+																return (
+																	<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">Drop files here to upload</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
+																				</button>
+																			</small>
+																		</div>
+																	</div>
+																);
+															}}
+														</DropzoneWrapper>
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<div className="row-xl-10">
+														<Button color="primary" onClick={this.handleKirim} type="submit">
+															Kirim
+														</Button>
+													</div>
+												</FormGroup>
+											</form>
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+							<Riwayat data={sanksi.data[0].sanksi.doc_perbaikan} />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default DetailPerbaikanDoc;

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

@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getSanksi } from "@/actions/sanksi";
+import TableSanksi from "@/components/PT/TableSanksi";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const sanksi = await getSanksi({ ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { sanksi };
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		const { keberatan, banding } = sanksi.data[0].sanksi.doc_perbaikan;
+		console.log(sanksi.data[0].sanksi.doc_perbaikan);
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Dokumen Perbaikan</div>
+				<Row>
+					<Col lg={12}>
+						<TableSanksi listData={sanksi.data} to="/app/pt/dokumen-perbaikan/detail" linkName="Detail" />
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/pt/jawaban-banding/detail.js

@@ -0,0 +1,71 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { getSanksi } from "@/actions/sanksi";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import DetailJawaban from "@/components/PT/JawabanBanding/DetailJawaban";
+import Link from "next/link";
+import { Row, Col, Card, CardBody, Button } from "reactstrap";
+
+class JawabanBanding extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			modal: false,
+		};
+	}
+
+	static async getInitialProps({ query }) {
+		const { noSanksi } = query;
+		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { query, sanksi };
+	}
+
+	toggleModal = (value = true) => {
+		if (!value) {
+			this.setState({ modal: false });
+		} else {
+			this.setState({ modal: !this.state.modal });
+		}
+	};
+
+	render() {
+		const { sanksi } = this.props;
+
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Jawaban Atas Permohonan Keberatan</div>
+						<div className="ml-auto">
+							<Link href="/app/pt/jawaban-banding">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailSanksi data={sanksi.data[0]} />
+											<DetailJawaban data={sanksi.data[0]} />
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default JawabanBanding;

pages/app/pt/jawaban-banding/index.js

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getSanksi } from "@/actions/sanksi";
+import TableSanksi from "@/components/PT/TableSanksi";
+
+class JawabanKeberatan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const sanksi = await getSanksi({ banding: true, jawaban: true, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { sanksi };
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Jawaban Atas Permohonan Banding</div>
+				<Row>
+					<Col lg={12}>{sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-banding/detail" linkName="Detail" /> : ""}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default JawabanKeberatan;

pages/app/pt/jawaban-keberatan/detail.js

@@ -0,0 +1,86 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { getSanksi } from "@/actions/sanksi";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import DetailJawaban from "@/components/PT/JawabanKeberatan/DetailJawaban";
+import ModalPermohonan from "@/components/PT/JawabanKeberatan/ModalPermohonan";
+import Riwayat from "@/components/PT/JawabanKeberatan/Riwayat";
+import Link from "next/link";
+import { Row, Col, Card, CardBody, Button } from "reactstrap";
+
+class JawabanKeberatan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			modal: false,
+		};
+	}
+
+	static async getInitialProps({ query }) {
+		const { noSanksi } = query;
+		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { query, sanksi };
+	}
+
+	toggleModal = (value = true) => {
+		if (!value) {
+			this.setState({ modal: false });
+		} else {
+			this.setState({ modal: !this.state.modal });
+		}
+	};
+
+	render() {
+		const { sanksi } = this.props;
+
+		return (
+			<ContentWrapper unwrap>
+				<ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.query} />
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Jawaban Atas Permohonan Keberatan</div>
+						<div className="ml-auto">
+							<Link href="/app/pt/jawaban-keberatan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailSanksi data={sanksi.data[0]} />
+											<DetailJawaban data={sanksi.data[0]} />
+											<p>
+												Setelah membaca jawaban permohonan keberatan atas pengenaan sanksi, jika Perguruan Tinggi bermaksud mengajukan permohonan banding kepada atasan pemberi sanksi maka dapat menekan tombol di
+												bawah ini (10 Hari Kerja)
+											</p>
+											<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data[0].sanksi.banding || false}>
+												Ajukan Banding
+											</Button>
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+							<Riwayat data={sanksi.data[0]} />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default JawabanKeberatan;

pages/app/pt/jawaban-keberatan/index.js

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getSanksi } from "@/actions/sanksi";
+import TableSanksi from "@/components/PT/TableSanksi";
+
+class JawabanKeberatan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const sanksi = await getSanksi({ keberatan: true, jawaban: true, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { sanksi };
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		console.log(sanksi);
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Jawaban Atas Permohonan Keberatan</div>
+				<Row>
+					<Col lg={12}>{sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-keberatan/detail" linkName="Detail" /> : ""} </Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default JawabanKeberatan;

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

@@ -0,0 +1,93 @@
+import React, { Component } from "react";
+import Link from "next/link";
+import { getSanksi } from "@/actions/sanksi";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Scrollable from "@/components/Common/Scrollable";
+import { Row, Col, Card, CardBody, FormGroup } from "reactstrap";
+
+class DetailJawabanPencabutanSanksi extends Component {
+	static async getInitialProps({ query }) {
+		const { noSanksi } = query;
+		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { query, sanksi };
+	}
+
+	render() {
+		const { sanksi } = this.props;
+		const { jawaban } = sanksi.data[0].sanksi.cabut_sanksi;
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Jawaban Permohonan Pencabutan Sanksi</div>
+						<div className="ml-auto">
+							<Link href="/app/pt/jawaban-pencabutan-sanksi">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailSanksi data={sanksi.data[0]} />
+											<p className="lead bb">Jawaban Permohonan Pencabutan Sanksi</p>
+											<form className="form-horizontal">
+												<FormGroup>
+													<label md="4">Jawaban:</label>
+													<div md="8">
+														<h3>{jawaban.status}</h3>
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<label md="4">Keterangan:</label>
+													<div md="8">
+														<p>{jawaban.description}</p>
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<label md="4">Dokumen Jawaban:</label>
+													<div md="8">
+														<Scrollable height="120px" className="list-group">
+															<table className="table table-bordered bg-transparent">
+																<tbody>
+																	{jawaban.files.map((e) => (
+																		<tr>
+																			<td>
+																				<em className="fa-lg far fa-file-code"></em>
+																			</td>
+																			<td>
+																				<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+																					{e.name}
+																				</a>
+																			</td>
+																		</tr>
+																	))}
+																</tbody>
+															</table>
+														</Scrollable>
+													</div>
+												</FormGroup>
+											</form>
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default DetailJawabanPencabutanSanksi;

pages/app/pt/jawaban-pencabutan-sanksi/index.js

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getSanksi } from "@/actions/sanksi";
+import TableSanksi from "@/components/PT/TableSanksi";
+
+class Pelaporan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const sanksi = await getSanksi({ cabutSanksi: true, jawaban: true, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { sanksi };
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Jawaban Permohonan Pencabutan Sanksi</div>
+				<Row>
+					<Col lg={12}>{sanksi.data.length ? <TableSanksi listData={sanksi.data} to="/app/pt/jawaban-pencabutan-sanksi/detail" linkName="Detail" /> : ""}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Pelaporan;

pages/app/pt/keberatan/detail.js

@@ -0,0 +1,78 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { getSanksi } 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/PT/Keberatan/Riwayat";
+import ModalPermohonan from "@/components/PT/Keberatan/ModalPermohonan";
+import Link from "next/link";
+import { Row, Col, Card, CardBody, Button } from "reactstrap";
+
+class Keberatan extends Component {
+	state = {
+		modal: false,
+	};
+
+	static async getInitialProps({ query }) {
+		const { noSanksi } = query;
+		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { query, sanksi };
+	}
+
+	toggleModal = (value = true) => {
+		if (!value) {
+			this.setState({ modal: false });
+		} else {
+			this.setState({ modal: !this.state.modal });
+		}
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		console.log(sanksi);
+		return (
+			<ContentWrapper unwrap>
+				<ModalPermohonan toggleModal={this.toggleModal} modal={this.state.modal} query={this.props.query} />
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Permohonan Keberatan</div>
+						<div className="ml-auto">
+							<Link href="/app/pt/keberatan">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailSanksi data={sanksi.data[0]} />
+											<p>Setelah membaca surat keputusan sanksi tersebut, jika Perguruan Tinggi bermaksud mengajukan permohonan keberatan maka dapat menekan tombol di bawah ini (21 Hari Kerja)</p>
+											<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data[0].sanksi.keberatan || false}>
+												Ajukan Permohonan Keberatan
+											</Button>
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+							<Riwayat data={sanksi.data[0]} />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Keberatan;

pages/app/pt/keberatan/index.js

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getSanksi } from "@/actions/sanksi";
+import TableSanksi from "@/components/PT/TableSanksi";
+
+class Keberatan extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const sanksi = await getSanksi({ ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { sanksi };
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Permohonan Keberatan</div>
+				<Row>
+					<Col lg={12}>{sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/keberatan/detail" linkName="Detail" /> : ""}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Keberatan;

pages/app/pt/pemantauan.js

@@ -0,0 +1,355 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Header from "@/components/Main/Header";
+import DetailPT from "@/components/Main/DetailPT";
+import {
+	Row,
+	Col,
+	Card,
+	Button,
+	CardHeader,
+	CardFooter,
+	Table,
+	Nav,
+	NavItem,
+	NavLink,
+	TabContent,
+	TabPane,
+	Pagination,
+	PaginationItem,
+	PaginationLink,
+	ListGroup,
+	ListGroupItem,
+	Dropdown,
+	DropdownMenu,
+	DropdownToggle,
+	DropdownItem,
+} from "reactstrap";
+//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import Select from "react-select";
+import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
+
+import { GetServerSideProps, NextPage } from "next";
+import ErrorPage from "next/error";
+import fetch from "node-fetch";
+
+import https from "https";
+
+const containerStyle = {
+	width: "100%",
+	height: "155px",
+};
+
+var jenisPelanggaran = [];
+
+//const qpt_id = {};
+
+//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252
+
+// Demo with custom style
+const DemoMapCustomStyle = (props) => (
+	<GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
+		<Marker position={props.location} />
+	</GoogleMap>
+);
+
+const styleHeaderText = {
+	color: "brown",
+};
+
+class Profile extends Component {
+	toggleTab = (tab) => {
+		if (this.state.activeTab !== tab) {
+			this.setState({
+				activeTab: tab,
+			});
+		}
+	};
+
+	static async getInitialProps({ query }) {
+		const httpsAgent = new https.Agent({
+			rejectUnauthorized: false,
+		});
+		const json = [
+			{
+				id: "0BCE4DB7-B207-445D-8D03-0C54B7688252",
+				kode: "031031",
+				kode_satker: null,
+				nama: "Universitas Satyagama",
+				nama_singkat: "USG",
+				sk_pendirian: "0742/O/1990",
+				tgl_sk_pendirian: "1990-12-22",
+				sk_operasional: null,
+				tgl_sk_operasional: null,
+				status: "A",
+				alamat: {
+					jalan: "Jalan Kamal Raya No 2-A Cengkareng",
+					rt: null,
+					rw: null,
+					dusun: null,
+					kelurahan: "-",
+					kode_pos: "11730",
+					kab_kota: {
+						id: "016200",
+						nama: "Kota Jakarta Barat",
+					},
+				},
+				propinsi: {
+					id: "010000",
+					nama: "Prov. D.K.I. Jakarta",
+				},
+				telepon: "(021) 5452377-78",
+				faksimile: "(021) 54391325",
+				website: "www.satyagama.ac.id",
+				email: "info@satyagama.ac.id",
+				status_milik: {
+					id: "3",
+					nama: "Yayasan",
+				},
+				pembina: {
+					id: "728989DD-251E-4516-BE2C-BA17A93A5C51",
+					nama: "LLDIKTI III",
+				},
+				bentuk_pendidikan: {
+					id: "23",
+					nama: "Universitas",
+				},
+				last_update: "2021-12-08",
+				negara: {
+					id: "ID",
+					nama: "Indonesia",
+				},
+				pimpinan: {
+					id: "D3D20B3D-0FBE-4706-8A70-67C4C09C8FBE",
+					nama: "DEWI SULISTYANI",
+					tmt_sk_pengangkatan: "2021-03-17",
+					tst_sk_pengangkatan: "2025-03-17",
+				},
+			},
+		];
+		console.log("json : ", json);
+
+		return { data: json[0] };
+	}
+
+	state = {
+		dropdownOpen: false,
+		dropdownOpenUpload: false,
+		timelineAlt: false,
+		location: { lat: 33.7906731, lng: -117.8357194 },
+		customStyle: [
+			{ featureType: "water", stylers: [{ visibility: "on" }, { color: "#bdd1f9" }] },
+			{ featureType: "all", elementType: "labels.text.fill", stylers: [{ color: "#334165" }] },
+			{ featureType: "landscape", stylers: [{ color: "#e9ebf1" }] },
+			{ featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#c5c6c6" }] },
+			{ featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#fff" }] },
+			{ featureType: "road.local", elementType: "geometry", stylers: [{ color: "#fff" }] },
+			{ featureType: "transit", elementType: "geometry", stylers: [{ color: "#d8dbe0" }] },
+			{ featureType: "poi", elementType: "geometry", stylers: [{ color: "#cfd5e0" }] },
+			{ featureType: "administrative", stylers: [{ visibility: "on" }, { lightness: 33 }] },
+			{ featureType: "poi.park", elementType: "labels", stylers: [{ visibility: "on" }, { lightness: 20 }] },
+			{ featureType: "road", stylers: [{ color: "#d8dbe0", lightness: 20 }] },
+		],
+		listA: [],
+		selectedOptionMulti: [],
+		activeTab: "tasks",
+	};
+
+	toggleDD = () =>
+		this.setState({
+			dropdownOpen: !this.state.dropdownOpen,
+		});
+
+	toggleDDUpload = () =>
+		this.setState({
+			dropdownOpenUpload: !this.state.dropdownOpenUpload,
+		});
+
+	toggleTimeline = (e) => {
+		this.setState({
+			timelineAlt: e.target.checked,
+		});
+	};
+
+	render() {
+		const { selectedOptionMulti } = this.state;
+
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<Row>
+						<Col xl="9">
+							<ul className="timeline">
+								{/* Date */}
+								<li className="timeline-separator" data-datetime="Today"></li>
+								{/* EndDate */}
+								<li className="timeline-inverted">
+									{/* Left Card */}
+									{/* icon */}
+									<div className="timeline-badge info">
+										<em className="far fa-file"></em>
+									</div>
+									{/* endicon */}
+									<div className="timeline-card">
+										<div className="popover right">
+											<div className="arrow"></div>
+											<div className="popover-body">
+												<div className="d-flex align-items-center mb-3">
+													<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
+													<p className="m-0">
+														{/* <a className="text-muted" href=""> */}
+														<strong>Admin</strong>
+														{/* </a> */}
+														<br />
+														Upload Bukti Perbaikan
+														{/* <em className="fa fa-paperclip"></em> */}
+														<Dropdown isOpen={this.state.dropdownOpenUpload} toggle={this.toggleDDUpload}>
+															{/* <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status */}
+															{/* <p className="m-0"><br/> Upload Bukti Perbaikan </p> */}
+															<DropdownToggle caret color="link">
+																<em className="fa fa-paperclip"></em>
+															</DropdownToggle>
+															<DropdownMenu className="animated fadeInUpShort">
+																<DropdownItem>
+																	<em className="fa fa-lock mr-2"></em>Upload
+																</DropdownItem>
+															</DropdownMenu>
+														</Dropdown>
+													</p>
+													{/* <li> */}
+
+													{/* </li> */}
+												</div>
+												{/* <a href="">
+                                                    <img className="img-fluid img-thumbnail" src="/static/img/mockup.png" alt="Img"/>
+                                                </a> */}
+												<p className="text-muted my-2">3 Logs</p>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File BBB.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">12m ago</small>
+												</div>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File CCC.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">30m ago</small>
+												</div>
+												<div className="media bb p-2">
+													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
+													<div className="media-body">
+														<p className="m-0">
+															<a href="">
+																<strong>Universitas Username</strong>
+															</a>
+														</p>
+														<div className="text-sm text-muted">Uploaded Document File AAA.pdf</div>
+													</div>
+													<small className="ml-auto text-muted">30m ago</small>
+												</div>
+												{/* <form className="mt-2" method="post" action="#">
+                                                    <textarea className="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
+                                                </form> */}
+											</div>
+										</div>
+									</div>
+									{/* EndLeftCard */}
+								</li>
+								<li>
+									{/* rightCard */}
+									{/* icon */}
+									<div className="timeline-badge danger">
+										<em className="fas fa-ticket-alt"></em>
+									</div>
+									{/* endicon */}
+									<div className="timeline-card">
+										<div className="popover left">
+											<div className="arrow"></div>
+											<div className="popover-body">
+												<div className="d-flex align-items-center mb-3">
+													<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
+													<p className="m-0">
+														{/* <a className="text-muted" href=""> */}
+														<strong>Admin</strong>
+														{/* </a> */}
+														<br />
+														opened project
+														<a className="ml-2" href="">
+															#548795
+														</a>
+													</p>
+												</div>
+												<p>
+													<em>&mdash; Project description sample</em>
+												</p>
+											</div>
+										</div>
+									</div>
+									{/* endRightCard */}
+								</li>
+								<li>
+									{/* rightCard */}
+									{/* icon */}
+									<div className="timeline-badge danger">
+										<em className="fas fa-ticket-alt"></em>
+									</div>
+									{/* endicon */}
+									<div className="timeline-card">
+										<div className="popover left">
+											<div className="arrow"></div>
+											<div className="popover-body">
+												<div className="d-flex align-items-center mb-3">
+													<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
+													<p className="m-0">
+														{/* <a className="text-muted" href=""> */}
+														<strong>Admin</strong>
+														{/* </a> */}
+														<br />
+														opened project
+														<a className="ml-2" href="">
+															#548795
+														</a>
+													</p>
+												</div>
+												<p>
+													<em>&mdash; Project description sample</em>
+												</p>
+											</div>
+										</div>
+									</div>
+									{/* endRightCard */}
+								</li>
+								<li className="timeline-end">
+									<a className="timeline-badge">
+										<em className="fa fa-plus"></em>
+									</a>
+								</li>
+							</ul>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Profile;

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

@@ -0,0 +1,170 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import Link from "next/link";
+import { getSanksi } 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/PT/Riwayat";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col, Card, CardBody, FormGroup, Button } from "reactstrap";
+import { addCabutSanksi } from "@/actions/cabutSanksi";
+
+let Dropzone = null;
+class DropzoneWrapper extends Component {
+	state = {
+		isClient: false,
+	};
+	componentDidMount = () => {
+		Dropzone = require("react-dropzone").default;
+		this.setState({ isClient: true });
+	};
+	render() {
+		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
+	}
+}
+
+class DetailPencabutanSanksi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			files: [],
+		};
+	}
+
+	static async getInitialProps({ query }) {
+		const { noSanksi } = query;
+		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { query, sanksi };
+	}
+
+	onDrop = (files) => {
+		this.setState({
+			files: files.map((file) =>
+				Object.assign(file, {
+					preview: URL.createObjectURL(file),
+				})
+			),
+			stat: "Added " + files.length + " file(s)",
+		});
+	};
+
+	uploadFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
+		});
+	};
+
+	clearFiles = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.setState({
+			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
+		});
+		this.setState({
+			files: [],
+		});
+	};
+
+	handleKirim = async (e) => {
+		e.preventDefault();
+		const { noSanksi } = this.props.query;
+		const formdata = new FormData();
+		if (this.state.files.length > 0) {
+			this.state.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+			const added = await addCabutSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+			if (added) {
+				Router.push({
+					pathname: "/app/pt/pencabutan-sanksi",
+				});
+			}
+		}
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		const { files } = this.state;
+
+		const thumbs = files.map((file, index) => (
+			<Col md={3} key={index}>
+				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
+			</Col>
+		));
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Permohonan Pencabutan Sanksi</div>
+						<div className="ml-auto">
+							<Link href="/app/pt/pencabutan-sanksi">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Row>
+						<Col xl="9">
+							<Card className="card-default">
+								<CardBody>
+									<Row>
+										<Col lg={12}>
+											<DetailSanksi data={sanksi.data[0]} />
+											<p className="lead bb">Permohonan Pencabutan Sanksi</p>
+											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+												<FormGroup>
+													<label className="row-form-label">Upload Dokumen:</label>
+													<div className="row-md-10">
+														<DropzoneWrapper className="" onDrop={this.onDrop}>
+															{({ getRootProps, getInputProps, isDragActive }) => {
+																return (
+																	<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">Drop files here to upload</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
+																				</button>
+																			</small>
+																		</div>
+																	</div>
+																);
+															}}
+														</DropzoneWrapper>
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<div className="row-xl-10">
+														<Button color="primary" onClick={this.handleKirim} disabled={sanksi.data[0].sanksi.cabut_sanksi || false} type="submit">
+															Kirim
+														</Button>
+													</div>
+												</FormGroup>
+											</form>
+										</Col>
+									</Row>
+								</CardBody>
+							</Card>
+						</Col>
+						<Col xl="3">
+							<DetailPT />
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+							<Riwayat data={sanksi.data[0].sanksi.cabut_sanksi} />
+						</Col>
+					</Row>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default DetailPencabutanSanksi;

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

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getSanksi } from "@/actions/sanksi";
+import TableSanksi from "@/components/PT/TableSanksi";
+
+class PencabutanSanksi extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const sanksi = await getSanksi({ ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
+		return { sanksi };
+	};
+
+	render() {
+		const { sanksi } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Permohonan Pencabutan Sanksi</div>
+				<Row>
+					<Col lg={12}>{sanksi.data.length > 0 ? <TableSanksi listData={sanksi.data} to="/app/pt/pencabutan-sanksi/detail" linkName="Detail" /> : ""}</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default PencabutanSanksi;

pages/app/sanksi.js

@@ -1,285 +0,0 @@
-import React, { Component } from 'react';
-import Router from 'next/router'
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Progress, Button } from 'reactstrap';
-
-import Sparkline from '@/components/Common/Sparklines';
-import Scrollable from '@/components/Common/Scrollable'
-import Datatable from '@/components/Tables/Datatable';
-import moment from 'moment';
-
-class BugTracker extends Component {
-
-    newProcessClick = (e, PT_ID) => {
-        //temp variable for dev
-        PT_ID='0BCE4DB7-B207-445D-8D03-0C54B7688252';
-        const query = { ptId: PT_ID };
-        
-        e.preventDefault();
-        Router.push(
-            {
-                pathname: '/app/sanksi.proses',
-                query: { ptId: PT_ID }
-            }
-        );
-    }
-
-    render() {
-        return (
-            <ContentWrapper>
-                <div className="content-heading">Sanksi</div>
-                <Row>
-                    <Col lg="4">
-                        {/* Aside card */}
-                        <div className="card b">
-                            <div className="card-body bb">
-                                <p>Overvall progress</p>
-                                <div className="d-flex align-items-center mb-2">
-                                    <div className="w-100">
-                                        <Progress className="progress-xs m0" color="info" value={ 20 } />
-                                    </div>
-                                    <div className="ml-auto">
-                                        <div className="col wd-xxs text-right">
-                                            <div className="text-bold text-muted">20%</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="card-body">
-                                <p>Metrics</p>
-                                <div className="row text-center">
-                                    <div className="col-6 col-lg-6 col-xl-6">
-                                     <Sparkline values={[20,80]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#23b7e5"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Open Case</p>
-                                    </div>
-                                    <div className="col-6 col-lg-6 col-xl-6">
-                                     <Sparkline values={[80,20]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#27c24c"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Close Case</p>
-                                    </div>
-                                    {/* <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[20,80]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#ff902b"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Hours</p>
-                                    </div>
-                                    <div className="col-3 col-lg-6 col-xl-3">
-                                     <Sparkline values={[30,70]}
-
-                                        options={{
-                                            type:"pie",
-                                            height:"50",
-                                            sliceColors:["#edf1f2", "#f05050"]
-                                        }}
-                                        className="sparkline"/>
-                                        <p className="mt-3">Assigned</p>
-                                    </div> */}
-                                </div>
-                            </div>
-                            <table className="table bb">
-                                <tbody>
-                                    {/* <tr>
-                                        <td>
-                                            <strong>Assigned Hours</strong>
-                                        </td>
-                                        <td>68 hs</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Time Consumed</strong>
-                                        </td>
-                                        <td>32 hs</td>
-                                    </tr> */}
-                                    <tr>
-                                        <td>
-                                            <strong>Open Case</strong>
-                                        </td>
-                                        <td>80</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Close Case</strong>
-                                        </td>
-                                        <td>20</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <strong>Performance</strong>
-                                        </td>
-                                        <td>
-                                            <em className="far fa-smile fa-lg text-warning"></em>
-                                        </td>
-                                    </tr>
-                                    {/* <tr>
-                                        <td>
-                                            <strong>Commits</strong>
-                                        </td>
-                                        <td>140</td>
-                                    </tr> */}
-                                    {/* <tr>
-                                        <td>
-                                            <strong>Last Case Closed</strong>
-                                        </td>
-                                        <td>
-                                            <Scrollable height="120px" className="list-group">
-                                                <table className="table table-bordered bg-transparent">
-                                                    <tbody>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:54678</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:55778</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:56878</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:57978</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr>
-                                                            <td>
-                                                                <a className="text-muted" href="">BI:1107</a>
-                                                            </td>
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
-                                            </Scrollable>
-                                        </td>
-                                    </tr> */}
-                                    <tr>
-                                        <td>
-                                            <strong>Last Case Closed</strong>
-                                        </td>
-                                        <td>BI:1107 - 12/01/2016</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        {/* end Aside card */}
-                    </Col>
-                    <Col lg="8">
-                        {/* <div className="mb-3 d-flex"> */}
-                            {/* <div> */}
-                                {/* <button className="btn btn-sm btn-info" type="button" onClick={(e) => this.newReportClick(e)}>Laporan Baru</button> */}
-                                {/* <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button> */}
-                                {/* <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fa fa-user-plus"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fas fa-pencil-alt"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fas fa-share"></em>
-                                </button>
-                                <button className="btn btn-sm btn-secondary" type="button">
-                                    <em className="fa fa-print"></em>
-                                </button> */}
-                            {/* </div> */}
-                            {/* <div className="ml-auto">
-                                <p className="mb-0 mt-1">19 bugs / 16 issues</p>
-                            </div> */}
-                        {/* </div> */}
-                        <div className="card b">
-                            <div className="card-body">
-                                <Datatable options={{responsive: true}}>
-                                    <table className="table w-100">
-                                        <thead>
-                                            <tr>
-                                                {/* <th>Type</th> */}
-                                                <th>#ID</th>
-                                                <th>Description</th>
-                                                <th>Created</th>
-                                                {/* <th>Priority</th>
-                                                <th>Asigned</th> */}
-                                                <th>Status</th>
-                                                <th>Action</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr>
-                                                {/* <td>
-                                                    <div className="badge bg-gray-lighter">bug</div>
-                                                </td> */}
-                                                <td>BI:54678</td>
-                                                <td className="text-nowrap">
-                                                    <div className="media align-items-center">
-                                                        <a className="mr-3" href="">
-                                                            <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy"/>
-                                                        </a>
-                                                        <div className="media-body d-flex">
-                                                            <div>
-                                                                <h4 className="m-0">Universitas Satyagama</h4>
-                                                                <small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
-                                                                <p>Jalan Kamal Raya No 2-A Cengkareng</p>
-                                                                <p> </p>
-                                                            </div>
-                                                            {/* <div className="ml-auto">
-                                                                <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>Proses Sangsi</Button>
-                                                            </div> */}
-                                                        </div>
-                                                    </div>
-                                                
-
-
-
-                                                    {/* <small>Maecenas mollis egestas convallis.</small> */}
-                                                </td>
-                                                <td>{moment("2020-04-04 11:45:26.123").fromNow()}</td>
-                                                {/* <td>
-                                                    <div className="circle circle-lg bg-warning" data-title="normal"></div>
-                                                </td> */}
-                                                {/* <td>
-                                                    <a href="">Sylvia Daniels</a>
-                                                </td> */}
-                                                <td>
-                                                    <div className="inline wd-xxs badge badge-success">open</div>
-                                                </td>
-                                                <td>
-                                                    <div className="ml-auto">
-                                                        <button class="btn-oval btn btn-primary" size="sm" onClick={(e) => this.newProcessClick(e)}>Proses Sanksi</button>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            
-                                        </tbody>
-                                    </table>
-                                </Datatable>
-                            </div>
-                        </div>
-                    </Col>
-                </Row>
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default BugTracker;
-
-

pages/app/sanksi.proses.js

@@ -1,431 +0,0 @@
-import React, { Component } from 'react';
-//import { withRouter } from 'next/router'
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Card, Button, CardHeader, CardFooter, Table, Nav, NavItem, NavLink, TabContent, TabPane, Pagination, PaginationItem, PaginationLink, ListGroup, ListGroupItem, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-
-// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import Select from 'react-select';
-import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
-
-import { GetServerSideProps, NextPage } from 'next';
-import ErrorPage from 'next/error';
-import fetch from 'node-fetch';
-
-import https from 'https';
-
-const containerStyle = {
-    width: '100%',
-    height: '155px'
-};
-
-import FormWizardVertical from './sanksi.proses.wizard.js';
-
-var jenisPelanggaran = [];
-
-//const qpt_id = {};
-
-//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252
-
-// Demo with custom style
-const DemoMapCustomStyle = props => (
-        <GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
-        <Marker position={props.location} />
-        </GoogleMap>
-)
-
-const styleHeaderText = {
-    color: 'brown'
-}
-
-class Profile extends Component {
-
-    toggleTab = tab => {
-        if (this.state.activeTab !== tab) {
-            this.setState({
-                activeTab: tab
-            });
-        }
-    }
-
-    
-    static async getInitialProps({ query }) {
-
-        
-
-        const httpsAgent = new https.Agent({
-            rejectUnauthorized: false,
-          });
-        
-          //console.log('post agent : ');
-
-
-         //const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/707C3895-B546-4DA5-A6A7-EFE7461A7C7E', { 
-        //  const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/'+query.ptId, { 
-        //     method: 'get', 
-        //     headers: new Headers({
-        //       'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5', 
-        //       'Accept': 'application/json'
-        //     }),
-        //     agent: httpsAgent
-        //   }
-        //  )
-
-        //console.log('res : ', res);
-         
-        //const json = await res.json();
-        //console.log('json : ', json);
-        const json = [
-                        {
-                            "id": "0BCE4DB7-B207-445D-8D03-0C54B7688252",
-                            "kode": "031031",
-                            "kode_satker": null,
-                            "nama": "Universitas Satyagama",
-                            "nama_singkat": "USG",
-                            "sk_pendirian": "0742/O/1990",
-                            "tgl_sk_pendirian": "1990-12-22",
-                            "sk_operasional": null,
-                            "tgl_sk_operasional": null,
-                            "status": "N",
-                            "alamat": {
-                            "jalan": "Jalan Kamal Raya No 2-A Cengkareng",
-                            "rt": null,
-                            "rw": null,
-                            "dusun": null,
-                            "kelurahan": "-",
-                            "kode_pos": "11730",
-                            "kab_kota": {
-                                "id": "016200",
-                                "nama": "Kota Jakarta Barat"
-                            }
-                            },
-                            "propinsi": {
-                            "id": "010000",
-                            "nama": "Prov. D.K.I. Jakarta"
-                            },
-                            "telepon": "(021) 5452377-78",
-                            "faksimile": "(021) 54391325",
-                            "website": "www.satyagama.ac.id",
-                            "email": "info@satyagama.ac.id",
-                            "status_milik": {
-                            "id": "3",
-                            "nama": "Yayasan"
-                            },
-                            "pembina": {
-                            "id": "728989DD-251E-4516-BE2C-BA17A93A5C51",
-                            "nama": "LLDIKTI III"
-                            },
-                            "bentuk_pendidikan": {
-                            "id": "23",
-                            "nama": "Universitas"
-                            },
-                            "last_update": "2021-08-22",
-                            "negara": {
-                            "id": "ID",
-                            "nama": "Indonesia"
-                            }
-                    }
-                ]
-
-
-        return { data: json[0] }
-      }
-
-    state = {
-        dropdownOpen: false,
-        dropdownOpenUpload: false,
-        timelineAlt: false,
-        location: { lat: 33.7906731, lng: -117.8357194 },
-        customStyle: [{featureType:'water',stylers:[{visibility:'on'},{color:'#bdd1f9'}]},{featureType:'all',elementType:'labels.text.fill',stylers:[{color:'#334165'}]},{featureType:'landscape',stylers:[{color:'#e9ebf1'}]},{featureType:'road.highway',elementType:'geometry',stylers:[{color:'#c5c6c6'}]},{featureType:'road.arterial',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'transit',elementType:'geometry',stylers:[{color:'#d8dbe0'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#cfd5e0'}]},{featureType:'administrative',stylers:[{visibility:'on'},{lightness:33}]},{featureType:'poi.park',elementType:'labels',stylers:[{visibility:'on'},{lightness:20}]},{featureType:'road',stylers:[{color:'#d8dbe0',lightness:20}]}],
-        listA: [],
-        //isChecked:true,
-        selectedOptionMulti: [],
-        activeTab: 'tasks'
-        
-    }
-
-    toggleDD = () => this.setState({
-        dropdownOpen: !this.state.dropdownOpen
-    })
-
-    toggleDDUpload = () => this.setState({
-        dropdownOpenUpload: !this.state.dropdownOpenUpload
-    })
-
-    toggleTimeline = e => {
-        this.setState({
-            timelineAlt: e.target.checked
-        })
-    }
-
-    // // handle particular changes on each checkbox
-    // onHandleChange(listName,index) {
-      
-    //     //set state to checkbox and data in promise mode
-    //     this.setState({
-    //         [listName]: this.state[listName].map(
-    //                     (item, i) => (
-                            
-    //                             index !== i ? 
-    //                             item : {...item, checked: !this.state[listName][index].checked}
-    //                         ) 
-    //                 )
-    //     });
-
-
-
-    // }
-
-
-    // state = {
-    //     location: { lat: 33.7906731, lng: -117.8357194 },
-    //     customStyle: [{featureType:'water',stylers:[{visibility:'on'},{color:'#bdd1f9'}]},{featureType:'all',elementType:'labels.text.fill',stylers:[{color:'#334165'}]},{featureType:'landscape',stylers:[{color:'#e9ebf1'}]},{featureType:'road.highway',elementType:'geometry',stylers:[{color:'#c5c6c6'}]},{featureType:'road.arterial',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'transit',elementType:'geometry',stylers:[{color:'#d8dbe0'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#cfd5e0'}]},{featureType:'administrative',stylers:[{visibility:'on'},{lightness:33}]},{featureType:'poi.park',elementType:'labels',stylers:[{visibility:'on'},{lightness:20}]},{featureType:'road',stylers:[{color:'#d8dbe0',lightness:20}]}]
-    // }
-
-    
-    // renderTableData() {
-    //     //const dataTable = this.props.data;
-    //     //if (dataTable === true ) {
-
-
-    //         return this.state.tbljenisPelanggaran.map((jp,index) => {
-            
-    //         return (
-    //                 // <tr>
-    //                 //     <td>
-    //                 //         <label>{index+1}</label>
-    //                 //     </td>
-    //                 //     <td>
-    //                 //         <div className="media align-items-center">
-    //                 //             <a className="mr-3" href="">
-    //                 //                 <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy"/>
-    //                 //             </a>
-    //                 //             <div className="media-body d-flex">
-    //                 //                 <div>
-    //                 //                     <h4 className="m-0">{pt.nama}</h4>
-    //                 //                     <small className="text-muted">{pt.sk_pendirian} - {pt.website} - {pt.email}</small>
-    //                 //                     <p>{pt.alamat.jalan}</p>
-    //                 //                 </div>
-    //                 //                 <div className="ml-auto">
-    //                 //                     <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button>
-    //                 //                 </div>
-    //                 //             </div>
-    //                 //         </div>
-    //                 //     </td>
-    //                 // </tr>
-    //             <tr>
-    //                 <td><label>{index+1}</label></td>
-    //                 <td>
-    //                     <div className="media align-items-center">
-    //                         <div className="media-body d-flex">
-    //                             <div>
-                                    
-    //                                 <p>{jp.Pelanggaran}</p>
-    //                                 <p>TMT : {jp.TMTBulan} Bulan</p>
-    //                                 <p>Level Pelanggaran : {jp.LabelSangsi}</p>
-                                    
-    //                             </div>
-    //                         </div>
-    //                     </div>
-    //                 </td>
-    //                 <td>
-    //                     <div className="media align-items-center">
-    //                         <div className="media-body d-flex">
-    //                             <div>
-    //                                 <p>{jp.Sangsi}</p>
-    //                                 <p>Keterangan : {jp.KeteranganSangsi}</p>
-    //                             </div>
-    //                         </div>
-    //                     </div>
-    //                 </td>
-    //                 <td>
-    //                     <div className="checkbox c-checkbox">
-    //                         <label>
-    //                             {/* <input type="checkbox" checked={this.state.listA[index].checked} onChange={e => this.handleChange('listA', index)}/> */}
-    //                             <input 
-    //                                     //name="cb"{jp.idPelanggaran}
-    //                                     type="checkbox"
-    //                                     // checked={
-    //                                     //     jp.checked=true
-    //                                     // } 
-    //                                     checked={this.state.tbljenisPelanggaran[jp.idPelanggaran].checked}
-    //                                     //{this.state.listA[0].checked}
-    //                                     onChange={
-    //                                         e => this.onHandleChange('tbljenisPelanggaran',jp.idPelanggaran)
-    //                                     }
-    //                             />
-    //                             <span className="fa fa-check"></span>
-    //                         </label>
-    //                     </div>
-    //                 </td>
-    //              </tr>
-    //         )
-    //         })
-    //     //}
-    //  }
-
-/*     handleApplyClick = () => {
-
-        const _noSangsi = document.getElementById('noSangsi').value
-        
-        const _hisJP=[];
-        //Get data for filter by checked
-        this.state.tbljenisPelanggaran.filter(
-            _jp => _jp.checked == true
-        ).map(selectedPelanggaran => (
-            _hisJP.push(selectedPelanggaran)
-        ));
-        
-
-        this.state.hisJenisPelanggaran.push(
-            {
-                "noSangsi":_noSangsi,
-                "pelanggaran":_hisJP
-            }
-        )
-
-        console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran)
-    } */
-
-    render() {
-
-        const { selectedOptionMulti } = this.state;
-
-        return (
-            <ContentWrapper unwrap>
-                <div className="bg-cover" style={{backgroundImage: 'url(/static/img/profile-bg.png)'}}>
-                    <div className="p-4 text-center" style={styleHeaderText} >
-                        <img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar"/>
-                        <h3 className="m-0">{this.props.data.nama}</h3>
-                        <p>{this.props.data.website}</p>
-                        <p>{this.props.data.sk_pendirian}</p>
-                        <p>{this.props.data.alamat.jalan}</p>
-                    </div>
-                </div>
-                {/* <div className="text-center bg-gray-dark p-3 mb-4">
-                    <Row>
-                        <Col xs="4" className="br">
-                            <h3 className="m-0">400</h3>
-                            <p className="m-0">
-                                <span className="d-none d-md-inline">Profile</span>
-                                <span>Views</span>
-                            </p>
-                        </Col>
-                        <Col xs="4" className="br">
-                            <h3 className="m-0">2000</h3>
-                            <p className="m-0">Likes</p>
-                        </Col>
-                        <Col xs="4">
-                            <h3 className="m-0">100</h3>
-                            <p className="m-0">Following</p>
-                        </Col>
-                    </Row>
-                </div> */}
-                {/* START card */}
-                <div className="p-3">
-                    {/* <Card className="card-default">
-                        <CardHeader> */}
-                                            {/* START panel tab */}
-                {/* <div className="card card-transparent"> */}
-                    <Nav tabs justified>
-                        <NavItem>
-                            <NavLink className={ this.state.activeTab === 'tasks' ? 'active':'' }
-                                onClick={() => { this.toggleTab('tasks'); }}
-                            >
-                                <em className="far fa-clock fa-fw"></em> History Jenis Pelanggaran
-                            </NavLink>
-                        </NavItem>
-                        {/* <NavItem>
-                            <NavLink className={ this.state.activeTab === 'trans' ? 'active':'' }
-                                onClick={() => { this.toggleTab('trans'); }}
-                            >
-                                <em className="fas fa-info-circle"></em> Action Jenis Pelanggaran
-                            </NavLink>
-                        </NavItem> */}
-                        <NavItem>
-                            <NavLink className={ this.state.activeTab === 'wizard' ? 'active':'' }
-                                onClick={() => { this.toggleTab('wizard'); }}
-                            >
-                                <em className="fas fa-info-circle"></em> Action Jenis Pelanggaran
-                            </NavLink>
-                        </NavItem>
-                    </Nav>
-
-                    
-                    <TabContent activeTab={this.state.activeTab} className="bg-white p-0">
-                        <TabPane tabId="tasks">
-                            <div className="p-3">
-                                {/* START card */}
-                                <Card className="card-default">
-                                    <CardHeader>Daftar Pelanggaran</CardHeader>
-                                    {/* START table-responsive */}
-                                    <Table striped bordered hover responsive>
-                                        <thead>
-                                            <tr>
-                                                <th>ID Laporan</th>
-                                                <th>UUID Pelanggaran</th>
-                                                <th>Progres</th>
-                                                <th>Aktivitas Terakhir</th>
-                                                <th></th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr>
-                                                <td>
-                                                    {/* <div className="ml-auto">ABCDEFGH012345</div> */}
-                                                    <div className="d-flex align-items-center mb-3">BI:54678</div>
-                                                </td>
-                                                <td>
-                                                    {/* <div className="ml-auto">ABCDEFGH012345</div> */}
-                                                    <div className="d-flex align-items-center mb-3">ABCDEFGH012345</div>
-                                                </td>
-                                                <td>
-                                                    <div className="progress progress-sm">
-                                                        <div className="progress-bar progress-bar-striped bg-success" role="progressbar" style={{width: '10%'}}>
-                                                            {/* <span className="sr-only">80% Complete</span> */}
-                                                            {/* <div className="radial-bar radial-bar-50 radial-bar-xs" data-label="50%"></div> */}
-                                                        </div>
-                                                    </div>
-                                                </td>
-                                                <td>
-                                                    <div className="d-flex align-items-center mb-3">05/05/2021</div>
-                                                    {/* <div className="ml-auto">05/05/2021</div> */}
-                                                </td>
-                                                <td>
-                                                    <div className="d-flex align-items-center mb-3">
-                                                        <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>Lanjutkan</Button>
-                                                    </div>
-                                                </td>
-
-                                            </tr>
-                                           
-                                        </tbody>
-                                    </Table>
-                                    {/* END table-responsive */}
-                                </Card>
-                                {/* END card */}
-                                                            
-                            </div>
-                        </TabPane>
-                        
-                        <TabPane tabId="wizard" className="p-3">
-                            <FormWizardVertical />
-                        </TabPane>
-                    </TabContent>
-                {/* </div> */}
-                {/* END panel tab */}
-                    {/* </CardHeader>
-                </Card> */}
-                </div>
-                {/* START card */}
-                <div className="p-3">
-                    
-                </div>
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default Profile;
-

pages/app/sanksi.proses.wizard.js

@@ -1,737 +0,0 @@
-import React, { Component } from 'react';
-import {
-    Card,
-    CardHeader,
-    CardFooter,
-    CardBody,
-    TabContent,
-    TabPane,
-    Nav,
-    NavItem,
-    NavLink,
-    Button,
-    Row,
-    Col,
-    Table,
-    CustomInput
-} from 'reactstrap';
-import classnames from 'classnames';
-
-const stepNavitemStyle = {
-    backgroundColor: '#fcfcfc'
-};
-
-class FormWizardVertical extends Component {
-    state = {
-        activeStep: '1',
-        hisJenisPelanggaran:[],
-        tbljenisPelanggaran:[
-            {
-                "idPelanggaran": 0,
-                "Pelanggaran":"Tidak Ada",
-                "Sangsi":"Tanpa Sangsi",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":0,
-                "LabelSangsi":"Tidak ada",
-                "checked":false,
-                "TMTBulan":0
-            },
-            {
-                "idPelanggaran": 1,
-                "Pelanggaran":"Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pelaksanaan kebebasan akademik,kebebasan mimbar akademik, dan otonomi keilmuan di perguruan tinggi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 2,
-                "Pelanggaran":"Perguruan tinggi tidak memuat mata kuliah agama,Pancasila, kewarganegaraan, dan bahasa Indonesia dalam kurikulumnya",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 3,
-                "Pelanggaran":"Perguruan tinggi tidak menggunakan bahasa Indonesia sebagai bahasa pengantar utama",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"-",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 4,
-                "Pelanggaran":"Perguruan tinggi tidak menyebarluaskan hasil penelitian dengan cara diseminarkan, dipublikasikan, dan/atau dipatenkan, kecuali hasil penelitian yang bersifat rahasia, mengganggu, dan/atau membahayakan kepentingan umum",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 5,
-                "Pelanggaran":"PTN tidak menerima calon Mahasiswa yang telah memenuhi persyaratan akademik dan lolos seleksi penerimaan Mahasiswa secara nasional",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 6,
-                "Pelanggaran":"PTN tidak mencari dan menjaring calon Mahasiswa yang memiliki potensi akademik tinggi, tetapi kurang mampu secara ekonomi dan calon Mahasiswa dari daerah terdepan, terluar, dan tertinggal untuk diterima paling sedikit 20% (dua puluh persen) dari seluruh Mahasiswa baru yang diterima dan tersebar pada semua Program Studi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 7,
-                "Pelanggaran":"Perguruan tinggi tidak memenuhi hak Mahasiswa yang kurang mampu secara ekonomi untuk dapat menyelesaikan studinya sesuai dengan peraturan akademik",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 8,
-                "Pelanggaran":"Perguruan tinggi memberi gelar yang tidak menggunakan bahasa Indonesia",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 9,
-                "Pelanggaran":"Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pengelolaan di bidang non akademik",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 10,
-                "Pelanggaran":"Perguruan tinggi tidak mengumumkan ringkasan laporan tahunan kepada masyarakat",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 11,
-                "Pelanggaran":"Perguruan tinggi memiliki Dosen tetap kurang dari 5 (lima) orang untuk setiap Program Studi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 12,
-                "Pelanggaran":"Perguruan tinggi tidak memenuh  nisbah Dosen dan Mahasiswa sesuai dengan ketentuan peraturan perundang-undangan",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 13,
-                "Pelanggaran":"Perguruan tinggi tidak melakukan pelaporan secara berkala ke pangkalan data Pendidikan Tinggi",
-                "Sangsi":"Peringatan Tertulis",
-                "KeteranganSangsi":"",
-                "LevelSangsi":1,
-                "LabelSangsi":"Ringan",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 14,
-                "Pelanggaran":"Program sarjana memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-                "Sangsi":"Penghentian sementara bantuan biaya pendidikan dari pemerintahan pusat",
-                "KeteranganSangsi":"Berupa penundaan pemberian bantuan keuangan, hibah, dan/atau bentuk bantuan lain bagi perguruan tinggi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 15,
-                "Pelanggaran":"Program magister memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penghentian sementara penerimaan Mahasiswa baru",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 16,
-                "Pelanggaran":"Program doktor memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan proses usul pembukaan Program Studi baru",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                 "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 17,
-                "Pelanggaran":"Program diploma memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 18,
-                "Pelanggaran":"Program magister terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 19,
-                "Pelanggaran":"Program doktor terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 20,
-                "Pelanggaran":"Program profesi memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan profesi dan/atau lulusan program magister atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 21,
-                "Pelanggaran":"Program spesialis memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program spesialis dan/atau lulusan program doktor atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 22,
-                "Pelanggaran":"Perguruan tinggi tidak mencabut gelar akademik, gelar vokasi, atau gelar profesi apabila karya ilmiah yang digunakan untuk memperoleh gelar akademik, gelar vokasi, atau gelar profesi terbukti merupakan hasil plagiat",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 23,
-                "Pelanggaran":"Perguruan tinggi tidak menyediakan, memfasilitasi, memiliki Sumber Belajar sesuai dengan Program Studi yang dikembangkan",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 24,
-                "Pelanggaran":"Perguruan tinggi tidak memiliki statuta",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 25,
-                "Pelanggaran":"Perguruan tinggi tidak memiliki panduan/prosedur peralihan dan perolehan satuan kredit semester serta rekognisi pembelajaran lampau",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 26,
-                "Pelanggaran":"Perguruan tinggi melaporkan data yang tidak valid ke PDDIKTI",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 27,
-                "Pelanggaran":"Perguruan tinggi yang menyelenggarakan kegiatan akademik yang tidak sesuai dengan seluruh Standar Nasional Pendidikan Tinggi",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 28,
-                "Pelanggaran":"Badan Penyelenggara tidak memberikan gaji pokok serta tunjangan kepada Dosen dan tenaga kependidikan sesuai dengan ketentuan peraturan perundang-undangan",
-                "Sangsi":"Penghentian sementara kegiatan penyelenggaraan pendidikan",
-                "KeteranganSangsi":"Penundaan pelaksanaan akreditasi",
-                "LevelSangsi":2,
-                "LabelSangsi":"Sedang",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 29,
-                "Pelanggaran":"Perguruan tinggi dan/atau Program Studi yang tidak terakreditasi mengeluarkan gelar akademik, gelar vokasi, dan/atau gelar profesi",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian bantuan keuangan, hibah, dan/atau bentuk bantuan lain yang diperuntukkan bagi perguruan tinggi",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 30,
-                "Pelanggaran":"Perguruan tinggi dan/atau Program Studi memberikan ijazah, gelar akademik, gelar vokasi, dan/atau gelar profesi kepada orang yang tidak berhak",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian layanan Pemerintah Pusat bagi perguruan tinggi",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 31,
-                "Pelanggaran":"Perguruan tinggi tidak mengusulkan akreditasi ulang Program Studi sebagaimana ditentukan dalam peraturan perundang-undangan",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian penerimaan Mahasiswa baru",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 32,
-                "Pelanggaran":"Perguruan tinggi lembaga negara lain yang menyelenggarakan pendidikan di wilayah Negara Kesatuan Republik Indonesia yang tidak sesuai dengan ketentuan peraturan perundang-undangan",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Larangan melakukan wisuda",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 33,
-                "Pelanggaran":"Perguruan tinggi melakukan penerimaan Mahasiswa baru dengan tujuan komersial",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penghentian proses usul pembukaan Program Studi baru",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 34,
-                "Pelanggaran":"Pengelolaan perguruan tinggi tidak berprinsip nirlaba",
-                "Sangsi":"Penghentian pembinaan",
-                "KeteranganSangsi":"Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 35,
-                "Pelanggaran":"Perguruan tinggi dan/atau Badan Penyelenggara melakukan perubahan nama perguruan tinggi, nama dan/atau bentuk Badan Penyelenggara, dan/atau lokasi Kampus Utama PTS tanpa izin dari Menteri",
-                "Sangsi":"Pencabutan izin Program Studi",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 36,
-                "Pelanggaran":"Perguruan tinggi menyelenggarakan Program Studi tanpa izin dari Menteri",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 37,
-                "Pelanggaran":"Perguruan tinggi menyelenggarakan PJJ tanpa izin dari Menteri",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 38,
-                "Pelanggaran":"Perguruan tinggi dan/atau Program Studi tidak lagi memenuhi syarat pendirian perguruan tinggi dan/atau pembukaan Program Studi",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            },
-            {
-                "idPelanggaran": 39,
-                "Pelanggaran":"Terjadi sengketa",
-                "Sangsi":"Pembubaran PTN atau pencabutan izin PTS",
-                "KeteranganSangsi":"",
-                "LevelSangsi":3,
-                "LabelSangsi":"Berat",
-                "checked":false,
-                "TMTBulan":6
-            }
-        ]
-    };
-
-    toggleStep = activeStep => () => {
-        if (this.state.activeStep !== activeStep) {
-            this.setState({
-                activeStep
-            });
-        }
-    };
-
-    // handle particular changes on each checkbox
-    onHandleChange(listName,index) {
-    
-        //set state to checkbox and data in promise mode
-        this.setState({
-            [listName]: this.state[listName].map(
-                        (item, i) => (
-                            
-                                index !== i ? 
-                                item : {...item, checked: !this.state[listName][index].checked}
-                            ) 
-                    )
-        });
-
-
-
-    };
-
-    // done = () => {
-    //     alert('Custom message without form submission.');
-    // };
-
-    handleApplyClick = () => {
-
-        const _noSangsi = document.getElementById('noSangsi').value
-        
-        const _hisJP=[];
-        //Get data for filter by checked
-        this.state.tbljenisPelanggaran.filter(
-            _jp => _jp.checked == true
-        ).map(selectedPelanggaran => (
-            _hisJP.push(selectedPelanggaran)
-        ));
-        
-        this.state.hisJenisPelanggaran=[];
-        this.state.hisJenisPelanggaran.push(
-            {
-                "noSangsi":_noSangsi,
-                "pelanggaran":_hisJP
-            }
-        )
-
-        console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran)
-    }
-
-    renderTableData() {
-        
-            return this.state.tbljenisPelanggaran.map((jp,index) => {
-            
-                return (
-                    <tr>
-                        <td><label>{index+1}</label></td>
-                        <td>
-                            <div className="media align-items-center">
-                                <div className="media-body d-flex">
-                                    <div>
-                                        
-                                        <p>{jp.Pelanggaran}</p>
-                                        <p>TMT : {jp.TMTBulan} Bulan</p>
-                                        <p>Level Pelanggaran : {jp.LabelSangsi}</p>
-                                        
-                                    </div>
-                                </div>
-                            </div>
-                        </td>
-                        <td>
-                            <div className="media align-items-center">
-                                <div className="media-body d-flex">
-                                    <div>
-                                        <p>{jp.Sangsi}</p>
-                                        <p>Keterangan : {jp.KeteranganSangsi}</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </td>
-                        <td>
-                            <div className="checkbox c-checkbox">
-                                <label>
-                                    {/* <input type="checkbox" checked={this.state.listA[index].checked} onChange={e => this.handleChange('listA', index)}/> */}
-                                    <input 
-                                            //name="cb"{jp.idPelanggaran}
-                                            type="checkbox"
-                                            // checked={
-                                            //     jp.checked=true
-                                            // } 
-                                            checked={this.state.tbljenisPelanggaran[jp.idPelanggaran].checked}
-                                            //{this.state.listA[0].checked}
-                                            onChange={
-                                                e => this.onHandleChange('tbljenisPelanggaran',jp.idPelanggaran)
-                                            }
-                                    />
-                                    <span className="fa fa-check"></span>
-                                </label>
-                            </div>
-                        </td>
-                    </tr>
-                )
-            })
-        //}
-     };
-
-    render() {
-        return (
-            <Card className="card-default">
-                {/* <CardHeader>Vertical Example (without validation)</CardHeader> */}
-                <CardBody>
-                    <Row>
-                        <Col xs="4">
-                            <Nav pills vertical={true}>
-                                <NavItem style={stepNavitemStyle}>
-                                    <NavLink
-                                        tag="div"
-                                        className={classnames({
-                                            active: this.state.activeStep === '1'
-                                        })}
-                                        onClick={this.toggleStep('1')}
-                                    >
-                                        <h4 className="text-left my-3">1. Penetapan Pelanggaran & Sanksi</h4>
-                                    </NavLink>
-                                </NavItem>
-                                <NavItem style={stepNavitemStyle}>
-                                    <NavLink
-                                        tag="div"
-                                        className={classnames({
-                                            active: this.state.activeStep === '2'
-                                        })}
-                                        onClick={this.toggleStep('2')}
-                                    >
-                                        <h4 className="text-left my-3">2. Penetapan Nomor Surat Keputusan Sanksi</h4>
-                                    </NavLink>
-                                </NavItem>
-                                <NavItem style={stepNavitemStyle}>
-                                    <NavLink
-                                        tag="div"
-                                        className={classnames({
-                                            active: this.state.activeStep === '3'
-                                        })}
-                                        onClick={this.toggleStep('3')}
-                                    >
-                                        <h4 className="text-left my-3">3. Tabel Log</h4>
-                                    </NavLink>
-                                </NavItem>
-                            </Nav>
-                        </Col>
-                        <Col xs="8">
-                            <TabContent activeTab={this.state.activeStep} className="border-0">
-
-                                <TabPane tabId="1">
-
-                                    <div className="d-flex">
-                                        {/*<Button color="secondary">Previous</Button>*/}
-                                        <Button
-                                            className="ml-auto"
-                                            color="primary"
-                                            onClick={this.toggleStep('2')}
-                                        >
-                                            Next
-                                        </Button>
-                                    </div>
-                                    <hr />
-                                    <div className="pt-3 mb-3">
-                                            <Card className="card-default">
-
-                                                {/* START table-responsive */}
-                                                <Table bordered hover responsive>
-                                                    <thead>
-                                                        <tr>
-                                                            <th>No</th>
-                                                            <th>Jenis Pelanggaran</th>
-                                                            <th>Sangsi</th>
-                                                            <th>
-                                                            </th>
-                                                        </tr>
-                                                    </thead>
-                                                    <tbody>
-                                                        {this.renderTableData()}
-                                                    </tbody>
-                                                </Table>
-                                                {/* END table-responsive */}
-                                                <CardFooter>
-                                                    <div className="d-flex">
-
-                                                        <div className="ml-auto">
-                                                            <div className="input-group float-right">
-                                                                <select className="custom-select" id="inputGroupSelect04">
-                                                                    <option value="0">Action</option>
-                                                                    <option value="1">Simpan</option>
-                                                                    {/* <option value="3">Export</option> */}
-                                                                </select>
-                                                                <div className="input-group-append">
-                                                                    <button className="btn btn-secondary" type="button" onClick={(e) => this.handleApplyClick()}>Apply</button>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </CardFooter>
-                                            </Card>
-                                        {/* <fieldset>
-                                            <h2>Step 2</h2>
-                                            <p className="lead">
-                                                Nunc pharetra, elit ut lobortis vehicula, nisl metus
-                                                tincidunt mauris, vitae accumsan arcu justo sit amet
-                                                odio.{' '}
-                                            </p>
-                                        </fieldset> */}
-                                    </div>
-                                </TabPane>
-                                <TabPane tabId="2">
-                                    <div className="d-flex">
-                                        <Button color="primary" onClick={this.toggleStep('1')}>
-                                            Previous
-                                        </Button>
-                                        <Button
-                                            className="ml-auto"
-                                            color="primary"
-                                            onClick={this.toggleStep('3')}
-                                        >
-                                            Next
-                                        </Button>
-                                    </div>
-                                    <hr />
-                                    <div className="pt-3 mb-3">
-
-
-                                        <div className="d-flex">
-                                            <CustomInput
-                                                type="file"
-                                                id="exampleCustomFileBrowser2"
-                                                name="customFile"
-                                                label="File Surat Sanksi"
-                                            />
-                                        </div>
-                                        <hr />
-                                        <div className="d-flex">
-                                            <div>
-                                                <div className="input-group">
-                                                    <input className="form-control" type="text" id='noSangsi' placeholder="Nomor Sanksi"/>
-                                                </div>
-                                            </div>
-                                            <div className="ml-auto">
-                                                <div className="input-group float-right">
-                                                    <select className="custom-select" id="inputGroupSelect04">
-                                                        <option value="0">Action</option>
-                                                        <option value="1">Simpan</option>
-                                                        {/* <option value="3">Export</option> */}
-                                                    </select>
-                                                    <div className="input-group-append">
-                                                        <button className="btn btn-secondary" type="button" onClick={(e) => this.handleApplyClick()}>Apply</button>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        {/* <fieldset>
-                                            <h2>Step 1</h2>
-                                            <p className="lead">
-                                                Nunc pharetra, elit ut lobortis vehicula, nisl metus
-                                                tincidunt mauris, vitae accumsan arcu justo sit amet
-                                                odio.{' '}
-                                            </p>
-                                        </fieldset> */}
-                                    </div>
-
-
-                                </TabPane>
-                                <TabPane tabId="3">
-                                    <div className="d-flex">
-                                        <Button color="primary" onClick={this.toggleStep('2')}>
-                                            Previous
-                                        </Button>
-                                        {/* <Button
-                                            className="ml-auto"
-                                            color="primary"
-                                            onClick={this.done}
-                                        >
-                                            Done
-                                        </Button> */}
-                                    </div>
-                                    <hr />
-                                    <div className="pt-3 mb-3">
-                                        {/* <fieldset>
-                                            <h2>Step 3</h2>
-                                            <p className="lead">
-                                                Nunc pharetra, elit ut lobortis vehicula, nisl metus
-                                                tincidunt mauris, vitae accumsan arcu justo sit amet
-                                                odio.{' '}
-                                            </p>
-                                        </fieldset> */}
-                                    </div>
-                                </TabPane>
-                            </TabContent>
-                        </Col>
-                    </Row>
-                </CardBody>
-            </Card>
-        );
-    }
-}
-
-export default FormWizardVertical;

pages/app/sanksi/detail.js

@@ -0,0 +1,129 @@
+import React, { Component } from "react";
+import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col } from "reactstrap";
+import Router from "next/router";
+import classnames from "classnames";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import DetailSanksi from "@/components/Main/DetailSanksi";
+import Header from "@/components/Main/Header";
+import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
+import UploadSurat from "@/components/Sanksi/UploadSurat";
+import Ringkasan from "@/components/Sanksi/Ringkasan";
+import TablePenetapanSanksi from "@/components/Sanksi/TablePenetapanSanksi";
+import Link from "next/link";
+import { getPelaporan } from "@/actions/pelaporan";
+import { createSanksi } from "@/actions/sanksi";
+
+const stepNavitemStyle = {
+	backgroundColor: "#fcfcfc",
+};
+
+class Detail extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			activeStep: "1",
+			checkedData: [],
+			dataUpload: null,
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
+		return { query, pelaporan };
+	};
+
+	done = async (e) => {
+		e.preventDefault();
+		const { ptId, number } = this.props.query;
+		const formdata = new FormData();
+		formdata.append("no_sanksi", this.state.dataUpload.nomorSanksi);
+		formdata.append("description", this.state.dataUpload.keterangan);
+		formdata.append("pelanggaran", this.state.checkedData.map((e) => e._id).join());
+		if (this.state.dataUpload.files.length > 0) {
+			this.state.dataUpload.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+		const create = await createSanksi({ ptId, number }, formdata);
+		// console.log(create);
+		if (create) {
+			Router.push({
+				pathname: "/app/sanksi",
+			});
+		}
+	};
+
+	toggleStep = (activeStep) => () => {
+		if (this.state.activeStep !== activeStep) {
+			this.setState({
+				activeStep,
+			});
+		}
+	};
+
+	setCheckedData = (data) => {
+		this.setState({ checkedData: data });
+	};
+
+	setUploadSuratSanksi = (data) => {
+		this.setState({ dataUpload: data });
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		const { checkedData, dataUpload } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Detail Sanksi</div>
+						<div className="ml-auto">
+							<Link href="/app/sanksi">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Card className="card-default">
+						<CardBody>
+							<Row>
+								<Col xs="4">
+									<Nav pills vertical={true}>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "1",
+												})}
+												onClick={this.toggleStep("1")}
+											>
+												<h4 className="text-left my-3">1. Detail Sanksi</h4>
+											</NavLink>
+										</NavItem>
+									</Nav>
+								</Col>
+								<Col xs="8">
+									<TabContent activeTab={this.state.activeStep} className="border-0">
+										<TabPane tabId="1">
+											<div className="pt-3 mb-3">
+												<h2>Detail Sanksi</h2>
+												<Row>
+													<Col>
+														<DetailSanksi noTitle data={pelaporan.data[0]} />
+													</Col>
+												</Row>
+											</div>
+											<hr />
+										</TabPane>
+									</TabContent>
+								</Col>
+							</Row>
+						</CardBody>
+					</Card>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Detail;

pages/app/sanksi/index.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Row, Col } from "reactstrap";
+import { getPelaporan } from "@/actions/pelaporan";
+import CaseProgress from "@/components/Main/CaseProgress";
+import TableLaporan from "@/components/Main/TableLaporan";
+
+class Sanksi extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	static getInitialProps = async () => {
+		const pelaporan = await getPelaporan({ pemeriksaan: true });
+		return { pelaporan };
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">Sanksi</div>
+				<Row>
+					<Col lg="4">
+						<CaseProgress />
+					</Col>
+					<Col lg="8">
+						<TableLaporan listData={pelaporan.data} to={pelaporan.data[0].sanksi ? "/app/sanksi/detail" : "/app/sanksi/proses"} linkName={pelaporan.data[0].sanksi ? "Detail" : "Proses Sanksi"} status />
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default Sanksi;

pages/app/sanksi/proses.js

@@ -0,0 +1,241 @@
+import React, { Component } from "react";
+import { Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink, Button, Row, Col } from "reactstrap";
+import Router from "next/router";
+import classnames from "classnames";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import Header from "@/components/Main/Header";
+import TableRiwayat from "@/components/Pemeriksaan/TableRiwayat";
+import UploadSurat from "@/components/Sanksi/UploadSurat";
+import Ringkasan from "@/components/Sanksi/Ringkasan";
+import TablePenetapanSanksi from "@/components/Sanksi/TablePenetapanSanksi";
+import Link from "next/link";
+import { getPelaporan } from "@/actions/pelaporan";
+import { createSanksi } from "@/actions/sanksi";
+import { getPelanggaranId } from "@/actions/pelanggaran";
+
+const stepNavitemStyle = {
+	backgroundColor: "#fcfcfc",
+};
+
+class ProsesSanksi extends Component {
+	dataUpload = {};
+	constructor(props) {
+		super(props);
+		this.state = {
+			activeStep: "1",
+			dataUpload: null,
+			dataPelanggaran: {},
+		};
+	}
+
+	static getInitialProps = async ({ query }) => {
+		const pelaporan = await getPelaporan({ ptId: query.ptId, number: query.number });
+		return { query, pelaporan };
+	};
+
+	done = async (e) => {
+		e.preventDefault();
+		const { ptId, number } = this.props.query;
+		const formdata = new FormData();
+		formdata.append("no_sanksi", this.state.dataUpload.nomorSanksi);
+		formdata.append("description", this.state.dataUpload.keterangan);
+		formdata.append("pelanggaran", this.state.dataPelanggaran.data.map((e) => e._id).join());
+		if (this.state.dataUpload.files.length > 0) {
+			this.state.dataUpload.files.forEach((e) => {
+				formdata.append("files", e);
+			});
+		}
+		const create = await createSanksi({ ptId, number }, formdata);
+		if (create) {
+			Router.push({
+				pathname: "/app/sanksi",
+			});
+		}
+	};
+
+	toggleStep = (activeStep) => () => {
+		if (this.state.activeStep !== activeStep) {
+			this.setState({
+				activeStep,
+			});
+		}
+	};
+
+	setCheckedData = async (data) => {
+		const result = await getPelanggaranId(data);
+		this.setState({ dataPelanggaran: result });
+	};
+
+	setUploadSuratSanksi = (data) => {
+		// this.dataUpload = data;
+		this.setState({ dataUpload: data });
+	};
+
+	render() {
+		const { pelaporan } = this.props;
+		const { dataUpload, dataPelanggaran } = this.state;
+		return (
+			<ContentWrapper unwrap>
+				<Header />
+				<div className="p-3">
+					<div className="content-heading">
+						<div>Penetapan Sanksi</div>
+						<div className="ml-auto">
+							<Link href="/app/sanksi">
+								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+							</Link>
+						</div>
+					</div>
+					<Card className="card-default">
+						<CardBody>
+							<Row>
+								<Col xs="4">
+									<Nav pills vertical={true}>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "1",
+												})}
+												onClick={this.toggleStep("1")}
+											>
+												<h4 className="text-left my-3">1. Detail Laporan</h4>
+											</NavLink>
+										</NavItem>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "2",
+												})}
+												onClick={this.toggleStep("2")}
+											>
+												<h4 className="text-left my-3">2. Hasil Evaluasi</h4>
+											</NavLink>
+										</NavItem>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "3",
+												})}
+												onClick={this.toggleStep("3")}
+											>
+												<h4 className="text-left my-3">3. Penetapan Sanksi</h4>
+											</NavLink>
+										</NavItem>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "4",
+												})}
+												onClick={this.toggleStep("4")}
+											>
+												<h4 className="text-left my-3">4. Nomor Surat Keputusan Sanksi</h4>
+											</NavLink>
+										</NavItem>
+										<NavItem style={stepNavitemStyle}>
+											<NavLink
+												tag="div"
+												className={classnames({
+													active: this.state.activeStep === "5",
+												})}
+												onClick={this.toggleStep("5")}
+											>
+												<h4 className="text-left my-3">5. Ringkasan</h4>
+											</NavLink>
+										</NavItem>
+									</Nav>
+								</Col>
+								<Col xs="8">
+									<TabContent activeTab={this.state.activeStep} className="border-0">
+										<TabPane tabId="1">
+											<div className="pt-3 mb-3">
+												<h2>Detail Laporan</h2>
+												<DetailLaporan noTitle data={pelaporan.data[0]} />
+											</div>
+											<hr />
+											<div className="d-flex">
+												<Button className="ml-auto" color="primary" onClick={this.toggleStep("2")}>
+													Next
+												</Button>
+											</div>
+										</TabPane>
+										<TabPane tabId="2">
+											<div className="pt-3 mb-3">
+												<h2>Hasil Evaluasi</h2>
+												<Card className="card-default">
+													<CardBody>
+														<TableRiwayat data={pelaporan.data[0]} />
+													</CardBody>
+												</Card>
+											</div>
+											<hr />
+											<div className="d-flex">
+												<Button color="secondary" onClick={this.toggleStep("1")}>
+													Previous
+												</Button>
+												<Button className="ml-auto" color="primary" onClick={this.toggleStep("3")}>
+													Next
+												</Button>
+											</div>
+										</TabPane>
+										<TabPane tabId="3">
+											<div className="pt-3 mb-3">
+												<h2>Penetapan Sanksi</h2>
+												<TablePenetapanSanksi setCheckedData={this.setCheckedData} />
+											</div>
+											<hr />
+											<div className="d-flex">
+												<Button color="secondary" onClick={this.toggleStep("2")}>
+													Previous
+												</Button>
+												<Button className="ml-auto" color="primary" onClick={this.toggleStep("4")}>
+													Next
+												</Button>
+											</div>
+										</TabPane>
+										<TabPane tabId="4">
+											<div className="pt-3 mb-3">
+												<h2>Nomor Surat Keputusan Sanksi</h2>
+												<UploadSurat setUploadSuratSanksi={this.setUploadSuratSanksi} />
+											</div>
+											<hr />
+											<div className="d-flex">
+												<Button color="secondary" onClick={this.toggleStep("3")}>
+													Previous
+												</Button>
+												<Button className="ml-auto" color="primary" onClick={this.toggleStep("5")}>
+													Next
+												</Button>
+											</div>
+										</TabPane>
+										<TabPane tabId="5">
+											<div className="pt-3 mb-3">
+												<h2>Ringkasan</h2>
+												<Ringkasan dataLaporan={pelaporan.data[0]} dataPelanggaran={dataPelanggaran.data} dataUpload={dataUpload} />
+											</div>
+											<hr />
+											<div className="d-flex">
+												<Button color="secondary" onClick={this.toggleStep("4")}>
+													Previous
+												</Button>
+												<Button className="ml-auto" color="primary" onClick={this.done}>
+													Done
+												</Button>
+											</div>
+										</TabPane>
+									</TabContent>
+								</Col>
+							</Row>
+						</CardBody>
+					</Card>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+export default ProsesSanksi;

pages/app/search.js

@@ -1,310 +0,0 @@
-import React, { Component } from 'react';
-import Router from 'next/router'
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-// React Slider
-import Slider from 'rc-slider';
-import 'rc-slider/assets/index.css';
-// React Select
-import Select from 'react-select';
-// DateTimePicker
-import Datetime from 'react-datetime';
-import 'react-datetime/css/react-datetime.css';
-
-
-import https from 'https';
-
-
-
-import CardTool from '@/components/Common/CardTool'
-
-
-
-var pembina = [];
-
-
-class Search extends Component {
-
-    
-
-    static async getInitialProps(ctx) {
-
-        pembina = [];
-        const httpsAgent = new https.Agent({
-            rejectUnauthorized: false,
-          });
-        
-         
-         const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/lembaga-non-sp', { 
-            method: 'get', 
-            headers: new Headers({
-              'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5', 
-              'Accept': 'application/json'
-            }),
-            agent: httpsAgent
-          }
-         )
-
-         
-        const jsonPembina = await res.json();
-        //jsonPembina = JSON.parse(jsonPembina);
-        // id: "ABEAE958-4F20-40EF-B145-B8014EC98D8F",nama: "Badan Intelijen Negara",singkatan: "BIN"
-        // { value: 'australian-capital-territory', label: 'Australian Capital Territory', className: 'State-ACT' },
-
-
-
-        var numrows = jsonPembina.length;
-
-        for (var i = 0; i < numrows; i++) {
-            pembina.push({value:jsonPembina[i].id, label:jsonPembina[i].nama, className: 'State-'+jsonPembina[i].singkatan});
-        }
-
-        console.log('pembina : ', pembina);
-
-        
-        //return { data: json }
-      }
-
-    state = {
-        selectedOptionMulti: [],
-        data: []
-    }
-
-
-    handleChangeSelectMulti = (selectedOptionMulti) => {
-        this.setState({ selectedOptionMulti });
-    }
-
-    renderInputGroup = props => {
-        return (
-            <div className="input-group date">
-                <input className="form-control" {...props} />
-                <span className="input-group-append input-group-addon">
-                    <span className="input-group-text fas fa-calendar-alt"></span>
-                </span>
-            </div>
-        )
-    }
-
-    
-    
-
-
-    handleClick = (e, PT_ID) => {
-        //router = useRouter();
-        const query = { ptId: PT_ID };
-        //    '/app/profile'
-        e.preventDefault();
-        Router.push(
-            {
-                pathname: '/app/profile-pt',
-                query: { ptId: PT_ID }
-            }
-        );
-    }
-
-    fetchData = async () => {
-        var qPembina = "";
-        console.log('this.state.selectedOptionMulti.value : ', this.state.selectedOptionMulti.value);
-        if (this.state.selectedOptionMulti.value !== undefined ){
-            qPembina = '&pembina='+this.state.selectedOptionMulti.value;
-        }
-
-        //console.log('qpembina : ', qPembina);
-        const searchValue = 'q='+document.getElementById('searchInput').value;
-
-        const httpsAgent = new https.Agent({
-            rejectUnauthorized: false,
-          });
-        
-          //console.log('post agent : ');
-
-
-         //const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/707C3895-B546-4DA5-A6A7-EFE7461A7C7E', { 
-         const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt?'+searchValue+qPembina, { 
-            method: 'get', 
-            headers: new Headers({
-              'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5', 
-              'Accept': 'application/json'
-            }),
-            agent: httpsAgent
-          }
-         )
-         
-        const jsonData = await res.json();
-        
-        this.setState({ data: jsonData });
-        //console.log('jsonData : ', jsonData);
-        //Get unique for filter by pembina
-        // const uniquePembina = [
-        //     new Set(jsonData.map(
-        //         item => item.pembina.nama
-        //     ))
-        // ]
-
-
-    };
-
-
-    handleApplyClick = () => {
-        console.log('selectedOptionMulti : ',this.state.selectedOptionMulti);
-        //const dataTables = this.fetchData().jsonData;
-        this.fetchData();
-        //console.log('this.state.data :', this.state.data);
-        if (this.state.data.length > 0){
-            this.renderTableData();
-        }
-    }
-
-    handleSearchClick = () => {
-
-        //const dataTables = this.fetchData().jsonData;
-        this.fetchData();
-        //console.log('this.state.data :', this.state.data);
-        if (this.state.data.length > 0){
-            this.renderTableData();
-        }
-    }
-
-    renderTableData() {
-        //const dataTable = this.props.data;
-        //if (dataTable === true ) {
-
-
-            return this.state.data.map((pt,index) => {
-            return (
-                    <tr>
-                        <td>
-                            <label>{index+1}</label>
-                        </td>
-                        <td>
-                            <div className="media align-items-center">
-                                <a className="mr-3" href="">
-                                    <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy"/>
-                                </a>
-                                <div className="media-body d-flex">
-                                    <div>
-                                        <h4 className="m-0">{pt.nama}</h4>
-                                        <small className="text-muted">{pt.sk_pendirian} - {pt.website} - {pt.email}</small>
-                                        <p>{pt.alamat.jalan}</p>
-                                    </div>
-                                    <div className="ml-auto">
-                                        <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </td>
-                    </tr>
-            )
-            })
-        //}
-     }
-
-    render() {
-        // used for react select
-        const { selectedOptionMulti } = this.state;
-
-        
-
-        return (
-            <ContentWrapper>
-                <div className="content-heading">
-                    <div>Search
-                        <small>Search and filter results</small>
-                    </div>
-                </div>
-                <Row>
-                    <Col lg="9">
-                        <div className="form-group mb-4">
-                            <input className="form-control mb-2" type="text" id='searchInput' placeholder="Pencarian Nama Perguruan Tinggi"/>
-                            <div className="d-flex">
-                                <button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>Search</button>
-                                <div className="ml-auto">
-                                    {/* <label className="c-checkbox">
-                                        <input id="inlineCheckbox10" type="checkbox" defaultValue="option1"/>
-                                        <span className="fa fa-check"></span>Nama Perguruan Tinggi</label> */}
-                                    {/* <label className="c-checkbox">
-                                        <input id="inlineCheckbox20" type="checkbox" defaultValue="option2"/>
-                                        <span className="fa fa-check"></span>Pembina</label> */}
-                                    {/* <label className="c-checkbox">
-                                        <input id="inlineCheckbox30" type="checkbox" defaultValue="option3"/>
-                                        <span className="fa fa-check"></span>Apps</label> */}
-                                </div>
-                            </div>
-                        </div>
-                        {/* START card */}
-                        <div className="card card-default">
-                            <div className="card-header">
-                                {/* <CardTool refresh onRefresh={(_,done) => setTimeout(done,2000)}/> */}
-                                Search Results
-                            </div>
-                            {/* START table-responsive */}
-                            <Table striped bordered hover>
-                                <thead>
-                                    <tr>
-                                        {/* <th data-check-all="" className="wd-xxs">
-                                            <div className="checkbox c-checkbox">
-                                                <label className="m-0">
-                                                    <input type="checkbox"/>
-                                                    <span className="fa fa-check"></span>
-                                                </label>
-                                            </div>
-                                        </th> */}
-                                        <th>No. </th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {this.renderTableData()}
-
-                                </tbody>
-                            </Table>
-                            {/* END table-responsive */}
-                            <div className="card-footer">
-                                <div className="d-flex">
-                                    {/* <button className="btn btn-sm btn-secondary">Clear</button> */}
-                                    {/* <nav className="ml-auto">
-                                        <Pagination size="sm">
-                                            <PaginationItem active>
-                                                <PaginationLink>1</PaginationLink>
-                                            </PaginationItem>
-                                            <PaginationItem>
-                                                <PaginationLink>2</PaginationLink>
-                                            </PaginationItem>
-                                            <PaginationItem>
-                                                <PaginationLink>3</PaginationLink>
-                                            </PaginationItem>
-                                            <PaginationItem>
-                                                <PaginationLink next>»</PaginationLink>
-                                            </PaginationItem>
-                                        </Pagination>
-                                    </nav> */}
-                                </div>
-                            </div>
-                        </div>
-                        {/* END card */}
-                    </Col>
-                    <Col lg="3">
-                        <h3 className="m-0 pb-3">Filters</h3>
-                        <div className="form-group mb-4">
-                            <label className="col-form-label mb-2">by Pembina</label>
-                            <br/>
-                            <Select
-                                name="multi-select-name"
-                                multi
-                                simpleValue
-                                value={selectedOptionMulti}
-                                onChange={this.handleChangeSelectMulti}
-                                options={pembina}
-                            />
-                        </div>
-                        <Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>Apply</Button>
-                    </Col>
-                </Row>
-            </ContentWrapper>
-            );
-    }
-
-}
-
-export default Search;

store/actions/pelaporan.js

@@ -0,0 +1,77 @@
+export const CHANGE_THEME = "CHANGE_THEME";
+export const PELAPORAN_LIST_REQUEST = "PELAPORAN_LIST_REQUEST";
+export const PELAPORAN_LIST_SUCCESS = "PELAPORAN_LIST_SUCCESS";
+export const PELAPORAN_LIST_FAIL = "PELAPORAN_LIST_FAIL";
+export const PELAPORAN_DETAILS_REQUEST = "PELAPORAN_DETAILS_REQUEST";
+export const PELAPORAN_DETAILS_SUCCESS = "PELAPORAN_DETAILS_SUCCESS";
+export const PELAPORAN_DETAILS_FAIL = "PELAPORAN_DETAILS_FAIL";
+export const PELAPORAN_CREATE_REQUEST = "PELAPORAN_DETAILS_REQUEST";
+export const PELAPORAN_CREATE_SUCCESS = "PELAPORAN_DETAILS_SUCCESS";
+export const PELAPORAN_CREATE_FAIL = "PELAPORAN_DETAILS_FAIL";
+export const PELAPORAN_CREATE_RESET = "PELAPORAN_CREATE_RESET";
+
+/**
+ * Change current theme path
+ */
+
+export const listPelaporan = () => async (dispatch) => {
+	try {
+		dispatch({ type: PELAPORAN_LIST_REQUEST });
+
+		const res = await fetch("http://localhost:5000/pelaporan");
+		const { data } = await res.json();
+
+		dispatch({
+			type: PELAPORAN_LIST_SUCCESS,
+			payload: data,
+		});
+	} catch (error) {
+		dispatch({
+			type: PELAPORAN_LIST_FAIL,
+			payload: error.response && error.response.data.message ? error.response.data.message : error.message,
+		});
+	}
+};
+
+export const listPelaporanDetails = (number, ptId) => async (dispatch) => {
+	try {
+		dispatch({ type: PELAPORAN_DETAILS_REQUEST });
+
+		const res = await fetch(`http://localhost:5000/pelaporan?number=${number}&ptId=${ptId}`);
+		const { data } = await res.json();
+
+		dispatch({
+			type: PELAPORAN_DETAILS_SUCCESS,
+			payload: data,
+		});
+	} catch (error) {
+		dispatch({
+			type: PELAPORAN_DETAILS_FAIL,
+			payload: error.response && error.response.data.message ? error.response.data.message : error.message,
+		});
+	}
+};
+
+export const createPelaporan = (pelaporanResult) => async (dispatch) => {
+	try {
+		dispatch({
+			type: PELAPORAN_CREATE_REQUEST,
+		});
+
+		const res = await fetch("http://localhost:5000/pelaporan/create", {
+			method: "POST",
+			body: pelaporanResult,
+		});
+		const data = await res.json();
+
+		dispatch({
+			type: PELAPORAN_CREATE_SUCCESS,
+			payload: data,
+		});
+	} catch (error) {
+		dispatch({
+			type: PELAPORAN_CREATE_FAIL,
+			payload: error.response && error.response.data.message ? error.response.data.message : error.message,
+		});
+	}
+};