@veristone/nuxt-v-app 0.1.0

package/app/composables/useVFileUpload.ts

@@ -0,0 +1,45 @@
+/**
+ * useXFileUpload - Helper for FormData uploads.
+ * Ported from @xenterprises/nuxt-x-app.
+ */
+export const useXFileUpload = () => {
+  const { success: toastSuccess, error: toastError } = useVToast()
+  const loading = ref(false)
+
+  const upload = async (url: string, file: File | File[], extraData: Record<string, any> = {}) => {
+    loading.value = true
+    const formData = new FormData()
+
+    if (Array.isArray(file)) {
+      file.forEach(f => formData.append('file', f))
+    } else {
+      formData.append('file', file)
+    }
+
+    Object.keys(extraData).forEach(key => {
+      formData.append(key, extraData[key])
+    })
+
+    try {
+      const { data, error } = await useVFetch(url, {
+        method: 'POST',
+        body: formData
+      }, 'Upload')
+
+      if (error.value) throw error.value
+
+      toastSuccess('Upload Successful', 'Files uploaded successfully.')
+      return data.value
+    } catch (err: any) {
+      toastError('Upload Failed', err.message || 'An error occurred during upload.')
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    upload,
+    loading
+  }
+}

package/app/composables/useVToast.ts

@@ -0,0 +1,73 @@
+/**
+ * useVToast - A composable to display toast notifications.
+ * Ported from @xenterprises/nuxt-x-app to match Nuxt V patterns.
+ */
+export function useVToast() {
+  const toast = useToast()
+  const timeout = 3000
+
+  const success = (title: string, description?: string) => {
+    toast.add({
+      title,
+      description,
+      icon: 'i-lucide-check-circle',
+      color: 'green',
+      timeout
+    })
+  }
+
+  const info = (title: string, description?: string) => {
+    toast.add({
+      title,
+      description,
+      icon: 'i-lucide-info',
+      color: 'blue',
+      timeout
+    })
+  }
+
+  const error = (title: string, description?: string) => {
+    toast.add({
+      title,
+      description,
+      icon: 'i-lucide-alert-circle',
+      color: 'red',
+      timeout
+    })
+  }
+
+  const warning = (title: string, description?: string) => {
+    toast.add({
+      title,
+      description,
+      icon: 'i-lucide-alert-triangle',
+      color: 'amber',
+      timeout
+    })
+  }
+
+  const checkError = (
+    err: any,
+    friendlyName: string,
+    action: string,
+    successColor: string = 'green'
+  ) => {
+    if (err.value) {
+      error(
+        `${friendlyName} ${action} failed`,
+        err.value.message || 'An unexpected error occurred.'
+      )
+      return false
+    } else {
+      toast.add({
+        title: `${friendlyName} ${action} successful`,
+        icon: 'i-lucide-check-circle',
+        color: successColor as any,
+        timeout
+      })
+      return true
+    }
+  }
+
+  return { success, info, error, warning, checkError }
+}

package/app/composables/useXATableColumns.ts

@@ -0,0 +1,456 @@
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+
+/**
+ * Composable for creating common table column patterns
+ */
+export function useXATableColumns<T extends Record<string, any>>() {
+  const UBadge = resolveComponent('UBadge')
+  const UButton = resolveComponent('UButton')
+  const UDropdownMenu = resolveComponent('UDropdownMenu')
+  const UAvatar = resolveComponent('UAvatar')
+
+  /**
+   * Create a text column with optional formatting
+   */
+  function textColumn(
+    accessorKey: keyof T & string,
+    header: string,
+    options?: {
+      truncate?: boolean
+      maxWidth?: string
+      class?: string
+    }
+  ): TableColumn<T> {
+    return {
+      accessorKey,
+      header,
+      cell: ({ row }) => {
+        const value = row.getValue(accessorKey)
+        const classes = [options?.class]
+        if (options?.truncate) {
+          classes.push('truncate')
+        }
+        return h('span', {
+          class: classes.filter(Boolean).join(' '),
+          style: options?.maxWidth ? { maxWidth: options.maxWidth } : undefined,
+          title: options?.truncate ? String(value) : undefined
+        }, String(value ?? ''))
+      }
+    }
+  }
+
+  /**
+   * Create a date column with formatting
+   */
+  function dateColumn(
+    accessorKey: keyof T & string,
+    header: string,
+    options?: {
+      format?: Intl.DateTimeFormatOptions
+      locale?: string
+      relative?: boolean
+    }
+  ): TableColumn<T> {
+    const defaultFormat: Intl.DateTimeFormatOptions = {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric'
+    }
+
+    return {
+      accessorKey,
+      header,
+      cell: ({ row }) => {
+        const value = row.getValue(accessorKey)
+        if (!value) return '-'
+
+        const date = new Date(value as string | number | Date)
+        if (isNaN(date.getTime())) return String(value)
+
+        if (options?.relative) {
+          return formatRelativeTime(date)
+        }
+
+        return date.toLocaleDateString(
+          options?.locale ?? 'en-US',
+          options?.format ?? defaultFormat
+        )
+      }
+    }
+  }
+
+  /**
+   * Create a datetime column with time
+   */
+  function dateTimeColumn(
+    accessorKey: keyof T & string,
+    header: string,
+    options?: {
+      format?: Intl.DateTimeFormatOptions
+      locale?: string
+    }
+  ): TableColumn<T> {
+    const defaultFormat: Intl.DateTimeFormatOptions = {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    }
+
+    return {
+      accessorKey,
+      header,
+      cell: ({ row }) => {
+        const value = row.getValue(accessorKey)
+        if (!value) return '-'
+
+        const date = new Date(value as string | number | Date)
+        if (isNaN(date.getTime())) return String(value)
+
+        return date.toLocaleString(
+          options?.locale ?? 'en-US',
+          options?.format ?? defaultFormat
+        )
+      }
+    }
+  }
+
+  /**
+   * Create a currency/money column
+   */
+  function currencyColumn(
+    accessorKey: keyof T & string,
+    header: string,
+    options?: {
+      currency?: string
+      locale?: string
+      minimumFractionDigits?: number
+      maximumFractionDigits?: number
+    }
+  ): TableColumn<T> {
+    return {
+      accessorKey,
+      header: () => h('div', { class: 'text-right' }, header),
+      cell: ({ row }) => {
+        const value = row.getValue(accessorKey)
+        if (value === null || value === undefined) return h('div', { class: 'text-right' }, '-')
+
+        const amount = Number(value)
+        if (isNaN(amount)) return h('div', { class: 'text-right' }, String(value))
+
+        const formatted = new Intl.NumberFormat(options?.locale ?? 'en-US', {
+          style: 'currency',
+          currency: options?.currency ?? 'USD',
+          minimumFractionDigits: options?.minimumFractionDigits ?? 2,
+          maximumFractionDigits: options?.maximumFractionDigits ?? 2
+        }).format(amount)
+
+        return h('div', { class: 'text-right font-medium' }, formatted)
+      }
+    }
+  }
+
+  /**
+   * Create a number column with formatting
+   */
+  function numberColumn(
+    accessorKey: keyof T & string,
+    header: string,
+    options?: {
+      locale?: string
+      minimumFractionDigits?: number
+      maximumFractionDigits?: number
+      align?: 'left' | 'center' | 'right'
+    }
+  ): TableColumn<T> {
+    const align = options?.align ?? 'right'
+    const alignClass = {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right'
+    }[align]
+
+    return {
+      accessorKey,
+      header: () => h('div', { class: alignClass }, header),
+      cell: ({ row }) => {
+        const value = row.getValue(accessorKey)
+        if (value === null || value === undefined) return h('div', { class: alignClass }, '-')
+
+        const num = Number(value)
+        if (isNaN(num)) return h('div', { class: alignClass }, String(value))
+
+        const formatted = new Intl.NumberFormat(options?.locale ?? 'en-US', {
+          minimumFractionDigits: options?.minimumFractionDigits,
+          maximumFractionDigits: options?.maximumFractionDigits
+        }).format(num)
+
+        return h('div', { class: alignClass }, formatted)
+      }
+    }
+  }
+
+  /**
+   * Create a badge/status column
+   */
+  function badgeColumn<K extends keyof T & string>(
+    accessorKey: K,
+    header: string,
+    colorMap: Record<string, 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'>,
+    options?: {
+      variant?: 'solid' | 'outline' | 'soft' | 'subtle'
+      capitalize?: boolean
+      labelMap?: Record<string, string>
+    }
+  ): TableColumn<T> {
+    return {
+      accessorKey,
+      header,
+      cell: ({ row }) => {
+        const value = String(row.getValue(accessorKey) ?? '')
+        const color = colorMap[value] ?? 'neutral'
+        const label = options?.labelMap?.[value] ?? value
+
+        return h(UBadge, {
+          color,
+          variant: options?.variant ?? 'subtle',
+          class: options?.capitalize !== false ? 'capitalize' : ''
+        }, () => label)
+      }
+    }
+  }
+
+  /**
+   * Create a boolean column with badge display
+   */
+  function booleanColumn(
+    accessorKey: keyof T & string,
+    header: string,
+    options?: {
+      trueLabel?: string
+      falseLabel?: string
+      trueColor?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+      falseColor?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+    }
+  ): TableColumn<T> {
+    return {
+      accessorKey,
+      header,
+      cell: ({ row }) => {
+        const value = Boolean(row.getValue(accessorKey))
+        return h(UBadge, {
+          color: value ? (options?.trueColor ?? 'success') : (options?.falseColor ?? 'neutral'),
+          variant: 'subtle'
+        }, () => value ? (options?.trueLabel ?? 'Yes') : (options?.falseLabel ?? 'No'))
+      }
+    }
+  }
+
+  /**
+   * Create an avatar column
+   */
+  function avatarColumn(
+    accessorKey: keyof T & string,
+    header: string,
+    options?: {
+      size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+      nameKey?: keyof T & string
+      fallbackIcon?: string
+    }
+  ): TableColumn<T> {
+    return {
+      accessorKey,
+      header,
+      cell: ({ row }) => {
+        const src = row.getValue(accessorKey) as string | undefined
+        const name = options?.nameKey ? (row.original as T)[options.nameKey] as string : undefined
+
+        return h(UAvatar, {
+          src,
+          alt: name,
+          size: options?.size ?? 'sm',
+          icon: options?.fallbackIcon ?? 'i-lucide-user'
+        })
+      }
+    }
+  }
+
+  /**
+   * Create a user column with avatar and name/email
+   */
+  function userColumn(
+    config: {
+      avatarKey?: keyof T & string
+      nameKey: keyof T & string
+      emailKey?: keyof T & string
+    },
+    header: string
+  ): TableColumn<T> {
+    return {
+      id: 'user',
+      header,
+      cell: ({ row }) => {
+        const original = row.original as T
+        const avatar = config.avatarKey ? original[config.avatarKey] as string : undefined
+        const name = original[config.nameKey] as string
+        const email = config.emailKey ? original[config.emailKey] as string : undefined
+
+        return h('div', { class: 'flex items-center gap-3' }, [
+          h(UAvatar, {
+            src: avatar,
+            alt: name,
+            size: 'sm',
+            icon: 'i-lucide-user'
+          }),
+          h('div', { class: 'flex flex-col' }, [
+            h('span', { class: 'font-medium text-gray-900 dark:text-white' }, name),
+            email ? h('span', { class: 'text-sm text-gray-500 dark:text-gray-400' }, email) : null
+          ].filter(Boolean))
+        ])
+      }
+    }
+  }
+
+  /**
+   * Create an actions column with dropdown menu
+   */
+  function actionsColumn(
+    getActions: (row: T) => Array<{
+      label: string
+      icon?: string
+      color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+      disabled?: boolean
+      onClick: () => void
+    } | 'separator'>,
+    options?: {
+      header?: string
+      icon?: string
+    }
+  ): TableColumn<T> {
+    return {
+      id: 'actions',
+      header: () => h('div', { class: 'text-right' }, options?.header ?? ''),
+      cell: ({ row }) => {
+        const actions = getActions(row.original as T)
+        const items = actions.map(action => {
+          if (action === 'separator') {
+            return { type: 'separator' as const }
+          }
+          return {
+            label: action.label,
+            icon: action.icon,
+            color: action.color,
+            disabled: action.disabled,
+            onSelect: action.onClick
+          }
+        })
+
+        return h('div', { class: 'text-right' }, [
+          h(UDropdownMenu, {
+            items: [items]
+          }, {
+            default: () => h(UButton, {
+              icon: options?.icon ?? 'i-lucide-ellipsis-vertical',
+              color: 'neutral',
+              variant: 'ghost',
+              size: 'xs'
+            })
+          })
+        ])
+      },
+      enableSorting: false,
+      enableHiding: false,
+      size: 60
+    }
+  }
+
+  /**
+   * Create a link column
+   */
+  function linkColumn(
+    accessorKey: keyof T & string,
+    header: string,
+    getHref: (row: T) => string,
+    options?: {
+      external?: boolean
+      class?: string
+    }
+  ): TableColumn<T> {
+    return {
+      accessorKey,
+      header,
+      cell: ({ row }) => {
+        const value = row.getValue(accessorKey)
+        const href = getHref(row.original as T)
+
+        return h('a', {
+          href,
+          target: options?.external ? '_blank' : undefined,
+          rel: options?.external ? 'noopener noreferrer' : undefined,
+          class: options?.class ?? 'text-primary-500 hover:text-primary-600 hover:underline'
+        }, String(value ?? ''))
+      }
+    }
+  }
+
+  /**
+   * Create a sortable column header
+   */
+  function sortableHeader(
+    accessorKey: keyof T & string,
+    header: string
+  ): TableColumn<T> {
+    return {
+      accessorKey,
+      header: ({ column }) => {
+        const isSorted = column.getIsSorted()
+        return h(UButton, {
+          color: 'neutral',
+          variant: 'ghost',
+          label: header,
+          icon: isSorted
+            ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow')
+            : 'i-lucide-arrow-up-down',
+          class: '-mx-2.5',
+          onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
+        })
+      }
+    }
+  }
+
+  return {
+    textColumn,
+    dateColumn,
+    dateTimeColumn,
+    currencyColumn,
+    numberColumn,
+    badgeColumn,
+    booleanColumn,
+    avatarColumn,
+    userColumn,
+    actionsColumn,
+    linkColumn,
+    sortableHeader
+  }
+}
+
+// Helper function for relative time
+function formatRelativeTime(date: Date): string {
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffSecs = Math.floor(diffMs / 1000)
+  const diffMins = Math.floor(diffSecs / 60)
+  const diffHours = Math.floor(diffMins / 60)
+  const diffDays = Math.floor(diffHours / 24)
+
+  if (diffSecs < 60) return 'just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+  if (diffDays < 7) return `${diffDays}d ago`
+
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+export type { TableColumn }

package/app/data/BillingStats.ts

@@ -0,0 +1,65 @@
+// Billing data for dashboard components
+
+export interface BillingData {
+  month: string
+  apiCalls: number
+  storage: number
+  users: number
+}
+
+export const BillingData: BillingData[] = [
+  { month: 'Jan', apiCalls: 120, storage: 80, users: 320 },
+  { month: 'Feb', apiCalls: 150, storage: 85, users: 340 },
+  { month: 'Mar', apiCalls: 170, storage: 90, users: 360 },
+  { month: 'Apr', apiCalls: 140, storage: 95, users: 355 },
+  { month: 'May', apiCalls: 180, storage: 100, users: 370 },
+  { month: 'Jun', apiCalls: 210, storage: 105, users: 390 },
+  { month: 'Jul', apiCalls: 190, storage: 110, users: 400 },
+  { month: 'Aug', apiCalls: 200, storage: 115, users: 410 },
+  { month: 'Sep', apiCalls: 220, storage: 120, users: 420 },
+  { month: 'Oct', apiCalls: 230, storage: 125, users: 430 },
+  { month: 'Nov', apiCalls: 210, storage: 130, users: 440 },
+  { month: 'Dec', apiCalls: 240, storage: 135, users: 450 }
+]
+
+export interface KPIStat {
+  label: string
+  value: string
+  change: string
+  changeType: 'positive' | 'negative' | 'neutral'
+}
+
+// Calculate stats based on BillingData
+const latest = BillingData[BillingData.length - 1]
+const prev = BillingData[BillingData.length - 2]
+
+export const BillingStats: KPIStat[] = [
+  {
+    label: 'Current Plan',
+    value: 'Basic',
+    change: '+0%',
+    changeType: 'neutral'
+  },
+  {
+    label: 'Monthly Spend',
+    value: '$0.00',
+    change: '+0%',
+    changeType: 'neutral'
+  },
+  {
+    label: 'Usage This Month',
+    value: latest ? latest.apiCalls.toLocaleString() : '-',
+    change:
+      latest && prev && prev.apiCalls
+        ? `${(latest.apiCalls - prev.apiCalls) / prev.apiCalls > 0 ? '+' : ''}${(((latest.apiCalls - prev.apiCalls) / prev.apiCalls) * 100).toFixed(0)}%`
+        : '+0%',
+    changeType:
+      latest && prev && prev.apiCalls
+        ? latest.apiCalls > prev.apiCalls
+          ? 'positive'
+          : latest.apiCalls < prev.apiCalls
+            ? 'negative'
+            : 'neutral'
+        : 'neutral'
+  }
+]

package/app/data/SearchData.ts

@@ -0,0 +1,58 @@
+// Search data for chart components
+
+export interface QueryData {
+  query: string
+  impressions: number
+  clicks: number
+  ctr: number
+  averagePosition: number
+}
+
+export interface DetailedDateData {
+  date: string
+  queries: QueryData[]
+}
+
+export const DetailedSearchQueryData: DetailedDateData[] = [
+  {
+    date: '2023-01-01',
+    queries: [
+      { query: 'example query 1', impressions: 1500, clicks: 100, ctr: 6.67, averagePosition: 20.1 },
+      { query: 'another search term', impressions: 2000, clicks: 150, ctr: 7.5, averagePosition: 25.3 },
+      { query: 'product type A', impressions: 800, clicks: 60, ctr: 7.5, averagePosition: 30.5 },
+      { query: 'brand name xyz', impressions: 1000, clicks: 78, ctr: 7.8, averagePosition: 18.9 }
+    ]
+  },
+  {
+    date: '2023-01-08',
+    queries: [
+      { query: 'example query 1', impressions: 1700, clicks: 120, ctr: 7.06, averagePosition: 18.5 },
+      { query: 'another search term', impressions: 2200, clicks: 170, ctr: 7.73, averagePosition: 23.0 },
+      { query: 'product type A', impressions: 900, clicks: 70, ctr: 7.78, averagePosition: 28.1 },
+      { query: 'brand name xyz', impressions: 1100, clicks: 85, ctr: 7.73, averagePosition: 17.5 },
+      { query: 'service offering B', impressions: 350, clicks: 27, ctr: 7.71, averagePosition: 33.2 }
+    ]
+  },
+  {
+    date: '2023-01-15',
+    queries: [
+      { query: 'example query 1', impressions: 1850, clicks: 135, ctr: 7.3, averagePosition: 17.2 },
+      { query: 'another search term', impressions: 2400, clicks: 185, ctr: 7.71, averagePosition: 21.5 },
+      { query: 'product type A', impressions: 1000, clicks: 80, ctr: 8.0, averagePosition: 26.8 },
+      { query: 'brand name xyz', impressions: 1200, clicks: 90, ctr: 7.5, averagePosition: 16.0 },
+      { query: 'service offering B', impressions: 400, clicks: 30, ctr: 7.5, averagePosition: 31.5 },
+      { query: 'how to do something', impressions: 200, clicks: 15, ctr: 7.5, averagePosition: 40.0 }
+    ]
+  },
+  {
+    date: '2023-01-22',
+    queries: [
+      { query: 'example query 1', impressions: 2000, clicks: 150, ctr: 7.5, averagePosition: 16.0 },
+      { query: 'another search term', impressions: 2600, clicks: 200, ctr: 7.69, averagePosition: 20.0 },
+      { query: 'product type A', impressions: 1100, clicks: 85, ctr: 7.73, averagePosition: 25.5 },
+      { query: 'brand name xyz', impressions: 1300, clicks: 100, ctr: 7.69, averagePosition: 15.0 },
+      { query: 'service offering B', impressions: 450, clicks: 35, ctr: 7.78, averagePosition: 30.0 },
+      { query: 'how to do something', impressions: 250, clicks: 20, ctr: 8.0, averagePosition: 38.0 }
+    ]
+  }
+]