try DataTable

nusmoney_client/package-lock.json

@@ -1161,6 +1161,71 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.16",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "requires": {
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/unitless": "0.7.5",
+        "@emotion/utils": "0.11.3",
+        "csstype": "^2.5.7"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.13",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz",
+          "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A=="
+        }
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1400,6 +1465,43 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@react-bootstrap/react-popper": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz",
+      "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==",
+      "requires": {
+        "babel-runtime": "6.x.x",
+        "create-react-context": "^0.2.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.5",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "create-react-context": {
+          "version": "0.2.3",
+          "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+          "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+          "requires": {
+            "fbjs": "^0.8.0",
+            "gud": "^1.0.0"
+          }
+        },
+        "typed-styles": {
+          "version": "0.0.5",
+          "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
+          "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw=="
+        },
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
@@ -2601,6 +2703,23 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.0.33",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
+      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      }
+    },
     "babel-plugin-istanbul": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz",
@@ -2679,6 +2798,11 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz",
       "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA=="
     },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3888,6 +4012,17 @@
         }
       }
     },
+    "create-emotion": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.27.tgz",
+      "integrity": "sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==",
+      "requires": {
+        "@emotion/cache": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      }
+    },
     "create-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -4727,11 +4862,38 @@
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
     },
+    "emotion": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.27.tgz",
+      "integrity": "sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==",
+      "requires": {
+        "babel-plugin-emotion": "^10.0.27",
+        "create-emotion": "^10.0.27"
+      }
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "requires": {
+        "iconv-lite": "^0.6.2"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.2",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz",
+          "integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -5732,6 +5894,35 @@
         "bser": "2.1.1"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -5827,6 +6018,11 @@
         "pkg-dir": "^3.0.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -7062,6 +7258,15 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -7803,6 +8008,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -8485,6 +8695,15 @@
         "tslib": "^1.10.0"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -10228,6 +10447,15 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -10407,6 +10635,65 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-bootstrap": {
+      "version": "1.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.5.tgz",
+      "integrity": "sha512-Osm0OtTbYwfsT1rpu88ESWuAHZxfaHFNKFiW8w3w+6YY9/bLEPHbGRZA6W21fg5yvcuKN9hJKT857TTHgY7SoQ==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "@react-bootstrap/react-popper": "1.2.1",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "invariant": "^2.2.3",
+        "keycode": "^2.1.2",
+        "popper.js": "^1.14.6",
+        "prop-types": "^15.6.2",
+        "prop-types-extra": "^1.1.0",
+        "react-context-toolbox": "^2.0.2",
+        "react-overlays": "^1.0.0",
+        "react-prop-types": "^0.4.0",
+        "react-transition-group": "^2.5.1",
+        "uncontrollable": "^6.0.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+          "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+          "requires": {
+            "@babel/runtime": "^7.1.2"
+          }
+        },
+        "react-transition-group": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+          "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+          "requires": {
+            "dom-helpers": "^3.4.0",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2",
+            "react-lifecycles-compat": "^3.0.4"
+          }
+        }
+      }
+    },
+    "react-bs-datatable": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-bs-datatable/-/react-bs-datatable-2.1.1.tgz",
+      "integrity": "sha512-wCsZcqkfKz0VHcL2qGtWDPXYbbeHuQ1ombKGOdfS5v3C5Xb2/D1nSaQVwSiweA2uizG/UcOi3AbDQ1ffhqSQHQ==",
+      "requires": {
+        "emotion": "^10.0.14",
+        "react": "^16.8.4",
+        "react-bootstrap": "1.0.0-beta.5",
+        "react-dom": "^16.8.4"
+      }
+    },
+    "react-context-toolbox": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz",
+      "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A=="
+    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@@ -10634,6 +10921,31 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-overlays": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz",
+      "integrity": "sha512-i/FCV8wR6aRaI+Kz/dpJhOdyx+ah2tN1RhT9InPrexyC4uzf3N4bNayFTGtUeQVacj57j1Mqh1CwV60/5153Iw==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "prop-types": "^15.6.2",
+        "prop-types-extra": "^1.1.0",
+        "react-context-toolbox": "^2.0.2",
+        "react-popper": "^1.3.2",
+        "uncontrollable": "^6.0.0",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+          "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+          "requires": {
+            "@babel/runtime": "^7.1.2"
+          }
+        }
+      }
+    },
     "react-popper": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
@@ -10648,6 +10960,24 @@
         "warning": "^4.0.2"
       }
     },
