From 1d9b615d67caf8ccfdd7ea5f9ae891fccba3164e Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Wed, 27 Jun 2018 20:08:27 +0530
Subject: [PATCH] Move vue components to frappejs

---
 ui/components/Button.vue                 |   9 ++
 ui/components/Desk.vue                   |  25 ++++
 ui/components/FeatherIcon.vue            |  42 +++++++
 ui/components/Form/Form.vue              | 108 ++++++++++++++++++
 ui/components/Form/FormActions.vue       |  11 ++
 ui/components/Form/FormLayout.vue        |  87 ++++++++++++++
 ui/components/Indicator.vue              |  24 ++++
 ui/components/List/List.vue              | 104 +++++++++++++++++
 ui/components/List/ListActions.vue       |  12 ++
 ui/components/List/ListItem.vue          |  21 ++++
 ui/components/Main.vue                   |   5 +
 ui/components/Modal.vue                  |  70 ++++++++++++
 ui/components/ModelTable.vue             | 138 +++++++++++++++++++++++
 ui/components/Navbar.vue                 |   7 ++
 ui/components/NotFound.vue               |  11 ++
 ui/components/Sidebar.vue                |  47 ++++++++
 ui/components/controls/Autocomplete.vue  |  84 ++++++++++++++
 ui/components/controls/Base.vue          | 103 +++++++++++++++++
 ui/components/controls/Check.vue         |  25 ++++
 ui/components/controls/Code.vue          |  11 ++
 ui/components/controls/Currency.vue      |   6 +
 ui/components/controls/Data.vue          |   8 ++
 ui/components/controls/Date.vue          |  36 ++++++
 ui/components/controls/DynamicLink.vue   |  14 +++
 ui/components/controls/File.vue          |  46 ++++++++
 ui/components/controls/Float.vue         |  30 +++++
 ui/components/controls/FrappeControl.vue |  50 ++++++++
 ui/components/controls/Int.vue           |  13 +++
 ui/components/controls/Link.vue          |  89 +++++++++++++++
 ui/components/controls/Password.vue      |  18 +++
 ui/components/controls/Select.vue        |  30 +++++
 ui/components/controls/Table.vue         |  26 +++++
 ui/components/controls/Text.vue          |  23 ++++
 ui/pages/ListAndForm.vue                 |  34 ++++++
 ui/pages/Report/ReportFilters.vue        |  43 +++++++
 ui/pages/Report/index.vue                |  44 ++++++++
 ui/plugins/modal.js                      |  44 ++++++++
 ui/routes/index.js                       |  16 +++
 ui/styles/variables.scss                 |   2 +
 39 files changed, 1516 insertions(+)
 create mode 100644 ui/components/Button.vue
 create mode 100644 ui/components/Desk.vue
 create mode 100644 ui/components/FeatherIcon.vue
 create mode 100644 ui/components/Form/Form.vue
 create mode 100644 ui/components/Form/FormActions.vue
 create mode 100644 ui/components/Form/FormLayout.vue
 create mode 100644 ui/components/Indicator.vue
 create mode 100644 ui/components/List/List.vue
 create mode 100644 ui/components/List/ListActions.vue
 create mode 100644 ui/components/List/ListItem.vue
 create mode 100644 ui/components/Main.vue
 create mode 100644 ui/components/Modal.vue
 create mode 100644 ui/components/ModelTable.vue
 create mode 100644 ui/components/Navbar.vue
 create mode 100644 ui/components/NotFound.vue
 create mode 100644 ui/components/Sidebar.vue
 create mode 100644 ui/components/controls/Autocomplete.vue
 create mode 100644 ui/components/controls/Base.vue
 create mode 100644 ui/components/controls/Check.vue
 create mode 100644 ui/components/controls/Code.vue
 create mode 100644 ui/components/controls/Currency.vue
 create mode 100644 ui/components/controls/Data.vue
 create mode 100644 ui/components/controls/Date.vue
 create mode 100644 ui/components/controls/DynamicLink.vue
 create mode 100644 ui/components/controls/File.vue
 create mode 100644 ui/components/controls/Float.vue
 create mode 100644 ui/components/controls/FrappeControl.vue
 create mode 100644 ui/components/controls/Int.vue
 create mode 100644 ui/components/controls/Link.vue
 create mode 100644 ui/components/controls/Password.vue
 create mode 100644 ui/components/controls/Select.vue
 create mode 100644 ui/components/controls/Table.vue
 create mode 100644 ui/components/controls/Text.vue
 create mode 100644 ui/pages/ListAndForm.vue
 create mode 100644 ui/pages/Report/ReportFilters.vue
 create mode 100644 ui/pages/Report/index.vue
 create mode 100644 ui/plugins/modal.js
 create mode 100644 ui/routes/index.js
 create mode 100644 ui/styles/variables.scss

