Skip to content

T
Tia-dev
Commit 78a99b71 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

table

parent ad9f1c0e
Show whitespace changes
Inline Side-by-side
Showing with 189 additions and 5 deletions
package.json
View file @ 78a99b71
......@@ -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"
......
src/assets/Images.js
View file @ 78a99b71
......@@ -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'),
......
src/assets/green.svg 0 → 100644
View file @ 78a99b71
<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>
src/assets/red.svg 0 → 100644
View file @ 78a99b71
<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>
src/container/HomePage.js
View file @ 78a99b71
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>
......
src/router/homeRoutes.js
View file @ 78a99b71
import screen404 from '../container/Screen404'
import Beranda from '../container/Beranda'
import HomePage from '../container/HomePage';
const routes = [
{
path: "/home/beranda",
main: Beranda
main: HomePage
},
{
path: "/home/screen404",
main: screen404
},
];
export default routes;
\ 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