From 7e3017f3d96cede7630f18cbe1e696ad5d8fd8c2 Mon Sep 17 00:00:00 2001
From: Kumar <skuma596@LAMU02XHM07JG5J.uhc.com>
Date: Sun, 19 Apr 2020 12:19:10 +0530
Subject: [PATCH 1/2] version 10: css changes and fixed console errors

---
 src/App.jsx                     | 17 +++++++++--------
 src/component/AssetsSummary.jsx | 10 ----------
 src/component/MainContent.jsx   | 11 +++--------
 src/component/MyHeader.jsx      | 12 ++++++------
 src/component/MySidebar.jsx     | 23 +++++++++++++++--------
 src/component/NavLink.jsx       | 10 +++++++---
 src/component/Utils.jsx         |  2 +-
 src/css/App.css                 |  4 ++++
 8 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 473fded..9d1e929 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -30,12 +30,11 @@ class App extends Component {
     this.setState({
       valuationPeriod: value
     },
-    () => this.fetchServiceData());
+      () => this.fetchServiceData());
 
   }
 
-  fetchServiceData(){
-    debugger
+  fetchServiceData() {
     fetch('http://192.168.0.112:8080/assets?valuationPeriod=' + this.state.valuationPeriod)
       .then(res => res.json())
       .then((data) => {
@@ -51,12 +50,14 @@ class App extends Component {
   render() {
     const { portfolioName, data } = this.state;
     return (
-      <div className="App">
-        <MyHeader data={data} />
-        <div className="container-fluid">
+      <div className="App container-fluid">
+        <div>
+          <div className="row">
+            <MyHeader data={data} />
+          </div>
           <div className="row">
-            <MySidebar data={data} handlePortfolioChange={this.portfolioChange.bind(this)} />
-            <MainContent portfolioName={portfolioName} data={data} handlePeriodChange={this.handlePeriodChange.bind(this)}/>
+            <MySidebar portfolioName={portfolioName} data={data} handlePortfolioChange={this.portfolioChange.bind(this)} />
+            <MainContent portfolioName={portfolioName} data={data} handlePeriodChange={this.handlePeriodChange.bind(this)} />
           </div>
         </div>
         <Footer />
diff --git a/src/component/AssetsSummary.jsx b/src/component/AssetsSummary.jsx
index 62bb767..aa185bf 100644
--- a/src/component/AssetsSummary.jsx
+++ b/src/component/AssetsSummary.jsx
@@ -73,19 +73,9 @@ class AssetsSummary extends Component {
       <div>
         <h2 className="text-left">Assets Summary</h2>
         <BootstrapTable wrapperClasses="table-responsive" keyField='assetType' data={details} columns={columns} />
-
       </div>
     );
   }
 }
 
-// isGainOrLoss = (amount) => {
-//   let icon;
-//   if(changePercentage < 0){
-//       icon = <FontAwesomeIcon icon="arrow-alt-circle-down" color="red"/>
-//   }else if(this.props.changePercentage > 0){
-//       icon = <FontAwesomeIcon icon="arrow-alt-circle-up" color="green"/>
-//   }
-// }  
-
 export default AssetsSummary;
\ No newline at end of file
diff --git a/src/component/MainContent.jsx b/src/component/MainContent.jsx
index 106b371..888f47c 100644
--- a/src/component/MainContent.jsx
+++ b/src/component/MainContent.jsx
@@ -1,13 +1,8 @@
 import React, { Component } from 'react';
 import InfoCard from './InfoCard';
 import AssetsSummary from './AssetsSummary';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 class MainContent extends Component {
-    constructor(props) {
-        super(props);
-    }
-
     handlePeriodChange(valuationPeriod) {
         debugger
         this.props.handlePeriodChange(valuationPeriod);
@@ -34,7 +29,7 @@ class MainContent extends Component {
         }
 
         return (
-            <main role="main" className="col-md-9 ml-sm-auto col-lg-10 pt-auto px-auto">
+            <main role="main" className="col-md-10 ml-sm-auto col-lg-10 pt-auto px-auto">
                 <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                     <h1 className="h2">{this.props.portfolioName}</h1>
                     <div className="btn-toolbar mb-2 mb-md-0">
@@ -42,8 +37,8 @@ class MainContent extends Component {
                             <button className="btn btn-sm btn-outline-secondary">Share</button>
                             <button className="btn btn-sm btn-outline-secondary">Export</button>
                         </div>
-                        <select onChange={(val) => this.handlePeriodChange(val.target.value)} className="btn btn-sm btn-outline-primary dropdown-toggle">
-                            <option selected value="TODAY">Today</option>
+                        <select defaultValue="TODAY" onChange={(val) => this.handlePeriodChange(val.target.value)} className="btn btn-sm btn-outline-primary dropdown-toggle">
+                            <option value="TODAY">Today</option>
                             <option value="_7Days" >Last 7 Days</option>
                             <option value="_15Days">Last 15 Days</option>
                             <option value="_30Days">Last 30 Days</option>
diff --git a/src/component/MyHeader.jsx b/src/component/MyHeader.jsx
index fc40d63..610e9e2 100644
--- a/src/component/MyHeader.jsx
+++ b/src/component/MyHeader.jsx
@@ -36,24 +36,24 @@ class MyHeader extends Component {
     const formattedTotalNetworthChange = utils.formatMoney(totalNetworthChange)
 
     return (
-      <nav className="navbar navbar-dark sticky-top bg-dark">
+      <nav className="navbar navbar-dark sticky-top bg-dark col-md-12">
         <div className="row">
           <div className="col">
             <FontAwesomeIcon icon="hand-holding-usd" color="yellow" size="3x" />
-            <a className="navbar-brand " href="#">My Assetz</a>
+            <span className="navbar-brand ">My Assetz</span >
           </div>
           <div className="col">
-            <a className="navbar-brand  text-white" href="#">
+            <span className="navbar-brand  text-white">
               My Networth: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
               <span className="label label-default ml-1">{formattedTotalNetworth}</span>
-            </a>
+            </span>
           </div>
           <div className="col">
-            <a className="navbar-brand  text-white" href="#">
+            <span className="navbar-brand  text-white">
               Today's Change: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
               <span className="label label-default ml-1">{formattedTotalNetworthChange}</span>
               {icon}
-            </a>
+            </span>
           </div>
         </div>
 
diff --git a/src/component/MySidebar.jsx b/src/component/MySidebar.jsx
index 26549c6..b75d48e 100644
--- a/src/component/MySidebar.jsx
+++ b/src/component/MySidebar.jsx
@@ -6,25 +6,31 @@ class MySidebar extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            links : []
+            links: []
         }
     }
 
     static getDerivedStateFromProps(props, state) {
+        debugger
         const links = [];
         if (props && props.data && props.data.data && props.data.data.length > 0) {
             for (let i = 0; i < props.data.data.length; i++) {
-                links.push({ key: i, text: props.data.data[i].portfolioName, isActive: false });
+                var active = false;
+                if (props.portfolioName && props.portfolioName === props.data.data[i].portfolioName) {
+                    active = true;
+                }
+                links.push({ index: i, text: props.data.data[i].portfolioName, isActive: active });
             }
         }
         return { links: links };
     }
 
     handleClick(i) {
+        debugger
         const links = this.state.links.slice();
         let portfolioName = "";
-        for (const j in links) {
-            if (i == j) {
+        for (var j = 0; j < links.length; j++) {
+            if (i === j) {
                 links[j].isActive = true;
                 portfolioName = links[j].text;
             } else {
@@ -38,16 +44,17 @@ class MySidebar extends Component {
     }
 
     render() {
-
+        const { links } = this.state;
+        debugger
         return (
-            <nav className="col-md-2 d-none d-md-block bg-light sidebar">
+            <nav className="col-md-2 bg-light sidebar">
                 <div className="sidebar-sticky">
                     <ul className="nav flex-column">
-                        {this.state.links.map((link, i) =>
+                        {links.map((link, i) =>
                             <NavLink
                                 text={link.text}
                                 isActive={link.isActive}
-                                key={link.key}
+                                key={link.index}
                                 onClick={() => this.handleClick(i)}
                             />
                         )}
diff --git a/src/component/NavLink.jsx b/src/component/NavLink.jsx
index 096aa52..360ae1c 100644
--- a/src/component/NavLink.jsx
+++ b/src/component/NavLink.jsx
@@ -4,10 +4,14 @@ class NavLink extends Component {
     render() {
         let { onClick } = this.props;
         return (
-            <li key={this.props.key} onClick={onClick} className={"nav-item " + (this.props.isActive ? "active" : "")}>
-                <a className="nav-link text-left" href={this.props.key}>{this.props.text}</a>
+            <li key={this.props.index} onClick={onClick}>
+                <span className={"nav-link text-left cursor-pointer " + (this.props.isActive ? "active" : "")}>
+                    {this.props.text}
+                </span>
             </li>
         );
     }
 }
-export default NavLink;
\ No newline at end of file
+export default NavLink;
+
+
diff --git a/src/component/Utils.jsx b/src/component/Utils.jsx
index cf4222b..ff4ba40 100644
--- a/src/component/Utils.jsx
+++ b/src/component/Utils.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+//add imports here if needed
 
 export function formatMoney(money) {
     return new Intl.NumberFormat('en-IN').format(money);
diff --git a/src/css/App.css b/src/css/App.css
index 87f20ec..80ca14f 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -66,3 +66,7 @@
   text-transform: uppercase;
 }
 
+.cursor-pointer{
+  cursor: pointer;
+}
+

From cbcf0bf4e295d50b1d6e26bf5800c646f7f8b1bf Mon Sep 17 00:00:00 2001
From: Kumar <skuma596@LAMU02XHM07JG5J.uhc.com>
Date: Tue, 21 Apr 2020 14:50:44 +0530
Subject: [PATCH 2/2] version 10: impl. from and to dates for query

---
 package-lock.json             | 315 ++++++++++++++++++++++++++++++++++
 package.json                  |   8 +
 src/App.jsx                   |  12 +-
 src/component/MainContent.jsx |  40 +++--
 src/component/MySidebar.jsx   |   3 -
 5 files changed, 359 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f530142..ce55af2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2182,6 +2182,23 @@
         "indent-string": "4.0.0"
       }
     },
+    "airbnb-prop-types": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz",
+      "integrity": "sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==",
+      "requires": {
+        "array.prototype.find": "2.1.1",
+        "function.prototype.name": "1.1.2",
+        "has": "1.0.3",
+        "is-regex": "1.0.5",
+        "object-is": "1.0.2",
+        "object.assign": "4.1.0",
+        "object.entries": "1.1.1",
+        "prop-types": "15.7.2",
+        "prop-types-exact": "1.2.0",
+        "react-is": "16.13.1"
+      }
+    },
     "ajv": {
       "version": "6.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz",
@@ -2382,6 +2399,15 @@
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
     },
+    "array.prototype.find": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.1.tgz",
+      "integrity": "sha512-mi+MYNJYLTx2eNYy+Yh6raoQacCsNeeMUaspFPh9Y141lFSsWxxB8V9mM2ye+eqiRs917J6/pJ4M9ZPzenWckA==",
+      "requires": {
+        "define-properties": "1.1.3",
+        "es-abstract": "1.17.5"
+      }
+    },
     "array.prototype.flat": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz",
@@ -3163,6 +3189,11 @@
         }
       }
     },
+    "brcast": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brcast/-/brcast-2.0.2.tgz",
+      "integrity": "sha512-Tfn5JSE7hrUlFcOoaLzVvkbgIemIorMIyoMr3TgvszWW7jFt2C9PdeMLtysYD9RU0MmU17b69+XJG1eRY2OBRg=="
+    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -3877,6 +3908,11 @@
       "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
       "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA=="
     },
+    "consolidated-events": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/consolidated-events/-/consolidated-events-2.0.2.tgz",
+      "integrity": "sha512-2/uRVMdRypf5z/TW/ncD/66l75P5hH2vM/GR8Jf8HLc2xnfJtmina6F6du8+v4Z2vTrMo7jC+W1tmEEuuELgkQ=="
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -4012,6 +4048,15 @@
         "sha.js": "2.4.11"
       }
     },
+    "create-react-context": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
+      "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
+      "requires": {
+        "gud": "1.0.0",
+        "warning": "4.0.3"
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -4349,6 +4394,11 @@
         }
       }
     },
+    "date-fns": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.12.0.tgz",
+      "integrity": "sha512-qJgn99xxKnFgB1qL4jpxU7Q2t0LOn1p8KMIveef3UZD7kqjT3tpFNNdXJelEHhE+rUgffriXriw/sOSU+cS1Hw=="
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -4390,6 +4440,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
+    "deepmerge": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
+    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -4576,6 +4631,11 @@
         "path-type": "3.0.0"
       }
     },
+    "direction": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz",
+      "integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ=="
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -4606,6 +4666,14 @@
         "esutils": "2.0.3"
       }
     },
+    "document.contains": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/document.contains/-/document.contains-1.0.1.tgz",
+      "integrity": "sha512-A1KqlZq1w605bwiiLqVZehWE9S9UYlUXPoduFWi64pNVNQ9vy6wwH/7BS+iEfSlF1YyZgcg5PZw5HqDi7FCrUw==",
+      "requires": {
+        "define-properties": "1.1.3"
+      }
+    },
     "dom-accessibility-api": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz",
@@ -4850,6 +4918,15 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
       "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw=="
     },
