@veristone/nuxt-v-app 0.1.0

package/app/components/Va/Charts/VaChartWebPerformanceLineChart.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import {
+  getDailyWebsiteStatistics,
+  getWeeklyWebsiteStatistics,
+  getMonthlyWebsiteStatistics
+} from '~/data/WebsiteStatistics'
+
+defineProps<{
+  categories: Record<string, BulletLegendItemInterface>
+}>()
+
+const isSettingsOpen = ref<boolean>(false)
+
+function toggleSettings() {
+  isSettingsOpen.value = !isSettingsOpen.value
+}
+
+const dataViewOptions = [
+  {
+    label: 'Daily',
+    value: 'daily'
+  },
+  {
+    label: 'Weekly',
+    value: 'weekly'
+  },
+  {
+    label: 'Monthly',
+    value: 'monthly'
+  }
+]
+
+const selectedDataView = ref('daily')
+
+const WebsiteStatistics = computed(() => {
+  switch (selectedDataView.value) {
+    case 'weekly':
+      return getWeeklyWebsiteStatistics.value
+    case 'monthly':
+      return getMonthlyWebsiteStatistics.value
+    case 'daily':
+    default:
+      return getDailyWebsiteStatistics.value
+  }
+})
+
+const xFormatter = (i: number): string =>
+  String(WebsiteStatistics.value[i]?.date ?? '')
+
+function handleDataViewChange(value: string) {
+  console.log('Data view changed to:', value)
+}
+</script>
+
+<template>
+  <UCard
+    :ui="{
+      body: 'sm:p-4 p-0'
+    }"
+  >
+    <template #header>
+      <div class="w-full flex items-center justify-between">
+        <h2 class="text-lg font-medium text-highlighted">
+          Web Performance
+        </h2>
+        <UButton
+          variant="ghost"
+          :icon="`i-lucide-${!isSettingsOpen ? 'settings' : 'x'}`"
+          @click="toggleSettings"
+        />
+      </div>
+    </template>
+
+    <div
+      v-if="isSettingsOpen"
+      class="h-[304px] p-4"
+    >
+      <div class="w-full space-y-4">
+        <label class="block text-sm font-medium text-highlighted mb-2">
+          Settings
+        </label>
+        <USelect
+          v-model="selectedDataView"
+          :items="dataViewOptions"
+          placeholder="Select data view"
+          class="w-full focus:ring-0"
+          @update:model-value="handleDataViewChange"
+        />
+        <UButton
+          variant="soft"
+          class="w-full flex items-center justify-center"
+          label="Filter data"
+          @click="toggleSettings"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="!isSettingsOpen"
+      class="pt-2"
+    >
+      <LineChart
+        :data="WebsiteStatistics"
+        :height="240"
+        y-label="Performance"
+        :x-num-ticks="6"
+        :categories="categories"
+        :x-formatter="xFormatter"
+        :legend-position="LegendPosition.TopRight"
+        :curve-type="CurveType.MonotoneX"
+      />
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Charts/VaChartWinLostBar.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import type { TabsItem } from '@nuxt/ui'
+
+interface DailyData {
+  day: string
+  Income: number
+  Expense: number
+}
+
+const items = ref<TabsItem[]>([
+  {
+    label: 'Year'
+  },
+  {
+    label: 'Month'
+  },
+  {
+    label: 'Week'
+  },
+  {
+    label: 'Day'
+  }
+])
+
+const chartData = ref<DailyData[]>([
+  {
+    day: 'Jan',
+    Income: 8500,
+    Expense: 4000
+  },
+  {
+    day: 'Feb',
+    Income: 6500,
+    Expense: 9000
+  },
+  {
+    day: 'Mar',
+    Income: 7500,
+    Expense: 3500
+  },
+  {
+    day: 'Apr',
+    Income: 5800,
+    Expense: 7000
+  },
+  {
+    day: 'May',
+    Income: 9200,
+    Expense: 6500
+  },
+  {
+    day: 'Jun',
+    Income: 9800,
+    Expense: 4500
+  },
+  {
+    day: 'Jul',
+    Income: 5000,
+    Expense: 8500
+  }
+])
+
+const chartCategories: Record<string, BulletLegendItemInterface> = {
+  Income: {
+    name: 'Income',
+    color: '#10b981'
+  },
+  Expense: {
+    name: 'Expense',
+    color: '#f59e0b'
+  }
+}
+
+const xAxisFormatter = (tick: number): string => {
+  // tick is the index of the data point
+  const months = chartData.value.map(item => item.day)
+  return months[tick] || ''
+}
+</script>
+
+<template>
+  <div class="space-y-8">
+    <BarChart
+      :data="chartData"
+      :categories="chartCategories"
+      :y-axis="['Income', 'Expense']"
+      :x-formatter="xAxisFormatter"
+      :height="160"
+      :stacked="false"
+      :radius="3"
+      :group-padding="0.2"
+      :bar-padding="0.2"
+      :hide-legend="true"
+      :x-grid-line="true"
+      :y-grid-line="true"
+      :y-num-ticks="4"
+    />
+    <UTabs
+      :content="false"
+      :items="items"
+      color="neutral"
+      class="w-full"
+    />
+    <p class="text-center text-dimmed px-16">
+      Your win % is higher on <span class="text-primary">8%</span> compared to
+      <span class="text-primary">47 winning</span> / <span>33 losing</span> past
+      month
+    </p>
+  </div>
+</template>

