StrategiMap.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: '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>
        )
    }
}