From 6eb336bb2158d43e1eb48814336b5b0b72a3e6bf Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Thu, 17 Dec 2020 17:38:18 +0000
Subject: [PATCH] add my cases filters

restore xml forms

fix auto show
---
 resources/assets/js/api/Cases.js              |   5 +-
 .../{GenericFilter.vue => AdvancedFilter.vue} | 368 +++++----
 .../js/components/search/MyCasesFilter.vue    | 329 ++++++++
 .../search/popovers/CaseIntegerNumber.vue     |  83 ++
 .../components/search/popovers/CaseNumber.vue |  25 +-
 .../components/search/popovers/CaseTitle.vue  |  11 +-
 .../search/popovers/CurrentUser.vue           |  13 +-
 .../components/search/popovers/DateFilter.vue |  69 ++
 .../search/popovers/ProcessName.vue           |  43 +-
 .../search/popovers/SearchPopover.vue         |  15 +-
 resources/assets/js/home/AdvancedSearch.vue   |  22 +-
 resources/assets/js/home/Home.vue             |   5 +-
 resources/assets/js/home/MyCases.vue          | 779 +++++++++---------
 .../translations/english/processmaker.en.po   | 217 +++++
 workflow/engine/data/mysql/insert.sql         |  38 +-
 15 files changed, 1413 insertions(+), 609 deletions(-)
 rename resources/assets/js/components/search/{GenericFilter.vue => AdvancedFilter.vue} (60%)
 create mode 100644 resources/assets/js/components/search/MyCasesFilter.vue
 create mode 100644 resources/assets/js/components/search/popovers/CaseIntegerNumber.vue
 create mode 100644 resources/assets/js/components/search/popovers/DateFilter.vue

