ptb-fe/pages/app/pemantauan-perbaikan/detail.js

import React, { Component } from "react";
import Router from "next/router";
import Link from "next/link";
import Datatable from "@/components/Tables/Datatable";

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">
								<CardBody>
									<Datatable options={{ responsive: true }}>
										<table className="table table-striped my-4 w-100">
											<thead>
												<tr>
													<th>Tanggal</th>
													<th>Dokumen Perbaikan</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>23/01/2022</td>
													<td>
														<em className="fa-lg far fa-file-code"></em>
														<a className="text-muted" href="">
															database.controller.js
														</a>
													</td>
												</tr>
												<tr>
													<td>23/01/2022</td>
													<td>
														<em className="fa-lg far fa-file-code"></em>
														<a className="text-muted" href="">
															database.controller.js
														</a>
													</td>
												</tr>
												<tr>
													<td>23/01/2022</td>
													<td>
														<em className="fa-lg far fa-file-code"></em>
														<a className="text-muted" href="">
															database.controller.js
														</a>
													</td>
												</tr>
											</tbody>
										</table>
									</Datatable>
								</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;