@veristone/nuxt-v-app 0.1.0

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { BillingData } from '~/data/BillingStats'
+
+const props = defineProps<{
+  data: Array<BillingData>
+}>()
+
+const colorMode = useColorMode()
+
+const categories = computed(() => ({
+  apiCalls: {
+    name: 'API Calls',
+    color: '#5D5AA1'
+  },
+  storage: {
+    name: 'Storage (GB)',
+    color: '#7B9EA8'
+  },
+  users: {
+    name: 'Users',
+    color: '#f59e42'
+  }
+}))
+
+const markerConfig = {
+  id: 'area-chart',
+  config: {
+    apiCalls: {
+      type: 'circle' as const,
+      size: 8,
+      color: '#5D5AA1',
+      strokeColor: '#8A88C7',
+      strokeWidth: 1
+    },
+    storage: {
+      type: 'circle' as const,
+      size: 8,
+      color: '#7B9EA8',
+      strokeColor: '#A3C1CC',
+      strokeWidth: 1
+    },
+    users: {
+      type: 'circle' as const,
+      size: 8,
+      color: '#f59e42',
+      strokeColor: '#ffc285',
+      strokeWidth: 1
+    }
+  }
+}
+
+const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
+  return props.data[tick]?.month ?? ''
+}
+</script>
+
+<template>
+  <AreaChart
+    :key="colorMode.value"
+    :data="data"
+    :height="240"
+    :x-num-ticks="12"
+    :y-num-ticks="4"
+    :categories="categories"
+    :x-formatter="xFormatter"
+    :y-grid-line="true"
+    :marker-config="markerConfig"
+    :curve-type="CurveType.MonotoneX"
+    :legend-position="LegendPosition.BottomCenter"
+    :hide-legend="false"
+  />
+</template>
+
+<style scoped>
+#area-chart:deep(*[stroke='#5D5AA1']) {
+  marker: url('#area-chart-apiCalls');
+}
+#area-chart:deep(*[stroke='#7B9EA8']) {
+  marker: url('#area-chart-storage');
+}
+#area-chart:deep(*[stroke='#f59e42']) {
+  marker: url('#area-chart-users');
+}
+</style>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { BillingData } from '~/data/BillingStats'
+
+const props = defineProps<{
+  data: Array<BillingData>
+}>()
+
+const colorMode = useColorMode()
+
+const categories = computed(() => ({
+  apiCalls: {
+    name: 'API Calls',
+    color: colorMode.value === 'dark' ? '#5D5AA1' : '#5D5AA1'
+  },
+  storage: {
+    name: 'Storage (GB)',
+    color: colorMode.value === 'dark' ? '#7B9EA8' : '#3b82f6'
+  },
+  users: {
+    name: 'Users',
+    color: colorMode.value === 'dark' ? '#fb923c' : '#f59e42'
+  }
+}))
+
+const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
+  return props.data[tick]?.month ?? ''
+}
+</script>
+
+<template>
+  <BarChart
+    :key="colorMode.value"
+    :data="data"
+    :height="240"
+    :stacked="true"
+    :x-num-ticks="12"
+    :categories="categories"
+    :x-formatter="xFormatter"
+    :y-grid-line="true"
+    :radius="4"
+    :bar-padding="0.7"
+    :y-axis="['apiCalls', 'storage', 'users']"
+    :legend-position="LegendPosition.BottomCenter"
+    :hide-legend="false"
+  />
+</template>

