WEBAPP NEW UI FIRST COMMIT

2020-12-02 19:46:17 +00:00
parent f883f92c05
commit bb56be2730
34 changed files with 14527 additions and 33 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -17,8 +17,11 @@ workflow/engine/methods/login/version-pmos.php
 upgrade.log
 workflow/engine/gulliver
 workflow/public_html/index.html
+workflow/public_html/webapp/
+workflow/public_html/mix-manifest.json
 .DS_Store
 .idea
+.vscode/
 composer.phar
 vendor/
 workflow/engine/config/schema-transformed.xml
--- a/app/Providers/ViewServiceProvider.php
+++ b/app/Providers/ViewServiceProvider.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\View;
+use Illuminate\Support\ServiceProvider;
+
+class ViewServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->loadMigrationsFrom(__DIR__ . '/../../migrations');
+        $this->loadViewsFrom(__DIR__ . '/../../resources/views', 'Views');
+        $prefix = "http://localhost/sysworkflowviena/en/neoclassic/cases/viena";
+        View::share('rootPath', $prefix);
+    }
+}
--- a/composer.json
+++ b/composer.json
@@ -62,7 +62,8 @@
        "fzaninotto/faker": "^1.7",
        "predis/predis": "1.1.1",
        "phpmyadmin/sql-parser": "^5.3",
-        "aws/aws-sdk-php": "~3.0"
+        "aws/aws-sdk-php": "~3.0",
+        "cretueusebiu/laravel-javascript": "^0.2.1"
    },
    "require-dev": {
        "guzzlehttp/guzzle": "^6.3",
@@ -78,7 +79,7 @@
            "ProcessMaker\\": "workflow/engine/src"
        },
        "psr-4": {
-                "App\\": "app/",
+            "App\\": "app/",
            "Maveriks\\": "framework/src/Maveriks/",
            "Tests\\": "tests/"
        },
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
-    "content-hash": "5fee2ceaf7f4d761c96852141e566de9",
+    "content-hash": "b4b98120465decfffe2a22ac61ca359b",
    "packages": [
        {
            "name": "aws/aws-sdk-php",
@@ -263,6 +263,48 @@
            ],
            "time": "2020-07-24T13:14:57+00:00"
        },
+        {
+            "name": "cretueusebiu/laravel-javascript",
+            "version": "0.2.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/cretueusebiu/laravel-javascript.git",
+                "reference": "55abeb955b6bd22313abc5a8832997f607b7c2e7"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/cretueusebiu/laravel-javascript/zipball/55abeb955b6bd22313abc5a8832997f607b7c2e7",
+                "reference": "55abeb955b6bd22313abc5a8832997f607b7c2e7",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/support": "^5.1",
+                "php": ">=5.5.9"
+            },
+            "require-dev": {
+                "mockery/mockery": "0.9.*",
+                "phpunit/phpunit": "~5.7"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Eusebiu\\JavaScript\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Cretu Eusebiu",
+                    "email": "me@cretueusebiu.com"
+                }
+            ],
+            "description": "Add JavaScript variables to Laravel.",
+            "homepage": "https://github.com/cretueusebiu/laravel-javascript",
+            "time": "2017-03-09T13:55:46+00:00"
+        },
        {
            "name": "dapphp/securimage",
            "version": "3.6.8",
@@ -684,6 +726,7 @@
                "faker",
                "fixtures"
            ],
+            "abandoned": true,
            "time": "2019-12-12T13:22:17+00:00"
        },
        {
--- a/config/app.php
+++ b/config/app.php
@@ -27,8 +27,12 @@ return [
        Illuminate\Bus\BusServiceProvider::class,
        Illuminate\Redis\RedisServiceProvider::class,
        App\Providers\AppServiceProvider::class,
+        App\Providers\ViewServiceProvider::class,
+        Eusebiu\JavaScript\JavaScriptServiceProvider::class
    ],
    'aliases' => [
-        'Crypt' => Illuminate\Support\Facades\Crypt::class
+        'Crypt' => Illuminate\Support\Facades\Crypt::class,
+        'ScriptVariables' => Eusebiu\JavaScript\Facades\ScriptVariables::class,
+        'View' => Illuminate\Support\Facades\View::class
    ],
 ];
