WEBAPP NEW UI FIRST COMMIT

.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

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);
+    }
+}

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",

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"
         },
         {

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
     ],
 ];

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')
 ];

package.json

@@ -1,33 +1,63 @@
 {
-  "name": "processmaker-builder",
+  "private": true,
-  "version": "1.0.0",
-  "description": "The gulp task runner for ProcessMaker building",
-  "main": "gulpfile.js",
-  "directories": {
-    "doc": "docs",
-    "test": "tests"
-  },
   "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",
+    "axios": "^0.15.3",
-    "gulp-chmod": "^1.3.0",
+    "bootstrap": "^4.5.3",
-    "gulp-concat": "^2.6.0",
+    "bootstrap-colorpicker": "^3.0.3",
-    "gulp-exec": "^2.1.2",
+    "bootstrap-vue": "^2.19.0",
-    "gulp-rename": "^1.2.2",
+    "chart.js": "^2.7.2",
-    "gulp-replace": "^0.5.4",
+    "dateformat": "^3.0.3",
-    "replace": "^0.3.0",
+    "font-awesome": "^4.7.0",
-    "underscore": "^1.8.3"
+    "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"
   }
 }

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
+            });
+        });
+    }
+};

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);
+        });
+    },
+};

resources/assets/js/api/index.js

@@ -0,0 +1,9 @@
+
+import { menu } from "./Menu";
+import { cases, casesHeader } from "./Cases";
+
+export default {
+    menu,
+    cases,
+    casesHeader
+};

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>

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>

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>

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>

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>

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>

resources/assets/js/home/ModalNewRequest.vue

