Skip to content

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

pushhh3

parent 78d470ae
Expand all Hide 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 = { ...@@ -77,7 +77,7 @@ const footerStyle = {
backgroundColor: "#0d2846", backgroundColor: "#0d2846",
fontSize: "20px", fontSize: "20px",
color: "white", color: "white",
borderTop: "1px solid #E7E7E7", // borderTop: "1px solid #E7E7E7",
textAlign: "center", textAlign: "center",
padding: "20px", padding: "20px",
left: "0", left: "0",
...@@ -88,15 +88,12 @@ const footerStyle = { ...@@ -88,15 +88,12 @@ const footerStyle = {
const phantomStyle = { const phantomStyle = {
display: "block", display: "block",
padding: "20px",
height: "60px",
width: "100%"
}; };
function Footer({ children }) { function Footer({ children }) {
return ( return (
<div> <div>
<div style={phantomStyle} /> {/* <div style={phantomStyle} /> */}
<div style={footerStyle}>{children}</div> <div style={footerStyle}>{children}</div>
</div> </div>
); );
......
src/assets/Images.js
View file @ 0e3068a1
...@@ -6,6 +6,11 @@ const Images = { ...@@ -6,6 +6,11 @@ const Images = {
search: require('./search.png'), search: require('./search.png'),
logout: require('./setting.png'), logout: require('./setting.png'),
setting: require('./logout.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 //Image
triputra: require('./triputra.png'), 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 React, { Component } from 'react';
import { Typography } from '@material-ui/core'; import { Typography } from '@material-ui/core';
export default class Beranda extends Component { class Beranda extends Component {
render() { render() {
return ( return (
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
...@@ -40,3 +40,5 @@ export default class Beranda extends Component { ...@@ -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
This diff is collapsed.
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 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 { class Profile extends Component {
render() { constructor(props) {
return ( super(props);
<div> textInComponent </div> 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() {
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' ...@@ -10,6 +10,7 @@ import Home from '../container/Home'
import Login from '../container/Login' import Login from '../container/Login'
import Register from '../container/Register' import Register from '../container/Register'
import Profile from '../container/Profile' import Profile from '../container/Profile'
import Beranda from "../container/Beranda";
// This site has 3 pages, all of which are rendered // This site has 3 pages, all of which are rendered
// dynamically in the browser (not server rendered). // dynamically in the browser (not server rendered).
// //
...@@ -37,30 +38,29 @@ export default function BasicExample() { ...@@ -37,30 +38,29 @@ export default function BasicExample() {
<hr /> */} <hr /> */}
{/* {/*
A <Switch> looks through all its children <Route> A <Switch> looks through all its children <Route>
elements and renders the first one whose path elements and renders the first one whose path
matches the current URL. Use a <Switch> any time matches the current URL. Use a <Switch> any time
you have multiple routes, but you want only one you have multiple routes, but you want only one
of them to render at a time of them to render at a time
*/} */}
<Switch> <Switch>
<Route exact path="/"> <Route exact path="/">
<Login /> <Login />
</Route> </Route>
<Route path="/home"> {/* <Route path="*">
<Home /> <NoMatch />
</Route> </Route> */}
<Route path="/register"> <Route path="/register">
<Register /> <Register />
</Route> </Route>
<Route path="/profile">
<Profile /> <Home>
</Route> <Route path="/home" exact component={Beranda} />
<Route path="*"> <Route path="/profile" exact component={Profile} />
<NoMatch /> </Home>
</Route> </Switch>
</Switch>
{/* </div> */} {/* </div> */}
</Router> </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