Skip to content

T
Tia-dev
Commit 0298a685 authored by qorri_di's avatar qorri_di
Browse files
Options

penambahan pada column pada : 

- Report Summary YTD (YTD :periode OPTIONAL)
parent 3340b1a9
Hide whitespace changes
Inline Side-by-side
Showing with 528 additions and 1 deletion
src/container/SummaryTriputra/TableSummaryTriputra.js
View file @ 0298a685
...@@ -2193,7 +2193,534 @@ export default class TableSummaryTriputra extends Component { ...@@ -2193,7 +2193,534 @@ export default class TableSummaryTriputra extends Component {
) )
} }
} }
}, },
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
}, {
name: `YTD ${Number(this.props.periode)} (OPTIONAL)`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', top: 0, color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="column-5" style={{ ...style2, display: 'flex', backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 65, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"Cash Flow"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CFO"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CFI"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CFF"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Net CF"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: '#000000c4' }}>
<span>{"OS Bank Loan"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"KI"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"WC"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Others"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Total"}</span>
</div>
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', width: 200, alignItems: 'center', backgroundColor: '#07a7d0', height: 65 }}>
<span>{"OS SHL"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65, width: 685 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: '#000000c4' }}>
<span>{"Balance Sheet"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Cash & Bank"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CA"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CL"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Equity"}</span>
</div>
</div>
</div>
<div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65, width: 887 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: '#000000c4' }}>
<span>{"Financial Ratio"}</span>
</div>
<div className="grid grid-2x" style={{ height: 25}}>
<div className="column-1 grid grid-4x" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CR"}</span>
</div>
<div className="column-2" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"DER"}</span>
</div>
<div className="column-3" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Debt to EBITDA"}</span>
</div>
<div className="column-4" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"to Interest"}</span>
</div>
</div>
<div className="column-2 grid grid-4x" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"AR Days"}</span>
</div>
<div className="column-2" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Inv Days"}</span>
</div>
<div className="column-3" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"AP Days"}</span>
</div>
<div className="column-4" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CCC"}</span>
</div>
</div>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div style={{ display: 'flex', justifyContent: 'space-between'}}>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[16])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[17])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[18])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[19])}
/>
}
/>
</div>
</div>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[20])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[21])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[22])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[23])}
/>
}
/>
</div>
</div>
<div style={{ display: 'grid', width: 150 }}>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[24])}
/>
}
/>
</div>
</div>
<div style={{ display: 'flex', width: 640, justifyContent: 'space-between'}}>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[25])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[26])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[27])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[28])}
/>
}
/>
</div>
</div>
<div style={{ display: 'flex', width: 860, justifyContent: 'space-between'}}>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[29])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[30])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[31])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[32])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[33])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[34])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[35])}
/>
}
/>
</div>
<div style={{ flex: 1}}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: (tableMeta.rowData[2] !== 0 && tableMeta.rowData[2] !== 1 ) && !tableMeta.rowData[37] ? '#5198ea' : '#000000de' , fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={(tableMeta.rowData[36])}
/>
}
/>
</div>
</div>
</div>
</div>
)
}
},
},
{ {
name: "", name: "",
options: { options: {
......
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