+    "enzyme-shallow-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.1.tgz",
+      "integrity": "sha512-hGA3i1so8OrYOZSM9whlkNmVHOicJpsjgTzC+wn2JMJXhq1oO4kA4bJ5MsfzSIcC71aLDKzJ6gZpIxrqt3QTAQ==",
+      "requires": {
+        "has": "1.0.3",
+        "object-is": "1.0.2"
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -6072,11 +6149,26 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "function.prototype.name": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.2.tgz",
+      "integrity": "sha512-C8A+LlHBJjB2AdcRPorc5JvJ5VUoWlXdEHLOJdCI7kjHEtGTpHQUiqMvCIKUwIsGwZX2jZJy761AXsn356bJQg==",
+      "requires": {
+        "define-properties": "1.1.3",
+        "es-abstract": "1.17.5",
+        "functions-have-names": "1.2.1"
+      }
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
     },
+    "functions-have-names": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.1.tgz",
+      "integrity": "sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA=="
+    },
     "gensync": {
       "version": "1.0.0-beta.1",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz",
@@ -6139,6 +6231,15 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs="
     },
+    "global-cache": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/global-cache/-/global-cache-1.2.1.tgz",
+      "integrity": "sha512-EOeUaup5DgWKlCMhA9YFqNRIlZwoxt731jCh47WBV9fQqHgXhr3Fa55hfgIUqilIcPsfdNKN7LHjrNY+Km40KA==",
+      "requires": {
+        "define-properties": "1.1.3",
+        "is-symbol": "1.0.3"
+      }
+    },
     "global-modules": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