--- a/config/view.php
+++ b/config/view.php
@@ -1,5 +1,4 @@
 <?php
-
 return [
    /*
    |--------------------------------------------------------------------------
@@ -24,5 +23,5 @@ return [
    | directory. However, as usual, you are free to change this value.
    |
    */
-    'compiled' => realpath(storage_path('framework/views')),
-];
+    'compiled' => realpath(PATH_TRUNK . 'bootstrap/cache/views')
+];
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,33 +1,63 @@
 {
-  "name": "processmaker-builder",
-  "version": "1.0.0",
-  "description": "The gulp task runner for ProcessMaker building",
-  "main": "gulpfile.js",
-  "directories": {
-    "doc": "docs",
-    "test": "tests"
-  },
+  "private": true,
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "webpack": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "dev": "npm run development",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch-poll": "npm run watch -- --watch-poll",
+    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "prod": "npm run production",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@bitbucket.org/duhnnie/processmaker.git"
-  },
-  "author": "ProcessMaker",
-  "license": "ISC",
-  "homepage": "https://bitbucket.org/duhnnie/processmaker#readme",
  "devDependencies": {
-    "gulp": "^3.9.1"
+    "@fortawesome/fontawesome-free": "^5.15.1",
+    "@processmaker/vue-form-elements": "^0.1.4",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "cross-env": "^3.2.3",
+    "laravel-mix": "^2.1.14",
+    "vue-template-compiler": "^2.6.10"
  },
  "dependencies": {
-    "del": "^2.2.1",
-    "gulp-chmod": "^1.3.0",
-    "gulp-concat": "^2.6.0",
-    "gulp-exec": "^2.1.2",
-    "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.5.4",
-    "replace": "^0.3.0",
-    "underscore": "^1.8.3"
+    "axios": "^0.15.3",
+    "bootstrap": "^4.5.3",
+    "bootstrap-colorpicker": "^3.0.3",
+    "bootstrap-vue": "^2.19.0",
+    "chart.js": "^2.7.2",
+    "dateformat": "^3.0.3",
+    "font-awesome": "^4.7.0",
+    "hammerjs": "^2.0.8",
+    "hooper": "^0.3.4",
+    "idempotent-babel-polyfill": "^7.4.4",
+    "jquery": "^3.1.1",
+    "lodash": "^4.17.10",
+    "muuri": "^0.7.1",
+    "npm-font-open-sans": "^1.1.0",
+    "popper.js": "^1.12",
+    "promise-polyfill": "8.1.3",
+    "uiv": "^0.28.0",
+    "vue": "^2.6.12",
+    "vue-awesome-swiper": "^3.1.3",
+    "vue-bootstrap-typeahead": "^0.2.6",
+    "vue-chartjs": "^3.3.2",
+    "vue-clipboards": "^1.2.4",
+    "vue-color": "^2.7.0",
+    "vue-fullscreen": "^2.1.3",
+    "vue-i18n": "^8.22.2",
+    "vue-js-toggle-button": "^1.3.1",
+    "vue-muuri": "^0.1.2",
+    "vue-router": "^3.4.9",
+    "vue-search-select": "^2.7.0",
+    "vue-sidebar-menu": "^4.5.1",
+    "vue-slim-tabs": "^0.4.0",
+    "vue-split-panel": "^1.0.4",
+    "vue-tables-2": "^2.1.46",
+    "vue-upload-component": "^2.8.20",
+    "vuejs-auto-complete": "^0.9.0",
+    "vuejs-datepicker": "^1.5.4",
+    "vuejs-paginate": "^2.0.1",
+    "vuetify": "^1.1.4",
+    "web-animations-js": "^2.3.2"
  }
 }
--- a/resources/assets/js/api/Cases.js
+++ b/resources/assets/js/api/Cases.js
@@ -0,0 +1,52 @@
+import headerData from "./../mocks/casesHeader.json";
+import startedData from "./../mocks/startedCases.json";
+import inprogressData from "./../mocks/inprogressCases.json";
+import completedData from "./../mocks/completedCases.json";
+import supervisingData from "./../mocks/supervisingCases.json";
+
+export let cases = {
+    get(data) {
+        if (data.type == "STARTED_BY_ME") {
+            return new Promise((resolutionFunc, rejectionFunc) => {
+                resolutionFunc(startedData);
+            });
+        }
+        if (data.type == "IN_PROGRESS") {
+            return new Promise((resolutionFunc, rejectionFunc) => {
+                resolutionFunc(inprogressData);
+            });
+        }
+        if (data.type == "COMPLETED") {
+            return new Promise((resolutionFunc, rejectionFunc) => {
+                resolutionFunc(completedData);
+            });
+        }
+        if (data.type == "SUPERVISING") {
+            return new Promise((resolutionFunc, rejectionFunc) => {
+                resolutionFunc(supervisingData);
+            });
+        }
+    },
+    getPost(id) {
+        return Client.get(`${resource}/${id}`);
+    },
+    create(payload) {
+        return Client.post(`${resource}`, payload);
+    },
+    update(payload, id) {
+        return Client.put(`${resource}/${id}`, payload);
+    },
+    delete(id) {
+        return Client.delete(`${resource}/${id}`)
+    }
+};
+
+export let casesHeader = {
+    get() {
+        return new Promise((resolutionFunc, rejectionFunc) => {
+            resolutionFunc({
+                data: headerData
+            });
+        });
+    }
+};
--- a/resources/assets/js/api/Menu.js
+++ b/resources/assets/js/api/Menu.js
@@ -0,0 +1,9 @@
+import menuData from "./../mocks/menu.json";
+
+export let menu = {
+    get() {
+        return new Promise((resolutionFunc, rejectionFunc) => {
+            resolutionFunc(menuData);
+        });
+    },
+};
--- a/resources/assets/js/api/index.js
+++ b/resources/assets/js/api/index.js
@@ -0,0 +1,9 @@
+
+import { menu } from "./Menu";
+import { cases, casesHeader } from "./Cases";
+
+export default {
+    menu,
+    cases,
+    casesHeader
+};
--- a/resources/assets/js/components/home/ButtonFleft.vue
+++ b/resources/assets/js/components/home/ButtonFleft.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="float-right">
+    <button type="button" :class="classBtn(data.class)" @click="data.onClick">
+      <div class="v-inline">
+        <i class="fas fa-plus"></i>
+      </div>
+      <div class="v-inline .px-2">{{ data.title }}</div>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ButtonFleft",
+  props: {
+    data: Object,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.v-btn-request {
+  display: inline-block;
+}
+.v-inline {
+  display: inline-block;
+}
+</style>
--- a/resources/assets/js/components/home/HeaderCounter.vue
+++ b/resources/assets/js/components/home/HeaderCounter.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="row-cont">
+    <div class="text-center">
+      <button
+        type="button"
+        v-for="header in data"
+        :key="header.title"
+        @click="header.onClick(header)"
+        :class="classBtn(header.class)"
+      >
+        <div class="v-btn-textm-header">
+          <i :class="header.icon"></i>
+        </div>
+        <div>
+          <span class="v-btn-textb-header">
+            {{ header.counter }}
+          </span>
+        </div>
+        <span class="v-btn-texts-header">
+          {{ header.title }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HeaderCounter",
+  props: {
+    data: Array,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn btn-slim btn-force-radius v-btn-header " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.v-btn-textb-header {
+  font-size: 1.5vw;
+}
+
+.v-btn-textm-header {
+  font-size: 1vw;
+}
+
+.v-btn-texts-header {
+  font-size: 0.7vw;
+}
+.v-btn-header {
+  min-width: 150px;
+  margin-left: 5px !important;
+  margin-right: 5px !important;
+  padding-bottom: 5px !important;
+  padding-top: 5px !important;
+}
+</style>
--- a/resources/assets/js/components/home/newRequest/ProcessCard.vue
+++ b/resources/assets/js/components/home/newRequest/ProcessCard.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="v-inline v-process-card" @click="data.onClick(data)">
+    <b-card
+      :sub-title="data.title"
+      class="overflow-hidden"
+      style="min-width: 340px; max-width: 340px"
+      bg-variant="light"
+    >
+      <b-card-text class="v-process-card-text">
+        {{ data.description }}
+      </b-card-text>
+    </b-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProcessCard",
+  props: {
+    data: Object,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.v-inline {
+  display: inline-block;
+}
+
+.v-process-card {
+  margin-right: 15px;
+  margin-bottom: 15px;
+  border-left: solid lightseagreen;
+}
+
+.v-process-card-text {
+  font-size: 13px;
+}
+</style>
--- a/resources/assets/js/components/home/newRequest/ProcessCategory.vue
+++ b/resources/assets/js/components/home/newRequest/ProcessCategory.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h5>{{ data.title }}</h5>
+    <div v-for="item in data.items" :key="item.title" class="v-inline">
+      <process-card :data="item" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ProcessCard from "./ProcessCard.vue";
+export default {
+  name: "ProcessCategory",
+  components: {
+    ProcessCard,
+  },
+  props: {
+    data: Object,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+</style>
--- a/resources/assets/js/components/menu/CustomSidebar.vue
+++ b/resources/assets/js/components/menu/CustomSidebar.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <sidebar-menu
+      ref="sidebar"
+      :width="sidebarWidth"
+      :menu="menu"
+      :hideToggle="hideToggle"
+      :collapsed="collapsed"
+      :theme="selectedTheme"
+      :show-one-child="true"
+      @item-click="onItemClick"
+    >
+      <div slot="header">
+        <div class="text-right" @click="onToggleClick">
+          <b-icon :icon="className"></b-icon>
+        </div>
+      </div>
+    </sidebar-menu>
+  </div>
+</template>
+
+<script>
+import api from "./../../api/index";
+
+export default {
+  name: "CustomSidebar",
+  data() {
+    return {
+      menu: [],
+      collapsed: false,
+      isOnMobile: false,
+      hideToggle: true,
+      selectedTheme: "",
+      sidebarWidth: "310px",
+    };
+  },
+  computed: {
+    className() {
+      return this.collapsed
+        ? "arrow-right-circle-fill"
+        : "arrow-left-circle-fill";
+    },
+  },
+  mounted() {
+    this.onResize();
+    window.addEventListener("resize", this.onResize);
+    api.menu
+      .get()
+      .then((response) => {
+        this.menu = response;
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  },
+  methods: {
+    onToggleClick() {
+      this.$refs.sidebar.$emit("toggle-collapse", this.collapsed);
+      this.collapsed = !this.collapsed;
+    },
+    createCounter() {
+      let els = document.querySelectorAll("a[href='#/foo']");
+      this.inboxCounter = document.createElement("span");
+      this.inboxCounter.setAttribute(
+        "class",
+        "float-right badge badge-light navBadget"
+      );
+      this.inboxCounter.innerHTML += "5";
+      if (els && els[0]) {
+        els[0].appendChild(this.inboxCounter);
+      }
+    },
+    onToggleCollapse(collapsed) {
+      console.log(collapsed);
+      this.collapsed = collapsed;
+    },
+    onItemClick(event, item, node) {
+      this.$emit("OnClickSidebarItem", { item });
+    },
+    onResize() {
+      if (window.innerWidth <= 767) {
+        this.isOnMobile = true;
+        this.collapsed = true;
+      } else {
+        this.isOnMobile = false;
+        this.collapsed = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.badge-custom {
+  color: #000;
+  background-color: #d4dfe6;
+  padding: 0px 6px;
+  font-size: 12px;
+  border-radius: 3px;
+  height: 20px;
+  line-height: 20px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.text-right {
+  color: white;
+  font-size: x-large;
+  margin: 3px;
+  margin-right: 16px;
+}
+.sidebar-overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 0.5;
+  z-index: 900;
+}
+
+pre {
+  font-family: Consolas, monospace;
+  color: #000;
+  background: #fff;
+  border-radius: 2px;
+  padding: 15px;
+  line-height: 1.5;
+  overflow: auto;
+}
+</style>
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -0,0 +1,88 @@
+<template>
+  <div id="home" :class="[{ collapsed: collapsed }, { onmobile: isOnMobile }]">
+    <div class="demo">
+      <div class="container">
+        <router-view />
+      </div>
+
+      <CustomSidebar @OnClickSidebarItem="OnClickSidebarItem" />
+      <div
+        v-if="isOnMobile && !collapsed"
+        class="sidebar-overlay"
+        @click="collapsed = true"
+      />
+
+      <component v-bind:is="page"></component>
+    </div>
+  </div>
+</template> onResize() {
+            if (window.innerWidth <= 767) {
+                this.isOnMobile = true;
+                this.collapsed = true;
+            } else {
+                this.isOnMobile = false;
+                this.collapsed = false;
+            }
+        },
+
+<script>
+import CustomSidebar from "./../components/menu/CustomSidebar";
+import MyCases from "./MyCases";
+
+
+export default {
+    name: "Home",
+    components: {
+        CustomSidebar,
+        MyCases
+    },
+    data() {
+        return {
+            page:"MyCases",
+            menu: [],
+            hideToggle: true,
+            collapsed: false,
+            selectedTheme: "",
+            isOnMobile: false,
+            sidebarWidth: "310px",
+        };
+    },
+    mounted() {
+        this.onResize();
+        window.addEventListener("resize", this.onResize);
+    },
+    methods: {
+        OnClickSidebarItem(item) {
+            console.log(item);
+        },
+        onResize() {
+            if (window.innerWidth <= 767) {
+                this.isOnMobile = true;
+                this.collapsed = true;
+            } else {
+                this.isOnMobile = false;
+                this.collapsed = false;
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+#home {
+  padding-left: 310px;
+  transition: 0.3s ease;
+}
+#home.collapsed {
+  padding-left: 50px;
+}
+#home.onmobile {
+  padding-left: 50px;
+}
+
+.container {
+  max-width: 1500px;
+}
+</style>
+
+</style>
--- a/resources/assets/js/home/ModalNewRequest.vue
+++ b/resources/assets/js/home/ModalNewRequest.vue
--- a/resources/assets/js/home/MyCases.vue
+++ b/resources/assets/js/home/MyCases.vue
--- a/resources/assets/js/home/main.js
+++ b/resources/assets/js/home/main.js
@@ -0,0 +1,56 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import VueSidebarMenu from "vue-sidebar-menu";
+import VueI18n from 'vue-i18n';
+import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
+import { ServerTable } from 'vue-tables-2';
+import "@fortawesome/fontawesome-free/css/all.css";
+import "@fortawesome/fontawesome-free/js/all.js";
+import 'bootstrap/dist/css/bootstrap-grid.css';
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+import Home from "./Home";
+
+Vue.use(VueRouter);
+Vue.use(VueSidebarMenu);
+Vue.use(BootstrapVue);
+Vue.use(BootstrapVueIcons);
+Vue.use(VueI18n);
+Vue.use(ServerTable, {}, false, 'bootstrap3', {});
+//TODO REMOVE THIS SECTION
+window.PMAPI2 = {
+    apiClient: require('axios')
+};
+window.ProcessMaker = {
+    apiClient: require('axios')
+};
+window.ProcessMaker.pluginBase = "/sysworkflow/en/neoclassic/viena/index.php";
+window.ProcessMaker.apiClient.defaults.baseURL = '/sysworkflow/en/neoclassic/viena/index.php/api/';
+window.ProcessMaker.SYS_SYS = "workflow";
+window.ProcessMaker.SYS_LANG = "en";
+window.ProcessMaker.SYS_SKIN = "neoclassic";
+
+let messages = {};
+messages[config.SYS_LANG] = config.TRANSLATIONS;
+const i18n = new VueI18n({
+    locale: config.SYS_LANG, // set locale
+    messages, // set locale messages
+});
+
+// Define routes
+const routes = [
+    //{ path: "/advanced-search", component: AdvancedSearch }
+];
+
+const router = new VueRouter({
+    routes, // short for `routes: routes`,
+});
+
+new Vue({
+    i18n,
+    // eslint-disable-line no-new
+    el: "#home",
+    router,
+    render: (h) => h(Home),
+});
--- a/resources/assets/js/mocks/casesHeader.json
+++ b/resources/assets/js/mocks/casesHeader.json
@@ -0,0 +1,22 @@
+[
+    {
+        "item": "STARTED_BY_ME",
+        "name": "Started by Me",
+        "count": 28
+    },
+    {
+        "item": "IN_PROGRESS",
+        "count": 40,
+        "name": "In progress"
+    },
+    {
+        "item": "COMPLETED",
+        "count": 10,
+        "name": "Completed"
+    },
+    {
+        "item": "SUPERVISING",
+        "count": 18,
+        "name": "Supervising"
+    }
+]
--- a/resources/assets/js/mocks/completedCases.json
+++ b/resources/assets/js/mocks/completedCases.json
@@ -0,0 +1,135 @@
+{
+    "data": [
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Completed Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Completed Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Completed Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Completed Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Completed Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Completed Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Completed Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Completed Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Completed Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Completed Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        }
+    ],
+    "total": 142
+}
--- a/resources/assets/js/mocks/inprogressCases.json
+++ b/resources/assets/js/mocks/inprogressCases.json
@@ -0,0 +1,135 @@
+{
+    "data": [
+        {
+            "APP_NUMBER": "23",
+            "APP_TITLE": "In progress Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "24",
+            "APP_TITLE": "In progress Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "45",
+            "APP_TITLE": "In progress Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "67",
+            "APP_TITLE": "In progress Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "798",
+            "APP_TITLE": "In progress Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "45",
+            "APP_TITLE": "In progress Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "34",
+            "APP_TITLE": "In progress Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "23",
+            "APP_TITLE": "In progress Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "12",
+            "APP_TITLE": "In progress Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "56",
+            "APP_TITLE": "In progress Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        }
+    ],
+    "total": 142
+}
--- a/resources/assets/js/mocks/menu.json
+++ b/resources/assets/js/mocks/menu.json
@@ -0,0 +1,130 @@
+[
+    {
+      "header": true,
+      "title": "Home",
+      "hiddenOnCollapse": true
+    },
+    {
+      "href": "/",
+      "title": "My Cases",
+      "icon": "fas fa-sliders-h"
+    },
+    {
+      "href": "/advanced-search",
+      "title": "Advanced Search",
+      "icon": "fas fa-search"
+    },
+    {
+      "header": true,
+      "title": "Tasks",
+      "hiddenOnCollapse": true
+    },
+    {
+      "href": "/todo",
+      "title": "Todo",
+      "icon": "far fa-check-circle",
+      "badge": {
+        "text": "23",
+        "class": "badge-custom"
+      }
+    },
+    {
+      "href": "/draft",
+      "title": "Draft",
+      "icon": "far fa-edit",
+      "badge": {
+        "text": "1",
+        "class": "badge-custom"
+      }
+    },
+    {
+      "href": "/paused",
+      "title": "Paused",
+      "icon": "far fa-pause-circle",
+      "badge": {
+        "text": "7",
+        "class": "badge-custom"
+      }
+    },
+    {
+      "href": "/unassigned",
+      "title": "Unassigned",
+      "icon": "fas fa-crosshairs",
+      "badge": {
+        "text": "99+",
+        "class": "badge-custom"
+      }
+    },
+    {
+      "header": true,
+      "title": "Supervisor Tasks",
+      "hiddenOnCollapse": true
+    },
+    {
+      "href": "/batch-routing",
+      "title": "Batch Routing",
+      "icon": "fas fa-bars",
+      "disabled": true
+    },
+    {
+      "href": "/task-Reassignments",
+      "title": "Task Reassignments",
+      "icon": "fas fa-arrows-alt"
+    },
+    {
+      "href": "/page",
+      "title": "Dropdown Page",
+      "icon": "fa fa-list-ul",
+      "child": [
+        {
+          "href": "/page/sub-page-1",
+          "title": "Sub Page 01",
+          "icon": "fa fa-file-alt"
+        },
+        {
+          "href": "/page/sub-page-2",
+          "title": "Sub Page 02",
+          "icon": "fa fa-file-alt"
+        }
+      ]
+    },
+    {
+      "title": "Multiple Level",
+      "icon": "fa fa-list-alt",
+      "child": [
+        {
+          "title": "page"
+        },
+        {
+          "title": "Level 2 ",
+          "child": [
+            {
+              "title": "page"
+            },
+            {
+              "title": "Page"
+            }
+          ]
+        },
+        {
+          "title": "Page"
+        },
+        {
+          "title": "Another Level 2",
+          "child": [
+            {
+              "title": "Level 3",
+              "child": [
+                {
+                  "title": "Page"
+                },
+                {
+                  "title": "Page"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
--- a/resources/assets/js/mocks/startedCases.json
+++ b/resources/assets/js/mocks/startedCases.json
@@ -0,0 +1,135 @@
+{
+    "data": [
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "11",
+            "APP_TITLE": "Vacation Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        }
+    ],
+    "total": 142
+}
--- a/resources/assets/js/mocks/supervisingCases.json
+++ b/resources/assets/js/mocks/supervisingCases.json
@@ -0,0 +1,135 @@
+{
+    "data": [
+        {
+            "APP_NUMBER": "23",
+            "APP_TITLE": "Supervising Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "24",
+            "APP_TITLE": "Supervising Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "45",
+            "APP_TITLE": "Supervising Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "67",
+            "APP_TITLE": "Supervising Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "798",
+            "APP_TITLE": "Supervising Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "45",
+            "APP_TITLE": "Supervising Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "34",
+            "APP_TITLE": "Supervising Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "23",
+            "APP_TITLE": "Supervising Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "12",
+            "APP_TITLE": "Supervising Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        },
+        {
+            "APP_NUMBER": "56",
+            "APP_TITLE": "Supervising Request",
+            "PRO_TITLE": "Leave abscense Request",
+            "TAS_TITLE": "Aprove vacation",
+            "APP_STATUS": "IN PROGRESS",
+            "DEL_DELEGATE_DATE": "10/10/10",
+            "DEL_DELEGATE_DATE_LABEL": "Nov 17th 2017",
+            "DEL_FINISH_DATE": "10/10/10",
+            "DEL_FINISH_DATE_LABEL": "January 17th 2017",
+            "DURATION": "4 days",
+            "DURATION_LABEL": "4 months 4 days"
+        }
+    ],
+    "total": 142
+}
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -0,0 +1 @@
+@import './menu.scss';
--- a/resources/assets/sass/menu.scss
+++ b/resources/assets/sass/menu.scss
--- a/resources/views/home/home.blade.php
+++ b/resources/views/home/home.blade.php
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>{{G::Loadtranslation('ID_HOME')}}</title>
+    <link rel="stylesheet" href="/webapp/css/app.css">
+</head>
+
+<body>
+    {{ ScriptVariables::render() }}
+    <div id="home">
+    </div>
+</body>
+<script type="text/javascript" src="/webapp/js/home/main.js"></script>
+
+</html>
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,29 @@
+/**
+ * As our first step, we'll pull in the user's webpack.mix.js
+ * file. Based on what the user requests in that file,
+ * a generic config object will be constructed for us.
+ */
+let mix = require('../src/index');
+
+let ComponentFactory = require('../src/components/ComponentFactory');
+
+new ComponentFactory().installAll();
+
+require(Mix.paths.mix());
+
+/**
+ * Just in case the user needs to hook into this point
+ * in the build process, we'll make an announcement.
+ */
+
+Mix.dispatch('init', Mix);
+
+/**
+ * Now that we know which build tasks are required by the
+ * user, we can dynamically create a configuration object
+ * for Webpack. And that's all there is to it. Simple!
+ */
+
+let WebpackConfig = require('../src/builder/WebpackConfig');
+
+module.exports = new WebpackConfig().build();
--- a/Show More
+++ b/Show More