@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <b-modal
+      ref="my-modal"
+      hide-footer
+      title="Weve made it easy for you to make the following request"
+      size="xl"
+    >
+      <div class="input-group mb-3">
+        <div class="input-group-prepend">
+          <span class="input-group-text" id="basic-addon1"
+            ><i class="fas fa-search"></i
+          ></span>
+        </div>
+        <input
+          v-model="filter"
+          type="text"
+          class="form-control"
+          placeholder="Search"
+          aria-label="Search"
+          aria-describedby="basic-addon1"
+          @input="onChangeFilter"
+        />
+      </div>
+      <div v-for="item in categories" :key="item.title">
+        <process-category :data="item" />
+      </div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import ProcessCategory from "./../components/home/newRequest/ProcessCategory.vue";
+import api from "./../api/index";
+import _ from "lodash";
+export default {
+  name: "ModalNewRequest",
+  components: {
+    ProcessCategory,
+  },
+  props: {
+    data: Object,
+  },
+  mounted() {
+    //this.categoriesFiltered = this.categories;
+  },
+  data() {
+    return {
+      filter: "",
+      categories: [],
+      //Data for test
+      dataCaseSummary: {
+        title: "Case Summary",
+        titleActions: "Actions",
+        btnLabel: "Success",
+        onClick: () => {
+          console.log("acitons");
+        },
+        label: {
+          numberCase: "Case #",
+          process: "Process",
+          status: "Status",
+          caseTitle: "Case title",
+          created: "Created",
+          delegationDate: "Delegation Date",
+          duration: "Duration",
+        },
+        text: {
+          numberCase: "123",
+          process: "Leave Absence Request",
+          status: "In progress",
+          caseTitle: "CVacation request for Enrique",
+          created: "# days Ago",
+          delegationDate: "10 mins ago",
+          duration: "34hrs",
+        },
+      },
+      dataAttachedDocuments: {
+        title: "Attached Documents",
+        items: [
+          {
+            title: "Invoice January 2018.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "Invoice Febrauery 2018.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "GPRD Employee GR90.doc",
+            extension: "doc",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "Contract one tres.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "GPRD Employee 2020.doc",
+            extension: "doc",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+        ],
+      },
+      dataIoDocuments: {
+        titleInput: "Input Document",
+        inputDocuments: [
+          {
+            title: "Invoice January 2018.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "Invoice Febrauery 2018.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "GPRD Employee GR90.doc",
+            extension: "doc",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "Contract one tres.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "GPRD Employee 2020.doc",
+            extension: "doc",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+        ],
+        titleOutput: "Output Document",
+        outputDocuments: [
+          {
+            title: "Invoice January 2018.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "Invoice Febrauery 2018.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "GPRD Employee GR90.doc",
+            extension: "doc",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "Contract one tres.pdf",
+            extension: "pdf",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+          {
+            title: "GPRD Employee 2020.doc",
+            extension: "doc",
+            onClick: () => {
+              console.log("Attached document");
+            },
+          },
+        ],
+      },
+      dataComments: {
+        title: "Comments",
+        items: [
+          {
+            user: "Gustavo Cruz",
+            date: "Today 2:38",
+            comment:
+              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod http://wwwwww.com tempoua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.",
+          },
+          {
+            user: "Gustavo Cruz",
+            date: "Today 2:39",
+            comment:
+              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod http://wwwwww.com tempoua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.",
+          },
+          {
+            user: "Gustavo Cruz",
+            date: "Today 2:40",
+            comment:
+              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod http://wwwwww.com tempoua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+    show() {
+      this.$refs["my-modal"].show();
+      this.getProcess();
+    },
+    getProcess() {
+      let that = this;
+      api.process
+        .get()
+        .then((response) => {
+          that.categories = that.formatResponseGetProcess(response);
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    /**
+     * Change the property filter
+     */
+    onChangeFilter() {
+      let that = this,
+        categories = [],
+        processes = [];
+      this.categoriesFiltered = [];
+      _.each(this.categories, (o) => {
+        processes = that.filterProcesses(o.items);
+        if (processes.length != 0) {
+          that.categoriesFiltered.push({
+            title: o.title,
+            items: processes,
+          });
+        }
+      });
+    },
+    /**
+     * Filter the processes in category, serach by title and description
+     */
+    filterProcesses(processes) {
+      let that = this;
+      return _.filter(processes, (p) => {
+        return (
+          _.toLower(p.title).search(_.lowerCase(that.filter)) != -1 ||
+          _.toLower(p.description).search(_.lowerCase(that.filter)) != -1
+        );
+      });
+    },
+    formatResponseGetProcess(response) {
+      let res = [],
+        items,
+        that = this,
+        data = response.data;
+      _.each(data, (o) => {
+        items = [];
+        _.each(o.children, (v) => {
+          items.push({
+            title: v.otherAttributes.value,
+            task_uid: v.tas_uid,
+            pro_uid: v.pro_uid,
+            description: v.otherAttributes.catname,
+            onClick: that.startNewCase,
+          });
+        });
+        res.push({
+          title: o.text,
+          items: items,
+        });
+      });
+      return res;
+    },
+    startNewCase(dt) {
+      let self = this;
+      api.cases
+        .start(dt)
+        .then(function (data) {
+          console.log("newCase yeah!!!!!!!!!!");
+          if (self.isIE) {
+            window.open(data.data.url);
+          } else {
+            window.location.href = `http://localhost/sysworkflow/en/neoclassic/viena/index.php/cases/xcase/project/${dt.pro_uid}/activity/${dt.task_uid}/case/${data.data.caseId}/index/${data.data.caseIndex}`;
+          }
+        })
+        .catch((err) => {
+          throw new Error(err);
+        });
+    },
+  },
+};
+</script>
+
+<style>
+</style>

resources/assets/js/home/MyCases.vue

@@ -0,0 +1,373 @@
+<template>
+  <div id="v-mycases" ref="v-mycases" class="v-container-mycases">
+    <button-fleft :data="newCase"></button-fleft>
+    <header-counter :data="headers"> </header-counter>
+    <modal-new-request ref="newRequest"></modal-new-request>
+
+    <v-server-table
+      :data="tableData"
+      :columns="columns"
+      :options="options"
+      ref="vueTable"
+    >
+      <div slot="case_number" slot-scope="props">
+        {{ props.row.CASE_NUMBER }}
+      </div>
+      <div slot="case_title" slot-scope="props">
+        {{ props.row.CASE_TITLE }}
+      </div>
+      <div slot="process_name" slot-scope="props">
+        {{ props.row.PROCESS_NAME }}
+      </div>
+      <div slot="status" slot-scope="props">{{ props.row.STATUS }}</div>
+      <div slot="start_date" slot-scope="props">
+        {{ props.row.START_DATE }}
+      </div>
+      <div slot="finish_date" slot-scope="props">
+        {{ props.row.FINISH_DATE }}
+      </div>
+      <div slot="duration" slot-scope="props">{{ props.row.DURATION }}</div>
+      <div slot="actions" slot-scope="props">
+        <div class="btn-default">
+          <i class="fas fa-comments"></i>
+          <span class="badge badge-light">9</span>
+          <span class="sr-only">unread messages</span>
+        </div>
+      </div>
+    </v-server-table>
+  </div>
+</template>
+
+<script>
+import HeaderCounter from "../components/home/HeaderCounter.vue";
+import ButtonFleft from "../components/home/ButtonFleft.vue";
+import ModalNewRequest from "./ModalNewRequest.vue";
+import api from "./../api/index";
+
+export default {
+  name: "MyCases",
+  components: {
+    HeaderCounter,
+    ButtonFleft,
+    ModalNewRequest,
+  },
+  props: {},
+  data() {
+    return {
+      metrics: [],
+      filter: "CASES_INBOX",
+      allView: [],
+      filterHeader: "STARTED_BY_ME",
+      headers: [],
+      newCase: {
+        title: "New Case",
+        class: "btn-success",
+        onClick: () => {
+          this.$refs["newRequest"].show();
+        },
+      },
+      columns: [
+        "case_number",
+        "case_title",
+        "process_name",
+        "status",
+        "start_date",
+        "finish_date",
+        "duration",
+        "actions",
+      ],
+      tableData: [],
+      options: {
+        headings: {
+          case_number: "ID_CASE_NUMBER",
+          case_title: "ID_CASE_TITLE",
+          process_name: "ID_PROCESS_NAME",
+          status: "ID_STATUS",
+          start_date: "ID_START_DATE",
+          finish_date: "ID_FINISH_DATE",
+          duration: "ID_DURATION",
+          actions: "",
+        },
+        selectable: {
+          mode: "single",
+          only: function (row) {
+            return true;
+          },
+          selectAllMode: "page",
+          programmatic: false,
+        },
+        requestFunction(data) {
+          return this.$parent.$parent.getCasesForVueTable();
+        },
+      },
+      translations: null,
+      pmDateFormat: "Y-m-d H:i:s",
+      //// NEW PARAMETERS FOR HENRY
+      apiParams: {
+        action: "todo",
+        list: "inbox",
+        filter: "",
+        search: "",
+        sort: "APP_NUMBER",
+        dir: "DESC",
+        category: "",
+        process: "",
+        filterStatus: "",
+        paged: true,
+        start: 0,
+        limit: 10,
+      },
+    };
+  },
+  mounted() {
+    this.getHeaders();
+    document.body.querySelector(".pmDynaformLoading").style.display = "none";
+  },
+  watch: {},
+  computed: {
+    /**
+     * Build our ProcessMaker apiClient
+     */
+    ProcessMaker() {
+      return window.ProcessMaker;
+    },
+  },
+  updated() {},
+  beforeCreate() {},
+  methods: {
+    /**
+     * Get Cases Headers from BE
+     */
+    getHeaders() {
+      let that = this;
+      api.casesHeader.get().then((response) => {
+        that.headers = that.formatCasesHeaders(response.data);
+      });
+    },
+    /**
+     * Get cases data by header
+     */
+    getCasesForVueTable() {
+      let that = this,
+        dt;
+      return new Promise((resolutionFunc, rejectionFunc) => {
+        api.cases
+          .get({
+            type: that.filterHeader,
+          })
+          .then((response) => {
+            dt = that.formatDataResponse(response.data);
+            resolutionFunc({
+              data: dt,
+              count: response.total,
+            });
+          })
+          .catch((e) => {
+            rejectionFunc(e);
+          });
+      });
+    },
+    /**
+     * Format Response API TODO to grid inbox and columns
+     */
+    formatDataResponse(response) {
+      let data = [];
+      _.forEach(response, (v) => {
+        data.push({
+          CASE_NUMBER: v.APP_NUMBER,
+          CASE_TITLE: v.APP_TITLE,
+          PROCESS_NAME: v.PRO_TITLE,
+          STATUS: v.APP_STATUS,
+          START_DATE: v.DEL_DELEGATE_DATE_LABEL,
+          FINISH_DATE: v.DEL_DELEGATE_DATE_LABEL,
+          DURATION: v.DURATION_LABEL,
+        });
+      });
+      return data;
+    },
+    /**
+     * Get for user format name configured in Processmaker Environment Settings
+     *
+     * @param {string} name
+     * @param {string} lastName
+     * @param {string} userName
+     * @return {string} nameFormat
+     */
+    nameFormatCases(name, lastName, userName) {
+      let nameFormat = "";
+      if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
+        return nameFormat;
+      }
+      if (this.nameFormat === "@firstName @lastName") {
+        nameFormat = name + " " + lastName;
+      } else if (this.nameFormat === "@firstName @lastName (@userName)") {
+        nameFormat = name + " " + lastName + " (" + userName + ")";
+      } else if (this.nameFormat === "@userName") {
+        nameFormat = userName;
+      } else if (this.nameFormat === "@userName (@firstName @lastName)") {
+        nameFormat = userName + " (" + name + " " + lastName + ")";
+      } else if (this.nameFormat === "@lastName @firstName") {
+        nameFormat = lastName + " " + name;
+      } else if (this.nameFormat === "@lastName, @firstName") {
+        nameFormat = lastName + ", " + name;
+      } else if (this.nameFormat === "@lastName, @firstName (@userName)") {
+        nameFormat = lastName + ", " + name + " (" + userName + ")";
+      } else {
+        nameFormat = name + " " + lastName;
+      }
+      return nameFormat;
+    },
+    /**
+     * Convert string to date format
+     *
+     * @param {string} value
+     * @return {date} myDate
+     */
+    convertDate(value) {
+      myDate = new Date(1900, 0, 1, 0, 0, 0);
+      try {
+        if (!isNaN(Date.parse(value))) {
+          var myArray = value.split(" ");
+          var myArrayDate = myArray[0].split("-");
+          if (myArray.length > 1) {
+            var myArrayHour = myArray[1].split(":");
+          } else {
+            var myArrayHour = new Array("0", "0", "0");
+          }
+          var myDate = new Date(
+            myArrayDate[0],
+            myArrayDate[1] - 1,
+            myArrayDate[2],
+            myArrayHour[0],
+            myArrayHour[1],
+            myArrayHour[2]
+          );
+        }
+      } catch (err) {
+        throw new Error(err);
+      }
+      return myDate;
+    },
+    /**
+     * Get a format for specific date
+     *
+     * @param {string} d
+     * @return {string} dateToConvert
+     */
+    dateFormatCases(d) {
+      let dateToConvert = d;
+      const stringToDate = this.convertDate(dateToConvert);
+      if (this.pmDateFormat === "Y-m-d H:i:s") {
+        dateToConvert = dateFormat(stringToDate, "yyyy-mm-dd HH:MM:ss");
+      } else if (this.pmDateFormat === "d/m/Y") {
+        dateToConvert = dateFormat(stringToDate, "dd/mm/yyyy");
+      } else if (this.pmDateFormat === "m/d/Y") {
+        dateToConvert = dateFormat(stringToDate, "mm/dd/yyyy");
+      } else if (this.pmDateFormat === "Y/d/m") {
+        dateToConvert = dateFormat(stringToDate, "yyyy/dd/mm");
+      } else if (this.pmDateFormat === "Y/m/d") {
+        dateToConvert = dateFormat(stringToDate, "yyyy/mm/dd");
+      } else if (this.pmDateFormat === "F j, Y, g:i a") {
+        dateToConvert = dateFormat(stringToDate, "mmmm d, yyyy, h:MM tt");
+      } else if (this.pmDateFormat === "m.d.y") {
+        dateToConvert = dateFormat(stringToDate, "mm.dd.yy");
+      } else if (this.pmDateFormat === "j, n, Y") {
+        dateToConvert = dateFormat(stringToDate, "d,m,yyyy");
+      } else if (this.pmDateFormat === "D M j G:i:s T Y") {
+        dateToConvert = dateFormat(stringToDate, "ddd mmm d HH:MM:ss Z yyyy");
+      } else if (this.pmDateFormat === "M d, Y") {
+        dateToConvert = dateFormat(stringToDate, "mmm dd, yyyy");
+      } else if (this.pmDateFormat === "m D, Y") {
+        dateToConvert = dateFormat(stringToDate, "mm ddd, yyyy");
+      } else if (this.pmDateFormat === "D d M, Y") {
+        dateToConvert = dateFormat(stringToDate, "ddd dd mmm, yyyy");
+      } else if (this.pmDateFormat === "D M, Y") {
+        dateToConvert = dateFormat(stringToDate, "ddd mmm, yyyy");
+      } else if (this.pmDateFormat === "d M, Y") {
+        dateToConvert = dateFormat(stringToDate, "dd mmm, yyyy");
+      } else if (this.pmDateFormat === "d m, Y") {
+        dateToConvert = dateFormat(stringToDate, "dd mm, yyyy");
+      } else if (this.pmDateFormat === "d.m.Y") {
+        dateToConvert = dateFormat(stringToDate, "mm.dd.yyyy");
+      } else {
+        dateToConvert = dateFormat(stringToDate, 'dd "de" mmmm "de" yyyy');
+      }
+      return dateToConvert;
+    },
+    /**
+     * Open selected cases in the inbox
+     *
+     * @param {object} item
+     */
+    openCase(item) {
+      const action = "todo";
+      if (this.isIE) {
+        window.open(
+          "../../../cases/open?APP_UID=" +
+            item.row.APP_UID +
+            "&DEL_INDEX=" +
+            item.row.DEL_INDEX +
+            "&action=" +
+            action
+        );
+      } else {
+        window.location.href =
+          "../../../cases/open?APP_UID=" +
+          item.row.APP_UID +
+          "&DEL_INDEX=" +
+          item.row.DEL_INDEX +
+          "&action=" +
+          action;
+      }
+    },
+    /**
+     * Format Response from HEADERS
+     * @param {*} response
+     */
+    formatCasesHeaders(response) {
+      let data = [],
+        that = this,
+        info = {
+          STARTED_BY_ME: {
+            icon: "fas fa-inbox",
+            class: "btn-primary",
+          },
+          COMPLETED: {
+            icon: "fas fa-check-square",
+            class: "btn-success",
+          },
+          IN_PROGRESS: {
+            icon: "fas fa-tasks",
+            class: "btn-danger",
+          },
+          SUPERVISING: {
+            icon: "fas fa-binoculars",
+            class: "btn-warning",
+          },
+        };
+      _.forEach(response, (v) => {
+        data.push({
+          title: v.name,
+          counter: v.count,
+          item: v.item,
+          icon: info[v.item].icon,
+          onClick: (obj) => {
+            that.filterHeader = obj.item;
+            that.$refs["vueTable"].getData();
+          },
+          class: info[v.item].class,
+        });
+      });
+      return data;
+    },
+  },
+};
+</script>
+<style>
+.v-container-mycases {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+</style>

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),
+});

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"
+    }
+]

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
+}

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
+}

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"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]

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
+}

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
+}

