@veristone/nuxt-v-app 0.1.0

package/app/components/V/A/UserMenu.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  collapsed?: boolean
+  user?: {
+    name: string
+    avatar?: {
+      src: string
+      alt?: string
+    }
+  }
+  theme?: 'light' | 'dark'
+}>(), {
+  collapsed: false,
+  user: () => ({
+    name: 'User',
+    avatar: {
+      src: 'https://api.dicebear.com/7.x/avataaars/svg?seed=default',
+      alt: 'User'
+    }
+  }),
+  theme: 'light'
+})
+
+const buttonUi = computed(() => props.theme === 'dark'
+  ? {
+      root: 'hover:bg-white/5',
+      label: 'text-slate-300 group-hover:text-white',
+      trailingIcon: 'text-slate-400 group-hover:text-white'
+    }
+  : { trailingIcon: 'text-dimmed' }
+)
+
+const emit = defineEmits<{
+  logout: []
+  profile: []
+  settings: []
+}>()
+
+// Simple menu state
+const isOpen = ref(false)
+const menuRef = ref<HTMLElement | null>(null)
+
+const toggleMenu = () => {
+  isOpen.value = !isOpen.value
+}
+
+const closeMenu = () => {
+  isOpen.value = false
+}
+
+const menuItems = [
+  {
+    label: 'Profile',
+    icon: 'i-lucide-user',
+    action: () => { emit('profile'); closeMenu() }
+  },
+  {
+    label: 'Settings',
+    icon: 'i-lucide-settings',
+    action: () => { emit('settings'); closeMenu() }
+  },
+  {
+    label: 'Log out',
+    icon: 'i-lucide-log-out',
+    action: () => { emit('logout'); closeMenu() }
+  }
+]
+
+// Close menu when clicking outside
+onMounted(() => {
+  const handleClickOutside = (event: MouseEvent) => {
+    if (menuRef.value && !menuRef.value.contains(event.target as Node)) {
+      closeMenu()
+    }
+  }
+  document.addEventListener('click', handleClickOutside)
+  onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside)
+  })
+})
+</script>
+
+<template>
+  <div ref="menuRef" class="relative">
+    <UButton
+      :avatar="user?.avatar"
+      :label="collapsed ? undefined : user?.name"
+      :trailing-icon="collapsed ? undefined : 'i-lucide-chevrons-up-down'"
+      color="neutral"
+      variant="ghost"
+      block
+      :square="collapsed"
+      :class="[
+        'group',
+        isOpen && 'bg-white/5',
+        theme === 'dark' && 'hover:bg-white/5'
+      ]"
+      :ui="buttonUi"
+      @click.stop="toggleMenu"
+    />
+
+    <!-- Custom dropdown menu -->
+    <Transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="isOpen"
+        class="absolute bottom-full left-0 mb-2 w-48 rounded-lg bg-white dark:bg-slate-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10 py-1 z-50"
+      >
+        <button
+          v-for="item in menuItems"
+          :key="item.label"
+          class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
+          @click="item.action"
+        >
+          <UIcon :name="item.icon" class="size-4" />
+          {{ item.label }}
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>

package/app/components/V/A/WelcomeHeader.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="va-dashboard-header animate-fade-in-down">
+    <div class="va-dashboard-header__content">
+      <h1 class="va-dashboard-header__title">
+        {{ greeting }}<span v-if="userName">, {{ userName }}</span>
+      </h1>
+      <p class="va-dashboard-header__date">{{ formattedDate }}</p>
+    </div>
+
+    <div class="va-dashboard-header__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  userName?: string
+  showDate?: boolean
+}>(), {
+  userName: '',
+  showDate: true
+})
+
+const greeting = computed(() => {
+  const hour = new Date().getHours()
+  if (hour < 12) return 'Good morning'
+  if (hour < 17) return 'Good afternoon'
+  return 'Good evening'
+})
+
+const formattedDate = computed(() => {
+  if (!props.showDate) return ''
+  return new Date().toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+})
+</script>
+
+<style scoped>
+.va-dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.va-dashboard-header__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.va-dashboard-header__title {
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  letter-spacing: -0.02em;
+  line-height: 1.3;
+  margin: 0;
+}
+
+.dark .va-dashboard-header__title {
+  color: #ffffff;
+}
+
+.va-dashboard-header__date {
+  font-size: 0.9375rem;
+  color: var(--color-text-muted);
+  margin-top: 0.375rem;
+}
+
+.va-dashboard-header__actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: 0.75rem;
+}
+
+@media (max-width: 640px) {
+  .va-dashboard-header {
+    flex-direction: column;
+  }
+
+  .va-dashboard-header__actions {
+    width: 100%;
+  }
+
+  .va-dashboard-header__actions :deep(button) {
+    width: 100%;
+  }
+}
+</style>

