Skip to content

T
Tia-dev
Commit 38a319c3 authored by EKSAD's avatar EKSAD
Browse files
Options

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into riri

parents 575ba114 7b01fde0
Show whitespace changes
Inline Side-by-side
Showing with 377 additions and 23 deletions
src/container/ApprovalMatrix.js
View file @ 38a319c3
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Typography } from '@material-ui/core'; import { Typography } from '@material-ui/core';
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import Images from '../assets/Images'; import Images from '../assets/Images';
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
import Modal from '@material-ui/core/Modal';
class ApprovalMatrix extends Component { var ct = require("../library/CustomTable");
render() { const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
function rand() {
return Math.round(Math.random() * 20) - 10;
}
function getModalStyle() {
const top = 50 + rand();
const left = 50 + rand();
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: 'absolute',
width: 400,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
// class ApprovalMatrix extends Component {
// render() {
export default function ApprovalMatrix() {
const classess = useStyles();
const [modalStyle] = React.useState(getModalStyle);
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const showModal = (
<div className="" style={{ marginTop: 100 }}>
<div className="popup-content background-white border-radius">
<div className="popup-panel grid grid-2x">
<div className="col-1" style={{ width: '140%' }}>
<div className="popup-title">
Test
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit" }}>
<button
type="button"
className="btn btn-circle btn-grey"
onClick={() => null}
>
<i className="fa fa-lg fa-times" />
</button>
</div>
</div>
{/* <div>
CONTENT
</div> */}
</div>
</div>
);
const columns = [{ const columns = [{
name: "Action", name: "Action",
options: { options: {
...@@ -36,7 +106,7 @@ class ApprovalMatrix extends Component { ...@@ -36,7 +106,7 @@ class ApprovalMatrix extends Component {
] ]
const options = { const options = {
filter: false, filter: false,
sort: false, sort: true,
responsive: "scroll", responsive: "scroll",
print: false, print: false,
download: false, download: false,
...@@ -47,11 +117,12 @@ class ApprovalMatrix extends Component { ...@@ -47,11 +117,12 @@ class ApprovalMatrix extends Component {
} }
return ( return (
<div style={{ flex: 1 }}> <Container fluid style={{ height: '100vh', padding: 0 }}>
<div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 30 }}> <div style={{ height: '200px', width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 30 }}>
<div style={{ display: 'flex' }}> <div style={{ }}>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}>
<Typography style={{ paddingTop: 8, paddingBottom: 7, fontSize: '16px', color: 'white' }}>Master Data - Approval Matrix</Typography> <Typography style={{ paddingTop: 8, paddingBottom: 7, fontSize: '16px', color: 'white' }}>Master Data - Approval Matrix</Typography>
<form style={{ marginLeft: 110 }}> <form style={{ }}>
<TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/> <TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/>
</form> </form>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
...@@ -60,7 +131,6 @@ class ApprovalMatrix extends Component { ...@@ -60,7 +131,6 @@ class ApprovalMatrix extends Component {
backgroundColor: 'transparent', backgroundColor: 'transparent',
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent', borderColor: 'transparent',
marginLeft: 82,
padding: 0 padding: 0
}} }}
onClick={() => null} onClick={() => null}
...@@ -111,26 +181,35 @@ class ApprovalMatrix extends Component { ...@@ -111,26 +181,35 @@ class ApprovalMatrix extends Component {
marginLeft: 16, marginLeft: 16,
padding:0 padding:0
}} }}
onClick={() => null} onClick={handleOpen}
> >
<img src={Images.add} /> <img src={Images.add} />
</button> </button>
</div > </div >
<Modal
open={open}
onClose={handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
{showModal}
</Modal>
</div> </div>
</div> </div>
<div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ padding: 20, width: '100%' }}>
<div> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={data} data={data}
columns={columns} columns={columns}
options={options} options={options}
/> />
</MuiThemeProvider>
</div> </div>
</div> </div>
</div> </Container>
); );
} // }
} }
export default ApprovalMatrix; // export default ApprovalMatrix;
\ No newline at end of file
src/container/Otorisasi/User.js
View file @ 38a319c3
...@@ -9,7 +9,7 @@ var ct = require("../../library/CustomTable"); ...@@ -9,7 +9,7 @@ var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); const options = ct.customOptions();
export default class componentName extends Component { export default class User extends Component {
render() { render() {
const columns = ["#", "Nama Perusahaan", "Revisi", "Status", { const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
name: "Action", name: "Action",
......
src/container/Otorisasi/UserRole.js
View file @ 38a319c3
import React, { Component } from 'react'; import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables";
import AddRole from './UserRole/AddRole';
import EditRole from './UserRole/EditRole'
export default class componentName extends Component { var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
export default class UserRole extends Component {
constructor(props) {
super(props)
this.state = {
add: false,
edit: false
}
}
render() { render() {
const columns = [{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
}}
onClick={() => this.setState({edit: true})}
>
<img src={Images.editCopy} />
</button>
</div >
);
}
}
}, {
name: "ID",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 50 }}>
{val}
</div >
);
}
}
}, {
name: "User Role",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 250 }}>
{val}
</div >
);
}
}
}, "Hak Akses", "Status"]
const data = [
["1", "1", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["2", "2", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["3", "3", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
["4", "4", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
["5", "5", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
]
return ( return (
<div style={{height: '100vh', width: '100%', flex: 1}}> textInComponent </div> <div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', alignSelf: 'center'}}>Master Data - Role & Otorisasi</label>
<div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
<div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5, flexDirection: 'row', display: 'flex'}}>
<SearchIcon/>
<input type="text" style={{flexGrow: 1, marginLeft: 10}}/>
</div>
</div>
{/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */}
<div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
<img src={Images.add} onClick={() => this.setState({add: true})}/>
</div>
</div>
<div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
{this.state.add && <AddRole/>}
{this.state.edit && <EditRole/>}
</div>
); );
} }
} }
src/container/Otorisasi/UserRole/AddRole.js 0 → 100644
View file @ 38a319c3
import React, { Component } from 'react';
import { TextField } from '@material-ui/core';
export default class CreateUnitBisnis extends Component {
render() {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="periode"
select
label="Berlaku Mulai"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="unit"
select
label="Unit Bisnis"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
</div>
);
}
}
src/container/Otorisasi/UserRole/EditRole.js 0 → 100644
View file @ 38a319c3
import React, { Component } from 'react';
import { TextField } from '@material-ui/core';
export default class CreateUnitBisnis extends Component {
render() {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="periode"
select
label="Berlaku Mulai"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="unit"
select
label="Unit Bisnis"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
</div>
);
}
}
src/container/Screen404.js
View file @ 38a319c3
...@@ -2,15 +2,21 @@ import React from 'react' ...@@ -2,15 +2,21 @@ import React from 'react'
import { import {
useLocation useLocation
} from "react-router-dom"; } from "react-router-dom";
import Images from '../assets/Images';
export default function NoMatch() { export default function NoMatch() {
let location = useLocation(); let location = useLocation();
return ( return (
<div> <div style={{flex: 1, height: '100vh', alignItems:'center', justifyContent: 'center', display: 'flex'}}>
<h3> <div style={{flexDirection:'column'}}>
Link '<code>{location.pathname}</code>' engga ada euy <div style={{alignItems:'center', justifyContent: 'center', display: 'flex'}}>
<img src={Images.tia}/>
</div>
<h3 style={{marginTop: 20}}>
'<code>{location.pathname}</code>' Not Found
</h3> </h3>
</div> </div>
</div>
); );
} }
\ No newline at end of file
src/router/homeRoutes.js
View file @ 38a319c3
...@@ -48,6 +48,10 @@ const routes = [ ...@@ -48,6 +48,10 @@ const routes = [
path: "/home/unit-bisnis", path: "/home/unit-bisnis",
main: UnitBisnis main: UnitBisnis
}, },
{
path: "*",
main: screen404
}
]; ];
export default routes; export default routes;
\ No newline at end of file
src/router/index.js
View file @ 38a319c3
...@@ -30,7 +30,7 @@ export default function BasicExample() { ...@@ -30,7 +30,7 @@ export default function BasicExample() {
<Route exact path="/"> <Route exact path="/">
<Redirect <Redirect
to={{ to={{
pathname: "/home", pathname: "/home/beranda",
// state: { from: location } // state: { from: location }
}} }}
/> />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment