nambah note

src/container/MonthlyReport/FixedAssetsMovementMR.js

-import { createMuiTheme, MuiThemeProvider, Paper, TableCell, Typography } from '@material-ui/core'
+import React, { Component } from 'react';
+import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input, Tooltip, withStyles, Snackbar } from '@material-ui/core';
 import MUIDataTable from 'mui-datatables';
-import React, { Component } from 'react'
-import ReactTooltip from 'react-tooltip';
-import Images from '../../assets/Images';
+import NumberFormat from 'react-number-format';
 import api from '../../api';
+import PropagateLoader from "react-spinners/PropagateLoader"
+import Images from '../../assets/Images';
+import ReactTooltip from 'react-tooltip';
+import UploadFile from "../../library/Upload";
+import { ExcelRenderer } from 'react-excel-renderer';
+import { Alert } from '@material-ui/lab';
+import * as R from 'ramda'
+
+const LightTooltip = withStyles((theme) => ({
+    tooltip: {
+        backgroundColor: theme.palette.common.white,
+        color: 'rgba(0, 0, 0, 0.87)',
+        boxShadow: theme.shadows[1],
+        fontSize: 11,
+    },
+}))(Tooltip);
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable3());
 
 const options = ct.customOptionsFixedColumn();
-
 const style = {
     position: "sticky",
     left: 0,
-    zIndex: 101,
     background: "white",
+    zIndex: 101,
 };
 const style2 = {
     position: "sticky",
     background: "white",
-    zIndex: 100,
-    top: 0
+    zIndex: 100
 };
 
 export default class FixedAssetsMovementMR extends Component {
@@ -131,8 +144,7 @@ export default class FixedAssetsMovementMR extends Component {
 
     render() {
         let dataTable2 = this.state.dataTable
-        let columns = [
-            {
+        const columns = [{
             name: "Account",
             options: {
                 customHeadRender: (columnMeta) => (
@@ -144,13 +156,34 @@ export default class FixedAssetsMovementMR extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ width: 300 }}>
-                                {val}
+                            {console.log(tableMeta)}
+                            {tableMeta.rowData[24] ?
+                                tableMeta.rowData[24].length > 0 ?
+                                    <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
+                                        <LightTooltip title={"Report Items Not Registered"} arrow>
+                                            <span style={{ fontSize: 12, color: 'red' }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
+                                        </LightTooltip>
+                                    </div>
+                                    :
+                                    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>
+                                :
+                                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: `Month To Date (MTD)`,
             options: {
                 customHeadRender: (columnMeta) => (
@@ -197,8 +230,7 @@ export default class FixedAssetsMovementMR extends Component {
                     )
                 }
             }
-            },
-            {
+        }, {
             name: "Actual Previous Month",
             options: {
                 customHeadRender: (columnMeta) => (
@@ -215,8 +247,7 @@ export default class FixedAssetsMovementMR extends Component {
                     )
                 }
             }
-            },
-            {
+        }, {
             name: `Variance`,
             options: {
                 customHeadRender: (columnMeta) => (
@@ -317,7 +348,7 @@ export default class FixedAssetsMovementMR extends Component {
                     )
                 }
             }
-            },
+        }
         ]
         // let data = [
         //     ["Total Assets", { a: "2", b: "3", c: "4" }, "5", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "11" }],