form border 0.5px, btn swalert #3e3a8e

pages/laporan/new/index.js

@@ -248,7 +248,7 @@ class App extends Component {
       swal.fire({
         title: "Kode verifikasi salah",
         icon: "error",
-        confirmButtonColor: "#6FB9DE",
+        confirmButtonColor: "#3e3a8e",
       });
       this.setState({ error: "Kode verifikasi tidak valid" });
     } else {
@@ -256,7 +256,7 @@ class App extends Component {
       swal.fire({
         title: "Data berhasil dikirim",
         icon: "success",
-        confirmButtonColor: "#6FB9DE",
+        confirmButtonColor: "#3e3a8e",
       });
       this.toggleModal();
       Router.push("/laporan/new");

pages/pemantauan.js

@@ -1,6 +1,21 @@
 import React, { Component } from "react";
 import BasePage from "@/components/Layout/BasePage";
-import { Row, Col, FormGroup, Input, Card, CardBody, Button, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
+import {
+  Row,
+  Col,
+  FormGroup,
+  Input,
+  Card,
+  CardBody,
+  Button,
+  Navbar,
+  NavItem,
+  NavLink,
+  NavbarBrand,
+  NavbarToggler,
+  Nav,
+  Collapse,
+} from "reactstrap";
 import Link from "next/link";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { getPelaporanPublic } from "@/actions/pelaporan";
@@ -15,158 +30,184 @@ import "react-toastify/dist/ReactToastify.css";
 import swal from "sweetalert2";
 
 const menu = [
-	{
-		title: "Home",
-		path: "/app",
-	},
-	{
-		title: "Buat Laporan",
-		path: "/laporan/new",
-	},
-	{
-		title: "Pemantauan",
-		path: "/pemantauan",
-	},
+  {
+    title: "Home",
+    path: "/app",
+  },
+  {
+    title: "Buat Laporan",
+    path: "/laporan/new",
+  },
+  {
+    title: "Pemantauan",
+    path: "/pemantauan",
+  },
 ];
 
 const pemantauanSchema = Yup.object().shape({
-	no_laporan: Yup.string().required("Harap Diisi"),
-	no_hp: Yup.number().notRequired("Harap Diisi"),
+  no_laporan: Yup.string().required("Harap Diisi"),
+  no_hp: Yup.number().notRequired("Harap Diisi"),
 });
 class App extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			isOpen: false,
-			no_laporan: "",
-			no_hp: "",
-			msgError: [],
-			laporan: null,
-			log: null,
-		};
-	}
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      no_laporan: "",
+      no_hp: "",
+      msgError: [],
+      laporan: null,
+      log: null,
+    };
+  }
 
-	static getInitialProps = ({ pathname }) => ({ pathname });
+  static getInitialProps = ({ pathname }) => ({ pathname });
 
-	toggleCollapse = () => {
-		this.setState({
-			isOpen: !this.state.isOpen,
-		});
-	};
+  toggleCollapse = () => {
+    this.setState({
+      isOpen: !this.state.isOpen,
+    });
+  };
 
+  handleLihatPemantaun = async (data) => {
+    const { no_hp, no_laporan } = data;
+    // const toastid = toast.loading("Please wait...");
+    const log = await getLogPublic({ no_hp, no_laporan });
+    if (log.data) {
+      this.setState({ laporan: log.data.laporan, log: log.data.pemantauan });
+      // swal.fire("Data ditemukan", "", "success");
+      swal.fire({
+        title: "Data ditemukan",
+        icon: "success",
+        confirmButtonColor: "#3E3A8E",
+      });
+    } else {
+      this.setState({ laporan: null, log: null });
+      // swal.fire("Data tidak ditemukan", " ", "error");
+      swal.fire({
+        title: "Data tidak ditemukan",
+        icon: "error",
+        confirmButtonColor: "#3E3A8E",
+      });
+    }
+  };
 