diff --git a/resources/assets/js/api/Cases.js b/resources/assets/js/api/Cases.js
index f2f930119..ff87b615c 100644
--- a/resources/assets/js/api/Cases.js
+++ b/resources/assets/js/api/Cases.js
@@ -7,10 +7,7 @@ export let cases = {
     myCases(data) {
         return Api.get({
             service: "MY_CASES",
-            params: {
-                filter: data.filter,
-                paged: data.paged
-            },
+            params: data,
             keys: {}
         });
     },
diff --git a/resources/assets/js/components/search/GenericFilter.vue b/resources/assets/js/components/search/AdvancedFilter.vue
similarity index 60%
rename from resources/assets/js/components/search/GenericFilter.vue
rename to resources/assets/js/components/search/AdvancedFilter.vue
index 599634ff5..4f084b92a 100644
--- a/resources/assets/js/components/search/GenericFilter.vue
+++ b/resources/assets/js/components/search/AdvancedFilter.vue
@@ -1,16 +1,11 @@
 <template>
     <div>
         <b-container fluid class="bv-example-row" id="my-container">
-          
-            <b-row>
-                <b-col md="10"><h5>{{$t('ID_OPEN_SEARCH')}}</h5></b-col>
-            </b-row>
             <b-row>
                 <b-col md="4">
                     <div class="d-flex flex-row">
                         <SearchPopover
                             target="popover-target-1"
-                            @closePopover="onClose"
                             @savePopover="onOk"
                             :title="addSearchTitle"
                         >
@@ -29,7 +24,9 @@
                                 <b-form-group>
                                     <b-form-checkbox-group
                                         v-model="selected"
-                                        :options="filterOptions"
+                                        :options="filterItems"
+                                        value-field="id"
+                                        text-field="optionLabel"
                                         name="flavour-2a"
                                         stacked
                                     ></b-form-checkbox-group>
@@ -105,19 +102,20 @@
                                         v-for="tag in tags"
                                         @remove="customRemove(removeTag, tag)"
                                         :key="tag"
-                                        :title="searchTagsModels[tag].tagText"
+                                        :title="tag"
                                         :variant="tagVariant"
                                         class="mr-1"
                                     >   
                                         
                                         <div :id="tag">
                                             <i class="fas fa-tags"></i>
-                                            {{ searchTagsModels[tag].tagText }}
+                                             {{ tagContent(tag) }}
                                         </div>
                                         <component
-                                            v-bind:is="tag"
-                                            v-bind:info="searchTagsModels[tag]"
+                                            v-bind:is="tagComponent(tag)"
+                                            v-bind:info="tagInfo(tag)"
                                             v-bind:tag="tag"
+                                            v-bind:filter="dataToFilter(tag)"
                                             @updateSearchTag="updateSearchTag"
                                         />
                                     </b-form-tag>
@@ -169,8 +167,8 @@
 <script>
 import SearchPopover from "./popovers/SearchPopover.vue";
 import CaseNumber from "./popovers/CaseNumber.vue";
-import DueDate from "./popovers/DueDate.vue";
-import LastModifiedDate from "./popovers/LastModifiedDate.vue";
+
+import DateFilter from "./popovers/DateFilter.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
 import CasePriority from "./popovers/CasePriority.vue";
@@ -179,109 +177,153 @@ import CurrentUser from "./popovers/CurrentUser.vue";
 import api from "./../../api/index";
 
 export default {
-    name: "GenericFilter",
+    name: "AdvancedFilter",
     props: ["id", "name", "filters"],
     components: {
         SearchPopover,
         CaseNumber,
-        DueDate,
-        LastModifiedDate,
         CaseTitle,
         ProcessName,
         CasePriority,
         CaseStatus,
-        CurrentUser
+        CurrentUser,
+        DateFilter,
     },
     data() {
         return {
             addSearchTitle: this.$i18n.t('ID_ADD_SEARCH_FILTER_CRITERIA'),
-            
             searchTags: [],
-            searchTagsModels: {
-                CaseNumber: {
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CASE')}${this.$i18n.t('ID_IUD')}`,
+            filterItems: [
+                {   
+                    type: "CaseNumber",
+                    id: "caseNumber",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_IUD')}`,
                     optionLabel: this.$i18n.t('ID_IUD'),
                     detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH'),
                     tagText: "",
-                    filterBy: ["filterCases"],
-                    values: {}
+                    tagPrefix:  this.$i18n.t('ID_IUD'),
+                    items:[
+                        {
+                            id: "filterCases",
+                            value: ""
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                          return  `${params.tagPrefix}: ${data[0].value}`;
+                    }
                 },
-                DueDate: {
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_DUE_DATE')}`,
-                    optionLabel: this.$i18n.t('ID_DUE_DATE'),
-                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_DUE_DATE_TO_SEARCH'),
-                    tagText: "",
-                    filterBy: ["dueDateFrom", "dueDateTo"],
-                    values: {}
-                },
-                LastModifiedDate: {
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_LAST_MODIFIED_DATE')}`,
-                    optionLabel: this.$i18n.t('ID_LAST_MODIFIED_DATE'),
-                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_LAST_MODIFIED_CASES_DATE_TO_SEARCH'),
-                    tagText: "",
-                    filterBy: ["delegationDateFrom", "delegationDateTo"],
-                    values: {}
-                },
-                CaseTitle: {
+                {
+                    type: "CaseTitle",
+                    id: "caseTitle",
                     title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CASE_TITLE')}`,
                     optionLabel: this.$i18n.t('ID_CASE_TITLE'),
+                    tagPrefix:  this.$i18n.t('ID_CASE_TITLE'),
                     detail: "",
                     tagText: "",
-                    filterBy: ["caseTitle"],
-                    values: {}
+                    items:[
+                        {
+                            id: "caseTitle",
+                            value: ""
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${this.tagPrefix}: ${data[0].value}`;
+                    }
                 },
-                ProcessName: {
+                {
+                    type: "ProcessName",
+                    id: "processName",
                     title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_PROCESS_NAME')}`,
                     optionLabel: this.$i18n.t('ID_PROCESS_NAME'),
                     detail: "",
-                    placeholder: this.$i18n.t('ID_PROCESS_NAME'),
                     tagText: "",
-                    filterBy: ["process", "processOption"],
-                    processOption: {"PRO_TITLE": ""}
-                },
-                CasePriority: {
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_PRIORITY')}`,
-                    optionLabel: this.$i18n.t('ID_PRIORITY'),
-                    detail: this.$i18n.t('ID_PLEASE_SELECT_THE_PRIORITY_FOR_THE_SEARCH'),
-                    options: [
-                        { text: this.$i18n.t('ID_VERY_LOW'), value: "VL" },
-                        { text: this.$i18n.t('ID_LOW'), value: "L" },
-                        { text: this.$i18n.t('ID_NORMAL'), value: "N" },
-                        { text: this.$i18n.t('ID_HIGH'), value: "H" },
-                        { text: this.$i18n.t('ID_VERY_HIGH'), value: "VH" }
+                    tagPrefix:  this.$i18n.t('ID_PROCESS_NAME'),
+                    items:[
+                        {
+                            id: "process",
+                            value: "",
+                            options: [],
+                            placeholder: this.$i18n.t('ID_PROCESS_NAME')
+                        }
                     ],
-                    tagText: "",
-                    filterBy: ["priorities"],
-                    casePriorities: []
+                    makeTagText: function (params, data) {
+                        return  `${params.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
+                    }
                 },
-                CaseStatus: {
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_STATUS')}`,
-                    optionLabel: this.$i18n.t('ID_STATUS'),
-                    detail: this.$i18n.t('ID_PLEASE_SELECT_THE_STATUS_FOR_THE_SEARCH'),
-                    options: [
-                        { text: this.$i18n.t('ID_CASES_STATUS_DRAFT'), value: "DRAFT" },
-                        { text: this.$i18n.t('ID_CASES_STATUS_TO_DO'), value: "TO_DO" },
-                        { text: this.$i18n.t('ID_CASES_STATUS_COMPLETED'), value: "COMPLETED" },
-                        { text: this.$i18n.t('ID_CASES_STATUS_CANCELLED'), value: "CANCELLED" },
-                        { text: this.$i18n.t('ID_CASES_STATUS_PAUSED'), value: "PAUSED" },
+                {
+                    type: "DateFilter",
+                    id: "startDate",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_START_DATE')}`,
+                    optionLabel: this.$i18n.t('ID_BY_START_DATE'),
+                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_START_DATE_TO_SEARCH'),
+                    tagText: "",
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_START_DATE'),
+                    items:[
+                        {
+                            id: "startCaseFrom",
+                            value: "",
+                            label: this.$i18n.t('ID_FROM_START_DATE')
+                        },
+                        {
+                            id: "startCaseTo",
+                            value: "",
+                            label: this.$i18n.t('ID_TO_START_DATE')
+                        }
                     ],
-                    tagText: "",
-                    filterBy: ["caseStatuses"],
-                    caseStatuses: []
+                    makeTagText: function (params, data) {
+                        return  `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
+                    }
                 },
-                CurrentUser: {
+                {
+                    type: "DateFilter",
+                    id: "finishDate",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_FINISH_DATE')}`,
+                    optionLabel: this.$i18n.t('ID_FINISH_DATE'),
+                    detail: this.$i18n.t('Please set a range of cases Finish Date to search:'),
+                    tagText: "",
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_FINISH_DATE'),
+                    items:[
+                        {
+                            id: "finishCaseFrom",
+                            value: "",
+                            label: this.$i18n.t('ID_FROM_FINISH_DATE'),
+                        },
+                        {
+                            id: "finishCaseTo",
+                            value: "",
+                            label: this.$i18n.t('ID_TO_FINISH_DATE'),
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
+                    }
+                },
+                {
+                    type: "CurrentUser",
+                    id: "currentUser",
                     title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CURRENT_USER')}`,
                     optionLabel: this.$i18n.t('ID_CURRENT_USER'),
                     detail: "",
                     placeholder: this.$i18n.t('ID_USER_NAME'),
                     tagText: "",
-                    filterBy: ["userId", "selectedOption"],
-                    selectedOption: {"USR_FULLNAME": ""}
-                }
-            },
-            text: "",
+                    tagPrefix:  this.$i18n.t('ID_USER'),
+                    items:[
+                        {
+                            id: "userId",
+                            value: "",
+                            options: [],
+                            placeholder: this.$i18n.t('ID_USER_NAME')
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${params.tagPrefix} : ${data[0].label || ''}`;
+                    }
+                },
+            ],
+            selected: "",
+            itemModel: {},
+            filterModel: {},
             selected: [],
-            jsonFilter: {},
             caseNumber: "",
             saveModalTitle: this.$i18n.t('ID_SAVE_SEARCH'),
             localName: "",
@@ -289,109 +331,119 @@ export default {
         };
     },
     watch: {
-        filters: function (filters) {
-          this.searchTags = [];
-          this.searchTags = [];
-          this.setFilters(filters);
+        filters: { 
+            immediate: true, 
+            handler(newVal, oldVal) { 
+                this.searchTags = [];
+                this.selected = [];
+                this.setFilters(newVal);
+            },
         }
     },
     
-    computed: {
-        filterOptions: function() {
-            let options = [];
-            _.forIn(this.searchTagsModels, function(value, key) {
-                options.push({
-                    text: value.optionLabel,
-                    value: key,
-                });
-            });
-            return options;
-        },
-    },
+
     methods: {
-       
-        onClose() {
-        },
+        /**
+         * Set Filters and make the tag labels
+         * @param {object} filters json to manage the query 
+         */
         setFilters(filters) {
-            let that = this;
-            _.forIn(filters, function(value, key) {
-                let temp = that.createTagText(key, value);
-                that.searchTags.push(key);
-                that.selected.push(key);
+            let self = this;
+            _.forEach(filters, function(item, key) {
+                let component = _.find(self.filterItems, function(o) { return o.id === item.fieldId; });
+                if (component) {
+                    self.searchTags.push(component.id);
+                    self.selected.push(component.id);
+                    self.itemModel[component.id] = component;
+                }
             });
         },
+        dataToFilter(id) {
+            let data = [];
+            _.forEach(this.filters, function(item) { 
+                if (item.fieldId === id) {
+                    data.push(item);
+                }
+            });
+            return data;
+        },
+        /**
+         * 
+         */
+        tagContent(id) {
+            if (this.itemModel[id]  && typeof this.itemModel[id] .makeTagText === "function") {
+                return this.itemModel[id].makeTagText(this.itemModel[id],  this.dataToFilter(id));
+            }
+            return "";
+        },
+        tagComponent(id) {
+            if (this.itemModel[id]) {
+                return this.itemModel[id].type;
+            }
+            return null;
+        },
+    
+        tagInfo(id) {
+             if (this.itemModel[id]) {
+                 debugger;
+                return this.itemModel[id];
+            }
+            return null;
+        },
+
+         /**
+         * Add filter criteria save button handler
+         */
         onOk() {
-            let initialFilters = {};
-            this.$root.$emit('bv::hide::popover');
-            for (var i = 0; i < this.selected.length; i++) {
-                let item = this.selected[i];
-                initialFilters[item] = {};
-                if(this.searchTagsModels[item].filterBy) {
-                    for (var j = 0; j < this.searchTagsModels[item].filterBy.length; j++) { 
-                        initialFilters[item][this.searchTagsModels[item].filterBy [j]] = "";
-                    }
+            let self = this,
+                element,
+                tmp,
+                item,
+                initialFilters = [];
+            this.$root.$emit('bv::hide::popover');   
+            for (var i = 0; i < this.selected.length; i+=1) {
+                item = this.selected[i];
+                element = _.find(this.filterItems, function(o) { return o.id === item; });
+                if  (element) {
+                    _.forEach(element.items, function(value, key) {
+                        tmp = {
+                            filterVar: value.id,
+                            fieldId: item,
+                            value: '',
+                            label: "",
+                            options: []
+                        };
+                        initialFilters.push(tmp);
+                    });
                 }
                 
             }
-            this.$emit("onUpdateFilters", initialFilters) 
-        },
-        createTagText(type, params) {
-            let label = "";
-            switch (type) {
-                case "CaseNumber":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t("ID_IUD")}: ${params.filterCases}`
-                    this.searchTagsModels[type].values["filterCases"] =  params.filterCases;
-                    break;
-                case "DueDate":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t('ID_FROM')}: ${params.dueDateFrom} ${this.$i18n.t('ID_TO')}:  ${params.dueDateTo}`;
-                    this.searchTagsModels[type].values["dueDateFrom"] =  params.dueDateFrom;
-                    this.searchTagsModels[type].values["dueDateTo"] =  params.dueDateTo;
-                    break;
-                case "LastModifiedDate":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t('ID_FROM')}: ${params.delegationDateFrom} ${this.$i18n.t('ID_TO')}:  ${params.delegationDateTo}`;
-                    this.searchTagsModels[type].values["delegationDateFrom"] =  params.delegationDateFrom;
-                    this.searchTagsModels[type].values["delegationDateTo"] =  params.delegationDateTo;
-                    break;
-                case "CaseTitle":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t("ID_CASE_TITLE")}: ${params.caseTitle}`;
-                    this.searchTagsModels[type].values["caseTitle"] =  params.caseTitle;
-                    break;
-                case "ProcessName":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t("ID_PROCESS")}: ${params.processOption.PRO_TITLE || ''}`;
-                    this.searchTagsModels[type].processOption =  params.processOption || null;
-                    break;
-                case "CasePriority":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t('ID_PRIORITY')}: ${_.map(params.selectedOptions, 'text').join(",") || ''}`;
-                    this.searchTagsModels[type].casePriorities = _.map(params.selectedOptions, 'value');
-                    break;
-                 case "CaseStatus":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t('ID_STATUS')}: ${_.map(params.selectedOptions, 'text').join(",") || ''}`;
-                    this.searchTagsModels[type].caseStatuses = _.map(params.selectedOptions, 'value');
-                    break;
-                case "CurrentUser":
-                    this.searchTagsModels[type].tagText = `${this.$i18n.t("ID_USER")}: ${params.selectedOption.USR_FULLNAME || ''}`;
-                    this.searchTagsModels[type].selectedOption =  params.selectedOption || null;
-                    break;
-                default:
-                    break;
-            }
+            this.$emit("onUpdateFilters", initialFilters);
+            
+            
         },
+
         cleanAllTags() {
             this.searchTags = [];
             this.selected = [];
             this.$emit("onUpdateFilters", {});
         },
         customRemove(removeTag, tag) {
-            let temp = { ...this.filters};
-            delete temp[tag];
-            removeTag(tag);
+            let temp = [];
+             _.forEach(this.filters, function(item, key) {
+                 if(item.fieldId !== tag) {
+                     temp.push(item);
+                 }
+             });
             this.$emit("onUpdateFilters", temp);
         },
         onSearch() {
             this.$emit("onSearch", this.filters);
         },
         updateSearchTag(params) {          
-            this.$emit("onUpdateFilters", { ...this.filters, ...params });
+            let temp = this.filters.concat(params);
+            temp = [...new Set([...this.filters,...params])]
+            this.$emit("onUpdateFilters", temp);
         },
         onJumpCase() {
             this.$emit("onJumpCase",  this.caseNumber);
diff --git a/resources/assets/js/components/search/MyCasesFilter.vue b/resources/assets/js/components/search/MyCasesFilter.vue
new file mode 100644
index 000000000..312f0d990
--- /dev/null
+++ b/resources/assets/js/components/search/MyCasesFilter.vue
@@ -0,0 +1,329 @@
+<template>
+    <div>
+        <SearchPopover
+            target="popover-target-1"
+            @savePopover="onOk"
+            :title="addSearchTitle"
+        >
+            <template v-slot:body>
+                <b-form-group>
+                    <b-form-radio-group
+                        v-model="selected"
+                        :options="filterItems"
+                        value-field="id"
+                        text-field="optionLabel"
+                        name="flavour-2a"
+                        stacked
+                    ></b-form-radio-group>
+                </b-form-group>
+            </template>
+        </SearchPopover>
+
+        <div class="w-75 p-1">
+
+            <b-input-group class="w-100 p-1">
+                <b-button pill variant="primary" id="popover-target-1" @click="searchClickHandler">
+                    <b-icon icon="search"></b-icon>
+                </b-button>
+                <b-form-tags
+                    input-id="tags-pills"
+                    v-model="searchTags"
+                    size="sm"
+                >
+                    <template v-slot="{ tags, tagVariant, removeTag }">
+                        <div
+                            class="d-inline-block"
+                            style="font-size: 1rem;"
+                        >
+                            <b-form-tag
+                                v-for="tag in tags"
+                                @remove="customRemove(removeTag, tag)"
+                                :key="tag"
+                                :title="tag"
+                                :variant="tagVariant"
+                                class="mr-1"
+                            >      
+                                <div :id="tag">
+                                    <i class="fas fa-tags"></i>
+                                    {{ tagContent(tag) }}
+                                </div>
+
+                                <component
+                                    v-bind:is="tagComponent(tag)"
+                                    v-bind:info="tagInfo(tag)"
+                                    v-bind:tag="tag"
+                                    v-bind:filter="dataToFilter(tag)"
+                                    @updateSearchTag="updateSearchTag"
+                                />
+                                
+                            </b-form-tag>
+                        </div>
+                    </template>
+                </b-form-tags>              
+            </b-input-group>
+        </div>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./popovers/SearchPopover.vue";
+import CaseIntegerNumber from "./popovers/CaseIntegerNumber.vue";
+import CaseTitle from "./popovers/CaseTitle.vue";
+import ProcessName from "./popovers/ProcessName.vue";
+import DateFilter from "./popovers/DateFilter.vue";
+import api from "./../../api/index";
+
+export default { 
+    name: "MyCasesFilter",
+    props: ["filters"],
+    components:{
+        SearchPopover,
+        CaseIntegerNumber,
+        CaseTitle,
+        ProcessName,
+        DateFilter
+    },
+    data() {
+        return {
+            searchLabel: this.$i18n.t('ID_SEARCH'),
+            addSearchTitle: this.$i18n.t('ID_ADD_SEARCH_FILTER_CRITERIA'),
+            searchTags: [],
+        
+            filterItems: [
+                {   
+                    type: "CaseIntegerNumber",
+                    id: "caseNumber",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_CASE_NUMBER')}`,
+                    optionLabel: this.$i18n.t('ID_BY_CASE_NUMBER'),
+                    detail: this.$i18n.t('ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED'),
+                    tagText: "",
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_CASE_NUMBER'),
+                    items:[
+                        {
+                            id: "caseNumber",
+                            value: ""
+                        }
+                    ],
+                    autoShow: true,
+                    makeTagText: function (params, data) {
+                          return  `${params.tagPrefix}: ${data[0].value}`;
+                    }
+                },
+                {
+                    type: "CaseTitle",
+                    id: "caseTitle",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_CASE_TITLE')}`,
+                    optionLabel: this.$i18n.t('ID_BY_CASE_TITLE'),
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_CASE_TITLE'),
+                    detail: "",
+                    tagText: "",
+                    items:[
+                        {
+                            id: "caseTitle",
+                            value: ""
+                        }
+                    ],
+                    autoShow: true,
+                    makeTagText: function (params, data) {
+                        return  `${this.tagPrefix} ${data[0].value}`;
+                    }
+                },
+                {
+                    type: "ProcessName",
+                    id: "processName",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_PROCESS_NAME')}`,
+                    optionLabel: this.$i18n.t('ID_BY_PROCESS_NAME'),
+                    detail: "",
+                    tagText: "",
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_PROCESS_NAME'),
+                    autoShow: true,
+                    items:[
+                        {
+                            id: "process",
+                            value: "",
+                            options: [],
+                            placeholder: this.$i18n.t('ID_PROCESS_NAME')
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+
+                        return  `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
+                    }
+                },
+                {
+                    type: "DateFilter",
+                    id: "startDate",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_START_DATE')}`,
+                    optionLabel: this.$i18n.t('ID_BY_START_DATE'),
+                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_START_DATE_TO_SEARCH'),
+                    tagText: "",
+                    autoShow: true,
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_START_DATE'),
+                    items:[
+                        {
+                            id: "startCaseFrom",
+                            value: "",
+                            label: this.$i18n.t('ID_FROM_START_DATE')
+                        },
+                        {
+                            id: "startCaseTo",
+                            value: "",
+                            label: this.$i18n.t('ID_TO_START_DATE')
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
+                    }
+                },
+                {
+                    type: "DateFilter",
+                    id: "finishDate",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_FINISH_DATE')}`,
+                    optionLabel: this.$i18n.t('ID_BY_FINISH_DATE'),
+                    detail: this.$i18n.t('ID_PLEASE_SET_A_RANGE_OF_CASES_FINISH_DATE_TO_SEARCH'),
+                    tagText: "",
+                    autoShow: true,
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_FINISH_DATE'),
+                    items:[
+                        {
+                            id: "finishCaseFrom",
+                            value: "",
+                            label: this.$i18n.t('ID_FROM_FINISH_DATE'),
+                        },
+                        {
+                            id: "finishCaseTo",
+                            value: "",
+                            label: this.$i18n.t('ID_TO_FINISH_DATE'),
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
+                    }
+                },
+            ],
+            selected: "",
+            itemModel: {}
+        };
+    },
+    watch: {
+        filters: function (filters) {
+            this.searchTags = [];
+            this.selected = "";
+            this.setFilters(filters);
+            
+        }
+    },
+    methods: {
+        /**
+         * Add filter criteria save button handler
+         */
+        onOk() {
+            let self = this,
+                element,
+                initialFilters = [],
+                item;
+                // element = _.find(this.filterItems, function(o) { return o.id === self.selected; });
+            this.$root.$emit('bv::hide::popover');
+            element = _.find(this.filterItems, function(o) { return o.id === self.selected; });
+                if  (element) {
+                    _.forEach(element.items, function(value, key) {
+                        item = {
+                            filterVar: value.id,
+                            fieldId: self.selected,
+                            value:  '',
+                            label: "",
+                            options: []
+                        };
+                        initialFilters.push(item);
+                    });
+                }
+            this.$emit("onUpdateFilters", {params: initialFilters, refresh: false}); 
+        },
+        /**
+         * Set Filters and make the tag labels
+         * @param {object} filters json to manage the query 
+         */
+        setFilters(filters) {
+            let self = this;
+            _.forEach(filters, function(item, key) {
+                let component = _.find(self.filterItems, function(o) { return o.id === item.fieldId; });
+                if (component) {
+                    self.searchTags.push(component.id);
+                    self.selected = component.id;
+                    self.itemModel[component.id] = component;
+                }
+            });
+        },
+        dataToFilter(id) {
+            let data = [];
+            _.forEach(this.filters, function(item) { 
+                if (item.fieldId === id) {
+                    data.push(item);
+                }
+            });
+            return data;
+        },
+        /**
+         * 
+         */
+        tagContent(id) {
+            if (this.itemModel[id]  && typeof this.itemModel[id].makeTagText === "function") {
+                return this.itemModel[id].makeTagText(this.itemModel[id],  this.dataToFilter(id));
+            }
+            return "";
+        },
+        tagComponent(id) {
+            if (this.itemModel[id]) {
+                return this.itemModel[id].type;
+            }
+            return null;
+        },
+    
+        tagInfo(id) {
+             if (this.itemModel[id]) {
+                 debugger;
+                return this.itemModel[id];
+            }
+            return null;
+        },
+        /**
+         * Remove from tag button
+         * @param {function} removeTag - default callback
+         * @param {string} tag filter identifier
+         */
+        customRemove(removeTag, tag) {
+            this.selected = "";
+            this.$emit("onUpdateFilters",  {params: [], refresh: true});
+        },
+        /**
+         * Update the filter model this is fired from filter popaver save action
+         * @param {object} params - arrives the settings
+         * @param {string} tag filter identifier
+         */
+        updateSearchTag(params) {          
+            let temp = this.filters.concat(params);
+            temp = [...new Set([...this.filters,...params])]
+            this.$emit("onUpdateFilters",  {params: temp, refresh: true});
+        },    
+        searchClickHandler() {
+            this.$root.$emit('bv::hide::popover');
+        }
+    }
+};
+</script>
+<style scoped>
+.bv-example-row .row + .row {
+    margin-top: 1rem;
+}
+
+.bv-example-row-flex-cols .row {
+    min-height: 10rem;
+}
+</style>
+
+    },
+};
+</script>
+<style scoped>
+
+</style>
diff --git a/resources/assets/js/components/search/popovers/CaseIntegerNumber.vue b/resources/assets/js/components/search/popovers/CaseIntegerNumber.vue
new file mode 100644
index 000000000..365746501
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/CaseIntegerNumber.vue
@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <SearchPopover
+            :target="tag"
+            :showPopover="showPopover"
+            @closePopover="onClose"
+            @savePopover="onOk"
+            :title="info.title"
+            :autoShow="info.autoShow || false"
+        >
+            <template v-slot:body>
+                <p>{{ info.detail }}</p>
+                <form ref="form" @submit.stop.prevent="handleSubmit">
+                    <b-form-group
+                        :state="valueState"
+                        label-for="name-input"
+                        :invalid-feedback="$t('ID_INVALID_CASE_NUMBER_RANGE')"
+                    >
+                        <b-form-input
+                            id="name-input"
+                            v-model="filter[0].value"
+                            :placeholder="$t('ID_CASE_NUMBER_FILTER_EG')"
+                            :state="valueState"
+                            required
+                            type="number"
+                        ></b-form-input>
+                    </b-form-group>
+                </form>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+export default {
+    components: {
+        SearchPopover,
+    },
+    props: ["tag", "info", "filter"],
+    data() {
+        return {
+            valueState: null,
+            showPopover: false,
+        };
+    },
+    methods: {
+        onClose() {
+            this.showPopover = true;
+        },
+        checkFormValidity() {
+            const valid = this.$refs.form.checkValidity();
+            this.valueState = valid;
+            return this.valueState;
+        },
+        handleSubmit() {
+            let self = this;
+            // Exit when the form isn't valid
+            if (!this.checkFormValidity()) {
+                return;
+            }
+            // Hide the modal manually
+            this.$nextTick(() => {
+              
+                this.$emit("updateSearchTag", this.filter);
+                self.$root.$emit("bv::hide::popover");
+            });
+        },
+        onOk() {
+            this.handleSubmit();
+        },
+        onClickTag(tag) {
+            this.$root.$emit("bv::hide::popover");
+        }
+    },
+};
+</script>
+<style scoped>
+.popovercustom {
+    max-width: 650px !important;
+}
+</style>
diff --git a/resources/assets/js/components/search/popovers/CaseNumber.vue b/resources/assets/js/components/search/popovers/CaseNumber.vue
index ed94d9f29..65f3ba3b2 100644
--- a/resources/assets/js/components/search/popovers/CaseNumber.vue
+++ b/resources/assets/js/components/search/popovers/CaseNumber.vue
@@ -6,6 +6,7 @@
             @closePopover="onClose"
             @savePopover="onOk"
             :title="info.title"
+            :autoShow="info.autoShow || false"
         >
             <template v-slot:body>
                 <p>{{ info.detail }}</p>
@@ -17,8 +18,8 @@
                     >
                         <b-form-input
                             id="name-input"
-                            v-model="info.values.filterCases"
-                            :placeholder="$t('ID_CASE_NUMBER_FILTER_EG')"
+                            v-model="filter[0].value"
+                            :placeholder="$t('ID_CASE_NUMBER_FILTER_RANGE_EG')"
                             :state="valueState"
                             required
                         ></b-form-input>
@@ -36,11 +37,11 @@ export default {
     components: {
         SearchPopover,
     },
-    props: ["tag", "info"],
+    props: ["tag", "info", "filter"],
     data() {
         return {
             valueState: null,
-            showPopover: false,
+            showPopover: false
         };
     },
     methods: {
@@ -48,9 +49,9 @@ export default {
             this.showPopover = true;
         },
         checkFormValidity() {
-            const regex = /^((\d+?)|(\d+?)(?:\-(\d+?))?)(?:\, ((\d+?)|(\d+?)(?:\-(\d+?))?))*$/;
-            regex.test(this.info.values.filterCases);
-            this.valueState = regex.test(this.info.values.filterCases);
+            const regex = /^((\d+?)|(\d+?)(?:\-(\d+?))?)(?:\,((\d+?)|(\d+?)(?:\-(\d+?))?))*$/;
+            regex.test(this.filter[0].value);
+            this.valueState = regex.test(this.filter[0].value);
             return this.valueState;
         },
         handleSubmit() {
@@ -61,12 +62,8 @@ export default {
             }
             // Hide the modal manually
             this.$nextTick(() => {
-                this.$emit("updateSearchTag", {
-                    CaseNumber: {
-                        filterCases: self.info.values.filterCases.replace(/ /g, ""),
-                    }
-                });
-                self.$root.$emit("bv::hide::popover");
+                this.$emit("updateSearchTag", this.filter);
+                this.$root.$emit("bv::hide::popover");
             });
         },
         onOk() {
@@ -74,7 +71,7 @@ export default {
         },
         onClickTag(tag) {
             this.$root.$emit("bv::hide::popover");
-        }
+        },
     },
 };
 </script>
diff --git a/resources/assets/js/components/search/popovers/CaseTitle.vue b/resources/assets/js/components/search/popovers/CaseTitle.vue
index 1a1d0b065..7003b609e 100644
--- a/resources/assets/js/components/search/popovers/CaseTitle.vue
+++ b/resources/assets/js/components/search/popovers/CaseTitle.vue
@@ -4,6 +4,7 @@
             :target="tag"
             @savePopover="onOk"
             :title="info.title"
+            :autoShow="info.autoShow || false"
         >
         
             <template v-slot:body>
@@ -16,7 +17,7 @@
                     >
                         <b-form-input
                             id="name-input"
-                            v-model="info.values.caseTitle"
+                            v-model="filter[0].value"
                             :placeholder="$t('ID_CASE_TITLE_NAME')"
                             :state="valueState"
                             required
@@ -35,7 +36,7 @@ export default {
     components: {
         SearchPopover,
     },
-    props: ["tag", "info"],
+    props: ["tag", "info", "filter"],
     data() {
         return {
             title: "",
@@ -61,11 +62,7 @@ export default {
                 return;
             }
             this.$nextTick(() => {
-                this.$emit("updateSearchTag", {
-                    CaseTitle: {
-                        caseTitle: self.info.values.caseTitle,
-                    }
-                });
+                this.$emit("updateSearchTag", this.filter);
                 self.$root.$emit("bv::hide::popover");
             });
         },
diff --git a/resources/assets/js/components/search/popovers/CurrentUser.vue b/resources/assets/js/components/search/popovers/CurrentUser.vue
index d70113620..f8d29ea2e 100644
--- a/resources/assets/js/components/search/popovers/CurrentUser.vue
+++ b/resources/assets/js/components/search/popovers/CurrentUser.vue
@@ -9,7 +9,7 @@
                         :invalid-feedback="$t('ID_PROCESS_IS_REQUIRED')"
                     >
                         <multiselect
-                            v-model="info.selectedOption"
+                            v-model="filter[0].options"
                             :options="users"
                             placeholder="Sselect one"
                             label="USR_FULLNAME"
@@ -39,7 +39,7 @@ export default {
         SearchPopover,
         Multiselect
     },
-    props: ["tag", "info"],
+    props: ["tag", "info", "filter"],
     data() {
         return {
             users: [],
@@ -82,12 +82,9 @@ export default {
          *  Form submit handler
          */
         handleSubmit() {
-            this.$emit("updateSearchTag", {
-                CurrentUser: {
-                    selectedOption: this.info.selectedOption,
-                    userId: this.info.selectedOption.USR_ID
-                }
-            });
+            this.filter[0].value = this.filter[0].options.USR_ID;
+            this.filter[0].label = this.filter[0].options.USR_FULLNAME;
+            this.$emit("updateSearchTag", this.filter);
             this.$root.$emit("bv::hide::popover");
         }
     }
diff --git a/resources/assets/js/components/search/popovers/DateFilter.vue b/resources/assets/js/components/search/popovers/DateFilter.vue
new file mode 100644
index 000000000..f35805efc
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/DateFilter.vue
@@ -0,0 +1,69 @@
+<template>
+    <div id="">
+        <SearchPopover
+            :target="tag"
+            @savePopover="onOk"
+            :title="info.title"
+            :autoShow="info.autoShow || false"
+        >
+            <template v-slot:body>
+                <p>{{ info.detail }}</p>
+                <form ref="form" @submit.stop.prevent="handleSubmit">
+                    <div class="row">
+                        <div class="col">
+                            <b-form-group>
+                                <b-form-datepicker
+                                    id="from"
+                                    v-model="filter[0].value"
+                                    :placeholder="info.items[0].label"
+                                ></b-form-datepicker>
+                            </b-form-group>
+                        </div>
+                        <div class="col">
+                            <b-form-group>
+                                <b-form-datepicker
+                                    id="to"
+                                    v-model="filter[1].value"
+                                    :placeholder="info.items[1].label"
+                                ></b-form-datepicker>
+                            </b-form-group>
+                        </div>
+                    </div>
+                </form>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+export default {
+    components: {
+        SearchPopover,
+    },
+    props: ["tag", "info", "filter"],
+    methods: {
+        /**
+         * Submit form handler
+         */
+        handleSubmit() {
+            this.$emit("updateSearchTag", this.filter);
+            this.$root.$emit("bv::hide::popover");
+        },
+        /**
+         * On ok event handler
+         */
+        onOk() {
+            this.handleSubmit();
+        },
+        /**
+         * On click tag event handler
+         */
+        onClickTag(tag) {
+            this.$root.$emit("bv::hide::popover");
+        },
+    },
+};
+</script>
+<style scoped></style>
diff --git a/resources/assets/js/components/search/popovers/ProcessName.vue b/resources/assets/js/components/search/popovers/ProcessName.vue
index 681fca9b1..6c6c2db31 100644
--- a/resources/assets/js/components/search/popovers/ProcessName.vue
+++ b/resources/assets/js/components/search/popovers/ProcessName.vue
@@ -1,6 +1,11 @@
 <template>
     <div>
-        <SearchPopover :target="tag" @savePopover="onOk" :title="info.title">
+        <SearchPopover
+            :target="tag"
+            @savePopover="onOk"
+            :title="info.title"
+            :autoShow="info.autoShow || false"
+        >
             <template v-slot:body>
                 <p>{{ info.detail }}</p>
                 <form ref="form" @submit.stop.prevent="handleSubmit">
@@ -9,11 +14,11 @@
                         :invalid-feedback="$t('ID_PROCESS_IS_REQUIRED')"
                     >
                         <multiselect
-                            v-model="info.processOption"
+                            v-model="filter[0].options"
                             :options="processes"
-                            placeholder="Select one"
-                            label="PRO_TITLE"
-                            track-by="PRO_ID"
+                            :placeholder="info.items[0].placeholder"
+                            label="label"
+                            track-by="value"
                             :show-no-results="false"
                             @search-change="asyncFind"
                             :loading="isLoading"
@@ -37,13 +42,13 @@ import api from "./../../../api/index";
 export default {
     components: {
         SearchPopover,
-        Multiselect
+        Multiselect,
     },
-    props: ["tag", "info"],
+    props: ["tag", "info", "filter"],
     data() {
         return {
             processes: [],
-            isLoading: false
+            isLoading: false,
         };
     },
     methods: {
@@ -52,12 +57,18 @@ export default {
          * @param {string} query - string from the text field
          */
         asyncFind(query) {
+            let self = this;
             this.isLoading = true;
+            self.processes = [];
             api.filters
                 .processList(query)
                 .then((response) => {
-                    this.processes = response.data;
-                    this.countries = response;
+                    _.forEach(response.data, function(elem, key) {
+                        self.processes.push({
+                            label: elem.PRO_TITLE,
+                            value: elem.PRO_ID,
+                        });
+                    });
                     this.isLoading = false;
                 })
                 .catch((e) => {
@@ -82,15 +93,11 @@ export default {
          *  Form submit handler
          */
         handleSubmit() {
-            this.$emit("updateSearchTag", {
-                ProcessName: {
-                    processOption: this.info.processOption,
-                    process: this.info.processOption.PRO_ID,
-                }
-            });
+            this.filter[0].value = this.filter[0].options.value;
+            this.$emit("updateSearchTag", this.filter);
             this.$root.$emit("bv::hide::popover");
-        }
-    }
+        },
+    },
 };
 </script>
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
diff --git a/resources/assets/js/components/search/popovers/SearchPopover.vue b/resources/assets/js/components/search/popovers/SearchPopover.vue
index a82787fd5..28975b0d7 100644
--- a/resources/assets/js/components/search/popovers/SearchPopover.vue
+++ b/resources/assets/js/components/search/popovers/SearchPopover.vue
@@ -3,11 +3,12 @@
         <slot name="target-item"></slot>
 
         <b-popover
-            :show.sync="popoverShow"
+            :show="autoShow"
             :target="target"
+            ref="popover"
             triggers="click"
             placement="bottom"
-            class="popovercustom"
+            class="popovercustom" 
         >
             <template #title>
                 <b-button @click="onClose" class="close" aria-label="Close">
@@ -29,18 +30,14 @@
 </template>
 <script>
 export default {
-    props: ['target', "title"],
-    data() {
-        return {
-           popoverShow: false
-        };
-    },
+    props: ['target', "title", "autoShow"],
+
     methods: {
         /**
          * Close buton click handler 
          */
         onClose() {
-            this.popoverShow = false;
+            this.$refs.popover.$emit('close');
             this.$emit('closePopover');
         },
         /**
diff --git a/resources/assets/js/home/AdvancedSearch.vue b/resources/assets/js/home/AdvancedSearch.vue
index 86310027d..07601edf5 100644
--- a/resources/assets/js/home/AdvancedSearch.vue
+++ b/resources/assets/js/home/AdvancedSearch.vue
@@ -10,7 +10,9 @@
             {{ message }}
         </b-alert>
         <button-fleft :data="newCase"></button-fleft>
-        <GenericFilter
+        <h5>{{$t('ID_ADVANCEDSEARCH')}}</h5>
+        
+        <AdvancedFilter
             :id="id"
             :name="name"
             :filters="filters"
@@ -82,7 +84,7 @@
 <script>
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
-import GenericFilter from "../components/search/GenericFilter";
+import AdvancedFilter from "../components/search/AdvancedFilter";
 import TaskCell from "../components/vuetable/TaskCell.vue";
 import api from "./../api/index";
 import { Event } from "vue-tables-2";
@@ -90,7 +92,7 @@ import { Event } from "vue-tables-2";
 export default {
     name: "AdvancedSearch",
     components: {
-        GenericFilter,
+        AdvancedFilter,
         ButtonFleft,
         ModalNewRequest,
         TaskCell
@@ -172,18 +174,16 @@ export default {
                 dt,
                 paged,
                 limit = data.limit,
+                filters = {},
                 start = data.page === 1 ? 0 : limit * (data.page - 1);
             paged = start + ',' + limit;
+            filters["paged"] = paged;
             return new Promise((resolutionFunc, rejectionFunc) => {
-                let filters = {};
-                _.forIn(this.filters, function(value, key) {
-                    filters = {...filters, ...value};
+                _.forIn(this.filters, function(item, key) {
+                    filters[item.filterVar] = item.value;
                 });
                 api.cases
-                    .search({
-                        filters,
-                        paged:paged
-                    })
+                    .search(filters)
                     .then((response) => {
                         dt = that.formatDataResponse(response.data.data);
                         resolutionFunc({
@@ -412,7 +412,7 @@ export default {
          * @param {string} message - message to be displayen in the body
          * @param {string} type - alert type
          */
-        showAlert(message, type) {
+        showAlert(message, type) {  
             this.message = message;
             this.variant = type || "info";
             this.dismissCountDown = this.dismissSecs;
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index c05bb1e57..6e6a0bb4d 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -78,7 +78,7 @@ export default {
             sidebarWidth: "310px",
             pageId: null,
             pageName: null,
-            filters: {},
+            filters:  null,
         };
     },
     mounted() {
@@ -151,6 +151,7 @@ export default {
                 this.pageId = item.item.id;
                 this.pageName = item.item.title;
             } else {
+                this.filters = [];
                 this.page = item.item.id || "MyCases";
             }
         },
@@ -226,7 +227,7 @@ export default {
             this.page = "advanced-search";
             this.pageId = null;
             this.pageName = null;
-            this.filters = {};
+            this.filters = [];
         },
         onUpdatePage(page) {
             this.lastPage = this.page;
diff --git a/resources/assets/js/home/MyCases.vue b/resources/assets/js/home/MyCases.vue
index ecaa10f69..faf02ecaa 100644
--- a/resources/assets/js/home/MyCases.vue
+++ b/resources/assets/js/home/MyCases.vue
@@ -1,399 +1,424 @@
 <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>
+    <div id="v-mycases" ref="v-mycases" class="v-container-mycases">
+        <button-fleft :data="newCase"></button-fleft>
+        <MyCasesFilter
+            :filters="filters"
+            @onRemoveFilter="onRemoveFilter"
+            @onUpdateFilters="onUpdateFilters"
+        />
+        <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="pending_taks" slot-scope="props">
-        <GroupedCell :data="props.row.PENDING_TASKS" />
-      </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" @click="openComments(props.row)">
-          <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>
-    <ModalComments ref="modal-comments"></ModalComments>
-  </div>
+        <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="pending_taks" slot-scope="props">
+                <GroupedCell :data="props.row.PENDING_TASKS" />
+            </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" @click="openComments(props.row)">
+                    <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>
+        <ModalComments ref="modal-comments"></ModalComments>
+    </div>
 </template>
 
 <script>
 import HeaderCounter from "../components/home/HeaderCounter.vue";
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
+import MyCasesFilter from "../components/search/MyCasesFilter";
 import ModalComments from "./modal/ModalComments.vue";
 import GroupedCell from "../components/utils/GroupedCell.vue";
 import api from "./../api/index";
 
 export default {
-  name: "MyCases",
-  components: {
-    HeaderCounter,
-    ButtonFleft,
-    ModalNewRequest,
-    GroupedCell,
-    ModalComments,
-  },
-  props: {},
-  data() {
-    return {
-      metrics: [],
-      filter: "CASES_INBOX",
-      allView: [],
-      filterHeader: "STARTED",
-      headers: [],
-      newCase: {
-        title: "New Case",
-        class: "btn-success",
-        onClick: () => {
-          this.$refs["newRequest"].show();
-        },
-      },
-      columns: [
-        "case_number",
-        "case_title",
-        "process_name",
-        "pending_taks",
-        "status",
-        "start_date",
-        "finish_date",
-        "duration",
-        "actions",
-      ],
-      tableData: [],
-      options: {
-        headings: {
-          case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
-          case_title: this.$i18n.t("ID_CASE_TITLE"),
-          process_name: this.$i18n.t("ID_PROCESS_NAME"),
-          pending_taks: this.$i18n.t("PENDING_TASKS"),
-          status: this.$i18n.t("ID_CASESLIST_APP_STATUS"),
-          start_date: this.$i18n.t("ID_START_DATE"),
-          finish_date: this.$i18n.t("ID_FINISH_DATE"),
-          duration: this.$i18n.t("ID_DURATION"),
-          actions: "",
-        },
-        selectable: {
-          mode: "single",
-          only: function (row) {
-            return true;
-          },
-          selectAllMode: "page",
-          programmatic: false,
-        },
-        requestFunction(data) {
-          return this.$parent.$parent.getCasesForVueTable(data);
-        },
-      },
-      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();
-  },
-  watch: {},
-  computed: {
-    /**
-     * Build our ProcessMaker apiClient
-     */
-    ProcessMaker() {
-      return window.ProcessMaker;
+    name: "MyCases",
+    components: {
+        MyCasesFilter,
+        HeaderCounter,
+        ButtonFleft,
+        ModalNewRequest,
+        GroupedCell,
+        ModalComments,
     },
-  },
-  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(data) {
-      let that = this,
-        dt,
-        paged,
-        limit = data.limit,
-        start = data.page === 1 ? 0 : limit * (data.page - 1);
-      paged = start + ',' + limit;
-      return new Promise((resolutionFunc, rejectionFunc) => {
-        api.cases
-          .myCases({
-            filter: that.filterHeader,
-            paged: paged
-          })
-          .then((response) => {
-            dt = that.formatDataResponse(response.data.data);
-            resolutionFunc({
-              data: dt,
-              count: response.data.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.APP_CREATE_DATE || "",
-          FINISH_DATE: v.APP_FINISH_DATE || "",
-          PENDING_TASKS: [],
-          DURATION: v.DURATION,
-          DEL_INDEX: v.DEL_INDEX,
-          APP_UID: v.APP_UID,
-          PRO_UID: v.PRO_UID,
-          TAS_UID: v.TAS_UID,
-        });
-      });
-      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: {
-            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",
-          },
+    props: ["filters"],
+    data() {
+        return {
+            metrics: [],
+            filter: "CASES_INBOX",
+            allView: [],
+            filterHeader: "STARTED",
+            headers: [],
+            newCase: {
+                title: "New Case",
+                class: "btn-success",
+                onClick: () => {
+                    this.$refs["newRequest"].show();
+                },
+            },
+            columns: [
+                "case_number",
+                "case_title",
+                "process_name",
+                "pending_taks",
+                "status",
+                "start_date",
+                "finish_date",
+                "duration",
+                "actions",
+            ],
+            tableData: [],
+            options: {
+                filterable: false,
+                headings: {
+                    case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
+                    case_title: this.$i18n.t("ID_CASE_TITLE"),
+                    process_name: this.$i18n.t("ID_PROCESS_NAME"),
+                    pending_taks: this.$i18n.t("PENDING_TASKS"),
+                    status: this.$i18n.t("ID_CASESLIST_APP_STATUS"),
+                    start_date: this.$i18n.t("ID_START_DATE"),
+                    finish_date: this.$i18n.t("ID_FINISH_DATE"),
+                    duration: this.$i18n.t("ID_DURATION"),
+                    actions: "",
+                },
+                selectable: {
+                    mode: "single",
+                    only: function(row) {
+                        return true;
+                    },
+                    selectAllMode: "page",
+                    programmatic: false,
+                },
+                requestFunction(data) {
+                    return this.$parent.$parent.getCasesForVueTable(data);
+                },
+            },
+            translations: null,
+            pmDateFormat: "Y-m-d H:i:s",
         };
-      _.forEach(response, (v) => {
-        data.push({
-          title: this.$i18n.t(v.id),
-          counter: v.counter,
-          item: v.item,
-          icon: info[v.id].icon,
-          onClick: (obj) => {
-            that.filterHeader = obj.item;
-            that.$refs["vueTable"].getData();
-          },
-          class: info[v.id].class,
-        });
-      });
-      return data;
     },
-    openComments(data) {
-      let that = this;
-      api.cases.open(_.extend({ ACTION: "todo" }, data)).then(() => {
-        that.$refs["modal-comments"].dataCase = data;
-        that.$refs["modal-comments"].show();
-      });
+    mounted() {
+        this.getHeaders();
+    },
+    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(data) {
+            let that = this,
+                dt,
+                paged,
+                limit = data.limit,
+                start = data.page === 1 ? 0 : limit * (data.page - 1),
+                filters = {};
+                paged = start + "," + limit;
+                
+            filters = {
+                filter: that.filterHeader,
+                paged: paged,
+            };
+            _.forIn(this.filters, function(item, key) {
+                filters[item.filterVar] = item.value;
+            });
+            return new Promise((resolutionFunc, rejectionFunc) => {
+                api.cases
+                    .myCases(filters)
+                    .then((response) => {
+                        dt = that.formatDataResponse(response.data.data);
+                        resolutionFunc({
+                            data: dt,
+                            count: response.data.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.APP_CREATE_DATE || "",
+                    FINISH_DATE: v.APP_FINISH_DATE || "",
+                    PENDING_TASKS: [],
+                    DURATION: v.DURATION,
+                    DEL_INDEX: v.DEL_INDEX,
+                    APP_UID: v.APP_UID,
+                    PRO_UID: v.PRO_UID,
+                    TAS_UID: v.TAS_UID,
+                });
+            });
+            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: {
+                        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",
+                    },
+                };
+            console.log(response);
+            _.forEach(response, (v) => {
+                data.push({
+                    title: v.title,
+                    counter: v.counter,
+                    item: v.id,
+                    icon: info[v.id].icon,
+                    onClick: (obj) => {
+                        that.filterHeader = obj.item;
+                        that.$refs["vueTable"].getData();
+                    },
+                    class: info[v.id].class,
+                });
+            });
+            return data;
+        },
+        openComments(data) {
+            let that = this;
+            api.cases.open(_.extend({ ACTION: "todo" }, data)).then(() => {
+                that.$refs["modal-comments"].dataCase = data;
+                that.$refs["modal-comments"].show();
+            });
+        },
+        onRemoveFilter(data) {
+            console.log(data);
+        },
+
+        onUpdateFilters(data) {
+            this.$emit("onUpdateFilters", data.params);
+            if (data.refresh) {
+                this.$nextTick(() => {
+                    this.$refs["vueTable"].getData();
+                });
+            }
+        },
     },
-  },
 };
 </script>
 <style>
 .v-container-mycases {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  padding-left: 50px;
-  padding-right: 50px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-left: 50px;
+    padding-right: 50px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/workflow/engine/content/translations/english/processmaker.en.po b/workflow/engine/content/translations/english/processmaker.en.po
index 75eeaf706..1d483b985 100755
--- a/workflow/engine/content/translations/english/processmaker.en.po
+++ b/workflow/engine/content/translations/english/processmaker.en.po
@@ -1999,6 +1999,12 @@ msgstr "Add field"
 msgid "Add file"
 msgstr "Add file"
 
+# TRANSLATION
+# LABEL/ID_ADD_FILTER
+#: LABEL/ID_ADD_FILTER
+msgid "Add Filter"
+msgstr "Add Filter"
+
 # TRANSLATION
 # LABEL/ID_ADD_HORIZONTAL_LINE
 #: LABEL/ID_ADD_HORIZONTAL_LINE
@@ -2035,6 +2041,12 @@ msgstr "Add Permission To Role"
 msgid "Add Row"
 msgstr "Add Row"
 
+# TRANSLATION
+# LABEL/ID_ADD_SEARCH_FILTER_CRITERIA
+#: LABEL/ID_ADD_SEARCH_FILTER_CRITERIA
+msgid "Add Search Filter Criteria"
+msgstr "Add Search Filter Criteria"
+
 # TRANSLATION
 # LABEL/ID_ADD_SUB_PROCESS
 #: LABEL/ID_ADD_SUB_PROCESS
@@ -2975,6 +2987,48 @@ msgstr "Button"
 msgid "Buy now"
 msgstr "Buy now"
 
+# TRANSLATION
+# LABEL/ID_BY_CASE_NUMBER
+#: LABEL/ID_BY_CASE_NUMBER
+msgid "By Case #"
+msgstr "By Case #"
+
+# TRANSLATION
+# LABEL/ID_BY_CASE_TITLE
+#: LABEL/ID_BY_CASE_TITLE
+msgid "By Case Title"
+msgstr "By Case Title"
+
+# TRANSLATION
+# LABEL/ID_BY_PROCESS_NAME
+#: LABEL/ID_BY_PROCESS_NAME
+msgid "By Process Name"
+msgstr "By Process Name"
+
+# TRANSLATION
+# LABEL/ID_BY_TASK
+#: LABEL/ID_BY_TASK
+msgid "By Task"
+msgstr "By Task"
+
+# TRANSLATION
+# LABEL/ID_BY_STATUS
+#: LABEL/ID_BY_STATUS
+msgid "By Status"
+msgstr "By Status"
+
+# TRANSLATION
+# LABEL/ID_BY_START_DATE
+#: LABEL/ID_BY_START_DATE
+msgid "By Start Date"
+msgstr "By Start Date"
+
+# TRANSLATION
+# LABEL/ID_BY_FINISH_DATE
+#: LABEL/ID_BY_FINISH_DATE
+msgid "By Finish Date"
+msgstr "By Finish Date"
+
 # TRANSLATION
 # LABEL/ID_CACHE_BTN_BUILD
 #: LABEL/ID_CACHE_BTN_BUILD
@@ -3953,6 +4007,18 @@ msgstr "Case number"
 msgid "Case Number"
 msgstr "Case Number"
 
+# TRANSLATION
+# LABEL/ID_CASE_NUMBER_FILTER_EG
+#: LABEL/ID_CASE_NUMBER_FILTER_EG
+msgid "e.g. 8"
+msgstr "e.g. 8"
+
+# TRANSLATION
+# LABEL/ID_CASE_NUMBER_FILTER_RANGE_EG
+#: LABEL/ID_CASE_NUMBER_FILTER_RANGE_EG
+msgid "e.g. 1-5, 8, 11-13"
+msgstr "e.g. 1-5, 8, 11-13"
+
 # TRANSLATION
 # LABEL/ID_CASE_OUTPUT_DOCUMENT_DOES_NOT_EXIST
 #: LABEL/ID_CASE_OUTPUT_DOCUMENT_DOES_NOT_EXIST
@@ -4061,6 +4127,12 @@ msgstr "The case has not stopped due to its trigger."
 msgid "Case Title"
 msgstr "Case Title"
 
+# TRANSLATION
+# LABEL/ID_CASE_TITLE_NAME
+#: LABEL/ID_CASE_TITLE_NAME
+msgid "Case Title Name"
+msgstr "Case Title Name"
+
 # TRANSLATION
 # LABEL/ID_CASE_TRACKERS
 #: LABEL/ID_CASE_TRACKERS
@@ -6053,6 +6125,12 @@ msgstr "Delete Role"
 msgid "Delete Routes"
 msgstr "Delete Routes"
 
+# TRANSLATION
+# LABEL/ID_DELETE_SEARCH
+#: LABEL/ID_DELETE_SEARCH
+msgid "Delete Search"
+msgstr "Delete Search"
+
 # TRANSLATION
 # LABEL/ID_DELETE_SELECTED_ITEMS
 #: LABEL/ID_DELETE_SELECTED_ITEMS
@@ -8723,12 +8801,24 @@ msgstr "From"
 msgid "Sender Email"
 msgstr "Sender Email"
 
+# TRANSLATION
+# LABEL/ID_FROM_FINISH_DATE
+#: LABEL/ID_FROM_FINISH_DATE
+msgid "From Finish Date"
+msgstr "From Finish Date"
+
 # TRANSLATION
 # LABEL/ID_FROM_NAME
 #: LABEL/ID_FROM_NAME
 msgid "Sender Name"
 msgstr "Sender Name"
 
+# TRANSLATION
+# LABEL/ID_FROM_START_DATE
+#: LABEL/ID_FROM_START_DATE
+msgid "From Start Date"
+msgstr "From Start Date"
+
 # TRANSLATION
 # LABEL/ID_FTP_MONITOR_SETTINGS
 #: LABEL/ID_FTP_MONITOR_SETTINGS
@@ -9377,6 +9467,12 @@ msgstr "Hide Dirs"
 msgid "Hide Process Information"
 msgstr "Hide Process Information"
 
+# TRANSLATION
+# LABEL/ID_HIGH
+#: LABEL/ID_HIGH
+msgid "High"
+msgstr "High"
+
 # TRANSLATION
 # LABEL/ID_HISTORY
 #: LABEL/ID_HISTORY
@@ -10217,6 +10313,12 @@ msgstr "You have set a invalid Application Number"
 msgid "Invalid Case Delegation index for this user"
 msgstr "Invalid Case Delegation index for this user"
 
+# TRANSLATION
+# LABEL/ID_INVALID_CASE_NUMBER_RANGE
+#: LABEL/ID_INVALID_CASE_NUMBER_RANGE
+msgid "Invalid case number range, use e.g. 1-5, 8, 11-13"
+msgstr "Invalid case number range, use e.g. 1-5, 8, 11-13"
+
 # TRANSLATION
 # LABEL/ID_INVALID_DATA
 #: LABEL/ID_INVALID_DATA
@@ -10637,6 +10739,12 @@ msgstr "Last Employee"
 msgid "Last Login"
 msgstr "Last Login"
 
+# TRANSLATION
+# LABEL/ID_LAST_MODIFIED_DATE
+#: LABEL/ID_LAST_MODIFIED_DATE
+msgid "Last-Modified Date"
+msgstr "Last-Modified Date"
+
 # TRANSLATION
 # LABEL/ID_LAST_MODIFY
 #: LABEL/ID_LAST_MODIFY
@@ -10931,6 +11039,12 @@ msgstr "Case Scheduler Log"
 msgid "Log Information"
 msgstr "Log Information"
 
+# TRANSLATION
+# LABEL/ID_LOW
+#: LABEL/ID_LOW
+msgid "Low"
+msgstr "Low"
+
 # TRANSLATION
 # LABEL/ID_MAFE_TRANSLATION_DIRECTORY
 #: LABEL/ID_MAFE_TRANSLATION_DIRECTORY
@@ -21011,12 +21125,42 @@ msgstr "Please select the plugin"
 msgid "Please select a .po file"
 msgstr "Please select a .po file"
 
+# TRANSLATION
+# LABEL/ID_PLEASE_SELECT_THE_STATUS_FOR_THE_SEARCH
+#: LABEL/ID_PLEASE_SELECT_THE_STATUS_FOR_THE_SEARCH
+msgid "Please select the status for the search:"
+msgstr "Please select the status for the search:"
+
 # TRANSLATION
 # LABEL/ID_PLEASE_SELECT_UPGRADE_FILE
 #: LABEL/ID_PLEASE_SELECT_UPGRADE_FILE
 msgid "Please select the upgrade file"
 msgstr "Please select the upgrade file"
 
+# TRANSLATION
+# LABEL/ID_PLEASE_SET_A_RANGE_OF_CASES_START_DATE_TO_SEARCH
+#: LABEL/ID_PLEASE_SET_A_RANGE_OF_CASES_START_DATE_TO_SEARCH
+msgid "Please set a range of cases Start Date to search:"
+msgstr "Please set a range of cases Start Date to search:"
+
+# TRANSLATION
+# LABEL/ID_PLEASE_SET_A_RANGE_OF_CASES_FINISH_DATE_TO_SEARCH
+#: LABEL/ID_PLEASE_SET_A_RANGE_OF_CASES_FINISH_DATE_TO_SEARCH
+msgid "Please set a range of cases Finish Date to search:"
+msgstr "Please set a range of cases Finish Date to search:"
+
+# TRANSLATION
+# LABEL/ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH
+#: LABEL/ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH
+msgid "Please set a range of cases to search:"
+msgstr "Please set a range of cases to search:"
+
+# TRANSLATION
+# LABEL/ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED
+#: LABEL/ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED
+msgid "Please set the case number to be searched:"
+msgstr "Please set the case number to be searched:"
+
 # TRANSLATION
 # LABEL/ID_PLEASE_SET_VALUE_DAYS_EXECUTION_TIME_FIELD
 #: LABEL/ID_PLEASE_SET_VALUE_DAYS_EXECUTION_TIME_FIELD
@@ -23494,6 +23638,12 @@ msgstr "Save Line Position"
 #: LABEL/ID_SAVE_NEW_STEP
 msgid "Save New Step"
 msgstr "Save New Step"
+ 
+# TRANSLATION
+# LABEL/ID_SAVE_SEARCH
+#: LABEL/ID_SAVE_SEARCH
+msgid "Save Search"
+msgstr "Save Search"
 
 # TRANSLATION
 # LABEL/ID_SAVE_SETTINGS
@@ -23645,6 +23795,36 @@ msgstr "An unexpected error occurred while searching for your results. Please co
 msgid "Search also in the APP_UID field"
 msgstr "Search also in the APP_UID field"
 
+# TRANSLATION
+# LABEL/ID_SEARCH_BY_CASE_NUMBER
+#: LABEL/ID_SEARCH_BY_CASE_NUMBER
+msgid "Search by Case #:"
+msgstr "Search by Case #:"
+
+# TRANSLATION
+# LABEL/ID_SEARCH_BY_CASE_TITLE
+#: LABEL/ID_SEARCH_BY_CASE_TITLE
+msgid "Search by Case Title:"
+msgstr "Search by Case Title:"
+
+# TRANSLATION
+# LABEL/ID_SEARCH_BY_FINISH_DATE
+#: LABEL/ID_SEARCH_BY_FINISH_DATE
+msgid "Search by Finish Date:"
+msgstr "Search by Finish Date:"
+
+# TRANSLATION
+# LABEL/ID_SEARCH_BY_PROCESS_NAME
+#: LABEL/ID_SEARCH_BY_PROCESS_NAME
+msgid "Search by Process Name:"
+msgstr "Search by Process Name:"
+
+# TRANSLATION
+# LABEL/ID_SEARCH_BY_START_DATE
+#: LABEL/ID_SEARCH_BY_START_DATE
+msgid "Search by Start Date:"
+msgstr "Search by Start Date:"
+
 # TRANSLATION
 # LABEL/ID_SEARCH_FOR_USER
 #: LABEL/ID_SEARCH_FOR_USER
@@ -25229,6 +25409,12 @@ msgstr "Task invalid or the user is not assigned to the task"
 msgid "[LABEL/ID_TASK_IN_PROGRESS] Task in Progress"
 msgstr "Task in Progress"
 
+# TRANSLATION
+# LABEL/ID_TASK_NAME
+#: LABEL/ID_TASK_NAME
+msgid "Task Name"
+msgstr "Task Name"
+
 # TRANSLATION
 # LABEL/ID_TASK_NOT_EXIST
 #: LABEL/ID_TASK_NOT_EXIST
@@ -25541,6 +25727,12 @@ msgstr "Thu"
 msgid "Timer event"
 msgstr "Timer event"
 
+# TRANSLATION
+# LABEL/ID_CLEAN_ALL
+#: LABEL/ID_CLEAN_ALL
+msgid "Clean All"
+msgstr "Clean All"
+
 # TRANSLATION
 # LABEL/ID_CLEAN_WEBENTRIES
 #: LABEL/ID_CLEAN_WEBENTRIES
@@ -25865,6 +26057,13 @@ msgstr "Total Cases Reassigned"
 msgid "To do"
 msgstr "To do"
 
+
+# TRANSLATION
+# LABEL/ID_TO_FINISH_DATE
+#: LABEL/ID_TO_FINISH_DATE
+msgid "To Finish Date (Optional)"
+msgstr "To Finish Date (Optional)"
+
 # TRANSLATION
 # LABEL/ID_TO_FLOAT
 #: LABEL/ID_TO_FLOAT
@@ -25889,6 +26088,12 @@ msgstr "Reassign"
 msgid "Review"
 msgstr "Review"
 
+# TRANSLATION
+# LABEL/ID_TO_START_DATE
+#: LABEL/ID_TO_START_DATE
+msgid "To Start Date (Optional)"
+msgstr "To Start Date (Optional)"
+
 # TRANSLATION
 # LABEL/ID_TO_STRING
 #: LABEL/ID_TO_STRING
@@ -27377,6 +27582,18 @@ msgstr "Version History"
 msgid "Vertical Line"
 msgstr "Vertical Line"
 
+# TRANSLATION
+# LABEL/ID_VERY_HIGH
+#: LABEL/ID_VERY_HIGH
+msgid "Very High"
+msgstr "Very High"
+
+# TRANSLATION
+# LABEL/ID_VERY_LOW
+#: LABEL/ID_VERY_LOW
+msgid "Very Low"
+msgstr "Very Low"
+
 # TRANSLATION
 # LABEL/ID_VIEW
 #: LABEL/ID_VIEW
diff --git a/workflow/engine/data/mysql/insert.sql b/workflow/engine/data/mysql/insert.sql
index 1b0f33bed..189c3dd10 100755
--- a/workflow/engine/data/mysql/insert.sql
+++ b/workflow/engine/data/mysql/insert.sql
@@ -57138,12 +57138,14 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_ADD_DATA_PMTABLE','en','Add Data to PM table','2014-10-10') ,
 ( 'LABEL','ID_ADD_FIELD','en','Add field','2014-01-15') ,
 ( 'LABEL','ID_ADD_FILE','en','Add file','2020-06-11') ,
+( 'LABEL','ID_ADD_FILTER','en','Add Filter','2020-12-16') ,
 ( 'LABEL','ID_ADD_HORIZONTAL_LINE','en','Add horizontal line','2015-02-20') ,
 ( 'LABEL','ID_ADD_LICENSE','en','Please add a new license','2014-01-15') ,
 ( 'LABEL','ID_ADD_MESSAGE','en','Add message','2014-01-15') ,
 ( 'LABEL','ID_ADD_NOTE','en','Add Note','2014-01-15') ,
 ( 'LABEL','ID_ADD_PERMISSION_TO_ROLE','en','Add Permission To Role','2014-10-10') ,
 ( 'LABEL','ID_ADD_ROW','en','Add Row','2014-01-15') ,
+( 'LABEL','ID_ADD_SEARCH_FILTER_CRITERIA','en','Add Search Filter Criteria','2020-12-16') ,
 ( 'LABEL','ID_ADD_SUB_PROCESS','en','Add Sub-Process','2015-02-24') ,
 ( 'LABEL','ID_ADD_TASK','en','Add Task','2015-02-20') ,
 ( 'LABEL','ID_ADD_TEXT','en','Add Text','2015-02-20') ,
@@ -57307,6 +57309,13 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_BUILD_CACHE','en','Build Cache','2014-10-10') ,
 ( 'LABEL','ID_BUTTON','en','Button','2014-01-15') ,
 ( 'LABEL','ID_BUY_NOW','en','Buy now','2014-09-18') ,
+( 'LABEL','ID_BY_CASE_NUMBER','en','By Case #','2020-12-16') ,
+( 'LABEL','ID_BY_CASE_TITLE','en','By Case Title','2020-12-16') ,
+( 'LABEL','ID_BY_PROCESS_NAME','en','Process Name','2020-12-16') ,
+( 'LABEL','ID_BY_TASK','en','By Task','2020-12-16') ,
+( 'LABEL','ID_BY_STATUS','en','By Status','2020-12-16') ,
+( 'LABEL','ID_BY_START_DATE','en','By Start Date','2020-12-16') ,
+( 'LABEL','ID_BY_FINISH_DATE','en','By Finish Date','2020-12-16') ,
 ( 'LABEL','ID_CACHE_BTN_BUILD','en','Build Cache','2014-01-15') ,
 ( 'LABEL','ID_CACHE_BTN_SETUP_PASSWRD','en','Setup Password','2014-01-15') ,
 ( 'LABEL','ID_CACHE_BTN_SETUP_SESSION','en','Delete older session files','2014-01-15') ,
@@ -57474,6 +57483,8 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_CASE_NO_CURRENT_TASKS_BECAUSE_CASE_ITS_COMPLETED','en','There are no current tasks because case {0}: {1} has COMPLETED status','2015-03-24') ,
 ( 'LABEL','ID_CASE_NUMBER','en','Case number','2015-09-15') ,
 ( 'LABEL','ID_CASE_NUMBER_CAPITALIZED','en','Case Number','2017-02-22') ,
+( 'LABEL','ID_CASE_NUMBER_FILTER_EG','en','e.g. 1-5, 8, 11-13','2020-12-16') ,
+( 'LABEL','ID_CASE_NUMBER_FILTER_RANGE_EG','en','e.g. 8','2020-12-16') ,
 ( 'LABEL','ID_CASE_OUTPUT_DOCUMENT_DOES_NOT_EXIST','en','This output document with {0}: {1} does not exist.','2016-07-28') ,
 ( 'LABEL','ID_CASE_PAUSED_SUCCESSFULLY','en','The Case {APP_NUMBER} was paused successfully and it will be unpaused on date {UNPAUSE_DATE}','2014-01-15') ,
 ( 'LABEL','ID_CASE_PAUSE_LABEL_NOTE','en','The case was paused due to:','2014-10-21') ,
@@ -57492,6 +57503,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_CASE_START','en','Start Case','2014-01-15') ,
 ( 'LABEL','ID_CASE_STOPPED_TRIGGER','en','The case has not stopped due to its trigger.','2015-01-29') ,
 ( 'LABEL','ID_CASE_TITLE','en','Case Title','2014-01-15') ,
+( 'LABEL','ID_CASE_TITLE_NAME','en','Case Title Name','2020-12-16') ,
 ( 'LABEL','ID_CASE_TRACKERS','en','Case trackers','2014-01-15') ,
 ( 'LABEL','ID_CASE_TRACKER_OBJECT_DOES_NOT_EXIST','en','The case tracker object with {0}: {1} does not exist.','2014-05-20') ,
 ( 'LABEL','ID_CASE_UNARHIVE','en','Case Unarhive','2015-09-15') ,
@@ -57533,6 +57545,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_CLASS_ALREADY_EXISTS','en','Class already exists','2014-01-15') ,
 ( 'LABEL','ID_CLASS_TABLE_DOESNT_EXIST','en','This Class Table doesn''t exist!','2014-01-15') ,
 ( 'LABEL','ID_CLEAR','en','Clear','2014-01-15') ,
+( 'LABEL','ID_CLEAN_ALL','en','Clean All','2020-12-16') ,
 ( 'LABEL','ID_CLEAN_WEBENTRIES','en','Clean web-entries','2020-11-10') ,
 ( 'LABEL','ID_CLEAN_WEBENTRIES_DESC','en','Clean web-entries','2020-11-10') ,
 ( 'LABEL','ID_CLEAR_CACHE','en','Clear Cache','2014-01-15') ,
@@ -57837,6 +57850,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_DELETE_REPORT_TABLE','en','Do you want to delete the selected report tables?','2014-01-15') ,
 ( 'LABEL','ID_DELETE_ROLE','en','Delete Role','2014-10-10') ,
 ( 'LABEL','ID_DELETE_ROUTES','en','Delete Routes','2015-02-20') ,
+( 'LABEL','ID_DELETE_SEARCH','en','Delete Search','2020-12-16') ,
 ( 'LABEL','ID_DELETE_SELECTED_ITEMS','en','Do you want to deleted selected({0}) items?','2014-01-15') ,
 ( 'LABEL','ID_DELETE_SELECTED_LOGO','en','Do you want to delete the selected logo?','2014-01-15') ,
 ( 'LABEL','ID_DELETE_SKIN','en','Delete Skin','2014-10-10') ,
@@ -58300,7 +58314,9 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_FRI','en','Fri','2014-01-15') ,
 ( 'LABEL','ID_FROM','en','From','2014-01-15') ,
 ( 'LABEL','ID_FROM_EMAIL','en','Sender Email','2017-02-21') ,
+( 'LABEL','ID_FROM_FINISH_DATE','en','From Finish Date','2020-12-16') ,
 ( 'LABEL','ID_FROM_NAME','en','Sender Name','2017-02-21') ;
+( 'LABEL','ID_FROM_START_DATE','en','From Start Date','2020-12-16') ,
 INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE )  VALUES 
 
 ( 'LABEL','ID_FTP_MONITOR_SETTINGS','en','FTP Monitor Settings','2014-01-15') ,
@@ -58413,6 +58429,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_HIDE','en','Hide','2014-01-15') ,
 ( 'LABEL','ID_HIDE_DIRS','en','Hide Dirs','2014-05-26') ,
 ( 'LABEL','ID_HIDE_PROCESS_INF','en','Hide Process Information','2014-01-15') ,
+( 'LABEL','ID_HIGH','en','High','2020-12-16') ,
 ( 'LABEL','ID_HISTORY','en','My Case History','2014-01-15') ,
 ( 'LABEL','ID_HISTORY_MESSAGES','en','My Message History','2017-02-21') ,
 ( 'LABEL','ID_HISTORY_MESSAGE_CASE','en','Messages History','2014-01-15') ,
@@ -58559,6 +58576,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_INVALID_APPLICATION_ID_MSG','en','An invalid application ID was stored for the session. <br/> This could have happened if you opened another case in a new tab or window. <br/> Please {0} the case.','2014-10-21') ,
 ( 'LABEL','ID_INVALID_APPLICATION_NUMBER','en','You have set a invalid Application Number','2014-01-15') ,
 ( 'LABEL','ID_INVALID_CASE_DELEGATION_INDEX','en','Invalid Case Delegation index for this user','2014-01-15') ,
+( 'LABEL','ID_INVALID_CASE_NUMBER_RANGE','en','Invalid case number range, use e.g. 1-5, 8, 11-13','2020-12-16') ,
 ( 'LABEL','ID_INVALID_DATA','en','Invalid data','2014-01-15') ,
 ( 'LABEL','ID_INVALID_END_HOURS','en','The following end hours rows are invalid:','2014-01-15') ,
 ( 'LABEL','ID_INVALID_EXTENSION','en','Invalid file extension!','2014-01-15') ,
@@ -58630,6 +58648,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_LASTNAME','en','Last Name','2014-01-15') ,
 ( 'LABEL','ID_LAST_EMPLOYEE','en','Last Employee','2014-01-15') ,
 ( 'LABEL','ID_LAST_LOGIN','en','Last Login','2014-01-15') ,
+( 'LABEL','ID_LAST_MODIFIED_DATE','en','Last-Modified Date','2020-12-16') ,
 ( 'LABEL','ID_LAST_MODIFY','en','Last Modified','2017-02-21') ,
 ( 'LABEL','ID_LAST_NAME','en','Last Name','2014-01-15') ,
 ( 'LABEL','ID_LAST_RUN_TIME','en','Last Run Time','2014-01-15') ;
@@ -58681,6 +58700,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_LOG_AGAIN','en','Please login again to apply the changes.','2014-01-15') ,
 ( 'LABEL','ID_LOG_CASE_SCHEDULER','en','Case Scheduler Log','2014-01-15') ,
 ( 'LABEL','ID_LOG_INFO','en','Log Information','2014-01-15') ,
+( 'LABEL','ID_LOW','en','Low','2020-12-16') ,
 ( 'LABEL','ID_MAFE_TRANSLATION_DIRECTORY','en','MAFE Translation Directory','2014-01-15') ,
 ( 'LABEL','ID_MAFE_0015b7e51c1ca4293041c429985ca323','en','The specified subform could not be found in the process.', NOW()) ,
 ( 'LABEL','ID_MAFE_0025301679e9722c3abd5914cfbc7dd7','en','Database connection edited successfully', NOW()) ,
@@ -60402,7 +60422,12 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_PLEASE_SELECT_PHOTO','en','Please select a photo','2014-01-15') ,
 ( 'LABEL','ID_PLEASE_SELECT_PLUGIN','en','Please select the plugin','2014-01-15') ,
 ( 'LABEL','ID_PLEASE_SELECT_PO_FILE','en','Please select a .po file','2014-01-15') ,
-( 'LABEL','ID_PLEASE_SELECT_UPGRADE_FILE','en','Please select the upgrade file','2014-01-15') ,
+( 'LABEL','ID_PLEASE_SELECT_THE_STATUS_FOR_THE_SEARCH','en','Please select the status for the search:','2020-12-16') ,
+( 'LABEL','ID_PLEASE_SELECT_UPGRADE_FILE','en','Please select the upgrade file','2014-01-15') ,º
+( 'LABEL','ID_PLEASE_SET_A_RANGE_OF_CASES_START_DATE_TO_SEARCH','en','Please set a range of cases Start Date to search:','2020-12-16') ,
+( 'LABEL','ID_PLEASE_SET_A_RANGE_OF_CASES_FINISH_DATE_TO_SEARCH','en','Please set a range of cases Finish Date to search:','2020-12-16') ,
+( 'LABEL','ID_PLEASE_SET_A_RANGE_TO_CASES_TO_SEARCH','en','Please set a range of cases to search:','2020-12-16') ,
+( 'LABEL','ID_PLEASE_SET_THE_CASE_NUMBER_TO_BE_SEARCHED','en','Please set the case number to be searched:','2020-12-16') ,
 ( 'LABEL','ID_PLEASE_SET_VALUE_DAYS_EXECUTION_TIME_FIELD','en','Please, set a value for the days in the Execution Time field.','2014-10-23') ,
 ( 'LABEL','ID_PLEASE_TRY_LATER','en','Please try later.','2016-04-08') ,
 ( 'LABEL','ID_PLEASE_WAIT','en','Please wait...','2014-01-15') ,
@@ -60829,6 +60854,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_SAVE_DYNAFORM_INFORMATION_BEFORE_PRINTING','en','Do you want to save the dynaform information before printing it?','2014-01-15') ,
 ( 'LABEL','ID_SAVE_GUIDE_POSITION','en','Save Line Position','2015-02-20') ,
 ( 'LABEL','ID_SAVE_NEW_STEP','en','Save New Step','2015-02-20') ,
+( 'LABEL','ID_SAVE_SEARCH','en','Save Search','2020-12-16') ,
 ( 'LABEL','ID_SAVE_SETTINGS','en','Save Settings','2014-01-15') ,
 ( 'LABEL','ID_SAVE_TASK_POSITION','en','Save Task Position','2015-02-20') ,
 ( 'LABEL','ID_SAVE_TASK_PROPERTIES','en','Save Task Properties','2015-02-20') ,
@@ -60854,6 +60880,11 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_SEARCHING_UNEXPECTED_ERROR','en','An unexpected error occurred while searching for your results. Error Code {0} and Please contact your administrator.','2019-05-03') ,
 ( 'LABEL','ID_SEARCHING_UNEXPECTED_ERROR_DEFAULT','en','An unexpected error occurred while searching for your results. Please contact your administrator.','2019-05-15') ,
 ( 'LABEL','ID_SEARCH_ALSO_APP_UID','en','Search also in the APP_UID field','2014-10-30') ,
+( 'LABEL','ID_SEARCH_BY_CASE_NUMBER','en','Search by Case #:','2020-12-16') ,
+( 'LABEL','ID_SEARCH_BY_CASE_TITLE','en','Search by Case Title:','2020-12-16') ,
+( 'LABEL','ID_SEARCH_BY_FINISH_DATE','en','Search by Finish Date:','2020-12-16') ,
+( 'LABEL','ID_SEARCH_BY_PROCESS_NAME','en','Search by Process Name:','2020-12-16') ,
+( 'LABEL','ID_SEARCH_BY_START_DATE','en','Search by Start Date:','2020-12-16') ,
 ( 'LABEL','ID_SEARCH_FOR_USER','en','Search for user','2015-09-15') ,
 ( 'LABEL','ID_SEARCH_PATTERN','en','Search Pattern','2014-01-15') ,
 ( 'LABEL','ID_SEARCH_RESULT','en','Search results','2014-01-15') ,
@@ -61128,6 +61159,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE )  VALUES 
 
 ( 'LABEL','ID_TASK_IN_PROGRESS','en','Task in Progress','2014-01-15') ,
+( 'LABEL','ID_TASK_NAME','en','Task Name','2020-12-16') ,
 ( 'LABEL','ID_TASK_NOT_EXIST','en','The task with {0}: ''{1}'' does not exist.','2014-05-29') ,
 ( 'LABEL','ID_TASK_NOT_FOUND','en','Task not found for id: {0}','2014-05-21') ,
 ( 'LABEL','ID_TASK_NOT_RELATED','en','[Not related to a task]','2014-01-15') ,
@@ -61269,10 +61301,12 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_TOTAL_CASES','en','Total Cases','2014-01-15') ,
 ( 'LABEL','ID_TOTAL_CASES_REASSIGNED','en','Total Cases Reassigned','2014-01-15') ,
 ( 'LABEL','ID_TO_DO','en','To do','2014-01-15') ,
+( 'LABEL','ID_TO_FINISH_DATE','en','To Finish Date (Optional)','2020-12-16') ,
 ( 'LABEL','ID_TO_FLOAT','en','Replace the value converted to float','2014-01-15') ,
 ( 'LABEL','ID_TO_INTEGER','en','Replace the value converted to integer','2014-01-15') ,
 ( 'LABEL','ID_TO_REASSIGN','en','Reassign','2014-01-15') ,
 ( 'LABEL','ID_TO_REVISE','en','Review','2014-01-15') ,
+( 'LABEL','ID_TO_START_DATE','en','To Start Date (Optional)','2020-12-16') ,
 ( 'LABEL','ID_TO_STRING','en','Replace the value in quotes','2014-01-15') ,
 ( 'LABEL','ID_TO_URL','en','Replace the value with URL encoding','2014-01-15') ,
 ( 'LABEL','ID_TRANSFER_HISTORY','en','Transfer History','2014-01-15') ,
@@ -61529,6 +61563,8 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_VERSIONING','en','Versioning','2014-01-15') ,
 ( 'LABEL','ID_VERSION_HISTORY','en','Version History','2014-01-15') ,
 ( 'LABEL','ID_VERTICAL_LINE','en','Vertical Line','2014-01-15') ,
+( 'LABEL','ID_VERY_HIGH','en','Very High','2020-12-16') ,
+( 'LABEL','ID_VERY_LOW','en','Very Low','2020-12-16') ,
 ( 'LABEL','ID_VIEW','en','View','2014-01-15') ,
 ( 'LABEL','ID_VIEW_EDIT_PROFILE','en','View/Edit Profile','2014-01-15') ,
 ( 'LABEL','ID_VIEW_INFO','en','View Information','2014-01-15') ,