commit

components/Extras/calendar.view.js

@@ -60,7 +60,7 @@ class Calendar extends Component {
 		if (data[0].penjadwalan) {
 			color = data[0].penjadwalan.background_color;
 		}
-		this.setState({ externalEvents: [{ id: this.props.query.number, color: color, name: "Jadwal Pemeriksaan - BI:" + this.props.query.number }] });
+		this.setState({ externalEvents: [{ id: this.props.query.number, color: color, name: `Jadwal Pemeriksaan - BI: ${this.props.query.number} - Universitas Satyagama` }] });
 	}
 
 	getDataEvent = () => {

components/Layout/Head.js

@@ -1,21 +1,21 @@
-import React from 'react';
-import NextHead from 'next/head';
-import PropTypes from 'prop-types';
+import React from "react";
+import NextHead from "next/head";
+import PropTypes from "prop-types";
 
-const defaultDescription = '';
+const defaultDescription = "";
 
-const Head = props => (
-    <NextHead>
-        <meta charSet="UTF-8" />
-        <title>PTB-Ristekdikti</title>
-        <meta name="description" content={props.description || defaultDescription} />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/static/favicon.ico" />
-    </NextHead>
+const Head = (props) => (
+	<NextHead>
+		<meta charSet="UTF-8" />
+		<title>PTB-Ristekdikti</title>
+		<meta name="description" content={props.description || defaultDescription} />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" href="/static/img/logo-single.png" />
+	</NextHead>
 );
 
 Head.propTypes = {
-    description: PropTypes.string
+	description: PropTypes.string,
 };
 
 export default Head;

components/Layout/Header.js

@@ -1,263 +1,209 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Link from 'next/link';
-import {
-    UncontrolledDropdown,
-    DropdownToggle,
-    DropdownMenu,
-    DropdownItem,
-    ListGroup,
-    ListGroupItem
-} from 'reactstrap';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Link from "next/link";
+import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, ListGroup, ListGroupItem } from "reactstrap";
 
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import * as actions from '../../store/actions/actions';
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import * as actions from "../../store/actions/actions";
 
-import ToggleFullscreen from '../Common/ToggleFullscreen';
-import HeaderSearch from './HeaderSearch';
+import ToggleFullscreen from "../Common/ToggleFullscreen";
+import HeaderSearch from "./HeaderSearch";
 
 class Header extends Component {
-    state = {
-        navSearchOpen: false
-    };
-
-    toggleNavSearch = e => {
-        e.preventDefault();
-        this.setState({
-            navSearchOpen: !this.state.navSearchOpen
-        });
-    };
-
-    closeNavSearch = e => {
-        e.preventDefault();
-        this.setState({
-            navSearchOpen: false
-        });
-    };
-
-    toggleUserblock = e => {
-        e.preventDefault();
-        this.props.actions.toggleSetting('showUserBlock');
-    };
-
-    toggleOffsidebar = e => {
-        e.preventDefault();
-        this.props.actions.toggleSetting('offsidebarOpen');
-    };
-
-    toggleCollapsed = e => {
-        e.preventDefault();
-        this.props.actions.toggleSetting('isCollapsed');
-        this.resize();
-    };
-
-    toggleAside = e => {
-        e.preventDefault();
-        this.props.actions.toggleSetting('asideToggled');
-    };
-
-    resize() {
-        // all IE friendly dispatchEvent
-        var evt = document.createEvent('UIEvents');
-        evt.initUIEvent('resize', true, false, window, 0);
-        window.dispatchEvent(evt);
-        // modern dispatchEvent way
-        // window.dispatchEvent(new Event('resize'));
-    }
-
-    render() {
-        return (
-            <header className="topnavbar-wrapper">
-                {/* START Top Navbar */}
-                <nav className="navbar topnavbar">
-                    {/* START navbar header */}
-                    <div className="navbar-header">
-                        <a className="navbar-brand" href="#/">
-                            <div className="brand-logo">
-                                {/* <img
-                                    className="img-fluid"
-                                    src="/static/img/logo-inner.png"
-                                    alt="App Logo"
-                                /> */}
-                            </div>
-                            <div className="brand-logo-collapsed">
-                                <img
-                                    className="img-fluid"
-                                    src="/static/img/logo-single.png"
-                                    alt="App Logo"
-                                />
-                            </div>
-                        </a>
-                    </div>
-                    {/* END navbar header */}
-
-                    {/* START Left navbar */}
-                    <ul className="navbar-nav mr-auto flex-row">
-                        <li className="nav-item">
-                            {/* Button used to collapse the left sidebar. Only visible on tablet and desktops */}
-                            <a
-                                href=""
-                                className="nav-link d-none d-md-block d-lg-block d-xl-block"
-                                onClick={this.toggleCollapsed}
-                            >
-                                <em className="fas fa-bars" />
-                            </a>
-                            {/* Button to show/hide the sidebar on mobile. Visible on mobile only. */}
-                            <a
-                                href=""
-                                className="nav-link sidebar-toggle d-md-none"
-                                onClick={this.toggleAside}
-                            >
-                                <em className="fas fa-bars" />
-                            </a>
-                        </li>
-                        {/* START User avatar toggle */}
-                        <li className="nav-item d-none d-md-block">
-                            <a className="nav-link" onClick={this.toggleUserblock}>
-                                <em className="icon-user" />
-                            </a>
-                        </li>
-                        {/* END User avatar toggle */}
-                        {/* START lock screen */}
-                        <li className="nav-item d-none d-md-block">
-                            <Link href="/pages/lock" as="/lock">
-                                <a title="Lock screen" className="nav-link">
-                                    <em className="icon-lock" />
-                                </a>
-                            </Link>
-                        </li>
-                        {/* END lock screen */}
-                    </ul>
-                    {/* END Left navbar */}
-                    {/* START Right Navbar */}
-                    <ul className="navbar-nav flex-row">
-                        {/* Search icon */}
-                        <li className="nav-item">
-                            <a className="nav-link" href="" onClick={this.toggleNavSearch}>
-                                <em className="icon-magnifier" />
-                            </a>
-                        </li>
-                        {/* Fullscreen (only desktops) */}
-                        <li className="nav-item d-none d-md-block">
-                            <ToggleFullscreen className="nav-link" />
-                        </li>
-                        {/* START Alert menu */}
-                        <UncontrolledDropdown nav inNavbar className="dropdown-list">
-                            <DropdownToggle nav className="dropdown-toggle-nocaret">
-                                <em className="icon-bell" />
-                                <span className="badge badge-danger">11</span>
-                            </DropdownToggle>
-                            {/* START Dropdown menu */}
-                            <DropdownMenu right className="dropdown-menu-right animated flipInX">
-                                <DropdownItem>
-                                    {/* START list group */}
-                                    <ListGroup>
-                                        <ListGroupItem
-                                            action
-                                            tag="a"
-                                            href=""
-                                            onClick={e => e.preventDefault()}
-                                        >
-                                            <div className="media">
-                                                <div className="align-self-start mr-2">
-                                                    <em className="fab fa-twitter fa-2x text-info" />
-                                                </div>
-                                                <div className="media-body">
-                                                    <p className="m-0">New followers</p>
-                                                    <p className="m-0 text-muted text-sm">
-                                                        1 new follower
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        </ListGroupItem>
-                                        <ListGroupItem
-                                            action
-                                            tag="a"
-                                            href=""
-                                            onClick={e => e.preventDefault()}
-                                        >
-                                            <div className="media">
-                                                <div className="align-self-start mr-2">
-                                                    <em className="fa fa-envelope fa-2x text-warning" />
-                                                </div>
-                                                <div className="media-body">
-                                                    <p className="m-0">New e-mails</p>
-                                                    <p className="m-0 text-muted text-sm">
-                                                        You have 10 new emails
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        </ListGroupItem>
-                                        <ListGroupItem
-                                            action
-                                            tag="a"
-                                            href=""
-                                            onClick={e => e.preventDefault()}
-                                        >
-                                            <div className="media">
-                                                <div className="align-self-start mr-2">
-                                                    <em className="fa fa-tasks fa-2x text-success" />
-                                                </div>
-                                                <div className="media-body">
-                                                    <p className="m-0">Pending Tasks</p>
-                                                    <p className="m-0 text-muted text-sm">
-                                                        11 pending task
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        </ListGroupItem>
-                                        <ListGroupItem
-                                            action
-                                            tag="a"
-                                            href=""
-                                            onClick={e => e.preventDefault()}
-                                        >
-                                            <span className="d-flex align-items-center">
-                                                <span className="text-sm">More notifications</span>
-                                                <span className="badge badge-danger ml-auto">
-                                                    14
-                                                </span>
-                                            </span>
-                                        </ListGroupItem>
-                                    </ListGroup>
-                                    {/* END list group */}
-                                </DropdownItem>
-                            </DropdownMenu>
-                            {/* END Dropdown menu */}
-                        </UncontrolledDropdown>
-                        {/* END Alert menu */}
-                        {/* START Offsidebar button */}
-                        <li className="nav-item">
-                            <a className="nav-link" href="" onClick={this.toggleOffsidebar}>
-                                <em className="icon-notebook" />
-                            </a>
-                        </li>
-                        {/* END Offsidebar menu */}
-                    </ul>
-                    {/* END Right Navbar */}
-
-                    {/* START Search form */}
-                    <HeaderSearch isOpen={this.state.navSearchOpen} onClose={this.closeNavSearch} />
-                    {/* END Search form */}
-                </nav>
-                {/* END Top Navbar */}
-            </header>
-        );
-    }
+	state = {
+		navSearchOpen: false,
+	};
+
+	toggleNavSearch = (e) => {
+		e.preventDefault();
+		this.setState({
+			navSearchOpen: !this.state.navSearchOpen,
+		});
+	};
+
+	closeNavSearch = (e) => {
+		e.preventDefault();
+		this.setState({
+			navSearchOpen: false,
+		});
+	};
+
+	toggleUserblock = (e) => {
+		e.preventDefault();
+		this.props.actions.toggleSetting("showUserBlock");
+	};
+
+	toggleOffsidebar = (e) => {
+		e.preventDefault();
+		this.props.actions.toggleSetting("offsidebarOpen");
+	};
+
+	toggleCollapsed = (e) => {
+		e.preventDefault();
+		this.props.actions.toggleSetting("isCollapsed");
+		this.resize();
+	};
+
+	toggleAside = (e) => {
+		e.preventDefault();
+		this.props.actions.toggleSetting("asideToggled");
+	};
+
+	resize() {
+		// all IE friendly dispatchEvent
+		var evt = document.createEvent("UIEvents");
+		evt.initUIEvent("resize", true, false, window, 0);
+		window.dispatchEvent(evt);
+		// modern dispatchEvent way
+		// window.dispatchEvent(new Event('resize'));
+	}
+
+	render() {
+		return (
+			<header className="topnavbar-wrapper">
+				{/* START Top Navbar */}
+				<nav className="navbar topnavbar">
+					{/* START navbar header */}
+					<div className="navbar-header">
+						<a className="navbar-brand" href="#/">
+							<div className="brand-logo">
+								<img className="img-fluid" src="/static/img/logo-inner.png" alt="App Logo" />
+							</div>
+							<div className="brand-logo-collapsed">
+								<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" />
+							</div>
+						</a>
+					</div>
+					{/* END navbar header */}
+
+					{/* START Left navbar */}
+					<ul className="navbar-nav mr-auto flex-row">
+						<li className="nav-item">
+							{/* Button used to collapse the left sidebar. Only visible on tablet and desktops */}
+							<a href="" className="nav-link d-none d-md-block d-lg-block d-xl-block" onClick={this.toggleCollapsed}>
+								<em className="fas fa-bars" />
+							</a>
+							{/* Button to show/hide the sidebar on mobile. Visible on mobile only. */}
+							<a href="" className="nav-link sidebar-toggle d-md-none" onClick={this.toggleAside}>
+								<em className="fas fa-bars" />
+							</a>
+						</li>
+						{/* START User avatar toggle */}
+						{/* <li className="nav-item d-none d-md-block">
+							<a className="nav-link" onClick={this.toggleUserblock}>
+								<em className="icon-user" />
+							</a>
+						</li> */}
+						{/* END User avatar toggle */}
+						{/* START lock screen */}
+						{/* <li className="nav-item d-none d-md-block">
+							<Link href="/pages/lock" as="/lock">
+								<a title="Lock screen" className="nav-link">
+									<em className="icon-lock" />
+								</a>
+							</Link>
+						</li> */}
+						{/* END lock screen */}
+					</ul>
+					{/* END Left navbar */}
+					{/* START Right Navbar */}
+					<ul className="navbar-nav flex-row">
+						{/* Search icon */}
+						{/* <li className="nav-item">
+							<a className="nav-link" href="" onClick={this.toggleNavSearch}>
+								<em className="icon-magnifier" />
+							</a>
+						</li> */}
+						{/* Fullscreen (only desktops) */}
+						<li className="nav-item d-none d-md-block">
+							<ToggleFullscreen className="nav-link" />
+						</li>
+						{/* START Alert menu */}
+						<UncontrolledDropdown nav inNavbar className="dropdown-list">
+							<DropdownToggle nav className="dropdown-toggle-nocaret">
+								<em className="icon-bell" />
+								<span className="badge badge-danger">11</span>
+							</DropdownToggle>
+							{/* START Dropdown menu */}
+							<DropdownMenu right className="dropdown-menu-right animated flipInX">
+								<DropdownItem>
+									{/* START list group */}
+									<ListGroup>
+										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
+											<div className="media">
+												<div className="align-self-start mr-2">
+													<em className="fab fa-twitter fa-2x text-info" />
+												</div>
+												<div className="media-body">
+													<p className="m-0">New followers</p>
+													<p className="m-0 text-muted text-sm">1 new follower</p>
+												</div>
+											</div>
+										</ListGroupItem>
+										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
+											<div className="media">
+												<div className="align-self-start mr-2">
+													<em className="fa fa-envelope fa-2x text-warning" />
+												</div>
+												<div className="media-body">
+													<p className="m-0">New e-mails</p>
+													<p className="m-0 text-muted text-sm">You have 10 new emails</p>
+												</div>
+											</div>
+										</ListGroupItem>
+										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
+											<div className="media">
+												<div className="align-self-start mr-2">
+													<em className="fa fa-tasks fa-2x text-success" />
+												</div>
+												<div className="media-body">
+													<p className="m-0">Pending Tasks</p>
+													<p className="m-0 text-muted text-sm">11 pending task</p>
+												</div>
+											</div>
+										</ListGroupItem>
+										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
+											<span className="d-flex align-items-center">
+												<span className="text-sm">More notifications</span>
+												<span className="badge badge-danger ml-auto">14</span>
+											</span>
+										</ListGroupItem>
+									</ListGroup>
+									{/* END list group */}
+								</DropdownItem>
+							</DropdownMenu>
+							{/* END Dropdown menu */}
+						</UncontrolledDropdown>
+						{/* END Alert menu */}
+						{/* START Offsidebar button */}
+						<li className="nav-item">
+							<a className="nav-link" href="" onClick={this.toggleOffsidebar}>
+								<em className="icon-notebook" />
+							</a>
+						</li>
+						{/* END Offsidebar menu */}
+					</ul>
+					{/* END Right Navbar */}
+
+					{/* START Search form */}
+					<HeaderSearch isOpen={this.state.navSearchOpen} onClose={this.closeNavSearch} />
+					{/* END Search form */}
+				</nav>
+				{/* END Top Navbar */}
+			</header>
+		);
+	}
 }
 
 Header.propTypes = {
-    actions: PropTypes.object,
-    settings: PropTypes.object
+	actions: PropTypes.object,
+	settings: PropTypes.object,
 };
 
-const mapStateToProps = state => ({ settings: state.settings });
-const mapDispatchToProps = dispatch => ({
-    actions: bindActionCreators(actions, dispatch)
+const mapStateToProps = (state) => ({ settings: state.settings });
+const mapDispatchToProps = (dispatch) => ({
+	actions: bindActionCreators(actions, dispatch),
 });
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(Header);
+export default connect(mapStateToProps, mapDispatchToProps)(Header);

components/Layout/Menu.js

@@ -3,12 +3,12 @@ const Menu = [
 		heading: "Main Navigation",
 		translate: "sidebar.heading.HEADER",
 	},
-	{
-		name: "Login",
-		path: "/login",
-		icon: "icon-login",
-		translate: "sidebar.nav.LOGIN",
-	},
+	// {
+	// 	name: "Login",
+	// 	path: "/login",
+	// 	icon: "icon-login",
+	// 	translate: "sidebar.nav.LOGIN",
+	// },
 	{
 		name: "Pelaporan",
 		path: "/app/pelaporan",
@@ -34,7 +34,7 @@ const Menu = [
 		translate: "sidebar.nav.SANKSI",
 	},
 	{
-		heading: "Dikti Ristek",
+		heading: "Dikti Ristek/LLDIKTI",
 		translate: "sidebar.heading.DIKTI_RISTEK",
 	},
 	{

components/Layout/Offsidebar.js

@@ -1,400 +1,398 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
 
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import * as actions from '../../store/actions/actions';
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import * as actions from "../../store/actions/actions";
 
-import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import { TabContent, TabPane, Nav, NavItem, NavLink } from "reactstrap";
 
 class Offsidebar extends Component {
+	state = {
+		activeTab: "settings",
+		offsidebarReady: false,
+	};
 
-    state = {
-        activeTab: 'settings',
-        offsidebarReady: false
-    }
+	componentDidMount() {
+		// When mounted display the offsidebar
+		window.requestAnimationFrame(() => this.setState({ offsidebarReady: true }));
+	}
 
-    componentDidMount() {
-        // When mounted display the offsidebar
-        window.requestAnimationFrame(() => this.setState({ offsidebarReady: true }));
-    }
+	toggle = (tab) => {
+		if (this.state.activeTab !== tab) {
+			this.setState({
+				activeTab: tab,
+			});
+		}
+	};
 
-    toggle = tab => {
-        if (this.state.activeTab !== tab) {
-            this.setState({
-                activeTab: tab
-            });
-        }
-    }
+	handleSettingCheckbox = (event) => {
+		this.props.actions.changeSetting(event.target.name, event.target.checked);
+	};
 
-    handleSettingCheckbox = event => {
-        this.props.actions.changeSetting(event.target.name, event.target.checked);
-    }
+	handleThemeRadio = (event) => {
+		this.props.actions.changeTheme(event.target.value);
+	};
 
-    handleThemeRadio = event => {
-        this.props.actions.changeTheme(event.target.value);
-    }
-
-    render() {
-
-        return (
-            this.state.offsidebarReady &&
-            <aside className="offsidebar">
-                { /* START Off Sidebar (right) */ }
-                <nav>
-                    <div>
-                        { /* Nav tabs */ }
-                        <Nav tabs justified>
-                            <NavItem>
-                                <NavLink className={ this.state.activeTab === 'settings' ? 'active':'' }
-                                    onClick={() => { this.toggle('settings'); }}
-                                >
-                                    <em className="icon-equalizer fa-lg"></em>
-                                </NavLink>
-                            </NavItem>
-                            <NavItem>
+	render() {
+		return (
+			this.state.offsidebarReady && (
+				<aside className="offsidebar">
+					{/* START Off Sidebar (right) */}
+					<nav>
+						<div>
+							{/* Nav tabs */}
+							<Nav tabs justified>
+								<NavItem>
+									<NavLink
+										className={this.state.activeTab === "settings" ? "active" : ""}
+										onClick={() => {
+											this.toggle("settings");
+										}}
+									>
+										<em className="icon-equalizer fa-lg"></em>
+									</NavLink>
+								</NavItem>
+								{/* <NavItem>
                                 <NavLink className={ this.state.activeTab === 'chat' ? 'active':'' }
                                     onClick={() => { this.toggle('chat'); }}
                                 >
                                     <em className="icon-user fa-lg"></em>
                                 </NavLink>
-                            </NavItem>
-                        </Nav>
-                        { /* Tab panes */ }
-                        <TabContent activeTab={this.state.activeTab}>
-                            <TabPane tabId="settings">
-                                <h3 className="text-center text-thin mt-4">Settings</h3>
-                                <div className="p-2">
-                                    <h4 className="text-muted text-thin">Themes</h4>
-                                    <div className="row row-flush mb-2">
-                                        <div className="col-3 mb-3">
-                                            <div className="setting-color">
-                                                <label>
-                                                    <input type="radio" name="setting-theme" checked={this.props.theme.name === 'theme-a'}  value='theme-a' onChange={this.handleThemeRadio} />
-                                                    <span className="icon-check"></span>
-                                                    <span className="split">
-                                                        <span className="color bg-info"></span>
-                                                        <span className="color bg-info-light"></span>
-                                                    </span>
-                                                    <span className="color bg-white"></span>
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div className="col-3 mb-3">
-                                            <div className="setting-color">
-                                                <label>
-                                                    <input type="radio" name="setting-theme" checked={this.props.theme.name === 'theme-b'}  value='theme-b' onChange={this.handleThemeRadio} />
-                                                    <span className="icon-check"></span>
-                                                    <span className="split">
-                                                        <span className="color bg-green"></span>
-                                                        <span className="color bg-green-light"></span>
-                                                    </span>
-                                                    <span className="color bg-white"></span>
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div className="col-3 mb-3">
-                                            <div className="setting-color">
-                                                <label>
-                                                    <input type="radio" name="setting-theme" checked={this.props.theme.name === 'theme-c'}  value='theme-c' onChange={this.handleThemeRadio} />
-                                                    <span className="icon-check"></span>
-                                                    <span className="split">
-                                                        <span className="color bg-purple"></span>
-                                                        <span className="color bg-purple-light"></span>
-                                                    </span>
-                                                    <span className="color bg-white"></span>
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div className="col-3 mb-3">
-                                            <div className="setting-color">
-                                                <label>
-                                                    <input type="radio" name="setting-theme" checked={this.props.theme.name === 'theme-d'}  value='theme-d' onChange={this.handleThemeRadio} />
-                                                    <span className="icon-check"></span>
-                                                    <span className="split">
-                                                        <span className="color bg-danger"></span>
-                                                        <span className="color bg-danger-light"></span>
-                                                    </span>
-                                                    <span className="color bg-white"></span>
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div className="col-3 mb-3">
-                                            <div className="setting-color">
-                                                <label>
-                                                    <input type="radio" name="setting-theme" checked={this.props.theme.name === 'theme-e'}  value='theme-e' onChange={this.handleThemeRadio} />
-                                                    <span className="icon-check"></span>
-                                                    <span className="split">
-                                                        <span className="color bg-info-dark"></span>
-                                                        <span className="color bg-info"></span>
-                                                    </span>
-                                                    <span className="color bg-gray-dark"></span>
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div className="col-3 mb-3">
-                                            <div className="setting-color">
-                                                <label>
-                                                    <input type="radio" name="setting-theme" checked={this.props.theme.name === 'theme-f'}  value='theme-f' onChange={this.handleThemeRadio} />
-                                                    <span className="icon-check"></span>
-                                                    <span className="split">
-                                                        <span className="color bg-green-dark"></span>
-                                                        <span className="color bg-green"></span>
-                                                    </span>
-                                                    <span className="color bg-gray-dark"></span>
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div className="col-3 mb-3">
-                                            <div className="setting-color">
-                                                <label>
-                                                    <input type="radio" name="setting-theme" checked={this.props.theme.name === 'theme-g'}  value='theme-g' onChange={this.handleThemeRadio} />
-                                                    <span className="icon-check"></span>
-                                                    <span className="split">
-                                                        <span className="color bg-purple-dark"></span>
-                                                        <span className="color bg-purple"></span>
-                                                    </span>
-                                                    <span className="color bg-gray-dark"></span>
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div className="col-3 mb-3">
-                                            <div className="setting-color">
-                                                <label>
-                                                    <input type="radio" name="setting-theme" checked={this.props.theme.name === 'theme-h'}  value='theme-h' onChange={this.handleThemeRadio} />
-                                                    <span className="icon-check"></span>
-                                                    <span className="split">
-                                                        <span className="color bg-danger-dark"></span>
-                                                        <span className="color bg-danger"></span>
-                                                    </span>
-                                                    <span className="color bg-gray-dark"></span>
-                                                </label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="p-2">
-                                    <h4 className="text-muted text-thin">Layout</h4>
-                                    <div className="clearfix">
-                                        <p className="float-left">Fixed</p>
-                                        <div className="float-right">
-                                            <label className="switch">
-                                                <input id="chk-fixed" type="checkbox" name="isFixed" checked={this.props.settings.isFixed} onChange={this.handleSettingCheckbox}/>
-                                                <span></span>
-                                            </label>
-                                        </div>
-                                    </div>
-                                    <div className="clearfix">
-                                        <p className="float-left">Boxed</p>
-                                        <div className="float-right">
-                                            <label className="switch">
-                                                <input id="chk-boxed" type="checkbox" name="isBoxed" checked={this.props.settings.isBoxed} onChange={this.handleSettingCheckbox}/>
-                                                <span></span>
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="p-2">
-                                    <h4 className="text-muted text-thin">Aside</h4>
-                                    <div className="clearfix">
-                                        <p className="float-left">Collapsed</p>
-                                        <div className="float-right">
-                                            <label className="switch">
-                                                <input id="chk-collapsed" type="checkbox" name="isCollapsed" checked={this.props.settings.isCollapsed} onChange={this.handleSettingCheckbox}/>
-                                                <span></span>
-                                            </label>
-                                        </div>
-                                    </div>
-                                    <div className="clearfix">
-                                        <p className="float-left">Collapsed Text</p>
-                                        <div className="float-right">
-                                            <label className="switch">
-                                                <input id="chk-collapsed-text" type="checkbox" name="isCollapsedText" checked={this.props.settings.isCollapsedText} onChange={this.handleSettingCheckbox}/>
-                                                <span></span>
-                                            </label>
-                                        </div>
-                                    </div>
-                                    <div className="clearfix">
-                                        <p className="float-left">Float</p>
-                                        <div className="float-right">
-                                            <label className="switch">
-                                                <input id="chk-float" type="checkbox" name="isFloat" checked={this.props.settings.isFloat} onChange={this.handleSettingCheckbox}/>
-                                                <span></span>
-                                            </label>
-                                        </div>
-                                    </div>
-                                    <div className="clearfix">
-                                        <p className="float-left">Hover</p>
-                                        <div className="float-right">
-                                            <label className="switch">
-                                                <input id="chk-hover" type="checkbox" name="asideHover" checked={this.props.settings.asideHover} onChange={this.handleSettingCheckbox}/>
-                                                <span></span>
-                                            </label>
-                                        </div>
-                                    </div>
-                                    <div className="clearfix">
-                                        <p className="float-left">Show Scrollbar</p>
-                                        <div className="float-right">
-                                            <label className="switch">
-                                                <input id="chk-scrollbar" type="checkbox" name="asideScrollbar" checked={this.props.settings.asideScrollbar} onChange={this.handleSettingCheckbox}/>
-                                                <span></span>
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </TabPane>
-                            <TabPane tabId="chat">
-                                <h3 className="text-center text-thin mt-4">Connections</h3>
-                                <div className="list-group">
-                                    { /* START list title */ }
-                                    <div className="list-group-item border-0">
-                                        <small className="text-muted">ONLINE</small>
-                                    </div>
-                                    { /* END list title */ }
-                                    <div className="list-group-item list-group-item-action border-0">
-                                        <div className="media">
-                                            <img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/05.jpg" alt="User avatar" />
-                                            <div className="media-body text-truncate">
-                                                <a href="">
-                                                    <strong>Juan Sims</strong>
-                                                </a>
-                                                <br/>
-                                                <small className="text-muted">Designeer</small>
-                                            </div>
-                                            <div className="ml-auto">
-                                                <span className="circle bg-success circle-lg"></span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="list-group-item list-group-item-action border-0">
-                                        <div className="media">
-                                            <img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/06.jpg" alt="User avatar" />
-                                            <div className="media-body text-truncate">
-                                                <a href="">
-                                                    <strong>Maureen Jenkins</strong>
-                                                </a>
-                                                <br/>
-                                                <small className="text-muted">Designeer</small>
-                                            </div>
-                                            <div className="ml-auto">
-                                                <span className="circle bg-success circle-lg"></span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="list-group-item list-group-item-action border-0">
-                                        <div className="media">
-                                            <img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/07.jpg" alt="User avatar" />
-                                            <div className="media-body text-truncate">
-                                                <a href="">
-                                                    <strong>Billie Dunn</strong>
-                                                </a>
-                                                <br/>
-                                                <small className="text-muted">Designeer</small>
-                                            </div>
-                                            <div className="ml-auto">
-                                                <span className="circle bg-danger circle-lg"></span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="list-group-item list-group-item-action border-0">
-                                        <div className="media">
-                                            <img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/08.jpg" alt="User avatar" />
-                                            <div className="media-body text-truncate">
-                                                <a href="">
-                                                    <strong>Tomothy Roberts</strong>
-                                                </a>
-                                                <br/>
-                                                <small className="text-muted">Designeer</small>
-                                            </div>
-                                            <div className="ml-auto">
-                                                <span className="circle bg-warning circle-lg"></span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    { /* START list title */ }
-                                    <div className="list-group-item border-0">
-                                        <small className="text-muted">OFFLINE</small>
-                                    </div>
-                                    { /* END list title */ }
-                                    <div className="list-group-item list-group-item-action border-0">
-                                        <div className="media">
-                                            <img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/09.jpg" alt="User avatar" />
-                                            <div className="media-body text-truncate">
-                                                <a href="">
-                                                    <strong>Lawrence Robinson</strong>
-                                                </a>
-                                                <br/>
-                                                <small className="text-muted">Designeer</small>
-                                            </div>
-                                            <div className="ml-auto">
-                                                <span className="circle bg-warning circle-lg"></span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="list-group-item list-group-item-action border-0">
-                                        <div className="media">
-                                            <img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/10.jpg" alt="User avatar" />
-                                            <div className="media-body text-truncate">
-                                                <a href="">
-                                                    <strong>Tyrone Owens</strong>
-                                                </a>
-                                                <br/>
-                                                <small className="text-muted">Designeer</small>
-                                            </div>
-                                            <div className="ml-auto">
-                                                <span className="circle bg-warning circle-lg"></span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="px-3 py-4 text-center">
-                                    { /* Optional link to list more users */ }
-                                    <a className="btn btn-purple btn-sm" href="" title="See more contacts">
-                                        <strong>Load more..</strong>
-                                    </a>
-                                </div>
-                                { /* Extra items */ }
-                                <div className="px-3 py-2">
-                                    <p>
-                                        <small className="text-muted">Tasks completion</small>
-                                    </p>
-                                    <div className="progress progress-xs m-0">
-                                        <div className="progress-bar bg-success" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style={{width: '80%'}}>
-                                            <span className="sr-only">80% Complete</span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="px-3 py-2">
-                                    <p>
-                                        <small className="text-muted">Upload quota</small>
-                                    </p>
-                                    <div className="progress progress-xs m-0">
-                                        <div className="progress-bar bg-warning" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style={{width: '40%'}}>
-                                            <span className="sr-only">40% Complete</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </TabPane>
-                        </TabContent>
-                    </div>
-                </nav>
-                { /* END Off Sidebar (right) */ }
-            </aside>
-        );
-    }
-
+                            </NavItem> */}
+							</Nav>
+							{/* Tab panes */}
+							<TabContent activeTab={this.state.activeTab}>
+								<TabPane tabId="settings">
+									<h3 className="text-center text-thin mt-4">Settings</h3>
+									<div className="p-2">
+										<h4 className="text-muted text-thin">Themes</h4>
+										<div className="row row-flush mb-2">
+											<div className="col-3 mb-3">
+												<div className="setting-color">
+													<label>
+														<input type="radio" name="setting-theme" checked={this.props.theme.name === "theme-a"} value="theme-a" onChange={this.handleThemeRadio} />
+														<span className="icon-check"></span>
+														<span className="split">
+															<span className="color bg-info"></span>
+															<span className="color bg-info-light"></span>
+														</span>
+														<span className="color bg-white"></span>
+													</label>
+												</div>
+											</div>
+											<div className="col-3 mb-3">
+												<div className="setting-color">
+													<label>
+														<input type="radio" name="setting-theme" checked={this.props.theme.name === "theme-b"} value="theme-b" onChange={this.handleThemeRadio} />
+														<span className="icon-check"></span>
+														<span className="split">
+															<span className="color bg-green"></span>
+															<span className="color bg-green-light"></span>
+														</span>
+														<span className="color bg-white"></span>
+													</label>
+												</div>
+											</div>
+											<div className="col-3 mb-3">
+												<div className="setting-color">
+													<label>
+														<input type="radio" name="setting-theme" checked={this.props.theme.name === "theme-c"} value="theme-c" onChange={this.handleThemeRadio} />
+														<span className="icon-check"></span>
+														<span className="split">
+															<span className="color bg-purple"></span>
+															<span className="color bg-purple-light"></span>
+														</span>
+														<span className="color bg-white"></span>
+													</label>
+												</div>
+											</div>
+											<div className="col-3 mb-3">
+												<div className="setting-color">
+													<label>
+														<input type="radio" name="setting-theme" checked={this.props.theme.name === "theme-d"} value="theme-d" onChange={this.handleThemeRadio} />
+														<span className="icon-check"></span>
+														<span className="split">
+															<span className="color bg-danger"></span>
+															<span className="color bg-danger-light"></span>
+														</span>
+														<span className="color bg-white"></span>
+													</label>
+												</div>
+											</div>
+											<div className="col-3 mb-3">
+												<div className="setting-color">
+													<label>
+														<input type="radio" name="setting-theme" checked={this.props.theme.name === "theme-e"} value="theme-e" onChange={this.handleThemeRadio} />
+														<span className="icon-check"></span>
+														<span className="split">
+															<span className="color bg-info-dark"></span>
+															<span className="color bg-info"></span>
+														</span>
+														<span className="color bg-gray-dark"></span>
+													</label>
+												</div>
+											</div>
+											<div className="col-3 mb-3">
+												<div className="setting-color">
+													<label>
+														<input type="radio" name="setting-theme" checked={this.props.theme.name === "theme-f"} value="theme-f" onChange={this.handleThemeRadio} />
+														<span className="icon-check"></span>
+														<span className="split">
+															<span className="color bg-green-dark"></span>
+															<span className="color bg-green"></span>
+														</span>
+														<span className="color bg-gray-dark"></span>
+													</label>
+												</div>
+											</div>
+											<div className="col-3 mb-3">
+												<div className="setting-color">
+													<label>
+														<input type="radio" name="setting-theme" checked={this.props.theme.name === "theme-g"} value="theme-g" onChange={this.handleThemeRadio} />
+														<span className="icon-check"></span>
+														<span className="split">
+															<span className="color bg-purple-dark"></span>
+															<span className="color bg-purple"></span>
+														</span>
+														<span className="color bg-gray-dark"></span>
+													</label>
+												</div>
+											</div>
+											<div className="col-3 mb-3">
+												<div className="setting-color">
+													<label>
+														<input type="radio" name="setting-theme" checked={this.props.theme.name === "theme-h"} value="theme-h" onChange={this.handleThemeRadio} />
+														<span className="icon-check"></span>
+														<span className="split">
+															<span className="color bg-danger-dark"></span>
+															<span className="color bg-danger"></span>
+														</span>
+														<span className="color bg-gray-dark"></span>
+													</label>
+												</div>
+											</div>
+										</div>
+									</div>
+									<div className="p-2">
+										<h4 className="text-muted text-thin">Layout</h4>
+										<div className="clearfix">
+											<p className="float-left">Fixed</p>
+											<div className="float-right">
+												<label className="switch">
+													<input id="chk-fixed" type="checkbox" name="isFixed" checked={this.props.settings.isFixed} onChange={this.handleSettingCheckbox} />
+													<span></span>
+												</label>
+											</div>
+										</div>
+										<div className="clearfix">
+											<p className="float-left">Boxed</p>
+											<div className="float-right">
+												<label className="switch">
+													<input id="chk-boxed" type="checkbox" name="isBoxed" checked={this.props.settings.isBoxed} onChange={this.handleSettingCheckbox} />
+													<span></span>
+												</label>
+											</div>
+										</div>
+									</div>
+									<div className="p-2">
+										<h4 className="text-muted text-thin">Aside</h4>
+										<div className="clearfix">
+											<p className="float-left">Collapsed</p>
+											<div className="float-right">
+												<label className="switch">
+													<input id="chk-collapsed" type="checkbox" name="isCollapsed" checked={this.props.settings.isCollapsed} onChange={this.handleSettingCheckbox} />
+													<span></span>
+												</label>
+											</div>
+										</div>
+										<div className="clearfix">
+											<p className="float-left">Collapsed Text</p>
+											<div className="float-right">
+												<label className="switch">
+													<input id="chk-collapsed-text" type="checkbox" name="isCollapsedText" checked={this.props.settings.isCollapsedText} onChange={this.handleSettingCheckbox} />
+													<span></span>
+												</label>
+											</div>
+										</div>
+										<div className="clearfix">
+											<p className="float-left">Float</p>
+											<div className="float-right">
+												<label className="switch">
+													<input id="chk-float" type="checkbox" name="isFloat" checked={this.props.settings.isFloat} onChange={this.handleSettingCheckbox} />
+													<span></span>
+												</label>
+											</div>
+										</div>
+										<div className="clearfix">
+											<p className="float-left">Hover</p>
+											<div className="float-right">
+												<label className="switch">
+													<input id="chk-hover" type="checkbox" name="asideHover" checked={this.props.settings.asideHover} onChange={this.handleSettingCheckbox} />
+													<span></span>
+												</label>
+											</div>
+										</div>
+										<div className="clearfix">
+											<p className="float-left">Show Scrollbar</p>
+											<div className="float-right">
+												<label className="switch">
+													<input id="chk-scrollbar" type="checkbox" name="asideScrollbar" checked={this.props.settings.asideScrollbar} onChange={this.handleSettingCheckbox} />
+													<span></span>
+												</label>
+											</div>
+										</div>
+									</div>
+								</TabPane>
+								<TabPane tabId="chat">
+									<h3 className="text-center text-thin mt-4">Connections</h3>
+									<div className="list-group">
+										{/* START list title */}
+										<div className="list-group-item border-0">
+											<small className="text-muted">ONLINE</small>
+										</div>
+										{/* END list title */}
+										<div className="list-group-item list-group-item-action border-0">
+											<div className="media">
+												<img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/05.jpg" alt="User avatar" />
+												<div className="media-body text-truncate">
+													<a href="">
+														<strong>Juan Sims</strong>
+													</a>
+													<br />
+													<small className="text-muted">Designeer</small>
+												</div>
+												<div className="ml-auto">
+													<span className="circle bg-success circle-lg"></span>
+												</div>
+											</div>
+										</div>
+										<div className="list-group-item list-group-item-action border-0">
+											<div className="media">
+												<img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/06.jpg" alt="User avatar" />
+												<div className="media-body text-truncate">
+													<a href="">
+														<strong>Maureen Jenkins</strong>
+													</a>
+													<br />
+													<small className="text-muted">Designeer</small>
+												</div>
+												<div className="ml-auto">
+													<span className="circle bg-success circle-lg"></span>
+												</div>
+											</div>
+										</div>
+										<div className="list-group-item list-group-item-action border-0">
+											<div className="media">
+												<img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/07.jpg" alt="User avatar" />
+												<div className="media-body text-truncate">
+													<a href="">
+														<strong>Billie Dunn</strong>
+													</a>
+													<br />
+													<small className="text-muted">Designeer</small>
+												</div>
+												<div className="ml-auto">
+													<span className="circle bg-danger circle-lg"></span>
+												</div>
+											</div>
+										</div>
+										<div className="list-group-item list-group-item-action border-0">
+											<div className="media">
+												<img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/08.jpg" alt="User avatar" />
+												<div className="media-body text-truncate">
+													<a href="">
+														<strong>Tomothy Roberts</strong>
+													</a>
+													<br />
+													<small className="text-muted">Designeer</small>
+												</div>
+												<div className="ml-auto">
+													<span className="circle bg-warning circle-lg"></span>
+												</div>
+											</div>
+										</div>
+										{/* START list title */}
+										<div className="list-group-item border-0">
+											<small className="text-muted">OFFLINE</small>
+										</div>
+										{/* END list title */}
+										<div className="list-group-item list-group-item-action border-0">
+											<div className="media">
+												<img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/09.jpg" alt="User avatar" />
+												<div className="media-body text-truncate">
+													<a href="">
+														<strong>Lawrence Robinson</strong>
+													</a>
+													<br />
+													<small className="text-muted">Designeer</small>
+												</div>
+												<div className="ml-auto">
+													<span className="circle bg-warning circle-lg"></span>
+												</div>
+											</div>
+										</div>
+										<div className="list-group-item list-group-item-action border-0">
+											<div className="media">
+												<img className="align-self-center mr-3 rounded-circle thumb48" src="/static/img/user/10.jpg" alt="User avatar" />
+												<div className="media-body text-truncate">
+													<a href="">
+														<strong>Tyrone Owens</strong>
+													</a>
+													<br />
+													<small className="text-muted">Designeer</small>
+												</div>
+												<div className="ml-auto">
+													<span className="circle bg-warning circle-lg"></span>
+												</div>
+											</div>
+										</div>
+									</div>
+									<div className="px-3 py-4 text-center">
+										{/* Optional link to list more users */}
+										<a className="btn btn-purple btn-sm" href="" title="See more contacts">
+											<strong>Load more..</strong>
+										</a>
+									</div>
+									{/* Extra items */}
+									<div className="px-3 py-2">
+										<p>
+											<small className="text-muted">Tasks completion</small>
+										</p>
+										<div className="progress progress-xs m-0">
+											<div className="progress-bar bg-success" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style={{ width: "80%" }}>
+												<span className="sr-only">80% Complete</span>
+											</div>
+										</div>
+									</div>
+									<div className="px-3 py-2">
+										<p>
+											<small className="text-muted">Upload quota</small>
+										</p>
+										<div className="progress progress-xs m-0">
+											<div className="progress-bar bg-warning" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style={{ width: "40%" }}>
+												<span className="sr-only">40% Complete</span>
+											</div>
+										</div>
+									</div>
+								</TabPane>
+							</TabContent>
+						</div>
+					</nav>
+					{/* END Off Sidebar (right) */}
+				</aside>
+			)
+		);
+	}
 }
 
 Offsidebar.propTypes = {
-    actions: PropTypes.object,
-    settings: PropTypes.object,
-    theme: PropTypes.object
+	actions: PropTypes.object,
+	settings: PropTypes.object,
+	theme: PropTypes.object,
 };
 
-const mapStateToProps = state => ({ settings: state.settings, theme: state.theme })
-const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(actions, dispatch) })
+const mapStateToProps = (state) => ({ settings: state.settings, theme: state.theme });
+const mapDispatchToProps = (dispatch) => ({ actions: bindActionCreators(actions, dispatch) });
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(Offsidebar);
+export default connect(mapStateToProps, mapDispatchToProps)(Offsidebar);

components/PT/JawabanKeberatan/ModalPermohonan.js

@@ -72,14 +72,14 @@ export class ModalPermohonan extends Component {
 			this.state.files.forEach((e) => {
 				formdata.append("files", e);
 			});
-		}
 
-		const added = await addBanding({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+			const added = await addBanding({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
 
-		if (added) {
-			Router.push({
-				pathname: "/app/pt/jawaban-keberatan",
-			});
+			if (added) {
+				Router.push({
+					pathname: "/app/pt/jawaban-keberatan",
+				});
+			}
 		}
 	};
 
@@ -116,7 +116,7 @@ export class ModalPermohonan extends Component {
 					<ModalBody>
 						<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 							<FormGroup>
-								<label>Dokumen Banding</label>
+								<label>Dalam hal mengajukan permohonan banding maka wajib mengunggah surat permohonan banding & dokumen pendukungnya</label>
 								<div>
 									<DropzoneWrapper className="" onDrop={this.onDrop}>
 										{({ getRootProps, getInputProps, isDragActive }) => {

components/PT/Keberatan/ModalPermohonan.js

@@ -72,17 +72,18 @@ export class ModalPermohonan extends Component {
 			this.state.files.forEach((e) => {
 				formdata.append("files", e);
 			});
-		}
-		const added = await addKeberatan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
-		// formdata.append("keberatan", added.add.sanksi.keberatan._id);
-		// formdata.append("data", added.add.sanksi.keberatan._id);
-		// formdata.append("model", "Keberatan");
-		// await addDocPerbaikan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
-		// console.log(added);
-		if (added) {
-			Router.push({
-				pathname: "/app/pt/keberatan",
-			});
+
+			const added = await addKeberatan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+			// formdata.append("keberatan", added.add.sanksi.keberatan._id);
+			// formdata.append("data", added.add.sanksi.keberatan._id);
+			// formdata.append("model", "Keberatan");
+			// await addDocPerbaikan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
+			// console.log(added);
+			if (added) {
+				Router.push({
+					pathname: "/app/pt/keberatan",
+				});
+			}
 		}
 	};
 
@@ -119,7 +120,7 @@ export class ModalPermohonan extends Component {
 					<ModalBody>
 						<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
 							<FormGroup>
-								<label>Dalam hal mengajukan permohonan keberatan maka wajib mengunggah dokumen pendukungnya</label>
+								<label>Dalam hal mengajukan permohonan keberatan maka wajib mengunggah surat permohonan keberatan atas pengenaan sanksi administratif & dokumen pendukungnya</label>
 								<div>
 									<DropzoneWrapper className="" onDrop={this.onDrop}>
 										{({ getRootProps, getInputProps, isDragActive }) => {

components/PT/TableSanksi.js

@@ -32,7 +32,7 @@ function TableSanksi({ listData, to, linkName }) {
 											</div>
 										</div>
 									</td>
-									<td>{moment(data.sanksi.createAt).fromNow()}</td>
+									<td>{moment(data.sanksi.createAt).format("DD MMMM YYYY")}</td>
 									<td>
 										<Link href={{ pathname: to, query: { noSanksi: data.sanksi.no_sanksi } }}>
 											<Button color="primary">{linkName}</Button>

components/PT/Timeline.js

@@ -0,0 +1,62 @@
+import moment from "moment";
+
+function Timeline({ data }) {
+	return (
+		<ul className="timeline">
+			{data.data
+				.filter((e) => e.for_pt)
+				.map((data, i) => (
+					<>
+						<li className="timeline-separator" data-datetime={moment(data.createdAt).format("DD MMMM YYYY")}></li>
+						<li className={data.role === "PT" ? "timeline-inverted" : ""}>
+							<div className="timeline-badge info">
+								<em className="far fa-file"></em>
+							</div>
+
+							<div className="timeline-card">
+								<div className="popover right">
+									<div className="arrow"></div>
+									<div className="popover-body">
+										<div className="d-flex align-items-center mb-3">
+											<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
+											<p className="m-0">
+												<strong>{data.role}</strong>
+												<br />
+												{data.description}
+											</p>
+										</div>
+										{data.data.files ? (
+											<>
+												<p className="text-muted my-2">Dokumen</p>
+												{data.data.files.map((e) => (
+													<div className="media bb p-2">
+														<div className="media-body">
+															<p className="m-0">
+																<a href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
+																	<strong>{e.name}</strong>
+																</a>
+															</p>
+														</div>
+													</div>
+												))}
+											</>
+										) : (
+											""
+										)}
+									</div>
+								</div>
+							</div>
+						</li>
+					</>
+				))}
+
+			<li className="timeline-end">
+				<a className="timeline-badge">
+					<em className="fa fa-plus"></em>
+				</a>
+			</li>
+		</ul>
+	);
+}
+
+export default Timeline;

components/Pemeriksaan/TableRiwayat.js

@@ -6,7 +6,8 @@ function TableRiwayat({ data }) {
 			<table className="table table-striped my-4 w-100">
 				<thead>
 					<tr>
-						<th>Tanggal</th>
+                        <th>Tanggal Dibuat</th>
+						<th>Tanggal Dokumen</th>
 						<th>Judul Dokumen</th>
 						<th>File Pendukung</th>
 					</tr>
@@ -15,6 +16,7 @@ function TableRiwayat({ data }) {
 					{data.penjadwalan.pemeriksaan.map((e) => (
 						<tr>
 							<td>{moment(e.createdAt).format("D MMMM YYYY")}</td>
+							<td>{moment(e.date).format("D MMMM YYYY")}</td>
 							<td>{e.title}</td>
 							<td>
 								{e.files.map((e) => (

components/Sanksi/TablePenetapanSanksi.js

@@ -52,7 +52,7 @@ export class TablePenetapanSanksi extends Component {
 													<div>
 														<p>{jp.pelanggaran}</p>
 														<p>TMT : {jp.tmt_bulan} Bulan</p>
-														<p>Level Pelanggaran : {jp.label_sanksi}</p>
+														<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
 													</div>
 												</div>
 											</div>

json/dataUser.js

@@ -0,0 +1,56 @@
+exports = [
+	{
+		id: "2A080F42-AE7F-407B-976E-DE5FA87BD277",
+		username: "dikti",
+        password: "123",
+		nama: "Dikti Ristek/LLDIKTI",
+		no_telp: "0211111222233",
+		no_hp: "197903302008011007",
+		jabatan: null,
+		alamat: "Jln. Jenderal Sudirman Pintu 1, Senayan",
+		id_sdm_pengguna: null,
+		peran: [
+			{
+				id: "96EBA4CC-5DE1-4429-A836-56E32A63FC67",
+				organisasi: {
+					id: "86942CDF-44F1-446E-8E9E-CB37BBBB16E6",
+					nama: "Semua Unit",
+					id_lembaga_asal: "86942CDF-44F1-446E-8E9E-CB37BBBB16E6",
+					id_jenis_lembaga: 21,
+				},
+				peran: {
+					id: 1,
+					nama: "Admin Lemkerma",
+					menu: null,
+				},
+			},
+		],
+	},
+	{
+		id: "2A080F42-AE7F-407B-976E-DE5FA87BD278",
+		username: "satyagama",
+        password: "123",
+		nama: "Univertisa Satyagama",
+		no_telp: "02157946063",
+		no_hp: "197903302008011007",
+		jabatan: null,
+		alamat: "Jln. Jenderal Sudirman Pintu 1, Senayan",
+		id_sdm_pengguna: null,
+		peran: [
+			{
+				id: "96EBA4CC-5DE1-4429-A836-56E32A63FC67",
+				organisasi: {
+					id: "86942CDF-44F1-446E-8E9E-CB37BBBB16E6",
+					nama: "Semua Unit",
+					id_lembaga_asal: "86942CDF-44F1-446E-8E9E-CB37BBBB16E6",
+					id_jenis_lembaga: 21,
+				},
+				peran: {
+					id: 2,
+					nama: "Perguruan Tinggi",
+					menu: null,
+				},
+			},
+		],
+	},
+];

pages/app/banding/detail.js

@@ -137,8 +137,7 @@ class JawabanBanding extends Component {
 															onChange={this.handleChangeSelect}
 															options={[
 																{ value: "Ditolak", label: "Ditolak", className: "State-ACT" },
-																{ value: "Mengubah Keputusan Sanksi", label: "Mengubah Keputusan Sanksi", className: "State-ACT" },
-																{ value: "Membatalkan Keputusan Sanksi", label: "Membatalkan Keputusan Sanksi", className: "State-ACT" },
+																{ value: "Dikabulkan", label: "Dikabulkan", className: "State-ACT" },
 															]}
 															required
 														/>

pages/app/keberatan/detail.js

@@ -146,9 +146,9 @@ class DetailKeberatan extends Component {
 															value={this.state.selectedOption}
 															onChange={this.handleChangeSelect}
 															options={[
-																{ value: "ditolak", label: "Ditolak", className: "State-ACT" },
-																{ value: "mengubah sanksi", label: "Mengubah Sanksi", className: "State-ACT" },
-																{ value: "mencabut sanksi", label: "Mencabut Sanksi", className: "State-ACT" },
+																{ 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
 														/>

pages/app/pencabutan-sanksi/detail.js

@@ -143,15 +143,15 @@ class JawabanPencabutanSanksi extends Component {
 															value={this.state.selectedOption}
 															onChange={this.handleChangeSelect}
 															options={[
-																{ value: "diterima", label: "Diterima", className: "State-ACT" },
-																{ value: "rekomendasi perbaikan", label: "Rekomendasi Perbaikan", className: "State-ACT" },
+																{ 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" ? (
+												{selectedOption && selectedOption.value === "Rekomendasi Perbaikan" ? (
 													<FormGroup>
 														<label className="row-form-label">Keterangan:</label>
 														<div className="row-md-10">

pages/app/pt/jawaban-keberatan/detail.js

@@ -60,9 +60,8 @@ class JawabanKeberatan extends Component {
 												<>
 													<p>
 														Setelah membaca jawaban permohonan keberatan atas pengenaan sanksi, jika Perguruan Tinggi bermaksud mengajukan permohonan banding kepada atasan pemberi sanksi maka dapat menekan tombol
-														di bawah ini (10 Hari Kerja)
+														di bawah ini paling lambat {moment(sanksi.data[0].sanksi.close_banding).format("DD MMMM YYYY")}
 													</p>
-													<p>Batas Akhir: {moment(sanksi.data[0].sanksi.close_banding).format("DD MMMM YYYY")}</p>
 													<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data[0].sanksi.banding || false}>
 														Ajukan Banding
 													</Button>

pages/app/pt/keberatan/detail.js

@@ -54,8 +54,10 @@ class Keberatan extends Component {
 											<DetailSanksi data={sanksi.data[0]} />
 											{new Date(sanksi.data[0].sanksi.close_keberatan).getTime() > Date.now() ? (
 												<>
-													<p>Setelah membaca surat keputusan sanksi tersebut, jika Perguruan Tinggi bermaksud mengajukan permohonan keberatan maka dapat menekan tombol di bawah ini (21 Hari Kerja)</p>
-													<p>Batas Akhir: {moment(sanksi.data[0].sanksi.close_keberatan).format("DD MMMM YYYY")}</p>
+													<p>
+														Setelah membaca surat keputusan sanksi tersebut, jika Perguruan Tinggi bermaksud mengajukan permohonan keberatan maka dapat menekan tombol di bawah ini paling lambat{" "}
+														{moment(sanksi.data[0].sanksi.close_keberatan).format("DD MMMM YYYY")}
+													</p>
 													<Button color="primary" onClick={this.toggleModal} disabled={sanksi.data[0].sanksi.keberatan || false}>
 														Ajukan Permohonan Keberatan
 													</Button>

pages/app/pt/pemantauan.js

@@ -4,7 +4,7 @@ import Header from "@/components/Main/Header";
 import DetailPT from "@/components/Main/DetailPT";
 import { getLog } from "@/actions/log";
 import { Row, Col } from "reactstrap";
-import Timeline from "@/components/Main/Timeline";
+import Timeline from "@/components/PT/Timeline";
 
 class Pemantauan extends Component {
 	constructor(props) {

pages/login.js

@@ -1,207 +1,126 @@
-// import React, { Component,useState } from 'react';
-import React, { Component} from 'react';
-import BasePage from '@/components/Layout/BasePage';
-import Link from 'next/link';
-import { Input, CustomInput } from 'reactstrap';
-import * as actions from '../store/actions/actions';
-
-import FormValidator from '@/components/Forms/Validator.js';
-import { dispatch } from 'd3';
-import Router, { withRouter } from 'next/router'
-
-// import useUser from '../lib/useUser';
-// import fetchJson from '../lib/fetchJson';
-
-const year = new Date().getFullYear()
-
+import { connect } from "react-redux";
+// import Router, { withRouter } from "next/router";
+import { login } from "@/store/actions/user";
+
+import React, { Component } from "react";
+import BasePage from "@/components/Layout/BasePage";
+import { Row, Col, Input, Card, CardHeader, CardBody, CardFooter, CustomInput } from "reactstrap";
+
+import FormValidator from "@/components/Forms/Validator.js";
+
+/**
+ * Validation flow using controlled components
+ *
+ * 1- User type on input
+ * 2- onChange event trigger validation
+ * 3- Validate methods are listed using "data-validate"
+ *    attribute. Content must be an array in json format.
+ * 4- The validation returns an object with format {[input name]: status}
+ *    where status is an array of boolean per each method
+ * 5- Methods that requires an argument, read the 'data-param' attribute
+ * 6- Similarly, onSubmit event does a bulk validation on all form elements
+ */
 
 class Login extends Component {
-
-    // mutateUser = useUser({
-    //     redirectTo: '/profile-sg',
-    //     redirectIfFound: true,
-    // })
-
-    // [errorMsg, setErrorMsg] = useState('')
-
-
-    state = {
-        formLogin: {
-            uname: '',
-            password: ''
-        }
-    }
-
-     /**
-      * Validate input using onChange event
-      * @param  {String} formName The name of the form in the state object
-      * @return {Function} a function used for the event
-      */
-    validateOnChange = event => {
-        const input = event.target;
-        const form = input.form
-        const value = input.type === 'checkbox' ? input.checked : input.value;
-
-        const result = FormValidator.validate(input);
-
-        this.setState({
-            [form.name]: {
-                ...this.state[form.name],
-                [input.name]: value,
-                errors: {
-                    ...this.state[form.name].errors,
-                    [input.name]: result
-                }
-            }
-        });
-
-    }
-
-    onSubmit(e)  {
-        const form = e.target;
-        const inputs = [...form.elements].filter(i => ['INPUT', 'SELECT'].includes(i.nodeName))
-
-        const { errors, hasError } = FormValidator.bulkValidate(inputs)
-
-        this.setState({
-            [form.name]: {
-                ...this.state[form.name],
-                errors
-            }
-        });
-
-        console.log(hasError ? 'Form has errors. Check!' : 'Form Submitted!');
-
-
-        e.preventDefault();
-
-        if (!hasError) {
-            //this.props.logged('signin')
-            //Router.push('/singleview');
-
-            // const body = {
-            //     username: this.state.formLogin.uname,
-            //     password: this.state.formLogin.password
-            //   }
-
-            // try {
-            //     mutateUser(
-            //         await fetchJson('/api/login', {
-            //         method: 'POST',
-            //         headers: { 'Content-Type': 'application/json' },
-            //         body: JSON.stringify(body),
-            //         })
-            //     )
-
-
-            // } catch (error) {
-            // console.error('An unexpected error happened:', error)
-            // setErrorMsg(error.data.message)
-            // }
-            
-            //main route
-            Router.push('/app/projects');
-        };
-
-    }
-
-    /* Simplify error check */
-    hasError = (formName, inputName, method) => {
-        return  this.state[formName] &&
-                this.state[formName].errors &&
-                this.state[formName].errors[inputName] &&
-                this.state[formName].errors[inputName][method]
-    }
-
-    render() {
-        return (
-            <div className="block-center mt-4 wd-xl">
-                <div className="card card-flat">
-                    {/* <div className="card-header text-center bg-white">
-                        <a href="">
-                            <img className="block-center " src="/static/img/logo.png" alt="Logo"/>
-                        </a>
-                    </div> */}
-                    <img class="card-img-top" src="/static/img/logo.png" alt="Logo"></img>
-                    <div className="card-body">
-                        <h5 class="card-title text-center py-2 bg-gray">Aplikasi Perguruan Tinggi Bermasalah </h5>
-                        {/* <p className="text-center py-2">Aplikasi Perguruan Tinggi Bermasalah </p> */}
-                        <form className="mb-3" name="formLogin" onSubmit={this.onSubmit}>
-                            <div className="form-group">
-                                <div className="input-group with-focus">
-                                    {/* <Input type="email"
-                                        name="email"
-                                        className="border-right-0"
-                                        placeholder="Enter username"
-                                        invalid={this.hasError('formLogin','email','required')||this.hasError('formLogin','email','email')}
-                                        onChange={this.validateOnChange}
-                                        data-validate='["required", "email"]'
-                                        value={this.state.formLogin.email}/> */}
-
-                                    <Input placeholder="Enter User Name"
-                                    name="uname"
-                                    className="border-right-0"
-                                    invalid={this.hasError('formLogin','uname','required')}
-                                    onChange={this.validateOnChange}
-                                    data-validate='["required"]'
-                                    value={this.state.formLogin.uname}
-                                     />
-                                    <div className="input-group-append">
-                                        <span className="input-group-text text-muted bg-transparent border-left-0">
-                                            <em className="fa fa-user"></em>
-                                        </span>
-                                    </div>
-                                    { this.hasError('formLogin','uname','required') && <span className="invalid-feedback">Field is required</span> }
-                                    {/* { this.hasError('formLogin','email','email') && <span className="invalid-feedback">Field must be valid email</span> } */}
-                                </div>
-                            </div>
-                            <div className="form-group">
-                                <div className="input-group with-focus">
-                                    <Input type="password"
-                                        id="id-password"
-                                        name="password"
-                                        className="border-right-0"
-                                        placeholder="Password"
-                                        invalid={this.hasError('formLogin','password','required')}
-                                        onChange={this.validateOnChange}
-                                        data-validate='["required"]'
-                                        value={this.state.formLogin.password}
-                                    />
-                                    <div className="input-group-append">
-                                        <span className="input-group-text text-muted bg-transparent border-left-0">
-                                            <em className="fa fa-lock"></em>
-                                        </span>
-                                    </div>
-                                    <span className="invalid-feedback">Field is required</span>
-                                </div>
-                            </div>
-                            {/* <div className="clearfix">
-                                <CustomInput type="checkbox" id="rememberme"
-                                    className="float-left mt-0"
-                                    name="remember"
-                                    label="Remember Me">
-                                </CustomInput>
-                                <div className="float-right">
-                                    <Link href="/pages/recover" as="/recover"><a className="text-muted"> </a></Link>
-                                </div>
-                            </div> */}
-                            <button className="btn btn-block btn-primary mt-3" type="submit">Login</button>
-                        </form>
-                    </div>
-                </div>
-                <div className="p-3 text-center">
-                    {/* <span className="mr-2">&copy;</span> */}
-                    <span>&copy; {year} - Dikti</span>
-                    {/* <span className="mx-2">-</span>
-                    <span>Dikti</span> */}
-                    <br/>
-                    <span> </span>
-                </div>
-            </div>
-        );
-    }
+	state = {
+		/* Group each form state in an object.
+           Property name MUST match the form name */
+
+		formLogin: {
+			username: "",
+			password: "",
+		},
+	};
+
+	/**
+	 * Validate input using onChange event
+	 * @param  {String} formName The name of the form in the state object
+	 * @return {Function} a function used for the event
+	 */
+	validateOnChange = (event) => {
+		const input = event.target;
+		const form = input.form;
+		const value = input.type === "checkbox" ? input.checked : input.value;
+
+		const result = FormValidator.validate(input);
+
+		this.setState({
+			[form.name]: {
+				...this.state[form.name],
+				[input.name]: value,
+				errors: {
+					...this.state[form.name].errors,
+					[input.name]: result,
+				},
+			},
+		});
+	};
+
+	onSubmit = (e) => {
+		const form = e.target;
+		const inputs = [...form.elements].filter((i) => ["INPUT", "SELECT"].includes(i.nodeName));
+
+		const { errors, hasError } = FormValidator.bulkValidate(inputs);
+
+		this.setState({
+			[form.name]: {
+				...this.state[form.name],
+				errors,
+			},
+		});
+
+		console.log(hasError ? "Form has errors. Check!" : "Form Submitted!");
+		if (!hasError) {
+			const { username, password } = this.state.formLogin;
+			console.log(this.state);
+			this.dispatch(login(username, password));
+		}
+		e.preventDefault();
+	};
+
+	/* Simplify error check */
+	hasError = (formName, inputName, method) => {
+		return this.state[formName] && this.state[formName].errors && this.state[formName].errors[inputName] && this.state[formName].errors[inputName][method];
+	};
+
+	render() {
+		return (
+			<div className="block-center mt-4 wd-xl">
+				<div className="card card-flat">
+					<img className="card-img-top" src="/static/img/logo.png" alt="Logo"></img>
+					<div className="card-body">
+						{" "}
+						<h5 className="card-title text-center py-2 bg-gray">Aplikasi Perguruan Tinggi Bermasalah </h5>
+						<form onSubmit={this.onSubmit} method="post" name="formLogin">
+							<div className="form-group">
+								<label className="col-form-label">Username *</label>
+								<Input type="text" name="username" invalid={this.hasError("formLogin", "username", "required")} onChange={this.validateOnChange} data-validate='["required"]' value={this.state.formLogin.username} />
+								{this.hasError("formLogin", "username", "required") && <span className="invalid-feedback">Field is required</span>}
+							</div>
+							<div className="form-group">
+								<label className="col-form-label">Password *</label>
+								<Input
+									type="password"
+									id="id-password"
+									name="password"
+									invalid={this.hasError("formLogin", "password", "required")}
+									onChange={this.validateOnChange}
+									data-validate='["required"]'
+									value={this.state.formLogin.password}
+								/>
+								<span className="invalid-feedback">Field is required</span>
+							</div>
+							<div className="required">* Required fields</div>
+							<button type="submit" className="btn btn-block btn-primary mt-3">
+								Login
+							</button>
+						</form>
+					</div>
+				</div>
+			</div>
+		);
+	}
 }
-
 Login.Layout = BasePage;
 
-export default Login;
+export default connect(null)(Login);

store/actions/user.js

@@ -0,0 +1,16 @@
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
+export const LOGIN_FAIL = 'LOGIN_FAIL'
+
+import dataUser from "@/json/dataUser";
+
+export const login = (username, password) => dispatch => {
+    let data = dataUser.filter(value => value.username === username)
+    if (!data.length) {
+        return dispatch({type: LOGIN_FAIL})
+    }
+    data = data[0]
+    if(data.password !== password) {
+        return dispatch({type: LOGIN_FAIL})
+    }
+    return dispatch({type: LOGIN_SUCCESS, payload: data})
+}

store/reducers/reducers.js

@@ -5,6 +5,7 @@ import themesReducer from "./themes.reducers.js";
 import isLoggedReducer from "./isLogged.reducer.js";
 import { pelaporanListReducer, pelaporanCreateReducer } from "./pelaporan.reducers.js";
 import { penjadwalanCreateReducer } from "./penjadwalan.reducers.js";
+import { userReducer } from "./user.reducer";
 
 export default combineReducers({
 	settings: settingsReducer,
@@ -13,4 +14,5 @@ export default combineReducers({
 	pelaporanList: pelaporanListReducer,
 	pelaporanCreate: pelaporanCreateReducer,
 	penjadwalanAdd: penjadwalanCreateReducer,
+	user: userReducer,
 });

store/reducers/user.reducer.js

@@ -0,0 +1,12 @@
+import { LOGIN_SUCCESS, LOGIN_FAIL } from "../actions/user";
+
+export const userReducer = (state = {}, action) => {
+	switch (action.type) {
+		case LOGIN_SUCCESS:
+			return { isLogin: true, data: action.payload };
+		case LOGIN_FAIL:
+			return { isLogin: false, data: {} };
+		default:
+			return state;
+	}
+};