@@ -7048,6 +7149,11 @@
         "has-symbols": "1.0.1"
       }
     },
+    "is-touch-device": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-touch-device/-/is-touch-device-1.0.1.tgz",
+      "integrity": "sha512-LAYzo9kMT1b2p19L/1ATGt2XcSilnzNlyvq6c0pbPRVisLbAPpLqr53tIJS00kvrTkj0HtR8U7+u8X0yR8lPSw=="
+    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -8871,6 +8977,19 @@
         "minimist": "1.2.5"
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
+    "moment-timezone": {
+      "version": "0.5.28",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.28.tgz",
+      "integrity": "sha512-TDJkZvAyKIVWg5EtVqRzU97w0Rb0YVbfpqyjgu6GwXCAohVRqwZjf4fOzDE6p1Ch98Sro/8hQQi65WDXW5STPw==",
+      "requires": {
+        "moment": "2.24.0"
+      }
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -9732,6 +9851,11 @@
         "ts-pnp": "1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
@@ -10764,6 +10888,16 @@
         "react-is": "16.13.1"
       }
     },
+    "prop-types-exact": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
+      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
+      "requires": {
+        "has": "1.0.3",
+        "object.assign": "4.1.0",
+        "reflect.ownkeys": "0.2.0"
+      }
+    },
     "prop-types-extra": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
