recentsales

mock/dashboard.js

@@ -5,9 +5,9 @@ import mockStorge from '../src/utils/mockStorge'
 import {color} from '../src/utils/theme'
 
 let dataKey = mockStorge('Dashboard', Mock.mock({
-  'sales|12': [
+  'sales|8': [
     {
-      'name|+1': 1,
+      'name|+1': 2008,
       'Clothes|200-500': 1,
       'Food|180-700': 1,
       'Electronics|300-850': 1
@@ -17,7 +17,7 @@ let dataKey = mockStorge('Dashboard', Mock.mock({
     {
       'id|+1': 1,
       name: '@last',
-      'status|1-5': 1,
+      'status|1-4': 1,
       date:function(){
         return Mock.Random.integer(2015, 2016)+'-'+Mock.Random.date('MM-dd')+' '+Mock.Random.time('HH:mm:ss')
       },

src/components/dashboard/recentSales.js

@@ -1,7 +1,27 @@
 import React, {PropTypes} from 'react'
-import {Icon,Table} from 'antd'
+import {Icon,Table,Tag} from 'antd'
 import styles from './recentSales.less'
-import {classnames} from '../../utils'
+import {classnames,color} from '../../utils'
+
+
+const status = {
+  1:{
+    color:color.green,
+    text:'SALE'
+  },
+  2:{
+    color:color.yellow,
+    text:'REJECT'
+  },
+  3:{
+    color:color.red,
+    text:'TAX'
+  },
+  4:{
+    color:color.blue,
+    text:'EXTENDED'
+  }
+}
 
 function recentSales(props) {
   const columns = [
@@ -11,17 +31,20 @@ function recentSales(props) {
     }, {
       title: 'STATUS',
       dataIndex: 'status',
+      render:text => <Tag color={status[text].color}>{status[text].text}</Tag>,
     }, {
       title: 'DATE',
       dataIndex: 'date',
+      render:text => new Date(text).format('yyyy-MM-dd'),
     }, {
       title: 'PRICE',
       dataIndex: 'price',
+      render:(text,it) => <span style={{color:status[it.status].color}}>${text}</span>,
     }
   ]
   return (
     <div className={styles.recentsales}>
-      <Table columns={columns} key={(record,key)=>key} dataSource={props.data}/>
+      <Table pagination={false} columns={columns} key={(record,key)=>key} dataSource={props.data.filter((item,key) => key<5)}/>
     </div>
   )
 }

src/components/dashboard/recentSales.less

@@ -1 +1,7 @@
 @import "../vars.less";
+.recentsales{
+  :global .ant-table-thead > tr > th{
+    background: #fff;
+    border-bottom: solid 1px @border-color-base;
+  }
+}

src/components/layout/common.less

@@ -16,18 +16,18 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  width: 7px;
-  background-color: #b4babf;
-  border-radius: 7px;
+  width: 2px;
+  background-color: rgba(0,0,0,.2);
+  border-radius: 2px;
 }
 
 ::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
+  width: 2px;
+  height: 2px;
 }
 
 ::-webkit-scrollbar-track {
-  width: 15px;
+  width: 5px;
 }
 
 ::-webkit-scrollbar:hover {

src/routes/dashboard.js

@@ -41,7 +41,7 @@ function Dashboard({dashboard}) {
             <Card bordered={false} className={styles.quote} bodyStyle={{
               padding: 0,
               height: 204,
-              background: color.red
+              background: color.peach
             }}>
               <Quote {...quote}/>
             </Card>
@@ -50,7 +50,6 @@ function Dashboard({dashboard}) {
       </Col>
       <Col lg={12} md={24}>
         <Card bordered={false} bodyStyle={{
-          padding: 0,
           height: 432,
           background: '#fff'
         }}>

src/utils/theme.js

@@ -4,6 +4,8 @@ module.exports = {
     blue:'#8fc9fb',
     purple:'#d897eb',
     red:'#f69899',
+    yellow:'#f8c82e',
+    peach:'#f797d6',
     borderBase:'#e5e5e5',
     borderSplit:'#f4f4f4'
   }