Commit 980ef048 authored by EKSAD's avatar EKSAD

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

parents 5494a3a8 b4a4a132
......@@ -12,6 +12,7 @@
"font-awesome": "^4.7.0",
"mui-datatables": "^3.3.1",
"react": "^16.13.1",
"react-d3-donut": "^1.1.2",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
......
......@@ -17,6 +17,8 @@ const Images = {
imageLogin: require('./image.svg'),
email: require('./email.svg'),
key: require('./key.svg'),
green: require('./green.svg'),
red: require('./red.svg'),
//Image
triputra: require('./triputra.png'),
......
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
<g fill="none" fill-rule="evenodd">
<path d="M0 0H16V16H0z" transform="matrix(1 0 0 -1 -3 13)"/>
<g stroke="#4CAF50" stroke-linecap="round">
<path stroke-linejoin="round" d="M8 7.243L2 7.243 2 1.243" transform="matrix(1 0 0 -1 -3 13) translate(3 3.757) rotate(-45 5 4.243)"/>
<path d="M5 8.485L5 0" transform="matrix(1 0 0 -1 -3 13) translate(3 3.757)"/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
<g fill="none" fill-rule="evenodd">
<path d="M0 0H16V16H0z" transform="translate(-3 -3)"/>
<g stroke="#F65A4C" stroke-linecap="round">
<path stroke-linejoin="round" d="M8 7.243L2 7.243 2 1.243" transform="translate(-3 -3) translate(3 3.757) rotate(-45 5 4.243)"/>
<path d="M5 8.485L5 0" transform="translate(-3 -3) translate(3 3.757)"/>
</g>
</g>
</svg>
......@@ -10,6 +10,8 @@ import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ExpandMore from '@material-ui/icons/ExpandMore'
import ExpandLess from '@material-ui/icons/ExpandLess'
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
......@@ -17,6 +19,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import Collapse from '@material-ui/core/Collapse';
import {
BrowserRouter as Router,
......@@ -31,6 +34,7 @@ import { FadeMenu, Footer } from '../Utils/Index';
import Beranda from './Beranda';
import { Avatar } from '@material-ui/core';
import HomeRoutes from '../router/homeRoutes'
import ArraySide from '../library/Array'
const drawerWidth = 307;
......@@ -114,7 +118,11 @@ export default function MiniDrawer() {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const [selectedIndex, setSelectedIndex] = React.useState([]);
React.useEffect(() => {
// alert(ArraySide)
})
const handleDrawerOpen = () => {
setOpen(true);
};
......@@ -203,25 +211,52 @@ export default function MiniDrawer() {
</div>
</div>
}
{open &&
<div style={{marginLeft: 25, marginTop: 20, marginBottom: 20}}>
<Typography style={{color: 'white', fontSize: 12}}>APLIKASI</Typography>
</div>
}
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
{ArraySide.map((item, index) => (
<div>
{item.subItem != null?
<div style={{justifyContent:'space-between', flexDirection: 'row', display: 'flex', paddingRight: 10}} onClick={() => selectedIndex == 0? setSelectedIndex(index) : setSelectedIndex(0)}>
<ListItem button key={item.label}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{color:"white"}}/> : <MailIcon style={{color:"white"}}/>}</ListItemIcon>
<Typography style={{color: 'white', fontSize: 12}}>{item.label}</Typography>
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <Link to={`${url}/beranda`}><InboxIcon /></Link> : <Link to={`${url}/screen404`}><MailIcon /></Link>}</ListItemIcon>
<ListItemText primary={text} />
{item.subItem != null? (index === selectedIndex? <ExpandMore style={{color:"white", marginLeft: 50, alignSelf:'center'}}/> : <ExpandLess style={{color:"white", marginLeft: 50, alignSelf:'center'}}/>) : null}
</div>
:
<Link to={`${url}/${item.path}`}>
<ListItem button key={item.label} onClick={() => setSelectedIndex(index)}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{color:"white"}}/> : <MailIcon style={{color:"white"}}/>}</ListItemIcon>
<Typography style={{color: 'white', fontSize: 12}}>{item.label}</Typography>
</ListItem>
</Link>
}
{item.subItem != null &&
<div>
<Collapse in={index === selectedIndex} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{item.subItem.map((sub, index) => {
return (
<Link to={`${url}/${sub.path}`}>
<ListItem style={{paddingLeft: 70}}>
<Typography style={{color: 'white', fontSize: 12}}>{sub.label}</Typography>
</ListItem>
</Link>
)
})}
</List>
</Collapse>
</div>
}
</div>
))}
</List>
</Drawer>
<div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div>
<div className={classes.toolbar} />
<Switch>
......@@ -250,19 +285,3 @@ export default function MiniDrawer() {
</div>
);
}
\ No newline at end of file
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
import React, { Component } from 'react';
import { Typography, CircularProgress } from '@material-ui/core';
import MUIDataTable from "mui-datatables";
import Images from '../assets/Images';
import DonutChart from 'react-d3-donut';
class HomePage extends Component {
render() {
......@@ -50,10 +52,38 @@ class HomePage extends Component {
download: false,
selectableRows: false,
viewColumns: false,
rowsPerPage: 5
rowsPerPage: 5,
search: false
}
const dataChart = [{
count: 90,
color: '#5198ea',
name: 'My name',
}, {
count: 10,
color: '#ffd600',
name: 'name',
}]
const dataChart2 = [{
count: 90,
color: '#f65a4c',
name: 'My name',
}, {
count: 10,
color: '#5198ea',
name: 'name',
}]
const dataChart3 = [{
count: 90,
color: '#4caf51',
name: 'My name',
}, {
count: 10,
color: '#f65a4c',
name: 'name',
}]
return (
<div style={{ flex: 1, height: '100vh' }}>
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
</div>
......@@ -65,10 +95,141 @@ class HomePage extends Component {
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<div>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</div>
<div style={{ marginTop: 20 }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Status Laporan</Typography>
<CircularProgress variant="static" value={[10,30]} />
<div style={{ marginTop: 10, display: 'flex' }}>
<div style={{ width: 280, height: 400, padding: 20, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4', marginRight: 25 }}>
<Typography style={{ color: '#4b4b4b', fontSize: '24px', fontWeight: 'bold' }}>Budget Tahunan - 2021</Typography>
<div style={{ textAlign: 'center' }}>
<DonutChart
innerRadius={70}
outerRadius={100}
transition={true}
pieClass="pie1"
displayTooltip={true}
strokeWidth={3}
data={dataChart} />
</div>
<div style={{ display: 'flex', width: '100%', marginTop: 10 }}>
<div style={{ width: '33%' }}>
<Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Submit</Typography>
<Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>92.8 %</Typography>
<div style={{ display: 'flex' }} >
<img src={Images.red} />
<Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>-0.6%</Typography>
</div>
</div>
<div style={{ width: '33%' }}>
<Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>On Time</Typography>
<Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>6.1 %</Typography>
<div style={{ display: 'flex' }} >
<img src={Images.green} />
<Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.7%</Typography>
</div>
</div>
<div style={{ width: '33%' }}>
<Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Overdue</Typography>
<Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>1.1 %</Typography>
<div style={{ display: 'flex' }} >
<img src={Images.green} />
<Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.1%</Typography>
</div>
</div>
</div>
</div>
<div style={{ width: 280, height: 400, padding: 20, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4', marginRight: 25}}>
<Typography style={{ color: '#4b4b4b', fontSize: '24px', fontWeight: 'bold' }}>Laporan Bulanan - Oct 2020</Typography>
<div style={{ textAlign: 'center' }}>
<DonutChart
innerRadius={70}
outerRadius={100}
transition={true}
pieClass="pie5"
displayTooltip={true}
strokeWidth={3}
data={dataChart2}
/>
</div>
<div style={{ display: 'flex', width: '100%', marginTop: 10 }}>
<div style={{ width: '33%' }}>
<Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Submit</Typography>
<Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>92.8 %</Typography>
<div style={{ display: 'flex' }} >
<img src={Images.red} />
<Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>-0.6%</Typography>
</div>
</div>
<div style={{ width: '33%' }}>
<Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>On Time</Typography>
<Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>6.1 %</Typography>
<div style={{ display: 'flex' }} >
<img src={Images.green} />
<Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.7%</Typography>
</div>
</div>
<div style={{ width: '33%' }}>
<Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Overdue</Typography>
<Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>1.1 %</Typography>
<div style={{ display: 'flex' }} >
<img src={Images.green} />
<Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.1%</Typography>
</div>
</div>
</div>
</div>
<div style={{ width: 280, height: 400, padding: 20, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4', }}>
<Typography style={{ color: '#4b4b4b', fontSize: '24px', fontWeight: 'bold', height: 71 }}>Lainnya</Typography>
<div style={{ textAlign: 'center' }}>
<DonutChart
innerRadius={70}
outerRadius={100}
transition={true}
pieClass="pie2"
displayTooltip={true}
strokeWidth={3}
data={dataChart3}
/>
</div>
<div style={{ display: 'flex', width: '100%', marginTop: 10 }}>
<div style={{ width: '33%' }}>
<Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Submit</Typography>
<Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>92.8 %</Typography>
<div style={{ display: 'flex' }} >
<img src={Images.red} />
<Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>-0.6%</Typography>
</div>
</div>
<div style={{ width: '33%' }}>
<Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>On Time</Typography>
<Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>6.1 %</Typography>
<div style={{ display: 'flex' }} >
<img src={Images.green} />
<Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.7%</Typography>
</div>
</div>
<div style={{ width: '33%' }}>
<Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Overdue</Typography>
<Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>1.1 %</Typography>
<div style={{ display: 'flex' }} >
<img src={Images.green} />
<Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.1%</Typography>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......
import React, { Component } from 'react';
export default class componentName extends Component {
render() {
return (
<div style={{height: '100vh', width: '100%', flex: 1}}> textInComponent </div>
);
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/font-awesome/css/font-awesome.min.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
......
const arraySide = [
{
img: '',
label: 'Beranda',
path: 'beranda',
subItem: null
},
{
img: '',
label: 'Budget Tahunan',
path: 'beranda',
subItem: null
},
{
img: '',
label: 'Laporan Bulanan',
path: 'beranda',
subItem: null
},
{
img: '',
label: 'Manajemen Dokumen',
path: 'beranda',
subItem: null
},
{
img: '',
label: 'Laporan',
path: '',
subItem: [
{
img: 'beranda',
label: 'Dashboard CAT',
path: 'beranda',
},
{
img: 'beranda',
label: 'Report Summary Triputra Group',
path: 'beranda',
},
{
img: '',
label: 'Report Sub Holding',
path: 'beranda',
}
]
},
{
img: '',
label: 'PENGATURAN',
path: 'beranda',
subItem: null
},
{
img: '',
label: 'Master Data',
path: '',
subItem: [
{
img: '',
label: 'Unit Bisnis',
path: 'beranda',
},
{
img: '',
label: 'Perusahaan',
path: 'beranda',
},
{
img: '',
label: 'Item Laporan',
path: 'beranda',
},
{
img: '',
label: 'Manajemen Laporan',
path: 'beranda',
},
{
img: '',
label: 'Parameter Lainnya',
path: 'beranda',
},
]
},
{
img: '',
label: 'Otorisasi',
path: '',
subItem: [
{
img: '',
label: 'User Role',
path: 'userrole',
},
{
img: '',
label: 'User',
path: 'beranda',
}
]
},
{
img: '',
label: 'Approvalz Matrix',
path: 'beranda',
subItem: null
}
]
export default arraySide;
\ No newline at end of file
import screen404 from '../container/Screen404'
import Beranda from '../container/Beranda'
import UserRole from '../container/UserRole'
const routes = [
{
path: "/home/beranda",
main: Beranda
main: HomePage
},
{
path: "/home/screen404",
main: screen404
path: "/home/userrole",
main: UserRole
},
];
export default routes;
\ No newline at end of file
......@@ -36,7 +36,7 @@ export default function BasicExample() {
<Route path="/login" component={Login} />
<Route path="/reset" component={ResetPassword} />
<Route path="/register" component={Register}/>
<Route path="/home" component={Home} />
<PrivateRoute path="/home" component={Home} />
<Route path="*">
<Screen404 />
</Route>
......@@ -44,3 +44,23 @@ export default function BasicExample() {
</Router>
);
}
function PrivateRoute({ children, ...rest }) {
return (
<Route
{...rest}
render={({ location }) =>
// fakeAuth.isAuthenticated ? (
// children
// ) : (
<Redirect
to={{
pathname: "/login",
// state: { from: location }
}}
/>
// )
}
/>
);
}
\ No newline at end of file
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