CUSTOM TABLE

package.json

@@ -14,6 +14,7 @@
     "react": "^16.13.1",
     "react-d3-donut": "^1.1.2",
     "react-dom": "^16.13.1",
+    "react-number-format": "^4.4.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },

src/assets/Images.js

@@ -19,6 +19,7 @@ const Images = {
     key: require('./key.svg'),
     green: require('./green.svg'),
     red: require('./red.svg'),
+    ceklis: require('./ceklis.png'),
 
     //Image
     triputra: require('./triputra.png'),

src/container/BudgetTahunan.js

+import React, { Component } from 'react';
+import { Typography, Paper, TextField, MenuItem } from '@material-ui/core';
+import MUIDataTable from 'mui-datatables';
+import Images from '../assets/Images';
+
+export default class BudgetTahunan extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            periode: '2020',
+            perusahaan: 'TAP Group',
+            revisi: '0'
+        }
+    }
+    render() {
+        const columns = ["#", "Jenis Laporan",
+            {
+                name: "Status",
+                options: {
+                    customBodyRender: (val, tableMeta) => {
+                        return (
+                            <div style={{ display: 'flex' }}>
+                                {val == 'done' ?
+                                    <img src={Images.ceklis} style={{ width: 31, height: 24 }} /> :
+                                    null
+                                }
+                            </div >
+                        );
+                    }
+                }
+            },
+            {
+                name: "Action",
+                options: {
+                    customBodyRender: (val, tableMeta) => {
+                        return (
+                            <div style={{ display: 'flex' }}>
+                                <button
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        cursor: 'pointer',
+                                        borderColor: 'transparent'
+                                    }}
+                                    onClick={() => null}
+                                >
+                                    <Typography style={{ color: '#5198ea', fontSize: 12, }}>Detail</Typography>
+                                </button>
+                            </div >
+                        );
+                    }
+                }
+            }]
+        const dataTable = [
+            ["1", "Balance Sheet", "done"],
+            ["2", "Profit & Loss", ""],
+            ["3", "CAT", "done"],
+            ["4", "Fixed Assets Movement", ""],
+            ["5", "Tax Planning", "done"],
+            ["6", "Balance Sheet", "done"],
+            ["7", "Profit & Loss", ""],
+            ["8", "CAT", "done"],
+            ["9", "Fixed Assets Movement", ""],
+            ["10", "Tax Planning", "done"],
+            ["11", "Balance Sheet", "done"],
+            ["12", "Profit & Loss", "done"],
+            ["13", "CAT", "done"],
+            ["14", "Fixed Assets Movement", "done"],
+            ["15", "Tax Planning", "done"],
+        ]
+        const options = {
+            filter: false,
+            sort: false,
+            responsive: "scroll",
+            print: false,
+            download: false,
+            selectableRows: false,
+            viewColumns: false,
+            rowsPerPage: 5,
+            rowsPerPageOptions: [5, 25, 100],
+            search: false
+        }
+        const periode = [
+            { value: '2020', label: '2020' },
+            { value: '2019', label: '2019' },
+            { value: '2018', label: '2018' },
+            { value: '2017', label: '2017' },
+            { value: '2016', label: '2016' },
+        ]
+        const perusahaan = [
+            { value: 'TAP Group', label: 'TAP Group' },
+            { value: '2019', label: '2019' },
+            { value: '2018', label: '2018' },
+            { value: '2017', label: '2017' },
+            { value: '2016', label: '2016' },
+        ]
+        const revisi = [
+            { value: '0', label: '0' },
+            { value: '1', label: '1' },
+        ]
+        return (
+            <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
+                <div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                    <Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
+                </div>
+                <div style={{ flex: 1, padding: 20, width: '100%' }}>
+                    <Paper style={{ paddingTop: 10 }}>
+                        <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
+                            <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan</Typography>
+                        </div>
+                        <div style={{ padding: 20 }}>
+                            <div>
+                                <TextField
+                                    style={{ width: 250, }}
+                                    id="periode"
+                                    select
+                                    label="Periode"
+                                    value={this.state.periode}
+                                    onChange={(e) => this.setState({ periode: e.target.value })}
+                                >
+                                    {periode.map((option) => (
+                                        <MenuItem key={option.value} value={option.value}>
+                                            {option.label}
+                                        </MenuItem>
+                                    ))}
+                                </TextField>
+                            </div>
+                            <div style={{ marginTop: 20 }}>
+                                <TextField
+                                    style={{ width: 250, }}
+                                    id="perusahaan"
+                                    select
+                                    label="Perusahaan"
+                                    value={this.state.perusahaan}
+                                    onChange={(e) => this.setState({ perusahaan: e.target.value })}
+                                >
+                                    {perusahaan.map((option) => (
+                                        <MenuItem key={option.value} value={option.value}>
+                                            {option.label}
+                                        </MenuItem>
+                                    ))}
+                                </TextField>
+                            </div>
+                            <div style={{ marginTop: 20 }}>
+                                <TextField
+                                    style={{ width: 250, }}
+                                    id="reivisi"
+                                    select
+                                    label="Revisi"
+                                    value={this.state.revisi}
+                                    onChange={(e) => this.setState({ revisi: e.target.value })}
+                                >
+                                    {revisi.map((option) => (
+                                        <MenuItem key={option.value} value={option.value}>
+                                            {option.label}
+                                        </MenuItem>
+                                    ))}
+                                </TextField>
+                            </div>
+
+                            <div style={{ marginTop: 20 }}>
+                                <MUIDataTable
+                                    data={dataTable}
+                                    columns={columns}
+                                    options={options}
+                                />
+                            </div>
+                            <div style={{ display: 'flex', marginTop: 20 }}>
+                                <div style={{ width: '50%' }}>
+                                    <Typography style={{ fontSize: '16px', color: '#4b4b4b', fontWeight: 'bold' }}>Attachment: </Typography>
+                                </div>
+                                <div style={{ width: '50%' }}>
+                                    <Typography style={{ fontSize: '16px', color: '#5198ea' }}>Upload File</Typography>
+                                </div>
+                            </div>
+                            <div style={{ display: 'flex', marginTop: 10 }}>
+                                <div style={{ width: '50%', paddingLeft: 20 }}>
+                                    <Typography style={{ fontSize: '16px', color: '#4b4b4b' }}>File 1.xls </Typography>
+                                    <Typography style={{ fontSize: '16px', color: '#4b4b4b' }}>File 2.xls </Typography>
+                                </div>
+                                <div style={{ width: '50%' }}>
+                                    <Typography style={{ fontSize: '16px', color: '#ff3939' }}>Delete</Typography>
+                                    <Typography style={{ fontSize: '16px', color: '#ff3939' }}>Delete</Typography>
+                                </div>
+                            </div>
+                        </div>
+                        <div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} >
+                            <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
+                                <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Submit</Typography>
+                            </div>
+                        </div>
+                    </Paper>
+
+                </div>
+            </div >
+        );
+    }
+}

