Commit e3fb2a88 authored by EKSAD's avatar EKSAD

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

parents 3d50ba27 c0a03722
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
.popup-content { .popup-content {
position: relative; position: relative;
margin: auto; margin: auto;
width: 1100px; } width: 600px; }
@media (max-width: 800px) { @media (max-width: 800px) {
.popup-content { .popup-content {
width: calc(100% - 30px); width: calc(100% - 30px);
...@@ -99,10 +99,10 @@ export default class BudgetTahunan extends Component { ...@@ -99,10 +99,10 @@ export default class BudgetTahunan extends Component {
] ]
return ( return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}> <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div style={{ height: 78, backgroundColor: '#354960', display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
</div> </div>
<div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}> <Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} > <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan</Typography> <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan</Typography>
......
...@@ -30,7 +30,7 @@ import { ...@@ -30,7 +30,7 @@ import {
useRouteMatch useRouteMatch
} from "react-router-dom"; } from "react-router-dom";
import Images from '../assets/Images'; import Images from '../assets/Images';
import { FadeMenu, Footer } from '../Utils/Index'; import { FadeMenu, Footer, UseWindowDimensions } from '../Utils/Index';
import Beranda from './Beranda'; import Beranda from './Beranda';
import { Avatar } from '@material-ui/core'; import { Avatar } from '@material-ui/core';
import HomeRoutes from '../router/homeRoutes' import HomeRoutes from '../router/homeRoutes'
...@@ -38,6 +38,7 @@ import ArraySide from '../library/Array' ...@@ -38,6 +38,7 @@ import ArraySide from '../library/Array'
const drawerWidth = 307; const drawerWidth = 307;
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
display: 'flex', display: 'flex',
...@@ -133,6 +134,8 @@ export default function MiniDrawer() { ...@@ -133,6 +134,8 @@ export default function MiniDrawer() {
let { path, url } = useRouteMatch(); let { path, url } = useRouteMatch();
const { height, width } = UseWindowDimensions();
return ( return (
<div className={classes.root}> <div className={classes.root}>
<CssBaseline /> <CssBaseline />
...@@ -196,8 +199,8 @@ export default function MiniDrawer() { ...@@ -196,8 +199,8 @@ export default function MiniDrawer() {
</div> </div>
{open && {open &&
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold'}}>John Doe</Typography> <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>John Doe</Typography>
<Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', marginTop: 10}}>john@tia.com</Typography> <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', marginTop: 10 }}>john@tia.com</Typography>
</div> </div>
} }
</div> </div>
...@@ -211,39 +214,39 @@ export default function MiniDrawer() { ...@@ -211,39 +214,39 @@ export default function MiniDrawer() {
</div> </div>
</div> </div>
} }
{open && {open &&
<div style={{marginLeft: 25, marginTop: 20, marginBottom: 20}}> <div style={{ marginLeft: 25, marginTop: 20, marginBottom: 20 }}>
<Typography style={{color: 'white', fontSize: 12}}>APLIKASI</Typography> <Typography style={{ color: 'white', fontSize: 12 }}>APLIKASI</Typography>
</div> </div>
} }
<List> <List>
{ArraySide.map((item, index) => ( {ArraySide.map((item, index) => (
<div> <div>
{item.subItem != null? {item.subItem != null ?
<div style={{justifyContent:'space-between', flexDirection: 'row', display: 'flex', paddingRight: 10}} onClick={() => selectedIndex == 0? setSelectedIndex(index) : setSelectedIndex(0)}> <div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingRight: 10 }} onClick={() => selectedIndex == 0 ? setSelectedIndex(index) : setSelectedIndex(0)}>
<ListItem button key={item.label}> <ListItem button key={item.label}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{color:"white"}}/> : <MailIcon style={{color:"white"}}/>}</ListItemIcon> <ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{ color: "white" }} /> : <MailIcon style={{ color: "white" }} />}</ListItemIcon>
<Typography style={{color: 'white', fontSize: 12}}>{item.label}</Typography> <Typography style={{ color: 'white', fontSize: 12 }}>{item.label}</Typography>
</ListItem> </ListItem>
{item.subItem != null? (index === selectedIndex? <ExpandLess style={{color:"white", marginLeft: 50, alignSelf:'center'}}/> : <ExpandMore style={{color:"white", marginLeft: 50, alignSelf:'center'}}/>) : null} {item.subItem != null ? (index === selectedIndex ? <ExpandLess style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} />) : null}
</div> </div>
: :
<Link to={`${url}/${item.path}`}> <Link to={`${url}/${item.path}`}>
<ListItem button key={item.label} onClick={() => setSelectedIndex(index)}> <ListItem button key={item.label} onClick={() => setSelectedIndex(index)}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{color:"white"}}/> : <MailIcon style={{color:"white"}}/>}</ListItemIcon> <ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{ color: "white" }} /> : <MailIcon style={{ color: "white" }} />}</ListItemIcon>
<Typography style={{color: 'white', fontSize: 12}}>{item.label}</Typography> <Typography style={{ color: 'white', fontSize: 12 }}>{item.label}</Typography>
</ListItem> </ListItem>
</Link> </Link>
} }
{item.subItem != null && {item.subItem != null &&
<div> <div>
<Collapse in={index === selectedIndex} timeout="auto" unmountOnExit> <Collapse in={index === selectedIndex} timeout="auto" unmountOnExit>
<List component="div" disablePadding> <List component="div" disablePadding>
{item.subItem.map((sub, index) => { {item.subItem.map((sub, index) => {
return ( return (
<Link to={`${url}/${sub.path}`}> <Link to={`${url}/${sub.path}`}>
<ListItem style={{paddingLeft: 72}}> <ListItem style={{ paddingLeft: 72 }}>
<Typography style={{color: 'white', fontSize: 12}}>{sub.label}</Typography> <Typography style={{ color: 'white', fontSize: 12 }}>{sub.label}</Typography>
</ListItem> </ListItem>
</Link> </Link>
) )
...@@ -251,8 +254,8 @@ export default function MiniDrawer() { ...@@ -251,8 +254,8 @@ export default function MiniDrawer() {
</List> </List>
</Collapse> </Collapse>
</div> </div>
} }
</div> </div>
))} ))}
</List> </List>
</Drawer> </Drawer>
...@@ -272,7 +275,7 @@ export default function MiniDrawer() { ...@@ -272,7 +275,7 @@ export default function MiniDrawer() {
key={index} key={index}
path={route.path} path={route.path}
// exact={route.exact} // exact={route.exact}
children={<route.main />} children={<route.main height={height} />}
/> />
))} ))}
</Switch> </Switch>
......
...@@ -17,7 +17,13 @@ export default class UnitBisnis extends Component { ...@@ -17,7 +17,13 @@ export default class UnitBisnis extends Component {
visibleCreate: false visibleCreate: false
} }
} }
componentDidMount() {
}
render() { render() {
console.log(this.props.height)
const columns = ["#", "Nama Perusahaan", "Revisi", "Status", { const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
name: "Action", name: "Action",
options: { options: {
...@@ -57,11 +63,11 @@ export default class UnitBisnis extends Component { ...@@ -57,11 +63,11 @@ export default class UnitBisnis extends Component {
["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"], ["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
] ]
return ( return (
<Container fluid style={{ height: '100vh', padding: 0 }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div style={{ height: '20vh', backgroundColor: '#354960', width: '100%' }} /> <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div style={{ marginTop: -150 }}> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%' }}>Master Data - Unit Bisnis</label> <label style={{ color: 'white', width: '20%' }}>Master Data - Unit Bisnis</label>
<label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> <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' }}> <div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
...@@ -85,7 +91,7 @@ export default class UnitBisnis extends Component { ...@@ -85,7 +91,7 @@ export default class UnitBisnis extends Component {
onClickClose={() => this.setState({ visibleCreate: false })} onClickClose={() => this.setState({ visibleCreate: false })}
/> />
)} )}
</Container> </div>
); );
} }
} }
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField } from '@material-ui/core';
export default class CreateUnitBisnis extends Component { export default class CreateUnitBisnis extends Component {
render() { render() {
return ( return (
<div className="test app-popup-show" style={{ marginTop: 100 }}> <div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius"> <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x"> <div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit" }}> <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
Create Data <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span>
</div> </div>
</div> </div>
<div className="col-2 content-right" style={{ maxWidth: "inherit" }}> <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button <button
type="button" type="button"
className="btn btn-circle btn-grey" className="btn btn-circle btn-white"
onClick={() => null} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" /> <i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button> </button>
</div> </div>
</div> </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>
<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>
</div> </div>
); );
......
...@@ -50,11 +50,11 @@ export default class componentName extends Component { ...@@ -50,11 +50,11 @@ export default class componentName extends Component {
["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"], ["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
] ]
return ( return (
<Container fluid style={{ height: '100vh', padding: 0 }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div style={{ height: '20vh', backgroundColor: '#354960', width: '100%' }} /> <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div style={{ marginTop: -150 }}> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%' }}>Master Data - Role & Otorisasi</label> <label style={{ color: 'white', width: '20%' }}>Master Data - Role & Otorisasi</label>
<label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> <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' }}> <div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
...@@ -72,7 +72,7 @@ export default class componentName extends Component { ...@@ -72,7 +72,7 @@ export default class componentName extends Component {
</div> </div>
</div> </div>
</Container> </div>
); );
} }
} }
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