add new folder

src/pages/login/LoginPage.jsx

-import React from "react";
-import Login from "../../components/form/login/Login";
-import Axios from "axios";
+import React from 'react'
+import Login from '../../templates/form/login/Login'
+import Axios from 'axios'
 
-import History from "../../history/History";
-import Logo from "./resources/images/logo_login.png";
-import * as UrlConstants from "../../resources/js/constants/UrlConstants";
+import History from '../../history/History'
+import Logo from './resources/images/logo_login.png'
+import * as UrlConstants from '../../resources/js/constants/UrlConstants'
 
-import "./resources/css/login.css";
+import './resources/css/login.css'
 
 export default class LoginPage extends React.Component {
-
-  _login =  async(params) => {
-
+  _login = async params => {
     const results = await Axios.post(UrlConstants.URL_LOGIN, params)
 
     if (results.data.success) {
-      History.replace({ pathname: "/main" });
+      History.replace({ pathname: '/main' })
     }
-
   }
 
   render() {
     return (
       <div className="login">
-         
         <img src={Logo} className="login-logo" alt="logo" />
-        <br/>
-        <br/>
-        <br/>
+        <br />
+        <br />
+        <br />
         <Login getFormSubmitFn={this._login} />
       </div>
-    );
+    )
   }
 }

src/resources/js/constants/UrlConstants.jsx

-const URI = "http://localhost:8000/"; // local server
+const URI = 'http://localhost:8000/' // local server
 
-export const URL_LOGIN = URI + "login";
-export const URL_GET_MENU = URI + "getMenu";
+export const URL_LOGIN = URI + 'login'
+export const URL_GET_MENU = URI + 'getMenu'
+export const SEARCH_LOGS = URI + 'SEARCH_LOGS'
+export const RESULT_LOGS = URI + 'RESULT_LOGS'

src/templates/form/wdsTransLog/WDSSearch.jsx