+    "react-prop-types": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz",
+      "integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=",
+      "requires": {
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -12720,6 +13050,20 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "ua-parser-js": {
+      "version": "0.7.22",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz",
+      "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q=="
+    },
+    "uncontrollable": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.2.3.tgz",
+      "integrity": "sha512-VgOAoBU2ptCL2bfTG2Mra0I8i1u6Aq84AFonD5tmCAYSfs3hWvr2Rlw0q2ntoxXTHjcQOmZOh3FKaN+UZVyREQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "invariant": "^2.2.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

nusmoney_client/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "bootstrap": "^4.5.2",
     "react": "^16.13.1",
+    "react-bs-datatable": "^2.1.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",

nusmoney_client/src/components/accountList.jsx

@@ -1,22 +1,32 @@
 import React, { Component } from "react";
-import { Container, ListGroup, ListGroupItem, Button } from "reactstrap";
-import { CSSTransition, TransitionGroup } from "react-transition-group";
-
-import uuid from "uuid";
+import Datatable from "react-bs-datatable";
 
 class AccountList extends Component {
-    state = {
-        items: [
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            isLoaded: false,
+            items: [],
+        };
+        this.header = [
+            { title: "ID", prop: "user_id", sortable: true, filterable: true },
+            {
+                title: "Account Type",
+                prop: "acct_type",
+                sortable: true,
+                filterable: true,
+            },
+            { title: "Account Number", prop: "acct_number", sortable: true, filterable: true },
             {
-                user_id: uuid(),
-                acct_type: "saving",
-                acct_number: "1111",
-                balance: 0.0,
-                date_created: "",
-                max_limit: 0.0
-            }
-        ],
-    };
+                title: "Balance",
+                prop: "balance",
+                sortable: true,
+                filterable: true,
+            },
+        ];
+    }
+
 
     callAPIServer() {
         /*         let bodyData = {
@@ -33,9 +43,17 @@ class AccountList extends Component {
         })
             .then((res) => res.json())
             .then((data) => {
-                console.log(data);
-                this.setState({ items: data });
-                //console.log(this.state.user);
+                this.setState({
+                    isLoaded: true,
+
+                    items: data
+                },
+                (error) => {
+                    this.setState({
+                        isLoaded: true,
+                        error: error,
+                    });
+                });
             })
             .catch((err) => {
                 console.log(err);
@@ -97,57 +115,27 @@ class AccountList extends Component {
     }
 
     render() {
-        // destructure {}
-        const { items } = this.state;
-
-        return (
-            <Container className="App-list">
-                <Button
-                    color="dark"
-                    style={{ marginBottom: "2em" }}
-                    onClick={() => {
-                        this.addAccount( {
-                            user_id: uuid(),
-                            acct_type: "saving",
-                            acct_number: "1111",
-                            balance: 1000.0,
-                            date_created: "",
-                            max_limit: 100000.0
-                        });
-
-                    }}
-                >
-                    Add Account
-                </Button>
-
-                <ListGroup>
-                    <TransitionGroup className="user-list">
-                        {items.map(({ user_id, acct_type, acct_number, balance, date_created, max_limit }) => (
-                            <CSSTransition
-                                key={user_id}
-                                timeout={500}
-                                /* className="fade" */
-                            >
-                                <ListGroupItem>
-                                    <Button
-                                        className="remove-btn"
-                                        color="danger"
-                                        size="sm"
-                                        onClick={() => {
-                                            this.deleteAccount(user_id);
-                                            console.log(`Delete ${user_id}`);
-                                        }}
-                                    >
-                                        &times;
-                                    </Button>
-                                    {user_id} {acct_type} {acct_number} {balance} {date_created}
-                                </ListGroupItem>
-                            </CSSTransition>
-                        ))}
-                    </TransitionGroup>
-                </ListGroup>
-            </Container>
-        );
+        const { error, isLoaded, items } = this.state;
+        if (error) {
+            return <div>Error: {error.message}</div>;
+        } else if (!isLoaded) {
+            return <div>Loading...</div>;
+        } else {
+            console.log(this.state.items);
+            return (
+                <div class="container">
+                    <Datatable
+                        tableHeaders={this.header}
+                        tableBody={this.state.items}
+                        keyName="accountTable"
+                        tableClass="striped hover responsive"
+                        rowsPerPage={3}
+                        rowsPerPageOption={[3, 5, 8, 10]}
+                        initialSort={{ prop: "user_id", isAscending: true }}
+                    />
+                </div>
+            );
+        }
     }
 }
 

nusmoney_client/src/components/messageList.jsx

