implement filters to the menu

src/components/Pages/MenuProvider.vue

@@ -1,9 +1,13 @@
 <template>
     <main class="flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
         <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
-            <h1 class="text-xl font-medium md:text-3xl text-dark">{{ currentRouteName }}</h1>
-        </div>
+            <h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageMetaData[0] }}</h1>
+        </div>        
         <div class="mt-2 sm:mt-4 dx-viewport">
+            <Filters :report-button="typeof pageMetaData[2] !== 'undefined'" class="mb-4" v-if="pageMetaData.length > 1">
+                <Type1 v-if="pageMetaData[1] == 'type-1'" />
+            </Filters>
+            
             <slot></slot>
         </div>
     </main>
@@ -12,10 +16,23 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import Filters from '../Form/Filters.vue'
+import Type1 from '../Form/FiltersType/Type1.vue';
+
 
 // Dapatkan objek route dari vue-router
 const route = useRoute()
 
 // Dapatkan nama rute menggunakan computed property
-const currentRouteName = computed(() => route.name)
+const pageMetaData = computed(() => {
+    let result: string[] = [];
+
+    if (typeof route.name === 'string' && route.name.includes(' | ')) {
+        result = route.name.split(' | ');
+    } else if (typeof route.name === 'string') {
+        result = [route.name]
+    }
+
+    return result
+});
 </script>