[FEAT] : Investors Dashboard Added

package.json

@@ -37,15 +37,17 @@
     "axios": "^0.19.2",
     "bootstrap": "^4.5.0",
     "jquery": "^3.5.1",
+    "moment": "^2.26.0",
     "popper.js": "^1.16.1",
     "prop-types": "^15.7.2",
-    "moment": "^2.26.0",
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
+    "react-reveal": "^1.2.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "react-slick": "^0.26.1",
     "recharts": "^1.8.5",
     "redux": "^4.0.5",
     "redux-form": "^8.3.5",

src/components/routes/afterAuth.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import Dashboard from '../views/dashboards/sme/sme';
+import InvestorsDashboard from '../views/dashboards/investors/index.jsx';
 
 function smeRoutes() {
   return (
         <Switch>
-        <Route path='/dashboard' exact component={Dashboard} />
+        <Route exact path='/dashboard' component={Dashboard} />
+        <Route exact path='/investor-dashboard' component={InvestorsDashboard} />
     </Switch>
   );
 }

src/components/views/dashboards/investors/MainContents.jsx

@@ -0,0 +1,184 @@
+import React, { Component } from 'react';
+import Slider from 'react-slick';
+import TopWidgets from './widgets/topWidgets.jsx';
+import Feeds from './widgets/investmentFeeds.jsx';
+import thumb from '../../../../static/wefinance-logo.png';
+
+const details = [
+  { title: 'Investments', boldText: '$2000', details: 'To Amount Invested' },
+  { title: 'Returns', boldText: '$3000', details: 'Total returns' },
+  { title: 'SMEs', boldText: 15, details: 'Total SMEs Invested' },
+  { title: 'Widrawn', boldText: '$1000', details: 'Total Amount Withdrawn' },
+  { title: 'Account', boldText: '$2000', details: 'Current Balance' },
+  { title: 'Next Circle', boldText: '$1452', details: 'Amount Due Next Circle' }
+];
+
+
+const feeds = [
+  {
+    title: 'WeFinance Nigeria',
+    thumb,
+    feedStatus: 'Invest',
+    paragraph: 'Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet.',
+    round: 'First',
+    completed: '10',
+    pending: '5',
+    investors: '8',
+    raised: '$60,000',
+    needed: '$100,000',
+    return: 10,
+    Srates: 85
+  },
+  {
+    title: 'WeChat Global',
+    thumb,
+    feedStatus: 'Invested',
+    paragraph: 'Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet.',
+    round: 'Second',
+    completed: '20',
+    pending: '1',
+    investors: '8',
+    raised: '$60,000',
+    needed: '$100,000',
+    return: 10,
+    Srates: 85
+  },
+  {
+    title: 'FaceBook Inc',
+    thumb,
+    feedStatus: 'Invest',
+    paragraph: 'Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet.',
+    round: 'First',
+    completed: '10',
+    pending: '5',
+    investors: '8',
+    raised: '$60,000',
+    needed: '$100,000',
+    return: 10,
+    Srates: 85
+  },
+  {
+    title: 'Andela',
+    thumb,
+    feedStatus: 'Invest',
+    paragraph: 'Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet.',
+    round: 'First',
+    completed: '10',
+    pending: '5',
+    investors: '8',
+    raised: '$60,000',
+    needed: '$100,000',
+    return: 10,
+    Srates: 85
+  },
+  {
+    title: 'Glo Nigeria',
+    thumb,
+    feedStatus: 'Invested',
+    paragraph: 'Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet.',
+    round: 'First',
+    completed: '10',
+    pending: '5',
+    investors: '8',
+    raised: '$60,000',
+    needed: '$100,000',
+    return: 10,
+    Srates: 85
+  }
+];
+
+// React Slick Settings
+const settings = {
+  dots: false,
+  infinite: false,
+  speed: 500,
+  slidesToShow: 4,
+  slidesToScroll: 4,
+  initialSlide: 0,
+  responsive: [
+    {
+      breakpoint: 1024,
+      settings: {
+        slidesToShow: 3,
+        slidesToScroll: 3,
+        infinite: true,
+        dots: false
+      }
+    },
+    {
+      breakpoint: 600,
+      settings: {
+        slidesToShow: 2,
+        slidesToScroll: 2,
+        initialSlide: 2
+      }
+    },
+    {
+      breakpoint: 480,
+      settings: {
+        slidesToShow: 1,
+        slidesToScroll: 1
+      }
+    }
+  ]
+};
+
+class MainContent extends Component {
+  render() {
+    this.name = 'Investors Dashboard';
+
+    return (
+      <div className="main">
+        <div className="top-widget-container">
+          <Slider {...settings}>
+           {details.map((detail, i) => <TopWidgets
+            key={i}
+            {...detail}
+            />)}
+          </Slider>
+        </div>
+          <div className="overview-container">
+            <div className="investment-feed">
+              <h2>Investment Opportuinities</h2>
+                {
+                  feeds.map((feed, i) => <Feeds
+                    key={i}
+                    {...feed}
+                  />)
+                }
+
+                <div className='footer-nav'>
+                  <div className="active">
+                    1
+                  </div>
+                  <div className="inactive">
+                    2
+                  </div>
+                  <div className="inactive">
+                    3
+                  </div>
+                  <div className="inactive">
+                    4
+                  </div>
+                  <div className="inactive">
+                    Next
+                  </div>
+                </div>
+           </div>
+           <div className="feed-sidebar">
+              <TopWidgets
+               title='Due Date'
+              />
+              <TopWidgets
+                title='Top Performing'
+              />
+              <TopWidgets
+              title='Empty'
+              />
+           </div>
+          </div>
+      </div>
+    );
+  }
+}
+export default MainContent;

src/components/views/dashboards/investors/SideNav.jsx

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import avatar from '../../../../static/jd.jpg';
+
+const user = { name: 'Funny Doe', avatar };
+
+class SideNav extends Component {
+  render() {
+    this.name = 'sidenav';
+    return (
+      <div className='side-nav'>
+          <div className="user-section">
+            <div className="avatar">
+              <img src={user.avatar} alt="avatar"/>
+            </div>
+            <div className="user-name">
+              Welcome {user.name}
+            </div>
+          </div>
+          <ul className="nav">
+            <li>
+              <Link to='/investor-dashboard'>
+                Dashboard
+              </Link>
+            </li>
+            <li>
+              <Link to='/investors/opportuinities'>
+                Opportuinities
+              </Link>
+            </li>
+            <li>
+              <Link to='/investors/investments'>
+                Investments
+              </Link>
+            </li>
+            <li>
+              <Link to='accounts'>
+                Accounts
+              </Link>
+            </li>
+            <li>
+              <Link to='investor-dashboard/settings'>
+                Setting
+              </Link>
+            </li>
+          </ul>
+      </div>
+    );
+  }
+}
+
+export default SideNav;

src/components/views/dashboards/investors/index.jsx

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import Main from './MainContents.jsx';
+import SideNav from './SideNav.jsx';
+import '../../../../styles/dashboard/investors.css';
+
+class Investors extends Component {
+  render() {
+    this.name = 'investors';
+
+    return (
+      <div className='investor-dashboard'>
+      <SideNav />
+      <Main />
+      </div>
+    );
+  }
+}
+export default Investors;