@@ -0,0 +1,90 @@
+import React, { Component } from "react";
+import Datatable from "react-bs-datatable";
+
+class MessageList extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            isLoaded: false,
+            items: [],
+        };
+        this.header = [
+            { title: "ID", prop: "id", sortable: true, filterable: true },
+            { title: "User ID", prop: "user_id", sortable: true, filterable: true },
+            {
+                title: "Date",
+                prop: "date",
+                sortable: true,
+                filterable: true,
+            },
+            { title: "Remark", prop: "remark", sortable: true, filterable: true },
+        ];
+    }
+
+
+    callAPIServer() {
+        /*         let bodyData = {
+                    limit: 12,
+                }; */
+
+        // setup automatic proxy in package.json.
+        // thus eliminating the need to type "http://localhost:7000"
+        // "proxy" : "http://localhost:7000"
+        fetch("/messages?limit=18", {
+            method: "GET",
+            /* body: JSON.stringify(bodyData), */
+            headers: { "Content-type": "application/json; charset=UTF-8" },
+        })
+            .then((res) => res.json())
+            .then((data) => {
+                this.setState({
+                    isLoaded: true,
+
+                    items: data
+                },
+                (error) => {
+                    this.setState({
+                        isLoaded: true,
+                        error: error,
+                    });
+                });
+            })
+            .catch((err) => {
+                console.log(err);
+                return err;
+            });
+    }
+
+    componentDidMount() {
+        // react lifecycle method componentDidMount()
+        // will execute the callAPIServer() methods afteer the component mounts
+        this.callAPIServer();
+    }
+
+    render() {
+        const { error, isLoaded, items } = this.state;
+        if (error) {
+            return <div>Error: {error.message}</div>;
+        } else if (!isLoaded) {
+            return <div>Loading...</div>;
+        } else {
+            console.log(this.state.items);
+            return (
+                <div class="container">
+                    <Datatable
+                        tableHeaders={this.header}
+                        tableBody={this.state.items}
+                        keyName="messageTable"
+                        tableClass="striped hover responsive"
+                        rowsPerPage={3}
+                        rowsPerPageOption={[3, 5, 8, 10]}
+                        initialSort={{ prop: "id", isAscending: true }}
+                    />
+                </div>
+            );
+        }
+    }
+}
+
+export default MessageList;

nusmoney_client/src/components/messages.jsx

@@ -1,11 +1,12 @@
 import React from "react";
+import MessageList from './messageList';
 
 const messages = () => {
     return (
         <div>
             <h1>Messages</h1>
-            <h2>Under Construction</h2>
             <p>Messages page body content</p>
+            <MessageList />
         </div>
     );
 };

nusmoney_client/src/components/navigation.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { NavLink } from "react-router-dom";
+/* import { NavLink } from "react-router-dom"; */
 
 import "./navigation.css";
 

nusmoney_client/src/components/transactionList.jsx

@@ -0,0 +1,91 @@
+import React, { Component } from "react";
+import Datatable from "react-bs-datatable";
+
+class TransactionList extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            isLoaded: false,
+            items: [],
+        };
+        this.header = [
+            { title: "ID", prop: "id", sortable: true, filterable: true },
+            { title: "Account Number", prop: "acct_number", sortable: true, filterable: true },
+            {
+                title: "Date",
+                prop: "date",
+                sortable: true,
+                filterable: true,
+            },
+            { title: "Type", prop: "type", sortable: true, filterable: true },
+            { title: "Amount", prop: "amount", sortable: true, filterable: true },
+        ];
+    }
+
+
+    callAPIServer() {
+        /*         let bodyData = {
+                    limit: 12,
+                }; */
+
+        // setup automatic proxy in package.json.
+        // thus eliminating the need to type "http://localhost:7000"
+        // "proxy" : "http://localhost:7000"
+        fetch("/transactions?limit=18", {
+            method: "GET",
+            /* body: JSON.stringify(bodyData), */
+            headers: { "Content-type": "application/json; charset=UTF-8" },
+        })
+            .then((res) => res.json())
+            .then((data) => {
+                this.setState({
+                    isLoaded: true,
+
+                    items: data
+                },
+                (error) => {
+                    this.setState({
+                        isLoaded: true,
+                        error: error,
+                    });
+                });
+            })
+            .catch((err) => {
+                console.log(err);
+                return err;
+            });
+    }
+
+    componentDidMount() {
+        // react lifecycle method componentDidMount()
+        // will execute the callAPIServer() methods afteer the component mounts
+        this.callAPIServer();
+    }
+
+    render() {
+        const { error, isLoaded, items } = this.state;
+        if (error) {
+            return <div>Error: {error.message}</div>;
+        } else if (!isLoaded) {
+            return <div>Loading...</div>;
+        } else {
+            console.log(this.state.items);
+            return (
+                <div class="container">
+                    <Datatable
+                        tableHeaders={this.header}
+                        tableBody={this.state.items}
+                        keyName="transactionTable"
+                        tableClass="striped hover responsive"
+                        rowsPerPage={3}
+                        rowsPerPageOption={[3, 5, 8, 10]}
+                        initialSort={{ prop: "id", isAscending: true }}
+                    />
+                </div>
+            );
+        }
+    }
+}
+
+export default TransactionList;

nusmoney_client/src/components/transactions.jsx

@@ -1,11 +1,13 @@
 import React from "react";
+import TransactionList from './transactionList';
 
 const transactions = () => {
     return (
         <div>
             <h1>Transactions</h1>
-            <h2>Under Construction</h2>
+
             <p>Transactions page body content</p>
+            <TransactionList />
         </div>
     );
 };