+import React, { Component, Fragment } from 'react'
+import moment from 'moment'
+import 'antd/dist/antd.css'
+import './resources/css/wdsSearchStyle.css'
+import { Form, Input, Button, Icon, Select, Row, Col, DatePicker } from 'antd'
+import * as UrlConstants from '../../../resources/js/constants/UrlConstants'
+
+const { RangePicker } = DatePicker
+const { Option } = Select
+
+class WDSSearch extends Component {
+  state = {
+    isAnonymous: false,
+    expand: false,
+  }
+
+  handleSelectChange = value => {
+    this.setState({
+      isAnonymous: value === 'true' ? true : false,
+    })
+  }
+
+  toggle = () => {
+    const { expand } = this.state
+    this.setState({ expand: !expand })
+  }
+
+  disabledDate = current => {
+    return current && current < moment().subtract(30, 'days')
+  }
+
+  _handleSubmitFn = e => {
+    e.preventDefault()
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('Transaction Search values of form: ', values)
+        this.props.eventEmitter.emit(UrlConstants.SEARCH_LOGS, values)
+      }
+    })
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form
+    return (
+      <Fragment>
+        <Form onSubmit={this._handleSubmitFn} hidden={this.state.expand}>
+          <Row gutter={16}>
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Log ID :">
+                {getFieldDecorator('logID')(<Input placeholder="Log ID" />)}
+              </Form.Item>
+            </Col>
+
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Anonymous :">
+                {getFieldDecorator('isAnonymous', {
+                  initialValue: 'false',
+                })(
+                  <Select onChange={this.handleSelectChange}>
+                    <Option value="false">Username</Option>
+                    <Option value="true">Anonymous</Option>
+                  </Select>,
+                )}
+              </Form.Item>
+            </Col>
+
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Username :">
+                {getFieldDecorator('username', {})(
+                  <Input
+                    placeholder="Username"
+                    disabled={this.state.isAnonymous}
+                  />,
+                )}
+              </Form.Item>
+            </Col>
+
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Mobile ID :">
+                {getFieldDecorator('mobileID')(
+                  <Input placeholder="Mobile ID" />,
+                )}
+              </Form.Item>
+            </Col>
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Device Type :">
+                {getFieldDecorator('deviceType', {
+                  initialValue: 'All',
+                })(
+                  <Select>
+                    <Option value="All">All</Option>
+                    <Option value="iOS">iOS</Option>
+                    <Option value="Android">Android</Option>
+                  </Select>,
+                )}
+              </Form.Item>
+            </Col>
+
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Screen :">
+                {getFieldDecorator('screen')(<Input placeholder="Screen" />)}
+              </Form.Item>
+            </Col>
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Action :">
+                {getFieldDecorator('action')(<Input placeholder="Action" />)}
+              </Form.Item>
+            </Col>
+
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Transaction Message :">
+                {getFieldDecorator('message')(
+                  <Input placeholder="Transaction Message" />,
+                )}
+              </Form.Item>
+            </Col>
+
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Result From :">
+                {getFieldDecorator('resultFrom')(
+                  <Input placeholder="Result From" />,
+                )}
+              </Form.Item>
+            </Col>
+
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Result :">
+                {getFieldDecorator('result', {
+                  initialValue: 'All',
+                })(
+                  <Select>
+                    <Option value="All">All</Option>
+                    <Option value="SUCCESS">SUCCESS</Option>
+                    <Option value="FAIL">FAIL</Option>
+                  </Select>,
+                )}
+              </Form.Item>
+            </Col>
+
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Http Status :">
+                {getFieldDecorator('resultHttpStatus')(
+                  <Input placeholder="Http Status" />,
+                )}
+              </Form.Item>
+            </Col>
+
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Result Code :">
+                {getFieldDecorator('resultCode', {
+                  initialValue: 'All',
+                })(
+                  <Select>
+                    <Option value="All">All</Option>
+                    <Option value="200">200</Option>
+                    <Option value="201">201</Option>
+                    <Option value="202">202</Option>
+                    <Option value="203">203</Option>
+                    <Option value="204">204</Option>
+                    <Option value="300">300</Option>
+                  </Select>,
+                )}
+              </Form.Item>
+            </Col>
+
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item label="Result Message :">
+                {getFieldDecorator('resultMessage')(
+                  <Input placeholder="Result Message" />,
+                )}
+              </Form.Item>
+            </Col>
+
+            <Col
+              xs={{ span: 24 }}
+              sm={{ span: 16 }}
+              md={{ span: 11 }}
+              lg={{ span: 8 }}>
+              <Form.Item label="Request Time :">
+                {getFieldDecorator('requestTime', {
+                  initialValue: [
+                    moment(moment().format('HH:mm:'), 'HH:mm'),
+                    moment(moment().format('HH:mm:'), 'HH:mm'),
+                  ],
+                })(
+                  <RangePicker
+                    disabledDate={this.disabledDate}
+                    showTime={{ format: 'HH:mm' }}
+                    format="YYYY-MM-DD HH:mm"
+                  />,
+                )}
+              </Form.Item>
+            </Col>
+            <Col
+              xs={{ span: 12 }}
+              sm={{ span: 6 }}
+              md={{ span: 4 }}
+              lg={{ span: 4 }}>
+              <Form.Item>
+                <Button className="top" type="primary" htmlType="submit">
+                  Search
+                </Button>
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+
+        <div style={{ textAlign: 'center' }}>
+          <Button onClick={this.toggle} block type="primary">
+            <Icon type={this.state.expand ? 'down' : 'up'} />
+          </Button>
+        </div>
+      </Fragment>
+    )
+  }
+}
+export default Form.create({ name: 'transaction_search' })(WDSSearch)

src/templates/form/wdsTransLog/resources/css/wdsSearchStyle.css

+.top {
+  margin-top: 20%
+}