package/app/components/Va/Charts/VaChartWinLostDonut.vue

@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { TabsItem } from '@nuxt/ui'
+
+const props = defineProps<{
+  hideText?: boolean
+}>()
+
+const items = ref<TabsItem[]>([
+  {
+    label: 'Year'
+  },
+  {
+    label: 'Month'
+  },
+  {
+    label: 'Week'
+  },
+  {
+    label: 'Day'
+  }
+])
+
+const win = ref(32)
+const loss = ref(18)
+
+const winLossData = computed(() => [
+  {
+    color: '#10b981',
+    name: 'Winning',
+    value: win.value
+  },
+  {
+    color: '#ef4444',
+    name: 'Lost',
+    value: loss.value
+  }
+])
+
+const percentage = computed(() => {
+  const total = win.value + loss.value
+  if (total === 0) return '0%'
+  return Math.round((win.value / total) * 100)
+})
+</script>
+
+<template>
+  <UCard>
+    <div class="space-y-8">
+      <h2 class="text-lg font-semibold">
+        Spending Trend
+      </h2>
+
+      <Flex class="gap-8 space-y-4">
+        <div class="relative w-46">
+          <DonutChart
+            :data="winLossData.map((i) => i.value)"
+            :height="160"
+            :arc-width="10"
+            :labels="
+              winLossData.map((item) => ({
+                name: item.name,
+                color: item.color,
+                percentage: item.value
+              }))
+            "
+            :pad-angle="0.1"
+            :hide-legend="true"
+            :radius="4"
+          >
+            <div
+              class="absolute text-center w-full top-1/2 left-1/2"
+              style="transform: translate(-50%, -50%)"
+            >
+              <div class="text-2xl font-bold">
+                {{ percentage }}<span class="text-toned">%</span>
+              </div>
+            </div>
+          </DonutChart>
+        </div>
+        <FlexCol class="ml-6 h-[160px] w-[120px]">
+          <FlexCol class="h-1/2 space-y-2">
+            <div class="text-muted">
+              Winning trades
+            </div>
+            <div class="text-3xl font-bold">
+              {{ winLossData[0]?.value ?? 0 }}
+            </div>
+          </FlexCol>
+          <FlexCol class="h-1/2 space-y-2">
+            <div class="text-muted">
+              Losing trades
+            </div>
+            <div class="text-3xl font-bold">
+              {{ winLossData[1]?.value ?? 0 }}
+            </div>
+          </FlexCol>
+        </FlexCol>
+      </Flex>
+      <UTabs
+        :content="false"
+        :items="items"
+        color="neutral"
+        class="w-full"
+      />
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Charts/VaChartWinLostLine.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { TabsItem } from '@nuxt/ui'
+
+interface DailyData {
+  day: string
+  Income: number
+  Expense: number
+}
+
+const items = ref<TabsItem[]>([
+  {
+    label: 'Year'
+  },
+  {
+    label: 'Month'
+  },
+  {
+    label: 'Week'
+  },
+  {
+    label: 'Day'
+  }
+])
+
+const chartData = ref<DailyData[]>([
+  {
+    day: 'Jan',
+    Income: 8500,
+    Expense: 4000
+  },
+  {
+    day: 'Feb',
+    Income: 6500,
+    Expense: 9000
+  },
+  {
+    day: 'Mar',
+    Income: 7500,
+    Expense: 3500
+  },
+  {
+    day: 'Apr',
+    Income: 5800,
+    Expense: 7000
+  },
+  {
+    day: 'May',
+    Income: 9200,
+    Expense: 6500
+  },
+  {
+    day: 'Jun',
+    Income: 9800,
+    Expense: 4500
+  },
+  {
+    day: 'Jul',
+    Income: 5000,
+    Expense: 8500
+  }
+])
+
+const chartCategories: Record<string, BulletLegendItemInterface> = {
+  Income: {
+    name: 'Income',
+    color: '#10b981'
+  },
+  Expense: {
+    name: 'Expense',
+    color: '#f59e0b'
+  }
+}
+
+const xAxisFormatter = (tick: number): string => {
+  // tick is the index of the data point
+  const months = chartData.value.map(item => item.day)
+  return months[tick] || ''
+}
+</script>
+
+<template>
+  <div class="space-y-8">
+    <LineChart
+      :data="chartData"
+      :categories="chartCategories"
+      :y-axis="['Income', 'Expense']"
+      :x-formatter="xAxisFormatter"
+      :height="160"
+      :stacked="false"
+      :radius="3"
+      :group-padding="0.2"
+      :bar-padding="0.2"
+      :hide-legend="true"
+      :x-grid-line="true"
+      :y-grid-line="true"
+      :y-num-ticks="4"
+    />
+    <UTabs
+      :content="false"
+      :items="items"
+      color="neutral"
+      class="w-full"
+    />
+
+    <p class="text-center text-dimmed px-16">
+      Your win % is higher on <span class="text-primary">8%</span> compared to
+      <span class="text-primary">47 winning</span> / <span>33 losing</span> past
+      month
+    </p>
+  </div>
+</template>