@@ -10998,6 +11132,47 @@
         "underscore": "1.9.1"
       }
     },
+    "react-date-range": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/react-date-range/-/react-date-range-1.0.3.tgz",
+      "integrity": "sha512-OJU/UfiXDRnmiBC0fG51SsDIWMuUiRFyIbs9pFPKZLDWTmilhMkdNUdc20O1Kp9FJLQeMtumPpWtRPM9NtYIYg==",
+      "requires": {
+        "classnames": "2.2.6",
+        "prop-types": "15.7.2",
+        "react-list": "0.8.14",
+        "shallow-equal": "1.2.1"
+      }
+    },
+    "react-dates": {
+      "version": "21.8.0",
+      "resolved": "https://registry.npmjs.org/react-dates/-/react-dates-21.8.0.tgz",
+      "integrity": "sha512-PPriGqi30CtzZmoHiGdhlA++YPYPYGCZrhydYmXXQ6RAvAsaONcPtYgXRTLozIOrsQ5mSo40+DiA5eOFHnZ6xw==",
+      "requires": {
+        "airbnb-prop-types": "2.15.0",
+        "consolidated-events": "2.0.2",
+        "enzyme-shallow-equal": "1.0.1",
+        "is-touch-device": "1.0.1",
+        "lodash": "4.17.15",
+        "object.assign": "4.1.0",
+        "object.values": "1.1.1",
+        "prop-types": "15.7.2",
+        "raf": "3.4.1",
+        "react-moment-proptypes": "1.7.0",
+        "react-outside-click-handler": "1.3.0",
+        "react-portal": "4.2.1",
+        "react-with-direction": "1.3.1",
+        "react-with-styles": "4.1.0",
+        "react-with-styles-interface-css": "6.0.0"
+      }
+    },
+    "react-day-picker": {
+      "version": "7.4.7",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-7.4.7.tgz",
+      "integrity": "sha512-ep1NIdnVWrsnEOgcZwz1G+T963zAA2WvqjlCK5j2gjbFXeqJ+TNBOX6dxJqoHNjgNPhdieC0TkQpnIODfEJK0g==",
+      "requires": {
+        "prop-types": "15.7.2"
+      }
+    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@@ -11257,6 +11432,39 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-list": {
+      "version": "0.8.14",
+      "resolved": "https://registry.npmjs.org/react-list/-/react-list-0.8.14.tgz",
+      "integrity": "sha512-uf4eaocWTGDxww5MJ0gYiNfG4RyIDSE6khA/cRPIZCp8yudK7BzXSY+JxTJGDNwswWsKE4oE4Js3IBW9vB6UfQ==",
+      "requires": {
+        "prop-types": "15.7.2"
+      }
+    },
+    "react-moment": {
+      "version": "0.9.7",
+      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.9.7.tgz",
+      "integrity": "sha512-ifzUrUGF6KRsUN2pRG5k56kO0mJBr8kRkWb0wNvtFIsBIxOuPxhUpL1YlXwpbQCbHq23hUu6A0VEk64HsFxk9g=="
+    },
+    "react-moment-proptypes": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/react-moment-proptypes/-/react-moment-proptypes-1.7.0.tgz",
+      "integrity": "sha512-ZbOn/P4u469WEGAw5hgkS/E+g1YZqdves2BjYsLluJobzUZCtManhjHiZKjniBVT7MSHM6D/iKtRVzlXVv3ikA==",
+      "requires": {
+        "moment": "2.24.0"
+      }
+    },
+    "react-outside-click-handler": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz",
+      "integrity": "sha512-Te/7zFU0oHpAnctl//pP3hEAeobfeHMyygHB8MnjP6sX5OR8KHT1G3jmLsV3U9RnIYo+Yn+peJYWu+D5tUS8qQ==",
+      "requires": {
+        "airbnb-prop-types": "2.15.0",
+        "consolidated-events": "2.0.2",
+        "document.contains": "1.0.1",
+        "object.values": "1.1.1",
+        "prop-types": "15.7.2"
+      }
+    },
     "react-overlays": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-3.0.1.tgz",
