From e5b221c877f99dac0a12fc8dcc3fa83cdda31461 Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Fri, 19 Nov 2021 19:53:07 +0000
Subject: [PATCH] PMCORE-3519: process category in my cases

---
 .../js/components/search/CasesFilter.vue      | 897 ++++++++++--------
 .../js/components/search/MyCasesFilter.vue    |  55 +-
 .../search/popovers/ProcessName.vue           |  17 +-
 .../js/home/AdvancedSearch/AdvancedSearch.vue |   6 +
 resources/assets/js/home/Draft/Draft.vue      |  21 +
 .../assets/js/home/Draft/defaultMixins.js     |   1 +
 resources/assets/js/home/Inbox/Inbox.vue      |  22 +-
 .../assets/js/home/Inbox/defaultMixins.js     |   2 +
 resources/assets/js/home/MyCases/MyCases.vue  |   6 +
 .../assets/js/home/MyCases/defaultMixins.js   |   6 +-
 resources/assets/js/home/Paused/Paused.vue    |  21 +
 .../assets/js/home/Paused/defaultMixins.js    |   2 +
 .../assets/js/home/Unassigned/Unassigned.vue  |  21 +
 .../js/home/Unassigned/defaultMixins.js       |   2 +
 14 files changed, 676 insertions(+), 403 deletions(-)

diff --git a/resources/assets/js/components/search/CasesFilter.vue b/resources/assets/js/components/search/CasesFilter.vue
index 00a3f55b6..3f11d067a 100644
--- a/resources/assets/js/components/search/CasesFilter.vue
+++ b/resources/assets/js/components/search/CasesFilter.vue
@@ -1,81 +1,89 @@
 <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="criteriaItems"
-                value-field="id"
-                text-field="optionLabel"
-                name="flavour-2a"
-                stacked
-            ></b-form-radio-group>
-        <b-form-group>
-        </b-form-group>
-            <b-form-checkbox
-                id="checkbox-1"
-                v-model="byProcessName"
-                name="checkbox-1"
-                value="processName"
-            >
-                {{$t('ID_BY_PROCESS_NAME') }}
-            </b-form-checkbox>
-        </b-form-group>
-      </template>
-    </SearchPopover>
-
-    <div class="p-1 v-flex">
-      <h5 class="v-search-title">{{ title }}</h5>
-      <div class="pm-in-text-icon">
-        <i :class="icon"></i>
-      </div>  
-      <b-input-group class="w-75 p-1">
-        <div class="input-group mb-3">
-          <div class="input-group-prepend">
-            <span
-              class="input-group-text bg-primary-pm text-white"
-              id="popover-target-1"
-              @click="searchClickHandler"
-            >
-              <b-icon icon="search"></b-icon
-            ></span>
-          </div>
-          <b-form-tags input-id="tags-pills" v-model="searchTags">
-            <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 badge badge-light"
-                >
-                  <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>
+    <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="criteriaItems"
+                        value-field="id"
+                        text-field="optionLabel"
+                        name="flavour-2a"
+                        stacked
+                    ></b-form-radio-group>
+                    <b-form-group> </b-form-group>
+                    <b-form-checkbox
+                        id="checkbox-1"
+                        v-model="byProcessName"
+                        name="checkbox-1"
+                        value="processName"
+                    >
+                        {{ $t("ID_BY_PROCESS_NAME") }}
+                    </b-form-checkbox>
+                    <b-form-checkbox
+                        id="checkbox-2"
+                        v-model="byProcessCategory"
+                        name="checkbox-2"
+                        value="processCategory"
+                    >
+                        {{ $t("ID_BY_PROCESS_CATEGORY") }}
+                    </b-form-checkbox>
+                </b-form-group>
             </template>
-          </b-form-tags>
+        </SearchPopover>
+
+        <div class="p-1 v-flex">
+            <h5 class="v-search-title">{{ title }}</h5>
+            <div class="pm-in-text-icon">
+                <i :class="icon"></i>
+            </div>
+            <b-input-group class="w-75 p-1">
+                <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                        <span
+                            class="input-group-text bg-primary-pm text-white"
+                            id="popover-target-1"
+                            @click="searchClickHandler"
+                        >
+                            <b-icon icon="search"></b-icon
+                        ></span>
+                    </div>
+                    <b-form-tags input-id="tags-pills" v-model="searchTags">
+                        <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 badge badge-light"
+                                >
+                                    <div :id="tag">
+                                        <i class="fas fa-tags"></i>
+                                        {{ tagContent(tag) }}
+                                    </div>
+
+                                    <component
+                                        :filters="filters"
+                                        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>
+                </div>
+            </b-input-group>
         </div>
-      </b-input-group>
     </div>
-  </div>
 </template>
 
 <script>
@@ -83,376 +91,469 @@ import SearchPopover from "./popovers/SearchPopover.vue";
 import CaseNumber from "./popovers/CaseNumber.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