resources/assets/sass/app.scss

@@ -0,0 +1 @@
+@import './menu.scss';

resources/assets/sass/menu.scss

@@ -0,0 +1,397 @@
+.v-sidebar-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  z-index: 999;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  -webkit-transition: 0.3s max-width;
+  transition: 0.3s max-width
+}
+
+.v-sidebar-menu * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+.v-sidebar-menu>.vsm--list {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden
+}
+
+.v-sidebar-menu .vsm--dropdown>.vsm--list {
+  padding: 5px
+}
+
+.v-sidebar-menu .vsm--item {
+  position: relative;
+  display: block;
+  width: 100%
+}
+
+.v-sidebar-menu .vsm--link {
+  cursor: pointer;
+  position: relative;
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 8px;
+  line-height: 30px;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 20;
+  -webkit-transition: 0.3s all;
+  transition: 0.3s all
+}
+
+.v-sidebar-menu .vsm--link_exact-active,
+.v-sidebar-menu .vsm--link_active {
+  font-weight: 600
+}
+
+.v-sidebar-menu .vsm--link_disabled {
+  opacity: 0.4;
+  pointer-events: none
+}
+
+.v-sidebar-menu .vsm--link_level-1 .vsm--icon {
+  height: 30px;
+  line-height: 30px;
+  width: 30px;
+  text-align: center;
+  border-radius: 3px
+}
+
+.v-sidebar-menu .vsm--link:after {
+  content: '';
+  display: block;
+  clear: both
+}
+
+.v-sidebar-menu .vsm--link_mobile-item {
+  background-color: transparent
+}
+
+.v-sidebar-menu .vsm--link_mobile-item.vsm--link_hover,
+.v-sidebar-menu .vsm--link_mobile-item:hover {
+  background-color: transparent !important
+}
+
+.v-sidebar-menu .vsm--title {
+  display: block;
+  white-space: nowrap;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v-sidebar-menu .vsm--icon {
+  float: left;
+  line-height: 30px;
+  margin-right: 10px
+}
+
+.v-sidebar-menu .vsm--arrow {
+  width: 30px;
+  text-align: center;
+  font-style: normal;
+  font-weight: 900;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  -webkit-transition: 0.3s -webkit-transform;
+  transition: 0.3s -webkit-transform;
+  transition: 0.3s transform;
+  transition: 0.3s transform, 0.3s -webkit-transform
+}
+
+.v-sidebar-menu .vsm--arrow:after {
+  content: '\f0a9';
+  font-family: 'FontAwesome'
+}
+
+.v-sidebar-menu .vsm--arrow_open {
+  -webkit-transform: translateY(-50%) rotate(90deg);
+  transform: translateY(-50%) rotate(90deg)
+}
+
+.v-sidebar-menu .vsm--arrow_slot:after {
+  display: none
+}
+
+.v-sidebar-menu .vsm--header {
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px;
+  white-space: nowrap;
+  text-transform: uppercase
+}
+
+.v-sidebar-menu .vsm--badge {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%)
+}
+
+.v-sidebar-menu .vsm--badge_default {
+  padding: 0px 6px;
+  font-size: 12px;
+  border-radius: 3px;
+  height: 20px;
+  line-height: 20px;
+  font-weight: 600;
+  text-transform: uppercase
+}
+
+.v-sidebar-menu .vsm--toggle-btn {
+  display: block;
+  text-align: center;
+  font-style: normal;
+  font-weight: 900;
+  height: 50px;
+  cursor: pointer;
+  border: none;
+  width: 100%
+}
+
+.v-sidebar-menu .vsm--toggle-btn:after {
+  content: '\f337';
+  font-family: 'FontAwesome'
+}
+
+.v-sidebar-menu .vsm--toggle-btn_slot:after {
+  display: none
+}
+
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-1.vsm--link_hover,
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-1:hover {
+  background-color: transparent !important
+}
+
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-1 .vsm--icon {
+  margin-right: 0px
+}
+
+.v-sidebar-menu.vsm_rtl {
+  right: 0;
+  left: inherit;
+  text-align: right
+}
+
+.v-sidebar-menu.vsm_rtl>.vsm--list {
+  direction: rtl
+}
+
+.v-sidebar-menu.vsm_rtl.vsm_collapsed>.vsm--list .vsm--link_level-1 .vsm--icon {
+  margin-left: 0px
+}
+
+.v-sidebar-menu.vsm_rtl .vsm--icon {
+  float: right;
+  margin-left: 10px;
+  margin-right: 0px
+}
+
+.v-sidebar-menu.vsm_rtl .vsm--arrow {
+  left: 10px;
+  right: inherit
+}
+
+.v-sidebar-menu.vsm_rtl .vsm--badge {
+  left: 10px;
+  right: inherit
+}
+
+.v-sidebar-menu .expand-enter-active,
+.v-sidebar-menu .expand-leave-active {
+  -webkit-transition: height 0.35s ease;
+  transition: height 0.35s ease;
+  overflow: hidden
+}
+
+.v-sidebar-menu .expand-enter,
+.v-sidebar-menu .expand-leave-to {
+  height: 0 !important
+}
+
+.v-sidebar-menu .slide-animation-enter-active {
+  -webkit-animation: slide-animation 0.2s;
+  animation: slide-animation 0.2s
+}
+
+.v-sidebar-menu .slide-animation-leave-active {
+  animation: slide-animation 0.2s reverse
+}
+
+@-webkit-keyframes slide-animation {
+  0% {
+    width: 0%
+  }
+  100% {
+    width: 100%
+  }
+}
+
+@keyframes slide-animation {
+  0% {
+    width: 0%
+  }
+  100% {
+    width: 100%
+  }
+}
+
+.v-sidebar-menu .vsm--mobile-item>.vsm--item {
+  padding-top: 0 !important;
+  margin-top: 0 !important
+}
+
+.v-sidebar-menu {
+  background-color: #0099dd
+}
+
+.v-sidebar-menu .vsm--link {
+  color: #fff
+}
+
+.v-sidebar-menu .vsm--link_exact-active,
+.v-sidebar-menu .vsm--link_active {
+  color: #fff
+}
+
+.v-sidebar-menu .vsm--link_level-1 .vsm--link_exact-active,
+.v-sidebar-menu .vsm--link_level-1 .vsm--link_active {
+  -webkit-box-shadow: 3px 0px 0px 0px #3397E1 inset;
+  box-shadow: 3px 0px 0px 0px #3397E1 inset
+}
+
+.v-sidebar-menu .vsm--link_level-1.vsm--link_exact-active .vsm--icon,
+.v-sidebar-menu .vsm--link_level-1.vsm--link_active .vsm--icon {
+  color: #fff;
+  background-color: #1e1e21
+}
+
+/*.v-sidebar-menu .vsm--link_hover,
+.v-sidebar-menu .vsm--link:hover {
+  color: #3397E1;
+  background-color: #F4F4F4;
+}*/
+
+.v-sidebar-menu .vsm--link_mobile-item {
+  color: #fff
+}
+
+.v-sidebar-menu .vsm--link_mobile-item.vsm--link_hover,
+.v-sidebar-menu .vsm--link_mobile-item:hover {
+  color: #fff
+}
+
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-1.vsm--link_hover .vsm--icon,
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-1:hover .vsm--icon {
+  color: #fff;
+  background-color: #3397E1
+}
+
+.v-sidebar-menu .vsm--dropdown .vsm--list {
+  background-color: #c1c1c1
+}
+
+.v-sidebar-menu .vsm--dropdown .vsm--link {
+  color: #222222
+}
+
+/*.v-sidebar-menu .vsm--dropdown .vsm--icon {
+  color: #222222
+}*/
+
+.vsm--link_level-2:hover .vsm--title,
+.vsm--link_level-2:hover .vsm--icon {
+  color: #3397E1
+}
+
+.v-sidebar-menu .vsm--mobile-bg {
+  background-color: #3397E1
+}
+
+.v-sidebar-menu.vsm_expanded .vsm--item_open .vsm--link_level-1 {
+  color: #fff;
+  background-color: #9ac5c7
+}
+
+.v-sidebar-menu.vsm_expanded .vsm--item_open .vsm--link_level-1 .vsm--icon {
+  color: #fff;
+  background-color: #9ac5c7
+}
+
+.v-sidebar-menu.vsm_rtl .vsm--link_level-1.vsm--link_active,
+.v-sidebar-menu.vsm_rtl .vsm--link_level-1.vsm--link_exact-active {
+  -webkit-box-shadow: -3px 0px 0px 0px #3397E1 inset;
+  box-shadow: -3px 0px 0px 0px #9ac5c7 inset
+}
+
+.v-sidebar-menu .vsm--header {
+  color: rgba(255, 255, 255, 0.7)
+}
+
+.v-sidebar-menu .vsm--badge_default {
+  color: #fff;
+  background-color: #1e1e21
+}
+
+.v-sidebar-menu .vsm--toggle-btn {
+  color: #222222;
+  background-color: #fff
+}
+.vsm--item>.vsm--item_open{
+  color: #fff;
+  background-color: #9ac5c7
+}
+.vsm--item>.vsm--item_open .vsm--icon{
+  color: #9ac5c7
+}
+
+.v-sidebar-menu .vsm--dropdown>.vsm--list .vsm--link.vsm--link_level-2.vsm--item_open {
+  color: #9ac5c7;
+  background-color: #EEEEEE;
+}
+
+.bs-frame-ltr {
+  height: calc(100vh - 0.1em);
+  overflow-y: hidden;
+  float: right;
+}
+
+.bs-frame-rtl {
+  height: calc(100vh - 0.1em);
+  overflow-y: hidden;
+  float: left;
+}
+
+sidebar-menu .vsm--arrow-rtl:after {
+    content: '\F0A8' !important;
+    font-family: 'FontAwesome';
+}
+
+.v-sidebar-menu .vsm--arrow.vsm--arrow_open-rtl {
+    -webkit-transform: translateY(-50%) rotate(90deg);
+    transform: translateY(-50%) rotate(270deg) !important;
+}

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>

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();

