375 lines
14 KiB
JavaScript
375 lines
14 KiB
JavaScript
import React from 'react';
|
|
import {observer, inject} from 'mobx-react';
|
|
import bind from 'bind-decorator';
|
|
import {
|
|
Card,
|
|
CardActions,
|
|
CardHeader,
|
|
CardMedia,
|
|
CardTitle,
|
|
AutoComplete,
|
|
CardText,
|
|
FlatButton,
|
|
Divider,
|
|
Tabs, Tab,
|
|
RaisedButton,
|
|
Toolbar,
|
|
DatePicker,
|
|
FontIcon,
|
|
Table,
|
|
TableBody,
|
|
TableHeader,
|
|
TableHeaderColumn,
|
|
TableRow,
|
|
TableRowColumn,
|
|
MenuItem,
|
|
ToolbarGroup,
|
|
FloatingActionButton,
|
|
ToolbarSeparator,
|
|
IconButton,
|
|
ToolbarTitle,
|
|
RadioButton,
|
|
TextField,
|
|
Paper,
|
|
RadioButtonGroup
|
|
} from 'material-ui';
|
|
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
|
|
import SwipeableViews from 'react-swipeable-views';
|
|
import SearchIcon from 'material-ui/svg-icons/action/search';
|
|
import AddIcon from 'material-ui/svg-icons/content/add';
|
|
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
|
import NavigationCancel from 'material-ui/svg-icons/navigation/cancel';
|
|
import CommunicationNoSim from 'material-ui/svg-icons/communication/no-sim';
|
|
|
|
import '../style.scss';
|
|
import {appConfig} from "../../../config/app";
|
|
import {DIALOG} from "../../../stores/global_ui";
|
|
import {LINKS} from "../../../routes";
|
|
import {Link} from "react-router-dom";
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
export default class WalletCustomerDetail extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {
|
|
value: 1,
|
|
searchText: '',
|
|
slideIndex: 0
|
|
};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
this.http = props.appstate.http;
|
|
this.authStore = props.appstate.auth;
|
|
}
|
|
|
|
componentDidMount() {
|
|
console.log('Profile loaded!');
|
|
|
|
}
|
|
|
|
handleUpdateInput = (searchText) => {
|
|
this.setState({
|
|
searchText: searchText,
|
|
});
|
|
};
|
|
|
|
handleNewRequest = () => {
|
|
this.setState({
|
|
searchText: '',
|
|
});
|
|
};
|
|
|
|
tabsHandleChange = (value) => {
|
|
this.setState({
|
|
slideIndex: value,
|
|
});
|
|
};
|
|
|
|
handleChange = (event, index, value) => this.setState({value});
|
|
|
|
render() {
|
|
const styles = {
|
|
|
|
radioButton: {
|
|
marginBottom: 16,
|
|
},
|
|
};
|
|
|
|
const colors = [
|
|
'Jakarta - Soekarno - Hatta (CGK)',
|
|
'Bali',
|
|
'Surabaya',
|
|
'Yogyakarta',
|
|
'Aceh',
|
|
'Kalimantan',
|
|
'Medan',
|
|
'Papua',
|
|
];
|
|
|
|
const items = [
|
|
<MenuItem key={1} value={1} primaryText="All Maskapai"/>,
|
|
<MenuItem key={2} value={2} primaryText="Air Asia"/>,
|
|
<MenuItem key={3} value={3} primaryText="Weeknights"/>,
|
|
<MenuItem key={4} value={4} primaryText="Weekends"/>,
|
|
<MenuItem key={5} value={5} primaryText="Weekly"/>,
|
|
];
|
|
|
|
const count = [
|
|
<MenuItem key={1} value={1} primaryText="1"/>,
|
|
<MenuItem key={2} value={2} primaryText="2"/>,
|
|
<MenuItem key={3} value={3} primaryText="3"/>,
|
|
<MenuItem key={4} value={4} primaryText="4"/>,
|
|
<MenuItem key={5} value={5} primaryText="5"/>,
|
|
];
|
|
|
|
return (
|
|
<div className="customerDetail containerMiddle animated fadeIn">
|
|
<div style={{marginBottom: '10px', marginLeft: '-15px'}}>
|
|
<FlatButton
|
|
className="headerMenu"
|
|
inkBarStyle={{background: 'transparent'}}
|
|
hoverColor="#f1f5f9"
|
|
style={{background: '#ffffff00'}}
|
|
onClick={() => this.props.history.goBack()}
|
|
label="Back"
|
|
primary={true}
|
|
icon={<NavigationArrowBack/>}
|
|
/>
|
|
</div>
|
|
|
|
<Card className="row">
|
|
|
|
<div className="flexSpaceBetween" style={{padding: 16}}>
|
|
<div className="">
|
|
<CardTitle style={{padding: 0, fontSize: 22}}
|
|
titleStyle={{fontSize: 22}}
|
|
title="Transaction #1827381"
|
|
/>
|
|
<div className="listCustDetail">
|
|
<div className="listHeaderCustDetailItem flex">
|
|
<p className="listHeaderCustomerDetailItemKey">Type</p>
|
|
<p className="listHeaderCustomerDetailItemValue"><code>Package Down Payment</code></p>
|
|
</div>
|
|
<div className="listHeaderCustDetailItem flex">
|
|
<p className="listHeaderCustomerDetailItemKey">Date</p>
|
|
<p className="listHeaderCustomerDetailItemValue">10 October 2017</p>
|
|
</div>
|
|
<div className="listHeaderCustDetailItem flex">
|
|
<p className="listHeaderCustomerDetailItemKey">To</p>
|
|
<p className="listHeaderCustomerDetailItemValue">Agent #6767567</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ToolbarGroup>
|
|
<IconButton tooltip="Cancel">
|
|
<NavigationCancel />
|
|
</IconButton>
|
|
<IconButton tooltip="Void">
|
|
<CommunicationNoSim />
|
|
</IconButton>
|
|
</ToolbarGroup>
|
|
</div>
|
|
<Divider/>
|
|
{/*<CardHeader actAsExpander={true}*/}
|
|
{/*showExpandableButton={false} style={{paddingBottom: 0}}*/}
|
|
{/*subtitle={<a style={{fontSize: 12}}>CUSTOMER INFORMATION</a>}/>*/}
|
|
{/*<CardText expandable={true} style={{paddingBottom:0}}>*/}
|
|
{/*<div className="row no-margin">*/}
|
|
{/*<div className="col l6">*/}
|
|
{/*<div className="listCustDetail">*/}
|
|
{/*<div className="listCustDetailItem flex">*/}
|
|
{/*<p className="listCustomerDetailItemKey">Name</p>*/}
|
|
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
|
{/*</div>*/}
|
|
{/*<div className="listCustDetailItem flex">*/}
|
|
{/*<p className="listCustomerDetailItemKey">Identity Number</p>*/}
|
|
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
|
{/*</div>*/}
|
|
{/*<div className="listCustDetailItem flex">*/}
|
|
{/*<p className="listCustomerDetailItemKey">Email</p>*/}
|
|
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
|
{/*</div>*/}
|
|
{/*<div className="listCustDetailItem flex">*/}
|
|
{/*<p className="listCustomerDetailItemKey">Address</p>*/}
|
|
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
|
{/*</div>*/}
|
|
{/*<div className="listCustDetailItem flex">*/}
|
|
{/*<p className="listCustomerDetailItemKey">Phone</p>*/}
|
|
{/*<p*/}
|
|
{/*className="listCustomerDetailItemValue"></p>*/}
|
|
{/*</div>*/}
|
|
{/*<div className="listCustDetailItem flex">*/}
|
|
{/*<p className="listCustomerDetailItemKey">Handphone</p>*/}
|
|
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
|
{/*</div>*/}
|
|
|
|
{/*</div>*/}
|
|
|
|
{/*</div>*/}
|
|
|
|
{/*<div className="col l6">*/}
|
|
{/*<div className="listCustDetail">*/}
|
|
{/*<div className="listCustDetailItem flex">*/}
|
|
{/*<p className="listCustomerDetailItemKey">Place & Birth Date</p>*/}
|
|
{/*<p className="listCustomerDetailItemValue">, </p>*/}
|
|
{/*</div>*/}
|
|
{/*<div className="listCustDetailItem flex">*/}
|
|
{/*<p className="listCustomerDetailItemKey">Gender</p>*/}
|
|
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
|
{/*</div>*/}
|
|
{/*<div className="listCustDetailItem flex">*/}
|
|
{/*<p className="listCustomerDetailItemKey">Tax Id</p>*/}
|
|
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
|
{/*</div>*/}
|
|
{/*<div className="listCustDetailItem flex">*/}
|
|
{/*<p className="listCustomerDetailItemKey">Martial Status</p>*/}
|
|
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
|
{/*</div>*/}
|
|
{/*</div>*/}
|
|
|
|
{/*</div>*/}
|
|
|
|
{/*</div>*/}
|
|
{/*</CardText>*/}
|
|
|
|
|
|
<div style={{marginTop: 0}}>
|
|
<Table selectable={false}>
|
|
<TableHeader displaySelectAll={false}
|
|
adjustForCheckbox={false}
|
|
enableSelectAll={false}>
|
|
<TableRow style={{height: 38, background: '#f6f9fc'}}>
|
|
|
|
<TableHeaderColumn className="TableHeaderColumnAkun"
|
|
style={{height: 'auto'}}>Description</TableHeaderColumn>
|
|
<TableHeaderColumn className="TableHeaderColumnAkun"
|
|
style={{height: 'auto'}}>Qty</TableHeaderColumn>
|
|
<TableHeaderColumn className="TableHeaderColumnAkun"
|
|
style={{height: 'auto'}}>Price</TableHeaderColumn>
|
|
<TableHeaderColumn className="TableHeaderColumnAkun"
|
|
style={{height: 'auto'}}>Discount</TableHeaderColumn>
|
|
<TableHeaderColumn className="TableHeaderColumnAkun"
|
|
style={{height: 'auto'}}>Amount</TableHeaderColumn>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody displayRowCheckbox={false}>
|
|
|
|
<TableRow>
|
|
<TableRowColumn>Package #92839 Payment</TableRowColumn>
|
|
<TableRowColumn>1</TableRowColumn>
|
|
<TableRowColumn>2.000.000</TableRowColumn>
|
|
<TableRowColumn>500.000</TableRowColumn>
|
|
<TableRowColumn>1.500.000</TableRowColumn>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableRowColumn>Package #92839 Payment</TableRowColumn>
|
|
<TableRowColumn>1</TableRowColumn>
|
|
<TableRowColumn>2.000.000</TableRowColumn>
|
|
<TableRowColumn>500.000</TableRowColumn>
|
|
<TableRowColumn>1.500.000</TableRowColumn>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableRowColumn></TableRowColumn>
|
|
<TableRowColumn></TableRowColumn>
|
|
<TableRowColumn></TableRowColumn>
|
|
<TableRowColumn><b>Total</b></TableRowColumn>
|
|
<TableRowColumn><b>3.000.000</b></TableRowColumn>
|
|
</TableRow>
|
|
|
|
{/*<TableRow>*/}
|
|
{/*<TableRowColumn><p style={{margin:'2px 0', fontSize:10}}>Detail: <Link to={LINKS.SERVICE} target="_blank">View details</Link></p>*/}
|
|
{/*{order.detail_package.map((deta) => {*/}
|
|
{/*return (*/}
|
|
{/*<p key={deta.name}>{deta.name} - {deta.value}</p>*/}
|
|
{/*)*/}
|
|
{/*})}*/}
|
|
|
|
{/*</TableRowColumn>*/}
|
|
{/*<TableRowColumn></TableRowColumn>*/}
|
|
{/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
|
|
{/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
|
|
{/*</TableRow>*/}
|
|
{/*<TableRow>*/}
|
|
{/*<TableRowColumn colSpan={2} ></TableRowColumn>*/}
|
|
{/*<TableRowColumn className="align-right" >Subtotal</TableRowColumn>*/}
|
|
{/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
|
|
{/*</TableRow>*/}
|
|
{/*<TableRow>*/}
|
|
{/*<TableRowColumn>Discount</TableRowColumn>*/}
|
|
{/*<TableRowColumn>0.00</TableRowColumn>*/}
|
|
{/*</TableRow>*/}
|
|
{/*<TableRow>*/}
|
|
{/*<TableRowColumn>Total (IDR)</TableRowColumn>*/}
|
|
{/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
|
|
{/*</TableRow>*/}
|
|
{/*<TableRow>*/}
|
|
{/*<TableRowColumn>Total Paid (IDR)</TableRowColumn>*/}
|
|
{/*<TableRowColumn>0.00</TableRowColumn>*/}
|
|
{/*</TableRow>*/}
|
|
{/*<TableRow>*/}
|
|
{/*<TableRowColumn>Amount Due (IDR)</TableRowColumn>*/}
|
|
{/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
|
|
{/*</TableRow>*/}
|
|
</TableBody>
|
|
</Table>
|
|
<Divider/>
|
|
|
|
</div>
|
|
</Card>
|
|
<Card>
|
|
{/*<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>*/}
|
|
{/*<ToolbarGroup>*/}
|
|
{/*<ToolbarTitle actAsExpander={true}*/}
|
|
{/*showExpandableButton={false} style={{fontSize: 14, fontWeight: 500, color: '#32325d', textTransform: 'capitalize'}}*/}
|
|
{/*text={'Payments'}/>*/}
|
|
{/*</ToolbarGroup>*/}
|
|
|
|
{/*</Toolbar>*/}
|
|
|
|
<CardHeader actAsExpander={true}
|
|
showExpandableButton={false} style={{paddingBottom: 16}}
|
|
subtitle={<a style={{fontSize: 12, paddingLeft: 10}}>Transaction History</a>}/>
|
|
<Divider/>
|
|
|
|
<CardText className="no-padding" expandable={true}>
|
|
<Table selectable={false}>
|
|
<TableHeader displaySelectAll={false}
|
|
adjustForCheckbox={false}
|
|
enableSelectAll={false}>
|
|
<TableRow style={{height: 38, background: '#f6f9fc'}}>
|
|
|
|
<TableHeaderColumn className="TableHeaderColumnAkun"
|
|
style={{height: 'auto'}}>Date</TableHeaderColumn>
|
|
<TableHeaderColumn className="TableHeaderColumnAkun"
|
|
style={{height: 'auto'}}>Description</TableHeaderColumn>
|
|
<TableHeaderColumn className="TableHeaderColumnAkun"
|
|
style={{height: 'auto'}}>Amount</TableHeaderColumn>
|
|
<TableHeaderColumn className="TableHeaderColumnAkun"
|
|
style={{height: 'auto'}}>Status</TableHeaderColumn>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody displayRowCheckbox={false}>
|
|
<TableRow>
|
|
<TableRowColumn>10/02/2017 22:30:10</TableRowColumn>
|
|
<TableRowColumn>Awaiting Approval</TableRowColumn>
|
|
<TableRowColumn>Rp. 3.000.000.00</TableRowColumn>
|
|
<TableRowColumn>Approved</TableRowColumn>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableRowColumn>10/02/2017 20:30:10</TableRowColumn>
|
|
<TableRowColumn>Awaiting Approval</TableRowColumn>
|
|
<TableRowColumn>Rp. 3.000.000.00</TableRowColumn>
|
|
<TableRowColumn>Pending</TableRowColumn>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</CardText>
|
|
</Card>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
}
|