Skip to content

T
Tia-dev
Commit 6a27acc6 authored by Faisal Hamdi's avatar Faisal Hamdi
Browse files
Options

progressreport!

parent a74cf8a7
Show whitespace changes
Inline Side-by-side
Showing with 377 additions and 15 deletions
src/container/Home.js
View file @ 6a27acc6
......@@ -567,7 +567,7 @@ export default function MiniDrawer() {
}
</div>
))}
<Link to={`${url}/progress-reports`}>
{/* <Link to={`${url}/progress-reports`}>
<div style={{ paddingLeft: 5 }} className={selectedIndex === 'progress-reports' ? "active" : ""}>
<a data-tip={'progress-reports'} data-for={'progress-reports'}>
<ListItem button key={'progress-reports'} onClick={() => selectIndex('progress-reports')}>
......@@ -577,7 +577,7 @@ export default function MiniDrawer() {
</a>
{!open && (<ReactTooltip border={true} id={'Progress Report'} place="bottom" type="light" effect="solid" />)}
</div>
</Link>
</Link> */}
</List>
{open && setting.length > 0 &&
<div style={{ marginLeft: 20 }}>
......
src/container/ProgressReport.js → src/container/Progress/ProgressReport.js
View file @ 6a27acc6
import React, { Component } from 'react';
import { Typography, MuiThemeProvider, createMuiTheme, Paper, TextField } from '@material-ui/core';
import MUIDataTable from "mui-datatables";
import Images from '../assets/Images';
import Images from '../../assets/Images';
import DonutChart from 'react-d3-donut';
import Constant from '../library/Constant';
import api from '../api';
import Constant from '../../library/Constant';
import api from '../../api';
import { Link } from 'react-router-dom';
import { PropagateLoader } from 'react-spinners';
import { titleCase } from '../library/Utils';
import { titleCase } from '../../library/Utils';
import { format } from 'date-fns';
import Autocomplete from '@material-ui/lab/Autocomplete';
import ReactSpeedometer from 'react-d3-speedometer';
import TableProgressReport from './TableProgressReport'
var ct = require("../library/CustomTable");
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
class ReportProgress extends Component {
......@@ -156,6 +157,12 @@ class ReportProgress extends Component {
}
render() {
const dataTable = [
['Tax Planning', '2', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03'],
['CAT', '1', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03' ],
['Profit Loss', '0', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03']
]
const loadingComponent = (
<div style={{ position: 'fixed', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
......@@ -166,6 +173,7 @@ class ReportProgress extends Component {
/>
</div>
);
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}>
<div>
......@@ -274,21 +282,20 @@ class ReportProgress extends Component {
)}
</div> */}
{this.state.loading && loadingComponent}
{/* {this.state.previewTable && (
<TableSubHolding
{/* {this.state.previewTable && ( */}
<TableProgressReport
width={this.props.width}
height={this.props.height}
open={this.props.open}
month={this.state.month.month_value}
approvedMB={this.state.approveMB}
approveMonthly={this.state.approveMonthly}
// month={this.state.month.month_value}
type={this.state.report ? this.state.report.value : 1}
dataTable={this.state.dataTable}
dataTable={dataTable}
// dataTable={this.state.dataTable}
periode={this.state.periode ? this.state.periode.periode : null}
quarter={this.state.quarter.name}
company={this.state.company}
/>
)} */}
{/* )} */}
</div>
</Paper>
</div>
......
src/container/Progress/TableProgressReport.js 0 → 100644
View file @ 6a27acc6
import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, TableCell, Typography } from '@material-ui/core'
import MUIDataTable from 'mui-datatables';
import React, { Component } from 'react'
import NumberFormat from 'react-number-format';
import * as R from 'ramda'
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
zIndex: 101,
background: "white",
};
const style2 = {
position: "sticky",
background: "white",
zIndex: 100
};
export default class TableProgressReport extends Component {
render() {
let dataTable2 = this.props.dataTable2
console.log(this.props);
const columnMB = [
{
name: "Report Type",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{
// tableMeta.rowData[4] == 0 ?
// <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
// :
// <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
// <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
// </div>
val
}
</div>
)
}
}
}, {
name: "Revision",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'center' }}>
{
value
}
</div>
)
}
}
}, {
name: "Company",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ width: 90, textAlign: 'center' }}>
{
value
}
</div>
)
}
}
}, {
name: "Last Update",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderLeft: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'center', width: 60 }}>
{
val
}
</div>
)
}
}
}]
const columnMBStatus = [
{
name: "Company",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{
tableMeta.rowData[4] == 0 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
:
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
</div>
}
</div>
)
}
}
}, {
name: "Periode",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'center' }}>
{tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ color: "black", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
suffix={"%"}
value={Number(value).toFixed(1)}
disabled={true}
// disabled={this.props.isApprover ? true : ((this.props.lastStatus == 'SUBMIT' || this.props.lastStatus == 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted') ? false : true)}
decimalScale={1}
/>
}
/>
}
</div>
)
}
}
}, {
name: "Current Status",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ width: 90, textAlign: 'center' }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
null :
<div>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : value}</span>
</div>
}
</div>
)
}
}
}, {
name: "Revision",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderLeft: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'center', width: 60 }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Approver",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'center', width: 60 }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Approver 2",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'center', width: 60 }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Approver 3",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'center', width: 60 }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Approver 4",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'center', width: 60 }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Approver 5",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'center', width: 60 }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Approver 6",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 60, borderLeft: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'center', width: 60 }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
},{
name: "",
options: {
display: false
}
}]
const columns = []
return (
<div>
<div style={{ padding: '0px 20px 20px 20px', width: this.props.width - (this.props.open === true ? 350 : 100) }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={this.props.type === 0 ? columnMBStatus : this.props.type === 1 ? columnMB : columns}
// columns={this.props.type === 1 ? columnMB : this.props.type === 2 ? columnMR : this.props.type === 3 ? columnOI : this.props.type === 4 ? columnRO : columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
)
}
}
src/router/homeRoutes.js
View file @ 6a27acc6
......@@ -20,7 +20,7 @@ import OutlookPA from '../container/OutlookPA';
import SubHolding from '../container/Laporan/SubHolding';
import SummaryTriputra from '../container/SummaryTriputra/SummaryOfTriputra';
import MasterDataCAT from '../container/MasterData/MasterDataCAT/MasterDataCAT'
import ProgressReport from '../container/ProgressReport'
import ProgressReport from '../container/Progress/ProgressReport'
const routes = [
{
......
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