291 lines
9.9 KiB
JavaScript
291 lines
9.9 KiB
JavaScript
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, Col, Row, } 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 Grid from '@material-ui/core/Grid';
|
|
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";
|
|
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 PopularItemCardComponent from "./PopularItemCard";
|
|
import NewItemCardComponent from "./NewItemCard";
|
|
import '../Vouchers/style.scss';
|
|
import ModalTopupComponent from "../Wallet/Modal";
|
|
|
|
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.state = {
|
|
isOpened: false,
|
|
modalTopup: false,
|
|
data: {
|
|
name: '',
|
|
background_color_1:'',
|
|
background_color_2:'',
|
|
images: {
|
|
logo:''
|
|
},
|
|
description: '',
|
|
additional_data: {
|
|
information:''
|
|
},
|
|
sku: [
|
|
{
|
|
id:'',
|
|
name: '',
|
|
price: ''
|
|
},
|
|
]
|
|
},
|
|
};
|
|
this.vouchersStore = props.appstate.vouchers;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.vouchersStore.getList();
|
|
}
|
|
|
|
setModalTopup = (bool) => {
|
|
this.setState({modalTopup: bool});
|
|
};
|
|
|
|
render() {
|
|
const settings = {
|
|
arrows: true,
|
|
infinite: true,
|
|
speed: 500,
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
fade: true
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="dashboard animated fadeIn" style={{marginLeft: '8%',marginRight:'7%'}}>
|
|
<div className="row ">
|
|
<div className="col s12 m12 l12 col-leftDashboard" style={{ marginBottom: 0 }}>
|
|
<div className="row no-margin">
|
|
{this.props.appstate.wallet.data.wallet ? (
|
|
<div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
|
|
<Card className="cardLite cardDashboard">
|
|
<h3 style={{
|
|
display: 'block',
|
|
fontSize: '1rem',
|
|
textTransform: 'uppercase',
|
|
color: '#0006',
|
|
letterSpacing: 1
|
|
}}>Voucher</h3>
|
|
<div className="value">
|
|
{/* <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> */}
|
|
<NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
|
|
</div>
|
|
<div style={{marginTop:10}}>
|
|
<Button type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</Button>
|
|
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
|
|
<span>Add Voucher</span>
|
|
<Icon className="ml-8" type="right" />
|
|
</a> */}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
) : ''}
|
|
|
|
{this.props.appstate.wallet.data.wallet ? (
|
|
<div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
|
|
<Card className="cardLite cardDashboard">
|
|
<h3 style={{
|
|
display: 'block',
|
|
fontSize: '1rem',
|
|
textTransform: 'uppercase',
|
|
color: '#0006',
|
|
letterSpacing: 1
|
|
}}> Profile</h3>
|
|
<div className="value">Please complete your profile</div>
|
|
<div style={{marginTop:10}}>
|
|
<Button type="primary" icon="edit">Edit Profile</Button>
|
|
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
|
|
<span>Edit Profile</span>
|
|
<Icon className="ml-8" type="right" />
|
|
</a> */}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
) : ''}
|
|
|
|
|
|
{this.props.appstate.wallet.data.wallet ? (
|
|
<div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
|
|
<Card className="cardLite cardDashboard">
|
|
<h3 style={{
|
|
display: 'block',
|
|
fontSize: '1rem',
|
|
textTransform: 'uppercase',
|
|
color: '#0006',
|
|
letterSpacing: 1
|
|
}}>Credit Card</h3>
|
|
<div className="value ">Please add your credit card</div>
|
|
<div style={{marginTop:10}}>
|
|
<Button type="primary" icon="plus">Add Credit Card</Button>
|
|
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
|
|
<span>Add Credit Car</span>
|
|
<Icon className="ml-8" type="right" />
|
|
</a> */}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
) : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style={{ marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff' }}>
|
|
<div>
|
|
<Slider {...settings}>
|
|
<div>
|
|
<img src={slider1} width={'100%'} />
|
|
</div>
|
|
<div>
|
|
<img src={slider2} width={'100%'} />
|
|
</div>
|
|
<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>
|
|
<div className="row">
|
|
<div className="col l12 m12 s12 padding">
|
|
<h3>
|
|
Popular Items
|
|
</h3>
|
|
<Row gutter={10}>
|
|
<PopularItemCardComponent />
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<div>
|
|
<div className="row">
|
|
<div className="col l12 m12 s12 padding">
|
|
<h3>
|
|
New Products
|
|
</h3>
|
|
<Row gutter={10}>
|
|
<NewItemCardComponent />
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Grid> */}
|
|
<Grid item xs={12}>
|
|
<div className={"voucher"} style={{ marginTop: 0 }}>
|
|
<div className="row">
|
|
<div className="col l12 m12 s12 padding">
|
|
<h3>
|
|
Voucher & Gift Card
|
|
</h3>
|
|
|
|
<Row gutter={10}>
|
|
{
|
|
( this.vouchersStore.list.length > 0) ?
|
|
this.vouchersStore.list.map((item, index) => {
|
|
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
|
|
<ItemCard data={item}/>
|
|
</Col>)
|
|
})
|
|
: (
|
|
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
|
|
)
|
|
}
|
|
</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>
|
|
</div>
|
|
</div>
|
|
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
|
|
</div>
|
|
);
|
|
}
|
|
}
|