diff --git a/ui/components/Button.vue b/ui/components/Button.vue
new file mode 100644
index 00000000..959d442a
--- /dev/null
+++ b/ui/components/Button.vue
@@ -0,0 +1,9 @@
+<template functional>
+  <button type="button"
+    :class="['btn btn-sm', 'btn-' + Object.keys(props).find(key => ['primary', 'secondary', 'light', 'dark'].includes(key))]"
+    v-bind="data.attrs"
+    v-on="listeners"
+  >
+    <slot></slot>
+  </button>
+</template>
\ No newline at end of file
diff --git a/ui/components/Desk.vue b/ui/components/Desk.vue
new file mode 100644
index 00000000..f191205c
--- /dev/null
+++ b/ui/components/Desk.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="frappe-desk row no-gutters">
+        <frappe-sidebar :sidebarConfig="sidebarConfig"></frappe-sidebar>
+        <frappe-main>
+          <frappe-navbar></frappe-navbar>
+          <slot></slot>
+        </frappe-main>
+    </div>
+</template>
+<script>
+import Sidebar from './Sidebar';
+import Main from './Main';
+import Navbar from './Navbar';
+
+export default {
+  props: ['sidebarConfig'],
+  components: {
+    FrappeSidebar: Sidebar,
+    FrappeMain: Main,
+    FrappeNavbar: Navbar
+  }
+};
+</script>
+<style>
+</style>
diff --git a/ui/components/FeatherIcon.vue b/ui/components/FeatherIcon.vue
new file mode 100644
index 00000000..4e6bf12f
--- /dev/null
+++ b/ui/components/FeatherIcon.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="feather-icon" v-html="iconSVG"></div>
+</template>
+<script>
+import feather from 'feather-icons';
+
+const validIcons = Object.keys(feather.icons);
+
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+            validator(value) {
+                const valid = validIcons.includes(value);
+                if (!valid) {
+                    console.warn(`name property for feather-icon must be one of `, validIcons);
+                }
+                return valid;
+            }
+        },
+        size: {
+            type: Number,
+            default: 16
+        }
+    },
+    computed: {
+        iconSVG() {
+            return feather.icons[this.name].toSvg({
+                width: this.size,
+                height: this.size
+            });
+        }
+    }
+}
+</script>
+<style>
+.feather-icon {
+    display: inline-block;
+}
+</style>
+
diff --git a/ui/components/Form/Form.vue b/ui/components/Form/Form.vue
new file mode 100644
index 00000000..102a6ecc
--- /dev/null
+++ b/ui/components/Form/Form.vue
@@ -0,0 +1,108 @@
+<template>
+    <div class="frappe-form">
+        <form-actions
+          v-if="shouldRenderForm"
+          :doctype="doctype"
+          :name="name"
+          :title="formTitle"
+          :isDirty="isDirty"
+          @save="save"
+        />
+        <div class="p-3">
+          <form-layout
+            v-if="shouldRenderForm"
+            :doc="doc"
+            :fields="meta.fields"
+            :layout="meta.layout"
+            :invalid="invalid"
+          />
+        </div>
+        <not-found v-if="notFound" />
+    </div>
+</template>
+<script>
+import frappe from 'frappejs';
+import FormLayout from './FormLayout';
+import FormActions from './FormActions';
+import { _ } from 'frappejs/utils';
+
+export default {
+  name: 'Form',
+  props: ['doctype', 'name'],
+  components: {
+    FormActions,
+    FormLayout
+  },
+  data() {
+    return {
+      docLoaded: false,
+      notFound: false,
+      invalid: false,
+      isDirty: false,
+      invalidFields: []
+    }
+  },
+  computed: {
+    meta() {
+      return frappe.getMeta(this.doctype);
+    },
+    shouldRenderForm() {
+      return this.name && this.docLoaded;
+    },
+    formTitle() {
+      if (this.doc._notInserted) {
+        return _('New {0}', _(this.doctype));
+      }
+      return this.doc[this.meta.titleField];
+    }
+  },
+  async created() {
+    if (!this.name) return;
+    try {
+      this.doc = await frappe.getDoc(this.doctype, this.name);
+      this.doc.on('change', () => {
+        this.isDirty = this.doc._dirty;
+      });
+      this.docLoaded = true;
+    } catch(e) {
+      this.notFound = true;
+    }
+  },
+  methods: {
+    async save() {
+      this.setValidity();
+      if (this.invalid) return;
+
+      try {
+        if (this.doc._notInserted) {
+          await this.doc.insert();
+        } else {
+          await this.doc.update();
+        }
+
+        this.$emit('save', this.doc);
+
+      } catch (e) {
+        console.error(e);
+        return;
+      }
+    },
+
+    onValidate(fieldname, isValid) {
+      if (!isValid && !this.invalidFields.includes(fieldname)) {
+        this.invalidFields.push(fieldname);
+      } else if (isValid) {
+        this.invalidFields = this.invalidFields.filter(invalidField => invalidField !== fieldname)
+      }
+    },
+
+    setValidity() {
+      const form = this.$el.querySelector('form');
+      let validity = form.checkValidity();
+      this.invalid = !validity;
+    },
+  }
+};
+</script>
+<style>
+</style>
diff --git a/ui/components/Form/FormActions.vue b/ui/components/Form/FormActions.vue
new file mode 100644
index 00000000..46b963fc
--- /dev/null
+++ b/ui/components/Form/FormActions.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="frappe-form-actions d-flex justify-content-between align-items-center p-3 border-bottom">
+    <h5 class="m-0">{{ title || name }}</h5>
+    <f-button primary :disabled="!isDirty" @click="$emit('save')">{{ _('Save') }}</f-button>
+  </div>
+</template>
+<script>
+export default {
+  props: ['doctype', 'name', 'title', 'isDirty']
+}
+</script>
diff --git a/ui/components/Form/FormLayout.vue b/ui/components/Form/FormLayout.vue
new file mode 100644
index 00000000..b7e57414
--- /dev/null
+++ b/ui/components/Form/FormLayout.vue
@@ -0,0 +1,87 @@
+<template>
+  <form :class="['frappe-form-layout', { 'was-validated': invalid }]">
+    <div class="row" v-if="layoutConfig"
+      v-for="(section, i) in layoutConfig.sections" :key="i"
+      v-show="showSection(i)"
+    >
+      <div class="col" v-for="(column, j) in section.columns" :key="j">
+        <frappe-control
+          v-for="fieldname in column.fields"
+          :key="fieldname"
+          :docfield="getDocField(fieldname)"
+          :value="$data[fieldname]"
+          @change="value => updateDoc(fieldname, value)"
+        />
+      </div>
+    </div>
+    <div v-if="!layout">
+      <frappe-control
+        v-for="docfield in fields"
+        :key="docfield.fieldname"
+        :docfield="docfield"
+        :value="$data[docfield.fieldname]"
+        @change="value => updateDoc(docfield.fieldname, value)"
+      />
+    </div>
+  </form>
+</template>
+<script>
+export default {
+  name: 'FormLayout',
+  props: ['doc', 'fields', 'layout', 'invalid', 'currentSection'],
+  data() {
+    const dataObj = {};
+    for (let df of this.fields) {
+      dataObj[df.fieldname] = this.doc[df.fieldname];
+
+      if (df.fieldtype === 'Table' && !dataObj[df.fieldname]) {
+        dataObj[df.fieldname] = [];
+      }
+    }
+
+    return dataObj;
+  },
+  created() {
+    this.doc.on('change', ({ doc, fieldname }) => {
+      if (fieldname) {
+        // update value
+        this[fieldname] = doc[fieldname];
+      } else {
+        // update all values
+        this.fields.forEach(df => {
+          this[df.fieldname] = doc[df.fieldname];
+        });
+      }
+    });
+  },
+  methods: {
+    getDocField(fieldname) {
+      return this.fields.find(df => df.fieldname === fieldname);
+    },
+    updateDoc(fieldname, value) {
+      this.doc.set(fieldname, value);
+    },
+    showSection(i) {
+      if (this.layoutConfig.paginated) {
+        return this.currentSection === i;
+      }
+      return true;
+    }
+  },
+  computed: {
+    layoutConfig() {
+      if (!this.layout) return false;
+
+      let config = this.layout;
+
+      if (Array.isArray(config)) {
+        config = {
+          sections: config
+        }
+      }
+
+      return config;
+    }
+  }
+};
+</script>
diff --git a/ui/components/Indicator.vue b/ui/components/Indicator.vue
new file mode 100644
index 00000000..23893bbf
--- /dev/null
+++ b/ui/components/Indicator.vue
@@ -0,0 +1,24 @@
+<template>
+    <span :class="['indicator', 'indicator-' + color]"></span>
+</template>
+<script>
+export default {
+    props: ['color']
+}
+</script>
+
+<style lang="scss">
+@import "../styles/variables";
+
+.indicator {
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: $gray-400;
+    border-radius: 50%;
+}
+
+.indicator-blue {
+    background-color: $primary;
+}
+</style>
diff --git a/ui/components/List/List.vue b/ui/components/List/List.vue
new file mode 100644
index 00000000..9c2b851f
--- /dev/null
+++ b/ui/components/List/List.vue
@@ -0,0 +1,104 @@
+<template>
+        <div class="frappe-list">
+            <list-actions
+              :doctype="doctype"
+              :showDelete="checkList.length"
+              @new="newDoc"
+              @delete="deleteCheckedItems"
+            />
+            <ul class="list-group">
+                <list-item v-for="doc of data" :key="doc.name"
+                    :id="doc.name"
+                    :isActive="doc.name === $route.params.name"
+                    :isChecked="isChecked(doc.name)"
+                    @clickItem="openForm(doc.name)"
+                    @checkItem="toggleCheck(doc.name)">
+                    {{ doc[meta.titleField || 'name'] }}
+                </list-item>
+            </ul>
+        </div>
+</template>
+<script>
+import frappe from 'frappejs';
+import ListActions from './ListActions';
+import ListItem from './ListItem';
+
+export default {
+  name: 'List',
+  props: ['doctype', 'filters'],
+  components: {
+      ListActions,
+      ListItem
+  },
+  data() {
+      return {
+        data: [],
+        checkList: [],
+        activeItem: ''
+      }
+  },
+  computed: {
+      meta() {
+          return frappe.getMeta(this.doctype);
+      }
+  },
+  created() {
+    frappe.db.on(`change:${this.doctype}`, () => {
+      this.updateList();
+    });
+  },
+  mounted() {
+    this.updateList();
+  },
+  methods: {
+    async newDoc() {
+        let doc = await frappe.getNewDoc(this.doctype);
+        this.$router.push(`/edit/${this.doctype}/${doc.name}`);
+    },
+    async updateList() {
+      const data = await frappe.db.getAll({
+        doctype: this.doctype,
+        fields: ['name', ...this.meta.keywordFields, this.meta.titleField],
+        filters: this.filters || null
+      });
+
+      this.data = data;
+    },
+    openForm(name) {
+        this.activeItem = name;
+        this.$router.push(`/edit/${this.doctype}/${name}`);
+    },
+    async deleteCheckedItems() {
+      await frappe.db.deleteMany(this.doctype, this.checkList);
+      this.checkList = [];
+    },
+    toggleCheck(name) {
+      if (this.checkList.includes(name)) {
+          this.checkList = this.checkList.filter(docname => docname !== name);
+      } else {
+          this.checkList = this.checkList.concat(name);
+      }
+    },
+    isChecked(name) {
+      return this.checkList.includes(name);
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "../../styles/variables";
+
+.list-group-item {
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+}
+
+.list-group-item:first-child {
+    border-top: none;
+}
+
+.list-group-item:not(.active):hover {
+    background-color: $light;
+}
+</style>
diff --git a/ui/components/List/ListActions.vue b/ui/components/List/ListActions.vue
new file mode 100644
index 00000000..9901dea0
--- /dev/null
+++ b/ui/components/List/ListActions.vue
@@ -0,0 +1,12 @@
+<template>
+    <div class="frappe-list-actions d-flex justify-content-between align-items-center p-3 border-bottom">
+        <h5 class="m-0">{{ doctype }} List</h5>
+        <button v-if="showDelete" class="btn btn-danger btn-sm" @click="$emit('delete')">Delete</button>
+        <button v-else class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
+    </div>
+</template>
+<script>
+export default {
+    props: ['doctype', 'showDelete']
+}
+</script>
diff --git a/ui/components/List/ListItem.vue b/ui/components/List/ListItem.vue
new file mode 100644
index 00000000..b874b76f
--- /dev/null
+++ b/ui/components/List/ListItem.vue
@@ -0,0 +1,21 @@
+<template>
+    <div :class="classList" @click.self="$emit('clickItem')">
+        <div class="custom-control custom-checkbox d-flex">
+            <input type="checkbox" class="custom-control-input" :id="id"
+                :value="isChecked" @change="$emit('checkItem', isChecked)"
+            >
+            <label class="custom-control-label" :for="id"></label>
+        </div>
+        <slot></slot>
+    </div>
+</template>
+<script>
+export default {
+    props: ['id', 'isActive', 'isChecked'],
+    computed: {
+        classList() {
+            return ['list-group-item d-flex align-items-center', this.isActive ? 'bg-light' : ''];
+        }
+    }
+}
+</script>
diff --git a/ui/components/Main.vue b/ui/components/Main.vue
new file mode 100644
index 00000000..33e65f91
--- /dev/null
+++ b/ui/components/Main.vue
@@ -0,0 +1,5 @@
+<template>
+    <main class="frappe-main col-10">
+        <slot></slot>
+    </main>
+</template>
diff --git a/ui/components/Modal.vue b/ui/components/Modal.vue
new file mode 100644
index 00000000..ad9dbaf7
--- /dev/null
+++ b/ui/components/Modal.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div :class="['modal fade', modalClasses]" :style="{display: show ? 'block' : ''}" id="frappe-modal"
+      tabindex="-1" role="dialog" aria-labelledby="frappe-modal-label" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="frappe-modal-label">{{ title }}</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="closeModal">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body modal-height">
+            <component :is="bodyComponent" v-bind="bodyProps"/>
+          </div>
+          <div class="modal-footer">
+            <component :is="footerComponent" v-bind="footerProps"/>
+            <f-button secondary @click="closeModal">Close</f-button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop show" v-show="show" @click="closeModal"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    show: Boolean,
+    title: {
+      type: String,
+      default: "Modal Title"
+    },
+    bodyComponent: {
+      type: Object,
+      default: null
+    },
+    bodyProps: {
+      type: Object,
+      default: null
+    },
+    footerComponent: {
+      type: Object,
+      default: null
+    },
+    footerProps: {
+      type: Object,
+      default: null
+    },
+  },
+  computed: {
+    modalClasses() {
+      return {
+        show: this.show
+      };
+    }
+  },
+  methods: {
+    closeModal() {
+      this.$emit('close-modal');
+    }
+  }
+};
+</script>
+<style scoped>
+.modal-height {
+  max-height: 80vh;
+  overflow: auto;
+}
+</style>
diff --git a/ui/components/ModelTable.vue b/ui/components/ModelTable.vue
new file mode 100644
index 00000000..9fe1360b
--- /dev/null
+++ b/ui/components/ModelTable.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <div ref="wrapper" class="datatable-wrapper"></div>
+    <div class="table-actions mt-1">
+      <button type="button" @click="addRow" class="btn btn-sm btn-light border">Add Row</button>
+    </div>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+import frappe from 'frappejs';
+import Observable from 'frappejs/utils/observable';
+import DataTable from 'frappe-datatable';
+import FrappeControl from './controls/FrappeControl';
+import { convertFieldsToDatatableColumns } from 'frappejs/client/ui/utils';
+
+export default {
+  props: ['doctype', 'rows'],
+  data() {
+    return {
+      docs: this.getRowDocs()
+    }
+  },
+  computed: {
+    meta() {
+      return frappe.getMeta(this.doctype);
+    }
+  },
+  mounted() {
+    this.datatable = new DataTable(this.$refs.wrapper, {
+      columns: this.getColumns(),
+      data: this.docs,
+      layout: 'fluid',
+      checkboxColumn: true,
+      checkedRowStatus: false,
+      getEditor: (colIndex, rowIndex, value, parent) => {
+
+        let inputComponent = null;
+        const docfield = this.datatable.getColumn(colIndex).field;
+
+        const fieldWrapper = document.createElement('div');
+        parent.appendChild(fieldWrapper);
+
+        const updateData = (fieldname, value) => {
+          const docs = this.datatable.datamanager.data;
+          const doc = docs[rowIndex];
+          doc.set(fieldname, value);
+          this.emitChange(doc);
+        }
+
+        return {
+          initValue() {
+            inputComponent = new Vue({
+              el: fieldWrapper,
+              data() {
+                return {
+                  docfield,
+                  value
+                }
+              },
+              components: {
+                FrappeControl
+              },
+              mounted() {
+                this.$el.focus();
+              },
+              template: `<frappe-control
+                :docfield="docfield"
+                :value="value"
+                @change="value => updateValue(docfield.fieldname, value)"
+                :onlyInput="true"
+              />`,
+              methods: {
+                updateValue(fieldname, value) {
+                  this.value = value;
+                  updateData(fieldname, value);
+                }
+              }
+            })
+          },
+          setValue: (value, rowIndex, column) => {
+            inputComponent.value = value;
+          },
+          getValue: () => {
+            return inputComponent.$el.value;
+          }
+        }
+      }
+    });
+  },
+  destroyed() {
+    this.datatable.destroy();
+  },
+  watch: {
+    docs: function(newVal, oldVal) {
+      this.datatable.refresh(newVal);
+    },
+    rows: function(newVal, oldVal) {
+      this.docs = this.getRowDocs();
+    }
+  },
+  methods: {
+    getRowDocs() {
+      return (this.rows || []).map((row, i) => {
+        const doc = new Observable();
+        doc.set('idx', i);
+        for (let fieldname in row) {
+          doc.set(fieldname, row[fieldname]);
+        }
+        return doc;
+      });
+    },
+    getColumns() {
+        return convertFieldsToDatatableColumns(this.meta.fields);
+    },
+    addRow() {
+      const doc = new Observable();
+      doc.set('idx', this.docs.length);
+      this.docs.push(doc);
+    },
+    emitChange(doc) {
+      this.$emit('update:rows', this.docs, doc);
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import "frappe-datatable/dist/frappe-datatable.css";
+
+.datatable-wrapper {
+  .form-control {
+    border: none;
+    box-shadow: none;
+    height: 100%;
+    padding: 0;
+  }
+}
+</style>
diff --git a/ui/components/Navbar.vue b/ui/components/Navbar.vue
new file mode 100644
index 00000000..fcf8f81a
--- /dev/null
+++ b/ui/components/Navbar.vue
@@ -0,0 +1,7 @@
+<template>
+    <nav class="frappe-navbar navbar navbar-light bg-light row no-gutters border-bottom border-top">
+        <form class="form-inline col-4 pr-3">
+            <input type="search" name="search" class="form-control shadow-none w-100" placeholder="Search...">
+        </form>
+    </nav>
+</template>
diff --git a/ui/components/NotFound.vue b/ui/components/NotFound.vue
new file mode 100644
index 00000000..a842aa42
--- /dev/null
+++ b/ui/components/NotFound.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="frappe-not-found d-flex flex-column align-items-center justify-content-center">
+        <h1>404</h1>
+        <p>Not Found</p>
+    </div>
+</template>
+<style>
+.frappe-not-found {
+    height: 100%;
+}
+</style>
diff --git a/ui/components/Sidebar.vue b/ui/components/Sidebar.vue
new file mode 100644
index 00000000..0afb9800
--- /dev/null
+++ b/ui/components/Sidebar.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="frappe-sidebar col-2 bg-light border-right">
+    <div class="navbar border-bottom">
+      <div class="navbar-text">
+        TennisMart
+      </div>
+    </div>
+    <div class="my-3" v-for="(sidebarGroup, index) in sidebarConfig" :key="index">
+      <h6 v-if="sidebarGroup.title" class="sidebar-heading nav-link text-muted text-uppercase m-0">
+        {{ sidebarGroup.title }}
+      </h6>
+      <nav class="nav flex-column">
+        <li class="nav-item">
+          <a v-for="item in sidebarGroup.items" :key="item.route"
+            :href="item.route"
+            :class="['nav-link', isActive(item) ? 'text-light bg-secondary' : 'text-dark']" >
+            {{ item.label }}
+          </a>
+        </li>
+      </nav>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['sidebarConfig'],
+  methods: {
+    isActive(item) {
+      if (this.$route.params.doctype) {
+          return this.$route.params.doctype === item.label;
+      }
+      const route = item.route.slice(1);
+      return this.$route.path === route;
+    }
+  }
+}
+</script>
+
+<style>
+.frappe-sidebar {
+    min-height: calc(100vh);
+}
+
+.sidebar-heading {
+    font-size: 0.8rem;
+}
+</style>
diff --git a/ui/components/controls/Autocomplete.vue b/ui/components/controls/Autocomplete.vue
new file mode 100644
index 00000000..b3de9974
--- /dev/null
+++ b/ui/components/controls/Autocomplete.vue
@@ -0,0 +1,84 @@
+<script>
+import Awesomplete from 'awesomplete';
+import Data from './Data';
+
+export default {
+  extends: Data,
+  data() {
+    return {
+      awesomplete: null
+    }
+  },
+  mounted() {
+    this.setupAwesomplete();
+    this.awesomplete.container.classList.add('form-control');
+    this.awesomplete.ul.classList.add('dropdown-menu');
+  },
+  methods: {
+    getInputListeners() {
+      return {
+        input: async e => {
+          this.awesomplete.list = await this.getList(e.target.value);
+        },
+        'awesomplete-select': e => {
+          const value = e.text.value;
+          this.handleChange(value);
+        }
+      }
+    },
+    getList(text) {
+      return this.docfield.getList(text);
+    },
+    setupAwesomplete() {
+      const input = this.$refs.input;
+      this.awesomplete = new Awesomplete(input, {
+        minChars: 0,
+        maxItems: 99,
+        sort: this.sort(),
+        filter: this.filter(),
+        item: (text, input) => {
+          const li = document.createElement('li');
+          li.classList.add('dropdown-item');
+          li.classList.add('d-flex');
+          li.classList.add('align-items-center');
+          li.innerHTML = text.label;
+
+          return li;
+        }
+      });
+
+      this.bindEvents();
+    },
+    bindEvents() {
+
+    },
+    sort() {
+      // return a function that handles sorting of items
+    },
+    filter() {
+      // return a function that filters list suggestions based on input
+    }
+  }
+};
+</script>
+<style lang="scss">
+@import "../../styles/variables";
+@import "~awesomplete/awesomplete.base";
+
+.awesomplete {
+  padding: 0;
+  border: none;
+
+  & > ul {
+    padding: $dropdown-padding-y 0;
+  }
+
+  .dropdown-menu:not([hidden]) {
+    display: block;
+  }
+
+  .dropdown-item[aria-selected="true"] {
+    background-color: $dropdown-link-hover-bg;
+  }
+}
+</style>
diff --git a/ui/components/controls/Base.vue b/ui/components/controls/Base.vue
new file mode 100644
index 00000000..ac0d7160
--- /dev/null
+++ b/ui/components/controls/Base.vue
@@ -0,0 +1,103 @@
+<script>
+export default {
+    render(h) {
+        if (this.onlyInput) {
+            return this.getInputElement(h);
+        }
+        return this.getWrapperElement(h);
+    },
+    props: {
+        docfield: Object,
+        value: [String, Number, Array],
+        onlyInput: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        id() {
+            return this.docfield.fieldname + '-'
+              + document.querySelectorAll(`[data-fieldname="${this.docfield.fieldname}"]`).length;
+        },
+        inputClass() {
+            return [];
+        },
+        wrapperClass() {
+            return [];
+        },
+        labelClass() {
+            return [];
+        }
+    },
+    methods: {
+        getWrapperElement(h) {
+            return h('div', {
+                class: ['form-group', ...this.wrapperClass],
+                attrs: {
+                    'data-fieldname': this.docfield.fieldname
+                }
+            }, [this.getLabelElement(h), this.getInputElement(h)]);
+        },
+        getLabelElement(h) {
+            return h('label', {
+                class: [this.labelClass, 'text-muted'],
+                attrs: {
+                    for: this.id
+                },
+                domProps: {
+                    textContent: this.docfield.label
+                }
+            });
+        },
+        getInputElement(h) {
+            return h(this.getInputTag(), {
+                class: this.getInputClass(),
+                attrs: this.getInputAttrs(),
+                on: this.getInputListeners(),
+                domProps: this.getDomProps(),
+                ref: 'input'
+            }, this.getInputChildren(h));
+        },
+        getInputTag() {
+            return 'input';
+        },
+        getInputClass() {
+            return ['form-control', ...this.inputClass];
+        },
+        getInputAttrs() {
+            return {
+                id: this.id,
+                type: 'text',
+                placeholder: '',
+                value: this.value,
+                required: this.docfield.required
+            }
+        },
+        getInputListeners() {
+            return {
+                change: (e) => {
+                    this.handleChange(e.target.value);
+                }
+            };
+        },
+        getInputChildren() {
+            return null;
+        },
+        getDomProps() {
+            return null;
+        },
+        async handleChange(value) {
+            value = this.parse(value);
+            const isValid = await this.validate(value);
+            this.$refs.input.setCustomValidity(isValid === false ? 'error' : '');
+            this.$emit('change', value);
+        },
+        validate() {
+            return true;
+        },
+        parse(value) {
+            return value;
+        }
+    }
+}
+</script>
diff --git a/ui/components/controls/Check.vue b/ui/components/controls/Check.vue
new file mode 100644
index 00000000..6b1ec936
--- /dev/null
+++ b/ui/components/controls/Check.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="form-group">
+        <div class="custom-control custom-checkbox">
+            <input class="custom-control-input" type="checkbox" :id="id" v-model="checkboxValue" @change="emitChange">
+            <label class="custom-control-label" :for="id">{{ docfield.label }}</label>
+        </div>
+    </div>
+</template>
+
+<script>
+import Base from './Base';
+export default {
+    extends: Base,
+    data() {
+        return {
+            checkboxValue: Boolean(this.value)
+        }
+    },
+    methods: {
+        emitChange(e) {
+            this.$emit('change', Number(this.checkboxValue));
+        }
+    }
+}
+</script>
diff --git a/ui/components/controls/Code.vue b/ui/components/controls/Code.vue
new file mode 100644
index 00000000..ddfb049e
--- /dev/null
+++ b/ui/components/controls/Code.vue
@@ -0,0 +1,11 @@
+<script>
+import Text from './Text';
+export default {
+    extends: Text,
+    computed: {
+        inputClass() {
+            return ['text-monospace'];
+        }
+    }
+}
+</script>
diff --git a/ui/components/controls/Currency.vue b/ui/components/controls/Currency.vue
new file mode 100644
index 00000000..64946d7f
--- /dev/null
+++ b/ui/components/controls/Currency.vue
@@ -0,0 +1,6 @@
+<script>
+import Float from './Float';
+export default {
+    extends: Float
+}
+</script>
diff --git a/ui/components/controls/Data.vue b/ui/components/controls/Data.vue
new file mode 100644
index 00000000..f214e548
--- /dev/null
+++ b/ui/components/controls/Data.vue
@@ -0,0 +1,8 @@
+<script>
+import Base from './Base';
+
+export default {
+    name: 'Data',
+    extends: Base
+}
+</script>
diff --git a/ui/components/controls/Date.vue b/ui/components/controls/Date.vue
new file mode 100644
index 00000000..d152c830
--- /dev/null
+++ b/ui/components/controls/Date.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="form-group" v-if="!onlyInput">
+    <label>{{ docfield.label }}</label>
+    <flat-pickr
+      :value="value"
+      class="form-control"
+      @on-change="emitChange">
+    </flat-pickr>
+  </div>
+  <flat-pickr
+    v-else
+    :value="value"
+    class="form-control"
+    @on-change="emitChange"
+  >
+  </flat-pickr>
+</template>
+<script>
+import flatPickr from 'vue-flatpickr-component';
+import Data from './Data';
+
+export default {
+  extends: Data,
+  components: {
+    flatPickr
+  },
+  methods: {
+    emitChange(dates, dateString) {
+      this.$emit('change', dateString);
+    }
+  }
+};
+</script>
+<style lang="scss">
+@import "flatpickr/dist/flatpickr.css";
+</style>
diff --git a/ui/components/controls/DynamicLink.vue b/ui/components/controls/DynamicLink.vue
new file mode 100644
index 00000000..eebac5f4
--- /dev/null
+++ b/ui/components/controls/DynamicLink.vue
@@ -0,0 +1,14 @@
+<script>
+import frappe from 'frappejs';
+import Link from './Link';
+
+export default {
+    extends: Link,
+    inject: ['dynamicLinkTarget'],
+    methods: {
+        getTarget() {
+            return this.dynamicLinkTarget(this.docfield.references);
+        }
+    }
+}
+</script>
diff --git a/ui/components/controls/File.vue b/ui/components/controls/File.vue
new file mode 100644
index 00000000..ccae4734
--- /dev/null
+++ b/ui/components/controls/File.vue
@@ -0,0 +1,46 @@
+<script>
+import Base from './Base';
+
+export default {
+  extends: Base,
+  computed: {
+    inputClass() {
+      return ['d-none'];
+    }
+  },
+  methods: {
+    getWrapperElement(h) {
+      let fileName = 'Choose a file..';
+
+      if (this.$refs.input && this.$refs.input.files.length) {
+        fileName = this.$refs.input.files[0].name;
+      }
+
+      const fileButton = h('button', {
+        class: ['btn btn-outline-secondary btn-block'],
+        domProps: {
+          textContent: fileName
+        },
+        on: {
+          click: () => this.$refs.input.click()
+        }
+      });
+
+      return h('div', {
+        class: ['form-group', ...this.wrapperClass],
+        attrs: {
+            'data-fieldname': this.docfield.fieldname
+        }
+      }, [this.getLabelElement(h), this.getInputElement(h), fileButton]);
+    },
+    getInputAttrs() {
+      return {
+        id: this.id,
+        type: 'file',
+        value: this.value,
+        required: this.docfield.required
+      }
+    }
+  }
+}
+</script>
diff --git a/ui/components/controls/Float.vue b/ui/components/controls/Float.vue
new file mode 100644
index 00000000..9a44a3b0
--- /dev/null
+++ b/ui/components/controls/Float.vue
@@ -0,0 +1,30 @@
+<script>
+import Base from './Base';
+
+export default {
+    extends: Base,
+    computed: {
+        inputClass() {
+            return ['text-right']
+        }
+    },
+    methods: {
+        getInputListeners() {
+            return {
+                change: e => {
+                    this.handleChange(e.target.value);
+                },
+                focus: e => {
+                    setTimeout(() => this.$refs.input.select(), 100);
+                }
+            };
+        },
+        validate(value) {
+            return !isNaN(value);
+        },
+        parse(value) {
+            return Number(value);
+        }
+    }
+}
+</script>
diff --git a/ui/components/controls/FrappeControl.vue b/ui/components/controls/FrappeControl.vue
new file mode 100644
index 00000000..db6cb830
--- /dev/null
+++ b/ui/components/controls/FrappeControl.vue
@@ -0,0 +1,50 @@
+<template>
+    <component :is="component"
+        :docfield="docfield"
+        :value="value"
+        :onlyInput="onlyInput"
+        @change="$emit('change', $event)"
+    />
+</template>
+<script>
+import Autocomplete from './Autocomplete';
+import Check from './Check';
+import Code from './Code';
+import Currency from './Currency';
+import Data from './Data';
+import Date from './Date';
+import DynamicLink from './DynamicLink';
+import File from './File';
+import Float from './Float';
+import Int from './Int';
+import Link from './Link';
+import Password from './Password';
+import Select from './Select';
+import Table from './Table';
+import Text from './Text';
+
+export default {
+    props: ['docfield', 'value', 'onlyInput'],
+    computed: {
+        component() {
+            return {
+                Autocomplete,
+                Check,
+                Code,
+                Currency,
+                Data,
+                Date,
+                DynamicLink,
+                File,
+                Float,
+                Int,
+                Link,
+                Password,
+                Select,
+                Table,
+                Text,
+            }[this.docfield.fieldtype];
+        }
+    }
+}
+</script>
diff --git a/ui/components/controls/Int.vue b/ui/components/controls/Int.vue
new file mode 100644
index 00000000..d72358e2
--- /dev/null
+++ b/ui/components/controls/Int.vue
@@ -0,0 +1,13 @@
+<script>
+import Float from './Float';
+
+export default {
+    extends: Float,
+    methods: {
+        parse(value) {
+            const parsedValue = parseInt(value);
+            return isNaN(parsedValue) ? 0 : parsedValue;
+        }
+    }
+}
+</script>
diff --git a/ui/components/controls/Link.vue b/ui/components/controls/Link.vue
new file mode 100644
index 00000000..fa74c868
--- /dev/null
+++ b/ui/components/controls/Link.vue
@@ -0,0 +1,89 @@
+<script>
+import frappe from 'frappejs';
+import feather from 'feather-icons';
+import Awesomplete from 'awesomplete';
+import Autocomplete from './Autocomplete';
+import Form from '../Form/Form';
+import { _ } from 'frappejs/utils';
+
+export default {
+    extends: Autocomplete,
+    watch: {
+        value(newValue) {
+            this.$refs.input.value = newValue;
+        }
+    },
+    methods: {
+        async getList(query) {
+            const list = await frappe.db.getAll({
+                doctype: this.getTarget(),
+                filters: {
+                    keywords: ["like", query]
+                },
+                fields: ['name'],
+                limit: 50
+            });
+
+            const plusIcon = feather.icons.plus.toSvg({
+                class: 'm-1',
+                width: 16,
+                height: 16
+            });
+
+            return list
+                .map(d => ({
+                    label: d.name,
+                    value: d.name
+                }))
+                .concat({
+                    label: plusIcon + ' New ' + this.getTarget(),
+                    value: '__newItem'
+                })
+        },
+        getTarget() {
+            return this.docfield.target;
+        },
+        sort() {
+            return (a, b) => {
+                if (a.value === '__newitem' || b.value === '__newitem') {
+                    return -1;
+                }
+                return a.value > b.value;
+            }
+        },
+        filter() {
+            return (suggestion, txt) => {
+                if (suggestion.value === '__newItem') {
+                    return true;
+                }
+                return Awesomplete.FILTER_CONTAINS(suggestion, txt);
+            }
+        },
+        bindEvents() {
+            const input = this.$refs.input;
+
+            input.addEventListener('awesomplete-select', async (e) => {
+                // new item action
+                if (e.text && e.text.value === '__newItem') {
+                    e.preventDefault();
+                    const newDoc = await frappe.getNewDoc(this.getTarget());
+
+                    this.$modal.show({
+                        title: _('New {0}', _(newDoc.doctype)),
+                        bodyComponent: Form,
+                        bodyProps: {
+                            doctype: newDoc.doctype,
+                            name: newDoc.name,
+                        },
+                    });
+
+                    newDoc.on('afterInsert', (data) => {
+                        this.handleChange(newDoc.name);
+                        this.$modal.hide();
+                    });
+                }
+            })
+        }
+    }
+}
+</script>
diff --git a/ui/components/controls/Password.vue b/ui/components/controls/Password.vue
new file mode 100644
index 00000000..ae0c4fa7
--- /dev/null
+++ b/ui/components/controls/Password.vue
@@ -0,0 +1,18 @@
+<script>
+import Base from "./Base";
+
+export default {
+  name: "Password",
+  extends: Base,
+  methods: {
+    getInputAttrs() {
+      return {
+        id: this.id,
+        type: 'password',
+        value: this.value,
+        required: this.docfield.required
+      };
+    },
+  }
+};
+</script>
\ No newline at end of file
diff --git a/ui/components/controls/Select.vue b/ui/components/controls/Select.vue
new file mode 100644
index 00000000..5aceb8eb
--- /dev/null
+++ b/ui/components/controls/Select.vue
@@ -0,0 +1,30 @@
+<script>
+import Base from './Base';
+export default {
+    extends: Base,
+    methods: {
+        getInputTag() {
+            return 'select';
+        },
+        getInputAttrs() {
+            return {
+                id: this.id,
+                required: this.docfield.required
+            };
+        },
+        getInputChildren(h) {
+            return this.docfield.options.map(option =>
+                h('option', {
+                    attrs: {
+                        key: option,
+                        selected: option === this.value
+                    },
+                    domProps: {
+                        textContent: option
+                    }
+                })
+            );
+        }
+    }
+}
+</script>
diff --git a/ui/components/controls/Table.vue b/ui/components/controls/Table.vue
new file mode 100644
index 00000000..7f18c2cd
--- /dev/null
+++ b/ui/components/controls/Table.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="form-group">
+    <model-table
+      :doctype="docfield.childtype"
+      :rows="value"
+      @update:rows="emitChange"
+    />
+  </div>
+</template>
+
+<script>
+import ModelTable from '../ModelTable';
+import Base from './Base';
+
+export default {
+  extends: Base,
+  components: {
+    ModelTable
+  },
+  methods: {
+    emitChange(rows, rowDoc) {
+      this.$emit('change', rows, rowDoc);
+    }
+  }
+}
+</script>
diff --git a/ui/components/controls/Text.vue b/ui/components/controls/Text.vue
new file mode 100644
index 00000000..46118ca0
--- /dev/null
+++ b/ui/components/controls/Text.vue
@@ -0,0 +1,23 @@
+<script>
+import Base from './Base';
+export default {
+    extends: Base,
+    methods: {
+        getInputTag() {
+            return 'textarea';
+        },
+        getInputAttrs() {
+            return {
+                id: this.id,
+                required: this.docfield.required,
+                rows: 3
+            };
+        },
+        getDomProps() {
+            return {
+                value: this.value
+            }
+        }
+    }
+}
+</script>
diff --git a/ui/pages/ListAndForm.vue b/ui/pages/ListAndForm.vue
new file mode 100644
index 00000000..e867c1c2
--- /dev/null
+++ b/ui/pages/ListAndForm.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="frappe-list-form row no-gutters">
+        <div class="col-4 border-right">
+            <frappe-list :doctype="doctype" :filters="filters" :key="doctype" />
+        </div>
+        <div class="col-8">
+            <frappe-form v-if="name" :key="doctype + name" :doctype="doctype" :name="name" @save="onSave" />
+        </div>
+    </div>
+</template>
+<script>
+import List from '../components/List/List';
+import Form from '../components/Form/Form';
+
+export default {
+    props: ['doctype', 'name', 'filters'],
+    components: {
+        FrappeList: List,
+        FrappeForm: Form
+    },
+    methods: {
+        onSave(doc) {
+             if (doc.name !== this.$route.params.name) {
+                this.$router.push(`/edit/${doc.doctype}/${doc.name}`);
+            }
+        }
+    }
+}
+</script>
+<style>
+.frappe-list-form {
+    min-height: calc(100vh - 4rem);
+}
+</style>
diff --git a/ui/pages/Report/ReportFilters.vue b/ui/pages/Report/ReportFilters.vue
new file mode 100644
index 00000000..d1595a98
--- /dev/null
+++ b/ui/pages/Report/ReportFilters.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="row pb-4">
+        <frappe-control class="col-lg col-md-3 col-sm-6"
+            v-for="docfield in filters"
+            :key="docfield.fieldname"
+            :docfield="docfield"
+            :value="$data[docfield.fieldname]"
+            @change="updateValue(docfield.fieldname, $event)"/>
+    </div>
+</template>
+<script>
+import FrappeControl from 'frappejs/ui/components/controls/FrappeControl'
+
+export default {
+    props: ['filters'],
+    data () {
+        const filterValues = {};
+        for (let filter of this.filters) {
+            filterValues[filter.fieldname] = '';
+        }
+        return {filterValues};
+    },
+    provide() {
+        return {
+            dynamicLinkTarget: (reference) => {
+                return this.filterValues[reference]
+            }
+        };
+    },
+    methods: {
+        updateValue(fieldname, value) {
+            this.filterValues[fieldname] = value;
+            this.$emit('change', this.filterValues)
+        }
+    },
+    components: {
+        FrappeControl
+    }
+}
+</script>
+<style>
+
+</style>
diff --git a/ui/pages/Report/index.vue b/ui/pages/Report/index.vue
new file mode 100644
index 00000000..8957c836
--- /dev/null
+++ b/ui/pages/Report/index.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div class="p-4">
+            <h4 class="pb-2">{{ reportConfig.title }}</h4>
+            <report-filters v-if="reportConfig.filterFields.length" :filters="reportConfig.filterFields" @change="getReportData"></report-filters>
+            <div class="pt-2" ref="datatable" v-once></div>
+        </div>
+        <not-found v-if="!reportConfig" />
+    </div>
+</template>
+<script>
+import DataTable from 'frappe-datatable'
+import frappe from 'frappejs'
+import ReportFilters from './ReportFilters'
+import utils from 'frappejs/client/ui/utils'
+
+export default {
+    props: ['reportName', 'reportConfig'],
+    computed: {
+        reportColumns() {
+            return utils.convertFieldsToDatatableColumns(this.reportConfig.getColumns())
+        }
+    },
+    methods: {
+        getReportData(filters) {
+            frappe.methods[this.reportConfig.method](filters).then(data => {
+                if (this.datatable) {
+                    this.datatable.refresh(data || [])
+                } else {
+                    this.datatable = new DataTable(this.$refs.datatable, {
+                        columns: this.reportColumns,
+                        data: data || [],
+                    });
+                }
+            })
+        }
+    },
+    components: {
+        ReportFilters,
+    }
+}
+</script>
+<style>
+</style>
diff --git a/ui/plugins/modal.js b/ui/plugins/modal.js
new file mode 100644
index 00000000..c06300f4
--- /dev/null
+++ b/ui/plugins/modal.js
@@ -0,0 +1,44 @@
+import Observable from 'frappejs/utils/observable';
+
+const Bus = new Observable();
+
+export default {
+  // enable use of this.$modal in every component
+  // this also keeps only one modal in the DOM at any time
+  // which is the recommended way by bootstrap
+  install (Vue) {
+    Vue.prototype.$modal = {
+      show(options) {
+        Bus.trigger('showModal', options);
+      },
+
+      hide() {
+        Bus.trigger('hideModal');
+      }
+    }
+
+    Vue.mixin({
+      data() {
+        return {
+          registered: false,
+          modalVisible: false,
+          modalOptions: {}
+        }
+      },
+      created: function () {
+        if (this.registered) return;
+
+        Bus.on('showModal', (options = {}) => {
+          this.modalVisible = true;
+          this.modalOptions = options;
+        });
+
+        Bus.on('hideModal', () => {
+          this.modalVisible = false;
+        });
+
+        this.registered = true;
+      }
+    });
+  }
+}
\ No newline at end of file
diff --git a/ui/routes/index.js b/ui/routes/index.js
new file mode 100644
index 00000000..5c1eef87
--- /dev/null
+++ b/ui/routes/index.js
@@ -0,0 +1,16 @@
+import ListAndForm from '../pages/ListAndForm';
+
+export default [
+  {
+    path: '/list/:doctype',
+    name: 'List',
+    component: ListAndForm,
+    props: true
+  },
+  {
+    path: '/edit/:doctype/:name',
+    name: 'Form',
+    component: ListAndForm,
+    props: true
+  }
+];
diff --git a/ui/styles/variables.scss b/ui/styles/variables.scss
new file mode 100644
index 00000000..367009b9
--- /dev/null
+++ b/ui/styles/variables.scss
@@ -0,0 +1,2 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
\ No newline at end of file