package/app/components/V/Modal.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title?: string
+  modelValue?: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+</script>
+
+<template>
+  <UModal v-model="isOpen">
+    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            {{ title }}
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-lucide-x" class="-my-1" @click="isOpen = false" />
+        </div>
+      </template>
+
+      <div class="p-4">
+        <slot />
+      </div>
+
+      <template v-if="$slots.footer" #footer>
+        <slot name="footer" />
+      </template>
+    </UCard>
+  </UModal>
+</template>

package/app/components/Va/Blocks/VaBlockGridCharts.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { RevenueData, RevenueCategoriesMultiple, xFormatter, yFormatter, DonutData } from '~/data/dashboardData';
+import { computed } from 'vue';
+
+const props = defineProps<{ childOrder: [0 | 1, 0 | 1] }>();
+
+const flexDirection = computed(() =>
+  props.childOrder[0] === 1 ? 'md:flex-row-reverse' : 'md:flex-row'
+);
+</script>
+<template>
+  <div :class="`flex flex-col ${flexDirection} w-full px-4 md:px-8 mb-6 gap-6`">
+    <div class="w-full md:w-8/12">
+      <VaCardsRevenueBarChartCard
+        title="Revenue"
+        total-value="$4589.00"
+        :data="RevenueData"
+        :categories="RevenueCategoriesMultiple"
+        :y-axis="['total']"
+        :x-formatter="xFormatter"
+        :y-formatter="yFormatter"
+      />
+    </div>
+    <div class="w-full md:w-4/12 relative">
+      <VaCardsDonutChartCard
+        title="Revenue"
+        total-value="$4589.00"
+        :data="DonutData"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Va/Blocks/VaBlockGridKPI.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { SalesData, RevenueDataCard, ReturnsData } from '~/data/dashboardData';
+
+</script>
+<template>
+  <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-6 w-full px-4 md:px-8 mb-6">
+    <div class="w-full md:col-span-1 xl:col-span-2">
+      <VaCardsSalesCard
+        title="Sales"
+        value="1,245"
+        :chart-data="SalesData.chartData"
+        :categories="SalesData.categories"
+      />
+    </div>
+    <div class="w-full md:col-span-1 xl:col-span-2">
+      <VaCardsRevenueCard
+        title="Revenue"
+        value="$58,981.00"
+        :chart-data="RevenueDataCard.chartData"
+        :categories="RevenueDataCard.categories"
+      />
+    </div>
+    <div class="w-full md:col-span-2">
+      <VaCardsReturnsCard
+        title="Returns"
+        value="32"
+        :chart-data="ReturnsData.chartData"
+        :categories="ReturnsData.categories"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Va/Blocks/VaBlockGridTables.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import VaCardsLatestOrdersCard from '../Cards/VaCardsLatestOrdersCard.vue';
+import VaCardsPopularProductsCard from '../Cards/VaCardsPopularProductsCard.vue';
+import { orders, products } from '~/data/dashboardData';
+
+defineProps<{ childOrder: [0 | 1, 0 | 1] }>();
+
+const cardComponents = [VaCardsLatestOrdersCard, VaCardsPopularProductsCard] as const;
+</script>
+<template>
+  <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-6 w-full px-4 md:px-8 mb-6">
+    <component
+      :is="cardComponents[childOrder[0]]"
+      v-bind="childOrder[0] === 0 ? { orders } : { products }"
+      class="col-span-1 md:col-span-2 xl:col-span-3"
+    />
+    <component
+      :is="cardComponents[childOrder[1]]"
+      v-bind="childOrder[1] === 0 ? { orders } : { products }"
+      class="col-span-1 md:col-span-2 xl:col-span-3"
+    />
+  </div>
+</template>

