feat : new dependency, update : dashboard
This commit is contained in:
72
src/common/pages/Dashboard/PopularItemCard.js
Normal file
72
src/common/pages/Dashboard/PopularItemCard.js
Normal file
@@ -0,0 +1,72 @@
|
||||
import React, { Component } from "react";
|
||||
import Slider from "react-slick";
|
||||
|
||||
export default class Responsive extends Component {
|
||||
render() {
|
||||
var settings = {
|
||||
dots: true,
|
||||
infinite: false,
|
||||
speed: 500,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
initialSlide: 0,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
infinite: true,
|
||||
dots: true
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
initialSlide: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<h2> Responsive </h2>
|
||||
<Slider {...settings}>
|
||||
<div>
|
||||
<h3>1</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>2</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>3</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>4</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>5</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>6</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>7</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>8</h3>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,7 @@ 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 {Icon, Button, notification, Table, Tooltip as TooltipAntd, Col, Row} from 'antd';
|
||||
import DC from 'decimal.js-light';
|
||||
import {
|
||||
Paper,
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
GridTile,
|
||||
Divider, ListItem, List
|
||||
} from 'material-ui';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import EmptyComponent from '../EmptyComponent';
|
||||
import * as _ from 'lodash';
|
||||
import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors';
|
||||
@@ -30,6 +31,18 @@ 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";
|
||||
import Slider from "react-slick";
|
||||
import 'slick-carousel/slick/slick.css';
|
||||
import 'slick-carousel/slick/slick-theme.css';
|
||||
import VoucherComponent from '../Vouchers/index';
|
||||
import slider1 from '../../../../assets/images/slider/1.jpg';
|
||||
import slider2 from '../../../../assets/images/slider/2.jpg';
|
||||
import slider3 from '../../../../assets/images/slider/3.jpg';
|
||||
import slider4 from '../../../../assets/images/slider/4.jpg';
|
||||
import slider5 from '../../../../assets/images/slider/5.jpg';
|
||||
import {ItemCard} from "../Vouchers/ItemCard";
|
||||
import ModalVouchersComponent from "../Vouchers/Modal";
|
||||
import '../Vouchers/style.scss';
|
||||
|
||||
const {
|
||||
LineChart,
|
||||
@@ -51,456 +64,286 @@ const {
|
||||
@observer
|
||||
export default class DashboardComponent extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
list: [],
|
||||
my_item: 0,
|
||||
isOpened: false,
|
||||
data: {
|
||||
name: '',
|
||||
image: '',
|
||||
description: '',
|
||||
additional_information: '',
|
||||
background_color: '',
|
||||
option: [
|
||||
{
|
||||
value: '',
|
||||
cost: ''
|
||||
},
|
||||
]
|
||||
},
|
||||
};
|
||||
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();
|
||||
});
|
||||
componentDidMount(){
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this
|
||||
.globalUI
|
||||
.changeBackgroundColor("#fff");
|
||||
}
|
||||
render(){
|
||||
const settings = {
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
speed: 500,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
fade: true
|
||||
};
|
||||
|
||||
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,
|
||||
// }
|
||||
// ))
|
||||
const data = [
|
||||
{
|
||||
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',
|
||||
}
|
||||
]
|
||||
name: 'KFC',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
|
||||
description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini.',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '50 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
{
|
||||
value: 'Super Besar 1',
|
||||
cost: '34 Points'
|
||||
},
|
||||
{
|
||||
value: 'Super Besar 2',
|
||||
cost: '49 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Grab',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/grab_150px_74px.png',
|
||||
description: 'Grab adalah platform transportasi terkemuka di Asia Tenggara. Kami percaya setiap orang harus bisa pergi ke mana saja dan percaya bahwa mereka dapat memesan perjalanan yang aman.',
|
||||
additional_information: 'Voucher ini berlaku hingga 28 Februari 2019. Voucher ini hanya bisa digunakan untuk layanan GrabCar, GrabBike, dan GrabExpress. ',
|
||||
background_color: 'linear-gradient(rgb(0, 174, 66), rgb(0, 93, 36))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 10.000',
|
||||
cost: '10 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 20.000',
|
||||
cost: '20 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '50 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'OYO Hotel',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/oyo_150px_74px.png',
|
||||
description: 'OYO Hotel adalah jaringan hotel terbesar di Asia Selatan dan terdapat di 11 negara dengan lebih dari 12,000 hotel tersebar di seluruh dunia.',
|
||||
additional_information: 'Voucher ini berlaku hingga 31 Januari 2019.',
|
||||
background_color: 'linear-gradient(rgb(253, 234, 225), rgb(255, 138, 98))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 75.000',
|
||||
cost: '25 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Carrefour',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/carrefour_150px_74px.png',
|
||||
description: 'Carrefour membantu semua orang agar dapat menikmati kualitas hidup yang lebih baik setiap harinya. Menyediakan berbagai kebutuhan harian sekaligus bulanan, sebagai tujuan utama berbelanja keluarga dengan memberikan pelayanan dan produk berkualitas dimanapun dan kapanpun.',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(236, 249, 250), rgb(73, 176, 228))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 200.000',
|
||||
cost: '200 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Domino's Pizza",
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/dominos_150px_74px.png',
|
||||
description: "Domino's Pizza adalah pemimpin Pizza delivery di dunia. Dengan 130 toko yang tersebar di Jabodetabek, Bali, Bandung, Serang, dan Sukabumi, Domino’s menyajikan pizza paling lezat dengan harga terbaik untuk jutaan pelanggan. Domino’s juga mengantarkan pizza hangat dengan jaminan 30 menit sampai.",
|
||||
additional_information: "Voucher ini berlaku hingga 29 hari setelah pembelian",
|
||||
background_color: 'linear-gradient(rgb(11, 110, 174), rgb(2, 61, 96))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '90 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 200.000',
|
||||
cost: '180 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Timezone',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/new-timezone_150px_74px.png',
|
||||
description: 'Timezone merupakan tempat permainan semua keluarga di Indonesia. Beragam permainan menarik yang disediakan untuk memberikan pengalaman yang menyenangkan bagi setiap pengunjung. Selain permainan – permainan yang cukup menarik dan sensasi berbeda, pengunjung yang hadir ke Timezone juga berkesempatan mendapatkan hadiah-hadiah menarik dari mesin-mesin yang dimainkan ataupun souvenir, boneka dari tiket yang ditukarkan',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(255, 118, 90), rgb(255, 40, 12))',
|
||||
option: [
|
||||
{
|
||||
value: 'Value Voucher Rp 200.000 (Saldo Rp 150.000 & Free Games Rp 50.000)',
|
||||
cost: '135 Points'
|
||||
},
|
||||
{
|
||||
value: 'Value Voucher Rp 500.000 (Saldo Rp 300.000 & Free Games Rp 200.000)',
|
||||
cost: '285 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Bakmi GM',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/bakmigm_150px_74px.png',
|
||||
description: 'BAKMI GM dirancang khusus untuk memberikan rasa yang lezat, yang dibuat dari bahan baku pilihan dan disajikan dengan harga yang ekonomis. Tersedia lebih dari 50 menu yang dapat dipilih oleh pelanggan, dengan menu Bakmi Special GM dan Pangsit Goreng yang menjadi favorit pelanggan.',
|
||||
additional_information: 'Voucher ini berlaku hingga 11 Januari 2019.',
|
||||
background_color: 'linear-gradient(rgb(254, 239, 73), rgb(241, 186, 54))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '47 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '94 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'CFC',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/cfc_150px_74px.png',
|
||||
description: 'CFC merupakan salah satu brand fast food yang tersebar di berbagai daerah di Indonesia. CFC menyediakan berbagai menu makanan dan minuman yang praktis dan bervariasi sesuai dengan selera keluarga Indonesia. Mulai dari berbagai menu berbahan dasar ayam seperti : Crispy Fried Chicken, Chicken Strips, Chicken Pop, Chicken Burger, Ayam Geprek, hingga Nasi Goreng, Spaghetti, Ice blended, Calblend Float, dan masih banyak lagi.',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian. Maksimal penggunaan 3 e-Voucher dalam 1 kali transaksi',
|
||||
background_color: 'linear-gradient(rgb(255, 255, 255), rgb(192, 192, 192))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '44 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
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) => (
|
||||
return(
|
||||
<div style={{marginLeft:'10%',marginRight:'10%',marginTop:20,flexGrow:1, minHeight:window.innerHeight-70, backgroundColor:'#fff'}}>
|
||||
<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>
|
||||
<Slider {...settings}>
|
||||
<div>
|
||||
<img src={slider1} width={'100%'} />
|
||||
</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>
|
||||
<img src={slider2} width={'100%'} />
|
||||
</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>
|
||||
<img src={slider3} width={'100%'} />
|
||||
</div>
|
||||
<div>
|
||||
<img src={slider4} width={'100%'} />
|
||||
</div>
|
||||
<div>
|
||||
<img src={slider5} width={'100%'} />
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Grid container spacing={0} style={{}}>
|
||||
<Grid item xs={12}>
|
||||
<div className="voucher">
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12 padding">
|
||||
<p className={'pageTitle'}>
|
||||
Popular Items
|
||||
</p>
|
||||
|
||||
{/*<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>*/}
|
||||
<Row gutter={10}>
|
||||
{data.map((item, index) => {
|
||||
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
|
||||
<ItemCard data={item}/>
|
||||
</Col>)
|
||||
})}
|
||||
</Row>
|
||||
|
||||
<ModalVouchersComponent
|
||||
title={this.state.data.name+' Vouchers'}
|
||||
data={this.state.data}
|
||||
isVisible={this.state.isOpened}
|
||||
onOk={() => this.setState({isOpened: false})}
|
||||
onCancel={() => this.setState({isOpened: false})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<div className="voucher">
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12 padding">
|
||||
<p className={'pageTitle'}>
|
||||
Voucher & Gift Card
|
||||
</p>
|
||||
|
||||
<Row gutter={10}>
|
||||
{data.map((item, index) => {
|
||||
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
|
||||
<ItemCard data={item}/>
|
||||
</Col>)
|
||||
})}
|
||||
</Row>
|
||||
|
||||
<ModalVouchersComponent
|
||||
title={this.state.data.name+' Vouchers'}
|
||||
data={this.state.data}
|
||||
isVisible={this.state.isOpened}
|
||||
onOk={() => this.setState({isOpened: false})}
|
||||
onCancel={() => this.setState({isOpened: false})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Paper>xs=12 sm=6</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Paper>xs=12 sm=6</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Paper>xs=3 sm=3</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Paper>xs=3 sm=3</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Paper>xs=3 sm=3</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Paper>xs=3 sm=3</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user