fix: layouts

bo/src/views/CategoryView.vue

@@ -3,8 +3,13 @@
         <div class="container mt-24">
             <div class="row">
                 <div class="col-12">
-                    <h1>Category</h1>
-                    {{ $route.params }}
+                    <h2 class="text-2xl">Category ID: {{ $route.params.category_id }}</h2>
+                    <div v-for="(p, i) in products" :key="i">
+                        <p>
+                            <span class="border-b-1 bg-red-100 px-4">{{ p.name }}</span>
+                            <span class="border-b-1 bg-red-100 px-4">{{ p.price }}</span>
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -15,7 +20,23 @@
 <script setup lang="ts">
 // import { useRoute } from 'vue-router';
 import Default from '@/layouts/default.vue';
+import { useCategoryStore } from '@/stores/category';
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 // const route = useRoute()
 // console.log(route);
 
+const categoryStore = useCategoryStore()
+const route = useRoute()
+
+const products = ref([])
+
+watch(() => route.params, async (n) => {
+    categoryStore.setCategoryID(parseInt(n.category_id as string))
+    const res = await categoryStore.getCategoryProducts()
+    products.value = res
+
+}, { immediate: true })
+
+
 </script>

bo/src/views/RepoChartView.vue

@@ -15,6 +15,7 @@ import { useAuthStore } from '@/stores/auth'
 import { i18n } from '@/plugins/02_i18n'
 import type { TableColumn } from '@nuxt/ui'
 import { useI18n } from 'vue-i18n'
+import Default from '@/layouts/default.vue'
 
 ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
@@ -181,6 +182,7 @@ const columns = computed<TableColumn<IssueTimeSummary>[]>(() => [
 </script>
 
 <template>
+      <component :is="Default || 'div'">
     <div class="container mx-auto">
         <div class="p-6 bg-(--main-light) dark:bg-(--black) font-sans">
             <h1 class="text-2xl font-bold mb-6 text-black dark:text-white">{{ $t('repo_chart.repository_work_chart') }}
@@ -254,4 +256,5 @@ const columns = computed<TableColumn<IssueTimeSummary>[]>(() => [
             </div>
         </div>
     </div>
+    </component>
 </template>