commit

components/Keberatan/TableSanksi.js

@@ -7,58 +7,56 @@ function TableSanksi({ listData, to, linkName }) {
 	return (
 		<div className="card b">
 			<div className="card-body">
-				{listData && (
-					<Datatable options={{ responsive: true }}>
-						<table className="table w-100">
-							<thead>
-								<tr>
-									<th>Nomor Sanksi</th>
-									<th>Keterangan Sanksi</th>
-									<th>Created</th>
-									<th>Status</th>
-									<th></th>
-								</tr>
-							</thead>
-							<tbody>
-								{listData.length
-									? listData.map((data) => {
-											return (
-												<tr key={data._id}>
-													<td>{data.sanksi.no_sanksi}</td>
-													<td>
-														<div className="media align-items-center">
-															<div className="media-body d-flex">
-																<div>
-																	<h4 className="m-0">Universitas Satyagama</h4>
-																	<p>{data.sanksi.description}</p>
-																</div>
+				<Datatable options={{ responsive: true }}>
+					<table className="table w-100">
+						<thead>
+							<tr>
+								<th>Nomor Sanksi</th>
+								<th>Keterangan Sanksi</th>
+								<th>Created</th>
+								<th>Status</th>
+								<th></th>
+							</tr>
+						</thead>
+						<tbody>
+							{listData.length
+								? listData.map((data) => {
+										return (
+											<tr key={data._id}>
+												<td>{data.sanksi.no_sanksi}</td>
+												<td>
+													<div className="media align-items-center">
+														<div className="media-body d-flex">
+															<div>
+																<h4 className="m-0">Universitas Satyagama</h4>
+																<p>{data.sanksi.description}</p>
 															</div>
 														</div>
-													</td>
-													<td>{moment(data.sanksi.createdAt).fromNow()}</td>
-													<td>{data.sanksi.keberatan.jawaban ? <div className="badge badge-info">Sudah Dijawab</div> : <div className="badge badge-danger">Belum Dijawab</div>}</td>
-													<td>
-														<div className="ml-auto">
-															<Link
-																href={{
-																	pathname: to,
-																	query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
-																}}
-															>
-																<Button color="primary" size="sm">
-																	{linkName}
-																</Button>
-															</Link>
-														</div>
-													</td>
-												</tr>
-											);
-									  })
-									: ""}
-							</tbody>
-						</table>
-					</Datatable>
-				)}
+													</div>
+												</td>
+												<td>{moment(data.sanksi.createdAt).fromNow()}</td>
+												<td>{data.sanksi.keberatan.jawaban ? <div className="badge badge-info">Sudah Dijawab</div> : <div className="badge badge-danger">Belum Dijawab</div>}</td>
+												<td>
+													<div className="ml-auto">
+														<Link
+															href={{
+																pathname: to,
+																query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
+															}}
+														>
+															<Button color="primary" size="sm">
+																{linkName}
+															</Button>
+														</Link>
+													</div>
+												</td>
+											</tr>
+										);
+								  })
+								: ""}
+						</tbody>
+					</table>
+				</Datatable>
 			</div>
 		</div>
 	);

components/PencabutanSanksi/TableSanksi.js

@@ -7,58 +7,56 @@ function TableSanksi({ listData, to, linkName }) {
 	return (
 		<div className="card b">
 			<div className="card-body">
-				{listData && (
-					<Datatable options={{ responsive: true }}>
-						<table className="table w-100">
-							<thead>
-								<tr>
-									<th>Nomor Sanksi</th>
-									<th>Keterangan Sanksi</th>
-									<th>Created</th>
-									<th>Status</th>
-									<th></th>
-								</tr>
-							</thead>
-							<tbody>
-								{listData.length
-									? listData.map((data) => {
-											return (
-												<tr key={data._id}>
-													<td>{data.sanksi.no_sanksi}</td>
-													<td>
-														<div className="media align-items-center">
-															<div className="media-body d-flex">
-																<div>
-																	<h4 className="m-0">Universitas Satyagama</h4>
-																	<p>{data.sanksi.description}</p>
-																</div>
+				<Datatable options={{ responsive: true }}>
+					<table className="table w-100">
+						<thead>
+							<tr>
+								<th>Nomor Sanksi</th>
+								<th>Keterangan Sanksi</th>
+								<th>Created</th>
+								<th>Status</th>
+								<th></th>
+							</tr>
+						</thead>
+						<tbody>
+							{listData.length
+								? listData.map((data) => {
+										return (
+											<tr key={data._id}>
+												<td>{data.sanksi.no_sanksi}</td>
+												<td>
+													<div className="media align-items-center">
+														<div className="media-body d-flex">
+															<div>
+																<h4 className="m-0">Universitas Satyagama</h4>
+																<p>{data.sanksi.description}</p>
 															</div>
 														</div>
-													</td>
-													<td>{moment(data.sanksi.createdAt).fromNow()}</td>
-													<td>{data.sanksi.cabut_sanksi.jawaban ? <div className="badge badge-info">Sudah Dijawab</div> : <div className="badge badge-danger">Belum Dijawab</div>}</td>
-													<td>
-														<div className="ml-auto">
-															<Link
-																href={{
-																	pathname: to,
-																	query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
-																}}
-															>
-																<Button color="primary" size="sm">
-																	{linkName}
-																</Button>
-															</Link>
-														</div>
-													</td>
-												</tr>
-											);
-									  })
-									: ""}
-							</tbody>
-						</table>
-					</Datatable>
-				)}
+													</div>
+												</td>
+												<td>{moment(data.sanksi.createdAt).fromNow()}</td>
+												<td>{data.sanksi.cabut_sanksi.jawaban ? <div className="badge badge-info">Sudah Dijawab</div> : <div className="badge badge-danger">Belum Dijawab</div>}</td>
+												<td>
+													<div className="ml-auto">
+														<Link
+															href={{
+																pathname: to,
+																query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
+															}}
+														>
+															<Button color="primary" size="sm">
+																{linkName}
+															</Button>
+														</Link>
+													</div>
+												</td>
+											</tr>
+										);
+								  })
+								: ""}
+						</tbody>
+					</table>
+				</Datatable>
 			</div>
 		</div>
 	);

pages/app/banding/detail.js

@@ -12,6 +12,7 @@ import { addJawabanBanding } from "@/actions/banding";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
 import { getPT } from "@/actions/PT";
+import Loader from "@/components/Common/Loader";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -134,73 +135,81 @@ class JawabanBanding extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl={9}>
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>
-											{sanksi.data && sanksi.data.length && <DetailSanksi data={sanksi.data[0]} />}
-											{sanksi.data && sanksi.data.length && <PermohonanPT data={sanksi.data[0].sanksi.banding} title="Permohonan Banding" />}
-											<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: "Dikabulkan", label: "Dikabulkan", className: "State-ACT" },
-															]}
-															required
-														/>
-														{/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<label className="row-form-label">Dokumen Jawaban:</label>
-													<div className="row-md-10">
-														<DropzoneWrapper className="" onDrop={this.onDrop}>
-															{({ getRootProps, getInputProps, isDragActive }) => {
-																return (
-																	<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
-																		<input {...getInputProps()} />
-																		<div className="dropzone-previews flex">
-																			{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+						{sanksi.data && sanksi.data.length ? (
+							<Col xl={9}>
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												<DetailSanksi data={sanksi.data[0]} />
+												<PermohonanPT data={sanksi.data[0].sanksi.banding} title="Permohonan Banding" />
+												<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: "Dikabulkan", label: "Dikabulkan", className: "State-ACT" },
+																]}
+																required
+															/>
+															{/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
+														</div>
+													</FormGroup>
+													<FormGroup>
+														<label className="row-form-label">Dokumen Jawaban:</label>
+														<div className="row-md-10">
+															<DropzoneWrapper className="" onDrop={this.onDrop}>
+																{({ getRootProps, getInputProps, isDragActive }) => {
+																	return (
+																		<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+																			<input {...getInputProps()} />
+																			<div className="dropzone-previews flex">
+																				{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																			</div>
+																			<div className="d-flex align-items-center">
+																				<small className="ml-auto">
+																					<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+																						Clear files
+																					</button>
+																				</small>
+																			</div>
 																		</div>
-																		<div className="d-flex align-items-center">
-																			<small className="ml-auto">
-																				<button type="button" className="btn btn-link" onClick={this.clearFiles}>
-																					Clear files
-																				</button>
-																			</small>
-																		</div>
-																	</div>
-																);
-															}}
-														</DropzoneWrapper>
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<div className="row-xl-10">
-														<Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.banding.jawaban ? this.toggleModal : this.handelSimpan}>
-															Simpan
-														</Button>
-													</div>
-												</FormGroup>
-											</form>
-										</Col>
-									</Row>
-								</CardBody>
-							</Card>
-						</Col>
-						<Col xl={3}>{pt?.data && <DetailPT data={pt.data[0]} />}</Col>
-					</Row>
-					<Row>
-						<Col>{sanksi.data && sanksi.data.length && <Riwayat data={sanksi.data[0].sanksi.banding.jawaban} />}</Col>
+																	);
+																}}
+															</DropzoneWrapper>
+														</div>
+													</FormGroup>
+													<FormGroup>
+														<div className="row-xl-10">
+															<Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.banding.jawaban ? this.toggleModal : this.handelSimpan}>
+																Simpan
+															</Button>
+														</div>
+													</FormGroup>
+												</form>
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							</Col>
+						) : (
+							<Loader />
+						)}
+						<Col xl={3}>{pt?.data ? <DetailPT data={pt.data[0]} /> : <Loader />}</Col>
 					</Row>
