commit lagi

pages/app/pemeriksaan.js

@@ -1,74 +1,119 @@
-import React, { Component } from 'react';
-import Router from 'next/router'
-import ContentWrapper from '@/components/Layout/ContentWrapper';
-import { Row, Col, Progress, Button } from 'reactstrap';
+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';
+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);
+	}
 
-    newProcessClick = (e, PT_ID) => {
-        //router = useRouter();
-        //const query = { ptId: PT_ID };
-        //    '/app/profile'
-        e.preventDefault();
-        Router.push(
-            {
-                pathname: '/app/pemeriksaan.new'
-            }
-        );
-    }
+	static getInitialProps = async () => {
+		const res = await fetch("http://localhost:1880/pelaporan");
+		let data = await res.json();
+		data = data.filter((e) => e.penjadwalan);
+		return { data };
+	};
 
-    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]}
+	renderTable = () => {
+		console.log(this.props.data);
+		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, value.pt_id, value._number)}>
+								Update Data
+							</button>
+						</div>
+					</td>
+				</tr>
+			);
+		});
+	};
 
-                                        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]}
+	newProcessClick = (e, PT_ID, number) => {
+		//router = useRouter();
+		//const query = { ptId: PT_ID };
+		//    '/app/profile'
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/pemeriksaan.new",
+			query: { ptId: PT_ID, number: number },
+		});
+	};
 
-                                        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">
+	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={{
@@ -90,11 +135,11 @@ class BugTracker extends Component {
                                         className="sparkline"/>
                                         <p className="mt-3">Assigned</p>
                                     </div> */}
-                                </div>
-                            </div>
-                            <table className="table bb">
-                                <tbody>
-                                    {/* <tr>
+								</div>
+							</div>
+							<table className="table bb">
+								<tbody>
+									{/* <tr>
                                         <td>
                                             <strong>Assigned Hours</strong>
                                         </td>
@@ -106,33 +151,33 @@ class BugTracker extends Component {
                                         </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>
+									<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>
+									{/* <tr>
                                         <td>
                                             <strong>Last Case Closed</strong>
                                         </td>
@@ -170,23 +215,23 @@ class BugTracker extends Component {
                                             </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">
+									<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">
@@ -198,67 +243,65 @@ class BugTracker extends Component {
                                 <button className="btn btn-sm btn-secondary" type="button">
                                     <em className="fa fa-print"></em>
                                 </button> */}
-                            {/* </div> */}
-                            {/* <div className="ml-auto">
+						{/* </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>
+						{/* </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>
-            );
-    }
-
+												<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)}>
+															Update Data
+														</button>
+													</div>
+												</td>
+											</tr> */}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
 }
 
 export default BugTracker;
-
-

pages/app/pemeriksaan.new.js

@@ -1,146 +1,267 @@
-import React, { Component } from 'react';
-import ContentWrapper from '@/components/Layout/ContentWrapper';
+import React, { Component } from "react";
+import Router from "next/router";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Datetime from "react-datetime";
+import "react-datetime/css/react-datetime.css";
 import {
-    Row,
-    Col,
-    Card,
-    CardHeader,
-    CardBody,
-    FormGroup,
-    FormFeedback,
-    FormText,
-    Label,
-    InputGroup,
-    InputGroupAddon,
-    InputGroupButtonDropdown,
-    InputGroupText,
-    Input,
-    Button,
-    DropdownToggle,
-    DropdownMenu,
-    CustomInput,
-    DropdownItem } from 'reactstrap';
+	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 styleHeaderText = {
+	color: "brown",
+};
 class FormStandard extends Component {
+	state = {
+		dropdownOpen: false,
+		splitButtonOpen: false,
+		keteranganLaporan: "",
+		tanggal: "",
+		files: [],
+	};
+
+	static getInitialProps({ query }) {
+		return { query };
+	}
+
+	setKeteranganPelaporan = (e) => {
+		this.setState({ keteranganLaporan: e.target.value });
+	};
+
+	setTanggal = (moment) => {
+		this.setState({ tanggal: moment.format("D MMMM YYYY") });
+	};
+
+	toggleDropDown = () => {
+		this.setState({
+			dropdownOpen: !this.state.dropdownOpen,
+		});
+	};
+
+	toggleSplit = () => {
+		this.setState({
+			splitButtonOpen: !this.state.splitButtonOpen,
+		});
+	};
+
+	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.props.query.number);
+		formdata.append("pt_id", this.props.query.ptId);
+		formdata.append("description", this.state.keteranganLaporan);
+		formdata.append("date", this.state.tanggal);
+		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/pemeriksaan",
+			});
+		}
+	};
+
+	insertData = async (data) => {
+		try {
+			const requestOptions = {
+				method: "POST",
+				body: data,
+			};
+
+			const inserted = await fetch("http://localhost:1880/pemeriksaan.create", requestOptions);
+			return inserted;
+		} catch (error) {
+			console.log("error", error);
+			return false;
+		}
+	};
 
-    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>
-            );
-    }
+	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>
+							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" disabled value={this.props.query.number} />
+												{/* <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">Tanggal</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">Keterangan Laporan</label>
+											<div className="col-md-10">
+												<Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} />
+												{/* <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" /> */}
+												<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>
+								</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;