webpack.mix.js

@@ -0,0 +1,18 @@
+const { mix } = require('laravel-mix');
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel application. By default, we are compiling the Sass
+ | file for the application as well as bundling up all the JS files.
+ |
+ */
+
+mix.setPublicPath('workflow/public_html/webapp/')
+    .setResourceRoot('/webapp/')
+    .js('resources/assets/js/home/main.js', 'js/home')
+    .sass('resources/assets/sass/app.scss', 'css/app.css')
+    .version();

workflow/engine/methods/cases/viena_init.php

@@ -0,0 +1,198 @@
+<?php
+
+use Eusebiu\JavaScript\Facades\ScriptVariables;
+use Illuminate\Support\Facades\View;
+
+$conf = new Configurations();
+
+$oHeadPublisher = headPublisher::getSingleton();
+$oHeadPublisher->addExtJsScript("cases/main", false); //Adding a javascript file .js
+$oHeadPublisher->addContent("cases/main"); //Adding a html file  .html.
+
+$keyMem = "USER_PREFERENCES" . $_SESSION["USER_LOGGED"];
+$memcache = PMmemcached::getSingleton(config("system.workspace"));
+
+$openCaseIE = false;
+
+if (($arrayConfig = $memcache->get($keyMem)) === false) {
+    $conf->loadConfig($x, "USER_PREFERENCES", "", "", $_SESSION["USER_LOGGED"], "");
+    $arrayConfig = $conf->aConfig;
+    $memcache->set($keyMem, $arrayConfig, PMmemcached::ONE_HOUR);
+}
+
+$confDefaultOption = "";
+if (isset($arrayConfig["DEFAULT_CASES_MENU"])) {
+    //this user has a configuration record
+    $confDefaultOption = $arrayConfig["DEFAULT_CASES_MENU"];
+
+    global $G_TMP_MENU;
+
+    $oMenu = new Menu();
+    $oMenu->load("cases");
+    $defaultOption = "";
+
+    foreach ($oMenu->Id as $i => $id) {
+        if ($id == $confDefaultOption) {
+            $defaultOption = $oMenu->Options[$i];
+            break;
+        }
+    }
+
+    $defaultOption = ($defaultOption != "") ? $defaultOption : "casesListExtJs";
+} else {
+    $defaultOption = "casesListExtJs";
+    $confDefaultOption = "CASES_INBOX";
+}
+
+if (isset($_SESSION['__OPEN_APPLICATION_UID__'])) {
+    $openAppUid = $_SESSION['__OPEN_APPLICATION_UID__'];
+    unset($_SESSION['__OPEN_APPLICATION_UID__']);
+    $case = new \ProcessMaker\BusinessModel\Cases();
+
+    $confDefaultOption = 'CASES_SEARCH';
+    $action = 'search';
+    $participation = $case->getStatusInfo($openAppUid, 0, $_SESSION['USER_LOGGED']);
+    $arrayDelIndex = [];
+
+    if (!empty($participation)) {
+        /** If the user does have participation */
+        $arrayDefaultOption = [
+            'TO_DO' => ['CASES_INBOX', 'todo'],
+            'DRAFT' => ['CASES_DRAFT', 'draft'],
+            'CANCELLED' => ['CASES_SENT', 'sent'],
+            'COMPLETED' => ['CASES_SENT', 'sent'],
+            'PARTICIPATED' => ['CASES_SENT', 'sent'],
+            'UNASSIGNED' => ['CASES_SELFSERVICE', 'unassigned'],
+            'PAUSED' => ['CASES_PAUSED', 'paused']
+        ];
+
+        $confDefaultOption = $arrayDefaultOption[$participation['APP_STATUS']][0];
+        $action = $arrayDefaultOption[$participation['APP_STATUS']][1];
+        $arrayDelIndex = $participation['DEL_INDEX'];
+    } else {
+        /** If the user does not have participation */
+        $action = 'jump';
+        $caseInformation = $case->getStatusInfo($openAppUid);
+        //We will check if is supervisor
+        $supervisor = new \ProcessMaker\BusinessModel\ProcessSupervisor();
+        $isSupervisor = $supervisor->isUserProcessSupervisor($caseInformation['PRO_UID'], $_SESSION['USER_LOGGED']);
+        if ($isSupervisor) {
+            $arrayDelIndex = $caseInformation['DEL_INDEX'];
+        } else {
+            $_SESSION['PROCESS'] = $caseInformation['PRO_UID'];
+            $_GET['APP_UID'] = $openAppUid;
+            $_SESSION['ACTION'] = $action;
+            $_SESSION['APPLICATION'] = $openAppUid;
+            $_SESSION['INDEX'] = $caseInformation['DEL_INDEX'][0];
+            require_once(PATH_METHODS . 'cases' . PATH_SEP . 'cases_Resume.php');
+            exit();
+        }
+    }
+
+    if (count($arrayDelIndex) === 1) {
+        //We will to open the case: one thread
+        $openCaseIE = true;
+        $defaultOption = '../cases/open?APP_UID=' . $openAppUid . '&DEL_INDEX=' . $arrayDelIndex[0] . '&action=' . $action;
+    } else {
+        //We will to show the list: more than one thread
+        $defaultOption = '../cases/casesListExtJs?action=' . $action . '&openApplicationUid=' . $openAppUid;
+    }
+} else {
+    if (isset($_GET['id'])) {
+        $defaultOption = '../cases/open?APP_UID=' . $_GET['id'] . '&DEL_INDEX=' . $_GET['i'];
+
+        if (isset($_GET['a'])) {
+            $defaultOption .= '&action=' . $_GET['a'];
+        }
+    }
+}
+
+$oServerConf = ServerConf::getSingleton();
+if ($oServerConf->isRtl(SYS_LANG)) {
+    $regionTreePanel = 'east';
+    $regionDebug = 'west';
+} else {
+    $regionTreePanel = 'west';
+    $regionDebug = 'east';
+}
+
+$urlProxy = 'casesMenuLoader?action=getAllCounters&r=';
+/*----------------------------------********---------------------------------*/
+$urlProxy = 'casesMenuLoader?action=getAllCountersEnterprise&r=';
+/*----------------------------------********---------------------------------*/
+
+$oHeadPublisher->assign('regionTreePanel', $regionTreePanel);
+$oHeadPublisher->assign('regionDebug', $regionDebug);
+$oHeadPublisher->assign('openCaseIE', $openCaseIE);
+$oHeadPublisher->assign("defaultOption", $defaultOption); //User menu permissions
+$oHeadPublisher->assign('urlProxy', $urlProxy); //sending the urlProxy to make
+$oHeadPublisher->assign("_nodeId", isset($confDefaultOption) ? $confDefaultOption : "PM_USERS"); //User menu permissions
+$oHeadPublisher->assign("FORMATS", $conf->getFormats());
+
+/*----------------------------------********---------------------------------*/
+// If the feature for highlight the home folders is enabled, set some javascript variables
+if (HIGHLIGHT_HOME_FOLDER_ENABLE) {
+    $oHeadPublisher->assign("highlightUrlProxy", "casesMenuHighlight?r=");
+    $oHeadPublisher->assign("highlightRefreshTime", HIGHLIGHT_HOME_FOLDER_REFRESH_TIME);
+}
+/*----------------------------------********-   --------------------------------*/
+
+// include "/opt/processmaker/workflow/public_html/Viena.php";
+// $phpFile = "/opt/processmaker/workflow/viena/EHX/index.php";
+// require_once($phpFile); 
+// header("Location:../viena/index.php/hom  e");
+// SYS_COLLECTION = "viena";
+// echo "hola mundo ";
+// die();
+// echo View::make('welcome');
+$userCanAccess = 1;
+global $translation;
+// print 'var TRANSLATIONS = ' . G::json_encode($translation) . ';';
+// echo view('Templates::Home.home', compact("userCanAccess"));
+ScriptVariables::add('SYS_LANG', SYS_LANG);
+ScriptVariables::add('TRANSLATIONS', $translation);
+echo View::make('Views::home.home', compact("userCanAccess"))->render();
+// $_SESSION["current_ux"] = "NORMAL";
+
+// G::RenderPage("publish", "blade");
+// const PLUGIN_NAME = 'EHX';
+
+
+
+/*----------------------------------********---------------------------------*/
+function getClientCredentials($clientId)
+{
+    $oauthQuery = new ProcessMaker\Services\OAuth2\PmPdo(getDsn());
+    return $oauthQuery->getClientDetails($clientId);
+}
+
+function getDsn()
+{
+    list($host, $port) = strpos(DB_HOST, ':') !== false ? explode(':', DB_HOST) : array(DB_HOST, '');
+    $port = empty($port) ? '' : ";port=$port";
+    $dsn = DB_ADAPTER . ':host=' . $host . ';dbname=' . DB_NAME . $port;
+
+    return array('dsn' => $dsn, 'username' => DB_USER, 'password' => DB_PASS);
+}
+
+
+function getAuthorizationCode($client)
+{
+    \ProcessMaker\Services\OAuth2\Server::setDatabaseSource(getDsn());
+    \ProcessMaker\Services\OAuth2\Server::setPmClientId($client['CLIENT_ID']);
+
+    $oauthServer = new \ProcessMaker\Services\OAuth2\Server();
+    $userId = $_SESSION['USER_LOGGED'];
+    $authorize = true;
+    $_GET = array_merge($_GET, array(
+        'response_type' => 'code',
+        'client_id' => $client['CLIENT_ID'],
+        'scope' => implode(' ', $oauthServer->getScope())
+    ));
+
+    $response = $oauthServer->postAuthorize($authorize, $userId, true);
+    $code = substr($response->getHttpHeader('Location'), strpos($response->getHttpHeader('Location'), 'code=') + 5, 40);
+
+    return $code;
+}
+/*----------------------------------********---------------------------------*/