@@ -11271,6 +11479,28 @@
         "warning": "4.0.3"
       }
     },
+    "react-popper": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
+      "integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==",
+      "requires": {
+        "@babel/runtime": "7.9.2",
+        "create-react-context": "0.3.0",
+        "deep-equal": "1.1.1",
+        "popper.js": "1.16.1",
+        "prop-types": "15.7.2",
+        "typed-styles": "0.0.7",
+        "warning": "4.0.3"
+      }
+    },
+    "react-portal": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-portal/-/react-portal-4.2.1.tgz",
+      "integrity": "sha512-fE9kOBagwmTXZ3YGRYb4gcMy+kSA+yLO0xnPankjRlfBv4uCpFXqKPfkpsGQQR15wkZ9EssnvTOl1yMzbkxhPQ==",
+      "requires": {
+        "prop-types": "15.7.2"
+      }
+    },
     "react-router": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
@@ -11388,6 +11618,76 @@
         "prop-types": "15.7.2"
       }
     },
+    "react-with-direction": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-with-direction/-/react-with-direction-1.3.1.tgz",
+      "integrity": "sha512-aGcM21ZzhqeXFvDCfPj0rVNYuaVXfTz5D3Rbn0QMz/unZe+CCiLHthrjQWO7s6qdfXORgYFtmS7OVsRgSk5LXQ==",
+      "requires": {
+        "airbnb-prop-types": "2.15.0",
+        "brcast": "2.0.2",
+        "deepmerge": "1.5.2",
+        "direction": "1.0.4",
+        "hoist-non-react-statics": "3.3.2",
+        "object.assign": "4.1.0",
+        "object.values": "1.1.1",
+        "prop-types": "15.7.2"
+      }
+    },
+    "react-with-styles": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-with-styles/-/react-with-styles-4.1.0.tgz",
+      "integrity": "sha512-zp05fyA6XFetqr07ox/a0bCFyEj//gUozI9cC1GW59zaGJ38STnxYvzotutgpzMyHOd7TFW9ZiZeBKjsYaS+RQ==",
+      "requires": {
+        "airbnb-prop-types": "2.15.0",
+        "hoist-non-react-statics": "3.3.2",
+        "object.assign": "4.1.0",
+        "prop-types": "15.7.2",
+        "react-with-direction": "1.3.1"
+      }
+    },
+    "react-with-styles-interface-css": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-with-styles-interface-css/-/react-with-styles-interface-css-6.0.0.tgz",
+      "integrity": "sha512-6khSG1Trf4L/uXOge/ZAlBnq2O2PEXlQEqAhCRbvzaQU4sksIkdwpCPEl6d+DtP3+IdhyffTWuHDO9lhe1iYvA==",
+      "requires": {
+        "array.prototype.flat": "1.2.3",
+        "global-cache": "1.2.1"
+      }
+    },
+    "reactstrap": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.4.1.tgz",
+      "integrity": "sha512-oAjp9PYYUGKl7SLXwrQ1oRIrYw0MqfO2mUqYgGapFKHG2uwjEtLip5rYxtMujkGx3COjH5FX1WtcfNU4oqpH0Q==",
+      "requires": {
+        "@babel/runtime": "7.9.2",
+        "classnames": "2.2.6",
+        "prop-types": "15.7.2",
+        "react-lifecycles-compat": "3.0.4",
+        "react-popper": "1.3.7",
+        "react-transition-group": "2.9.0"
+      },
+      "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.9.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.7.2",
+            "react-lifecycles-compat": "3.0.4"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11490,6 +11790,11 @@
         "strip-indent": "3.0.0"
       }
     },
