diff --git a/config/database.php b/config/database.php
index b42d9b3..aeabec6 100644
--- a/config/database.php
+++ b/config/database.php
@@ -56,7 +56,7 @@ return [
             'collation' => 'utf8mb4_unicode_ci',
             'prefix' => '',
             'prefix_indexes' => true,
-            'strict' => true,
+            'strict' => false,
             'engine' => null,
             'options' => extension_loaded('pdo_mysql') ? array_filter([
                 PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
diff --git a/config/filesystems.php b/config/filesystems.php
index 45a038f..f8839a7 100644
--- a/config/filesystems.php
+++ b/config/filesystems.php
@@ -73,12 +73,13 @@ return [
         ],
 
         'media' => [
-            'driver' => 'minio',
+            'driver' => 's3',
             'key' => env('MINIO_KEY', 'your minio server key'),
             'secret' => env('MINIO_SECRET', 'your minio server secret'),
             'region' => 'us-east-1',
             'bucket' => env('MINIO_BUCKET','your minio bucket name'),
-            'endpoint' => env('MINIO_ENDPOINT','http://localhost:8000')
+            'endpoint' => env('MINIO_ENDPOINT','http://localhost:8000'),
+            'url' => 'https://cdn.willaspace.com/'. env('MINIO_BUCKET')
         ],
 
     ],
diff --git a/resources/js/Global/components/Drawer/SideBar.vue b/resources/js/Global/components/Drawer/SideBar.vue
index 86fb983..00569cf 100644
--- a/resources/js/Global/components/Drawer/SideBar.vue
+++ b/resources/js/Global/components/Drawer/SideBar.vue
@@ -8,7 +8,7 @@
             <div class="Name caption"> {{ getAuthUser.name }} </div>
             <div class="Time">
                 <div class="En Bold">{{ getCurrentTime }}</div>
-                <div class="Fa Thin">{{  new Date() | moment("dddd  jDD  jMMMM jYYYY") }}</div>
+                <div class="Fa Thin">{{ currentDate() }}</div>
             </div>
             <!-- <div class="Notification" dark>
                 <wm-notifications></wm-notifications>
@@ -19,7 +19,7 @@
             <v-list class="pa-1">
                 <div class="row user-info">
                     <v-flex lg9 class="pa-3">
-                        <img class="Avatar" :src="$_getPath()+'images/Global/Misc/Avatar.png'" />
+                        <img class="Avatar" :src="$_getPath('images/Global/Misc/Avatar.png')" />
                         <div class="Title">
                             <div class="Name Fa">{{ getAuthUser.name }}</div>
                             <div class="Role Fa">مدیریت</div>
@@ -80,6 +80,7 @@
     import Tile from "@Global/components/Drawer/Tile";
     import Notifications from "@Global/components/Drawer/Notifications";
     import Routes from "@Global/utils/common/routes";
+    import {convertNowToJalali} from "@Global/utils/date/jalali-date";
     import { mapActions, mapGetters } from "vuex";
     export default {
         data() {
@@ -140,6 +141,9 @@
         },
         methods: {
             ...mapActions("auth", ["logout"]),
+            currentDate() {
+                return convertNowToJalali(null, 'dddd  jDD  jMMMM jYYYY');
+            }
         },
         computed: {
             ...mapGetters("auth", ["getAuthUser"]),
diff --git a/resources/js/Global/components/Inputs/AutoCompleteWrapper.vue b/resources/js/Global/components/Inputs/AutoCompleteWrapper.vue
new file mode 100644
index 0000000..249541d
--- /dev/null
+++ b/resources/js/Global/components/Inputs/AutoCompleteWrapper.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <slot :filter="filter"></slot>
+    </div>
+</template>
+
+<script>
+    let cancelId;
+
+    export default {
+        name: "AutoCompleteWrapper",
+        props: {
+            callback: {
+                type: Function,
+            },
+        },
+        methods: {
+            filter(e) {
+                clearTimeout(cancelId);
+                if (
+                    e.target.value &&
+                    e.target.value.length > 1 &&
+                    e.code !== "Tab" &&
+                    e.code !== "Enter"
+                ) {
+                    cancelId = setTimeout(() => {
+                        this.$emit('filter', e.target.value);
+                        this.callback(e.target.value);
+                    }, 400);
+                }
+            },
+        },
+    };
+</script>
+
+<style>
+</style>
diff --git a/resources/js/Global/components/Inputs/Code-Editor.vue b/resources/js/Global/components/Inputs/Code-Editor.vue
index b7fad66..f650d89 100644
--- a/resources/js/Global/components/Inputs/Code-Editor.vue
+++ b/resources/js/Global/components/Inputs/Code-Editor.vue
@@ -1,53 +1,70 @@
 <template>
-    <prism-editor class="my-editor LTR height-300 " v-model="code" :highlight="highlighter" line-numbers></prism-editor>
+  <prism-editor
+    class="my-editor LTR height-300"
+    v-model="code"
+    :highlight="highlighter"
+    line-numbers
+  ></prism-editor>
 </template>
 
 <script>
-    // import Prism Editor
-    import { PrismEditor } from 'vue-prism-editor';
-    import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere
+// import Prism Editor
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
 
-    // import highlighting library (you can use any library you want just return html string)
-    import { highlight, languages } from 'prismjs/components/prism-core';
-    import 'prismjs/components/prism-clike';
-    import 'prismjs/components/prism-javascript';
-    import 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles
+// import highlighting library (you can use any library you want just return html string)
+import { highlight, languages } from "prismjs/components/prism-core";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-css";
+import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
 
-    export default {
-        components: {
-            PrismEditor,
-        },
-        data: () => ({ code: 'console.log("Hello World")' }),
-        methods: {
-            highlighter(code) {
-                return highlight(code, languages.js); // languages.<insert language> to return html with markup
-            },
-        },
-    };
+export default {
+  components: {
+    PrismEditor,
+  },
+  props: ["value", "language"],
+  data: () => ({}),
+  methods: {
+    highlighter(code) {
+      return highlight(code, languages[this.language]); // languages.<insert language> to return html with markup
+    },
+  },
+  computed: {
+    code: {
+      get() {
+        return this.value;
+      },
+      set(e) {
+        this.$emit("input", e);
+      },
+    },
+  },
+};
 </script>
 
 <style>
-    .height-300 {
-        height: 300px;
-    }
-    /* required class */
-    .my-editor {
-        /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
-        background: #f5f2f0;
-        border: 1px solid #dcdcdc;
-        border-left: 10px solid #dcdcdc;
-        color: #5a6268;
-        border-radius: 5px;
+.height-300 {
+  height: 300px;
+}
+/* required class */
+.my-editor {
+  /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
+  background: #f5f2f0;
+  border: 1px solid #dcdcdc;
+  border-left: 10px solid #dcdcdc;
+  color: #5a6268;
+  border-radius: 5px;
 
-        /* you must provide font-family font-size line-height. Example: */
-        font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
-        font-size: 14px;
-        line-height: 1.5;
-        padding: 5px;
-    }
+  /* you must provide font-family font-size line-height. Example: */
+  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 5px;
+}
 
-    /* optional class for removing the outline */
-    .prism-editor__textarea:focus {
-        outline: none;
-    }
+/* optional class for removing the outline */
+.prism-editor__textarea:focus {
+  outline: none;
+}
 </style>
diff --git a/resources/js/Global/components/Inputs/PersianDate.vue b/resources/js/Global/components/Inputs/PersianDate.vue
index c55ac51..4179c50 100644
--- a/resources/js/Global/components/Inputs/PersianDate.vue
+++ b/resources/js/Global/components/Inputs/PersianDate.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :class="[ disabled ? 'has-blur' : '' ]">
         <v-text-field
             v-model="dateShow"
             :label="label"
@@ -16,7 +16,7 @@
             :locale-config="localeConfig"
             :format="defaultDisplayFormat"
             :inputFormat="defaultInputFormat"
-            @change="$emit('input', $event.format(defaultFormat))"
+            @change="changeDatePicker"
             :type="type"
             :auto-submit="true"
             :element="'my-custom-date-' + uniqueId"
@@ -30,114 +30,129 @@
     </div>
 </template>
 <script>
-    import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
-    import moment from 'jalali-moment';
+import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
+import moment from 'jalali-moment';
 
-    export default {
-        components: {
-            datePicker: VuePersianDatetimePicker
+export default {
+    components: {
+        datePicker: VuePersianDatetimePicker
+    },
+    props: {
+        color: {default: 'black'},
+        disabled: {default: false},
+        defaultDate: {
+            default: 'now',
+            type: String,
+            validator: (val) => ['now', 'empty'].includes(val)
         },
-        props: {
-            color: {default: 'black'},
-            defaultDate: {
-                default: 'now',
-                type: String,
-                validator: (val) => ['now', 'empty'].includes(val)
-            },
-            min: {default: null},
-            max: {default: null},
-            displayFormat: {default: null},
-            inputFormat: {default: null},
-            format: {default: null},
-            type: {
-                default: 'datetime',
-                type: String,
-                validator: (val) => ['datetime', 'time', 'date'].includes(val)
-            },
-            label: {default: 'در تاریخ '},
-            value: {default: null},
-            icon: {default: 'calendar-alt'},
+        min: {default: null},
+        max: {default: null},
+        displayFormat: {default: null},
+        inputFormat: {default: null},
+        format: {default: null},
+        type: {
+            default: 'datetime',
+            type: String,
+            validator: (val) => ['datetime', 'time', 'date'].includes(val)
         },
-        data: () => ({
-            localeConfig: {
-                fa: {
-                    lang: {label: 'شمسی'}
-                },
-                en: {
-                    lang: {label: 'Gregorian'}
-                }
+        label: {default: 'در تاریخ '},
+        value: {default: null},
+        icon: {default: 'calendar-alt'},
+    },
+    data: () => ({
+        localeConfig: {
+            fa: {
+                lang: {label: 'شمسی'}
             },
-            show: false,
-            uniqueId: Math.floor(Math.random() * 10000)
-        }),
-        computed: {
-            dateShow: {
-                get() {
-                    if (this.value) {
-                        return moment(new Date(this.value)).format(this.defaultDisplayFormat);
+            en: {
+                lang: {label: 'Gregorian'}
+            }
+        },
+        show: false,
+        uniqueId: Math.floor(Math.random() * 10000)
+    }),
+    computed: {
+        dateShow: {
+            get() {
+                if (this.value) {
+                    return moment(new Date(this.value)).format(this.defaultDisplayFormat);
+                } else if (!this.disabled) {
+                    if (this.defaultDate === 'now') {
+                        this.$emit('input', moment(new Date()).format(this.defaultFormat));
+                        return moment(new Date()).format(this.defaultDisplayFormat);
                     } else {
-                        if (this.defaultDate === 'now' ) {
-                            this.$emit('input', moment(new Date()).format(this.defaultFormat));
-                            return moment(new Date()).format(this.defaultDisplayFormat);
-                        } else {
-                            return '';
-                        }
-
-                    }
-                },
-                set(value) {
-                }
-            },
-            defaultDisplayFormat() {
-                if (!this.displayFormat) {
-                    if (this.type === 'datetime') {
-                        return 'jDD jMMMM jYYYY ساعت HH:mm';
-                    } else if(this.type === 'date') {
-                        return 'jDD jMMMM jYYYY';
-                    } else if(this.type === 'time') {
-                        return 'HH:mm';
-                    }
-                }
-                return this.displayFormat
-            },
-            defaultInputFormat() {
-                if (!this.inputFormat) {
-                    if (this.type === 'datetime') {
-                        return 'YYYY-MM-DD HH:mm';
-                    } else if(this.type === 'date') {
-                        return 'YYYY-MM-DD';
-                    } else if(this.type === 'time') {
-                        return 'HH:mm';
+                        return '';
                     }
+
                 }
-                return this.inputFormat
             },
-            defaultFormat() {
-                if (!this.format) {
-                    if (this.type === 'datetime') {
-                        return 'YYYY-MM-DD HH:mm';
-                    } else if(this.type === 'date') {
-                        return 'YYYY-MM-DD';
-                    } else if(this.type === 'time') {
-                        return 'HH:mm';
-                    }
+            set(value) {
+            }
+        },
+        defaultDisplayFormat() {
+            if (!this.displayFormat) {
+                if (this.type === 'datetime') {
+                    return 'jDD jMMMM jYYYY ساعت HH:mm';
+                } else if (this.type === 'date') {
+                    return 'jDD jMMMM jYYYY';
+                } else if (this.type === 'time') {
+                    return 'HH:mm';
                 }
-                return this.format
-            },
-            minimum() {
-                if (this.min === 'now') {
-                    return moment(new Date()).format(this.defaultInputFormat);
-                } else {
-                    return this.min;
+            }
+            return this.displayFormat
+        },
+        defaultInputFormat() {
+            if (!this.inputFormat) {
+                if (this.type === 'datetime') {
+                    return 'YYYY-MM-DD HH:mm';
+                } else if (this.type === 'date') {
+                    return 'YYYY-MM-DD';
+                } else if (this.type === 'time') {
+                    return 'HH:mm';
                 }
-            },
-            maximum() {
-                if (this.max === 'now') {
-                    return moment(new Date()).format(this.defaultInputFormat);
-                } else {
-                    return this.max;
+            }
+            return this.inputFormat
+        },
+        defaultFormat() {
+            if (!this.format) {
+                if (this.type === 'datetime') {
+                    return 'YYYY-MM-DD HH:mm';
+                } else if (this.type === 'date') {
+                    return 'YYYY-MM-DD';
+                } else if (this.type === 'time') {
+                    return 'HH:mm';
                 }
-            },
+            }
+            return this.format
+        },
+        minimum() {
+            if (this.min === 'now') {
+                return moment(new Date()).format(this.defaultInputFormat);
+            } else {
+                return this.min;
+            }
+        },
+        maximum() {
+            if (this.max === 'now') {
+                return moment(new Date()).format(this.defaultInputFormat);
+            } else {
+                return this.max;
+            }
+        },
+    },
+    methods: {
+        changeDatePicker(event) {
+            if (!this.disabled) {
+                this.$emit('input', event.format(this.defaultFormat))
+            }
+        }
+    },
+    watch: {
+        disabled(value) {
+            if (value) {
+                this.$emit('input', null);
+            }
         }
     }
+}
 </script>
diff --git a/resources/js/Global/components/Inputs/Slide-Button.vue b/resources/js/Global/components/Inputs/Slide-Button.vue
index 2b72b77..20c3ea8 100644
--- a/resources/js/Global/components/Inputs/Slide-Button.vue
+++ b/resources/js/Global/components/Inputs/Slide-Button.vue
@@ -1,5 +1,5 @@
 <template>
-    <button :disabled="disabled" :type="type" :class="`slide-button ${theme}`">
+    <button :disabled="disabled" @click="$emit('click')" :type="type" :class="`slide-button ${theme}`">
         <div class="overlay"></div>
         <div v-if="prepend_icon != ''" class="prepend-icon">
             <v-icon>WMi-{{ prepend_icon }}</v-icon>
diff --git a/resources/js/Global/components/Inputs/TooltipButton.vue b/resources/js/Global/components/Inputs/TooltipButton.vue
new file mode 100644
index 0000000..e373c08
--- /dev/null
+++ b/resources/js/Global/components/Inputs/TooltipButton.vue
@@ -0,0 +1,106 @@
+<template>
+  <v-tooltip
+    :top="top"
+    :bottom="bottom"
+    :left="left"
+    :right="right"
+    :color="tooltipColor"
+    :transition="transition"
+  >
+    <template v-slot:activator="{ on }">
+      <v-btn
+        slot="activator"
+        fab
+        :color="buttonColor"
+        :dark="dark"
+        :light="light"
+        v-on="on"
+        @click="$emit('click')"
+        :small="small"
+        :large="large"
+        :x-large="xLarge"
+        :x-small="xSmall"
+      >
+        <v-icon dark>{{ icon }}</v-icon>
+      </v-btn>
+    </template>
+    <span>{{ text }}</span>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  name: "tooltipButton",
+  props: {
+    icon: {
+      type: String,
+      default: "WMi-user",
+    },
+    buttonColor: {
+      type: String,
+      default: "black",
+    },
+    text: {
+      type: String,
+      default: "متن پیش فرض",
+    },
+    tooltipColor: {
+      type: String,
+      default: "black",
+    },
+    top: {
+      type: Boolean,
+      default: function () {
+        return !this.bottom && !this.left && !this.right ? true : false;
+      },
+    },
+    bottom: {
+      type: Boolean,
+      default: false,
+    },
+    left: {
+      type: Boolean,
+      default: false,
+    },
+    right: {
+      type: Boolean,
+      default: false,
+    },
+    transition: {
+      type: String,
+      default: "fade-transition",
+    },
+    dark: {
+      type: Boolean,
+      default: function () {
+        return !this.light ? true : false;
+      },
+    },
+    light: {
+      type: Boolean,
+      default: false,
+    },
+    small: {
+      type: Boolean,
+      default: function () {
+        return !this.large && !this.xSmall && !this.xLarge ? true : false;
+      },
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+    xSmall: {
+      type: Boolean,
+      default: false,
+    },
+    xLarge: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/resources/js/Global/mixins/commingSoon.js b/resources/js/Global/mixins/commingSoon.js
index 0453f11..201f642 100644
--- a/resources/js/Global/mixins/commingSoon.js
+++ b/resources/js/Global/mixins/commingSoon.js
@@ -12,6 +12,7 @@ var CommingSoonArray = [
     "client_export",
     "blog-videos",
     "roll-staff",
+    "service-specialInfo"
 ];
 const commingSoon = {
     methods: {
diff --git a/resources/js/Global/plugins/globalComponent.js b/resources/js/Global/plugins/globalComponent.js
index 6976173..40d020b 100644
--- a/resources/js/Global/plugins/globalComponent.js
+++ b/resources/js/Global/plugins/globalComponent.js
@@ -1,8 +1,10 @@
-import Vue from 'vue';
+import Vue from "vue";
+
+import '@Global/utils/common/Object';
 
 // global Styles
 
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";//for tree select
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"; //for tree select
 import "@Global/scss/style.scss";
 
 // global Components
@@ -86,11 +88,11 @@ Vue.component("we-hint-text", HintText);
 import HintBlock from "@Global/components/Blocks/Hint.vue";
 Vue.component("hint-block", HintBlock);
 
-import PersianDate from '@Global/components/Inputs/PersianDate'
+import PersianDate from "@Global/components/Inputs/PersianDate";
 Vue.component("we-persian-date", PersianDate);
 
-
-
+import TooltipButton from "@Global/components/Inputs/TooltipButton";
+Vue.component("tooltip-button", TooltipButton);
 
 Vue.component("wm-breadcrumbs", Breadcrumbs);
 Vue.component("wm-dialog", Dialog);
@@ -99,10 +101,9 @@ Vue.component("wm-helper", Helper);
 Vue.component("we-no-items", NoItems);
 Vue.component("we-loading", Loading);
 
-
 //setTime
 import store from "@Global/store/index";
-store.dispatch('common/setCurrentTime');
+store.dispatch("common/setCurrentTime");
 
 //jalali => 0.6MB
 import moment from "moment"
diff --git a/resources/js/Global/plugins/routes/index.js b/resources/js/Global/plugins/routes/index.js
index 1cb214e..f53d90e 100644
--- a/resources/js/Global/plugins/routes/index.js
+++ b/resources/js/Global/plugins/routes/index.js
@@ -24,6 +24,7 @@ export default class {
     constructor(paths, callbackDynamicImport, redirect) {
         this.create(paths, callbackDynamicImport, redirect);
         this.beforeLoad();
+        this.afterLoad();
         return this.router;
     }
 
@@ -63,6 +64,9 @@ export default class {
     beforeLoad() {
 
         this.router.beforeEach((to, from, next) => {
+
+            this.setTitle(to);
+
             const isPublic = to.matched.some(record => record.meta.public);
             const onlyWhenLoggedOut = to.matched.some(
                 record => record.meta.onlyWhenLoggedOut
@@ -84,6 +88,17 @@ export default class {
 
     }
 
+    setTitle(to) {
+        const DEFAULT_TITLE = 'willaEngine';
+        document.title = to.meta.title || DEFAULT_TITLE;
+    }
+
+    afterLoad() {
+        this.router.afterEach((to, from) => {
+
+        });
+    }
+
 
 }
 
diff --git a/resources/js/Global/plugins/veeValidate.js b/resources/js/Global/plugins/veeValidate.js
index 4c0f9cf..c09e85a 100644
--- a/resources/js/Global/plugins/veeValidate.js
+++ b/resources/js/Global/plugins/veeValidate.js
@@ -5,4 +5,16 @@ import fa from "@Global/utils/vee-validate/locale/fa";
 import "@Global/utils/vee-validate/newRules";
 Vue.use(VeeValidate);
 
+const phoneRule = {
+    getMessage(field, args) {
+      return `The ${field} must be either a valid phone number`;
+    },
+    validate(value, args) {
+      const PHONE_REG = /^0\d{2,3}\d{8}$/;
+      return PHONE_REG.test(value);
+    }
+};
+
+VeeValidate.Validator.extend('phone', phoneRule);
+
 Validator.localize("fa", fa);
diff --git a/resources/js/Global/utils/common/Object.js b/resources/js/Global/utils/common/Object.js
new file mode 100644
index 0000000..73d94b5
--- /dev/null
+++ b/resources/js/Global/utils/common/Object.js
@@ -0,0 +1,42 @@
+// Warn if overriding existing method
+if(Array.prototype.equals)
+    console.warn("Overriding existing Array.prototype.equals. Possible causes: New API defines the method, there's a framework conflict or you've got double inclusions in your code.");
+// attach the .equals method to Array's prototype to call it on any array
+Array.prototype.equals = function (array) {
+    // if the other array is a falsy value, return
+    if (!array)
+        return false;
+
+    // compare lengths - can save a lot of time
+    if (this.length != array.length)
+        return false;
+
+    for (var i = 0, l=this.length; i < l; i++) {
+        // Check if we have nested arrays
+        if (this[i] instanceof Array && array[i] instanceof Array) {
+            // recurse into the nested arrays
+            if (!this[i].equals(array[i]))
+                return false;
+        }
+        else if (this[i] != array[i]) {
+            // Warning - two different object instances will never be equal: {x:20} != {x:20}
+            return false;
+        }
+    }
+    return true;
+}
+// Hide method from for-in loops
+Object.defineProperty(Array.prototype, "equals", {enumerable: false});
+
+
+
+
+Array.prototype.matchItems = function (array) {
+    // if the other array is a falsy value, return
+    if (!array)
+        return [];
+
+    return this.filter(item => array.includes(item));
+}
+// Hide method from for-in loops
+Object.defineProperty(Array.prototype, "matchItems", {enumerable: false});
diff --git a/resources/js/Global/utils/common/ProcessTreeArray.js b/resources/js/Global/utils/common/ProcessTreeArray.js
index 428d60e..d17728e 100644
--- a/resources/js/Global/utils/common/ProcessTreeArray.js
+++ b/resources/js/Global/utils/common/ProcessTreeArray.js
@@ -287,6 +287,25 @@ const insertTreeArray = (
 
 // };
 
+const filterByLevel = (list, level1) => {
+
+    let filteredList = [];
+    let level = parseInt(level1);
+    checkLevel(list);
+
+    function checkLevel(list, parentId = null, levelCounter = 1) {
+        list.map(item => {
+            if(item.parent_id == parentId) {
+                if(levelCounter == level) {
+                    filteredList.push(item);
+                } else {
+                    checkLevel(list, item.id, levelCounter + 1);
+                }
+            }
+        })
+    }
+    return filteredList;
+}
 export {
     convertTreeToList,
     insertTreeArray,
@@ -295,5 +314,6 @@ export {
     listSearchSelect,
     convertListToTree,
     addIndexTreeToList,
-    addHierarchyToList
+    addHierarchyToList,
+    filterByLevel
 };
diff --git a/resources/js/Global/utils/common/dynamicFilter.js b/resources/js/Global/utils/common/dynamicFilter.js
new file mode 100644
index 0000000..1aafd6c
--- /dev/null
+++ b/resources/js/Global/utils/common/dynamicFilter.js
@@ -0,0 +1,114 @@
+import {filterByLevel} from '@Global/utils/common/ProcessTreeArray'
+export default class DynamicFilter {
+
+    constructor(arrayData, filterObject) {
+        this.arrayData = arrayData;
+        this.filterObject = filterObject;
+
+        for (const name in filterObject) {
+            if (filterObject.hasOwnProperty(name)) {
+                if(filterObject[name] && typeof filterObject[name].type !== 'undefined'){
+                    this[filterObject[name].type](name);
+                } else {
+                    this[name](this.filterObject[name]);
+                }
+            }
+        }
+        return this.arrayData;
+    }
+
+    like(name) {
+        const value = this.filterObject[name].val;
+        if(value !== null) {
+            this.arrayData = this.arrayData.filter(data => data[name].indexOf(value) !== -1 );
+        }
+    }
+
+    between(name) {
+        const value1 = this.filterObject[name].val1;
+        const value2 = this.filterObject[name].val2;
+
+        if (value1 && value2) {
+            if(typeof value1 === 'number' && typeof value2 === 'number') {
+                this.arrayData = this.arrayData.filter(data => value1 <= data[name] &&  data[name] <= value2);
+            } else {
+                let {from, to} = this.checkDateAndParse(value1, value2);
+                this.arrayData = this.arrayData.filter(data => {
+                    const check = Date.parse(data[name]);
+                    return check >= from && check <= to;
+                });
+            }
+
+        } else if (value1) {
+            this.greater(name);
+
+        } else if(value2) {
+            this.less(name);
+        }
+
+    }
+
+    checkDateAndParse(value1, value2) {
+        let from, to = null;
+        if(value1 && value1.length <= 10) {
+            from = Date.parse(value1 + 'T00:00:00');
+        } else {
+            from = Date.parse(value1);
+        }
+
+        if(value2 && value2.length <= 10) {
+            to = Date.parse(value2 + 'T23:59:59');
+        } else {
+            to = Date.parse(value1);
+        }
+
+        return {from, to};
+    }
+
+    greater(name) {
+        const value1 = this.filterObject[name].val1;
+
+        if(typeof value1 === 'number') {
+            this.arrayData = this.arrayData.filter(data => value1 <= data[name]);
+        } else {
+            let {from} = this.checkDateAndParse(value1);
+
+            this.arrayData = this.arrayData.filter(data => {
+                const check = Date.parse(data[name]);
+                return check >= from;
+            });
+        }
+    }
+
+    less(name) {
+        const value2 = this.filterObject[name].val2;
+
+        if(typeof value2 === 'number') {
+            this.arrayData = this.arrayData.filter(data => data[name] <= value2);
+
+        } else {
+            let {to} = this.checkDateAndParse(value2);
+
+            this.arrayData = this.arrayData.filter(data => {
+                const check = Date.parse(data[name]);
+                return check <= to;
+            });
+        }
+    }
+
+    in(name) {
+        const value = this.filterObject[name].val;
+        const key = this.filterObject[name].key ? this.filterObject[name].key : 'id';
+        this.arrayData = this.arrayData.filter(data => {
+            if (typeof data[name] === 'object') {
+                return data[name].map(item => item[key]).matchItems(value).length > 0;
+            }
+        });
+    }
+
+    level(value) {
+        if(value) {
+            this.arrayData = filterByLevel(this.arrayData, value);
+        }
+    }
+}
diff --git a/resources/js/Global/utils/date/jalali-date.js b/resources/js/Global/utils/date/jalali-date.js
index b4e74a4..25afc05 100644
--- a/resources/js/Global/utils/date/jalali-date.js
+++ b/resources/js/Global/utils/date/jalali-date.js
@@ -6,4 +6,8 @@ const convertToJalali = function (date = null, format = "jYYYY/jMM/jDD", default
 const convertNowToJalali = function (date = null, format = "jYYYY/jMM/jDD" ) {
     return date ? moment(date).locale('fa').format(format) : moment(new Date()).locale('fa').format(format) ;
 };
-export { convertToJalali, convertNowToJalali };
+
+const convertToRelativedDateJalali = function (date = null, defaultDate = 'مشخص نشده است.' ) {
+    return date ? moment(date).locale('fa').fromNow() :  defaultDate;
+};
+export { convertToJalali, convertNowToJalali, convertToRelativedDateJalali };
diff --git a/routes/web.php b/routes/web.php
index 4eb9581..0cdadc7 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -11,6 +11,6 @@
 |
 */
 
-Route::view('/main/{any?}', 'Home');
-Route::view('/WebsiteManagement/{any?}', 'WebsiteManagement');
-Route::redirect('/{any?}', '/main/home');
+Route::view('main/{any?}', 'Home');
+Route::view('WebsiteManagement/{any?}', 'WebsiteManagement');
+Route::redirect('{any?}/{any1?}/{any3?}', '/main/home');