package/app/components/Va/Charts/types.ts

@@ -0,0 +1,10 @@
+export interface SpendingData {
+  month: number
+  amount: number
+  previous: number
+}
+
+export interface BulletLegendItemInterface {
+  name: string
+  color: string
+}

package/app/components/Va/Dashboard/Navigation/types.ts

@@ -0,0 +1,8 @@
+export interface NavSection {
+  label: string
+  children: Array<{
+    label: string
+    href: string
+    leadingIcon?: string
+  }>
+}

package/app/components/Va/Dashboard/VaDashboardKPICard.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+export interface KPIStat {
+  label: string
+  value: string | number
+  change?: string | number
+  changeType?: 'positive' | 'negative' | 'neutral'
+}
+
+defineProps<KPIStat>()
+</script>
+
+<template>
+  <UCard :key="label">
+    <div class="space-y-2">
+      <div class="flex items-center justify-between">
+        <h2 class="text-xl font-semibold">
+          {{ value }}
+        </h2>
+        <UBadge
+          color="neutral"
+          size="lg"
+        >
+          {{ change }}
+        </UBadge>
+      </div>
+      <p class="text-muted">
+        {{ label }}
+      </p>
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Dashboard/VaDashboardNavigation.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useRoute, useRouter } from '#imports'
+import type { NavSection } from './Navigation/types'
+
+const props = defineProps<{
+  sections: NavSection[]
+}>()
+
+const route = useRoute()
+const router = useRouter()
+
+const items = computed(() =>
+  props.sections
+    .flatMap(section => section.children)
+    .map(child => ({
+      label: child.label,
+      icon: child.leadingIcon,
+      value: child.href
+    }))
+)
+
+const active = ref<string | undefined>(items.value[0]?.value)
+
+watch(
+  () => [route.path, route.hash, items.value],
+  () => {
+    const match = items.value.find(item => item.value === route.path || item.value === route.hash)
+    active.value = match ? match.value : items.value[0]?.value
+  },
+  { immediate: true }
+)
+
+watch(
+  active,
+  (val) => {
+    if (val && val !== route.path) {
+      router.push(val)
+    }
+  }
+)
+</script>
+
+<template>
+  <UTabs
+    v-model="active"
+    :items="items"
+    color="neutral"
+    :content="false"
+  />
+</template>

package/app/components/Va/Dashboard/VaDashboardPricePlan.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+interface Feature {
+  label: string
+  available: boolean
+}
+
+export interface PricePlanProps {
+  name: string
+  description: string
+  price: string
+  priceSuffix?: string
+  per?: string
+  features: Feature[]
+  current?: boolean
+  badge?: string
+  buttonLabel?: string
+}
+
+defineProps<PricePlanProps>()
+</script>
+
+<template>
+  <UCard
+    :class="[
+      'relative transition-all duration-200',
+      current
+        ? 'ring-2 ring-success bg-success/5'
+        : 'hover:shadow-lg hover:-translate-y-1'
+    ]"
+  >
+    <div
+      v-if="badge"
+      class="absolute -top-3 left-1/2 -translate-x-1/2"
+    >
+      <UBadge
+        :label="badge"
+        variant="solid"
+        color="success"
+        size="sm"
+      />
+    </div>
+
+    <div class="text-center">
+      <div>
+        <h3 class="text-xl font-bold text-highlighted">
+          {{ name }}
+        </h3>
+        <p class="text-dimmed mt-1">
+          {{ description }}
+        </p>
+      </div>
+
+      <div class="border-y border-default my-4 py-4">
+        <div class="mb-4">
+          <div class="text-3xl font-bold text-success space-x-2">
+            <span>{{ price }}</span>
+            <span
+              v-if="priceSuffix"
+              class="text-base text-toned"
+            >{{
+              priceSuffix
+            }}</span>
+          </div>
+          <div
+            v-if="per"
+            class="text-sm text-muted"
+          >
+            {{ per }}
+          </div>
+        </div>
+
+        <UButton
+          :label="buttonLabel"
+          :variant="current ? 'outline' : 'solid'"
+          :color="current ? 'success' : 'success'"
+          class="w-full justify-center"
+          :disabled="current"
+          :icon="current ? 'i-lucide-check' : 'i-lucide-arrow-up-right'"
+        />
+      </div>
+
+      <div class="space-y-4 mt-8">
+        <div
+          v-for="(feature, i) in features"
+          :key="i"
+          class="flex items-center justify-start gap-2 text-sm"
+        >
+          <UIcon
+            :name="feature.available ? 'i-lucide-check' : 'i-lucide-x'"
+            :class="feature.available ? 'text-success' : 'text-error'"
+            size="16"
+          />
+          <span
+            :class="{
+              'text-dimmed': !feature.available
+            }"
+          >{{ feature.label }}</span>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>