-	handleLihatPemantaun = async (data) => {
-		const { no_hp, no_laporan } = data;
-		// const toastid = toast.loading("Please wait...");
-		const log = await getLogPublic({ no_hp, no_laporan });
-		if (log.data) {
-			this.setState({ laporan: log.data.laporan, log: log.data.pemantauan });
-			// swal.fire("Data ditemukan", "", "success");
-			swal.fire({
-				title: 'Data ditemukan',
-				icon: 'success',
-				confirmButtonColor: '#3E3A8E',
-			})
-		} else {
-			this.setState({ laporan: null, log: null });
-			// swal.fire("Data tidak ditemukan", " ", "error");
-			swal.fire({
-				title: 'Data tidak ditemukan',
-				icon: 'error',
-				confirmButtonColor: '#3E3A8E',
-			})
-		}
-	};
-
-	render() {
-		const { laporan, log } = this.state;
-		return (
-			<div>
-				<ToastContainer />
-				<Navbar className="navbar-color" expand="md" dark>
-					<NavbarBrand href="/">
-						<img className="width-133" src="/static/img/Logo-Sidali.png" alt="App Logo" />
-					</NavbarBrand>
-					<NavbarToggler onClick={this.toggleCollapse} />
-					<Collapse isOpen={this.state.isOpen} navbar>
-						<Nav className="ml-auto" navbar>
-							{menu.map((e) => (
-								<NavItem active={e.path === this.props.pathname ? true : false}>
-									<Link href={e.path}>
-										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
-									</Link>
-								</NavItem>
-							))}
-						</Nav>
-					</Collapse>
-				</Navbar>
-				<ContentWrapper>
-					<Row>
-						<Col lg={8} className="block-center d-block ">
-							<Card className="card-default">
-								<CardBody>
-									<Formik
-										initialValues={{
-											no_laporan: "",
-											no_hp: "",
-										}}
-										validationSchema={pemantauanSchema}
-										onSubmit={this.handleLihatPemantaun}
-									>
-										<Form className="form-horizontal">
-											<div class="header-1">
-												<h2 class="card-title-1">Pemantauan</h2>
-											</div>
-											{/* <p className="lead bb">Pemantauan</p> */}
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Nomor Laporan</label>
-												<div className="col-md-10">
-													<Field name="no_laporan">{({ field }) => <Input type="text" {...field} />}</Field>
-													<ErrorMessage name="no_laporan" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Nomor Aktif</label>
-												<div className="col-md-10">
-													<Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
-													<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<div className="posisi-btn-1 btn-radius">
-													<Button className="button-lihatpemantauan" color block type="submit">
-														<h3 className="text-lihatpemantauan font-color-white">Lihat Pemantauan</h3>
-													</Button>
-												</div>
-											</FormGroup>
-										</Form>
-									</Formik>
-								</CardBody>
-							</Card>
-							<Card className="card-default">
-								<CardBody>
-									<div class="header-1">
-										<h2 class="card-title-1">Rekap Laporan</h2>
-									</div>
-									<div className="">
-										{laporan && log ? (
-											<>
-												<DetailLaporan data={laporan} />
-												<p className="lead bb tengah">Pemantauan</p>
-												<Timeline data={log} noFile />{" "}
-											</>
-										) : (
-											<p className="tengah">Tidak Ada Laporan</p>
-										)}
-									</div>
-								</CardBody>
-							</Card>
-						</Col>
-					</Row>
-				</ContentWrapper>
-			</div>
-		);
-	}
+  render() {
+    const { laporan, log } = this.state;
+    return (
+      <div>
+        <ToastContainer />
+        <Navbar className="navbar-color" expand="md" dark>
+          <NavbarBrand href="/">
+            <img
+              className="width-133"
+              src="/static/img/Logo-Sidali.png"
+              alt="App Logo"
+            />
+          </NavbarBrand>
+          <NavbarToggler onClick={this.toggleCollapse} />
+          <Collapse isOpen={this.state.isOpen} navbar>
+            <Nav className="ml-auto" navbar>
+              {menu.map((e) => (
+                <NavItem active={e.path === this.props.pathname ? true : false}>
+                  <Link href={e.path}>
+                    <NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
+                  </Link>
+                </NavItem>
+              ))}
+            </Nav>
+          </Collapse>
+        </Navbar>
+        <ContentWrapper>
+          <Row>
+            <Col lg={8} className="block-center d-block ">
+              <Card className="card-default">
+                <CardBody>
+                  <Formik
+                    initialValues={{
+                      no_laporan: "",
+                      no_hp: "",
+                    }}
+                    validationSchema={pemantauanSchema}
+                    onSubmit={this.handleLihatPemantaun}
+                  >
+                    <Form className="form-horizontal">
+                      <div class="header-1">
+                        <h2 class="card-title-1">Pemantauan</h2>
+                      </div>
+                      {/* <p className="lead bb">Pemantauan</p> */}
+                      <FormGroup row>
+                        <label className="col-md-2 col-form-label">
+                          Nomor Laporan
+                        </label>
+                        <div className="col-md-10">
+                          <Field name="no_laporan">
+                            {({ field }) => <Input type="text" {...field} />}
+                          </Field>
+                          <ErrorMessage
+                            name="no_laporan"
+                            component="div"
+                            className="form-text text-danger"
+                          />
+                        </div>
+                      </FormGroup>
+                      <FormGroup row>
+                        <label className="col-md-2 col-form-label">
+                          Nomor Aktif
+                        </label>
+                        <div className="col-md-10">
+                          <Field name="no_hp">
+                            {({ field }) => <Input type="tel" {...field} />}
+                          </Field>
+                          <ErrorMessage
+                            name="no_hp"
+                            component="div"
+                            className="form-text text-danger"
+                          />
+                        </div>
+                      </FormGroup>
+                      <FormGroup row>
+                        <div className="posisi-btn-1 btn-radius">
+                          <Button
+                            className="button-lihatpemantauan"
+                            color
+                            block
+                            type="submit"
+                          >
+                            <h3 className="text-lihatpemantauan font-color-white">
+                              Lihat Pemantauan
+                            </h3>
+                          </Button>
+                        </div>
+                      </FormGroup>
+                    </Form>
+                  </Formik>
+                </CardBody>
+              </Card>
+              <Card className="card-default">
+                <CardBody>
+                  <div class="header-1">
+                    <h2 class="card-title-1">Rekap Laporan</h2>
+                  </div>
+                  <div className="">
+                    {laporan && log ? (
+                      <>
+                        <DetailLaporan data={laporan} />
+                        <p className="lead bb tengah">Pemantauan</p>
+                        <Timeline data={log} noFile />{" "}
+                      </>
+                    ) : (
+                      <p className="tengah">Tidak Ada Laporan</p>
+                    )}
+                  </div>
+                </CardBody>
+              </Card>
+            </Col>
+          </Row>
+        </ContentWrapper>
+      </div>
+    );
+  }
 }
 
 App.Layout = BasePage;

styles/bootstrap/_card.scss

@@ -363,6 +363,6 @@
   color: black;
 }
 .border-2 {
-  border-width: 2px;
-  border-color: black;
+  border-width: 0.5px;
+  border-color: rgb(124, 122, 122);
 }