Skip to content

T
Tia-dev
Commit 0e3068a1 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

pushhh3

parent 78d470ae
Show whitespace changes
Inline Side-by-side
Showing with 496 additions and 159 deletions
src/Utils/Index.js
View file @ 0e3068a1
......@@ -77,7 +77,7 @@ const footerStyle = {
backgroundColor: "#0d2846",
fontSize: "20px",
color: "white",
borderTop: "1px solid #E7E7E7",
// borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
left: "0",
......@@ -88,15 +88,12 @@ const footerStyle = {
const phantomStyle = {
display: "block",
padding: "20px",
height: "60px",
width: "100%"
};
function Footer({ children }) {
return (
<div>
<div style={phantomStyle} />
{/* <div style={phantomStyle} /> */}
<div style={footerStyle}>{children}</div>
</div>
);
......
src/assets/Images.js
View file @ 0e3068a1
......@@ -6,6 +6,11 @@ const Images = {
search: require('./search.png'),
logout: require('./setting.png'),
setting: require('./logout.png'),
Home: require('./home.svg'),
budgetTahunan: require('./masterbudget.svg'),
manajemenDokumen: require('./docmanagement.svg'),
laporanBulanan: require('./laporanbulanan.svg'),
laporan: require('./laporan.svg'),
//Image
triputra: require('./triputra.png'),
......
src/assets/docmanagement.svg 0 → 100644
View file @ 0e3068a1
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="17" viewBox="0 0 14 17">
<g fill="none" fill-rule="evenodd" opacity=".9">
<path d="M0 0H24V24H0z" transform="translate(-5 -4)"/>
<g stroke="#FFF" stroke-width="1.2" transform="translate(-5 -4) translate(6 5)">
<rect width="12" height="15" rx="2"/>
<path stroke-linecap="round" d="M2 3.025L10.02 3.025M2 6L10.02 6M2 9L10.02 9M2 12L6.01 12"/>
</g>
</g>
</svg>
src/assets/home.svg 0 → 100644
View file @ 0e3068a1
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<g fill="none" fill-rule="evenodd" opacity=".9">
<path d="M0 0H24V24H0z" transform="translate(-3 -3)"/>
<path stroke="#FFF" stroke-linejoin="round" stroke-width="1.2" d="M4.46 8.838l7.019-4.492c.329-.21.75-.21 1.08.001l6.982 4.49c.286.185.459.502.459.842V19c0 .552-.448 1-1 1h-4.98 0v-6.924H9.991V20H5c-.552 0-1-.448-1-1V9.68c0-.34.174-.658.46-.842z" transform="translate(-3 -3)"/>
</g>
</svg>
src/assets/laporan.svg 0 → 100644
View file @ 0e3068a1
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="17" viewBox="0 0 14 17">
<g fill="none" fill-rule="evenodd" opacity=".9">
<path d="M0 0H24V24H0z" transform="translate(-5 -4)"/>
<g transform="translate(-5 -4) translate(6 4)">
<rect width="12" height="14" y="2" stroke="#FFF" stroke-width="1.2" rx="2"/>
<rect width="8" height="3" x="2" fill="#FFF" rx="1"/>
<path stroke="#FFF" stroke-linecap="round" stroke-width="1.2" d="M2 12.5L6 12.5M2 6.5L10 6.5M2 9.5L10 9.5"/>
</g>
</g>
</svg>
src/assets/laporanbulanan.svg 0 → 100644
View file @ 0e3068a1
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="19" viewBox="0 0 16 19">
<g fill="none" fill-rule="evenodd" opacity=".9">
<path d="M0 0H24V24H0z" transform="translate(-4 -2)"/>
<g stroke="#FFF" stroke-width="1.2" transform="translate(-4 -2) translate(5 3)">
<rect width="12" height="15" y="2" rx="2"/>
<path d="M2 2.06h0V2c0-1.105.895-2 2-2h8c1.105 0 2 .895 2 2v11c0 1.105-.895 2-2 2h0"/>
<path stroke-linecap="round" d="M2 5.025L10.02 5.025M2 8L10.02 8M2 11L10.02 11M2 14L6.01 14"/>
</g>
</g>
</svg>
src/assets/masterbudget.svg 0 → 100644
View file @ 0e3068a1
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<g fill="none" fill-rule="evenodd" opacity=".9">
<path d="M0 0H24V24H0z" transform="translate(-3 -3)"/>
<g transform="translate(-3 -3) translate(4 4)">
<path stroke="#FFF" stroke-width="1.2" d="M13.704 16.008c.197 0 1.207.025 1.223-.002C15.606 14.834 16 13.459 16 12c0-4.418-3.582-8-8-8s-8 3.582-8 8c0 1.46.391 2.83 1.075 4.008.008.013.436.013 1.286 0h11.343z"/>
<text fill="#FFF" font-family="Nunito-Bold, Nunito" font-size="8" font-weight="bold">
<tspan x="3" y="13">Rp</tspan>
</text>
<path stroke="#FFF" stroke-width="1.2" d="M10.139.004c.074 0 .452-.009.458 0 .255.39.403.848.403 1.333C11 2.807 9.657 4 8 4S5 2.808 5 1.337c0-.486.147-.941.403-1.333.003-.005.164-.005.482 0h4.254z"/>
<rect width="8" height="1" x="4" y="3" fill="#FFF" rx=".5"/>
</g>
</g>
</svg>
src/container/Beranda.js
View file @ 0e3068a1
import React, { Component } from 'react';
import { Typography } from '@material-ui/core';
export default class Beranda extends Component {
class Beranda extends Component {
render() {
return (
<div style={{ flex: 1 }}>
......@@ -40,3 +40,5 @@ export default class Beranda extends Component {
);
}
}
export default Beranda;
\ No newline at end of file
src/container/Home.js
View file @ 0e3068a1
import React from 'react';
import React, { Component } from 'react';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
......@@ -24,16 +24,19 @@ import {
Route,
Link,
useParams,
useRouteMatch
useRouteMatch,
withRouter
} from "react-router-dom";
import Images from '../assets/Images';
import { FadeMenu, Footer } from '../Utils/Index';
import Beranda from './Beranda';
import { Avatar } from '@material-ui/core';
import { Avatar, withStyles, Collapse } from '@material-ui/core';
import { MenuData, MenuLaporan } from './Menu/MenuData';
import { StarBorder, ExpandLess, ExpandMore } from '@material-ui/icons';
const drawerWidth = 307;
const useStyles = makeStyles((theme) => ({
const useStyles = withStyles((theme) => ({
root: {
display: 'flex',
},
......@@ -107,40 +110,59 @@ const useStyles = makeStyles((theme) => ({
color: '#fff',
backgroundColor: 'black',
},
nested: {
paddingLeft: theme.spacing(9),
fontSize:'12px'
},
}));
export default function MiniDrawer() {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const handleDrawerOpen = () => {
setOpen(true);
class Home extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
collapse: false
};
}
handleDrawerOpen = () => {
this.setState({
open: true,
});
};
const handleDrawerClose = () => {
setOpen(false);
handleDrawerClose = () => {
this.setState({
open: false,
});
};
let { path, url } = useRouteMatch();
handleClick = () => {
this.setState({
collapse: !this.state.collapse
})
}
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
[classes.appBarShift]: this.state.open,
})}
>
<Toolbar style={{ flex: 1, backgroundColor: '#51c6ea' }}>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
onClick={this.handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
[classes.hide]: this.state.open,
})}
>
<MenuIcon />
......@@ -165,35 +187,35 @@ export default function MiniDrawer() {
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
[classes.drawerOpen]: this.state.open,
[classes.drawerClose]: !this.state.open,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
[classes.drawerOpen]: this.state.open,
[classes.drawerClose]: !this.state.open,
}),
}}
>
<div className={classes.toolbarDrawer} style={{
backgroundColor: '#51c6ea',
height: open ? 152 : 68
height: this.state.open ? 152 : 68
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
<img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center' }} />
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon color={"white"} /> : <ChevronLeftIcon color={"white"} />}
<IconButton onClick={this.handleDrawerClose}>
<ChevronRightIcon color={"white"} />
</IconButton>
</div>
{open &&
{this.state.open &&
<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', marginTop: 10}}>john@tia.com</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>
</div>
}
</div>
<Divider />
{open &&
{this.state.open &&
<div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -15 }}>
<div style={{ width: 86, height: 86, backgroundColor: '#0d2846', borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
<div style={{ width: 72, height: 72, backgroundColor: 'white', borderRadius: 50, alignSelf: 'center' }}>
......@@ -202,7 +224,7 @@ export default function MiniDrawer() {
</div>
</div>
}
<List>
{/* <List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
......@@ -210,50 +232,84 @@ export default function MiniDrawer() {
</ListItem>
))}
</List>
<Divider />
<Divider /> */}
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <Link to={`${url}/rendering`}><InboxIcon /></Link> : <Link to={`${url}/components`}><MailIcon /></Link>}</ListItemIcon>
<ListItemText primary={text} />
{/* {['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}> */}
{/* <ListItemIcon>{index % 2 === 0 ? <Link to={`${url}/rendering`}><InboxIcon /></Link> : <Link to={`${url}/components`}><MailIcon /></Link>}</ListItemIcon> */}
{MenuData.map((menu, index) => (
<ListItem
button
key={menu.name}
component={props => <Link {...props} to={menu.path} />}
>
<ListItemIcon>{menu.icon}</ListItemIcon>
<ListItemText primary={menu.name} style={{ color: '#fff' }} />
</ListItem>
))}
<ListItem button onClick={this.handleClick}>
<ListItemIcon>
<img src={Images.laporan} style={{ width: 18, height: 18 }} />
</ListItemIcon>
<ListItemText primary="Laporan" style={{ color: '#fff' }} />
{this.state.collapse ? <ExpandLess style={{ fill: 'white' }} /> : <ExpandMore style={{ fill: 'white' }} />}
</ListItem>
<Collapse in={this.state.collapse} timeout="auto" unmountOnExit style={{ color: '#fff' }} >
<List component="div" disablePadding>
{MenuLaporan.map((menu, index) => (
<ListItem
button className={classes.nested}
key={menu.name}
component={props => <Link {...props} to={menu.path} />}
>
{/* <ListItemIcon>{menu.icon}</ListItemIcon> */}
<ListItemText primary={menu.name} style={{ color: '#fff', fontSize: '12px' }} />
</ListItem>
))}
</List>
</Collapse>
{/* <ListItemText primary={text} />
</ListItem>
))} */}
</List>
</Drawer>
<div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
{/* <div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div>
<div className={classes.toolbar} />
{/* <Switch>
<Route exact path={path}>
<h3>Please select a topic.</h3>
</Route>
<Route path={`${path}/:topicId`}>
<Topic />
</Route>
</Switch> */}
<Beranda />
<Footer>
<Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
</Footer>
</div>
</div> */}
<main className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div className={classes.toolbar} />
{this.props.children}
<Footer>
<Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
</Footer>
</main>
</div>
</div>
);
)
}
}
function Topic() {
// The <Route> that rendered this component has a
// path of `/topics/:topicId`. The `:topicId` portion
// of the URL indicates a placeholder that we can
// get from `useParams()`.
let { topicId } = useParams();
React.useEffect(() => {
alert(topicId)
})
return (
<div>
<h3>{topicId}</h3>
</div>
);
}
\ No newline at end of file
export default withRouter(useStyles(Home));
// function Topic() {
// // The <Route> that rendered this component has a
// // path of `/topics/:topicId`. The `:topicId` portion
// // of the URL indicates a placeholder that we can
// // get from `useParams()`.
// let { topicId } = useParams();
// React.useEffect(() => {
// alert(topicId)
// })
// return (
// <div>
// <h3>{topicId}</h3>
// </div>
// );
// }
\ No newline at end of file
src/container/Menu/MenuData.js 0 → 100644
View file @ 0e3068a1
import React from 'react';
import Images from '../../assets/Images';
const MenuData = [
{
name: 'Beranda',
path: '/home',
icon: <img src={Images.Home} style={{ width: 18, height: 18 }} />
},
{
name: 'Budget Tahunan',
path: '/profile',
icon: <img src={Images.budgetTahunan} style={{ width: 18, height: 18 }} />
},
{
name: 'Laporan Bulanan',
path: '/laporan-bulanan',
icon: <img src={Images.laporanBulanan} style={{ width: 18, height: 18 }} />
},
{
name: 'Manajemen Dokumen',
path: '/manajemen-dokumen',
icon: <img src={Images.manajemenDokumen} style={{ width: 18, height: 18 }} />
},
];
const MenuLaporan = [
{
name: 'Dashboard CAT',
path: '/dashboard-cat',
icon: <img src={Images.Home} style={{ width: 18, height: 18 }} />
},
{
name: 'Report Summary Triputra Group',
path: '/report-summary',
icon: <img src={Images.Home} style={{ width: 18, height: 18 }} />
},
{
name: 'Report Sub Holding',
path: '/report-sub',
icon: <img src={Images.Home} style={{ width: 18, height: 18 }} />
},
]
export {MenuData, MenuLaporan};
src/container/Profile.js
View file @ 0e3068a1
import React, { Component } from 'react';
import { Typography, TextField, Paper, FormControl, InputLabel, Input, FormHelperText, Button } from '@material-ui/core';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/styles';
import Avatar from '@material-ui/core/Avatar';
import Grid from '@material-ui/core/Grid';
import { Save, Facebook, Twitter, Instagram } from '@material-ui/icons';
// import axios from 'axios'
const styles = theme => ({
root: {
background: 'black',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: '100vh',
padding: '0 30px',
},
container: {
flexDirection: 'row',
display: 'flex',
flexGrow: 3
},
bigAvatar: {
margin: 10,
width: 150,
height: 150,
},
formControl: {
width: '100%',
marginHorizontal: 20
},
textField: {
width: '100%',
marginHorizontal: 20
},
Paper: {
},
button: {
display: 'flex',
justifyContent:'center',
alignSelf:'center',
width: 100,
height: 30,
marginTop: 20
},
});
class Profile extends Component {
constructor(props) {
super(props);
this.state ={
file: null,
labelRef: null,
email: 'arfinsyadziy@gmail.com',
username: 'Superadmin',
password: '12345',
repeat: '12345',
labelWidth: 0
};
this.onFormSubmit = this.onFormSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
onFormSubmit(e){
e.preventDefault();
const formData = new FormData();
formData.append('myImage',this.state.file);
const config = {
headers: {
'content-type': 'multipart/form-data'
}
};
// axios.post("/upload",formData,config)
// .then((response) => {
// alert("The file is successfully uploaded");
// }).catch((error) => {
// });
}
onChange(e) {
this.setState({file:e.target.files[0]});
}
handleChange = (event) => {
this.setState({
[event.target.name]:event.target.value,
})
};
render() {
return (
<div> textInComponent </div>
);
const { classes } = this.props;
return(
<div className={classes.root}>
<div style={{ display: 'flex', justifyContent:'center', alignItems:'center'}}>
<h2 style={{ marginTop: 20}}> PROFILE </h2>
</div>
<div className={classes.container}>
<div style={{ flexDirection: 'column', flex: 1, paddingTop: 20, paddingLeft: 200}}>
<Typography style={{ marginLeft: 25, fontSize: 20, fontWeight: 'bold' }}>
Avatar Picture
</Typography>
<Grid container justify="flex-start" alignItems="flex-start">
{/* <Avatar alt="Avatar" src={images.avatar} className={classes.bigAvatar} /> */}
</Grid>
{/* <form onSubmit={this.onFormSubmit}>
<h1>File Upload</h1>
<input type="file" name="myImage" onChange= {this.onChange} />
<button type="submit">Upload</button>
</form> */}
<div style={{ display: 'flex' }}>
<Facebook/>
<Typography style ={{ marginLeft: 20}}>Add Facebook</Typography>
</div>
<div style={{ display: 'flex', marginTop: 10 }}>
<Twitter/>
<Typography style ={{ marginLeft: 20}}>Add Twitter</Typography>
</div>
<div style={{ display: 'flex', marginTop: 10 }}>
<Instagram/>
<Typography style ={{ marginLeft: 20}}>Add Instagram</Typography>
</div>
</div>
<div style={{ flexDirection: 'column', flex: 2, paddingTop: 20, paddingRight: 100 }}>
<Paper className={classes.paper} style={{ paddingLeft: 20, paddingRight: 20}}>
<TextField
error={this.state.username.length < 7 ? true : false }
id="standard-name"
name="username"
label="Username"
className={classes.textField}
value={this.state.username}
onChange={this.handleChange.bind(this)}
margin="normal"
/>
<TextField
id="standard-name"
name="email"
label="Email"
className={classes.textField}
value={this.state.email}
onChange={this.handleChange.bind(this)}
margin="normal"
/>
<TextField
error={this.state.password.length <= 4 ? true : false }
id="standard-password-input"
label="Password"
name="password"
value={this.state.password}
className={classes.textField}
onChange={this.handleChange.bind(this)}
type="password"
autoComplete="current-password"
margin="normal"
/>
<FormControl className={classes.formControl} error={this.state.password == this.state.repeat ? false : true }>
<InputLabel htmlFor="component-error"></InputLabel>
<TextField
error={this.state.repeat.length <= 4 ? true : false }
id="standard-password-input"
label="Repeat Password"
name="repeat"
value={this.state.repeat}
className={classes.textField}
onChange={this.handleChange.bind(this)}
type="password"
autoComplete="current-password"
margin="normal"
/>
<FormHelperText id="component-error-text">{this.state.password == this.state.repeat ? '' : "Password didn't match" }</FormHelperText>
</FormControl>
</Paper>
<Button
variant="contained"
color="primary"
size="small"
className={classes.button}
startIcon={<Save />}
>
Update
</Button>
</div>
<div></div>
</div>
</div>
)
}
}
}
export default Profile;
Profile.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Profile);
src/router/index.js
View file @ 0e3068a1
......@@ -10,6 +10,7 @@ import Home from '../container/Home'
import Login from '../container/Login'
import Register from '../container/Register'
import Profile from '../container/Profile'
import Beranda from "../container/Beranda";
// This site has 3 pages, all of which are rendered
// dynamically in the browser (not server rendered).
//
......@@ -48,18 +49,17 @@ export default function BasicExample() {
<Route exact path="/">
<Login />
</Route>
<Route path="/home">
<Home />
</Route>
{/* <Route path="*">
<NoMatch />
</Route> */}
<Route path="/register">
<Register />
</Route>
<Route path="/profile">
<Profile />
</Route>
<Route path="*">
<NoMatch />
</Route>
<Home>
<Route path="/home" exact component={Beranda} />
<Route path="/profile" exact component={Profile} />
</Home>
</Switch>
{/* </div> */}
</Router>
......
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