package/app/components/Va/Blocks/VaBlockKpiGrid.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// ...
+</script>
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
+    <slot />
+  </div>
+</template>

package/app/components/Va/Blocks/VaBlockSessionFilterBar.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// ...
+</script>
+<template>
+  <div class="flex space-x-2 p-1 rounded-md">
+    <slot />
+  </div>
+</template>

package/app/components/Va/Cards/VaCardDonutChart.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+interface DonutChartData {
+  name: string;
+  value: number;
+  color: string;
+}
+
+defineProps<{
+  data: DonutChartData[];
+  title: string;
+  totalValue: string;
+}>();
+</script>
+<template>
+  <UCard>
+    <div>
+      <div class="flex items-center justify-between">
+        <h3 class="text-base font-normal text-lg text-highlighted mb-1">{{ title }}</h3>
+      </div>
+      <div class="text-default font-medium dark:font-semibold text-2xl">
+        {{ totalValue }}
+      </div>
+    </div>
+    <DonutChart
+      :data="data.map((i) => i.value)"
+      :height="200"
+      :labels="data"
+      :hide-legend="true"
+      :radius="0"
+    >
+      <div class="absolute text-center">
+        <div class="font-semibold">Categories</div>
+        <div class="">Last 24 hours</div>
+      </div>
+    </DonutChart>
+    <div class="w-full space-y-2 divide-y divide-default">
+      <div
+        class="flex justify-between text-sm text-left py-4 font-medium text-toned tracking-tight"
+      >
+        <div>Category</div>
+        <div>Share</div>
+      </div>
+      <div
+        v-for="(cat, idx) in data"
+        :key="idx"
+        class="flex w-full items-center justify-between pb-2 text-sm text-toned dark:text-muted"
+      >
+        <div class="flex items-center gap-4">
+          <div
+            class="h-4 w-1 rounded"
+            :style="{ backgroundColor: cat.color }"
+          />
+          <div>{{ cat.name }}</div>
+        </div>
+        <div>{{ cat.value }}%</div>
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Cards/VaCardHeader.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="space-y-2">
+    <div class="flex items-start justify-between">
+      <div class="space-y-2">
+        <slot />
+      </div>
+      <slot name="action" />
+    </div>
+  </div>
+</template>

package/app/components/Va/Cards/VaCardKpi.vue

@@ -0,0 +1,17 @@
+<template>
+  <UCard>
+    <div class="flex items-center justify-between">
+      <div class="mb-2"><slot name="label" /></div>
+      <slot name="icon"/>
+    </div>
+    <div class="flex items-baseline mb-2">
+      <span class="text-3xl font-medium dark:font-semibold"><slot name="value" /></span>
+      <span class="ml-2 text-sm font-medium flex items-center">
+        <slot name="trend" />
+      </span>
+    </div>
+    <div class="w-full rounded-md">
+      <slot name="chart" />
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Cards/VaCardKpi2.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+interface KpiCategory {
+  name: string;
+  value: number;
+  budget: number;
+  color: string;
+  trend?: number;
+}
+
+defineProps<KpiCategory>();
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+};
+</script>
+
+<template>
+  <UCard>
+    <div class="mb-2 flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <div class="h-2 w-2 rounded-full" :style="{ backgroundColor: color }" />
+        <span class="font-medium text-default">{{ name }}</span>
+      </div>
+      <div v-if="trend" class="flex items-center gap-2 text-sm">
+        <span :class="trend >= 0 ? 'text-red-500' : 'text-(--ui-primary)'">
+          {{ trend >= 0 ? "+" : "" }}{{ trend }}%
+        </span>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <div class="text-lg font-semibold text-default">
+        {{ formatCurrency(value) }}
+      </div>
+      <div class="text-sm text-toned dark:text-muted">
+        {{ Math.round((value / budget) * 100) }}% of total
+      </div>
+    </div>
+
+    <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-elevated">
+      <div
+        class="h-full rounded-full transition-all duration-300"
+        :style="{
+          backgroundColor: color,
+          width: `${Math.min((value / budget) * 100, 100)}%`,
+        }"
+      />
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Cards/VaCardLatestOrders.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { TableColumn } from "@nuxt/ui";
+
+export interface Order {
+  id: number;
+  customer: string;
+  date: string;
+  total: number;
+  status: 'Paid' | 'Pending' | 'Failed';
+}
+
+defineProps<{
+  orders: Order[];
+}>();
+
+const columns: TableColumn<Order>[] = [
+  {
+    accessorKey: 'id',
+    header: 'Order',
+    cell: (ctx) => `#${ctx.row.getValue('id')}`
+  },
+  {
+    accessorKey: 'customer',
+    header: 'Customer',
+    cell: (ctx) => ctx.row.getValue('customer')
+  },
+  {
+    accessorKey: 'date',
+    header: 'Date',
+    cell: (ctx) => {
+      return new Date(ctx.row.getValue('date')).toLocaleString('en-US', {
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
+      });
+    }
+  },
+  {
+    accessorKey: 'total',
+    header: 'Total',
+    cell: (ctx) => `${ctx.row.getValue('total')}`
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: (ctx) => {
+      const status = ctx.row.getValue('status') as Order['status'];
+      return h(
+        resolveComponent('UBadge'),
+        {
+          label: status,
+          color: status === 'Paid' ? 'success' : status === 'Pending' ? 'warning' : 'error'
+        }
+      );
+    }
+  }
+];
+</script>
+<template>
+  <UCard class="w-full">
+    <div class="flex items-center justify-between">
+      <h3 class="text-base font-semibold text-highlighted">Latest Orders</h3>
+    </div>
+    <UTable
+      :columns="columns"
+      :data="orders"
+      :ui="{ root: 'bg-transparent dark:bg-transparent !border-hidden dark:border-hidden' }"
+    >
+      <template #id="{ row }">
+        #{{ row.id }}
+      </template>
+      <template #status="{ row }">
+        <UBadge
+          :label="row.status"
+          :color="row.status === 'Paid' ? 'success' : row.status === 'Pending' ? 'warning' : 'error'"
+        />
+      </template>
+    </UTable>
+  </UCard>
+</template>