src/library/Array.js

@@ -8,7 +8,7 @@ const arraySide = [
     {
         img: '',
         label: 'Budget Tahunan',
-        path: 'beranda',
+        path: 'budget-tahunan',
         subItem: null
     },
     {

src/library/CustomTable.js

+var mainColor = "#fff"
+var secondColor = "#f6f6f6"
+
+exports.customTable = function () {
+  return {
+    typography: {
+      useNextVariants: true,
+    },
+    overrides: {
+      MUIDataTable: {
+        paper: {
+          position: 'relative',
+          // width: '100% !important',
+          boxShadow: "0 0 0 0 rgba(154,161,171,.15)",
+          border: "1px rgba(0,0,0,0.1) solid",
+          borderRadius: "7.5px",
+          overflow: "hidden",
+        },
+        // responsiveScroll: {
+        //   position: 'relative',
+        //   width: '100% !important',
+        // }
+        responsiveScrollMaxHeight: {
+          height: 'calc(100vh - 250px)',
+          maxHeight: 'calc(100vh - 250px)'
+        },
+      },
+      MuiToolbar: {
+        root: {
+          position: 'relative',
+        }
+      },
+      MUIDataTableToolbar: {
+        root: {
+          position: 'relative',
+          padding: "0px 15px",  
+          backgroundColor: '#f2f6fa', //'rgba(0,76,151,0.05)',
+        },
+        titleText: {
+          color: "#555"
+        },
+        icon: {
+          color: "#555 !important"
+        },
+        iconActive: {
+          color: "#555 !important"
+        },
+        left: {
+          flex: "0 0 auto !important"
+        },
+        actions: {
+          flex: "1 0 auto !important"
+        }
+      },
+      MUIDataTableSearch: {
+        main: {
+          position: 'absolute',
+          top: "0",
+          right: "-9px",
+          width: "350px !important",
+          backgroundColor: "#f2f6fa",
+          zIndex: "10",
+          textAlign: "right",
+          display: "block",
+        },
+        searchIcon: {
+          width: "50px !important",
+          color: "#555 !important",
+          display: "inline-block",
+          textAlign: "center",
+          verticalAlign: "top",
+        },
+        searchText: {
+          width: "calc(100% - 120px) !important",
+          marginRight: "10px",
+          color: "#555 !important",
+          display: "inline-block",
+          verticalAlign: "top",
+        },
+        clearIcon: {
+          width: "50px !important",
+          color: "#555 !important",
+          display: "inline-block",
+          verticalAlign: "top",
+        },
+      },
+      MUIDataTableHead: {
+        main: {
+          position: 'relative',
+          backgroundColor: mainColor,
+          color: "#555",
+          // display: "flex",
+          // alignItems: "stretch"
+        },
+        fixedHeader: {
+          // position: "relative",
+          borderBottom: "1px rgba(0,0,0,0.1) solid",
+          backgroundColor: '#f2f6fa', //'rgba(0,76,151,0.05)',
+          color: "#555",
+          padding: "10px 15px",
+          height: "auto"
+        },
+      },
+      MUIDataTableHeadRow: {
+        root: {
+          position: 'relative',
+          backgroundColor: mainColor,
+        }
+      },
+      MUIDataTableHeadCell: {
+        root: {
+          fontSize: "10pt",
+          fontWeight: "500",
+          color: "#555",
+          backgroundColor: secondColor,
+        },
+        fixedHeader: {
+          // position: "relative",
+          borderBottom: "1px rgba(0,0,0,0.1) solid",
+          backgroundColor: '#f2f6fa', //'rgba(0,76,151,0.05)',
+          color: "#555",
+          padding: "10px 15px",
+          height: "auto"
+        },
+        toolButton: {
+          display: "flex",
+          height: "auto",
+        },
+        data: {
+          display: "inline-block",
+          verticalAlign: "top",
+        },
+        sortActive: {
+          color: "#555"
+        },
+        sortAction: {
+          color: "#555",
+          display: "inline-block",
+          verticalAlign: "top",
+          MuiButtonBase: {
+            color: "#555",
+            root: {
+              color: "#555",
+            }
+          }
+        }
+      },
+      MUIDataTableBodyCell: {
+        root: {
+          position: 'relative',
+          fontSize: "13px",
+          padding: "10px 15px",
+        }
+      },
+      MUIDataTableSelectCell: {
+        headerCell: {
+          backgroundColor: secondColor,
+          checkboxRoot: {
+            color: "#555",
+          }
+        },
+        checkboxRoot: {
+          color: "#555"
+        }
+      },
+      MuiInput: {
+        root: {
+          top: "5px",
+          color: "#555 !important",
+        },
+        underline: {
+          borderBottom: "1px #555 solid !important",
+        }
+      },
+      MuiSelect: {
+        root: {
+          top: "0",
+          color: "#555 !important",
+        },
+      }
+      // MuiIconButton: {
+      //   root: {
+      //     color: "#fff !important",
+      //   }
+      // }
+    }
+  }
+}
+
+exports.customTable2 = function () {
+  return {
+    typography: {
+      useNextVariants: true,
+    },
+    overrides: {
+      MUIDataTable: {
+        root: {
+          backgroundColor: secondColor,
+        },
+        paper: {
+          boxShadow: "0 0 30px 0 rgba(154,161,171,.15)",
+          border: "1px rgba(0,0,0,0.1) solid",
+          borderRadius: "5px",
+          overflow: "hidden",
+        },
+      },
+      MuiToolbar: {
+        root: {
+          left: {
+            flex: "0 0 auto !important"
+          },
+          actions: {
+            flex: "0 0 auto !important"
+          }
+        }
+      },
+      MUIDataTableToolbar: {
+        root: {
+          backgroundColor: secondColor,
+        },
+        titleText: {
+          color: "#555"
+        },
+        icon: {
+          color: "#555"
+        },
+      },
+      MUIDataTableSearch: {
+        searchIcon: {
+          color: "#555"
+        },
+        searchText: {
+          color: "#555",
+        },
+        clearIcon: {
+          color: "#555"
+        },
+      },
+      MUIDataTableHead: {
+        main: {
+          backgroundColor: mainColor,
+          color: "#555"
+        }
+      },
+      MUIDataTableHeadRow: {
+        root: {
+          backgroundColor: mainColor,
+        }
+      },
+      MUIDataTableHeadCell: {
+        root: {
+          fontSize: "10pt",
+          fontWeight: "500",
+          color: mainColor,
+        },
+        fixedHeader: {
+          position: "relative",
+          backgroundColor: secondColor,
+          color: "#555",
+          padding: "10px",
+          height: "auto"
+        },
+        toolButton: {
+          display: "flex",
+          height: "auto"
+        },
+        data: {
+          display: "inline-block",
+          verticalAlign: "top",
+        },
+        sortActive: {
+          color: "#555"
+        },
+        sortAction: {
+          color: "#555",
+          display: "inline-block",
+          verticalAlign: "top",
+          MuiButtonBase: {
+            color: "#555",
+            root: {
+              color: "#555",
+            }
+          }
+        }
+      },
+      MUIDataTableBodyCell: {
+        root: {
+          fontSize: "10pt",
+          padding: "10px"
+        }
+      },
+      MUIDataTableSelectCell: {
+        headerCell: {
+          backgroundColor: secondColor,
+          checkboxRoot: {
+            color: "#fff",
+          }
+        },
+        checkboxRoot: {
+          color: "#555"
+        }
+      },
+    }
+  }
+}
+
+exports.customOptions = function () {
+  return {
+    // selectableRows: false,
+    selectableRows: 'none',
+    filterType: 'multiselect',
+    responsive: 'scrollMaxHeight',
+    rowsPerPage: 5,
+    rowsPerPageOptions: [5, 10, 20, 50],
+    print: false,
+    download: false,
+    elevation: 5,
+  }
+}
+
+exports.customOptions2 = function () {
+  return {
+    selectableRows: true,
+    filterType: 'dropdown',
+    responsive: 'scrollMaxHeight',
+    rowsPerPage: 5,
+    rowsPerPageOptions: [5, 10, 20, 50],
+    print: false,
+    download: false,
+    elevation: 5,
+  }
+}
+
+exports.customOptions3 = function () {
+  return {
+    selectableRows: true,
+    filterType: 'dropdown',
+    responsive: 'scrollMaxHeight',
+    rowsPerPage: 5,
+    rowsPerPageOptions: [5, 10, 20, 50],
+    print: false,
+    download: false,
+    sort: true,
+    elevation: 5,
+  }
+}
+
+exports.customOptions4 = function () {
+  return {
+    selectableRows: false,
+    filter: false,
+    responsive: 'scrollMaxHeight',
+    rowsPerPage: 5,
+    rowsPerPageOptions: [5, 10, 20, 50],
+    print: false,
+    download: false,
+    sort: true,
+    search: false,
+    viewColumns: false,
+    elevation: 5
+  }
+}
+
+exports.customOptions5 = function () {
+  return {
+    // selectableRows: false,
+    selectableRows: 'none',
+    filterType: false,
+    filter: false,
+    sort: false,
+    viewColumns: false,
+    responsive: 'scrollMaxHeight',
+    rowsPerPage: 5,
+    rowsPerPageOptions: [5, 10, 20, 50],
+    print: false,
+    download: false,
+    elevation: 5,
+  }
+}
+
+exports.customOptionsFixedColumn = function () {
+  return {
+    // selectableRows: false,
+    selectableRows: 'none',
+    filterType: false,
+    filter: false,
+    sort: false,
+    viewColumns:false,
+    overflowX: 'auto',
+    rowsPerPage: 10,
+    rowsPerPageOptions: [5, 10, 20, 50],
+    print: false,
+    download: false,
+    elevation: 5,
+    search:false
+  }
+}
\ No newline at end of file

src/router/homeRoutes.js

@@ -2,11 +2,14 @@ import screen404 from '../container/Screen404'
 import Beranda from '../container/Beranda'
 import UserRole from '../container/UserRole'
 import ApprovalMatrix from '../container/ApprovalMatrix'
+import BudgetTahunan from '../container/BudgetTahunan';
+import HomePage from '../container/HomePage';
+import BalanceSheet from '../container/BudgetTahunan/BalanceSheet';
 
 const routes = [
     {
       path: "/home/beranda",
-      main: Beranda
+      main: HomePage
     },
     {
       path: "/home/userrole",
@@ -16,6 +19,10 @@ const routes = [
       path: "/home/approval",
       main: ApprovalMatrix
     },
+    {
+      path: "/home/budget-tahunan",
+      main: BalanceSheet
+    },
     
   ];