Statistics

src/App.js

@@ -4,6 +4,7 @@ import {Switch, Route} from 'react-router-dom'
 import RestauMenuPage from './Pages/Restaurant/RestauMenuPage'
 import Homepage from './Pages/Homepage'
 import UserDashboard from './Pages/user-dashboard';
+import Statistics from './Pages/statistics';
 
 import ReviewOrder from './Pages/ReviewOrder'
 import DashboardOrder from './Pages/user-dashboard/order-dashboard';
@@ -22,6 +23,7 @@ class App extends Component {
      <Switch>
         <Route exact path="/" component={Homepage} />
         <Route exact path="/dashboard/information" component={UserDashboard} />
+        <Route exact path="/dashboard/statistics" component={Statistics} />
         <Route exact path="/restaurant/menu" component={RestauMenuPage} />
 
         <Route exact path="/revieworder" component={ReviewOrder} />

src/Pages/Homepage/Homepage-component/vendor/index.js

@@ -19,14 +19,17 @@ export default class Vendor extends Component {
                     <div className="container-fluid">
                         <div className="row">
                             <div className="col-12 vendor-list-item">
-                                <img className="vendor-image img-responsive" src={item.imageUrl} alt="foodimage" />
-                                <h3 className="open">OPEN</h3>
-                                <h1 className="vendor-text">{item.name}</h1>
-                                <p className="vendor-paragraph">{item.address}</p>
-                                <div className="vendor-order">
-                                    <p className="vendor-order-paragraph"><strong>Min Order:</strong>{item.order}</p>
-                                    <p className="vendor-order-paragraph2"><strong>Delivery: </strong>{item.delivery}</p>
-                                </div> 
+                                <a href="#">
+                                    <img className="vendor-image img-responsive" src={item.imageUrl} alt="foodimage" />
+                                    <h3 className="open">OPEN</h3>
+                                    <h1 className="vendor-text">{item.name}</h1>
+                                    <p className="vendor-paragraph">{item.address}</p>
+                                    <div className="vendor-order">
+                                        <p className="vendor-order-paragraph"><strong>Min Order:</strong>{item.order}</p>
+                                        <p className="vendor-order-paragraph2"><strong>Delivery: </strong>{item.delivery}</p>
+                                    </div> 
+                                </a>
+
                             </div>
                         </div>
                     </div>     

src/Pages/statistics/index.jsx

@@ -0,0 +1,29 @@
+import React from "react"
+import "./statistics.scss"
+import Navigation from "../../components/Navigation"
+import User from "../../components/user-dashboard-header"
+import AuthNav from "../../components/Navigation/AuthNav"
+import Footer from "../../components/Footer"
+
+const Statistics = () => {
+    return (
+        <div className="statistic">
+            <Navigation />
+            <User />
+            <AuthNav />
+
+            <div className="statistic-div">
+                <div className="statistic-div-div">
+                    <h1 className="statistic-text">Statistics</h1>
+                    <select className="select"><option>11th June 2019</option></select> 
+                </div>
+
+                <img className="statistic-image" src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1579421222/startng/qieitd8b4cdpksbap5f2.png" alt="" />
+            </div>
+
+            <Footer />
+        </div>
+    )
+}
+
+export default Statistics

src/Pages/statistics/statistics.scss

@@ -0,0 +1,62 @@
+
+.statistic {
+    margin-left: 5%;
+    margin-right: 3%;
+
+        .statistic-div {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        justify-content: space-between;
+        margin-top: 5%;
+        margin-left: 3%;
+        margin-right: 5%;
+        margin-bottom: 10%;
+
+
+        .statistic-div-div {
+            display: flex;
+            flex-direction: row;
+            width: 90%;
+            justify-content: space-between;
+            margin-top: 5%;
+            margin-left: 0%;
+            margin-right: 5%;
+
+            .statistic-text {
+                font-family: "Roboto";
+                font-style: normal;
+                font-weight: normal;
+                font-size: 36px;
+                line-height: 42px;
+                color: rgba(0, 0, 0, 0.6);
+            }
+            .select {
+                border: 1px solid rgb(214, 200, 200);
+                width: 150px;
+            }
+        }
+        .statistic-image {
+            width: 95%;
+        }
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .statistic {
+
+        .statistic-div {
+            margin-bottom: 20%;
+
+            .statistic-div-div {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+            .statistic-image {
+                height: 200px;
+            }
+        }
+    }
+
+}

src/Pages/user-dashboard/index.jsx

@@ -2,13 +2,16 @@ import React from "react"
 import "./user-dashboard.scss"
 import Details from "../../components/Details"
 import Footer from "../../components/Footer"
-import DashboardHeader from "./dashboard-header/index" 
+import User from "../../components/user-dashboard-header"
 
 
 function UserDashboard() {
     return (
         <div className="dashboard">
-            <DashboardHeader />
+            <Navigation />
+            <User />
+            <AuthNav />
+
             <div className="information">
                 <h1 className="information-header">Account Information</h1>
                 <div className="image-input">

src/Pages/user-dashboard/user-dashboard.scss

@@ -1,29 +1,8 @@
 .dashboard {
     overflow: hidden;
 }
-.user-detail {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin: 2% 0 ;
 
 
-    .user-name {
-        font-weight: bold;
-        font-size: 22px;
-        line-height: 26px;
-        color: rgba(0, 0, 0, 0.6);
-    }
-
-    .user-plan {
-        font-weight: normal;
-        font-size: 16px;
-        line-height: 19px;
-        color: rgba(0, 0, 0, 0.4);
-    }
-}
-
 .information {
     margin: 4% 17%;
 

src/components/Navigation/AuthNav.jsx

@@ -18,7 +18,7 @@ function AuthNav() {
       <Nav.Link className="nav-link" href="/dashboard/refund">Refunds</Nav.Link>
       <Nav.Link className="nav-link" href="#">Message Center</Nav.Link>
       <Nav.Link className="nav-link" href="#">Track Order</Nav.Link>
-      <Nav.Link className="nav-link" href="#">Statistic</Nav.Link>
+      <Nav.Link className="nav-link" href="/dashboard/statistics">Statistic</Nav.Link>
       <Nav.Link className="nav-link" href="#">Help</Nav.Link>
       <Nav.Link className="nav-link" href="#">Log-out</Nav.Link>
     </Nav>

src/components/SearchBar/style.scss

@@ -1,7 +1,7 @@
 .search-container {
     display: inline-block;
     background-color: #D6DB46;
-    margin: 0 5% 0 1%;
+    margin: 0 5% 0 -4%;
 
 
     &.white {

src/components/user-dashboard-header/index.jsx

@@ -0,0 +1,14 @@
+import React from "react"
+import "./user.scss"
+
+
+const User = () => {
+    return (
+        <div className="user-detail">
+            <img className="" src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1578128272/gffs5uctqukn7l6nj9wd.png" alt="" />
+            <h2 className="user-name">Richard Williams</h2>
+            <p className="user-plan">Gold Member</p>
+        </div>
+    )
+}
+export default User

src/components/user-dashboard-header/user.scss

@@ -0,0 +1,22 @@
+.user-detail {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 2% 0 ;
+
+
+    .user-name {
+        font-weight: bold;
+        font-size: 22px;
+        line-height: 26px;
+        color: rgba(0, 0, 0, 0.6);
+    }
+
+    .user-plan {
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 19px;
+        color: rgba(0, 0, 0, 0.4);
+    }
+}