Skip to content

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

Merge branch 'deni-dev(pc)' into 'master' 

update dashboard

See merge request !179
parents beefeaea dd31a8d8
Show whitespace changes
Inline Side-by-side
Showing with 250 additions and 215 deletions
src/container/BudgetTahunan/TaxPlanning.js
View file @ 0ee4456d
...@@ -7,58 +7,14 @@ import ReactTooltip from 'react-tooltip'; ...@@ -7,58 +7,14 @@ import ReactTooltip from 'react-tooltip';
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
// const options = ct.customOptionsFixedColumn();
const options = {
name: "CobaCoba",
filter: false,
customHeadRender: (columnMeta) => (
<th key={3} style={{ cursor: 'pointer', backgroundColor: '#F6F6F6', color: '#555555', fontSize: 13, fontWeight: 1 }}>
<div style={{ borderBottom: "1px rgba(0,0,0,0.1) solid" }}>{columnMeta.name}</div>
<div className="grid grid-4x" style={{ backgroundColor: '#F6F6F6', color: '#555555', fontSize: 13, fontWeight: 1 }}>
<div className="col-1">
{"Number"}
</div>
<div className="col-2">
{"Grade"}
</div>
<div className="col-3">
{"Performance"}
</div>
</div>
</th>
),
customBodyRender: (val) => {
return (
<div>
<div className="grid grid-4x content-center">
<div className="col-1">
{val}
</div>
<div className="col-2">
{val}
</div>
<div className="col-3">
{val}
</div>
</div>
</div>
);
}
}
const style = { const style = {
position: "sticky", position: "sticky",
left: 0, left: 0,
background: "white", background: "white",
zIndex: 101, zIndex: 101,
}; };
const style2 = {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
};
export default class BalanceSheet extends Component { export default class BalanceSheet extends Component {
render() { render() {
const columns = [{ const columns = [{
...@@ -78,207 +34,127 @@ export default class BalanceSheet extends Component { ...@@ -78,207 +34,127 @@ export default class BalanceSheet extends Component {
: :
tableMeta.rowIndex == 2 || tableMeta.rowIndex == 6 || tableMeta.rowIndex == 7 || tableMeta.rowIndex == 8 ? tableMeta.rowIndex == 2 || tableMeta.rowIndex == 6 || tableMeta.rowIndex == 7 || tableMeta.rowIndex == 8 ?
<span style={{ fontSize: 12, marginLeft: 10 }}>{val}</span> : <span style={{ fontSize: 12, marginLeft: 10 }}>{val}</span> :
<span style={{ fontSize: 12, marginLeft: 20}}>{val}</span> <span style={{ fontSize: 12, marginLeft: 20 }}>{val}</span>
} }
</div> </div>
) )
} }
} }
}, { }, {
name: "31 Dec 2020 Actual", name: "Jan 21",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style2, top: 0, zIndex: 102, backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({
style: {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
}
})
}
}, {
name: "January 2021",
options: { options: {
filter: false,
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}> <th key={3} style={{ cursor: 'pointer', backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1 }} >
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <div style={{ borderBottom: "1px #fff solid", textAlign: 'center' }}>{columnMeta.name}</div>
</TableCell> <div className="grid grid-3x" style={{ backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, position: "sticky" }}>
), <div style={{ width: '33%', placeSelf: 'center' }}>
customBodyRender: (value, tableMeta, updateValue) => { <span style={{ textAlign: 'center' }}>{"Trial Balance (Commercial) MTD"}</span>
return (
<div style={{ textAlign: 'right' }}>
{tableMeta.rowIndex === 3 || tableMeta.rowIndex === 4 || tableMeta.rowIndex === 9 ?
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
// <Input
// value={this.formatValue(value)}
// style={{}}
// inputProps={{
// style: {
// color: "#5198ea",
// fontSize: 12,
// textAlign: 'right'
// }
// }}
// disableUnderline={true}
// inputStyle={{ color: 'red' }}
// />
<NumberFormat
thousandSeparator={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
value={value}
/>
}
onChange={event => updateValue(event.target.value)}
/>
</div> :
<span style={{ fontSize: 12, textAlign: 'right' }}>{value === "" ? "-" : value}</span>
}
</div> </div>
) <div style={{ width: '33%', placeSelf: 'center' }}>
} <span>{"Fiscal Correction Positive /(Negative)"}</span>
} </div>
}, { <div style={{ width: '33%', placeSelf: 'center' }}>
name: "February 2021", <span>{"Trial Balance (Fiscal) MTD"}</span>
options: { </div>
customHeadRender: (columnMeta) => ( </div>
<TableCell style={{ backgroundColor: '#354960', width: 96 }}> </th>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
), ),
customBodyRender: (val) => { customBodyRender: (val) => {
return ( return (
<div style={{ width: 96 }}> <div>
<div className="grid grid-3x content-center">
<div className="col-1">
{val} {val}
</div> </div>
) <div className="col-2">
}
}
}, {
name: "March 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val} {val}
</div> </div>
) <div className="col-3">
}
}
}, {
name: "April 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val} {val}
</div> </div>
) </div>
</div>
);
} }
} }
}, { }, {
name: "May 2021", name: "Feb 21",
options: { options: {
filter: false,
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}> <th key={3} style={{ cursor: 'pointer', backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1 }} >
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <div style={{ borderBottom: "1px #fff solid", textAlign: 'center' }}>{columnMeta.name}</div>
</TableCell> <div className="grid grid-3x" style={{ backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, position: "sticky" }}>
<div style={{ width: '33%', placeSelf: 'center' }}>
<span style={{ textAlign: 'center' }}>{"Trial Balance (Commercial) MTD"}</span>
</div>
<div style={{ width: '33%', placeSelf: 'center' }}>
<span>{"Fiscal Correction Positive /(Negative)"}</span>
</div>
<div style={{ width: '33%', placeSelf: 'center' }}>
<span>{"Trial Balance (Fiscal) MTD"}</span>
</div>
</div>
</th>
), ),
customBodyRender: (val) => { customBodyRender: (val) => {
return ( return (
<div style={{ width: 96 }}> <div>
<div className="grid grid-3x content-center">
<div className="col-1">
{val} {val}
</div> </div>
) <div className="col-2">
}
}
}, {
name: "June 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val} {val}
</div> </div>
) <div className="col-3">
}
}
}, {
name: "31 Dec 2021 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val} {val}
</div> </div>
) </div>
</div>
);
} }
} }
}, { }, {
name: "31 Dec 2022 Total", name: "Mar 21",
options: { options: {
filter: false,
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}> <th key={3} style={{ cursor: 'pointer', backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1 }} >
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <div style={{ borderBottom: "1px #fff solid", textAlign: 'center' }}>{columnMeta.name}</div>
</TableCell> <div className="grid grid-3x" style={{ backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, position: "sticky" }}>
<div style={{ width: '33%', placeSelf: 'center' }}>
<span style={{ textAlign: 'center' }}>{"Trial Balance (Commercial) MTD"}</span>
</div>
<div style={{ width: '33%', placeSelf: 'center' }}>
<span>{"Fiscal Correction Positive /(Negative)"}</span>
</div>
<div style={{ width: '33%', placeSelf: 'center' }}>
<span>{"Trial Balance (Fiscal) MTD"}</span>
</div>
</div>
</th>
), ),
customBodyRender: (val) => { customBodyRender: (val) => {
return ( return (
<div style={{ width: 96 }}> <div>
<div className="grid grid-3x content-center">
<div className="col-1">
{val} {val}
</div> </div>
) <div className="col-2">
}
}
}, {
name: "31 Dec 2023 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val} {val}
</div> </div>
) <div className="col-3">
} {val}
</div>
</div>
</div>
);
} }
} }
] }]
const dataTable = [ const dataTable = [
["TOTAL ASSETS", "11,247,249", "10,702,196"], ["TOTAL ASSETS", "11,247,249", "10,702,196"],
["TOTAL CURRENT ASSETS", "2,647,647", "2,058,898"], ["TOTAL CURRENT ASSETS", "2,647,647", "2,058,898"],
......
src/container/Laporan/DashboardCAT.js
View file @ 0ee4456d
import React, { Component } from 'react' import React, { Component } from 'react'
import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab } from '@material-ui/core' import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab } from '@material-ui/core'
import ExceutiveScoreboard from './ExceutiveScoreboard' import ExceutiveScoreboard from './ExceutiveScoreboard'
import StrategiMap from './StrategiMap'
export default class DashboardCAT extends Component { export default class DashboardCAT extends Component {
constructor(props) { constructor(props) {
...@@ -36,7 +37,7 @@ export default class DashboardCAT extends Component { ...@@ -36,7 +37,7 @@ export default class DashboardCAT extends Component {
<div className={"main-color"} style={{ padding: 27 }}> <div className={"main-color"} style={{ padding: 27 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
</div> </div>
<div className="padding-20px"> <div className="padding-20px" style={{ minWidth: 'max-content'}}>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<TextField <TextField
style={{ width: 250, }} style={{ width: 250, }}
...@@ -82,7 +83,7 @@ export default class DashboardCAT extends Component { ...@@ -82,7 +83,7 @@ export default class DashboardCAT extends Component {
<ExceutiveScoreboard height={this.props.height} /> <ExceutiveScoreboard height={this.props.height} />
: :
this.state.tab === 1 ? this.state.tab === 1 ?
<span>Testt</span> <StrategiMap height={this.props.height} />
: :
<span>Test2</span> <span>Test2</span>
} }
......
src/container/Laporan/StrategiMap.js 0 → 100644
View file @ 0ee4456d
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: '25%', borderRight: 'solid 1px #d8d8d8', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Category</Typography>
</div>
<div style={{ width: '75%', borderRight: 'solid 1px #d8d8d8', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>KPI</Typography>
</div>
</div>
<div style={{ display: 'flex' }}>
<div style={{ width: '25%', borderRight: 'solid 1px #d8d8d8', display: 'grid', paddingLeft: 20, paddingTop: 20 }}>
<div style={{ borderBottom: 'solid 1px #d8d8d8' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 14, fontFamily: 'Nunito Sans, sans-serif' }}>Financial Perspective</Typography>
</div>
</div>
<div style={{ width: '75%', borderRight: 'solid 1px #d8d8d8', paddingRight: 20 }}>
<div style={{ display: 'flex', alignContent: 'center', padding: 20, borderBottom: 'solid 1px #d8d8d8' }}>
<div style={{ display: 'flex', width: 220, borderRadius: 6 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 152, borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}>
<Typography style={{ color: '#fff', fontSize: 12, justifySelf: 'center' }}>Revenue</Typography>
</div>
<div style={{ backgroundColor: '#cbf4a8', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={Images.up} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
<div style={{ display: 'flex', width: 220, borderRadius: 6, marginLeft: 20 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 152, borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}>
<Typography style={{ color: '#fff', fontSize: 12, justifySelf: 'center' }}>EDITDA</Typography>
</div>
<div style={{ backgroundColor: '#cbf4a8', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={Images.up} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
<div style={{ display: 'flex', width: 220, borderRadius: 6, marginLeft: 20 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 152, borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}>
<Typography style={{ color: '#fff', fontSize: 12, justifySelf: 'center' }}>TPAT</Typography>
</div>
<div style={{ backgroundColor: '#faaaaa', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={Images.down} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
</div>
</div>
</div>
<div style={{ display: 'flex' }}>
<div style={{ width: '25%', borderRight: 'solid 1px #d8d8d8', display: 'grid', paddingLeft: 20, paddingTop: 20 }}>
<div style={{ borderBottom: 'solid 1px #d8d8d8' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 14, fontFamily: 'Nunito Sans, sans-serif' }}>Customer Perspective</Typography>
</div>
</div>
<div style={{ width: '75%', borderRight: 'solid 1px #d8d8d8', paddingRight: 20 }}>
<div style={{ display: 'flex', alignContent: 'center', padding: 20, borderBottom: 'solid 1px #d8d8d8' }}>
<div style={{ display: 'flex', width: 220, borderRadius: 6 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 152, borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}>
<Typography style={{ color: '#fff', fontSize: 12, justifySelf: 'center' }}>Part Service Rate</Typography>
</div>
<div style={{ backgroundColor: '#cbf4a8', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={Images.up} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
<div style={{ display: 'flex', width: 220, borderRadius: 6, marginLeft: 20 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 152, borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}>
<Typography style={{ color: '#fff', fontSize: 12, textAlign: 'center' }}>CSI (Customer Satisfactiomn Index)</Typography>
</div>
<div style={{ backgroundColor: '#fffba5', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={Images.down} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
<div style={{ display: 'flex', width: 220, borderRadius: 6, marginLeft: 20 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 152, borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}>
<Typography style={{ color: '#fff', fontSize: 12, justifySelf: 'center' }}>Dealer Productivity</Typography>
</div>
<div style={{ backgroundColor: '#faaaaa', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={Images.down} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
</div>
</div>
</div>
<div style={{ display: 'flex' }}>
<div style={{ width: '25%', borderRight: 'solid 1px #d8d8d8', display: 'grid', paddingLeft: 20, paddingTop: 20 }}>
<div style={{ borderBottom: 'solid 1px #d8d8d8' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 14, fontFamily: 'Nunito Sans, sans-serif' }}>INTERNAL BUSINESS PROCESS PERSPECTIVE</Typography>
</div>
</div>
<div style={{ width: '75%', borderRight: 'solid 1px #d8d8d8', paddingRight: 20 }}>
<div style={{ display: 'flex', alignContent: 'center', padding: 20, borderBottom: 'solid 1px #d8d8d8' }}>
<div style={{ display: 'flex', width: 220, borderRadius: 6 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 152, borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}>
<Typography style={{ color: '#fff', fontSize: 12, textAlign: 'center' }}>NSI (Network Satisfaction Index)</Typography>
</div>
<div style={{ backgroundColor: '#cbf4a8', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={Images.up} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
<div style={{ display: 'flex', width: 220, borderRadius: 6, marginLeft: 20 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 152, borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}>
<Typography style={{ color: '#fff', fontSize: 12, textAlign: 'center' }}>DEP (Dealer Evaluation Program)</Typography>
</div>
<div style={{ backgroundColor: '#cbf4a8', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={Images.up} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
<div style={{ display: 'flex', width: 220, borderRadius: 6, marginLeft: 20 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 152, borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}>
<Typography style={{ color: '#fff', fontSize: 12, textAlign: 'center' }}>AEP (AHASS Evaluation Program)</Typography>
</div>
<div style={{ backgroundColor: '#cbf4a8', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={Images.up} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
<div style={{ display: 'flex', width: 220, borderRadius: 6, marginLeft: 20 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 152, borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}>
<Typography style={{ color: '#fff', fontSize: 12, justifySelf: 'center' }}>TPAT</Typography>
</div>
<div style={{ backgroundColor: '#faaaaa', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={Images.down} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
</div>
</div>
</div>
</Paper>
</div>
)
}
}
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