+import ProcessCategory from "./popovers/ProcessCategory.vue";
 import DateFilter from "./popovers/DateFilter.vue";
 import TaskTitle from "./popovers/TaskTitle.vue";
 import CurrentUser from "./popovers/CurrentUser.vue";
 import api from "./../../api/index";
 
 export default {
-  name: "Cases",
-  props: ["filters", "title", "icon" , "hiddenItems"],
-  components: {
-    SearchPopover,
-    CaseNumber,
-    CaseTitle,
-    ProcessName,
-    DateFilter,
-    TaskTitle,
-    CurrentUser
-  },
-  data() {
-    return {
-        searchLabel: this.$i18n.t("ID_SEARCH"),
-        addSearchTitle: this.$i18n.t("ID_ADD_SEARCH_FILTER_CRITERIA"),
-        searchTags: [],
-        dataLoaded: false,
-        filterItems: [
-            {
-                type: "CaseNumber",
-                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: "filterCases",
-                        value: "",
+    name: "Cases",
+    props: ["filters", "title", "icon", "hiddenItems"],
+    components: {
+        SearchPopover,
+        CaseNumber,
+        CaseTitle,
+        ProcessName,
+        ProcessCategory,
+        DateFilter,
+        TaskTitle,
+        CurrentUser,
+    },
+    data() {
+        return {
+            searchLabel: this.$i18n.t("ID_SEARCH"),
+            addSearchTitle: this.$i18n.t("ID_ADD_SEARCH_FILTER_CRITERIA"),
+            searchTags: [],
+            dataLoaded: false,
+            filterItems: [
+                {
+                    type: "CaseNumber",
+                    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: "filterCases",
+                            value: "",
+                        },
+                    ],
+                    autoShow: true,
+                    makeTagText: function(params, data) {
+                        return `${params.tagPrefix}: ${data[0].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_THREAD_TITLE"
-                )}`,
-                optionLabel: this.$i18n.t("ID_BY_CASE_THREAD_TITLE"),
-                tagPrefix: this.$i18n.t("ID_SEARCH_BY_CASE_THREAD_TITLE"),
-                detail: "",
-                tagText: "",
-                items: [
-                    {
-                        id: "caseTitle",
-                        value: "",
+                {
+                    type: "CaseTitle",
+                    id: "caseTitle",
+                    title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+                        "ID_BY_CASE_THREAD_TITLE"
+                    )}`,
+                    optionLabel: this.$i18n.t("ID_BY_CASE_THREAD_TITLE"),
+                    tagPrefix: this.$i18n.t("ID_SEARCH_BY_CASE_THREAD_TITLE"),
+                    detail: "",
+                    tagText: "",
+                    items: [
+                        {
+                            id: "caseTitle",
+                            value: "",
+                        },
+                    ],
+                    autoShow: true,
+                    makeTagText: function(params, data) {
+                        return `${this.tagPrefix} ${data[0].value}`;
                     },
-                ],
-                autoShow: true,
-                makeTagText: function (params, data) {
-                    return `${this.tagPrefix} ${data[0].value}`;
                 },
-            },
-            {
-                type: "DateFilter",
-                id: "delegationDate",
-                title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_DELEGATION_DATE')}`,
-                optionLabel: this.$i18n.t('ID_BY_DELEGATION_DATE'),
-                detail: this.$i18n.t('ID_PLEASE_SELECT_THE_DELEGATION_DATE_TO_BE_SEARCHED'),
-                tagText: "",
-                tagPrefix:  this.$i18n.t('ID_SEARCH_BY_DELEGATION_DATE'),
-                items:[
-                    {
-                        id: "delegateFrom",
-                        value: "",
-                        label: this.$i18n.t('ID_FROM_DELEGATION_DATE')
+                {
+                    type: "DateFilter",
+                    id: "delegationDate",
+                    title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+                        "ID_BY_DELEGATION_DATE"
+                    )}`,
+                    optionLabel: this.$i18n.t("ID_BY_DELEGATION_DATE"),
+                    detail: this.$i18n.t(
+                        "ID_PLEASE_SELECT_THE_DELEGATION_DATE_TO_BE_SEARCHED"
+                    ),
+                    tagText: "",
+                    tagPrefix: this.$i18n.t("ID_SEARCH_BY_DELEGATION_DATE"),
+                    items: [
+                        {
+                            id: "delegateFrom",
+                            value: "",
+                            label: this.$i18n.t("ID_FROM_DELEGATION_DATE"),
+                        },
+                        {
+                            id: "delegateTo",
+                            value: "",
+                            label: this.$i18n.t("ID_TO_DELEGATION_DATE"),
+                        },
+                    ],
+                    makeTagText: function(params, data) {
+                        return `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
                     },
-                    {
-                        id: "delegateTo",
-                        value: "",
-                        label: this.$i18n.t('ID_TO_DELEGATION_DATE')
-                    }
-                ],
-                makeTagText: function (params, data) {
-                    return  `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
-                }
-            },
-            {
-                type: "CurrentUser",
-                id: "bySendBy",
-                title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_SEND_BY')}`,
-                optionLabel: this.$i18n.t('ID_BY_SEND_BY'),
-                detail: this.$i18n.t('ID_PLEASE_SELECT_USER_NAME_TO_BE_SEARCHED'),
-                placeholder: this.$i18n.t('ID_USER_NAME'),
-                tagText: "",
-                tagPrefix:  this.$i18n.t('ID_SEARCH_BY_SEND_BY'),
-                autoShow: true,
-                items:[
-                    {
-                        id: "sendBy",
-                        value: "",
-                        options: [],
-                        placeholder: this.$i18n.t('ID_USER_NAME')
-                    }
-                ],
-                makeTagText: function (params, data) {
-                    return  `${params.tagPrefix} : ${data[0].label || ''}`;
-                }
-            },
-            {
-                type: "TaskTitle",
-                id: "taskTitle",
-                title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
-                    "ID_TASK_NAME"
-                )}`,
-                optionLabel: this.$i18n.t("ID_BY_TASK"),
-                detail: "",
-                tagText: "",
-                tagPrefix: this.$i18n.t("ID_SEARCH_BY_TASK_NAME"),
-                autoShow: true,
-                items: [
-                    {
-                        id: "task",
-                        value: "",
-                        options: [],
-                        placeholder: this.$i18n.t("ID_TASK_NAME"),
-                    },
-                ],
-                makeTagText: function (params, data) {
-                    return `${this.tagPrefix}: ${data[0].label || ""}`;
                 },
-            },
-        ],
-        processName: {
+                {
+                    type: "CurrentUser",
+                    id: "bySendBy",
+                    title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+                        "ID_BY_SEND_BY"
+                    )}`,
+                    optionLabel: this.$i18n.t("ID_BY_SEND_BY"),
+                    detail: this.$i18n.t(
+                        "ID_PLEASE_SELECT_USER_NAME_TO_BE_SEARCHED"
+                    ),
+                    placeholder: this.$i18n.t("ID_USER_NAME"),
+                    tagText: "",
+                    tagPrefix: this.$i18n.t("ID_SEARCH_BY_SEND_BY"),
+                    autoShow: true,
+                    items: [
+                        {
+                            id: "sendBy",
+                            value: "",
+                            options: [],
+                            placeholder: this.$i18n.t("ID_USER_NAME"),
+                        },
+                    ],
+                    makeTagText: function(params, data) {
+                        return `${params.tagPrefix} : ${data[0].label || ""}`;
+                    },
+                },
+                {
+                    type: "TaskTitle",
+                    id: "taskTitle",
+                    title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+                        "ID_TASK_NAME"
+                    )}`,
+                    optionLabel: this.$i18n.t("ID_BY_TASK"),
+                    detail: "",
+                    tagText: "",
+                    tagPrefix: this.$i18n.t("ID_SEARCH_BY_TASK_NAME"),
+                    autoShow: true,
+                    items: [
+                        {
+                            id: "task",
+                            value: "",
+                            options: [],
+                            placeholder: this.$i18n.t("ID_TASK_NAME"),
+                        },
+                    ],
+                    makeTagText: function(params, data) {
+                        return `${this.tagPrefix}: ${data[0].label || ""}`;
+                    },
+                },
+            ],
+            processName: {
                 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'),
+                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'),
+                tagPrefix: this.$i18n.t("ID_SEARCH_BY_PROCESS_NAME"),
                 autoShow: true,
-                items:[
+                items: [
                     {
                         id: "process",
                         value: "",
                         options: [],
-                        placeholder: this.$i18n.t('ID_PROCESS_NAME')
-                    }
+                        placeholder: this.$i18n.t("ID_PROCESS_NAME"),
+                    },
                 ],
-                makeTagText: function (params, data) {
-                    return  `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
+                makeTagText: function(params, data) {
+                    return `${this.tagPrefix} ${(data[0].options &&
+                        data[0].options.label) ||
+                        ""}`;
+                },
+            },
+            processCategory: {
+                type: "ProcessCategory",
+                id: "processCategory",
+                title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+                    "ID_BY_PROCESS_CATEGORY"
+                )}`,
+                optionLabel: this.$i18n.t("ID_BY_PROCESS_CATEGORY"),
+                detail: "",
+                tagText: "",
+                tagPrefix: this.$i18n.t("ID_SEARCH_BY_PROCESS_CATEGORY"),
+                autoShow: true,
+                items: [
+                    {
+                        id: "category",
+                        value: "",
+                        options: [],
+                        placeholder: "",
+                    },
+                ],
+                makeTagText: function(params, data) {
+                    return `${params.tagPrefix}:  ${data[0].label || ""}`;
+                },
+            },
+            selected: "",
+            itemModel: {},
+            byProcessName: "",
+            byProcessCategory: "",
+        };
+    },
+    computed: {
+        // a computed getter
+        criteriaItems: function() {
+            let found,
+                criteria = [];
+            if (this.hiddenItems && this.hiddenItems.length) {
+                this.filterItems.forEach((item) => {
+                    found = this.hiddenItems.find((elem) => elem !== item.id);
+                    if (found) {
+                        criteria.push(item);
+                    }
+                });
+                return criteria;
+            } else {
+                return this.filterItems;
+            }
+        },
+    },
+    mounted() {},
+    watch: {
+        filters: {
+            immediate: true,
+            handler(newVal, oldVal) {
+                this.searchTags = [];
+                this.selected = [];
+                //Prevent show popover at the first time
+                if (newVal.length) {
+                    this.setFilters(newVal, oldVal);
+                    this.searchClickHandler();
                 }
             },
-        selected: "",
-        itemModel: {},
-        byProcessName: ""
-    };
-  },
-  computed: {
-    // a computed getter
-    criteriaItems: function () {
-      let found,
-          criteria = [];
-      if (this.hiddenItems && this.hiddenItems.length) {
-          this.filterItems.forEach(item =>  {
-              found = this.hiddenItems.find( elem  => elem !== item.id);
-              if (found) {
-                  criteria.push(item);
-              }
-          });
-          return criteria;
-      } else {
-          return this.filterItems;
-      }
-    }
-  },
-  mounted() {
-  },
-  watch: {
-    filters: { 
-        immediate: true, 
-        handler(newVal, oldVal) {
-            this.searchTags = [];
-            this.selected = [];
-            //Prevent show popover at the first time
-            if (newVal.length) {
-                this.setFilters(newVal, oldVal);
-                this.searchClickHandler();
+        },
+    },
+    methods: {
+        /**
+         * Add filter criteria save button handler
+         */
+        onOk() {
+            let self = this,
+                element,
+                initialFilters = [],
+                item;
+            this.$root.$emit("bv::hide::popover");
+            element = _.find(this.filterItems, function(o) {
+                return o.id === self.selected;
+            });
+            if (element) {
+                initialFilters = this.prepareFilterItems(
+                    element.items,
+                    this.selected,
+                    true
+                );
             }
-        }
-    }
-  },
-  methods: {
-    /**
-     * Add filter criteria save button handler
-     */
-    onOk() {
-        let self = this,  
-            element,
-            initialFilters = [],
-            item;
-        this.$root.$emit("bv::hide::popover");
-        element = _.find(this.filterItems, function (o) {
-            return o.id === self.selected;
-        });
-        if  (element) {
-            initialFilters = this.prepareFilterItems(element.items, this.selected, true);
-        }
-        //adding process name filter 
-        if (self.byProcessName !== "") {
-            if (element !== undefined) {
-                this.processName.autoShow = false;
-            } else {
-                this.processName.autoShow = true;
+            //adding process name filter
+            if (self.byProcessName !== "") {
+                if (element !== undefined) {
+                    this.processName.autoShow = false;
+                } else {
+                    this.processName.autoShow = true;
+                }
+                initialFilters = [
+                    ...new Set([
+                        ...initialFilters,
+                        ...this.prepareFilterItems(
+                            this.processName.items,
+                            self.byProcessName,
+                            true
+                        ),
+                    ]),
+                ];
             }
-            initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
-        }
-        this.$emit("onUpdateFilters", {params: initialFilters, refresh: false}); 
-    },
-    /**
-     * Prepare the filter items
-     * @param {array} items
-     * @param {id} string
-     * @param {boolean} restore
-     */
-    prepareFilterItems(items, id, restore){
-        let initialFilters = [],
-            self = this,
-            filter,
-            item;
-        _.forEach(items, function(value, key) {
-            filter = _.find(self.filters, function(o) { return o.filterVar === value.id; });
-            if (filter && restore) {
-                initialFilters.push(filter);
-            } else {
-                item = {
-                    filterVar: value.id,
-                    fieldId: id,
-                    value:  '',
-                    label: "",
-                    options: [],
-                    autoShow: true
-                };
-                initialFilters.push(item);
+            if (self.byProcessCategory !== "") {
+                if (element !== undefined) {
+                    this.processCategory.autoShow = false;
+                } else {
+                    this.processCategory.autoShow = true;
+                }
+                initialFilters = [
+                    ...new Set([
+                        ...initialFilters,
+                        ...this.prepareFilterItems(
+                            this.processCategory.items,
+                            self.byProcessCategory,
+                            true
+                        ),
+                    ]),
+                ];
             }
-        });
-        return initialFilters;
-    },
-    /**
-     * Set Filters and make the tag labels
-     * @param {object} filters json to manage the query
-     */
-    setFilters(filters, oldVal) {
-      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;
-            self.itemModel[component.id].autoShow = typeof item.autoShow !== "undefined" ? item.autoShow : true;
-        }
-        if(item.fieldId === "processName") {
-            self.searchTags.push(self.processName.id);
-            self.byProcessName = self.processName.id;
-            self.itemModel[self.processName.id] = self.processName;
-            self.itemModel[self.processName.id].autoShow = typeof item.autoShow !== "undefined" ? item.autoShow : self.processName.autoShow;
-        }
-      });
-    },
-    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;
-    },
+            this.$emit("onUpdateFilters", {
+                params: initialFilters,
+                refresh: false,
+            });
+        },
+        /**
+         * Prepare the filter items
+         * @param {array} items
+         * @param {id} string
+         * @param {boolean} restore
+         */
+        prepareFilterItems(items, id, restore) {
+            let initialFilters = [],
+                self = this,
+                filter,
+                item;
+            _.forEach(items, function(value, key) {
+                filter = _.find(self.filters, function(o) {
+                    return o.filterVar === value.id;
+                });
+                if (filter && restore) {
+                    initialFilters.push(filter);
+                } else {
+                    item = {
+                        filterVar: value.id,
+                        fieldId: id,
+                        value: "",
+                        label: "",
+                        options: [],
+                        autoShow: true,
+                    };
+                    initialFilters.push(item);
+                }
+            });
+            return initialFilters;
+        },
+        /**
+         * Set Filters and make the tag labels
+         * @param {object} filters json to manage the query
+         */
+        setFilters(filters, oldVal) {
+            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;
+                    self.itemModel[component.id].autoShow =
+                        typeof item.autoShow !== "undefined"
+                            ? item.autoShow
+                            : true;
+                }
+                if (item.fieldId === "processName") {
+                    self.searchTags.push(self.processName.id);
+                    self.byProcessName = self.processName.id;
+                    self.itemModel[self.processName.id] = self.processName;
+                    self.itemModel[self.processName.id].autoShow =
+                        typeof item.autoShow !== "undefined"
+                            ? item.autoShow
+                            : self.processName.autoShow;
+                }
+                if (item.fieldId === "processCategory") {
+                    self.searchTags.push(self.processCategory.id);
+                    self.byProcessCategory = self.processCategory.id;
+                    self.itemModel[self.processCategory.id] =
+                        self.processCategory;
+                    self.itemModel[self.processCategory.id].autoShow =
+                        typeof self.processCategory.autoShow !== "undefined"
+                            ? self.processCategory.autoShow
+                            : true;
+                }
+            });
+        },
+        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]) {
-        return this.itemModel[id];
-      }
-      return null;
-    },
-    /**
-     * Remove from tag button
-     * @param {function} removeTag - default callback
-     * @param {string} tag filter identifier
-     */
-    customRemove(removeTag, tag) {
-        let temp = [];
-        _.forEach(this.filters, function(item, key) {
-            if(item.fieldId !== tag) { 
-                temp.push(item);   
+        tagInfo(id) {
+            if (this.itemModel[id]) {
+                return this.itemModel[id];
             }
-        });
-        if (tag === "processName") {
-            this.byProcessName = "";
-        }
-        this.$emit("onUpdateFilters", {params: temp, refresh: true});
+            return null;
+        },
+        /**
+         * Remove from tag button
+         * @param {function} removeTag - default callback
+         * @param {string} tag filter identifier
+         */
+        customRemove(removeTag, tag) {
+            let temp = [];
+            _.forEach(this.filters, function(item, key) {
+                if (item.fieldId !== tag) {
+                    temp.push(item);
+                }
+            });
+            if (tag === "processName") {
+                this.byProcessName = "";
+            }
+            if (tag === "processCategory") {
+                this.byProcessCategory = "";
+            }
+            this.$emit("onUpdateFilters", { params: temp, 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");
+        },
     },
-    /**
-     * 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;
+    margin-top: 1rem;
 }
 
 .bv-example-row-flex-cols .row {
-  min-height: 10rem;
+    min-height: 10rem;
 }
 
 .bg-primary-pm {
-  background-color: #0099dd;
+    background-color: #0099dd;
 }
 
 .v-flex {
-  display: flex;
+    display: flex;
 }
 
 .v-search-title {
-  padding-right: 10px;
-  line-height: 40px;
+    padding-right: 10px;
+    line-height: 40px;
 }
 .pm-in-text-icon {
-  font-size: 1.40rem;
-  padding-right: 10px;
-  line-height: 40px;
+    font-size: 1.4rem;
+    padding-right: 10px;
+    line-height: 40px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/assets/js/components/search/MyCasesFilter.vue b/resources/assets/js/components/search/MyCasesFilter.vue
index 3d55fa4ef..1f7a13b43 100644
--- a/resources/assets/js/components/search/MyCasesFilter.vue
+++ b/resources/assets/js/components/search/MyCasesFilter.vue
@@ -6,6 +6,7 @@
             :title="addSearchTitle"
         >
             <template v-slot:body>
+
                 <b-form-group>
                     <b-form-radio-group
                         v-model="selected"
@@ -24,6 +25,15 @@
                 >
                     {{$t('ID_BY_PROCESS_NAME') }}
                 </b-form-checkbox>
+                <b-form-checkbox
+                    id="checkbox-2"
+                    v-model="byProcessCategory"
+                    name="checkbox-2"
+                    value="processCategory"
+                >
+                    {{$t('ID_BY_PROCESS_CATEGORY') }}
+                </b-form-checkbox>
+  
             </template>
         </SearchPopover>
 
@@ -61,6 +71,7 @@
                   </div>
 
                   <component
+                    :filters="filters"
                     v-bind:is="tagComponent(tag)"
                     v-bind:info="tagInfo(tag)"
                     v-bind:tag="tag"
@@ -82,6 +93,7 @@ import SearchPopover from "./popovers/SearchPopover.vue";
 import CaseNumber from "./popovers/CaseNumber.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
+import ProcessCategory from "./popovers/ProcessCategory.vue";
 import DateFilter from "./popovers/DateFilter.vue";
 import TaskTitle from "./popovers/TaskTitle.vue";
 import api from "./../../api/index";
@@ -94,6 +106,7 @@ export default {
         CaseNumber,
         CaseTitle,
         ProcessName,
+        ProcessCategory,
         DateFilter,
         TaskTitle
     },
@@ -235,9 +248,31 @@ export default {
                     return  `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
                 }
             },
+            processCategory:{
+                type: "ProcessCategory",
+                id: "processCategory",
+                title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_PROCESS_CATEGORY')}`,
+                optionLabel: this.$i18n.t('ID_BY_PROCESS_CATEGORY'),
+                detail: "",
+                tagText: "",
+                tagPrefix:  this.$i18n.t('ID_SEARCH_BY_PROCESS_CATEGORY'),
+                autoShow: true,
+                items:[
+                    {
+                        id: "category",
+                        value: "",
+                        options: [],
+                        placeholder: ""
+                    }
+                ],
+                makeTagText: function (params, data) {
+                    return  `${params.tagPrefix}:  ${data[0].label || ''}`;
+                }
+            },
             selected: "",
             itemModel: {},
-            byProcessName: ""
+            byProcessName: "",
+            byProcessCategory: "",
         };
     },
     mounted() {
@@ -284,6 +319,15 @@ export default {
                 }
                 initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
             }