workflow/engine/templates/cases/cases_Load.php

@@ -14,7 +14,7 @@ $filter = new InputFilter();
    }
   </style>
   <body onresize="autoResizeScreen()" onload="autoResizeScreen()">
-  <iframe name="casesFrame" id="casesFrame" src ="<?php echo $cd; ?>../cases/main_init<?php echo $filter->xssFilterHard($_POST['qs']); ?>" width="99%" height="768" frameborder="0">
+  <iframe name="casesFrame" id="casesFrame" src ="<?php echo $cd; ?>../cases/viena_init<?php echo $filter->xssFilterHard($_POST['qs']); ?>" width="99%" height="768" frameborder="0">
       <p>Your browser does not support iframes.</p>
   </iframe>
   </body>

workflow/engine/templates/cases/cases_viena.php

@@ -0,0 +1,62 @@
+<?php
+$cd = (isset($_SESSION['__CD__']))? $_SESSION['__CD__'] : '';
+unset($_SESSION['__CD__']);
+
+$filter = new InputFilter();
+?>
+<html>
+  <style type="text/css">
+   .Footer .content {
+      padding   :0px !important;
+   }
+   *html body {
+      overflow-y: hidden;
+   }
+  </style>
+  <body onresize="autoResizeScreen()" onload="autoResizeScreen()">
+  <iframe name="casesFrame" id="casesFrame" src ="<?php echo $cd; ?>../cases/viena_init<?php echo $filter->xssFilterHard($_POST['qs']); ?>" width="99%" height="768" frameborder="0">
+      <p>Your browser does not support iframes.</p>
+  </iframe>
+  </body>
+  <script>
+    if ( document.getElementById('pm_submenu') )
+      document.getElementById('pm_submenu').style.display = 'none';
+      document.documentElement.style.overflowY = 'hidden';
+
+      var oClientWinSize = getClientWindowSize();
+
+
+    function autoResizeScreen() {
+		var containerList1, containerList2;
+		oCasesFrame    = document.getElementById('casesFrame');
+		oClientWinSize = getClientWindowSize();
+
+		containerList1 = document.getElementById("pm_header");
+		if (document.getElementById("mainMenuBG") &&
+			document.getElementById("mainMenuBG").parentNode &&
+			document.getElementById("mainMenuBG").parentNode.parentNode &&
+			document.getElementById("mainMenuBG").parentNode.parentNode.parentNode &&
+			document.getElementById("mainMenuBG").parentNode.parentNode.parentNode.parentNode){
+				containerList2 = document.getElementById("mainMenuBG").parentNode.parentNode.parentNode.parentNode;
+			}
+		if (containerList1 === containerList2) {
+			height = oClientWinSize.height - containerList1.clientHeight;
+			oCasesFrame.style.height = height;
+			if (oCasesFrame.height ) {
+				oCasesFrame.height = height;
+			}
+		} else {
+			height = getClientWindowSize().height-90;
+			oCasesFrame.style.height = height + 'px';
+			oCasesSubFrame = oCasesFrame.contentWindow.document.getElementById('casesSubFrame');
+			if(oCasesSubFrame){
+				oCasesSubFrame.style.height = (height-5) + 'px';;
+			} else {
+			setTimeout('autoResizeScreen()', 2000);
+			}
+		}
+    }
+  </script>
+  <SCRIPT src="/jscore/src/PM.js" type=text/javascript></SCRIPT>
+  <SCRIPT src="/jscore/src/Sessions.js" type=text/javascript></SCRIPT>
+</html>