Rewrite endpoints + bar cards

dashboard/components/BarCard/Websites.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+
+const isShowMore = ref<boolean>(false);
+
+const currentWebsite = ref<string>("");
+
+const websitesData = useFetch('/api/data/websites', {
+    headers: useComputedHeaders({
+        limit: computed(() => isShowMore.value ? '200' : '10'),
+    }), lazy: true
+});
+
+const pagesData = useFetch('/api/data/websites_pages', {
+    headers: useComputedHeaders({
+        limit: computed(() => isShowMore.value ? '200' : '10'),
+        custom: {
+            'x-website-name': currentWebsite
+        }
+    }), lazy: true
+});
+
+
+const isPagesView = ref<boolean>(false);
+
+const currentData = computed(() => {
+    return isPagesView.value ? pagesData : websitesData
+})
+
+
+async function showDetails(website: string) {
+    currentWebsite.value = website;
+    isPagesView.value = true;
+}
+
+async function showGeneral() {
+    websitesData.execute();
+    isPagesView.value = false;
+}
+
+const router = useRouter();
+
+function goToView() {
+    router.push('/dashboard/visits');
+}
+
+</script>
+
+
+<template>
+    <div class="flex flex-col gap-2 h-full">
+        <BarCardBase :hideShowMore="true" @showGeneral="showGeneral()" @showRawData="goToView()"
+            @dataReload="currentData.refresh()" @showDetails="showDetails" :data="currentData.data.value || []"
+            :loading="currentData.pending.value" :label="isPagesView ? 'Top pages' : 'Top Websites'"
+            :sub-label="isPagesView ? 'Page' : 'Website'"
+            :desc="isPagesView ? 'Most visited pages' : 'Most visited website in this project'"
+            :interactive="!isPagesView" :rawButton="!isLiveDemo()" :isDetailView="isPagesView">
+        </BarCardBase>
+    </div>
+</template>