update: Transaction Page

src/common/pages/Transaction/ItemList/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import {Card} from 'antd';
+import {inject, observer} from "mobx-react";
+import faker from "faker";
+
+import './style.scss';
+
+@inject("appstate")
+@observer
+export default class ItemList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+
+  render() {
+    const {
+      data = {
+        transaction_id: '',
+        created_at: '',
+        updated_at: '',
+        deleted_at: '',
+        name: '',
+        status: '',
+        price: '',
+        voucher_code: ``,
+      }
+    } = this.props;
+
+    return(
+      <Card className={'cardContainer'}>
+        <div className={'parentContainerLeft'}>
+          <div className={'headerContainer'}>
+            <p className={'transactionCode'}>{data.transaction_id}</p>
+            <p className={'transactionDate'}>{data.updated_at}</p>
+          </div>
+          <div className={'bodyContainer'}>
+            <p className={'nameText'}>{data.name}</p>
+            <div className={'childContainer'}>
+              <p className={'childTitle'}>Price</p>
+              <p className={'childText'}>{data.price}</p>
+            </div>
+            <div className={'childContainer'}>
+              <p className={'childTitle'}>Voucher Code</p>
+              <p className={'childText'}>{data.voucher_code}</p>
+            </div>
+          </div>
+        </div>
+        <div className={'parentContainerRight'}>
+          <p className={'statusTitle'}>Status</p>
+          <p className={'statusText'}>{data.status}</p>
+        </div>
+      </Card>
+    );
+  }
+}