chore: Adjust the directory structure in preparation for real-time.

app/components/dashboard/Nav.vue

@@ -18,6 +18,9 @@ const route = useRoute()
         <TabsTrigger value="/dashboard/analysis">
           {{ $t('nav.analysis') }}
         </TabsTrigger>
+        <TabsTrigger value="/dashboard/realtime">
+          {{ $t('nav.realtime') }}
+        </TabsTrigger>
       </TabsList>
     </Tabs>
     <slot name="left" />

app/components/dashboard/analysis/Index.vue

@@ -74,8 +74,8 @@ onBeforeMount(() => {
       </DashboardNav>
       <DashboardFilters v-if="!link" @change="changeFilter" />
     </div>
-    <DashboardCounters />
+    <DashboardAnalysisCounters />
-    <DashboardViews />
+    <DashboardAnalysisViews />
-    <DashboardMetrics />
+    <DashboardAnalysisMetrics />
   </main>
 </template>

app/components/dashboard/analysis/metrics/Group.vue

@@ -31,7 +31,7 @@ defineProps({
       :value="rawTabs[index]"
       class="flex-1"
     >
-      <DashboardMetricsMetric
+      <DashboardAnalysisMetricsMetric
         :type="rawTabs[index]"
         :name="tab"
         class="h-full"

app/components/dashboard/analysis/metrics/Index.vue

@@ -20,28 +20,28 @@ const translatedTabs = computed(() => ({
 
 <template>
   <main class="grid gap-8 lg:grid-cols-12">
-    <LazyDashboardMetricsLocations class="col-span-1 lg:col-span-8" />
+    <LazyDashboardAnalysisMetricsLocations class="col-span-1 lg:col-span-8" />
-    <DashboardMetricsGroup
+    <DashboardAnalysisMetricsGroup
       class="lg:col-span-4"
       :tabs="translatedTabs.location"
       :raw-tabs="tabs.location"
     />
-    <DashboardMetricsGroup
+    <DashboardAnalysisMetricsGroup
       class="lg:col-span-6"
       :tabs="translatedTabs.referer"
       :raw-tabs="tabs.referer"
     />
-    <DashboardMetricsGroup
+    <DashboardAnalysisMetricsGroup
       class="lg:col-span-6"
       :tabs="translatedTabs.time"
       :raw-tabs="tabs.time"
     />
-    <DashboardMetricsGroup
+    <DashboardAnalysisMetricsGroup
       class="lg:col-span-6"
       :tabs="translatedTabs.device"
       :raw-tabs="tabs.device"
     />
-    <DashboardMetricsGroup
+    <DashboardAnalysisMetricsGroup
       class="lg:col-span-6"
       :tabs="translatedTabs.browser"
       :raw-tabs="tabs.browser"

app/components/dashboard/analysis/metrics/List.vue

@@ -39,7 +39,7 @@ defineProps({
           <div
             class="flex-1 leading-5 truncate font-mediums"
           >
-            <DashboardMetricsName
+            <DashboardAnalysisMetricsName
               :name="metric.name"
               :type="type"
             />

app/components/dashboard/analysis/metrics/Metric.vue

@@ -61,7 +61,7 @@ onBeforeUnmount(() => {
 <template>
   <Card class="flex flex-col">
     <template v-if="metrics.length">
-      <DashboardMetricsList
+      <DashboardAnalysisMetricsList
         class="flex-1"
         :metrics="top6"
         :type="type"
@@ -83,7 +83,7 @@ onBeforeUnmount(() => {
             <DialogHeader>
               <DialogTitle>{{ name }}</DialogTitle>
             </DialogHeader>
-            <DashboardMetricsList
+            <DashboardAnalysisMetricsList
               class="overflow-y-auto"
               :metrics="metrics"
               :type="type"

app/components/dashboard/analysis/metrics/name/Index.vue

@@ -36,15 +36,15 @@ function formatName(name, type) {
   <TooltipProvider>
     <Tooltip>
       <TooltipTrigger class="w-full text-left">
-        <DashboardMetricsNameReferer
+        <DashboardAnalysisMetricsNameReferer
           v-if="name && type === 'referer'"
           :name="name"
         />
-        <DashboardMetricsNameSlug
+        <DashboardAnalysisMetricsNameSlug
           v-else-if="name && type === 'slug'"
           :name="name"
         />
-        <DashboardMetricsNameIcon
+        <DashboardAnalysisMetricsNameIcon
           v-else-if="name && ['os', 'browser', 'browserType', 'device', 'deviceType'].includes(type)"
           :name="name"
           :type="type"

app/components/dashboard/realtime/Index.vue

@@ -0,0 +1,10 @@
+<template>
+  <main class="space-y-6">
+    <div class="flex flex-col gap-6 sm:gap-2 sm:flex-row sm:justify-between">
+      <DashboardNav />
+    </div>
+    <div>
+      Realtime
+    </div>
+  </main>
+</template>

app/pages/dashboard/analysis.vue

@@ -5,6 +5,6 @@ provide('id', ref())
 <template>
   <main class="space-y-6">
     <DashboardBreadcrumb title="Analysis" />
-    <Dashboard />
+    <DashboardAnalysis />
   </main>
 </template>

app/pages/dashboard/realtime.vue

@@ -0,0 +1,6 @@
+<template>
+  <main class="space-y-6">
+    <DashboardBreadcrumb title="Realtime" />
+    <DashboardRealtime />
+  </main>
+</template>

i18n/locales/en-US.json

@@ -50,7 +50,8 @@
   },
   "nav": {
     "links": "Links",
-    "analysis": "Analysis"
+    "analysis": "Analysis",
+    "realtime": "Realtime"
   },
   "home": {
     "features": {

i18n/locales/fr-FR.json

@@ -50,7 +50,8 @@
   },
   "nav": {
     "links": "Liens",
-    "analysis": "Statistique"
+    "analysis": "Statistiques",
+    "realtime": "Realtime"
   },
   "home": {
     "features": {

i18n/locales/vi-VN.json

@@ -50,7 +50,8 @@
   },
   "nav": {
     "links": "Liên kết",
-    "analysis": "Phân tích"
+    "analysis": "Phân tích",
+    "realtime": "Thời gian thực"
   },
   "home": {
     "features": {

i18n/locales/zh-CN.json

@@ -50,7 +50,8 @@
   },
   "nav": {
     "links": "链接",
-    "analysis": "分析"
+    "analysis": "分析",
+    "realtime": "实时"
   },
   "home": {
     "features": {

i18n/locales/zh-TW.json

@@ -50,7 +50,8 @@
   },
   "nav": {
     "links": "連結",
-      "analysis": "分析"
+    "analysis": "分析",
+    "realtime": "即時"
   },
   "home": {
     "features": {
@@ -167,4 +168,3 @@
     }
   }
 }
-  

nuxt.config.ts

@@ -11,6 +11,7 @@ export default defineNuxtConfig({
     '@nuxtjs/color-mode',
     '@nuxtjs/i18n',
   ],
+
   devtools: { enabled: true },
 
   colorMode: {