Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
374
src/common/pages/CustomerDetail/WalletDetail/index.js
Normal file
374
src/common/pages/CustomerDetail/WalletDetail/index.js
Normal file
@@ -0,0 +1,374 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user