+    "reflect.ownkeys": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
+      "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA="
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -12339,6 +12644,11 @@
         }
       }
     },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -13516,6 +13826,11 @@
         "mime-types": "2.1.26"
       }
     },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
diff --git a/package.json b/package.json
index 7846348..462f746 100644
--- a/package.json
+++ b/package.json
@@ -11,13 +11,21 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "bootstrap": "^4.4.1",
+    "date-fns": "^2.12.0",
+    "moment": "^2.24.0",
+    "moment-timezone": "^0.5.28",
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.0",
     "react-bootstrap-table-next": "^4.0.0",
+    "react-date-range": "^1.0.3",
+    "react-dates": "^21.8.0",
+    "react-day-picker": "^7.4.7",
     "react-dom": "^16.13.1",
+    "react-moment": "^0.9.7",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
+    "reactstrap": "^8.4.1",
     "serve": "^11.3.0"
   },
   "scripts": {
diff --git a/src/App.jsx b/src/App.jsx
index 9d1e929..ccfb606 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -11,7 +11,8 @@ class App extends Component {
     super(props);
     this.state = {
       portfolioName: "Retirement",
-      valuationPeriod: "TODAY",
+      startDate: null,
+      endDate: null,
       data: null
     }
     this.portfolioChange = this.handlePortfolioChange.bind(this);
@@ -19,23 +20,22 @@ class App extends Component {
   }
 
   handlePortfolioChange(name) {
-    debugger
     this.setState({
       portfolioName: name
     });
   }
 
-  handlePeriodChange(value) {
-    debugger
+  handlePeriodChange(startDate, endDate) {
     this.setState({
-      valuationPeriod: value
+      startDate: startDate,
+      endDate: endDate
     },
       () => this.fetchServiceData());
 
   }
 
   fetchServiceData() {
-    fetch('http://192.168.0.112:8080/assets?valuationPeriod=' + this.state.valuationPeriod)
+    fetch('http://192.168.0.112:8080/assets?startDate=' + this.state.startDate + "&endDate=" + this.state.endDate)
       .then(res => res.json())
       .then((data) => {
         this.setState({ data: data })
diff --git a/src/component/MainContent.jsx b/src/component/MainContent.jsx
index 888f47c..780be22 100644
--- a/src/component/MainContent.jsx
+++ b/src/component/MainContent.jsx
@@ -3,9 +3,25 @@ import InfoCard from './InfoCard';
 import AssetsSummary from './AssetsSummary';
 
 class MainContent extends Component {
-    handlePeriodChange(valuationPeriod) {
-        debugger
-        this.props.handlePeriodChange(valuationPeriod);
+    constructor(props) {
+        super(props);
+        this.state = {
+            fromDate: null,
+            toDate: null
+        }
+    }
+
+
+    handlePeriodChange(fromDate, toDate) {
+        const startDate = fromDate != null ? fromDate : this.state.fromDate;
+        const endDate = toDate != null ? toDate : this.state.toDate;
+        this.setState({
+            fromDate: startDate,
+            toDate: endDate
+        });
+        if (startDate != null && startDate != "" && endDate != null && endDate != "") {
+            this.props.handlePeriodChange(startDate, endDate);
+        }
     }
 
     render() {
@@ -32,18 +48,22 @@ class MainContent extends Component {
             <main role="main" className="col-md-10 ml-sm-auto col-lg-10 pt-auto px-auto">
                 <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                     <h1 className="h2">{this.props.portfolioName}</h1>
+                    <div className="form-group mb-md-0">
+                        <label >From Date:</label>
+                        <input type="date" name="fromDate" max="2099-12-31"
+                            min="2020-01-01" onChange={(val) => this.handlePeriodChange(val.target.value, null)} />
+                    </div>
+                    <div className="form-group mb-md-0">
+                        <label>To Date:
+                            <input className="border border-grey" type="date" name="toDate" min="2020-01-01"
+                                max="2099-12-31" onChange={(val) => this.handlePeriodChange(null, val.target.value)} />
+                        </label>
+                    </div>
                     <div className="btn-toolbar mb-2 mb-md-0">
                         <div className="btn-group mr-2">
                             <button className="btn btn-sm btn-outline-secondary">Share</button>
                             <button className="btn btn-sm btn-outline-secondary">Export</button>
                         </div>
-                        <select defaultValue="TODAY" onChange={(val) => this.handlePeriodChange(val.target.value)} className="btn btn-sm btn-outline-primary dropdown-toggle">
-                            <option value="TODAY">Today</option>
-                            <option value="_7Days" >Last 7 Days</option>
-                            <option value="_15Days">Last 15 Days</option>
-                            <option value="_30Days">Last 30 Days</option>
-                            <option value="_90Days">Last 90 Days</option>
-                        </select>
                     </div>
                 </div>
 
diff --git a/src/component/MySidebar.jsx b/src/component/MySidebar.jsx
index b75d48e..a69ccb5 100644
--- a/src/component/MySidebar.jsx
+++ b/src/component/MySidebar.jsx
@@ -11,7 +11,6 @@ class MySidebar extends Component {
     }
 
     static getDerivedStateFromProps(props, state) {
-        debugger
         const links = [];
         if (props && props.data && props.data.data && props.data.data.length > 0) {
             for (let i = 0; i < props.data.data.length; i++) {
@@ -26,7 +25,6 @@ class MySidebar extends Component {
     }
 
     handleClick(i) {
-        debugger
         const links = this.state.links.slice();
         let portfolioName = "";
         for (var j = 0; j < links.length; j++) {
@@ -45,7 +43,6 @@ class MySidebar extends Component {
 
     render() {
         const { links } = this.state;
-        debugger
         return (
             <nav className="col-md-2 bg-light sidebar">
                 <div className="sidebar-sticky">