tebel

src/container/BudgetTahunan/BalanceSheet.js

@@ -5,6 +5,7 @@ import NumberFormat from 'react-number-format';
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
+
 const options = ct.customOptionsFixedColumn();
 const style = {
     position: "sticky",
@@ -36,9 +37,9 @@ export default class BalanceSheet extends Component {
                             {tableMeta.rowIndex == 0 || tableMeta.rowIndex == 1 ?
                                 <span style={{ fontSize: 12, fontWeight: 'bold' }}>{val}</span>
                                 :
-                                tableMeta.rowIndex == 2 || tableMeta.rowIndex == 6 || tableMeta.rowIndex == 7 || tableMeta.rowIndex == 8 ?
-                                    <span style={{ fontSize: 12, marginLeft: 10 }}>{val}</span> :
-                                    <span style={{ fontSize: 12, marginLeft: 20 }}>{val}</span>
+                                tableMeta.rowIndex == 2 || tableMeta.rowIndex == 6 || tableMeta.rowIndex == 7 ||  tableMeta.rowIndex == 8 ?
+                                <span style={{ fontSize: 12, marginLeft: 10 }}>{val}</span> :
+                                <span style={{ fontSize: 12, marginLeft: 20}}>{val}</span>
                             }
                         </div>
                     )
@@ -261,39 +262,21 @@ export default class BalanceSheet extends Component {
                         <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
                             <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan - Balance Sheet</Typography>
                         </div>
-                        <div className="test app-popup-show" style={{ marginTop: 100}}>
-                            <div className="popup-content background-white border-radius">
-                                <div className="popup-panel grid grid-2x">
-                                    <div className="col-1" style={{ width: '140%' }}>
-                                        <div className="popup-title">
-                                            Test
-                                        </div>
-                                    </div>
-                                    <div className="col-2 content-right" style={{maxWidth: "inherit"}}>
-                                        <button
-                                            type="button"
-                                            className="btn btn-circle btn-grey"
-                                            onClick={()=> null}
-                                        >
-                                            <i className="fa fa-lg fa-times" />
-                                        </button>
-                                    </div>
-                                </div>
-                                <div>
-                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography>
-                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography>
-                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
-                                </div>
+                        <div style={{ padding: 20 }}>
+                            <div>
+                                <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography>
+                                <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography>
+                                <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
+                            </div>
 
-                                {/* <div style={{ marginTop: 20, width: 1350 }}>
-                                    <MuiThemeProvider theme={getMuiTheme()}>
-                                        <MUIDataTable
-                                            data={dataTable}
-                                            columns={columns}
-                                            options={options}
-                                        />
-                                    </MuiThemeProvider>
-                                </div> */}
+                            <div style={{ marginTop: 20, width: 1350 }}>
+                                <MuiThemeProvider theme={getMuiTheme()}>
+                                    <MUIDataTable
+                                        data={dataTable}
+                                        columns={columns}
+                                        options={options}
+                                    />
+                                </MuiThemeProvider>
                             </div>
                         </div>
                     </Paper>

src/container/MasterData/UnitBisnis.js

+import React, { Component } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import SearchIcon from '@material-ui/icons/Search';
+import Images from "../../assets/Images";
+import MUIDataTable from "mui-datatables";
+import CreateUnitBisnis from "./formUnitBisnis/CreateUnitBisnis";
+
+var ct = require("../../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+const options = ct.customOptions();
+
+export default class UnitBisnis extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            visibleCreate: false
+        }
+    }
+    render() {
+        const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
+            name: "Action",
+            options: {
+                customBodyRender: (val, tableMeta) => {
+                    return (
+                        <div style={{ display: 'flex' }}>
+                            <button
+                                style={{
+                                    backgroundColor: 'transparent',
+                                    cursor: 'pointer',
+                                    borderColor: 'transparent'
+                                }}
+                                onClick={() => null}
+                            >
+                                <img src={Images.editCopy2} />
+                            </button>
+                            <button
+                                style={{
+                                    backgroundColor: 'transparent',
+                                    cursor: 'pointer',
+                                    borderColor: 'transparent'
+                                }}
+                                onClick={() => null}
+                            >
+                                <img src={Images.editCopy} />
+                            </button>
+                        </div >
+                    );
+                }
+            }
+        }]
+        const data = [
+            ["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
+            ["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
+            ["3", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
+            ["4", "DHARMA GROUP", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
+            ["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
+        ]
+        return (
+            <Container fluid style={{ height: '100vh', padding: 0 }}>
+                {/* <Row> */}
+                <div style={{ height: '20vh', backgroundColor: '#354960', width: '100%' }} />
+                <div style={{ marginTop: -150 }}>
+                    <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}>
+                        <label style={{ color: 'white', width: '20%' }}>Master Data - Unit Bisnis</label>
+                        <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label>
+                        <div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
+                            <img src={Images.add} onClick={() => this.setState({ visibleCreate: true })} />
+                        </div>
+                    </div>
+                    <div style={{ padding: 25 }}>
+                        <MuiThemeProvider theme={getMuiTheme()}>
+                            <MUIDataTable
+                                theme={getMuiTheme()}
+                                data={data}
+                                columns={columns}
+                                options={options}
+                            />
+                        </MuiThemeProvider>
+
+                    </div>
+                </div>
+                {this.state.visibleCreate && (
+                    <CreateUnitBisnis
+                        onClickClose={() => this.setState({ visibleCreate: false })}
+                    />
+                )}
+            </Container>
+        );
+    }
+}

src/container/MasterData/formUnitBisnis/CreateUnitBisnis.js

+import React, { Component } from 'react';
+
+export default class CreateUnitBisnis extends Component {
+    render() {
+        return (
+            <div className="test app-popup-show" style={{ marginTop: 100 }}>
+                <div className="popup-content background-white border-radius">
+                    <div className="popup-panel grid grid-2x">
+                        <div className="col-1" style={{ maxWidth: "inherit" }}>
+                            <div className="popup-title">
+                                Create Data
+                            </div>
+                        </div>
+                        <div className="col-2 content-right" style={{ maxWidth: "inherit" }}>
+                            <button
+                                type="button"
+                                className="btn btn-circle btn-grey"
+                                onClick={() => null}
+                            >
+                                <i className="fa fa-lg fa-times" />
+                            </button>
+                        </div>
+                    </div>
+
+
+                    <div>
+
+                    </div>
+
+                </div>
+            </div>
+        );
+    }
+}

src/container/Otorisasi/User.js

 import React, { Component } from "react";
 import { Container, Row, Col } from "react-bootstrap";
-import { makeStyles, createMuiTheme } from '@material-ui/core/styles';
+import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 import SearchIcon from '@material-ui/icons/Search';
 import Images from "../../assets/Images";
 import MUIDataTable from "mui-datatables";
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
-const options = ct.customOptionsFixedColumn();
+const options = ct.customOptions();
 
 export default class componentName extends Component {
   render() {
-      const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
-        name: "Action",
-        options: {
-            customBodyRender: (val, tableMeta) => {
-                return (
-                    <div style={{ display: 'flex' }}>
-                        <button
-                            style={{
-                                backgroundColor: 'transparent',
-                                cursor: 'pointer',
-                                borderColor: 'transparent'
-                            }}
-                            onClick={() => null}
-                        >
-                            <img src={Images.editCopy2} />
-                        </button>
-                        <button
-                            style={{
-                                backgroundColor: 'transparent',
-                                cursor: 'pointer',
-                                borderColor: 'transparent'
-                            }}
-                            onClick={() => null}
-                        >
-                            <img src={Images.editCopy} />
-                        </button>
-                    </div >
-                );
-            }
+    const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
+      name: "Action",
+      options: {
+        customBodyRender: (val, tableMeta) => {
+          return (
+            <div style={{ display: 'flex' }}>
+              <button
+                style={{
+                  backgroundColor: 'transparent',
+                  cursor: 'pointer',
+                  borderColor: 'transparent'
+                }}
+                onClick={() => null}
+              >
+                <img src={Images.editCopy2} />
+              </button>
+              <button
+                style={{
+                  backgroundColor: 'transparent',
+                  cursor: 'pointer',
+                  borderColor: 'transparent'
+                }}
+                onClick={() => null}
+              >
+                <img src={Images.editCopy} />
+              </button>
+            </div >
+          );
         }
+      }
     }]
     const data = [
-        ["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
-        ["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
-        ["3", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
-        ["4", "DHARMA GROUP", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
-        ["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
+      ["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
+      ["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
+      ["3", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
+      ["4", "DHARMA GROUP", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
+      ["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
     ]
     return (
-      <Container fluid style={{height: '100vh', padding: 0}}>
+      <Container fluid style={{ height: '100vh', padding: 0 }}>
         {/* <Row> */}
-        <div style={{height: '20vh', backgroundColor: '#354960', width: '100%'}}/>
-        <div style={{marginTop: -150}}>
-          <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25}}>
-            <label style={{color:'white', width: '20%'}}>Master Data - Role & Otorisasi</label>
-            <label style={{color:'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor:'white', borderWidth: 2, alignItems:'center'}}>Search</label>
-            <div style={{width: '20%', justifyContent:'flex-end', display: 'flex'}}>
-              <img src={Images.add}/>
+        <div style={{ height: '20vh', backgroundColor: '#354960', width: '100%' }} />
+        <div style={{ marginTop: -150 }}>
+          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}>
+            <label style={{ color: 'white', width: '20%' }}>Master Data - Role & Otorisasi</label>
+            <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label>
+            <div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
+              <img src={Images.add} />
             </div>
           </div>
-          <div style={{padding: 25}}>
+          <div style={{ padding: 25 }}>
+            <MuiThemeProvider theme={getMuiTheme()}>
               <MUIDataTable
-                theme={getMuiTheme()}
                 data={data}
                 columns={columns}
                 options={options}
               />
+            </MuiThemeProvider>
+
           </div>
         </div>
       </Container>

src/library/Array.js

@@ -59,7 +59,7 @@ const arraySide = [
             {
                 img: '',
                 label: 'Unit Bisnis',
-                path: 'beranda',
+                path: 'unit-bisnis',
             },
             {
                 img: '',

src/library/CustomTable.js

@@ -13,7 +13,7 @@ exports.customTable = function () {
           // 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",
+          borderRadius: "10px",
           overflow: "hidden",
         },
         // responsiveScroll: {
@@ -149,7 +149,6 @@ exports.customTable = function () {
         root: {
           position: 'relative',
           fontSize: "13px",
-          padding: "10px 15px",
         }
       },
       MUIDataTableSelectCell: {
@@ -309,72 +308,15 @@ exports.customOptions = function () {
     // 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',
+    responsive: 'scroll',
+    viewColumns:false,
     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,
+    search: false
   }
 }
 

src/router/homeRoutes.js

@@ -9,6 +9,7 @@ import BalanceSheet from '../container/BudgetTahunan/BalanceSheet';
 import Profile from '../container/Profile';
 import ItemLaporan from '../container/ItemLaporan';
 import Perusahaan from '../container/Perusahaan';
+import UnitBisnis from '../container/MasterData/UnitBisnis'
 
 const routes = [
   {
@@ -43,6 +44,10 @@ const routes = [
     path: "/home/user",
     main: User
   },
+  {
+    path: "/home/unit-bisnis",
+    main: UnitBisnis
+  },
 ];
 
 export default routes;
\ No newline at end of file