udah dulu

actions/pelaporan.js

@@ -3,6 +3,7 @@ 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}`;
 		if (query.penjadwalan) url += "?penjadwalan=true";
 		if (query.pemeriksaan) url += "?pemeriksaan=true";
 		const res = await fetch(url);

components/Extras/calendar.view.js

@@ -3,7 +3,9 @@ import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";
 import { updateJadwal } from "../../actions/penjadwalan";
 import { getPelaporan } from "../../actions/pelaporan";
+import Link from "next/link";
 
+import Scrollable from "@/components/Common/Scrollable";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
@@ -32,6 +34,7 @@ class Calendar extends Component {
 			evNewName: "",
 			externalEvents: [],
 			dataLaporan: [],
+			larporan: {},
 			dataEvent: [],
 		};
 	}
@@ -47,15 +50,16 @@ class Calendar extends Component {
 			},
 		});
 
-		// await this.fetchData();
-		const pelaporan = await getPelaporan();
-		this.setState({ dataLaporan: pelaporan });
+		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];
+		// 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 (cek.penjadwalan) {
-			color = cek.penjadwalan.background_color;
+		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 }] });
 	}
@@ -103,11 +107,10 @@ class Calendar extends Component {
 		};
 
 		const update = await updateJadwal({ number, ptId }, data);
-		console.log(update);
 	};
 
 	render() {
-		const { externalEvents, selectedEvent } = this.state;
+		const { externalEvents, selectedEvent, laporan } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -115,10 +118,15 @@ class Calendar extends Component {
 						Jadwal Pemeriksaan
 						<small>Format pembuatan jadwal pemeriksaan v.0.1</small>
 					</div>
+					<div className="ml-auto">
+						<Link href="/app/penjadwalan" as="/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-3 col-lg-4">
+						<div className="col-xl-4 col-lg-5">
 							<div className="row">
 								<div className="col-lg-12 col-md-6 col-12">
 									<Card className="card-default" title="">
@@ -142,23 +150,119 @@ class Calendar extends Component {
 											</div>
 										</CardBody>
 									</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>
+									{/* Aside card */}
+									<div className="card b">
+										<CardHeader>
+											<CardTitle tag="h4">Detail Laporan</CardTitle>
+										</CardHeader>
+										<table className="table">
+											<tbody>
+												<tr>
+													<td>
+														<strong>Nomor Pelaporan</strong>
+													</td>
+													<td>1155937274981</td>
+												</tr>
+												<tr>
+													<td>
+														<strong>Perguruan Tinggi</strong>
+													</td>
+													<td>Satyagama</td>
+												</tr>
+												<tr>
+													<td>
+														<strong>Keterangan Laporan</strong>
+													</td>
+													<td>
+														<p>tes</p>
+													</td>
+												</tr>
+												<tr>
+													<td>
+														<strong>File Pendukung</strong>
+													</td>
+													<td>
+														<Scrollable height="120px" className="list-group">
+															<table className="table table-bordered bg-transparent">
+																<tbody>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-image"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				baground-lg.png
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				picture.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-word"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				applicat-diagrams.docx
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																</tbody>
+															</table>
+														</Scrollable>
+													</td>
+												</tr>
+											</tbody>
+										</table>
+										<p className="text-right">
+											<a className="btn btn-link" href="">
+												Open repository
+											</a>
+										</p>
 									</div>
-								)}
+									{/* end Aside card */}
+								</div>
 							</div>
 						</div>
-						<div className="col-xl-9 col-lg-8">
+						<div className="col-xl-8 col-lg-7">
 							<Card className="card-default">
 								<CardBody>
 									{/* START calendar */}

pages/app/banding/detail.js

@@ -0,0 +1,333 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import Link from "next/link";
+import Select from "react-select";
+import Scrollable from "@/components/Common/Scrollable";
+
+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";
+
+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 styleHeaderText = {
+	color: "brown",
+};
+
+const selectInstanceId = 1;
+
+class JawabanBanding extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedOption: null,
+			files: [],
+		};
+	}
+
+	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: [],
+		});
+	};
+
+	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 (
+			<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>
+							Permohonan Banding
+							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
+						</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">
+								{/* <CardHeader>
+									<label>Informasi Dokumen</label>
+								</CardHeader> */}
+								<CardBody>
+									<Row>
+										<Col lg="6">
+											<p className="lead bb">Detail</p>
+											<form className="form-horizontal">
+												<FormGroup row>
+													<Col md="4">Order ID:</Col>
+													<Col md="8">
+														<strong>987654</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Purchased On:</Col>
+													<Col md="8">
+														<strong>03/11/2015 10:10</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Client Name:</Col>
+													<Col md="8">
+														<strong>Addison Nichols</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Items:</Col>
+													<Col md="8">
+														<strong>547</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Amount:</Col>
+													<Col md="8">
+														<strong>$515.20</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Shipment:</Col>
+													<Col md="8">
+														<strong>04/10/2015</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Status</Col>
+													<Col md="8">
+														<div className="badge badge-info">Shipped</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>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-image"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				baground-lg.png
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				picture.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-word"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				applicat-diagrams.docx
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																</tbody>
+															</table>
+														</Scrollable>
+													</Col>
+												</FormGroup>
+											</form>
+										</Col>
+										<Col lg={6}>
+											<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: "ditolak", label: "Ditolak", className: "State-ACT" },
+															]}
+															required
+														/>
+														{/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
+													</div>
+												</FormGroup>
+												<FormGroup>
+													<label className="row-form-label">Upload 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 className="btn btn-sm btn-primary" type="submit">
+															Simpan
+														</button>
+													</div>
+												</FormGroup>
+											</form>
+										</Col>
+									</Row>
+								</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 JawabanBanding;

pages/app/banding.js → pages/app/banding/index.js

@@ -1,14 +1,14 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress } from "reactstrap";
-import { getPelaporan } from "../../actions/pelaporan";
+import { Row, Col, Progress, Button } from "reactstrap";
+import { getPelaporan } from "../../../actions/pelaporan";
 
 import Sparkline from "@/components/Common/Sparklines";
 import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 
-class Pelaporan extends Component {
+class Banding extends Component {
 	constructor(props) {
 		super(props);
 	}
@@ -25,10 +25,10 @@ class Pelaporan extends Component {
 		});
 	};
 
-	detailLaporanClick = (e, ptId, number) => {
+	detailBandingClick = (e, ptId, number) => {
 		e.preventDefault();
 		Router.push({
-			pathname: "/app/pelaporan/detail",
+			pathname: "/app/banding/detail",
 			query: { ptId, number },
 		});
 	};
@@ -126,7 +126,7 @@ class Pelaporan extends Component {
 												<th>Description</th>
 												<th>Created</th>
 												<th>Status</th>
-												<th></th>
+												{/* <th></th> */}
 											</tr>
 										</thead>
 										<tbody>
@@ -147,11 +147,13 @@ class Pelaporan extends Component {
 															</div>
 														</td>
 														<td>{moment(value.createdAt).fromNow()}</td>
-														<td>
+														{/* <td>
 															<div className="inline wd-xxs badge badge-success">open</div>
-														</td>
+														</td> */}
 														<td>
-															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+															<Button color="primary" onClick={(e) => this.detailBandingClick(e, value.pt_id, value.number)}>
+																Detail
+															</Button>
 														</td>
 													</tr>
 												);
@@ -168,4 +170,4 @@ class Pelaporan extends Component {
 	}
 }
 
-export default Pelaporan;
+export default Banding;

pages/app/keberatan/detail.js

@@ -0,0 +1,341 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import Link from "next/link";
+import Select from "react-select";
+import Scrollable from "@/components/Common/Scrollable";
+
+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";
+
+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 styleHeaderText = {
+	color: "brown",
+};
+
+const selectInstanceId = 1;
+
+class UploadKeberatan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedOption: null,
+			files: [],
+		};
+	}
+
+	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: [],
+		});
+	};
+
+	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 (
+			<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>
+							Jawaban Permohonan Keberatan
+							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
+						</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">
+								{/* <CardHeader>
+									<label>Informasi Dokumen</label>
+								</CardHeader> */}
+								<CardBody>
+									<Row>
+										<Col lg="6">
+											<p className="lead bb">Detail</p>
+											<form className="form-horizontal">
+												<FormGroup row>
+													<Col md="4">Order ID:</Col>
+													<Col md="8">
+														<strong>987654</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Purchased On:</Col>
+													<Col md="8">
+														<strong>03/11/2015 10:10</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Client Name:</Col>
+													<Col md="8">
+														<strong>Addison Nichols</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Items:</Col>
+													<Col md="8">
+														<strong>547</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Amount:</Col>
+													<Col md="8">
+														<strong>$515.20</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Shipment:</Col>
+													<Col md="8">
+														<strong>04/10/2015</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Status</Col>
+													<Col md="8">
+														<div className="badge badge-info">Shipped</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>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-image"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				baground-lg.png
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				picture.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-word"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				applicat-diagrams.docx
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																</tbody>
+															</table>
+														</Scrollable>
+													</Col>
+												</FormGroup>
+											</form>
+										</Col>
+										<Col lg={6}>
+											<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 Dokumen</label>
+													<div className="row-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>
+													<label className="row-form-label">Upload 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 className="btn btn-sm btn-primary" type="submit">
+															Simpan
+														</button>
+													</div>
+												</FormGroup>
+											</form>
+										</Col>
+									</Row>
+								</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 UploadKeberatan;

pages/app/keberatan.js → pages/app/keberatan/index.js

@@ -1,14 +1,14 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress } from "reactstrap";
-import { getPelaporan } from "../../actions/pelaporan";
+import { Row, Col, Progress, Button } from "reactstrap";
+import { getPelaporan } from "../../../actions/pelaporan";
 
 import Sparkline from "@/components/Common/Sparklines";
 import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 
-class Pelaporan extends Component {
+class Keberatan extends Component {
 	constructor(props) {
 		super(props);
 	}
@@ -25,11 +25,10 @@ class Pelaporan extends Component {
 		});
 	};
 
-	detailLaporanClick = (e, ptId, number) => {
+	detailKeberatanClick = (e, ptId, number) => {
 		e.preventDefault();
 		Router.push({
-			pathname: "/app/pelaporan/detail",
-			query: { ptId, number },
+			pathname: "/app/keberatan/detail",
 		});
 	};
 
@@ -126,7 +125,6 @@ class Pelaporan extends Component {
 												<th>Description</th>
 												<th>Created</th>
 												<th>Status</th>
-												<th></th>
 											</tr>
 										</thead>
 										<tbody>
@@ -147,11 +145,13 @@ class Pelaporan extends Component {
 															</div>
 														</td>
 														<td>{moment(value.createdAt).fromNow()}</td>
-														<td>
+														{/* <td>
 															<div className="inline wd-xxs badge badge-success">open</div>
-														</td>
+														</td> */}
 														<td>
-															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+															<Button color="primary" onClick={(e) => this.detailKeberatanClick(e, value.pt_id, value.number)}>
+																Detail
+															</Button>
 														</td>
 													</tr>
 												);
@@ -168,4 +168,4 @@ class Pelaporan extends Component {
 	}
 }
 
-export default Pelaporan;
+export default Keberatan;

pages/app/pelaporan/new.js

@@ -3,6 +3,7 @@ import Router from "next/router";
 import { connect } from "react-redux";
 import { getPelanggaran } from "../../../actions/pelanggaran";
 import { createPelaporan } from "../../../actions/pelaporan";
+import Link from "next/link";
 
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Select from "react-select";
@@ -169,6 +170,11 @@ class FormStandard extends Component {
 							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">

pages/app/pelaporan/search.js

@@ -2,6 +2,8 @@ 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";
@@ -139,6 +141,11 @@ class Search extends Component {
 						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">

pages/app/pemantauan-perbaikan/detail.js

@@ -0,0 +1,97 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import Link from "next/link";
+
+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 UploadKeberatan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
+
+	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>
+							Detail Pemantauan Perbaikan
+							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
+						</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">
+								<CardHeader>
+									<label>Informasi Dokumen</label>
+								</CardHeader>
+								<CardBody></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 UploadKeberatan;

pages/app/pemantauan-perbaikan/index.js

@@ -1,16 +1,20 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress } from "reactstrap";
+import { Row, Col, Progress, Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from "reactstrap";
 import { getPelaporan } from "../../../actions/pelaporan";
 
 import Sparkline from "@/components/Common/Sparklines";
 import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 
-class Pelaporan extends Component {
+class PemantauanPerbaikan extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			modal: false,
+			dataModal: {},
+		};
 	}
 
 	static getInitialProps = async () => {
@@ -25,14 +29,32 @@ class Pelaporan extends Component {
 		});
 	};
 
-	detailLaporanClick = (e, ptId, number) => {
+	detailPemantauanPerbaikanClick = (e, ptId, number) => {
 		e.preventDefault();
 		Router.push({
-			pathname: "/app/pelaporan/detail",
-			query: { ptId, number },
+			pathname: "/app/pemantauan-perbaikan/detail",
+			// query: { ptId, number },
 		});
 	};
 
+	firstModalClick = (value) => {
+		this.setState({ dataModal: value });
+		this.toggleModal();
+	};
+
+	toggleModal = () => {
+		this.setState({
+			modal: !this.state.modal,
+		});
+	};
+
+	renderModal = () => (
+		<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
+			<ModalHeader toggle={this.toggleModal}>Detail {this.state.dataModal._number}</ModalHeader>
+			<ModalBody></ModalBody>
+		</Modal>
+	);
+
 	render() {
 		const { pelaporan } = this.props;
 		return (
@@ -126,7 +148,6 @@ class Pelaporan extends Component {
 												<th>Description</th>
 												<th>Created</th>
 												<th>Status</th>
-												<th></th>
 											</tr>
 										</thead>
 										<tbody>
@@ -147,11 +168,15 @@ class Pelaporan extends Component {
 															</div>
 														</td>
 														<td>{moment(value.createdAt).fromNow()}</td>
+														{/* <td>
+														<div className="inline wd-xxs badge badge-success">open</div>
+													</td> */}
 														<td>
-															<div className="inline wd-xxs badge badge-success">open</div>
-														</td>
-														<td>
-															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+															<Button color="primary" onClick={(e) => this.detailPemantauanPerbaikanClick(e)}>
+																Detail
+															</Button>
+
+															{/* <button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button> */}
 														</td>
 													</tr>
 												);
@@ -163,9 +188,10 @@ class Pelaporan extends Component {
 						</div>
 					</Col>
 				</Row>
+				{this.renderModal()}
 			</ContentWrapper>
 		);
 	}
 }
 
-export default Pelaporan;
+export default PemantauanPerbaikan;

pages/app/pemeriksaan/new.js

@@ -6,6 +6,7 @@ import moment from "moment";
 import { insertPemeriksaan } from "../../../actions/pemeriksaan";
 import "react-datetime/css/react-datetime.css";
 import Datatable from "@/components/Tables/Datatable";
+import Link from 'next/link'
 import {
 	Row,
 	Col,
@@ -153,6 +154,11 @@ class FormStandard extends Component {
 							Evaluasi Data
 							<small>Form update data evaluasi v.0.1</small>
 						</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">

pages/app/pencabutan-sanksi/detail.js

@@ -0,0 +1,345 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import Link from "next/link";
+import Select from "react-select";
+import Scrollable from "@/components/Common/Scrollable";
+
+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";
+
+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 styleHeaderText = {
+	color: "brown",
+};
+
+const selectInstanceId = 1;
+
+class JawabanPencabutanSanksi extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedOption: null,
+			files: [],
+		};
+	}
+
+	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: [],
+		});
+	};
+
+	render() {
+		const { files, selectedOption } = this.state;
+		console.log(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>
+							Permohonan Pencabutan Sanksi
+							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
+						</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">
+								{/* <CardHeader>
+									<label>Informasi Dokumen</label>
+								</CardHeader> */}
+								<CardBody>
+									<Row>
+										<Col lg="6">
+											<p className="lead bb">Detail</p>
+											<form className="form-horizontal">
+												<FormGroup row>
+													<Col md="4">Order ID:</Col>
+													<Col md="8">
+														<strong>987654</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Purchased On:</Col>
+													<Col md="8">
+														<strong>03/11/2015 10:10</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Client Name:</Col>
+													<Col md="8">
+														<strong>Addison Nichols</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Items:</Col>
+													<Col md="8">
+														<strong>547</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Amount:</Col>
+													<Col md="8">
+														<strong>$515.20</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Shipment:</Col>
+													<Col md="8">
+														<strong>04/10/2015</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Status</Col>
+													<Col md="8">
+														<div className="badge badge-info">Shipped</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>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-image"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				baground-lg.png
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				picture.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-word"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				applicat-diagrams.docx
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																	<tr>
+																		<td>
+																			<em className="fa-lg far fa-file-code"></em>
+																		</td>
+																		<td>
+																			<a className="text-muted" href="">
+																				database.controller.js
+																			</a>
+																		</td>
+																	</tr>
+																</tbody>
+															</table>
+														</Scrollable>
+													</Col>
+												</FormGroup>
+											</form>
+										</Col>
+										<Col lg={6}>
+											<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.keteranganLaporan} onChange={this.setKeteranganPelaporan} required />
+															{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
+														</div>
+													</FormGroup>
+												) : (
+													""
+												)}
+												<FormGroup>
+													<label className="row-form-label">{selectedOption && selectedOption.value === "diterima" ? "Upload Dokumen" : "Usulan Perbaikan"}</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 className="btn btn-sm btn-primary" type="submit">
+															Simpan
+														</button>
+													</div>
+												</FormGroup>
+											</form>
+										</Col>
+									</Row>
+								</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 JawabanPencabutanSanksi;

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

@@ -1,14 +1,14 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress } from "reactstrap";
-import { getPelaporan } from "../../actions/pelaporan";
+import { Row, Col, Progress, Button } from "reactstrap";
+import { getPelaporan } from "../../../actions/pelaporan";
 
 import Sparkline from "@/components/Common/Sparklines";
 import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
 
-class Pelaporan extends Component {
+class PencabutanSanksi extends Component {
 	constructor(props) {
 		super(props);
 	}
@@ -21,15 +21,15 @@ class Pelaporan extends Component {
 	newReportClick = (e) => {
 		e.preventDefault();
 		Router.push({
-			pathname: "/app/pelaporan/search",
+			pathname: "/app/pencabutan-sanksi/detail",
 		});
 	};
 
-	detailLaporanClick = (e, ptId, number) => {
+	detailPencabutanSanksiClick = (e, ptId, number) => {
 		e.preventDefault();
 		Router.push({
-			pathname: "/app/pelaporan/detail",
-			query: { ptId, number },
+			pathname: "/app/pencabutan-sanksi/detail",
+			// query: { ptId, number },
 		});
 	};
 
@@ -126,7 +126,6 @@ class Pelaporan extends Component {
 												<th>Description</th>
 												<th>Created</th>
 												<th>Status</th>
-												<th></th>
 											</tr>
 										</thead>
 										<tbody>
@@ -148,10 +147,9 @@ class Pelaporan extends Component {
 														</td>
 														<td>{moment(value.createdAt).fromNow()}</td>
 														<td>
-															<div className="inline wd-xxs badge badge-success">open</div>
-														</td>
-														<td>
-															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
+															<Button color="primary" onClick={(e) => this.detailPencabutanSanksiClick(e, value.pt_id, value.number)}>
+																Detail
+															</Button>
 														</td>
 													</tr>
 												);
@@ -168,4 +166,4 @@ class Pelaporan extends Component {
 	}
 }
 
-export default Pelaporan;
+export default PencabutanSanksi;

pages/app/pt/keberatan/index.js

@@ -1,16 +1,41 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Row, Col, Progress } from "reactstrap";
+import { Row, Col, Progress, Modal, ModalHeader, ModalBody, ModalFooter, Button, Table } from "reactstrap";
 import { getPelaporan } from "../../../../actions/pelaporan";
 
 import Sparkline from "@/components/Common/Sparklines";
 import Datatable from "@/components/Tables/Datatable";
 import moment from "moment";
+import Swal from "@/components/Common/Swal";
+import swal from "sweetalert";
 
-class Pelaporan extends Component {
+class Keberatan extends Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			modal: false,
+			swalOption: {
+				title: "Are you sure?",
+				text: "Your will not be able to recover this imaginary file!",
+				buttons: {
+					cancel: {
+						text: "Tidak",
+						value: false,
+						visible: true,
+						className: "bg-danger",
+						closeModal: true,
+					},
+					confirm: {
+						text: "Ya",
+						value: true,
+						visible: true,
+						className: "bg-primary",
+						closeModal: true,
+					},
+				},
+			},
+		};
 	}
 
 	static getInitialProps = async () => {
@@ -18,22 +43,35 @@ class Pelaporan extends Component {
 		return { pelaporan };
 	};
 
-	newReportClick = (e) => {
-		e.preventDefault();
-		Router.push({
-			pathname: "/app/pelaporan/search",
+	toggleModal = (value, number) => {
+		if (value) {
+			console.log("Ya");
+		} else {
+			console.log("Tidak");
+		}
+		this.setState({
+			modal: !this.state.modal,
 		});
 	};
 
-	detailLaporanClick = (e, ptId, number) => {
+	permohonanClick = (e, ptId, number) => {
 		e.preventDefault();
-		Router.push({
-			pathname: "/app/pelaporan/detail",
-			query: { ptId, number },
+		// Router.push({
+		// 	pathname: "/app/pelaporan/search",
+		// });
+		swal(this.state.swalOption).then((isConfirm) => {
+			if (isConfirm) {
+				console.log("berhasil");
+				// swal("Deleted!", "Your imaginary file has been deleted.", "success");
+			} else {
+				console.log("gagal");
+				// swal("Cancelled", "Your imaginary file is safe :)", "error");
+			}
 		});
 	};
 
 	render() {
+		console.log(this.state);
 		const { pelaporan } = this.props;
 		return (
 			<ContentWrapper>
@@ -118,47 +156,73 @@ class Pelaporan extends Component {
 					<Col lg="8">
 						<div className="card b">
 							<div className="card-body">
-								<Datatable options={{ responsive: true }}>
-									<table className="table w-100">
-										<thead>
-											<tr>
-												<th>#ID</th>
-												<th>Description</th>
-												<th>Created</th>
-												<th>Status</th>
-												<th></th>
-											</tr>
-										</thead>
-										<tbody>
-											{pelaporan.data.map((value) => {
-												return (
-													<tr key={value._id}>
-														<td>BI:{value._number}</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>{value.description}</p>
-																	</div>
+								<Table options={{ responsive: true }}>
+									{/* <table className="table w-100"> */}
+									<thead>
+										<tr>
+											<th>#ID</th>
+											<th>Description</th>
+											<th>Created</th>
+											<th>Status</th>
+											<th></th>
+										</tr>
+									</thead>
+									<tbody>
+										{pelaporan.data.map((value) => {
+											return (
+												<tr key={value._id}>
+													<td>BI:{value._number}</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>{value.description}</p>
 																</div>
 															</div>
-														</td>
-														<td>{moment(value.createdAt).fromNow()}</td>
-														<td>
-															<div className="inline wd-xxs badge badge-success">open</div>
-														</td>
-														<td>
-															<button onClick={(e) => this.detailLaporanClick(e, value.pt_id, value.number)}>Detail</button>
-														</td>
-													</tr>
-												);
-											})}
-										</tbody>
-									</table>
-								</Datatable>
+														</div>
+													</td>
+													<td>{moment(value.createdAt).fromNow()}</td>
+													<td>
+														<div className="inline wd-xxs badge badge-success">open</div>
+													</td>
+													<td>
+														<Button color="primary" onClick={this.toggleModal}>
+															Ajukan
+														</Button>
+														<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
+															<ModalHeader toggle={this.toggleModal}>Permohonan Keberatan</ModalHeader>
+															<ModalBody>apakah anda akan mengajukan permohonan keberatan atas pengenaan sanksi?</ModalBody>
+															<ModalFooter>
+																<Button color="primary" onClick={() => this.toggleModal(true, value.ptId, value._number)}>
+																	Ya
+																</Button>{" "}
+																<Button color="secondary" onClick={() => this.toggleModal(false, value.ptId, value._number)}>
+																	Tidak
+																</Button>
+															</ModalFooter>
+														</Modal>
+														{/* <Swal options={this.state.swalOption} callback={this.swalCallback} className="btn btn-primary">
+															Ajukan
+														</Swal> */}
+														{/* START card */}
+														{/* Button trigger modal */}
+														{/* <Button color="primary" onClick={(e) => this.permohonanClick(e, value.pt_id, value.number)}>
+															Ajukan
+														</Button> */}
+														{/* END card */}
+														{/* <Button onClick={(e) => this.permohonanClick(e, value.pt_id, value.number)} className="btn-primary">
+															Ajukan
+														</Button> */}
+													</td>
+												</tr>
+											);
+										})}
+									</tbody>
+									{/* </table> */}
+								</Table>
 							</div>
 						</div>
 					</Col>
@@ -168,4 +232,4 @@ class Pelaporan extends Component {
 	}
 }
 
-export default Pelaporan;
+export default Keberatan;

pages/app/pt/keberatan/upload.js

@@ -0,0 +1,97 @@
+import React, { Component } from "react";
+import Router from "next/router";
+import Link from "next/link";
+
+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 UploadKeberatan extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
+
+	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>
+							Upload Dokumen Permohonan Keberatan
+							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
+						</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">
+								<CardHeader>
+									<label>Informasi Dokumen</label>
+								</CardHeader>
+								<CardBody></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 UploadKeberatan;