Merge pull request #16 from duocun/statistic-dashboard

#15 Add summary to dashboard

README.md

@@ -1,9 +1,9 @@
-[![Build Status](https://travis-ci.org/bravemaster619/duocun-backoffice.svg?branch=master)](https://travis-ci.org/bravemaster619/duocun-backoffice)
+[![Build Status](https://github.com/duocun/duocun-backoffice)](https://https://github.com/duocun/duocun-backoffice)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Node version](https://img.shields.io/badge/npm-v6.13.4-blue)](http://nodejs.org/download/)
 [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues)
-[![HitCount](http://hits.dwyl.com/bravemaster619/duocun-backoffice.svg)](http://hits.dwyl.com/bravemaster619/duocun-backoffice)
+(http://https://github.com/duocun/duocun-backoffice)
 
 # Overview
 

src/assets/i18n/zh.json

@@ -17,6 +17,7 @@
     "Finance":"财务",
     "Transaction":"交易",
     "Transactions":"交易",
+    "Sales": "销售额",
     "Image": "图像",
     "Product Name": "商品名称",
     "Product Name (English)": "商品名称（英文）",

src/components/Navbars/AdminNavbarLinks.js

@@ -28,7 +28,7 @@ const useStyles = makeStyles(styles);
 const AdminNavbarLinks = ({ signOut }) => {
   const { t } = useTranslation();
   const history = useHistory({
-    basename: "duocun-backoffice"
+    basename: "admin2" // backoffice
   });
   const classes = useStyles();
   const [openNotification, setOpenNotification] = React.useState(null);

src/redux/actions/order.js

@@ -10,7 +10,7 @@ export const OrderStatus = {
 
 export const loadOrders = payload => {
   return {
-    type: 'LOAD_ORDERS',
+    type: 'SET_ORDERS',
     payload
   }
 }

src/redux/actions/statistics.js

@@ -0,0 +1,20 @@
+import ApiStatisticsService from 'services/api/ApiStatisticsService';
+
+
+export const setStatisticsSummary = payload => {
+  return {
+    type: 'SET_STATISTICS_SUMMARY',
+    payload
+  }
+}
+
+// async actions
+export const loadStatisticsSummaryAsync = (startDate, endDate) => {
+  return (dispatch) => {
+    return ApiStatisticsService.getSummary(startDate, endDate).then(
+      ({data}) => {
+        dispatch(setStatisticsSummary(data.data));
+      }
+    );
+  }
+}

src/redux/reducers/index.js

@@ -2,11 +2,13 @@ import { combineReducers } from "redux";
 import authReducer from "./auth";
 import { orders, order, filterOrders } from "./order";
 import { accounts } from "./account";
+import { statisticsSummary } from "./statistics";
 
 export default combineReducers({
   authReducer,
   orders,
   order,
   filterOrders,
-  accounts
+  accounts,
+  statisticsSummary
 });

src/redux/reducers/order.js

@@ -6,7 +6,7 @@ export const deliverDate = (state = {}, action) => {
 };
 
 export const orders = (state = [], action) => {
-  if (action && action.type === "LOAD_ORDERS") {
+  if (action && action.type === "SET_ORDERS") {
     return action.payload;
   }
   return state;

src/redux/reducers/statistics.js

@@ -0,0 +1,10 @@
+
+
+export const statisticsSummary = (state = {}, action) => {
+  if (action && action.type === "SET_STATISTICS_SUMMARY") {
+    return action.payload;
+  }
+  return state;
+};
+
+

src/services/api/ApiStatisticsService.js

@@ -0,0 +1,20 @@
+import ApiService from "services/api/ApiService";
+
+export default {
+  getSummary: (startDate, endDate) => {
+    let query = {startDate, endDate};
+    return ApiService.v2().get("statistics/summary", query);
+  },
+  getMerchantStatistic: (startDate, endDate) => {
+    let query = {startDate, endDate};
+    return ApiService.v2().get("statistics/merchant", query);
+  },
+  saveDriverStatistic: (startDate) => {
+    let query = {startDate};
+    return ApiService.v2().get("statistics/driver", query);
+  },
+  saveProductStatistic: (startDate, endDate) => {
+    let query = {startDate, endDate};
+    return ApiService.v2().get("statistics/product", query);
+  }
+};

src/views/Dashboard/Dashboard.js

@@ -1,10 +1,14 @@
-import React from "react";
+import React, {useEffect} from "react";
 // react plugin for creating charts
 import ChartistGraph from "react-chartist";
 // @material-ui/core
 import { makeStyles } from "@material-ui/core/styles";
 import Icon from "@material-ui/core/Icon";
 // @material-ui/icons
+
+import * as moment from 'moment';
+import {connect} from 'react-redux';
+
 import Store from "@material-ui/icons/Store";
 import Warning from "@material-ui/icons/Warning";
 import DateRange from "@material-ui/icons/DateRange";
@@ -39,12 +43,20 @@ import {
 
 import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
 
+
+import { loadStatisticsSummaryAsync } from 'redux/actions/statistics';
+
 const useStyles = makeStyles(styles);
 
-export default function Dashboard() {
+const Dashboard = ({summary, loadStatisticsSummary}) => {
   const classes = useStyles();
-  const nOrders = 40;
-  const nProducts = 100;
+
+  useEffect(() => {
+    const startDate = moment().format('YYYY-MM-DD');
+    const endDate = moment().format('YYYY-MM-DD');
+    loadStatisticsSummary(startDate, endDate);
+  }, []);
+
   return (
     <div>
       <GridContainer>
@@ -60,19 +72,23 @@ export default function Dashboard() {
                 <span>Products</span>
               </p>
               <h3 className={classes.cardTitle}>
-                <span>{nOrders}</span>
+                <span>{summary.nOrders}</span>
                 <span>/</span>
-                <span>{nProducts}</span>
+                <span>{summary.nProducts}</span>
               </h3>
             </CardHeader>
             <CardFooter stats>
               <div className={classes.stats}>
-                <Danger>
+                {/* <Danger>
                   <Warning />
                 </Danger>
                 <a href="#pablo" onClick={e => e.preventDefault()}>
                   Get more space
-                </a>
+                </a> */}
+                <div className={classes.stats}>
+                  <DateRange />
+                  Last 24 Hours
+                </div>
               </div>
             </CardFooter>
           </Card>
@@ -83,8 +99,12 @@ export default function Dashboard() {
               <CardIcon color="success">
                 <Store />
               </CardIcon>
-              <p className={classes.cardCategory}>Revenue</p>
-              <h3 className={classes.cardTitle}>$34,245</h3>
+              <p className={classes.cardCategory}>
+                <span>Sales</span>
+              </p>
+              <h3 className={classes.cardTitle}>
+                <span>${summary.totalPrice}</span>
+              </h3>
             </CardHeader>
             <CardFooter stats>
               <div className={classes.stats}>
@@ -271,3 +291,15 @@ export default function Dashboard() {
     </div>
   );
 }
+
+
+const mapStateToProps = (state) => ({ summary: state.statisticsSummary });
+const mapDispatchToProps = (dispatch) => ({
+  loadStatisticsSummary: (startDate, endDate) => {
+    dispatch(loadStatisticsSummaryAsync(startDate, endDate));
+  },
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Dashboard);