').appendTo(this.$sidebar)[0],
+ render: h => h(Sidebar)
+ });
+ }
+
+ make_body() {
+ let me = this;
+ me.$body = me.$parent.find('.layout-main-section');
+ me.$page_container = $('
').appendTo(this.$body);
+
+ new Vue({
+ el: me.$page_container[0],
+ render(h) {
+ return h(Home, {props: { initCompany: me.company}})
+ }
+ });
+ }
+
+ setup_header() {
+ this.page.set_title(__('Bank Reconciliation'));
+ }
+
+ setup_events() {
+ this.$parent.on('click', '[data-route]', (e) => {
+ const $target = $(e.currentTarget);
+ const route = $target.data().route;
+ frappe.set_route(route);
+ });
+
+ this.$parent.on('click', '[data-action]', e => {
+ const $target = $(e.currentTarget);
+ const action = $target.data().action;
+
+ if (action && this[action]) {
+ this[action].apply(this, $target);
+ }
+ })
+ }
+
+ set_secondary_action() {
+ let me = this;
+ this.page.set_secondary_action(this.company, function () {
+ me.company_selection_dialog();
+ })
+ }
+
+ company_selection_dialog() {
+ let me = this;
+ let dialog = new frappe.ui.Dialog({
+ title: __('Select another company'),
+ fields: [
+ {
+ "label": "Company",
+ "fieldname": "company",
+ "fieldtype": "Link",
+ "options": "Company"
+ }
+ ],
+ primary_action_label: __('Confirm'),
+ primary_action: function(v) {
+ me.company = v.company;
+ erpnext.bankreconciliation.trigger('company_changed', v.company);
+ me.set_secondary_action();
+ dialog.hide();
+ },
+ })
+ dialog.show();
+ }
+};
\ No newline at end of file
diff --git a/erpnext/public/js/reconciliation/vue-plugins.js b/erpnext/public/js/reconciliation/vue-plugins.js
new file mode 100644
index 00000000000..708d179177d
--- /dev/null
+++ b/erpnext/public/js/reconciliation/vue-plugins.js
@@ -0,0 +1,17 @@
+import Vue from 'vue/dist/vue.js';
+
+Vue.prototype.__ = window.__;
+Vue.prototype.frappe = window.frappe;
+
+Vue.directive('route', {
+ bind(el, binding) {
+ const route = binding.value;
+ if (!route) return;
+ el.classList.add('cursor-pointer');
+ el.dataset.route = route;
+ el.addEventListener('click', () => frappe.set_route(route));
+ },
+ unbind(el) {
+ el.classList.remove('cursor-pointer');
+ }
+});
\ No newline at end of file
diff --git a/erpnext/public/less/bankreconciliation.less b/erpnext/public/less/bankreconciliation.less
new file mode 100644
index 00000000000..35c144f48e4
--- /dev/null
+++ b/erpnext/public/less/bankreconciliation.less
@@ -0,0 +1,71 @@
+
+@import "variables.less";
+@import (reference) 'common.less';
+
+body[data-route*="bankreconciliation"] {
+
+ .layout-side-section {
+ padding-top: 25px;
+ padding-left: 5px;
+ padding-right: 25px;
+ }
+
+ [data-route], [data-action] {
+ cursor: pointer;
+ }
+
+ .layout-main-section {
+ border: none;
+ font-size: @text-medium;
+ padding-top: 25px;
+
+ @media (max-width: @screen-xs) {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+ }
+
+ input, textarea {
+ font-size: @text-medium;
+ }
+
+ .bankreconciliation-sidebar {
+ padding-top: 25px;
+ padding-right: 15px;
+ }
+
+ .bankreconciliation-sidebar-group {
+ margin-bottom: 10px;
+ }
+
+ .bankreconciliation-sidebar-item {
+ padding: 5px 8px;
+ margin-bottom: 3px;
+ border-radius: 4px;
+ border: 1px solid transparent;
+
+ &.active, &:hover:not(.is-title) {
+ border-color: @border-color;
+ }
+ }
+
+ .form-container {
+ .frappe-control {
+ max-width: 100% !important;
+ }
+ }
+
+ .upload-btn-container {
+ margin-top: 20px;
+ }
+
+ .account-card {
+ .selected {
+ background-color: #e2f4d0;
+ }
+ }
+
+ .table-container {
+ margin-top: 20px;
+ }
+}
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
index 0fee6c10847..28ba9f676ff 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -6,4 +6,5 @@ python-stdnum
braintree
gocardless_pro
woocommerce
-pandas
\ No newline at end of file
+pandas
+plaid-python
\ No newline at end of file