udah deh

pages/_app.js

@@ -43,17 +43,20 @@ import "simple-line-icons/css/simple-line-icons.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";
 
 // https://nextjs.org/docs/#custom-app
-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";
+
 class MyApp extends App {
 	static async getInitialProps({ Component, ctx }) {
 		let pageProps = {};

pages/app/pemeriksaan/new.js

@@ -3,10 +3,10 @@ import Router from "next/router";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import Datetime from "react-datetime";
 import moment from "moment";
+import Scrollable from "@/components/Common/Scrollable";
 import { insertPemeriksaan } from "../../../actions/pemeriksaan";
-import "react-datetime/css/react-datetime.css";
 import Datatable from "@/components/Tables/Datatable";
-import Link from 'next/link'
+import Link from "next/link";
 import {
 	Row,
 	Col,
@@ -47,6 +47,8 @@ const styleHeaderText = {
 	color: "brown",
 };
 
+const selectInstanceId = 1;
+
 class FormStandard extends Component {
 	state = {
 		dropdownOpen: false,
@@ -163,136 +165,177 @@ class FormStandard extends Component {
 					<Row>
 						<Col xl="9">
 							<Card className="card-default">
-								<CardHeader>
-									<label>Informasi Evaluasi</label>
-								</CardHeader>
 								<CardBody>
-									<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.props.query.number} />
-												{/* <span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span> */}
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Tanggal Dokumen</label>
-											<div className="col-md-10">
-												<Datetime inputProps={{ className: "form-control" }} value={this.state.tanggal} onChange={this.setTanggal} />
-												{/* <span className="form-text">Tanggal</span> */}
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Judul Dokumen</label>
-											<div className="col-md-10">
-												<Input type="text" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} />
-												{/* <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 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>
-												<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>
-									<hr className="my-4" />
-									<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.props.query.number} />
-												{/* <span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span> */}
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Tanggal Dokumen</label>
-											<div className="col-md-10">
-												<Datetime inputProps={{ className: "form-control" }} value={this.state.tanggal} onChange={this.setTanggal} />
-												{/* <span className="form-text">Tanggal</span> */}
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Judul Dokumen</label>
-											<div className="col-md-10">
-												<Input type="text" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} />
-												{/* <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 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>
-												<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>
-									<hr className="my-4" />
-									<Datatable options={{ responsive: true }}>
-										<table className="table w-100">
-											<thead>
-												<tr>
-													<th>Created</th>
-													<th>Title</th>
-													<th>Status</th>
-												</tr>
-											</thead>
-											<tbody></tbody>
-										</table>
-									</Datatable>
+									<Row>
+										<Col lg="6">
+											<p className="lead bb">Detail Laporan</p>
+											<form className="form-horizontal">
+												<FormGroup row>
+													<Col md="4">Nomor Laporan:</Col>
+													<Col md="8">
+														<strong>987654</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="70px" className="list-group">
+															<ul>
+																<li>tes</li>
+																<li>tes</li>
+																<li>tes</li>
+															</ul>
+														</Scrollable>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Deskripsi Laporan:</Col>
+													<Col md="8">Addison Nichols</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Dibuat Pada:</Col>
+													<Col md="8">
+														<strong>23 Januari 2022</strong>
+													</Col>
+												</FormGroup>
+												<FormGroup row>
+													<Col md="4">Status</Col>
+													<Col md="8">
+														<div className="badge badge-info">Ditindaklanjuti</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">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.keteranganLaporan} onChange={this.setKeteranganPelaporan} />
+														{/* <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>
+										</Col>
+									</Row>
 								</CardBody>
 							</Card>
 							{/* END card */}