package/app/components/Va/Layout/NotificationsSlideover.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { formatTimeAgo } from '@vueuse/core'
+import type { Notification } from '~/types'
+import type { TabsItem } from '@nuxt/ui'
+
+const { isNotificationsSlideoverOpen } = useDashboard()
+
+const { data: notifications } = await useFetch<Notification[]>('/api/notifications')
+
+const tabs: TabsItem[] = [
+  {
+    label: 'Today',
+    value: 'today',
+    icon: 'i-lucide-sun'
+  },
+  {
+    label: 'This Week',
+    value: 'week',
+    icon: 'i-lucide-calendar'
+  },
+  {
+    label: 'Earlier',
+    value: 'earlier',
+    icon: 'i-lucide-history'
+  }
+]
+
+const now = new Date()
+const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
+
+const currentFilter = ref('today')
+const currentNotification = ref()
+
+const filteredNotifications = computed(() => notifications?.value?.filter((notification) => {
+  const notificationDate = new Date(notification.date)
+  if (currentFilter.value === 'today') {
+    return notificationDate >= today
+  } else if (currentFilter.value === 'week') {
+    return notificationDate >= weekAgo && notificationDate < today
+  } else {
+    return notificationDate < weekAgo
+  }
+}))
+
+function toggleNotification(notification) {
+  currentNotification.value = notification
+}
+
+function isActive(notificationId: string) {
+  return currentNotification.value && currentNotification.value.id === notificationId
+}
+</script>
+
+<template>
+  <USlideover
+    v-model:open="isNotificationsSlideoverOpen"
+    title="Notifications"
+    class="m-4 rounded-xl"
+    :ui="{
+      overlay: 'bg-black/50',
+      content: 'bg-default',
+      body: 'p-2 sm:p-4'
+    }"
+  >
+    <template #body>
+      <UTabs
+        v-model="currentFilter"
+        :items="tabs"
+        color="neutral"
+      >
+        <template #content>
+          <div class=" mt-4">
+            <div
+              v-for="notification in filteredNotifications"
+              :key="notification.id"
+              class=""
+              @click="toggleNotification(notification)"
+            >
+              <div
+                class="px-3 rounded-md hover:bg-elevated/50 flex items-start gap-5 relative block cursor-pointer"
+                :class="isActive(notification.id) ? 'py-4 bg-elevated/50' : 'py-4'"
+              >
+                <UChip
+                  color="error"
+                  :show="!!notification.unread"
+                  inset
+                >
+                  <UAvatar
+                    v-bind="notification.sender.avatar"
+                    :alt="notification.sender.name"
+                    size="xl"
+                  />
+                </UChip>
+
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center justify-between">
+                    <div class="flex items-center justify-start gap-2">
+                      <span class="text-highlighted font-medium truncate">{{ notification.sender.name }}</span>
+
+                      <time
+                        :datetime="notification.date"
+                        class="text-muted text-xs whitespace-nowrap"
+                        v-text="formatTimeAgo(new Date(notification.date))"
+                      />
+                    </div>
+                    <div>
+                      <UDropdownMenu
+                        :items="[
+                          [
+                            {
+                              label: notification.sender.name,
+                              type: 'label'
+                            }
+                          ],
+                          [
+                            {
+                              label: 'Mark as read',
+                              onSelect: () => {
+                                // Handle mark as read
+                              }
+                            },
+                            {
+                              label: 'Edit',
+                              onSelect: () => {
+                                // Handle edit
+                              }
+                            }
+                          ]
+                        ]"
+                      >
+                        <UButton
+                          icon="i-lucide-ellipsis-vertical"
+                          variant="link"
+                          size="xs"
+                        />
+                      </UDropdownMenu>
+                    </div>
+                  </div>
+
+                  <p class="text-dimmed truncate text-sm">
+                    {{ notification.body }}
+                  </p>
+
+                  <div
+                    v-show="isActive(notification.id)"
+                    class="flex gap-2 mt-2"
+                  >
+                    <UButton
+                      label="Ignore"
+                      variant="soft"
+                      size="sm"
+                    />
+                    <UButton
+                      label="Accept"
+                      variant="solid"
+                      color="primary"
+                      size="sm"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </UTabs>
+    </template>
+  </USlideover>
+</template>

package/app/components/Va/Layout/SideNav/types.ts

@@ -0,0 +1,5 @@
+import type { NavigationMenuItem as NuxtNavigationMenuItem } from '@nuxt/ui'
+
+export interface NavigationMenuItem extends NuxtNavigationMenuItem {
+  open?: boolean
+}

