Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
135
src/common/pages/Dashboard/CardAdmin.js
Normal file
135
src/common/pages/Dashboard/CardAdmin.js
Normal file
@@ -0,0 +1,135 @@
|
||||
import React from "react";
|
||||
import {inject, observer} from "mobx-react";
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import "./style.scss";
|
||||
import {LINKS} from './../../routes'
|
||||
import {Link} from 'react-router-dom';
|
||||
import * as _ from 'lodash';
|
||||
import NumberFormat from 'react-number-format';
|
||||
import {
|
||||
Paper,
|
||||
Card,
|
||||
CardActions,
|
||||
CardHeader,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
CardText,
|
||||
FlatButton,
|
||||
GridList,
|
||||
GridTile,
|
||||
Divider,
|
||||
Step,
|
||||
Stepper,
|
||||
StepLabel,
|
||||
StepButton,
|
||||
RaisedButton,
|
||||
} from 'material-ui';
|
||||
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class CardAdmin extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
stepIndex: 1,
|
||||
stepAccount : false,
|
||||
stepDeposit : false,
|
||||
stepChallenge : false,
|
||||
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this
|
||||
.globalUI
|
||||
.changeBackgroundColor("#f7f7f7");
|
||||
// .changeBackgroundColor("#208166");
|
||||
this.dashboardStore = props.appstate.dashboard;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.userData = props.appstate.userData;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this
|
||||
.globalUI
|
||||
.changeBackgroundColor("#fff");
|
||||
}
|
||||
|
||||
getValue = (data)=> {
|
||||
if(data == null){
|
||||
return 0
|
||||
}
|
||||
else{
|
||||
return data
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
const contentStyle = {margin: '0 16px'};
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<div className="col s12 m4 l4 row">
|
||||
{/*<Card style={{backgroundColor: '#2196f3', minHeight: 145}} className="cardLite">*/}
|
||||
{/*<CardHeader*/}
|
||||
{/*style={{padding: '16px 16px 0',}}*/}
|
||||
{/*title={<h1 style={{fontSize: 22, fontWeight: '400', color: '#fff'}}>Total Deposit</h1>}*/}
|
||||
{/*/>*/}
|
||||
{/*<CardTitle style={{padding: '16px 16px 8px 16px'}}*/}
|
||||
{/*title={<h1 style={{fontSize: 38, fontWeight: "300", color: "#fff"}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.top.total[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /><span*/}
|
||||
{/*className="saldo-analytic-percentage" style={{fontSize: 18}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.top.today[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span></h1>}*/}
|
||||
{/*subtitle={<span style={{fontSize: 16, fontWeight: 300, color: '#fff'}}>Today</span>}/>*/}
|
||||
|
||||
{/*<CardText style={{padding: '8px 0 8px 0px', position: 'relative'}}>*/}
|
||||
{/*<Divider style={{marginBottom: 8, backgroundColor: '#3984c4'}}/>*/}
|
||||
{/*<span style={{fontSize: 16, fontWeight: 300, color: '#fff', paddingLeft: 16}}>Yesterday</span>*/}
|
||||
{/*<span style={{*/}
|
||||
{/*position: 'absolute',*/}
|
||||
{/*right: '16px',*/}
|
||||
{/*fontSize: 16,*/}
|
||||
{/*fontWeight: 400,*/}
|
||||
{/*paddingLeft: 16,*/}
|
||||
{/*color: "#fff"*/}
|
||||
{/*}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.top.yesterday[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span>*/}
|
||||
{/*</CardText>*/}
|
||||
|
||||
{/*</Card>*/}
|
||||
|
||||
</div>
|
||||
<div className="col s12 m4 l4">
|
||||
<Card style={{minHeight: 145}} className="cardLite">
|
||||
<CardHeader
|
||||
style={{padding: '16px 16px 0',}}
|
||||
title={<h1 style={{fontSize: 22, fontWeight: '400'}}>Total Withdraw</h1>}
|
||||
/>
|
||||
|
||||
<CardTitle style={{padding: '16px 16px 8px 16px'}}
|
||||
title={<h1 style={{fontSize: 38, fontWeight: "300"}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.bottom.total[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /><span
|
||||
className="saldo-analytic-percentage" style={{fontSize: 16}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.bottom.today[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span></h1>}
|
||||
subtitle={<span style={{fontSize: 16, fontWeight: 300}}>Today</span>}/>
|
||||
|
||||
|
||||
<CardText style={{padding: '8px 0 8px 0px', position: 'relative'}}>
|
||||
<Divider style={{marginBottom: 8}}/>
|
||||
<span style={{fontSize: 16, fontWeight: 300, color: 'rgba(66, 71, 112, 0.54)', paddingLeft: 16}}>Yesterday</span>
|
||||
<span style={{position: 'absolute', right: '16px', fontSize: 16, fontWeight: 400, paddingLeft: 16}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.bottom.yesterday[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span>
|
||||
</CardText>
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
131
src/common/pages/Dashboard/CardAgent.js
Normal file
131
src/common/pages/Dashboard/CardAgent.js
Normal file
@@ -0,0 +1,131 @@
|
||||
import React from "react";
|
||||
import {inject, observer} from "mobx-react";
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import "./style.scss";
|
||||
import {LINKS} from './../../routes'
|
||||
import {Link} from 'react-router-dom';
|
||||
import * as _ from 'lodash';
|
||||
import DC from 'decimal.js-light';
|
||||
import NumberFormat from 'react-number-format';
|
||||
import {
|
||||
Paper,
|
||||
Card,
|
||||
CardActions,
|
||||
CardHeader,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
CardText,
|
||||
FlatButton,
|
||||
GridList,
|
||||
GridTile,
|
||||
Divider,
|
||||
Step,
|
||||
Stepper,
|
||||
StepLabel,
|
||||
StepButton,
|
||||
RaisedButton,
|
||||
} from 'material-ui';
|
||||
|
||||
const {
|
||||
LineChart,
|
||||
AreaChart,
|
||||
BarChart,
|
||||
Bar,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
ReferenceLine,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Area,
|
||||
ResponsiveContainer
|
||||
} = require('recharts/umd/Recharts.min');
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class CardAgent extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
stepIndex: 1,
|
||||
stepAccount : false,
|
||||
stepDeposit : false,
|
||||
stepChallenge : false,
|
||||
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this
|
||||
.globalUI
|
||||
.changeBackgroundColor("#f7f7f7");
|
||||
// .changeBackgroundColor("#208166");
|
||||
this.dashboardStore = props.appstate.dashboard;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.userData = props.appstate.userData;
|
||||
this.transactionStore = props.appstate.transaction;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.transactionStore.getAmount();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this
|
||||
.globalUI
|
||||
.changeBackgroundColor("#fff");
|
||||
}
|
||||
|
||||
getValue = (data)=> {
|
||||
if(data == null){
|
||||
return 0
|
||||
}
|
||||
else{
|
||||
return data
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
const money = new DC(this.transactionStore.saldo.amount || 0).toFixed(2);
|
||||
const uang = <NumberFormat value={money} displayType={'text'} thousandSeparator={true} prefix={'IDR '} />;
|
||||
const contentStyle = {margin: '0 16px'};
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<div className="col s12 m4 l4 row">
|
||||
<Card style={{backgroundColor: '#2196f3', minHeight: 245}} className="cardLite">
|
||||
<CardHeader
|
||||
style={{padding: '16px 16px 0',}}
|
||||
title={<h1 style={{fontSize: 22, fontWeight: '400', color: '#fff'}}>Wallet</h1>}
|
||||
/>
|
||||
<CardTitle style={{padding: '16px 16px 8px 16px'}}
|
||||
title={<h1 style={{fontSize: 38, fontWeight: "300", color: "#fff"}}>{uang}<span
|
||||
className="saldo-analytic-percentage" style={{fontSize: 18}}>{/*HERE*/}</span></h1>}
|
||||
subtitle={<span style={{fontSize: 16, fontWeight: 300, color: '#fff'}}><span style={{fontSize:24,fontWeight:'300'}}></span></span>}/>
|
||||
|
||||
<CardText style={{padding: "120px 0px 20px 0px", position: 'relative'}}>
|
||||
<Divider style={{marginBottom: 8, backgroundColor: '#3984c4'}}/>
|
||||
<span style={{fontSize: 16, fontWeight: 300, color: '#fff', paddingLeft: 16}}>Your Balance</span>
|
||||
<span style={{
|
||||
position: 'absolute',
|
||||
right: '16px',
|
||||
fontSize: 16,
|
||||
fontWeight: 400,
|
||||
paddingLeft: 16,
|
||||
color: "#fff"
|
||||
}}>{/**/}</span>
|
||||
</CardText>
|
||||
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
54
src/common/pages/Dashboard/SimpleAreaChart.js
Normal file
54
src/common/pages/Dashboard/SimpleAreaChart.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import * as React from 'react';
|
||||
import {inject, observer} from "mobx-react";
|
||||
|
||||
const {
|
||||
LineChart,
|
||||
AreaChart,
|
||||
BarChart,
|
||||
Bar,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
ReferenceLine,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Area,
|
||||
ResponsiveContainer
|
||||
} = require('recharts/umd/Recharts.min');
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class SimpleAreaChart extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.dashboardStore = props.appstate.dashboard;
|
||||
this.userData = props.appstate.userData;
|
||||
}
|
||||
render() {
|
||||
const data = [
|
||||
{name: 'Jan', uv: 4000, pv: 2400, amt: 2400},
|
||||
{name: 'Feb', uv: 3000, pv: 1398, amt: 2210},
|
||||
{name: 'Mar', uv: 2000, pv: 9800, amt: 2290},
|
||||
{name: 'Apr', uv: 2780, pv: 3908, amt: 2000},
|
||||
{name: 'May', uv: 1890, pv: 4800, amt: 2181},
|
||||
{name: 'Jun', uv: 2390, pv: 3800, amt: 2500},
|
||||
{name: 'Jul', uv: 3490, pv: 4300, amt: 2100},
|
||||
];
|
||||
return (
|
||||
<ResponsiveContainer>
|
||||
<LineChart width={600} height={(this.userData.role === 'admin') ? 305 : 220} data={data}
|
||||
margin={{top: 5, right: 30, left: 5, bottom: 5}}>
|
||||
<XAxis dataKey="name" fontSize={10}/>
|
||||
<YAxis fontSize={10} />
|
||||
<CartesianGrid strokeDasharray="0.1 0.1"/>
|
||||
<Tooltip/>
|
||||
<Legend />
|
||||
<Line type="natural" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
|
||||
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
506
src/common/pages/Dashboard/index.js
Normal file
506
src/common/pages/Dashboard/index.js
Normal file
@@ -0,0 +1,506 @@
|
||||
import React from "react";
|
||||
import {inject, observer} from "mobx-react";
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import "./style.scss";
|
||||
import NumberFormat from 'react-number-format';
|
||||
import {LINKS} from './../../routes'
|
||||
import {Link} from 'react-router-dom';
|
||||
import CardAdmin from './CardAdmin';
|
||||
import CardAgent from './CardAgent';
|
||||
import moment from 'moment';
|
||||
import {Icon, Button, notification, Table, Tooltip as TooltipAntd} from 'antd';
|
||||
import DC from 'decimal.js-light';
|
||||
import {
|
||||
Paper,
|
||||
Card,
|
||||
CardActions,
|
||||
CardHeader,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
CardText,
|
||||
FlatButton,
|
||||
GridList,
|
||||
GridTile,
|
||||
Divider, ListItem, List
|
||||
} from 'material-ui';
|
||||
import EmptyComponent from '../EmptyComponent';
|
||||
import * as _ from 'lodash';
|
||||
import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors';
|
||||
import './style.scss';
|
||||
import {Carousel} from 'react-responsive-carousel'
|
||||
import {ActionGrade, ContentDrafts, ContentInbox, ContentSend} from "material-ui/svg-icons/index";
|
||||
import {constant} from "../../config/const";
|
||||
|
||||
const {
|
||||
LineChart,
|
||||
AreaChart,
|
||||
BarChart,
|
||||
Bar,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
ReferenceLine,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Area,
|
||||
ResponsiveContainer
|
||||
} = require('recharts/umd/Recharts.min');
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class DashboardComponent extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
list: [],
|
||||
my_item: 0,
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this
|
||||
.globalUI
|
||||
.changeBackgroundColor("#f7f7f7");
|
||||
// .changeBackgroundColor("#208166");
|
||||
this.dashboardStore = props.appstate.dashboard;
|
||||
this.http = props.appstate.http;
|
||||
this.packageStore = props.appstate.packages;
|
||||
this.user = props.appstate.user;
|
||||
this.userData = props.appstate.userData;
|
||||
this.transactionStore = props.appstate.transaction;
|
||||
this.taskStore = props.appstate.task;
|
||||
this.myStoreItem = props.appstate.myStoreItem;
|
||||
this.orderStore = props.appstate.order;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.transactionStore.getAmount();
|
||||
this.dashboardStore.getData();
|
||||
this.packageStore.getAllPackages();
|
||||
if (this.userData.role === 'admin') {
|
||||
this.taskStore.getAllDeposit();
|
||||
} else {
|
||||
this.transactionStore.getAll();
|
||||
this.checkStatus();
|
||||
}
|
||||
this.myStoreItem.getAll().then(res => {
|
||||
this.setState({
|
||||
my_item: res.max
|
||||
});
|
||||
});
|
||||
this.globalUI.openLoading();
|
||||
this.orderStore.getAllOrder().then(res => {
|
||||
this.globalUI.closeLoading();
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this
|
||||
.globalUI
|
||||
.changeBackgroundColor("#fff");
|
||||
}
|
||||
|
||||
checkStatus = () => {
|
||||
this.transactionStore.list.map((item, index) => {
|
||||
if (item.status !== 'created') {
|
||||
this.state.list.push(item);
|
||||
} else {
|
||||
// return this.state.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
iniUntukstatus = (text) => {
|
||||
if(text == '') {
|
||||
<div><span className='status-pill smaller process'/><span>No Status</span></div>
|
||||
}
|
||||
else if(text == 'Finished'){
|
||||
return (<div><span className='status-pill smaller process'/><span>Finished</span></div>)
|
||||
}
|
||||
else if(text == 'Pending Payment'){
|
||||
return (<div><span className='status-pill smaller pending'/><span>Pending Payment</span></div>)
|
||||
}
|
||||
else{
|
||||
return (<div><span className='status-pill smaller'/><span>No Status</span></div>)
|
||||
}
|
||||
};
|
||||
|
||||
filterOrder =(it)=>{
|
||||
if(this.orderStore.filterBy === 'active'){
|
||||
return it.order_status_id === constant.ORDER_STATUSES.PREORDER_WAITING_STORE_RESPONSE || it.order_status_id === constant.ORDER_STATUSES.PROCESSING || it.order_status_id == constant.ORDER_STATUSES.ON_SHIPPING_RETRY;
|
||||
}
|
||||
else{
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const undeposit_fund = <NumberFormat value={new DC(this.transactionStore.wallet.pending_payment_to_wallet || 0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
|
||||
const balance = <NumberFormat value={new DC(this.transactionStore.wallet.balance || 0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
|
||||
const dataSource = [
|
||||
// this.orderStore.orderList.map((item, index) => (
|
||||
// {
|
||||
// key: item.order_id,
|
||||
// noOrder: item.order_id,
|
||||
// customer: item.user_orders.user.email,
|
||||
// date: item.order_id,
|
||||
// hours: '12:00',
|
||||
// items: item.order_id,
|
||||
// status: item.order_id,
|
||||
// total: item.order_id,
|
||||
// }
|
||||
// ))
|
||||
{
|
||||
key: '1',
|
||||
noOrder: '180801061774YSV',
|
||||
customer: 'Mike',
|
||||
date: 'Yesterday',
|
||||
hours: '13:00',
|
||||
items: 'Hannah dress',
|
||||
status: 'Processing',
|
||||
total: 'Rp200.000',
|
||||
}
|
||||
, {
|
||||
key: '2',
|
||||
noOrder: '180801061774YSV',
|
||||
customer: 'Mike',
|
||||
date: 'Yesterday',
|
||||
hours: '13:00',
|
||||
items: 'Hannah dress',
|
||||
status: 'Processing',
|
||||
total: 'Rp200.000',
|
||||
}, {
|
||||
key: '3',
|
||||
noOrder: '190801061774YSV',
|
||||
customer: 'Mike',
|
||||
date: 'Feb 16, 2018',
|
||||
hours: '10:00',
|
||||
items: '10 Downing',
|
||||
status: 'Processing',
|
||||
total: 'Rp200.000',
|
||||
}, {
|
||||
key: '4',
|
||||
noOrder: '200801061774YSV',
|
||||
customer: 'Mike',
|
||||
date: 'Feb 15, 2018',
|
||||
hours: '20:00',
|
||||
items: '10 Downing Street',
|
||||
status: 'Processing',
|
||||
total: 'Rp200.000',
|
||||
}
|
||||
]
|
||||
|
||||
const columns = [{
|
||||
title: 'Id',
|
||||
dataIndex: 'this.orderStore.orderList.id',
|
||||
key: 'this.orderStore.orderList.id',
|
||||
className: 'recentOrder-noOrder',
|
||||
render: (text, data) => <Link to={`${LINKS.ORDER}/${data.id}`}
|
||||
key={data.order_id}>{(data.id.split("-")[0])}</Link>,
|
||||
|
||||
},{
|
||||
title: 'Customer',
|
||||
dataIndex: 'user_orders.user.email',
|
||||
key: 'user_orders.user.email',
|
||||
className: 'recentOrder-noOrder',
|
||||
render: (text, data) => <span>{text}</span>
|
||||
}, {
|
||||
title: 'Date',
|
||||
key: 'created_at',
|
||||
className: 'recentOrder-date',
|
||||
render: (text) => (
|
||||
<div>
|
||||
<span>{moment(text.created_at).format('MMM DD, YYYY')}</span> <span className='smaller lighter'>{moment(text.created_at).format('hh:mm')}</span>
|
||||
</div>
|
||||
)
|
||||
}, {
|
||||
title: 'Status',
|
||||
dataIndex: 'this.orderStore.orderList.order_status.name',
|
||||
key: 'this.orderStore.orderList.order_status.name',
|
||||
className: 'recentOrder-status',
|
||||
render: (text, data) =>
|
||||
(data.order_status == null) ? "No Status" : <div><span
|
||||
className={((data.order_status.name) === 'Preorder Buyer Decline') ? 'status-pill smaller red' : (data.order_status.name === 'Processing') ? 'status-pill smaller process' : ' status-pill smaller pending'}/><span>{(data.order_status.name).split('Preorder')}</span>
|
||||
</div>
|
||||
|
||||
|
||||
}, {
|
||||
title: 'Total',
|
||||
dataIndex: 'user_orders.total',
|
||||
key: 'user_orders.total',
|
||||
className: 'recentOrder-customer',
|
||||
render: (text, data, value) => {
|
||||
return <NumberFormat style={{color: ((data.order_status.name) === 'Preorder Buyer Decline') ? 'red' : '#000'}} value={data.user_orders.total} displayType={'text'} thousandSeparator={true} prefix={'Rp. '} />
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="dashboard animated fadeIn">
|
||||
<div className="row ">
|
||||
<div className="col s12 m9 l9 col-leftDashboard" style={{marginBottom: 0}}>
|
||||
<div className="row element-wrapper no-margin">
|
||||
<div className='element-header'>
|
||||
<h3>Sales Dashboard</h3>
|
||||
</div>
|
||||
<div className="col s12 m4 l4" style={{marginBottom: 0}}>
|
||||
<Card className="cardLite cardDashboard">
|
||||
<h3 style={{
|
||||
display: 'block',
|
||||
fontSize: '.63rem',
|
||||
textTransform: 'uppercase',
|
||||
color: '#0006',
|
||||
letterSpacing: 1
|
||||
}}> Items Sold</h3>
|
||||
<div className="value">{this.dashboardStore.data.item_sold}</div>
|
||||
<div>
|
||||
<Link to={LINKS.ITEMS} className="btnFlatUnderline ">
|
||||
<span>View Detail</span>
|
||||
<Icon className="ml-8" type="right"/>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col s12 m4 l4" style={{marginBottom: 0}}>
|
||||
<Card className="cardLite cardDashboard">
|
||||
<h3 style={{
|
||||
display: 'block',
|
||||
fontSize: '.63rem',
|
||||
textTransform: 'uppercase',
|
||||
color: '#0006',
|
||||
letterSpacing: 1
|
||||
}}> Items</h3>
|
||||
<div className="value">{this.dashboardStore.data.item}</div>
|
||||
<div>
|
||||
<Link to={LINKS.ITEMS} className="btnFlatUnderline ">
|
||||
<span>View Items</span>
|
||||
<Icon className="ml-8" type="right"/>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col s12 m4 l4" style={{marginBottom: 0}}>
|
||||
<Card className="cardLite cardDashboard">
|
||||
<h3 style={{
|
||||
display: 'block',
|
||||
fontSize: '.63rem',
|
||||
textTransform: 'uppercase',
|
||||
color: '#0006',
|
||||
letterSpacing: 1
|
||||
}}> Process Order</h3>
|
||||
<div className="value oldGreeen">{this.dashboardStore.data.order}</div>
|
||||
<div>
|
||||
<Link to={LINKS.ORDER} className="btnFlatUnderline green">
|
||||
<span>View Order</span>
|
||||
<Icon className="ml-8" type="right"/>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row element-wrapper">
|
||||
|
||||
<div className='element-header'>
|
||||
<h3>Recent Order</h3>
|
||||
</div>
|
||||
<div className="col s12 m12 l12" style={{marginBottom: 0}}>
|
||||
<Table
|
||||
pagination={false}
|
||||
className='table-padded'
|
||||
dataSource={this.orderStore.orderList.filter(this.filterOrder).slice(0, 5)}
|
||||
columns={columns}
|
||||
onRow={(record) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
this.props.history.push(`${LINKS.ORDER}/${record.id}`);
|
||||
}, // click row
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*<Card className="cardLite" style={{marginBottom: (window.innerWidth < 600) ? 10 : 10, height: "auto"}}>*/}
|
||||
{/*<CardHeader*/}
|
||||
{/*title={<h1 style={{fontSize: 22, fontWeight: '400'}}>Revenue by services</h1>}/>*/}
|
||||
{/*<div style={{height: (this.userData.role === 'admin') ? "355px" : "237px", maxWidth: '100%'}}>*/}
|
||||
{/*<SimpleAreaChart/>*/}
|
||||
{/*</div>*/}
|
||||
{/*</Card>*/}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col s12 m3 l3 col-rightDashboard">
|
||||
<section className='row element-wrapper'>
|
||||
<div className='element-header'>
|
||||
<h3>Quick Links</h3>
|
||||
</div>
|
||||
<div className="col s12 m12 l12">
|
||||
<Button icon={"plus-circle-o"} className={'fullWidthButton btnSmCustom btnSmCustomWhite'}
|
||||
style={{marginBottom: '0.5rem'}} onClick={() => this.props.history.push(`${LINKS.FORM_UPLOAD}`)}>Create New Item</Button>
|
||||
<Button icon={"exception"} className={'fullWidthButton btnSmCustom btnSmCustomWhite'}
|
||||
style={{marginBottom: '0.5rem'}} onClick={() => this.props.history.push(`${LINKS.INBOX}`)}>Chat Inbox</Button>
|
||||
{this.props.appstate.userData.role === 'store' && <Button icon={"home"} className={'fullWidthButton btnSmCustom btnSmCustomWhite'}
|
||||
style={{marginBottom: '0.5rem'}} onClick={() => this.props.history.push(`${LINKS.STORES}`)}>Store Setting</Button>}
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div className='element-header'>
|
||||
<h3>Financial Overview</h3>
|
||||
</div>
|
||||
<div className="col s12 m12 l12">
|
||||
<Card className="cardLite cardDashboard">
|
||||
<h3 style={{
|
||||
display: 'block',
|
||||
fontSize: '.63rem',
|
||||
textTransform: 'uppercase',
|
||||
color: '#0006',
|
||||
letterSpacing: 1
|
||||
}}> Undeposited Funds <TooltipAntd title="Your store pending payment"><Icon
|
||||
style={{color: '#6772e5', fontSize: '.7rem'}} type="info-circle"/></TooltipAntd></h3>
|
||||
<div>
|
||||
<a className=" btnFlatUnderlineSingleBlack" style={{color:'#3E4B5B'}}>
|
||||
<span>{undeposit_fund}</span>
|
||||
{/*<Icon className="ml-8" type="right"/>*/}
|
||||
</a>
|
||||
</div>
|
||||
<Divider className='divider-financial'/>
|
||||
<h3 style={{
|
||||
display: 'block',
|
||||
fontSize: '.63rem',
|
||||
textTransform: 'uppercase',
|
||||
color: '#0006',
|
||||
letterSpacing: 1
|
||||
}}> Total Balance <TooltipAntd title="Your store total balance"><Icon
|
||||
style={{color: '#6772e5', fontSize: '.7rem'}} type="info-circle"/></TooltipAntd></h3>
|
||||
<div>
|
||||
<a className=" btnFlatUnderlineSingle">
|
||||
<span>{balance}</span>
|
||||
{/*<Icon className="ml-8" type="right"/>*/}
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/*{(this.userData.role === 'admin') ? <CardAdmin/> : <CardAgent/>}*/}
|
||||
</div>
|
||||
|
||||
|
||||
{/*<div className="row">*/}
|
||||
{/*<div className="col s12 m8 l8">*/}
|
||||
{/*<Card className="cardLite" style={{maxHeight: 400}}>*/}
|
||||
{/*{(!this.packageStore.isPackageEmpty) ?*/}
|
||||
{/*<Carousel showThumbs={true}*/}
|
||||
{/*autoPlay={true}*/}
|
||||
{/*dynamicHeight={true}*/}
|
||||
{/*infiniteLoop={true}*/}
|
||||
{/*showStatus={false}*/}
|
||||
{/*stopOnHover={true}*/}
|
||||
{/*showIndicators={false}>*/}
|
||||
{/*{this.packageStore.packagesList.map((tile, index) => (*/}
|
||||
{/*<Link key={index} to={{pathname: `${LINKS.SERVICE_PACKAGES}/${tile.id}`, query: {data: tile}}}>*/}
|
||||
{/*<CardMedia>*/}
|
||||
{/*<img src={this.http.appendImagePath(tile.banner)} style={{objectFit: "cover", height: 330}}/>*/}
|
||||
{/*<div className="legend">*/}
|
||||
{/*<h1>{tile.name} </h1>*/}
|
||||
{/*<p><NumberFormat value={tile.price} displayType={'text'} thousandSeparator={true}*/}
|
||||
{/*prefix={'IDR '}/></p>*/}
|
||||
{/*</div>*/}
|
||||
{/*</CardMedia>*/}
|
||||
{/*</Link>*/}
|
||||
{/*))}*/}
|
||||
{/*</Carousel>*/}
|
||||
{/*: <div></div>*/}
|
||||
{/*}*/}
|
||||
{/*</Card>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="col s12 m4 l4">*/}
|
||||
{/*<Card className="cardLite" style={{marginBottom: (window.innerWidth < 600) ? 10 : 10, height: "auto"}}>*/}
|
||||
{/*<CardHeader*/}
|
||||
{/*title={<h1 style={{fontSize: 22, fontWeight: '400'}}>Latest News</h1>}/>*/}
|
||||
{/*<List>*/}
|
||||
{/*<Divider/>*/}
|
||||
{/*{*/}
|
||||
{/*(this.userData.role === 'admin') ?*/}
|
||||
{/*(!this.taskStore.isEmpty) ?*/}
|
||||
{/*this.taskStore.tasks.slice(0, 5).map((item, index) => {*/}
|
||||
{/*return (item.type == 'deposit' || item.type == 'withdraw') ? (*/}
|
||||
{/*<Link to={`${LINKS.TASKS}/${item.transaction_id}`}>*/}
|
||||
{/*<ListItem*/}
|
||||
{/*// leftAvatar={<Avatar src="images/ok-128.jpg" />}*/}
|
||||
{/*primaryText={_.capitalize(item.type) + " Request"}*/}
|
||||
{/*secondaryText={*/}
|
||||
{/*<div>*/}
|
||||
{/*<p>*/}
|
||||
{/*<span style={{color: darkBlack}}>{item.user.username}</span> --*/}
|
||||
{/*<NumberFormat value={item.amount} displayType={'text'} thousandSeparator={true}*/}
|
||||
{/*prefix={'IDR '}/>*/}
|
||||
{/*</p>*/}
|
||||
{/*<p style={{fontSize: 10, color: black}}>{moment(item.created_at).fromNow()}</p>*/}
|
||||
{/*</div>*/}
|
||||
{/*}*/}
|
||||
{/*secondaryTextLines={2}*/}
|
||||
{/*/>*/}
|
||||
{/*</Link>*/}
|
||||
{/*) :*/}
|
||||
{/*(*/}
|
||||
{/*<Link to={`${LINKS.SERVICE_AIRLINES_REVIEW}/${item.id}`}>*/}
|
||||
{/*<ListItem*/}
|
||||
{/*// leftAvatar={<Avatar src="images/ok-128.jpg" />}*/}
|
||||
{/*primaryText={_.capitalize(item.type) + " Request"}*/}
|
||||
{/*secondaryText={*/}
|
||||
{/*<div>*/}
|
||||
{/*<p>*/}
|
||||
{/*<span style={{color: darkBlack}}>{item.customer.name}</span>*/}
|
||||
{/*-- {item.request_data.selectedDepartureFlight.fromcity}*/}
|
||||
{/*TO {item.request_data.selectedDepartureFlight.tocity}*/}
|
||||
{/*</p>*/}
|
||||
{/*<p style={{fontSize: 10, color: black}}>{moment(item.created_at).fromNow()}</p>*/}
|
||||
{/*</div>*/}
|
||||
{/*}*/}
|
||||
{/*secondaryTextLines={2}*/}
|
||||
{/*/>*/}
|
||||
{/*</Link>*/}
|
||||
{/*);*/}
|
||||
{/*}) : <EmptyComponent width="" image="default4" type="empty" header="" content="No News yet."/>*/}
|
||||
{/*:*/}
|
||||
{/*(this.state.list.length > 0) ?*/}
|
||||
{/*this.state.list.slice(0, 5).map((item, index) => {*/}
|
||||
{/*return (*/}
|
||||
{/*<ListItem*/}
|
||||
{/*primaryText={`Your ${_.capitalize(item.type.name)} Request Has Been ${_.capitalize(item.status)}`}*/}
|
||||
{/*secondaryText={*/}
|
||||
{/*<Link*/}
|
||||
{/*to={`${LINKS.WALLET}/${item.id}`}*/}
|
||||
{/*>*/}
|
||||
{/*<p>*/}
|
||||
{/*<span style={{color: darkBlack}}>{_.capitalize(item.type.name)}</span> --*/}
|
||||
{/*<NumberFormat value={item.amount} displayType={'text'} thousandSeparator={true}*/}
|
||||
{/*prefix={'IDR '}/>*/}
|
||||
{/*</p>*/}
|
||||
{/*<p style={{fontSize: 10, color: black}}>{moment(item.updated_at).fromNow()}</p>*/}
|
||||
{/*</Link>*/}
|
||||
{/*}*/}
|
||||
{/*/>*/}
|
||||
{/*);*/}
|
||||
{/*}) : <EmptyComponent width="" image="default4" type="empty" header="" content="No News yet."/>*/}
|
||||
{/*}*/}
|
||||
{/*</List>*/}
|
||||
{/*<Divider/>*/}
|
||||
{/*</Card>*/}
|
||||
{/*</div>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
213
src/common/pages/Dashboard/style.scss
Normal file
213
src/common/pages/Dashboard/style.scss
Normal file
@@ -0,0 +1,213 @@
|
||||
.dashboard {
|
||||
margin-top: 35px;
|
||||
.container {
|
||||
padding: 25px;
|
||||
.ant-card {
|
||||
background: #fff;
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all .3s;
|
||||
}
|
||||
.ant-card-head {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: #fff;
|
||||
border-bottom: 0 solid #e9e9e9;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.ant-card:hover {
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: transparent;
|
||||
}
|
||||
.ant-card-body-dashboard {
|
||||
padding: 10px;
|
||||
}
|
||||
.ant-table-pagination {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.paddingLeft20 {
|
||||
padding-left: 25px;
|
||||
}
|
||||
.overlay-performance {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.overlay-task {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 247px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
z-index: 99;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.overlay-performance h3 {
|
||||
font-size: 20px;
|
||||
color: #565656;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.overlay-task h3 {
|
||||
font-size: 18px;
|
||||
color: #565656;;
|
||||
font-weight: 300;
|
||||
}
|
||||
span.saldo-analytic-percentage {
|
||||
position: absolute !important;
|
||||
right: 16px !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
.cardDashboard {
|
||||
padding: 1.5rem 2rem;
|
||||
margin-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cardDashboard:hover {
|
||||
-webkit-transform: translateY(-5px) scale(1.02);
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
-webkit-box-shadow: 0 5px 12px rgba(126,142,177,0.2);
|
||||
box-shadow: 0 5px 12px rgba(126,142,177,0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.value {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.2;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.element-header {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .05);
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btnSmCustom {
|
||||
padding: .25rem .5rem;
|
||||
font-size: .775rem;
|
||||
border-radius: 4px;
|
||||
color: #292b2c;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btnFlatUnderline, .btnFlatUnderlineSingleBlack, .btnFlatUnderlineSingle {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btnFlatUnderline span {
|
||||
border-bottom: 2px solid #6772e5;
|
||||
}
|
||||
|
||||
.btnFlatUnderlineSingleBlack {
|
||||
border-bottom: 1px solid #3E4B5B;
|
||||
padding-bottom: 0.15em;
|
||||
}
|
||||
|
||||
.btnFlatUnderlineSingle {
|
||||
border-bottom: 1px solid #6772e5;
|
||||
padding-bottom: 0.15em;
|
||||
}
|
||||
|
||||
.gold span {
|
||||
border-bottom: 2px solid #BE8B1C;
|
||||
}
|
||||
|
||||
.green span {
|
||||
border-bottom: 2px solid #008000;
|
||||
}
|
||||
|
||||
.green:hover {
|
||||
color: #5d961f;
|
||||
}
|
||||
|
||||
.green:hover span {
|
||||
border-bottom: 2px solid #5d961f;
|
||||
}
|
||||
|
||||
.btnFlatUnderline i {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btnFlatUnderline:hover i {
|
||||
transform: translateX(5px);
|
||||
|
||||
}
|
||||
|
||||
.btnSmCustomWhite {
|
||||
color: #292b2c;
|
||||
background-color: #fff;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.btnSmCustomWhite:hover {
|
||||
color: #292b2c;
|
||||
background-color: #ececec;
|
||||
border: 2px solid #e6e5e5;
|
||||
}
|
||||
|
||||
.element-wrapper {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.element-wrapper-row {
|
||||
padding-bottom: 2.1rem;
|
||||
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 30px;
|
||||
background-color: #eee;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.table-padded .smaller {
|
||||
font-size: .72rem;
|
||||
}
|
||||
|
||||
.table-padded .lighter {
|
||||
color: rgba(90, 99, 126, .49);
|
||||
}
|
||||
|
||||
.status-pill.smaller {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.status-pill.pending {
|
||||
background-color: #f8bc34;
|
||||
}
|
||||
|
||||
.status-pill.process {
|
||||
background-color: #71c21a;
|
||||
}
|
||||
|
||||
.divider-financial {
|
||||
margin: 18px 0 18px !important;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user