+					{sanksi.data && sanksi.data.length && (
+						<Row>
+							<Col>
+								<Riwayat data={sanksi.data[0].sanksi.banding.jawaban} />
+							</Col>
+						</Row>
+					)}
 				</div>
 				<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
 					<ModalBody>Apakah anda yakin ingin mengubah jawaban sebelumnya?</ModalBody>

pages/app/keberatan/detail.js

@@ -12,6 +12,7 @@ import { addJawabanKeberatan } from "@/actions/keberatan";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
 import { getPT } from "@/actions/PT";
+import Loader from "@/components/Common/Loader";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -111,8 +112,6 @@ class DetailKeberatan extends Component {
 				});
 			}
 		}
-
-		
 	};
 
 	render() {
@@ -137,85 +136,97 @@ class DetailKeberatan extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>{sanksi.data && sanksi.data.length && <DetailSanksi data={sanksi.data[0]} />}</Col>
-									</Row>
-									<Row>
-										<Col lg={12}>{sanksi.data && sanksi.data.length && <PermohonanPT data={sanksi.data[0].sanksi.keberatan} title="Permohonan Keberatan" />}</Col>
-									</Row>
-									<Row>
-										<Col lg={12}>
-											<p className="lead bb">Jawaban</p>
-											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
-												<FormGroup>
-													<label className="row-form-label">Status:</label>
-													<div className="row-md-10">
-														<Select
-															instanceId={selectInstanceId + 1}
-															value={this.state.selectedOption}
-															onChange={this.handleChangeSelect}
-															options={[
-																{ value: "Menolak", label: "Menolak", className: "State-ACT" },
-																{ value: "Mengubah Keputusan", label: "Mengubah Keputusan", className: "State-ACT" },
-																{ value: "Membatalkan Keputusan", label: "Membatalkan Keputusan", className: "State-ACT" },
-															]}
-															required
-														/>
-														{/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<label className="row-form-label">Keterangan Jawaban:</label>
-													<div className="row-md-10">
-														<Input type="textarea" value={this.state.keterangan} onChange={(e) => this.setState({ keterangan: e.target.value })} required />
-														{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<label className="row-form-label">Dokumen Jawaban:</label>
-													<div className="row-md-10">
-														<DropzoneWrapper className="" onDrop={this.onDrop}>
-															{({ getRootProps, getInputProps, isDragActive }) => {
-																return (
-																	<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
-																		<input {...getInputProps()} />
-																		<div className="dropzone-previews flex">
-																			{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
-																		</div>
-																		<div className="d-flex align-items-center">
-																			<small className="ml-auto">
-																				<button type="button" className="btn btn-link" onClick={this.clearFiles}>
-																					Clear files
-																				</button>
-																			</small>
+						{sanksi.data && sanksi.data.length ? (
+							<Col xl="9">
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												<DetailSanksi data={sanksi.data[0]} />
+											</Col>
+										</Row>
+										<Row>
+											<Col lg={12}>
+												<PermohonanPT data={sanksi.data[0].sanksi.keberatan} title="Permohonan Keberatan" />
+											</Col>
+										</Row>
+										<Row>
+											<Col lg={12}>
+												<p className="lead bb">Jawaban</p>
+												<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
+													<FormGroup>
+														<label className="row-form-label">Status:</label>
+														<div className="row-md-10">
+															<Select
+																instanceId={selectInstanceId + 1}
+																value={this.state.selectedOption}
+																onChange={this.handleChangeSelect}
+																options={[
+																	{ value: "Menolak", label: "Menolak", className: "State-ACT" },
+																	{ value: "Mengubah Keputusan", label: "Mengubah Keputusan", className: "State-ACT" },
+																	{ value: "Membatalkan Keputusan", label: "Membatalkan Keputusan", className: "State-ACT" },
+																]}
+																required
+															/>
+															{/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
+														</div>
+													</FormGroup>
+													<FormGroup>
+														<label className="row-form-label">Keterangan Jawaban:</label>
+														<div className="row-md-10">
+															<Input type="textarea" value={this.state.keterangan} onChange={(e) => this.setState({ keterangan: e.target.value })} required />
+															{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
+														</div>
+													</FormGroup>
+													<FormGroup>
+														<label className="row-form-label">Dokumen Jawaban:</label>
+														<div className="row-md-10">
+															<DropzoneWrapper className="" onDrop={this.onDrop}>
+																{({ getRootProps, getInputProps, isDragActive }) => {
+																	return (
+																		<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+																			<input {...getInputProps()} />
+																			<div className="dropzone-previews flex">
+																				{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																			</div>
+																			<div className="d-flex align-items-center">
+																				<small className="ml-auto">
+																					<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+																						Clear files
+																					</button>
+																				</small>
+																			</div>
 																		</div>
-																	</div>
-																);
-															}}
-														</DropzoneWrapper>
-													</div>
-												</FormGroup>
-												{/* <FormGroup>
+																	);
+																}}
+															</DropzoneWrapper>
+														</div>
+													</FormGroup>
+													{/* <FormGroup>
 													<div className="row-xl-10"> */}
-												<Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.keberatan.jawaban ? this.toggleModal : this.handelSimpan}>
-													Simpan
-												</Button>
-												{/* </div>
+													<Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.keberatan.jawaban ? this.toggleModal : this.handelSimpan}>
+														Simpan
+													</Button>
+													{/* </div>
 												</FormGroup> */}
-											</form>
-										</Col>
-									</Row>
-								</CardBody>
-							</Card>
-						</Col>
-						<Col xl="3">{pt?.data && <DetailPT data={pt.data[0]} />}</Col>
-					</Row>
-					<Row>
-						<Col>{sanksi.data && sanksi.data.length && <Riwayat data={sanksi.data[0].sanksi.keberatan.jawaban} />}</Col>
+												</form>
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							</Col>
+						) : (
+							<Loader />
+						)}
+						<Col xl="3">{pt?.data ? <DetailPT data={pt.data[0]} /> : <Loader />}</Col>
 					</Row>
+					{sanksi.data && sanksi.data.length && (
+						<Row>
+							<Col>
+								<Riwayat data={sanksi.data[0].sanksi.keberatan.jawaban} />
+							</Col>
+						</Row>
+					)}
 				</div>
 				<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
 					<ModalBody>Apakah anda yakin ingin mengubah jawaban sebelumnya?</ModalBody>

pages/app/keberatan/index.js

@@ -5,6 +5,7 @@ import CaseProgress from "@/components/Main/CaseProgress";
 import TableSanksi from "@/components/Keberatan/TableSanksi";
 import { getSanksi } from "@/actions/sanksi";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 class Keberatan extends Component {
 	constructor(props) {
@@ -31,9 +32,7 @@ class Keberatan extends Component {
 					<Col lg="4">
 						<CaseProgress />
 					</Col>
-					<Col lg="8">
-						<TableSanksi listData={sanksi.data} to="/app/keberatan/detail" linkName="Detail" />
-					</Col>
+					<Col lg="8">{sanksi?.data ? <TableSanksi listData={sanksi.data} to="/app/keberatan/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);

pages/app/pemantauan-perbaikan/detail.js

@@ -44,16 +44,22 @@ class PemantauanDokumen extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>{sanksi.data && sanksi.data.length && <DetailSanksi data={sanksi.data[0]} />}</Col>
-									</Row>
-								</CardBody>
-							</Card>
-						</Col>
-						<Col xl="3">{pt?.data && <DetailPT data={pt.data[0]} />}</Col>
+						{sanksi.data && sanksi.data.length ? (
+							<Col xl="9">
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												<DetailSanksi data={sanksi.data[0]} />
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							</Col>
+						) : (
+							<Loader />
+						)}
+						<Col xl="3">{pt?.data ? <DetailPT data={pt.data[0]} /> : <Loader />}</Col>
 					</Row>
 					<Row>
 						<Col>{sanksi.data && sanksi.data.length && <Riwayat data={sanksi.data[0].sanksi.doc_perbaikan} />}</Col>

pages/app/pemantauan-perbaikan/index.js

@@ -5,6 +5,7 @@ import CaseProgress from "@/components/Main/CaseProgress";
 import TableSanksi from "@/components/Main/TableSanksi";
 import { getSanksi } from "@/actions/sanksi";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 class PemantauanPerbaikan extends Component {
 	constructor(props) {
@@ -31,9 +32,7 @@ class PemantauanPerbaikan extends Component {
 					<Col lg="4">
 						<CaseProgress />
 					</Col>
-					<Col lg="8">
-						<TableSanksi listData={sanksi.data} to="/app/pemantauan-perbaikan/detail" linkName="Detail" />
-					</Col>
+					<Col lg="8">{sanksi?.data ? <TableSanksi listData={sanksi.data} to="/app/pemantauan-perbaikan/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);

pages/app/pencabutan-sanksi/detail.js

@@ -12,6 +12,7 @@ import { addJawabanCabutSanksi } from "@/actions/cabutSanksi";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { Row, Col, Card, CardBody, FormGroup, Button, Input, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
 import { getPT } from "@/actions/PT";
+import Loader from "@/components/Common/Loader";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -139,84 +140,92 @@ class JawabanPencabutanSanksi extends Component {
 						</div>
 					</div>
 					<Row>
-						<Col xl="9">
-							<Card className="card-default">
-								<CardBody>
-									<Row>
-										<Col lg={12}>
-											{sanksi.data && <DetailSanksi data={sanksi.data[0]} />}
-											{sanksi.data && <PermohonanPT data={sanksi.data[0].sanksi.cabut_sanksi} />}
-											<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" ? (
+						{sanksi.data ? (
+							<Col xl="9">
+								<Card className="card-default">
+									<CardBody>
+										<Row>
+											<Col lg={12}>
+												<DetailSanksi data={sanksi.data[0]} />
+												<PermohonanPT data={sanksi.data[0].sanksi.cabut_sanksi} />
+												<p className="lead bb">Jawaban</p>
+												<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 													<FormGroup>
-														<label className="row-form-label">Keterangan:</label>
+														<label className="row-form-label">Status:</label>
 														<div className="row-md-10">
-															<Input type="textarea" value={this.state.keterangan} onChange={this.setKeterangan} required />
-															{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
+															<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>
-												) : (
-													""
-												)}
-												<FormGroup>
-													<label className="row-form-label">Upload Dokumen:</label>
-													<div className="row-md-10">
-														<DropzoneWrapper className="" onDrop={this.onDrop}>
-															{({ getRootProps, getInputProps, isDragActive }) => {
-																return (
-																	<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
-																		<input {...getInputProps()} />
-																		<div className="dropzone-previews flex">
-																			{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
-																		</div>
-																		<div className="d-flex align-items-center">
-																			<small className="ml-auto">
-																				<button type="button" className="btn btn-link" onClick={this.clearFiles}>
-																					Clear files
-																				</button>
-																			</small>
+													{selectedOption && selectedOption.value === "Rekomendasi Perbaikan" ? (
+														<FormGroup>
+															<label className="row-form-label">Keterangan:</label>
+															<div className="row-md-10">
+																<Input type="textarea" value={this.state.keterangan} onChange={this.setKeterangan} required />
+																{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
+															</div>
+														</FormGroup>
+													) : (
+														""
+													)}
+													<FormGroup>
+														<label className="row-form-label">Upload Dokumen:</label>
+														<div className="row-md-10">
+															<DropzoneWrapper className="" onDrop={this.onDrop}>
+																{({ getRootProps, getInputProps, isDragActive }) => {
+																	return (
+																		<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
+																			<input {...getInputProps()} />
+																			<div className="dropzone-previews flex">
+																				{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
+																			</div>
+																			<div className="d-flex align-items-center">
+																				<small className="ml-auto">
+																					<button type="button" className="btn btn-link" onClick={this.clearFiles}>
+																						Clear files
+																					</button>
+																				</small>
+																			</div>
 																		</div>
-																	</div>
-																);
-															}}
-														</DropzoneWrapper>
-													</div>
-												</FormGroup>
-												<FormGroup>
-													<div className="row-xl-10">
-														<Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.cabut_sanksi.jawaban ? this.toggleModal : this.handleSimpan}>
-															Simpan
-														</Button>
-													</div>
-												</FormGroup>
-											</form>
-										</Col>
-									</Row>
-								</CardBody>
-							</Card>
-						</Col>
-						<Col xl="3">{pt.data && <DetailPT data={pt.data[0]} />}</Col>
-					</Row>
-					<Row>
-						<Col>{sanksi.data && <Riwayat data={sanksi.data[0]} />}</Col>
+																	);
+																}}
+															</DropzoneWrapper>
+														</div>
+													</FormGroup>
+													<FormGroup>
+														<div className="row-xl-10">
+															<Button color="primary" onClick={sanksi.data && sanksi.data.length && sanksi.data[0].sanksi.cabut_sanksi.jawaban ? this.toggleModal : this.handleSimpan}>
+																Simpan
+															</Button>
+														</div>
+													</FormGroup>
+												</form>
+											</Col>
+										</Row>
+									</CardBody>
+								</Card>
+							</Col>
+						) : (
+							<Loader />
+						)}
+						<Col xl="3">{pt.data ? <DetailPT data={pt.data[0]} /> : <Loader />}</Col>
 					</Row>
+					{sanksi.data && (
+						<Row>
+							<Col>
+								<Riwayat data={sanksi.data[0]} />
+							</Col>
+						</Row>
+					)}
 				</div>
 				<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
 					<ModalBody>Apakah anda yakin ingin mengubah jawaban sebelumnya?</ModalBody>

pages/app/pencabutan-sanksi/index.js

@@ -5,6 +5,7 @@ import CaseProgress from "@/components/Main/CaseProgress";
 import TableSanksi from "@/components/PencabutanSanksi/TableSanksi";
 import { getSanksi } from "@/actions/sanksi";
 import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
 
 class PencabutanSanksi extends Component {
 	constructor(props) {
@@ -31,9 +32,7 @@ class PencabutanSanksi extends Component {
 					<Col lg="4">
 						<CaseProgress />
 					</Col>
-					<Col lg="8">
-						<TableSanksi listData={sanksi.data} to="/app/pencabutan-sanksi/detail" linkName="Detail" />
-					</Col>
+					<Col lg="8">{sanksi?.data ? <TableSanksi listData={sanksi.data} to="/app/pencabutan-sanksi/detail" linkName="Detail" /> : <Loader />}</Col>
 				</Row>
 			</ContentWrapper>
 		);