+            //adding process name filter
+            if (self.byProcessCategory !== "") {
+                if (element !== undefined) {
+                    this.processCategory.autoShow = false;
+                } else {
+                    this.processCategory.autoShow = true;
+                }
+                initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processCategory.items, self.byProcessCategory, true)])];
+            }
             this.$emit("onUpdateFilters", {params: initialFilters, refresh: false}); 
         },
         /**
@@ -334,6 +378,12 @@ export default {
                     self.itemModel[self.processName.id] = self.processName;
                     self.itemModel[self.processName.id].autoShow = typeof self.processName.autoShow !== "undefined" ? self.processName.autoShow  : true;
                 }
+                if(item.fieldId === "processCategory") {
+                    self.searchTags.push(self.processCategory.id);
+                    self.byProcessCategory = self.processCategory.id;
+                    self.itemModel[self.processCategory.id] = self.processCategory;
+                    self.itemModel[self.processCategory.id].autoShow = typeof self.processCategory.autoShow !== "undefined" ? self.processCategory.autoShow  : true;
+                }
             });
         },
         dataToFilter(id) {
@@ -382,6 +432,9 @@ export default {
             if (tag === "processName") {
                 this.byProcessName = "";
             }
+            if (tag === "processCategory") {
+                this.byProcessCategory = "";
+            }
             this.$emit("onUpdateFilters", {params: temp, refresh: true});
         },
         /**
diff --git a/resources/assets/js/components/search/popovers/ProcessName.vue b/resources/assets/js/components/search/popovers/ProcessName.vue
index 66d4c8f7f..1869655c7 100644
--- a/resources/assets/js/components/search/popovers/ProcessName.vue
+++ b/resources/assets/js/components/search/popovers/ProcessName.vue
@@ -38,6 +38,7 @@
 import SearchPopover from "./SearchPopover.vue";
 import Multiselect from "vue-multiselect";
 import api from "./../../../api/index";
+import _ from "lodash";
 
 export default {
     components: {
@@ -57,11 +58,16 @@ export default {
          * @param {string} query - string from the text field
          */
         asyncFind(query) {
-            let self = this;
+            let self = this,
+                cat = this.verifyCategory(),
+                params = { text: query };
             this.isLoading = true;
+            if (cat) {
+                params.category = cat;
+            }
             self.processes = [];
             api.filters
-                .processList(query)
+                .processListPaged(params)
                 .then((response) => {
                     self.processes = [];
                     _.forEach(response.data, function(elem, key) {
@@ -76,6 +82,13 @@ export default {
                     console.error(err);
                 });
         },
+        verifyCategory() {
+            let cat = _.find(
+                this.$attrs.filters,
+                (o) => o.fieldId == "processCategory"
+            );
+            return cat ? cat.value : null;
+        },
         /**
          * Form validations review
          */
diff --git a/resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue b/resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue
index 3d71468e4..e4766ecf7 100644
--- a/resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue
+++ b/resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue
@@ -52,6 +52,9 @@
             <div slot="process_name" slot-scope="props">
                 {{ props.row.PROCESS_NAME }}
             </div>
+            <div slot="process_category" slot-scope="props">
+                {{ props.row.PROCESS_CATEGORY }}
+            </div>
             <div slot="task" slot-scope="props">
                 <TaskCell :data="props.row.TASK" />
             </div>
@@ -143,6 +146,7 @@ export default {
             columns: [
                 "case_number",
                 "process_name",
+                "process_category",
                 "status",
                 "thread_title",
                 "task",
@@ -158,6 +162,7 @@ export default {
                 headings: {
                     case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
                     process_name: this.$i18n.t("ID_PROCESS_NAME"),
+                    process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
                     status: this.$i18n.t("ID_STATUS"),
                     thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
                     task: this.$i18n.t("ID_TASK"),
@@ -296,6 +301,7 @@ export default {
                     CASE_NUMBER: v.APP_NUMBER,
                     THREAD_TITLE: v.THREAD_TITLES,
                     PROCESS_NAME: v.PRO_TITLE,
+                    PROCESS_CATEGORY: v.CATEGORY,
                     TASK: this.formatTasks(v.THREAD_TASKS),
                     USER_DATA: this.formatUser(v.THREAD_USERS),
                     START_DATE: v.APP_CREATE_DATE_LABEL,
diff --git a/resources/assets/js/home/Draft/Draft.vue b/resources/assets/js/home/Draft/Draft.vue
index 949fb11f5..1233b9d65 100644
--- a/resources/assets/js/home/Draft/Draft.vue
+++ b/resources/assets/js/home/Draft/Draft.vue
@@ -54,6 +54,9 @@
       <div slot="process_name" slot-scope="props">
         {{ props.row.PROCESS_NAME }}
       </div>
+      <div slot="process_category" slot-scope="props">
+        {{ props.row.PROCESS_CATEGORY }}
+      </div>
       <div slot="task" slot-scope="props">
         <TaskCell :data="props.row.TASK" />
       </div>
@@ -104,6 +107,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -178,6 +189,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -296,6 +315,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           priority: this.$i18n.t("ID_PRIORITY"),
           actions: ""
@@ -523,6 +543,7 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           THREAD_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
+          PROCESS_CATEGORY: v.CATEGORY,
           TASK: [{
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
diff --git a/resources/assets/js/home/Draft/defaultMixins.js b/resources/assets/js/home/Draft/defaultMixins.js
index 6300714b9..435876963 100644
--- a/resources/assets/js/home/Draft/defaultMixins.js
+++ b/resources/assets/js/home/Draft/defaultMixins.js
@@ -54,6 +54,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           current_user: this.$i18n.t("ID_CURRENT_USER"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
diff --git a/resources/assets/js/home/Inbox/Inbox.vue b/resources/assets/js/home/Inbox/Inbox.vue
index c8d134ee2..8536d9106 100644
--- a/resources/assets/js/home/Inbox/Inbox.vue
+++ b/resources/assets/js/home/Inbox/Inbox.vue
@@ -49,7 +49,9 @@
       <div slot="process_name" slot-scope="props">
         {{ props.row.PROCESS_NAME }}
       </div>
-
+      <div slot="process_category" slot-scope="props">
+        {{ props.row.PROCESS_CATEGORY }}
+      </div>
       <div slot="task" slot-scope="props">
         <TaskCell :data="props.row.TASK" />
       </div>
@@ -117,6 +119,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -203,6 +213,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -343,6 +361,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
@@ -574,6 +593,7 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           THREAD_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
+          PROCESS_CATEGORY: v.CATEGORY,
           TASK: [
             {
               TITLE: v.TAS_TITLE,
diff --git a/resources/assets/js/home/Inbox/defaultMixins.js b/resources/assets/js/home/Inbox/defaultMixins.js
index badbe4d69..228c9c7c5 100644
--- a/resources/assets/js/home/Inbox/defaultMixins.js
+++ b/resources/assets/js/home/Inbox/defaultMixins.js
@@ -54,6 +54,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           current_user: this.$i18n.t("ID_CURRENT_USER"),
@@ -65,6 +66,7 @@ export default {
           "case_number",
           "thread_title",
           "process_name",
+          "process_category",
           "due_date",
           "delegation_date",
           "priority",
diff --git a/resources/assets/js/home/MyCases/MyCases.vue b/resources/assets/js/home/MyCases/MyCases.vue
index e89c272aa..65182b4d5 100644
--- a/resources/assets/js/home/MyCases/MyCases.vue
+++ b/resources/assets/js/home/MyCases/MyCases.vue
@@ -50,6 +50,9 @@
             <div slot="process_name" slot-scope="props">
                 {{ props.row.PROCESS_NAME }}
             </div>
+            <div slot="process_category" slot-scope="props">
+                {{ props.row.PROCESS_CATEGORY }}
+            </div>
             <div slot="pending_taks" slot-scope="props">
                 <GroupedCell :data="props.row.PENDING_TASKS" />
             </div>
@@ -161,6 +164,7 @@ export default {
                 headings: {
                     case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
                     process_name: this.$i18n.t("ID_PROCESS_NAME"),
+                    process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
                     thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
                     pending_taks: this.$i18n.t("ID_PENDING_TASKS"),
                     status: this.$i18n.t("ID_CASESLIST_APP_STATUS"),
@@ -454,6 +458,8 @@ export default {
                     CASE_NUMBER: v.APP_NUMBER,
                     THREAD_TITLE: v.THREAD_TITLES,
                     PROCESS_NAME: v.PRO_TITLE,
+                    PROCESS_NAME: v.PRO_TITLE,
+                    PROCESS_CATEGORY: v.CATEGORY,
                     STATUS: v.APP_STATUS,
                     START_DATE: v.APP_CREATE_DATE_LABEL || "",
                     FINISH_DATE: v.APP_FINISH_DATE_LABEL || "",
diff --git a/resources/assets/js/home/MyCases/defaultMixins.js b/resources/assets/js/home/MyCases/defaultMixins.js
index aa59023fc..5c7959384 100644
--- a/resources/assets/js/home/MyCases/defaultMixins.js
+++ b/resources/assets/js/home/MyCases/defaultMixins.js
@@ -1,8 +1,12 @@
+import _ from "lodash";
 import api from "../../api/index";
 export default {
     data() {
         return {
-            random: 1
+            random: 1,
+            defaultColumnsDisabled: [
+                "process_category"
+            ]
         };
     },
     methods: {
diff --git a/resources/assets/js/home/Paused/Paused.vue b/resources/assets/js/home/Paused/Paused.vue
index 7af75ca65..40e90c4c4 100644
--- a/resources/assets/js/home/Paused/Paused.vue
+++ b/resources/assets/js/home/Paused/Paused.vue
@@ -48,6 +48,9 @@
       <div slot="process_name" slot-scope="props">
         {{ props.row.PROCESS_NAME }}
       </div>
+      <div slot="process_category" slot-scope="props">
+        {{ props.row.PROCESS_CATEGORY }}
+      </div>
       <div slot="task" slot-scope="props">
         <TaskCell :data="props.row.TASK" />
       </div>
@@ -115,6 +118,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -201,6 +212,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -342,6 +361,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
@@ -572,6 +592,7 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           THREAD_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
+          PROCESS_CATEGORY: v.CATEGORY,          
           TASK: [{
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
diff --git a/resources/assets/js/home/Paused/defaultMixins.js b/resources/assets/js/home/Paused/defaultMixins.js
index a84f77070..0e3ebf1c0 100644
--- a/resources/assets/js/home/Paused/defaultMixins.js
+++ b/resources/assets/js/home/Paused/defaultMixins.js
@@ -53,6 +53,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           current_user: this.$i18n.t("ID_CURRENT_USER"),
@@ -64,6 +65,7 @@ export default {
           "case_number",
           "thread_title",
           "process_name",
+          "process_category",
           "due_date",
           "delegation_date",
           "priority",
diff --git a/resources/assets/js/home/Unassigned/Unassigned.vue b/resources/assets/js/home/Unassigned/Unassigned.vue
index 5da720e18..b2f5d630a 100644
--- a/resources/assets/js/home/Unassigned/Unassigned.vue
+++ b/resources/assets/js/home/Unassigned/Unassigned.vue
@@ -46,6 +46,9 @@
       <div slot="process_name" slot-scope="props">
         {{ props.row.PROCESS_NAME }}
       </div>
+      <div slot="process_category" slot-scope="props">
+        {{ props.row.PROCESS_CATEGORY }}
+      </div>
       <div slot="task" slot-scope="props">
         <TaskCell :data="props.row.TASK" />
       </div>
@@ -110,6 +113,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -196,6 +207,14 @@
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
+      <div slot="process_category" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        </span>
+      </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
         <span class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
@@ -334,6 +353,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
@@ -535,6 +555,7 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           THREAD_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
+          PROCESS_CATEGORY: v.CATEGORY,
           TASK: [{
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
diff --git a/resources/assets/js/home/Unassigned/defaultMixins.js b/resources/assets/js/home/Unassigned/defaultMixins.js
index 2fd0b2853..dfc67d9df 100644
--- a/resources/assets/js/home/Unassigned/defaultMixins.js
+++ b/resources/assets/js/home/Unassigned/defaultMixins.js
@@ -53,6 +53,7 @@ export default {
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           thread_title: this.$i18n.t('ID_CASE_THREAD_TITLE'),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          process_category: this.$i18n.t("ID_PROCESS_CATEGORY"),
           task: this.$i18n.t("ID_TASK"),
           send_by: this.$i18n.t("ID_SEND_BY"),
           current_user: this.$i18n.t("ID_CURRENT_USER"),
@@ -64,6 +65,7 @@ export default {
           "case_number",
           "thread_title",
           "process_name",
+          "process_category",
           "due_date",
           "delegation_date",
           "priority",