package/app/components/Va/Layout/SideNav.vue

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import type { NavigationMenuItem } from './SideNav/types'
+
+const props = withDefaults(defineProps<{
+  items: NavigationMenuItem[]
+  collapsed?: boolean
+}>(), {
+  collapsed: false
+})
+
+const route = useRoute()
+
+const openItems = ref(
+  props.items.reduce((acc, item, index) => {
+    acc[index] = item.open ?? true
+    return acc
+  }, {} as Record<number, boolean>)
+)
+
+const toggleItem = (index: number) => {
+  openItems.value[index] = !openItems.value[index]
+}
+
+const isItemOpen = (index: number) => {
+  return openItems.value[index] ?? true
+}
+</script>
+
+<template>
+  <div>
+    <div class="space-y-4">
+      <NuxtLink
+        to="/"
+        class="mt-2 block"
+      >
+        <UButton
+          :ui="{ leadingIcon: 'size-4 mr-1' }"
+          class="w-full cursor-pointer"
+          icon="i-lucide-house"
+          variant="link"
+          active-variant="soft"
+          :active="route.path === '/'"
+          :label="collapsed ? '' : 'Overview'"
+        />
+      </NuxtLink>
+
+      <hr class="bg-(--ui-border) border-default">
+
+      <div
+        v-for="(item, itemKey) in props.items"
+        :key="itemKey"
+        class="border-b border-default"
+        :class="collapsed ? 'space-y-2' : ' px-2'"
+      >
+        <UButton
+          v-if="!collapsed"
+          variant="ghost"
+          color="neutral"
+          class="w-full justify-between uppercase text-xs font-medium tracking-wider mb-2 px-2"
+          @click="toggleItem(itemKey)"
+        >
+          <template #leading>
+            <span>{{ item.label }}</span>
+          </template>
+          <template #trailing>
+            <UIcon
+              name="i-lucide-chevron-down"
+              class="size-4 transition-transform duration-200"
+              :class="{ '-rotate-180': !isItemOpen(itemKey) }"
+            />
+          </template>
+        </UButton>
+        <div
+          v-if="!collapsed"
+          class="overflow-hidden transition-all duration-200"
+          :class="isItemOpen(itemKey) ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'"
+        >
+          <NuxtLink
+            v-for="child in item.children"
+            :key="child.label"
+            :to="child.to"
+            class="w-full block px-1.5 py-1.5 flex items-center gap-2 hover:text-default text-sm last:mb-4"
+            :class="route.path === child.to ? 'text-default' : 'text-muted'"
+          >
+            <UIcon
+              :name="child.icon"
+              class="text-muted size-4"
+              :class="collapsed ? '' : 'mr-1'"
+            />
+            <span v-if="!collapsed">{{ child.label }}</span>
+          </NuxtLink>
+        </div>
+        <template v-if="collapsed">
+          <UButton
+            v-for="child in item.children"
+            :key="child.label"
+            :to="child.to"
+            variant="link"
+            color="neutral"
+            :active="route.path === child.to"
+            class="w-full justify-center px-1.5"
+            :icon="child.icon"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Va/Layout/TeamsMenu.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+defineProps<{
+  collapsed?: boolean
+}>()
+
+const teams = ref([
+  {
+    label: 'Nuxt Charts',
+    avatar: {
+      src: '/logo.png',
+      alt: 'Nuxt Charts'
+    }
+  },
+  {
+    label: 'NuxtHub',
+    avatar: {
+      src: 'https://github.com/nuxt-hub.png',
+      alt: 'NuxtHub'
+    }
+  }
+])
+const selectedTeam = ref(teams.value[0])
+
+const items = computed<DropdownMenuItem[][]>(() => {
+  return [
+    teams.value.map(team => ({
+      ...team,
+      onSelect() {
+        selectedTeam.value = team
+      }
+    }))
+  ]
+})
+</script>
+
+<template>
+  <UDropdownMenu
+    :items="items"
+    :content="{ align: 'center', collisionPadding: 12 }"
+    :ui="{
+      content: collapsed ? 'w-40' : 'w-(--reka-dropdown-menu-trigger-width)'
+    }"
+  >
+    <UButton
+      v-bind="{
+        ...selectedTeam,
+        label: collapsed ? undefined : selectedTeam?.label,
+        trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
+      }"
+      variant="ghost"
+      block
+      :square="collapsed"
+    />
+  </UDropdownMenu>
+</template>

package/app/components/Va/Layout/UserMenu.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+defineProps<{
+  collapsed?: boolean
+}>()
+
+const user = ref({
+  name: 'Demo User',
+  avatar: {
+    src: 'https://api.dicebear.com/7.x/avataaars/svg?seed=demo',
+    alt: 'Demo User'
+  }
+})
+
+const items = computed<DropdownMenuItem[][]>(() => ([[{
+  type: 'label',
+  label: user.value.name,
+  avatar: user.value.avatar
+}], [{
+  label: 'Profile',
+  icon: 'i-lucide-user'
+}], [{
+  label: 'Log out',
+  icon: 'i-lucide-log-out'
+}]]))
+</script>
+
+<template>
+  <UDropdownMenu
+    :items="items"
+    :content="{ align: 'center', collisionPadding: 12 }"
+    :ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
+  >
+    <UButton
+      v-bind="{
+        ...user,
+        label: collapsed ? undefined : user?.name,
+        trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
+      }"
+      color="neutral"
+      variant="ghost"
+      block
+      :square="collapsed"
+      class="data-[state=open]:bg-elevated"
+      :ui="{
+        trailingIcon: 'text-dimmed'
+      }"
+    />
+
+    <!-- REMOVED: #chip-leading slot causes Vue 3.5 SSR error "Cannot read properties of null (reading 'ce')"
+         This is a known issue with custom slots in UDropdownMenu during SSR rendering.
+         The chip color indicator is a nice-to-have feature that can be re-added when the upstream issue is fixed.
+         See: https://github.com/vuejs/core/issues/4344, https://github.com/nuxt/nuxt/issues/28468
+    -->
+  </UDropdownMenu>
+</template>

package/app/composables/useDashboard.ts

@@ -0,0 +1,25 @@
+import { createSharedComposable } from '@vueuse/core'
+
+const _useDashboard = () => {
+  const route = useRoute()
+  const router = useRouter()
+  const isNotificationsSlideoverOpen = ref(false)
+
+  defineShortcuts({
+    'g-h': () => router.push('/'),
+    'g-i': () => router.push('/inbox'),
+    'g-c': () => router.push('/customers'),
+    'g-s': () => router.push('/settings'),
+    'n': () => isNotificationsSlideoverOpen.value = !isNotificationsSlideoverOpen.value
+  })
+
+  watch(() => route.fullPath, () => {
+    isNotificationsSlideoverOpen.value = false
+  })
+
+  return {
+    isNotificationsSlideoverOpen
+  }
+}
+
+export const useDashboard = createSharedComposable(_useDashboard)