tes

components/Layout/ThemesProvider.js

@@ -1,25 +1,26 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 
 // Import all theme into main css chunk
 // todo: import dynamically
-import '../../styles/themes/theme-a.scss';
-import '../../styles/themes/theme-b.scss';
-import '../../styles/themes/theme-c.scss';
-import '../../styles/themes/theme-d.scss';
-import '../../styles/themes/theme-e.scss';
-import '../../styles/themes/theme-f.scss';
-import '../../styles/themes/theme-h.scss';
+import "../../styles/themes/theme-a.scss";
+import "../../styles/themes/theme-b.scss";
+import "../../styles/themes/theme-c.scss";
+import "../../styles/themes/theme-d.scss";
+import "../../styles/themes/theme-e.scss";
+import "../../styles/themes/theme-f.scss";
+import "../../styles/themes/theme-g.scss";
+import "../../styles/themes/theme-h.scss";
 
-const ThemesProvider = props => (
-    <div id="__themes_provider" className={props.theme.name}>
-        {props.children}
-    </div>
+const ThemesProvider = (props) => (
+	<div id="__themes_provider" className={props.theme.name}>
+		{props.children}
+	</div>
 );
 
 ThemesProvider.propTypes = {
-    theme: PropTypes.object
+	theme: PropTypes.object,
 };
 
-export default connect(state => ({ theme: state.theme }))(ThemesProvider);
+export default connect((state) => ({ theme: state.theme }))(ThemesProvider);

pages/app/penjadwalan.js

@@ -1,74 +1,116 @@
-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/penjadwalan.todo'
-            }
-        );
-    }
+	static getInitialProps = async () => {
+		const res = await fetch("http://localhost:1880/pelaporan");
+		const data = await res.json();
+		return { data };
+	};
 
-    render() {
-        return (
-            <ContentWrapper>
-                <div className="content-heading">Pemeriksaan</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 = () => {
+		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)}>
+								Proses
+							</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) => {
+		//router = useRouter();
+		//const query = { ptId: PT_ID };
+		//    '/app/profile'
+		e.preventDefault();
+		Router.push({
+			pathname: "/app/penjadwalan.todo",
+		});
+	};
 
-                                        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">Pemeriksaan</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 +132,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 +148,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 +212,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 +240,82 @@ 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)}>Proses</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)}>
+															Proses
+														</button>
+														//{" "}
+													</div>
+													//{" "}
+												</td>
+												//{" "}
+											</tr> */}
+										</tbody>
+									</table>
+								</Datatable>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</ContentWrapper>
+		);
+	}
 }
 
 export default BugTracker;
-
-