apdet

src/container/Laporan/DashboardCAT.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab } from '@material-ui/core'
 import ExceutiveScoreboard from './ExceutiveScoreboard'
 import StrategiMap from './StrategiMap'
+import KPIs from './KPIs'
 
 export default class DashboardCAT extends Component {
     constructor(props) {
@@ -85,7 +86,7 @@ export default class DashboardCAT extends Component {
                             this.state.tab === 1 ?
                                 <StrategiMap height={this.props.height} />
                                 :
-                                <span>Test2</span>
+                                <KPIs height={this.props.height} />
                         }
                     </Paper>
                 </div>

src/container/Laporan/KPIs.js

+import React, { Component } from 'react'
+import { Paper, Typography } from '@material-ui/core'
+import Images from '../../assets/Images'
+
+export default class StrategiMap extends Component {
+    render() {
+        return (
+            <div style={{ padding: 20 }}>
+                <Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)' }}>
+                    <div style={{ height: 56, borderTopLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: '#f1f1f1', display: 'flex' }}>
+                        <div style={{ width: '100%', borderBottom: 'solid 3px #979696 ', display: 'grid', alignContent: 'center', marginLeft: 20 }}>
+                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Category</Typography>
+                        </div>
+                        <div style={{ width: '75%', borderBottom: 'solid 3px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
+                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>KPI</Typography>
+                        </div>
+                        <div style={{ width: '100%', borderBottom: 'solid 3px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
+                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Trends</Typography>
+                        </div>
+                        <div style={{ width: '75%', borderBottom: 'solid 3px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
+                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Current</Typography>
+                        </div>
+                        <div style={{ width: '75%', borderBottom: 'solid 3px #979696 ', marginRight: 20, display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
+                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
+                        </div>
+                    </div>
+                </Paper>
+            </div>
+        )
+    }
+}