update

package-lock.json

@@ -4426,6 +4426,65 @@
         "type": "^1.0.1"
       }
     },
+    "d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "d3-ease": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.6.tgz",
+      "integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ=="
+    },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
+    },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
+    "d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "requires": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -10869,6 +10928,18 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-d3-donut": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/react-d3-donut/-/react-d3-donut-1.1.2.tgz",
+      "integrity": "sha512-NN6uFPiSYfh+859QNBa5UfGUZlORGJF4r8RPS1HJmF3MserVrpU8YLC1MkRIENJLmIrnhk7v0sNmhBE1DNnEZg==",
+      "requires": {
+        "d3-interpolate": "^1.3.2",
+        "d3-selection": "^1.3.2",
+        "d3-shape": "^1.2.2",
+        "d3-transition": "^1.1.3",
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@@ -11120,6 +11191,14 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-number-format": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-4.4.1.tgz",
+      "integrity": "sha512-ZGFMXZ0U7DcmQ3bSZY3FULOA1mfqreT9NIMYZNoa/ouiSgiTQiYA95Uj2KN8ge6BRr+ghA5vraozqWqsHZQw3Q==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",

src/assets/Images.js

 const Images = {
 
+    //Vector
     dropdownWhite: require('./dropdown-white.svg'),
     dropdownBlack: require('./dropdown-black.svg'),
     flagEnglish: require('./english.svg'),
-    search: require('./search.png'),
-    logout: require('./setting.png'),
-    setting: require('./logout.png'),
     Home: require('./home.svg'),
     budgetTahunan: require('./masterbudget.svg'),
     manajemenDokumen: require('./docmanagement.svg'),
@@ -19,10 +17,17 @@ const Images = {
     key: require('./key.svg'),
     green: require('./green.svg'),
     red: require('./red.svg'),
-    ceklis: require('./ceklis.png'),
+    template: require('./red.svg'),
+    add: require('./red.svg'),
+    download: require('./red.svg'),
+    upload: require('./red.svg'),
 
     //Image
     triputra: require('./triputra.png'),
+    ceklis: require('./ceklis.png'),
+    search: require('./search.png'),
+    logout: require('./setting.png'),
+    setting: require('./logout.png'),
 
 }
 

src/assets/add.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" viewBox="0 0 37 37">
+    <g fill="none" fill-rule="evenodd">
+        <circle cx="18.5" cy="18.5" r="18.5" fill="#51C6EA"/>
+        <g>
+            <path d="M0 0H24V24H0z" transform="translate(6 7)"/>
+            <g stroke="#FFF" stroke-linecap="round" stroke-width="2">
+                <path d="M5 0L5 9.218" transform="translate(6 7) translate(7 7)"/>
+                <path d="M5 0L5 9.218" transform="translate(6 7) translate(7 7) rotate(-90 5 4.61)"/>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/download.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" viewBox="0 0 37 37">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="37" height="37" fill="#47B6AD" rx="18.5"/>
+        <g>
+            <path d="M0 0H24V24H0z" transform="rotate(90 12 18)"/>
+            <g fill="#FFF" fill-rule="nonzero">
+                <path d="M9.979 6.353c-.071-.156-.226-.255-.397-.255H7.84V.436C7.84.196 7.645 0 7.404 0H5.662c-.24 0-.435.195-.435.436v5.662H3.484c-.17 0-.325.1-.396.255-.071.156-.043.338.069.467l3.049 3.484c.083.095.202.15.327.15.126 0 .245-.056.328-.15L9.91 6.82c.113-.128.14-.311.069-.467z" transform="rotate(90 12 18) rotate(-90 11.5 6.5)"/>
+                <path d="M11.324 9.582v2.614H1.742V9.582H0v3.485c0 .481.39.87.871.87h11.325c.481 0 .87-.389.87-.87V9.582h-1.742z" transform="rotate(90 12 18) rotate(-90 11.5 6.5)"/>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/template.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" viewBox="0 0 37 37">
+    <g fill="none" fill-rule="evenodd">
+        <circle cx="18.5" cy="18.5" r="18.5" fill="#51C6EA"/>
+        <circle cx="18.5" cy="18.5" r="18.5" fill="#FFD74C"/>
+        <g>
+            <path d="M0 0H24V24H0z" transform="translate(6 7)"/>
+            <g stroke="#FFF" stroke-width="2" transform="translate(6 7) translate(3 6)">
+                <path d="M0 6h6v6H1c-.552 0-1-.448-1-1V6h0zM1 0h5v6H0V1c0-.552.448-1 1-1z"/>
+                <rect width="6" height="6" x="6" y="6" rx="1"/>
+                <rect width="6" height="6" x="6" rx="1"/>
+                <path d="M12 6h6v5c0 .552-.448 1-1 1h-5 0V6zM12 0h5c.552 0 1 .448 1 1v5h0-6V0z"/>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/upload.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" viewBox="0 0 37 37">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="37" height="37" fill="#EAB051" rx="18.5"/>
+        <g>
+            <path d="M0 0H24V24H0z" transform="rotate(90 12 18)"/>
+            <g fill="#FFF" fill-rule="nonzero">
+                <path d="M9.979 4.1c-.071.156-.226.256-.397.256H7.84v5.662c0 .24-.195.435-.436.435H5.662c-.24 0-.435-.195-.435-.435V4.356H3.484c-.17 0-.325-.1-.396-.256-.071-.156-.043-.338.069-.467L6.206.15C6.289.054 6.408 0 6.533 0c.126 0 .245.055.328.149L9.91 3.633c.113.128.14.311.069.467z" transform="rotate(90 12 18) rotate(-90 11.5 6.5)"/>
+                <path d="M11.324 9.582v2.614H1.742V9.582H0v3.485c0 .481.39.87.871.87h11.325c.481 0 .87-.389.87-.87V9.582h-1.742z" transform="rotate(90 12 18) rotate(-90 11.5 6.5)"/>
+            </g>
+        </g>
+    </g>
+</svg>

src/container/Home.js

@@ -225,7 +225,7 @@ export default function MiniDrawer() {
                       <ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{color:"white"}}/> : <MailIcon style={{color:"white"}}/>}</ListItemIcon>
                       <Typography style={{color: 'white', fontSize: 12}}>{item.label}</Typography>
                     </ListItem>
-                    {item.subItem != null? (index === selectedIndex? <ExpandMore style={{color:"white", marginLeft: 50, alignSelf:'center'}}/> : <ExpandLess style={{color:"white", marginLeft: 50, alignSelf:'center'}}/>) : null}
+                    {item.subItem != null? (index === selectedIndex? <ExpandLess style={{color:"white", marginLeft: 50, alignSelf:'center'}}/> : <ExpandMore style={{color:"white", marginLeft: 50, alignSelf:'center'}}/>) : null}
                   </div>
                 :
                   <Link to={`${url}/${item.path}`}>
@@ -242,7 +242,7 @@ export default function MiniDrawer() {
                       {item.subItem.map((sub, index) => {
                         return (
                           <Link to={`${url}/${sub.path}`}>
-                            <ListItem style={{paddingLeft: 70}}>
+                            <ListItem style={{paddingLeft: 72}}>
                               <Typography style={{color: 'white', fontSize: 12}}>{sub.label}</Typography>
                             </ListItem>
                           </Link>

src/container/Otorisasi/User.js

+import React, { Component } from 'react';
+
+export default class componentName extends Component {
+  render() {
+    return (
+      <div> textInComponent </div>
+    );
+  }
+}

src/router/homeRoutes.js

 import screen404 from '../container/Screen404'
 import Beranda from '../container/Beranda'
-import UserRole from '../container/UserRole'
+import UserRole from '../container/Otorisasi/UserRole'
 import ApprovalMatrix from '../container/ApprovalMatrix'
 import BudgetTahunan from '../container/BudgetTahunan';
 import HomePage from '../container/HomePage';