package/app/components/Va/Cards/VaCardPopularProducts.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { h, resolveComponent } from "vue";
+import type { TableColumn } from "@nuxt/ui";
+
+interface Product {
+  id: number;
+  name: string;
+  category: string;
+  stock: number;
+  image: string;
+}
+
+defineProps<{
+  products: Product[];
+}>();
+
+const columns: TableColumn<Product>[] = [
+  {
+    accessorKey: "image",
+    header: "Image",
+    cell: (ctx) => {
+      const image = ctx.row.getValue("image") as string;
+      const name = ctx.row.getValue("name") as string;
+      if (image) {
+        return h(
+          "div",
+          {
+            class:
+              "w-10 h-10 rounded bg-muted flex items-center justify-center overflow-hidden",
+          },
+          [h("img", { src: image, alt: name, class: "object-contain" })]
+        );
+      }
+      return h(
+        "div",
+        {
+          class:
+            "w-10 h-10 rounded bg-muted flex items-center justify-center overflow-hidden",
+        },
+        [h("span", { class: "i-lucide-image text-2xl text-dimmed" })]
+      );
+    },
+  },
+  {
+    accessorKey: "name",
+    header: "Product",
+    cell: (ctx) => ctx.row.getValue("name"),
+  },
+  {
+    accessorKey: "stock",
+    header: "Stock",
+    cell: (ctx) => {
+      const stock = ctx.row.getValue("stock") as number;
+      let label = "In stock",
+        color = "success";
+      if (stock === 0) {
+        label = "Out of stock";
+        color = "error";
+      } else if (stock < 10) {
+        label = "Low stock";
+        color = "warning";
+      }
+      return h(resolveComponent("UBadge"), {
+        label,
+        color,
+        variant: "subtle",
+        class: "font-medium rounded-full px-3 py-1 capitalize",
+      });
+    },
+  },
+];
+</script>
+
+<template>
+  <UCard class="w-full">
+    <div class="flex items-center justify-between">
+      <h3 class="text-base font-semibold text-highlighted">Popular Products</h3>
+    </div>
+    <UTable
+      :columns="columns"
+      :data="products"
+      class="w-full"
+      :ui="{
+        root: 'bg-transparent dark:bg-transparent !border-hidden dark:border-hidden',
+      }"
+    />
+  </UCard>
+</template>