Skip to content

T
Tia-dev
Commit 3d19b434 authored by Riri Novita's avatar Riri Novita
Browse files
Options

update ui progress report kesekian

parent 7bb705d5
Show whitespace changes
Inline Side-by-side
Showing with 116 additions and 108 deletions
src/container/ProgressReport/TableProgressReport.js
View file @ 3d19b434
...@@ -17,7 +17,7 @@ const style = { ...@@ -17,7 +17,7 @@ const style = {
}; };
const style2 = { const style2 = {
position: "sticky", position: "sticky",
background: "white", // background: "white",
zIndex: 100 zIndex: 100
}; };
...@@ -83,7 +83,7 @@ export default class TableProgressReport extends Component { ...@@ -83,7 +83,7 @@ export default class TableProgressReport extends Component {
name: "Company", name: "Company",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 200 }}> <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 200, borderRight: "1px solid rgb(255, 255, 255)" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -105,41 +105,41 @@ export default class TableProgressReport extends Component { ...@@ -105,41 +105,41 @@ export default class TableProgressReport extends Component {
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, borderRight: "1px solid rgb(255, 255, 255)" }}>{columnMeta.name}</div> <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, borderRight: "1px solid rgb(255, 255, 255)" }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-1 grid grid-4x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Profit Loss"}</span> <span>{"Profit Loss"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Tax Planning"}</span> <span>{"Tax Planning"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Balance Sheet"}</span> <span>{"Balance Sheet"}</span>
</div> </div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Fixed Assets Movement"}</span> <span>{"Fixed Assets Movement"}</span>
</div> </div>
</div> </div>
<div className="column-2 grid grid-4x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-2 grid grid-4x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Cash Flow"}</span> <span>{"Cash Flow"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"CAT"}</span> <span>{"CAT"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Submission Status"}</span> <span>{"Submission Status"}</span>
</div> </div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Operating Indicator"}</span> <span>{"Operating Indicator"}</span>
</div> </div>
</div> </div>
<div className="column-3 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-3 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: 'sticky' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Automatic Reminder"}</span> <span>{"Automatic Reminder"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'right', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'right', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Manual Reminder"}</span> <span>{"Manual Reminder"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Last Manual Reminder"}</span> <span>{"Last Manual Reminder"}</span>
</div> </div>
</div> </div>
...@@ -152,38 +152,38 @@ export default class TableProgressReport extends Component { ...@@ -152,38 +152,38 @@ export default class TableProgressReport extends Component {
return ( return (
<div className="grid grid-3x"> <div className="grid grid-3x">
<div className="column-1 grid grid-4x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-1 grid grid-4x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Tax Planning')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Tax Planning')}</div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div>
</div> </div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Fixed Assets Movement')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Fixed Assets Movement')}</div>
</div> </div>
</div> </div>
<div className="column-2 grid grid-4x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-2 grid grid-4x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Submission Status')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Submission Status')}</div>
</div> </div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div>
</div> </div>
</div> </div>
<div className="column-3 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-3 grid grid-3x" style={{ ...style2, fontSize: 12, left: 27, position: 'relative' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{tableMeta.rowData[2]}</div> <div style={{ textAlign: 'center' }}>{tableMeta.rowData[2]}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<button <button
type="button" type="button"
...@@ -196,7 +196,7 @@ export default class TableProgressReport extends Component { ...@@ -196,7 +196,7 @@ export default class TableProgressReport extends Component {
</button> </button>
</div> </div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{tableMeta.rowData[4]}</div> <div style={{ textAlign: 'center' }}>{tableMeta.rowData[4]}</div>
</div> </div>
</div> </div>
...@@ -236,7 +236,7 @@ export default class TableProgressReport extends Component { ...@@ -236,7 +236,7 @@ export default class TableProgressReport extends Component {
name: "Company", name: "Company",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}> <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 200, borderRight: "1px solid rgb(255, 255, 255)" }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -258,46 +258,46 @@ export default class TableProgressReport extends Component { ...@@ -258,46 +258,46 @@ export default class TableProgressReport extends Component {
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, borderRight: "1px solid rgb(255, 255, 255)" }}>{columnMeta.name}</div> <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, borderRight: "1px solid rgb(255, 255, 255)" }}>{columnMeta.name}</div>
<div className="grid grid-4x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="grid grid-4x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-1 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Profit Loss"}</span> <span>{"Profit Loss"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Tax Planning"}</span> <span>{"Tax Planning"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Balance Sheet"}</span> <span>{"Balance Sheet"}</span>
</div> </div>
</div> </div>
<div className="column-2 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-2 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Fixed Assets Movement"}</span> <span>{"Fixed Assets Movement"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"LOCF"}</span> <span>{"LOCF"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Cash Flow"}</span> <span>{"Cash Flow"}</span>
</div> </div>
</div> </div>
<div className="column-3 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-3 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"CAT"}</span> <span>{"CAT"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Monthly Status"}</span> <span>{"Monthly Status"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Operating Indicator"}</span> <span>{"Operating Indicator"}</span>
</div> </div>
</div> </div>
<div className="column-4 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-4 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Automatic Reminder"}</span> <span>{"Automatic Reminder"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Manual Reminder"}</span> <span>{"Manual Reminder"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Last Manual Reminder"}</span> <span>{"Last Manual Reminder"}</span>
</div> </div>
</div> </div>
...@@ -309,43 +309,43 @@ export default class TableProgressReport extends Component { ...@@ -309,43 +309,43 @@ export default class TableProgressReport extends Component {
return ( return (
<div className="grid grid-4x"> <div className="grid grid-4x">
<div className="column-1 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-1 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div>
</div> </div>
</div> </div>
<div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Fixed Assets Movement')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Fixed Assets Movement')}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'List of Credit Facilities')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'List of Credit Facilities')}</div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div>
</div> </div>
</div> </div>
<div className="column-3 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-3 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Monthly Status')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Monthly Status')}</div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div>
</div> </div>
</div> </div>
<div className="column-4 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-4 grid grid-3x" style={{ ...style2, fontSize: 12, position: "relative", left: 15 }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center' }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div style={{ textAlign: 'center' }}>{tableMeta.rowData[2]}</div> <div style={{ textAlign: 'center' }}>{tableMeta.rowData[2]}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<button <button
type="button" type="button"
...@@ -358,7 +358,7 @@ export default class TableProgressReport extends Component { ...@@ -358,7 +358,7 @@ export default class TableProgressReport extends Component {
</button> </button>
</div> </div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{tableMeta.rowData[4]}</div> <div style={{ textAlign: 'center' }}>{tableMeta.rowData[4]}</div>
</div> </div>
</div> </div>
...@@ -398,56 +398,60 @@ export default class TableProgressReport extends Component { ...@@ -398,56 +398,60 @@ export default class TableProgressReport extends Component {
name: "Company", name: "Company",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 200, borderRight: "1px #fff solid", borderBottom: "1px #fff solid", }}> <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 200, borderRight: "1px solid rgb(255, 255, 255)" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style }), setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return <div style={{ width: 300, textAlign: 'left', paddingLeft: 20 }}>{val}</div>; return (
}, <div style={{ width: 300 }}>
{val}
</div>
)
}
}, },
}, },
{ {
name: `INPUT ROLLING OUTLOOK`, name: `INPUT ROLLING OUTLOOK`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<th style={{ ...style, top: 0, zIndex: 103, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} > <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 40, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div> <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, borderRight: "1px solid rgb(255, 255, 255)" }}>{columnMeta.name}</div>
<div className="grid grid-3x"> <div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-1 grid grid-4x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Profit Loss"}</span> <span>{"Profit Loss"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Tax Planning"}</span> <span>{"Tax Planning"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Balance Sheet"}</span> <span>{"Balance Sheet"}</span>
</div> </div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Cash Flow"}</span> <span>{"Cash Flow"}</span>
</div> </div>
</div> </div>
<div className="column-2 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-2 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"CAT"}</span> <span>{"CAT"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Rolling Status"}</span> <span>{"Rolling Status"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Operating Indicator"}</span> <span>{"Operating Indicator"}</span>
</div> </div>
</div> </div>
<div className="column-3 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-3 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Automatic Reminder"}</span> <span>{"Automatic Reminder"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Manual Reminder"}</span> <span>{"Manual Reminder"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Last Manual Reminder"}</span> <span>{"Last Manual Reminder"}</span>
</div> </div>
</div> </div>
...@@ -459,35 +463,35 @@ export default class TableProgressReport extends Component { ...@@ -459,35 +463,35 @@ export default class TableProgressReport extends Component {
return ( return (
<div className="grid grid-3x"> <div className="grid grid-3x">
<div className="column-1 grid grid-4x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-1 grid grid-4x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div>
</div> </div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div>
</div> </div>
</div> </div>
<div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Rolling Status')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Rolling Status')}</div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div>
</div> </div>
</div> </div>
<div className="column-3 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-3 grid grid-3x" style={{ ...style2, fontSize: 12, position: "relative", left: 19 }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{tableMeta.rowData[2]}</div> <div style={{ textAlign: 'center' }}>{tableMeta.rowData[2]}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<button <button
type="button" type="button"
...@@ -500,7 +504,7 @@ export default class TableProgressReport extends Component { ...@@ -500,7 +504,7 @@ export default class TableProgressReport extends Component {
</button> </button>
</div> </div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{tableMeta.rowData[4]}</div> <div style={{ textAlign: 'center' }}>{tableMeta.rowData[4]}</div>
</div> </div>
</div> </div>
...@@ -540,56 +544,60 @@ export default class TableProgressReport extends Component { ...@@ -540,56 +544,60 @@ export default class TableProgressReport extends Component {
name: "Company", name: "Company",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 200, borderRight: "1px #fff solid", borderBottom: "1px #fff solid", }}> <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 200, borderRight: "1px solid rgb(255, 255, 255)" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style }), setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return <div style={{ width: 300, textAlign: 'left', paddingLeft: 20 }}>{val}</div>; return (
}, <div style={{ width: 300 }}>
{val}
</div>
)
}
}, },
}, },
{ {
name: `INPUT OUTLOOK PA`, name: `INPUT OUTLOOK PA`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<th style={{ ...style, top: 0, zIndex: 103, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} > <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 40, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div> <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, borderRight: "1px solid rgb(255, 255, 255)" }}>{columnMeta.name}</div>
<div className="grid grid-3x"> <div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-1 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Profit Loss"}</span> <span>{"Profit Loss"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Tax Planning"}</span> <span>{"Tax Planning"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Balance Sheet"}</span> <span>{"Balance Sheet"}</span>
</div> </div>
</div> </div>
<div className="column-2 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-2 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Cash Flow"}</span> <span>{"Cash Flow"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"CAT"}</span> <span>{"CAT"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"OLPA Status"}</span> <span>{"OLPA Status"}</span>
</div> </div>
{/* <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> {/* <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Operating Indicator"}</span> <span>{"Operating Indicator"}</span>
</div> */} </div> */}
</div> </div>
<div className="column-3 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="column-3 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Automatic Reminder"}</span> <span>{"Automatic Reminder"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Manual Reminder"}</span> <span>{"Manual Reminder"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, width: 150 }}>
<span>{"Last Manual Reminder"}</span> <span>{"Last Manual Reminder"}</span>
</div> </div>
</div> </div>
...@@ -601,35 +609,35 @@ export default class TableProgressReport extends Component { ...@@ -601,35 +609,35 @@ export default class TableProgressReport extends Component {
return ( return (
<div className="grid grid-3x"> <div className="grid grid-3x">
<div className="column-1 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-1 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Tax Planning')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Tax Planning')}</div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div>
</div> </div>
</div> </div>
<div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'OLPA Status')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'OLPA Status')}</div>
</div> </div>
{/* <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> {/* <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div>
</div> */} </div> */}
</div> </div>
<div className="column-3 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}> <div className="column-3 grid grid-3x" style={{ ...style2, fontSize: 12, position: "relative", left: 20 }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{tableMeta.rowData[2]}</div> <div style={{ textAlign: 'center' }}>{tableMeta.rowData[2]}</div>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<button <button
type="button" type="button"
...@@ -642,7 +650,7 @@ export default class TableProgressReport extends Component { ...@@ -642,7 +650,7 @@ export default class TableProgressReport extends Component {
</button> </button>
</div> </div>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, width: 143 }}>
<div style={{ textAlign: 'center' }}>{tableMeta.rowData[4]}</div> <div style={{ textAlign: 'center' }}>{tableMeta.rowData[4]}</div>
</div> </div>
</div> </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